@qijenchen/design-system 0.1.0-beta.8 → 0.1.0-beta.80

package/dist/components/RadioGroup/radio-group.js

@@ -4,40 +4,74 @@ import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { Circle } from "lucide-react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils.js";
-import { useFieldContext } from "../Field/field-context.js";
+import { useResolvedFieldMode, useFieldContext, useResolvedFieldSize, useResolvedFieldDisabled } from "../Field/field-context.js";
 import { SelectionItem } from "../SelectionControl/selection-item.js";
-import { EMPTY_DISPLAY } from "../Field/field-wrapper.js";
-const RadioGroupDisplayContext = React.createContext(null);
+import { EMPTY_DISPLAY, fieldWrapperStyles } from "../Field/field-wrapper.js";
+const RadioGroupReadonlyContext = React.createContext(false);
+function findSelectedRadioLabel(children, selectedValue) {
+  let selectedLabel = null;
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) return;
+    const cProps = child.props;
+    if (cProps.value === selectedValue && cProps.value !== void 0) {
+      selectedLabel = cProps.label ?? selectedValue;
+      return;
+    }
+    const control = cProps.control;
+    if (React.isValidElement(control)) {
+      const controlValue = control.props.value;
+      if (controlValue === selectedValue) {
+        selectedLabel = cProps.label ?? selectedValue;
+      }
+    }
+  });
+  return selectedLabel;
+}
 const RadioGroup = React.forwardRef(({ className, mode, variant: _chrome, value, defaultValue, ...props }, ref) => {
-  if (mode === "display") {
+  const resolvedMode = useResolvedFieldMode({ mode, disabled: props.disabled });
+  const fieldCtx = useFieldContext();
+  const resolvedBoxSize = useResolvedFieldSize(void 0, "md");
+  if (resolvedMode === "display") {
     const selectedValue = value ?? defaultValue;
     if (!selectedValue) {
       return /* @__PURE__ */ jsx("div", { role: "group", className: cn("grid", className), children: /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: EMPTY_DISPLAY }) });
     }
-    let selectedLabel = null;
-    React.Children.forEach(props.children, (child) => {
-      if (!React.isValidElement(child)) return;
-      const cProps = child.props;
-      const control = cProps.control;
-      if (React.isValidElement(control)) {
-        const controlValue = control.props.value;
-        if (controlValue === selectedValue) {
-          selectedLabel = cProps.label ?? selectedValue;
-        }
-      }
-    });
+    const selectedLabel = findSelectedRadioLabel(props.children, selectedValue);
     return /* @__PURE__ */ jsx("div", { role: "group", className: cn("grid", className), children: /* @__PURE__ */ jsx("span", { className: "text-foreground", children: selectedLabel ?? selectedValue }) });
   }
-  return /* @__PURE__ */ jsx(
+  if (resolvedMode === "readonly" && (fieldCtx == null ? void 0 : fieldCtx.hasFieldWrapper) === true) {
+    const selectedValue = value ?? defaultValue;
+    const selectedLabel = selectedValue ? findSelectedRadioLabel(props.children, selectedValue) : null;
+    const boxSize = resolvedBoxSize;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "radiogroup",
+        "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: selectedValue ? /* @__PURE__ */ jsx("span", { className: "text-foreground", children: selectedLabel ?? selectedValue }) : /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: EMPTY_DISPLAY })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(RadioGroupReadonlyContext.Provider, { value: resolvedMode === "readonly", children: /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Root,
     {
       className: cn("grid", className),
       value,
       defaultValue,
       ...props,
+      disabled: resolvedMode === "disabled",
       ref
     }
-  );
+  ) });
 });
 RadioGroup.displayName = "RadioGroup";
 RadioGroup.fieldLayout = "block";
@@ -75,6 +109,8 @@ const RadioGroupItem = React.forwardRef(
     className,
     size,
     label,
+    icon,
+    avatar,
     description,
     readOnly = false,
     disabled,
@@ -83,12 +119,9 @@ const RadioGroupItem = React.forwardRef(
   }, ref) => {
     const sizeKey = size ?? "md";
     const dotPx = dotSize[sizeKey];
-    const displayCtx = React.useContext(RadioGroupDisplayContext);
-    if (displayCtx == null ? void 0 : displayCtx.displayMode) {
-      if (displayCtx.selectedValue !== props.value) return null;
-      return /* @__PURE__ */ jsx("span", { className: "text-foreground", children: label ?? props.value });
-    }
-    const fieldCtx = useFieldContext();
+    const resolvedDisabled = useResolvedFieldDisabled(disabled);
+    const groupReadonly = React.useContext(RadioGroupReadonlyContext);
+    const effectiveReadonly = readOnly || groupReadonly;
     const generatedId = React.useId();
     const inputId = idProp ?? generatedId;
     const rootEl = /* @__PURE__ */ jsx(
@@ -96,10 +129,10 @@ const RadioGroupItem = React.forwardRef(
       {
         id: inputId,
         ref,
-        disabled,
-        "aria-readonly": readOnly || void 0,
-        "data-readonly": readOnly || void 0,
-        tabIndex: readOnly ? -1 : void 0,
+        disabled: resolvedDisabled,
+        "aria-readonly": effectiveReadonly || void 0,
+        "data-readonly": effectiveReadonly || void 0,
+        tabIndex: effectiveReadonly ? -1 : void 0,
         className: cn(radioItemVariants({ size }), className),
         ...props,
         children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "grid place-content-center", children: /* @__PURE__ */ jsx(
@@ -112,13 +145,14 @@ const RadioGroupItem = React.forwardRef(
       }
     );
     if (label == null) return rootEl;
-    const resolvedDisabled = disabled ?? (fieldCtx == null ? void 0 : fieldCtx.disabled) ?? false;
     return /* @__PURE__ */ jsx(
       SelectionItem,
       {
         control: rootEl,
         label,
         description,
+        icon,
+        avatar,
         htmlFor: inputId,
         disabled: resolvedDisabled,
         size: sizeKey
@@ -129,12 +163,16 @@ const RadioGroupItem = React.forwardRef(
 RadioGroupItem.displayName = "RadioGroupItem";
 const radioGroupMeta = {
   component: "RadioGroup",
-  family: 4,
+  family: null,
+  // self-contained primitive(對齊 spec frontmatter self-contained + body L31;非 Family 4 — field-controls.spec.md 成員名單不含 RadioGroup)
   variants: {},
   sizes: {
-    sm: { fieldHeight: 28, iconSize: 16, typography: "body" },
-    md: { fieldHeight: 32, iconSize: 16, typography: "body" },
-    lg: { fieldHeight: 40, iconSize: 20, typography: "body" }
+    // iconSize = 渲染指示器尺寸(對齊 checkbox/switch meta 慣例:checkbox iconSize=真 Check glyph 12/12/16)。
+    // Radio 指示器是 filled dot 非 glyph,真值 = dotSize 8/8/10(radio-group.tsx:179);
+    // 控件框 16/16/20 與 Checkbox 對齊但那是 box 非「指示器」,不入此鍵(避免 metadata 語意 drift)。
+    sm: { fieldHeight: 28, iconSize: 8, typography: "body" },
+    md: { fieldHeight: 32, iconSize: 8, typography: "body" },
+    lg: { fieldHeight: 36, iconSize: 10, typography: "body-lg" }
   },
   states: ["default", "hover", "active", "focus-visible", "disabled"],
   tokens: {

package/dist/components/RadioGroup/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","sources":["../../../src/components/RadioGroup/radio-group.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { Circle } from \"lucide-react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport type { FieldMode, FieldVariant } from \"@/design-system/components/Field/field-types\"\nimport { useFieldContext } from \"@/design-system/components/Field/field-context\"\nimport { SelectionItem } from \"@/design-system/components/SelectionControl/selection-item\"\nimport { EMPTY_DISPLAY } from \"@/design-system/components/Field/field-wrapper\"\n\n// ── RadioGroup display context ──────────────────────────────────────────────\n// RadioGroup mode='display' 時:Group 不渲染 Radix primitive(無 radio 視覺),\n// 改透過 Context 通知 child RadioGroupItem「我在 display mode、selected value 是 X」;\n// item 自決 — 命中 selected 渲染 label 純文字,未命中 render null。\n// 為什麼用 context(不是 RadioGroup 自己解析 children):children 可能是任意巢狀\n// (Field 包 RadioGroup,內含 RadioGroupItem 散在 fragment / 條件式內),強行 walk children\n// 會破壞 React composability;用 context 讓 item 自己判定是 idiom 對齊 Radix 原生模型。\ninterface RadioGroupDisplayContextValue {\n  displayMode: true\n  selectedValue?: string\n}\nconst RadioGroupDisplayContext = React.createContext<RadioGroupDisplayContextValue | null>(null)\n\n// ── RadioGroup ──────────────────────────────────────────────────────────────\n\nexport interface RadioGroupProps\n  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {\n  /**\n   * Field mode(2026-05-05 Phase B3 align):\n   *   edit     — 一般可互動 RadioGroup(預設)\n   *   display  — **純展示**:不渲染 Radix Root / 任何 radio 視覺,僅 child item 中\n   *              value === group.value 那筆把 label 渲染為純文字 span;其他 item render null。\n   *              對齊 Carbon read-only / DataTable single-select cell read mode。\n   *   readonly — 同 child item 各自 readOnly:radio 視覺保留 + 鎖互動\n   *   disabled — 同 RadioGroupPrimitive.Root disabled 屬性\n   */\n  mode?: FieldMode\n  /**\n   * Visual chrome — RadioGroup 本體無 input wrapper variant,本 prop 對主體無視覺影響;\n   * 為對齊 Field 4-mode + chrome 透傳契約而保留(M19 一致性)。\n   */\n  variant?: FieldVariant\n}\n\nconst RadioGroup = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\n  RadioGroupProps\n>(({ className, mode, variant: _chrome, value, defaultValue, ...props }, ref) => {\n  // mode='display' — 純展示 selected option 的 label,不渲染任何 radio control 視覺。\n  // 對齊 Carbon read-only single-select(只顯示 selected 內容)+ Airtable / Notion read-only。\n  // 實作:walk children 找 control.value === selectedValue 的 SelectionItem,render label plain text。\n  // (不用 context dispatch 給 RadioGroupItem — SelectionItem layout wrapper 仍會渲染所有 item label)\n  if (mode === 'display') {\n    const selectedValue = (value ?? defaultValue) as string | undefined\n    if (!selectedValue) {\n      return <div role=\"group\" className={cn('grid', className)}><span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span></div>\n    }\n    let selectedLabel: React.ReactNode = null\n    React.Children.forEach(props.children, (child) => {\n      if (!React.isValidElement(child)) return\n      const cProps = child.props as { control?: unknown; label?: React.ReactNode }\n      const control = cProps.control\n      if (React.isValidElement(control)) {\n        const controlValue = (control.props as { value?: unknown }).value\n        if (controlValue === selectedValue) {\n          selectedLabel = cProps.label ?? selectedValue\n        }\n      }\n    })\n    return (\n      <div role=\"group\" className={cn('grid', className)}>\n        <span className=\"text-foreground\">{selectedLabel ?? selectedValue}</span>\n      </div>\n    )\n  }\n\n  return (\n    <RadioGroupPrimitive.Root\n      className={cn(\"grid\", className)}\n      value={value}\n      defaultValue={defaultValue}\n      {...props}\n      ref={ref}\n    />\n  )\n})\nRadioGroup.displayName = 'RadioGroup'\n// Field layout 宣告：RadioGroup 是 block primitive（多項堆疊），\n// 進入 <Field> 時 control area 自動切 items-start + padding-top 公式對齊。\n// Convention 詳見 components/Field/field.spec.md「Control area:Inline vs Block」段落。\n;(RadioGroup as unknown as { fieldLayout: 'block' }).fieldLayout = 'block'\n\n// ── RadioGroupItem Variants ─────────────────────────────────────────────────\n// 與 Checkbox 完全對齊：sm/md=16px, lg=20px。差異只有形狀（rounded-full）和指示器（filled dot）。\n\nconst radioItemVariants = cva(\n  [\n    'grid place-content-center shrink-0 rounded-full',\n    'border border-border bg-surface',\n    'transition-colors duration-150',\n    'hover:border-border-hover',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\n    'data-[state=checked]:border-primary data-[state=checked]:text-primary',\n    'data-[state=checked]:hover:border-primary-hover data-[state=checked]:hover:text-primary-hover',\n    'disabled:cursor-not-allowed disabled:bg-disabled disabled:border-transparent disabled:hover:border-transparent',\n    'disabled:data-[state=checked]:bg-disabled disabled:data-[state=checked]:border-transparent disabled:data-[state=checked]:text-fg-disabled',\n    // readOnly：鎖定互動但維持 checked/unchecked 視覺\n    'data-[readonly=true]:pointer-events-none data-[readonly=true]:cursor-default',\n    'data-[readonly=true]:hover:border-border',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'h-4 w-4',\n        md: 'h-4 w-4',\n        lg: 'h-5 w-5',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n)\n\n// ── Dot Size ────────────────────────────────────────────────────────────────\nconst dotSize: Record<string, number> = { sm: 8, md: 8, lg: 10 }\n\n// ── Types ───────────────────────────────────────────────────────────────────\n\ntype RadioItemPrimitiveProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n\nexport interface RadioGroupItemProps\n  extends RadioItemPrimitiveProps,\n    VariantProps<typeof radioItemVariants> {\n  /**\n   * Inline label。提供時 RadioGroupItem 自動透過 SelectionItem 包裝，\n   * 套用 codified 樣式（text-body / text-foreground / disabled 色）。\n   * 在 <Field> context 內時此 prop 仍然生效（Radio 的 label 是每個 item\n   * 各自的，不是整組 Field 的；FieldLabel 是 RadioGroup 整體的 label）。\n   */\n  label?: React.ReactNode\n  /**\n   * Inline description（secondary 文字）。須與 label 搭配使用。\n   * 套用 text-body / text-fg-secondary 樣式。\n   */\n  description?: React.ReactNode\n  /**\n   * readonly 模式：鎖定互動但維持 checked/unchecked 視覺正確。\n   * 通常整個 RadioGroup 一起設 readonly（由 parent RadioGroup 的 disabled\n   * 或 readonly 行為決定），個別 item 也可設。\n   */\n  readOnly?: boolean\n}\n\n// ── RadioGroupItem ──────────────────────────────────────────────────────────\n\nconst RadioGroupItem = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  RadioGroupItemProps\n>(\n  (\n    {\n      className,\n      size,\n      label,\n      description,\n      readOnly = false,\n      disabled,\n      id: idProp,\n      ...props\n    },\n    ref\n  ) => {\n    const sizeKey = size ?? 'md'\n    const dotPx = dotSize[sizeKey]\n\n    // ── RadioGroup mode='display' branch ──────────────────────────────────\n    // 命中 selected → 渲染 label 純文字 span;未命中 → render null(group 內只剩 selected 的 label)。\n    // 設計理由:對齊 Carbon read-only single-select 「只顯示 selected 內容、不列其他選項」原則。\n    const displayCtx = React.useContext(RadioGroupDisplayContext)\n    if (displayCtx?.displayMode) {\n      if (displayCtx.selectedValue !== props.value) return null\n      return <span className=\"text-foreground\">{label ?? props.value}</span>\n    }\n\n    // 注意：Radio 的 label 語意與 Checkbox/Switch 不同——\n    // Checkbox/Switch 的 label 就是該 control 的唯一 label（被 Field context 接管），\n    // RadioGroupItem 的 label 是「該選項」的 label（每 item 各自擁有），\n    // FieldLabel 則是整個 RadioGroup 的 label。\n    // 因此 RadioGroupItem 的 label 不因 Field context 被忽略。\n    const fieldCtx = useFieldContext()\n\n    const generatedId = React.useId()\n    const inputId = idProp ?? generatedId\n\n    const rootEl = (\n      <RadioGroupPrimitive.Item\n        id={inputId}\n        ref={ref}\n        disabled={disabled}\n        aria-readonly={readOnly || undefined}\n        data-readonly={readOnly || undefined}\n        tabIndex={readOnly ? -1 : undefined}\n        className={cn(radioItemVariants({ size }), className)}\n        {...props}\n      >\n        <RadioGroupPrimitive.Indicator className=\"grid place-content-center\">\n          <Circle\n            style={{ width: dotPx, height: dotPx }}\n            className=\"fill-current text-current\"\n          />\n        </RadioGroupPrimitive.Indicator>\n      </RadioGroupPrimitive.Item>\n    )\n\n    // 無 label → 只渲染 radio 本體\n    if (label == null) return rootEl\n\n    // 有 label → 透過 SelectionItem 包裝，與 Checkbox 一致\n    // 同時繼承 Field context 的 disabled（若 RadioGroup 在 Field disabled 內）\n    const resolvedDisabled = disabled ?? fieldCtx?.disabled ?? false\n\n    return (\n      <SelectionItem\n        control={rootEl}\n        label={label}\n        description={description}\n        htmlFor={inputId}\n        disabled={resolvedDisabled}\n        size={sizeKey}\n      />\n    )\n  }\n)\nRadioGroupItem.displayName = 'RadioGroupItem'\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const radioGroupMeta = {\n  component: 'RadioGroup',\n  family: 4,\n  variants: {\n\n  },\n  sizes: {\n    sm: { fieldHeight: 28, iconSize: 16, typography: 'body' },\n    md: { fieldHeight: 32, iconSize: 16, typography: 'body' },\n    lg: { fieldHeight: 40, iconSize: 20, typography: 'body' },\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-disabled', 'bg-surface'],\n    fg: ['text-fg-disabled', 'text-fg-secondary', 'text-foreground', 'text-primary'],\n    ring: ['ring-ring'],\n  },\n  defaultSize: 'md',\n} as const\n\nexport { RadioGroup, RadioGroupItem, radioItemVariants }\n"],"names":[],"mappings":";;;;;;;;;AAuBA,MAAM,2BAA2B,MAAM,cAAoD,IAAI;AAuB/F,MAAM,aAAa,MAAM,WAGvB,CAAC,EAAE,WAAW,MAAM,SAAS,SAAS,OAAO,cAAc,GAAG,MAAA,GAAS,QAAQ;AAK/E,MAAI,SAAS,WAAW;AACtB,UAAM,gBAAiB,SAAS;AAChC,QAAI,CAAC,eAAe;AAClB,aAAO,oBAAC,OAAA,EAAI,MAAK,SAAQ,WAAW,GAAG,QAAQ,SAAS,GAAG,UAAA,oBAAC,QAAA,EAAK,WAAU,iBAAiB,yBAAc,GAAO;AAAA,IACnH;AACA,QAAI,gBAAiC;AACrC,UAAM,SAAS,QAAQ,MAAM,UAAU,CAAC,UAAU;AAChD,UAAI,CAAC,MAAM,eAAe,KAAK,EAAG;AAClC,YAAM,SAAS,MAAM;AACrB,YAAM,UAAU,OAAO;AACvB,UAAI,MAAM,eAAe,OAAO,GAAG;AACjC,cAAM,eAAgB,QAAQ,MAA8B;AAC5D,YAAI,iBAAiB,eAAe;AAClC,0BAAgB,OAAO,SAAS;AAAA,QAClC;AAAA,MACF;AAAA,IACF,CAAC;AACD,WACE,oBAAC,OAAA,EAAI,MAAK,SAAQ,WAAW,GAAG,QAAQ,SAAS,GAC/C,8BAAC,QAAA,EAAK,WAAU,mBAAmB,UAAA,iBAAiB,eAAc,GACpE;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC,WAAW,GAAG,QAAQ,SAAS;AAAA,MAC/B;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AACD,WAAW,cAAc;AAIvB,WAAmD,cAAc;AAKnE,MAAM,oBAAoB;AAAA,EACxB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAGA,MAAM,UAAkC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAA;AA+B5D,MAAM,iBAAiB,MAAM;AAAA,EAI3B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,IAAI;AAAA,IACJ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,UAAU,QAAQ;AACxB,UAAM,QAAQ,QAAQ,OAAO;AAK7B,UAAM,aAAa,MAAM,WAAW,wBAAwB;AAC5D,QAAI,yCAAY,aAAa;AAC3B,UAAI,WAAW,kBAAkB,MAAM,MAAO,QAAO;AACrD,iCAAQ,QAAA,EAAK,WAAU,mBAAmB,UAAA,SAAS,MAAM,OAAM;AAAA,IACjE;AAOA,UAAM,WAAW,gBAAA;AAEjB,UAAM,cAAc,MAAM,MAAA;AAC1B,UAAM,UAAU,UAAU;AAE1B,UAAM,SACJ;AAAA,MAAC,oBAAoB;AAAA,MAApB;AAAA,QACC,IAAI;AAAA,QACJ;AAAA,QACA;AAAA,QACA,iBAAe,YAAY;AAAA,QAC3B,iBAAe,YAAY;AAAA,QAC3B,UAAU,WAAW,KAAK;AAAA,QAC1B,WAAW,GAAG,kBAAkB,EAAE,KAAA,CAAM,GAAG,SAAS;AAAA,QACnD,GAAG;AAAA,QAEJ,UAAA,oBAAC,oBAAoB,WAApB,EAA8B,WAAU,6BACvC,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,OAAO,OAAO,QAAQ,MAAA;AAAA,YAC/B,WAAU;AAAA,UAAA;AAAA,QAAA,EACZ,CACF;AAAA,MAAA;AAAA,IAAA;AAKJ,QAAI,SAAS,KAAM,QAAO;AAI1B,UAAM,mBAAmB,aAAY,qCAAU,aAAY;AAE3D,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT,UAAU;AAAA,QACV,MAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AACF;AACA,eAAe,cAAc;AAItB,MAAM,iBAAiB;AAAA,EAC5B,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO;AAAA,IACL,IAAI,EAAE,aAAa,IAAI,UAAU,IAAI,YAAY,OAAA;AAAA,IACjD,IAAI,EAAE,aAAa,IAAI,UAAU,IAAI,YAAY,OAAA;AAAA,IACjD,IAAI,EAAE,aAAa,IAAI,UAAU,IAAI,YAAY,OAAA;AAAA,EAAO;AAAA,EAE1D,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAC,eAAe,YAAY;AAAA,IAChC,IAAI,CAAC,oBAAoB,qBAAqB,mBAAmB,cAAc;AAAA,IAC/E,MAAM,CAAC,WAAW;AAAA,EAAA;AAAA,EAEpB,aAAa;AACf;"}
+{"version":3,"file":"radio-group.js","sources":["../../../src/components/RadioGroup/radio-group.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { Circle } from \"lucide-react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport type { FieldMode, FieldVariant } from \"@/design-system/components/Field/field-types\"\nimport { useFieldContext, useResolvedFieldMode, useResolvedFieldDisabled, useResolvedFieldSize } from \"@/design-system/components/Field/field-context\"\nimport { SelectionItem } from \"@/design-system/components/SelectionControl/selection-item\"\nimport type { LucideIcon } from \"lucide-react\"\nimport type { AvatarData } from \"@/design-system/components/Avatar/avatar\"\nimport { EMPTY_DISPLAY, fieldWrapperStyles } from \"@/design-system/components/Field/field-wrapper\"\n\n// ── RadioGroup display mode ─────────────────────────────────────────────────\n// RadioGroup mode='display' 時:Group 不渲染 Radix primitive(無 radio 視覺),\n// 改由 RadioGroup 本體 walk props.children,找 control.value === selectedValue 的\n// SelectionItem,把它的 label 渲染為單一純文字 span(其他選項不顯示)。\n// 對齊 Carbon read-only single-select(只顯示 selected 內容)+ Airtable / Notion read-only。\n// 實作在 RadioGroup forwardRef 內(見下方 mode === 'display' 分支)。\n\n// ── RadioGroup ──────────────────────────────────────────────────────────────\n\nexport interface RadioGroupProps\n  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {\n  /**\n   * Field mode(2026-05-05 Phase B3 align):\n   *   edit     — 一般可互動 RadioGroup(預設)\n   *   display  — **純展示**:不渲染 Radix Root / 任何 radio 視覺;RadioGroup 本體 walk\n   *              children,僅 control.value === group.value 那筆把 label 渲染為純文字 span。\n   *              對齊 Carbon read-only / DataTable single-select cell read mode。\n   *   readonly — standalone:ReadonlyContext 傳 items 鎖互動保留視覺;Field 內:灰框 + 選中項 label(不渲染 radio 群組)\n   *   disabled — 同 RadioGroupPrimitive.Root disabled 屬性\n   */\n  mode?: FieldMode\n  /**\n   * Visual chrome — RadioGroup 本體無 input wrapper variant,本 prop 對主體無視覺影響;\n   * 為對齊 Field 4-mode + chrome 透傳契約而保留(M19 一致性)。\n   */\n  variant?: FieldVariant\n}\n\n// RadioGroup mode='readonly' → 透過 context 把 readOnly 傳給所有 child RadioGroupItem\n// (item 已支援 readOnly prop + data-[readonly] 樣式;Radix Root 無 readOnly,故用 context)。\nconst RadioGroupReadonlyContext = React.createContext(false)\n\n// walk children 找 control.value === selectedValue 的 SelectionItem label(display / readonly-in-Field 共用)\nfunction findSelectedRadioLabel(children: React.ReactNode, selectedValue: string | undefined): React.ReactNode {\n  let selectedLabel: React.ReactNode = null\n  React.Children.forEach(children, (child) => {\n    if (!React.isValidElement(child)) return\n    const cProps = child.props as { control?: unknown; label?: React.ReactNode; value?: unknown }\n    // 形狀 1:<RadioGroupItem value label>(主用法)— value/label 直掛 props\n    if (cProps.value === selectedValue && cProps.value !== undefined) {\n      selectedLabel = cProps.label ?? selectedValue\n      return\n    }\n    // 形狀 2:<SelectionItem control={<RadioGroupItem value/>} label>(組合用法)\n    const control = cProps.control\n    if (React.isValidElement(control)) {\n      const controlValue = (control.props as { value?: unknown }).value\n      if (controlValue === selectedValue) {\n        selectedLabel = cProps.label ?? selectedValue\n      }\n    }\n  })\n  return selectedLabel\n}\n\nconst RadioGroup = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\n  RadioGroupProps\n>(({ className, mode, variant: _chrome, value, defaultValue, ...props }, ref) => {\n  // 2026-06-08 SSOT cascade:resolvedMode 經 resolver hook 讀 fieldCtx(原 root 完全不讀 → <Field disabled>/<Field mode> 失效)\n  const resolvedMode = useResolvedFieldMode({ mode, disabled: (props as { disabled?: boolean }).disabled })\n  const fieldCtx = useFieldContext()\n  // readonly 灰框 size:走 SSOT resolver(RadioGroup 無 size prop → ctx > 'md')\n  const resolvedBoxSize = useResolvedFieldSize(undefined, 'md') as 'sm' | 'md' | 'lg'\n  // mode='display' — 純展示 selected option 的 label,不渲染任何 radio control 視覺。\n  // 對齊 Carbon read-only single-select(只顯示 selected 內容)+ Airtable / Notion read-only。\n  // 實作:walk children 找 control.value === selectedValue 的 SelectionItem,render label plain text。\n  // (不用 context dispatch 給 RadioGroupItem — SelectionItem layout wrapper 仍會渲染所有 item label)\n  if (resolvedMode === 'display') {\n    const selectedValue = (value ?? defaultValue) as string | undefined\n    if (!selectedValue) {\n      return <div role=\"group\" className={cn('grid', className)}><span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span></div>\n    }\n    const selectedLabel = findSelectedRadioLabel(props.children, selectedValue)\n    return (\n      <div role=\"group\" className={cn('grid', className)}>\n        <span className=\"text-foreground\">{selectedLabel ?? selectedValue}</span>\n      </div>\n    )\n  }\n\n  // ── mode='readonly' in Field(2026-06-12 user 拍板,與 Checkbox/Switch 灰框模型一致)──\n  // Field 內 readonly 單選 = fieldWrapperStyles readonly 灰框 + 選中項 label 文字\n  // (= Select readonly 同款呈現:同為「單選資料」,鎖定時呈現一致)。\n  // standalone readonly(無 Field)維持原樣鎖互動(ReadonlyContext 路徑)。\n  if (resolvedMode === 'readonly' && fieldCtx?.hasFieldWrapper === true) {\n    const selectedValue = (value ?? defaultValue) as string | undefined\n    const selectedLabel = selectedValue ? findSelectedRadioLabel(props.children, selectedValue) : null\n    const boxSize = resolvedBoxSize\n    return (\n      <div\n        role=\"radiogroup\"\n        aria-readonly=\"true\"\n        aria-labelledby={fieldCtx?.labelId}\n        aria-invalid={fieldCtx?.invalid || undefined}\n        data-readonly=\"true\"\n        tabIndex={0}\n        className={cn(\n          fieldWrapperStyles({ size: boxSize, mode: 'readonly', variant: 'default' }),\n          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n          className,\n        )}\n      >\n        {selectedValue\n          ? <span className=\"text-foreground\">{selectedLabel ?? selectedValue}</span>\n          : <span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span>}\n      </div>\n    )\n  }\n\n  // mode='disabled' → Radix Root disabled(原生 propagate 給所有 item);\n  // mode='readonly' → context 傳 readOnly 給 items(item 渲染為 data-[readonly] 鎖互動 + aria-readonly)。\n  return (\n    <RadioGroupReadonlyContext.Provider value={resolvedMode === 'readonly'}>\n      <RadioGroupPrimitive.Root\n        className={cn(\"grid\", className)}\n        value={value}\n        defaultValue={defaultValue}\n        {...props}\n        disabled={resolvedMode === 'disabled'}\n        ref={ref}\n      />\n    </RadioGroupReadonlyContext.Provider>\n  )\n})\nRadioGroup.displayName = 'RadioGroup'\n// Field layout 宣告：RadioGroup 是 block primitive（多項堆疊），\n// 進入 <Field> 時 control area 自動切 items-start + padding-top 公式對齊。\n// Convention 詳見 components/Field/field.spec.md「Control area:Inline vs Block」段落。\n;(RadioGroup as unknown as { fieldLayout: 'block' }).fieldLayout = 'block'\n\n// ── RadioGroupItem Variants ─────────────────────────────────────────────────\n// 與 Checkbox 完全對齊：sm/md=16px, lg=20px。差異只有形狀（rounded-full）和指示器（filled dot）。\n\nconst radioItemVariants = cva(\n  [\n    'grid place-content-center shrink-0 rounded-full',\n    'border border-border bg-surface',\n    'transition-colors duration-150',\n    'hover:border-border-hover',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\n    'data-[state=checked]:border-primary data-[state=checked]:text-primary',\n    'data-[state=checked]:hover:border-primary-hover data-[state=checked]:hover:text-primary-hover',\n    'disabled:cursor-not-allowed disabled:bg-disabled disabled:border-transparent disabled:hover:border-transparent',\n    'disabled:data-[state=checked]:bg-disabled disabled:data-[state=checked]:border-transparent disabled:data-[state=checked]:text-fg-disabled',\n    // readOnly：鎖定互動但維持 checked/unchecked 視覺\n    'data-[readonly=true]:pointer-events-none data-[readonly=true]:cursor-default',\n    'data-[readonly=true]:hover:border-border',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'h-4 w-4',\n        md: 'h-4 w-4',\n        lg: 'h-5 w-5',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n)\n\n// ── Dot Size ────────────────────────────────────────────────────────────────\nconst dotSize: Record<string, number> = { sm: 8, md: 8, lg: 10 }\n\n// ── Types ───────────────────────────────────────────────────────────────────\n\ntype RadioItemPrimitiveProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n\nexport interface RadioGroupItemProps\n  extends RadioItemPrimitiveProps,\n    VariantProps<typeof radioItemVariants> {\n  /**\n   * Inline label。提供時 RadioGroupItem 自動透過 SelectionItem 包裝，\n   * 套用 codified 樣式（text-body / text-foreground / disabled 色）。\n   * 在 <Field> context 內時此 prop 仍然生效（Radio 的 label 是每個 item\n   * 各自的，不是整組 Field 的；FieldLabel 是 RadioGroup 整體的 label）。\n   */\n  label?: React.ReactNode\n  /**\n   * Inline description（secondary 文字）。須與 label 搭配使用。\n   * 套用 text-body / text-fg-secondary 樣式。\n   */\n  description?: React.ReactNode\n  /** 可選左側 icon(label 前)— 2026-06-12 M30 修:轉發 SelectionItem 既有 canonical 槽(selection-item.tsx jsDoc SSOT;與 avatar 互斥)*/\n  icon?: LucideIcon\n  /** 可選左側 avatar(label 前)— 同上 */\n  avatar?: AvatarData\n  /**\n   * readonly 模式：鎖定互動但維持 checked/unchecked 視覺正確。\n   * 通常整個 RadioGroup 一起設 readonly（由 parent RadioGroup 的 disabled\n   * 或 readonly 行為決定），個別 item 也可設。\n   */\n  readOnly?: boolean\n}\n\n// ── RadioGroupItem ──────────────────────────────────────────────────────────\n\nconst RadioGroupItem = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  RadioGroupItemProps\n>(\n  (\n    {\n      className,\n      size,\n      label,\n      icon,\n      avatar,\n      description,\n      readOnly = false,\n      disabled,\n      id: idProp,\n      ...props\n    },\n    ref\n  ) => {\n    const sizeKey = size ?? 'md'\n    const dotPx = dotSize[sizeKey]\n\n    // 注意:RadioGroup mode='display' 的純文字渲染由 RadioGroup 本體 walk-children 處理\n    // (見上方 RadioGroup forwardRef 的 mode === 'display' 分支),RadioGroupItem 在 display\n    // mode 下不會被獨立 render,故此處無 display 分支。\n\n    // 注意：Radio 的 label 語意與 Checkbox/Switch 不同——\n    // Checkbox/Switch 的 label 就是該 control 的唯一 label（被 Field context 接管），\n    // RadioGroupItem 的 label 是「該選項」的 label（每 item 各自擁有），\n    // FieldLabel 則是整個 RadioGroup 的 label。\n    // 因此 RadioGroupItem 的 label 不因 Field context 被忽略。\n    const resolvedDisabled = useResolvedFieldDisabled(disabled)\n    // group-level readonly(RadioGroup mode='readonly')或 item-level readOnly,任一 true 即鎖互動。\n    const groupReadonly = React.useContext(RadioGroupReadonlyContext)\n    const effectiveReadonly = readOnly || groupReadonly\n\n    const generatedId = React.useId()\n    const inputId = idProp ?? generatedId\n\n    const rootEl = (\n      <RadioGroupPrimitive.Item\n        id={inputId}\n        ref={ref}\n        disabled={resolvedDisabled}\n        aria-readonly={effectiveReadonly || undefined}\n        data-readonly={effectiveReadonly || undefined}\n        tabIndex={effectiveReadonly ? -1 : undefined}\n        className={cn(radioItemVariants({ size }), className)}\n        {...props}\n      >\n        <RadioGroupPrimitive.Indicator className=\"grid place-content-center\">\n          <Circle\n            style={{ width: dotPx, height: dotPx }}\n            className=\"fill-current text-current\"\n          />\n        </RadioGroupPrimitive.Indicator>\n      </RadioGroupPrimitive.Item>\n    )\n\n    // 無 label → 只渲染 radio 本體\n    if (label == null) return rootEl\n\n    // 有 label → 透過 SelectionItem 包裝，與 Checkbox 一致（disabled 已於上方 useResolvedFieldDisabled 解析）\n    return (\n      <SelectionItem\n        control={rootEl}\n        label={label}\n        description={description}\n        icon={icon}\n        avatar={avatar}\n        htmlFor={inputId}\n        disabled={resolvedDisabled}\n        size={sizeKey}\n      />\n    )\n  }\n)\nRadioGroupItem.displayName = 'RadioGroupItem'\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const radioGroupMeta = {\n  component: 'RadioGroup',\n  family: null, // self-contained primitive(對齊 spec frontmatter self-contained + body L31;非 Family 4 — field-controls.spec.md 成員名單不含 RadioGroup)\n  variants: {\n\n  },\n  sizes: {\n    // iconSize = 渲染指示器尺寸(對齊 checkbox/switch meta 慣例:checkbox iconSize=真 Check glyph 12/12/16)。\n    // Radio 指示器是 filled dot 非 glyph,真值 = dotSize 8/8/10(radio-group.tsx:179);\n    // 控件框 16/16/20 與 Checkbox 對齊但那是 box 非「指示器」,不入此鍵(避免 metadata 語意 drift)。\n    sm: { fieldHeight: 28, iconSize: 8, typography: 'body' },\n    md: { fieldHeight: 32, iconSize: 8, typography: 'body' },\n    lg: { fieldHeight: 36, iconSize: 10, typography: 'body-lg' },\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-disabled', 'bg-surface'],\n    fg: ['text-fg-disabled', 'text-fg-secondary', 'text-foreground', 'text-primary'],\n    ring: ['ring-ring'],\n  },\n  defaultSize: 'md',\n} as const\n\nexport { RadioGroup, RadioGroupItem, radioItemVariants }\n"],"names":[],"mappings":"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"}

package/dist/components/Rating/index.d.ts

@@ -0,0 +1,2 @@
+export * from './rating';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Rating/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Rating/index.ts"],"names":[],"mappings":"AAIA,cAAc,UAAU,CAAA"}

package/dist/components/Rating/index.js

@@ -0,0 +1,6 @@
+import { Rating, ratingMeta } from "./rating.js";
+export {
+  Rating,
+  ratingMeta
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Rating/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Rating/rating.d.ts

@@ -26,13 +26,17 @@ export interface RatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     loading?: boolean;
     /** 自訂 icon(預設 Star);傳 LucideIcon */
     icon?: LucideIcon;
-    /** a11y label(readOnly 時必填,interactive 時建議填) */
+    /**
+     * a11y label。readOnly(role=img)時必填。
+     * interactive(role=slider)時:在 Field 內免填(自動 aria-labelledby 指向 FieldLabel);
+     * standalone(無 Field)時必填——role=slider 依 WAI-ARIA APG 必有 accessible name。
+     */
     'aria-label'?: string;
 }
 declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLDivElement>>;
 export declare const ratingMeta: {
     readonly component: "Rating";
-    readonly family: 4;
+    readonly family: null;
     readonly variants: {};
     readonly sizes: {};
     readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];

package/dist/components/Rating/rating.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rating.d.ts","sourceRoot":"","sources":["../../../src/components/Rating/rating.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,cAAc,CAAA;AAsDpD,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACzF,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,eAAe;IACf,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,gEAAgE;IAChE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAChC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oCAAoC;IACpC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAGD,QAAA,MAAM,MAAM,oFAkHX,CAAA;AA4ED,eAAO,MAAM,UAAU;;;;;;;;;;;CAeb,CAAA;AAEV,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"rating.d.ts","sourceRoot":"","sources":["../../../src/components/Rating/rating.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,cAAc,CAAA;AAsDpD,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACzF,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,eAAe;IACf,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,gEAAgE;IAChE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAChC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oCAAoC;IACpC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAGD,QAAA,MAAM,MAAM,oFA4HX,CAAA;AA6ED,eAAO,MAAM,UAAU;;;;;;;;;;;CAeb,CAAA;AAEV,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/Rating/rating.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { Star } from "lucide-react";
 import { cn } from "../../lib/utils.js";
-import { useFieldContext } from "../Field/field-context.js";
+import { useFieldContext, useResolvedFieldDisabled, useResolvedFieldMode, useResolvedFieldSize } from "../Field/field-context.js";
 const SIZE_PX = { xs: 20, sm: 20, md: 24, lg: 24 };
 const CONTAINER_HEIGHT = {
   xs: "h-field-xs",
@@ -18,16 +18,18 @@ const Rating = React.forwardRef(
     max = 5,
     size: sizeProp,
     precision = "full",
-    readOnly = false,
-    disabled = false,
+    readOnly: readOnlyProp = false,
+    disabled: disabledProp,
     loading = false,
     icon: Icon = Star,
     className,
     ...props
   }, ref) => {
     const fieldCtx = useFieldContext();
-    const fieldSize = fieldCtx == null ? void 0 : fieldCtx.size;
-    const size = sizeProp ?? fieldSize ?? "xs";
+    const disabled = useResolvedFieldDisabled(disabledProp);
+    const resolvedMode = useResolvedFieldMode({ mode: void 0, disabled, readOnly: readOnlyProp });
+    const readOnly = readOnlyProp || resolvedMode === "readonly";
+    const size = useResolvedFieldSize(sizeProp, "xs");
     const [internalValue, setInternalValue] = React.useState(defaultValue);
     const [hoverValue, setHoverValue] = React.useState(null);
     const isControlled = value !== void 0;
@@ -61,12 +63,12 @@ const Rating = React.forwardRef(
       {
         ref,
         role: isInteractive ? "slider" : "img",
+        "aria-labelledby": fieldCtx == null ? void 0 : fieldCtx.labelId,
         "aria-valuenow": isInteractive ? currentValue : void 0,
         "aria-valuemin": isInteractive ? 0 : void 0,
         "aria-valuemax": isInteractive ? max : void 0,
         "aria-valuetext": isInteractive ? `${currentValue} of ${max} stars` : void 0,
         "aria-disabled": disabled || void 0,
-        "aria-readonly": isInteractive && readOnly ? true : void 0,
         "aria-busy": loading || void 0,
         tabIndex: isInteractive ? 0 : void 0,
         onKeyDown: handleKeyDown,
@@ -162,7 +164,8 @@ function StarIcon({ Icon, sizePx, fillRatio, isHalf, interactive, onHover, onCli
 }
 const ratingMeta = {
   component: "Rating",
-  family: 4,
+  family: null,
+  // self-contained primitive(對齊 spec frontmatter self-contained + body L24;非 Family 4)
   variants: {},
   sizes: {},
   states: ["default", "hover", "active", "focus-visible", "disabled"],

package/dist/components/Rating/rating.js.map

@@ -1 +1 @@
-{"version":3,"file":"rating.js","sources":["../../../src/components/Rating/rating.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport { Star, type LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { useFieldContext } from '@/design-system/components/Field/field-context'\n\n/**\n * Rating — 星星評分元件\n *\n * 世界級對照:Ant Design `<Rate>`、Material MUI `<Rating>`。\n * shadcn 核心沒有 Rating,本元件自建。\n *\n * ── 使用情境 ──\n * - review / feedback:商品評分 / 服務評分(可編輯 + 唯讀兩種)\n * - display:已提交評分的唯讀呈現(商品清單星等)\n *\n * ── 視覺 ──\n * 填色用 `var(--warning)`(yellow-6,世界級黃星 convention;與 warning 語意共用色相\n * 但語境不同,評分 = UX convention color 非 status)。\n * 空色用 `var(--color-neutral-4)`(灰色;與 disabled/empty 同級)。\n *\n * ── 互動 ──\n * interactive(預設):hover 預覽、click 設值、keyboard Left/Right 改值\n * readOnly:純顯示,不響應 hover / click\n *\n * ── 精度 ──\n * precision=\"full\"(預設) — 整星(1, 2, 3, 4, 5)\n * precision=\"half\" — 半星(0.5, 1, 1.5, 2, 2.5, ..., 5)\n */\n\n// ── Icon size canonical(2026-04-21 AR48 修正)──\n//\n// Rating 的「一顆星」視覺重量接近 **Avatar / identity icon**,不是純 inline icon。\n// 理由:\n// - 星星是 filled shape(解析整個 icon 是重量感的一部分),不像純 outline icon 靠 stroke\n// - Field 內 Rating 跟 Avatar / Tag 並排時視覺份量要對齊,否則 row height 一致但 icon 看起來比重量不對\n// - 世界級對照:Ant Rate in Form = 20px、Material MUI Rating fontSize=inherit 預設約 24、Airbnb 評分星 24px\n//\n// 因此 Field 內 Rating icon size 對齊 **item-anatomy inline Avatar sizes**:sm=20 / md=24 / lg=24。\n// 非 icon tier(16/16/20)——star 不是次要 affordance icon,它是主要資料視覺。\n//\n// Container 高度仍對齊 `--field-height-*`(sm=28 / md=32 / lg=36),讓 Rating 可與其他\n// field-height family 元件(Input / Select)並排時 row height 對齊。\n//\n// ── 使用情境 ──\n// - **Standalone**(獨立展示評分,如商品卡 / 評論)→ 預設 `xs`(container 24,icon 20,\n//   對齊 Avatar sm 20px;iOS HIG / Airbnb 商品卡星星 20-24px)\n// - **Field 內**(表單評分欄位)→ 跟 Field 尺寸對齊(sm=20 / md=24 / lg=24,default md)\nconst SIZE_PX = { xs: 20, sm: 20, md: 24, lg: 24 } as const\nconst CONTAINER_HEIGHT: Record<'xs' | 'sm' | 'md' | 'lg', string> = {\n  xs: 'h-field-xs',\n  sm: 'h-field-sm',\n  md: 'h-field-md',\n  lg: 'h-field-lg',\n}\n\nexport interface RatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** 當前評分(0 ~ max) */\n  value?: number\n  /** 預設值(uncontrolled) */\n  defaultValue?: number\n  /** 評分改變 callback */\n  onChange?: (value: number) => void\n  /** 滿分(預設 5) */\n  max?: number\n  /** 尺寸。standalone 建議 xs(24px);Field 內跟隨 Field size 傳 sm/md/lg */\n  size?: 'xs' | 'sm' | 'md' | 'lg'\n  /** 精度:full = 整星,half = 半星 */\n  precision?: 'full' | 'half'\n  /** 唯讀(無 hover / click 響應) */\n  readOnly?: boolean\n  /** 完全停用 */\n  disabled?: boolean\n  /**\n   * Loading 狀態 — 正在取得既有評分 / 正在儲存。\n   * 視覺同 disabled(composite 整塊 opacity-disabled)但 semantic 不同:\n   * loading = 暫時性等待(aria-busy),disabled = 永久業務規則(aria-disabled)。\n   * 詳 rating.spec.md「Interactive vs ReadOnly」+「Loading canonical」\n   */\n  loading?: boolean\n  /** 自訂 icon(預設 Star);傳 LucideIcon */\n  icon?: LucideIcon\n  /** a11y label(readOnly 時必填,interactive 時建議填) */\n  'aria-label'?: string\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst Rating = React.forwardRef<HTMLDivElement, RatingProps>(\n  (\n    {\n      value,\n      defaultValue = 0,\n      onChange,\n      max = 5,\n      size: sizeProp,\n      precision = 'full',\n      readOnly = false,\n      disabled = false,\n      loading = false,\n      icon: Icon = Star,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    // Context-aware default size(AR31 canonical):\n    //   - Field 內(有 FieldContext.size) → 跟 Field size 對齊(sm / md / lg)\n    //   - Standalone(無 Field context) → default `xs`(24px,對齊 Avatar / Tag sm / iOS HIG standalone)\n    // consumer 可傳 size 顯式 override。世界級對照:Material Rating standalone 24dp、\n    // Ant Rate in Form 跟 Form.itemSize,standalone 24px。\n    const fieldCtx = useFieldContext()\n    const fieldSize = fieldCtx?.size as ('sm' | 'md' | 'lg' | undefined)\n    const size: 'xs' | 'sm' | 'md' | 'lg' =\n      sizeProp ?? fieldSize ?? 'xs'\n    const [internalValue, setInternalValue] = React.useState(defaultValue)\n    const [hoverValue, setHoverValue] = React.useState<number | null>(null)\n    const isControlled = value !== undefined\n    const currentValue = isControlled ? value : internalValue\n    const displayValue = hoverValue ?? currentValue\n    const iconPx = SIZE_PX[size]\n    const isInteractive = !readOnly && !disabled && !loading\n\n    const setValue = (v: number) => {\n      if (!isControlled) setInternalValue(v)\n      onChange?.(v)\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!isInteractive) return\n      const step = precision === 'half' ? 0.5 : 1\n      // Full ARIA slider pattern(WAI-ARIA):Arrow / Home / End 支援 — D4 UX audit 2026-04-22\n      if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n        e.preventDefault()\n        setValue(Math.min(max, currentValue + step))\n      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n        e.preventDefault()\n        setValue(Math.max(0, currentValue - step))\n      } else if (e.key === 'Home') {\n        e.preventDefault()\n        setValue(0)\n      } else if (e.key === 'End') {\n        e.preventDefault()\n        setValue(max)\n      }\n    }\n\n    return (\n      <div\n        ref={ref}\n        role={isInteractive ? 'slider' : 'img'}\n        aria-valuenow={isInteractive ? currentValue : undefined}\n        aria-valuemin={isInteractive ? 0 : undefined}\n        aria-valuemax={isInteractive ? max : undefined}\n        aria-valuetext={isInteractive ? `${currentValue} of ${max} stars` : undefined}\n        aria-disabled={disabled || undefined}\n        // a11y: aria-readonly 只允許於 slider role(非 img)— axe aria-allowed-attr 2026-04-25\n        aria-readonly={isInteractive && readOnly ? true : undefined}\n        aria-busy={loading || undefined}\n        tabIndex={isInteractive ? 0 : undefined}\n        onKeyDown={handleKeyDown}\n        onMouseLeave={() => setHoverValue(null)}\n        className={cn(\n          'inline-flex items-center gap-1',\n          // Container 對齊 field-height family,讓 Rating 可與 Input/Select/Button 並排 row-align\n          CONTAINER_HEIGHT[size],\n          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-md',\n          // disabled 跟 loading 視覺相同(composite uniform dim),semantic 由 aria-disabled / aria-busy 區分\n          (disabled || loading) && 'opacity-disabled pointer-events-none',\n          className,\n        )}\n        {...props}\n      >\n        {Array.from({ length: max }, (_, i) => {\n          const starValue = i + 1\n          const fillRatio = Math.max(0, Math.min(1, displayValue - i)) // 0..1\n          const isHalf = precision === 'half' && fillRatio > 0 && fillRatio < 1\n\n          return (\n            <StarIcon\n              key={i}\n              Icon={Icon}\n              sizePx={iconPx}\n              fillRatio={fillRatio}\n              isHalf={isHalf}\n              interactive={isInteractive}\n              onHover={(halfFirst) => {\n                if (!isInteractive) return\n                const v = precision === 'half' && halfFirst ? starValue - 0.5 : starValue\n                setHoverValue(v)\n              }}\n              onClick={(halfFirst) => {\n                if (!isInteractive) return\n                const v = precision === 'half' && halfFirst ? starValue - 0.5 : starValue\n                setValue(v)\n              }}\n            />\n          )\n        })}\n      </div>\n    )\n  },\n)\nRating.displayName = 'Rating'\n\n// ── StarIcon: 單顆星 + half-precision overlay ─────────────────────────────\n\ninterface StarIconProps {\n  Icon: LucideIcon\n  sizePx: number\n  fillRatio: number // 0..1\n  isHalf: boolean\n  interactive: boolean\n  onHover: (halfFirst: boolean) => void\n  onClick: (halfFirst: boolean) => void\n}\n\nconst FILL_FILLED = 'var(--warning)' // yellow-6 — 黃星 convention\nconst FILL_EMPTY = 'var(--divider)' // 灰色空星(neutral-4 借 divider semantic alias,user 2026-05-09 拍板;對齊 Material rgba(0,0,0,0.26) muted-fill canonical)\n\nfunction StarIcon({ Icon, sizePx, fillRatio, isHalf, interactive, onHover, onClick }: StarIconProps) {\n  // a11y(2026-04-25 axe nested-interactive fix):inner 點擊目標改 <span>(非 interactive\n  // element),不會跟外層 role='slider' 形成 nested-interactive 違規。鍵盤控制統一在外層\n  // slider 的 arrow keys,inner 只處理 mouse click 定位。Ant Rate / Material MUI 同模式。\n  if (!isHalf) {\n    // Full: 一整顆 fill(filled 或 empty)\n    const fill = fillRatio >= 1 ? FILL_FILLED : FILL_EMPTY\n    return (\n      <span\n        role=\"presentation\"\n        onMouseEnter={interactive ? () => onHover(false) : undefined}\n        onClick={interactive ? () => onClick(false) : undefined}\n        className={cn(\n          'inline-flex',\n          interactive ? 'cursor-pointer' : 'cursor-default',\n        )}\n        style={{ color: fill }}\n        aria-hidden\n      >\n        {/* stroke=\"none\" 移除 Lucide Star 預設的 outline stroke(1.5px 黑線),\n            讓星星是純 fill-only 的 shape——fill 與 outline 同色視覺上仍有亮度差。\n            世界級對照:Ant Rate / Material MUI Rating 皆純 fill,無 outline stroke。*/}\n        <Icon size={sizePx} fill={fill} stroke=\"none\" className=\"shrink-0\" />\n      </span>\n    )\n  }\n\n  // Half: 兩個重疊 icon,左半 filled / 右半 empty + 兩個 hover zone 切半星\n  return (\n    <span className=\"relative inline-flex\" style={{ width: sizePx, height: sizePx }}>\n      <Icon size={sizePx} fill={FILL_EMPTY} stroke=\"none\" className=\"absolute inset-0\" style={{ color: FILL_EMPTY }} />\n      <span className=\"absolute inset-0 overflow-hidden\" style={{ width: sizePx * fillRatio }}>\n        <Icon size={sizePx} fill={FILL_FILLED} stroke=\"none\" style={{ color: FILL_FILLED }} />\n      </span>\n      {interactive && (\n        <>\n          <span\n            role=\"presentation\"\n            onMouseEnter={() => onHover(true)}\n            onClick={() => onClick(true)}\n            className=\"absolute inset-y-0 left-0 w-1/2 cursor-pointer\"\n            aria-hidden\n          />\n          <span\n            role=\"presentation\"\n            onMouseEnter={() => onHover(false)}\n            onClick={() => onClick(false)}\n            className=\"absolute inset-y-0 right-0 w-1/2 cursor-pointer\"\n            aria-hidden\n          />\n        </>\n      )}\n    </span>\n  )\n}\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const ratingMeta = {\n  component: 'Rating',\n  family: 4,\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-transparent'],\n    fg: [],\n    ring: ['ring-ring'],\n  },\n} as const\n\nexport { Rating }\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"rating.js","sources":["../../../src/components/Rating/rating.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport { Star, type LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { useFieldContext, useResolvedFieldSize, useResolvedFieldDisabled, useResolvedFieldMode } from '@/design-system/components/Field/field-context'\n\n/**\n * Rating — 星星評分元件\n *\n * 世界級對照:Ant Design `<Rate>`、Material MUI `<Rating>`。\n * shadcn 核心沒有 Rating,本元件自建。\n *\n * ── 使用情境 ──\n * - review / feedback:商品評分 / 服務評分(可編輯 + 唯讀兩種)\n * - display:已提交評分的唯讀呈現(商品清單星等)\n *\n * ── 視覺 ──\n * 填色用 `var(--warning)`(yellow-6,世界級黃星 convention;與 warning 語意共用色相\n * 但語境不同,評分 = UX convention color 非 status)。\n * 空色用 `var(--divider)`(neutral-4 借 divider semantic alias;灰色;與 disabled/empty 同級)。\n *\n * ── 互動 ──\n * interactive(預設):hover 預覽、click 設值、keyboard Left/Right 改值\n * readOnly:純顯示,不響應 hover / click\n *\n * ── 精度 ──\n * precision=\"full\"(預設) — 整星(1, 2, 3, 4, 5)\n * precision=\"half\" — 半星(0.5, 1, 1.5, 2, 2.5, ..., 5)\n */\n\n// ── Icon size canonical(2026-04-21 AR48 修正)──\n//\n// Rating 的「一顆星」視覺重量接近 **Avatar / identity icon**,不是純 inline icon。\n// 理由:\n// - 星星是 filled shape(解析整個 icon 是重量感的一部分),不像純 outline icon 靠 stroke\n// - Field 內 Rating 跟 Avatar / Tag 並排時視覺份量要對齊,否則 row height 一致但 icon 看起來比重量不對\n// - 世界級對照:Ant Rate in Form = 20px、Material MUI Rating fontSize=inherit 預設約 24、Airbnb 評分星 24px\n//\n// 因此 Field 內 Rating icon size 對齊 **item-anatomy inline Avatar sizes**:sm=20 / md=24 / lg=24。\n// 非 icon tier(16/16/20)——star 不是次要 affordance icon,它是主要資料視覺。\n//\n// Container 高度仍對齊 `--field-height-*`(sm=28 / md=32 / lg=36),讓 Rating 可與其他\n// field-height family 元件(Input / Select)並排時 row height 對齊。\n//\n// ── 使用情境 ──\n// - **Standalone**(獨立展示評分,如商品卡 / 評論)→ 預設 `xs`(container 24,icon 20,\n//   對齊 Avatar sm 20px;iOS HIG / Airbnb 商品卡星星 20-24px)\n// - **Field 內**(表單評分欄位)→ 跟 Field 尺寸對齊(sm=20 / md=24 / lg=24,default md)\nconst SIZE_PX = { xs: 20, sm: 20, md: 24, lg: 24 } as const\nconst CONTAINER_HEIGHT: Record<'xs' | 'sm' | 'md' | 'lg', string> = {\n  xs: 'h-field-xs',\n  sm: 'h-field-sm',\n  md: 'h-field-md',\n  lg: 'h-field-lg',\n}\n\nexport interface RatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** 當前評分(0 ~ max) */\n  value?: number\n  /** 預設值(uncontrolled) */\n  defaultValue?: number\n  /** 評分改變 callback */\n  onChange?: (value: number) => void\n  /** 滿分(預設 5) */\n  max?: number\n  /** 尺寸。standalone 建議 xs(24px);Field 內跟隨 Field size 傳 sm/md/lg */\n  size?: 'xs' | 'sm' | 'md' | 'lg'\n  /** 精度:full = 整星,half = 半星 */\n  precision?: 'full' | 'half'\n  /** 唯讀(無 hover / click 響應) */\n  readOnly?: boolean\n  /** 完全停用 */\n  disabled?: boolean\n  /**\n   * Loading 狀態 — 正在取得既有評分 / 正在儲存。\n   * 視覺同 disabled(composite 整塊 opacity-disabled)但 semantic 不同:\n   * loading = 暫時性等待(aria-busy),disabled = 永久業務規則(aria-disabled)。\n   * 詳 rating.spec.md「Interactive vs ReadOnly」+「Loading canonical」\n   */\n  loading?: boolean\n  /** 自訂 icon(預設 Star);傳 LucideIcon */\n  icon?: LucideIcon\n  /**\n   * a11y label。readOnly(role=img)時必填。\n   * interactive(role=slider)時:在 Field 內免填(自動 aria-labelledby 指向 FieldLabel);\n   * standalone(無 Field)時必填——role=slider 依 WAI-ARIA APG 必有 accessible name。\n   */\n  'aria-label'?: string\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst Rating = React.forwardRef<HTMLDivElement, RatingProps>(\n  (\n    {\n      value,\n      defaultValue = 0,\n      onChange,\n      max = 5,\n      size: sizeProp,\n      precision = 'full',\n      readOnly: readOnlyProp = false,\n      disabled: disabledProp,\n      loading = false,\n      icon: Icon = Star,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    // Context-aware default size(AR31 canonical):\n    //   - Field 內(有 FieldContext.size) → 跟 Field size 對齊(sm / md / lg)\n    //   - Standalone(無 Field context) → default `xs`(24px,對齊 Avatar / Tag sm / iOS HIG standalone)\n    // consumer 可傳 size 顯式 override。世界級對照:Material Rating standalone 24dp、\n    // Ant Rate in Form 跟 Form.itemSize,standalone 24px。\n    const fieldCtx = useFieldContext()  // 保留:aria-labelledby 用 fieldCtx.labelId\n    // 2026-06-08 SSOT:<Field disabled> cascade(原 isInteractive 只看 local disabled prop)\n    const disabled = useResolvedFieldDisabled(disabledProp)\n    // <Field mode=\"readonly\"> cascade(2026-06-12 補):Rating 的 readonly 呈現 = 星星本身\n    // (星星即值語言,role=img,全業界 review-stars canonical)——不包灰框,只鎖互動。\n    const resolvedMode = useResolvedFieldMode({ mode: undefined, disabled, readOnly: readOnlyProp })\n    const readOnly = readOnlyProp || resolvedMode === 'readonly'\n    const size = useResolvedFieldSize<'xs' | 'sm' | 'md' | 'lg'>(sizeProp, 'xs')  // SSOT:統一 size resolution(Rating default 'xs')\n    const [internalValue, setInternalValue] = React.useState(defaultValue)\n    const [hoverValue, setHoverValue] = React.useState<number | null>(null)\n    const isControlled = value !== undefined\n    const currentValue = isControlled ? value : internalValue\n    const displayValue = hoverValue ?? currentValue\n    const iconPx = SIZE_PX[size]\n    const isInteractive = !readOnly && !disabled && !loading\n\n    const setValue = (v: number) => {\n      if (!isControlled) setInternalValue(v)\n      onChange?.(v)\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!isInteractive) return\n      const step = precision === 'half' ? 0.5 : 1\n      // Full ARIA slider pattern(WAI-ARIA):Arrow / Home / End 支援 — D4 UX audit 2026-04-22\n      if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {\n        e.preventDefault()\n        setValue(Math.min(max, currentValue + step))\n      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {\n        e.preventDefault()\n        setValue(Math.max(0, currentValue - step))\n      } else if (e.key === 'Home') {\n        e.preventDefault()\n        setValue(0)\n      } else if (e.key === 'End') {\n        e.preventDefault()\n        setValue(max)\n      }\n    }\n\n    return (\n      <div\n        ref={ref}\n        role={isInteractive ? 'slider' : 'img'}\n        // a11y(#30):role=slider 必有 accessible name(WAI-ARIA APG slider pattern)。\n        //   Field 內 → 自動 aria-labelledby 指向 FieldLabel 的 id(fieldCtx.labelId,免填);\n        //   Standalone → 仍需 consumer 傳 aria-label。對齊 TimePicker / DatePicker 同 canonical\n        //   (time-picker.tsx:313 / date-picker.tsx:514:aria-labelledby={fieldCtx?.labelId})。\n        //   置於 {...props} 前,consumer 顯式傳的 aria-labelledby 仍可覆寫。\n        aria-labelledby={fieldCtx?.labelId}  // 2026-06-12 修:readonly/disabled(role=img)也需 accessible name,labelledby 對 img 合法\n        aria-valuenow={isInteractive ? currentValue : undefined}\n        aria-valuemin={isInteractive ? 0 : undefined}\n        aria-valuemax={isInteractive ? max : undefined}\n        aria-valuetext={isInteractive ? `${currentValue} of ${max} stars` : undefined}\n        aria-disabled={disabled || undefined}\n        // a11y: 刻意不設 aria-readonly — readOnly 時 role=img(axe aria-allowed-attr 禁 img 用 aria-readonly,2026-04-25);\n        //       interactive 時 role=slider 但必非 readOnly(isInteractive = !readOnly)。兩 state 皆不該有此屬性,故省略。\n        aria-busy={loading || undefined}\n        tabIndex={isInteractive ? 0 : undefined}\n        onKeyDown={handleKeyDown}\n        onMouseLeave={() => setHoverValue(null)}\n        className={cn(\n          'inline-flex items-center gap-1',\n          // Container 對齊 field-height family,讓 Rating 可與 Input/Select/Button 並排 row-align\n          CONTAINER_HEIGHT[size],\n          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-md',\n          // disabled 跟 loading 視覺相同(composite uniform dim),semantic 由 aria-disabled / aria-busy 區分\n          (disabled || loading) && 'opacity-disabled pointer-events-none',\n          className,\n        )}\n        {...props}\n      >\n        {Array.from({ length: max }, (_, i) => {\n          const starValue = i + 1\n          const fillRatio = Math.max(0, Math.min(1, displayValue - i)) // 0..1\n          const isHalf = precision === 'half' && fillRatio > 0 && fillRatio < 1\n\n          return (\n            <StarIcon\n              key={i}\n              Icon={Icon}\n              sizePx={iconPx}\n              fillRatio={fillRatio}\n              isHalf={isHalf}\n              interactive={isInteractive}\n              onHover={(halfFirst) => {\n                if (!isInteractive) return\n                const v = precision === 'half' && halfFirst ? starValue - 0.5 : starValue\n                setHoverValue(v)\n              }}\n              onClick={(halfFirst) => {\n                if (!isInteractive) return\n                const v = precision === 'half' && halfFirst ? starValue - 0.5 : starValue\n                setValue(v)\n              }}\n            />\n          )\n        })}\n      </div>\n    )\n  },\n)\nRating.displayName = 'Rating'\n\n// ── StarIcon: 單顆星 + half-precision overlay ─────────────────────────────\n\ninterface StarIconProps {\n  Icon: LucideIcon\n  sizePx: number\n  fillRatio: number // 0..1\n  isHalf: boolean\n  interactive: boolean\n  onHover: (halfFirst: boolean) => void\n  onClick: (halfFirst: boolean) => void\n}\n\nconst FILL_FILLED = 'var(--warning)' // yellow-6 — 黃星 convention\nconst FILL_EMPTY = 'var(--divider)' // 灰色空星(neutral-4 借 divider semantic alias,user 2026-05-09 拍板;對齊 Material rgba(0,0,0,0.26) muted-fill canonical)\n\nfunction StarIcon({ Icon, sizePx, fillRatio, isHalf, interactive, onHover, onClick }: StarIconProps) {\n  // a11y(2026-04-25 axe nested-interactive fix):inner 點擊目標改 <span>(非 interactive\n  // element),不會跟外層 role='slider' 形成 nested-interactive 違規。鍵盤控制統一在外層\n  // slider 的 arrow keys,inner 只處理 mouse click 定位。Ant Rate / Material MUI 同模式。\n  if (!isHalf) {\n    // Full: 一整顆 fill(filled 或 empty)\n    const fill = fillRatio >= 1 ? FILL_FILLED : FILL_EMPTY\n    return (\n      <span\n        role=\"presentation\"\n        onMouseEnter={interactive ? () => onHover(false) : undefined}\n        onClick={interactive ? () => onClick(false) : undefined}\n        className={cn(\n          'inline-flex',\n          interactive ? 'cursor-pointer' : 'cursor-default',\n        )}\n        style={{ color: fill }}\n        aria-hidden\n      >\n        {/* stroke=\"none\" 移除 Lucide Star 預設的 outline stroke(lucide defaultAttributes\n            strokeWidth=2 + stroke=currentColor 會畫輪廓),讓星星是純 fill-only 的 shape——\n            fill 與 outline 同色視覺上仍有亮度差。\n            世界級對照:Ant Rate / Material MUI Rating 皆純 fill,無 outline stroke。*/}\n        <Icon size={sizePx} fill={fill} stroke=\"none\" className=\"shrink-0\" />\n      </span>\n    )\n  }\n\n  // Half: 兩個重疊 icon,左半 filled / 右半 empty + 兩個 hover zone 切半星\n  return (\n    <span className=\"relative inline-flex\" style={{ width: sizePx, height: sizePx }}>\n      <Icon size={sizePx} fill={FILL_EMPTY} stroke=\"none\" className=\"absolute inset-0\" style={{ color: FILL_EMPTY }} />\n      <span className=\"absolute inset-0 overflow-hidden\" style={{ width: sizePx * fillRatio }}>\n        <Icon size={sizePx} fill={FILL_FILLED} stroke=\"none\" style={{ color: FILL_FILLED }} />\n      </span>\n      {interactive && (\n        <>\n          <span\n            role=\"presentation\"\n            onMouseEnter={() => onHover(true)}\n            onClick={() => onClick(true)}\n            className=\"absolute inset-y-0 left-0 w-1/2 cursor-pointer\"\n            aria-hidden\n          />\n          <span\n            role=\"presentation\"\n            onMouseEnter={() => onHover(false)}\n            onClick={() => onClick(false)}\n            className=\"absolute inset-y-0 right-0 w-1/2 cursor-pointer\"\n            aria-hidden\n          />\n        </>\n      )}\n    </span>\n  )\n}\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const ratingMeta = {\n  component: 'Rating',\n  family: null, // self-contained primitive(對齊 spec frontmatter self-contained + body L24;非 Family 4)\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-transparent'],\n    fg: [],\n    ring: ['ring-ring'],\n  },\n} as const\n\nexport { Rating }\n"],"names":[],"mappings":"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"}

package/dist/components/ScrollArea/index.d.ts

@@ -0,0 +1,2 @@
+export * from './scroll-area';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ScrollArea/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/index.ts"],"names":[],"mappings":"AAIA,cAAc,eAAe,CAAA"}

package/dist/components/ScrollArea/index.js

@@ -0,0 +1,7 @@
+import { ScrollArea, ScrollBar, scrollAreaMeta } from "./scroll-area.js";
+export {
+  ScrollArea,
+  ScrollBar,
+  scrollAreaMeta
+};
+//# sourceMappingURL=index.js.map

package/dist/components/ScrollArea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/ScrollArea/scroll-area.d.ts

@@ -34,7 +34,7 @@ export declare const scrollAreaMeta: {
     readonly family: null;
     readonly variants: {};
     readonly sizes: {};
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default"];
     readonly tokens: {
         readonly bg: readonly [];
         readonly fg: readonly [];

package/dist/components/ScrollArea/scroll-area.js

@@ -13,7 +13,7 @@ const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) =>
         ScrollAreaPrimitive.Viewport,
         {
           tabIndex: 0,
-          className: "flex-1 min-h-0 w-full rounded-[inherit] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-primary",
+          className: "flex-1 min-h-0 w-full rounded-[inherit] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring",
           children
         }
       ),
@@ -50,7 +50,7 @@ const scrollAreaMeta = {
   // non-family composite / overlay / layout
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  states: ["default"],
   tokens: {
     bg: [],
     fg: [],

package/dist/components/ScrollArea/scroll-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll-area.js","sources":["../../../src/components/ScrollArea/scroll-area.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'\nimport { cn } from '@/lib/utils'\n\n/**\n * ScrollArea — 自訂樣式的捲動區(Radix ScrollArea primitive 包裝)\n *\n * 世界級對照:shadcn `ScrollArea` / Ant Design scrollable 容器的 pattern。\n *\n * ── 為什麼需要 ScrollArea ──\n * Native scrollbar 跨 OS 不一致:\n *   macOS: overlay(不吃寬度,預設隱藏,滾動時浮出)\n *   Windows / Linux: always-visible(永遠吃 ~15-17px 寬度)\n *\n * 結果:同一個 DataTable / Sheet / Dialog 內容在 macOS 看起來對齊,在 Windows\n * 右側被吃 17px 跑版(「Left pinned + Row Actions」那張圖的問題)。\n *\n * ScrollArea 用 Radix 包裝自建 overlay 捲軸 → **跨 OS 一致不吃寬度**,\n * 捲動時浮現(hover / scroll 自動顯示)。\n *\n * ── 何時用 ──\n * - DataTable 橫向捲動(水平跑版最明顯場景)\n * - Sheet / Dialog 垂直內容捲動(body 太長)\n * - Sidebar nav 長列表\n * - 任何「內容可能溢出容器」且「跨 OS 視覺必須一致」的場景\n *\n * ── 何時不用 ──\n * - 全頁捲動(瀏覽器 document scroll,保持 native 即可;ScrollArea 是 sub-region)\n * - 單行 truncate(用 text-overflow:ellipsis 就夠)\n * - 極短內容(不會捲動 → 不需 wrapper)\n */\n\nconst ScrollArea = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <ScrollAreaPrimitive.Root\n    ref={ref}\n    className={cn('relative flex flex-col overflow-hidden', className)}\n    {...props}\n  >\n    {/* Viewport canonical(2026-04-23):Root 用 `flex flex-col`,Viewport 用 `flex-1 min-h-0`。\n        原 `h-full` 在 Root 為 flex item(外層 flex-1 min-h-0)時失效 — Chrome 不把\n        flex-computed 高度視為 `height: 100%` 的 definite anchor,導致 Viewport 撐成\n        content height 而非 parent height → 失去 scroll 能力。\n        改 Root 為 flex container,Viewport 成 flex item,flex algorithm 給 definite height。\n        `w-full` 保留(水平維度不受影響)。 */}\n    {/* a11y(2026-04-25 axe scrollable-region-focusable fix):Viewport 需 tabIndex=0\n        才能 keyboard focus(Safari 不自動把 scroll container 標 focusable)。focus-\n        visible:outline 用 DS focus ring,不破壞視覺。 */}\n    <ScrollAreaPrimitive.Viewport\n      tabIndex={0}\n      className=\"flex-1 min-h-0 w-full rounded-[inherit] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-primary\"\n    >\n      {children}\n    </ScrollAreaPrimitive.Viewport>\n    <ScrollBar />\n    <ScrollAreaPrimitive.Corner />\n  </ScrollAreaPrimitive.Root>\n))\nScrollArea.displayName = 'ScrollArea'\n\nconst ScrollBar = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(({ className, orientation = 'vertical', ...props }, ref) => (\n  <ScrollAreaPrimitive.ScrollAreaScrollbar\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      'flex touch-none select-none transition-colors',\n      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',\n      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',\n      className,\n    )}\n    {...props}\n  >\n    {/* Thumb 用 scrollbar-thumb / -hover semantic alias(2026-05-09 抽 SSOT,跟 DataTable fake scrollbar\n         共享 token)。Token 值仍 = `--border` / `--border-hover`(neutral-5/-6)— 世界級 SaaS\n         (Linear / Notion / Figma / macOS)scrollbar thumb 慣例「很淡、幾乎看不見,hover 略深」。\n         前身直接 `bg-border` borrowing(2026-04 ship)→ semantic alias 收斂 SSOT(避免 thumb 視覺\n         未來演化時誤動 Field/Input/Checkbox border 視覺)。對齊 shadcn ScrollArea source `bg-border`。 */}\n    <ScrollAreaPrimitive.ScrollAreaThumb\n      className={cn('relative flex-1 rounded-full bg-[var(--scrollbar-thumb)] hover:bg-[var(--scrollbar-thumb-hover)] transition-colors')}\n    />\n  </ScrollAreaPrimitive.ScrollAreaScrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const scrollAreaMeta = {\n  component: 'ScrollArea',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: [],\n    fg: [],\n    ring: [],\n  },\n} as const\n\nexport { ScrollArea, ScrollBar }\n"],"names":[],"mappings":";;;;AAiCA,MAAM,aAAa,MAAM,WAGvB,CAAC,EAAE,WAAW,UAAU,GAAG,SAAS,QACpC;AAAA,EAAC,oBAAoB;AAAA,EAApB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,0CAA0C,SAAS;AAAA,IAChE,GAAG;AAAA,IAWJ,UAAA;AAAA,MAAA;AAAA,QAAC,oBAAoB;AAAA,QAApB;AAAA,UACC,UAAU;AAAA,UACV,WAAU;AAAA,UAET;AAAA,QAAA;AAAA,MAAA;AAAA,0BAEF,WAAA,EAAU;AAAA,MACX,oBAAC,oBAAoB,QAApB,CAAA,CAA2B;AAAA,IAAA;AAAA,EAAA;AAC9B,CACD;AACD,WAAW,cAAc;AAEzB,MAAM,YAAY,MAAM,WAGtB,CAAC,EAAE,WAAW,cAAc,YAAY,GAAG,SAAS,QACpD;AAAA,EAAC,oBAAoB;AAAA,EAApB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA,gBAAgB,cAAc;AAAA,MAC9B,gBAAgB,gBAAgB;AAAA,MAChC;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAOJ,UAAA;AAAA,MAAC,oBAAoB;AAAA,MAApB;AAAA,QACC,WAAW,GAAG,oHAAoH;AAAA,MAAA;AAAA,IAAA;AAAA,EACpI;AACF,CACD;AACD,UAAU,cAAc,oBAAoB,oBAAoB;AAIzD,MAAM,iBAAiB;AAAA,EAC5B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAA;AAAA,IACJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}
+{"version":3,"file":"scroll-area.js","sources":["../../../src/components/ScrollArea/scroll-area.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'\nimport { cn } from '@/lib/utils'\n\n/**\n * ScrollArea — 自訂樣式的捲動區(Radix ScrollArea primitive 包裝)\n *\n * 世界級對照:shadcn `ScrollArea` / Ant Design scrollable 容器的 pattern。\n *\n * ── 為什麼需要 ScrollArea ──\n * Native scrollbar 跨 OS 不一致:\n *   macOS: overlay(不吃寬度,預設隱藏,滾動時浮出)\n *   Windows / Linux: always-visible(永遠吃 ~15-17px 寬度)\n *\n * 結果:同一個 DataTable / Sheet / Dialog 內容在 macOS 看起來對齊,在 Windows\n * 右側被吃 17px 跑版(「Left pinned + Row Actions」那張圖的問題)。\n *\n * ScrollArea 用 Radix 包裝自建 overlay 捲軸 → **跨 OS 一致不吃寬度**,\n * 捲動時浮現(hover / scroll 自動顯示)。\n *\n * ── 何時用 ──\n * - DataTable 橫向捲動(水平跑版最明顯場景)\n * - Sheet / Dialog 垂直內容捲動(body 太長)\n * - Sidebar nav 長列表\n * - 任何「內容可能溢出容器」且「跨 OS 視覺必須一致」的場景\n *\n * ── 何時不用 ──\n * - 全頁捲動(瀏覽器 document scroll,保持 native 即可;ScrollArea 是 sub-region)\n * - 單行 truncate(用 text-overflow:ellipsis 就夠)\n * - 極短內容(不會捲動 → 不需 wrapper)\n */\n\nconst ScrollArea = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n  <ScrollAreaPrimitive.Root\n    ref={ref}\n    className={cn('relative flex flex-col overflow-hidden', className)}\n    {...props}\n  >\n    {/* Viewport canonical(2026-04-23):Root 用 `flex flex-col`,Viewport 用 `flex-1 min-h-0`。\n        原 `h-full` 在 Root 為 flex item(外層 flex-1 min-h-0)時失效 — Chrome 不把\n        flex-computed 高度視為 `height: 100%` 的 definite anchor,導致 Viewport 撐成\n        content height 而非 parent height → 失去 scroll 能力。\n        改 Root 為 flex container,Viewport 成 flex item,flex algorithm 給 definite height。\n        `w-full` 保留(水平維度不受影響)。 */}\n    {/* a11y(2026-04-25 axe scrollable-region-focusable fix):Viewport 需 tabIndex=0\n        才能 keyboard focus(Safari 不自動把 scroll container 標 focusable)。focus-\n        visible:outline 用 DS focus ring,不破壞視覺。 */}\n    <ScrollAreaPrimitive.Viewport\n      tabIndex={0}\n      className=\"flex-1 min-h-0 w-full rounded-[inherit] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring\"\n    >\n      {children}\n    </ScrollAreaPrimitive.Viewport>\n    <ScrollBar />\n    <ScrollAreaPrimitive.Corner />\n  </ScrollAreaPrimitive.Root>\n))\nScrollArea.displayName = 'ScrollArea'\n\nconst ScrollBar = React.forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(({ className, orientation = 'vertical', ...props }, ref) => (\n  <ScrollAreaPrimitive.ScrollAreaScrollbar\n    ref={ref}\n    orientation={orientation}\n    className={cn(\n      'flex touch-none select-none transition-colors',\n      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',\n      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',\n      className,\n    )}\n    {...props}\n  >\n    {/* Thumb 用 scrollbar-thumb / -hover semantic alias(2026-05-09 抽 SSOT,跟 DataTable fake scrollbar\n         共享 token)。Token 值仍 = `--border` / `--border-hover`(neutral-5/-6)— 世界級 SaaS\n         (Linear / Notion / Figma / macOS)scrollbar thumb 慣例「很淡、幾乎看不見,hover 略深」。\n         前身直接 `bg-border` borrowing(2026-04 ship)→ semantic alias 收斂 SSOT(避免 thumb 視覺\n         未來演化時誤動 Field/Input/Checkbox border 視覺)。對齊 shadcn ScrollArea source `bg-border`。 */}\n    <ScrollAreaPrimitive.ScrollAreaThumb\n      className={cn('relative flex-1 rounded-full bg-[var(--scrollbar-thumb)] hover:bg-[var(--scrollbar-thumb-hover)] transition-colors')}\n    />\n  </ScrollAreaPrimitive.ScrollAreaScrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const scrollAreaMeta = {\n  component: 'ScrollArea',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default'],\n  tokens: {\n    bg: [],\n    fg: [],\n    ring: [],\n  },\n} as const\n\nexport { ScrollArea, ScrollBar }\n"],"names":[],"mappings":";;;;AAiCA,MAAM,aAAa,MAAM,WAGvB,CAAC,EAAE,WAAW,UAAU,GAAG,SAAS,QACpC;AAAA,EAAC,oBAAoB;AAAA,EAApB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,0CAA0C,SAAS;AAAA,IAChE,GAAG;AAAA,IAWJ,UAAA;AAAA,MAAA;AAAA,QAAC,oBAAoB;AAAA,QAApB;AAAA,UACC,UAAU;AAAA,UACV,WAAU;AAAA,UAET;AAAA,QAAA;AAAA,MAAA;AAAA,0BAEF,WAAA,EAAU;AAAA,MACX,oBAAC,oBAAoB,QAApB,CAAA,CAA2B;AAAA,IAAA;AAAA,EAAA;AAC9B,CACD;AACD,WAAW,cAAc;AAEzB,MAAM,YAAY,MAAM,WAGtB,CAAC,EAAE,WAAW,cAAc,YAAY,GAAG,SAAS,QACpD;AAAA,EAAC,oBAAoB;AAAA,EAApB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA,gBAAgB,cAAc;AAAA,MAC9B,gBAAgB,gBAAgB;AAAA,MAChC;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAOJ,UAAA;AAAA,MAAC,oBAAoB;AAAA,MAApB;AAAA,QACC,WAAW,GAAG,oHAAoH;AAAA,MAAA;AAAA,IAAA;AAAA,EACpI;AACF,CACD;AACD,UAAU,cAAc,oBAAoB,oBAAoB;AAIzD,MAAM,iBAAiB;AAAA,EAC5B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAA;AAAA,IACJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}

package/dist/components/SegmentedControl/index.d.ts

@@ -0,0 +1,2 @@
+export * from './segmented-control';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/SegmentedControl/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/index.ts"],"names":[],"mappings":"AAIA,cAAc,qBAAqB,CAAA"}

package/dist/components/SegmentedControl/index.js

@@ -0,0 +1,9 @@
+import { SegmentedControl, SegmentedControlItem, segmentedControlItemVariants, segmentedControlMeta, segmentedControlVariants } from "./segmented-control.js";
+export {
+  SegmentedControl,
+  SegmentedControlItem,
+  segmentedControlItemVariants,
+  segmentedControlMeta,
+  segmentedControlVariants
+};
+//# sourceMappingURL=index.js.map

package/dist/components/SegmentedControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/SegmentedControl/segmented-control.d.ts

@@ -61,13 +61,13 @@ export interface SegmentedControlItemProps extends React.ComponentPropsWithoutRe
 declare const SegmentedControlItem: React.ForwardRefExoticComponent<SegmentedControlItemProps & React.RefAttributes<HTMLButtonElement>>;
 export declare const segmentedControlMeta: {
     readonly component: "SegmentedControl";
-    readonly family: null;
+    readonly family: 3;
     readonly variants: {};
     readonly sizes: {
         readonly xs: {
             readonly fieldHeight: 24;
             readonly typography: "caption";
-            readonly iconSize: 14;
+            readonly iconSize: 16;
             readonly purpose: "row-embedded inline action / DataTable inline filter";
         };
         readonly sm: {

package/dist/components/SegmentedControl/segmented-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/segmented-control.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAEpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAM9C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,KAAK,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAiBrD,QAAA,MAAM,wBAAwB;;8EAa7B,CAAA;AAED,MAAM,WAAW,qBACf,SAAQ,IAAI,CACR,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,EAChE,MAAM,GAAG,cAAc,GAAG,OAAO,GAAG,eAAe,CACpD;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAA;IAC3B,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC;AAED,QAAA,MAAM,gBAAgB,8FAqDrB,CAAA;AAmBD,QAAA,MAAM,YAAY;;;8EA0CjB,CAAA;AAMD,MAAM,WAAW,yBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC;IACxE,qDAAqD;IACrD,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,oBAAoB,qGA2DxB,CAAA;AAMF,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBvB,CAAA;AAEV,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,YAAY,IAAI,4BAA4B,EAAE,CAAA;AACzH,YAAY,EAAE,oBAAoB,EAAE,CAAA"}
+{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/segmented-control.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAEpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAM9C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,KAAK,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAiBrD,QAAA,MAAM,wBAAwB;;8EAa7B,CAAA;AAED,MAAM,WAAW,qBACf,SAAQ,IAAI,CACR,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,EAChE,MAAM,GAAG,cAAc,GAAG,OAAO,GAAG,eAAe,CACpD;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAA;IAC3B,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC;AAED,QAAA,MAAM,gBAAgB,8FAmDrB,CAAA;AAmBD,QAAA,MAAM,YAAY;;;8EA0CjB,CAAA;AAMD,MAAM,WAAW,yBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC;IACxE,qDAAqD;IACrD,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,oBAAoB,qGA4DxB,CAAA;AAMF,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBvB,CAAA;AAEV,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,YAAY,IAAI,4BAA4B,EAAE,CAAA;AACzH,YAAY,EAAE,oBAAoB,EAAE,CAAA"}