import { jsxs, jsx } from "react/jsx-runtime";
import { cn } from "@netlify/ui";
import { forwardRef, useRef, useImperativeHandle, useEffect } from "react";
const WrapperCN = ({ outset, variant }) => cn(
  outset && outset,
  variant.startsWith("pill") && `tw-inline-block`,
  variant === "inline-block" && `
    tw-mr-2
    tw-inline-block
  `
);
const InputLoadingCN = ({ type }) => cn(
  "tw-appearance-none",
  "tw-border",
  "tw-w-5",
  "tw-h-5",
  "tw-absolute",
  "tw-checkbox-loading",
  "tw-bg-teal-darker",
  "tw-p-2",
  "tw-opacity-54",
  "tw-pointer-events-none",
  "tw-bg-loading-stripes",
  "tw-bg-stripes-light",
  "motion-safe:tw-animate-loading-stripes",
  "tw-bg-repeat-x",
  "tw-top-auto",
  "tw-bg-clip-border",
  "dark:tw-border-gray",
  "dark:tw-bg-teal-lighter",
  type === "radio" ? `tw-rounded-full` : `tw-rounded-sm`
);
const checkboxTypeCN = ({ disabled, checked, indeterminate }) => cn(
  "tw-rounded-sm",
  "before:tw-h-[11px]",
  "before:tw-inline-block",
  "before:tw-w-[3px]",
  "before:tw-rounded-sm",
  "before:tw-left-2",
  "before:tw-top-[13px]",
  "before:tw-transform",
  "before:tw-rotate-[-135deg]",
  "after:tw-w-[3px]",
  "after:tw-h-[7px]",
  "after:tw-rounded-sm",
  "after:tw-content-empty",
  "after:tw-absolute",
  "after:tw-top-[7px]",
  "after:tw-transform",
  "after:tw--rotate-45",
  "after:tw-left-1",
  disabled && !checked && "tw-bg-checkbox-disabled",
  "indeterminate:before:tw-w-2.5",
  "indeterminate:before:tw-h-[3px]",
  "indeterminate:before:tw-left-1",
  "indeterminate:before:tw-top-[7.5px]",
  "indeterminate:before:tw-rotate-0",
  "indeterminate:before:tw-bg-gray-dark",
  "indeterminate:before:hover:tw-bg-gray-darker",
  "indeterminate:before:dark:tw-bg-gray-light",
  "indeterminate:before:dark:hover:tw-border-gray-lighter",
  "indeterminate:before:tw-rounded-full",
  "indeterminate:before:tw-content-empty"
);
const radioTypeCN = ({ disabled, checked }) => cn(
  "tw-rounded-full",
  "checked:before:tw-rounded-full",
  "checked:before:tw-h-2",
  "checked:before:tw-w-2",
  "checked:before:tw-opacity-100",
  "checked:before:tw-top-1/2",
  "checked:before:tw-left-1/2",
  "checked:before:tw-transform",
  "checked:before:tw--translate-x-1/2",
  "checked:before:tw--translate-y-1/2",
  checked && cn(
    "before:tw-rounded-full",
    "before:tw-h-2",
    "before:tw-w-2",
    "before:tw-opacity-100",
    "before:tw-top-1/2",
    "before:tw-left-1/2",
    "before:tw-transform",
    "before:tw--translate-x-1/2",
    "before:tw--translate-y-1/2",
    disabled ? cn(
      "before:tw-bg-gray-darker",
      "!dark:tw-bg-gray-darker",
      "dark:tw-border-gray-darker",
      "dark:before:tw-bg-gray",
      "checked:before:tw-bg-gray-dark",
      "checked:tw-border-gray-light",
      "checked:tw-bg-gray-light"
    ) : "before:tw-bg-gray-lightest checked:before:tw-bg-gray-lightest dark:before:tw-bg-gray-darkest"
  )
);
const InputCN = ({ type, disabled, variant, checked, indeterminate }) => cn(
  "tw-appearance-none",
  "tw-border",
  "tw-w-5",
  "tw-h-5",
  "tw-p-0",
  "tw-cursor-pointer",
  "tw-mr-2",
  "!tw-mt-0.5",
  "tw-mb-0",
  "tw-ml-0.5",
  "tw-box-border",
  "tw-absolute",
  "tw-top-auto",
  "before:tw-absolute",
  "before:tw-content-empty",
  "before:tw-origin-top-left",
  "focus:tw-outline-0",
  "focus:tw-ring focus:tw-ring-offset-1",
  !checked && !disabled && "tw-border-gray-dark hover:tw-border-gray-darker dark:tw-border-gray-light dark:hover:tw-border-gray-lighter",
  !disabled && cn(
    "checked:tw-bg-teal",
    "checked:tw-border-teal",
    "checked:hover:focus:tw-border-teal-lighter",
    "checked:after:tw-bg-teal-darkest",
    "checked:before:tw-bg-teal-darkest"
  ),
  "dark:tw-bg-gray-darkest",
  "dark:checked:tw-bg-teal-lighter",
  "dark:checked:tw-border-teal-lighter",
  "dark:checked:hover:tw-bg-teal",
  "dark:checked:hover:tw-border-teal",
  "dark:disabled:tw-bg-gray-darker",
  checked && !disabled && cn(
    "tw-bg-teal",
    "tw-border-teal",
    "hover:tw-border-teal-lighter",
    "hover:focus:tw-border-teal-lighter",
    "after:tw-bg-teal-darkest",
    "before:tw-bg-teal-darkest",
    "hover:tw-bg-teal-lighter",
    "focus:tw-border-teal-lighter",
    "dark:tw-bg-teal-lighter",
    "dark:tw-border-teal",
    "dark:hover:tw-bg-teal-lighter"
  ),
  disabled && cn(
    "tw-cursor-not-allowed",
    "tw-pointer-events-auto",
    "tw-border-gray-light",
    "tw-bg-gray-light",
    "hover:tw-border-gray-light",
    "after:tw-bg-gray-dark",
    "before:tw-bg-gray-dark",
    "dark:!tw-bg-gray-dark",
    "dark:!tw-border-gray-dark",
    "dark:after:tw-bg-gray-light",
    "dark:before:tw-bg-gray-light",
    !checked && "before:tw-hidden after:tw-hidden"
  ),
  checked && disabled && cn(
    "tw-border-gray-light",
    "tw-bg-gray-light",
    "hover:tw-bg-gray-light",
    "hover:tw-border-gray-light",
    "dark:after:tw-bg-gray-light",
    "dark:before:tw-bg-gray-light",
    "dark:tw-bg-gray-dark"
  ),
  variant.startsWith("pill") && cn(
    "tw-absolute",
    "!tw-w-0",
    "tw-p-0",
    "tw-m-0",
    "tw-border-0",
    "tw-opacity-0"
  ),
  type === "radio" && radioTypeCN({ disabled, checked }),
  type === "checkbox" && checkboxTypeCN({ disabled, checked, indeterminate })
);
const LabelCN = ({ disabled, variant, labelClassName }) => cn(
  variant.startsWith("pill") ? cn(
    "tw-inline-block",
    "tw-px-4",
    "tw-rounded-sm",
    "tw-py-1",
    "tw-border-2",
    "tw-border-gray-light",
    "tw-text-gray-darkest",
    "tw-font-medium",
    "hover:tw-bg-gray-lighter",
    "label-checked:tw-border-teal-darker",
    "label-focus:tw-bg-gray-lighter",
    "label-focus:tw-border-teal",
    "dark:tw-border-gray-dark",
    "dark:tw-text-gray-lightest",
    "dark:hover:tw-bg-gray-darker",
    "dark:label-checked:tw-border-teal-lighter",
    "dark:label-focus:tw-bg-gray-darker"
  ) : `tw-block tw-pl-8`,
  variant === "pill-large" && "!tw-px-10 !tw-py-4 tw-text-center",
  "tw-cursor-pointer",
  "tw-text-base",
  "tw-text-gray-darkest",
  "tw-font-semibold",
  "dark:tw-text-gray-lightest",
  disabled && `tw-cursor-not-allowed`,
  labelClassName
);
cn("!tw-mx-2", "!tw-cursor-default");
const helpTextCN = cn(
  "tw-text-textMuted",
  "tw-text-sm",
  "tw-ml-8",
  "tw-mt-0",
  "tw-font-regular",
  "dark:tw-text-gray-lighter"
);
const Checkbox = ({
  type = "checkbox",
  variant = "default",
  name,
  value,
  checked,
  controlledChecked,
  required,
  title,
  label,
  helpText,
  onChange,
  disabled,
  loading,
  tabIndex,
  error,
  outset,
  labelClassName,
  ...specificProps
}, ref) => {
  const checkRef = useRef(null);
  useImperativeHandle(ref, () => checkRef.current, []);
  const uuid = crypto.randomUUID();
  const helpTextId = `help-${uuid}`;
  const errorId = `error-${uuid}`;
  const describedBy = `${error ? errorId : ""} ${helpText ? helpTextId : ""}`;
  const indeterminate = "indeterminate" in specificProps && specificProps.indeterminate || false;
  useEffect(() => {
    if (checkRef.current && type === "checkbox") {
      checkRef.current.indeterminate = indeterminate;
    }
  }, [indeterminate, type]);
  return /* @__PURE__ */ jsxs("div", { className: WrapperCN({ outset, variant }), children: [
    /* @__PURE__ */ jsxs("label", { children: [
      loading ? /* @__PURE__ */ jsx("input", { className: InputLoadingCN({ type }), disabled: true }) : /* @__PURE__ */ jsx(
        "input",
        {
          "data-testid": "checkbox",
          ref: checkRef,
          className: InputCN({
            type,
            disabled,
            variant,
            checked: checked || controlledChecked,
            indeterminate
          }),
          type,
          name,
          value,
          defaultChecked: checked,
          checked: controlledChecked,
          required,
          title,
          ...tabIndex && { tabIndex: +tabIndex },
          onChange,
          disabled: !!(disabled || loading),
          "aria-describedby": describedBy
        }
      ),
      /* @__PURE__ */ jsxs("span", { className: LabelCN({ disabled, variant, labelClassName }), children: [
        label,
        error && /* @__PURE__ */ jsx("div", { className: "tw-mx-0.5 tw-text-sm tw-my-1 tw-leading-6 tw-font-regular", children: error })
      ] })
    ] }),
    helpText && /* @__PURE__ */ jsx("div", { id: helpTextId, className: helpTextCN, children: helpText })
  ] });
};
const BaseCheckbox = forwardRef(Checkbox);
export {
  BaseCheckbox as default
};
//# sourceMappingURL=Checkbox.js.map
