"use client";
import { jsxs, jsx } from "react/jsx-runtime";
import { Slot } from "@radix-ui/react-slot";
import { forwardRef, useContext, createContext, useId } from "react";
import { useCSSPropsPolyfill } from "./tailwind/useCSSPropsPolyfill.js";
import { getCSSPropsAttributes } from "./tailwind/cssProps.js";
import { classNames } from "../utils/classNames.js";
const ExperimentalBaseCheckable = forwardRef(
  ({
    size,
    checkableId: passedCheckableId,
    label,
    "aria-label": ariaLabel,
    "aria-labelledby": ariaLabelledBy,
    className,
    style,
    children,
    ...props
  }, ref) => {
    const hasAncestorLabel = useContext(ExperimentalBaseCheckableLabelContext) !== null;
    const hasAccessibleLabel = Boolean(hasAncestorLabel || label || ariaLabel || ariaLabelledBy);
    if (!hasAccessibleLabel) {
      throw new Error(
        "ExperimentalBaseCheckable: One of `label`, `aria-label`, or `aria-labelledby` is required for accessibility when there is no ancestor `ExperimentalBaseCheckableLabel`"
      );
    }
    if (ariaLabel && ariaLabelledBy) {
      throw new Error("ExperimentalBaseField: `aria-label` and `aria-labelledby` cannot be used together");
    }
    const { polyfillAttributes, polyfillElement } = useCSSPropsPolyfill("checkable", { size });
    const autoCheckableId = `gds-checkable-${useId()}`;
    const checkableId = passedCheckableId || autoCheckableId;
    const labelId = label ? `${checkableId}-label` : void 0;
    const checkableProps = {
      id: checkableId
    };
    if (ariaLabel) {
      checkableProps["aria-label"] = ariaLabel;
    } else if (ariaLabelledBy) {
      checkableProps["aria-labelledby"] = ariaLabelledBy;
    } else if (labelId) {
      checkableProps["aria-labelledby"] = labelId;
    }
    return /* @__PURE__ */ jsxs(
      ExperimentalBaseCheckableLabel,
      {
        ref,
        innerFocusRing: true,
        className: classNames(["gds-checkable flex h-max -:w-max -:max-w-full", className]),
        ...getCSSPropsAttributes("checkable", { size }, style),
        ...polyfillAttributes,
        ...props,
        children: [
          polyfillElement,
          /* @__PURE__ */ jsxs(
            "span",
            {
              className: `
            group/checkable flex
            nested/checkable:absolute
            nested/checkable:opacity-0
            nested/checkable:pointer-events-none
            @prop-size-small/checkable:gap-2
            @prop-size-medium/checkable:gap-3
          `,
              children: [
                children({ checkableProps }),
                label ? /* @__PURE__ */ jsx(
                  "span",
                  {
                    id: labelId,
                    className: `
                text-white/88 transition
                disabled:**:pointer-events-none
                group-clickable-hover/label:group-not-has-clickable-hover/label:text-white
                group-clickable-active/label:group-not-has-clickable-active/label:text-white/64
                group-clickable-active/label:group-not-has-clickable-active/label:transition-none
                group-has-nested-disabled/checkable:text-white/32
                @prop-size-small/checkable:text-14
                @prop-size-small/checkable:leading-5
                @prop-size-medium/checkable:text-16
                @prop-size-medium/checkable:leading-6
              `,
                    children: label
                  }
                ) : null
              ]
            }
          )
        ]
      }
    );
  }
);
ExperimentalBaseCheckable.displayName = "ExperimentalBaseCheckable";
const ExperimentalBaseCheckableBox = forwardRef(
  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
    "span",
    {
      ref,
      className: classNames([
        `flex shrink-0 items-center justify-center border border-white/16 bg-white/4 transition
        group-has-nested-checked/checkable:border-transparent
        group-has-nested-checked/checkable:bg-purple/88
        +:group-clickable-hover/label:group-not-has-clickable-hover/label:border-purple
        +:group-clickable-hover/label:group-not-has-clickable-hover/label:bg-white/8
        +:group-clickable-hover/label:group-not-has-clickable-hover/label:group-has-nested-checked/checkable:border-transparent
        +:group-clickable-hover/label:group-not-has-clickable-hover/label:group-has-nested-checked/checkable:bg-purple
        ++:group-data-[focus]/label:border-purple
        ++:group-data-[focus]/label:bg-white/8
        ++:group-data-[inner-focus-ring]/label:group-data-[focus]/label:outline-focus
        ++:group-data-[focus]/label:group-has-nested-checked/checkable:border-purple
        ++:group-data-[focus]/label:group-has-nested-checked/checkable:bg-purple
        ++:group-has-nested-focus-visible/checkable:border-purple
        ++:group-has-nested-focus-visible/checkable:bg-white/8
        ++:group-data-[inner-focus-ring]/label:group-has-nested-focus-visible/checkable:outline-focus
        ++:group-has-nested-focus-visible/checkable:group-has-nested-checked/checkable:border-purple
        ++:group-has-nested-focus-visible/checkable:group-has-nested-checked/checkable:bg-purple
        +++:group-clickable-active/label:group-not-has-clickable-active/label:border-purple/64
        +++:group-clickable-active/label:group-not-has-clickable-active/label:bg-white/4
        +++:group-clickable-active/label:group-not-has-clickable-active/label:transition-none
        +++:group-clickable-active/label:group-not-has-clickable-active/label:group-has-nested-checked/checkable:border-purple/48
        +++:group-clickable-active/label:group-not-has-clickable-active/label:group-has-nested-checked/checkable:bg-purple/48
        ++++:group-has-nested-disabled/checkable:border-white/8
        ++++:group-has-nested-disabled/checkable:bg-white/4
        ++++:group-has-nested-disabled/checkable:group-has-nested-checked/checkable:border-purple/32
        ++++:group-has-nested-disabled/checkable:group-has-nested-checked/checkable:bg-purple/32
        @prop-size-small/checkable:size-5
        @prop-size-medium/checkable:size-6`,
        className
      ]),
      ...props
    }
  )
);
ExperimentalBaseCheckableBox.displayName = "ExperimentalBaseCheckableBox";
const ExperimentalBaseCheckableLabelContext = createContext(null);
const ExperimentalBaseCheckableLabel = forwardRef(
  ({
    asChild = false,
    forceFocus = false,
    innerFocusRing = false,
    className,
    ...props
  }, ref) => {
    const hasAncestorLabel = useContext(ExperimentalBaseCheckableLabelContext) !== null;
    const renderLabel = !hasAncestorLabel;
    const Element = asChild ? Slot : renderLabel ? "label" : "span";
    return /* @__PURE__ */ jsx(ExperimentalBaseCheckableLabelContext.Provider, { value: {}, children: /* @__PURE__ */ jsx(
      Element,
      {
        ref,
        "data-focus": forceFocus || void 0,
        "data-inner-focus-ring": innerFocusRing && renderLabel ? true : void 0,
        className: classNames([renderLabel ? "group/label" : null, className]),
        ...props
      }
    ) });
  }
);
ExperimentalBaseCheckableLabel.displayName = "ExperimentalBaseCheckableLabel";
export {
  ExperimentalBaseCheckable,
  ExperimentalBaseCheckableBox,
  ExperimentalBaseCheckableLabel
};
