npm - @qijenchen/design-system - Versions diffs - 0.1.0-beta.60 → 0.1.0-beta.61 - Mend

@qijenchen/design-system 0.1.0-beta.60 → 0.1.0-beta.61

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 (117) hide show

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

@@ -6,7 +6,7 @@ import { CAT_SOLID_TOKENS, CAT_SUBTLE_TOKENS } from "../../tokens/categorical-co
 import { HoverCard, HoverCardTrigger, HoverCardContent } from "../HoverCard/hover-card.js";
 import { HOVER_DELAY_CLOSE_MS, HOVER_DELAY_RICH_MS } from "../../tokens/motion/motion.js";
 import { Badge } from "../Badge/badge.js";
-import { useTableIsScrolling, useFieldContext } from "../Field/field-context.js";
+import { useTableIsScrolling, useResolvedFieldDisabled } from "../Field/field-context.js";
 const COLOR_MAP = {
   subtle: {
     neutral: { bg: "var(--muted)", text: "var(--foreground)" },
@@ -50,8 +50,7 @@ const AvatarInner = React.forwardRef(
     const [imgError, setImgError] = React.useState(false);
     const documentTheme = useDocumentTheme();
     const isTableScrolling = useTableIsScrolling();
-    const fieldCtx = useFieldContext();
-    const isDisabledInField = (fieldCtx == null ? void 0 : fieldCtx.mode) === "disabled" && (fieldCtx == null ? void 0 : fieldCtx.hasFieldWrapper) === true;
+    const isDisabledInField = useResolvedFieldDisabled();
     const isFill = size === "fill";
     const numSize = isFill ? 32 : size;
     const iconPx = getIconSize(numSize);

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 背景 + 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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"}
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 { useResolvedFieldDisabled, 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:`useResolvedFieldDisabled()`(= fieldCtx.disabled,涵蓋 <Field disabled> 與 <Field mode=\"disabled\">),標準 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 // 2026-06-08 SSOT:欄位內 Avatar 跟隨 <Field disabled>/<Field mode=\"disabled\"> 變淡(fieldCtx-scoped,cell 無 fieldCtx → 不影響)\n const isDisabledInField = useResolvedFieldDisabled()\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/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;;;;;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"}
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,uFAyKX,CAAA;AAGD;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwBb,CAAA;AAEV,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/components/Button/button.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { CircularProgress } from "../CircularProgress/circular-progress.js";
 import { cn } from "../../lib/utils.js";
-import { useFieldContext } from "../Field/field-context.js";
+import { useResolvedFieldSize } from "../Field/field-context.js";
 import { Tooltip, TooltipTrigger, TooltipContent } from "../Tooltip/tooltip.js";
 const buttonVariants = cva(
   [
@@ -194,9 +194,7 @@ const Button = React.forwardRef(
     disabled,
     ...props
   }, ref) => {
-    var _a;
-    const fieldCtx = (_a = useFieldContext) == null ? void 0 : _a();
-    const resolvedSize = size ?? (fieldCtx == null ? void 0 : fieldCtx.size) ?? "md";
+    const resolvedSize = useResolvedFieldSize(size, "md");
     const resolvedIconOnly = iconOnly || dismiss;
     if (process.env.NODE_ENV !== "production" && overlayBadge && !iconOnly) {
       console.warn(

package/dist/components/Button/button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.js","sources":["../../../src/components/Button/button.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.\n// code-quality-allow: file-size — foundational composite(Button + iconOnly + danger + loading + asChild + dismiss + pressedTone)— 跨 7 axis variant 集中 SSOT 一處,拆分會 fragment cva variant catalog。當前 528 < cap 800。\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { CircularProgress } from '@/design-system/components/CircularProgress/circular-progress'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { useFieldContext } from '@/design-system/components/Field/field-context'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/design-system/components/Tooltip/tooltip'\n\n/*\n Button — shadcn 風格，橋接設計系統 token\n \n ── Variants ──\n * primary 主要操作，藍底白字\n * secondary 次要品牌操作，藍框藍字；正面 vs 負面並存時用於正面那個\n * tertiary 一般輔助操作，灰框灰字，hover 轉藍（最常用的非主要按鈕）\n * text 無底色無邊框，hover 顯示灰底（工具列、密集 UI）\n * link 外觀像連結的按鈕（本質仍是 button）\n \n ── danger prop ──\n * danger 套用在任何 variant 上，將顏色改為危險色（紅色）\n \n <Button variant=\"primary\" danger>永久刪除</Button> → 紅底白字（立即不可逆）\n * <Button variant=\"secondary\" danger>移至垃圾桶</Button> → 紅框紅字（點下去還可反悔）\n \n ── pressed prop（toggle）──\n * pressed Toggle 按下狀態（持續 on/off），寫入 aria-pressed + data-state\n * 僅 secondary / tertiary / text 三個 variant 支援 toggle 視覺：\n * - secondary + pressed → primary-subtle 底、primary 字、透明邊框\n * - tertiary + pressed → primary-subtle 底、primary 字、透明邊框（同 secondary 按下視覺）\n * - text + pressed → primary-subtle 底、primary 字、透明邊框（預設 pressedTone='emphasis'，同 secondary/tertiary 按下視覺）；pressedTone='neutral' 時才走 neutral-selected 灰底\n * primary / link 傳入 pressed 無視覺效果（語意不符）\n \n ── Sizes（預設 md）──\n * xs h-field-xs（24px 固定），不隨 density 縮放\n * sm h-field-sm，md=28px / lg=32px\n * md h-field-md，md=32px / lg=36px ← 預設（跟 Field/Input 對齊）\n * lg h-field-lg，md=36px / lg=40px\n * icon-only 不是獨立尺寸 — 加 iconOnly prop 讓任何尺寸變正方形\n \n ── 內部結構 ──\n * [startIcon?] [label] [badge? + endIcon?]\n \n ── 用法範例 ──\n * <Button startIcon={Plus}>新增</Button>\n * <Button variant=\"tertiary\">取消</Button>\n * <Button variant=\"primary\" danger>永久刪除</Button>\n * <Button variant=\"text\" pressed={isPinned} startIcon={Pin} aria-label=\"釘選\" iconOnly />\n * <Button badge={<Badge count={3} />} endIcon={ChevronDown}>通知</Button>\n * <Button size=\"sm\" iconOnly startIcon={Plus} aria-label=\"新增\" />\n * <Button iconOnly startIcon={Bell} aria-label=\"通知 (3 則)\"\n * overlayBadge={<Badge count={3} />} /> ← badge 自動貼 icon 右上角\n \n ── asChild ──\n * <Button asChild><Link to=\"/home\">回首頁</Link></Button>\n /\nconst buttonVariants = cva(\n [\n 'inline-flex items-center justify-center',\n 'whitespace-nowrap font-medium',\n 'border border-transparent',\n 'transition-colors duration-150',\n 'cursor-pointer select-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\n // 2026-05-12 Round 4.5 fix(codex M31 Layer C 抓):`aria-disabled` visual 分支補(per WAI-ARIA APG —\n // aria-disabled 給語意 + visual,但不 suppress functionality;functionality 由 consumer 阻 e.g.\n // RowDragHandle listeners 只在 canDrag spread)。故意不加* `aria-disabled:pointer-events-none`\n // — Round 4 RowDragHandle Tooltip flicker fix root cause:aria-disabled buttons 必保 pointer events\n // 讓 Radix Tooltip pointerenter 通過。HTML `disabled` 保 PE:none(完全 inactive)。\n 'disabled:pointer-events-none',\n // 2026-05-12 fix v2(playwright pixel-quantified verify 抓 opacity=1 不生效):\n // `opacity-disabled` 是 custom Tailwind v4 `@utility`(opacity.css:21),variant prefix\n // `aria-disabled:` 跟 custom @utility 不 compose(`aria-disabled:cursor-not-allowed` 標準\n // utility 能 work,custom 不行)。改 arbitrary value `opacity-[var(--opacity-disabled)]`\n // 繞 custom @utility 限制(Tailwind v4 arbitrary value 直接生 `opacity: var(--opacity-disabled)`)。\n 'aria-disabled:opacity-[var(--opacity-disabled)]',\n 'rounded-md',\n // Defensive:SVG 不被 flex shrink 擠扁(防 inner-area 計算誤差導致 icon 被擠成\n // width<intrinsic 的 asymmetric 顯示)。詳 ICON_ONLY_PX 段 rationale。\n '[&_svg]:shrink-0',\n ],\n {\n variants: {\n variant: {\n primary: [\n 'bg-primary text-on-emphasis',\n 'hover:bg-primary-hover',\n 'active:bg-primary-active',\n 'disabled:bg-disabled disabled:text-fg-disabled disabled:border-transparent',\n ],\n secondary: [\n 'bg-surface text-primary border-primary',\n 'hover:text-primary-hover hover:border-primary-hover',\n 'active:text-primary-active active:border-primary-active',\n // Overlay trigger active(asChild Popover/DropdownMenu trigger)— 維持 hover 樣式\n // (canonical 對齊 inline-action.spec.md:trigger 維持 host hover 直到 overlay 關閉)\n 'data-[state=open]:text-primary-hover data-[state=open]:border-primary-hover',\n 'disabled:bg-transparent disabled:text-fg-disabled disabled:border-border',\n // 2026-05-21 v12:Toggle pressed 視覺移到 compoundVariants(variant × pressedTone),\n // 同時支援 emphasis(藍底)/ neutral(灰底)兩 tone。詳 cva.compoundVariants 段。\n ],\n tertiary: [\n 'bg-surface text-foreground border-border',\n 'hover:text-primary-hover hover:border-primary-hover',\n 'active:text-primary-active active:border-primary-active',\n // Overlay trigger active — 維持 hover 樣式(同 secondary 邏輯)\n 'data-[state=open]:text-primary-hover data-[state=open]:border-primary-hover',\n 'disabled:bg-transparent disabled:text-fg-disabled disabled:border-border',\n ],\n text: [\n 'bg-transparent text-foreground border-transparent',\n 'hover:bg-neutral-hover',\n 'active:bg-neutral-active',\n // Overlay trigger active — 維持 hover 樣式(canonical 2026-05-02 改:hover token,\n // 不另開 selected 4% — 對齊 shadcn/Radix/Material 狀態極簡派,跨 host 一致)\n 'data-[state=open]:bg-neutral-hover',\n 'disabled:bg-transparent disabled:text-fg-disabled',\n ],\n link: [\n 'bg-transparent text-primary border-transparent',\n 'hover:text-primary-hover',\n 'active:text-primary-active',\n 'disabled:text-fg-disabled',\n ],\n },\n danger: {\n true: '', // 實際樣式由 compoundVariants 提供\n },\n /*\n 2026-05-21 v12 — pressed visual tone(per user「我認同這一個方向,然後預設emphasis」):\n * emphasis = 淡藍底(toolbar functional toggle / 篩選啟用 / 面板開關 — Figma toolbar /\n * Linear toolbar / Material ToggleButton 共識)\n * neutral = 灰底(sidebar/contextual nav row pressed — Linear / Notion / VS Code Activity Bar 共識)\n * 預設 `emphasis` per user directive。實際樣式由 compoundVariants(variant × pressedTone)套用。\n * 只在 secondary / tertiary / text variant 觸發 toggle 視覺;primary / link 無視覺效果。\n /\n pressedTone: {\n emphasis: '',\n neutral: '',\n },\n size: {\n xs: 'h-field-xs px-2 text-caption leading-compact gap-0',\n sm: 'h-field-sm px-3 min-w-14 text-body leading-compact gap-1',\n md: 'h-field-md px-3 min-w-16 text-body leading-compact gap-1',\n lg: 'h-field-lg px-3 min-w-20 text-body-lg leading-compact gap-1',\n },\n },\n compoundVariants: [\n // primary + danger → 紅底白字（立即不可逆操作）\n {\n variant: 'primary',\n danger: true,\n class: [\n 'bg-error text-on-emphasis border-transparent',\n 'hover:bg-error-hover',\n 'active:bg-error-active',\n ],\n },\n // secondary + danger → 紅框紅字（有確認步驟的危險操作）\n {\n variant: 'secondary',\n danger: true,\n class: [\n 'bg-surface text-error border-error',\n 'hover:text-error-hover hover:border-error-hover',\n 'active:text-error-active active:border-error-active',\n ],\n },\n // text + danger → 紅字，hover 灰底\n {\n variant: 'text',\n danger: true,\n class: [\n 'text-error',\n 'hover:bg-neutral-hover hover:text-error-hover',\n 'active:bg-neutral-active active:text-error-active',\n ],\n },\n // ── 2026-05-21 v12 Toggle pressed(variant × pressedTone)──────────────────\n // 視覺由 data-[state=on] + aria-pressed(Radix overlay trigger fallback)觸發\n //\n // emphasis tone:藍底(primary-subtle / primary 字)— functional toggle\n {\n variant: ['secondary', 'tertiary', 'text'],\n pressedTone: 'emphasis',\n class: [\n 'data-[state=on]:bg-primary-subtle data-[state=on]:text-primary data-[state=on]:border-transparent',\n 'data-[state=on]:hover:text-primary-hover',\n 'data-[state=on]:active:text-primary-active',\n 'data-[state=on]:disabled:bg-disabled data-[state=on]:disabled:text-fg-disabled data-[state=on]:disabled:border-transparent',\n // aria-pressed fallback(Radix overlay trigger override data-state 時仍生效)\n 'aria-pressed:bg-primary-subtle aria-pressed:text-primary aria-pressed:border-transparent',\n 'aria-pressed:hover:text-primary-hover',\n ],\n },\n // neutral tone:灰底(neutral-selected family)— sidebar/contextual nav pressed\n {\n variant: ['secondary', 'tertiary', 'text'],\n pressedTone: 'neutral',\n class: [\n 'data-[state=on]:bg-neutral-selected data-[state=on]:text-foreground data-[state=on]:border-transparent',\n 'data-[state=on]:hover:bg-neutral-selected-hover',\n 'data-[state=on]:active:bg-neutral-selected-active',\n 'data-[state=on]:disabled:bg-transparent data-[state=on]:disabled:text-fg-disabled',\n // aria-pressed fallback\n 'aria-pressed:bg-neutral-selected aria-pressed:text-foreground aria-pressed:border-transparent',\n 'aria-pressed:hover:bg-neutral-selected-hover',\n ],\n },\n ],\n defaultVariants: {\n // labeled 預設 = tertiary(2026-06-06 從 primary 改;iconOnly 預設 = text,由 resolvedVariant 注入)。\n // 真正預設邏輯在元件 resolvedVariant(L394);此 cva default 供直接 buttonVariants() 呼叫者一致。\n variant: 'tertiary',\n size: 'md',\n pressedTone: 'emphasis',\n },\n }\n)\n\n// ── ButtonGroup Context ──────────────────────────────────────────────────────\n// ButtonGroup provides this context; Button reads it for fullWidth injection.\n// Context lives here (not in button-group.tsx) so there is no circular import.\ninterface ButtonGroupContextValue {\n fullWidth?: boolean\n}\nconst ButtonGroupContext = React.createContext<ButtonGroupContextValue>({})\n\ntype InternalVariant = VariantProps<typeof buttonVariants>['variant']\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n Omit<VariantProps<typeof buttonVariants>, 'variant' \| 'danger'> {\n /\n 將樣式套用至子元件（e.g. React Router Link）。\n \n ⚠️ icon-only + asChild 警告:當 `iconOnly={true}` 且 `asChild={true}` 時,內建\n * Tooltip wrapper 不啟動(Radix Slot 不接受多 child)。consumer 必須自管 child 的 `aria-label`\n * 給 screen reader,並視需要自行包 `<Tooltip>`(對齊 Polaris / Radix asChild idiom)。\n * Button 不會主動補 tooltip — 否則會破壞 Slot 單 child 規則。\n /\n asChild?: boolean\n /\n 按鈕視覺強調等級。\n * `destructive` / `ghost` 為 shadcn 內部 compat，請勿在應用程式碼中直接使用。\n /\n variant?: 'primary' \| 'secondary' \| 'tertiary' \| 'text' \| 'link'\n /* 套用危險色（紅色）。可與任何 variant 組合使用。 /\n danger?: boolean\n /\n Toggle 按下狀態（持續 on/off）。設定時 Button 變為 toggle：\n * - 自動寫入 `aria-pressed` + `data-state=\"on\" \| \"off\"`\n * - 樣式由 variant × `pressedTone` 的 compoundVariants 套用\n * - 僅 secondary / tertiary / text 有 toggle 視覺；primary / link 傳入無效果\n \n 不傳此 prop 時 Button 就是一般按鈕，不帶 aria-pressed。\n /\n pressed?: boolean\n /\n Pressed 視覺色調(2026-05-21 v12 加):\n * - `'emphasis'`(預設)→ 淡藍底 / primary 字(對齊 Figma toolbar / Linear toolbar /\n * Material ToggleButton 共識 — toolbar functional toggle / 篩選啟用 / 面板開關)\n * - `'neutral'` → 灰底 / foreground 字(對齊 Linear / Notion / VS Code Activity Bar\n * 共識 — sidebar/contextual nav row pressed)\n \n 僅在 `pressed` 啟用且 variant ∈ {secondary, tertiary, text} 時生效。\n * 跨 toggle context 維持單一 prop API,consumer 視語意選 tone 不另開 variant。\n /\n pressedTone?: 'emphasis' \| 'neutral'\n /* 左側 icon（LucideIcon），最多一個，loading 時自動替換為 spinner /\n startIcon?: LucideIcon\n /* 右側 badge（ReactNode），通常傳入計數指示器 /\n badge?: React.ReactNode\n /\n Overlay badge(iconOnly 專用)。接收 `<Badge>` 元素,Button 內部自動定位在 startIcon 右上角——\n * badge 中心對齊 icon 的 top-right corner(Material BadgedBox / iOS App icon canonical),不是按鈕邊緣。\n * 解決手刻 `relative + absolute -top-1 -right-1` 讓 badge 飄在按鈕 chrome 右上的問題。\n \n 世界級對照:Material BadgedBox、iOS App Icon、Ant Badge wrap icon,badge 相對於視覺重心(icon)。\n * 只在 `iconOnly=true` 時生效;非 iconOnly 時應該用 inline `badge` prop 放 suffix 位置。\n /\n overlayBadge?: React.ReactNode\n /* 右側 icon（LucideIcon），放在 badge 右邊，通常用於 ChevronDown 等方向指示 /\n endIcon?: LucideIcon\n /* Icon-only 模式：移除 padding，變為正方形（必須同時設定 aria-label） /\n iconOnly?: boolean\n /\n Dismiss 視覺類(X close only canonical)。專用於 X(close)icon 的 dismiss 語意 —\n * 「關閉 surface / 忽略訊息」。不適用 Trash / Delete / Clear / Remove 等 destructive / clear 操作。\n \n 自動套用:\n * - `variant=\"text\"`(強制 override 其他 variant)\n * - `iconOnly=true`(強制)\n * - Icon 色 override:`fg-muted` → hover `foreground`(跟 Inline Action dismiss 視覺一致)\n \n 典型 case:Dialog / Sheet / Popover / Alert / Toast / Coachmark 的 chrome corner close X\n * (action group region — corner 可多 action,close 左側加 Separator + refresh / share 等)。\n \n 非 dismiss(不套此 prop):\n * - Trash / Delete → destructive action,Button 用一般 variant 或 Inline Action(按 row size 判)\n * - Clear → 欄位清空,用 Inline Action\n * - Remove → collection 移除,用一般 Button / Inline Action\n \n 詳見 button.spec.md「Dismiss 視覺類」段 + patterns/element-anatomy/item-anatomy.spec.md\n * 「Dismiss canonical — X close only」段。\n /\n dismiss?: boolean\n /* 載入中狀態：startIcon 替換為 spinner，自動 disabled；badge / endIcon 維持顯示以避免 layout shift /\n loading?: boolean\n /* 撐滿父容器寬度 /\n fullWidth?: boolean\n}\n\n/\n Icon-only padding — calc `(field-height - icon-size) / 2` per size。\n \n 設計:startIcon 到左邊距離 = padding = `(height - icon) / 2`。\n * 純 icon-only 時 width = 2padding + icon = height → 自然正方形,不需要 aspect-square。\n 有 suffix(badge / endIcon)時 width = 2pad + icon + gap + suffix > height → 自然長方形。\n StartIcon 到左邊距離始終不變,形狀自動適應內容。\n \n 用 CSS var 讓 density 切換時 padding 自動跟著算(field-height 會變)。\n /\n// IconOnly 用 padding-free + aspect-square + flex-center 的 Polaris/Atlassian idiom\n// (M17 SSOT 必可傳播 — 取代 4 個 size 的 magic-number 公式):\n// - aspect-square 鎖 width=height(來自 h-field-X)\n// - p-0 移除 px-3 (label 模式) override\n// - flex justify-center items-center(base 已有)→ SVG 自動視覺置中\n// 結果:0 magic number,0 公式,0 border-deduction,任何 size / icon size 都自然正方形。\n// World-class 對照:Polaris + Atlassian iconOnly 走 padding-free 派(Material/Ant 走\n// padding-based)。我們選 padding-free 因 SSOT 性更強(SegmentedControl / Tag dismiss\n// 等 host 全可共用同 utility class,無需各自抄公式)。詳 button.spec.md「iconOnly 鐵律」。\nconst ICON_ONLY_BASE = 'aspect-square p-0 min-w-0 gap-0'\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant: variantProp,\n danger: dangerProp,\n size,\n asChild = false,\n startIcon: StartIcon,\n badge,\n overlayBadge,\n endIcon: EndIcon,\n iconOnly = false,\n dismiss = false,\n loading = false,\n fullWidth = false,\n pressed,\n pressedTone, // 2026-06-05 fix(deep-audit P0):原漏 destructure → 落入 ...props 噴到 DOM + 永遠用 cva default\n children,\n disabled,\n ...props\n },\n ref\n ) => {\n // ── FieldContext：在 Field 內時自動讀 size，讓 Button 跟 Input 同高 ──\n const fieldCtx = useFieldContext?.()\n const resolvedSize = size ?? (fieldCtx?.size as typeof size) ?? 'md'\n\n // ── Dismiss 視覺類 override(2026-04-22 cross-implementation dimming canonical) ──\n // dismiss=true 強制:variant=\"text\" + iconOnly=true + icon 色弱化(fg-muted → hover foreground)\n // 跟 Inline Action dismiss 視覺一致。詳見 button.spec.md「Dismiss 視覺類」。\n const resolvedIconOnly = iconOnly \|\| dismiss\n\n // ── Dev-mode warning:overlayBadge 只適用 iconOnly ──\n // 有 label 的 Button 傳入 overlayBadge 會被忽略(只 render icon / 不渲染 overlay slot),\n // 靜默忽略會讓 consumer 誤以為「傳了但位置錯」。Dev mode 印 warning 引導改用 `badge` prop\n // (inline 位置,跟 label 並列)或改 `iconOnly`。Spec SSOT:badge.spec.md「Overlay 適用元件」。\n if (process.env.NODE_ENV !== 'production' && overlayBadge && !iconOnly) {\n // eslint-disable-next-line no-console\n console.warn(\n '[DS Button] `overlayBadge` 只適用於 `iconOnly` Button。有 label 的 Button 請改用 `badge` prop(inline 位置,跟 label 並列),或移除 label 改為 iconOnly。SSOT:badge.spec.md「Overlay 適用元件 canonical」節。'\n )\n }\n\n // 2026-05-23 deep-audit Phase A.4 Decision 1(user verbatim「決策ㄧ照你建議做」):dev-warn `iconOnly + (endIcon\|badge)` 並用。\n // Spec SSOT:button.spec.md「iconOnly 嚴格定義為『只有一個 icon,正方形』,不可與 endIcon 或 badge 並用」。\n // 例外:overlayBadge 跟 iconOnly 並用 canonical(L372 反向 warn 已 cover)。\n // 不擋 image canonical「icon + 下拉指示 = 不加 iconOnly + startIcon + endIcon + aria-label」(那 case iconOnly=false 不 trigger)。\n if (process.env.NODE_ENV !== 'production' && iconOnly && (EndIcon !== undefined \|\| badge != null)) {\n // eslint-disable-next-line no-console\n console.warn(\n '[DS Button] `iconOnly` 嚴格定義為「只有一個 icon,正方形」,不可與 `endIcon` 或 `badge` 並用。若需 icon + 下拉指示 → 不加 iconOnly + startIcon + endIcon + aria-label;若需 icon + 角標 → iconOnly + overlayBadge。SSOT:button.spec.md `iconOnly 的邊界` 節 + `badge.spec.md` Overlay 適用元件 canonical。'\n )\n }\n\n // shadcn compat:AlertDialog、Toast 等元件內部會傳入這些 alias,\n // 在此靜默轉換,不暴露到型別或自動完成。\n // dismiss=true 強制 variant=text(dismiss canonical);override 其他 variant 傳入。\n // 2026-06-06 預設 emphasis 改低(對齊世界級:MUI 預設 text / Ant 預設 default / Polaris 低 emphasis —\n // 預設 primary CTA 是 outlier)。labeled 無 variant → `tertiary`(中性外框,清楚可點性,再按重要程度升 primary);\n // iconOnly 無 variant → `text`(toolbar ghost,對齊 action-bar.spec.md「純動作工具/低重量輔助 → text」+\n // Material 3「icon-only = no fill」)。CTA 必 explicit `variant=\"primary\"`(不靠預設)。dismiss 仍強制 text。\n const resolvedVariant: InternalVariant =\n dismiss ? 'text' :\n (variantProp as string) === 'destructive' ? 'primary' :\n (variantProp as string) === 'ghost' ? 'text' :\n (variantProp as InternalVariant) ?? (iconOnly ? 'text' : 'tertiary')\n\n const resolvedDanger = dangerProp \|\| (variantProp as string) === 'destructive'\n\n // ButtonGroup context：vertical group 自動注入 fullWidth\n const groupCtx = React.useContext(ButtonGroupContext)\n const resolvedFullWidth = fullWidth \|\| !!groupCtx.fullWidth\n\n const Comp = asChild ? Slot : 'button'\n const iconSize = resolvedSize === 'lg' ? 20 : 16\n\n // loading 行為：spinner 永遠在 prefix 位置\n // 有 prefix icon → icon 換成 spinner（同位置，零 layout shift）\n // 無 prefix icon → spinner 加在文字左邊（按鈕略微變寬，可接受）\n const hasSuffix = badge != null \|\| EndIcon !== undefined\n\n // icon-only 自動 tooltip：從 props 提取 aria-label，同時保留在 DOM\n const { 'aria-label': ariaLabel, ...restProps } = props\n\n // Toggle 狀態：pressed 定義時自動寫入 aria-pressed + data-state。\n // 未定義時不寫入任何 toggle 屬性（按鈕為一般 action button）。\n // 樣式由 cva 的 data-[state=on] 分支套用——secondary/tertiary 走 primary-subtle，\n // text 走 neutral-selected family；primary/link 不定義 on 分支，傳入無效果。\n const toggleAttrs =\n pressed === undefined\n ? {}\n : { 'aria-pressed': pressed, 'data-state': pressed ? 'on' : 'off' }\n\n // Chrome-unbounded marker(2026-04-22 v5 canonical):button 若無視覺邊界(text variant 或 dismiss),\n // 標記 data-unbounded=\"true\"。SurfaceHeader 透過 [&_[data-unbounded]]:my-[...] 套負 margin\n // 讓 layout 佔位縮到 24(chrome-header-height 幾何)— button native size 與 touch target 不變。\n // 詳 overlay-surface.spec.md「Chrome dismiss size canonical」\n const unboundedAttr =\n resolvedVariant === 'text' \|\| dismiss ? { 'data-unbounded': 'true' } : {}\n\n const buttonEl = (\n <Comp\n className={cn(\n buttonVariants({ variant: resolvedVariant, danger: resolvedDanger, size: resolvedSize, pressedTone, className }),\n // iconOnly 鐵律:padding-free + aspect-square + flex-center (Polaris idiom)\n // 0 magic-number 0 公式自動正方形。詳 ICON_ONLY_BASE rationale。\n resolvedIconOnly && ICON_ONLY_BASE,\n // Dismiss 視覺弱化:override Button text variant 預設 foreground 為 fg-muted → hover foreground\n // 跟 Inline Action dismiss 視覺一致(cross-implementation dimming canonical)\n dismiss && 'text-fg-muted hover:text-foreground',\n resolvedFullWidth && 'w-full',\n )}\n ref={ref}\n type=\"button\"\n disabled={disabled \|\| loading}\n aria-busy={loading \|\| undefined}\n aria-label={ariaLabel}\n {...toggleAttrs}\n {...unboundedAttr}\n {...restProps}\n >\n {loading ? (\n <CircularProgress size={iconSize} className=\"text-current\" />\n ) : StartIcon ? (\n resolvedIconOnly && overlayBadge ? (\n // Overlay badge canonical:wrapper 貼 icon 尺寸,badge 中心對齊 icon top-right corner\n // (Material BadgedBox / iOS App icon),不是 button chrome 角。\n //\n // CSS 細節(2026-04-20 bug fix):用 `inline-block` + 明確 width/height + `leading-none`\n // 避免 `inline-flex` span 在 Button flex container 內被撐高/撐寬(inline-flex 的 span\n // 在某些瀏覽器下會把絕對定位子元素的 translate 計算基準搞錯,造成 badge 噴飛、Button\n // aspect-square 失效)。明確給 span width/height = iconSize 鎖住 positioning context。\n <span\n className=\"relative inline-block leading-none shrink-0 pointer-events-none\"\n style={{ width: iconSize, height: iconSize }}\n >\n <StartIcon size={iconSize} aria-hidden />\n <span className=\"absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 pointer-events-auto\">\n {overlayBadge}\n </span>\n </span>\n ) : (\n <StartIcon size={iconSize} aria-hidden />\n )\n ) : null}\n {children != null && <span className=\"px-1\">{children}</span>}\n {hasSuffix && (\n <span className=\"inline-flex items-center gap-1\">\n {badge}\n {EndIcon && <EndIcon size={iconSize} aria-hidden />}\n </span>\n )}\n </Comp>\n )\n\n // icon-only + aria-label → 自動包 Tooltip（tooltip 是元件保證的行為）\n // 不建立獨立 TooltipProvider——依賴全域 Provider，\n // 這樣所有 tooltip 共享同一組 delay 參數和 warm-up 機制\n if (resolvedIconOnly && typeof ariaLabel === 'string' && !asChild) {\n return (\n <Tooltip>\n <TooltipTrigger asChild>{buttonEl}</TooltipTrigger>\n <TooltipContent>{ariaLabel}</TooltipContent>\n </Tooltip>\n )\n }\n\n return buttonEl\n }\n)\nButton.displayName = 'Button'\n\n/\n componentMeta — Story Auto-Compile 系統消費的結構化 canonical\n * (見 .claude/planning/story-auto-compile.md Phase 1)\n \n compile-stories.mjs 讀本 export + spec.md frontmatter 產出\n * anatomy.stories.tsx 的 variant/size/state/token 矩陣 canonical section。\n \n Keys 必跟 buttonVariants cva + spec frontmatter 對齊(compile-time 驗證)。\n */\nexport const buttonMeta = {\n component: 'Button',\n family: 3, // Pill Layout\n variants: {\n primary: { purpose: '主要 action / CTA' },\n secondary: { purpose: '次要 action(陪襯 primary)' },\n tertiary: { purpose: '第三級 action(tool-like)' },\n text: { purpose: '文字樣式 action(low emphasis / toolbar)' },\n link: { purpose: '內文連結(inline reading)' },\n },\n sizes: {\n xs: { fieldHeight: 24, iconSize: 16, typography: 'body' },\n sm: { fieldHeight: 28, iconSize: 16, typography: 'body' },\n md: { fieldHeight: 32, iconSize: 16, typography: 'body' },\n lg: { fieldHeight: 40, iconSize: 20, typography: 'body-lg' },\n },\n states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n tokens: {\n bg: ['--primary', '--primary-hover', '--primary-active', '--bg-disabled'],\n fg: ['--on-emphasis', '--fg-disabled'],\n ring: ['--ring'],\n },\n defaultVariant: 'primary',\n defaultSize: 'md',\n} as const\n\nexport { Button, buttonVariants, ButtonGroupContext }\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"button.js","sources":["../../../src/components/Button/button.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.\n// code-quality-allow: file-size — foundational composite(Button + iconOnly + danger + loading + asChild + dismiss + pressedTone)— 跨 7 axis variant 集中 SSOT 一處,拆分會 fragment cva variant catalog。當前 528 < cap 800。\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { CircularProgress } from '@/design-system/components/CircularProgress/circular-progress'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { useResolvedFieldSize } from '@/design-system/components/Field/field-context'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/design-system/components/Tooltip/tooltip'\n\n/*\n Button — shadcn 風格，橋接設計系統 token\n \n ── Variants ──\n * primary 主要操作，藍底白字\n * secondary 次要品牌操作，藍框藍字；正面 vs 負面並存時用於正面那個\n * tertiary 一般輔助操作，灰框灰字，hover 轉藍（最常用的非主要按鈕）\n * text 無底色無邊框，hover 顯示灰底（工具列、密集 UI）\n * link 外觀像連結的按鈕（本質仍是 button）\n \n ── danger prop ──\n * danger 套用在任何 variant 上，將顏色改為危險色（紅色）\n \n <Button variant=\"primary\" danger>永久刪除</Button> → 紅底白字（立即不可逆）\n * <Button variant=\"secondary\" danger>移至垃圾桶</Button> → 紅框紅字（點下去還可反悔）\n \n ── pressed prop（toggle）──\n * pressed Toggle 按下狀態（持續 on/off），寫入 aria-pressed + data-state\n * 僅 secondary / tertiary / text 三個 variant 支援 toggle 視覺：\n * - secondary + pressed → primary-subtle 底、primary 字、透明邊框\n * - tertiary + pressed → primary-subtle 底、primary 字、透明邊框（同 secondary 按下視覺）\n * - text + pressed → primary-subtle 底、primary 字、透明邊框（預設 pressedTone='emphasis'，同 secondary/tertiary 按下視覺）；pressedTone='neutral' 時才走 neutral-selected 灰底\n * primary / link 傳入 pressed 無視覺效果（語意不符）\n \n ── Sizes（預設 md）──\n * xs h-field-xs（24px 固定），不隨 density 縮放\n * sm h-field-sm，md=28px / lg=32px\n * md h-field-md，md=32px / lg=36px ← 預設（跟 Field/Input 對齊）\n * lg h-field-lg，md=36px / lg=40px\n * icon-only 不是獨立尺寸 — 加 iconOnly prop 讓任何尺寸變正方形\n \n ── 內部結構 ──\n * [startIcon?] [label] [badge? + endIcon?]\n \n ── 用法範例 ──\n * <Button startIcon={Plus}>新增</Button>\n * <Button variant=\"tertiary\">取消</Button>\n * <Button variant=\"primary\" danger>永久刪除</Button>\n * <Button variant=\"text\" pressed={isPinned} startIcon={Pin} aria-label=\"釘選\" iconOnly />\n * <Button badge={<Badge count={3} />} endIcon={ChevronDown}>通知</Button>\n * <Button size=\"sm\" iconOnly startIcon={Plus} aria-label=\"新增\" />\n * <Button iconOnly startIcon={Bell} aria-label=\"通知 (3 則)\"\n * overlayBadge={<Badge count={3} />} /> ← badge 自動貼 icon 右上角\n \n ── asChild ──\n * <Button asChild><Link to=\"/home\">回首頁</Link></Button>\n /\nconst buttonVariants = cva(\n [\n 'inline-flex items-center justify-center',\n 'whitespace-nowrap font-medium',\n 'border border-transparent',\n 'transition-colors duration-150',\n 'cursor-pointer select-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\n // 2026-05-12 Round 4.5 fix(codex M31 Layer C 抓):`aria-disabled` visual 分支補(per WAI-ARIA APG —\n // aria-disabled 給語意 + visual,但不 suppress functionality;functionality 由 consumer 阻 e.g.\n // RowDragHandle listeners 只在 canDrag spread)。故意不加* `aria-disabled:pointer-events-none`\n // — Round 4 RowDragHandle Tooltip flicker fix root cause:aria-disabled buttons 必保 pointer events\n // 讓 Radix Tooltip pointerenter 通過。HTML `disabled` 保 PE:none(完全 inactive)。\n 'disabled:pointer-events-none',\n // 2026-05-12 fix v2(playwright pixel-quantified verify 抓 opacity=1 不生效):\n // `opacity-disabled` 是 custom Tailwind v4 `@utility`(opacity.css:21),variant prefix\n // `aria-disabled:` 跟 custom @utility 不 compose(`aria-disabled:cursor-not-allowed` 標準\n // utility 能 work,custom 不行)。改 arbitrary value `opacity-[var(--opacity-disabled)]`\n // 繞 custom @utility 限制(Tailwind v4 arbitrary value 直接生 `opacity: var(--opacity-disabled)`)。\n 'aria-disabled:opacity-[var(--opacity-disabled)]',\n 'rounded-md',\n // Defensive:SVG 不被 flex shrink 擠扁(防 inner-area 計算誤差導致 icon 被擠成\n // width<intrinsic 的 asymmetric 顯示)。詳 ICON_ONLY_PX 段 rationale。\n '[&_svg]:shrink-0',\n ],\n {\n variants: {\n variant: {\n primary: [\n 'bg-primary text-on-emphasis',\n 'hover:bg-primary-hover',\n 'active:bg-primary-active',\n 'disabled:bg-disabled disabled:text-fg-disabled disabled:border-transparent',\n ],\n secondary: [\n 'bg-surface text-primary border-primary',\n 'hover:text-primary-hover hover:border-primary-hover',\n 'active:text-primary-active active:border-primary-active',\n // Overlay trigger active(asChild Popover/DropdownMenu trigger)— 維持 hover 樣式\n // (canonical 對齊 inline-action.spec.md:trigger 維持 host hover 直到 overlay 關閉)\n 'data-[state=open]:text-primary-hover data-[state=open]:border-primary-hover',\n 'disabled:bg-transparent disabled:text-fg-disabled disabled:border-border',\n // 2026-05-21 v12:Toggle pressed 視覺移到 compoundVariants(variant × pressedTone),\n // 同時支援 emphasis(藍底)/ neutral(灰底)兩 tone。詳 cva.compoundVariants 段。\n ],\n tertiary: [\n 'bg-surface text-foreground border-border',\n 'hover:text-primary-hover hover:border-primary-hover',\n 'active:text-primary-active active:border-primary-active',\n // Overlay trigger active — 維持 hover 樣式(同 secondary 邏輯)\n 'data-[state=open]:text-primary-hover data-[state=open]:border-primary-hover',\n 'disabled:bg-transparent disabled:text-fg-disabled disabled:border-border',\n ],\n text: [\n 'bg-transparent text-foreground border-transparent',\n 'hover:bg-neutral-hover',\n 'active:bg-neutral-active',\n // Overlay trigger active — 維持 hover 樣式(canonical 2026-05-02 改:hover token,\n // 不另開 selected 4% — 對齊 shadcn/Radix/Material 狀態極簡派,跨 host 一致)\n 'data-[state=open]:bg-neutral-hover',\n 'disabled:bg-transparent disabled:text-fg-disabled',\n ],\n link: [\n 'bg-transparent text-primary border-transparent',\n 'hover:text-primary-hover',\n 'active:text-primary-active',\n 'disabled:text-fg-disabled',\n ],\n },\n danger: {\n true: '', // 實際樣式由 compoundVariants 提供\n },\n /*\n 2026-05-21 v12 — pressed visual tone(per user「我認同這一個方向,然後預設emphasis」):\n * emphasis = 淡藍底(toolbar functional toggle / 篩選啟用 / 面板開關 — Figma toolbar /\n * Linear toolbar / Material ToggleButton 共識)\n * neutral = 灰底(sidebar/contextual nav row pressed — Linear / Notion / VS Code Activity Bar 共識)\n * 預設 `emphasis` per user directive。實際樣式由 compoundVariants(variant × pressedTone)套用。\n * 只在 secondary / tertiary / text variant 觸發 toggle 視覺;primary / link 無視覺效果。\n /\n pressedTone: {\n emphasis: '',\n neutral: '',\n },\n size: {\n xs: 'h-field-xs px-2 text-caption leading-compact gap-0',\n sm: 'h-field-sm px-3 min-w-14 text-body leading-compact gap-1',\n md: 'h-field-md px-3 min-w-16 text-body leading-compact gap-1',\n lg: 'h-field-lg px-3 min-w-20 text-body-lg leading-compact gap-1',\n },\n },\n compoundVariants: [\n // primary + danger → 紅底白字（立即不可逆操作）\n {\n variant: 'primary',\n danger: true,\n class: [\n 'bg-error text-on-emphasis border-transparent',\n 'hover:bg-error-hover',\n 'active:bg-error-active',\n ],\n },\n // secondary + danger → 紅框紅字（有確認步驟的危險操作）\n {\n variant: 'secondary',\n danger: true,\n class: [\n 'bg-surface text-error border-error',\n 'hover:text-error-hover hover:border-error-hover',\n 'active:text-error-active active:border-error-active',\n ],\n },\n // text + danger → 紅字，hover 灰底\n {\n variant: 'text',\n danger: true,\n class: [\n 'text-error',\n 'hover:bg-neutral-hover hover:text-error-hover',\n 'active:bg-neutral-active active:text-error-active',\n ],\n },\n // ── 2026-05-21 v12 Toggle pressed(variant × pressedTone)──────────────────\n // 視覺由 data-[state=on] + aria-pressed(Radix overlay trigger fallback)觸發\n //\n // emphasis tone:藍底(primary-subtle / primary 字)— functional toggle\n {\n variant: ['secondary', 'tertiary', 'text'],\n pressedTone: 'emphasis',\n class: [\n 'data-[state=on]:bg-primary-subtle data-[state=on]:text-primary data-[state=on]:border-transparent',\n 'data-[state=on]:hover:text-primary-hover',\n 'data-[state=on]:active:text-primary-active',\n 'data-[state=on]:disabled:bg-disabled data-[state=on]:disabled:text-fg-disabled data-[state=on]:disabled:border-transparent',\n // aria-pressed fallback(Radix overlay trigger override data-state 時仍生效)\n 'aria-pressed:bg-primary-subtle aria-pressed:text-primary aria-pressed:border-transparent',\n 'aria-pressed:hover:text-primary-hover',\n ],\n },\n // neutral tone:灰底(neutral-selected family)— sidebar/contextual nav pressed\n {\n variant: ['secondary', 'tertiary', 'text'],\n pressedTone: 'neutral',\n class: [\n 'data-[state=on]:bg-neutral-selected data-[state=on]:text-foreground data-[state=on]:border-transparent',\n 'data-[state=on]:hover:bg-neutral-selected-hover',\n 'data-[state=on]:active:bg-neutral-selected-active',\n 'data-[state=on]:disabled:bg-transparent data-[state=on]:disabled:text-fg-disabled',\n // aria-pressed fallback\n 'aria-pressed:bg-neutral-selected aria-pressed:text-foreground aria-pressed:border-transparent',\n 'aria-pressed:hover:bg-neutral-selected-hover',\n ],\n },\n ],\n defaultVariants: {\n // labeled 預設 = tertiary(2026-06-06 從 primary 改;iconOnly 預設 = text,由 resolvedVariant 注入)。\n // 真正預設邏輯在元件 resolvedVariant(L394);此 cva default 供直接 buttonVariants() 呼叫者一致。\n variant: 'tertiary',\n size: 'md',\n pressedTone: 'emphasis',\n },\n }\n)\n\n// ── ButtonGroup Context ──────────────────────────────────────────────────────\n// ButtonGroup provides this context; Button reads it for fullWidth injection.\n// Context lives here (not in button-group.tsx) so there is no circular import.\ninterface ButtonGroupContextValue {\n fullWidth?: boolean\n}\nconst ButtonGroupContext = React.createContext<ButtonGroupContextValue>({})\n\ntype InternalVariant = VariantProps<typeof buttonVariants>['variant']\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n Omit<VariantProps<typeof buttonVariants>, 'variant' \| 'danger'> {\n /\n 將樣式套用至子元件（e.g. React Router Link）。\n \n ⚠️ icon-only + asChild 警告:當 `iconOnly={true}` 且 `asChild={true}` 時,內建\n * Tooltip wrapper 不啟動(Radix Slot 不接受多 child)。consumer 必須自管 child 的 `aria-label`\n * 給 screen reader,並視需要自行包 `<Tooltip>`(對齊 Polaris / Radix asChild idiom)。\n * Button 不會主動補 tooltip — 否則會破壞 Slot 單 child 規則。\n /\n asChild?: boolean\n /\n 按鈕視覺強調等級。\n * `destructive` / `ghost` 為 shadcn 內部 compat，請勿在應用程式碼中直接使用。\n /\n variant?: 'primary' \| 'secondary' \| 'tertiary' \| 'text' \| 'link'\n /* 套用危險色（紅色）。可與任何 variant 組合使用。 /\n danger?: boolean\n /\n Toggle 按下狀態（持續 on/off）。設定時 Button 變為 toggle：\n * - 自動寫入 `aria-pressed` + `data-state=\"on\" \| \"off\"`\n * - 樣式由 variant × `pressedTone` 的 compoundVariants 套用\n * - 僅 secondary / tertiary / text 有 toggle 視覺；primary / link 傳入無效果\n \n 不傳此 prop 時 Button 就是一般按鈕，不帶 aria-pressed。\n /\n pressed?: boolean\n /\n Pressed 視覺色調(2026-05-21 v12 加):\n * - `'emphasis'`(預設)→ 淡藍底 / primary 字(對齊 Figma toolbar / Linear toolbar /\n * Material ToggleButton 共識 — toolbar functional toggle / 篩選啟用 / 面板開關)\n * - `'neutral'` → 灰底 / foreground 字(對齊 Linear / Notion / VS Code Activity Bar\n * 共識 — sidebar/contextual nav row pressed)\n \n 僅在 `pressed` 啟用且 variant ∈ {secondary, tertiary, text} 時生效。\n * 跨 toggle context 維持單一 prop API,consumer 視語意選 tone 不另開 variant。\n /\n pressedTone?: 'emphasis' \| 'neutral'\n /* 左側 icon（LucideIcon），最多一個，loading 時自動替換為 spinner /\n startIcon?: LucideIcon\n /* 右側 badge（ReactNode），通常傳入計數指示器 /\n badge?: React.ReactNode\n /\n Overlay badge(iconOnly 專用)。接收 `<Badge>` 元素,Button 內部自動定位在 startIcon 右上角——\n * badge 中心對齊 icon 的 top-right corner(Material BadgedBox / iOS App icon canonical),不是按鈕邊緣。\n * 解決手刻 `relative + absolute -top-1 -right-1` 讓 badge 飄在按鈕 chrome 右上的問題。\n \n 世界級對照:Material BadgedBox、iOS App Icon、Ant Badge wrap icon,badge 相對於視覺重心(icon)。\n * 只在 `iconOnly=true` 時生效;非 iconOnly 時應該用 inline `badge` prop 放 suffix 位置。\n /\n overlayBadge?: React.ReactNode\n /* 右側 icon（LucideIcon），放在 badge 右邊，通常用於 ChevronDown 等方向指示 /\n endIcon?: LucideIcon\n /* Icon-only 模式：移除 padding，變為正方形（必須同時設定 aria-label） /\n iconOnly?: boolean\n /\n Dismiss 視覺類(X close only canonical)。專用於 X(close)icon 的 dismiss 語意 —\n * 「關閉 surface / 忽略訊息」。不適用 Trash / Delete / Clear / Remove 等 destructive / clear 操作。\n \n 自動套用:\n * - `variant=\"text\"`(強制 override 其他 variant)\n * - `iconOnly=true`(強制)\n * - Icon 色 override:`fg-muted` → hover `foreground`(跟 Inline Action dismiss 視覺一致)\n \n 典型 case:Dialog / Sheet / Popover / Alert / Toast / Coachmark 的 chrome corner close X\n * (action group region — corner 可多 action,close 左側加 Separator + refresh / share 等)。\n \n 非 dismiss(不套此 prop):\n * - Trash / Delete → destructive action,Button 用一般 variant 或 Inline Action(按 row size 判)\n * - Clear → 欄位清空,用 Inline Action\n * - Remove → collection 移除,用一般 Button / Inline Action\n \n 詳見 button.spec.md「Dismiss 視覺類」段 + patterns/element-anatomy/item-anatomy.spec.md\n * 「Dismiss canonical — X close only」段。\n /\n dismiss?: boolean\n /* 載入中狀態：startIcon 替換為 spinner，自動 disabled；badge / endIcon 維持顯示以避免 layout shift /\n loading?: boolean\n /* 撐滿父容器寬度 /\n fullWidth?: boolean\n}\n\n/\n Icon-only padding — calc `(field-height - icon-size) / 2` per size。\n \n 設計:startIcon 到左邊距離 = padding = `(height - icon) / 2`。\n * 純 icon-only 時 width = 2padding + icon = height → 自然正方形,不需要 aspect-square。\n 有 suffix(badge / endIcon)時 width = 2pad + icon + gap + suffix > height → 自然長方形。\n StartIcon 到左邊距離始終不變,形狀自動適應內容。\n \n 用 CSS var 讓 density 切換時 padding 自動跟著算(field-height 會變)。\n /\n// IconOnly 用 padding-free + aspect-square + flex-center 的 Polaris/Atlassian idiom\n// (M17 SSOT 必可傳播 — 取代 4 個 size 的 magic-number 公式):\n// - aspect-square 鎖 width=height(來自 h-field-X)\n// - p-0 移除 px-3 (label 模式) override\n// - flex justify-center items-center(base 已有)→ SVG 自動視覺置中\n// 結果:0 magic number,0 公式,0 border-deduction,任何 size / icon size 都自然正方形。\n// World-class 對照:Polaris + Atlassian iconOnly 走 padding-free 派(Material/Ant 走\n// padding-based)。我們選 padding-free 因 SSOT 性更強(SegmentedControl / Tag dismiss\n// 等 host 全可共用同 utility class,無需各自抄公式)。詳 button.spec.md「iconOnly 鐵律」。\nconst ICON_ONLY_BASE = 'aspect-square p-0 min-w-0 gap-0'\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant: variantProp,\n danger: dangerProp,\n size,\n asChild = false,\n startIcon: StartIcon,\n badge,\n overlayBadge,\n endIcon: EndIcon,\n iconOnly = false,\n dismiss = false,\n loading = false,\n fullWidth = false,\n pressed,\n pressedTone, // 2026-06-05 fix(deep-audit P0):原漏 destructure → 落入 ...props 噴到 DOM + 永遠用 cva default\n children,\n disabled,\n ...props\n },\n ref\n ) => {\n // ── FieldContext：在 Field 內自動讀 size，讓 Button 跟 Input 同高(SSOT:useResolvedFieldSize)──\n const resolvedSize = useResolvedFieldSize(size, 'md')\n\n // ── Dismiss 視覺類 override(2026-04-22 cross-implementation dimming canonical) ──\n // dismiss=true 強制:variant=\"text\" + iconOnly=true + icon 色弱化(fg-muted → hover foreground)\n // 跟 Inline Action dismiss 視覺一致。詳見 button.spec.md「Dismiss 視覺類」。\n const resolvedIconOnly = iconOnly \|\| dismiss\n\n // ── Dev-mode warning:overlayBadge 只適用 iconOnly ──\n // 有 label 的 Button 傳入 overlayBadge 會被忽略(只 render icon / 不渲染 overlay slot),\n // 靜默忽略會讓 consumer 誤以為「傳了但位置錯」。Dev mode 印 warning 引導改用 `badge` prop\n // (inline 位置,跟 label 並列)或改 `iconOnly`。Spec SSOT:badge.spec.md「Overlay 適用元件」。\n if (process.env.NODE_ENV !== 'production' && overlayBadge && !iconOnly) {\n // eslint-disable-next-line no-console\n console.warn(\n '[DS Button] `overlayBadge` 只適用於 `iconOnly` Button。有 label 的 Button 請改用 `badge` prop(inline 位置,跟 label 並列),或移除 label 改為 iconOnly。SSOT:badge.spec.md「Overlay 適用元件 canonical」節。'\n )\n }\n\n // 2026-05-23 deep-audit Phase A.4 Decision 1(user verbatim「決策ㄧ照你建議做」):dev-warn `iconOnly + (endIcon\|badge)` 並用。\n // Spec SSOT:button.spec.md「iconOnly 嚴格定義為『只有一個 icon,正方形』,不可與 endIcon 或 badge 並用」。\n // 例外:overlayBadge 跟 iconOnly 並用 canonical(L372 反向 warn 已 cover)。\n // 不擋 image canonical「icon + 下拉指示 = 不加 iconOnly + startIcon + endIcon + aria-label」(那 case iconOnly=false 不 trigger)。\n if (process.env.NODE_ENV !== 'production' && iconOnly && (EndIcon !== undefined \|\| badge != null)) {\n // eslint-disable-next-line no-console\n console.warn(\n '[DS Button] `iconOnly` 嚴格定義為「只有一個 icon,正方形」,不可與 `endIcon` 或 `badge` 並用。若需 icon + 下拉指示 → 不加 iconOnly + startIcon + endIcon + aria-label;若需 icon + 角標 → iconOnly + overlayBadge。SSOT:button.spec.md `iconOnly 的邊界` 節 + `badge.spec.md` Overlay 適用元件 canonical。'\n )\n }\n\n // shadcn compat:AlertDialog、Toast 等元件內部會傳入這些 alias,\n // 在此靜默轉換,不暴露到型別或自動完成。\n // dismiss=true 強制 variant=text(dismiss canonical);override 其他 variant 傳入。\n // 2026-06-06 預設 emphasis 改低(對齊世界級:MUI 預設 text / Ant 預設 default / Polaris 低 emphasis —\n // 預設 primary CTA 是 outlier)。labeled 無 variant → `tertiary`(中性外框,清楚可點性,再按重要程度升 primary);\n // iconOnly 無 variant → `text`(toolbar ghost,對齊 action-bar.spec.md「純動作工具/低重量輔助 → text」+\n // Material 3「icon-only = no fill」)。CTA 必 explicit `variant=\"primary\"`(不靠預設)。dismiss 仍強制 text。\n const resolvedVariant: InternalVariant =\n dismiss ? 'text' :\n (variantProp as string) === 'destructive' ? 'primary' :\n (variantProp as string) === 'ghost' ? 'text' :\n (variantProp as InternalVariant) ?? (iconOnly ? 'text' : 'tertiary')\n\n const resolvedDanger = dangerProp \|\| (variantProp as string) === 'destructive'\n\n // ButtonGroup context：vertical group 自動注入 fullWidth\n const groupCtx = React.useContext(ButtonGroupContext)\n const resolvedFullWidth = fullWidth \|\| !!groupCtx.fullWidth\n\n const Comp = asChild ? Slot : 'button'\n const iconSize = resolvedSize === 'lg' ? 20 : 16\n\n // loading 行為：spinner 永遠在 prefix 位置\n // 有 prefix icon → icon 換成 spinner（同位置，零 layout shift）\n // 無 prefix icon → spinner 加在文字左邊（按鈕略微變寬，可接受）\n const hasSuffix = badge != null \|\| EndIcon !== undefined\n\n // icon-only 自動 tooltip：從 props 提取 aria-label，同時保留在 DOM\n const { 'aria-label': ariaLabel, ...restProps } = props\n\n // Toggle 狀態：pressed 定義時自動寫入 aria-pressed + data-state。\n // 未定義時不寫入任何 toggle 屬性（按鈕為一般 action button）。\n // 樣式由 cva 的 data-[state=on] 分支套用——secondary/tertiary 走 primary-subtle，\n // text 走 neutral-selected family；primary/link 不定義 on 分支，傳入無效果。\n const toggleAttrs =\n pressed === undefined\n ? {}\n : { 'aria-pressed': pressed, 'data-state': pressed ? 'on' : 'off' }\n\n // Chrome-unbounded marker(2026-04-22 v5 canonical):button 若無視覺邊界(text variant 或 dismiss),\n // 標記 data-unbounded=\"true\"。SurfaceHeader 透過 [&_[data-unbounded]]:my-[...] 套負 margin\n // 讓 layout 佔位縮到 24(chrome-header-height 幾何)— button native size 與 touch target 不變。\n // 詳 overlay-surface.spec.md「Chrome dismiss size canonical」\n const unboundedAttr =\n resolvedVariant === 'text' \|\| dismiss ? { 'data-unbounded': 'true' } : {}\n\n const buttonEl = (\n <Comp\n className={cn(\n buttonVariants({ variant: resolvedVariant, danger: resolvedDanger, size: resolvedSize, pressedTone, className }),\n // iconOnly 鐵律:padding-free + aspect-square + flex-center (Polaris idiom)\n // 0 magic-number 0 公式自動正方形。詳 ICON_ONLY_BASE rationale。\n resolvedIconOnly && ICON_ONLY_BASE,\n // Dismiss 視覺弱化:override Button text variant 預設 foreground 為 fg-muted → hover foreground\n // 跟 Inline Action dismiss 視覺一致(cross-implementation dimming canonical)\n dismiss && 'text-fg-muted hover:text-foreground',\n resolvedFullWidth && 'w-full',\n )}\n ref={ref}\n type=\"button\"\n disabled={disabled \|\| loading}\n aria-busy={loading \|\| undefined}\n aria-label={ariaLabel}\n {...toggleAttrs}\n {...unboundedAttr}\n {...restProps}\n >\n {loading ? (\n <CircularProgress size={iconSize} className=\"text-current\" />\n ) : StartIcon ? (\n resolvedIconOnly && overlayBadge ? (\n // Overlay badge canonical:wrapper 貼 icon 尺寸,badge 中心對齊 icon top-right corner\n // (Material BadgedBox / iOS App icon),不是 button chrome 角。\n //\n // CSS 細節(2026-04-20 bug fix):用 `inline-block` + 明確 width/height + `leading-none`\n // 避免 `inline-flex` span 在 Button flex container 內被撐高/撐寬(inline-flex 的 span\n // 在某些瀏覽器下會把絕對定位子元素的 translate 計算基準搞錯,造成 badge 噴飛、Button\n // aspect-square 失效)。明確給 span width/height = iconSize 鎖住 positioning context。\n <span\n className=\"relative inline-block leading-none shrink-0 pointer-events-none\"\n style={{ width: iconSize, height: iconSize }}\n >\n <StartIcon size={iconSize} aria-hidden />\n <span className=\"absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 pointer-events-auto\">\n {overlayBadge}\n </span>\n </span>\n ) : (\n <StartIcon size={iconSize} aria-hidden />\n )\n ) : null}\n {children != null && <span className=\"px-1\">{children}</span>}\n {hasSuffix && (\n <span className=\"inline-flex items-center gap-1\">\n {badge}\n {EndIcon && <EndIcon size={iconSize} aria-hidden />}\n </span>\n )}\n </Comp>\n )\n\n // icon-only + aria-label → 自動包 Tooltip（tooltip 是元件保證的行為）\n // 不建立獨立 TooltipProvider——依賴全域 Provider，\n // 這樣所有 tooltip 共享同一組 delay 參數和 warm-up 機制\n if (resolvedIconOnly && typeof ariaLabel === 'string' && !asChild) {\n return (\n <Tooltip>\n <TooltipTrigger asChild>{buttonEl}</TooltipTrigger>\n <TooltipContent>{ariaLabel}</TooltipContent>\n </Tooltip>\n )\n }\n\n return buttonEl\n }\n)\nButton.displayName = 'Button'\n\n/\n componentMeta — Story Auto-Compile 系統消費的結構化 canonical\n * (見 .claude/planning/story-auto-compile.md Phase 1)\n \n compile-stories.mjs 讀本 export + spec.md frontmatter 產出\n * anatomy.stories.tsx 的 variant/size/state/token 矩陣 canonical section。\n \n Keys 必跟 buttonVariants cva + spec frontmatter 對齊(compile-time 驗證)。\n */\nexport const buttonMeta = {\n component: 'Button',\n family: 3, // Pill Layout\n variants: {\n primary: { purpose: '主要 action / CTA' },\n secondary: { purpose: '次要 action(陪襯 primary)' },\n tertiary: { purpose: '第三級 action(tool-like)' },\n text: { purpose: '文字樣式 action(low emphasis / toolbar)' },\n link: { purpose: '內文連結(inline reading)' },\n },\n sizes: {\n xs: { fieldHeight: 24, iconSize: 16, typography: 'body' },\n sm: { fieldHeight: 28, iconSize: 16, typography: 'body' },\n md: { fieldHeight: 32, iconSize: 16, typography: 'body' },\n lg: { fieldHeight: 40, iconSize: 20, typography: 'body-lg' },\n },\n states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n tokens: {\n bg: ['--primary', '--primary-hover', '--primary-active', '--bg-disabled'],\n fg: ['--on-emphasis', '--fg-disabled'],\n ring: ['--ring'],\n },\n defaultVariant: 'primary',\n defaultSize: 'md',\n} as const\n\nexport { Button, buttonVariants, ButtonGroupContext }\n"],"names":[],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAA;AAE7D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAQ3F,QAAA,MAAM,gBAAgB;;8EA8BrB,CAAA;AA6BD,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,EACnE,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAID,QAAA,MAAM,QAAQ,~~yFAkGb~~,CAAA;AAKD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBf,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}
1	+ {"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAA;AAE7D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAQ3F,QAAA,MAAM,gBAAgB;;8EA8BrB,CAAA;AA6BD,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,EACnE,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAID,QAAA,MAAM,QAAQ,yFAuGb,CAAA;AAKD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBf,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/Checkbox/checkbox.js CHANGED Viewed

@@ -4,7 +4,7 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Minus, Check } from "lucide-react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils.js";
-import { useFieldContext } from "../Field/field-context.js";
+import { useFieldContext, useResolvedFieldDisabled, useResolvedFieldMode } from "../Field/field-context.js";
 import { SelectionItem } from "../SelectionControl/selection-item.js";
 import { CheckboxGroupContext } from "./checkbox-group.js";
 const checkboxVariants = cva(
@@ -66,7 +66,10 @@ const Checkbox = React.forwardRef(
     const effectiveDescription = shouldSuppressLabel ? void 0 : description;
     const generatedId = React.useId();
     const inputId = idProp ?? (insideGroup ? generatedId : (fieldCtx == null ? void 0 : fieldCtx.id) ?? generatedId);
-    if (mode === "display") {
+    const resolvedDisabled = useResolvedFieldDisabled(disabled);
+    const resolvedMode = useResolvedFieldMode({ mode, disabled, readOnly });
+    const effectiveReadOnly = readOnly || resolvedMode === "readonly";
+    if (resolvedMode === "display") {
       const isChecked = props.checked === true;
       return isChecked ? /* @__PURE__ */ jsx("span", { className: "text-foreground", children: "✓" }) : /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: "—" });
     }
@@ -75,10 +78,10 @@ const Checkbox = React.forwardRef(
       {
         id: inputId,
         ref,
-        disabled,
-        "aria-readonly": readOnly || void 0,
-        "data-readonly": readOnly || void 0,
-        tabIndex: readOnly ? -1 : void 0,
+        disabled: resolvedDisabled,
+        "aria-readonly": effectiveReadOnly || void 0,
+        "data-readonly": effectiveReadOnly || void 0,
+        tabIndex: effectiveReadOnly ? -1 : void 0,
         "aria-describedby": fieldCtx == null ? void 0 : fieldCtx.descriptionId,
         className: cn(checkboxVariants({ size }), className),
         ...props,
@@ -93,7 +96,7 @@ const Checkbox = React.forwardRef(
         label: effectiveLabel,
         description: effectiveDescription,
         htmlFor: inputId,
-        disabled,
+        disabled: resolvedDisabled,
         size: sizeKey
       }
     );

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

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.js","sources":["../../../src/components/Checkbox/checkbox.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { Check, Minus } from \"lucide-react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport type { FieldMode, FieldVariant } from \"@/design-system/components/Field/field-types\"\nimport { useFieldContext } from \"@/design-system/components/Field/field-context\"\nimport { SelectionItem } from \"@/design-system/components/SelectionControl/selection-item\"\nimport { CheckboxGroupContext } from \"./checkbox-group\"\n\n// ── Variants ────────────────────────────────────────────────────────────────\n// 三種尺寸（sm/md=16px, lg=20px），對齊 icon 系統與 SelectionItem。\n\nconst checkboxVariants = cva(\n [\n 'grid place-content-center shrink-0 rounded-md',\n 'border border-border bg-surface',\n 'transition-colors duration-150',\n 'hover:border-border-hover',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\n 'data-[state=checked]:bg-primary data-[state=checked]:text-on-emphasis data-[state=checked]:border-primary',\n 'data-[state=checked]:hover:bg-primary-hover data-[state=checked]:hover:border-primary-hover',\n 'data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-on-emphasis data-[state=indeterminate]:border-primary',\n 'data-[state=indeterminate]:hover:bg-primary-hover data-[state=indeterminate]:hover:border-primary-hover',\n 'disabled:cursor-not-allowed disabled:bg-disabled disabled:border-transparent disabled:hover:border-transparent',\n 'disabled:data-[state=checked]:bg-disabled disabled:data-[state=checked]:text-fg-disabled disabled:data-[state=checked]:border-transparent',\n 'disabled:data-[state=indeterminate]:bg-disabled disabled:data-[state=indeterminate]:text-fg-disabled disabled:data-[state=indeterminate]:border-transparent',\n // readOnly：鎖定互動但維持 checked/unchecked 視覺\n 'data-[readonly=true]:pointer-events-none data-[readonly=true]:cursor-default',\n 'data-[readonly=true]:hover:border-border',\n ],\n {\n variants: {\n size: {\n sm: 'h-4 w-4',\n md: 'h-4 w-4',\n lg: 'h-5 w-5',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n)\n\n// ── Check Icon Size ─────────────────────────────────────────────────────────\nconst checkIconSize: Record<string, number> = { sm: 12, md: 12, lg: 16 }\n\n// ── Check Icon Stroke Weight ────────────────────────────────────────────────\n// 16px 以下 icon 視覺不夠顯眼 → 用較粗 stroke 補償。Lucide 預設 strokeWidth=2 在\n// 12px 下 render 約 1px 線寬,視覺偏細;加粗到 3.5(render ≈ 1.75px)才有足夠視覺權重。\n// 16px 用 2.5(render ≈ 1.67px)讓 checked 態的 check icon 夠顯眼。\n//\n// 為什麼不是 3 / 2:本 session 實測 3 / 2 在 storybook 上兩個 size 的 render 線寬差僅\n// 0.17px(1.5 vs 1.33),使用者肉眼看不出差異(image #64 回報)。改為 3.5 / 2.5:\n// - md 12px × 3.5 → 1.75px 線寬\n// - lg 16px × 2.5 → 1.67px 線寬\n// 兩者仍接近但 md 的線寬絕對值跟 16px 預設(1.33)有更明顯差異,視覺上「小 check 更粗」。\n//\n// 世界級對照:iOS HIG / Material 3 / Polaris 的 checkmark 在 <16px 下皆加粗 compensate。\n// 為什麼不用 Lucide absoluteStrokeWidth:那保持「絕對 px 粗細」,我們反而要「小尺寸比例更粗」。\n//\n// Check 與 Minus(indeterminate)共用此規則;Switch 的 SPECS.checkStroke 採同樣值。\n// 2026-05-18 簡化 per user 視覺證「sm/md 3.5 vs lg 2.5 看不出差別」(image #64 + 2nd round\n// 圖一 video proof)+「做完」approval:\n// - 原 {3.5, 3.5, 2.5} → effective render thickness 1.75 / 1.75 / 1.67 = 跨 size 差 0.08px(視覺看不出)\n// - 改 {3, 3, 2.5} 保留 sm/md 小尺寸 legibility insurance(per iOS HIG / Material 3 cite)\n// + lg 仍稍粗於 Lucide default 2(保留 compensation 主旨,但不過度差異化)\nconst checkStrokeWidth: Record<string, number> = { sm: 3, md: 3, lg: 2.5 }\n\n// ── Types ───────────────────────────────────────────────────────────────────\n\nexport interface CheckboxProps\n extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,\n VariantProps<typeof checkboxVariants> {\n /*\n Inline label。提供時 Checkbox 自動透過 SelectionItem 包裝，\n * 套用 text-body / text-foreground / disabled 色的 codified 樣式。\n * 在 <Field> context 內時此 prop 會被忽略（由 FieldLabel 接管）。\n /\n label?: React.ReactNode\n /\n Inline description（secondary 文字）。須與 label 搭配使用。\n * 套用 text-body / text-fg-secondary 樣式。\n * 在 <Field> context 內時此 prop 會被忽略（由 FieldDescription 接管）。\n /\n description?: React.ReactNode\n /\n readonly 模式：鎖定互動但維持 checked/unchecked 視覺正確。\n * 與 disabled 的差異：readonly 不降色（可讀），disabled 降色（弱化）。\n * 用於表單 readonly 呈現、DataTable cell 非編輯態。\n /\n readOnly?: boolean\n /\n Field mode(2026-05-05 Phase B3 align):\n * edit — 一般可互動 checkbox(預設)\n * display — 純展示:渲染 ✓ / —(無互動 primitive、無 input chrome);\n * 對齊 Carbon read-only / DataTable boolean cell 場景。取代既有 BooleanDisplay。\n * readonly — 同 readOnly prop:checkbox 視覺保留 + 鎖互動 + a11y readonly signal\n * disabled — 同 disabled prop:降色 + 鎖互動\n /\n mode?: FieldMode\n /\n Visual chrome — checkbox 本體無 input wrapper variant,本 prop 對 checkbox 主體無視覺影響;\n * 為對齊 Field 4-mode + chrome 透傳契約而保留(M19 一致性)。\n /\n variant?: FieldVariant\n}\n\n// ── Component ───────────────────────────────────────────────────────────────\n\nconst Checkbox = React.forwardRef<\n React.ElementRef<typeof CheckboxPrimitive.Root>,\n CheckboxProps\n>(\n (\n {\n className,\n size,\n label,\n description,\n readOnly = false,\n disabled,\n mode,\n // chrome 對 Checkbox 主體無視覺影響(無 input wrapper)— 接收純為 prop 一致性;destructure 防 leak 到 DOM。\n variant: _chrome,\n id: idProp,\n ...props\n },\n ref\n ) => {\n const sizeKey = size ?? 'md'\n const iconPx = checkIconSize[sizeKey]\n const iconStrokeWidth = checkStrokeWidth[sizeKey]\n\n // Field context:Checkbox 單獨塞進 Field(binary toggle)時,忽略自己的 label 讓 FieldLabel 接管\n // 2026-05-31 #35:hooks(useFieldContext / useContext / useId)必在任何 conditional return 前呼叫(Rules of Hooks)。\n // 原 mode='display' early return 寫在 hooks 之上 → runtime 切 mode 會 hook count 不一致 crash;已下移至 hooks 後。\n //\n // 例外:Checkbox 是 CheckboxGroup 的 child 時(multi-select 情境),每個 checkbox\n // 的 label 是它自己的選項名,FieldLabel 只是群組名稱 — 此時 label 必須保留,\n // 不能被 Field context 吞掉。AR50 的根因就是這個 branch 之前誤把 group 內的 checkbox\n // label 全清空,導致 sheet 內 3 個 checkbox 沒 label。\n const fieldCtx = useFieldContext()\n const checkboxGroupCtx = React.useContext(CheckboxGroupContext)\n const insideField = fieldCtx?.hasFieldWrapper === true\n const insideGroup = checkboxGroupCtx?.inGroup === true\n const shouldSuppressLabel = insideField && !insideGroup\n const effectiveLabel = shouldSuppressLabel ? undefined : label\n const effectiveDescription = shouldSuppressLabel ? undefined : description\n\n // Id 連結\n //\n // ── 2026-04-21 bug fix ──\n // 原本:`idProp ?? fieldCtx?.id ?? generatedId`。\n // 在 Field 內 fieldCtx.id 存在,CheckboxGroup 所有 children 共用同一個 id →\n // 每個 checkbox 的 `<label htmlFor={sameId}>` 全指向第一個 checkbox →\n // 點任何 label 都只開關第一個 checkbox(real bug)*。\n //\n // 修法:group 內的 checkbox 強制用 generatedId(唯一),不沿用 Field id;\n // solo in Field(binary toggle)才沿用 fieldCtx.id 讓 FieldLabel htmlFor 生效。\n const generatedId = React.useId()\n const inputId = idProp ?? (insideGroup ? generatedId : (fieldCtx?.id ?? generatedId))\n\n // ── mode='display'(下移至所有 hooks 之後,per #35 Rules of Hooks)──────────\n // 純展示模式:無互動 primitive、渲染 ✓ / —(checked=true → ✓ / 其他 → —)。取代 BooleanDisplay。\n if (mode === 'display') {\n const isChecked = props.checked === true\n return isChecked\n ? <span className=\"text-foreground\">✓</span>\n : <span className=\"text-fg-muted\">—</span>\n }\n\n const rootEl = (\n <CheckboxPrimitive.Root\n id={inputId}\n ref={ref}\n disabled={disabled}\n aria-readonly={readOnly \|\| undefined}\n data-readonly={readOnly \|\| undefined}\n tabIndex={readOnly ? -1 : undefined}\n aria-describedby={fieldCtx?.descriptionId}\n className={cn(checkboxVariants({ size }), className)}\n {...props}\n >\n <CheckboxPrimitive.Indicator className=\"grid place-content-center text-current\">\n {props.checked === 'indeterminate'\n ? <Minus style={{ width: iconPx, height: iconPx }} strokeWidth={iconStrokeWidth} />\n : <Check style={{ width: iconPx, height: iconPx }} strokeWidth={iconStrokeWidth} />\n }\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n )\n\n // 無 label → 只渲染 checkbox 本體\n if (effectiveLabel == null) return rootEl\n\n // 有 label → 透過 SelectionItem 包裝（control 在左、label+description 在右）\n return (\n <SelectionItem\n control={rootEl}\n label={effectiveLabel}\n description={effectiveDescription}\n htmlFor={inputId}\n disabled={disabled}\n size={sizeKey}\n />\n )\n }\n)\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const checkboxMeta = {\n component: 'Checkbox',\n family: null, // self-contained primitive(對齊 spec frontmatter self-contained + body L31;非 Family 4)\n variants: {\n\n },\n sizes: {\n sm: { fieldHeight: 28, iconSize: 16, typography: 'body' },\n md: { fieldHeight: 32, iconSize: 16, typography: 'body' },\n lg: { fieldHeight: 36, iconSize: 20, typography: 'body' },\n },\n states: ['default', 'hover', 'focus-visible', 'disabled'],\n tokens: {\n bg: ['bg-disabled', 'bg-primary', 'bg-primary-hover', 'bg-surface'],\n fg: ['text-fg-disabled', 'text-fg-secondary', 'text-foreground'],\n ring: ['ring-ring'],\n },\n defaultSize: 'md',\n} as const\n\nexport { Checkbox, checkboxVariants }\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"checkbox.js","sources":["../../../src/components/Checkbox/checkbox.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { Check, Minus } from \"lucide-react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport type { FieldMode, FieldVariant } from \"@/design-system/components/Field/field-types\"\nimport { useFieldContext, useResolvedFieldDisabled, useResolvedFieldMode } from \"@/design-system/components/Field/field-context\"\nimport { SelectionItem } from \"@/design-system/components/SelectionControl/selection-item\"\nimport { CheckboxGroupContext } from \"./checkbox-group\"\n\n// ── Variants ────────────────────────────────────────────────────────────────\n// 三種尺寸（sm/md=16px, lg=20px），對齊 icon 系統與 SelectionItem。\n\nconst checkboxVariants = cva(\n [\n 'grid place-content-center shrink-0 rounded-md',\n 'border border-border bg-surface',\n 'transition-colors duration-150',\n 'hover:border-border-hover',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\n 'data-[state=checked]:bg-primary data-[state=checked]:text-on-emphasis data-[state=checked]:border-primary',\n 'data-[state=checked]:hover:bg-primary-hover data-[state=checked]:hover:border-primary-hover',\n 'data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-on-emphasis data-[state=indeterminate]:border-primary',\n 'data-[state=indeterminate]:hover:bg-primary-hover data-[state=indeterminate]:hover:border-primary-hover',\n 'disabled:cursor-not-allowed disabled:bg-disabled disabled:border-transparent disabled:hover:border-transparent',\n 'disabled:data-[state=checked]:bg-disabled disabled:data-[state=checked]:text-fg-disabled disabled:data-[state=checked]:border-transparent',\n 'disabled:data-[state=indeterminate]:bg-disabled disabled:data-[state=indeterminate]:text-fg-disabled disabled:data-[state=indeterminate]:border-transparent',\n // readOnly：鎖定互動但維持 checked/unchecked 視覺\n 'data-[readonly=true]:pointer-events-none data-[readonly=true]:cursor-default',\n 'data-[readonly=true]:hover:border-border',\n ],\n {\n variants: {\n size: {\n sm: 'h-4 w-4',\n md: 'h-4 w-4',\n lg: 'h-5 w-5',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n)\n\n// ── Check Icon Size ─────────────────────────────────────────────────────────\nconst checkIconSize: Record<string, number> = { sm: 12, md: 12, lg: 16 }\n\n// ── Check Icon Stroke Weight ────────────────────────────────────────────────\n// 16px 以下 icon 視覺不夠顯眼 → 用較粗 stroke 補償。Lucide 預設 strokeWidth=2 在\n// 12px 下 render 約 1px 線寬,視覺偏細;加粗到 3.5(render ≈ 1.75px)才有足夠視覺權重。\n// 16px 用 2.5(render ≈ 1.67px)讓 checked 態的 check icon 夠顯眼。\n//\n// 為什麼不是 3 / 2:本 session 實測 3 / 2 在 storybook 上兩個 size 的 render 線寬差僅\n// 0.17px(1.5 vs 1.33),使用者肉眼看不出差異(image #64 回報)。改為 3.5 / 2.5:\n// - md 12px × 3.5 → 1.75px 線寬\n// - lg 16px × 2.5 → 1.67px 線寬\n// 兩者仍接近但 md 的線寬絕對值跟 16px 預設(1.33)有更明顯差異,視覺上「小 check 更粗」。\n//\n// 世界級對照:iOS HIG / Material 3 / Polaris 的 checkmark 在 <16px 下皆加粗 compensate。\n// 為什麼不用 Lucide absoluteStrokeWidth:那保持「絕對 px 粗細」,我們反而要「小尺寸比例更粗」。\n//\n// Check 與 Minus(indeterminate)共用此規則;Switch 的 SPECS.checkStroke 採同樣值。\n// 2026-05-18 簡化 per user 視覺證「sm/md 3.5 vs lg 2.5 看不出差別」(image #64 + 2nd round\n// 圖一 video proof)+「做完」approval:\n// - 原 {3.5, 3.5, 2.5} → effective render thickness 1.75 / 1.75 / 1.67 = 跨 size 差 0.08px(視覺看不出)\n// - 改 {3, 3, 2.5} 保留 sm/md 小尺寸 legibility insurance(per iOS HIG / Material 3 cite)\n// + lg 仍稍粗於 Lucide default 2(保留 compensation 主旨,但不過度差異化)\nconst checkStrokeWidth: Record<string, number> = { sm: 3, md: 3, lg: 2.5 }\n\n// ── Types ───────────────────────────────────────────────────────────────────\n\nexport interface CheckboxProps\n extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,\n VariantProps<typeof checkboxVariants> {\n /*\n Inline label。提供時 Checkbox 自動透過 SelectionItem 包裝，\n * 套用 text-body / text-foreground / disabled 色的 codified 樣式。\n * 在 <Field> context 內時此 prop 會被忽略（由 FieldLabel 接管）。\n /\n label?: React.ReactNode\n /\n Inline description（secondary 文字）。須與 label 搭配使用。\n * 套用 text-body / text-fg-secondary 樣式。\n * 在 <Field> context 內時此 prop 會被忽略（由 FieldDescription 接管）。\n /\n description?: React.ReactNode\n /\n readonly 模式：鎖定互動但維持 checked/unchecked 視覺正確。\n * 與 disabled 的差異：readonly 不降色（可讀），disabled 降色（弱化）。\n * 用於表單 readonly 呈現、DataTable cell 非編輯態。\n /\n readOnly?: boolean\n /\n Field mode(2026-05-05 Phase B3 align):\n * edit — 一般可互動 checkbox(預設)\n * display — 純展示:渲染 ✓ / —(無互動 primitive、無 input chrome);\n * 對齊 Carbon read-only / DataTable boolean cell 場景。取代既有 BooleanDisplay。\n * readonly — 同 readOnly prop:checkbox 視覺保留 + 鎖互動 + a11y readonly signal\n * disabled — 同 disabled prop:降色 + 鎖互動\n /\n mode?: FieldMode\n /\n Visual chrome — checkbox 本體無 input wrapper variant,本 prop 對 checkbox 主體無視覺影響;\n * 為對齊 Field 4-mode + chrome 透傳契約而保留(M19 一致性)。\n /\n variant?: FieldVariant\n}\n\n// ── Component ───────────────────────────────────────────────────────────────\n\nconst Checkbox = React.forwardRef<\n React.ElementRef<typeof CheckboxPrimitive.Root>,\n CheckboxProps\n>(\n (\n {\n className,\n size,\n label,\n description,\n readOnly = false,\n disabled,\n mode,\n // chrome 對 Checkbox 主體無視覺影響(無 input wrapper)— 接收純為 prop 一致性;destructure 防 leak 到 DOM。\n variant: _chrome,\n id: idProp,\n ...props\n },\n ref\n ) => {\n const sizeKey = size ?? 'md'\n const iconPx = checkIconSize[sizeKey]\n const iconStrokeWidth = checkStrokeWidth[sizeKey]\n\n // Field context:Checkbox 單獨塞進 Field(binary toggle)時,忽略自己的 label 讓 FieldLabel 接管\n // 2026-05-31 #35:hooks(useFieldContext / useContext / useId)必在任何 conditional return 前呼叫(Rules of Hooks)。\n // 原 mode='display' early return 寫在 hooks 之上 → runtime 切 mode 會 hook count 不一致 crash;已下移至 hooks 後。\n //\n // 例外:Checkbox 是 CheckboxGroup 的 child 時(multi-select 情境),每個 checkbox\n // 的 label 是它自己的選項名,FieldLabel 只是群組名稱 — 此時 label 必須保留,\n // 不能被 Field context 吞掉。AR50 的根因就是這個 branch 之前誤把 group 內的 checkbox\n // label 全清空,導致 sheet 內 3 個 checkbox 沒 label。\n const fieldCtx = useFieldContext()\n const checkboxGroupCtx = React.useContext(CheckboxGroupContext)\n const insideField = fieldCtx?.hasFieldWrapper === true\n const insideGroup = checkboxGroupCtx?.inGroup === true\n const shouldSuppressLabel = insideField && !insideGroup\n const effectiveLabel = shouldSuppressLabel ? undefined : label\n const effectiveDescription = shouldSuppressLabel ? undefined : description\n\n // Id 連結\n //\n // ── 2026-04-21 bug fix ──\n // 原本:`idProp ?? fieldCtx?.id ?? generatedId`。\n // 在 Field 內 fieldCtx.id 存在,CheckboxGroup 所有 children 共用同一個 id →\n // 每個 checkbox 的 `<label htmlFor={sameId}>` 全指向第一個 checkbox →\n // 點任何 label 都只開關第一個 checkbox(real bug)*。\n //\n // 修法:group 內的 checkbox 強制用 generatedId(唯一),不沿用 Field id;\n // solo in Field(binary toggle)才沿用 fieldCtx.id 讓 FieldLabel htmlFor 生效。\n const generatedId = React.useId()\n const inputId = idProp ?? (insideGroup ? generatedId : (fieldCtx?.id ?? generatedId))\n\n // 2026-06-08 SSOT cascade:disabled + mode 經 resolver hook(原 raw prop → <Field disabled>/<Field mode=\"display\"> 漏 cascade)\n const resolvedDisabled = useResolvedFieldDisabled(disabled)\n const resolvedMode = useResolvedFieldMode({ mode, disabled, readOnly })\n const effectiveReadOnly = readOnly \|\| resolvedMode === 'readonly'\n\n // ── mode='display'(下移至所有 hooks 之後,per #35 Rules of Hooks)──────────\n // 純展示模式:無互動 primitive、渲染 ✓ / —(checked=true → ✓ / 其他 → —)。取代 BooleanDisplay。\n if (resolvedMode === 'display') {\n const isChecked = props.checked === true\n return isChecked\n ? <span className=\"text-foreground\">✓</span>\n : <span className=\"text-fg-muted\">—</span>\n }\n\n const rootEl = (\n <CheckboxPrimitive.Root\n id={inputId}\n ref={ref}\n disabled={resolvedDisabled}\n aria-readonly={effectiveReadOnly \|\| undefined}\n data-readonly={effectiveReadOnly \|\| undefined}\n tabIndex={effectiveReadOnly ? -1 : undefined}\n aria-describedby={fieldCtx?.descriptionId}\n className={cn(checkboxVariants({ size }), className)}\n {...props}\n >\n <CheckboxPrimitive.Indicator className=\"grid place-content-center text-current\">\n {props.checked === 'indeterminate'\n ? <Minus style={{ width: iconPx, height: iconPx }} strokeWidth={iconStrokeWidth} />\n : <Check style={{ width: iconPx, height: iconPx }} strokeWidth={iconStrokeWidth} />\n }\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n )\n\n // 無 label → 只渲染 checkbox 本體\n if (effectiveLabel == null) return rootEl\n\n // 有 label → 透過 SelectionItem 包裝（control 在左、label+description 在右）\n return (\n <SelectionItem\n control={rootEl}\n label={effectiveLabel}\n description={effectiveDescription}\n htmlFor={inputId}\n disabled={resolvedDisabled}\n size={sizeKey}\n />\n )\n }\n)\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const checkboxMeta = {\n component: 'Checkbox',\n family: null, // self-contained primitive(對齊 spec frontmatter self-contained + body L31;非 Family 4)\n variants: {\n\n },\n sizes: {\n sm: { fieldHeight: 28, iconSize: 16, typography: 'body' },\n md: { fieldHeight: 32, iconSize: 16, typography: 'body' },\n lg: { fieldHeight: 36, iconSize: 20, typography: 'body' },\n },\n states: ['default', 'hover', 'focus-visible', 'disabled'],\n tokens: {\n bg: ['bg-disabled', 'bg-primary', 'bg-primary-hover', 'bg-surface'],\n fg: ['text-fg-disabled', 'text-fg-secondary', 'text-foreground'],\n ring: ['ring-ring'],\n },\n defaultSize: 'md',\n} as const\n\nexport { Checkbox, checkboxVariants }\n"],"names":[],"mappings":"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"}

package/dist/components/Combobox/combobox.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/combobox.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAM3F,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,mDAAmD,CAAA;AAcrG;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,cAAe,SAAQ,gBAAgB;CAEvD;AAgLD,KAAK,qBAAqB,GAAG,QAAQ,GAAG,KAAK,CAAA;AA6I7C,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,uFAAuF;IACvF,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACpC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW;IACX,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;kGAE8F;IAC9F,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,qCAAqC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,4FAA4F;IAC5F,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;gDAC4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,mFAAmF;IACnF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,QAAQ,EAAE,MAAM,IAAI,KAAK,KAAK,CAAC,SAAS,CAAA;IAC/F;;;;;OAKG;IACH,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IAC7E;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;sEAGkE;IAClE,wBAAwB,CAAC,EAAE,MAAM,CAAA;IACjC;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;;;;;;;;;;;OAcG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B;;;;OAIG;IACH,aAAa,CAAC,EAAE,qBAAqB,CAAA;IACrC;;;;;;;OAOG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;~~AAmVD~~,QAAA,MAAM,QAAQ,~~sFAUb~~,CAAA;AAKD,eAAO,MAAM,YAAY;;;;;;;;;;;CAef,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,CAAA"}
1	+ {"version":3,"file":"combobox.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/combobox.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAM3F,OAAO,EAAc,KAAK,gBAAgB,EAAE,MAAM,mDAAmD,CAAA;AAcrG;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,cAAe,SAAQ,gBAAgB;CAEvD;AAgLD,KAAK,qBAAqB,GAAG,QAAQ,GAAG,KAAK,CAAA;AA6I7C,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,uFAAuF;IACvF,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,OAAO,EAAE,cAAc,EAAE,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACpC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW;IACX,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;kGAE8F;IAC9F,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC7B,8CAA8C;IAC9C,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,qCAAqC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,4FAA4F;IAC5F,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;gDAC4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,mFAAmF;IACnF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,QAAQ,EAAE,MAAM,IAAI,KAAK,KAAK,CAAC,SAAS,CAAA;IAC/F;;;;;OAKG;IACH,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IAC7E;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;;sEAGkE;IAClE,wBAAwB,CAAC,EAAE,MAAM,CAAA;IACjC;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;;;;;;;;;;;OAcG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B;;;;OAIG;IACH,aAAa,CAAC,EAAE,qBAAqB,CAAA;IACrC;;;;;;;OAOG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAqVD,QAAA,MAAM,QAAQ,sFAab,CAAA;AAKD,eAAO,MAAM,YAAY;;;;;;;;;;;CAef,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/Combobox/combobox.js CHANGED Viewed

@@ -3,7 +3,7 @@ import * as React from "react";
 import { X, ChevronDown } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { nakedCellRowModeAlign, fieldWrapperStyles, EMPTY_DISPLAY, fieldDisplayTextClass } from "../Field/field-wrapper.js";
-import { useFieldContext } from "../Field/field-context.js";
+import { useResolvedFieldSize, useResolvedFieldDisabled, useResolvedFieldVariant, useResolvedFieldMode, useFieldContext, useResolvedFieldInvalid } from "../Field/field-context.js";
 import { Tag } from "../Tag/tag.js";
 import { ItemSuffix, ItemInlineAction, ICON_SIZE } from "../../patterns/element-anatomy/item-anatomy.js";
 import { OverflowIndicator } from "../OverflowIndicator/overflow-indicator.js";
@@ -237,7 +237,7 @@ function ReadonlyMultiSelect({
   );
 }
 function NativeCombobox({
-  mode = "edit",
+  mode,
   variant: variantProp,
   error = false,
   size = "md",
@@ -246,15 +246,15 @@ function NativeCombobox({
   onChange,
   placeholder,
   className,
-  disabled,
+  disabled: disabledProp,
   wrap = false,
   clearable = false,
   showDisplayEndIcon = false,
   __triggerRef
 }) {
-  const fieldCtx = useFieldContext();
-  const variant = variantProp ?? (fieldCtx == null ? void 0 : fieldCtx.variant) ?? "default";
-  const resolvedMode = disabled ? "disabled" : mode;
+  const disabled = useResolvedFieldDisabled(disabledProp);
+  const variant = useResolvedFieldVariant(variantProp);
+  const resolvedMode = useResolvedFieldMode({ mode, disabled });
   const iconSize = getIconSize(size);
   const showClear = clearable && value.length > 0 && resolvedMode === "edit";
   const handleRemove = (v) => onChange == null ? void 0 : onChange(value.filter((x) => x !== v));
@@ -374,7 +374,7 @@ function NativeCombobox({
   );
 }
 function CustomCombobox({
-  mode = "edit",
+  mode,
   variant: variantProp,
   error: errorProp = false,
   size = "md",
@@ -411,10 +411,10 @@ function CustomCombobox({
 }) {
   const tagAreaGap = tagAreaGapPx ?? GAP;
   const fieldCtx = useFieldContext();
-  const error = errorProp || ((fieldCtx == null ? void 0 : fieldCtx.invalid) ?? false);
-  const disabled = disabledProp ?? (fieldCtx == null ? void 0 : fieldCtx.disabled);
-  const resolvedMode = disabled ? "disabled" : mode;
-  const variant = variantProp ?? (fieldCtx == null ? void 0 : fieldCtx.variant) ?? "default";
+  const error = useResolvedFieldInvalid(errorProp);
+  const disabled = useResolvedFieldDisabled(disabledProp);
+  const resolvedMode = useResolvedFieldMode({ mode, disabled });
+  const variant = useResolvedFieldVariant(variantProp);
   const iconSize = getIconSize(size);
   const showClear = clearable && value.length > 0 && resolvedMode === "edit";
   const [open, setOpen] = React.useState(defaultOpen);
@@ -596,10 +596,11 @@ function CustomCombobox({
   );
 }
 const Combobox = React.forwardRef(
-  (props, ref) => {
+  ({ size: sizeProp, ...props }, ref) => {
+    const size = useResolvedFieldSize(sizeProp);
     const isMobile = useIsTouchDevice();
-    if (isMobile) return /* @__PURE__ */ jsx(NativeCombobox, { ...props, __triggerRef: ref });
-    return /* @__PURE__ */ jsx(CustomCombobox, { ...props, __triggerRef: ref });
+    if (isMobile) return /* @__PURE__ */ jsx(NativeCombobox, { ...props, size, __triggerRef: ref });
+    return /* @__PURE__ */ jsx(CustomCombobox, { ...props, size, __triggerRef: ref });
   }
 );
 Combobox.displayName = "Combobox";