@qijenchen/design-system 0.1.0-beta.63 → 0.1.0-beta.65

package/CLAUDE.md

@@ -177,7 +177,7 @@ CLAUDE.md target ≤ 200(Anthropic best-practice)/ transition ≤ 400 / hard cap
 | shadcn compat alias 回流 | dark mode 不聯動 |
 | `asChild ? Slot : Native` 內部 JSX 仍渲染多 children | React.Children.only runtime fail — Slot 規範 children 必為單 element,內部 `{icon}{label}{badge}` 多 expression 變 array → throw。asChild 分支 render 只傳 consumer child;tsc/build 過,story 打開才炸 |
 | `tsc -b` 不 emit declaration | TS4023 漏抓;型別 surface 改動必 `npm run build:lib`(詳 `.claude/rules/self-verify.md` Post-edit)|
-| `rsync -a` 對「等長 + 同秒」檔靜默跳過 | 必 `--checksum` + 寫後 fail-closed 斷言(詳 `scripts/build-published-template-mirror.mjs` 檔頭;2026-06-07 beta.56-58 anchor)|
+| 工具 flag 沉默陷阱:`rsync -a` 等長同秒靜默跳過(必 `--checksum`+fail-closed,詳 build-published-template-mirror.mjs 檔頭)/ `rg` 黏寫 `-rn` 的 `-r`=replace 輸出變假字串(`-n`/`-l` 永不黏 `r`,2026-06-12 兩次答錯 anchor)| 寫後斷言 + flag 分開寫 |
 | DS css 不在 tokens.css aggregator 也沒被 tsx import = orphan | consumer 靜默拿不到 → 跑版;hook `check_orphan_ds_css.sh` 機械攔(2026-05-27 anchor)|
 
 新 bug → 歸 Meta-Pattern OR 本表 1 行;> 10 條 = 漏寫,**評估 meta-merge 既有 M-rule 而非無腦新增**(meta-patterns velocity ≤ 3/quarter,單 M-rule 必吸收 ≥ 3 prior bugs)。

package/dist/components/Checkbox/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAA;AAE7D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAG3F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAA;AAM1E,QAAA,MAAM,gBAAgB;;8EA8BrB,CAAA;AA6BD,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,EACnE,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,uHAAuH;IACvH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,iDAAiD;IACjD,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAID,QAAA,MAAM,QAAQ,yFA2Gb,CAAA;AAKD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmBf,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAA;AAE7D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAI3F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAA;AAM1E,QAAA,MAAM,gBAAgB;;8EA8BrB,CAAA;AAiCD,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,EACnE,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,uHAAuH;IACvH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,iDAAiD;IACjD,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAID,QAAA,MAAM,QAAQ,yFAgJb,CAAA;AAKD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmBf,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/Checkbox/checkbox.js

@@ -4,7 +4,8 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Minus, Check } from "lucide-react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils.js";
-import { useFieldContext, useResolvedFieldDisabled, useResolvedFieldMode } from "../Field/field-context.js";
+import { useFieldContext, useResolvedFieldDisabled, useResolvedFieldMode, useResolvedFieldSize } from "../Field/field-context.js";
+import { fieldWrapperStyles } from "../Field/field-wrapper.js";
 import { SelectionItem } from "../SelectionControl/selection-item.js";
 import { CheckboxGroupContext } from "./checkbox-group.js";
 const checkboxVariants = cva(
@@ -71,16 +72,40 @@ const Checkbox = React.forwardRef(
     const resolvedDisabled = useResolvedFieldDisabled(disabled);
     const resolvedMode = useResolvedFieldMode({ mode, disabled, readOnly });
     const effectiveReadOnly = readOnly || resolvedMode === "readonly";
+    const effectiveDisabled = resolvedDisabled || resolvedMode === "disabled";
+    const resolvedBoxSize = useResolvedFieldSize(size ?? void 0, "md");
     if (resolvedMode === "display") {
       const isChecked = props.checked === true;
       return isChecked ? /* @__PURE__ */ jsx("span", { className: "text-foreground", children: "✓" }) : /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: "—" });
     }
+    if (effectiveReadOnly && insideField && effectiveLabel == null) {
+      const isChecked = (props.checked ?? props.defaultChecked) === true;
+      const boxSize = resolvedBoxSize;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "checkbox",
+          "aria-checked": isChecked,
+          "aria-readonly": "true",
+          "aria-labelledby": fieldCtx == null ? void 0 : fieldCtx.labelId,
+          "aria-invalid": (fieldCtx == null ? void 0 : fieldCtx.invalid) || void 0,
+          "data-readonly": "true",
+          tabIndex: 0,
+          className: cn(
+            fieldWrapperStyles({ size: boxSize, mode: "readonly", variant: "default" }),
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            className
+          ),
+          children: isChecked ? /* @__PURE__ */ jsx("span", { className: "text-foreground", children: "✓" }) : /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: "—" })
+        }
+      );
+    }
     const rootEl = /* @__PURE__ */ jsx(
       CheckboxPrimitive.Root,
       {
         id: inputId,
         ref,
-        disabled: resolvedDisabled,
+        disabled: effectiveDisabled,
         "aria-readonly": effectiveReadOnly || void 0,
         "data-readonly": effectiveReadOnly || void 0,
         tabIndex: effectiveReadOnly ? -1 : void 0,
@@ -100,7 +125,7 @@ const Checkbox = React.forwardRef(
         icon,
         avatar,
         htmlFor: inputId,
-        disabled: resolvedDisabled,
+        disabled: effectiveDisabled,
         size: sizeKey
       }
     );

package/dist/components/Checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../src/components/Checkbox/checkbox.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 CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { Check, Minus } 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, useResolvedFieldDisabled, useResolvedFieldMode } 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 { CheckboxGroupContext } from \"./checkbox-group\"\n\n// ── Variants ────────────────────────────────────────────────────────────────\n// 三種尺寸（sm/md=16px, lg=20px），對齊 icon 系統與 SelectionItem。\n\nconst checkboxVariants = cva(\n  [\n    'grid place-content-center shrink-0 rounded-md',\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]:bg-primary data-[state=checked]:text-on-emphasis data-[state=checked]:border-primary',\n    'data-[state=checked]:hover:bg-primary-hover data-[state=checked]:hover:border-primary-hover',\n    'data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-on-emphasis data-[state=indeterminate]:border-primary',\n    'data-[state=indeterminate]:hover:bg-primary-hover data-[state=indeterminate]:hover:border-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]:text-fg-disabled disabled:data-[state=checked]:border-transparent',\n    'disabled:data-[state=indeterminate]:bg-disabled disabled:data-[state=indeterminate]:text-fg-disabled disabled:data-[state=indeterminate]:border-transparent',\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// ── Check Icon Size ─────────────────────────────────────────────────────────\nconst checkIconSize: Record<string, number> = { sm: 12, md: 12, lg: 16 }\n\n// ── Check Icon Stroke Weight ────────────────────────────────────────────────\n// 16px 以下 icon 視覺不夠顯眼 → 用較粗 stroke 補償。Lucide 預設 strokeWidth=2 在\n// 12px 下 render 約 1px 線寬,視覺偏細;加粗到 3.5(render ≈ 1.75px)才有足夠視覺權重。\n// 16px 用 2.5(render ≈ 1.67px)讓 checked 態的 check icon 夠顯眼。\n//\n// 為什麼不是 3 / 2:本 session 實測 3 / 2 在 storybook 上兩個 size 的 render 線寬差僅\n// 0.17px(1.5 vs 1.33),使用者肉眼看不出差異(image #64 回報)。改為 3.5 / 2.5:\n//   - md 12px × 3.5 → 1.75px 線寬\n//   - lg 16px × 2.5 → 1.67px 線寬\n// 兩者仍接近但 md 的線寬 **絕對值** 跟 16px 預設(1.33)有更明顯差異,視覺上「小 check 更粗」。\n//\n// 世界級對照:iOS HIG / Material 3 / Polaris 的 checkmark 在 <16px 下皆加粗 compensate。\n// 為什麼不用 Lucide absoluteStrokeWidth:那保持「絕對 px 粗細」,我們反而要「小尺寸比例更粗」。\n//\n// Check 與 Minus(indeterminate)共用此規則;Switch 的 SPECS.checkStroke 採同樣值。\n// 2026-05-18 簡化 per user 視覺證「sm/md 3.5 vs lg 2.5 看不出差別」(image #64 + 2nd round\n// 圖一 video proof)+「做完」approval:\n// - 原 {3.5, 3.5, 2.5} → effective render thickness 1.75 / 1.75 / 1.67 = 跨 size 差 0.08px(視覺看不出)\n// - 改 {3, 3, 2.5} 保留 sm/md 小尺寸 legibility insurance(per iOS HIG / Material 3 cite)\n//   + lg 仍稍粗於 Lucide default 2(保留 compensation 主旨,但不過度差異化)\nconst checkStrokeWidth: Record<string, number> = { sm: 3, md: 3, lg: 2.5 }\n\n// ── Types ───────────────────────────────────────────────────────────────────\n\nexport interface CheckboxProps\n  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,\n    VariantProps<typeof checkboxVariants> {\n  /**\n   * Inline label。提供時 Checkbox 自動透過 SelectionItem 包裝，\n   * 套用 text-body / text-foreground / disabled 色 的 codified 樣式。\n   * 在 <Field> context 內時此 prop 會被忽略（由 FieldLabel 接管）。\n   */\n  label?: React.ReactNode\n  /**\n   * Inline description（secondary 文字）。須與 label 搭配使用。\n   * 套用 text-body / text-fg-secondary 樣式。\n   * 在 <Field> context 內時此 prop 會被忽略（由 FieldDescription 接管）。\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 前)— 同上,SelectionItem 槽轉發 */\n  avatar?: AvatarData\n  /**\n   * readonly 模式：鎖定互動但維持 checked/unchecked 視覺正確。\n   * 與 disabled 的差異：readonly 不降色（可讀），disabled 降色（弱化）。\n   * 用於表單 readonly 呈現、DataTable cell 非編輯態。\n   */\n  readOnly?: boolean\n  /**\n   * Field mode(2026-05-05 Phase B3 align):\n   *   edit     — 一般可互動 checkbox(預設)\n   *   display  — **純展示**:渲染 ✓ / —(無互動 primitive、無 input chrome);\n   *              對齊 Carbon read-only / DataTable boolean cell 場景。取代既有 BooleanDisplay。\n   *   readonly — 同 readOnly prop:checkbox 視覺保留 + 鎖互動 + a11y readonly signal\n   *   disabled — 同 disabled prop:降色 + 鎖互動\n   */\n  mode?: FieldMode\n  /**\n   * Visual chrome — checkbox 本體無 input wrapper variant,本 prop 對 checkbox 主體無視覺影響;\n   * 為對齊 Field 4-mode + chrome 透傳契約而保留(M19 一致性)。\n   */\n  variant?: FieldVariant\n}\n\n// ── Component ───────────────────────────────────────────────────────────────\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(\n  (\n    {\n      className,\n      size,\n      label,\n      icon,\n      avatar,\n      description,\n      readOnly = false,\n      disabled,\n      mode,\n      // chrome 對 Checkbox 主體無視覺影響(無 input wrapper)— 接收純為 prop 一致性;destructure 防 leak 到 DOM。\n      variant: _chrome,\n      id: idProp,\n      ...props\n    },\n    ref\n  ) => {\n    const sizeKey = size ?? 'md'\n    const iconPx = checkIconSize[sizeKey]\n    const iconStrokeWidth = checkStrokeWidth[sizeKey]\n\n    // Field context:Checkbox 單獨塞進 Field(binary toggle)時,忽略自己的 label 讓 FieldLabel 接管\n    // 2026-05-31 #35:hooks(useFieldContext / useContext / useId)必在任何 conditional return 前呼叫(Rules of Hooks)。\n    // 原 mode='display' early return 寫在 hooks 之上 → runtime 切 mode 會 hook count 不一致 crash;已下移至 hooks 後。\n    //\n    // **例外**:Checkbox 是 CheckboxGroup 的 child 時(multi-select 情境),**每個 checkbox\n    // 的 label 是它自己的選項名**,FieldLabel 只是群組名稱 — 此時 label **必須保留**,\n    // 不能被 Field context 吞掉。AR50 的根因就是這個 branch 之前誤把 group 內的 checkbox\n    // label 全清空,導致 sheet 內 3 個 checkbox 沒 label。\n    const fieldCtx = useFieldContext()\n    const checkboxGroupCtx = React.useContext(CheckboxGroupContext)\n    const insideField = fieldCtx?.hasFieldWrapper === true\n    const insideGroup = checkboxGroupCtx?.inGroup === true\n    const shouldSuppressLabel = insideField && !insideGroup\n    const effectiveLabel = shouldSuppressLabel ? undefined : label\n    const effectiveDescription = shouldSuppressLabel ? undefined : description\n\n    // Id 連結\n    //\n    // ── 2026-04-21 bug fix ──\n    // 原本:`idProp ?? fieldCtx?.id ?? generatedId`。\n    // 在 Field 內 fieldCtx.id 存在,CheckboxGroup 所有 children 共用同一個 id →\n    // 每個 checkbox 的 `<label htmlFor={sameId}>` 全指向第一個 checkbox →\n    // **點任何 label 都只開關第一個 checkbox(real bug)**。\n    //\n    // 修法:group 內的 checkbox 強制用 generatedId(唯一),不沿用 Field id;\n    //      solo in Field(binary toggle)才沿用 fieldCtx.id 讓 FieldLabel htmlFor 生效。\n    const generatedId = React.useId()\n    const inputId = idProp ?? (insideGroup ? generatedId : (fieldCtx?.id ?? generatedId))\n\n    // 2026-06-08 SSOT cascade:disabled + mode 經 resolver hook(原 raw prop → <Field disabled>/<Field mode=\"display\"> 漏 cascade)\n    const resolvedDisabled = useResolvedFieldDisabled(disabled)\n    const resolvedMode = useResolvedFieldMode({ mode, disabled, readOnly })\n    const effectiveReadOnly = readOnly || resolvedMode === 'readonly'\n\n    // ── mode='display'(下移至所有 hooks 之後,per #35 Rules of Hooks)──────────\n    // 純展示模式:無互動 primitive、渲染 ✓ / —(checked=true → ✓ / 其他 → —)。取代 BooleanDisplay。\n    if (resolvedMode === 'display') {\n      const isChecked = props.checked === true\n      return isChecked\n        ? <span className=\"text-foreground\">✓</span>\n        : <span className=\"text-fg-muted\">—</span>\n    }\n\n    const rootEl = (\n      <CheckboxPrimitive.Root\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        aria-describedby={fieldCtx?.descriptionId}\n        className={cn(checkboxVariants({ size }), className)}\n        {...props}\n      >\n        <CheckboxPrimitive.Indicator className=\"grid place-content-center text-current\">\n          {props.checked === 'indeterminate'\n            ? <Minus style={{ width: iconPx, height: iconPx }} strokeWidth={iconStrokeWidth} />\n            : <Check style={{ width: iconPx, height: iconPx }} strokeWidth={iconStrokeWidth} />\n          }\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    )\n\n    // 無 label → 只渲染 checkbox 本體\n    if (effectiveLabel == null) return rootEl\n\n    // 有 label → 透過 SelectionItem 包裝（control 在左、label+description 在右）\n    return (\n      <SelectionItem\n        control={rootEl}\n        label={effectiveLabel}\n        description={effectiveDescription}\n        icon={icon}\n        avatar={avatar}\n        htmlFor={inputId}\n        disabled={resolvedDisabled}\n        size={sizeKey}\n      />\n    )\n  }\n)\nCheckbox.displayName = CheckboxPrimitive.Root.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 checkboxMeta = {\n  component: 'Checkbox',\n  family: null, // self-contained primitive(對齊 spec frontmatter self-contained + body L31;非 Family 4)\n  variants: {\n\n  },\n  sizes: {\n    // 2026-06-10 修 stale meta:iconSize 對齊 checkIconSize 真值(L49 sm/md=12, lg=16;deep-audit A.1b 抓 metadata drift)\n    sm: { fieldHeight: 28, iconSize: 12, typography: 'body' },\n    md: { fieldHeight: 32, iconSize: 12, typography: 'body' },\n    lg: { fieldHeight: 36, iconSize: 16, typography: 'body' },\n  },\n  states: ['default', 'hover', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-disabled', 'bg-primary', 'bg-primary-hover', 'bg-surface'],\n    fg: ['text-fg-disabled', 'text-fg-secondary', 'text-foreground'],\n    ring: ['ring-ring'],\n  },\n  defaultSize: 'md',\n} as const\n\nexport { Checkbox, checkboxVariants }\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"checkbox.js","sources":["../../../src/components/Checkbox/checkbox.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 CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { Check, Minus } 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, useResolvedFieldDisabled, useResolvedFieldMode, useResolvedFieldSize } from \"@/design-system/components/Field/field-context\"\nimport { fieldWrapperStyles } from \"@/design-system/components/Field/field-wrapper\"\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 { CheckboxGroupContext } from \"./checkbox-group\"\n\n// ── Variants ────────────────────────────────────────────────────────────────\n// 三種尺寸（sm/md=16px, lg=20px），對齊 icon 系統與 SelectionItem。\n\nconst checkboxVariants = cva(\n  [\n    'grid place-content-center shrink-0 rounded-md',\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]:bg-primary data-[state=checked]:text-on-emphasis data-[state=checked]:border-primary',\n    'data-[state=checked]:hover:bg-primary-hover data-[state=checked]:hover:border-primary-hover',\n    'data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-on-emphasis data-[state=indeterminate]:border-primary',\n    'data-[state=indeterminate]:hover:bg-primary-hover data-[state=indeterminate]:hover:border-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]:text-fg-disabled disabled:data-[state=checked]:border-transparent',\n    'disabled:data-[state=indeterminate]:bg-disabled disabled:data-[state=indeterminate]:text-fg-disabled disabled:data-[state=indeterminate]:border-transparent',\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// ── Check Icon Size ─────────────────────────────────────────────────────────\nconst checkIconSize: Record<string, number> = { sm: 12, md: 12, lg: 16 }\n\n// ── Check Icon Stroke Weight ────────────────────────────────────────────────\n// 16px 以下 icon 視覺不夠顯眼 → 用較粗 stroke 補償。Lucide 預設 strokeWidth=2 在\n// 12px 下 render 約 1px 線寬,視覺偏細;加粗到 3.5(render ≈ 1.75px)才有足夠視覺權重。\n// 16px 用 2.5(render ≈ 1.67px)讓 checked 態的 check icon 夠顯眼。\n//\n// 為什麼不是 3 / 2:本 session 實測 3 / 2 在 storybook 上兩個 size 的 render 線寬差僅\n// 0.17px(1.5 vs 1.33),使用者肉眼看不出差異(image #64 回報)。改為 3.5 / 2.5:\n//   - md 12px × 3.5 → 1.75px 線寬\n//   - lg 16px × 2.5 → 1.67px 線寬\n// 兩者仍接近但 md 的線寬 **絕對值** 跟 16px 預設(1.33)有更明顯差異,視覺上「小 check 更粗」。\n//\n// 世界級對照:iOS HIG / Material 3 / Polaris 的 checkmark 在 <16px 下皆加粗 compensate。\n// 為什麼不用 Lucide absoluteStrokeWidth:那保持「絕對 px 粗細」,我們反而要「小尺寸比例更粗」。\n//\n// Check 與 Minus(indeterminate)共用此規則;Switch 的 SPECS.checkStroke 採同樣值。\n// 2026-05-18 簡化 per user 視覺證「sm/md 3.5 vs lg 2.5 看不出差別」(image #64 + 2nd round\n// 圖一 video proof)+「做完」approval:\n// - 原 {3.5, 3.5, 2.5} → effective render thickness 1.75 / 1.75 / 1.67 = 跨 size 差 0.08px(視覺看不出)\n// - 改 {3, 3, 2.5} 保留 sm/md 小尺寸 legibility insurance(per iOS HIG / Material 3 cite)\n//   + lg 仍稍粗於 Lucide default 2(保留 compensation 主旨,但不過度差異化)\n// ⚠️ 2026-06-12:發現 base.css `.lucide{stroke-width:1.75}` 全域規則自 2026-04-08 起\n// 無條件蓋掉本 prop(CSS class > SVG attribute)→ 本表從未真渲染過,上述 05-18 視覺\n// 測試兩者實為 0.875px(證據污染)。base.css 已改 `[stroke-width='2']` 限定,本表自此\n// 真實生效(pixel 驗證 1.50px)。SSOT → .claude/references/ui-dev-rules.md「小尺寸 icon stroke 補償」\nconst checkStrokeWidth: Record<string, number> = { sm: 3, md: 3, lg: 2.5 }\n\n// ── Types ───────────────────────────────────────────────────────────────────\n\nexport interface CheckboxProps\n  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,\n    VariantProps<typeof checkboxVariants> {\n  /**\n   * Inline label。提供時 Checkbox 自動透過 SelectionItem 包裝，\n   * 套用 text-body / text-foreground / disabled 色 的 codified 樣式。\n   * 在 <Field> context 內時此 prop 會被忽略（由 FieldLabel 接管）。\n   */\n  label?: React.ReactNode\n  /**\n   * Inline description（secondary 文字）。須與 label 搭配使用。\n   * 套用 text-body / text-fg-secondary 樣式。\n   * 在 <Field> context 內時此 prop 會被忽略（由 FieldDescription 接管）。\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 前)— 同上,SelectionItem 槽轉發 */\n  avatar?: AvatarData\n  /**\n   * readonly 模式：鎖定互動但維持 checked/unchecked 視覺正確。\n   * 與 disabled 的差異：readonly 不降色（可讀），disabled 降色（弱化）。\n   * 用於表單 readonly 呈現、DataTable cell 非編輯態。\n   */\n  readOnly?: boolean\n  /**\n   * Field mode(2026-05-05 Phase B3 align):\n   *   edit     — 一般可互動 checkbox(預設)\n   *   display  — **純展示**:渲染 ✓ / —(無互動 primitive、無 input chrome);\n   *              對齊 Carbon read-only / DataTable boolean cell 場景。取代既有 BooleanDisplay。\n   *   readonly — 同 readOnly prop:checkbox 視覺保留 + 鎖互動 + a11y readonly signal\n   *   disabled — 同 disabled prop:降色 + 鎖互動\n   */\n  mode?: FieldMode\n  /**\n   * Visual chrome — checkbox 本體無 input wrapper variant,本 prop 對 checkbox 主體無視覺影響;\n   * 為對齊 Field 4-mode + chrome 透傳契約而保留(M19 一致性)。\n   */\n  variant?: FieldVariant\n}\n\n// ── Component ───────────────────────────────────────────────────────────────\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(\n  (\n    {\n      className,\n      size,\n      label,\n      icon,\n      avatar,\n      description,\n      readOnly = false,\n      disabled,\n      mode,\n      // chrome 對 Checkbox 主體無視覺影響(無 input wrapper)— 接收純為 prop 一致性;destructure 防 leak 到 DOM。\n      variant: _chrome,\n      id: idProp,\n      ...props\n    },\n    ref\n  ) => {\n    const sizeKey = size ?? 'md'\n    const iconPx = checkIconSize[sizeKey]\n    const iconStrokeWidth = checkStrokeWidth[sizeKey]\n\n    // Field context:Checkbox 單獨塞進 Field(binary toggle)時,忽略自己的 label 讓 FieldLabel 接管\n    // 2026-05-31 #35:hooks(useFieldContext / useContext / useId)必在任何 conditional return 前呼叫(Rules of Hooks)。\n    // 原 mode='display' early return 寫在 hooks 之上 → runtime 切 mode 會 hook count 不一致 crash;已下移至 hooks 後。\n    //\n    // **例外**:Checkbox 是 CheckboxGroup 的 child 時(multi-select 情境),**每個 checkbox\n    // 的 label 是它自己的選項名**,FieldLabel 只是群組名稱 — 此時 label **必須保留**,\n    // 不能被 Field context 吞掉。AR50 的根因就是這個 branch 之前誤把 group 內的 checkbox\n    // label 全清空,導致 sheet 內 3 個 checkbox 沒 label。\n    const fieldCtx = useFieldContext()\n    const checkboxGroupCtx = React.useContext(CheckboxGroupContext)\n    const insideField = fieldCtx?.hasFieldWrapper === true\n    const insideGroup = checkboxGroupCtx?.inGroup === true\n    const shouldSuppressLabel = insideField && !insideGroup\n    const effectiveLabel = shouldSuppressLabel ? undefined : label\n    const effectiveDescription = shouldSuppressLabel ? undefined : description\n\n    // Id 連結\n    //\n    // ── 2026-04-21 bug fix ──\n    // 原本:`idProp ?? fieldCtx?.id ?? generatedId`。\n    // 在 Field 內 fieldCtx.id 存在,CheckboxGroup 所有 children 共用同一個 id →\n    // 每個 checkbox 的 `<label htmlFor={sameId}>` 全指向第一個 checkbox →\n    // **點任何 label 都只開關第一個 checkbox(real bug)**。\n    //\n    // 修法:group 內的 checkbox 強制用 generatedId(唯一),不沿用 Field id;\n    //      solo in Field(binary toggle)才沿用 fieldCtx.id 讓 FieldLabel htmlFor 生效。\n    const generatedId = React.useId()\n    const inputId = idProp ?? (insideGroup ? generatedId : (fieldCtx?.id ?? generatedId))\n\n    // 2026-06-08 SSOT cascade:disabled + mode 經 resolver hook(原 raw prop → <Field disabled>/<Field mode=\"display\"> 漏 cascade)\n    const resolvedDisabled = useResolvedFieldDisabled(disabled)\n    const resolvedMode = useResolvedFieldMode({ mode, disabled, readOnly })\n    const effectiveReadOnly = readOnly || resolvedMode === 'readonly'\n    // mode='disabled'(如 DataTable disabled cell 直傳)必須落到真 disabled chrome —\n    // 2026-06-12 修:原本只看 resolvedDisabled(prop/fieldCtx),mode='disabled' 無人消費\n    // → disabled boolean cell 渲出可 focus 的正常外觀 checkbox(違 field-controls.spec L286)\n    const effectiveDisabled = resolvedDisabled || resolvedMode === 'disabled'\n    // readonly 灰框 size:走 SSOT resolver(prop > ctx > 'md',field-context.ts:150-161)\n    const resolvedBoxSize = useResolvedFieldSize(size ?? undefined, 'md') as 'sm' | 'md' | 'lg'\n\n    // ── mode='display'(下移至所有 hooks 之後,per #35 Rules of Hooks)──────────\n    // 純展示模式:無互動 primitive、渲染 ✓ / —(checked=true → ✓ / 其他 → —)。取代 BooleanDisplay。\n    if (resolvedMode === 'display') {\n      const isChecked = props.checked === true\n      return isChecked\n        ? <span className=\"text-foreground\">✓</span>\n        : <span className=\"text-fg-muted\">—</span>\n    }\n\n    // ── mode='readonly' in Field(2026-06-12 user 拍板「灰框 + ✓/—」)─────────────\n    // Field 內 readonly boolean = readonly 灰框 chrome + display 同款值語言 ✓/—。\n    // 灰框消費 fieldWrapperStyles 同一 cva = 與 Input readonly 字面同源(SSOT,改一處全動)。\n    // 理由:同一張 readonly 表單裡文字控件有 bg-readonly 灰框鎖定訊號,boolean 保留全彩\n    // 控件會誤導「仍可操作」(世界級 0/4 用原樣鎖互動:Salesforce=✓ 靜態 glyph /\n    // SAP=靜態文字 / Atlassian=readView / Ant Pro=文字)。\n    // Scope:僅 Field 內且無 inline label(FieldLabel 接管 label 的表單欄位場景);\n    // standalone readOnly(settings list / SelectionItem row)維持原樣鎖互動不變。\n    if (effectiveReadOnly && insideField && effectiveLabel == null) {\n      const isChecked = (props.checked ?? props.defaultChecked) === true\n      const boxSize = resolvedBoxSize\n      return (\n        <div\n          role=\"checkbox\"\n          aria-checked={isChecked}\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          {isChecked ? <span className=\"text-foreground\">✓</span> : <span className=\"text-fg-muted\">—</span>}\n        </div>\n      )\n    }\n\n    const rootEl = (\n      <CheckboxPrimitive.Root\n        id={inputId}\n        ref={ref}\n        disabled={effectiveDisabled}\n        aria-readonly={effectiveReadOnly || undefined}\n        data-readonly={effectiveReadOnly || undefined}\n        tabIndex={effectiveReadOnly ? -1 : undefined}\n        aria-describedby={fieldCtx?.descriptionId}\n        className={cn(checkboxVariants({ size }), className)}\n        {...props}\n      >\n        <CheckboxPrimitive.Indicator className=\"grid place-content-center text-current\">\n          {props.checked === 'indeterminate'\n            ? <Minus style={{ width: iconPx, height: iconPx }} strokeWidth={iconStrokeWidth} />\n            : <Check style={{ width: iconPx, height: iconPx }} strokeWidth={iconStrokeWidth} />\n          }\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    )\n\n    // 無 label → 只渲染 checkbox 本體\n    if (effectiveLabel == null) return rootEl\n\n    // 有 label → 透過 SelectionItem 包裝（control 在左、label+description 在右）\n    return (\n      <SelectionItem\n        control={rootEl}\n        label={effectiveLabel}\n        description={effectiveDescription}\n        icon={icon}\n        avatar={avatar}\n        htmlFor={inputId}\n        disabled={effectiveDisabled}\n        size={sizeKey}\n      />\n    )\n  }\n)\nCheckbox.displayName = CheckboxPrimitive.Root.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 checkboxMeta = {\n  component: 'Checkbox',\n  family: null, // self-contained primitive(對齊 spec frontmatter self-contained + body L31;非 Family 4)\n  variants: {\n\n  },\n  sizes: {\n    // 2026-06-10 修 stale meta:iconSize 對齊 checkIconSize 真值(L49 sm/md=12, lg=16;deep-audit A.1b 抓 metadata drift)\n    sm: { fieldHeight: 28, iconSize: 12, typography: 'body' },\n    md: { fieldHeight: 32, iconSize: 12, typography: 'body' },\n    lg: { fieldHeight: 36, iconSize: 16, typography: 'body' },\n  },\n  states: ['default', 'hover', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-disabled', 'bg-primary', 'bg-primary-hover', 'bg-surface'],\n    fg: ['text-fg-disabled', 'text-fg-secondary', 'text-foreground'],\n    ring: ['ring-ring'],\n  },\n  defaultSize: 'md',\n} as const\n\nexport { Checkbox, checkboxVariants }\n"],"names":[],"mappings":"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"}

package/dist/components/PeoplePicker/person-display.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"person-display.d.ts","sourceRoot":"","sources":["../../../src/components/PeoplePicker/person-display.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAqB9B,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;0BAGsB;IACtB,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IAC/C;mEAC+D;IAC/D,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B;;oEAEgE;IAChE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;6DACyD;IACzD,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC3C,kFAAkF;IAClF,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;CAC3B;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,UAAU,CAAA;AAE7C,iBAAS,aAAa,CAAC,KAAK,EAAE,WAAW,GAAG,UAAU,CAErD;AASD,iBAAS,sBAAsB,CAAC,MAAM,EAAE,UAAU,GAAG,KAAK,CAAC,SAAS,CAoBnE;AAwDD,iBAAS,aAAa,CAAC,EAAE,KAAK,EAAE,IAAW,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAAE,2CAgBvG;kBAhBQ,aAAa;;;AAwBtB,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,IAAW,EACX,GAAG,EACH,QAAgB,EAChB,QAAQ,GACT,EAAE;IACD,KAAK,CAAC,EAAE,WAAW,EAAE,GAAG,IAAI,CAAA;IAC5B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,8EAA8E;IAC9E,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;CACzC,2CA+FA;kBAnHQ,kBAAkB;;;AAqL3B,iBAAS,eAAe,CAAC,EACvB,MAAM,EAAE,IAAW,EAAE,QAAQ,GAC9B,EAAE;IACD,MAAM,EAAE,UAAU,CAAA;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB,2CAOA;kBAbQ,eAAe;;;AAgBxB,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,eAAe,EAAE,sBAAsB,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"person-display.d.ts","sourceRoot":"","sources":["../../../src/components/PeoplePicker/person-display.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAqB9B,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;0BAGsB;IACtB,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IAC/C;mEAC+D;IAC/D,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B;;oEAEgE;IAChE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;6DACyD;IACzD,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC3C,kFAAkF;IAClF,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;CAC3B;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,UAAU,CAAA;AAE7C,iBAAS,aAAa,CAAC,KAAK,EAAE,WAAW,GAAG,UAAU,CAErD;AASD,iBAAS,sBAAsB,CAAC,MAAM,EAAE,UAAU,GAAG,KAAK,CAAC,SAAS,CAoBnE;AAwDD,iBAAS,aAAa,CAAC,EAAE,KAAK,EAAE,IAAW,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAAE,2CAgBvG;kBAhBQ,aAAa;;;AAwBtB,iBAAS,kBAAkB,CAAC,EAC1B,KAAK,EACL,IAAW,EACX,GAAG,EACH,QAAgB,EAChB,QAAQ,GACT,EAAE;IACD,KAAK,CAAC,EAAE,WAAW,EAAE,GAAG,IAAI,CAAA;IAC5B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,8EAA8E;IAC9E,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;CACzC,2CA+FA;kBAnHQ,kBAAkB;;;AAsL3B,iBAAS,eAAe,CAAC,EACvB,MAAM,EAAE,IAAW,EAAE,QAAQ,GAC9B,EAAE;IACD,MAAM,EAAE,UAAU,CAAA;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB,2CAOA;kBAbQ,eAAe;;;AAgBxB,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,eAAe,EAAE,sBAAsB,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/PeoplePicker/person-display.js

@@ -178,7 +178,7 @@ function AvatarDismissOverlay({ onRemove, label }) {
         "transition-opacity duration-150",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
       ].join(" "),
-      children: /* @__PURE__ */ jsx(X, { size: 12, strokeWidth: 3.5, "aria-hidden": true })
+      children: /* @__PURE__ */ jsx(X, { size: 12, strokeWidth: 3, "aria-hidden": true })
     }
   );
 }

package/dist/components/PeoplePicker/person-display.js.map

@@ -1 +1 @@
-{"version":3,"file":"person-display.js","sources":["../../../src/components/PeoplePicker/person-display.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 { X } from 'lucide-react'\nimport { EMPTY_DISPLAY } from '@/design-system/components/Field/field-wrapper'\nimport { Tag } from '@/design-system/components/Tag/tag'\nimport { OverflowIndicator } from '@/design-system/components/OverflowIndicator/overflow-indicator'\nimport { Avatar } from '@/design-system/components/Avatar/avatar'\nimport { ProfileCard, ProfileCardDefaultActions } from '@/design-system/components/ProfileCard/profile-card'\nimport { useTableIsScrolling } from '@/design-system/components/Field/field-context'\nimport { ItemPrefix } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport {\n  getAvatarStackVisibleCount,\n  AVATAR_STACK_AVATAR_PX,\n  AVATAR_STACK_OVERFLOW_CHIP_PX,\n} from './avatar-stack-overflow'\n\n// ── Types ───────────────────────────────────────────────────────────────────\n\n// PersonData 承載 ProfileCard 所需的完整資訊。DS 全域 person avatar 的 hoverCard ProfileCard 永遠\n// 顯示同一組 sections(name + subtitle + status + 4 default fields + 自訂 fields + actions + View more)\n// — 缺資料顯 placeholder,不會 collapse。對齊 avatar.spec.md「person avatar hover → ProfileCard」\n// DS-wide canonical(2026-05-06 v11 always-render schema 升級)。\nexport interface PersonData {\n  name: string\n  avatarUrl?: string\n  /** 角色 / 部門 / ID 等 meta 單行(ProfileCard subtitle) */\n  description?: string\n  /** Presence 狀態(對齊 Avatar presence canonical)。**2026-05-14 v12 update**(per user 拍板):\n   *  production 每 user 一定有 presence state,**undefined = loading transient(資料還沒讀到)**,\n   *  不是「user 沒設定」。ProfileCard 在 undefined 期間隱藏整 status block,**禁** render「Status not set」\n   *  placeholder 文字。 */\n  status?: 'online' | 'away' | 'busy' | 'offline'\n  /** Status 訊息(ProfileCard status section)。只在 status defined 時 render,缺則顯 `—` placeholder。\n   *  Status undefined 整 block skip(無 statusMessage 也跟著 skip)。 */\n  statusMessage?: React.ReactNode\n  /** **2026-05-07 v15.7 user directive**:ProfileCard default 只 render `id` + `employeeNumber`,\n   *  其他 description 一律 opt-in by consumer 透過 `fields` array prop。對齊\n   *  `NAMECARD_DEFAULT_FIELD_KEYS = ['id', 'employeeNumber']`。 */\n  id?: string\n  employeeNumber?: string\n  /** 自訂額外 fields(在 default fields 之後 append)。Email / Phone / Department / Location\n   *  / 任何其他 description 一律走這個 prop(opt-in,consumer 自選)。 */\n  fields?: { label: string; value: string }[]\n  /** 跳至完整 profile 頁的 handler(hover ProfileCard 必含,不傳時 fallback noop placeholder) */\n  onViewProfile?: () => void\n}\n\nexport type PersonValue = string | PersonData\n\nfunction resolvePerson(value: PersonValue): PersonData {\n  return typeof value === 'string' ? { name: value } : value\n}\n\n// buildPersonProfileCard — DS 全域 person avatar hoverCard 的 canonical ProfileCard JSX 建構器。\n// SSOT for「avatar hover ProfileCard 一致視覺」— 任何 person avatar consumer 都走這個 helper,\n// 不可繞道直接 build ProfileCard。\n//\n// **2026-05-07 v15.7 user directive**:default field values 只 `id` + `employeeNumber`,\n// 對齊 NAMECARD_DEFAULT_FIELD_KEYS。其他 description(email/phone/department/location/etc)\n// consumer 想顯式透過 `person.fields` opt-in 傳入。\nfunction buildPersonProfileCard(person: PersonData): React.ReactNode {\n  return (\n    <ProfileCard\n      name={person.name}\n      subtitle={person.description}\n      avatar={{ src: person.avatarUrl, alt: person.name }}\n      status={person.status}\n      statusMessage={person.statusMessage}\n      defaultFieldValues={{\n        id: person.id,\n        employeeNumber: person.employeeNumber,\n      }}\n      fields={person.fields}\n      actions={<ProfileCardDefaultActions />}\n      // onViewMore hover context 必含(avatar.spec.md canonical)。consumer 傳\n      // `onViewProfile` 則用真 handler,否則 noop placeholder(UI 仍渲染 View more\n      // footer,避免 preview 變死路)。\n      onViewMore={person.onViewProfile ?? (() => {})}\n    />\n  )\n}\n\n// ── Avatar Size ─────────────────────────────────────────────────────────────\n// 與 Tag 高度對齊:sm=20px, md/lg=24px(對齊 item-anatomy AVATAR_SIZE.inline)\n\nconst AVATAR_PX: Record<'sm' | 'md' | 'lg', number> = { sm: 20, md: 24, lg: 24 }\n\n// ── PersonAvatar ────────────────────────────────────────────────────────────\n// Consume DS `Avatar` primitive(2026-04-22 refactor,M1 SSOT consumption)+ 預設 ProfileCard\n// hoverCard(avatar.spec.md DS-wide「person avatar hover → ProfileCard」canonical)。\n//\n// 之前用 local `<img>` / `<User icon />` hand-craft 繞過 DS Avatar,違反 M1。本次 refactor:\n// - 所有 person avatar 經過 DS Avatar primitive(size 對應 uiSize family,fallback / icon / badge 集中管理)\n// - 人員資訊 → ProfileCard(subtitle = description,actions = ProfileCardDefaultActions)\n\n// 2026-05-13 (a) perf fix(per codex Layer C HoverCard subtree dominant):\n// useMemo `buildPersonProfileCard` per-person stable ref。原 every render call → new JSX ref →\n// Avatar.memo bails → HoverCard subtree 重建。Stable ref → memo skip → big win on scroll。\n//\n// (c) push-up scroll-defer:當 DataTable virtualizer.isScrolling=true,**完全不 build ProfileCard**\n// (Avatar 收 undefined → 跳 HoverCard wrapper)。原 (c) v1 在 Avatar 層 skip wrapper 但 ProfileCard\n// JSX subtree 仍在此處 build → 浪費 React reconciliation work。push 到此處才真省。\nfunction PersonAvatar({\n  person,\n  size = 'md',\n  className = '',\n  style,\n}: {\n  person: PersonData\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n  style?: React.CSSProperties\n}) {\n  const isTableScrolling = useTableIsScrolling()\n  const nameCard = React.useMemo(\n    () => (isTableScrolling ? undefined : buildPersonProfileCard(person)),\n    [person, isTableScrolling]\n  )\n  return (\n    <Avatar\n      src={person.avatarUrl}\n      alt={person.name}\n      size={AVATAR_PX[size]}\n      className={className}\n      style={style}\n      hoverCard={nameCard}\n    />\n  )\n}\n\n// ── Single Person Display ───────────────────────────────────────────────────\n\n// 2026-05-14 item-anatomy SSOT fix(per codex+Layer A 共識 path (a) + user 拍板「全部做完」):\n// outer 改 items-start + Avatar 外包 ItemPrefix primitive consumption。單行視覺 = items-center 等效;\n// 多行(autoRowHeight cell)避免 avatar+name center 整 row 不對齊 first-line text top。M1 消費既有\n// 對齊 TreeView / MenuItem / SelectionItem 共用 ItemPrefix wrap chevron/icon/avatar canonical。\nfunction PersonDisplay({ value, size = 'md' }: { value?: PersonValue | null; size?: 'sm' | 'md' | 'lg' }) {\n  if (!value) return <span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span>\n\n  const person = resolvePerson(value)\n\n  // 2026-05-14 I1 fix(per codex addendum verdict):outer `inline-flex` → `flex w-full`\n  // 完成 truncate 寬度約束鏈。原 inline-flex content-width parent constrain 不到 name span\n  // → cell overflow-hidden 硬裁 → ellipsis dots 不可見。改 flex(block-level full width)\n  // + inner name span `flex-1 min-w-0 truncate` 真實 truncate-with-ellipsis 顯示。\n  // 對齊 GitHub Primer ActionList / Slack users_select / Atlassian UserPicker truncation canonical。\n  return (\n    <span className=\"flex items-start gap-2 min-w-0 w-full\">\n      <ItemPrefix><PersonAvatar person={person} size={size} /></ItemPrefix>\n      <span className=\"truncate flex-1 min-w-0\">{person.name}</span>\n    </span>\n  )\n}\nPersonDisplay.displayName = 'PersonDisplay'\n\n// ── Multi Person Display ────────────────────────────────────────────────────\n// 多人堆疊:avatar 重疊(-2px),不顯示人名。\n// 第一個 avatar z-index 最高(在最上面),依此類推。\n// 溢出時顯示 +N 指示器,hover 出 tooltip 列出溢出的人(avatar + 人名)。\n\nfunction MultiPersonDisplay({\n  value,\n  size = 'md',\n  max,\n  measured = false,\n  onRemove,\n}: {\n  value?: PersonValue[] | null\n  size?: 'sm' | 'md' | 'lg'\n  /** 最多顯示幾個 avatar(不含 +N),預設 3。`measured=true` 時忽略此 prop(改 container width 算)*/\n  max?: number\n  /**\n   * 2026-05-15 codex Round 5 C+ SSOT fix:`measured=true` 啟動 container-width 量測(取代 hardcode `max ?? 3`)\n   * → display + edit stack 同 algorithm(同 cell width → 同 overflow 判斷),不再 display 用固定 3 vs edit\n   * 用 useOverflowCount。對齊 field-controls.spec.md:286 「4-mode 共享 renderer」contract + user round 3\n   * verbatim「同空間兩判斷點」SSOT directive。Default false 保 backward compat(non-cell context 仍 max ?? 3)。\n   */\n  measured?: boolean\n  /** 傳入時啟用 dismiss(edit mode),callback 接收被移除的 person */\n  onRemove?: (person: PersonValue) => void\n}) {\n  if (!value || value.length === 0) return <span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span>\n\n  // 2026-05-15 Bug 3 fix(Claude+Codex Step 5 比稿 consensus):消費 shared `avatar-stack-overflow`\n  // primitive。原 inline canvas-based formula 是 dual-implementation 違反 user SSOT「同 cell width 同\n  // overflow 判斷」(edit path 用 Combobox useOverflowCount DOM offsetWidth / display path 用 inline\n  // canvas)。**抽 primitive 統一**:display + edit 共用 `getAvatarStackVisibleCount` formula。\n  // SSOT in `./avatar-stack-overflow.ts`,M14 mechanical guard 防 future drift。\n  const containerRef = React.useRef<HTMLSpanElement>(null)\n  const [measuredCount, setMeasuredCount] = React.useState<number | null>(null)\n  React.useLayoutEffect(() => {\n    if (!measured) return\n    const el = containerRef.current\n    if (!el) return\n    const calc = () => {\n      const visible = getAvatarStackVisibleCount({\n        availablePx: el.clientWidth,\n        total: value.length,\n        avatarPx: AVATAR_STACK_AVATAR_PX[size],\n        overflowChipPx: AVATAR_STACK_OVERFLOW_CHIP_PX[size],\n      })\n      setMeasuredCount(visible)\n    }\n    calc()\n    const ro = new ResizeObserver(calc)\n    ro.observe(el)\n    return () => ro.disconnect()\n  }, [measured, size, value])\n\n  const resolvedMax = measured && measuredCount !== null ? measuredCount : (max ?? 3)\n  const people = value.map(resolvePerson)\n  const visible = people.slice(0, resolvedMax)\n  const hidden = people.slice(resolvedMax)\n  const overflow = hidden.length\n\n  // 單人回退到 PersonDisplay(顯示名字)\n  if (people.length === 1) {\n    return <PersonDisplay value={value[0]} size={size} />\n  }\n\n  // 2026-05-14 item-anatomy SSOT fix(per codex+Layer A 共識):outer items-start + avatar stack\n  // 鎖 first-line baseline(整 stack 是 prefix slot,h-[1lh] 對齊 first line)。\n  return (\n    <span ref={containerRef} className=\"inline-flex items-start min-w-0\">\n      <ItemPrefix className=\"!justify-start\"><span className=\"inline-flex items-center min-w-0\">\n      {visible.map((person, i) => {\n        // **2026-05-07 v15.11 Bug D 升級 SSOT**:visible avatar 也支援 inline dismiss\n        // (對齊 user directive「avatar = tag」)。Dismiss overlay 走 `AvatarDismissOverlay`\n        // 共用 SSOT(下方 export),Combobox tagRenderer / 此處 / 任何 future avatar consumer\n        // 都用同一視覺 — 紅圈 X 對齊 avatar 右上,hover/focus-visible 才顯。\n        const handleDismiss = onRemove ? () => onRemove(value![i]) : undefined\n        return (\n          <span key={person.name + i} className={`relative inline-flex group/avatar ${i > 0 ? '-ml-0.5' : ''}`} style={{ zIndex: visible.length - i }}>\n            <PersonAvatar\n              person={person}\n              size={size}\n              className=\"ring-2 ring-[var(--surface)]\"\n            />\n            {handleDismiss && <AvatarDismissOverlay onRemove={handleDismiss} label={person.name} />}\n          </span>\n        )\n      })}\n      {overflow > 0 && (\n        <OverflowIndicator\n          count={overflow}\n          size={size}\n          className=\"ring-2 ring-[var(--surface)] -ml-0.5\"\n        >\n          {hidden.map((person, i) => (\n            <Tag\n              key={person.name + i}\n              color=\"neutral\"\n              size=\"sm\"\n              // Tag.avatar 是 ReactNode(非 AvatarData object)——傳 <Avatar> 元素。\n              // Tag 內部用 `w-4 h-4 rounded-full` 容器 slot,Avatar 填滿 object-cover。\n              // **hoverCard 必帶**(avatar.spec.md DS-wide canonical:所有 person avatar 必 hover → ProfileCard)。\n              // 跟 PersonAvatar 共用 `buildPersonProfileCard` helper 確保顯示資訊一致。\n              avatar={\n                <Avatar\n                  src={person.avatarUrl}\n                  alt={person.name}\n                  size={16}\n                  hoverCard={buildPersonProfileCard(person)}\n                />\n              }\n              onRemove={onRemove ? () => onRemove(value![resolvedMax + i]) : undefined}\n            >\n              {person.name}\n            </Tag>\n          ))}\n        </OverflowIndicator>\n      )}\n      </span></ItemPrefix>\n    </span>\n  )\n}\nMultiPersonDisplay.displayName = 'MultiPersonDisplay'\n\n// ── AvatarDismissOverlay ────────────────────────────────────────────────────\n// SSOT for「person avatar overlay dismiss」(2026-05-07 v15.12,user spec confirmed)。\n//\n// **Visual canonical**(對齊 DS new token `--surface-strong`):\n//   - **12×12 圓**(固定,不隨 field size 變)\n//   - **bg `--surface-strong`**(neutral-6),hover → `--surface-strong-hover`\n//     (light=neutral-5 / dark=neutral-7,跨 mode 對稱)\n//   - **X icon size=12 strokeWidth=3.5**(icon 跟底色一樣大,對齊 checkbox checkmark\n//     sm/md stroke 規格)\n//   - **text-on-emphasis**(白 X,確保飽和色底對比)\n//   - **位置 `absolute top-0 right-0`**(button 右上角貼齊 avatar 右上角,完全在 avatar\n//     內 — user-confirmed canonical)\n//\n// **a11y**(codex P1 fix):`opacity-0` 而非 `display:none` — element 在 DOM/tab-order,\n// keyboard tab 可達,觸控 focus-within 也顯。Hover / focus-within / focus-visible\n// 三條件之一觸發 `opacity-100`。\n//\n// **Why centralize**:Combobox tagRenderer (PeoplePicker stack mode) + MultiPersonDisplay\n// dismiss 共用 SSOT,改 1 處全 sync(M17 propagation)。\nfunction AvatarDismissOverlay({ onRemove, label }: { onRemove: () => void; label: string }) {\n  return (\n    <button\n      type=\"button\"\n      onClick={(e) => { e.stopPropagation(); onRemove() }}\n      aria-label={`移除 ${label}`}\n      className={[\n        // **Position(2026-05-07 v15.15 user-confirmed)**:asymmetric `-top-px -right-1`\n        // (top -1px / right -4px)— field padding-y(4px sm/md)緊 → top 只 -1px 安全;\n        // padding-x 12px 寬鬆 → right 凸 4px 達 badge canonical visual。對齊 ClickUp\n        // 世界級 idiom(asymmetric offset by avatar/field size constraint)。\n        'absolute -top-px -right-1 z-10',\n        'inline-flex items-center justify-center',\n        // **12×12 + 2px white ring**(SSOT match stacked avatar,Slack/Material/iOS\n        // notification badge 2px ring canonical)。改用 `[box-shadow:...]` 而非 `ring-2`\n        // 避免跟下方 `focus-visible:ring-2` 在 tailwind-merge 衝突(同 ring family\n        // override 互殺)。Box-shadow inset 0 不影響 layout,也不被 focus-visible ring\n        // 蓋掉(focus 那邊另一條 outline ring 不同 layer)。\n        'w-3 h-3 rounded-full [box-shadow:0_0_0_2px_var(--surface)]',\n        // bg-surface-strong = neutral-6-opaque / hover = neutral-7-opaque(both modes,\n        // step-7 dark 公式自動 lighter → engaged 跨 mode 對稱)\n        'bg-surface-strong text-on-emphasis hover:bg-surface-strong-hover',\n        // a11y(codex P1 fix):opacity 而非 display:none — element 在 DOM/tab-order,\n        // keyboard 可達。Hover / focus-within / focus-visible 三條件之一觸發。\n        'opacity-0 group-hover/avatar:opacity-100 group-focus-within/avatar:opacity-100 focus-visible:opacity-100',\n        'transition-opacity duration-150',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n      ].join(' ')}\n    >\n      <X size={12} strokeWidth={3.5} aria-hidden />\n    </button>\n  )\n}\n\n// ── PersonAvatarTag(Combobox tagRenderer SSOT for stack mode)─────────────\n// PeoplePicker `multiDisplay='stack'` 模式 wraps Combobox,tagRenderer 不能用 Tag pill\n// (那是 pill mode),改 render 此元件 — Avatar overlap 視覺 + AvatarDismissOverlay。\n// 對齊 user directive「avatar = tag 概念,差別只在視覺,SSOT 一致」(2026-05-07 v15.13)。\n//\n// **架構**(v15.13 重構):本元件**不自包** `group/avatar` / `-ml-0.5` overlap wrapper,\n// 因 Combobox `tagRenderer` 結果會被內部 `<div shrink-0>` 包成 measurement wrapper\n// (useOverflowCount 必要)。把 overlap + group 拉到 Combobox 的 `tagWrapperClassName`\n// 上,sibling-level overlap + group selector 才能正確 chain → AvatarDismissOverlay 的\n// `group-hover/avatar:opacity-100` 才會通。\nfunction PersonAvatarTag({\n  person, size = 'md', onRemove,\n}: {\n  person: PersonData\n  size?: 'sm' | 'md' | 'lg'\n  onRemove?: () => void\n}) {\n  return (\n    <>\n      <PersonAvatar person={person} size={size} className=\"ring-2 ring-[var(--surface)]\" />\n      {onRemove && <AvatarDismissOverlay onRemove={onRemove} label={person.name} />}\n    </>\n  )\n}\nPersonAvatarTag.displayName = 'PersonAvatarTag'\n\nexport { PersonDisplay, MultiPersonDisplay, PersonAvatarTag, buildPersonProfileCard, resolvePerson }\n"],"names":["visible"],"mappings":"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"}
+{"version":3,"file":"person-display.js","sources":["../../../src/components/PeoplePicker/person-display.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 { X } from 'lucide-react'\nimport { EMPTY_DISPLAY } from '@/design-system/components/Field/field-wrapper'\nimport { Tag } from '@/design-system/components/Tag/tag'\nimport { OverflowIndicator } from '@/design-system/components/OverflowIndicator/overflow-indicator'\nimport { Avatar } from '@/design-system/components/Avatar/avatar'\nimport { ProfileCard, ProfileCardDefaultActions } from '@/design-system/components/ProfileCard/profile-card'\nimport { useTableIsScrolling } from '@/design-system/components/Field/field-context'\nimport { ItemPrefix } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport {\n  getAvatarStackVisibleCount,\n  AVATAR_STACK_AVATAR_PX,\n  AVATAR_STACK_OVERFLOW_CHIP_PX,\n} from './avatar-stack-overflow'\n\n// ── Types ───────────────────────────────────────────────────────────────────\n\n// PersonData 承載 ProfileCard 所需的完整資訊。DS 全域 person avatar 的 hoverCard ProfileCard 永遠\n// 顯示同一組 sections(name + subtitle + status + 4 default fields + 自訂 fields + actions + View more)\n// — 缺資料顯 placeholder,不會 collapse。對齊 avatar.spec.md「person avatar hover → ProfileCard」\n// DS-wide canonical(2026-05-06 v11 always-render schema 升級)。\nexport interface PersonData {\n  name: string\n  avatarUrl?: string\n  /** 角色 / 部門 / ID 等 meta 單行(ProfileCard subtitle) */\n  description?: string\n  /** Presence 狀態(對齊 Avatar presence canonical)。**2026-05-14 v12 update**(per user 拍板):\n   *  production 每 user 一定有 presence state,**undefined = loading transient(資料還沒讀到)**,\n   *  不是「user 沒設定」。ProfileCard 在 undefined 期間隱藏整 status block,**禁** render「Status not set」\n   *  placeholder 文字。 */\n  status?: 'online' | 'away' | 'busy' | 'offline'\n  /** Status 訊息(ProfileCard status section)。只在 status defined 時 render,缺則顯 `—` placeholder。\n   *  Status undefined 整 block skip(無 statusMessage 也跟著 skip)。 */\n  statusMessage?: React.ReactNode\n  /** **2026-05-07 v15.7 user directive**:ProfileCard default 只 render `id` + `employeeNumber`,\n   *  其他 description 一律 opt-in by consumer 透過 `fields` array prop。對齊\n   *  `NAMECARD_DEFAULT_FIELD_KEYS = ['id', 'employeeNumber']`。 */\n  id?: string\n  employeeNumber?: string\n  /** 自訂額外 fields(在 default fields 之後 append)。Email / Phone / Department / Location\n   *  / 任何其他 description 一律走這個 prop(opt-in,consumer 自選)。 */\n  fields?: { label: string; value: string }[]\n  /** 跳至完整 profile 頁的 handler(hover ProfileCard 必含,不傳時 fallback noop placeholder) */\n  onViewProfile?: () => void\n}\n\nexport type PersonValue = string | PersonData\n\nfunction resolvePerson(value: PersonValue): PersonData {\n  return typeof value === 'string' ? { name: value } : value\n}\n\n// buildPersonProfileCard — DS 全域 person avatar hoverCard 的 canonical ProfileCard JSX 建構器。\n// SSOT for「avatar hover ProfileCard 一致視覺」— 任何 person avatar consumer 都走這個 helper,\n// 不可繞道直接 build ProfileCard。\n//\n// **2026-05-07 v15.7 user directive**:default field values 只 `id` + `employeeNumber`,\n// 對齊 NAMECARD_DEFAULT_FIELD_KEYS。其他 description(email/phone/department/location/etc)\n// consumer 想顯式透過 `person.fields` opt-in 傳入。\nfunction buildPersonProfileCard(person: PersonData): React.ReactNode {\n  return (\n    <ProfileCard\n      name={person.name}\n      subtitle={person.description}\n      avatar={{ src: person.avatarUrl, alt: person.name }}\n      status={person.status}\n      statusMessage={person.statusMessage}\n      defaultFieldValues={{\n        id: person.id,\n        employeeNumber: person.employeeNumber,\n      }}\n      fields={person.fields}\n      actions={<ProfileCardDefaultActions />}\n      // onViewMore hover context 必含(avatar.spec.md canonical)。consumer 傳\n      // `onViewProfile` 則用真 handler,否則 noop placeholder(UI 仍渲染 View more\n      // footer,避免 preview 變死路)。\n      onViewMore={person.onViewProfile ?? (() => {})}\n    />\n  )\n}\n\n// ── Avatar Size ─────────────────────────────────────────────────────────────\n// 與 Tag 高度對齊:sm=20px, md/lg=24px(對齊 item-anatomy AVATAR_SIZE.inline)\n\nconst AVATAR_PX: Record<'sm' | 'md' | 'lg', number> = { sm: 20, md: 24, lg: 24 }\n\n// ── PersonAvatar ────────────────────────────────────────────────────────────\n// Consume DS `Avatar` primitive(2026-04-22 refactor,M1 SSOT consumption)+ 預設 ProfileCard\n// hoverCard(avatar.spec.md DS-wide「person avatar hover → ProfileCard」canonical)。\n//\n// 之前用 local `<img>` / `<User icon />` hand-craft 繞過 DS Avatar,違反 M1。本次 refactor:\n// - 所有 person avatar 經過 DS Avatar primitive(size 對應 uiSize family,fallback / icon / badge 集中管理)\n// - 人員資訊 → ProfileCard(subtitle = description,actions = ProfileCardDefaultActions)\n\n// 2026-05-13 (a) perf fix(per codex Layer C HoverCard subtree dominant):\n// useMemo `buildPersonProfileCard` per-person stable ref。原 every render call → new JSX ref →\n// Avatar.memo bails → HoverCard subtree 重建。Stable ref → memo skip → big win on scroll。\n//\n// (c) push-up scroll-defer:當 DataTable virtualizer.isScrolling=true,**完全不 build ProfileCard**\n// (Avatar 收 undefined → 跳 HoverCard wrapper)。原 (c) v1 在 Avatar 層 skip wrapper 但 ProfileCard\n// JSX subtree 仍在此處 build → 浪費 React reconciliation work。push 到此處才真省。\nfunction PersonAvatar({\n  person,\n  size = 'md',\n  className = '',\n  style,\n}: {\n  person: PersonData\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n  style?: React.CSSProperties\n}) {\n  const isTableScrolling = useTableIsScrolling()\n  const nameCard = React.useMemo(\n    () => (isTableScrolling ? undefined : buildPersonProfileCard(person)),\n    [person, isTableScrolling]\n  )\n  return (\n    <Avatar\n      src={person.avatarUrl}\n      alt={person.name}\n      size={AVATAR_PX[size]}\n      className={className}\n      style={style}\n      hoverCard={nameCard}\n    />\n  )\n}\n\n// ── Single Person Display ───────────────────────────────────────────────────\n\n// 2026-05-14 item-anatomy SSOT fix(per codex+Layer A 共識 path (a) + user 拍板「全部做完」):\n// outer 改 items-start + Avatar 外包 ItemPrefix primitive consumption。單行視覺 = items-center 等效;\n// 多行(autoRowHeight cell)避免 avatar+name center 整 row 不對齊 first-line text top。M1 消費既有\n// 對齊 TreeView / MenuItem / SelectionItem 共用 ItemPrefix wrap chevron/icon/avatar canonical。\nfunction PersonDisplay({ value, size = 'md' }: { value?: PersonValue | null; size?: 'sm' | 'md' | 'lg' }) {\n  if (!value) return <span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span>\n\n  const person = resolvePerson(value)\n\n  // 2026-05-14 I1 fix(per codex addendum verdict):outer `inline-flex` → `flex w-full`\n  // 完成 truncate 寬度約束鏈。原 inline-flex content-width parent constrain 不到 name span\n  // → cell overflow-hidden 硬裁 → ellipsis dots 不可見。改 flex(block-level full width)\n  // + inner name span `flex-1 min-w-0 truncate` 真實 truncate-with-ellipsis 顯示。\n  // 對齊 GitHub Primer ActionList / Slack users_select / Atlassian UserPicker truncation canonical。\n  return (\n    <span className=\"flex items-start gap-2 min-w-0 w-full\">\n      <ItemPrefix><PersonAvatar person={person} size={size} /></ItemPrefix>\n      <span className=\"truncate flex-1 min-w-0\">{person.name}</span>\n    </span>\n  )\n}\nPersonDisplay.displayName = 'PersonDisplay'\n\n// ── Multi Person Display ────────────────────────────────────────────────────\n// 多人堆疊:avatar 重疊(-2px),不顯示人名。\n// 第一個 avatar z-index 最高(在最上面),依此類推。\n// 溢出時顯示 +N 指示器,hover 出 tooltip 列出溢出的人(avatar + 人名)。\n\nfunction MultiPersonDisplay({\n  value,\n  size = 'md',\n  max,\n  measured = false,\n  onRemove,\n}: {\n  value?: PersonValue[] | null\n  size?: 'sm' | 'md' | 'lg'\n  /** 最多顯示幾個 avatar(不含 +N),預設 3。`measured=true` 時忽略此 prop(改 container width 算)*/\n  max?: number\n  /**\n   * 2026-05-15 codex Round 5 C+ SSOT fix:`measured=true` 啟動 container-width 量測(取代 hardcode `max ?? 3`)\n   * → display + edit stack 同 algorithm(同 cell width → 同 overflow 判斷),不再 display 用固定 3 vs edit\n   * 用 useOverflowCount。對齊 field-controls.spec.md:286 「4-mode 共享 renderer」contract + user round 3\n   * verbatim「同空間兩判斷點」SSOT directive。Default false 保 backward compat(non-cell context 仍 max ?? 3)。\n   */\n  measured?: boolean\n  /** 傳入時啟用 dismiss(edit mode),callback 接收被移除的 person */\n  onRemove?: (person: PersonValue) => void\n}) {\n  if (!value || value.length === 0) return <span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span>\n\n  // 2026-05-15 Bug 3 fix(Claude+Codex Step 5 比稿 consensus):消費 shared `avatar-stack-overflow`\n  // primitive。原 inline canvas-based formula 是 dual-implementation 違反 user SSOT「同 cell width 同\n  // overflow 判斷」(edit path 用 Combobox useOverflowCount DOM offsetWidth / display path 用 inline\n  // canvas)。**抽 primitive 統一**:display + edit 共用 `getAvatarStackVisibleCount` formula。\n  // SSOT in `./avatar-stack-overflow.ts`,M14 mechanical guard 防 future drift。\n  const containerRef = React.useRef<HTMLSpanElement>(null)\n  const [measuredCount, setMeasuredCount] = React.useState<number | null>(null)\n  React.useLayoutEffect(() => {\n    if (!measured) return\n    const el = containerRef.current\n    if (!el) return\n    const calc = () => {\n      const visible = getAvatarStackVisibleCount({\n        availablePx: el.clientWidth,\n        total: value.length,\n        avatarPx: AVATAR_STACK_AVATAR_PX[size],\n        overflowChipPx: AVATAR_STACK_OVERFLOW_CHIP_PX[size],\n      })\n      setMeasuredCount(visible)\n    }\n    calc()\n    const ro = new ResizeObserver(calc)\n    ro.observe(el)\n    return () => ro.disconnect()\n  }, [measured, size, value])\n\n  const resolvedMax = measured && measuredCount !== null ? measuredCount : (max ?? 3)\n  const people = value.map(resolvePerson)\n  const visible = people.slice(0, resolvedMax)\n  const hidden = people.slice(resolvedMax)\n  const overflow = hidden.length\n\n  // 單人回退到 PersonDisplay(顯示名字)\n  if (people.length === 1) {\n    return <PersonDisplay value={value[0]} size={size} />\n  }\n\n  // 2026-05-14 item-anatomy SSOT fix(per codex+Layer A 共識):outer items-start + avatar stack\n  // 鎖 first-line baseline(整 stack 是 prefix slot,h-[1lh] 對齊 first line)。\n  return (\n    <span ref={containerRef} className=\"inline-flex items-start min-w-0\">\n      <ItemPrefix className=\"!justify-start\"><span className=\"inline-flex items-center min-w-0\">\n      {visible.map((person, i) => {\n        // **2026-05-07 v15.11 Bug D 升級 SSOT**:visible avatar 也支援 inline dismiss\n        // (對齊 user directive「avatar = tag」)。Dismiss overlay 走 `AvatarDismissOverlay`\n        // 共用 SSOT(下方 export),Combobox tagRenderer / 此處 / 任何 future avatar consumer\n        // 都用同一視覺 — 紅圈 X 對齊 avatar 右上,hover/focus-visible 才顯。\n        const handleDismiss = onRemove ? () => onRemove(value![i]) : undefined\n        return (\n          <span key={person.name + i} className={`relative inline-flex group/avatar ${i > 0 ? '-ml-0.5' : ''}`} style={{ zIndex: visible.length - i }}>\n            <PersonAvatar\n              person={person}\n              size={size}\n              className=\"ring-2 ring-[var(--surface)]\"\n            />\n            {handleDismiss && <AvatarDismissOverlay onRemove={handleDismiss} label={person.name} />}\n          </span>\n        )\n      })}\n      {overflow > 0 && (\n        <OverflowIndicator\n          count={overflow}\n          size={size}\n          className=\"ring-2 ring-[var(--surface)] -ml-0.5\"\n        >\n          {hidden.map((person, i) => (\n            <Tag\n              key={person.name + i}\n              color=\"neutral\"\n              size=\"sm\"\n              // Tag.avatar 是 ReactNode(非 AvatarData object)——傳 <Avatar> 元素。\n              // Tag 內部用 `w-4 h-4 rounded-full` 容器 slot,Avatar 填滿 object-cover。\n              // **hoverCard 必帶**(avatar.spec.md DS-wide canonical:所有 person avatar 必 hover → ProfileCard)。\n              // 跟 PersonAvatar 共用 `buildPersonProfileCard` helper 確保顯示資訊一致。\n              avatar={\n                <Avatar\n                  src={person.avatarUrl}\n                  alt={person.name}\n                  size={16}\n                  hoverCard={buildPersonProfileCard(person)}\n                />\n              }\n              onRemove={onRemove ? () => onRemove(value![resolvedMax + i]) : undefined}\n            >\n              {person.name}\n            </Tag>\n          ))}\n        </OverflowIndicator>\n      )}\n      </span></ItemPrefix>\n    </span>\n  )\n}\nMultiPersonDisplay.displayName = 'MultiPersonDisplay'\n\n// ── AvatarDismissOverlay ────────────────────────────────────────────────────\n// SSOT for「person avatar overlay dismiss」(2026-05-07 v15.12,user spec confirmed)。\n//\n// **Visual canonical**(對齊 DS new token `--surface-strong`):\n//   - **12×12 圓**(固定,不隨 field size 變)\n//   - **bg `--surface-strong`**(neutral-6),hover → `--surface-strong-hover`\n//     (light=neutral-5 / dark=neutral-7,跨 mode 對稱)\n//   - **X icon size=12 strokeWidth=3**(icon 跟底色一樣大,對齊 checkbox checkmark\n//     sm/md stroke 規格;2026-06-12 同步 checkbox 2026-05-18 簡化 3.5→3,SSOT →\n//     .claude/references/ui-dev-rules.md「小尺寸 icon stroke 補償」)\n//   - **text-on-emphasis**(白 X,確保飽和色底對比)\n//   - **位置 `absolute top-0 right-0`**(button 右上角貼齊 avatar 右上角,完全在 avatar\n//     內 — user-confirmed canonical)\n//\n// **a11y**(codex P1 fix):`opacity-0` 而非 `display:none` — element 在 DOM/tab-order,\n// keyboard tab 可達,觸控 focus-within 也顯。Hover / focus-within / focus-visible\n// 三條件之一觸發 `opacity-100`。\n//\n// **Why centralize**:Combobox tagRenderer (PeoplePicker stack mode) + MultiPersonDisplay\n// dismiss 共用 SSOT,改 1 處全 sync(M17 propagation)。\nfunction AvatarDismissOverlay({ onRemove, label }: { onRemove: () => void; label: string }) {\n  return (\n    <button\n      type=\"button\"\n      onClick={(e) => { e.stopPropagation(); onRemove() }}\n      aria-label={`移除 ${label}`}\n      className={[\n        // **Position(2026-05-07 v15.15 user-confirmed)**:asymmetric `-top-px -right-1`\n        // (top -1px / right -4px)— field padding-y(4px sm/md)緊 → top 只 -1px 安全;\n        // padding-x 12px 寬鬆 → right 凸 4px 達 badge canonical visual。對齊 ClickUp\n        // 世界級 idiom(asymmetric offset by avatar/field size constraint)。\n        'absolute -top-px -right-1 z-10',\n        'inline-flex items-center justify-center',\n        // **12×12 + 2px white ring**(SSOT match stacked avatar,Slack/Material/iOS\n        // notification badge 2px ring canonical)。改用 `[box-shadow:...]` 而非 `ring-2`\n        // 避免跟下方 `focus-visible:ring-2` 在 tailwind-merge 衝突(同 ring family\n        // override 互殺)。Box-shadow inset 0 不影響 layout,也不被 focus-visible ring\n        // 蓋掉(focus 那邊另一條 outline ring 不同 layer)。\n        'w-3 h-3 rounded-full [box-shadow:0_0_0_2px_var(--surface)]',\n        // bg-surface-strong = neutral-6-opaque / hover = neutral-7-opaque(both modes,\n        // step-7 dark 公式自動 lighter → engaged 跨 mode 對稱)\n        'bg-surface-strong text-on-emphasis hover:bg-surface-strong-hover',\n        // a11y(codex P1 fix):opacity 而非 display:none — element 在 DOM/tab-order,\n        // keyboard 可達。Hover / focus-within / focus-visible 三條件之一觸發。\n        'opacity-0 group-hover/avatar:opacity-100 group-focus-within/avatar:opacity-100 focus-visible:opacity-100',\n        'transition-opacity duration-150',\n        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n      ].join(' ')}\n    >\n      <X size={12} strokeWidth={3} aria-hidden />\n    </button>\n  )\n}\n\n// ── PersonAvatarTag(Combobox tagRenderer SSOT for stack mode)─────────────\n// PeoplePicker `multiDisplay='stack'` 模式 wraps Combobox,tagRenderer 不能用 Tag pill\n// (那是 pill mode),改 render 此元件 — Avatar overlap 視覺 + AvatarDismissOverlay。\n// 對齊 user directive「avatar = tag 概念,差別只在視覺,SSOT 一致」(2026-05-07 v15.13)。\n//\n// **架構**(v15.13 重構):本元件**不自包** `group/avatar` / `-ml-0.5` overlap wrapper,\n// 因 Combobox `tagRenderer` 結果會被內部 `<div shrink-0>` 包成 measurement wrapper\n// (useOverflowCount 必要)。把 overlap + group 拉到 Combobox 的 `tagWrapperClassName`\n// 上,sibling-level overlap + group selector 才能正確 chain → AvatarDismissOverlay 的\n// `group-hover/avatar:opacity-100` 才會通。\nfunction PersonAvatarTag({\n  person, size = 'md', onRemove,\n}: {\n  person: PersonData\n  size?: 'sm' | 'md' | 'lg'\n  onRemove?: () => void\n}) {\n  return (\n    <>\n      <PersonAvatar person={person} size={size} className=\"ring-2 ring-[var(--surface)]\" />\n      {onRemove && <AvatarDismissOverlay onRemove={onRemove} label={person.name} />}\n    </>\n  )\n}\nPersonAvatarTag.displayName = 'PersonAvatarTag'\n\nexport { PersonDisplay, MultiPersonDisplay, PersonAvatarTag, buildPersonProfileCard, resolvePerson }\n"],"names":["visible"],"mappings":"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"}

package/dist/components/RadioGroup/radio-group.d.ts

@@ -11,7 +11,7 @@ export interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof R
      *   display  — **純展示**:不渲染 Radix Root / 任何 radio 視覺;RadioGroup 本體 walk
      *              children,僅 control.value === group.value 那筆把 label 渲染為純文字 span。
      *              對齊 Carbon read-only / DataTable single-select cell read mode。
-     *   readonly — 同 child item 各自 readOnly:radio 視覺保留 + 鎖互動
+     *   readonly — standalone:ReadonlyContext 傳 items 鎖互動保留視覺;Field 內:灰框 + 選中項 label(不渲染 radio 群組)
      *   disabled — 同 RadioGroupPrimitive.Root disabled 屬性
      */
     mode?: FieldMode;

package/dist/components/RadioGroup/radio-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/radio-group.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAElE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAG3F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAA;AAY1E,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC;IACvE;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAMD,QAAA,MAAM,UAAU,wFAgDd,CAAA;AAUF,QAAA,MAAM,iBAAiB;;8EA2BtB,CAAA;AAOD,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAA;AAE9F,MAAM,WAAW,mBACf,SAAQ,uBAAuB,EAC7B,YAAY,CAAC,OAAO,iBAAiB,CAAC;IACxC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,qHAAqH;IACrH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAID,QAAA,MAAM,cAAc,+FA4EnB,CAAA;AAKD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBjB,CAAA;AAEV,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/radio-group.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAElE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAG3F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAA;AAY1E,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC;IACvE;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AA6BD,QAAA,MAAM,UAAU,wFAqEd,CAAA;AAUF,QAAA,MAAM,iBAAiB;;8EA2BtB,CAAA;AAOD,KAAK,uBAAuB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,CAAA;AAE9F,MAAM,WAAW,mBACf,SAAQ,uBAAuB,EAC7B,YAAY,CAAC,OAAO,iBAAiB,CAAC;IACxC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,qHAAqH;IACrH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,+BAA+B;IAC/B,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAID,QAAA,MAAM,cAAc,+FA4EnB,CAAA;AAKD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBjB,CAAA;AAEV,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,iBAAiB,EAAE,CAAA"}

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

@@ -4,31 +4,63 @@ 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 { useResolvedFieldMode, useResolvedFieldDisabled } 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";
+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) => {
   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 }) });
   }
+  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,
     {

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 { useResolvedFieldMode, useResolvedFieldDisabled } 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 } 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 — 同 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\n// RadioGroup mode='readonly' → 透過 context 把 readOnly 傳給所有 child RadioGroupItem\n// (item 已支援 readOnly prop + data-[readonly] 樣式;Radix Root 無 readOnly,故用 context)。\nconst RadioGroupReadonlyContext = React.createContext(false)\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  // 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    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  // 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    sm: { fieldHeight: 28, iconSize: 16, typography: 'body' },\n    md: { fieldHeight: 32, iconSize: 16, typography: 'body' },\n    lg: { fieldHeight: 36, iconSize: 20, 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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"}
+{"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    sm: { fieldHeight: 28, iconSize: 16, typography: 'body' },\n    md: { fieldHeight: 32, iconSize: 16, typography: 'body' },\n    lg: { fieldHeight: 36, iconSize: 20, 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":";;;;;;;;;AA4CA,MAAM,4BAA4B,MAAM,cAAc,KAAK;AAG3D,SAAS,uBAAuB,UAA2B,eAAoD;AAC7G,MAAI,gBAAiC;AACrC,QAAM,SAAS,QAAQ,UAAU,CAAC,UAAU;AAC1C,QAAI,CAAC,MAAM,eAAe,KAAK,EAAG;AAClC,UAAM,SAAS,MAAM;AAErB,QAAI,OAAO,UAAU,iBAAiB,OAAO,UAAU,QAAW;AAChE,sBAAgB,OAAO,SAAS;AAChC;AAAA,IACF;AAEA,UAAM,UAAU,OAAO;AACvB,QAAI,MAAM,eAAe,OAAO,GAAG;AACjC,YAAM,eAAgB,QAAQ,MAA8B;AAC5D,UAAI,iBAAiB,eAAe;AAClC,wBAAgB,OAAO,SAAS;AAAA,MAClC;AAAA,IACF;AAAA,EACF,CAAC;AACD,SAAO;AACT;AAEA,MAAM,aAAa,MAAM,WAGvB,CAAC,EAAE,WAAW,MAAM,SAAS,SAAS,OAAO,cAAc,GAAG,MAAA,GAAS,QAAQ;AAE/E,QAAM,eAAe,qBAAqB,EAAE,MAAM,UAAW,MAAiC,UAAU;AACxG,QAAM,WAAW,gBAAA;AAEjB,QAAM,kBAAkB,qBAAqB,QAAW,IAAI;AAK5D,MAAI,iBAAiB,WAAW;AAC9B,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,UAAM,gBAAgB,uBAAuB,MAAM,UAAU,aAAa;AAC1E,WACE,oBAAC,OAAA,EAAI,MAAK,SAAQ,WAAW,GAAG,QAAQ,SAAS,GAC/C,8BAAC,QAAA,EAAK,WAAU,mBAAmB,UAAA,iBAAiB,eAAc,GACpE;AAAA,EAEJ;AAMA,MAAI,iBAAiB,eAAc,qCAAU,qBAAoB,MAAM;AACrE,UAAM,gBAAiB,SAAS;AAChC,UAAM,gBAAgB,gBAAgB,uBAAuB,MAAM,UAAU,aAAa,IAAI;AAC9F,UAAM,UAAU;AAChB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,iBAAc;AAAA,QACd,mBAAiB,qCAAU;AAAA,QAC3B,iBAAc,qCAAU,YAAW;AAAA,QACnC,iBAAc;AAAA,QACd,UAAU;AAAA,QACV,WAAW;AAAA,UACT,mBAAmB,EAAE,MAAM,SAAS,MAAM,YAAY,SAAS,WAAW;AAAA,UAC1E;AAAA,UACA;AAAA,QAAA;AAAA,QAGD,UAAA,gBACG,oBAAC,QAAA,EAAK,WAAU,mBAAmB,UAAA,iBAAiB,cAAA,CAAc,IAClE,oBAAC,QAAA,EAAK,WAAU,iBAAiB,UAAA,cAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAGzD;AAIA,6BACG,0BAA0B,UAA1B,EAAmC,OAAO,iBAAiB,YAC1D,UAAA;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC,WAAW,GAAG,QAAQ,SAAS;AAAA,MAC/B;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ,UAAU,iBAAiB;AAAA,MAC3B;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ,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;AAmC5D,MAAM,iBAAiB,MAAM;AAAA,EAI3B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;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;AAW7B,UAAM,mBAAmB,yBAAyB,QAAQ;AAE1D,UAAM,gBAAgB,MAAM,WAAW,yBAAyB;AAChE,UAAM,oBAAoB,YAAY;AAEtC,UAAM,cAAc,MAAM,MAAA;AAC1B,UAAM,UAAU,UAAU;AAE1B,UAAM,SACJ;AAAA,MAAC,oBAAoB;AAAA,MAApB;AAAA,QACC,IAAI;AAAA,QACJ;AAAA,QACA,UAAU;AAAA,QACV,iBAAe,qBAAqB;AAAA,QACpC,iBAAe,qBAAqB;AAAA,QACpC,UAAU,oBAAoB,KAAK;AAAA,QACnC,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;AAG1B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;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;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,UAAA;AAAA,EAAU;AAAA,EAE7D,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;"}

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;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAGD,QAAA,MAAM,MAAM,oFAwHX,CAAA;AA6ED,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, useResolvedFieldDisabled, useResolvedFieldSize } 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,7 +18,7 @@ const Rating = React.forwardRef(
     max = 5,
     size: sizeProp,
     precision = "full",
-    readOnly = false,
+    readOnly: readOnlyProp = false,
     disabled: disabledProp,
     loading = false,
     icon: Icon = Star,
@@ -27,6 +27,8 @@ const Rating = React.forwardRef(
   }, ref) => {
     const fieldCtx = useFieldContext();
     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);
@@ -61,7 +63,7 @@ const Rating = React.forwardRef(
       {
         ref,
         role: isInteractive ? "slider" : "img",
-        "aria-labelledby": isInteractive ? fieldCtx == null ? void 0 : fieldCtx.labelId : void 0,
+        "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,