npm - @qijenchen/design-system - Versions diffs - 0.1.0-beta.54 → 0.1.0-beta.56 - Mend

@qijenchen/design-system 0.1.0-beta.54 → 0.1.0-beta.56

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (335) hide show

package/CLAUDE.md CHANGED Viewed

@@ -176,6 +176,7 @@ CLAUDE.md target ≤ 200(Anthropic best-practice)/ transition ≤ 400 / hard cap
 | 清 unused imports 後 runtime | tsc 不充分,需 storybook |
 | 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「cannot be named」;改 export/型別 surface 的 deploy-safety 必跑 `npm run build:lib`(= Netlify build:dts emit .d.ts),tsc -b 全綠會騙過(2026-06-05 Badge union 連掛 3 Netlify build)|
 新 bug → 歸 Meta-Pattern OR 本表 1 行;> 10 條 = 漏寫,**評估 meta-merge 既有 M-rule 而非無腦新增**(meta-patterns velocity ≤ 3/quarter,單 M-rule 必吸收 ≥ 3 prior bugs)。

package/dist/components/AppShell/app-shell.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/app-shell.tsx"],"names":[],"mappings":"AACA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;~~AAc9B~~,KAAK,cAAc,GAAG,iBAAiB,GAAG,gBAAgB,CAAA;AAE1D,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,6FAA6F;IAC7F,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,sDAAsD;IACtD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,mDAAmD;IACnD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3C,iDAAiD;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,MAAM,WAAW,kBAAkB;IACjC,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAA;IACb,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,GAAG;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC7C,uBAAuB;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAID,UAAU,oBAAoB;IAC5B,MAAM,EAAE,cAAc,CAAA;IACtB,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,QAAQ,EAAE,OAAO,CAAA;CAClB;AAID,iBAAS,WAAW,IAAI,oBAAoB,CAI3C;AA+DD,QAAA,MAAM,QAAQ,sFAgIb,CAAA;AAKD;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,aAAa,~~wFAgElB~~,CAAA;AAQD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,WAAW,EAAE,CAAA"}
1	+ {"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/app-shell.tsx"],"names":[],"mappings":"AACA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAe9B,KAAK,cAAc,GAAG,iBAAiB,GAAG,gBAAgB,CAAA;AAE1D,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,6FAA6F;IAC7F,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,sDAAsD;IACtD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,mDAAmD;IACnD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3C,iDAAiD;IACjD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,MAAM,WAAW,kBAAkB;IACjC,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAA;IACb,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,GAAG;QAAE,EAAE,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAC7C,uBAAuB;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAID,UAAU,oBAAoB;IAC5B,MAAM,EAAE,cAAc,CAAA;IACtB,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,QAAQ,EAAE,OAAO,CAAA;CAClB;AAID,iBAAS,WAAW,IAAI,oBAAoB,CAI3C;AA+DD,QAAA,MAAM,QAAQ,sFAgIb,CAAA;AAKD;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,aAAa,wFAoElB,CAAA;AAQD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/AppShell/app-shell.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { X } from "lucide-react";
-import { Sheet, SheetContent } from "../Sheet/sheet.js";
+import { Sheet, SheetContent, SheetTitle } from "../Sheet/sheet.js";
 import { Button } from "../Button/button.js";
 import { ScrollArea } from "../ScrollArea/scroll-area.js";
 import { ChromeHeader } from "../../patterns/header-canonical/chrome-header.js";
@@ -160,9 +160,9 @@ const AppShellAside = React.forwardRef(
     const { asideOpen, setAsideOpen, isMobile } = useAppShell();
     const isXl = useIsXl();
     const resolvedWidth = resolveAsideWidth(width, isXl);
-    const frame = /* @__PURE__ */ jsxs(Fragment, { children: [
+    const renderFrame = (titleNode) => /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(ChromeHeader, { children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-body-lg font-medium flex-1 truncate", children: title }),
+        titleNode,
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -184,7 +184,7 @@ const AppShellAside = React.forwardRef(
           side: "right",
           className: "w-[min(90vw,var(--app-shell-aside-modal-width))] flex flex-col p-0 [&>button]:hidden",
           style: { ["--app-shell-aside-modal-width"]: `${resolvedWidth}px` },
-          children: frame
+          children: renderFrame(/* @__PURE__ */ jsx(SheetTitle, { className: "flex-1", children: title }))
         }
       ) });
     }
@@ -200,7 +200,7 @@ const AppShellAside = React.forwardRef(
           className
         ),
         style: { width: resolvedWidth },
-        children: frame
+        children: renderFrame(/* @__PURE__ */ jsx("h2", { className: "text-body-lg font-medium flex-1 truncate", children: title }))
       }
     );
   }

package/dist/components/AppShell/app-shell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"app-shell.js","sources":["../../../src/components/AppShell/app-shell.tsx"],"sourcesContent":["// @benchmark-cited: 2026-05-19 — Mantine AppShell / Ant Layout / Material 3 Drawer / Atlassian Navigation System cite in app-shell.spec.md frontmatter.\n/*\n AppShell — web service page-level layout primitive。\n \n 組合 Sidebar + ChromeHeader + Aside + main 成完整 page shell。SSOT 邊界:本 pattern only\n * own slot composition + layout mode + Aside responsive mode;不 own sidebar / header /\n * sheet 視覺(各自 spec own)。\n \n 對齊 Mantine AppShell compound API + Ant Layout slot 模式 + Material 3 standard/modal\n * drawer canonical(per spec.md frontmatter cite)。\n \n Spec SSOT:`patterns/app-shell/app-shell.spec.md`\n /\n\nimport as React from 'react'\nimport { X as XIcon } from 'lucide-react'\nimport {\n Sheet,\n SheetContent,\n} from '@/design-system/components/Sheet/sheet'\nimport { Button } from '@/design-system/components/Button/button'\nimport { ScrollArea } from '@/design-system/components/ScrollArea/scroll-area'\nimport { ChromeHeader } from '@/design-system/patterns/header-canonical/chrome-header'\nimport { useIsNarrowViewport } from '@/design-system/hooks/use-is-narrow-viewport'\nimport { cn } from '@/lib/utils'\n\n// ── Types ────────────────────────────────────────────────────────────────────\n\ntype AppShellLayout = 'primary-sidebar' \| 'primary-header'\n\nexport interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {\n /** primary-sidebar (Linear/Notion 派) \| primary-header (GitHub/Slack 派);預設 primary-sidebar /\n layout?: AppShellLayout\n /* Sidebar 元素(必傳 Sidebar primitive,per Consumer 紀律)/\n sidebar?: React.ReactNode\n /\n Local page header(永遠 render 在 main column 頂部,當前頁 actions / breadcrumb / page-level filter)。\n * 兩 layout mode 都會 render 此 slot — `primary-header` mode 多了 globalHeader 在上方,\n * 不取代 local header(per 2026-05-20 user clarification「primary-header = primary-sidebar + 一條 global header」)。\n /\n header?: React.ReactNode\n /\n Global header(僅 `primary-header` mode render)。橫跨整 viewport 的頂部 bar:\n * account avatar / workspace switcher / global search / notifications。\n * 對齊 GitHub top nav / Slack workspace bar / Gmail logo bar 慣例。\n * `primary-sidebar` mode 傳此 prop 會被忽略。\n /\n globalHeader?: React.ReactNode\n /* Aside 元素(`<AppShellAside>` sub-component);可選 /\n aside?: React.ReactNode\n /* Aside open state(modal mode 必須)/\n asideOpen?: boolean\n onAsideOpenChange?: (open: boolean) => void\n /* Main content;`<main>` landmark + padding=0 /\n children: React.ReactNode\n}\n\nexport interface AppShellAsideProps {\n /* Required:modal mode 走 Sheet → aria-labelledby 強制,per sheet.spec.md:98 /\n title: string\n /* Width(number 或 breakpoint-keyed object);clamp min:240 max:640 /\n width?: number \| { md?: number; xl?: number }\n /* Children content /\n children: React.ReactNode\n className?: string\n}\n\n// ── Context ──────────────────────────────────────────────────────────────────\n\ninterface AppShellContextValue {\n layout: AppShellLayout\n asideOpen: boolean\n setAsideOpen: (open: boolean) => void\n isMobile: boolean\n}\n\nconst AppShellContext = React.createContext<AppShellContextValue \| null>(null)\n\nfunction useAppShell(): AppShellContextValue {\n const ctx = React.useContext(AppShellContext)\n if (!ctx) throw new Error('AppShellAside must be used within <AppShell>')\n return ctx\n}\n\n// Mobile breakpoint:消費既有 `useIsNarrowViewport`(`hooks/use-is-narrow-viewport.ts` SSOT,\n// 768px,跟 Sidebar SSOT 同源)— 不發明 local hook,per codex Layer B D2/D4 verdict 避 drift。\n\n// xl breakpoint(對齊 Tailwind v4 xl = 1280px,DS-wide consensus)\nconst XL_BREAKPOINT_PX = 1280\n\nfunction useIsXl(): boolean {\n const [isXl, setIsXl] = React.useState<boolean>(() => {\n if (typeof window === 'undefined') return false\n return window.matchMedia(`(min-width: ${XL_BREAKPOINT_PX}px)`).matches\n })\n\n React.useEffect(() => {\n const mq = window.matchMedia(`(min-width: ${XL_BREAKPOINT_PX}px)`)\n const handler = (e: MediaQueryListEvent) => setIsXl(e.matches)\n mq.addEventListener('change', handler)\n return () => mq.removeEventListener('change', handler)\n }, [])\n\n return isXl\n}\n\n// ── Width resolve(consumer 自傳 + clamp 240-640)──────────────────────────────\n\nconst ASIDE_WIDTH_MIN = 240\nconst ASIDE_WIDTH_MAX = 640\nconst ASIDE_WIDTH_DEFAULT = 320\n\nfunction resolveAsideWidth(width: AppShellAsideProps['width'], isXl: boolean): number {\n if (typeof width === 'number') {\n return Math.max(ASIDE_WIDTH_MIN, Math.min(ASIDE_WIDTH_MAX, width))\n }\n if (width && typeof width === 'object') {\n // breakpoint-keyed:xl viewport(≥1280px)用 xl,否則 md\n const v = (isXl ? width.xl ?? width.md : width.md) ?? ASIDE_WIDTH_DEFAULT\n return Math.max(ASIDE_WIDTH_MIN, Math.min(ASIDE_WIDTH_MAX, v))\n }\n return ASIDE_WIDTH_DEFAULT\n}\n\n// ── Skip-to-main link(a11y WCAG 2.4.1)───────────────────────────────────────\n\nfunction SkipToMain() {\n return (\n <a\n href=\"#app-shell-main\"\n className={cn(\n 'sr-only focus:not-sr-only',\n 'focus:fixed focus:top-2 focus:left-2 focus:z-50',\n 'focus:px-3 focus:py-2 focus:rounded-md',\n 'focus:bg-surface focus:text-foreground focus:shadow-[var(--elevation-200)]',\n 'focus:outline-none focus:ring-2 focus:ring-primary'\n )}\n >\n Skip to main content\n </a>\n )\n}\n\n// ── AppShell root ────────────────────────────────────────────────────────────\n\nconst AppShell = React.forwardRef<HTMLDivElement, AppShellProps>(\n (\n {\n layout = 'primary-sidebar',\n sidebar,\n header,\n globalHeader,\n aside,\n asideOpen: asideOpenProp,\n onAsideOpenChange,\n children,\n className,\n ...props\n },\n ref\n ) => {\n const [asideOpenInternal, setAsideOpenInternal] = React.useState(false)\n const isControlled = asideOpenProp !== undefined\n const asideOpen = isControlled ? asideOpenProp : asideOpenInternal\n\n const setAsideOpen = React.useCallback(\n (open: boolean) => {\n if (!isControlled) setAsideOpenInternal(open)\n onAsideOpenChange?.(open)\n },\n [isControlled, onAsideOpenChange]\n )\n\n const isMobile = useIsNarrowViewport()\n\n // ── Keyboard: cmd+. toggle aside ──\n // ⌘B sidebar toggle by Sidebar SSOT(本 component 不重覆 register)\n React.useEffect(() => {\n const onKey = (e: KeyboardEvent) => {\n if (e.key === '.' && (e.metaKey \|\| e.ctrlKey)) {\n e.preventDefault()\n setAsideOpen(!asideOpen)\n }\n }\n window.addEventListener('keydown', onKey)\n return () => window.removeEventListener('keydown', onKey)\n }, [asideOpen, setAsideOpen])\n\n const ctxValue = React.useMemo<AppShellContextValue>(\n () => ({ layout, asideOpen, setAsideOpen, isMobile }),\n [layout, asideOpen, setAsideOpen, isMobile]\n )\n\n // ── Layout grid(2 mode)──\n // primary-sidebar:\n // row1: [sidebar (頂天)][main col (header + main)][aside (頂天)]\n // primary-header:\n // row1: [header (橫跨整 viewport, banner role)]\n // row2: [sidebar][main][aside]\n\n // AppShellAside 自決 inline vs modal mode(via AppShellContext.isMobile)。\n // AppShell 一律只 render `{aside}` 一次,AppShellAside 內部根據 isMobile 決定 render 形式。\n\n if (layout === 'primary-header') {\n // primary-header layout(2026-05-21 v2 — user clarification「primary-header = primary-sidebar + 一條 global header」):\n // 結構:row1 globalHeader(全寬 global bar)/ row2 [sidebar][main col: localHeader + main][aside]\n // - globalHeader = 跨頁 account / workspace switcher / notifications(對齊 GitHub top nav / Slack workspace bar)\n // - header = local page header,仍存在(per page actions / breadcrumb,對齊 GitHub repo header / Slack channel header / Gmail email-list toolbar 2-layer 慣例)\n // Consumer 必傳 `<Sidebar viewportInsetTop=\"var(--chrome-header-height)\">` 讓 sidebar 從 globalHeader 下方起算。\n return (\n <AppShellContext.Provider value={ctxValue}>\n <div\n ref={ref}\n className={cn('flex h-svh w-full flex-col overflow-hidden bg-canvas', className)}\n {...props}\n >\n <SkipToMain />\n {/ Row 1:Global header(account / workspace switcher / notifications,橫跨整 viewport)/}\n {globalHeader && <div className=\"flex-shrink-0\">{globalHeader}</div>}\n {/ Row 2:[sidebar][main col][aside]horizontal row /}\n <div className=\"flex flex-1 min-h-0 w-full\">\n {sidebar}\n {/ Main column:local header + main content(per user model「primary-header = primary-sidebar + global header」)/}\n <div className=\"flex flex-col flex-1 min-w-0 min-h-0 overflow-hidden\">\n {header && <div className=\"flex-shrink-0\">{header}</div>}\n <main\n id=\"app-shell-main\"\n tabIndex={-1}\n className=\"flex-1 min-w-0 min-h-0 overflow-y-auto focus:outline-none\"\n >\n {children}\n </main>\n </div>\n {aside}\n </div>\n </div>\n </AppShellContext.Provider>\n )\n }\n\n // primary-sidebar layout\n return (\n <AppShellContext.Provider value={ctxValue}>\n <div\n ref={ref}\n className={cn('flex h-svh w-full overflow-hidden bg-canvas', className)}\n {...props}\n >\n <SkipToMain />\n {/ Sidebar — 頂天 /}\n {sidebar}\n {/ Main column(header + main 垂直堆)/}\n <div className=\"flex flex-col flex-1 min-w-0 min-h-0 overflow-hidden\">\n {header && (\n // Header 在 main column 內(main col sibling,非 main descendant)→ 跟 W3C ARIA in HTML\n // banner rule 對照:`<header>` 在 main descendant 才不是 banner,本 ChromeHeader 是 <div>\n // 所以本來就不會被 banner role 計算。仍包 wrap div not <header> 確保不無意觸發 banner。\n <div className=\"flex-shrink-0\">{header}</div>\n )}\n <main\n id=\"app-shell-main\"\n tabIndex={-1}\n className=\"flex-1 min-h-0 overflow-y-auto focus:outline-none\"\n >\n {children}\n </main>\n </div>\n {/ Aside slot — desktop inline OR mobile Sheet,內部自決 /}\n {aside}\n </div>\n </AppShellContext.Provider>\n )\n }\n)\nAppShell.displayName = 'AppShell'\n\n// ── AppShellAside sub-component ──────────────────────────────────────────────\n\n/\n AppShellAside — right panel:standard inline(desktop) vs modal overlay(mobile)。\n \n Desktop(viewport ≥ 768px):\n * - Render 直接放 layout grid 右側(asideOpen=true 才 mount,close hide via parent)\n * - 不蓋 mask / background 可操作 / 佔 layout 寬\n * - Vertical extent:primary-sidebar → 頂天立地 / primary-header → header 下方\n \n Mobile(viewport < 768px):\n * - Render 走 Sheet primitive(side=\"right\",per sheet.spec.md)\n * - Mask 蓋 / background 不可操作 / 不佔 layout 寬\n * - title 強制(aria-labelledby per sheet.spec.md:98)\n */\nconst AppShellAside = React.forwardRef<HTMLElement, AppShellAsideProps>(\n ({ title, width, children, className }, ref) => {\n const { asideOpen, setAsideOpen, isMobile } = useAppShell()\n const isXl = useIsXl()\n const resolvedWidth = resolveAsideWidth(width, isXl)\n\n // Shared frame:always-on header(title + close X)+ body(ScrollArea + layoutSpace 規則 1B 父層 padding)\n // 對齊 codex Layer B 2026-05-20「container mode 可變,panel role/content 不該變」+ Notion/Figma right\n // panel 共識(modal vs inline 結構相同,host wrapper 不同)。\n // 2026-05-20 migrate 消費 ChromeHeader primitive(撤回自刻 + 撤回 bg-surface 疊加 — 對齊\n // `header-canonical.spec.md`「6. Background ownership」段「Nested chrome header 透明繼承\n // parent」:aside container 自身已 bg-surface,內 header 不該再畫 bg 避免疊加 drift)。\n const frame = (\n <>\n <ChromeHeader>\n <h2 className=\"text-body-lg font-medium flex-1 truncate\">{title}</h2>\n <Button\n iconOnly\n dismiss\n size=\"sm\"\n startIcon={XIcon}\n aria-label=\"關閉\"\n onClick={() => setAsideOpen(false)}\n />\n </ChromeHeader>\n <ScrollArea className=\"flex-1 min-h-0\">\n {children}\n </ScrollArea>\n </>\n )\n\n // Modal mode(mobile)— Sheet from right\n if (isMobile) {\n return (\n <Sheet open={asideOpen} onOpenChange={setAsideOpen}>\n <SheetContent\n side=\"right\"\n className=\"w-[min(90vw,var(--app-shell-aside-modal-width))] flex flex-col p-0 [&>button]:hidden\"\n style={{ ['--app-shell-aside-modal-width' as string]: `${resolvedWidth}px` }}\n >\n {frame}\n </SheetContent>\n </Sheet>\n )\n }\n\n // Standard inline mode(desktop)\n if (!asideOpen) return null\n\n return (\n <aside\n ref={ref}\n aria-label={title}\n className={cn(\n 'flex flex-col h-full min-h-0 overflow-hidden',\n 'bg-surface border-l border-divider',\n className\n )}\n style={{ width: resolvedWidth }}\n >\n {frame}\n </aside>\n )\n }\n)\nAppShellAside.displayName = 'AppShellAside'\n\n// ── Exports ──────────────────────────────────────────────────────────────────\n\n// code-quality-allow: dead-export useAppShell — public compound API hook(consumer 可自拼 custom aside layout,\n// 對齊 Radix `useDialogContext` / MUI `useFormControl` 慣例)。內部 AppShellAside 已消費(L294),\n// audit script 抓「無 cross-file import」是 false positive(2026-05-21 D2 codify)。\nexport { AppShell, AppShellAside, useAppShell }\n"],"names":["XIcon"],"mappings":"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"}
1	+ {"version":3,"file":"app-shell.js","sources":["../../../src/components/AppShell/app-shell.tsx"],"sourcesContent":["// @benchmark-cited: 2026-05-19 — Mantine AppShell / Ant Layout / Material 3 Drawer / Atlassian Navigation System cite in app-shell.spec.md frontmatter.\n/*\n AppShell — web service page-level layout primitive。\n \n 組合 Sidebar + ChromeHeader + Aside + main 成完整 page shell。SSOT 邊界:本 pattern only\n * own slot composition + layout mode + Aside responsive mode;不 own sidebar / header /\n * sheet 視覺(各自 spec own)。\n \n 對齊 Mantine AppShell compound API + Ant Layout slot 模式 + Material 3 standard/modal\n * drawer canonical(per spec.md frontmatter cite)。\n \n Spec SSOT:`patterns/app-shell/app-shell.spec.md`\n /\n\nimport as React from 'react'\nimport { X as XIcon } from 'lucide-react'\nimport {\n Sheet,\n SheetContent,\n SheetTitle,\n} from '@/design-system/components/Sheet/sheet'\nimport { Button } from '@/design-system/components/Button/button'\nimport { ScrollArea } from '@/design-system/components/ScrollArea/scroll-area'\nimport { ChromeHeader } from '@/design-system/patterns/header-canonical/chrome-header'\nimport { useIsNarrowViewport } from '@/design-system/hooks/use-is-narrow-viewport'\nimport { cn } from '@/lib/utils'\n\n// ── Types ────────────────────────────────────────────────────────────────────\n\ntype AppShellLayout = 'primary-sidebar' \| 'primary-header'\n\nexport interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {\n /** primary-sidebar (Linear/Notion 派) \| primary-header (GitHub/Slack 派);預設 primary-sidebar /\n layout?: AppShellLayout\n /* Sidebar 元素(必傳 Sidebar primitive,per Consumer 紀律)/\n sidebar?: React.ReactNode\n /\n Local page header(永遠 render 在 main column 頂部,當前頁 actions / breadcrumb / page-level filter)。\n * 兩 layout mode 都會 render 此 slot — `primary-header` mode 多了 globalHeader 在上方,\n * 不取代 local header(per 2026-05-20 user clarification「primary-header = primary-sidebar + 一條 global header」)。\n /\n header?: React.ReactNode\n /\n Global header(僅 `primary-header` mode render)。橫跨整 viewport 的頂部 bar:\n * account avatar / workspace switcher / global search / notifications。\n * 對齊 GitHub top nav / Slack workspace bar / Gmail logo bar 慣例。\n * `primary-sidebar` mode 傳此 prop 會被忽略。\n /\n globalHeader?: React.ReactNode\n /* Aside 元素(`<AppShellAside>` sub-component);可選 /\n aside?: React.ReactNode\n /* Aside open state(modal mode 必須)/\n asideOpen?: boolean\n onAsideOpenChange?: (open: boolean) => void\n /* Main content;`<main>` landmark + padding=0 /\n children: React.ReactNode\n}\n\nexport interface AppShellAsideProps {\n /* Required:modal mode 走 Sheet → aria-labelledby 強制,per sheet.spec.md:98 /\n title: string\n /* Width(number 或 breakpoint-keyed object);clamp min:240 max:640 /\n width?: number \| { md?: number; xl?: number }\n /* Children content /\n children: React.ReactNode\n className?: string\n}\n\n// ── Context ──────────────────────────────────────────────────────────────────\n\ninterface AppShellContextValue {\n layout: AppShellLayout\n asideOpen: boolean\n setAsideOpen: (open: boolean) => void\n isMobile: boolean\n}\n\nconst AppShellContext = React.createContext<AppShellContextValue \| null>(null)\n\nfunction useAppShell(): AppShellContextValue {\n const ctx = React.useContext(AppShellContext)\n if (!ctx) throw new Error('AppShellAside must be used within <AppShell>')\n return ctx\n}\n\n// Mobile breakpoint:消費既有 `useIsNarrowViewport`(`hooks/use-is-narrow-viewport.ts` SSOT,\n// 768px,跟 Sidebar SSOT 同源)— 不發明 local hook,per codex Layer B D2/D4 verdict 避 drift。\n\n// xl breakpoint(對齊 Tailwind v4 xl = 1280px,DS-wide consensus)\nconst XL_BREAKPOINT_PX = 1280\n\nfunction useIsXl(): boolean {\n const [isXl, setIsXl] = React.useState<boolean>(() => {\n if (typeof window === 'undefined') return false\n return window.matchMedia(`(min-width: ${XL_BREAKPOINT_PX}px)`).matches\n })\n\n React.useEffect(() => {\n const mq = window.matchMedia(`(min-width: ${XL_BREAKPOINT_PX}px)`)\n const handler = (e: MediaQueryListEvent) => setIsXl(e.matches)\n mq.addEventListener('change', handler)\n return () => mq.removeEventListener('change', handler)\n }, [])\n\n return isXl\n}\n\n// ── Width resolve(consumer 自傳 + clamp 240-640)──────────────────────────────\n\nconst ASIDE_WIDTH_MIN = 240\nconst ASIDE_WIDTH_MAX = 640\nconst ASIDE_WIDTH_DEFAULT = 320\n\nfunction resolveAsideWidth(width: AppShellAsideProps['width'], isXl: boolean): number {\n if (typeof width === 'number') {\n return Math.max(ASIDE_WIDTH_MIN, Math.min(ASIDE_WIDTH_MAX, width))\n }\n if (width && typeof width === 'object') {\n // breakpoint-keyed:xl viewport(≥1280px)用 xl,否則 md\n const v = (isXl ? width.xl ?? width.md : width.md) ?? ASIDE_WIDTH_DEFAULT\n return Math.max(ASIDE_WIDTH_MIN, Math.min(ASIDE_WIDTH_MAX, v))\n }\n return ASIDE_WIDTH_DEFAULT\n}\n\n// ── Skip-to-main link(a11y WCAG 2.4.1)───────────────────────────────────────\n\nfunction SkipToMain() {\n return (\n <a\n href=\"#app-shell-main\"\n className={cn(\n 'sr-only focus:not-sr-only',\n 'focus:fixed focus:top-2 focus:left-2 focus:z-50',\n 'focus:px-3 focus:py-2 focus:rounded-md',\n 'focus:bg-surface focus:text-foreground focus:shadow-[var(--elevation-200)]',\n 'focus:outline-none focus:ring-2 focus:ring-primary'\n )}\n >\n Skip to main content\n </a>\n )\n}\n\n// ── AppShell root ────────────────────────────────────────────────────────────\n\nconst AppShell = React.forwardRef<HTMLDivElement, AppShellProps>(\n (\n {\n layout = 'primary-sidebar',\n sidebar,\n header,\n globalHeader,\n aside,\n asideOpen: asideOpenProp,\n onAsideOpenChange,\n children,\n className,\n ...props\n },\n ref\n ) => {\n const [asideOpenInternal, setAsideOpenInternal] = React.useState(false)\n const isControlled = asideOpenProp !== undefined\n const asideOpen = isControlled ? asideOpenProp : asideOpenInternal\n\n const setAsideOpen = React.useCallback(\n (open: boolean) => {\n if (!isControlled) setAsideOpenInternal(open)\n onAsideOpenChange?.(open)\n },\n [isControlled, onAsideOpenChange]\n )\n\n const isMobile = useIsNarrowViewport()\n\n // ── Keyboard: cmd+. toggle aside ──\n // ⌘B sidebar toggle by Sidebar SSOT(本 component 不重覆 register)\n React.useEffect(() => {\n const onKey = (e: KeyboardEvent) => {\n if (e.key === '.' && (e.metaKey \|\| e.ctrlKey)) {\n e.preventDefault()\n setAsideOpen(!asideOpen)\n }\n }\n window.addEventListener('keydown', onKey)\n return () => window.removeEventListener('keydown', onKey)\n }, [asideOpen, setAsideOpen])\n\n const ctxValue = React.useMemo<AppShellContextValue>(\n () => ({ layout, asideOpen, setAsideOpen, isMobile }),\n [layout, asideOpen, setAsideOpen, isMobile]\n )\n\n // ── Layout grid(2 mode)──\n // primary-sidebar:\n // row1: [sidebar (頂天)][main col (header + main)][aside (頂天)]\n // primary-header:\n // row1: [header (橫跨整 viewport, banner role)]\n // row2: [sidebar][main][aside]\n\n // AppShellAside 自決 inline vs modal mode(via AppShellContext.isMobile)。\n // AppShell 一律只 render `{aside}` 一次,AppShellAside 內部根據 isMobile 決定 render 形式。\n\n if (layout === 'primary-header') {\n // primary-header layout(2026-05-21 v2 — user clarification「primary-header = primary-sidebar + 一條 global header」):\n // 結構:row1 globalHeader(全寬 global bar)/ row2 [sidebar][main col: localHeader + main][aside]\n // - globalHeader = 跨頁 account / workspace switcher / notifications(對齊 GitHub top nav / Slack workspace bar)\n // - header = local page header,仍存在(per page actions / breadcrumb,對齊 GitHub repo header / Slack channel header / Gmail email-list toolbar 2-layer 慣例)\n // Consumer 必傳 `<Sidebar viewportInsetTop=\"var(--chrome-header-height)\">` 讓 sidebar 從 globalHeader 下方起算。\n return (\n <AppShellContext.Provider value={ctxValue}>\n <div\n ref={ref}\n className={cn('flex h-svh w-full flex-col overflow-hidden bg-canvas', className)}\n {...props}\n >\n <SkipToMain />\n {/ Row 1:Global header(account / workspace switcher / notifications,橫跨整 viewport)/}\n {globalHeader && <div className=\"flex-shrink-0\">{globalHeader}</div>}\n {/ Row 2:[sidebar][main col][aside]horizontal row /}\n <div className=\"flex flex-1 min-h-0 w-full\">\n {sidebar}\n {/ Main column:local header + main content(per user model「primary-header = primary-sidebar + global header」)/}\n <div className=\"flex flex-col flex-1 min-w-0 min-h-0 overflow-hidden\">\n {header && <div className=\"flex-shrink-0\">{header}</div>}\n <main\n id=\"app-shell-main\"\n tabIndex={-1}\n className=\"flex-1 min-w-0 min-h-0 overflow-y-auto focus:outline-none\"\n >\n {children}\n </main>\n </div>\n {aside}\n </div>\n </div>\n </AppShellContext.Provider>\n )\n }\n\n // primary-sidebar layout\n return (\n <AppShellContext.Provider value={ctxValue}>\n <div\n ref={ref}\n className={cn('flex h-svh w-full overflow-hidden bg-canvas', className)}\n {...props}\n >\n <SkipToMain />\n {/ Sidebar — 頂天 /}\n {sidebar}\n {/ Main column(header + main 垂直堆)/}\n <div className=\"flex flex-col flex-1 min-w-0 min-h-0 overflow-hidden\">\n {header && (\n // Header 在 main column 內(main col sibling,非 main descendant)→ 跟 W3C ARIA in HTML\n // banner rule 對照:`<header>` 在 main descendant 才不是 banner,本 ChromeHeader 是 <div>\n // 所以本來就不會被 banner role 計算。仍包 wrap div not <header> 確保不無意觸發 banner。\n <div className=\"flex-shrink-0\">{header}</div>\n )}\n <main\n id=\"app-shell-main\"\n tabIndex={-1}\n className=\"flex-1 min-h-0 overflow-y-auto focus:outline-none\"\n >\n {children}\n </main>\n </div>\n {/ Aside slot — desktop inline OR mobile Sheet,內部自決 /}\n {aside}\n </div>\n </AppShellContext.Provider>\n )\n }\n)\nAppShell.displayName = 'AppShell'\n\n// ── AppShellAside sub-component ──────────────────────────────────────────────\n\n/\n AppShellAside — right panel:standard inline(desktop) vs modal overlay(mobile)。\n \n Desktop(viewport ≥ 768px):\n * - Render 直接放 layout grid 右側(asideOpen=true 才 mount,close hide via parent)\n * - 不蓋 mask / background 可操作 / 佔 layout 寬\n * - Vertical extent:primary-sidebar → 頂天立地 / primary-header → header 下方\n \n Mobile(viewport < 768px):\n * - Render 走 Sheet primitive(side=\"right\",per sheet.spec.md)\n * - Mask 蓋 / background 不可操作 / 不佔 layout 寬\n * - title 強制(aria-labelledby per sheet.spec.md:98)\n */\nconst AppShellAside = React.forwardRef<HTMLElement, AppShellAsideProps>(\n ({ title, width, children, className }, ref) => {\n const { asideOpen, setAsideOpen, isMobile } = useAppShell()\n const isXl = useIsXl()\n const resolvedWidth = resolveAsideWidth(width, isXl)\n\n // Shared frame:always-on header(title + close X)+ body(ScrollArea + layoutSpace 規則 1B 父層 padding)\n // 對齊 codex Layer B 2026-05-20「container mode 可變,panel role/content 不該變」+ Notion/Figma right\n // panel 共識(modal vs inline 結構相同,host wrapper 不同)。\n // 2026-05-20 migrate 消費 ChromeHeader primitive(撤回自刻 + 撤回 bg-surface 疊加 — 對齊\n // `header-canonical.spec.md`「6. Background ownership」段「Nested chrome header 透明繼承\n // parent」:aside container 自身已 bg-surface,內 header 不該再畫 bg 避免疊加 drift)。\n // titleNode 依 mode 不同:modal(Sheet)用 SheetTitle 綁 Radix Dialog titleId — 否則\n // SheetContent 的 aria-labelledby 指向不存在的 id → SR 念「unnamed dialog」+ Radix\n // TitleWarning console.error(違 sheet.spec.md:98「Sheet content 必有可見 title」)。\n // inline(aside)用純 <h2>:aside 自身已 aria-label={title},且無 Dialog context 不可用 SheetTitle。\n const renderFrame = (titleNode: React.ReactNode) => (\n <>\n <ChromeHeader>\n {titleNode}\n <Button\n iconOnly\n dismiss\n size=\"sm\"\n startIcon={XIcon}\n aria-label=\"關閉\"\n onClick={() => setAsideOpen(false)}\n />\n </ChromeHeader>\n <ScrollArea className=\"flex-1 min-h-0\">\n {children}\n </ScrollArea>\n </>\n )\n\n // Modal mode(mobile)— Sheet from right\n if (isMobile) {\n return (\n <Sheet open={asideOpen} onOpenChange={setAsideOpen}>\n <SheetContent\n side=\"right\"\n className=\"w-[min(90vw,var(--app-shell-aside-modal-width))] flex flex-col p-0 [&>button]:hidden\"\n style={{ ['--app-shell-aside-modal-width' as string]: `${resolvedWidth}px` }}\n >\n {renderFrame(<SheetTitle className=\"flex-1\">{title}</SheetTitle>)}\n </SheetContent>\n </Sheet>\n )\n }\n\n // Standard inline mode(desktop)\n if (!asideOpen) return null\n\n return (\n <aside\n ref={ref}\n aria-label={title}\n className={cn(\n 'flex flex-col h-full min-h-0 overflow-hidden',\n 'bg-surface border-l border-divider',\n className\n )}\n style={{ width: resolvedWidth }}\n >\n {renderFrame(<h2 className=\"text-body-lg font-medium flex-1 truncate\">{title}</h2>)}\n </aside>\n )\n }\n)\nAppShellAside.displayName = 'AppShellAside'\n\n// ── Exports ──────────────────────────────────────────────────────────────────\n\n// code-quality-allow: dead-export useAppShell — public compound API hook(consumer 可自拼 custom aside layout,\n// 對齊 Radix `useDialogContext` / MUI `useFormControl` 慣例)。內部 AppShellAside 已消費(L294),\n// audit script 抓「無 cross-file import」是 false positive(2026-05-21 D2 codify)。\nexport { AppShell, AppShellAside, useAppShell }\n"],"names":["XIcon"],"mappings":"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"}

package/dist/components/AspectRatio/aspect-ratio.d.ts CHANGED Viewed

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

package/dist/components/AspectRatio/aspect-ratio.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"aspect-ratio.d.ts","sourceRoot":"","sources":["../../../src/components/AspectRatio/aspect-ratio.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAEpE;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,CAAA;AAK/F,QAAA,MAAM,WAAW,iKAGoD,CAAA;AAKrE,eAAO,MAAM,eAAe;;;;;;;;;;;~~CAelB~~,CAAA;AAEV,OAAO,EAAE,WAAW,EAAE,CAAA"}
1	+ {"version":3,"file":"aspect-ratio.d.ts","sourceRoot":"","sources":["../../../src/components/AspectRatio/aspect-ratio.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAEpE;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,CAAA;AAK/F,QAAA,MAAM,WAAW,iKAGoD,CAAA;AAKrE,eAAO,MAAM,eAAe;;;;;;;;;;;CAiBlB,CAAA;AAEV,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/AspectRatio/aspect-ratio.js CHANGED Viewed

@@ -6,10 +6,12 @@ AspectRatio.displayName = "AspectRatio";
 const aspectRatioMeta = {
   component: "AspectRatio",
   family: null,
-  // non-family composite / overlay / layout
+  // self-contained primitive(對齊 spec frontmatter self-contained + L22;非 Family 1-4)
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  // 2026-06-05 fix(deep-audit):純 structural container,無互動狀態(spec.md L101「無 hover/focus/active/disabled」)。
+  // 原 ['default','hover','active','focus-visible','disabled'] 是 Phase 1 mechanical placeholder,與 spec 矛盾。
+  states: ["default"],
   tokens: {
     bg: [],
     fg: [],

package/dist/components/AspectRatio/aspect-ratio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"aspect-ratio.js","sources":["../../../src/components/AspectRatio/aspect-ratio.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 AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'\n\n/*\n AspectRatio — 固定長寬比容器(Radix AspectRatio primitive 薄包裝)\n \n 世界級對照:shadcn `AspectRatio` / Ant 無獨立元件(CSS 方案)/ Material 無\n \n ── 為什麼需要 ──\n * CSS `aspect-ratio` 屬性雖然現代瀏覽器都支援,但 Radix primitive 提供 SSR-safe\n * padding-bottom 方案 + consistent API,避免邊緣 bug(image 未載入時容器坍塌 /\n * content-fit 差異)。保 safe + 一致視覺。\n \n ── 標準 ratio(DS 慣例) ──\n * 16/9 — 寬螢幕影片、onboarding feature tour 截圖(Coachmark media 預設)\n * 4/3 — 老電視 / 照片基本 ratio、產品 thumbnail\n * 1/1 — Avatar / 方形貼文預覽 / icon preview\n * 3/4 — 直式照片(人物 portrait)\n * 21/9 — Ultra-wide banner(hero section)\n \n Consumer 傳 `ratio={n/m}` 數字計算(如 16/9 = 1.7777)。\n \n ── 常見消費者 ──\n * Coachmark media / Carousel item image / Card thumbnail(未來)/ Chart preview\n */\n\nexport type AspectRatioProps = React.ComponentPropsWithoutRef<typeof AspectRatioPrimitive.Root>\n\n// shadcn canonical:顯式 forwardRef + displayName(雖 Radix primitive 已 forwardRef,\n// 此 wrapper 確保本 DS 每個 named export 在 Inspector 顯示正確 displayName,\n// 且 props passthrough + ref 行為在 code 層面明確可見)\nconst AspectRatio = React.forwardRef<\n React.ElementRef<typeof AspectRatioPrimitive.Root>,\n AspectRatioProps\n>((props, ref) => <AspectRatioPrimitive.Root ref={ref} {...props} />)\nAspectRatio.displayName = 'AspectRatio'\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 aspectRatioMeta = {\n component: 'AspectRatio',\n family: null, // ~~non~~-~~family~~ ~~composite~~ / ~~overlay~~ / ~~layout~~\n variants: {\n\n },\n sizes: {\n\n },\n ~~states:~~ ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n tokens: {\n bg: [],\n fg: [],\n ring: [],\n },\n} as const\n\nexport { AspectRatio }\n"],"names":[],"mappings":";;;AAgCA,MAAM,cAAc,MAAM,WAGxB,CAAC,OAAO,QAAQ,oBAAC,qBAAqB,MAArB,EAA0B,KAAW,GAAG,OAAO,CAAE;AACpE,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,CAAA;AAAA,IACJ,IAAI,CAAA;AAAA,IACJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}
1	+ {"version":3,"file":"aspect-ratio.js","sources":["../../../src/components/AspectRatio/aspect-ratio.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 AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'\n\n/*\n AspectRatio — 固定長寬比容器(Radix AspectRatio primitive 薄包裝)\n \n 世界級對照:shadcn `AspectRatio` / Ant 無獨立元件(CSS 方案)/ Material 無\n \n ── 為什麼需要 ──\n * CSS `aspect-ratio` 屬性雖然現代瀏覽器都支援,但 Radix primitive 提供 SSR-safe\n * padding-bottom 方案 + consistent API,避免邊緣 bug(image 未載入時容器坍塌 /\n * content-fit 差異)。保 safe + 一致視覺。\n \n ── 標準 ratio(DS 慣例) ──\n * 16/9 — 寬螢幕影片、onboarding feature tour 截圖(Coachmark media 預設)\n * 4/3 — 老電視 / 照片基本 ratio、產品 thumbnail\n * 1/1 — Avatar / 方形貼文預覽 / icon preview\n * 3/4 — 直式照片(人物 portrait)\n * 21/9 — Ultra-wide banner(hero section)\n \n Consumer 傳 `ratio={n/m}` 數字計算(如 16/9 = 1.7777)。\n \n ── 常見消費者 ──\n * Coachmark media / Carousel item image / Card thumbnail(未來)/ Chart preview\n */\n\nexport type AspectRatioProps = React.ComponentPropsWithoutRef<typeof AspectRatioPrimitive.Root>\n\n// shadcn canonical:顯式 forwardRef + displayName(雖 Radix primitive 已 forwardRef,\n// 此 wrapper 確保本 DS 每個 named export 在 Inspector 顯示正確 displayName,\n// 且 props passthrough + ref 行為在 code 層面明確可見)\nconst AspectRatio = React.forwardRef<\n React.ElementRef<typeof AspectRatioPrimitive.Root>,\n AspectRatioProps\n>((props, ref) => <AspectRatioPrimitive.Root ref={ref} {...props} />)\nAspectRatio.displayName = 'AspectRatio'\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 aspectRatioMeta = {\n component: 'AspectRatio',\n family: null, // self-contained primitive(對齊 spec frontmatter self-contained + L22;非 Family 1-4)\n variants: {\n\n },\n sizes: {\n\n },\n // 2026-06-05 fix(deep-audit):純 structural container,無互動狀態(spec.md L101「無 hover/focus/active/disabled」)。\n // 原 ['default','hover','active','focus-visible','disabled'] 是 Phase 1 mechanical placeholder,與 spec 矛盾。\n states: ['default'],\n tokens: {\n bg: [],\n fg: [],\n ring: [],\n },\n} as const\n\nexport { AspectRatio }\n"],"names":[],"mappings":";;;AAgCA,MAAM,cAAc,MAAM,WAGxB,CAAC,OAAO,QAAQ,oBAAC,qBAAqB,MAArB,EAA0B,KAAW,GAAG,OAAO,CAAE;AACpE,YAAY,cAAc;AAInB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA;AAAA;AAAA,EAKP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAA;AAAA,IACJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}

package/dist/components/Avatar/avatar.d.ts CHANGED Viewed

@@ -32,7 +32,7 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
     icon?: LucideIcon;
     /** Icon / text fallback 的背景色，預設 neutral */
     color?: ColorKey;
-    /** 深底白字模式（step-6 背景 + 白色前景，warning 例外），預設 false */
+    /** 深底模式（step-6 背景 + on-emphasis 配對前景；亮色 hue yellow/amber/orange/lime 用深字 --on-emphasis-dark），預設 false */
     solid?: boolean;
     /**
      * 在線狀態指示器(presence),顯示在 avatar **右下角**。

package/dist/components/Avatar/avatar.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAuC,KAAK,gBAAgB,EAAE,MAAM,0CAA0C,CAAA;AAMrH;;;;;;;;;;;;;;;;GAgBG;AAQH,KAAK,QAAQ,GAAG,gBAAgB,CAAA;AA6DhC,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC3B,aAAa;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,+BAA+B;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,0BAA0B;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,~~mDAAmD~~;~~IACnD~~,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IAC/C;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AAiMD,MAAM,WAAW,UAAU;IACzB,aAAa;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,+BAA+B;IAC/B,GAAG,EAAE,MAAM,CAAA;IACX,2CAA2C;IAC3C,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AAID,eAAO,MAAM,UAAU;;;;;;;;;;;CAeb,CAAA;AAGV,QAAA,MAAM,MAAM,+GAA0B,CAAA;AAEtC,OAAO,EAAE,MAAM,EAAE,CAAA"}
1	+ {"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/avatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,EAAuC,KAAK,gBAAgB,EAAE,MAAM,0CAA0C,CAAA;AAMrH;;;;;;;;;;;;;;;;GAgBG;AAQH,KAAK,QAAQ,GAAG,gBAAgB,CAAA;AA6DhC,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC3B,aAAa;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,+BAA+B;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,0BAA0B;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB,yGAAyG;IACzG,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IAC/C;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AAiMD,MAAM,WAAW,UAAU;IACzB,aAAa;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,+BAA+B;IAC/B,GAAG,EAAE,MAAM,CAAA;IACX,2CAA2C;IAC3C,KAAK,CAAC,EAAE,QAAQ,CAAA;IAChB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AAID,eAAO,MAAM,UAAU;;;;;;;;;;;CAeb,CAAA;AAGV,QAAA,MAAM,MAAM,+GAA0B,CAAA;AAEtC,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/Avatar/avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"avatar.js","sources":["../../../src/components/Avatar/avatar.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 { User } from 'lucide-react'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { CAT_SUBTLE_TOKENS, CAT_SOLID_TOKENS, type CategoricalColor } from '@/design-system/tokens/categorical-color'\nimport { HoverCard, HoverCardTrigger, HoverCardContent } from '@/design-system/components/HoverCard/hover-card'\nimport { HOVER_DELAY_RICH_MS, HOVER_DELAY_CLOSE_MS } from '@/design-system/tokens/motion/motion'\nimport { Badge } from '@/design-system/components/Badge/badge'\nimport { useFieldContext, useTableIsScrolling } from '@/design-system/components/Field/field-context'\n\n/*\n Avatar — 頭像元件\n \n 三種內容模式（按優先順序）：\n * 1. src → 圖片\n * 2. icon → icon 在底色圓/方形內\n * 3. alt → 取首字作文字 fallback\n * 4. 都沒有 → 預設 User icon\n \n ── 尺寸 ──\n * size 接受任意 px 值，icon 自動 = round_even(size × 0.6)\n * 文字 fallback 字體 = size × 0.5\n \n ── 形狀 ──\n * circle（預設）→ rounded-full，用於人物\n * square → rounded-md (4px)，用於實體（專案、組織、App）\n /\n\n// ── 色彩 ──\n// 消費 categorical-color SSOT(CAT_SUBTLE_TOKENS / CAT_SOLID_TOKENS,key X 一律對 `--color-X-`,\n// 1:1 零 offset)。subtle=step-1 底 + step-7 字;solid=step-6 全色底 + on-emphasis 字\n//(亮 hue yellow/amber/orange/lime 用 --on-emphasis-dark 深字;green 白字例外)。neutral 非色相,自處理(subtle=muted、solid=neutral-9)。\n// 2026-06-04 修:原 `red` 誤接 `--color-deep-orange-`(red=品牌紅 hue-25 ≠ deep-orange);\n// 改消費 SSOT 後 red→`--color-red-`,並補齊全 12 色相。\ntype ColorKey = CategoricalColor\ntype VariantKey = 'subtle' \| 'solid'\n\nconst COLOR_MAP: Record<VariantKey, Record<ColorKey, { bg: string; text: string }>> = {\n subtle: {\n neutral: { bg: 'var(--muted)', text: 'var(--foreground)' },\n ...CAT_SUBTLE_TOKENS,\n },\n solid: {\n neutral: { bg: 'var(--color-neutral-9)', text: 'var(--inverse-fg)' },\n ...CAT_SOLID_TOKENS,\n },\n}\n\n// ── Icon size: round to nearest even, ≈ 60% ──\nfunction getIconSize(avatarSize: number): number {\n return Math.round((avatarSize * 0.6) / 2) * 2\n}\n\n// ── Text fallback: first character ──\nfunction getInitial(text: string): string {\n return text.trim().charAt(0).toUpperCase()\n}\n\n// Semantic presence tokens — 見 color/semantic.css\n// Module-level constant(2026-04-22 D3 perf audit):從 render body 移到 module scope,\n// 避免每次 Avatar render 都 re-declare 此 4-entry object(Low impact 但渲染大量 avatars 時累積可觀)\nconst STATUS_DOT_COLOR: Record<string, string> = {\n online: 'var(--status-online)',\n away: 'var(--status-away)',\n busy: 'var(--status-busy)',\n offline: 'var(--status-offline)',\n}\n\n// ── useDocumentTheme(2026-04-23;M3 Portal 逃脫防線,scope verified 2026-04-25)──\n// 讀 `<html data-theme>` 並 observe mutation。用於 Avatar hoverCard ProfileCard:\n// Portal 後的 HoverCardContent 會繼承 trigger subtree theme(如 OverflowIndicator\n// dark tooltip 內部),造成 ProfileCard 被污染成 dark。顯式 bind app-level theme\n// 確保 ProfileCard 永遠跟 app 本身 theme 一致(light-in-light-app / dark-in-dark-app)。\n//\n// 範圍 audit 2026-04-25:觀察對象是 `document.documentElement` 自有 DOM,非 3rd-party\n// lib 內部(不屬 M2 scope);attributeFilter 限定 `data-theme` 單一 attr,re-render 成本\n// 為每次全站 theme 切換 × Avatar 數量,可接受。\nfunction useDocumentTheme(): string \| null {\n const [theme, setTheme] = React.useState<string \| null>(() =>\n typeof document !== 'undefined' ? document.documentElement.getAttribute('data-theme') : null,\n )\n React.useEffect(() => {\n if (typeof document === 'undefined') return\n const root = document.documentElement\n const update = () => setTheme(root.getAttribute('data-theme'))\n update()\n const obs = new MutationObserver(update)\n obs.observe(root, { attributes: true, attributeFilter: ['data-theme'] })\n return () => obs.disconnect()\n }, [])\n return theme\n}\n\n// ── Component ──\n\nexport interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {\n /** 尺寸：number (px) 或 'fill'（填滿父容器，由父層決定大小）。預設 32 /\n size?: number \| 'fill'\n /* 形狀：circle（人物）或 square（實體），預設 circle /\n shape?: 'circle' \| 'square'\n /* 圖片 URL /\n src?: string\n /* 替代文字（圖片失敗時取首字作 fallback） /\n alt?: string\n /* Icon 模式（LucideIcon） /\n icon?: LucideIcon\n /* Icon / text fallback 的背景色，預設 neutral /\n color?: ColorKey\n /* 深底白字模式（step-6 背景 + 白色前景，warning 例外），預設 false /\n solid?: boolean\n /\n 在線狀態指示器(presence),顯示在 avatar 右下角。\n * 世界級對照:Slack / Teams / Discord — `online` 是最廣泛被理解的術語。\n * 位置語義:右下 = \"此人的 presence\"(使用者聚焦於「這個人是誰 + 現在在不在」)。\n /\n status?: 'online' \| 'away' \| 'busy' \| 'offline'\n /\n 未讀 / 通知計數 badge,顯示在 avatar 右上角。\n * 世界級對照:chat app(iMessage / Slack thread / LINE / WhatsApp)一律右上角。\n * 位置語義:右上 = \"關於此對話的新事件數量\"(使用者聚焦於「有多少未處理」);\n * 與右下的 presence 共存不衝突(不同角、不同語義)。\n * `> 99` 自動顯示 \"99+\"(交給內部 Badge 的 `max` 行為)。\n /\n badgeCount?: number\n /\n 傳入 HoverCard 內容（如 ProfileCard），hover avatar 時自動顯示。\n * 只有人員 avatar 需要傳；實體 avatar（專案、組織）不傳。\n /\n hoverCard?: React.ReactNode\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\n// 2026-05-13 (a) perf fix part-2(per codex Layer C Roadmap rich-cell dominant + user 拍 Path (a)):\n// `React.memo` wrap forwardRef Avatar — Roadmap 13 columns 含 person/multiPerson,每 row 多 avatar\n// × HoverCard subtree + useDocumentTheme observer = 重渲染 hotspot。memo shallow-equal props,\n// HoverCard / themeRef stable across scroll 時 skip re-render。對齊 codex Profile Plan step 5\n// (filter Avatar/PeoplePicker/FieldSurfaceProvider remounts)。\n// code-quality-allow: long-function — size × shape × color × solid × status × badgeCount × hoverCard × img-fallback 多軸 prop 組合,拆 sub-fn 會跨 fn 傳 imgError state + isTableScrolling observer 結果\nconst AvatarInner = React.forwardRef<HTMLDivElement, AvatarProps>(\n ({ size = 32, shape = 'circle', src, alt, icon: Icon, color = 'neutral', solid = false, status, badgeCount, hoverCard, className, style, ...props }, ref) => {\n const [imgError, setImgError] = React.useState(false)\n const documentTheme = useDocumentTheme()\n const isTableScrolling = useTableIsScrolling()\n // 2026-05-13 R3.5(per codex Q3 verdict + user 拍「想盡辦法 auto-handle prereq」):\n // Avatar self-dim when in disabled Field wrapper context(取代既有 wrapper opacity-disabled blanket\n // 逃生艙 — color.spec.md:729 specific-disabled-color canonical)。\n // Scope narrowest:`fieldCtx?.mode === 'disabled' && fieldCtx?.hasFieldWrapper === true`,標準 Field\n // 家族 wrapper disabled 時才 dim;沒包在 Field wrapper 內的 standalone Avatar(ProfileCard / FileItem /\n // HoverCard / Dialog 等 display 場景)backward compat 不變。對齊 avatar.spec.md「Avatar 在 disabled\n // 元件內 host-controlled opacity」canonical — 升級成「Avatar self-managed via fieldCtx」。\n const fieldCtx = useFieldContext()\n const isDisabledInField = fieldCtx?.mode === 'disabled' && fieldCtx?.hasFieldWrapper === true\n const isFill = size === 'fill'\n // Fill 模式下 icon 用 60% 寬高、text 用 50cqi（container query inline-size）；\n // 數字模式下用既有 px 計算\n const numSize = isFill ? 32 : (size as number)\n const iconPx = getIconSize(numSize)\n const fontSizePx = Math.round(numSize 0.5)\n const variantKey: VariantKey = solid ? 'solid' : 'subtle'\n const colors = COLOR_MAP[variantKey]?.[color] ?? COLOR_MAP.subtle.neutral\n const radius = shape === 'circle' ? '9999px' : '4px'\n\n // 決定內容\n const showImage = src && !imgError\n const showIcon = !showImage && (Icon \|\| (!alt))\n const showText = !showImage && !showIcon && alt\n\n const FallbackIcon = Icon ?? User\n\n // Status dot 尺寸:avatar 的 28%(Slack / Teams / Discord 世界級平均),\n // clamp [8, 16] — floor 8 保小 avatar 仍可辨識但不喧賓奪主(10 floor 會讓 24px\n // avatar 的 dot 占 42% 太大);ceiling 16 防大 avatar dot 過度放大\n const dotSize = isFill ? 10 : Math.max(8, Math.min(16, Math.round(numSize * 0.28)))\n // Border ring 在 surface 上分離 dot 與 avatar,dotSize ≥ 12 時升階到 3px 保持視覺比例\n const dotBorder = dotSize >= 12 ? 3 : 2\n\n const avatarEl = (\n <div\n className={cn(\n 'inline-flex items-center justify-center shrink-0 overflow-hidden select-none',\n isFill && 'w-full h-full',\n // 2026-05-13 R3.5 self-dim:Avatar 在 disabled Field wrapper context 內自 dim\n // (取代 field-wrapper.tsx default/bare/naked disabled blanket opacity-disabled 逃生艙)\n isDisabledInField && 'opacity-disabled',\n )}\n style={{\n ...(isFill\n ? { containerType: 'inline-size' as React.CSSProperties['containerType'] }\n : { width: numSize, height: numSize }),\n borderRadius: radius,\n backgroundColor: showImage ? undefined : colors.bg,\n color: showImage ? undefined : colors.text,\n }}\n data-avatar-size={isFill ? 'fill' : numSize}\n role={!showImage && alt && !hoverCard ? 'img' : undefined}\n aria-label={!showImage && alt && !hoverCard ? alt : undefined}\n >\n {showImage && (\n <img\n src={src}\n alt={alt ?? ''}\n className=\"w-full h-full object-cover\"\n onError={() => setImgError(true)}\n />\n )}\n {showIcon && (\n isFill\n ? <FallbackIcon className=\"w-[60%] h-[60%]\" aria-hidden />\n : <FallbackIcon size={iconPx} aria-hidden />\n )}\n {showText && (\n <span\n className=\"font-medium leading-none\"\n style={{ fontSize: isFill ? '50cqi' : fontSizePx }}\n aria-hidden\n >\n {getInitial(alt!)}\n </span>\n )}\n </div>\n )\n\n const hasOverlay = status \|\| typeof badgeCount === 'number'\n // Keyboard access canonical(D4 UX audit 2026-04-22 finding):Avatar with `hoverCard`\n // 需 keyboard 可達 — Radix `HoverCardTrigger asChild` 不自動加 tabIndex,non-focusable\n // `<div>` 會讓 keyboard-only user 無法 reach ProfileCard popover(WCAG 2.1.1 / 4.1.2 違反)。\n // 解:當 `hoverCard` 存在時,wrapper `<div>` 變 focusable(`tabIndex=0` + `role=\"button\"` +\n // `aria-haspopup=\"dialog\"` + focus-visible ring)。若無 hoverCard 則維持純展示 `<div>`。\n const focusableProps = hoverCard\n ? {\n tabIndex: 0,\n role: 'button' as const,\n 'aria-haspopup': 'dialog' as const,\n 'aria-label': alt ?? 'View profile',\n }\n : {}\n // 2026-05-31:focus ring 圓角跟隨 shape(circle→rounded-full / square→rounded-md 對齊 body radius L173),\n // 原寫死 rounded-full 會讓方形 avatar(實體)配 hoverCard 時出現圓形 ring。hoverCard 為通用行為(任意內容),\n // 方形 avatar 合法可配(內容非 ProfileCard 而已),故 ring 必跟形狀。\n const focusableClass = hoverCard\n ? cn('focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1', shape === 'circle' ? 'rounded-full' : 'rounded-md')\n : ''\n const baseEl = !hasOverlay\n ? <div ref={ref} className={cn('inline-flex shrink-0', focusableClass, className)} style={style} {...focusableProps} {...props}>{avatarEl}</div>\n : (\n <div ref={ref} className={cn('relative inline-flex shrink-0', focusableClass, className)} style={style} {...focusableProps} {...props}>\n {avatarEl}\n {/* Status dot:bottom-right(presence — 世界級對照 Slack / Teams / Discord),\n 落在 circle avatar 圓周 45° 位置 / square avatar 右下直角;\n border ring 用 surface 色讓 dot 從 avatar 邊界視覺分離。\n a11y:`aria-hidden` — presence 資訊整合到 parent avatar 的 aria-label\n (world-class Slack 做法),避免多 `role=\"status\"` 造成 screen reader 洪水 /}\n {status && (\n <span\n className=\"absolute block rounded-full\"\n style={{\n width: dotSize,\n height: dotSize,\n bottom: 0,\n right: 0,\n backgroundColor: STATUS_DOT_COLOR[status],\n boxShadow: `0 0 0 ${dotBorder}px var(--surface-raised, var(--canvas))`,\n }}\n aria-hidden\n />\n )}\n {/ Count badge:top-right(chat 未讀 / 通知計數 — 世界級對照 iMessage /\n Slack thread / LINE / WhatsApp)。消費 DS Badge(critical variant),\n 再加 ring 與 avatar 分離 /}\n {typeof badgeCount === 'number' && badgeCount > 0 && (\n <Badge\n variant=\"critical\"\n count={badgeCount}\n max={99}\n className=\"absolute -top-1 -right-1\"\n style={{\n boxShadow: `0 0 0 2px var(--surface-raised, var(--canvas))`,\n }}\n aria-label={`${badgeCount} unread`}\n />\n )}\n </div>\n )\n\n // 2026-05-13 (c) scroll-defer perf(per user 拍 Path (c) + codex Q3 verdict):\n // DataTable scrolling 期間跳 HoverCard wrapper(Portal + useDocumentTheme observer 是\n // Roadmap 重渲 hotspot,per codex Layer C 分析)。scroll 結束 → context flips false →\n // re-render 接回完整 HoverCard tree(ProfileCard 仍可 hover 顯示)。\n // 對齊 AG Grid `deferRender` for slow React cell components / MUI X DataGrid scroll-defer。\n if (!hoverCard \|\| isTableScrolling) return baseEl\n\n return (\n <HoverCard openDelay={HOVER_DELAY_RICH_MS} closeDelay={HOVER_DELAY_CLOSE_MS}>\n <HoverCardTrigger asChild>\n {baseEl}\n </HoverCardTrigger>\n {/ HoverCardContent canonical(2026-04-23):\n - 無 inner padding(consumer ProfileCard 自帶 `px-4 py-3` chrome)\n - `overflow-hidden` + `rounded-lg` → child(ProfileCard)圓角裁切\n - 不設 max-height:ProfileCard 自己消費 `--radix-hover-card-content-available-height`\n 自約束高度 + 內部 ScrollArea 處理捲動\n - `data-theme={documentTheme}`:ProfileCard 永遠跟隨 app-level theme(從 `<html data-theme>`\n 動態讀),不受 trigger subtree theme 污染。範例:Avatar 位於 OverflowIndicator 的 dark\n tooltip 內,其 Portal 會繼承該 subtree dark theme → ProfileCard 變全黑。顯式設回 app theme\n 確保 ProfileCard 永遠 light-in-light-app / dark-in-dark-app。 /}\n <HoverCardContent\n data-theme={documentTheme ?? undefined}\n className=\"bg-surface-raised rounded-lg border border-border overflow-hidden\"\n style={{ boxShadow: 'var(--elevation-200)' }}\n >\n {hoverCard}\n </HoverCardContent>\n </HoverCard>\n )\n }\n)\nAvatarInner.displayName = 'AvatarInner'\n\n// ── AvatarData ─────────────────────────────────────────────────────────────\n// 資料型別，讓 consumer 傳資料而非 ReactNode。\n// 接收端內部用 Avatar 元件渲染，統一控制尺寸與 fallback。\n\nexport interface AvatarData {\n /* 圖片 URL /\n src?: string\n /* 替代文字（圖片失敗時取首字作 fallback） /\n alt: string\n /* Icon / text fallback 的背景色，預設 neutral /\n color?: ColorKey\n /\n Person avatar hover ProfileCard(DS-wide canonical,person avatar 預設必有,見 avatar.spec.md)。\n * Entity avatar(專案 / 組織 logo)不帶 → consumer 不傳 hoverCard 即豁免。\n * 所有消費 AvatarData 的 primitive(MenuItem / DropdownMenu / SelectMenu / SelectionItem / ProfileCard)\n * 需 forward 此 prop 到內部 <Avatar hoverCard={avatar.hoverCard} />。\n */\n hoverCard?: React.ReactNode\n}\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const avatarMeta = {\n component: 'Avatar',\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: ['--foreground', '--on-emphasis'],\n ring: ['ring-ring'],\n },\n} as const\n\nAvatarInner.displayName = 'Avatar'\nconst Avatar = React.memo(AvatarInner)\n\nexport { Avatar }\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"avatar.js","sources":["../../../src/components/Avatar/avatar.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 { User } from 'lucide-react'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { CAT_SUBTLE_TOKENS, CAT_SOLID_TOKENS, type CategoricalColor } from '@/design-system/tokens/categorical-color'\nimport { HoverCard, HoverCardTrigger, HoverCardContent } from '@/design-system/components/HoverCard/hover-card'\nimport { HOVER_DELAY_RICH_MS, HOVER_DELAY_CLOSE_MS } from '@/design-system/tokens/motion/motion'\nimport { Badge } from '@/design-system/components/Badge/badge'\nimport { useFieldContext, useTableIsScrolling } from '@/design-system/components/Field/field-context'\n\n/*\n Avatar — 頭像元件\n \n 三種內容模式（按優先順序）：\n * 1. src → 圖片\n * 2. icon → icon 在底色圓/方形內\n * 3. alt → 取首字作文字 fallback\n * 4. 都沒有 → 預設 User icon\n \n ── 尺寸 ──\n * size 接受任意 px 值，icon 自動 = round_even(size × 0.6)\n * 文字 fallback 字體 = size × 0.5\n \n ── 形狀 ──\n * circle（預設）→ rounded-full，用於人物\n * square → rounded-md (4px)，用於實體（專案、組織、App）\n /\n\n// ── 色彩 ──\n// 消費 categorical-color SSOT(CAT_SUBTLE_TOKENS / CAT_SOLID_TOKENS,key X 一律對 `--color-X-`,\n// 1:1 零 offset)。subtle=step-1 底 + step-7 字;solid=step-6 全色底 + on-emphasis 字\n//(亮 hue yellow/amber/orange/lime 用 --on-emphasis-dark 深字;green 白字例外)。neutral 非色相,自處理(subtle=muted、solid=neutral-9)。\n// 2026-06-04 修:原 `red` 誤接 `--color-deep-orange-`(red=品牌紅 hue-25 ≠ deep-orange);\n// 改消費 SSOT 後 red→`--color-red-`,並補齊全 12 色相。\ntype ColorKey = CategoricalColor\ntype VariantKey = 'subtle' \| 'solid'\n\nconst COLOR_MAP: Record<VariantKey, Record<ColorKey, { bg: string; text: string }>> = {\n subtle: {\n neutral: { bg: 'var(--muted)', text: 'var(--foreground)' },\n ...CAT_SUBTLE_TOKENS,\n },\n solid: {\n neutral: { bg: 'var(--color-neutral-9)', text: 'var(--inverse-fg)' },\n ...CAT_SOLID_TOKENS,\n },\n}\n\n// ── Icon size: round to nearest even, ≈ 60% ──\nfunction getIconSize(avatarSize: number): number {\n return Math.round((avatarSize * 0.6) / 2) * 2\n}\n\n// ── Text fallback: first character ──\nfunction getInitial(text: string): string {\n return text.trim().charAt(0).toUpperCase()\n}\n\n// Semantic presence tokens — 見 color/semantic.css\n// Module-level constant(2026-04-22 D3 perf audit):從 render body 移到 module scope,\n// 避免每次 Avatar render 都 re-declare 此 4-entry object(Low impact 但渲染大量 avatars 時累積可觀)\nconst STATUS_DOT_COLOR: Record<string, string> = {\n online: 'var(--status-online)',\n away: 'var(--status-away)',\n busy: 'var(--status-busy)',\n offline: 'var(--status-offline)',\n}\n\n// ── useDocumentTheme(2026-04-23;M3 Portal 逃脫防線,scope verified 2026-04-25)──\n// 讀 `<html data-theme>` 並 observe mutation。用於 Avatar hoverCard ProfileCard:\n// Portal 後的 HoverCardContent 會繼承 trigger subtree theme(如 OverflowIndicator\n// dark tooltip 內部),造成 ProfileCard 被污染成 dark。顯式 bind app-level theme\n// 確保 ProfileCard 永遠跟 app 本身 theme 一致(light-in-light-app / dark-in-dark-app)。\n//\n// 範圍 audit 2026-04-25:觀察對象是 `document.documentElement` 自有 DOM,非 3rd-party\n// lib 內部(不屬 M2 scope);attributeFilter 限定 `data-theme` 單一 attr,re-render 成本\n// 為每次全站 theme 切換 × Avatar 數量,可接受。\nfunction useDocumentTheme(): string \| null {\n const [theme, setTheme] = React.useState<string \| null>(() =>\n typeof document !== 'undefined' ? document.documentElement.getAttribute('data-theme') : null,\n )\n React.useEffect(() => {\n if (typeof document === 'undefined') return\n const root = document.documentElement\n const update = () => setTheme(root.getAttribute('data-theme'))\n update()\n const obs = new MutationObserver(update)\n obs.observe(root, { attributes: true, attributeFilter: ['data-theme'] })\n return () => obs.disconnect()\n }, [])\n return theme\n}\n\n// ── Component ──\n\nexport interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {\n /** 尺寸：number (px) 或 'fill'（填滿父容器，由父層決定大小）。預設 32 /\n size?: number \| 'fill'\n /* 形狀：circle（人物）或 square（實體），預設 circle /\n shape?: 'circle' \| 'square'\n /* 圖片 URL /\n src?: string\n /* 替代文字（圖片失敗時取首字作 fallback） /\n alt?: string\n /* Icon 模式（LucideIcon） /\n icon?: LucideIcon\n /* Icon / text fallback 的背景色，預設 neutral /\n color?: ColorKey\n /* 深底模式（step-6 背景 + on-emphasis 配對前景；亮色 hue yellow/amber/orange/lime 用深字 --on-emphasis-dark），預設 false /\n solid?: boolean\n /\n 在線狀態指示器(presence),顯示在 avatar 右下角。\n * 世界級對照:Slack / Teams / Discord — `online` 是最廣泛被理解的術語。\n * 位置語義:右下 = \"此人的 presence\"(使用者聚焦於「這個人是誰 + 現在在不在」)。\n /\n status?: 'online' \| 'away' \| 'busy' \| 'offline'\n /\n 未讀 / 通知計數 badge,顯示在 avatar 右上角。\n * 世界級對照:chat app(iMessage / Slack thread / LINE / WhatsApp)一律右上角。\n * 位置語義:右上 = \"關於此對話的新事件數量\"(使用者聚焦於「有多少未處理」);\n * 與右下的 presence 共存不衝突(不同角、不同語義)。\n * `> 99` 自動顯示 \"99+\"(交給內部 Badge 的 `max` 行為)。\n /\n badgeCount?: number\n /\n 傳入 HoverCard 內容（如 ProfileCard），hover avatar 時自動顯示。\n * 只有人員 avatar 需要傳；實體 avatar（專案、組織）不傳。\n /\n hoverCard?: React.ReactNode\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\n// 2026-05-13 (a) perf fix part-2(per codex Layer C Roadmap rich-cell dominant + user 拍 Path (a)):\n// `React.memo` wrap forwardRef Avatar — Roadmap 13 columns 含 person/multiPerson,每 row 多 avatar\n// × HoverCard subtree + useDocumentTheme observer = 重渲染 hotspot。memo shallow-equal props,\n// HoverCard / themeRef stable across scroll 時 skip re-render。對齊 codex Profile Plan step 5\n// (filter Avatar/PeoplePicker/FieldSurfaceProvider remounts)。\n// code-quality-allow: long-function — size × shape × color × solid × status × badgeCount × hoverCard × img-fallback 多軸 prop 組合,拆 sub-fn 會跨 fn 傳 imgError state + isTableScrolling observer 結果\nconst AvatarInner = React.forwardRef<HTMLDivElement, AvatarProps>(\n ({ size = 32, shape = 'circle', src, alt, icon: Icon, color = 'neutral', solid = false, status, badgeCount, hoverCard, className, style, ...props }, ref) => {\n const [imgError, setImgError] = React.useState(false)\n const documentTheme = useDocumentTheme()\n const isTableScrolling = useTableIsScrolling()\n // 2026-05-13 R3.5(per codex Q3 verdict + user 拍「想盡辦法 auto-handle prereq」):\n // Avatar self-dim when in disabled Field wrapper context(取代既有 wrapper opacity-disabled blanket\n // 逃生艙 — color.spec.md:729 specific-disabled-color canonical)。\n // Scope narrowest:`fieldCtx?.mode === 'disabled' && fieldCtx?.hasFieldWrapper === true`,標準 Field\n // 家族 wrapper disabled 時才 dim;沒包在 Field wrapper 內的 standalone Avatar(ProfileCard / FileItem /\n // HoverCard / Dialog 等 display 場景)backward compat 不變。對齊 avatar.spec.md「Avatar 在 disabled\n // 元件內 host-controlled opacity」canonical — 升級成「Avatar self-managed via fieldCtx」。\n const fieldCtx = useFieldContext()\n const isDisabledInField = fieldCtx?.mode === 'disabled' && fieldCtx?.hasFieldWrapper === true\n const isFill = size === 'fill'\n // Fill 模式下 icon 用 60% 寬高、text 用 50cqi（container query inline-size）；\n // 數字模式下用既有 px 計算\n const numSize = isFill ? 32 : (size as number)\n const iconPx = getIconSize(numSize)\n const fontSizePx = Math.round(numSize 0.5)\n const variantKey: VariantKey = solid ? 'solid' : 'subtle'\n const colors = COLOR_MAP[variantKey]?.[color] ?? COLOR_MAP.subtle.neutral\n const radius = shape === 'circle' ? '9999px' : '4px'\n\n // 決定內容\n const showImage = src && !imgError\n const showIcon = !showImage && (Icon \|\| (!alt))\n const showText = !showImage && !showIcon && alt\n\n const FallbackIcon = Icon ?? User\n\n // Status dot 尺寸:avatar 的 28%(Slack / Teams / Discord 世界級平均),\n // clamp [8, 16] — floor 8 保小 avatar 仍可辨識但不喧賓奪主(10 floor 會讓 24px\n // avatar 的 dot 占 42% 太大);ceiling 16 防大 avatar dot 過度放大\n const dotSize = isFill ? 10 : Math.max(8, Math.min(16, Math.round(numSize * 0.28)))\n // Border ring 在 surface 上分離 dot 與 avatar,dotSize ≥ 12 時升階到 3px 保持視覺比例\n const dotBorder = dotSize >= 12 ? 3 : 2\n\n const avatarEl = (\n <div\n className={cn(\n 'inline-flex items-center justify-center shrink-0 overflow-hidden select-none',\n isFill && 'w-full h-full',\n // 2026-05-13 R3.5 self-dim:Avatar 在 disabled Field wrapper context 內自 dim\n // (取代 field-wrapper.tsx default/bare/naked disabled blanket opacity-disabled 逃生艙)\n isDisabledInField && 'opacity-disabled',\n )}\n style={{\n ...(isFill\n ? { containerType: 'inline-size' as React.CSSProperties['containerType'] }\n : { width: numSize, height: numSize }),\n borderRadius: radius,\n backgroundColor: showImage ? undefined : colors.bg,\n color: showImage ? undefined : colors.text,\n }}\n data-avatar-size={isFill ? 'fill' : numSize}\n role={!showImage && alt && !hoverCard ? 'img' : undefined}\n aria-label={!showImage && alt && !hoverCard ? alt : undefined}\n >\n {showImage && (\n <img\n src={src}\n alt={alt ?? ''}\n className=\"w-full h-full object-cover\"\n onError={() => setImgError(true)}\n />\n )}\n {showIcon && (\n isFill\n ? <FallbackIcon className=\"w-[60%] h-[60%]\" aria-hidden />\n : <FallbackIcon size={iconPx} aria-hidden />\n )}\n {showText && (\n <span\n className=\"font-medium leading-none\"\n style={{ fontSize: isFill ? '50cqi' : fontSizePx }}\n aria-hidden\n >\n {getInitial(alt!)}\n </span>\n )}\n </div>\n )\n\n const hasOverlay = status \|\| typeof badgeCount === 'number'\n // Keyboard access canonical(D4 UX audit 2026-04-22 finding):Avatar with `hoverCard`\n // 需 keyboard 可達 — Radix `HoverCardTrigger asChild` 不自動加 tabIndex,non-focusable\n // `<div>` 會讓 keyboard-only user 無法 reach ProfileCard popover(WCAG 2.1.1 / 4.1.2 違反)。\n // 解:當 `hoverCard` 存在時,wrapper `<div>` 變 focusable(`tabIndex=0` + `role=\"button\"` +\n // `aria-haspopup=\"dialog\"` + focus-visible ring)。若無 hoverCard 則維持純展示 `<div>`。\n const focusableProps = hoverCard\n ? {\n tabIndex: 0,\n role: 'button' as const,\n 'aria-haspopup': 'dialog' as const,\n 'aria-label': alt ?? 'View profile',\n }\n : {}\n // 2026-05-31:focus ring 圓角跟隨 shape(circle→rounded-full / square→rounded-md 對齊 body radius L173),\n // 原寫死 rounded-full 會讓方形 avatar(實體)配 hoverCard 時出現圓形 ring。hoverCard 為通用行為(任意內容),\n // 方形 avatar 合法可配(內容非 ProfileCard 而已),故 ring 必跟形狀。\n const focusableClass = hoverCard\n ? cn('focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1', shape === 'circle' ? 'rounded-full' : 'rounded-md')\n : ''\n const baseEl = !hasOverlay\n ? <div ref={ref} className={cn('inline-flex shrink-0', focusableClass, className)} style={style} {...focusableProps} {...props}>{avatarEl}</div>\n : (\n <div ref={ref} className={cn('relative inline-flex shrink-0', focusableClass, className)} style={style} {...focusableProps} {...props}>\n {avatarEl}\n {/* Status dot:bottom-right(presence — 世界級對照 Slack / Teams / Discord),\n 落在 circle avatar 圓周 45° 位置 / square avatar 右下直角;\n border ring 用 surface 色讓 dot 從 avatar 邊界視覺分離。\n a11y:`aria-hidden` — presence 資訊整合到 parent avatar 的 aria-label\n (world-class Slack 做法),避免多 `role=\"status\"` 造成 screen reader 洪水 /}\n {status && (\n <span\n className=\"absolute block rounded-full\"\n style={{\n width: dotSize,\n height: dotSize,\n bottom: 0,\n right: 0,\n backgroundColor: STATUS_DOT_COLOR[status],\n boxShadow: `0 0 0 ${dotBorder}px var(--surface-raised, var(--canvas))`,\n }}\n aria-hidden\n />\n )}\n {/ Count badge:top-right(chat 未讀 / 通知計數 — 世界級對照 iMessage /\n Slack thread / LINE / WhatsApp)。消費 DS Badge(critical variant),\n 再加 ring 與 avatar 分離 /}\n {typeof badgeCount === 'number' && badgeCount > 0 && (\n <Badge\n variant=\"critical\"\n count={badgeCount}\n max={99}\n className=\"absolute -top-1 -right-1\"\n style={{\n boxShadow: `0 0 0 2px var(--surface-raised, var(--canvas))`,\n }}\n aria-label={`${badgeCount} unread`}\n />\n )}\n </div>\n )\n\n // 2026-05-13 (c) scroll-defer perf(per user 拍 Path (c) + codex Q3 verdict):\n // DataTable scrolling 期間跳 HoverCard wrapper(Portal + useDocumentTheme observer 是\n // Roadmap 重渲 hotspot,per codex Layer C 分析)。scroll 結束 → context flips false →\n // re-render 接回完整 HoverCard tree(ProfileCard 仍可 hover 顯示)。\n // 對齊 AG Grid `deferRender` for slow React cell components / MUI X DataGrid scroll-defer。\n if (!hoverCard \|\| isTableScrolling) return baseEl\n\n return (\n <HoverCard openDelay={HOVER_DELAY_RICH_MS} closeDelay={HOVER_DELAY_CLOSE_MS}>\n <HoverCardTrigger asChild>\n {baseEl}\n </HoverCardTrigger>\n {/ HoverCardContent canonical(2026-04-23):\n - 無 inner padding(consumer ProfileCard 自帶 `px-4 py-3` chrome)\n - `overflow-hidden` + `rounded-lg` → child(ProfileCard)圓角裁切\n - 不設 max-height:ProfileCard 自己消費 `--radix-hover-card-content-available-height`\n 自約束高度 + 內部 ScrollArea 處理捲動\n - `data-theme={documentTheme}`:ProfileCard 永遠跟隨 app-level theme(從 `<html data-theme>`\n 動態讀),不受 trigger subtree theme 污染。範例:Avatar 位於 OverflowIndicator 的 dark\n tooltip 內,其 Portal 會繼承該 subtree dark theme → ProfileCard 變全黑。顯式設回 app theme\n 確保 ProfileCard 永遠 light-in-light-app / dark-in-dark-app。 /}\n <HoverCardContent\n data-theme={documentTheme ?? undefined}\n className=\"bg-surface-raised rounded-lg border border-border overflow-hidden\"\n style={{ boxShadow: 'var(--elevation-200)' }}\n >\n {hoverCard}\n </HoverCardContent>\n </HoverCard>\n )\n }\n)\nAvatarInner.displayName = 'AvatarInner'\n\n// ── AvatarData ─────────────────────────────────────────────────────────────\n// 資料型別，讓 consumer 傳資料而非 ReactNode。\n// 接收端內部用 Avatar 元件渲染，統一控制尺寸與 fallback。\n\nexport interface AvatarData {\n /* 圖片 URL /\n src?: string\n /* 替代文字（圖片失敗時取首字作 fallback） /\n alt: string\n /* Icon / text fallback 的背景色，預設 neutral /\n color?: ColorKey\n /\n Person avatar hover ProfileCard(DS-wide canonical,person avatar 預設必有,見 avatar.spec.md)。\n * Entity avatar(專案 / 組織 logo)不帶 → consumer 不傳 hoverCard 即豁免。\n * 所有消費 AvatarData 的 primitive(MenuItem / DropdownMenu / SelectMenu / SelectionItem / ProfileCard)\n * 需 forward 此 prop 到內部 <Avatar hoverCard={avatar.hoverCard} />。\n */\n hoverCard?: React.ReactNode\n}\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const avatarMeta = {\n component: 'Avatar',\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: ['--foreground', '--on-emphasis'],\n ring: ['ring-ring'],\n },\n} as const\n\nAvatarInner.displayName = 'Avatar'\nconst Avatar = React.memo(AvatarInner)\n\nexport { Avatar }\n"],"names":[],"mappings":"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"}

package/dist/components/Badge/badge.d.ts CHANGED Viewed

@@ -1,24 +1,36 @@
 import * as React from 'react';
-import { type VariantProps } from 'class-variance-authority';
 declare const badgeVariants: (props?: ({
     variant?: "high" | "low" | "medium" | "critical" | null | undefined;
     dot?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>, Omit<VariantProps<typeof badgeVariants>, 'dot'> {
+type BadgeBaseProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>;
+export interface BadgeDotProps extends BadgeBaseProps {
     /** dot 模式：6×6px 純色圓點，無文字 */
-    dot?: boolean;
-    /** 顯示的數量（dot 模式下忽略） */
+    dot: true;
+    /** dot 只接高訊號 attention 色:critical(立即)/ high(有感)。預設 critical。
+     * 不提供 medium/low —— dot = 「這裡有東西要看」,淡點不 earn existence
+     * (對齊 Material/Ant/Polaris:dot 是單一 attention/status,非 severity 刻度)。 */
+    variant?: 'critical' | 'high';
+    count?: never;
+    max?: never;
+}
+export interface BadgeCountProps extends BadgeBaseProps {
+    dot?: false;
+    /** 四級 severity（low→critical),見 badge.spec.md「選 level 的流程」 */
+    variant?: 'critical' | 'high' | 'medium' | 'low';
+    /** 顯示的數量 */
     count?: number;
     /** 數量上限，超過時顯示 "max+"（例：max=99 → "99+"） */
     max?: number;
 }
+export type BadgeProps = BadgeDotProps | BadgeCountProps;
 declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
 export declare const badgeMeta: {
     readonly component: "Badge";
     readonly family: 3;
     readonly variants: {
         readonly critical: {
-            readonly purpose: "紅底白字（bg-notification）";
+            readonly purpose: "deep-orange 底白字（bg-notification = deep-orange-6）";
         };
         readonly high: {
             readonly purpose: "藍底白字（bg-info）";
@@ -31,10 +43,10 @@ export declare const badgeMeta: {
         };
     };
     readonly sizes: {};
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default"];
     readonly tokens: {
         readonly bg: readonly ["bg-info", "bg-info-subtle", "bg-notification", "bg-secondary"];
-        readonly fg: readonly ["text-fg-muted", "text-info-text"];
+        readonly fg: readonly ["text-fg-muted", "text-info-text", "text-on-emphasis"];
         readonly ring: readonly [];
     };
     readonly defaultVariant: "low";

package/dist/components/Badge/badge.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;~~AAC9B~~,~~OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAkBjE,~~QAAA,MAAM,aAAa;;;8EAwBlB,CAAA;AAED,~~MAAM~~,~~WAAW~~,~~UACf~~,~~SAAQ,~~IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,~~EAC7D~~,IAAI,CAAC,~~YAAY~~,CAAC,~~OAAO~~,~~aAAa~~,CAAC,EAAE,KAAK,~~CAAC~~;~~IACjD~~,~~4BAA4B~~;~~IAC5B~~,GAAG,CAAC,EAAE,OAAO,CAAA;~~IACb~~,~~uBAAuB~~;~~IACvB~~,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,QAAA,MAAM,KAAK,~~oFAqBV~~,CAAA;AAKD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;CAmBZ,CAAA;AAEV,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
1	+ {"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAwB9B,QAAA,MAAM,aAAa;;;8EAwBlB,CAAA;AAED,KAAK,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAA;AAE7E,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD,4BAA4B;IAC5B,GAAG,EAAE,IAAI,CAAA;IACT;;2EAEuE;IACvE,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,CAAA;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,GAAG,CAAC,EAAE,KAAK,CAAA;CACZ;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,GAAG,CAAC,EAAE,KAAK,CAAA;IACX,6DAA6D;IAC7D,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAA;IAChD,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,MAAM,MAAM,UAAU,GAAG,aAAa,GAAG,eAAe,CAAA;AAExD,QAAA,MAAM,KAAK,oFAuBV,CAAA;AAKD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;CAmBZ,CAAA;AAEV,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/Badge/badge.js CHANGED Viewed

@@ -29,13 +29,14 @@ const badgeVariants = cva(
 );
 const Badge = React.forwardRef(
   ({ variant, dot = false, count, max, className, role, ...props }, ref) => {
+    const effectiveVariant = variant ?? (dot ? "critical" : "low");
     const display = dot ? null : max != null && count != null && count > max ? `${max}+` : `${count}`;
     return /* @__PURE__ */ jsx(
       "span",
       {
         ref,
         role: role ?? "status",
-        className: cn(badgeVariants({ variant, dot }), className),
+        className: cn(badgeVariants({ variant: effectiveVariant, dot }), className),
         ...props,
         children: display
       }
@@ -47,16 +48,16 @@ const badgeMeta = {
   component: "Badge",
   family: 3,
   variants: {
-    critical: { purpose: "紅底白字（bg-notification）" },
+    critical: { purpose: "deep-orange 底白字（bg-notification = deep-orange-6）" },
     high: { purpose: "藍底白字（bg-info）" },
     medium: { purpose: "淺藍底藍字（bg-info-subtle）" },
     low: { purpose: "使用者切 tab 才看，不需搶注意力" }
   },
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  states: ["default"],
   tokens: {
     bg: ["bg-info", "bg-info-subtle", "bg-notification", "bg-secondary"],
-    fg: ["text-fg-muted", "text-info-text"],
+    fg: ["text-fg-muted", "text-info-text", "text-on-emphasis"],
     ring: []
   },
   defaultVariant: "low"

package/dist/components/Badge/badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"badge.js","sources":["../../../src/components/Badge/badge.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cva, ~~type VariantProps~~ } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\n// ── Badge（notification count indicator）────────────────────────────────────\n// 通知計數指示器，用於未讀數量、待辦計數等。\n//\n// 兩種模式：\n// count — 16px 高，10px 字，font-medium。個位數正圓，多位數膠囊。\n// dot — 6×6px 純色圓點，無文字。\n//\n// 四個層級（由 passive 到 urgent）：\n// low（預設） — 灰底灰字（neutral-3 + neutral-7），被動計數\n// medium — 淺藍底藍字（bg-info-subtle + text-info-text），可延後看\n// high — 藍底白字（bg-info），有感影響的待辦\n// critical — ~~紅底白字（~~bg-notification），立即處理\n//\n// 規則：default low, escalate with reason。見 badge.spec.md「選 level ~~的流程」。\~~n\nconst badgeVariants = cva(\n // 2026-05-23 Path B revert:icon-as-text / numeric-in-circle 用 leading-none canonical(對齊 Material Avatar `line-height: 1` / Polaris Badge / Carbon Tag 共識)。\n // 視覺等效驗證:Badge container 顯式 `h-4 (16px)` + `flex items-center` 主導,text 被 items-center 置中,line-height 1.0 vs 1.3 視覺零差別。\n // user 2026-05-23「或是其實根本不用分?」+「照你建議」path B:統一 leading-none,不分。\n // 廢除 2026-05-21 F1 fix 的 leading-compact migration(那次 anchor「不影響高度的話就改」core constraint 是高度不變,Path B 同樣滿足且更簡單)。\n 'inline-flex items-center justify-center rounded-full leading-none',\n {\n variants: {\n variant: {\n critical: 'bg-notification text-on-emphasis',\n high: 'bg-info text-on-emphasis',\n medium: 'bg-info-subtle text-info-text',\n low: 'bg-secondary text-fg-muted',\n },\n dot: {\n true: 'w-1.5 h-1.5',\n false: 'min-w-4 h-4 px-1 text-[10px] font-medium',\n },\n },\n defaultVariants: {\n variant: 'low',\n dot: false,\n },\n }\n)\n\~~nexport~~ ~~interface~~ ~~BadgeProps\n extends~~ Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'~~>,\~~n ~~Omit<VariantProps<typeof~~ ~~badgeVariants>,~~ ~~'dot'>~~ {\n /** dot 模式：6×6px 純色圓點，無文字 /\n dot?: ~~boolean~~\n /* ~~顯示的數量（~~dot ~~模式下忽略）~~ /\n count?: number\n /* 數量上限，超過時顯示 \"max+\"（例：max=99 → \"99+\"） */\n max?: number\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n ({ variant, dot = false, count, max, className, role, ...props }, ref) => {\n const display = dot ? null : (\n max != null && count != null && count > max ? `${max}+` : `${count}`\n )\n\n // a11y(2026-04-25 axe aria-prohibited-attr fix):\n // span default 無 role → 不接 aria-label(WCAG 禁止)。Badge 是通知指示器,\n // `role=\"status\"` 語意正確(live region 可播報計數變化)且允許 aria-label。\n // Consumer 可 override(傳 role=\"img\" / role={undefined})。\n return (\n <span\n ref={ref}\n role={role ?? 'status'}\n className={cn(badgeVariants({ variant, dot }), className)}\n {...props}\n >\n {display}\n </span>\n )\n }\n)\nBadge.displayName = 'Badge'\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 badgeMeta = {\n component: 'Badge',\n family: 3,\n variants: {\n critical: { purpose: '~~紅底白字（~~bg-notification）' },\n high: { purpose: '藍底白字（bg-info）' },\n medium: { purpose: '淺藍底藍字（bg-info-subtle）' },\n low: { purpose: '使用者切 tab 才看，不需搶注意力' },\n },\n sizes: {\n\n },\n states: ['default'~~, 'hover', 'active', 'focus-visible', 'disabled'~~],\n tokens: {\n bg: ['bg-info', 'bg-info-subtle', 'bg-notification', 'bg-secondary'],\n fg: ['text-fg-muted', 'text-info-text'],\n ring: [],\n },\n defaultVariant: 'low',\n} as const\n\nexport { Badge, badgeVariants }\n"],"names":[],"mappings":";;;;~~AAmBA~~,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,UAAU;AAAA,QACV,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,KAAK;AAAA,MAAA;AAAA,MAEP,KAAK;AAAA,QACH,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;~~AAaA~~,MAAM,QAAQ,MAAM;AAAA,EAClB,CAAC,EAAE,SAAS,MAAM,OAAO,OAAO,KAAK,WAAW,MAAM,GAAG,MAAA,GAAS,QAAQ;~~AACxE~~,UAAM,UAAU,MAAM,OACpB,OAAO,QAAQ,SAAS,QAAQ,QAAQ,MAAM,GAAG,GAAG,MAAM,GAAG,KAAK;AAOpE,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM,QAAQ;AAAA,QACd,WAAW,GAAG,cAAc,EAAE,SAAS,IAAA,CAAK,GAAG,SAAS;AAAA,~~QACvD~~,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,MAAM,cAAc;AAIb,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU;AAAA,IACR,UAAU,EAAE,SAAS,~~wBAAA~~;AAAA,IACrB,MAAM,EAAE,SAAS,gBAAA;AAAA,IACjB,QAAQ,EAAE,SAAS,wBAAA;AAAA,IACnB,KAAK,EAAE,SAAS,qBAAA;AAAA,EAAqB;AAAA,EAEvC,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,~~WAAW,~~SAAS~~,UAAU,iBAAiB,UAAU~~;AAAA,~~EAClE~~,QAAQ;AAAA,IACN,IAAI,CAAC,WAAW,kBAAkB,mBAAmB,cAAc;AAAA,IACnE,IAAI,CAAC,iBAAiB,~~gBAAgB~~;AAAA,~~IACtC~~,MAAM,CAAA;AAAA,EAAC;AAAA,EAET,gBAAgB;AAClB;"}
1	+ {"version":3,"file":"badge.js","sources":["../../../src/components/Badge/badge.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\n// ── Badge（notification count indicator）────────────────────────────────────\n// 通知計數指示器，用於未讀數量、待辦計數等。\n//\n// 兩種模式：\n// count — 16px 高，10px 字，font-medium。個位數正圓，多位數膠囊。\n// dot — 6×6px 純色圓點，無文字。\n//\n// 四個層級（由 passive 到 urgent）：\n// low（預設） — 灰底灰字（neutral-3 + neutral-7），被動計數\n// medium — 淺藍底藍字（bg-info-subtle + text-info-text），可延後看\n// high — 藍底白字（bg-info），有感影響的待辦\n// critical — deep-orange 底白字（bg-notification = --color-deep-orange-6,hue 38;非 categorical red hue 25），立即處理\n//\n// dot 模式只接 critical / high（單一 attention 點,實心可見色）—— 不提供 medium/low dot:\n// dot = 「這裡有東西要看」,淡點不 earn existence(對齊 Material small-badge / Ant status dot /\n// Polaris:dot 是單一 attention/status,非 4 級 severity 刻度;2026-06-05 user 拍板 Option A)。\n// medium/low 仍完整存在於 count/text badge。\n//\n// 規則：count default low, escalate with reason。見 badge.spec.md「選 level 的流程」+「dot 變體」。\n\nconst badgeVariants = cva(\n // 2026-05-23 Path B revert:icon-as-text / numeric-in-circle 用 leading-none canonical(對齊 Material Avatar `line-height: 1` / Polaris Badge / Carbon Tag 共識)。\n // 視覺等效驗證:Badge container 顯式 `h-4 (16px)` + `flex items-center` 主導,text 被 items-center 置中,line-height 1.0 vs 1.3 視覺零差別。\n // user 2026-05-23「或是其實根本不用分?」+「照你建議」path B:統一 leading-none,不分。\n // 廢除 2026-05-21 F1 fix 的 leading-compact migration(那次 anchor「不影響高度的話就改」core constraint 是高度不變,Path B 同樣滿足且更簡單)。\n 'inline-flex items-center justify-center rounded-full leading-none',\n {\n variants: {\n variant: {\n critical: 'bg-notification text-on-emphasis',\n high: 'bg-info text-on-emphasis',\n medium: 'bg-info-subtle text-info-text',\n low: 'bg-secondary text-fg-muted',\n },\n dot: {\n true: 'w-1.5 h-1.5',\n false: 'min-w-4 h-4 px-1 text-[10px] font-medium',\n },\n },\n defaultVariants: {\n variant: 'low',\n dot: false,\n },\n }\n)\n\ntype BadgeBaseProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>\n\nexport interface BadgeDotProps extends BadgeBaseProps {\n /** dot 模式：6×6px 純色圓點，無文字 /\n dot: true\n /* dot 只接高訊號 attention 色:critical(立即)/ high(有感)。預設 critical。\n * 不提供 medium/low —— dot = 「這裡有東西要看」,淡點不 earn existence\n * (對齊 Material/Ant/Polaris:dot 是單一 attention/status,非 severity 刻度)。 /\n variant?: 'critical' \| 'high'\n count?: never\n max?: never\n}\n\nexport interface BadgeCountProps extends BadgeBaseProps {\n dot?: false\n /* 四級 severity（low→critical),見 badge.spec.md「選 level 的流程」 /\n variant?: 'critical' \| 'high' \| 'medium' \| 'low'\n /* 顯示的數量 /\n count?: number\n /* 數量上限，超過時顯示 \"max+\"（例：max=99 → \"99+\"） */\n max?: number\n}\n\nexport type BadgeProps = BadgeDotProps \| BadgeCountProps\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n ({ variant, dot = false, count, max, className, role, ...props }, ref) => {\n // dot 預設 attention 色 = critical(非 cva 的 count default 'low');count 沿用 cva default 'low'。\n const effectiveVariant = variant ?? (dot ? 'critical' : 'low')\n const display = dot ? null : (\n max != null && count != null && count > max ? `${max}+` : `${count}`\n )\n\n // a11y(2026-04-25 axe aria-prohibited-attr fix):\n // span default 無 role → 不接 aria-label(WCAG 禁止)。Badge 是通知指示器,\n // `role=\"status\"` 語意正確(live region 可播報計數變化)且允許 aria-label。\n // Consumer 可 override(傳 role=\"img\" / role={undefined})。\n return (\n <span\n ref={ref}\n role={role ?? 'status'}\n className={cn(badgeVariants({ variant: effectiveVariant, dot }), className)}\n {...props}\n >\n {display}\n </span>\n )\n }\n)\nBadge.displayName = 'Badge'\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 badgeMeta = {\n component: 'Badge',\n family: 3,\n variants: {\n critical: { purpose: 'deep-orange 底白字（bg-notification = deep-orange-6）' },\n high: { purpose: '藍底白字（bg-info）' },\n medium: { purpose: '淺藍底藍字（bg-info-subtle）' },\n low: { purpose: '使用者切 tab 才看，不需搶注意力' },\n },\n sizes: {\n\n },\n states: ['default'],\n tokens: {\n bg: ['bg-info', 'bg-info-subtle', 'bg-notification', 'bg-secondary'],\n fg: ['text-fg-muted', 'text-info-text', 'text-on-emphasis'],\n ring: [],\n },\n defaultVariant: 'low',\n} as const\n\nexport { Badge, badgeVariants }\n"],"names":[],"mappings":";;;;AAwBA,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,EAKpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,UAAU;AAAA,QACV,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,KAAK;AAAA,MAAA;AAAA,MAEP,KAAK;AAAA,QACH,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,KAAK;AAAA,IAAA;AAAA,EACP;AAEJ;AA2BA,MAAM,QAAQ,MAAM;AAAA,EAClB,CAAC,EAAE,SAAS,MAAM,OAAO,OAAO,KAAK,WAAW,MAAM,GAAG,MAAA,GAAS,QAAQ;AAExE,UAAM,mBAAmB,YAAY,MAAM,aAAa;AACxD,UAAM,UAAU,MAAM,OACpB,OAAO,QAAQ,SAAS,QAAQ,QAAQ,MAAM,GAAG,GAAG,MAAM,GAAG,KAAK;AAOpE,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM,QAAQ;AAAA,QACd,WAAW,GAAG,cAAc,EAAE,SAAS,kBAAkB,IAAA,CAAK,GAAG,SAAS;AAAA,QACzE,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,MAAM,cAAc;AAIb,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU;AAAA,IACR,UAAU,EAAE,SAAS,mDAAA;AAAA,IACrB,MAAM,EAAE,SAAS,gBAAA;AAAA,IACjB,QAAQ,EAAE,SAAS,wBAAA;AAAA,IACnB,KAAK,EAAE,SAAS,qBAAA;AAAA,EAAqB;AAAA,EAEvC,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAC,WAAW,kBAAkB,mBAAmB,cAAc;AAAA,IACnE,IAAI,CAAC,iBAAiB,kBAAkB,kBAAkB;AAAA,IAC1D,MAAM,CAAA;AAAA,EAAC;AAAA,EAET,gBAAgB;AAClB;"}

package/dist/components/BulkActionBar/bulk-action-bar.d.ts CHANGED Viewed

@@ -11,7 +11,7 @@ export interface BulkActionBarProps extends React.HTMLAttributes<HTMLDivElement>
     selection: readonly string[];
     /** Clear 觸發,user 點 X icon 或 Esc(consumer 在 page-level 監聽) */
     onClear?: () => void;
-    /** 批次 actions(consumer 提供 sm Button,variant=tertiary 或 tertiary+danger;不用 primary) */
+    /** 批次 actions(consumer 提供 md Button,variant=tertiary 或 tertiary+danger;不用 primary) */
     actions?: React.ReactNode;
     /** Filter 模式:hidden 數量,顯示在 count 區 inline「{N} 已選 · {M} 個被 filter 隱藏」 */
     hiddenByFilter?: number;
@@ -38,7 +38,7 @@ export declare const bulkActionBarMeta: {
     readonly sizes: {};
     readonly states: readonly ["default"];
     readonly tokens: {
-        readonly fg: readonly ["text-fg-secondary", "text-fg-muted"];
+        readonly fg: readonly ["text-foreground", "text-fg-muted"];
         readonly border: readonly ["border-divider"];
     };
 };

package/dist/components/BulkActionBar/bulk-action-bar.js CHANGED Viewed

@@ -66,7 +66,7 @@ const bulkActionBarMeta = {
   sizes: {},
   states: ["default"],
   tokens: {
-    fg: ["text-fg-secondary", "text-fg-muted"],
+    fg: ["text-foreground", "text-fg-muted"],
     border: ["border-divider"]
   }
 };

package/dist/components/BulkActionBar/bulk-action-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"bulk-action-bar.js","sources":["../../../src/components/BulkActionBar/bulk-action-bar.tsx"],"sourcesContent":["import * as React from 'react'\nimport { X } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/design-system/components/Button/button'\nimport { ButtonDivider } from '@/design-system/components/Button/button-group'\n\n// ── 消費的 SSOT ───────────────────────────────────────────────────────────────\n// - bulk-action-bar.spec.md(本元件 SSOT)\n// - DataTable/data-table.spec.md「L2 選取」(整合方式)\n// - button.spec.md + button-group.tsx(action variant=tertiary,size=sm,\n// gap-2 + ButtonDivider 自帶 mx-1 = 12px 視覺距離)\n// - inline-action.spec.md「same-row consistency rule」(close X 同尺寸 sm)\n// - tokens/layoutSpace/layoutSpace.spec.md(footer 用 px-loose py-tight)\n// - patterns/overlay-surface/overlay-surface.spec.md SurfaceFooter canonical\n// - Alert(banner)用 description ReactNode 帶 inline link CTA\n\n// ── i18n labels ─────────────────────────────────────────────────────────────\n\n// code-quality-allow: dead-export — public API per spec.md(consumer i18n override hook)\nexport interface BulkActionBarLabels {\n count: (n: number) => string\n clear: string\n hiddenSuffix: (hidden: number) => string\n toolbarAriaLabel: string\n}\n\n// code-quality-allow: dead-export — public API per spec.md(consumer spread + override)\nexport const BULK_ACTION_BAR_DEFAULT_LABELS: BulkActionBarLabels = {\n count: (n) => `已選 ${n} 項`,\n clear: '清除選取',\n hiddenSuffix: (hidden) => `· ${hidden} 個被 filter 隱藏`,\n toolbarAriaLabel: '批次操作',\n}\n\n// ── Props ───────────────────────────────────────────────────────────────────\n\nexport interface BulkActionBarProps extends React.HTMLAttributes<HTMLDivElement> {\n /** 已選 ID,length === 0 時自動隱藏(回傳 null) /\n selection: readonly string[]\n /* Clear 觸發,user 點 X icon 或 Esc(consumer 在 page-level 監聽) /\n onClear?: () => void\n /* 批次 actions(consumer 提供 sm Button,variant=tertiary 或 tertiary+danger;不用 primary) /\n actions?: React.ReactNode\n /* Filter 模式:hidden 數量,顯示在 count 區 inline「{N} 已選 · {M} 個被 filter 隱藏」 /\n hiddenByFilter?: number\n /\n 「擴選整個 dataset」狀態(2026-05-13 ship,per user 抓 Alert「已選 5370」但 BulkActionBar\n * 仍顯「已選 50 項」regression):\n * - undefined / null(default):count 走 `selection.length`(page-level 視覺選取)\n * - number:count 走此數值(整個 dataset 擴選後 user 已選的真總數)\n \n Canonical pattern:consumer 把 BulkActionBar 跟「Alert info banner(提示擴選 dataset)」\n * 一起 mount,Alert 點「點此選取全部 N 個」→ setTotalSelected(N) → BulkActionBar count 同步。\n * 對齊 Gmail / Linear / Notion 全選 dataset hint pattern。\n * 詳 `bulk-action-bar.spec.md`「Extend dataset pattern」段。\n /\n totalSelected?: number \| null\n /* i18n labels(Partial,merge with default) /\n labels?: Partial<BulkActionBarLabels>\n}\n\n// ── Component ───────────────────────────────────────────────────────────────\n// 視覺結構(同 SurfaceFooter / DataTable toolbar canonical):\n// px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]\n// gap-2 between elements\n// 全 sm Buttons(same-row consistency)\n// <ButtonDivider /> 自帶 mx-1 = 12px 視覺距離\n//\n// Hint banner(擴 dataset 提示)完全外包給 Alert 元件 — consumer 視 ref 圖\n// 黏在 BulkActionBar 上方/下方,用 Alert variant=\"info\" placement=\"fixed\"\n// description={inline link JSX}。BulkActionBar 自己不再有 hint banner slot。\n//\n// 浮起 / fixed positioning 由 consumer wrap 決定(BulkActionBar 不限定 placement)。\n\nconst BulkActionBar = React.forwardRef<HTMLDivElement, BulkActionBarProps>(\n function BulkActionBar(\n { selection, onClear, actions, hiddenByFilter, totalSelected, labels: labelsOverride, className, ...props },\n ref\n ) {\n const labels: BulkActionBarLabels = React.useMemo(\n () => ({ ...BULK_ACTION_BAR_DEFAULT_LABELS, ...labelsOverride }),\n [labelsOverride]\n )\n\n // selection.length === 0 自動藏(對齊 spec 禁止事項 #3)\n if (selection.length === 0) return null\n\n return (\n <div\n ref={ref}\n role=\"toolbar\"\n aria-label={labels.toolbarAriaLabel}\n className={cn(\n 'flex items-center gap-2',\n 'px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]',\n // 上分隔線:bottom toolbar canonical(Linear / Apple Mail / Notion 共識)— 視覺從上方內容收尾\n 'border-t border-divider',\n className\n )}\n {...props}\n >\n {/ X close — md dismiss(2026-05-04 spec update:default placement = footer variant,\n visual weight 對齊 Dialog footer commitment buttons md;same-row consistency 維持)\n 未來若有 top-toolbar variant(覆蓋 sm-density toolbar)→ 該 variant override sm /}\n {onClear && (\n <Button\n variant=\"text\"\n size=\"md\"\n iconOnly\n dismiss\n startIcon={X}\n aria-label={labels.clear}\n onClick={onClear}\n />\n )}\n\n {/ count + filter hidden inline\n color canonical(2026-05-04):count = primary foreground + medium weight\n 理由:count 是 state-bearing 主資訊(「你在 selection mode + N items」),非裝飾\n World-class 共識:Linear/Notion/Carbon/Polaris 均用 primary foreground;muted 化弱化 state signal\n hiddenByFilter suffix 維持 muted(這是次資訊,視覺層次正確) /}\n {/ 2026-05-31 #3:aria-live 通知 SR 選取數變更;#20:補 font-medium 對齊 spec L90 + 上方 comment(state-bearing 主資訊) /}\n <span className=\"text-body text-foreground font-medium tabular-nums\" aria-live=\"polite\" aria-atomic=\"true\">\n {/ 2026-05-13:totalSelected override 走 dataset 擴選後真總數,否則 fallback page-level selection.length /}\n {labels.count(typeof totalSelected === 'number' ? totalSelected : selection.length)}\n {hiddenByFilter !== undefined && hiddenByFilter > 0 && (\n <span className=\"text-fg-muted font-normal\"> {labels.hiddenSuffix(hiddenByFilter)}</span>\n )}\n </span>\n\n {/ divider /}\n {actions && <ButtonDivider />}\n\n {/ batch actions slot(consumer 提供 sm Buttons) */}\n {actions && (\n <div className=\"flex items-center gap-2 flex-1 min-w-0\">{actions}</div>\n )}\n </div>\n )\n }\n)\nBulkActionBar.displayName = 'BulkActionBar'\n\n// Story auto-compile metadata\nexport const bulkActionBarMeta = {\n component: 'BulkActionBar',\n family: null,\n variants: {},\n sizes: {},\n states: ['default'],\n tokens: {\n fg: ['text-~~fg-secondary~~', 'text-fg-muted'],\n border: ['border-divider'],\n },\n} as const\n\nexport { BulkActionBar }\n"],"names":["BulkActionBar"],"mappings":";;;;;;AA2BO,MAAM,iCAAsD;AAAA,EACjE,OAAO,CAAC,MAAM,MAAM,CAAC;AAAA,EACrB,OAAO;AAAA,EACP,cAAc,CAAC,WAAW,KAAK,MAAM;AAAA,EACrC,kBAAkB;AACpB;AA0CA,MAAM,gBAAgB,MAAM;AAAA,EAC1B,SAASA,eACP,EAAE,WAAW,SAAS,SAAS,gBAAgB,eAAe,QAAQ,gBAAgB,WAAW,GAAG,MAAA,GACpG,KACA;AACA,UAAM,SAA8B,MAAM;AAAA,MACxC,OAAO,EAAE,GAAG,gCAAgC,GAAG;MAC/C,CAAC,cAAc;AAAA,IAAA;AAIjB,QAAI,UAAU,WAAW,EAAG,QAAO;AAEnC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAY,OAAO;AAAA,QACnB,WAAW;AAAA,UACT;AAAA,UACA;AAAA;AAAA,UAEA;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAKH,UAAA;AAAA,UAAA,WACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,UAAQ;AAAA,cACR,SAAO;AAAA,cACP,WAAW;AAAA,cACX,cAAY,OAAO;AAAA,cACnB,SAAS;AAAA,YAAA;AAAA,UAAA;AAAA,+BAUZ,QAAA,EAAK,WAAU,sDAAqD,aAAU,UAAS,eAAY,QAEjG,UAAA;AAAA,YAAA,OAAO,MAAM,OAAO,kBAAkB,WAAW,gBAAgB,UAAU,MAAM;AAAA,YACjF,mBAAmB,UAAa,iBAAiB,KAChD,qBAAC,QAAA,EAAK,WAAU,6BAA4B,UAAA;AAAA,cAAA;AAAA,cAAE,OAAO,aAAa,cAAc;AAAA,YAAA,EAAA,CAAE;AAAA,UAAA,GAEtF;AAAA,UAGC,+BAAY,eAAA,EAAc;AAAA,UAG1B,WACC,oBAAC,OAAA,EAAI,WAAU,0CAA0C,UAAA,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIzE;AACF;AACA,cAAc,cAAc;AAGrB,MAAM,oBAAoB;AAAA,EAC/B,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU,CAAA;AAAA,EACV,OAAO,CAAA;AAAA,EACP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAC,~~qBAAqB~~,eAAe;AAAA,~~IACzC~~,QAAQ,CAAC,gBAAgB;AAAA,EAAA;AAE7B;"}
1	+ {"version":3,"file":"bulk-action-bar.js","sources":["../../../src/components/BulkActionBar/bulk-action-bar.tsx"],"sourcesContent":["import * as React from 'react'\nimport { X } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/design-system/components/Button/button'\nimport { ButtonDivider } from '@/design-system/components/Button/button-group'\n\n// ── 消費的 SSOT ───────────────────────────────────────────────────────────────\n// - bulk-action-bar.spec.md(本元件 SSOT)\n// - DataTable/data-table.spec.md「L2 選取」(整合方式)\n// - button.spec.md + button-group.tsx(action variant=tertiary,size=md,\n// gap-2 + ButtonDivider 自帶 mx-1 = 12px 視覺距離)\n// - inline-action.spec.md「same-row consistency rule」(close X 同尺寸 md)\n// - tokens/layoutSpace/layoutSpace.spec.md(footer 用 px-loose py-tight)\n// - patterns/overlay-surface/overlay-surface.spec.md SurfaceFooter canonical\n// - Alert(banner)用 description ReactNode 帶 inline link CTA\n\n// ── i18n labels ─────────────────────────────────────────────────────────────\n\n// code-quality-allow: dead-export — public API per spec.md(consumer i18n override hook)\nexport interface BulkActionBarLabels {\n count: (n: number) => string\n clear: string\n hiddenSuffix: (hidden: number) => string\n toolbarAriaLabel: string\n}\n\n// code-quality-allow: dead-export — public API per spec.md(consumer spread + override)\nexport const BULK_ACTION_BAR_DEFAULT_LABELS: BulkActionBarLabels = {\n count: (n) => `已選 ${n} 項`,\n clear: '清除選取',\n hiddenSuffix: (hidden) => `· ${hidden} 個被 filter 隱藏`,\n toolbarAriaLabel: '批次操作',\n}\n\n// ── Props ───────────────────────────────────────────────────────────────────\n\nexport interface BulkActionBarProps extends React.HTMLAttributes<HTMLDivElement> {\n /** 已選 ID,length === 0 時自動隱藏(回傳 null) /\n selection: readonly string[]\n /* Clear 觸發,user 點 X icon 或 Esc(consumer 在 page-level 監聽) /\n onClear?: () => void\n /* 批次 actions(consumer 提供 md Button,variant=tertiary 或 tertiary+danger;不用 primary) /\n actions?: React.ReactNode\n /* Filter 模式:hidden 數量,顯示在 count 區 inline「{N} 已選 · {M} 個被 filter 隱藏」 /\n hiddenByFilter?: number\n /\n 「擴選整個 dataset」狀態(2026-05-13 ship,per user 抓 Alert「已選 5370」但 BulkActionBar\n * 仍顯「已選 50 項」regression):\n * - undefined / null(default):count 走 `selection.length`(page-level 視覺選取)\n * - number:count 走此數值(整個 dataset 擴選後 user 已選的真總數)\n \n Canonical pattern:consumer 把 BulkActionBar 跟「Alert info banner(提示擴選 dataset)」\n * 一起 mount,Alert 點「點此選取全部 N 個」→ setTotalSelected(N) → BulkActionBar count 同步。\n * 對齊 Gmail / Linear / Notion 全選 dataset hint pattern。\n * 詳 `bulk-action-bar.spec.md`「Extend dataset pattern」段。\n /\n totalSelected?: number \| null\n /* i18n labels(Partial,merge with default) /\n labels?: Partial<BulkActionBarLabels>\n}\n\n// ── Component ───────────────────────────────────────────────────────────────\n// 視覺結構(同 SurfaceFooter / DataTable toolbar canonical):\n// px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]\n// gap-2 between elements\n// 全 md Buttons(same-row consistency)\n// <ButtonDivider /> 自帶 mx-1 = 12px 視覺距離\n//\n// Hint banner(擴 dataset 提示)完全外包給 Alert 元件 — consumer 視 ref 圖\n// 黏在 BulkActionBar 上方/下方,用 Alert variant=\"info\" placement=\"fixed\"\n// description={inline link JSX}。BulkActionBar 自己不再有 hint banner slot。\n//\n// 浮起 / fixed positioning 由 consumer wrap 決定(BulkActionBar 不限定 placement)。\n\nconst BulkActionBar = React.forwardRef<HTMLDivElement, BulkActionBarProps>(\n function BulkActionBar(\n { selection, onClear, actions, hiddenByFilter, totalSelected, labels: labelsOverride, className, ...props },\n ref\n ) {\n const labels: BulkActionBarLabels = React.useMemo(\n () => ({ ...BULK_ACTION_BAR_DEFAULT_LABELS, ...labelsOverride }),\n [labelsOverride]\n )\n\n // selection.length === 0 自動藏(對齊 spec 禁止事項 #3)\n if (selection.length === 0) return null\n\n return (\n <div\n ref={ref}\n role=\"toolbar\"\n aria-label={labels.toolbarAriaLabel}\n className={cn(\n 'flex items-center gap-2',\n 'px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]',\n // 上分隔線:bottom toolbar canonical(Linear / Apple Mail / Notion 共識)— 視覺從上方內容收尾\n 'border-t border-divider',\n className\n )}\n {...props}\n >\n {/ X close — md dismiss(2026-05-04 spec update:default placement = footer variant,\n visual weight 對齊 Dialog footer commitment buttons md;same-row consistency 維持)\n 未來若有 top-toolbar variant(覆蓋 sm-density toolbar)→ 該 variant override sm /}\n {onClear && (\n <Button\n variant=\"text\"\n size=\"md\"\n iconOnly\n dismiss\n startIcon={X}\n aria-label={labels.clear}\n onClick={onClear}\n />\n )}\n\n {/ count + filter hidden inline\n color canonical(2026-05-04):count = primary foreground + medium weight\n 理由:count 是 state-bearing 主資訊(「你在 selection mode + N items」),非裝飾\n World-class 共識:Linear/Notion/Carbon/Polaris 均用 primary foreground;muted 化弱化 state signal\n hiddenByFilter suffix 維持 muted(這是次資訊,視覺層次正確) /}\n {/ 2026-05-31 #3:aria-live 通知 SR 選取數變更;#20:補 font-medium 對齊 spec L90 + 上方 comment(state-bearing 主資訊) /}\n <span className=\"text-body text-foreground font-medium tabular-nums\" aria-live=\"polite\" aria-atomic=\"true\">\n {/ 2026-05-13:totalSelected override 走 dataset 擴選後真總數,否則 fallback page-level selection.length /}\n {labels.count(typeof totalSelected === 'number' ? totalSelected : selection.length)}\n {hiddenByFilter !== undefined && hiddenByFilter > 0 && (\n <span className=\"text-fg-muted font-normal\"> {labels.hiddenSuffix(hiddenByFilter)}</span>\n )}\n </span>\n\n {/ divider /}\n {actions && <ButtonDivider />}\n\n {/ batch actions slot(consumer 提供 md Buttons) */}\n {actions && (\n <div className=\"flex items-center gap-2 flex-1 min-w-0\">{actions}</div>\n )}\n </div>\n )\n }\n)\nBulkActionBar.displayName = 'BulkActionBar'\n\n// Story auto-compile metadata\nexport const bulkActionBarMeta = {\n component: 'BulkActionBar',\n family: null,\n variants: {},\n sizes: {},\n states: ['default'],\n tokens: {\n fg: ['text-foreground', 'text-fg-muted'],\n border: ['border-divider'],\n },\n} as const\n\nexport { BulkActionBar }\n"],"names":["BulkActionBar"],"mappings":";;;;;;AA2BO,MAAM,iCAAsD;AAAA,EACjE,OAAO,CAAC,MAAM,MAAM,CAAC;AAAA,EACrB,OAAO;AAAA,EACP,cAAc,CAAC,WAAW,KAAK,MAAM;AAAA,EACrC,kBAAkB;AACpB;AA0CA,MAAM,gBAAgB,MAAM;AAAA,EAC1B,SAASA,eACP,EAAE,WAAW,SAAS,SAAS,gBAAgB,eAAe,QAAQ,gBAAgB,WAAW,GAAG,MAAA,GACpG,KACA;AACA,UAAM,SAA8B,MAAM;AAAA,MACxC,OAAO,EAAE,GAAG,gCAAgC,GAAG;MAC/C,CAAC,cAAc;AAAA,IAAA;AAIjB,QAAI,UAAU,WAAW,EAAG,QAAO;AAEnC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAY,OAAO;AAAA,QACnB,WAAW;AAAA,UACT;AAAA,UACA;AAAA;AAAA,UAEA;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAKH,UAAA;AAAA,UAAA,WACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,UAAQ;AAAA,cACR,SAAO;AAAA,cACP,WAAW;AAAA,cACX,cAAY,OAAO;AAAA,cACnB,SAAS;AAAA,YAAA;AAAA,UAAA;AAAA,+BAUZ,QAAA,EAAK,WAAU,sDAAqD,aAAU,UAAS,eAAY,QAEjG,UAAA;AAAA,YAAA,OAAO,MAAM,OAAO,kBAAkB,WAAW,gBAAgB,UAAU,MAAM;AAAA,YACjF,mBAAmB,UAAa,iBAAiB,KAChD,qBAAC,QAAA,EAAK,WAAU,6BAA4B,UAAA;AAAA,cAAA;AAAA,cAAE,OAAO,aAAa,cAAc;AAAA,YAAA,EAAA,CAAE;AAAA,UAAA,GAEtF;AAAA,UAGC,+BAAY,eAAA,EAAc;AAAA,UAG1B,WACC,oBAAC,OAAA,EAAI,WAAU,0CAA0C,UAAA,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIzE;AACF;AACA,cAAc,cAAc;AAGrB,MAAM,oBAAoB;AAAA,EAC/B,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU,CAAA;AAAA,EACV,OAAO,CAAA;AAAA,EACP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAC,mBAAmB,eAAe;AAAA,IACvC,QAAQ,CAAC,gBAAgB;AAAA,EAAA;AAE7B;"}

package/dist/components/Button/button.d.ts CHANGED Viewed

@@ -22,7 +22,7 @@ import type { LucideIcon } from 'lucide-react';
  *   僅 secondary / tertiary / text 三個 variant 支援 toggle 視覺：
  *     - secondary + pressed → primary-subtle 底、primary 字、透明邊框
  *     - tertiary  + pressed → primary-subtle 底、primary 字、透明邊框（同 secondary 按下視覺）
- *     - text      + pressed → neutral-selected 底，hover 反向變淺，:active 深一階
+ *     - text      + pressed → primary-subtle 底、primary 字、透明邊框（預設 pressedTone='emphasis'，同 secondary/tertiary 按下視覺）；pressedTone='neutral' 時才走 neutral-selected 灰底
  *   primary / link 傳入 pressed 無視覺效果（語意不符）
  *
  * ── Sizes（預設 md）──
@@ -72,7 +72,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
      * 按鈕視覺強調等級。
      * `destructive` / `ghost` 為 shadcn 內部 compat，請勿在應用程式碼中直接使用。
      */
-    variant?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'link' | (string & {});
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'text' | 'link';
     /** 套用危險色（紅色）。可與任何 variant 組合使用。 */
     danger?: boolean;
     /**

package/dist/components/Button/button.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAK9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,QAAA,MAAM,cAAc;;;;;~~8EAgKnB~~,CAAA;AAKD,UAAU,uBAAuB;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AACD,QAAA,MAAM,kBAAkB,wCAAmD,CAAA;AAI3E,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,IAAI,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjE;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,~~GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,~~CAAA;~~IAChF~~,mCAAmC;IACnC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;IACpC,sDAAsD;IACtD,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,oCAAoC;IACpC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,6DAA6D;IAC7D,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAwBD,QAAA,MAAM,MAAM,~~uFAqKX~~,CAAA;AAGD;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwBb,CAAA;AAEV,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,kBAAkB,EAAE,CAAA"}
1	+ {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAK9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,QAAA,MAAM,cAAc;;;;;8EAkKnB,CAAA;AAKD,UAAU,uBAAuB;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AACD,QAAA,MAAM,kBAAkB,wCAAmD,CAAA;AAI3E,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,IAAI,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjE;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;IAChE,mCAAmC;IACnC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;IACpC,sDAAsD;IACtD,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,oCAAoC;IACpC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,6DAA6D;IAC7D,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAwBD,QAAA,MAAM,MAAM,uFA0KX,CAAA;AAGD;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwBb,CAAA;AAEV,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,kBAAkB,EAAE,CAAA"}