import { jsx } from "react/jsx-runtime";
import * as React from "react";
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
import { Minus, Check } from "lucide-react";
import { cva } from "class-variance-authority";
import { cn } from "../../lib/utils.js";
import { useFieldContext, useResolvedFieldDisabled, useResolvedFieldMode, useResolvedFieldSize } from "../Field/field-context.js";
import { fieldWrapperStyles } from "../Field/field-wrapper.js";
import { SelectionItem } from "../SelectionControl/selection-item.js";
import { CheckboxGroupContext } from "./checkbox-group.js";
const checkboxVariants = cva(
  [
    "grid place-content-center shrink-0 rounded-md",
    "border border-border bg-surface",
    "transition-colors duration-150",
    "hover:border-border-hover",
    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
    "data-[state=checked]:bg-primary data-[state=checked]:text-on-emphasis data-[state=checked]:border-primary",
    "data-[state=checked]:hover:bg-primary-hover data-[state=checked]:hover:border-primary-hover",
    "data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-on-emphasis data-[state=indeterminate]:border-primary",
    "data-[state=indeterminate]:hover:bg-primary-hover data-[state=indeterminate]:hover:border-primary-hover",
    "disabled:cursor-not-allowed disabled:bg-disabled disabled:border-transparent disabled:hover:border-transparent",
    "disabled:data-[state=checked]:bg-disabled disabled:data-[state=checked]:text-fg-disabled disabled:data-[state=checked]:border-transparent",
    "disabled:data-[state=indeterminate]:bg-disabled disabled:data-[state=indeterminate]:text-fg-disabled disabled:data-[state=indeterminate]:border-transparent",
    // readOnly：鎖定互動但維持 checked/unchecked 視覺
    "data-[readonly=true]:pointer-events-none data-[readonly=true]:cursor-default",
    "data-[readonly=true]:hover:border-border"
  ],
  {
    variants: {
      size: {
        sm: "h-4 w-4",
        md: "h-4 w-4",
        lg: "h-5 w-5"
      }
    },
    defaultVariants: {
      size: "md"
    }
  }
);
const checkIconSize = { sm: 12, md: 12, lg: 16 };
const checkStrokeWidth = { sm: 3, md: 3, lg: 2.5 };
const Checkbox = React.forwardRef(
  ({
    className,
    size,
    label,
    icon,
    avatar,
    description,
    readOnly = false,
    disabled,
    mode,
    // chrome 對 Checkbox 主體無視覺影響(無 input wrapper)— 接收純為 prop 一致性;destructure 防 leak 到 DOM。
    variant: _chrome,
    id: idProp,
    ...props
  }, ref) => {
    const sizeKey = size ?? "md";
    const iconPx = checkIconSize[sizeKey];
    const iconStrokeWidth = checkStrokeWidth[sizeKey];
    const fieldCtx = useFieldContext();
    const checkboxGroupCtx = React.useContext(CheckboxGroupContext);
    const insideField = (fieldCtx == null ? void 0 : fieldCtx.hasFieldWrapper) === true;
    const insideGroup = (checkboxGroupCtx == null ? void 0 : checkboxGroupCtx.inGroup) === true;
    const shouldSuppressLabel = insideField && !insideGroup;
    const effectiveLabel = shouldSuppressLabel ? void 0 : label;
    const effectiveDescription = shouldSuppressLabel ? void 0 : description;
    const generatedId = React.useId();
    const inputId = idProp ?? (insideGroup ? generatedId : (fieldCtx == null ? void 0 : fieldCtx.id) ?? generatedId);
    const resolvedDisabled = useResolvedFieldDisabled(disabled);
    const resolvedMode = useResolvedFieldMode({ mode, disabled, readOnly });
    const effectiveReadOnly = readOnly || resolvedMode === "readonly";
    const effectiveDisabled = resolvedDisabled || resolvedMode === "disabled";
    const resolvedBoxSize = useResolvedFieldSize(size ?? void 0, "md");
    if (resolvedMode === "display") {
      const isChecked = props.checked === true;
      return isChecked ? /* @__PURE__ */ jsx("span", { className: "text-foreground", children: "✓" }) : /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: "—" });
    }
    if (effectiveReadOnly && insideField && effectiveLabel == null) {
      const isChecked = (props.checked ?? props.defaultChecked) === true;
      const boxSize = resolvedBoxSize;
      return /* @__PURE__ */ jsx(
        "div",
        {
          role: "checkbox",
          "aria-checked": isChecked,
          "aria-readonly": "true",
          "aria-labelledby": fieldCtx == null ? void 0 : fieldCtx.labelId,
          "aria-invalid": (fieldCtx == null ? void 0 : fieldCtx.invalid) || void 0,
          "data-readonly": "true",
          tabIndex: 0,
          className: cn(
            fieldWrapperStyles({ size: boxSize, mode: "readonly", variant: "default" }),
            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
            className
          ),
          children: isChecked ? /* @__PURE__ */ jsx("span", { className: "text-foreground", children: "✓" }) : /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: "—" })
        }
      );
    }
    const rootEl = /* @__PURE__ */ jsx(
      CheckboxPrimitive.Root,
      {
        id: inputId,
        ref,
        disabled: effectiveDisabled,
        "aria-readonly": effectiveReadOnly || void 0,
        "data-readonly": effectiveReadOnly || void 0,
        tabIndex: effectiveReadOnly ? -1 : void 0,
        "aria-describedby": fieldCtx == null ? void 0 : fieldCtx.descriptionId,
        className: cn(checkboxVariants({ size }), className),
        ...props,
        children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "grid place-content-center text-current", children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { style: { width: iconPx, height: iconPx }, strokeWidth: iconStrokeWidth }) : /* @__PURE__ */ jsx(Check, { style: { width: iconPx, height: iconPx }, strokeWidth: iconStrokeWidth }) })
      }
    );
    if (effectiveLabel == null) return rootEl;
    return /* @__PURE__ */ jsx(
      SelectionItem,
      {
        control: rootEl,
        label: effectiveLabel,
        description: effectiveDescription,
        icon,
        avatar,
        htmlFor: inputId,
        disabled: effectiveDisabled,
        size: sizeKey
      }
    );
  }
);
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
const checkboxMeta = {
  component: "Checkbox",
  family: null,
  // self-contained primitive(對齊 spec frontmatter self-contained + body L31;非 Family 4)
  variants: {},
  sizes: {
    // 2026-06-10 修 stale meta:iconSize 對齊 checkIconSize 真值(L49 sm/md=12, lg=16;deep-audit A.1b 抓 metadata drift)
    sm: { fieldHeight: 28, iconSize: 12, typography: "body" },
    md: { fieldHeight: 32, iconSize: 12, typography: "body" },
    lg: { fieldHeight: 36, iconSize: 16, typography: "body" }
  },
  states: ["default", "hover", "focus-visible", "disabled"],
  tokens: {
    bg: ["bg-disabled", "bg-primary", "bg-primary-hover", "bg-surface"],
    fg: ["text-fg-disabled", "text-fg-secondary", "text-foreground"],
    ring: ["ring-ring"]
  },
  defaultSize: "md"
};
export {
  Checkbox,
  checkboxMeta,
  checkboxVariants
};
//# sourceMappingURL=checkbox.js.map
