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

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

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

package/dist/components/Field/field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"field.js","sources":["../../../src/components/Field/field.tsx"],"sourcesContent":["// code-quality-allow: file-size — foundational composite(Field + FieldLabel + FieldDescription + FieldError + context + 8 layout variants),拆檔會讓 Field 家族互相 import 循環\nimport * as React from 'react'\nimport { Info as InfoIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Tooltip, TooltipTrigger, TooltipContent } from '@/design-system/components/Tooltip/tooltip'\n\n/*\n Field — 表單欄位佈局容器（shadcn Field 風格）\n \n ── 定位 ────────────────────────────────────────────────────────────────\n * Field 只負責佈局 + 狀態 context，不擁有任何資料型別邏輯。\n * 每個資料型別對應的 Control（Input、NumberInput、Checkbox、Switch 等）\n * 維持自己的 edit / readonly / disabled 三態，Field 透過 context 把\n * mode / disabled / required / invalid / id 傳給子元件，由子元件決定\n * 如何反映。\n \n ── 結構 ────────────────────────────────────────────────────────────────\n * <Field orientation=\"vertical \| horizontal\" labelWidth=\"120px\">\n * <FieldLabel>姓名</FieldLabel>\n * <Input value={...} onChange={...} /> ← Control（任何非 label/desc/error 的 child）\n * <FieldDescription>...</FieldDescription>\n * <FieldError>{errors.name}</FieldError>\n * </Field>\n \n Control 會自動包在 control area slot（min-h-field-* + items-center），\n * 確保 Checkbox / Switch / Radio 等高度 < field-height 的 primitive\n * 垂直對齊 Input 中線；Input 等自身為 field-height 的 primitive 填滿。\n \n ── Horizontal mode 的 label 垂直對齊 ───────────────────────────────────\n * FieldLabel 在 horizontal 模式下使用公式：\n * padding-top: calc((var(--field-height-{size}) - 1lh) / 2)\n \n 單行 label → 文字第一行與 input 中線對齊（視覺置中）\n * 多行 label → 第一行仍與 input 中線對齊，其餘行往下流（label 高度超過\n * input 時視覺上仍保持與 input 內容同一基準線）\n \n 此公式 tracks field-height 和 line-height 的變動，size 切換或字體\n * 調整時自動連動，不需 JS 測量。\n \n ── Horizontal mode 的 label 寬度 ───────────────────────────────────────\n * 透過 labelWidth prop → --field-label-width CSS variable，可以是任何\n * CSS length（\"120px\"、\"10rem\"、\"30%\" 等）。預設 \"auto\" 由 label 內容撐開。\n \n ── Required 星號 ──────────────────────────────────────────────────────\n * Field 的 required prop 會透過 context 傳給 FieldLabel 自動渲染，\n 星號為 neutral-7（fg-muted），貼齊 label 文字（無 gap），disabled\n * 時降為 fg-disabled。也可在個別 FieldLabel 覆寫。\n /\n\n// ── Types & Context ──\n// Context 定義在 field-context.ts(打斷 circular import)。\n// field.tsx 只 import 不 re-export——consumer 直接從 field-context.ts import useFieldContext。\n\nimport type { FieldMode, FieldVariant, FieldOrientation, FieldSize, FieldControlLayout, FieldContextValue } from './field-context'\nimport { FieldContext, useFieldContext } from './field-context'\n\n// ── Internal helpers ────────────────────────────────────────────────────────\n\nconst MIN_H_CLASS: Record<FieldSize, string> = {\n sm: 'min-h-field-sm',\n md: 'min-h-field-md',\n lg: 'min-h-field-lg',\n}\n\nconst FIELD_HEIGHT_VAR: Record<FieldSize, string> = {\n sm: 'var(--field-height-sm)',\n md: 'var(--field-height-md)',\n lg: 'var(--field-height-lg)',\n}\n\n// Label / Description / Error 的字體固定 text-body (14px)，不隨 field size 變。\n// 世界級共識：field size 只影響 input 高度，不影響表單佈局元素的 typography。\nconst FIELD_TEXT_CLASS = 'text-body'\n\ntype SlotKind = 'label' \| 'description' \| 'error' \| 'control'\n\nfunction resolveSlotKind(node: React.ReactNode): SlotKind {\n if (!React.isValidElement(node)) return 'control'\n const displayName = (node.type as { displayName?: string } \| null \| undefined)?.displayName\n if (displayName === 'FieldLabel') return 'label'\n if (displayName === 'FieldDescription') return 'description'\n if (displayName === 'FieldError') return 'error'\n return 'control'\n}\n\n/\n 偵測 control children 的 fieldLayout——任一 control 宣告為 'block' 即整個 area 切 block 模式。\n \n Convention：block primitive 在自己的元件檔案掛 static `fieldLayout = 'block'` 屬性,\n * Field 在 render 時讀 `child.type.fieldLayout`。預設 'inline'。\n \n 為什麼是「任一」而非「全部」：實務上 Field 一個 control area 通常只有一個 control,\n * 但若 consumer 同時放多個 child(例如 RadioGroup + 一段補充文字節點),只要其中有 block\n * primitive,整個 area 就應該以 block 模式佈局,確保第一行對齊正確。\n /\nfunction detectControlLayout(controlNodes: React.ReactNode[]): FieldControlLayout {\n for (const node of controlNodes) {\n if (!React.isValidElement(node)) continue\n const layout = (node.type as { fieldLayout?: FieldControlLayout } \| null \| undefined)?.fieldLayout\n if (layout === 'block') return 'block'\n }\n return 'inline'\n}\n\n// ── Field ───────────────────────────────────────────────────────────────────\n\nexport interface FieldProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id'> {\n id?: string\n mode?: FieldMode\n /\n 視覺外殼(2026-05-05)。\n * - `default`(預設)— 含 border + bg(一般 form input)\n * - `bare` — 透明 variant,hover/focus reveal(cell-as-input substrate;VS Code/Figma toolbar idiom)\n \n 透傳機制:Field 一次宣告,所有 child Field control 自動繼承(per-control prop override 可覆寫)。\n /\n variant?: FieldVariant\n orientation?: FieldOrientation\n size?: FieldSize\n required?: boolean\n disabled?: boolean\n invalid?: boolean\n /\n Horizontal mode 的 label 欄寬度。支援任何 CSS length 值（\"120px\"、\"10rem\"、\"30%\"...）。\n * 預設 'auto' 由 label 內容撐開。\n /\n labelWidth?: string\n /\n Control area 佈局模型(逃生艙)。\n \n 預設由 Field 自動偵測——迭代全部 control child 的 `type.fieldLayout` static 屬性,\n * 任一宣告為 `'block'` 即整個 area 切 block(first-block-wins);全部缺宣告時視為 `'inline'`。\n \n 只有兩種情況需要手動指定:\n * 1. consumer 把自己手寫的 JSX(`<div>` / 函式元件)當 control,系統無法偵測——強制 `'block'`\n * 2. 想覆寫 primitive 的預設(如把 RadioGroup 強制 inline 呈現,罕見)\n /\n controlLayout?: FieldControlLayout\n}\n\n// ── FieldGroup Context(cascade horizontal labelWidth)──\n// 同一畫面多個 horizontal Field,label 寬度應統一對齊 → FieldGroup 提供 SSOT。\n// 下面 Field 組件自動 consume,consumer 可用 Field 的 labelWidth prop 覆寫單行。\ninterface FieldGroupContextValue {\n horizontalLabelWidth?: string\n}\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst FieldGroupContext = React.createContext<FieldGroupContextValue>({})\n\nconst Field = React.forwardRef<HTMLDivElement, FieldProps>(\n (\n {\n id: idProp,\n mode = 'edit',\n variant = 'default',\n orientation = 'vertical',\n size = 'md',\n required = false,\n disabled: disabledProp = false,\n invalid = false,\n labelWidth,\n controlLayout: controlLayoutProp,\n className,\n style,\n children,\n ...props\n },\n ref\n ) => {\n const generatedId = React.useId()\n const id = idProp ?? generatedId\n const labelId = `${id}-label`\n const descriptionId = `${id}-description`\n const errorId = `${id}-error`\n\n // FieldGroup cascade:group 的 horizontalLabelWidth 是 fallback,單行 labelWidth 覆寫\n const groupCtx = React.useContext(FieldGroupContext)\n const effectiveLabelWidth = labelWidth ?? groupCtx.horizontalLabelWidth\n\n // mode=disabled 與 disabled prop 任一為 true 即視為 disabled\n const disabled = disabledProp \|\| mode === 'disabled'\n\n // 把 children 依 slot 類型分組\n const labelNodes: React.ReactNode[] = []\n const controlNodes: React.ReactNode[] = []\n const descriptionNodes: React.ReactNode[] = []\n const errorNodes: React.ReactNode[] = []\n\n React.Children.forEach(children, (child) => {\n const slot = resolveSlotKind(child)\n if (slot === 'label') labelNodes.push(child)\n else if (slot === 'description') descriptionNodes.push(child)\n else if (slot === 'error') errorNodes.push(child)\n else controlNodes.push(child)\n })\n\n // 解析 control layout：consumer 顯式指定 > primitive 自我宣告 > 預設 inline\n const controlLayout: FieldControlLayout =\n controlLayoutProp ?? detectControlLayout(controlNodes)\n\n const contextValue = React.useMemo<FieldContextValue>(\n () => ({\n id,\n labelId,\n descriptionId,\n errorId,\n mode,\n variant,\n disabled,\n required,\n invalid,\n size,\n orientation,\n controlLayout,\n hasFieldWrapper: true,\n }),\n [id, labelId, descriptionId, errorId, mode, variant, disabled, required, invalid, size, orientation, controlLayout]\n )\n\n // Control area：兩種佈局模型,「第一行內容中線」都錨在 field-height/2,\n // 跟 FieldLabel 在 horizontal 模式下的 padding-top 公式自然對齊。\n //\n // - inline: min-h-field-{size} + items-center\n // 單行 control(Input、Button 等)中線置中於 min-h box。\n //\n // - block: flex-col + items-start + padding-top: calc((field-height - 1lh) / 2)\n // 多行 control(RadioGroup 等),第一行往下推到 field-height 中線,\n // 後續 item 自然往下流。不設 min-h(內容自己決定高度)。\n // Block control area 不加額外 paddingTop——block primitive(RadioGroup 等)\n // 的子元件(SelectionItem)已自帶 py = calc((field-height - 1lh) / 2),\n // 第一個 item 的文字自然落在 field-height/2。額外加 paddingTop 會 double padding。\n const controlArea =\n controlLayout === 'block' ? (\n <div\n className=\"flex flex-col items-start min-w-0\"\n data-field-slot=\"control\"\n data-field-control-layout=\"block\"\n >\n {controlNodes}\n </div>\n ) : (\n <div\n className={cn('flex items-center min-w-0', MIN_H_CLASS[size])}\n data-field-slot=\"control\"\n data-field-control-layout=\"inline\"\n >\n {controlNodes}\n </div>\n )\n\n // Horizontal：grid 兩欄，label 在左、content 欄堆疊（control → description → error）\n if (orientation === 'horizontal') {\n return (\n <FieldContext.Provider value={contextValue}>\n <div\n ref={ref}\n className={cn('grid gap-x-3 items-start', className)}\n style={{\n gridTemplateColumns: 'var(--field-label-width, auto) minmax(0, 1fr)',\n ...(effectiveLabelWidth !== undefined\n ? ({ ['--field-label-width' as string]: effectiveLabelWidth } as React.CSSProperties)\n : undefined),\n ...style,\n }}\n data-field-orientation=\"horizontal\"\n data-field-mode={mode}\n data-field-size={size}\n data-field-disabled={disabled ? '' : undefined}\n data-field-invalid={invalid ? '' : undefined}\n {...props}\n >\n {labelNodes}\n <div className=\"flex flex-col gap-1 min-w-0\">\n {controlArea}\n {descriptionNodes}\n {errorNodes}\n </div>\n </div>\n </FieldContext.Provider>\n )\n }\n\n // Vertical（預設）：單欄 flex-col\n return (\n <FieldContext.Provider value={contextValue}>\n <div\n ref={ref}\n className={cn('flex flex-col gap-1 min-w-0', className)}\n style={style}\n data-field-orientation=\"vertical\"\n data-field-mode={mode}\n data-field-size={size}\n data-field-disabled={disabled ? '' : undefined}\n data-field-invalid={invalid ? '' : undefined}\n {...props}\n >\n {labelNodes}\n {controlArea}\n {descriptionNodes}\n {errorNodes}\n </div>\n </FieldContext.Provider>\n )\n }\n)\nField.displayName = 'Field'\n\n// ── FieldLabel ──────────────────────────────────────────────────────────────\n\nexport interface FieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n /\n 強制渲染 required 星號（覆寫 Field context 的 required）。\n * 若未設定，預設讀 context。\n /\n required?: boolean\n /\n 在 label 文字後方顯示 info icon (ℹ)，hover 出現 tooltip 說明。\n * 傳 string → tooltip 內容。\n \n Info icon 用 inline action pattern（補充工具，視覺退後），\n * 因為 label 的 primary interaction 是 input，info 是補充說明。\n /\n info?: string\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(\n ({ className, required: requiredProp, info, htmlFor: htmlForProp, style, children, ...props }, ref) => {\n const ctx = useFieldContext()\n const required = requiredProp ?? ctx?.required ?? false\n const disabled = ctx?.disabled ?? false\n const htmlFor = htmlForProp ?? ctx?.id\n const isHorizontal = ctx?.orientation === 'horizontal'\n const controlLayout = ctx?.controlLayout ?? 'inline'\n const size: FieldSize = ctx?.size ?? 'md'\n\n // Horizontal 模式對齊策略 — 依 controlLayout 分兩套 (CSS-only, 不需 JS 測量)\n //\n // ── Inline control (Input / Button / Switch / SegmentedControl) ──\n // Control 有固定單行高度 = field-height,可以對齊中線。\n // 策略: min-h-field-{size} + flex flex-col + justify-content: center\n //\n // 1) 短 label (總高 ≤ field-height):\n // min-h 生效 → 容器 = field-height → justify-center 把 label 垂直置中\n // 第一行 top = (field-height - 1lh)/2 → 第一行中線對齊 control 中線 ✓\n // 2) 長 label (總高 > field-height):\n // min-h 被內容撐大 → 容器 = label 總高 → justify-center 無作用(內容已填滿)\n // 第一行 top = 0 → label top 對齊 control top ✓\n //\n // ── Block control (RadioGroup / CheckboxGroup) ──\n // Control 是多行群組,沒有「整體中線」可以對齊;錨點是「第一個 item 的第一行\n // 中線永遠在 field-height/2」,由 SelectionItem 的 py 維持。\n // 策略: padding-top = (field-height - 1lh)/2 — 把 label 第一行推到同樣位置。\n //\n // 這個策略對任何 label 長度都正確:label 第一行永遠與第一個 item 第一行對齊,\n // label 超出 control 時往下流(因為 block control 通常本來就很高,不會有\n // inline 模式那種「label 比 control 高」的視覺問題)。\n //\n // 內層 <span>: 只有 inline 策略需要(flex-col 會把星號和 label 文字縱向堆疊,\n // 必須包一層讓兩者 inline 同行)。block 策略可以不包,但為了 DOM 一致性一律包。\n const horizontalInlineClass =\n isHorizontal && controlLayout === 'inline'\n ? cn('flex flex-col justify-center', MIN_H_CLASS[size])\n : undefined\n\n const horizontalBlockStyle: React.CSSProperties \| undefined =\n isHorizontal && controlLayout === 'block'\n ? { paddingTop: `calc((${FIELD_HEIGHT_VAR[size]} - 1lh) / 2)` }\n : undefined\n\n return (\n <label\n ref={ref}\n id={ctx?.labelId}\n htmlFor={htmlFor}\n className={cn(\n FIELD_TEXT_CLASS,\n 'font-normal select-none',\n disabled ? 'text-fg-disabled' : 'text-foreground',\n horizontalInlineClass,\n className\n )}\n style={{ ...horizontalBlockStyle, ...style }}\n data-field-slot=\"label\"\n data-field-disabled={disabled ? '' : undefined}\n {...props}\n >\n <span className=\"inline-flex items-center gap-1\">\n <span>\n {required && (\n <span\n aria-hidden=\"true\"\n className={disabled ? 'text-fg-disabled' : 'text-fg-muted'}\n >\n \n </span>\n )}\n {children}\n </span>\n {info && !disabled && (\n <Tooltip>\n <TooltipTrigger asChild>\n <button\n type=\"button\"\n aria-label={info}\n className=\"inline-flex items-center text-fg-muted hover:text-fg-secondary bg-transparent border-0 p-0 cursor-pointer\"\n >\n <InfoIcon size={16} aria-hidden />\n </button>\n </TooltipTrigger>\n <TooltipContent>{info}</TooltipContent>\n </Tooltip>\n )}\n </span>\n </label>\n )\n }\n)\nFieldLabel.displayName = 'FieldLabel'\n\n// ── FieldDescription ────────────────────────────────────────────────────────\n\nconst FieldDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, id: idProp, ...props }, ref) => {\n const ctx = useFieldContext()\n const disabled = ctx?.disabled ?? false\n\n return (\n <p\n ref={ref}\n id={idProp ?? ctx?.descriptionId}\n className={cn(\n FIELD_TEXT_CLASS,\n disabled ? 'text-fg-disabled' : 'text-fg-secondary',\n className\n )}\n data-field-slot=\"description\"\n {...props}\n >\n {children}\n </p>\n )\n})\nFieldDescription.displayName = 'FieldDescription'\n\n// ── FieldError ──────────────────────────────────────────────────────────────\n\nconst FieldError = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, id: idProp, ...props }, ref) => {\n const ctx = useFieldContext()\n\n // 無內容不渲染，避免空殼佔位\n if (children == null \|\| children === false \|\| children === '') return null\n\n return (\n <p\n ref={ref}\n id={idProp ?? ctx?.errorId}\n className={cn(FIELD_TEXT_CLASS, 'text-error-text', className)}\n data-field-slot=\"error\"\n role=\"alert\"\n {...props}\n >\n {children}\n </p>\n )\n})\nFieldError.displayName = 'FieldError'\n\n// ── FieldGroup ──────────────────────────────────────────────────────────────\n// 垂直堆疊多個 Field，共用 gap 節奏。\n// 用於表單中多個欄位排列。\n\nexport interface FieldGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n /* Field 之間的垂直間距，預設 'normal'（gap-4） /\n gap?: 'compact' \| 'normal' \| 'loose'\n /\n 同一 group 內所有 horizontal Field 共用的 label 欄寬度。\n \n 支援任何 CSS length(`\"140px\"` / `\"10rem\"` / `\"30%\"` 等)。預設不指定——\n * 每個 Field 自動以 label 內容撐開(容易歪七扭八)。\n \n 世界級 idiom:macOS System Settings / iOS Settings / GitHub Settings 的\n * setting list 一律 label 固定寬、control 右對齊,列與列整齊對齊。\n \n 單一 Field 可以用自己的 `labelWidth` prop 覆寫 cascade 值。\n */\n horizontalLabelWidth?: string\n}\n\nconst FieldGroup = React.forwardRef<HTMLDivElement, FieldGroupProps>(\n ({ className, gap = 'normal', horizontalLabelWidth, ...props }, ref) => {\n const gapClass = gap === 'compact' ? 'gap-3' : gap === 'loose' ? 'gap-6' : 'gap-4'\n const groupCtxValue = React.useMemo(\n () => ({ horizontalLabelWidth }),\n [horizontalLabelWidth],\n )\n return (\n <FieldGroupContext.Provider value={groupCtxValue}>\n <div\n ref={ref}\n className={cn('flex flex-col min-w-0', gapClass, className)}\n data-field-group=\"\"\n {...props}\n />\n </FieldGroupContext.Provider>\n )\n }\n)\nFieldGroup.displayName = 'FieldGroup'\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 fieldMeta = {\n component: 'Field',\n family: null, // non-family composite / overlay / layout\n variants: {\n\n },\n sizes: {\n\n },\n states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n tokens: {\n bg: [],\n fg: ['text-error-text', 'text-fg-disabled', 'text-fg-muted', 'text-fg-secondary', 'text-foreground'],\n ring: [],\n },\n} as const\n\nexport { Field, FieldLabel, FieldDescription, FieldError, FieldGroup }\n"],"names":["InfoIcon"],"mappings":"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"}
1	+ {"version":3,"file":"field.js","sources":["../../../src/components/Field/field.tsx"],"sourcesContent":["// code-quality-allow: file-size — foundational composite(Field + FieldLabel + FieldDescription + FieldError + context + 8 layout variants),拆檔會讓 Field 家族互相 import 循環\nimport * as React from 'react'\nimport { Info as InfoIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Tooltip, TooltipTrigger, TooltipContent } from '@/design-system/components/Tooltip/tooltip'\n\n/*\n Field — 表單欄位佈局容器（shadcn Field 風格）\n \n ── 定位 ────────────────────────────────────────────────────────────────\n * Field 只負責佈局 + 狀態 context，不擁有任何資料型別邏輯。\n * 每個資料型別對應的 Control（Input、NumberInput、Checkbox、Switch 等）\n * 維持自己的 edit / readonly / disabled 三態，Field 透過 context 把\n * mode / disabled / required / invalid / id 傳給子元件，由子元件決定\n * 如何反映。\n \n ── 結構 ────────────────────────────────────────────────────────────────\n * <Field orientation=\"vertical \| horizontal\" labelWidth=\"120px\">\n * <FieldLabel>姓名</FieldLabel>\n * <Input value={...} onChange={...} /> ← Control（任何非 label/desc/error 的 child）\n * <FieldDescription>...</FieldDescription>\n * <FieldError>{errors.name}</FieldError>\n * </Field>\n \n Control 會自動包在 control area slot（min-h-field-* + items-center），\n * 確保 Checkbox / Switch / Radio 等高度 < field-height 的 primitive\n * 垂直對齊 Input 中線；Input 等自身為 field-height 的 primitive 填滿。\n \n ── Horizontal mode 的 label 垂直對齊 ───────────────────────────────────\n * FieldLabel 在 horizontal 模式下使用公式：\n * padding-top: calc((var(--field-height-{size}) - 1lh) / 2)\n \n 單行 label → 文字第一行與 input 中線對齊（視覺置中）\n * 多行 label → 第一行仍與 input 中線對齊，其餘行往下流（label 高度超過\n * input 時視覺上仍保持與 input 內容同一基準線）\n \n 此公式 tracks field-height 和 line-height 的變動，size 切換或字體\n * 調整時自動連動，不需 JS 測量。\n \n ── Horizontal mode 的 label 寬度 ───────────────────────────────────────\n * 透過 labelWidth prop → --field-label-width CSS variable，可以是任何\n * CSS length（\"120px\"、\"10rem\"、\"30%\" 等）。預設 \"auto\" 由 label 內容撐開。\n \n ── Required 星號 ──────────────────────────────────────────────────────\n * Field 的 required prop 會透過 context 傳給 FieldLabel 自動渲染，\n 星號為 neutral-7（fg-muted），貼齊 label 文字（無 gap），disabled\n * 時降為 fg-disabled。也可在個別 FieldLabel 覆寫。\n /\n\n// ── Types & Context ──\n// Context 定義在 field-context.ts(打斷 circular import)。\n// field.tsx 只 import 不 re-export——consumer 直接從 field-context.ts import useFieldContext。\n\nimport type { FieldMode, FieldVariant, FieldOrientation, FieldSize, FieldControlLayout, FieldContextValue } from './field-context'\nimport { FieldContext, useFieldContext } from './field-context'\n\n// ── Internal helpers ────────────────────────────────────────────────────────\n\nconst MIN_H_CLASS: Record<FieldSize, string> = {\n sm: 'min-h-field-sm',\n md: 'min-h-field-md',\n lg: 'min-h-field-lg',\n}\n\nconst FIELD_HEIGHT_VAR: Record<FieldSize, string> = {\n sm: 'var(--field-height-sm)',\n md: 'var(--field-height-md)',\n lg: 'var(--field-height-lg)',\n}\n\n// Label / Description / Error 的字體固定 text-body (14px)，不隨 field size 變。\n// 世界級共識：field size 只影響 input 高度，不影響表單佈局元素的 typography。\nconst FIELD_TEXT_CLASS = 'text-body'\n\ntype SlotKind = 'label' \| 'description' \| 'error' \| 'control'\n\nfunction resolveSlotKind(node: React.ReactNode): SlotKind {\n if (!React.isValidElement(node)) return 'control'\n const displayName = (node.type as { displayName?: string } \| null \| undefined)?.displayName\n if (displayName === 'FieldLabel') return 'label'\n if (displayName === 'FieldDescription') return 'description'\n if (displayName === 'FieldError') return 'error'\n return 'control'\n}\n\n/\n 偵測 control children 的 fieldLayout——任一 control 宣告為 'block' 即整個 area 切 block 模式。\n \n Convention：block primitive 在自己的元件檔案掛 static `fieldLayout = 'block'` 屬性,\n * Field 在 render 時讀 `child.type.fieldLayout`。預設 'inline'。\n \n 為什麼是「任一」而非「全部」：實務上 Field 一個 control area 通常只有一個 control,\n * 但若 consumer 同時放多個 child(例如 RadioGroup + 一段補充文字節點),只要其中有 block\n * primitive,整個 area 就應該以 block 模式佈局,確保第一行對齊正確。\n /\nfunction detectControlLayout(controlNodes: React.ReactNode[]): FieldControlLayout {\n for (const node of controlNodes) {\n if (!React.isValidElement(node)) continue\n const layout = (node.type as { fieldLayout?: FieldControlLayout } \| null \| undefined)?.fieldLayout\n if (layout === 'block') return 'block'\n }\n return 'inline'\n}\n\n// ── Field ───────────────────────────────────────────────────────────────────\n\nexport interface FieldProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id'> {\n id?: string\n mode?: FieldMode\n /\n 視覺外殼(2026-05-05)。\n * - `default`(預設)— 含 border + bg(一般 form input)\n * - `bare` — 透明 variant,hover/focus reveal(cell-as-input substrate;VS Code/Figma toolbar idiom)\n \n 透傳機制:Field 一次宣告,所有 child Field control 自動繼承(per-control prop override 可覆寫)。\n /\n variant?: FieldVariant\n orientation?: FieldOrientation\n size?: FieldSize\n required?: boolean\n disabled?: boolean\n invalid?: boolean\n /\n Horizontal mode 的 label 欄寬度。支援任何 CSS length 值（\"120px\"、\"10rem\"、\"30%\"...）。\n * 預設 'auto' 由 label 內容撐開。\n /\n labelWidth?: string\n /\n Control area 佈局模型(逃生艙)。\n \n 預設由 Field 自動偵測——迭代全部 control child 的 `type.fieldLayout` static 屬性,\n * 任一宣告為 `'block'` 即整個 area 切 block(first-block-wins);全部缺宣告時視為 `'inline'`。\n \n 只有兩種情況需要手動指定:\n * 1. consumer 把自己手寫的 JSX(`<div>` / 函式元件)當 control,系統無法偵測——強制 `'block'`\n * 2. 想覆寫 primitive 的預設(如把 RadioGroup 強制 inline 呈現,罕見)\n /\n controlLayout?: FieldControlLayout\n}\n\n// ── FieldGroup Context(cascade horizontal labelWidth)──\n// 同一畫面多個 horizontal Field,label 寬度應統一對齊 → FieldGroup 提供 SSOT。\n// 下面 Field 組件自動 consume,consumer 可用 Field 的 labelWidth prop 覆寫單行。\ninterface FieldGroupContextValue {\n horizontalLabelWidth?: string\n}\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst FieldGroupContext = React.createContext<FieldGroupContextValue>({})\n\nconst Field = React.forwardRef<HTMLDivElement, FieldProps>(\n (\n {\n id: idProp,\n mode = 'edit',\n variant = 'default',\n orientation = 'vertical',\n size = 'md',\n required = false,\n disabled: disabledProp = false,\n invalid = false,\n labelWidth,\n controlLayout: controlLayoutProp,\n className,\n style,\n children,\n ...props\n },\n ref\n ) => {\n const generatedId = React.useId()\n const id = idProp ?? generatedId\n const labelId = `${id}-label`\n const descriptionId = `${id}-description`\n const errorId = `${id}-error`\n\n // FieldGroup cascade:group 的 horizontalLabelWidth 是 fallback,單行 labelWidth 覆寫\n const groupCtx = React.useContext(FieldGroupContext)\n const effectiveLabelWidth = labelWidth ?? groupCtx.horizontalLabelWidth\n\n // mode=disabled 與 disabled prop 任一為 true 即視為 disabled\n const disabled = disabledProp \|\| mode === 'disabled'\n\n // 把 children 依 slot 類型分組\n const labelNodes: React.ReactNode[] = []\n const controlNodes: React.ReactNode[] = []\n const descriptionNodes: React.ReactNode[] = []\n const errorNodes: React.ReactNode[] = []\n\n React.Children.forEach(children, (child) => {\n const slot = resolveSlotKind(child)\n if (slot === 'label') labelNodes.push(child)\n else if (slot === 'description') descriptionNodes.push(child)\n else if (slot === 'error') errorNodes.push(child)\n else controlNodes.push(child)\n })\n\n // 解析 control layout：consumer 顯式指定 > primitive 自我宣告 > 預設 inline\n const controlLayout: FieldControlLayout =\n controlLayoutProp ?? detectControlLayout(controlNodes)\n\n const contextValue = React.useMemo<FieldContextValue>(\n () => ({\n id,\n labelId,\n descriptionId,\n errorId,\n mode,\n variant,\n disabled,\n required,\n invalid,\n size,\n orientation,\n controlLayout,\n hasFieldWrapper: true,\n }),\n [id, labelId, descriptionId, errorId, mode, variant, disabled, required, invalid, size, orientation, controlLayout]\n )\n\n // Control area：兩種佈局模型,「第一行內容中線」都錨在 field-height/2,\n // 跟 FieldLabel 在 horizontal 模式下的 padding-top 公式自然對齊。\n //\n // - inline: min-h-field-{size} + items-center\n // 單行 control(Input、Button 等)中線置中於 min-h box。\n //\n // - block: flex-col + items-start(不設 min-h、不加 padding-top,內容自己決定高度)\n // 多行 control(RadioGroup 等),第一行中線由 block primitive 自帶 py 推到\n // field-height/2,後續 item 自然往下流。\n // Block control area 不加額外 paddingTop——block primitive(RadioGroup 等)\n // 的子元件(SelectionItem)已自帶 py = calc((field-height - 1lh) / 2),\n // 第一個 item 的文字自然落在 field-height/2。額外加 paddingTop 會 double padding。\n const controlArea =\n controlLayout === 'block' ? (\n <div\n className=\"flex flex-col items-start min-w-0\"\n data-field-slot=\"control\"\n data-field-control-layout=\"block\"\n >\n {controlNodes}\n </div>\n ) : (\n <div\n className={cn('flex items-center min-w-0', MIN_H_CLASS[size])}\n data-field-slot=\"control\"\n data-field-control-layout=\"inline\"\n >\n {controlNodes}\n </div>\n )\n\n // Horizontal：grid 兩欄，label 在左、content 欄堆疊（control → description → error）\n if (orientation === 'horizontal') {\n return (\n <FieldContext.Provider value={contextValue}>\n <div\n ref={ref}\n className={cn('grid gap-x-3 items-start', className)}\n style={{\n gridTemplateColumns: 'var(--field-label-width, auto) minmax(0, 1fr)',\n ...(effectiveLabelWidth !== undefined\n ? ({ ['--field-label-width' as string]: effectiveLabelWidth } as React.CSSProperties)\n : undefined),\n ...style,\n }}\n data-field-orientation=\"horizontal\"\n data-field-mode={mode}\n data-field-size={size}\n data-field-disabled={disabled ? '' : undefined}\n data-field-invalid={invalid ? '' : undefined}\n {...props}\n >\n {labelNodes}\n <div className=\"flex flex-col gap-1 min-w-0\">\n {controlArea}\n {descriptionNodes}\n {errorNodes}\n </div>\n </div>\n </FieldContext.Provider>\n )\n }\n\n // Vertical（預設）：單欄 flex-col\n return (\n <FieldContext.Provider value={contextValue}>\n <div\n ref={ref}\n className={cn('flex flex-col gap-1 min-w-0', className)}\n style={style}\n data-field-orientation=\"vertical\"\n data-field-mode={mode}\n data-field-size={size}\n data-field-disabled={disabled ? '' : undefined}\n data-field-invalid={invalid ? '' : undefined}\n {...props}\n >\n {labelNodes}\n {controlArea}\n {descriptionNodes}\n {errorNodes}\n </div>\n </FieldContext.Provider>\n )\n }\n)\nField.displayName = 'Field'\n\n// ── FieldLabel ──────────────────────────────────────────────────────────────\n\nexport interface FieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n /\n 強制渲染 required 星號（覆寫 Field context 的 required）。\n * 若未設定，預設讀 context。\n /\n required?: boolean\n /\n 在 label 文字後方顯示 info icon (ℹ)，hover 出現 tooltip 說明。\n * 傳 string → tooltip 內容。\n \n Info icon 用 inline action pattern（補充工具，視覺退後），\n * 因為 label 的 primary interaction 是 input，info 是補充說明。\n /\n info?: string\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(\n ({ className, required: requiredProp, info, htmlFor: htmlForProp, style, children, ...props }, ref) => {\n const ctx = useFieldContext()\n const required = requiredProp ?? ctx?.required ?? false\n const disabled = ctx?.disabled ?? false\n const htmlFor = htmlForProp ?? ctx?.id\n const isHorizontal = ctx?.orientation === 'horizontal'\n const controlLayout = ctx?.controlLayout ?? 'inline'\n const size: FieldSize = ctx?.size ?? 'md'\n\n // Horizontal 模式對齊策略 — 依 controlLayout 分兩套 (CSS-only, 不需 JS 測量)\n //\n // ── Inline control (Input / Button / Switch / SegmentedControl) ──\n // Control 有固定單行高度 = field-height,可以對齊中線。\n // 策略: min-h-field-{size} + flex flex-col + justify-content: center\n //\n // 1) 短 label (總高 ≤ field-height):\n // min-h 生效 → 容器 = field-height → justify-center 把 label 垂直置中\n // 第一行 top = (field-height - 1lh)/2 → 第一行中線對齊 control 中線 ✓\n // 2) 長 label (總高 > field-height):\n // min-h 被內容撐大 → 容器 = label 總高 → justify-center 無作用(內容已填滿)\n // 第一行 top = 0 → label top 對齊 control top ✓\n //\n // ── Block control (RadioGroup / CheckboxGroup) ──\n // Control 是多行群組,沒有「整體中線」可以對齊;錨點是「第一個 item 的第一行\n // 中線永遠在 field-height/2」,由 SelectionItem 的 py 維持。\n // 策略: padding-top = (field-height - 1lh)/2 — 把 label 第一行推到同樣位置。\n //\n // 這個策略對任何 label 長度都正確:label 第一行永遠與第一個 item 第一行對齊,\n // label 超出 control 時往下流(因為 block control 通常本來就很高,不會有\n // inline 模式那種「label 比 control 高」的視覺問題)。\n //\n // 內層 <span>: 只有 inline 策略需要(flex-col 會把星號和 label 文字縱向堆疊,\n // 必須包一層讓兩者 inline 同行)。block 策略可以不包,但為了 DOM 一致性一律包。\n const horizontalInlineClass =\n isHorizontal && controlLayout === 'inline'\n ? cn('flex flex-col justify-center', MIN_H_CLASS[size])\n : undefined\n\n const horizontalBlockStyle: React.CSSProperties \| undefined =\n isHorizontal && controlLayout === 'block'\n ? { paddingTop: `calc((${FIELD_HEIGHT_VAR[size]} - 1lh) / 2)` }\n : undefined\n\n return (\n <label\n ref={ref}\n id={ctx?.labelId}\n htmlFor={htmlFor}\n className={cn(\n FIELD_TEXT_CLASS,\n 'font-normal select-none',\n disabled ? 'text-fg-disabled' : 'text-foreground',\n horizontalInlineClass,\n className\n )}\n style={{ ...horizontalBlockStyle, ...style }}\n data-field-slot=\"label\"\n data-field-disabled={disabled ? '' : undefined}\n // 2026-06-10 a11y:styled-disabled label 必明告 inactive(WCAG 1.4.3 inactive-UI 豁免需可機判;\n // axe 對無 aria-disabled 的 fg-disabled 文字誤報 color-contrast — deep-audit 抓 8 筆)\n aria-disabled={disabled \|\| undefined}\n {...props}\n >\n <span className=\"inline-flex items-center gap-1\">\n <span>\n {required && (\n <span\n aria-hidden=\"true\"\n className={disabled ? 'text-fg-disabled' : 'text-fg-muted'}\n >\n \n </span>\n )}\n {children}\n </span>\n {info && !disabled && (\n <Tooltip>\n <TooltipTrigger asChild>\n <button\n type=\"button\"\n aria-label={info}\n className=\"inline-flex items-center text-fg-muted hover:text-fg-secondary bg-transparent border-0 p-0 cursor-pointer\"\n >\n <InfoIcon size={16} aria-hidden />\n </button>\n </TooltipTrigger>\n <TooltipContent>{info}</TooltipContent>\n </Tooltip>\n )}\n </span>\n </label>\n )\n }\n)\nFieldLabel.displayName = 'FieldLabel'\n\n// ── FieldDescription ────────────────────────────────────────────────────────\n\nconst FieldDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, id: idProp, ...props }, ref) => {\n const ctx = useFieldContext()\n const disabled = ctx?.disabled ?? false\n\n return (\n <p\n ref={ref}\n id={idProp ?? ctx?.descriptionId}\n className={cn(\n FIELD_TEXT_CLASS,\n disabled ? 'text-fg-disabled' : 'text-fg-secondary',\n className\n )}\n data-field-slot=\"description\"\n {...props}\n >\n {children}\n </p>\n )\n})\nFieldDescription.displayName = 'FieldDescription'\n\n// ── FieldError ──────────────────────────────────────────────────────────────\n\nconst FieldError = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, id: idProp, ...props }, ref) => {\n const ctx = useFieldContext()\n\n // 無內容不渲染，避免空殼佔位\n if (children == null \|\| children === false \|\| children === '') return null\n\n return (\n <p\n ref={ref}\n id={idProp ?? ctx?.errorId}\n className={cn(FIELD_TEXT_CLASS, 'text-error-text', className)}\n data-field-slot=\"error\"\n role=\"alert\"\n {...props}\n >\n {children}\n </p>\n )\n})\nFieldError.displayName = 'FieldError'\n\n// ── FieldGroup ──────────────────────────────────────────────────────────────\n// 垂直堆疊多個 Field，共用 gap 節奏。\n// 用於表單中多個欄位排列。\n\nexport interface FieldGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n /* Field 之間的垂直間距，預設 'normal'（gap-4） /\n gap?: 'compact' \| 'normal' \| 'loose'\n /\n 同一 group 內所有 horizontal Field 共用的 label 欄寬度。\n \n 支援任何 CSS length(`\"140px\"` / `\"10rem\"` / `\"30%\"` 等)。預設不指定——\n * 每個 Field 自動以 label 內容撐開(容易歪七扭八)。\n \n 世界級 idiom:macOS System Settings / iOS Settings / GitHub Settings 的\n * setting list 一律 label 固定寬、control 右對齊,列與列整齊對齊。\n \n 單一 Field 可以用自己的 `labelWidth` prop 覆寫 cascade 值。\n */\n horizontalLabelWidth?: string\n}\n\nconst FieldGroup = React.forwardRef<HTMLDivElement, FieldGroupProps>(\n ({ className, gap = 'normal', horizontalLabelWidth, ...props }, ref) => {\n const gapClass = gap === 'compact' ? 'gap-3' : gap === 'loose' ? 'gap-6' : 'gap-4'\n const groupCtxValue = React.useMemo(\n () => ({ horizontalLabelWidth }),\n [horizontalLabelWidth],\n )\n return (\n <FieldGroupContext.Provider value={groupCtxValue}>\n <div\n ref={ref}\n className={cn('flex flex-col min-w-0', gapClass, className)}\n data-field-group=\"\"\n {...props}\n />\n </FieldGroupContext.Provider>\n )\n }\n)\nFieldGroup.displayName = 'FieldGroup'\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 fieldMeta = {\n component: 'Field',\n family: null, // non-family composite / overlay / layout\n variants: {\n\n },\n sizes: {\n\n },\n states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n tokens: {\n bg: [],\n fg: ['text-error-text', 'text-fg-disabled', 'text-fg-muted', 'text-fg-secondary', 'text-foreground'],\n ring: [],\n },\n} as const\n\nexport { Field, FieldLabel, FieldDescription, FieldError, FieldGroup }\n"],"names":["InfoIcon"],"mappings":"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"}

package/dist/components/FieldControlGroup/field-control-group.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"field-control-group.d.ts","sourceRoot":"","sources":["../../../src/components/FieldControlGroup/field-control-group.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gDAAgD,CAAA;AAE/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AAEH,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAClF,mHAAmH;IACnH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,uEAAuE;IACvE,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,QAAA,MAAM,iBAAiB,+FA0CtB,CAAA;~~AAQD~~,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;CAaxB,CAAA;AAEV,OAAO,EAAE,iBAAiB,EAAE,CAAA"}
1	+ {"version":3,"file":"field-control-group.d.ts","sourceRoot":"","sources":["../../../src/components/FieldControlGroup/field-control-group.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gDAAgD,CAAA;AAE/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AAEH,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAClF,mHAAmH;IACnH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,uEAAuE;IACvE,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,QAAA,MAAM,iBAAiB,+FA0CtB,CAAA;AASD,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;CAaxB,CAAA;AAEV,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/FieldControlGroup/field-control-group.js CHANGED Viewed

@@ -43,7 +43,7 @@ const fieldControlGroupMeta = {
   family: "self-contained",
   variants: {},
   sizes: {},
-  // self-contained wrapper, sizes cascade to children only
+  // self-contained wrapper;size prop no-op(children 尺寸自管)
   states: ["default", "children-hover", "children-focus", "children-disabled"],
   tokens: {
     bg: [],

package/dist/components/FieldControlGroup/field-control-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"field-control-group.js","sources":["../../../src/components/FieldControlGroup/field-control-group.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\n// ── 消費的 SSOT ──\n// - patterns/element-anatomy/element-anatomy.spec.md(Field 家族邊界)\n// - components/Field/field-wrapper.tsx(field-height token via h-field-{sm,md,lg})\n// - components/Field/field-context.ts(useFieldContext / size cascade)\n// - tokens/uiSize/uiSize.spec.md(--field-height-{sm,md,lg})\n// - 世界級對照:Ant Space.Compact compact-item.ts(verified github.com/ant-design/ant-design/blob/master/components/style/compact-item.ts)\n// Bootstrap input-group.scss(verified github.com/twbs/bootstrap/blob/v5.3.3/scss/forms/_input-group.scss)\n//\nimport * as React from 'react'\nimport { cn } from '@/lib/utils'\nimport type { FieldSize } from '@/design-system/components/Field/field-context'\n\n/*\n FieldControlGroup — 多個 Field controls 視覺接合成一個 input frame\n \n Naming rationale(2026-05-04):\n * - Taxonomic 一致:FieldGroup(多 Field 堆疊)/ FieldControlGroup(多 control 接合)— scope 區分\n * - Idiom 一致:ButtonGroup(多 Button 接合)同 pattern,只是 X = field control\n * - 不撞 RadioGroup/CheckboxGroup(那是 1-question 多 options semantic group)\n \n Behavior canonical(verified Ant compact-item.ts L21-58):\n * - 子 controls 保留自身 border + radius;不 strip\n * - 鄰接子用負 margin 重疊 border(Bootstrap 也用此手法但用 z-index 確保 focus 在最上層)\n * - first child 只留左 radii / last child 只留右 radii / middle 全 0 radii\n * - z-index:default 2 / hover\|focus\|focus-within 3 / disabled 0\n * - Container `display: inline-flex`(Ant default)/ `block` prop → `display: flex; width: 100%`\n \n Size(FCG `size` 為 no-op — 不傳遞 size 給 children,無 Context Provider / 無 cloneElement;見 spec「Size」段):\n * - children 尺寸完全由 child 自己決定;FCG 只負責 border-collapse 接合(border / radius / z-index)\n * - Mode A:整個 FieldControlGroup 包進 Field 當 control slot,children 各自讀外層 `<Field>` 的 context size(是 Field 的 context,不是 FCG 的)\n * - Mode B:standalone 用,逐一給每個 child 設 `size`(設 `<FieldControlGroup size>` 無效)\n \n Width 配置(Ant Space.Compact W-A canonical):\n * - 子 controls 自管 width(`className=\"w-[140px]\"` / `style={{width:120}}` / `flex-1` etc.)\n * - FieldControlGroup 不另開 Cell wrapper(避免 indirection,符合 Ant idiom)\n \n 使用範例:\n * ```tsx\n * // Filter row: 2 fixed select + 1 flex value\n * <FieldControlGroup>\n * <Select className=\"w-[140px]\" options={fields} />\n * <Select className=\"w-[120px]\" options={ops} />\n * <Input className=\"flex-1\" placeholder=\"輸入值...\" />\n * </FieldControlGroup>\n \n // Phone: country code + number\n * <Field>\n * <FieldLabel>電話</FieldLabel>\n * <FieldControlGroup>\n * <Select className=\"w-[80px]\" options={codes} />\n * <Input className=\"flex-1\" />\n * </FieldControlGroup>\n * </Field>\n \n // Search + button\n * <FieldControlGroup>\n * <Input className=\"flex-1\" />\n * <Button variant=\"primary\">搜尋</Button>\n * </FieldControlGroup>\n * ```\n /\n\nexport interface FieldControlGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n /* no-op — FCG 不傳遞 size 給 children;Mode A 由 children 讀外層 Field context、Mode B 逐一給每個 child 設 size(見 spec「Size」段) /\n size?: FieldSize\n /* Block 模式:width 100% 撐滿 parent(對齊 Ant Space.Compact `block` prop) /\n block?: boolean\n}\n\nconst FieldControlGroup = React.forwardRef<HTMLDivElement, FieldControlGroupProps>(\n ({ size: _size = 'md', block = false, className, children, ...props }, ref) => {\n return (\n <div\n ref={ref}\n // ── Ant compact-item 機制(verified):\n // [&>]:relative — 子套 relative 才能 z-index 生效\n // [&>]:z-[2] — default z 2(Ant 同值)\n // [&>+]:-ml-px — 鄰接子 margin-left -1px 重疊 border\n // hover/focus/focus-within → z-3(active border 在最上層,Bootstrap 用 z-5,Ant 用 z-3 我們對齊 Ant)\n // first/middle/last radii:對齊 Ant compactItemBorderRadius L67-92\n // ── Children 自管 width(W-A,Ant idiom);Group 自身僅控制 border/radius/z-index 接合機制\n className={cn(\n block ? 'flex w-full' : 'inline-flex',\n 'items-stretch',\n // z-index baseline + active layer\n '[&>]:relative [&>]:z-[2]',\n '[&>:hover]:z-[3] [&>:focus]:z-[3] [&>:focus-within]:z-[3]',\n '[&>[disabled]]:z-0 [&>:has([disabled])]:z-0',\n // border overlap\n '[&>+]:-ml-px',\n // border radius — 中間 0,首/尾保留外側 radii\n '[&>:not(:first-child):not(:last-child)]:rounded-none',\n '[&>:first-child:not(:last-child)]:rounded-r-none',\n '[&>:last-child:not(:first-child)]:rounded-l-none',\n // K12 fix(2026-05-04 v7 — semantic token):FCG 內 disabled cell border 用 `--border-opaque`:\n // ✓ 保留 global `bg-disabled`(neutral-2 灰底)— disabled state 視覺主要承載\n // ✓ 用 SEMANTIC `--border-opaque`(視覺等同 --border 但不跟 bg compositing)\n // v6 直接消費 primitive `--color-neutral-5-opaque` 違反 token 4 規則「禁 primitive 色名作 utility」,\n // v7 升 semantic alias `--border-opaque` 在 semantic.css(其 primitive 後盾仍是 neutral-5-opaque)\n // → 對齊 Ant Design colorBorderSecondary solid idiom(table 外框 / row divider 用 solid,跟 input alpha border 視覺層級分)\n // → 解決 alpha border 在 grey bg 上 composite 略深 perception(physical 對比問題)\n '[&>[data-field-mode=\"disabled\"]]:border-[var(--border-opaque)]',\n className,\n )}\n data-field-control-group=\"\"\n {...props}\n >\n {children}\n </div>\n )\n },\n)\nFieldControlGroup.displayName = 'FieldControlGroup'\n\n// Story auto-compile metadata — Phase 4 migration(2026-05-10 #12 task complete)\n// Per scripts/compile-stories.mjs --check。FieldControlGroup is self-contained\n// structural wrapper(border-collapse pattern for Field controls)。\n// No own sizes — size prop is ~~cascade~~-~~only~~(~~passes~~ ~~through~~ to ~~children~~ ~~Field controls,\~~n// ~~not~~ ~~own~~ ~~visual~~ ~~variants~~),so sizes:{} matches spec frontmatter (no sizes declared)。\nexport const fieldControlGroupMeta = {\n component: 'FieldControlGroup',\n family: 'self-contained',\n variants: {},\n sizes: {}, // self-contained wrapper, ~~sizes~~ ~~cascade to~~ children ~~only~~\n states: ['default', 'children-hover', 'children-focus', 'children-disabled'],\n tokens: {\n bg: [], // structural wrapper has no own bg\n fg: [],\n border: ['var(--border-opaque)'], // K12 disabled cell border\n },\n defaultVariant: undefined,\n defaultSize: undefined,\n} as const\n\nexport { FieldControlGroup }\n"],"names":[],"mappings":";;;AAsEA,MAAM,oBAAoB,MAAM;AAAA,EAC9B,CAAC,EAAE,MAAM,QAAQ,MAAM,QAAQ,OAAO,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC7E,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QAQA,WAAW;AAAA,UACT,QAAQ,gBAAgB;AAAA,UACxB;AAAA;AAAA,UAEA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA,UACA;AAAA,UACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,4BAAyB;AAAA,QACxB,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,kBAAkB,cAAc;~~AAOzB~~,MAAM,wBAAwB;AAAA,EACnC,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU,CAAA;AAAA,EACV,OAAO,CAAA;AAAA;AAAA,EACP,QAAQ,CAAC,WAAW,kBAAkB,kBAAkB,mBAAmB;AAAA,EAC3E,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA;AAAA,IACJ,IAAI,CAAA;AAAA,IACJ,QAAQ,CAAC,sBAAsB;AAAA;AAAA,EAAA;AAAA,EAEjC,gBAAgB;AAAA,EAChB,aAAa;AACf;"}
1	+ {"version":3,"file":"field-control-group.js","sources":["../../../src/components/FieldControlGroup/field-control-group.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\n// ── 消費的 SSOT ──\n// - patterns/element-anatomy/element-anatomy.spec.md(Field 家族邊界)\n// - components/Field/field-wrapper.tsx(field-height token via h-field-{sm,md,lg})\n// - components/Field/field-context.ts(useFieldContext / size cascade)\n// - tokens/uiSize/uiSize.spec.md(--field-height-{sm,md,lg})\n// - 世界級對照:Ant Space.Compact compact-item.ts(verified github.com/ant-design/ant-design/blob/master/components/style/compact-item.ts)\n// Bootstrap input-group.scss(verified github.com/twbs/bootstrap/blob/v5.3.3/scss/forms/_input-group.scss)\n//\nimport * as React from 'react'\nimport { cn } from '@/lib/utils'\nimport type { FieldSize } from '@/design-system/components/Field/field-context'\n\n/*\n FieldControlGroup — 多個 Field controls 視覺接合成一個 input frame\n \n Naming rationale(2026-05-04):\n * - Taxonomic 一致:FieldGroup(多 Field 堆疊)/ FieldControlGroup(多 control 接合)— scope 區分\n * - Idiom 一致:ButtonGroup(多 Button 接合)同 pattern,只是 X = field control\n * - 不撞 RadioGroup/CheckboxGroup(那是 1-question 多 options semantic group)\n \n Behavior canonical(verified Ant compact-item.ts L21-58):\n * - 子 controls 保留自身 border + radius;不 strip\n * - 鄰接子用負 margin 重疊 border(Bootstrap 也用此手法但用 z-index 確保 focus 在最上層)\n * - first child 只留左 radii / last child 只留右 radii / middle 全 0 radii\n * - z-index:default 2 / hover\|focus\|focus-within 3 / disabled 0\n * - Container `display: inline-flex`(Ant default)/ `block` prop → `display: flex; width: 100%`\n \n Size(FCG `size` 為 no-op — 不傳遞 size 給 children,無 Context Provider / 無 cloneElement;見 spec「Size」段):\n * - children 尺寸完全由 child 自己決定;FCG 只負責 border-collapse 接合(border / radius / z-index)\n * - Mode A:整個 FieldControlGroup 包進 Field 當 control slot,children 各自讀外層 `<Field>` 的 context size(是 Field 的 context,不是 FCG 的)\n * - Mode B:standalone 用,逐一給每個 child 設 `size`(設 `<FieldControlGroup size>` 無效)\n \n Width 配置(Ant Space.Compact W-A canonical):\n * - 子 controls 自管 width(`className=\"w-[140px]\"` / `style={{width:120}}` / `flex-1` etc.)\n * - FieldControlGroup 不另開 Cell wrapper(避免 indirection,符合 Ant idiom)\n \n 使用範例:\n * ```tsx\n * // Filter row: 2 fixed select + 1 flex value\n * <FieldControlGroup>\n * <Select className=\"w-[140px]\" options={fields} />\n * <Select className=\"w-[120px]\" options={ops} />\n * <Input className=\"flex-1\" placeholder=\"輸入值...\" />\n * </FieldControlGroup>\n \n // Phone: country code + number\n * <Field>\n * <FieldLabel>電話</FieldLabel>\n * <FieldControlGroup>\n * <Select className=\"w-[80px]\" options={codes} />\n * <Input className=\"flex-1\" />\n * </FieldControlGroup>\n * </Field>\n \n // Search + button\n * <FieldControlGroup>\n * <Input className=\"flex-1\" />\n * <Button variant=\"primary\">搜尋</Button>\n * </FieldControlGroup>\n * ```\n /\n\nexport interface FieldControlGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n /* no-op — FCG 不傳遞 size 給 children;Mode A 由 children 讀外層 Field context、Mode B 逐一給每個 child 設 size(見 spec「Size」段) /\n size?: FieldSize\n /* Block 模式:width 100% 撐滿 parent(對齊 Ant Space.Compact `block` prop) /\n block?: boolean\n}\n\nconst FieldControlGroup = React.forwardRef<HTMLDivElement, FieldControlGroupProps>(\n ({ size: _size = 'md', block = false, className, children, ...props }, ref) => {\n return (\n <div\n ref={ref}\n // ── Ant compact-item 機制(verified):\n // [&>]:relative — 子套 relative 才能 z-index 生效\n // [&>]:z-[2] — default z 2(Ant 同值)\n // [&>+]:-ml-px — 鄰接子 margin-left -1px 重疊 border\n // hover/focus/focus-within → z-3(active border 在最上層,Bootstrap 用 z-5,Ant 用 z-3 我們對齊 Ant)\n // first/middle/last radii:對齊 Ant compactItemBorderRadius L67-92\n // ── Children 自管 width(W-A,Ant idiom);Group 自身僅控制 border/radius/z-index 接合機制\n className={cn(\n block ? 'flex w-full' : 'inline-flex',\n 'items-stretch',\n // z-index baseline + active layer\n '[&>]:relative [&>]:z-[2]',\n '[&>:hover]:z-[3] [&>:focus]:z-[3] [&>:focus-within]:z-[3]',\n '[&>[disabled]]:z-0 [&>:has([disabled])]:z-0',\n // border overlap\n '[&>+]:-ml-px',\n // border radius — 中間 0,首/尾保留外側 radii\n '[&>:not(:first-child):not(:last-child)]:rounded-none',\n '[&>:first-child:not(:last-child)]:rounded-r-none',\n '[&>:last-child:not(:first-child)]:rounded-l-none',\n // K12 fix(2026-05-04 v7 — semantic token):FCG 內 disabled cell border 用 `--border-opaque`:\n // ✓ 保留 global `bg-disabled`(neutral-2 灰底)— disabled state 視覺主要承載\n // ✓ 用 SEMANTIC `--border-opaque`(視覺等同 --border 但不跟 bg compositing)\n // v6 直接消費 primitive `--color-neutral-5-opaque` 違反 token 4 規則「禁 primitive 色名作 utility」,\n // v7 升 semantic alias `--border-opaque` 在 semantic.css(其 primitive 後盾仍是 neutral-5-opaque)\n // → 對齊 Ant Design colorBorderSecondary solid idiom(table 外框 / row divider 用 solid,跟 input alpha border 視覺層級分)\n // → 解決 alpha border 在 grey bg 上 composite 略深 perception(physical 對比問題)\n '[&>[data-field-mode=\"disabled\"]]:border-[var(--border-opaque)]',\n className,\n )}\n data-field-control-group=\"\"\n {...props}\n >\n {children}\n </div>\n )\n },\n)\nFieldControlGroup.displayName = 'FieldControlGroup'\n\n// Story auto-compile metadata — Phase 4 migration(2026-05-10 #12 task complete)\n// Per scripts/compile-stories.mjs --check。FieldControlGroup is self-contained\n// structural wrapper(border-collapse pattern for Field controls)。\n// No own sizes — size prop 目前為 no-op(不傳遞給 children,無 Context Provider /\n// 無 cloneElement;children 尺寸自管,見上方 docblock「Size」段 + spec「FCG `size` prop 目前為 no-op」),\n// so sizes:{} matches spec frontmatter (no sizes declared)。\nexport const fieldControlGroupMeta = {\n component: 'FieldControlGroup',\n family: 'self-contained',\n variants: {},\n sizes: {}, // self-contained wrapper;size prop no-op(children 尺寸自管)\n states: ['default', 'children-hover', 'children-focus', 'children-disabled'],\n tokens: {\n bg: [], // structural wrapper has no own bg\n fg: [],\n border: ['var(--border-opaque)'], // K12 disabled cell border\n },\n defaultVariant: undefined,\n defaultSize: undefined,\n} as const\n\nexport { FieldControlGroup }\n"],"names":[],"mappings":";;;AAsEA,MAAM,oBAAoB,MAAM;AAAA,EAC9B,CAAC,EAAE,MAAM,QAAQ,MAAM,QAAQ,OAAO,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC7E,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QAQA,WAAW;AAAA,UACT,QAAQ,gBAAgB;AAAA,UACxB;AAAA;AAAA,UAEA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA,UACA;AAAA,UACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,4BAAyB;AAAA,QACxB,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,kBAAkB,cAAc;AAQzB,MAAM,wBAAwB;AAAA,EACnC,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU,CAAA;AAAA,EACV,OAAO,CAAA;AAAA;AAAA,EACP,QAAQ,CAAC,WAAW,kBAAkB,kBAAkB,mBAAmB;AAAA,EAC3E,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA;AAAA,IACJ,IAAI,CAAA;AAAA,IACJ,QAAQ,CAAC,sBAAsB;AAAA;AAAA,EAAA;AAAA,EAEjC,gBAAgB;AAAA,EAChB,aAAa;AACf;"}

package/dist/components/FileUpload/file-upload.d.ts CHANGED Viewed

@@ -96,7 +96,14 @@ declare const FileUpload: React.ForwardRefExoticComponent<FileUploadProps & Reac
 export declare const fileUploadMeta: {
     readonly component: "FileUpload";
     readonly family: null;
-    readonly variants: {};
+    readonly variants: {
+        readonly dropzone: {
+            readonly purpose: "大型 dashed 拖放區(預設)— 拖放有價值 + 主要上傳區(drag + click)";
+        };
+        readonly button: {
+            readonly purpose: "緊湊 Button 觸發 — form 內單欄 / 空間省(click-only)";
+        };
+    };
     readonly sizes: {};
     readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
     readonly tokens: {

package/dist/components/FileUpload/file-upload.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../../src/components/FileUpload/file-upload.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,OAAO,CAAA;IAC5C,oCAAoC;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC3F,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAA;IAC/B,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gCAAgC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+GAA+G;IAC/G,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC1B,yFAAyF;IACzF,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IACjC,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,4EAA4E;IAC5E,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;CAC3C;AAGD,QAAA,MAAM,UAAU,~~wFAiOf~~,CAAA;AA0BD,eAAO,MAAM,cAAc~~;;;;;;;;;;;CAejB~~,CAAA;AAEV,OAAO,EAAE,UAAU,EAAE,CAAA"}
1	+ {"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../../src/components/FileUpload/file-upload.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,OAAO,CAAA;IAC5C,oCAAoC;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC3F,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAA;IAC/B,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gCAAgC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+GAA+G;IAC/G,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC1B,yFAAyF;IACzF,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IACjC,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,4EAA4E;IAC5E,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;CAC3C;AAGD,QAAA,MAAM,UAAU,wFAkOf,CAAA;AA0BD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;CAgBjB,CAAA;AAEV,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/components/FileUpload/file-upload.js CHANGED Viewed

@@ -87,7 +87,7 @@ const FileUpload = React.forwardRef(
             actions: onRemove ? (
               // Collection remove(per-file)— 不是 dismiss surface,故不套 `dismiss` prop。
               // 視覺與 dismiss 一致(text variant + fg-muted dim)— 對齊 inline-action.spec.md
-              // 「Dismiss canonical — X close only」(section L204);L229 明文:onRemove callback 不觸發 dismiss prop。
+              // 「Dismiss canonical — X close only」+「dismiss prop 觸發條件」段:onRemove callback 不觸發 dismiss prop。
               /* @__PURE__ */ jsx(
                 Button,
                 {
@@ -189,7 +189,8 @@ const FileUpload = React.forwardRef(
             "border-border bg-surface",
             // hover = drag-over 統一(2026-06-03 Q2-A 純 border-driven,對齊 Ant Dragger colorPrimaryHover):
             // 兩者都 → primary 邊框,底色維持 surface(不變 bg)。state 信號靠邊框,非底色。
-            "hover:border-primary data-[state=drag-over]:border-primary",
+            // 2026-06-11 R2(M5 狀態疊加):hover 變 primary 僅限 idle/error —— disabled/loading 維持原邊框(spec「disabled 邊框不變色」)
+            "data-[state=idle]:hover:border-primary data-[state=drag-over]:border-primary",
             // loading(2026-06-03 Q4:移除 pointer-events-none — 它會讓 cursor-progress 失效;
             // 互動已由 handleClick + drag/key handlers 的 isBlocked guard 擋,不需 pointer-events-none)
             "data-[state=loading]:cursor-progress",
@@ -255,7 +256,10 @@ const fileUploadMeta = {
   component: "FileUpload",
   family: null,
   // non-family composite / overlay / layout
-  variants: {},
+  variants: {
+    dropzone: { purpose: "大型 dashed 拖放區(預設)— 拖放有價值 + 主要上傳區(drag + click)" },
+    button: { purpose: "緊湊 Button 觸發 — form 內單欄 / 空間省(click-only)" }
+  },
   sizes: {},
   states: ["default", "hover", "active", "focus-visible", "disabled"],
   tokens: {

package/dist/components/FileUpload/file-upload.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"file-upload.js","sources":["../../../src/components/FileUpload/file-upload.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 { Upload as UploadIcon, X } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Empty } from '@/design-system/components/Empty/empty'\nimport { CircularProgress } from '@/design-system/components/CircularProgress/circular-progress'\nimport { FileItem } from '@/design-system/components/FileItem/file-item'\nimport { Button } from '@/design-system/components/Button/button'\n\n/*\n FileUpload — 拖放 / 點擊上傳區塊\n \n 世界級對照:Ant Design `Upload.Dragger`、Polaris `DropZone`、Material community MUI-File-Input。\n * 與本 DS 既有 FileItem(顯示已上傳檔案)配對 — 這裡 own「上傳觸發 + 拖放偵測」,\n * 上傳後的檔案清單顯示交給 consumer 用 FileItem 渲染。\n \n ── 4 狀態(2026-06-03 修正)──\n * idle (default) — border-dashed border-border bg-surface\n * hover = drag-over — border-primary(統一,純 border-driven,底維持 surface)\n * loading — CircularProgress;cursor-progress(無 pointer-events-none)\n * disabled — bg-disabled + 文字 fg-disabled(語意 token,非 opacity)+ cursor-not-allowed\n \n ── variant ──\n * dropzone(預設)大拖放區 + drag;button 緊湊 Button 觸發(form-friendly,click-only)\n \n ── children 插槽 ──\n * 預設渲染 `<Empty icon={Upload} title description />` — 重用 Empty 元件 own\n * 的「icon + title + description 垂直居中」SSOT 避免視覺漂移。Empty 改字體 /\n * gap / icon 尺寸時 FileUpload 自動跟進。若 consumer 傳 children 則整個覆寫。\n \n ── API ──\n * onUpload: 使用者選取或拖放檔案時觸發,回傳 File[](至少 1 個)。\n * multiple: 允許多檔。預設 false(單檔)。\n * accept: MIME filter(例 \"image/,.pdf\"),傳給 <input type=file>。\n maxSize: 單檔最大 bytes;超過靜默忽略(consumer 若需要錯誤提示,走 onReject)。\n * onReject: 被 maxSize / accept 擋下的檔案(提供錯誤訊息顯示機會)。\n /\n\n/\n Uploaded / uploading file status item(for `files` prop)。\n * Consumer 持 state(progress / status),FileUpload 只負責渲染。\n /\nexport interface FileUploadStatus {\n id: string\n name: string\n /* bytes /\n size?: number\n /* Upload 進度(0-100)— uploading 時顯示 progress bar /\n progress?: number\n status?: 'uploading' \| 'completed' \| 'error'\n /* Error 訊息 / size 等 description /\n description?: React.ReactNode\n /* Thumbnail URL for rich mode /\n thumbnailSrc?: string\n}\n\nexport interface FileUploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onDrop'> {\n onUpload?: (files: File[]) => void\n onReject?: (files: File[], reason: 'size' \| 'type') => void\n multiple?: boolean\n accept?: string\n maxSize?: number\n disabled?: boolean\n /\n 觸發外觀(2026-06-03 加,M21 prop-variant + Ant `Upload`(button)/`Upload.Dragger`(dropzone)先例):\n * - `dropzone`(預設):大拖放區 + 點擊,支援 drag-and-drop。\n * - `button`:緊湊 Button 觸發(form-friendly,省空間),click-only(無拖放區)。\n * 兩者共用 onUpload / onReject / files 清單渲染;都可放進 Field control slot。\n /\n variant?: 'dropzone' \| 'button'\n /* `variant=\"button\"` 的按鈕文字(預設「Choose file」)。 /\n buttonLabel?: string\n /\n Loading 狀態(async 上傳 / 伺服器處理中)。\n * - 2026-06-03 deferred:其唯一用途(無清單單檔 / 頭像替換)場景尚未定義,故已從 3-state showcase\n * 移除、不作為當前 feature 呈現;prop 保留供未來該場景。有清單的上傳進度走 FileItem 自身 progress bar(status=uploading）。\n * - 顯示 CircularProgress 取代預設 Empty 內容;`cursor-progress`;互動由 handleClick/handlers 的 isBlocked guard 擋\n * - 宣告 `aria-busy=\"true\"` 讓 screen reader 感知處理中\n /\n loading?: boolean\n /* Loading 狀態的文字標題(預設「上傳中…」) /\n loadingTitle?: string\n /* 標題文字(預設「Click or drag file here to upload」) /\n title?: string\n /* 說明文字(預設依 multiple:單檔「Support for a single file upload」、multiple 多檔「Support for a single or bulk upload」) /\n description?: string\n /* 若傳入 children,覆寫預設 Empty 結構 /\n children?: React.ReactNode\n /\n Uploaded / uploading 檔案清單。傳入 → FileUpload 在 drop zone 下方渲染列表。\n * 不傳 → 不顯示(consumer 可自行用 FileItem 組成,pre-2026-04-24 行為)。\n * 每項由 FileItem 渲染,status 狀態對應視覺:\n * - `uploading`:linear ProgressBar(via FileItem;rich mode 另顯示 {progress}%)\n * - `completed`:綠色 ✓(success 狀態視覺確認)\n * - `error`:紅色 ✗(+ description 顯示錯誤訊息)\n /\n files?: FileUploadStatus[]\n /* File list 每項顯示模式。Default: 'compact'(單行);'rich' = 含 thumbnail / size / progress bar /\n fileListMode?: 'compact' \| 'rich'\n /* File list 移除 callback。有值 → 每項右側顯示 X dismiss button;無 → 不可移除(view-only) /\n onRemove?: (id: string) => void\n /* File list dismiss button ARIA label template。預設 `移除 {name}`。For i18n. /\n removeAriaLabel?: (name: string) => string\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(\n (\n {\n onUpload,\n onReject,\n multiple = false,\n accept,\n maxSize,\n disabled = false,\n variant = 'dropzone',\n buttonLabel = 'Choose file', // i18n-allow: DS default; consumer override via buttonLabel prop\n loading = false,\n loadingTitle = '上傳中…', // i18n-allow: DS default; consumer override via loadingTitle prop\n title = 'Click or drag file here to upload', // i18n-allow: DS default; consumer override via title prop\n description = multiple ? 'Support for a single or bulk upload' : 'Support for a single file upload', // i18n-allow: DS default; consumer override via description prop\n children,\n files,\n fileListMode = 'compact',\n onRemove,\n removeAriaLabel = (name: string) => `移除 ${name}`, // i18n-allow: DS default; consumer override via removeAriaLabel prop\n className,\n onClick,\n ...props\n },\n ref,\n ) => {\n const inputRef = React.useRef<HTMLInputElement>(null)\n const [isDragOver, setDragOver] = React.useState(false)\n\n const filterAndDispatch = (files: FileList \| null) => {\n if (!files \|\| files.length === 0) return\n const accepted: File[] = []\n const rejectedBySize: File[] = []\n const rejectedByType: File[] = []\n\n Array.from(files).forEach((f) => {\n if (maxSize != null && f.size > maxSize) {\n rejectedBySize.push(f)\n return\n }\n if (accept && !matchAccept(f, accept)) {\n rejectedByType.push(f)\n return\n }\n accepted.push(f)\n })\n\n if (rejectedBySize.length) onReject?.(rejectedBySize, 'size')\n if (rejectedByType.length) onReject?.(rejectedByType, 'type')\n if (accepted.length) onUpload?.(multiple ? accepted : accepted.slice(0, 1))\n }\n\n const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n // 2026-06-03 Q4:guard `!disabled && !loading`(= !isBlocked)。loading 時也擋點擊防 double-submit\n // (原只 guard !disabled,靠 pointer-events-none 擋 loading;移除 pointer-events-none 後改這裡 guard)。\n if (!disabled && !loading) inputRef.current?.click()\n onClick?.(e)\n }\n\n // State 優先序:disabled > loading > drag-over > idle(disabled 最硬,loading 次之)\n const state = disabled ? 'disabled' : loading ? 'loading' : isDragOver ? 'drag-over' : 'idle'\n const isBlocked = disabled \|\| loading\n\n const hasFiles = Array.isArray(files) && files.length > 0\n\n const fileListNode = hasFiles ? (\n <ul\n className={cn(\n 'flex flex-col w-full',\n // 2026-06-03 gap SSOT:列間 gap + control→list gap(mt)由「item 有無邊框」單一規則決定,\n // 同值貫穿整個垂直堆疊 — rich(form surface = border card)→ 8px;compact(borderless/bg-pill)→ 4px。\n // 消費 FileItem「List wrapper canonical」(file-item.spec.md),取代原硬寫 gap-2 / mt-3(不分 mode)。\n fileListMode === 'rich' ? 'gap-2 mt-2' : 'gap-1 mt-1',\n )}\n aria-label=\"Uploaded files\"\n >\n {files!.map((f) => (\n <li key={f.id} className=\"list-none\">\n <FileItem\n mode={fileListMode}\n name={f.name}\n status={f.status}\n progress={f.progress}\n description={f.description ?? (f.size != null ? formatBytes(f.size) : undefined)}\n thumbnailSrc={f.thumbnailSrc}\n actions={\n onRemove ? (\n // Collection remove(per-file)— 不是 dismiss surface,故不套 `dismiss` prop。\n // 視覺與 dismiss 一致(text variant + fg-muted dim)— 對齊 inline-action.spec.md\n // 「Dismiss canonical — X close only」(section L204);L229 明文:onRemove callback 不觸發 dismiss prop。\n <Button\n iconOnly\n variant=\"text\"\n size=\"xs\"\n startIcon={X}\n aria-label={removeAriaLabel(f.name)}\n onClick={(e) => {\n e.stopPropagation()\n onRemove(f.id)\n }}\n className=\"text-fg-muted hover:text-foreground\"\n />\n ) : undefined\n }\n />\n </li>\n ))}\n </ul>\n ) : null\n\n return (\n <div ref={ref} className={cn('w-full', hasFiles && 'flex flex-col')}>\n {variant === 'button' ? (\n // ── button variant:緊湊觸發(form-friendly,省空間),click-only(無拖放區)──\n <div className={className} {...props}>\n <input\n ref={inputRef}\n type=\"file\"\n className=\"hidden\"\n multiple={multiple}\n accept={accept}\n disabled={disabled}\n onChange={(e) => filterAndDispatch(e.target.files)}\n />\n <Button\n variant=\"tertiary\"\n startIcon={UploadIcon}\n loading={loading}\n disabled={disabled}\n aria-busy={loading \|\| undefined}\n onClick={() => {\n if (!disabled && !loading) inputRef.current?.click()\n }}\n >\n {buttonLabel}\n </Button>\n </div>\n ) : (\n <div\n role=\"button\"\n tabIndex={isBlocked ? -1 : 0}\n aria-disabled={disabled \|\| undefined}\n aria-busy={loading \|\| undefined}\n data-state={state}\n onClick={handleClick}\n onKeyDown={(e) => {\n if (isBlocked) return\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault()\n inputRef.current?.click()\n }\n }}\n onDragEnter={(e) => {\n if (isBlocked) return\n e.preventDefault()\n setDragOver(true)\n }}\n onDragLeave={(e) => {\n if (isBlocked) return\n e.preventDefault()\n setDragOver(false)\n }}\n onDragOver={(e) => {\n if (isBlocked) return\n e.preventDefault()\n }}\n onDrop={(e) => {\n if (isBlocked) return\n e.preventDefault()\n setDragOver(false)\n filterAndDispatch(e.dataTransfer.files)\n }}\n className={cn(\n // 寬度 w-full 填滿 consumer 容器(user 明示「寬度填滿」);高度由 padding + 內容物決定(不固定 h)\n 'flex flex-col items-center justify-center gap-2 text-center w-full',\n // 對稱 padding p-[var(--layout-space-loose)]:四邊等距,density-aware(md=16px / lg=24px),對齊 DS chrome padding canonical。\n // 不再硬寫 px-6 py-10(不對稱+非 token)。內容物(icon + title + description)垂直堆疊由 gap-2 控制\n 'rounded-md border-2 border-dashed p-[var(--layout-space-loose)]',\n 'cursor-pointer transition-colors',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n // idle:--border(元件邊框,非 --divider 分隔線 — 2026-06-03 Q2 token 修正)+ surface 底\n 'border-border bg-surface',\n // hover = drag-over 統一(2026-06-03 Q2-A 純 border-driven,對齊 Ant Dragger colorPrimaryHover):\n // 兩者都 → primary 邊框,底色維持 surface(不變 bg)。state 信號靠邊框,非底色。\n 'hover:border-primary data-[state=drag-over]:border-primary',\n // loading(2026-06-03 Q4:移除 pointer-events-none — 它會讓 cursor-progress 失效;\n // 互動已由 handleClick + drag/key handlers 的 isBlocked guard 擋,不需 pointer-events-none)\n 'data-[state=loading]:cursor-progress',\n // disabled(2026-06-03 Q3:語意 token 非 opacity — dashed outline surface 走 DS outline-disabled 慣例;\n // bg→disabled,border 不變色,文字/icon 由 Empty disabled 控;cursor-not-allowed 現在生效)\n 'data-[state=disabled]:bg-disabled data-[state=disabled]:cursor-not-allowed',\n className,\n )}\n {...props}\n >\n <input\n ref={inputRef}\n type=\"file\"\n className=\"hidden\"\n multiple={multiple}\n accept={accept}\n disabled={disabled}\n onChange={(e) => filterAndDispatch(e.target.files)}\n />\n {loading ? (\n <Empty\n icon={<CircularProgress size={48} />}\n title={loadingTitle}\n />\n ) : (\n children ?? (\n <Empty\n icon={UploadIcon}\n title={title}\n description={description}\n disabled={disabled}\n />\n )\n )}\n </div>\n )}\n {fileListNode}\n </div>\n )\n },\n)\nFileUpload.displayName = 'FileUpload'\n\n// ── helper: bytes formatter ───────────────────────────────────────────────\nfunction formatBytes(n: number): string {\n if (n < 1024) return `${n} B`\n if (n < 1024 1024) return `${(n / 1024).toFixed(1)} KB`\n if (n < 1024 * 1024 * 1024) return `${(n / (1024 * 1024)).toFixed(1)} MB`\n return `${(n / (1024 * 1024 * 1024)).toFixed(1)} GB`\n}\n\n// ── helpers ─────────────────────────────────────────────────────────────────\n\nfunction matchAccept(file: File, accept: string): boolean {\n const patterns = accept.split(',').map((s) => s.trim().toLowerCase())\n const fileName = file.name.toLowerCase()\n const fileType = file.type.toLowerCase()\n return patterns.some((p) => {\n if (p.startsWith('.')) return fileName.endsWith(p) // 副檔名 e.g. \".pdf\"\n if (p.endsWith('/')) return fileType.startsWith(p.slice(0, -1)) // e.g. \"image/\"\n return fileType === p // 完整 MIME\n })\n}\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const fileUploadMeta = {\n component: 'FileUpload',\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', 'bg-disabled'],\n fg: [],\n ring: ['ring-ring'],\n },\n} as const\n\nexport { FileUpload }\n"],"names":["files","UploadIcon"],"mappings":"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"}
1	+ {"version":3,"file":"file-upload.js","sources":["../../../src/components/FileUpload/file-upload.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 { Upload as UploadIcon, X } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Empty } from '@/design-system/components/Empty/empty'\nimport { CircularProgress } from '@/design-system/components/CircularProgress/circular-progress'\nimport { FileItem } from '@/design-system/components/FileItem/file-item'\nimport { Button } from '@/design-system/components/Button/button'\n\n/*\n FileUpload — 拖放 / 點擊上傳區塊\n \n 世界級對照:Ant Design `Upload.Dragger`、Polaris `DropZone`、Material community MUI-File-Input。\n * 與本 DS 既有 FileItem(顯示已上傳檔案)配對 — 這裡 own「上傳觸發 + 拖放偵測」,\n * 上傳後的檔案清單顯示交給 consumer 用 FileItem 渲染。\n \n ── 4 狀態(2026-06-03 修正)──\n * idle (default) — border-dashed border-border bg-surface\n * hover = drag-over — border-primary(統一,純 border-driven,底維持 surface)\n * loading — CircularProgress;cursor-progress(無 pointer-events-none)\n * disabled — bg-disabled + 文字 fg-disabled(語意 token,非 opacity)+ cursor-not-allowed\n \n ── variant ──\n * dropzone(預設)大拖放區 + drag;button 緊湊 Button 觸發(form-friendly,click-only)\n \n ── children 插槽 ──\n * 預設渲染 `<Empty icon={Upload} title description />` — 重用 Empty 元件 own\n * 的「icon + title + description 垂直居中」SSOT 避免視覺漂移。Empty 改字體 /\n * gap / icon 尺寸時 FileUpload 自動跟進。若 consumer 傳 children 則整個覆寫。\n \n ── API ──\n * onUpload: 使用者選取或拖放檔案時觸發,回傳 File[](至少 1 個)。\n * multiple: 允許多檔。預設 false(單檔)。\n * accept: MIME filter(例 \"image/,.pdf\"),傳給 <input type=file>。\n maxSize: 單檔最大 bytes;超過靜默忽略(consumer 若需要錯誤提示,走 onReject)。\n * onReject: 被 maxSize / accept 擋下的檔案(提供錯誤訊息顯示機會)。\n /\n\n/\n Uploaded / uploading file status item(for `files` prop)。\n * Consumer 持 state(progress / status),FileUpload 只負責渲染。\n /\nexport interface FileUploadStatus {\n id: string\n name: string\n /* bytes /\n size?: number\n /* Upload 進度(0-100)— uploading 時顯示 progress bar /\n progress?: number\n status?: 'uploading' \| 'completed' \| 'error'\n /* Error 訊息 / size 等 description /\n description?: React.ReactNode\n /* Thumbnail URL for rich mode /\n thumbnailSrc?: string\n}\n\nexport interface FileUploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onDrop'> {\n onUpload?: (files: File[]) => void\n onReject?: (files: File[], reason: 'size' \| 'type') => void\n multiple?: boolean\n accept?: string\n maxSize?: number\n disabled?: boolean\n /\n 觸發外觀(2026-06-03 加,M21 prop-variant + Ant `Upload`(button)/`Upload.Dragger`(dropzone)先例):\n * - `dropzone`(預設):大拖放區 + 點擊,支援 drag-and-drop。\n * - `button`:緊湊 Button 觸發(form-friendly,省空間),click-only(無拖放區)。\n * 兩者共用 onUpload / onReject / files 清單渲染;都可放進 Field control slot。\n /\n variant?: 'dropzone' \| 'button'\n /* `variant=\"button\"` 的按鈕文字(預設「Choose file」)。 /\n buttonLabel?: string\n /\n Loading 狀態(async 上傳 / 伺服器處理中)。\n * - 2026-06-03 deferred:其唯一用途(無清單單檔 / 頭像替換)場景尚未定義,故已從 3-state showcase\n * 移除、不作為當前 feature 呈現;prop 保留供未來該場景。有清單的上傳進度走 FileItem 自身 progress bar(status=uploading）。\n * - 顯示 CircularProgress 取代預設 Empty 內容;`cursor-progress`;互動由 handleClick/handlers 的 isBlocked guard 擋\n * - 宣告 `aria-busy=\"true\"` 讓 screen reader 感知處理中\n /\n loading?: boolean\n /* Loading 狀態的文字標題(預設「上傳中…」) /\n loadingTitle?: string\n /* 標題文字(預設「Click or drag file here to upload」) /\n title?: string\n /* 說明文字(預設依 multiple:單檔「Support for a single file upload」、multiple 多檔「Support for a single or bulk upload」) /\n description?: string\n /* 若傳入 children,覆寫預設 Empty 結構 /\n children?: React.ReactNode\n /\n Uploaded / uploading 檔案清單。傳入 → FileUpload 在 drop zone 下方渲染列表。\n * 不傳 → 不顯示(consumer 可自行用 FileItem 組成,pre-2026-04-24 行為)。\n * 每項由 FileItem 渲染,status 狀態對應視覺:\n * - `uploading`:linear ProgressBar(via FileItem;rich mode 另顯示 {progress}%)\n * - `completed`:綠色 ✓(success 狀態視覺確認)\n * - `error`:紅色 ✗(+ description 顯示錯誤訊息)\n /\n files?: FileUploadStatus[]\n /* File list 每項顯示模式。Default: 'compact'(單行);'rich' = 含 thumbnail / size / progress bar /\n fileListMode?: 'compact' \| 'rich'\n /* File list 移除 callback。有值 → 每項右側顯示 X dismiss button;無 → 不可移除(view-only) /\n onRemove?: (id: string) => void\n /* File list dismiss button ARIA label template。預設 `移除 {name}`。For i18n. /\n removeAriaLabel?: (name: string) => string\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(\n (\n {\n onUpload,\n onReject,\n multiple = false,\n accept,\n maxSize,\n disabled = false,\n variant = 'dropzone',\n buttonLabel = 'Choose file', // i18n-allow: DS default; consumer override via buttonLabel prop\n loading = false,\n loadingTitle = '上傳中…', // i18n-allow: DS default; consumer override via loadingTitle prop\n title = 'Click or drag file here to upload', // i18n-allow: DS default; consumer override via title prop\n description = multiple ? 'Support for a single or bulk upload' : 'Support for a single file upload', // i18n-allow: DS default; consumer override via description prop\n children,\n files,\n fileListMode = 'compact',\n onRemove,\n removeAriaLabel = (name: string) => `移除 ${name}`, // i18n-allow: DS default; consumer override via removeAriaLabel prop\n className,\n onClick,\n ...props\n },\n ref,\n ) => {\n const inputRef = React.useRef<HTMLInputElement>(null)\n const [isDragOver, setDragOver] = React.useState(false)\n\n const filterAndDispatch = (files: FileList \| null) => {\n if (!files \|\| files.length === 0) return\n const accepted: File[] = []\n const rejectedBySize: File[] = []\n const rejectedByType: File[] = []\n\n Array.from(files).forEach((f) => {\n if (maxSize != null && f.size > maxSize) {\n rejectedBySize.push(f)\n return\n }\n if (accept && !matchAccept(f, accept)) {\n rejectedByType.push(f)\n return\n }\n accepted.push(f)\n })\n\n if (rejectedBySize.length) onReject?.(rejectedBySize, 'size')\n if (rejectedByType.length) onReject?.(rejectedByType, 'type')\n if (accepted.length) onUpload?.(multiple ? accepted : accepted.slice(0, 1))\n }\n\n const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n // 2026-06-03 Q4:guard `!disabled && !loading`(= !isBlocked)。loading 時也擋點擊防 double-submit\n // (原只 guard !disabled,靠 pointer-events-none 擋 loading;移除 pointer-events-none 後改這裡 guard)。\n if (!disabled && !loading) inputRef.current?.click()\n onClick?.(e)\n }\n\n // State 優先序:disabled > loading > drag-over > idle(disabled 最硬,loading 次之)\n const state = disabled ? 'disabled' : loading ? 'loading' : isDragOver ? 'drag-over' : 'idle'\n const isBlocked = disabled \|\| loading\n\n const hasFiles = Array.isArray(files) && files.length > 0\n\n const fileListNode = hasFiles ? (\n <ul\n className={cn(\n 'flex flex-col w-full',\n // 2026-06-03 gap SSOT:列間 gap + control→list gap(mt)由「item 有無邊框」單一規則決定,\n // 同值貫穿整個垂直堆疊 — rich(form surface = border card)→ 8px;compact(borderless/bg-pill)→ 4px。\n // 消費 FileItem「List wrapper canonical」(file-item.spec.md),取代原硬寫 gap-2 / mt-3(不分 mode)。\n fileListMode === 'rich' ? 'gap-2 mt-2' : 'gap-1 mt-1',\n )}\n aria-label=\"Uploaded files\"\n >\n {files!.map((f) => (\n <li key={f.id} className=\"list-none\">\n <FileItem\n mode={fileListMode}\n name={f.name}\n status={f.status}\n progress={f.progress}\n description={f.description ?? (f.size != null ? formatBytes(f.size) : undefined)}\n thumbnailSrc={f.thumbnailSrc}\n actions={\n onRemove ? (\n // Collection remove(per-file)— 不是 dismiss surface,故不套 `dismiss` prop。\n // 視覺與 dismiss 一致(text variant + fg-muted dim)— 對齊 inline-action.spec.md\n // 「Dismiss canonical — X close only」+「dismiss prop 觸發條件」段:onRemove callback 不觸發 dismiss prop。\n <Button\n iconOnly\n variant=\"text\"\n size=\"xs\"\n startIcon={X}\n aria-label={removeAriaLabel(f.name)}\n onClick={(e) => {\n e.stopPropagation()\n onRemove(f.id)\n }}\n className=\"text-fg-muted hover:text-foreground\"\n />\n ) : undefined\n }\n />\n </li>\n ))}\n </ul>\n ) : null\n\n return (\n <div ref={ref} className={cn('w-full', hasFiles && 'flex flex-col')}>\n {variant === 'button' ? (\n // ── button variant:緊湊觸發(form-friendly,省空間),click-only(無拖放區)──\n <div className={className} {...props}>\n <input\n ref={inputRef}\n type=\"file\"\n className=\"hidden\"\n multiple={multiple}\n accept={accept}\n disabled={disabled}\n onChange={(e) => filterAndDispatch(e.target.files)}\n />\n <Button\n variant=\"tertiary\"\n startIcon={UploadIcon}\n loading={loading}\n disabled={disabled}\n aria-busy={loading \|\| undefined}\n onClick={() => {\n if (!disabled && !loading) inputRef.current?.click()\n }}\n >\n {buttonLabel}\n </Button>\n </div>\n ) : (\n <div\n role=\"button\"\n tabIndex={isBlocked ? -1 : 0}\n aria-disabled={disabled \|\| undefined}\n aria-busy={loading \|\| undefined}\n data-state={state}\n onClick={handleClick}\n onKeyDown={(e) => {\n if (isBlocked) return\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault()\n inputRef.current?.click()\n }\n }}\n onDragEnter={(e) => {\n if (isBlocked) return\n e.preventDefault()\n setDragOver(true)\n }}\n onDragLeave={(e) => {\n if (isBlocked) return\n e.preventDefault()\n setDragOver(false)\n }}\n onDragOver={(e) => {\n if (isBlocked) return\n e.preventDefault()\n }}\n onDrop={(e) => {\n if (isBlocked) return\n e.preventDefault()\n setDragOver(false)\n filterAndDispatch(e.dataTransfer.files)\n }}\n className={cn(\n // 寬度 w-full 填滿 consumer 容器(user 明示「寬度填滿」);高度由 padding + 內容物決定(不固定 h)\n 'flex flex-col items-center justify-center gap-2 text-center w-full',\n // 對稱 padding p-[var(--layout-space-loose)]:四邊等距,density-aware(md=16px / lg=24px),對齊 DS chrome padding canonical。\n // 不再硬寫 px-6 py-10(不對稱+非 token)。內容物(icon + title + description)垂直堆疊由 gap-2 控制\n 'rounded-md border-2 border-dashed p-[var(--layout-space-loose)]',\n 'cursor-pointer transition-colors',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n // idle:--border(元件邊框,非 --divider 分隔線 — 2026-06-03 Q2 token 修正)+ surface 底\n 'border-border bg-surface',\n // hover = drag-over 統一(2026-06-03 Q2-A 純 border-driven,對齊 Ant Dragger colorPrimaryHover):\n // 兩者都 → primary 邊框,底色維持 surface(不變 bg)。state 信號靠邊框,非底色。\n // 2026-06-11 R2(M5 狀態疊加):hover 變 primary 僅限 idle/error —— disabled/loading 維持原邊框(spec「disabled 邊框不變色」)\n 'data-[state=idle]:hover:border-primary data-[state=drag-over]:border-primary',\n // loading(2026-06-03 Q4:移除 pointer-events-none — 它會讓 cursor-progress 失效;\n // 互動已由 handleClick + drag/key handlers 的 isBlocked guard 擋,不需 pointer-events-none)\n 'data-[state=loading]:cursor-progress',\n // disabled(2026-06-03 Q3:語意 token 非 opacity — dashed outline surface 走 DS outline-disabled 慣例;\n // bg→disabled,border 不變色,文字/icon 由 Empty disabled 控;cursor-not-allowed 現在生效)\n 'data-[state=disabled]:bg-disabled data-[state=disabled]:cursor-not-allowed',\n className,\n )}\n {...props}\n >\n <input\n ref={inputRef}\n type=\"file\"\n className=\"hidden\"\n multiple={multiple}\n accept={accept}\n disabled={disabled}\n onChange={(e) => filterAndDispatch(e.target.files)}\n />\n {loading ? (\n <Empty\n icon={<CircularProgress size={48} />}\n title={loadingTitle}\n />\n ) : (\n children ?? (\n <Empty\n icon={UploadIcon}\n title={title}\n description={description}\n disabled={disabled}\n />\n )\n )}\n </div>\n )}\n {fileListNode}\n </div>\n )\n },\n)\nFileUpload.displayName = 'FileUpload'\n\n// ── helper: bytes formatter ───────────────────────────────────────────────\nfunction formatBytes(n: number): string {\n if (n < 1024) return `${n} B`\n if (n < 1024 1024) return `${(n / 1024).toFixed(1)} KB`\n if (n < 1024 * 1024 * 1024) return `${(n / (1024 * 1024)).toFixed(1)} MB`\n return `${(n / (1024 * 1024 * 1024)).toFixed(1)} GB`\n}\n\n// ── helpers ─────────────────────────────────────────────────────────────────\n\nfunction matchAccept(file: File, accept: string): boolean {\n const patterns = accept.split(',').map((s) => s.trim().toLowerCase())\n const fileName = file.name.toLowerCase()\n const fileType = file.type.toLowerCase()\n return patterns.some((p) => {\n if (p.startsWith('.')) return fileName.endsWith(p) // 副檔名 e.g. \".pdf\"\n if (p.endsWith('/')) return fileType.startsWith(p.slice(0, -1)) // e.g. \"image/\"\n return fileType === p // 完整 MIME\n })\n}\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const fileUploadMeta = {\n component: 'FileUpload',\n family: null, // non-family composite / overlay / layout\n variants: {\n dropzone: { purpose: '大型 dashed 拖放區(預設)— 拖放有價值 + 主要上傳區(drag + click)' },\n button: { purpose: '緊湊 Button 觸發 — form 內單欄 / 空間省(click-only)' },\n },\n sizes: {\n\n },\n states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n tokens: {\n bg: ['bg-surface', 'bg-disabled'],\n fg: [],\n ring: ['ring-ring'],\n },\n} as const\n\nexport { FileUpload }\n"],"names":["files","UploadIcon"],"mappings":"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"}

package/dist/components/FileViewer/file-viewer.d.ts CHANGED Viewed

@@ -72,7 +72,7 @@ export declare const fileViewerMeta: {
     readonly sizes: {};
     readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
     readonly tokens: {
-        readonly bg: readonly ["bg-muted", "bg-surface", "bg-surface-raised"];
+        readonly bg: readonly ["bg-muted", "bg-overlay", "bg-surface-raised"];
         readonly fg: readonly ["text-fg-muted", "text-foreground"];
         readonly ring: readonly ["ring-primary", "ring-ring"];
     };

package/dist/components/FileViewer/file-viewer.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"file-viewer.d.ts","sourceRoot":"","sources":["../../../src/components/FileViewer/file-viewer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;~~AAuCzD~~,OAAO,KAAK,EACV,QAAQ,EACR,YAAY,~~EAEb~~,MAAM,qBAAqB,CAAA;~~AA6D5B~~,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,YAAY,GAAG,IAAI,CAQjE;AA6gBD;;;;;GAKG;AAEH,MAAM,WAAW,gBAAgB;IAC/B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6BAA6B;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,kDAAkD;IAClD,8BAA8B,CAAC,EAAE,MAAM,CAAA;IACvC,kDAAkD;IAClD,0BAA0B,CAAC,EAAE,MAAM,CAAA;IACnC,iDAAiD;IACjD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,sFAAsF;IACtF,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAqBD,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EAC9D,cAAc,CACf;IACD,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iDAAiD;IACjD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,sFAAsF;IACtF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,+DAA+D;IAC/D,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IACnE,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sDAAsD;IACtD,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gCAAgC;IAChC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,qDAAqD;IACrD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;IACrC,+DAA+D;IAC/D,MAAM,CAAC,EAAE,gBAAgB,CAAA;CAC1B;AAED,QAAA,MAAM,UAAU,~~wFA0Td~~,CAAA;AAKF,eAAO,MAAM,cAAc;;;;;;;;;;;CAejB,CAAA;AAEV,OAAO,EAAE,UAAU,EAAE,CAAA;AACrB,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,wBAAwB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA"}
1	+ {"version":3,"file":"file-viewer.d.ts","sourceRoot":"","sources":["../../../src/components/FileViewer/file-viewer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAwCzD,OAAO,KAAK,EACV,QAAQ,EACR,YAAY,EAGb,MAAM,qBAAqB,CAAA;AAuE5B,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,YAAY,GAAG,IAAI,CAQjE;AA6gBD;;;;;GAKG;AAEH,MAAM,WAAW,gBAAgB;IAC/B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6BAA6B;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,kDAAkD;IAClD,8BAA8B,CAAC,EAAE,MAAM,CAAA;IACvC,kDAAkD;IAClD,0BAA0B,CAAC,EAAE,MAAM,CAAA;IACnC,iDAAiD;IACjD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,sFAAsF;IACtF,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAqBD,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EAC9D,cAAc,CACf;IACD,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iDAAiD;IACjD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,sFAAsF;IACtF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,+DAA+D;IAC/D,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IACnE,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sDAAsD;IACtD,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gCAAgC;IAChC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,qDAAqD;IACrD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;IACrC,+DAA+D;IAC/D,MAAM,CAAC,EAAE,gBAAgB,CAAA;CAC1B;AAED,QAAA,MAAM,UAAU,wFAwUd,CAAA;AAKF,eAAO,MAAM,cAAc;;;;;;;;;;;CAejB,CAAA;AAEV,OAAO,EAAE,UAAU,EAAE,CAAA;AACrB,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,wBAAwB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA"}

package/dist/components/FileViewer/file-viewer.js CHANGED Viewed

@@ -16,20 +16,26 @@ import { ChromeHeader } from "../../patterns/header-canonical/chrome-header.js";
 import { ScrollArea } from "../ScrollArea/scroll-area.js";
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from "../DropdownMenu/dropdown-menu.js";
 import { useScrollByPage, buildFadeMask, OverflowScrollArrow } from "../../patterns/horizontal-overflow/horizontal-overflow.js";
+import { useControllable } from "../../hooks/use-controllable.js";
 import { canRenderImage, ImageRenderer } from "./image-renderer.js";
 import { useScrollEdges } from "../../hooks/use-overflow-items.js";
-const FallbackRenderer = ({ file }) => /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center p-8", children: /* @__PURE__ */ jsx(
-  Empty,
-  {
-    icon: FileText,
-    title: file.name,
-    description: `無法在瀏覽器中預覽此檔案類型（${file.mimeType || "unknown"}）。請下載後檢視。`
-  }
-) });
+const FallbackRenderer = ({ file, onCapabilitiesChange }) => {
+  React.useEffect(() => {
+    onCapabilitiesChange({ zoom: false });
+  }, [onCapabilitiesChange]);
+  return /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center p-8", children: /* @__PURE__ */ jsx(
+    Empty,
+    {
+      icon: FileText,
+      title: file.name,
+      description: `無法在瀏覽器中預覽此檔案類型（${file.mimeType || "unknown"}）。請下載後檢視。`
+    }
+  ) });
+};
 const fallbackRenderer = {
   id: "fallback",
   canRender: () => true,
-  component: ({ file }) => /* @__PURE__ */ jsx(FallbackRenderer, { file })
+  component: FallbackRenderer
 };
 const imageRenderer = {
   id: "image",
@@ -459,7 +465,7 @@ const DEFAULT_LABELS = {
 const FileViewer = React.forwardRef(function FileViewer2({
   files,
   initialIndex = 0,
-  open,
+  open: openProp,
   defaultOpen,
   onOpenChange,
   index: indexProp,
@@ -476,6 +482,11 @@ const FileViewer = React.forwardRef(function FileViewer2({
     () => ({ ...DEFAULT_LABELS, ...labelsOverride }),
     [labelsOverride]
   );
+  const [open, setOpen] = useControllable({
+    value: openProp,
+    defaultValue: defaultOpen ?? false,
+    onChange: onOpenChange
+  });
   const [internalIndex, setInternalIndex] = React.useState(initialIndex);
   const activeIndex = indexProp ?? internalIndex;
   const setIndex = React.useCallback(
@@ -576,7 +587,7 @@ const FileViewer = React.forwardRef(function FileViewer2({
   }
   const showFilmstripResolved = showFilmstrip && files.length > 1;
   const showArrows = files.length > 1;
-  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { open, defaultOpen, onOpenChange, children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
     /* @__PURE__ */ jsx(
       DialogPrimitive.Overlay,
       {
@@ -622,7 +633,7 @@ const FileViewer = React.forwardRef(function FileViewer2({
                   onInfoToggle: () => setInfoOpen((o) => !o),
                   onDownload: handleDownload,
                   allowDownload,
-                  onClose: () => onOpenChange == null ? void 0 : onOpenChange(false),
+                  onClose: () => setOpen(false),
                   labels
                 }
               ),
@@ -641,7 +652,7 @@ const FileViewer = React.forwardRef(function FileViewer2({
                         const r = img.getBoundingClientRect();
                         if (e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom) return;
                       }
-                      onOpenChange == null ? void 0 : onOpenChange(false);
+                      setOpen(false);
                     },
                     children: [
                       showArrows && activeIndex > 0 && /* @__PURE__ */ jsx(
@@ -738,7 +749,7 @@ const fileViewerMeta = {
   sizes: {},
   states: ["default", "hover", "active", "focus-visible", "disabled"],
   tokens: {
-    bg: ["bg-muted", "bg-surface", "bg-surface-raised"],
+    bg: ["bg-muted", "bg-overlay", "bg-surface-raised"],
     fg: ["text-fg-muted", "text-foreground"],
     ring: ["ring-primary", "ring-ring"]
   }