import { jsxs, jsx } from "react/jsx-runtime";
import * as React from "react";
import * as SliderPrimitive from "@radix-ui/react-slider";
import { cva } from "class-variance-authority";
import { cn } from "../../lib/utils.js";
import { useResolvedFieldDisabled } from "../Field/field-context.js";
const sliderRootVariants = cva(
  // 容器外層:水平置中 + relative(Radix 會絕對定位內部元素)
  // flex items-center 讓 track+thumb 在任何 field-height 下都垂直置中
  //
  // ── Disabled 策略:灰階 token swap(對齊 Button / Checkbox)──
  // Slider 的藍色 range 是美學視覺,不是 semantic state——使用者從 disabled
  // slider 需要辨識的是 thumb 位置 + range 長度,這兩者不依賴顏色。失去藍色
  // 沒有資訊損失。
  //
  // 跟 Switch 的差別:Switch 的 on/off 是純顏色差異(沒有形狀差異),所以必須
  // 靠 opacity 保留色彩身分。Slider 的位置/長度是形狀差異,不需要保留顏色身分,
  // 跟 Checkbox(checkmark 形狀 = semantic 載體)同類,應該走灰階。
  //
  // 詳細判準見 `slider.spec.md` 的「Disabled 策略」章節。
  [
    "relative flex items-center w-full min-w-0 touch-none select-none",
    "data-[disabled]:cursor-not-allowed"
  ],
  {
    variants: {
      size: {
        sm: "h-field-sm",
        md: "h-field-md",
        lg: "h-field-lg"
      }
    },
    defaultVariants: {
      size: "md"
    }
  }
);
const Slider = React.forwardRef(({ className, size, value, defaultValue, "aria-label": ariaLabel, ...props }, ref) => {
  const fieldDisabled = useResolvedFieldDisabled();
  const thumbCount = Array.isArray(value) && value.length || Array.isArray(defaultValue) && defaultValue.length || 1;
  return /* @__PURE__ */ jsxs(
    SliderPrimitive.Root,
    {
      ref,
      value,
      defaultValue,
      className: cn(sliderRootVariants({ size }), className),
      ...props,
      disabled: props.disabled || fieldDisabled,
      children: [
        /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: cn(
          "relative grow overflow-hidden rounded-full h-1",
          // Rest:bg-secondary(n-3,「微淡可辨」的 subtle fill,跟 Tag neutral / Badge low 同級)
          // Disabled:bg-muted(n-2,「disabled-like 退化」底色)
          "bg-secondary data-[disabled]:bg-muted"
        ), children: /* @__PURE__ */ jsx(
          SliderPrimitive.Range,
          {
            className: cn(
              "absolute h-full bg-primary",
              "data-[disabled]:bg-border"
            )
          }
        ) }),
        Array.from({ length: thumbCount }).map((_, i) => /* @__PURE__ */ jsx(
          SliderPrimitive.Thumb,
          {
            className: cn(
              "block h-4 w-4 shrink-0 rounded-full cursor-grab",
              "bg-surface border-2 border-primary",
              "transition-all duration-150",
              // Hover:border 加深到 primary-hover + elevation 陰影
              "hover:border-primary-hover hover:[box-shadow:var(--elevation-100)]",
              "active:cursor-grabbing active:border-primary-hover active:[box-shadow:var(--elevation-200)]",
              // Focus:border 加深(跟 hover 同視覺),不加 ring 或 halo
              "outline-none focus-visible:border-primary-hover",
              // Disabled:border 跟 Range 一起退成 border(n-5),bg 保留 bg-surface
              "data-[disabled]:cursor-not-allowed data-[disabled]:border-border",
              "data-[disabled]:hover:[box-shadow:none]"
            ),
            "aria-label": ariaLabel ? thumbCount > 1 ? `${ariaLabel} (${i + 1})` : ariaLabel : void 0
          },
          i
        ))
      ]
    }
  );
});
Slider.displayName = "Slider";
const sliderMeta = {
  component: "Slider",
  family: 4,
  variants: {},
  // size 只控容器外高,對齊 Field family h-field-*(md density:28/32/36px,uiSize.css)。
  // track 厚度 / thumb 直徑固定不隨 size 變,故無 iconSize / typography。
  // fieldHeight key 對齊 compile-stories.mjs 消費 schema(同 Button/Checkbox/Switch)。
  sizes: {
    sm: { fieldHeight: 28, when: "Toolbar / inline 編輯" },
    md: { fieldHeight: 32, when: "預設 — Form / cell inline edit" },
    lg: { fieldHeight: 36, when: "Marketing / 高 touch 區" }
  },
  states: ["default", "hover", "active", "focus-visible", "disabled"],
  tokens: {
    bg: ["bg-muted", "bg-primary", "bg-secondary", "bg-surface"],
    fg: [],
    ring: []
  }
};
export {
  Slider,
  sliderMeta,
  sliderRootVariants
};
//# sourceMappingURL=slider.js.map
