import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
import { cva } from "class-variance-authority";
import { cn } from "../../lib/utils.js";
import { useResolvedFieldSize, useResolvedFieldDisabled } from "../Field/field-context.js";
import { Tooltip, TooltipTrigger, TooltipContent } from "../Tooltip/tooltip.js";
import { ICON_SIZE } from "../../patterns/element-anatomy/item-anatomy.js";
const SegmentedControlContext = React.createContext({
  size: "md",
  fullWidth: false,
  iconOnly: false,
  disabled: false
});
const segmentedControlVariants = cva(
  "flex items-stretch rounded-md",
  {
    variants: {
      fullWidth: {
        true: "w-full",
        false: "w-fit"
      }
    },
    defaultVariants: {
      fullWidth: false
    }
  }
);
const SegmentedControl = React.forwardRef(
  ({
    className,
    size: sizeProp,
    fullWidth = false,
    iconOnly = false,
    disabled,
    children,
    value,
    defaultValue,
    onValueChange,
    ...props
  }, ref) => {
    const resolvedSize = useResolvedFieldSize(sizeProp, "md");
    const resolvedDisabled = useResolvedFieldDisabled(disabled);
    const ctxValue = React.useMemo(
      () => ({ size: resolvedSize, fullWidth, iconOnly, disabled: resolvedDisabled }),
      [resolvedSize, fullWidth, iconOnly, resolvedDisabled]
    );
    return /* @__PURE__ */ jsx(SegmentedControlContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx(
      ToggleGroupPrimitive.Root,
      {
        ref,
        type: "single",
        value,
        defaultValue,
        onValueChange: (v) => {
          if (v) onValueChange == null ? void 0 : onValueChange(v);
        },
        disabled: resolvedDisabled,
        className: cn(segmentedControlVariants({ fullWidth }), className),
        ...props,
        children
      }
    ) });
  }
);
SegmentedControl.displayName = "SegmentedControl";
const ICON_ONLY_BASE = "aspect-square p-0 min-w-0 gap-0";
const itemVariants = cva(
  [
    "relative inline-flex items-center justify-center",
    "whitespace-nowrap font-medium",
    "border border-border bg-surface text-fg-secondary",
    "transition-colors duration-150",
    "cursor-pointer select-none",
    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:z-20",
    // disabled：cursor-not-allowed + 鎖住 hover 色（不用 pointer-events-none，否則 cursor 無法變）
    // button[disabled] 本身擋 click，不需靠 pointer-events: none
    "disabled:cursor-not-allowed disabled:text-fg-disabled",
    "disabled:hover:text-fg-disabled disabled:hover:border-border",
    // hover（未選）：border 加深一階 + 文字轉深，對齊 Input / Chip hover
    "hover:text-foreground hover:border-border-hover hover:z-[5]",
    // selected: 文字 + 邊框都用 primary-hover,底色維持 bg-surface 不變 (跟 Chip 一致)
    //   ── 這是 pill 風格元件 (Chip / SegmentedControl) 的 canonical 選中規則:
    //      primary-hover 同時染文字和線條;底色不改 (不用 primary-subtle)。
    //      Tabs 是 underline 風格,規則不同 (文字 foreground + 底線 primary-hover)。
    //   z-10 讓 border 浮在相鄰 item 之上
    "data-[state=on]:text-primary-hover data-[state=on]:border-primary-hover data-[state=on]:z-10",
    // item 連體：除第一個外，-ml-px 讓相鄰 border 重疊
    "first:rounded-l-md last:rounded-r-md",
    "[&:not(:first-child)]:-ml-px"
  ],
  {
    variants: {
      size: {
        xs: "h-field-xs px-2 text-caption leading-compact gap-0",
        sm: "h-field-sm px-3 text-body leading-compact gap-1",
        md: "h-field-md px-3 text-body leading-compact gap-1",
        lg: "h-field-lg px-3 text-body-lg leading-compact gap-1"
      },
      fullWidth: {
        true: "flex-1 min-w-0",
        false: ""
      }
    },
    defaultVariants: {
      size: "md",
      fullWidth: false
    }
  }
);
const SegmentedControlItem = React.forwardRef(({ className, startIcon: StartIcon, badge, children, "aria-label": ariaLabel, ...restProps }, ref) => {
  const { size, fullWidth, iconOnly: groupIconOnly } = React.useContext(SegmentedControlContext);
  const iconSize = size === "xs" ? ICON_SIZE.sm : ICON_SIZE[size];
  const hasSuffix = badge != null;
  const effectiveIconOnly = groupIconOnly;
  const itemEl = /* @__PURE__ */ jsxs(
    ToggleGroupPrimitive.Item,
    {
      ref,
      className: cn(
        itemVariants({ size, fullWidth }),
        effectiveIconOnly && ICON_ONLY_BASE,
        className
      ),
      "aria-label": ariaLabel,
      ...restProps,
      children: [
        StartIcon && /* @__PURE__ */ jsx(StartIcon, { size: iconSize, "aria-hidden": true }),
        !effectiveIconOnly && children != null && /* @__PURE__ */ jsx("span", { className: "px-1", children }),
        hasSuffix && !effectiveIconOnly && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-1", children: badge })
      ]
    }
  );
  if (effectiveIconOnly && typeof ariaLabel === "string") {
    return /* @__PURE__ */ jsxs(Tooltip, { children: [
      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: itemEl }),
      /* @__PURE__ */ jsx(TooltipContent, { children: ariaLabel })
    ] });
  }
  return itemEl;
});
SegmentedControlItem.displayName = "SegmentedControlItem";
const segmentedControlMeta = {
  component: "SegmentedControl",
  family: 3,
  // Family 3(Pill Layout)— 對齊 spec frontmatter family:3 + body L42
  variants: {},
  sizes: {
    xs: { fieldHeight: 24, typography: "caption", iconSize: 16, purpose: "row-embedded inline action / DataTable inline filter" },
    sm: { fieldHeight: 28, typography: "body", iconSize: 16, purpose: "compact chrome bar / dense toolbar" },
    md: { fieldHeight: 32, typography: "body", iconSize: 16, purpose: "預設 — form field 對齊" },
    lg: { fieldHeight: 36, typography: "body-lg", iconSize: 20, purpose: "touch / prominent CTA" }
  },
  states: ["default", "hover", "active", "focus-visible", "disabled"],
  tokens: {
    bg: ["bg-surface"],
    fg: ["text-fg-disabled", "text-fg-secondary", "text-foreground"],
    ring: ["ring-ring"]
  },
  defaultSize: "md"
};
export {
  SegmentedControl,
  SegmentedControlItem,
  itemVariants as segmentedControlItemVariants,
  segmentedControlMeta,
  segmentedControlVariants
};
//# sourceMappingURL=segmented-control.js.map
