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

package/dist/components/Popover/popover.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { X } from "lucide-react";
 import { cn } from "../../lib/utils.js";
-import { SurfaceBody, SurfaceFooter, SurfaceHeader } from "../../patterns/overlay-surface/overlay-surface.js";
+import { SurfaceBody, SurfaceFooter, SurfaceHeader, COMPACT_HEADER_SLOT } from "../../patterns/overlay-surface/overlay-surface.js";
 import { Button } from "../Button/button.js";
 import { OVERLAY_COLLISION_PADDING, OVERLAY_SIDE_OFFSET } from "../../tokens/elevation/overlay-geometry.js";
 const Popover = PopoverPrimitive.Root;
@@ -28,11 +28,11 @@ const PopoverContent = React.forwardRef(({ className, align = "center", sideOffs
     align,
     sideOffset,
     collisionPadding,
-    "data-density": "md",
+    "data-layout-space": "md",
     onOpenAutoFocus: onOpenAutoFocus ?? handlePopoverOpenAutoFocus,
     className: cn(
       "z-50 w-72 rounded-lg border border-border bg-surface-raised text-foreground shadow-[var(--elevation-200)] outline-none",
-      // 2026-05-04 viewport-aware max-h SSOT(從 NameCard 升 DS-wide):header/footer 永遠 in-viewport,body 壓縮 scroll
+      // 2026-05-04 viewport-aware max-h SSOT(從 ProfileCard 升 DS-wide):header/footer 永遠 in-viewport,body 壓縮 scroll
       // 2026-05-05 audit dim 35 補:加 `min-h-0` 完成 M25 chain invariant(flex item default min-h: auto 阻 shrink)
       "max-h-[var(--radix-popover-content-available-height,100vh)] flex flex-col overflow-hidden min-h-0",
       "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 motion-reduce:animate-none",
@@ -46,21 +46,20 @@ const PopoverContent = React.forwardRef(({ className, align = "center", sideOffs
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 const PopoverHeader = React.forwardRef(
   ({ className, children, hideClose = false, ...props }, ref) => (
-    // Popover lightweight chrome canonical(2026-05-04 重思 v2):
-    //   覆寫 `--chrome-slot-h: 1.25rem` (20px) → unbounded button 佔位縮成 20,**匹配 PopoverTitle
-    //   text-body line-height (14×1.5≈21,floor 20)**。Header 維持 padding-based 自然撐開:
-    //   max(21 title, 20 slot) + py-tight(12*2) = 45 → 自然比 Dialog/Sheet 48 輕一級。
-    //   Q10 穩定:title-only / title+close 都 = title + py 主導,slot 不 dominate。
-    //   無 min-h / 無 py override — 修正前一版過度設計。
+    // Popover lightweight chrome canonical(2026-05-04 重思 v2;2026-06-16 slot 改衍生 + 收斂 SSOT):
+    //   走 `COMPACT_HEADER_SLOT`(= calc(--font-body-size×1.5) = 14×1.5 = 21 = PopoverTitle text-body line-box,
+    //   衍生非寫死,取代舊各自寫死的 1.25rem / 20 巧合值)→ slot = title 行高,title 字級改 slot 自動跟。
+    //   Header 維持 padding-based:max(21 title, 21 slot) + py-tight(12*2) = 45 → 自然比 Dialog/Sheet 48 輕一級。
+    //   Q10 穩定:title-only / title+close 都 = title + py 主導(slot=title)。無 min-h / 無 py override。
     /* @__PURE__ */ jsxs(
       SurfaceHeader,
       {
         ref,
-        className: cn("justify-between [--chrome-slot-h:1.25rem]", className),
+        className: cn("justify-between", COMPACT_HEADER_SLOT, className),
         ...props,
         children: [
           /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children }),
-          !hideClose && // Dismiss X = native sm,SurfaceHeader 負 my trick 讓 layout 佔位 24 → 匹配 inner 24
+          !hideClose && // Dismiss X = native sm,SurfaceHeader 負 my trick 讓 layout 佔位縮到 slot(21 = title line-box)
           /* @__PURE__ */ jsx(PopoverPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { "data-dismiss": true, iconOnly: true, dismiss: true, size: "sm", startIcon: X, "aria-label": "關閉" }) })
         ]
       }
@@ -91,7 +90,8 @@ const popoverMeta = {
   // non-family composite / overlay / layout
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  states: ["default"],
+  // 浮層容器 primitive,無自己的 variant/size/disabled 互動 state(spec「為何無 Inspector」段;對齊 separator.tsx meta canonical)
   tokens: {
     bg: ["bg-surface-raised"],
     fg: ["text-foreground"],

package/dist/components/Popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../../src/components/Popover/popover.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 PopoverPrimitive from \"@radix-ui/react-popover\"\nimport { X as XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { SurfaceHeader, SurfaceBody, SurfaceFooter } from \"@/design-system/patterns/overlay-surface/overlay-surface\"\nimport { Button } from \"@/design-system/components/Button/button\"\nimport { OVERLAY_SIDE_OFFSET, OVERLAY_COLLISION_PADDING } from \"@/design-system/tokens/elevation/overlay-geometry\"\n\n/**\n * Popover — Radix Popover + 設計系統 token\n *\n * ── 視覺 ──\n * 與 Dialog 對齊：bg-surface-raised / rounded-lg / border-border / elevation-200。\n * density 永遠鎖 md（non-modal 輕量浮層不隨頁面 density 放大）。\n *\n * ── 結構 ──\n * PopoverContent：外殼（bg / border / radius / shadow / density），無內距。\n * PopoverHeader / PopoverBody / PopoverFooter：消費 overlay-surface pattern\n * 共用的 SurfaceHeader / SurfaceBody / SurfaceFooter primitives(padding SSOT)。\n *\n * ── Header dismiss X(2026-04-20 決策) ──\n * 所有 PopoverHeader 一律附右上 X 按鈕(對齊 Dialog 的 canonical)。Popover 雖是\n * non-modal + click-outside-to-close,但有 header 的 Popover 通常結構化程度高\n * (title / 多區塊),明確的「關閉」入口讓使用者更易退出。無 header 的簡單 Popover\n * 不加 X(click-outside / Esc 即可)。\n */\n\nconst Popover = PopoverPrimitive.Root\nconst PopoverTrigger = PopoverPrimitive.Trigger\nconst PopoverAnchor = PopoverPrimitive.Anchor\nconst PopoverClose = PopoverPrimitive.Close\n\n// AutoFocus canonical(對齊 Dialog / Sheet / Material / Polaris)—\n// 開啟時 focus 落在 body 第一個有意義互動元素,避免 focus 到 close X 觸發 tooltip leak\nconst handlePopoverOpenAutoFocus = (e: Event) => {\n  e.preventDefault()\n  const content = e.currentTarget as HTMLElement\n  const firstBodyTarget = content.querySelector<HTMLElement>(\n    '[data-popover-body] input:not([disabled]),[data-popover-body] textarea:not([disabled]),[data-popover-body] select:not([disabled]),[data-popover-body] button:not([disabled]):not([data-dismiss]),input:not([disabled]),textarea:not([disabled]),button:not([disabled]):not([data-dismiss])'\n  )\n  const firstFooterButton = content.querySelector<HTMLElement>(\n    '[data-popover-footer] button:not([disabled]):not([data-dismiss])'\n  )\n  ;(firstBodyTarget ?? firstFooterButton ?? content).focus({ preventScroll: true })\n}\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = OVERLAY_SIDE_OFFSET, collisionPadding = OVERLAY_COLLISION_PADDING, onOpenAutoFocus, ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      collisionPadding={collisionPadding}\n      data-density=\"md\"\n      onOpenAutoFocus={onOpenAutoFocus ?? handlePopoverOpenAutoFocus}\n      className={cn(\n        \"z-50 w-72 rounded-lg border border-border bg-surface-raised text-foreground shadow-[var(--elevation-200)] outline-none\",\n        // 2026-05-04 viewport-aware max-h SSOT(從 NameCard 升 DS-wide):header/footer 永遠 in-viewport,body 壓縮 scroll\n        // 2026-05-05 audit dim 35 補:加 `min-h-0` 完成 M25 chain invariant(flex item default min-h: auto 阻 shrink)\n        \"max-h-[var(--radix-popover-content-available-height,100vh)] flex flex-col overflow-hidden min-h-0\",\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 motion-reduce:animate-none\",\n        \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        \"origin-[var(--radix-popover-content-transform-origin)]\",\n        className\n      )}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\n// PopoverHeader: SurfaceHeader + Close X(對齊 Dialog 的 canonical,見 docblock)\n// justify-between 讓 children 與 Close 分左右。\ninterface PopoverHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * 隱藏右上 close X(預設 false,顯示)。\n   * Coachmark / Tour 類 composition 用 Skip / Done 自管 close,不需 X。\n   */\n  hideClose?: boolean\n}\n\nconst PopoverHeader = React.forwardRef<HTMLDivElement, PopoverHeaderProps>(\n  ({ className, children, hideClose = false, ...props }, ref) => (\n    // Popover lightweight chrome canonical(2026-05-04 重思 v2):\n    //   覆寫 `--chrome-slot-h: 1.25rem` (20px) → unbounded button 佔位縮成 20,**匹配 PopoverTitle\n    //   text-body line-height (14×1.5≈21,floor 20)**。Header 維持 padding-based 自然撐開:\n    //   max(21 title, 20 slot) + py-tight(12*2) = 45 → 自然比 Dialog/Sheet 48 輕一級。\n    //   Q10 穩定:title-only / title+close 都 = title + py 主導,slot 不 dominate。\n    //   無 min-h / 無 py override — 修正前一版過度設計。\n    <SurfaceHeader\n      ref={ref}\n      className={cn(\"justify-between [--chrome-slot-h:1.25rem]\", className)}\n      {...props}\n    >\n      <div className=\"flex-1 min-w-0\">{children}</div>\n      {!hideClose && (\n        // Dismiss X = native sm,SurfaceHeader 負 my trick 讓 layout 佔位 24 → 匹配 inner 24\n        <PopoverPrimitive.Close asChild>\n          <Button data-dismiss iconOnly dismiss size=\"sm\" startIcon={XIcon} aria-label=\"關閉\" />\n        </PopoverPrimitive.Close>\n      )}\n    </SurfaceHeader>\n  ),\n)\nPopoverHeader.displayName = \"PopoverHeader\"\n\n// PopoverBody / PopoverFooter: wrap SurfaceBody / SurfaceFooter with data-popover-*\n// attributes so handlePopoverOpenAutoFocus 可正確定位 body 內第一個 interactive 元素\n//\n// ── List-as-region 場景(menu / Cmd+K / nav)──\n// 不再提供 `flush` variant(2026-05-01 移除,對齊 DialogBody / SheetBody canonical)。\n// consumer 用 SurfaceBody className override 撤掉 chrome padding + 自管 list outer wrapper:\n// `<PopoverBody className=\"!px-0 !py-0\"><div className=\"py-2\">{items}</div></PopoverBody>`\n// 或乾脆不用 PopoverBody,直接 PopoverContent > 自管 list 結構(naked popover)。\n// 詳 DialogBody comment + `tokens/layoutSpace/layoutSpace.spec.md`「List-as-region in overlay body」\nconst PopoverBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ ...props }, ref) => <SurfaceBody ref={ref} data-popover-body {...props} />,\n)\nPopoverBody.displayName = \"PopoverBody\"\n\nconst PopoverFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ ...props }, ref) => <SurfaceFooter ref={ref} data-popover-footer {...props} />\n)\nPopoverFooter.displayName = \"PopoverFooter\"\n\n// PopoverTitle(2026-04-22 v4 non-modal canonical):`text-body font-medium`(14px)\n// Rationale:Popover / Coachmark 屬 **non-modal 輕量浮層**,跟 density 鎖 md 同源的視覺語言 —\n// chrome 全體輕量:\n//   - density 鎖 md(不隨 page 放大)\n//   - dismiss X 透過 v5 unbounded trick layout 佔位 24\n//   - **title `text-body`(14px)跟 Dialog / Sheet modal 的 body-lg(16px)形成重量級 vs 輕量級視覺區分**\n// 世界級對照:Figma / Notion / Linear / Material 的 popover / filter panel / inline settings\n// 的 header title 多半比 modal dialog title 小一級(16→14 或同比),視覺宣告「此浮層可忽略」\n//\n// Coachmark 同樣消費 PopoverTitle 作 header 小標籤(如 \"新功能介紹\" / \"Tip 1 of 3\"),\n// CoachmarkBody 的主 title 另走 text-body-lg(見 coachmark.tsx L178)。\nconst PopoverTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h2\n    ref={ref}\n    className={cn(\"text-body font-medium truncate\", className)}\n    {...props}\n  />\n))\nPopoverTitle.displayName = \"PopoverTitle\"\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 popoverMeta = {\n  component: 'Popover',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-surface-raised'],\n    fg: ['text-foreground'],\n    ring: [],\n  },\n} as const\n\nexport {\n  Popover,\n  PopoverTrigger,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverClose,\n  PopoverHeader,\n  PopoverBody,\n  PopoverFooter,\n  PopoverTitle,\n}\n"],"names":["XIcon"],"mappings":";;;;;;;;AA6BA,MAAM,UAAU,iBAAiB;AACjC,MAAM,iBAAiB,iBAAiB;AACxC,MAAM,gBAAgB,iBAAiB;AACvC,MAAM,eAAe,iBAAiB;AAItC,MAAM,6BAA6B,CAAC,MAAa;AAC/C,IAAE,eAAA;AACF,QAAM,UAAU,EAAE;AAClB,QAAM,kBAAkB,QAAQ;AAAA,IAC9B;AAAA,EAAA;AAEF,QAAM,oBAAoB,QAAQ;AAAA,IAChC;AAAA,EAAA;AAED,GAAC,mBAAmB,qBAAqB,SAAS,MAAM,EAAE,eAAe,MAAM;AAClF;AAEA,MAAM,iBAAiB,MAAM,WAG3B,CAAC,EAAE,WAAW,QAAQ,UAAU,aAAa,qBAAqB,mBAAmB,2BAA2B,iBAAiB,GAAG,MAAA,GAAS,QAC7I,oBAAC,iBAAiB,QAAjB,EACC,UAAA;AAAA,EAAC,iBAAiB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAa;AAAA,IACb,iBAAiB,mBAAmB;AAAA,IACpC,WAAW;AAAA,MACT;AAAA;AAAA;AAAA,MAGA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,GACF,CACD;AACD,eAAe,cAAc,iBAAiB,QAAQ;AAYtD,MAAM,gBAAgB,MAAM;AAAA,EAC1B,CAAC,EAAE,WAAW,UAAU,YAAY,OAAO,GAAG,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOrD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,6CAA6C,SAAS;AAAA,QACnE,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAU,kBAAkB,SAAA,CAAS;AAAA,UACzC,CAAC;AAAA,UAEA,oBAAC,iBAAiB,OAAjB,EAAuB,SAAO,MAC7B,UAAA,oBAAC,UAAO,gBAAY,MAAC,UAAQ,MAAC,SAAO,MAAC,MAAK,MAAK,WAAWA,GAAO,cAAW,MAAK,EAAA,CACpF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA;AAIR;AACA,cAAc,cAAc;AAW5B,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,EAAE,GAAG,SAAS,QAAQ,oBAAC,aAAA,EAAY,KAAU,qBAAiB,MAAE,GAAG,MAAA,CAAO;AAC7E;AACA,YAAY,cAAc;AAE1B,MAAM,gBAAgB,MAAM;AAAA,EAC1B,CAAC,EAAE,GAAG,SAAS,QAAQ,oBAAC,eAAA,EAAc,KAAU,uBAAmB,MAAE,GAAG,MAAA,CAAO;AACjF;AACA,cAAc,cAAc;AAa5B,MAAM,eAAe,MAAM,WAGzB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC;AAAA,EAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,kCAAkC,SAAS;AAAA,IACxD,GAAG;AAAA,EAAA;AACN,CACD;AACD,aAAa,cAAc;AAIpB,MAAM,cAAc;AAAA,EACzB,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAC,mBAAmB;AAAA,IACxB,IAAI,CAAC,iBAAiB;AAAA,IACtB,MAAM,CAAA;AAAA,EAAC;AAEX;"}
+{"version":3,"file":"popover.js","sources":["../../../src/components/Popover/popover.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 PopoverPrimitive from \"@radix-ui/react-popover\"\nimport { X as XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { SurfaceHeader, SurfaceBody, SurfaceFooter, COMPACT_HEADER_SLOT } from \"@/design-system/patterns/overlay-surface/overlay-surface\"\nimport { Button } from \"@/design-system/components/Button/button\"\nimport { OVERLAY_SIDE_OFFSET, OVERLAY_COLLISION_PADDING } from \"@/design-system/tokens/elevation/overlay-geometry\"\n\n/**\n * Popover — Radix Popover + 設計系統 token\n *\n * ── 視覺 ──\n * 與 Dialog 對齊：bg-surface-raised / rounded-lg / border-border / elevation-200。\n * layout-space 鎖 md（輕量浮層 header py-tight 保持精簡）；ui-size 繼承 page（內部控件對齊觸發點，2026-06-15 改，原 data-density master switch）。\n *\n * ── 結構 ──\n * PopoverContent：外殼（bg / border / radius / shadow / density），無內距。\n * PopoverHeader / PopoverBody / PopoverFooter：消費 overlay-surface pattern\n * 共用的 SurfaceHeader / SurfaceBody / SurfaceFooter primitives(padding SSOT)。\n *\n * ── Header dismiss X(2026-04-20 決策) ──\n * 所有 PopoverHeader 一律附右上 X 按鈕(對齊 Dialog 的 canonical)。Popover 雖是\n * non-modal + click-outside-to-close,但有 header 的 Popover 通常結構化程度高\n * (title / 多區塊),明確的「關閉」入口讓使用者更易退出。無 header 的簡單 Popover\n * 不加 X(click-outside / Esc 即可)。\n */\n\nconst Popover = PopoverPrimitive.Root\nconst PopoverTrigger = PopoverPrimitive.Trigger\nconst PopoverAnchor = PopoverPrimitive.Anchor\nconst PopoverClose = PopoverPrimitive.Close\n\n// AutoFocus canonical(對齊 Dialog / Sheet / Material / Polaris)—\n// 開啟時 focus 落在 body 第一個有意義互動元素,避免 focus 到 close X 觸發 tooltip leak\nconst handlePopoverOpenAutoFocus = (e: Event) => {\n  e.preventDefault()\n  const content = e.currentTarget as HTMLElement\n  const firstBodyTarget = content.querySelector<HTMLElement>(\n    '[data-popover-body] input:not([disabled]),[data-popover-body] textarea:not([disabled]),[data-popover-body] select:not([disabled]),[data-popover-body] button:not([disabled]):not([data-dismiss]),input:not([disabled]),textarea:not([disabled]),button:not([disabled]):not([data-dismiss])'\n  )\n  const firstFooterButton = content.querySelector<HTMLElement>(\n    '[data-popover-footer] button:not([disabled]):not([data-dismiss])'\n  )\n  ;(firstBodyTarget ?? firstFooterButton ?? content).focus({ preventScroll: true })\n}\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = OVERLAY_SIDE_OFFSET, collisionPadding = OVERLAY_COLLISION_PADDING, onOpenAutoFocus, ...props }, ref) => (\n  <PopoverPrimitive.Portal>\n    <PopoverPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      collisionPadding={collisionPadding}\n      // Layout-space lock(2026-06-15 canonical,原 data-density=\"md\" 改為只鎖 layout-space):Popover 是\n      // 輕量浮層,header/footer 用 py-tight(layout-space)→ 鎖 layout-space=md 保持精簡 padding;但\n      // **ui-size 不鎖、繼承 page** → 內部 field 控件 / dismiss 按鈕隨 page 放大,跟觸發點一致(decouple)。\n      // [data-layout-space=\"md\"] 有 reset selector(layoutSpace.css L31)→ lg page 上正確 reset 回 md。\n      data-layout-space=\"md\"\n      onOpenAutoFocus={onOpenAutoFocus ?? handlePopoverOpenAutoFocus}\n      className={cn(\n        \"z-50 w-72 rounded-lg border border-border bg-surface-raised text-foreground shadow-[var(--elevation-200)] outline-none\",\n        // 2026-05-04 viewport-aware max-h SSOT(從 ProfileCard 升 DS-wide):header/footer 永遠 in-viewport,body 壓縮 scroll\n        // 2026-05-05 audit dim 35 補:加 `min-h-0` 完成 M25 chain invariant(flex item default min-h: auto 阻 shrink)\n        \"max-h-[var(--radix-popover-content-available-height,100vh)] flex flex-col overflow-hidden min-h-0\",\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 motion-reduce:animate-none\",\n        \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        \"origin-[var(--radix-popover-content-transform-origin)]\",\n        className\n      )}\n      {...props}\n    />\n  </PopoverPrimitive.Portal>\n))\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\n// PopoverHeader: SurfaceHeader + Close X(對齊 Dialog 的 canonical,見 docblock)\n// justify-between 讓 children 與 Close 分左右。\ninterface PopoverHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * 隱藏右上 close X(預設 false,顯示)。\n   * Coachmark / Tour 類 composition 用 Skip / Done 自管 close,不需 X。\n   */\n  hideClose?: boolean\n}\n\nconst PopoverHeader = React.forwardRef<HTMLDivElement, PopoverHeaderProps>(\n  ({ className, children, hideClose = false, ...props }, ref) => (\n    // Popover lightweight chrome canonical(2026-05-04 重思 v2;2026-06-16 slot 改衍生 + 收斂 SSOT):\n    //   走 `COMPACT_HEADER_SLOT`(= calc(--font-body-size×1.5) = 14×1.5 = 21 = PopoverTitle text-body line-box,\n    //   衍生非寫死,取代舊各自寫死的 1.25rem / 20 巧合值)→ slot = title 行高,title 字級改 slot 自動跟。\n    //   Header 維持 padding-based:max(21 title, 21 slot) + py-tight(12*2) = 45 → 自然比 Dialog/Sheet 48 輕一級。\n    //   Q10 穩定:title-only / title+close 都 = title + py 主導(slot=title)。無 min-h / 無 py override。\n    <SurfaceHeader\n      ref={ref}\n      className={cn(\"justify-between\", COMPACT_HEADER_SLOT, className)}\n      {...props}\n    >\n      <div className=\"flex-1 min-w-0\">{children}</div>\n      {!hideClose && (\n        // Dismiss X = native sm,SurfaceHeader 負 my trick 讓 layout 佔位縮到 slot(21 = title line-box)\n        <PopoverPrimitive.Close asChild>\n          <Button data-dismiss iconOnly dismiss size=\"sm\" startIcon={XIcon} aria-label=\"關閉\" />\n        </PopoverPrimitive.Close>\n      )}\n    </SurfaceHeader>\n  ),\n)\nPopoverHeader.displayName = \"PopoverHeader\"\n\n// PopoverBody / PopoverFooter: wrap SurfaceBody / SurfaceFooter with data-popover-*\n// attributes so handlePopoverOpenAutoFocus 可正確定位 body 內第一個 interactive 元素\n//\n// ── List-as-region 場景(menu / Cmd+K / nav)──\n// 不再提供 `flush` variant(2026-05-01 移除,對齊 DialogBody / SheetBody canonical)。\n// consumer 用 SurfaceBody className override 撤掉 chrome padding + 自管 list outer wrapper:\n// `<PopoverBody className=\"!px-0 !py-0\"><div className=\"py-2\">{items}</div></PopoverBody>`\n// 或乾脆不用 PopoverBody,直接 PopoverContent > 自管 list 結構(naked popover)。\n// 詳 DialogBody comment + `tokens/layoutSpace/layoutSpace.spec.md`「List-as-region in overlay body」\nconst PopoverBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ ...props }, ref) => <SurfaceBody ref={ref} data-popover-body {...props} />,\n)\nPopoverBody.displayName = \"PopoverBody\"\n\nconst PopoverFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ ...props }, ref) => <SurfaceFooter ref={ref} data-popover-footer {...props} />\n)\nPopoverFooter.displayName = \"PopoverFooter\"\n\n// PopoverTitle(2026-04-22 v4 non-modal canonical):`text-body font-medium`(14px)\n// Rationale:Popover / Coachmark 屬 **non-modal 輕量浮層**,跟 density 鎖 md 同源的視覺語言 —\n// chrome 全體輕量:\n//   - density 鎖 md(不隨 page 放大)\n//   - dismiss X 透過 v5 unbounded trick layout 佔位 24\n//   - **title `text-body`(14px)跟 Dialog / Sheet modal 的 body-lg(16px)形成重量級 vs 輕量級視覺區分**\n// 世界級對照:Figma / Notion / Linear / Material 的 popover / filter panel / inline settings\n// 的 header title 多半比 modal dialog title 小一級(16→14 或同比),視覺宣告「此浮層可忽略」\n//\n// Coachmark 同樣消費 PopoverTitle 作 header 小標籤(如 \"新功能介紹\" / \"Tip 1 of 3\"),\n// CoachmarkBody 的主 title 另走 text-body-lg(見 coachmark.tsx CoachmarkBody 主 title <h3>)。\nconst PopoverTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h2\n    ref={ref}\n    className={cn(\"text-body font-medium truncate\", className)}\n    {...props}\n  />\n))\nPopoverTitle.displayName = \"PopoverTitle\"\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 popoverMeta = {\n  component: 'Popover',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default'], // 浮層容器 primitive,無自己的 variant/size/disabled 互動 state(spec「為何無 Inspector」段;對齊 separator.tsx meta canonical)\n  tokens: {\n    bg: ['bg-surface-raised'],\n    fg: ['text-foreground'],\n    ring: [],\n  },\n} as const\n\nexport {\n  Popover,\n  PopoverTrigger,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverClose,\n  PopoverHeader,\n  PopoverBody,\n  PopoverFooter,\n  PopoverTitle,\n}\n"],"names":["XIcon"],"mappings":";;;;;;;;AA6BA,MAAM,UAAU,iBAAiB;AACjC,MAAM,iBAAiB,iBAAiB;AACxC,MAAM,gBAAgB,iBAAiB;AACvC,MAAM,eAAe,iBAAiB;AAItC,MAAM,6BAA6B,CAAC,MAAa;AAC/C,IAAE,eAAA;AACF,QAAM,UAAU,EAAE;AAClB,QAAM,kBAAkB,QAAQ;AAAA,IAC9B;AAAA,EAAA;AAEF,QAAM,oBAAoB,QAAQ;AAAA,IAChC;AAAA,EAAA;AAED,GAAC,mBAAmB,qBAAqB,SAAS,MAAM,EAAE,eAAe,MAAM;AAClF;AAEA,MAAM,iBAAiB,MAAM,WAG3B,CAAC,EAAE,WAAW,QAAQ,UAAU,aAAa,qBAAqB,mBAAmB,2BAA2B,iBAAiB,GAAG,MAAA,GAAS,QAC7I,oBAAC,iBAAiB,QAAjB,EACC,UAAA;AAAA,EAAC,iBAAiB;AAAA,EAAjB;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAKA,qBAAkB;AAAA,IAClB,iBAAiB,mBAAmB;AAAA,IACpC,WAAW;AAAA,MACT;AAAA;AAAA;AAAA,MAGA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,EAAA;AACN,GACF,CACD;AACD,eAAe,cAAc,iBAAiB,QAAQ;AAYtD,MAAM,gBAAgB,MAAM;AAAA,EAC1B,CAAC,EAAE,WAAW,UAAU,YAAY,OAAO,GAAG,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMrD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,mBAAmB,qBAAqB,SAAS;AAAA,QAC9D,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAU,kBAAkB,SAAA,CAAS;AAAA,UACzC,CAAC;AAAA,UAEA,oBAAC,iBAAiB,OAAjB,EAAuB,SAAO,MAC7B,UAAA,oBAAC,UAAO,gBAAY,MAAC,UAAQ,MAAC,SAAO,MAAC,MAAK,MAAK,WAAWA,GAAO,cAAW,MAAK,EAAA,CACpF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA;AAIR;AACA,cAAc,cAAc;AAW5B,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,EAAE,GAAG,SAAS,QAAQ,oBAAC,aAAA,EAAY,KAAU,qBAAiB,MAAE,GAAG,MAAA,CAAO;AAC7E;AACA,YAAY,cAAc;AAE1B,MAAM,gBAAgB,MAAM;AAAA,EAC1B,CAAC,EAAE,GAAG,SAAS,QAAQ,oBAAC,eAAA,EAAc,KAAU,uBAAmB,MAAE,GAAG,MAAA,CAAO;AACjF;AACA,cAAc,cAAc;AAa5B,MAAM,eAAe,MAAM,WAGzB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC;AAAA,EAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,kCAAkC,SAAS;AAAA,IACxD,GAAG;AAAA,EAAA;AACN,CACD;AACD,aAAa,cAAc;AAIpB,MAAM,cAAc;AAAA,EACzB,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,SAAS;AAAA;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAC,mBAAmB;AAAA,IACxB,IAAI,CAAC,iBAAiB;AAAA,IACtB,MAAM,CAAA;AAAA,EAAC;AAEX;"}

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

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

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

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

package/dist/components/ProfileCard/index.js

@@ -0,0 +1,8 @@
+import { NAMECARD_DEFAULT_FIELD_KEYS, ProfileCard, ProfileCardDefaultActions, nameCardMeta } from "./profile-card.js";
+export {
+  NAMECARD_DEFAULT_FIELD_KEYS,
+  ProfileCard,
+  ProfileCardDefaultActions,
+  nameCardMeta
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/{NameCard/name-card.d.ts → ProfileCard/profile-card.d.ts}

@@ -1,37 +1,42 @@
+/**
+ * @internal — DS-internal 單元(per `.claude/rules/ui-development.md` Public vs Internal canonical;spec frontmatter `isInternal`)。
+ * 不進 root barrel front-door;由 PeoplePicker(person-display)wrap 消費,end-user app 請用 wrapper 元件。
+ */
 import * as React from 'react';
 import { type AvatarData } from '../../components/Avatar/avatar';
 /**
- * NameCardDefaultActions — canonical 預設 action 組合
+ * ProfileCardDefaultActions — canonical 預設 action 組合
  *
  * ── 為什麼需要 export ──
- * NameCard 的 action 列在世界級 chat/contact app 是「關係型快速動作」的 canonical
+ * ProfileCard 的 action 列在世界級 chat/contact app 是「關係型快速動作」的 canonical
  * (Slack / iMessage / LinkedIn / Figma 皆如此):**Chat / Message + Audio call**。
- * 跨 consumer(avatar.principles / name-card.stories / future product code)應該用
+ * 跨 consumer(avatar.principles / profile-card.stories / future product code)應該用
  * 同一組預設,避免每個範例各自發明 action 組合,讓 reader 誤以為 action 會隨情境自動變。
  *
- * ── 使用方式(hover context 必含 onViewMore,見 name-card.spec.md 「View more」節)──
- *   <NameCard name="..." actions={<NameCardDefaultActions />} onViewMore={...} />
+ * ── 使用方式(hover context 必含 onViewMore,見 profile-card.spec.md 「View more」節)──
+ *   <ProfileCard name="..." actions={<ProfileCardDefaultActions />} onViewMore={...} />
  *
  * ── 何時要換成自訂 action ──
  * - Single-action 情境(只要「傳訊息」)→ consumer 傳 `<Button>傳訊息</Button>`
  * - 特定情境的 action(管理員「撤銷邀請」/ HR「離職管理」)→ consumer 自訂
- * - 非人員關係動作(「訂購此商品」)→ 根本不應該用 NameCard
+ * - 非人員關係動作(「訂購此商品」)→ 根本不應該用 ProfileCard
  *
  * Chat + Audio call 是 **default**,不是 **only**——consumer 可覆寫,但需有明確理由。
  */
-export declare const NameCardDefaultActions: () => import("react/jsx-runtime").JSX.Element;
+export declare const ProfileCardDefaultActions: () => import("react/jsx-runtime").JSX.Element;
 type StatusType = 'online' | 'away' | 'busy' | 'offline';
 /**
- * NameCard SSOT — 預設 field keys(v11 always-render canonical,2026-05-06)
+ * ProfileCard SSOT — 預設 field keys(現行 v15.7:default 只 `id` + `employeeNumber`;
+ * v11 always-render 為歷史脈絡,已退役 — 見下方 2026-05-07 註解 + render 處 v12 註解)
  *
  * ── 為什麼 SSOT ──
  * User explicit rule:「所有 namecard 預設顯示的資訊都是要一樣完整的」。前 v10 props
  * 全 optional + body conditional render → consumer 漏傳 fields 視覺缺 section,每個範例
  * 各自不一致(同 person 在 DataTable / PeoplePicker / avatar.principles 看起來不同)。
  *
- * v11 canonical:NameCard **always** renders 4 default sections regardless of consumer 是否
- * 傳資料 — 缺 data → 對應 DescriptionItem 顯 `EMPTY_PLACEHOLDER`("—"),section 結構不收合。
- * 視覺結構 SSOT 在此元件,不依賴 consumer。
+ * v11 canonical(歷史):ProfileCard 當時 always renders 4 default sections — 缺 data → 顯
+ * `EMPTY_PLACEHOLDER`("—")。現行:default fields 縮為 2(v15.7)+ status 條件 render(v12),
+ * 「視覺結構 SSOT 在此元件,不依賴 consumer」原則不變。
  *
  * ── 對齊 world-class ──
  * Slack profile card / Linear member card / Notion person card / GitHub user card / Figma user card
@@ -43,8 +48,8 @@ type StatusType = 'online' | 'away' | 'busy' | 'offline';
  * consumer 補資料,自動防漂移(M19 ensure-canonical 對齊)。
  */
 export declare const NAMECARD_DEFAULT_FIELD_KEYS: readonly ["id", "employeeNumber"];
-type NameCardDefaultFieldKey = typeof NAMECARD_DEFAULT_FIELD_KEYS[number];
-export interface NameCardProps extends React.HTMLAttributes<HTMLDivElement> {
+type ProfileCardDefaultFieldKey = typeof NAMECARD_DEFAULT_FIELD_KEYS[number];
+export interface ProfileCardProps extends React.HTMLAttributes<HTMLDivElement> {
     name: string;
     avatar?: AvatarData;
     subtitle?: string;
@@ -53,7 +58,8 @@ export interface NameCardProps extends React.HTMLAttributes<HTMLDivElement> {
     actions?: React.ReactNode;
     /**
      * Consumer 傳的 field 資料(partial)。預設 keys 走 `NAMECARD_DEFAULT_FIELD_KEYS` —
-     * email / phone / department / location 永遠 render(缺資料顯 `—`)。Consumer 想新增
+     * 只有 id / employeeNumber 兩個 default field 永遠 render(缺資料顯 `—`);email / phone /
+     * department / location 等其他欄位一律 opt-in by consumer 透過本 prop 傳入。Consumer 想新增
      * 自訂 field 直接傳入(在 default 之後 append),想 override default key value 也直接傳。
      */
     fields?: {
@@ -64,22 +70,22 @@ export interface NameCardProps extends React.HTMLAttributes<HTMLDivElement> {
      * Default field 的真實值。Object key = NAMECARD_DEFAULT_FIELD_KEYS 之一。
      * 缺 key → render placeholder。Dev mode 會 console.warn 提醒消費者補資料。
      */
-    defaultFieldValues?: Partial<Record<NameCardDefaultFieldKey, React.ReactNode>>;
+    defaultFieldValues?: Partial<Record<ProfileCardDefaultFieldKey, React.ReactNode>>;
     onViewMore?: () => void;
     viewMoreLabel?: string;
 }
-declare const NameCard: React.ForwardRefExoticComponent<NameCardProps & React.RefAttributes<HTMLDivElement>>;
+declare const ProfileCard: React.ForwardRefExoticComponent<ProfileCardProps & React.RefAttributes<HTMLDivElement>>;
 export declare const nameCardMeta: {
-    readonly component: "NameCard";
+    readonly component: "ProfileCard";
     readonly family: null;
     readonly variants: {};
     readonly sizes: {};
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly [];
     readonly tokens: {
         readonly bg: readonly ["bg-muted"];
         readonly fg: readonly ["text-foreground"];
         readonly ring: readonly [];
     };
 };
-export { NameCard };
-//# sourceMappingURL=name-card.d.ts.map
+export { ProfileCard };
+//# sourceMappingURL=profile-card.d.ts.map

package/dist/components/ProfileCard/profile-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"profile-card.d.ts","sourceRoot":"","sources":["../../../src/components/ProfileCard/profile-card.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EAAU,KAAK,UAAU,EAAE,MAAM,0CAA0C,CAAA;AAMlF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,yBAAyB,+CAKrC,CAAA;AAqBD,KAAK,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;AAiBxD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAIH,eAAO,MAAM,2BAA2B,mCAAoC,CAAA;AAC5E,KAAK,0BAA0B,GAAG,OAAO,2BAA2B,CAAC,MAAM,CAAC,CAAA;AAS5E,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;;;OAKG;IACH,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,EAAE,CAAA;IACpD;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,0BAA0B,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAA;IACjF,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAGD,QAAA,MAAM,WAAW,yFAuKhB,CAAA;AAKD,eAAO,MAAM,YAAY;;;;;;;;;;;CAef,CAAA;AAEV,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/{NameCard/name-card.js → ProfileCard/profile-card.js}

@@ -7,7 +7,7 @@ import { Button } from "../Button/button.js";
 import { DescriptionList, DescriptionItem } from "../DescriptionList/description-list.js";
 import { ScrollArea } from "../ScrollArea/scroll-area.js";
 import { ItemContent } from "../../patterns/element-anatomy/item-anatomy.js";
-const NameCardDefaultActions = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+const ProfileCardDefaultActions = () => /* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", startIcon: MessageCircle, children: "Chat" }),
   /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", startIcon: Phone, endIcon: ChevronDown, children: "Audio call" })
 ] });
@@ -30,7 +30,7 @@ const DEFAULT_FIELD_LABEL = {
   employeeNumber: "Employee number"
 };
 const FIELD_PLACEHOLDER = "—";
-const NameCard = React.forwardRef(
+const ProfileCard = React.forwardRef(
   ({
     name,
     avatar,
@@ -59,13 +59,13 @@ const NameCard = React.forwardRef(
       );
       if (legacyEntry) {
         console.warn(
-          `[NameCard] "${name}":legacy pattern — fields[].label="${legacyEntry.label}" is a default field. Migrate to defaultFieldValues={{ id, employeeNumber }} prop to align with NAMECARD_DEFAULT_FIELD_KEYS canonical.`
+          `[ProfileCard] "${name}":legacy pattern — fields[].label="${legacyEntry.label}" is a default field. Migrate to defaultFieldValues={{ id, employeeNumber }} prop to align with NAMECARD_DEFAULT_FIELD_KEYS canonical.`
         );
       }
     }
     if (process.env.NODE_ENV !== "production" && !defaultFieldValues) {
       console.warn(
-        `[NameCard] "${name}":no defaultFieldValues passed — sections will render placeholders. Pass at least { id, employeeNumber } via defaultFieldValues prop. For other description items (email/phone/department/location etc),use \`fields\` prop array.`
+        `[ProfileCard] "${name}":no defaultFieldValues passed — sections will render placeholders. Pass at least { id, employeeNumber } via defaultFieldValues prop. For other description items (email/phone/department/location etc),use \`fields\` prop array.`
       );
     }
     return /* @__PURE__ */ jsxs(
@@ -130,14 +130,15 @@ const NameCard = React.forwardRef(
     );
   }
 );
-NameCard.displayName = "NameCard";
+ProfileCard.displayName = "ProfileCard";
 const nameCardMeta = {
-  component: "NameCard",
+  component: "ProfileCard",
   family: null,
   // non-family composite / overlay / layout
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  states: [],
+  // 唯讀 person-info template,無自身互動 state（hover/active/focus/disabled 屬子 Button/Avatar）
   tokens: {
     bg: ["bg-muted"],
     fg: ["text-foreground"],
@@ -146,8 +147,8 @@ const nameCardMeta = {
 };
 export {
   NAMECARD_DEFAULT_FIELD_KEYS,
-  NameCard,
-  NameCardDefaultActions,
+  ProfileCard,
+  ProfileCardDefaultActions,
   nameCardMeta
 };
-//# sourceMappingURL=name-card.js.map
+//# sourceMappingURL=profile-card.js.map

package/dist/components/ProfileCard/profile-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"profile-card.js","sources":["../../../src/components/ProfileCard/profile-card.tsx"],"sourcesContent":["/**\n * @internal — DS-internal 單元(per `.claude/rules/ui-development.md` Public vs Internal canonical;spec frontmatter `isInternal`)。\n * 不進 root barrel front-door;由 PeoplePicker(person-display)wrap 消費,end-user app 請用 wrapper 元件。\n */\n// @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 { MessageCircle, Phone, ChevronDown } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar, type AvatarData } from '@/design-system/components/Avatar/avatar'\nimport { Button } from '@/design-system/components/Button/button'\nimport { DescriptionList, DescriptionItem } from '@/design-system/components/DescriptionList/description-list'\nimport { ScrollArea } from '@/design-system/components/ScrollArea/scroll-area'\nimport { ItemContent } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n/**\n * ProfileCardDefaultActions — canonical 預設 action 組合\n *\n * ── 為什麼需要 export ──\n * ProfileCard 的 action 列在世界級 chat/contact app 是「關係型快速動作」的 canonical\n * (Slack / iMessage / LinkedIn / Figma 皆如此):**Chat / Message + Audio call**。\n * 跨 consumer(avatar.principles / profile-card.stories / future product code)應該用\n * 同一組預設,避免每個範例各自發明 action 組合,讓 reader 誤以為 action 會隨情境自動變。\n *\n * ── 使用方式(hover context 必含 onViewMore,見 profile-card.spec.md 「View more」節)──\n *   <ProfileCard name=\"...\" actions={<ProfileCardDefaultActions />} onViewMore={...} />\n *\n * ── 何時要換成自訂 action ──\n * - Single-action 情境(只要「傳訊息」)→ consumer 傳 `<Button>傳訊息</Button>`\n * - 特定情境的 action(管理員「撤銷邀請」/ HR「離職管理」)→ consumer 自訂\n * - 非人員關係動作(「訂購此商品」)→ 根本不應該用 ProfileCard\n *\n * Chat + Audio call 是 **default**,不是 **only**——consumer 可覆寫,但需有明確理由。\n */\nexport const ProfileCardDefaultActions = () => (\n  <>\n    <Button variant=\"tertiary\" size=\"sm\" startIcon={MessageCircle}>Chat</Button>\n    <Button variant=\"tertiary\" size=\"sm\" startIcon={Phone} endIcon={ChevronDown}>Audio call</Button>\n  </>\n)\n\n/**\n * ProfileCard — 人員 HoverCard 的內容元件\n *\n * ── Status 對齊 Avatar presence canonical(2026-04-20) ──\n * status type = `online | away | busy | offline`,跟 Avatar 的 presence prop 對齊\n * (世界級 Slack / Teams / Discord term);dot 色走 `--status-*` semantic token\n * (獨立於 success/error/warning,避免語義衝突)。\n *\n * ── Avatar 對齊 ──\n * 跟 FileItem rich 統一:右側 text column 用 justify-center + minHeight=avatar。\n * 短文字置中於 avatar,長文字(多行名字)自然撐高。\n *\n * ── Info fields ──\n * Status message / ID / Employee number 等唯讀屬性全部用 DescriptionList 家族\n * 承載(不手刻 dt/dd),canonical 由 DS primitive own。\n */\n\nconst AVATAR_SIZE = 64\n\ntype StatusType = 'online' | 'away' | 'busy' | 'offline'\n\n// Presence semantic tokens(見 color/semantic.css)——跟 Avatar status dot 共用\nconst STATUS_DOT_COLOR: Record<StatusType, string> = {\n  online: 'var(--status-online)',\n  away: 'var(--status-away)',\n  busy: 'var(--status-busy)',\n  offline: 'var(--status-offline)',\n}\n\nconst STATUS_LABEL: Record<StatusType, string> = {\n  online: 'Online',\n  away: 'Away',\n  busy: 'Busy',\n  offline: 'Offline',\n}\n\n/**\n * ProfileCard SSOT — 預設 field keys(現行 v15.7:default 只 `id` + `employeeNumber`;\n * v11 always-render 為歷史脈絡,已退役 — 見下方 2026-05-07 註解 + render 處 v12 註解)\n *\n * ── 為什麼 SSOT ──\n * User explicit rule:「所有 namecard 預設顯示的資訊都是要一樣完整的」。前 v10 props\n * 全 optional + body conditional render → consumer 漏傳 fields 視覺缺 section,每個範例\n * 各自不一致(同 person 在 DataTable / PeoplePicker / avatar.principles 看起來不同)。\n *\n * v11 canonical(歷史):ProfileCard 當時 always renders 4 default sections — 缺 data → 顯\n * `EMPTY_PLACEHOLDER`(\"—\")。現行:default fields 縮為 2(v15.7)+ status 條件 render(v12),\n * 「視覺結構 SSOT 在此元件,不依賴 consumer」原則不變。\n *\n * ── 對齊 world-class ──\n * Slack profile card / Linear member card / Notion person card / GitHub user card / Figma user card\n * 都是 fixed schema(role / email / location / department / department / pronouns 等),\n * 不會因為某 user 沒填 phone 整個 phone field 不見 — 缺 = 顯 `Not set` 或留白。\n *\n * ── 為什麼 placeholder 不 hide ──\n * Hide → consumer 不知道少傳 → 視覺漂移;Placeholder → 永遠看到「該欄該有」+ dev-warn 提示\n * consumer 補資料,自動防漂移(M19 ensure-canonical 對齊)。\n */\n// **2026-05-07 v15.7 user directive**:default render 只 `id` + `employeeNumber` 兩個。\n// Email / Phone / Department / Location 等其他 description 一律 opt-in by consumer 透過\n// `fields` array prop。對齊 user 明確「應該確保所有都只有這兩個,因為我並沒有要求你要選其他的」。\nexport const NAMECARD_DEFAULT_FIELD_KEYS = ['id', 'employeeNumber'] as const\ntype ProfileCardDefaultFieldKey = typeof NAMECARD_DEFAULT_FIELD_KEYS[number]\n\nconst DEFAULT_FIELD_LABEL: Record<ProfileCardDefaultFieldKey, string> = {\n  id: 'ID',\n  employeeNumber: 'Employee number',\n}\n\nconst FIELD_PLACEHOLDER = '—'\n\nexport interface ProfileCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  name: string\n  avatar?: AvatarData\n  subtitle?: string\n  status?: StatusType\n  statusMessage?: React.ReactNode\n  actions?: React.ReactNode\n  /**\n   * Consumer 傳的 field 資料(partial)。預設 keys 走 `NAMECARD_DEFAULT_FIELD_KEYS` —\n   * 只有 id / employeeNumber 兩個 default field 永遠 render(缺資料顯 `—`);email / phone /\n   * department / location 等其他欄位一律 opt-in by consumer 透過本 prop 傳入。Consumer 想新增\n   * 自訂 field 直接傳入(在 default 之後 append),想 override default key value 也直接傳。\n   */\n  fields?: { label: string; value: React.ReactNode }[]\n  /**\n   * Default field 的真實值。Object key = NAMECARD_DEFAULT_FIELD_KEYS 之一。\n   * 缺 key → render placeholder。Dev mode 會 console.warn 提醒消費者補資料。\n   */\n  defaultFieldValues?: Partial<Record<ProfileCardDefaultFieldKey, React.ReactNode>>\n  onViewMore?: () => void\n  viewMoreLabel?: string\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst ProfileCard = React.forwardRef<HTMLDivElement, ProfileCardProps>(\n  (\n    {\n      name,\n      avatar,\n      subtitle,\n      status,\n      statusMessage,\n      actions,\n      fields,\n      defaultFieldValues,\n      onViewMore,\n      viewMoreLabel = 'View more',\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    // v12 canonical:default fields 永遠 render(缺資料顯 placeholder),consumer 自訂\n    // fields 在 default 之後 append。Status section 為條件 render(status undefined →\n    // 整 block 隱藏,見下方 render 處)— v11「永遠 render + placeholder」已退役。\n    //\n    // **Dedup canonical(2026-05-07 v15.8 fix Bug E)**:consumer 的 `fields` array 若含\n    // label 撞 default(eg. 「ID」「Employee number」),consumer 值 win — defaults 那一行\n    // 跳過(否則 same label 連 render 兩次,如 default placeholder `—` + consumer 真值)。\n    // 這是遷移期 forgiving 行為:DEV warn 提示應改用 `defaultFieldValues`,但 production\n    // 不破壞既有 consumer。對齊 React `key` 唯一性 + Linear / Slack profile card 一 label\n    // 一 row idiom。\n    const allFields = React.useMemo(() => {\n      const consumerLabels = new Set((fields ?? []).map((f) => f.label))\n      const defaults = NAMECARD_DEFAULT_FIELD_KEYS\n        .map((key) => ({\n          label: DEFAULT_FIELD_LABEL[key],\n          value: defaultFieldValues?.[key] ?? FIELD_PLACEHOLDER,\n        }))\n        .filter((d) => !consumerLabels.has(d.label))\n      return fields && fields.length > 0 ? [...defaults, ...fields] : defaults\n    }, [defaultFieldValues, fields])\n\n    // Dev warn:consumer 透過 `fields` 傳 default key label(legacy pattern)→ 應改 `defaultFieldValues`\n    if (process.env.NODE_ENV !== 'production' && fields) {\n      const legacyEntry = fields.find((f) =>\n        Object.values(DEFAULT_FIELD_LABEL).includes(f.label as string),\n      )\n      if (legacyEntry) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          `[ProfileCard] \"${name}\":legacy pattern — fields[].label=\"${legacyEntry.label}\" ` +\n          `is a default field. Migrate to defaultFieldValues={{ id, employeeNumber }} prop ` +\n          `to align with NAMECARD_DEFAULT_FIELD_KEYS canonical.`,\n        )\n      }\n    }\n\n    // Dev mode warn:consumer 沒傳 default field 任何 key → 提示補完(避免漂移成 placeholder-only)\n    if (process.env.NODE_ENV !== 'production' && !defaultFieldValues) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        `[ProfileCard] \"${name}\":no defaultFieldValues passed — sections will render placeholders. ` +\n        `Pass at least { id, employeeNumber } via defaultFieldValues prop. ` +\n        `For other description items (email/phone/department/location etc),use \\`fields\\` prop array.`,\n      )\n    }\n\n    // Layout canonical(2026-04-23):Header + Actions 固定上,Body(status + fields)可捲動,\n    // View more 固定下。**ProfileCard 自己約束高度**,不依賴 consumer HoverCardContent 設 flex:\n    //   - `max-h-[var(--radix-hover-card-content-available-height,...)]`:HoverCard / Popover\n    //     context 自動繼承 Radix viewport-aware 變數;standalone 落到 100vh fallback\n    //   - 內部 `flex flex-col + overflow-hidden`:Header(shrink-0)+ Body(flex-1 min-h-0 ScrollArea)\n    //     + Footer(shrink-0)三層 chrome\n    // 世界級對照:Slack / Linear / GitHub / Notion hover-profile popover 皆此 chrome pattern。\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'w-[320px] flex flex-col overflow-hidden',\n          'max-h-[var(--radix-hover-card-content-available-height,var(--radix-popover-content-available-height,100vh))]',\n          className,\n        )}\n        {...props}\n      >\n        {/* ── HEADER(固定): profile + actions ── */}\n        <div className=\"shrink-0 flex flex-col\">\n          <div className=\"flex items-start gap-3 px-4 py-3\">\n            <Avatar\n              src={avatar?.src}\n              alt={avatar?.alt ?? name}\n              color={avatar?.color}\n              size={AVATAR_SIZE}\n              status={status}\n              className=\"shrink-0\"\n            />\n            {/* ProfileCard typography:label body-lg(16/1.5) + desc body(14/1.5) = reading mode + size=\"lg\"。\n                labelClassName escape hatch 加 font-medium(card context 語意)+ labelTruncate=false 允許 wrap。 */}\n            <ItemContent\n              label={name}\n              description={subtitle}\n              mode=\"reading\"\n              size=\"lg\"\n              labelTruncate={false}\n              labelClassName=\"text-body-lg font-medium text-foreground\"\n              className=\"justify-center\"\n              style={{ minHeight: AVATAR_SIZE }}\n            />\n          </div>\n\n          {/* Action buttons — 均分空間 + 填滿格子(canonical):多個 action 等寬瓜分容器,\n              單一 action 也撐滿容器。`grid grid-flow-col auto-cols-fr` + `[&>*]:w-full`。\n              世界級對照:iOS contact card / macOS contact / LinkedIn profile card 的 action row。 */}\n          {actions && (\n            <div className=\"grid grid-flow-col auto-cols-fr gap-2 px-4 pb-3 [&>*]:w-full\">\n              {actions}\n            </div>\n          )}\n        </div>\n\n        {/* ── BODY(可捲動,v12 status-conditional 2026-05-14):status + fields ──\n            **v12 rule**(per user 拍板「不應該顯示『狀態沒有被設定』,production 每 user 一定有\n            presence state,undefined 頂多是 loading transient 還沒讀到」):status undefined →\n            隱藏整 status badge + status message block(loading 期間 skip),禁 render「Status not\n            set」這種 placeholder(語義錯,user presence 不會「沒設定」)。**ProfileCard-specific 不外推\n            至 DS 其他元件**(FileItem / DescriptionList / DataTable cell 各自 placeholder 邏輯\n            unrelated)。Fields section 仍 always-render(info schema 性質)。 */}\n        <ScrollArea className=\"flex-1 min-h-0 border-t border-divider\">\n          {/* Status section:`status` defined 才 render(v12 conditional canonical) */}\n          {status && (\n            <div className=\"px-4 py-3 flex flex-col gap-3\">\n              <div className=\"flex items-center gap-2 px-3 py-2 bg-muted rounded-md\">\n                <span\n                  className=\"w-2.5 h-2.5 rounded-full shrink-0\"\n                  style={{ backgroundColor: STATUS_DOT_COLOR[status] }}\n                />\n                <span className=\"text-body\">{STATUS_LABEL[status]}</span>\n              </div>\n              {/* Status message — 只在 status defined 才 render(語意配對:status badge + status\n                  message 是一組;沒 status 就沒 status message)。缺 statusMessage 顯 placeholder。 */}\n              <DescriptionList>\n                <DescriptionItem label=\"Status message\">\n                  {statusMessage ?? <span className=\"text-fg-muted\">{FIELD_PLACEHOLDER}</span>}\n                </DescriptionItem>\n              </DescriptionList>\n            </div>\n          )}\n\n          {/* Fields section:status defined 才有 border-t separator;無 status section 時去除 border-t(因 ScrollArea 起點已有上方 border-t,不重疊) */}\n          <div className={cn('px-4 py-3', status && 'border-t border-divider')}>\n            <DescriptionList cols={2}>\n              {allFields.map((f) => (\n                <DescriptionItem key={f.label} label={f.label}>\n                  {f.value === FIELD_PLACEHOLDER\n                    ? <span className=\"text-fg-muted\">{FIELD_PLACEHOLDER}</span>\n                    : f.value}\n                </DescriptionItem>\n              ))}\n            </DescriptionList>\n          </div>\n        </ScrollArea>\n\n        {/* ── FOOTER(固定): View more,py-3 canonical(12px,比一般 link 按鈕多呼吸) ── */}\n        {onViewMore && (\n          <div className=\"shrink-0 border-t border-divider px-4 py-3\">\n            <Button variant=\"link\" size=\"sm\" onClick={onViewMore} className=\"w-full\">{viewMoreLabel}</Button>\n          </div>\n        )}\n      </div>\n    )\n  },\n)\nProfileCard.displayName = 'ProfileCard'\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 nameCardMeta = {\n  component: 'ProfileCard',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: [], // 唯讀 person-info template,無自身互動 state（hover/active/focus/disabled 屬子 Button/Avatar）\n  tokens: {\n    bg: ['bg-muted'],\n    fg: ['text-foreground'],\n    ring: [],\n  },\n} as const\n\nexport { ProfileCard }\n"],"names":[],"mappings":";;;;;;;;;AAiCO,MAAM,4BAA4B,MACvC,qBAAA,UAAA,EACE,UAAA;AAAA,EAAA,oBAAC,UAAO,SAAQ,YAAW,MAAK,MAAK,WAAW,eAAe,UAAA,OAAA,CAAI;AAAA,EACnE,oBAAC,QAAA,EAAO,SAAQ,YAAW,MAAK,MAAK,WAAW,OAAO,SAAS,aAAa,UAAA,aAAA,CAAU;AAAA,EAAA,CACzF;AAoBF,MAAM,cAAc;AAKpB,MAAM,mBAA+C;AAAA,EACnD,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AACX;AAEA,MAAM,eAA2C;AAAA,EAC/C,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA,EACN,SAAS;AACX;AA2BO,MAAM,8BAA8B,CAAC,MAAM,gBAAgB;AAGlE,MAAM,sBAAkE;AAAA,EACtE,IAAI;AAAA,EACJ,gBAAgB;AAClB;AAEA,MAAM,oBAAoB;AA0B1B,MAAM,cAAc,MAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AAWH,UAAM,YAAY,MAAM,QAAQ,MAAM;AACpC,YAAM,iBAAiB,IAAI,KAAK,UAAU,CAAA,GAAI,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;AACjE,YAAM,WAAW,4BACd,IAAI,CAAC,SAAS;AAAA,QACb,OAAO,oBAAoB,GAAG;AAAA,QAC9B,QAAO,yDAAqB,SAAQ;AAAA,MAAA,EACpC,EACD,OAAO,CAAC,MAAM,CAAC,eAAe,IAAI,EAAE,KAAK,CAAC;AAC7C,aAAO,UAAU,OAAO,SAAS,IAAI,CAAC,GAAG,UAAU,GAAG,MAAM,IAAI;AAAA,IAClE,GAAG,CAAC,oBAAoB,MAAM,CAAC;AAG/B,QAAI,QAAQ,IAAI,aAAa,gBAAgB,QAAQ;AACnD,YAAM,cAAc,OAAO;AAAA,QAAK,CAAC,MAC/B,OAAO,OAAO,mBAAmB,EAAE,SAAS,EAAE,KAAe;AAAA,MAAA;AAE/D,UAAI,aAAa;AAEf,gBAAQ;AAAA,UACN,kBAAkB,IAAI,sCAAsC,YAAY,KAAK;AAAA,QAAA;AAAA,MAIjF;AAAA,IACF;AAGA,QAAI,QAAQ,IAAI,aAAa,gBAAgB,CAAC,oBAAoB;AAEhE,cAAQ;AAAA,QACN,kBAAkB,IAAI;AAAA,MAAA;AAAA,IAI1B;AASA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAGJ,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,0BACb,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAU,oCACb,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,KAAK,iCAAQ;AAAA,kBACb,MAAK,iCAAQ,QAAO;AAAA,kBACpB,OAAO,iCAAQ;AAAA,kBACf,MAAM;AAAA,kBACN;AAAA,kBACA,WAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,cAIZ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,OAAO;AAAA,kBACP,aAAa;AAAA,kBACb,MAAK;AAAA,kBACL,MAAK;AAAA,kBACL,eAAe;AAAA,kBACf,gBAAe;AAAA,kBACf,WAAU;AAAA,kBACV,OAAO,EAAE,WAAW,YAAA;AAAA,gBAAY;AAAA,cAAA;AAAA,YAClC,GACF;AAAA,YAKC,WACC,oBAAC,OAAA,EAAI,WAAU,gEACZ,UAAA,QAAA,CACH;AAAA,UAAA,GAEJ;AAAA,UASA,qBAAC,YAAA,EAAW,WAAU,0CAEnB,UAAA;AAAA,YAAA,UACC,qBAAC,OAAA,EAAI,WAAU,iCACb,UAAA;AAAA,cAAA,qBAAC,OAAA,EAAI,WAAU,yDACb,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO,EAAE,iBAAiB,iBAAiB,MAAM,EAAA;AAAA,kBAAE;AAAA,gBAAA;AAAA,oCAEpD,QAAA,EAAK,WAAU,aAAa,UAAA,aAAa,MAAM,EAAA,CAAE;AAAA,cAAA,GACpD;AAAA,cAGA,oBAAC,iBAAA,EACC,UAAA,oBAAC,iBAAA,EAAgB,OAAM,kBACpB,UAAA,iBAAiB,oBAAC,QAAA,EAAK,WAAU,iBAAiB,UAAA,kBAAA,CAAkB,GACvE,EAAA,CACF;AAAA,YAAA,GACF;AAAA,gCAID,OAAA,EAAI,WAAW,GAAG,aAAa,UAAU,yBAAyB,GACjE,UAAA,oBAAC,iBAAA,EAAgB,MAAM,GACpB,UAAA,UAAU,IAAI,CAAC,MACd,oBAAC,iBAAA,EAA8B,OAAO,EAAE,OACrC,UAAA,EAAE,UAAU,oBACT,oBAAC,UAAK,WAAU,iBAAiB,UAAA,mBAAkB,IACnD,EAAE,MAAA,GAHc,EAAE,KAIxB,CACD,GACH,EAAA,CACF;AAAA,UAAA,GACF;AAAA,UAGC,cACC,oBAAC,OAAA,EAAI,WAAU,8CACb,8BAAC,QAAA,EAAO,SAAQ,QAAO,MAAK,MAAK,SAAS,YAAY,WAAU,UAAU,yBAAc,EAAA,CAC1F;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AACA,YAAY,cAAc;AAInB,MAAM,eAAe;AAAA,EAC1B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAA;AAAA;AAAA,EACR,QAAQ;AAAA,IACN,IAAI,CAAC,UAAU;AAAA,IACf,IAAI,CAAC,iBAAiB;AAAA,IACtB,MAAM,CAAA;AAAA,EAAC;AAEX;"}

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

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

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

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

package/dist/components/ProgressBar/index.js

@@ -0,0 +1,6 @@
+import { ProgressBar, progressBarMeta } from "./progress-bar.js";
+export {
+  ProgressBar,
+  progressBarMeta
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/ProgressBar/progress-bar.d.ts

@@ -26,9 +26,9 @@ export declare const progressBarMeta: {
     readonly family: null;
     readonly variants: {};
     readonly sizes: {};
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default"];
     readonly tokens: {
-        readonly bg: readonly ["bg-error", "bg-primary", "bg-secondary", "bg-success"];
+        readonly bg: readonly ["bg-error", "bg-info", "bg-secondary", "bg-success"];
         readonly fg: readonly ["text-foreground"];
         readonly ring: readonly [];
     };

package/dist/components/ProgressBar/progress-bar.js

@@ -5,7 +5,7 @@ import { XCircle, CircleCheck } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 const DEFAULT_TRACK_H = 4;
 const STATUS_FILL = {
-  inProgress: "bg-primary",
+  inProgress: "bg-info",
   success: "bg-success",
   error: "bg-error"
 };
@@ -72,9 +72,9 @@ const progressBarMeta = {
   // non-family composite / overlay / layout
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  states: ["default"],
   tokens: {
-    bg: ["bg-error", "bg-primary", "bg-secondary", "bg-success"],
+    bg: ["bg-error", "bg-info", "bg-secondary", "bg-success"],
     fg: ["text-foreground"],
     ring: []
   }

package/dist/components/ProgressBar/progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.js","sources":["../../../src/components/ProgressBar/progress-bar.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 ProgressPrimitive from '@radix-ui/react-progress'\nimport { CircleCheck, XCircle } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\n/**\n * ProgressBar — 水平進度條(determinate)\n *\n * 世界級對照:Material `LinearProgress` / Ant `Progress` / Polaris `ProgressBar` /\n * shadcn `Progress`(皆為 Radix Progress primitive 的包裝)。本 DS 命名為\n * `ProgressBar`(linear)以和 `CircularProgress`(circular)做清楚區分。\n *\n * ── 與 CircularProgress 的分界 ──\n * CircularProgress = circular 兩態(indeterminate 旋轉 / determinate arc),inline 小空間\n * ProgressBar      = linear determinate(0-100% 已知量化),頁面級大區塊 / 表單 wizard / quota\n * 兩者視覺與語意都不同,consumer 依「形狀(linear / circular)+ 是否量化」擇一。\n *\n * ── 與 FileItem 的分界(2026-04-20 user 決策) ──\n * **檔案上傳 UI 走 `FileItem`,不直接消費 ProgressBar**。FileItem 是檔案上傳情境的\n * canonical consumer-facing primitive(檔名 / icon / 進度 / status / actions 一條龍);\n * FileItem 內部可能消費 ProgressBar(engineering 實作細節),consumer 不用也不該自己\n * 組合 raw ProgressBar + 檔名 + action 來做上傳列表。世界級對照:Ant Design 的 `Upload`\n * vs `Progress`(Upload.List 內部用 Progress,consumer 不直接用 Progress 做上傳 UI)。\n *\n * ── 3 狀態,單一 size ──\n * status: inProgress(進行中藍) / success(完成綠) / error(失敗紅)\n *   ^ 命名理由:`status` 是 lifecycle(在途 / 終態),不是視覺 emphasis 階。前身\n *   `primary` 會撞 Button `variant=\"primary\"`(emphasis 最高階),改用世界級\n *   lifecycle 慣例(Polaris `inProgress` / Ant Progress `active`)。\n *\n * **單一高度 4px**(2026-04-20 user 決策):對齊 Material 3 / Carbon / Ant 慣例\n * (固定 4dp/px 不給 size 選項)。4px 是 linear progress 的業界 canonical;若需\n * 視覺強調改用 CircularProgress + label 或改做 full-width hero 版型,不靠 size\n * 階梯撐。移除前的 sm(2)/ md(4)/ lg(6)刻度差太小,無實質視覺區分。\n *\n * ── affix(右側附加) ──\n * `affix=\"value\"` → 顯示 `{value}%` 文字\n * `affix=\"status-icon\"` → 顯示狀態 icon(success ✓ / error ✗;inProgress 時無 icon)\n * `affix={<custom />}` → consumer 客製\n * 不傳 → 純 bar\n */\n\nconst DEFAULT_TRACK_H = 4 // 預設 4px(見 docblock「單一高度」)\nconst STATUS_FILL = {\n  inProgress: 'bg-primary',\n  success: 'bg-success',\n  error: 'bg-error',\n} as const\nconst STATUS_ICON = {\n  success: { Icon: CircleCheck, className: 'text-success' },\n  error:   { Icon: XCircle,     className: 'text-error' },\n} as const\n\nexport interface ProgressBarProps extends Omit<React.ComponentProps<typeof ProgressPrimitive.Root>, 'value'> {\n  /** 當前進度 0-100 */\n  value: number\n  /** 狀態色(lifecycle,非 emphasis 階) */\n  status?: 'inProgress' | 'success' | 'error'\n  /** 右側附加 */\n  affix?: 'value' | 'status-icon' | React.ReactNode\n  /**\n   * Track 高度(px)override。**預設 4**(對齊 Material / Carbon / Ant canonical)。\n   *\n   * **非公開 size 階**——這不是給 consumer 自由選擇粗細的 API,而是給**內部另一個\n   * DS 元件(FileItem)在極密集 row layout 下壓低到 2px** 的逃生艙。Consumer 端\n   * 一律走預設 4px。未來若新 primitive(例如 health-bar 型 hero progress)需要\n   * 較高的 track,再評估是否擴公開 API。\n   *\n   * 世界級對照:Ant `<Progress>` 有 `strokeWidth` 原生 prop;本 DS 只暴露給內部\n   * 元件使用,不在 public API 宣傳,避免 consumer 重新陷入「選哪個 size」的判斷負擔。\n   */\n  height?: number\n}\n\nconst ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(\n  (\n    {\n      value,\n      status = 'inProgress',\n      affix,\n      height,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const clampedValue = Math.max(0, Math.min(100, value))\n    const fillColor = STATUS_FILL[status]\n    const trackH = height ?? DEFAULT_TRACK_H\n\n    // Affix 渲染\n    let affixNode: React.ReactNode = null\n    if (affix === 'value') {\n      affixNode = (\n        <span className=\"text-caption text-foreground tabular-nums shrink-0\">\n          {Math.round(clampedValue)}%\n        </span>\n      )\n    } else if (affix === 'status-icon') {\n      const s = status !== 'inProgress' ? STATUS_ICON[status] : null\n      if (s) affixNode = <s.Icon size={16} className={cn('shrink-0', s.className)} aria-hidden />\n    } else if (React.isValidElement(affix) || typeof affix === 'string' || typeof affix === 'number') {\n      affixNode = affix\n    }\n\n    const bar = (\n      <ProgressPrimitive.Root\n        ref={ref}\n        value={clampedValue}\n        max={100}\n        className={cn(\n          'relative overflow-hidden rounded-full bg-secondary w-full',\n          className,\n        )}\n        style={{ height: trackH }}\n        {...props}\n      >\n        <ProgressPrimitive.Indicator\n          className={cn('h-full rounded-full transition-all duration-300', fillColor)}\n          style={{ width: `${clampedValue}%` }}\n        />\n      </ProgressPrimitive.Root>\n    )\n\n    if (!affixNode) return bar\n\n    return (\n      <div className=\"flex items-center gap-2 w-full\">\n        <div className=\"flex-1 min-w-0\">{bar}</div>\n        {affixNode}\n      </div>\n    )\n  },\n)\nProgressBar.displayName = 'ProgressBar'\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 progressBarMeta = {\n  component: 'ProgressBar',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-error', 'bg-primary', 'bg-secondary', 'bg-success'],\n    fg: ['text-foreground'],\n    ring: [],\n  },\n} as const\n\nexport { ProgressBar }\n"],"names":[],"mappings":";;;;;AA2CA,MAAM,kBAAkB;AACxB,MAAM,cAAc;AAAA,EAClB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,OAAO;AACT;AACA,MAAM,cAAc;AAAA,EAClB,SAAS,EAAE,MAAM,aAAa,WAAW,eAAA;AAAA,EACzC,OAAS,EAAE,MAAM,SAAa,WAAW,aAAA;AAC3C;AAuBA,MAAM,cAAc,MAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,eAAe,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,CAAC;AACrD,UAAM,YAAY,YAAY,MAAM;AACpC,UAAM,SAAS,UAAU;AAGzB,QAAI,YAA6B;AACjC,QAAI,UAAU,SAAS;AACrB,kBACE,qBAAC,QAAA,EAAK,WAAU,sDACb,UAAA;AAAA,QAAA,KAAK,MAAM,YAAY;AAAA,QAAE;AAAA,MAAA,GAC5B;AAAA,IAEJ,WAAW,UAAU,eAAe;AAClC,YAAM,IAAI,WAAW,eAAe,YAAY,MAAM,IAAI;AAC1D,UAAI,EAAG,aAAY,oBAAC,EAAE,MAAF,EAAO,MAAM,IAAI,WAAW,GAAG,YAAY,EAAE,SAAS,GAAG,eAAW,MAAC;AAAA,IAC3F,WAAW,MAAM,eAAe,KAAK,KAAK,OAAO,UAAU,YAAY,OAAO,UAAU,UAAU;AAChG,kBAAY;AAAA,IACd;AAEA,UAAM,MACJ;AAAA,MAAC,kBAAkB;AAAA,MAAlB;AAAA,QACC;AAAA,QACA,OAAO;AAAA,QACP,KAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OAAO,EAAE,QAAQ,OAAA;AAAA,QAChB,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAC,kBAAkB;AAAA,UAAlB;AAAA,YACC,WAAW,GAAG,mDAAmD,SAAS;AAAA,YAC1E,OAAO,EAAE,OAAO,GAAG,YAAY,IAAA;AAAA,UAAI;AAAA,QAAA;AAAA,MACrC;AAAA,IAAA;AAIJ,QAAI,CAAC,UAAW,QAAO;AAEvB,WACE,qBAAC,OAAA,EAAI,WAAU,kCACb,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,kBAAkB,UAAA,KAAI;AAAA,MACpC;AAAA,IAAA,GACH;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;AAInB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAC,YAAY,cAAc,gBAAgB,YAAY;AAAA,IAC3D,IAAI,CAAC,iBAAiB;AAAA,IACtB,MAAM,CAAA;AAAA,EAAC;AAEX;"}
+{"version":3,"file":"progress-bar.js","sources":["../../../src/components/ProgressBar/progress-bar.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 ProgressPrimitive from '@radix-ui/react-progress'\nimport { CircleCheck, XCircle } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\n/**\n * ProgressBar — 水平進度條(determinate)\n *\n * 世界級對照:Material `LinearProgress` / Ant `Progress` / Polaris `ProgressBar` /\n * shadcn `Progress`(皆為 Radix Progress primitive 的包裝)。本 DS 命名為\n * `ProgressBar`(linear)以和 `CircularProgress`(circular)做清楚區分。\n *\n * ── 與 CircularProgress 的分界 ──\n * CircularProgress = circular 兩態(indeterminate 旋轉 / determinate arc),inline 小空間\n * ProgressBar      = linear determinate(0-100% 已知量化),頁面級大區塊 / 表單 wizard / quota\n * 兩者視覺與語意都不同,consumer 依「形狀(linear / circular)+ 是否量化」擇一。\n *\n * ── 與 FileItem 的分界(2026-04-20 user 決策) ──\n * **檔案上傳 UI 走 `FileItem`,不直接消費 ProgressBar**。FileItem 是檔案上傳情境的\n * canonical consumer-facing primitive(檔名 / icon / 進度 / status / actions 一條龍);\n * FileItem 內部可能消費 ProgressBar(engineering 實作細節),consumer 不用也不該自己\n * 組合 raw ProgressBar + 檔名 + action 來做上傳列表。世界級對照:Ant Design 的 `Upload`\n * vs `Progress`(Upload.List 內部用 Progress,consumer 不直接用 Progress 做上傳 UI)。\n *\n * ── 3 狀態,單一 size ──\n * status: inProgress(進行中藍) / success(完成綠) / error(失敗 deep-orange,bg-error=--color-deep-orange-6)\n *   ^ 命名理由:`status` 是 lifecycle(在途 / 終態),不是視覺 emphasis 階。前身\n *   `primary` 會撞 Button `variant=\"primary\"`(emphasis 最高階),改用世界級\n *   lifecycle 慣例(Polaris `inProgress` / Ant Progress `active`)。\n *\n * **單一高度 4px**(2026-04-20 user 決策):對齊 Material 3 / Carbon / Ant 慣例\n * (固定 4dp/px 不給 size 選項)。4px 是 linear progress 的業界 canonical;若需\n * 視覺強調改用 CircularProgress + label 或改做 full-width hero 版型,不靠 size\n * 階梯撐。移除前的 sm(2)/ md(4)/ lg(6)刻度差太小,無實質視覺區分。\n *\n * ── affix(右側附加) ──\n * `affix=\"value\"` → 顯示 `{value}%` 文字\n * `affix=\"status-icon\"` → 顯示狀態 icon(success ✓ / error ✗;inProgress 時無 icon)\n * `affix={<custom />}` → consumer 客製\n * 不傳 → 純 bar\n */\n\nconst DEFAULT_TRACK_H = 4 // 預設 4px(見 docblock「單一高度」)\nconst STATUS_FILL = {\n  inProgress: 'bg-info',\n  success: 'bg-success',\n  error: 'bg-error',\n} as const\nconst STATUS_ICON = {\n  success: { Icon: CircleCheck, className: 'text-success' },\n  error:   { Icon: XCircle,     className: 'text-error' },\n} as const\n\nexport interface ProgressBarProps extends Omit<React.ComponentProps<typeof ProgressPrimitive.Root>, 'value'> {\n  /** 當前進度 0-100 */\n  value: number\n  /** 狀態色(lifecycle,非 emphasis 階) */\n  status?: 'inProgress' | 'success' | 'error'\n  /** 右側附加 */\n  affix?: 'value' | 'status-icon' | React.ReactNode\n  /**\n   * Track 高度(px)override。**預設 4**(對齊 Material / Carbon / Ant canonical)。\n   *\n   * **非公開 size 階**——這不是給 consumer 自由選擇粗細的 API,而是給**內部另一個\n   * DS 元件(FileItem)在極密集 row layout 下壓低到 2px** 的逃生艙。Consumer 端\n   * 一律走預設 4px。未來若新 primitive(例如 health-bar 型 hero progress)需要\n   * 較高的 track,再評估是否擴公開 API。\n   *\n   * 世界級對照:Ant `<Progress>` 有 `strokeWidth` 原生 prop;本 DS 只暴露給內部\n   * 元件使用,不在 public API 宣傳,避免 consumer 重新陷入「選哪個 size」的判斷負擔。\n   */\n  height?: number\n}\n\nconst ProgressBar = React.forwardRef<HTMLDivElement, ProgressBarProps>(\n  (\n    {\n      value,\n      status = 'inProgress',\n      affix,\n      height,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const clampedValue = Math.max(0, Math.min(100, value))\n    const fillColor = STATUS_FILL[status]\n    const trackH = height ?? DEFAULT_TRACK_H\n\n    // Affix 渲染\n    let affixNode: React.ReactNode = null\n    if (affix === 'value') {\n      affixNode = (\n        <span className=\"text-caption text-foreground tabular-nums shrink-0\">\n          {Math.round(clampedValue)}%\n        </span>\n      )\n    } else if (affix === 'status-icon') {\n      const s = status !== 'inProgress' ? STATUS_ICON[status] : null\n      if (s) affixNode = <s.Icon size={16} className={cn('shrink-0', s.className)} aria-hidden />\n    } else if (React.isValidElement(affix) || typeof affix === 'string' || typeof affix === 'number') {\n      affixNode = affix\n    }\n\n    const bar = (\n      <ProgressPrimitive.Root\n        ref={ref}\n        value={clampedValue}\n        max={100}\n        className={cn(\n          'relative overflow-hidden rounded-full bg-secondary w-full',\n          className,\n        )}\n        style={{ height: trackH }}\n        {...props}\n      >\n        <ProgressPrimitive.Indicator\n          className={cn('h-full rounded-full transition-all duration-300', fillColor)}\n          style={{ width: `${clampedValue}%` }}\n        />\n      </ProgressPrimitive.Root>\n    )\n\n    if (!affixNode) return bar\n\n    return (\n      <div className=\"flex items-center gap-2 w-full\">\n        <div className=\"flex-1 min-w-0\">{bar}</div>\n        {affixNode}\n      </div>\n    )\n  },\n)\nProgressBar.displayName = 'ProgressBar'\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 progressBarMeta = {\n  component: 'ProgressBar',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default'],\n  tokens: {\n    bg: ['bg-error', 'bg-info', 'bg-secondary', 'bg-success'],\n    fg: ['text-foreground'],\n    ring: [],\n  },\n} as const\n\nexport { ProgressBar }\n"],"names":[],"mappings":";;;;;AA2CA,MAAM,kBAAkB;AACxB,MAAM,cAAc;AAAA,EAClB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,OAAO;AACT;AACA,MAAM,cAAc;AAAA,EAClB,SAAS,EAAE,MAAM,aAAa,WAAW,eAAA;AAAA,EACzC,OAAS,EAAE,MAAM,SAAa,WAAW,aAAA;AAC3C;AAuBA,MAAM,cAAc,MAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,eAAe,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,CAAC;AACrD,UAAM,YAAY,YAAY,MAAM;AACpC,UAAM,SAAS,UAAU;AAGzB,QAAI,YAA6B;AACjC,QAAI,UAAU,SAAS;AACrB,kBACE,qBAAC,QAAA,EAAK,WAAU,sDACb,UAAA;AAAA,QAAA,KAAK,MAAM,YAAY;AAAA,QAAE;AAAA,MAAA,GAC5B;AAAA,IAEJ,WAAW,UAAU,eAAe;AAClC,YAAM,IAAI,WAAW,eAAe,YAAY,MAAM,IAAI;AAC1D,UAAI,EAAG,aAAY,oBAAC,EAAE,MAAF,EAAO,MAAM,IAAI,WAAW,GAAG,YAAY,EAAE,SAAS,GAAG,eAAW,MAAC;AAAA,IAC3F,WAAW,MAAM,eAAe,KAAK,KAAK,OAAO,UAAU,YAAY,OAAO,UAAU,UAAU;AAChG,kBAAY;AAAA,IACd;AAEA,UAAM,MACJ;AAAA,MAAC,kBAAkB;AAAA,MAAlB;AAAA,QACC;AAAA,QACA,OAAO;AAAA,QACP,KAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OAAO,EAAE,QAAQ,OAAA;AAAA,QAChB,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAC,kBAAkB;AAAA,UAAlB;AAAA,YACC,WAAW,GAAG,mDAAmD,SAAS;AAAA,YAC1E,OAAO,EAAE,OAAO,GAAG,YAAY,IAAA;AAAA,UAAI;AAAA,QAAA;AAAA,MACrC;AAAA,IAAA;AAIJ,QAAI,CAAC,UAAW,QAAO;AAEvB,WACE,qBAAC,OAAA,EAAI,WAAU,kCACb,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,kBAAkB,UAAA,KAAI;AAAA,MACpC;AAAA,IAAA,GACH;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;AAInB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAC,YAAY,WAAW,gBAAgB,YAAY;AAAA,IACxD,IAAI,CAAC,iBAAiB;AAAA,IACtB,MAAM,CAAA;AAAA,EAAC;AAEX;"}

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

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

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

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

package/dist/components/RadioGroup/index.js

@@ -0,0 +1,8 @@
+import { RadioGroup, RadioGroupItem, radioGroupMeta, radioItemVariants } from "./radio-group.js";
+export {
+  RadioGroup,
+  RadioGroupItem,
+  radioGroupMeta,
+  radioItemVariants
+};
+//# sourceMappingURL=index.js.map

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

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

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

@@ -2,14 +2,16 @@ import * as React from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { type VariantProps } from "class-variance-authority";
 import type { FieldMode, FieldVariant } from "../../components/Field/field-types";
+import type { LucideIcon } from "lucide-react";
+import type { AvatarData } from "../../components/Avatar/avatar";
 export interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
     /**
      * Field mode(2026-05-05 Phase B3 align):
      *   edit     — 一般可互動 RadioGroup(預設)
-     *   display  — **純展示**:不渲染 Radix Root / 任何 radio 視覺,僅 child item 中
-     *              value === group.value 那筆把 label 渲染為純文字 span;其他 item render null。
+     *   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;
@@ -37,6 +39,10 @@ export interface RadioGroupItemProps extends RadioItemPrimitiveProps, VariantPro
      * 套用 text-body / text-fg-secondary 樣式。
      */
     description?: React.ReactNode;
+    /** 可選左側 icon(label 前)— 2026-06-12 M30 修:轉發 SelectionItem 既有 canonical 槽(selection-item.tsx jsDoc SSOT;與 avatar 互斥)*/
+    icon?: LucideIcon;
+    /** 可選左側 avatar(label 前)— 同上 */
+    avatar?: AvatarData;
     /**
      * readonly 模式：鎖定互動但維持 checked/unchecked 視覺正確。
      * 通常整個 RadioGroup 一起設 readonly（由 parent RadioGroup 的 disabled
@@ -47,23 +53,23 @@ export interface RadioGroupItemProps extends RadioItemPrimitiveProps, VariantPro
 declare const RadioGroupItem: React.ForwardRefExoticComponent<RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>>;
 export declare const radioGroupMeta: {
     readonly component: "RadioGroup";
-    readonly family: 4;
+    readonly family: null;
     readonly variants: {};
     readonly sizes: {
         readonly sm: {
             readonly fieldHeight: 28;
-            readonly iconSize: 16;
+            readonly iconSize: 8;
             readonly typography: "body";
         };
         readonly md: {
             readonly fieldHeight: 32;
-            readonly iconSize: 16;
+            readonly iconSize: 8;
             readonly typography: "body";
         };
         readonly lg: {
-            readonly fieldHeight: 40;
-            readonly iconSize: 20;
-            readonly typography: "body";
+            readonly fieldHeight: 36;
+            readonly iconSize: 10;
+            readonly typography: "body-lg";
         };
     };
     readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];

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;AAoB3F,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;AAED,QAAA,MAAM,UAAU,wFAyCd,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;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAID,QAAA,MAAM,cAAc,+FA6EnB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqBjB,CAAA;AAEV,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,iBAAiB,EAAE,CAAA"}