'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { createContext, useContext, useId } from 'react';
import { useCSSPropsPolyfill, useCSSState } from "../../hooks/index.js";
import { cn, getCSSPropsAttributes } from "../../utils/index.js";
import { CheckableMeta } from "./Checkable.meta.js";
import { Render } from "./Render.js";
export function CheckableRoot({ ref: passedRef, size, label, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, name, value, checked, disabled, className, style, renderInput, ...props }) {
    const hasAncestorLabel = useContext(CheckableLabelContext) !== null;
    const hasAccessibleLabel = Boolean(hasAncestorLabel || label || ariaLabel !== undefined || ariaLabelledBy !== undefined);
    if (!hasAccessibleLabel) {
        // oxlint-disable-next-line no-console
        console.warn('[Checkable] One of `label`, `aria-label`, or `aria-labelledby` should be set for accessibility when there is no ancestor `CheckableLabel`');
    }
    if (ariaLabel && ariaLabelledBy) {
        // oxlint-disable-next-line no-console
        console.warn('[Checkable] `aria-label` and `aria-labelledby` should not be used together; `aria-labelledby` will be ignored');
    }
    const [cssPropsPolyfillPassedRef, cssPropsPolyfillAttributes] = useCSSPropsPolyfill(CheckableMeta, { size }, { ref: passedRef });
    const uniqueId = useId();
    const labelId = label ? `gds-checkable-label-${uniqueId}` : undefined;
    const inputProps = {
        name,
        value,
        checked: typeof checked === 'boolean' ? checked : undefined,
        'aria-checked': checked === 'indeterminate' ? 'mixed' : undefined,
        disabled,
        className: cn('nested/checkable-ref u:pointer-events-none u:absolute u:size-full u:opacity-0'),
    };
    if (ariaLabel) {
        inputProps['aria-label'] = ariaLabel;
    }
    else if (ariaLabelledBy) {
        inputProps['aria-labelledby'] = ariaLabelledBy;
    }
    else if (labelId) {
        inputProps['aria-labelledby'] = labelId;
    }
    return (_jsx(CheckableLabel, { ref: cssPropsPolyfillPassedRef, checked: checked, disabled: disabled, className: cn('gds-checkable root-flex u:w-max u:max-w-full u:outline-0 i:h-max', className), "data-name": name, "data-value": value, ...getCSSPropsAttributes(CheckableMeta, { size }, style), ...cssPropsPolyfillAttributes, ...props, children: _jsxs("span", { className: `
          flex
          @prop-size-small/checkable:gap-1.5
          @prop-size-small/checkable:text-12
          @prop-size-medium/checkable:gap-2
          @prop-size-medium/checkable:text-14
          @prop-size-large/checkable:gap-2
          @prop-size-large/checkable:text-16
        `, children: [_jsx(Render, { render: renderInput, state: { inputProps } }), label ? (_jsx("span", { id: labelId, className: `
              text-form-text transition
              disabled:**:pointer-events-none
              @state-active/checkable:text-form-placeholder
              @state-active/checkable:transition-none
              @state-disabled/checkable:text-form-disabled
            `, children: label })) : null] }) }));
}
CheckableRoot.displayName = 'Checkable';
export function CheckableBox({ className, ...props }) {
    return (_jsx("span", { className: cn(`root-grid shrink-0 place-items-center border transition *:col-span-full *:row-span-full
        @state-active/checkable:transition-none
        u:size-lh
        u:border-form-idle
        u:@state-not-unchecked/checkable:border-form-checked-idle
        u:@state-not-unchecked/checkable:bg-form-checked-idle
        u:@state-hover/checkable:border-form-hover
        u:@state-not-unchecked/checkable:@state-hover/checkable:border-form-checked-hover
        u:@state-not-unchecked/checkable:@state-hover/checkable:bg-form-checked-hover
        u:@state-focus/checkable:outline
        u:@state-active/checkable:border-form-active
        u:@state-not-unchecked/checkable:@state-active/checkable:border-form-checked-active
        u:@state-not-unchecked/checkable:@state-active/checkable:bg-form-checked-active
        u:@state-disabled/checkable:border-form-disabled
        u:@state-disabled/checkable:bg-form-disabled
        u:@state-not-unchecked/checkable:@state-disabled/checkable:border-form-checked-disabled
        u:@state-not-unchecked/checkable:@state-disabled/checkable:bg-form-checked-disabled`, className), ...props }));
}
CheckableBox.displayName = 'Checkable.Box';
const CheckableLabelContext = createContext(false);
export function CheckableLabel({ ref: passedRef, checked, disabled, focusRing = true, render, className, ...props }) {
    const hasAncestorLabel = useContext(CheckableLabelContext) !== false;
    const renderLabel = !hasAncestorLabel;
    const [statePassedRef, state] = useCSSState({ pointer: undefined, focus: undefined, checked, disabled }, { ref: passedRef });
    return (_jsx(CheckableLabelContext.Provider, { value: true, children: _jsx(Render, { ref: statePassedRef, render: render ?? (renderLabel ? _jsx("label", {}) : _jsx("span", {})), "data-focus-ring": focusRing || undefined, className: cn(renderLabel ? 'group/label gds-checkable-label' : null, `uu:data-focus-ring:focus-visible:outline
          uu:has-nested-checked/checkable-ref:expose-checked
          uu:has-nested-indeterminate/checkable-ref:expose-indeterminate
          uu:has-nested-hover/checkable-ref:expose-hover
          uu:has-nested-focus-visible/checkable-ref:expose-focus
          uu:has-nested-active/checkable-ref:not-has-clickable-active:expose-active
          uu:has-nested-disabled/checkable-ref:expose-disabled
          uu:i:has-nested-disabled/checkable-ref:state-idle ${ /* Do not show the hover/active state of a disabled checkable */''}
          uu:i:has-nested-[input[type=radio]:checked]/checkable-ref:state-idle ${ /* Do not show the hover/active state of a checked radio */''}
          uu:i:group-data-focus-ring/label:state-not-focus ${ /* Prevent multiple focus rings */''}
          u:i:not-data-focus-ring:state-not-focus ${ /* Override any `state-focus` set by a composed component (e.g. `Card`) */''}`, className), ...state.exposedAttributes, ...state.polyfillAttributes, ...props }) }));
}
CheckableLabel.displayName = 'Checkable.Label';
//# sourceMappingURL=Checkable.parts.js.map