"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import { ExperimentalBaseCheckable, ExperimentalBaseCheckableBox, ExperimentalBaseCheckableLabel } from "./BaseCheckable.js";
import { useControlled } from "./hooks/useControlled.js";
import { Check } from "../icons/Check.js";
import { Minus } from "../icons/Minus.js";
import { splitProps } from "../utils/splitProps.js";
import { classNames } from "../utils/classNames.js";
const ExperimentalCheckboxRoot = forwardRef(
  ({
    size,
    children: label,
    "aria-label": ariaLabel,
    "aria-labelledby": ariaLabelledBy,
    name,
    value,
    checked: controlledChecked,
    defaultChecked,
    onChange,
    disabled = false,
    className,
    ...props
  }, forwardedRef) => {
    const { rootProps, nestedProps } = splitProps(props);
    const [checked, setChecked] = useControlled(controlledChecked, defaultChecked ?? false, onChange);
    return /* @__PURE__ */ jsx(
      ExperimentalBaseCheckable,
      {
        size,
        label,
        "aria-label": ariaLabel,
        "aria-labelledby": ariaLabelledBy,
        "data-name": name,
        "data-value": value,
        checked,
        disabled,
        className: classNames(["gds-checkbox", className]),
        ...rootProps,
        children: ({ checkableProps }) => /* @__PURE__ */ jsxs(
          ExperimentalBaseCheckableBox,
          {
            className: `
              nested-icon:absolute
              nested-icon:inset-0
              nested-icon:m-auto
              nested-icon:transition
              nested-icon:prop-color-white
              @state-active/checkable:nested-icon:transition-none
              @state-active/checkable:nested-icon:prop-color-space-1000
              @state-disabled/checkable:nested-icon:prop-color-space-700
              @prop-size-small/checkable:rounded-4
              @prop-size-small/checkable:nested-icon:prop-size-2.5
              @prop-size-medium/checkable:rounded-4
              @prop-size-medium/checkable:nested-icon:prop-size-3
              @prop-size-large/checkable:rounded-6
              @prop-size-large/checkable:nested-icon:prop-size-3.5
            `,
            children: [
              /* @__PURE__ */ jsx(
                "input",
                {
                  ref: forwardedRef,
                  type: "checkbox",
                  name,
                  value,
                  checked: checked === true,
                  "aria-checked": checked === "indeterminate" ? "mixed" : void 0,
                  onChange: (event) => setChecked(event.target.checked),
                  disabled,
                  className: "nested/checkable",
                  ...checkableProps,
                  ...nestedProps
                }
              ),
              /* @__PURE__ */ jsx(Check, { alt: "", className: "@state-not-checked/checkable:opacity-0" }),
              /* @__PURE__ */ jsx(Minus, { alt: "", className: "@state-not-indeterminate/checkable:opacity-0" })
            ]
          }
        )
      }
    );
  }
);
ExperimentalCheckboxRoot.displayName = "ExperimentalCheckbox";
const ExperimentalCheckboxArea = forwardRef(
  ({ className, ...props }, forwardedRef) => {
    return /* @__PURE__ */ jsx(
      ExperimentalBaseCheckableLabel,
      {
        ref: forwardedRef,
        className: classNames(["gds-checkbox-area", className]),
        ...props
      }
    );
  }
);
ExperimentalCheckboxArea.displayName = "ExperimentalCheckbox.Area";
export {
  ExperimentalCheckboxArea,
  ExperimentalCheckboxRoot
};
