"use strict";
Object.defineProperty(exports, "__esModule", {
    value: true
});
Object.defineProperty(exports, "SegmentedButton", {
    enumerable: true,
    get: function() {
        return SegmentedButton;
    }
});
const _jsxruntime = require("react/jsx-runtime");
const _react = /*#__PURE__*/ _interop_require_default(require("react"));
const _css = require("../utils/css");
function _interop_require_default(obj) {
    return obj && obj.__esModule ? obj : {
        default: obj
    };
}
const SegmentedButton = (props)=>{
    if (props.buttons.length < 2) {
        // throw new Error("SegmentedButton must have more than one button");
        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
            className: "orderly-text-red-500",
            children: "SegmentedButton must have more than one button"
        });
    }
    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
        id: props.id,
        className: "orderly-flex orderly-flex-row orderly-gap-[36px]",
        children: props.buttons.map((item, index)=>{
            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Button, {
                id: item.id,
                label: item.label,
                value: item.value,
                index: index,
                isActive: item.value === props.value,
                className: item.className,
                activeClassName: item.activeClassName,
                onChange: props.onChange,
                disabled: item.disabled,
                disabledClassName: item.disabledClassName
            }, index);
        })
    });
};
const _Button = ({ id, label, value, isActive, index, onChange, className, disabled, activeClassName, disabledClassName })=>{
    const isFirstChild = index === 0;
    return /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
        id: id,
        type: "button",
        onClick: (event)=>onChange(value),
        disabled: disabled,
        className: (0, _css.cn)("orderly-min-w-0 orderly-flex-1 orderly-py-1 orderly-bg-base-700 orderly-text-base-contrast/20 desktop:orderly-text-xs orderly-relative after:orderly-block after:orderly-bg-base-700 after:orderly-absolute after:orderly-w-[30px] after:orderly-h-full after:orderly-top-0 after:orderly-z-10 orderly-h-[32px] desktop:orderly-h-[40px]", isActive && "orderly-bg-primary after:orderly-bg-primary", isFirstChild && "orderly-rounded-l after:orderly-right-[-15px] after:orderly-skew-x-[-25deg] orderly-pl-[15px]", !isFirstChild && "orderly-rounded-r after:orderly-left-[-15px] after:orderly-skew-x-[-25deg] orderly-pr-[15px]", `orderly-segmented-button orderly-segmented-button-${value?.toLowerCase()}`, className, isActive && activeClassName, disabled && disabledClassName),
        "data-state": isActive ? "active" : "inactive",
        children: label
    });
};

//# sourceMappingURL=segmented.js.map