import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import * as SwitchPrimitives from "@radix-ui/react-switch";
import { Check } from "lucide-react";
import { cva } from "class-variance-authority";
import { cn } from "../../lib/utils.js";
import { useFieldContext, useResolvedFieldDisabled, useResolvedFieldMode } from "../Field/field-context.js";
const switchVariants = cva(
  [
    "group peer inline-flex shrink-0 cursor-pointer items-center rounded-full",
    "transition-colors duration-150",
    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
    "disabled:cursor-not-allowed disabled:opacity-disabled",
    // readOnly：鎖定互動但視覺正常
    "data-[readonly=true]:pointer-events-none data-[readonly=true]:cursor-default",
    // OFF → ON 背景色
    "data-[state=unchecked]:bg-border",
    "data-[state=checked]:bg-primary"
  ],
  {
    variants: {
      size: {
        sm: "h-5 w-10",
        // 20×40
        md: "h-5 w-10",
        // 20×40
        lg: "h-6 w-12"
        // 24×48
      }
    },
    defaultVariants: { size: "md" }
  }
);
const SPECS = {
  // checkStroke:16px 以下 icon 視覺不夠顯眼 → 加粗 stroke 補償(跟 Checkbox 共用原則,
  // 見 checkbox.tsx 的 checkStrokeWidth 註解)。12px 用 3.5(render ≈ 1.75px 線寬,比 Lucide
  // 預設的 1px render 明顯更粗,視覺跟 16px 預設 stroke 的 1.33px 有足夠區別),16px 用 2.5
  // (render ≈ 1.67px,比預設 1.33px 稍粗讓 toggle check 夠顯眼)。跨 size 配對值由 checkbox.tsx 共用。
  // 2026-05-18 簡化 per user 視覺證 + Checkbox 同步(3.5 → 3 sm/md):effective render 差
  // 0.08px 視覺看不出,保留 compensation 主旨但不過度差異化。
  sm: { thumb: 20, check: 12, checkStroke: 3, translate: "translateX(20px)" },
  md: { thumb: 20, check: 12, checkStroke: 3, translate: "translateX(20px)" },
  lg: { thumb: 24, check: 16, checkStroke: 2.5, translate: "translateX(24px)" }
};
const Switch = React.forwardRef(
  ({
    className,
    size,
    label,
    description,
    readOnly = false,
    disabled: disabledProp,
    mode,
    // chrome 對 Switch 主體無視覺影響(無 input wrapper)— 接收純為 prop 一致性;destructure 防 leak 到 DOM。
    variant: _chrome,
    id: idProp,
    ...props
  }, ref) => {
    const sizeKey = size ?? "md";
    const spec = SPECS[sizeKey];
    const fieldCtx = useFieldContext();
    const disabled = useResolvedFieldDisabled(disabledProp);
    const resolvedMode = useResolvedFieldMode({ mode, disabled, readOnly });
    const effectiveReadOnly = readOnly || resolvedMode === "readonly";
    const insideField = (fieldCtx == null ? void 0 : fieldCtx.hasFieldWrapper) === true;
    const effectiveLabel = insideField ? void 0 : label;
    const effectiveDescription = insideField ? void 0 : description;
    const alignRightInField = insideField && (fieldCtx == null ? void 0 : fieldCtx.orientation) === "horizontal" ? "ml-auto" : "";
    const generatedId = React.useId();
    const inputId = idProp ?? (fieldCtx == null ? void 0 : fieldCtx.id) ?? generatedId;
    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: "—" });
    }
    const rootEl = /* @__PURE__ */ jsx(
      SwitchPrimitives.Root,
      {
        id: inputId,
        className: cn(switchVariants({ size }), alignRightInField, className),
        ref,
        disabled,
        "aria-readonly": effectiveReadOnly || void 0,
        "data-readonly": effectiveReadOnly || void 0,
        tabIndex: effectiveReadOnly ? -1 : void 0,
        "aria-describedby": fieldCtx == null ? void 0 : fieldCtx.descriptionId,
        ...props,
        children: /* @__PURE__ */ jsx(
          SwitchPrimitives.Thumb,
          {
            className: cn(
              "pointer-events-none flex items-center justify-center rounded-full bg-on-emphasis border-2",
              "transition-all duration-150",
              "data-[state=unchecked]:translate-x-0 data-[state=unchecked]:border-border",
              "data-[state=checked]:border-primary",
              sizeKey === "lg" ? "data-[state=checked]:translate-x-6" : "data-[state=checked]:translate-x-5"
            ),
            style: { width: spec.thumb, height: spec.thumb },
            children: /* @__PURE__ */ jsx(
              Check,
              {
                size: spec.check,
                strokeWidth: spec.checkStroke,
                className: "text-primary opacity-0 transition-opacity duration-150 group-data-[state=checked]:opacity-100",
                "aria-hidden": true
              }
            )
          }
        )
      }
    );
    if (effectiveLabel == null) return rootEl;
    return /* @__PURE__ */ jsxs(
      "label",
      {
        htmlFor: inputId,
        className: cn(
          "inline-flex items-start gap-3 select-none",
          disabled ? "cursor-not-allowed" : readOnly ? "cursor-default" : "cursor-pointer"
        ),
        children: [
          /* @__PURE__ */ jsxs(
            "span",
            {
              className: cn(
                "flex-1 min-w-0 flex flex-col",
                sizeKey === "lg" ? "gap-[var(--item-gap-label-desc-reading-lg)]" : "gap-[var(--item-gap-label-desc-reading)]"
              ),
              children: [
                /* @__PURE__ */ jsx(
                  "span",
                  {
                    className: cn(
                      // Reading mode 字級:lg → text-body-lg (16px),sm/md → text-body (14px)
                      sizeKey === "lg" ? "text-body-lg" : "text-body",
                      disabled ? "text-fg-disabled" : "text-foreground"
                    ),
                    children: effectiveLabel
                  }
                ),
                effectiveDescription != null && /* @__PURE__ */ jsx(
                  "span",
                  {
                    className: cn(
                      disabled ? "text-fg-disabled" : "text-fg-secondary"
                    ),
                    style: { fontSize: "var(--font-body-size)" },
                    children: effectiveDescription
                  }
                )
              ]
            }
          ),
          /* @__PURE__ */ jsx("span", { className: "h-[1lh] flex items-center shrink-0", children: rootEl })
        ]
      }
    );
  }
);
Switch.displayName = SwitchPrimitives.Root.displayName;
const switchMeta = {
  component: "Switch",
  family: null,
  // self-contained primitive(對齊 spec frontmatter self-contained + body L31;非 Family 4)
  variants: {},
  sizes: {
    sm: { fieldHeight: 28, iconSize: 16, typography: "body" },
    md: { fieldHeight: 32, iconSize: 16, typography: "body" },
    lg: { fieldHeight: 40, iconSize: 20, typography: "body" }
  },
  states: ["default", "hover", "active", "focus-visible", "disabled"],
  tokens: {
    bg: ["bg-primary"],
    fg: ["text-fg-disabled", "text-fg-secondary", "text-foreground", "text-primary"],
    ring: ["ring-ring"]
  },
  defaultSize: "md"
};
export {
  Switch,
  switchMeta,
  switchVariants
};
//# sourceMappingURL=switch.js.map
