'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useControlled, useGDS } from "../hooks/index.js";
import { cn, splitProps } from "../utils/index.js";
import { Checkable } from "./base/Checkable.js";
export function SwitchRoot({ size, children: label, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, name, value, checked: controlledChecked, defaultChecked, onChange, disabled = false, className, ...props }) {
    useGDS();
    const { rootProps, nestedProps } = splitProps(props);
    const [checked, setChecked] = useControlled(controlledChecked, defaultChecked ?? false, onChange);
    return (_jsx(Checkable, { size: size, label: label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, name: name, value: value, checked: checked, disabled: disabled, className: cn('gds-switch', className), ...rootProps, renderInput: (renderProps, { inputProps }) => (_jsx(Checkable.Box, { ...renderProps, className: cn(renderProps.className, `rounded-full
            @prop-size-small/checkable:w-7
            @prop-size-medium/checkable:w-9
            @prop-size-large/checkable:w-11`), children: _jsxs("span", { className: `
              grid size-full grid-cols-[0fr_min-content] transition-[grid-template-columns]
              @state-checked/checkable:grid-cols-[1fr_min-content]
            `, children: [_jsx("input", { ...inputProps, type: "checkbox", role: "switch", onChange: (event) => setChecked(event.target.checked), ...nestedProps }), _jsx("span", { className: `
                col-2 aspect-square h-full rounded-full bg-form-handle-default
                transition-[background-color,scale,aspect-ratio]
                @state-checked/checkable:bg-form-handle-checked
                @state-active/checkable:aspect-3/2
                @state-active/checkable:scale-80
                @state-disabled/checkable:bg-form-handle-disabled
                @state-checked/checkable:@state-disabled/checkable:bg-form-handle-checked-disabled
              ` })] }) })) }));
}
SwitchRoot.displayName = 'Switch';
export function SwitchArea(props) {
    return _jsx(Checkable.Label, { ...props });
}
SwitchArea.displayName = 'Switch.Area';
//# sourceMappingURL=Switch.parts.js.map