'use strict';

var React = require('react');
var classnames = require('classnames');

const SegmentedControlContext = React.createContext({
    handleChange: () => ({}),
    selectedValue: null,
    segmentedControlName: "",
});
const useSegmentedControl = () => {
    return React.useContext(SegmentedControlContext);
};
function SegmentedControlProvider({ children, selectedValue, onSelectValue, defaultValue, name, }) {
    const isControlled = selectedValue !== undefined && onSelectValue !== undefined;
    const [internalSelectedValue, setInternalSelectedValue] = React.useState(defaultValue);
    const handleChange = React.useCallback(event => {
        const value = event.target.value;
        if (!isControlled) {
            setInternalSelectedValue(value);
        }
        onSelectValue === null || onSelectValue === void 0 ? void 0 : onSelectValue(value);
    }, [onSelectValue, isControlled]);
    const currentSelectedOption = isControlled
        ? selectedValue
        : internalSelectedValue;
    return (React.createElement(SegmentedControlContext.Provider, { value: {
            handleChange,
            selectedValue: currentSelectedOption,
            segmentedControlName: name,
        } }, children));
}

function SegmentedControlOption({ value, children, ariaLabel, }) {
    const { selectedValue, handleChange, segmentedControlName } = useSegmentedControl();
    const localChecked = React.useMemo(() => selectedValue === value, [selectedValue, value]);
    const inputId = `${value.toString()}_${React.useId()}`;
    return (React.createElement(React.Fragment, null,
        React.createElement("input", { type: "radio", id: inputId, name: segmentedControlName, checked: localChecked, value: value, onChange: handleChange, "aria-label": ariaLabel, tabIndex: localChecked ? 0 : -1 }),
        React.createElement("label", { htmlFor: inputId }, children)));
}

var styles = {"container":"FDDKTZkTdfM-","small":"V41prM1xcKI-","large":"DbXvfxdDF-c-","spinning":"iKliBX-y4ec-"};

const SegmentedControlBase = React.forwardRef(function SegmentedControlBase({ children, size = "base" }, ref) {
    const optionCount = React.Children.count(children);
    const containerClassNames = classnames(styles.container, {
        [styles.small]: size === "small",
        [styles.large]: size === "large",
    });
    return (React.createElement("div", { ref: ref, className: containerClassNames, role: "radiogroup", style: {
            "--segmentedControl--option-count": optionCount,
        } },
        children,
        React.createElement("span", null)));
});

function SegmentedControl({ selectedValue, onSelectValue, defaultValue, children, name = React.useId(), size = "base", }) {
    const container = React.useRef(null);
    return (React.createElement(SegmentedControlProvider, { selectedValue: selectedValue, onSelectValue: onSelectValue, defaultValue: defaultValue, name: name },
        React.createElement(SegmentedControlBase, { ref: container, size: size }, children)));
}
SegmentedControl.Option = SegmentedControlOption;
SegmentedControl.Base = SegmentedControlBase;

exports.SegmentedControl = SegmentedControl;
exports.SegmentedControlContext = SegmentedControlContext;
exports.SegmentedControlProvider = SegmentedControlProvider;
exports.useSegmentedControl = useSegmentedControl;
