npm - @qijenchen/design-system - Versions diffs - 0.1.0-beta.83 → 0.1.0-beta.85 - Mend

@qijenchen/design-system 0.1.0-beta.83 → 0.1.0-beta.85

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

package/dist/components/LinkInput/link-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"link-input.js","sources":["../../../src/components/LinkInput/link-input.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Pencil } from 'lucide-react'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport type { FieldMode, FieldVariant } from '@/design-system/components/Field/field-types'\nimport { fieldWrapperStyles, bareInputStyles, EMPTY_DISPLAY, fieldDisplayTextClass } from '@/design-system/components/Field/field-wrapper'\nimport { useFieldContext, useResolvedFieldSize, useResolvedFieldDisabled, useResolvedFieldMode, useResolvedFieldVariant, useResolvedFieldInvalid } from '@/design-system/components/Field/field-context'\nimport { ItemInlineAction } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n// ── URL Validation ──────────────────────────────────────────────────────────\n\nfunction isValidUrl(value: string): boolean {\n if (!value) return true\n try {\n const url = new URL(value)\n return url.protocol === 'http:' \|\| url.protocol === 'https:'\n } catch {\n return false\n }\n}\n\nfunction formatHostname(url: string): string {\n try {\n return new URL(url).hostname.replace(/^www\\./, '')\n } catch {\n return url\n }\n}\n\n// ── Display rendering(inline,2026-05-05 Phase B3 retire LinkInputDisplay)──\n// 取代 LinkInputDisplay sub-component:純展示 a tag,無 input chrome、無 hover affordance。\n// edit mode 內 link state(showLink branch)也共用此 helper,確保「編輯態的 link 顯示」與\n// display mode 的視覺完全一致(SSOT)。\nfunction renderLinkAnchor(value: string, label?: string) {\n const displayText = label \|\| formatHostname(value)\n return (\n <a\n href={value}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"block truncate min-w-0 text-primary hover:text-primary-hover hover:underline transition-colors\"\n >\n {displayText}\n </a>\n )\n}\n\n// ── Component ───────────────────────────────────────────────────────────────\n\nexport interface LinkInputProps\n // `defaultValue` 一併 Omit(2026-07-05 deep-audit A.1b):spec.md「controlled-only,不支援\n // defaultValue」宣稱的型別面機械封鎖 — 原本仍在型別 surface 且經 {...props} spread 到已\n // controlled 的 input(React dev warning)。\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' \| 'value' \| 'defaultValue' \| 'onChange'>,\n Omit<VariantProps<typeof fieldWrapperStyles>, 'mode' \| 'variant'> {\n mode?: FieldMode\n /*\n Visual chrome(2026-05-05 Phase B3)。對齊 FieldContext.variant 透傳。\n * - `'default'`(預設)— Field wrapper 完整 chrome(form / Field 內嵌)。\n * - `'bare'` — 透明 variant,hover/focus 才現 border(Toolbar inline edit / DataTable cell-as-input)。\n \n mode='display' 時 chrome 無視覺意義(display 完全無 wrapper);chrome 僅作用於 edit / readonly / disabled。\n /\n variant?: FieldVariant\n error?: boolean\n value?: string \| null\n onChange?: (value: string) => void\n placeholder?: string\n className?: string\n disabled?: boolean\n /* 自訂顯示文字（非編輯時） /\n label?: string\n /\n Display 是否包 Field naked wrapper(D-path opt-in,2026-05-08)\n * — DataTable cell display↔edit 像素級對齊用。預設 false(裸 anchor,backward compat)。\n * 設 true 時 display 走 fieldWrapperStyles(naked variant)包覆 anchor,\n * 與 cell edit (`<Input naked>`) 同 DOM 結構,消除 Layer-B padding mismatch。\n * 本元件 edit 無 endIcon(UrlCell 用 plain Input edit)→ display 也無 ItemSuffix(僅 wrapper)。\n */\n showDisplayEndIcon?: boolean\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst LinkInput = React.forwardRef<HTMLInputElement, LinkInputProps>(\n (\n {\n mode: modeProp,\n variant: variantProp,\n error: errorProp = false,\n size: sizeProp,\n value,\n onChange,\n placeholder = 'https://',\n className,\n disabled: disabledProp,\n label,\n showDisplayEndIcon = false,\n readOnly,\n id: idProp,\n 'aria-describedby': ariaDescribedByProp,\n 'aria-errormessage': ariaErrorMessageProp,\n ...props\n },\n ref\n ) => {\n const fieldCtx = useFieldContext()\n const size = useResolvedFieldSize(sizeProp)\n const disabled = useResolvedFieldDisabled(disabledProp)\n // 2026-06-08 SSOT:mode 經 useResolvedFieldMode 統一解析(prop > 有效 disabled > fieldCtx.mode > readOnly > 'edit')。\n // spec field-controls.spec.md L125「readOnly 原生屬性自動覆蓋 mode」契約落地。\n const resolvedMode: FieldMode = useResolvedFieldMode({ mode: modeProp, disabled, readOnly })\n const isEditable = resolvedMode === 'edit'\n // chrome resolution:per-prop > context > 'default'\n const resolvedVariant: FieldVariant = useResolvedFieldVariant(variantProp)\n\n // 2026-07-05 D4:invalid 經 useResolvedFieldInvalid 統一接 fieldCtx.invalid(field-controls.spec.md\n // resolver 契約「error/invalid = prop OR fieldCtx.invalid」)— 原本紅框只吃 errorProp\|\|localError、\n // aria-invalid 卻 inline 加 fieldCtx?.invalid → <Field invalid> 下 AT 聽到 invalid 視覺卻正常框\n // (聚焦還變藍)。紅框與 aria 自此同源。宣告於 display early return 之前(Rules-of-Hooks)。\n const fieldInvalid = useResolvedFieldInvalid(errorProp)\n\n // ── Local state / refs ──────────────────────────────────────────────────\n // 2026-07-04 Rules-of-Hooks 修:hooks 必在 display early return 之前宣告,\n // 否則 mode 於 render 間切換 display↔edit 會改變 hook 呼叫數 → React #310 crash\n // (同 beta.76 Combobox 同款修法;僅搬位置,hook 邏輯不變)。\n const [editing, setEditing] = React.useState(false)\n const [localValue, setLocalValue] = React.useState(value ?? '')\n const [localError, setLocalError] = React.useState(false)\n const inputRef = React.useRef<HTMLInputElement \| null>(null)\n\n // Sync external value → local\n React.useEffect(() => {\n if (!editing) setLocalValue(value ?? '')\n }, [value, editing])\n\n // Merge refs\n const setRef = React.useCallback((el: HTMLInputElement \| null) => {\n inputRef.current = el\n if (typeof ref === 'function') ref(el)\n else if (ref) (ref as React.MutableRefObject<HTMLInputElement \| null>).current = el\n }, [ref])\n\n // 2026-05-16 audit codex Round 6:capture rAF + cancel on unmount(defensive hygiene)\n const focusRafIdRef = React.useRef<number>(0)\n React.useEffect(() => () => { if (focusRafIdRef.current) cancelAnimationFrame(focusRafIdRef.current) }, [])\n\n // ── mode='display' ─────────────────────────────────────────────────────\n // 純展示:無 input chrome / 無 hover affordance / 無 Pencil edit 入口。\n // 取代既有 LinkInputDisplay sub-component(2026-05-05 Phase B3 retire)。\n // Default(showDisplayEndIcon=false):無 wrapper 裸 anchor — backward compat。\n // Opt-in(showDisplayEndIcon=true,2026-05-08 D-path):Field naked wrapper 包覆 anchor,\n // 與 cell edit (`<Input naked>`) 同 DOM 結構消除像素偏移(無 ItemSuffix,因 edit 也無 endIcon)。\n if (resolvedMode === 'display') {\n if (!showDisplayEndIcon) {\n // 2026-05-14 I2 fix(spec contract (e) display typography canonical):非 D-path bare\n // anchor / span 必套 `fieldDisplayTextClass(size)`(sm/md→text-body,lg→text-body-lg)\n // — 對齊跨 Field family display 視覺尺寸統一。原無 font-size class → 用 browser default\n // 字體 → 跟其他 Field display 不一致(user 抓 I2)。truncate 同需,長 URL ellipsis(I1)。\n if (!value) return <span className={cn(fieldDisplayTextClass(size), 'text-fg-muted block truncate')}>{EMPTY_DISPLAY}</span>\n return <span className={cn(fieldDisplayTextClass(size), 'block truncate')}>{renderLinkAnchor(value, label)}</span>\n }\n return (\n <div\n className={cn(fieldWrapperStyles({ mode: 'display', variant: resolvedVariant, size }), className)}\n data-field-mode=\"display\"\n >\n <span className=\"flex-1 min-w-0 truncate\">\n {value\n ? renderLinkAnchor(value, label)\n : <span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span>\n }\n </span>\n </div>\n )\n }\n\n const hasValidValue = !!value && isValidUrl(value)\n const showLink = isEditable && hasValidValue && !editing && !localError\n const error = fieldInvalid \|\| localError\n\n const handleEdit = () => {\n setEditing(true)\n if (focusRafIdRef.current) cancelAnimationFrame(focusRafIdRef.current)\n focusRafIdRef.current = requestAnimationFrame(() => {\n focusRafIdRef.current = 0\n inputRef.current?.focus()\n })\n }\n\n const handleBlur = () => {\n setEditing(false)\n const trimmed = localValue.trim()\n if (!trimmed) {\n // Empty is OK — clear value\n setLocalError(false)\n onChange?.('')\n return\n }\n if (isValidUrl(trimmed)) {\n setLocalError(false)\n onChange?.(trimmed)\n } else {\n setLocalError(true)\n }\n }\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n setLocalValue(e.target.value)\n // Clear error on edit (blur validation)\n if (localError) setLocalError(false)\n }\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Enter') inputRef.current?.blur()\n if (e.key === 'Escape') {\n setLocalValue(value ?? '')\n setLocalError(false)\n setEditing(false)\n }\n }\n\n // readonly — 顯示藍色連結（可點擊）\n // disabled — 顯示純文字 fg-disabled（不可點擊）\n if (!isEditable) {\n const displayText = value ? (label \|\| formatHostname(value)) : null\n return (\n <div\n className={cn(fieldWrapperStyles({ mode: resolvedMode, variant: resolvedVariant, size }), className)}\n data-field-mode={resolvedMode}\n >\n <span className=\"flex-1 min-w-0 truncate\">\n {resolvedMode === 'disabled'\n ? (displayText\n ? <span className=\"text-fg-disabled\">{displayText}</span>\n : <span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span>)\n : (value\n ? renderLinkAnchor(value, label)\n : <span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span>)\n }\n </span>\n </div>\n )\n }\n\n // edit — link display mode（有合法 URL 且未在編輯中）\n if (showLink) {\n return (\n <div\n // 2026-07-05 D4:link 顯示分支同樣接 error(errorProp / fieldCtx.invalid)紅框,\n // 否則 <Field invalid> 下 link state 完全無 error 呈現\n className={cn(fieldWrapperStyles({ mode: 'edit', variant: resolvedVariant, size, error }), className)}\n data-field-mode=\"edit\"\n data-error={error ? '' : undefined}\n >\n <span className=\"flex-1 min-w-0\">\n {value && renderLinkAnchor(value, label)}\n </span>\n <ItemInlineAction\n size={size ?? 'md'}\n action={{ icon: Pencil, label: '編輯連結', onClick: handleEdit }} // i18n-allow: DS default inline-action label\n />\n </div>\n )\n }\n\n // edit — text input mode（正在編輯、無值、或格式錯誤）\n return (\n <div\n className={cn(\n fieldWrapperStyles({ mode: 'edit', variant: resolvedVariant, size, error }),\n className,\n )}\n data-field-mode=\"edit\"\n data-error={error ? '' : undefined}\n >\n <input\n ref={setRef}\n type=\"url\"\n id={idProp ?? fieldCtx?.id}\n value={localValue}\n onChange={handleChange}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n aria-invalid={error \|\| undefined}\n aria-required={fieldCtx?.required \|\| undefined}\n aria-describedby={ariaDescribedByProp ?? fieldCtx?.descriptionId}\n aria-errormessage={ariaErrorMessageProp ?? (error ? fieldCtx?.errorId : undefined)}\n className={bareInputStyles}\n {...props}\n />\n </div>\n )\n }\n)\nLinkInput.displayName = 'LinkInput'\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 linkInputMeta = {\n component: 'LinkInput',\n family: 4,\n variants: {\n\n },\n sizes: {\n\n },\n // states 對齊真實 state 集:text-input 家族無 'active'(按下)專屬視覺態(同 textareaMeta 修法);\n // readonly / error 為 fieldWrapperStyles mode + errorProp/localError 實有狀態(2026-07-04 audit 對齊)。\n states: ['default', 'hover', 'focus-visible', 'readonly', 'disabled', 'error'],\n tokens: {\n // bg 經 fieldWrapperStyles 實渲:edit bg-surface / readonly bg-readonly / disabled bg-disabled(field-wrapper.tsx)。\n bg: ['bg-surface', 'bg-readonly', 'bg-disabled'],\n fg: ['text-fg-disabled', 'text-fg-muted', 'text-primary'],\n ring: [],\n },\n} as const\n\nexport { LinkInput }\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"link-input.js","sources":["../../../src/components/LinkInput/link-input.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Pencil } from 'lucide-react'\nimport type { VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport type { FieldMode, FieldVariant, FieldVariantInternal } from '@/design-system/components/Field/field-types'\nimport { fieldWrapperStyles, bareInputStyles, fieldDisplayTextClass } from '@/design-system/components/Field/field-wrapper'\nimport { useFieldContext, useResolvedFieldSize, useResolvedFieldDisabled, useResolvedFieldMode, useResolvedFieldVariant, useResolvedFieldInvalid, useFieldEmptyDisplay, fieldEmptyColorClass } from '@/design-system/components/Field/field-context'\nimport { ItemInlineAction } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n// ── URL Validation ──────────────────────────────────────────────────────────\n\nfunction isValidUrl(value: string): boolean {\n if (!value) return true\n try {\n const url = new URL(value)\n return url.protocol === 'http:' \|\| url.protocol === 'https:'\n } catch {\n return false\n }\n}\n\nfunction formatHostname(url: string): string {\n try {\n return new URL(url).hostname.replace(/^www\\./, '')\n } catch {\n return url\n }\n}\n\n// ── Display rendering(inline,2026-05-05 Phase B3 retire LinkInputDisplay)──\n// 取代 LinkInputDisplay sub-component:純展示 a tag,無 input chrome、無 hover affordance。\n// edit mode 內 link state(showLink branch)也共用此 helper,確保「編輯態的 link 顯示」與\n// display mode 的視覺完全一致(SSOT)。\nfunction renderLinkAnchor(value: string, label?: string) {\n const displayText = label \|\| formatHostname(value)\n return (\n <a\n href={value}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"block truncate min-w-0 text-primary hover:text-primary-hover hover:underline transition-colors\"\n >\n {displayText}\n </a>\n )\n}\n\n// ── Component ───────────────────────────────────────────────────────────────\n\nexport interface LinkInputProps\n // `defaultValue` 一併 Omit(2026-07-05 deep-audit A.1b):spec.md「controlled-only,不支援\n // defaultValue」宣稱的型別面機械封鎖 — 原本仍在型別 surface 且經 {...props} spread 到已\n // controlled 的 input(React dev warning)。\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' \| 'value' \| 'defaultValue' \| 'onChange'>,\n Omit<VariantProps<typeof fieldWrapperStyles>, 'mode' \| 'variant' \| 'width'> {\n mode?: FieldMode\n /*\n Visual chrome(2026-05-05 Phase B3)。對齊 FieldContext.variant 透傳。\n * - `'default'`(預設)— Field wrapper 完整 chrome(form / Field 內嵌)。\n * (2026-07-09 `bare` variant 退役;naked = cell-as-input substrate,@internal)\n \n mode='display' 時 chrome 無視覺意義(display 完全無 wrapper);chrome 僅作用於 edit / readonly / disabled。\n /\n variant?: FieldVariant\n error?: boolean\n value?: string \| null\n onChange?: (value: string) => void\n placeholder?: string\n className?: string\n disabled?: boolean\n /* 自訂顯示文字（非編輯時） /\n label?: string\n /\n Display 是否包 Field naked wrapper(D-path opt-in,2026-05-08)\n * — DataTable cell display↔edit 像素級對齊用。預設 false(裸 anchor,backward compat)。\n * 設 true 時 display 走 fieldWrapperStyles(naked variant)包覆 anchor,\n * 與 cell edit (`<Input naked>`) 同 DOM 結構,消除 Layer-B padding mismatch。\n * 本元件 edit 無 endIcon(UrlCell 用 plain Input edit)→ display 也無 ItemSuffix(僅 wrapper)。\n */\n showDisplayEndIcon?: boolean\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst LinkInput = React.forwardRef<HTMLInputElement, LinkInputProps>(\n (\n {\n mode: modeProp,\n variant: variantProp,\n error: errorProp = false,\n size: sizeProp,\n value,\n onChange,\n placeholder = 'https://',\n className,\n disabled: disabledProp,\n label,\n showDisplayEndIcon = false,\n readOnly,\n id: idProp,\n 'aria-describedby': ariaDescribedByProp,\n 'aria-errormessage': ariaErrorMessageProp,\n ...props\n },\n ref\n ) => {\n const fieldCtx = useFieldContext()\n const size = useResolvedFieldSize(sizeProp)\n const disabled = useResolvedFieldDisabled(disabledProp)\n // 2026-06-08 SSOT:mode 經 useResolvedFieldMode 統一解析(prop > 有效 disabled > fieldCtx.mode > readOnly > 'edit')。\n // spec field-controls.spec.md L125「readOnly 原生屬性自動覆蓋 mode」契約落地。\n const resolvedMode: FieldMode = useResolvedFieldMode({ mode: modeProp, disabled, readOnly })\n const emptyDisplay = useFieldEmptyDisplay()\n const isEditable = resolvedMode === 'edit'\n // chrome resolution:per-prop > context > 'default'\n const resolvedVariant: FieldVariantInternal = useResolvedFieldVariant(variantProp)\n\n // 2026-07-05 D4:invalid 經 useResolvedFieldInvalid 統一接 fieldCtx.invalid(field-controls.spec.md\n // resolver 契約「error/invalid = prop OR fieldCtx.invalid」)— 原本紅框只吃 errorProp\|\|localError、\n // aria-invalid 卻 inline 加 fieldCtx?.invalid → <Field invalid> 下 AT 聽到 invalid 視覺卻正常框\n // (聚焦還變藍)。紅框與 aria 自此同源。宣告於 display early return 之前(Rules-of-Hooks)。\n const fieldInvalid = useResolvedFieldInvalid(errorProp)\n\n // ── Local state / refs ──────────────────────────────────────────────────\n // 2026-07-04 Rules-of-Hooks 修:hooks 必在 display early return 之前宣告,\n // 否則 mode 於 render 間切換 display↔edit 會改變 hook 呼叫數 → React #310 crash\n // (同 beta.76 Combobox 同款修法;僅搬位置,hook 邏輯不變)。\n const [editing, setEditing] = React.useState(false)\n const [localValue, setLocalValue] = React.useState(value ?? '')\n const [localError, setLocalError] = React.useState(false)\n const inputRef = React.useRef<HTMLInputElement \| null>(null)\n\n // Sync external value → local\n React.useEffect(() => {\n if (!editing) setLocalValue(value ?? '')\n }, [value, editing])\n\n // Merge refs\n const setRef = React.useCallback((el: HTMLInputElement \| null) => {\n inputRef.current = el\n if (typeof ref === 'function') ref(el)\n else if (ref) (ref as React.MutableRefObject<HTMLInputElement \| null>).current = el\n }, [ref])\n\n // 2026-05-16 audit codex Round 6:capture rAF + cancel on unmount(defensive hygiene)\n const focusRafIdRef = React.useRef<number>(0)\n React.useEffect(() => () => { if (focusRafIdRef.current) cancelAnimationFrame(focusRafIdRef.current) }, [])\n\n // ── mode='display' ─────────────────────────────────────────────────────\n // 純展示:無 input chrome / 無 hover affordance / 無 Pencil edit 入口。\n // 取代既有 LinkInputDisplay sub-component(2026-05-05 Phase B3 retire)。\n // Default(showDisplayEndIcon=false):無 wrapper 裸 anchor — backward compat。\n // Opt-in(showDisplayEndIcon=true,2026-05-08 D-path):Field naked wrapper 包覆 anchor,\n // 與 cell edit (`<Input naked>`) 同 DOM 結構消除像素偏移(無 ItemSuffix,因 edit 也無 endIcon)。\n if (resolvedMode === 'display') {\n if (!showDisplayEndIcon) {\n // 2026-05-14 I2 fix(spec contract (e) display typography canonical):非 D-path bare\n // anchor / span 必套 `fieldDisplayTextClass(size)`(sm/md→text-body,lg→text-body-lg)\n // — 對齊跨 Field family display 視覺尺寸統一。原無 font-size class → 用 browser default\n // 字體 → 跟其他 Field display 不一致(user 抓 I2)。truncate 同需,長 URL ellipsis(I1)。\n if (!value) return <span className={cn(fieldDisplayTextClass(size), fieldEmptyColorClass(resolvedMode), 'block truncate')}>{emptyDisplay}</span>\n return <span className={cn(fieldDisplayTextClass(size), 'block truncate')}>{renderLinkAnchor(value, label)}</span>\n }\n return (\n <div\n className={cn(fieldWrapperStyles({ mode: 'display', variant: resolvedVariant, size }), className)}\n data-field-mode=\"display\"\n >\n <span className=\"flex-1 min-w-0 truncate\">\n {value\n ? renderLinkAnchor(value, label)\n : <span className={fieldEmptyColorClass(resolvedMode)}>{emptyDisplay}</span>\n }\n </span>\n </div>\n )\n }\n\n const hasValidValue = !!value && isValidUrl(value)\n const showLink = isEditable && hasValidValue && !editing && !localError\n const error = fieldInvalid \|\| localError\n\n const handleEdit = () => {\n setEditing(true)\n if (focusRafIdRef.current) cancelAnimationFrame(focusRafIdRef.current)\n focusRafIdRef.current = requestAnimationFrame(() => {\n focusRafIdRef.current = 0\n inputRef.current?.focus()\n })\n }\n\n const handleBlur = () => {\n setEditing(false)\n const trimmed = localValue.trim()\n if (!trimmed) {\n // Empty is OK — clear value\n setLocalError(false)\n onChange?.('')\n return\n }\n if (isValidUrl(trimmed)) {\n setLocalError(false)\n onChange?.(trimmed)\n } else {\n setLocalError(true)\n }\n }\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n setLocalValue(e.target.value)\n // Clear error on edit (blur validation)\n if (localError) setLocalError(false)\n }\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Enter') inputRef.current?.blur()\n if (e.key === 'Escape') {\n setLocalValue(value ?? '')\n setLocalError(false)\n setEditing(false)\n }\n }\n\n // readonly — 顯示藍色連結（可點擊）\n // disabled — 顯示純文字 fg-disabled（不可點擊）\n if (!isEditable) {\n const displayText = value ? (label \|\| formatHostname(value)) : null\n return (\n <div\n className={cn(fieldWrapperStyles({ mode: resolvedMode, variant: resolvedVariant, size }), className)}\n data-field-mode={resolvedMode}\n >\n <span className=\"flex-1 min-w-0 truncate\">\n {resolvedMode === 'disabled'\n ? (displayText\n ? <span className=\"text-fg-disabled\">{displayText}</span>\n : <span className={fieldEmptyColorClass(resolvedMode)}>{emptyDisplay}</span>)\n : (value\n ? renderLinkAnchor(value, label)\n : <span className={fieldEmptyColorClass(resolvedMode)}>{emptyDisplay}</span>)\n }\n </span>\n </div>\n )\n }\n\n // edit — link display mode（有合法 URL 且未在編輯中）\n if (showLink) {\n return (\n <div\n // 2026-07-05 D4:link 顯示分支同樣接 error(errorProp / fieldCtx.invalid)紅框,\n // 否則 <Field invalid> 下 link state 完全無 error 呈現\n className={cn(fieldWrapperStyles({ mode: 'edit', variant: resolvedVariant, size, error }), className)}\n data-field-mode=\"edit\"\n data-error={error ? '' : undefined}\n >\n <span className=\"flex-1 min-w-0\">\n {value && renderLinkAnchor(value, label)}\n </span>\n <ItemInlineAction\n size={size ?? 'md'}\n action={{ icon: Pencil, label: '編輯連結', onClick: handleEdit }} // i18n-allow: DS default inline-action label\n />\n </div>\n )\n }\n\n // edit — text input mode（正在編輯、無值、或格式錯誤）\n return (\n <div\n className={cn(\n fieldWrapperStyles({ mode: 'edit', variant: resolvedVariant, size, error }),\n className,\n )}\n data-field-mode=\"edit\"\n data-error={error ? '' : undefined}\n >\n <input\n ref={setRef}\n type=\"url\"\n id={idProp ?? fieldCtx?.id}\n value={localValue}\n onChange={handleChange}\n onBlur={handleBlur}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n aria-invalid={error \|\| undefined}\n aria-required={fieldCtx?.required \|\| undefined}\n aria-describedby={ariaDescribedByProp ?? fieldCtx?.descriptionId}\n aria-errormessage={ariaErrorMessageProp ?? (error ? fieldCtx?.errorId : undefined)}\n className={bareInputStyles}\n {...props}\n />\n </div>\n )\n }\n)\nLinkInput.displayName = 'LinkInput'\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 linkInputMeta = {\n component: 'LinkInput',\n family: 4,\n variants: {\n\n },\n sizes: {\n\n },\n // states 對齊真實 state 集:text-input 家族無 'active'(按下)專屬視覺態(同 textareaMeta 修法);\n // readonly / error 為 fieldWrapperStyles mode + errorProp/localError 實有狀態(2026-07-04 audit 對齊)。\n states: ['default', 'hover', 'focus-visible', 'readonly', 'disabled', 'error'],\n tokens: {\n // bg 經 fieldWrapperStyles 實渲:edit bg-surface / readonly bg-readonly / disabled bg-disabled(field-wrapper.tsx)。\n bg: ['bg-surface', 'bg-readonly', 'bg-disabled'],\n fg: ['text-fg-disabled', 'text-fg-muted', 'text-primary'],\n ring: [],\n },\n} as const\n\nexport { LinkInput }\n"],"names":[],"mappings":"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"}

package/dist/components/Menu/menu-item.d.ts CHANGED Viewed

@@ -14,10 +14,22 @@ export interface MenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     children: React.ReactNode;
     /** 次要說明文字，顯示在 label 下方 */
     description?: React.ReactNode;
-    /** 左側 icon（LucideIcon），與 avatar 互斥 */
+    /** 左側 icon（LucideIcon），與 avatar / startContent 互斥 */
     startIcon?: LucideIcon;
-    /** 左側頭像資料（AvatarData），元件內部渲染 Avatar。與 startIcon 互斥 */
+    /** startIcon 的 className 透傳(2026-07-08 WM 戰役:status 類彩色 icon 需求;disabled 色仍勝出) */
+    startIconClassName?: string;
+    /** 左側頭像資料（AvatarData），元件內部渲染 Avatar。與 startIcon / startContent 互斥 */
     avatar?: AvatarData;
+    /**
+     * 左側自訂內容（ReactNode），與 startIcon / avatar 互斥。與 `endContent` 對稱。
+     *
+     * **佔位與排列邏輯跟 startIcon 一模一樣**(2026-07-10 WM TypeIcon 彩色徽章需求):
+     * 渲染在同一個 prefix 對齊容器(`itemPrefixAlignVariants` SSOT)內 —— gap / 對齊 /
+     * shrink 全繼承,零平行 layout 邏輯,不可能與 startIcon 漂移。Consumer 唯一責任
+     * 是節點尺寸對齊 `ICON_SIZE[size]`(sm/md=16px、lg=20px;如 `size-4` 徽章)。
+     * 典型場景:類型徽章(彩底 + glyph)、status 圓點組合等 LucideIcon 表達不了的 leading 視覺。
+     */
+    startContent?: React.ReactNode;
     /** 顯示 checkbox（多選模式由父層控制） */
     checkbox?: boolean;
     /** Checkbox 選中狀態 */

package/dist/components/Menu/menu-item.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/menu-item.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAG9C,OAAO,EAAU,KAAK,UAAU,EAAE,MAAM,0CAA0C,CAAA;AA0BlF,QAAA,MAAM,gBAAgB;;8EAkBrB,CAAA;AASD,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EAC5D,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,eAAe;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,~~sCAAsC~~;~~IACtC~~,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,~~sDAAsD~~;~~IACtD~~,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,GAAG,eAAe,CAAA;IACnC,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6BAA6B;IAC7B,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,mEAAmE;IACnE,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,SAAS;IACT,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uCAAuC;IACvC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/B;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC/B;AAeD,QAAA,MAAM,QAAQ,~~sFAuJb~~,CAAA;AAeD,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,SAAS,uFAWd,CAAA;AAKD,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,UAAU,wFAUf,CAAA;AAID,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;CAef,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,gBAAgB,EAAE,CAAA"}
1	+ {"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/menu-item.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAG9C,OAAO,EAAU,KAAK,UAAU,EAAE,MAAM,0CAA0C,CAAA;AA0BlF,QAAA,MAAM,gBAAgB;;8EAkBrB,CAAA;AASD,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EAC5D,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,eAAe;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,qDAAqD;IACrD,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,kFAAkF;IAClF,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,qEAAqE;IACrE,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,GAAG,eAAe,CAAA;IACnC,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6BAA6B;IAC7B,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,mEAAmE;IACnE,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,SAAS;IACT,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uCAAuC;IACvC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/B;;;;;;;;;;;OAWG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAC/B;AAeD,QAAA,MAAM,QAAQ,sFA6Kb,CAAA;AAeD,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,SAAS,uFAWd,CAAA;AAKD,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,UAAU,wFAUf,CAAA;AAID,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;CAef,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/Menu/menu-item.js CHANGED Viewed

@@ -40,7 +40,9 @@ const MenuItem = React.forwardRef(
     children,
     description,
     startIcon: StartIcon,
+    startIconClassName,
     avatar,
+    startContent,
     checkbox,
     checked,
     selected,
@@ -61,7 +63,7 @@ const MenuItem = React.forwardRef(
     const avatarPx = avatar ? description ? AVATAR_SIZE.block[sizeKey] : AVATAR_SIZE.inline[sizeKey] : 0;
     const isBlockAlign = avatarPx > 24 && !!description;
     const prefixAlign = isBlockAlign ? `block-${sizeKey}` : "inline";
-    const hasPrefix = !!StartIcon || !!avatar || checkbox;
+    const hasPrefix = !!StartIcon || !!avatar || !!startContent || checkbox;
     if (header) {
       return /* @__PURE__ */ jsx(
         "div",
@@ -102,13 +104,23 @@ const MenuItem = React.forwardRef(
         onKeyDown: disabled ? void 0 : props.onKeyDown,
         children: [
           hasPrefix && /* @__PURE__ */ jsxs("div", { className: cn(itemPrefixAlignVariants({ align: prefixAlign })), children: [
-            checkbox && /* @__PURE__ */ jsx(
+            checkbox && // 2026-07-14 a11y(axe nested-interactive):此 checkbox 是純視覺 indicator —— checked
+            // ARIA state 由外層 row 單一 owner 宣告(Radix menuitemcheckbox / cmdk option /
+            // select-all row role="checkbox",見上方「ARIA 單一 owner gate」)。Radix Checkbox 渲
+            // focusable <button role="checkbox">,巢狀在互動 row 內 = axe nested-interactive
+            // violation;tabIndex=-1 不夠(axe-core no-focusable-content 對 tabindex<0 仍回
+            // violation,僅 messageKey 換 notHidden)。aria-hidden 移出 AT tree(消 SR 內外雙重
+            // checkbox 宣告)+ inert 移除 focusability(axe focusDisabled 認 inert → clean pass)。
+            // inert:React 18 無 typing(React 19 才內建),以 spread cast 傳字串 attr。
+            /* @__PURE__ */ jsx(
               Checkbox,
               {
                 size: CHECKBOX_SIZE[sizeKey],
                 checked: checked === true ? true : checked === "indeterminate" ? "indeterminate" : false,
                 disabled,
                 tabIndex: -1,
+                "aria-hidden": true,
+                ...{ inert: "" },
                 className: "pointer-events-none"
               }
             ),
@@ -117,7 +129,7 @@ const MenuItem = React.forwardRef(
               {
                 "data-prefix-type": "icon",
                 size: iconPx,
-                className: cn("shrink-0", disabled && "text-fg-disabled"),
+                className: cn("shrink-0", startIconClassName, disabled && "text-fg-disabled"),
                 "aria-hidden": true
               }
             ),
@@ -131,6 +143,16 @@ const MenuItem = React.forwardRef(
                 hoverCard: avatar.hoverCard,
                 size: avatarPx
               }
+            ),
+            startContent && // 自訂 leading 節點:同容器 = 佔位/排列與 startIcon 一模一樣(見 props JSDoc)。
+            // disabled 用 opacity-disabled(對齊本元件 suffix slot 對自訂 ReactNode 的同款處理)。
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-prefix-type": "content",
+                className: cn("flex shrink-0 items-center", disabled && "opacity-disabled"),
+                children: startContent
+              }
             )
           ] }),
           /* @__PURE__ */ jsx(

package/dist/components/Menu/menu-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"menu-item.js","sources":["../../../src/components/Menu/menu-item.tsx"],"sourcesContent":["/*\n @internal — DS-internal 單元(per `.claude/rules/ui-development.md` Public vs Internal canonical;spec frontmatter `isInternal`)。\n * 不進 root barrel front-door;由 DropdownMenu / SelectMenu 等 menu 類 DS 元件 wrap 消費,end-user app 請用 wrapper 元件。\n /\n// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Checkbox } from '@/design-system/components/Checkbox/checkbox'\nimport { Avatar, type AvatarData } from '@/design-system/components/Avatar/avatar'\n// Row primitive 共用常數——統一從 item-layout pattern module 引入\nimport { ICON_SIZE, AVATAR_SIZE, ItemContent, itemPrefixAlignVariants, ROW_PADDING_BY_SIZE } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n/*\n MenuItem — 所有 menu 類元件的共用視覺佈局層\n \n SelectMenu、DropdownMenu、未來的 ContextMenu 等都消費這個元件。\n * 它只負責 layout（padding、gap、prefix alignment、typography），\n * 互動行為由各 menu 的 Radix primitive 外層控制。\n \n ── 結構 ──\n * [checkbox?] [startIcon? \| avatar?] [label + description?]\n \n ── Prefix 對齊規則（24px 閾值）──\n * prefix ≤ 24px → h-[1lh]，對齊第一行 label\n * prefix > 24px → h-[calc(1lh+var(--item-gap-label-desc-scanning)+desc_1lh)](size-aware -scanning[-lg] 變體)，對齊文字區塊\n * 無 description → prefix 上限 24px\n \n ── Size ──\n * sm / md / lg — 單行高度對齊 field-height token\n /\n\nconst CHECKBOX_SIZE: Record<string, 'sm' \| 'md' \| 'lg'> = { sm: 'sm', md: 'md', lg: 'lg' }\n\n// ── Item variants ──\nconst menuItemVariants = cva(\n [\n 'flex items-start gap-2 px-3 w-full',\n 'cursor-pointer select-none',\n 'transition-colors duration-150',\n 'outline-none',\n 'focus-visible:bg-neutral-hover',\n ],\n {\n variants: {\n // 消費 ROW_PADDING_BY_SIZE SSOT(item-anatomy.tsx 導出)\n // 改一處 → 全 row primitive 自動同步(消除前 SidebarMenuButton 獨立實作 risk)\n size: ROW_PADDING_BY_SIZE,\n },\n defaultVariants: {\n size: 'md',\n },\n }\n)\n\n// ── Prefix alignment container ──\n// 消費 `itemPrefixAlignVariants`(SSOT from patterns/element-anatomy/item-anatomy.tsx)\n// 原本 MenuItem 自管 cva 造成 drift 風險(block formula 改動需同步);改為共用 SSOT\n// 讓公式只有一份,改 item-anatomy 一處 → MenuItem 自動同步。\n\n// ── Component ──\n\nexport interface MenuItemProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>,\n VariantProps<typeof menuItemVariants> {\n /* Label 文字 /\n children: React.ReactNode\n /* 次要說明文字，顯示在 label 下方 /\n description?: React.ReactNode\n /* 左側 icon（LucideIcon），與 avatar 互斥 /\n startIcon?: LucideIcon\n /* 左側頭像資料（AvatarData），元件內部渲染 Avatar。與 startIcon 互斥 /\n avatar?: AvatarData\n /* 顯示 checkbox（多選模式由父層控制） /\n checkbox?: boolean\n /* Checkbox 選中狀態 /\n checked?: boolean \| 'indeterminate'\n /* 單選選中（bg-neutral-selected 背景高亮，持續選中狀態） /\n selected?: boolean\n /* 後綴 Tag（ReactNode），靠右對齊 /\n tag?: React.ReactNode\n /* 後綴自訂內容（ReactNode），用於 DropdownMenu 的 badge/endIcon/shortcut 等 /\n endContent?: React.ReactNode\n /* 停用 /\n disabled?: boolean\n /* 作為群組標題（不可選，font-medium，fg-muted） /\n header?: boolean\n /\n Label 最大行數(line-clamp 截斷,超過顯示 ellipsis)。\n \n - `undefined`(預設 prop 值未傳)→ 套用元件預設 `1`(單行截斷,符合選單快速掃視需求)\n * - 數字(1-6)→ 截斷到該行數;>6 超出 line-clamp utility 支援範圍 → 不截斷(同 'none',見 lineClampClass)\n * - `'none'` → 明確不截斷,自然 wrap 任意行數\n \n 為什麼用 `'none'` 而不是 `undefined` 表達不截斷?React props 的 destructure default\n * 在 `undefined` 時會接管,所以 `<MenuItem labelMaxLines={undefined}>` 等同沒傳,\n * 會 fallback 到預設 `1`。要明確覆寫成「不截斷」,必須用一個非 undefined 的 sentinel。\n /\n labelMaxLines?: number \| 'none'\n /\n Description 最大行數。\n \n - `undefined`(預設 prop 值未傳)→ 套用元件預設 `1`(跟 label 對稱,維持掃視節奏)\n * - 數字(1-6)→ 截斷到該行數;>6 超出 line-clamp utility 支援範圍 → 不截斷(同 'none',見 lineClampClass)\n * - `'none'` → 明確不截斷\n \n 為什麼預設 1?Menu 的設計目的是「快速掃視多個選項挑一個」,垂直空間是\n * 寶貴的——一個過高的 item 會破壞 row rhythm,讓使用者眼睛重新校準。description\n * 跟 label 對稱地截到 1 行,確保所有 item 高度一致(無 desc / 有 desc 兩種高度)。\n * Consumer 若有合理理由要 2 行 description,可顯式 override。\n /\n descMaxLines?: number \| 'none'\n}\n\n/* 把 maxLines 轉成 line-clamp class;'none' / 0 → 空字串 /\nfunction lineClampClass(maxLines: number \| 'none'): string {\n if (maxLines === 'none' \|\| !maxLines) return ''\n if (maxLines === 1) return 'line-clamp-1'\n if (maxLines === 2) return 'line-clamp-2'\n if (maxLines === 3) return 'line-clamp-3'\n if (maxLines === 4) return 'line-clamp-4'\n if (maxLines === 5) return 'line-clamp-5'\n if (maxLines === 6) return 'line-clamp-6'\n return ''\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(\n (\n {\n children,\n description,\n startIcon: StartIcon,\n avatar,\n checkbox,\n checked,\n selected,\n tag,\n endContent,\n disabled,\n header,\n size,\n labelMaxLines = 1,\n descMaxLines = 1,\n className,\n ...props\n },\n ref\n ) => {\n const sizeKey = size ?? 'md'\n const labelClampClass = lineClampClass(labelMaxLines)\n const descClampClass = lineClampClass(descMaxLines)\n const iconPx = ICON_SIZE[sizeKey]\n\n // ── 決定 avatar 容器尺寸 + 對齊模式 ──\n // 有 description → 使用 block 尺寸（32/40px），block 對齊\n // 無 description → 使用 inline 尺寸（20/24px），inline 對齊\n const avatarPx = avatar\n ? (description ? AVATAR_SIZE.block[sizeKey] : AVATAR_SIZE.inline[sizeKey])\n : 0\n const isBlockAlign = avatarPx > 24 && !!description\n\n const prefixAlign = isBlockAlign\n ? (`block-${sizeKey}` as const)\n : 'inline'\n\n const hasPrefix = !!StartIcon \|\| !!avatar \|\| checkbox\n\n // ── Header variant ──\n if (header) {\n return (\n <div\n ref={ref}\n className={cn(\n menuItemVariants({ size }),\n 'font-medium text-fg-muted cursor-default pointer-events-none',\n className,\n )}\n role=\"presentation\"\n {...props}\n >\n {children}\n </div>\n )\n }\n\n // ── ARIA 單一 owner gate(2026-07-05)──\n // consumer(DropdownMenu 各 item / SelectMenu option row)把 MenuItem 巢狀在 Radix / cmdk\n // 互動節點內時傳 role=\"presentation\":外層 primitive 是唯一 ARIA owner(aria-checked /\n // aria-disabled 由外層宣告)。presentation 節點不得掛 ARIA state(axe aria-prohibited-attr\n // + 內外雙重宣告)→ 同步抑制 role=\"option\" 與 aria-selected / aria-disabled 預設;\n // data-selected / data-disabled 保留(純樣式 hook,非 ARIA)。正規 listbox option 用法\n //(不傳 role)與 select-all row(role=\"checkbox\")不受影響。\n const isPresentation = props.role === 'presentation'\n\n return (\n <div\n ref={ref}\n role={isPresentation ? 'presentation' : 'option'}\n aria-selected={isPresentation ? undefined : selected \|\| (checked === true) \|\| undefined}\n aria-disabled={isPresentation ? undefined : disabled \|\| undefined}\n data-selected={selected ? '' : undefined}\n data-disabled={disabled ? '' : undefined}\n className={cn(\n menuItemVariants({ size }),\n !disabled && !selected && 'hover:bg-neutral-hover',\n !disabled && selected && 'bg-neutral-selected',\n // disabled 用 cursor-not-allowed(對齊 Button + Material/Polaris/Atlassian);\n // pointer-events-none 會讓 cursor 失效,改用 aria-disabled + onClick guard\n disabled && 'text-fg-disabled cursor-not-allowed',\n className,\n )}\n // 2026-07-04 robustness:先 spread 其餘 props、後放 guarded handlers — 消除\n // 「handler 置前 + 後方 runtime filter 同名 key」對屬性順序的隱性依賴,行為不變\n {...Object.fromEntries(Object.entries(props).filter(([k]) => k !== 'onClick' && k !== 'onKeyDown'))}\n onClick={disabled ? undefined : props.onClick}\n onKeyDown={disabled ? undefined : props.onKeyDown}\n >\n {/ Prefix 對齊容器 /}\n {hasPrefix && (\n <div className={cn(itemPrefixAlignVariants({ align: prefixAlign }))}>\n {checkbox && (\n <Checkbox\n size={CHECKBOX_SIZE[sizeKey]}\n checked={checked === true ? true : checked === 'indeterminate' ? 'indeterminate' : false}\n disabled={disabled}\n tabIndex={-1}\n className=\"pointer-events-none\"\n />\n )}\n {StartIcon && (\n <StartIcon\n data-prefix-type=\"icon\"\n size={iconPx}\n className={cn('shrink-0', disabled && 'text-fg-disabled')}\n aria-hidden\n />\n )}\n {avatar && (\n <Avatar\n data-prefix-type=\"avatar\"\n src={avatar.src}\n alt={avatar.alt}\n color={avatar.color}\n hoverCard={avatar.hoverCard}\n size={avatarPx}\n />\n )}\n </div>\n )}\n\n {/ Content — 消費 ItemContent primitive(SSOT)。\n scanning mode 跟隨 size:sm/md = caption,lg = body(desc 比 label lg 16 小 1 tier)。\n labelClampClass / descClampClass 透過 className escape hatch 傳入(MenuItem 特化 labelMaxLines / descMaxLines 語意)。 /}\n <ItemContent\n label={children}\n description={description}\n mode=\"scanning\"\n size={sizeKey === 'lg' ? 'lg' : 'md'}\n descriptionTone={disabled ? 'disabled' : 'secondary'}\n labelTruncate={false}\n labelClassName={cn(labelClampClass \|\| 'break-words', disabled && 'text-fg-disabled')}\n descriptionClassName={cn(descClampClass \|\| 'break-words')}\n />\n\n {(tag \|\| endContent) && (\n // @row-slot-handcraft-allow: MenuItem 自身即 row primitive（item-anatomy Family 1 owner），此 tag/endContent 容器是 MenuItem 自有 suffix slot 實作，非外部 consumer hand-craft → 不再 wrap ItemSuffix\n <div className={cn(\n 'flex items-center gap-2 shrink-0 h-[1lh] ml-auto',\n disabled && 'opacity-disabled',\n )}>\n {tag}\n {endContent}\n </div>\n )}\n </div>\n )\n }\n)\nMenuItem.displayName = 'MenuItem'\n\n// ── Group ──\n// MenuGroup — Menu-like group primitive(跨元件設計語言統一,SSOT 見\n// `patterns/element-anatomy/item-anatomy.spec.md`「Group auto-separation」)\n//\n// 設計語言:每個 group 上下 8px + 相鄰 group 間 border-divider + 視覺 gap 16px\n//\n// 本元件用 Pattern A:`py-2 [&+&]:border-t [&+&]:border-divider`\n// (適用外層容器無 py-2 的情境,例 Command.List——Group 自帶邊界 padding)\n//\n// 視覺必須跟 DropdownMenuGroup 等價*(見 dropdown-menu.tsx Pattern B 對照)。\n// 改動前先讀 item-anatomy.spec.md「Group auto-separation」確認視覺不漂移。\n\nexport interface MenuGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode\n}\n\nconst MenuGroup = React.forwardRef<HTMLDivElement, MenuGroupProps>(\n ({ children, className, ...props }, ref) => (\n <div\n ref={ref}\n role=\"group\"\n className={cn('py-2 [&+&]:border-t [&+&]:border-divider', className)}\n {...props}\n >\n {children}\n </div>\n )\n)\nMenuGroup.displayName = 'MenuGroup'\n\n// ── Footer ──\n\nexport interface MenuFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode\n}\n\nconst MenuFooter = React.forwardRef<HTMLDivElement, MenuFooterProps>(\n ({ children, className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('py-2 border-t border-divider', className)}\n {...props}\n >\n {children}\n </div>\n )\n)\nMenuFooter.displayName = 'MenuFooter'\n\n// Story auto-compile metadata — Phase 1+2 migration\nexport const menuItemMeta = {\n component: 'MenuItem',\n family: 1,\n variants: {},\n sizes: {\n sm: {},\n md: {},\n lg: {},\n },\n defaultSize: 'md',\n states: ['default', 'hover', 'selected', 'focus-visible', 'disabled'],\n tokens: {\n bg: ['bg-neutral-hover', 'bg-neutral-selected'],\n fg: ['text-fg-muted', 'text-fg-disabled'],\n },\n} as const\n\nexport { MenuItem, MenuGroup, MenuFooter, menuItemVariants }\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"menu-item.js","sources":["../../../src/components/Menu/menu-item.tsx"],"sourcesContent":["/*\n @internal — DS-internal 單元(per `.claude/rules/ui-development.md` Public vs Internal canonical;spec frontmatter `isInternal`)。\n * 不進 root barrel front-door;由 DropdownMenu / SelectMenu 等 menu 類 DS 元件 wrap 消費,end-user app 請用 wrapper 元件。\n /\n// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Checkbox } from '@/design-system/components/Checkbox/checkbox'\nimport { Avatar, type AvatarData } from '@/design-system/components/Avatar/avatar'\n// Row primitive 共用常數——統一從 item-layout pattern module 引入\nimport { ICON_SIZE, AVATAR_SIZE, ItemContent, itemPrefixAlignVariants, ROW_PADDING_BY_SIZE } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n/*\n MenuItem — 所有 menu 類元件的共用視覺佈局層\n \n SelectMenu、DropdownMenu、未來的 ContextMenu 等都消費這個元件。\n * 它只負責 layout（padding、gap、prefix alignment、typography），\n * 互動行為由各 menu 的 Radix primitive 外層控制。\n \n ── 結構 ──\n * [checkbox?] [startIcon? \| avatar?] [label + description?]\n \n ── Prefix 對齊規則（24px 閾值）──\n * prefix ≤ 24px → h-[1lh]，對齊第一行 label\n * prefix > 24px → h-[calc(1lh+var(--item-gap-label-desc-scanning)+desc_1lh)](size-aware -scanning[-lg] 變體)，對齊文字區塊\n * 無 description → prefix 上限 24px\n \n ── Size ──\n * sm / md / lg — 單行高度對齊 field-height token\n /\n\nconst CHECKBOX_SIZE: Record<string, 'sm' \| 'md' \| 'lg'> = { sm: 'sm', md: 'md', lg: 'lg' }\n\n// ── Item variants ──\nconst menuItemVariants = cva(\n [\n 'flex items-start gap-2 px-3 w-full',\n 'cursor-pointer select-none',\n 'transition-colors duration-150',\n 'outline-none',\n 'focus-visible:bg-neutral-hover',\n ],\n {\n variants: {\n // 消費 ROW_PADDING_BY_SIZE SSOT(item-anatomy.tsx 導出)\n // 改一處 → 全 row primitive 自動同步(消除前 SidebarMenuButton 獨立實作 risk)\n size: ROW_PADDING_BY_SIZE,\n },\n defaultVariants: {\n size: 'md',\n },\n }\n)\n\n// ── Prefix alignment container ──\n// 消費 `itemPrefixAlignVariants`(SSOT from patterns/element-anatomy/item-anatomy.tsx)\n// 原本 MenuItem 自管 cva 造成 drift 風險(block formula 改動需同步);改為共用 SSOT\n// 讓公式只有一份,改 item-anatomy 一處 → MenuItem 自動同步。\n\n// ── Component ──\n\nexport interface MenuItemProps\n extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>,\n VariantProps<typeof menuItemVariants> {\n /* Label 文字 /\n children: React.ReactNode\n /* 次要說明文字，顯示在 label 下方 /\n description?: React.ReactNode\n /* 左側 icon（LucideIcon），與 avatar / startContent 互斥 /\n startIcon?: LucideIcon\n /* startIcon 的 className 透傳(2026-07-08 WM 戰役:status 類彩色 icon 需求;disabled 色仍勝出) /\n startIconClassName?: string\n /* 左側頭像資料（AvatarData），元件內部渲染 Avatar。與 startIcon / startContent 互斥 /\n avatar?: AvatarData\n /\n 左側自訂內容（ReactNode），與 startIcon / avatar 互斥。與 `endContent` 對稱。\n \n 佔位與排列邏輯跟 startIcon 一模一樣(2026-07-10 WM TypeIcon 彩色徽章需求):\n * 渲染在同一個 prefix 對齊容器(`itemPrefixAlignVariants` SSOT)內 —— gap / 對齊 /\n * shrink 全繼承,零平行 layout 邏輯,不可能與 startIcon 漂移。Consumer 唯一責任\n * 是節點尺寸對齊 `ICON_SIZE[size]`(sm/md=16px、lg=20px;如 `size-4` 徽章)。\n * 典型場景:類型徽章(彩底 + glyph)、status 圓點組合等 LucideIcon 表達不了的 leading 視覺。\n /\n startContent?: React.ReactNode\n /* 顯示 checkbox（多選模式由父層控制） /\n checkbox?: boolean\n /* Checkbox 選中狀態 /\n checked?: boolean \| 'indeterminate'\n /* 單選選中（bg-neutral-selected 背景高亮，持續選中狀態） /\n selected?: boolean\n /* 後綴 Tag（ReactNode），靠右對齊 /\n tag?: React.ReactNode\n /* 後綴自訂內容（ReactNode），用於 DropdownMenu 的 badge/endIcon/shortcut 等 /\n endContent?: React.ReactNode\n /* 停用 /\n disabled?: boolean\n /* 作為群組標題（不可選，font-medium，fg-muted） /\n header?: boolean\n /\n Label 最大行數(line-clamp 截斷,超過顯示 ellipsis)。\n \n - `undefined`(預設 prop 值未傳)→ 套用元件預設 `1`(單行截斷,符合選單快速掃視需求)\n * - 數字(1-6)→ 截斷到該行數;>6 超出 line-clamp utility 支援範圍 → 不截斷(同 'none',見 lineClampClass)\n * - `'none'` → 明確不截斷,自然 wrap 任意行數\n \n 為什麼用 `'none'` 而不是 `undefined` 表達不截斷?React props 的 destructure default\n * 在 `undefined` 時會接管,所以 `<MenuItem labelMaxLines={undefined}>` 等同沒傳,\n * 會 fallback 到預設 `1`。要明確覆寫成「不截斷」,必須用一個非 undefined 的 sentinel。\n /\n labelMaxLines?: number \| 'none'\n /\n Description 最大行數。\n \n - `undefined`(預設 prop 值未傳)→ 套用元件預設 `1`(跟 label 對稱,維持掃視節奏)\n * - 數字(1-6)→ 截斷到該行數;>6 超出 line-clamp utility 支援範圍 → 不截斷(同 'none',見 lineClampClass)\n * - `'none'` → 明確不截斷\n \n 為什麼預設 1?Menu 的設計目的是「快速掃視多個選項挑一個」,垂直空間是\n * 寶貴的——一個過高的 item 會破壞 row rhythm,讓使用者眼睛重新校準。description\n * 跟 label 對稱地截到 1 行,確保所有 item 高度一致(無 desc / 有 desc 兩種高度)。\n * Consumer 若有合理理由要 2 行 description,可顯式 override。\n /\n descMaxLines?: number \| 'none'\n}\n\n/* 把 maxLines 轉成 line-clamp class;'none' / 0 → 空字串 /\nfunction lineClampClass(maxLines: number \| 'none'): string {\n if (maxLines === 'none' \|\| !maxLines) return ''\n if (maxLines === 1) return 'line-clamp-1'\n if (maxLines === 2) return 'line-clamp-2'\n if (maxLines === 3) return 'line-clamp-3'\n if (maxLines === 4) return 'line-clamp-4'\n if (maxLines === 5) return 'line-clamp-5'\n if (maxLines === 6) return 'line-clamp-6'\n return ''\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(\n (\n {\n children,\n description,\n startIcon: StartIcon,\n startIconClassName,\n avatar,\n startContent,\n checkbox,\n checked,\n selected,\n tag,\n endContent,\n disabled,\n header,\n size,\n labelMaxLines = 1,\n descMaxLines = 1,\n className,\n ...props\n },\n ref\n ) => {\n const sizeKey = size ?? 'md'\n const labelClampClass = lineClampClass(labelMaxLines)\n const descClampClass = lineClampClass(descMaxLines)\n const iconPx = ICON_SIZE[sizeKey]\n\n // ── 決定 avatar 容器尺寸 + 對齊模式 ──\n // 有 description → 使用 block 尺寸（32/40px），block 對齊\n // 無 description → 使用 inline 尺寸（20/24px），inline 對齊\n const avatarPx = avatar\n ? (description ? AVATAR_SIZE.block[sizeKey] : AVATAR_SIZE.inline[sizeKey])\n : 0\n const isBlockAlign = avatarPx > 24 && !!description\n\n const prefixAlign = isBlockAlign\n ? (`block-${sizeKey}` as const)\n : 'inline'\n\n const hasPrefix = !!StartIcon \|\| !!avatar \|\| !!startContent \|\| checkbox\n\n // ── Header variant ──\n if (header) {\n return (\n <div\n ref={ref}\n className={cn(\n menuItemVariants({ size }),\n 'font-medium text-fg-muted cursor-default pointer-events-none',\n className,\n )}\n role=\"presentation\"\n {...props}\n >\n {children}\n </div>\n )\n }\n\n // ── ARIA 單一 owner gate(2026-07-05)──\n // consumer(DropdownMenu 各 item / SelectMenu option row)把 MenuItem 巢狀在 Radix / cmdk\n // 互動節點內時傳 role=\"presentation\":外層 primitive 是唯一 ARIA owner(aria-checked /\n // aria-disabled 由外層宣告)。presentation 節點不得掛 ARIA state(axe aria-prohibited-attr\n // + 內外雙重宣告)→ 同步抑制 role=\"option\" 與 aria-selected / aria-disabled 預設;\n // data-selected / data-disabled 保留(純樣式 hook,非 ARIA)。正規 listbox option 用法\n //(不傳 role)與 select-all row(role=\"checkbox\")不受影響。\n const isPresentation = props.role === 'presentation'\n\n return (\n <div\n ref={ref}\n role={isPresentation ? 'presentation' : 'option'}\n aria-selected={isPresentation ? undefined : selected \|\| (checked === true) \|\| undefined}\n aria-disabled={isPresentation ? undefined : disabled \|\| undefined}\n data-selected={selected ? '' : undefined}\n data-disabled={disabled ? '' : undefined}\n className={cn(\n menuItemVariants({ size }),\n !disabled && !selected && 'hover:bg-neutral-hover',\n !disabled && selected && 'bg-neutral-selected',\n // disabled 用 cursor-not-allowed(對齊 Button + Material/Polaris/Atlassian);\n // pointer-events-none 會讓 cursor 失效,改用 aria-disabled + onClick guard\n disabled && 'text-fg-disabled cursor-not-allowed',\n className,\n )}\n // 2026-07-04 robustness:先 spread 其餘 props、後放 guarded handlers — 消除\n // 「handler 置前 + 後方 runtime filter 同名 key」對屬性順序的隱性依賴,行為不變\n {...Object.fromEntries(Object.entries(props).filter(([k]) => k !== 'onClick' && k !== 'onKeyDown'))}\n onClick={disabled ? undefined : props.onClick}\n onKeyDown={disabled ? undefined : props.onKeyDown}\n >\n {/ Prefix 對齊容器 /}\n {hasPrefix && (\n <div className={cn(itemPrefixAlignVariants({ align: prefixAlign }))}>\n {checkbox && (\n // 2026-07-14 a11y(axe nested-interactive):此 checkbox 是純視覺 indicator —— checked\n // ARIA state 由外層 row 單一 owner 宣告(Radix menuitemcheckbox / cmdk option /\n // select-all row role=\"checkbox\",見上方「ARIA 單一 owner gate」)。Radix Checkbox 渲\n // focusable <button role=\"checkbox\">,巢狀在互動 row 內 = axe nested-interactive\n // violation;tabIndex=-1 不夠(axe-core no-focusable-content 對 tabindex<0 仍回\n // violation,僅 messageKey 換 notHidden)。aria-hidden 移出 AT tree(消 SR 內外雙重\n // checkbox 宣告)+ inert 移除 focusability(axe focusDisabled 認 inert → clean pass)。\n // inert:React 18 無 typing(React 19 才內建),以 spread cast 傳字串 attr。\n <Checkbox\n size={CHECKBOX_SIZE[sizeKey]}\n checked={checked === true ? true : checked === 'indeterminate' ? 'indeterminate' : false}\n disabled={disabled}\n tabIndex={-1}\n aria-hidden\n {...({ inert: '' } as object)}\n className=\"pointer-events-none\"\n />\n )}\n {StartIcon && (\n <StartIcon\n data-prefix-type=\"icon\"\n size={iconPx}\n className={cn('shrink-0', startIconClassName, disabled && 'text-fg-disabled')}\n aria-hidden\n />\n )}\n {avatar && (\n <Avatar\n data-prefix-type=\"avatar\"\n src={avatar.src}\n alt={avatar.alt}\n color={avatar.color}\n hoverCard={avatar.hoverCard}\n size={avatarPx}\n />\n )}\n {startContent && (\n // 自訂 leading 節點:同容器 = 佔位/排列與 startIcon 一模一樣(見 props JSDoc)。\n // disabled 用 opacity-disabled(對齊本元件 suffix slot 對自訂 ReactNode 的同款處理)。\n <span\n data-prefix-type=\"content\"\n className={cn('flex shrink-0 items-center', disabled && 'opacity-disabled')}\n >\n {startContent}\n </span>\n )}\n </div>\n )}\n\n {/ Content — 消費 ItemContent primitive(SSOT)。\n scanning mode 跟隨 size:sm/md = caption,lg = body(desc 比 label lg 16 小 1 tier)。\n labelClampClass / descClampClass 透過 className escape hatch 傳入(MenuItem 特化 labelMaxLines / descMaxLines 語意)。 /}\n <ItemContent\n label={children}\n description={description}\n mode=\"scanning\"\n size={sizeKey === 'lg' ? 'lg' : 'md'}\n descriptionTone={disabled ? 'disabled' : 'secondary'}\n labelTruncate={false}\n labelClassName={cn(labelClampClass \|\| 'break-words', disabled && 'text-fg-disabled')}\n descriptionClassName={cn(descClampClass \|\| 'break-words')}\n />\n\n {(tag \|\| endContent) && (\n // @row-slot-handcraft-allow: MenuItem 自身即 row primitive（item-anatomy Family 1 owner），此 tag/endContent 容器是 MenuItem 自有 suffix slot 實作，非外部 consumer hand-craft → 不再 wrap ItemSuffix\n <div className={cn(\n 'flex items-center gap-2 shrink-0 h-[1lh] ml-auto',\n disabled && 'opacity-disabled',\n )}>\n {tag}\n {endContent}\n </div>\n )}\n </div>\n )\n }\n)\nMenuItem.displayName = 'MenuItem'\n\n// ── Group ──\n// MenuGroup — Menu-like group primitive(跨元件設計語言統一,SSOT 見\n// `patterns/element-anatomy/item-anatomy.spec.md`「Group auto-separation」)\n//\n// 設計語言:每個 group 上下 8px + 相鄰 group 間 border-divider + 視覺 gap 16px\n//\n// 本元件用 Pattern A:`py-2 [&+&]:border-t [&+&]:border-divider`\n// (適用外層容器無 py-2 的情境,例 Command.List——Group 自帶邊界 padding)\n//\n// 視覺必須跟 DropdownMenuGroup 等價*(見 dropdown-menu.tsx Pattern B 對照)。\n// 改動前先讀 item-anatomy.spec.md「Group auto-separation」確認視覺不漂移。\n\nexport interface MenuGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode\n}\n\nconst MenuGroup = React.forwardRef<HTMLDivElement, MenuGroupProps>(\n ({ children, className, ...props }, ref) => (\n <div\n ref={ref}\n role=\"group\"\n className={cn('py-2 [&+&]:border-t [&+&]:border-divider', className)}\n {...props}\n >\n {children}\n </div>\n )\n)\nMenuGroup.displayName = 'MenuGroup'\n\n// ── Footer ──\n\nexport interface MenuFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n children: React.ReactNode\n}\n\nconst MenuFooter = React.forwardRef<HTMLDivElement, MenuFooterProps>(\n ({ children, className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn('py-2 border-t border-divider', className)}\n {...props}\n >\n {children}\n </div>\n )\n)\nMenuFooter.displayName = 'MenuFooter'\n\n// Story auto-compile metadata — Phase 1+2 migration\nexport const menuItemMeta = {\n component: 'MenuItem',\n family: 1,\n variants: {},\n sizes: {\n sm: {},\n md: {},\n lg: {},\n },\n defaultSize: 'md',\n states: ['default', 'hover', 'selected', 'focus-visible', 'disabled'],\n tokens: {\n bg: ['bg-neutral-hover', 'bg-neutral-selected'],\n fg: ['text-fg-muted', 'text-fg-disabled'],\n },\n} as const\n\nexport { MenuItem, MenuGroup, MenuFooter, menuItemVariants }\n"],"names":[],"mappings":"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"}

package/dist/components/NumberInput/number-input.d.ts CHANGED Viewed

@@ -14,15 +14,15 @@ export interface NumberFormatOptions {
     locale?: string;
 }
 declare function formatNumber(value: number | null | undefined, options?: NumberFormatOptions): string;
-export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'onChange' | 'type'>, Omit<VariantProps<typeof fieldWrapperStyles>, 'mode' | 'variant'>, NumberFormatOptions {
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'defaultValue' | 'onChange' | 'type'>, Omit<VariantProps<typeof fieldWrapperStyles>, 'mode' | 'variant' | 'width'>, NumberFormatOptions {
     /** Field display mode */
     mode?: FieldMode;
     /**
      * Visual chrome(正交於 mode);Phase B1(2026-05-05)新增。
      * - `'default'`(預設)— 完整 Field wrapper chrome。
-     * - `'bare'` — 透明 variant,hover/focus 才 reveal(Toolbar inline / DataTable cell)。
+     * (2026-07-09 `bare` variant 退役;naked = cell-as-input substrate,@internal)
      *
-     * 透傳:在 `<Field variant="bare">` 內自動繼承 context.variant;per-prop override context。
+     * 透傳:在 `<Field variant="default">` 內自動繼承 context.variant;per-prop override context。
      */
     variant?: FieldVariant;
     /** Error 狀態（正交於 mode）。 */

package/dist/components/NumberInput/number-input.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/number-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE5D,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,~~EAAE~~,MAAM,8CAA8C,CAAA;~~AAC3F~~,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uDAAuD,CAAA;AAC/F,OAAO,EAAE,kBAAkB,~~EAAkC~~,MAAM,gDAAgD,CAAA;~~AAMnH~~,MAAM,WAAW,mBAAmB;IAClC,WAAW;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,iBAAS,YAAY,CACnB,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAChC,OAAO,GAAE,mBAAwB,GAChC,MAAM,CAOR;AAOD,MAAM,WAAW,~~gBACf~~,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC,~~EAC/F~~,IAAI,CAAC,YAAY,CAAC,OAAO,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,~~EACjE~~,mBAAmB;IACrB,yBAAyB;IACzB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,SAAS;IACT,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,WAAW;IACX,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACzC,qDAAqD;IACrD,SAAS,CAAC,EAAE,kBAAkB,CAAA;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAKD,QAAA,MAAM,WAAW,~~2FAwHhB~~,CAAA;AAMD,eAAO,MAAM,eAAe;;;;;;;;;;;CAgBlB,CAAA;AAGV,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,CAAA"}
1	+ {"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/number-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE5D,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAwB,MAAM,8CAA8C,CAAA;AACjH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uDAAuD,CAAA;AAC/F,OAAO,EAAE,kBAAkB,EAAmB,MAAM,gDAAgD,CAAA;AAOpG,MAAM,WAAW,mBAAmB;IAClC,WAAW;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,iBAAS,YAAY,CACnB,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAChC,OAAO,GAAE,mBAAwB,GAChC,MAAM,CAOR;AAOD,MAAM,WAAW,gBAIf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,MAAM,CAAC,EAChH,IAAI,CAAC,YAAY,CAAC,OAAO,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC,EAC3E,mBAAmB;IACrB,yBAAyB;IACzB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,SAAS;IACT,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,WAAW;IACX,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACzC,qDAAqD;IACrD,SAAS,CAAC,EAAE,kBAAkB,CAAA;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAKD,QAAA,MAAM,WAAW,2FA2HhB,CAAA;AAMD,eAAO,MAAM,eAAe;;;;;;;;;;;CAgBlB,CAAA;AAGV,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/NumberInput/number-input.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../../lib/utils.js";
-import { EMPTY_DISPLAY, fieldWrapperStyles, bareInputStyles } from "../Field/field-wrapper.js";
-import { useFieldContext, useResolvedFieldInvalid, useResolvedFieldSize, useResolvedFieldDisabled, useResolvedFieldVariant, useResolvedFieldMode } from "../Field/field-context.js";
+import { fieldWrapperStyles, bareInputStyles } from "../Field/field-wrapper.js";
+import { useFieldContext, useResolvedFieldInvalid, useResolvedFieldSize, useResolvedFieldDisabled, useResolvedFieldVariant, useResolvedFieldMode, useFieldEmptyDisplay, fieldEmptyColorClass } from "../Field/field-context.js";
 import { ItemInlineAction } from "../../patterns/element-anatomy/item-anatomy.js";
 function formatNumber(value, options = {}) {
   if (value == null) return "";
@@ -40,6 +40,7 @@ const NumberInput = React.forwardRef(
     const disabled = useResolvedFieldDisabled(disabledProp);
     const variant = useResolvedFieldVariant(variantProp);
     const resolvedMode = useResolvedFieldMode({ mode: modeProp, disabled, readOnly });
+    const emptyDisplay = useFieldEmptyDisplay();
     const [draft, setDraft] = React.useState(null);
     if (resolvedMode !== "edit") {
       return /* @__PURE__ */ jsx(
@@ -53,10 +54,10 @@ const NumberInput = React.forwardRef(
               className: cn(
                 "flex-1 min-w-0",
                 resolvedMode === "disabled" && "text-fg-disabled cursor-not-allowed",
-                // 2026-05-31 M24:disabled > muted。disabled 時不可再套 muted(否則 neutral-7 蓋過 disabled neutral-6)
-                value == null && resolvedMode !== "disabled" && "text-fg-muted"
+                // 2026-07-09 空值符號前景 + M24:fieldEmptyColorClass = disabled→fg-disabled / else→foreground(同 readonly value 色)
+                value == null && fieldEmptyColorClass(resolvedMode)
               ),
-              children: value == null ? EMPTY_DISPLAY : formatNumber(value, { precision, prefix, suffix, locale })
+              children: value == null ? emptyDisplay : formatNumber(value, { precision, prefix, suffix, locale })
             }
           )
         }

package/dist/components/NumberInput/number-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"number-input.js","sources":["../../../src/components/NumberInput/number-input.tsx"],"sourcesContent":["import * as React from 'react'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport type { FieldMode, FieldVariant } from '@/design-system/components/Field/field-types'\nimport type { InlineActionConfig } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { fieldWrapperStyles, bareInputStyles, EMPTY_DISPLAY } from '@/design-system/components/Field/field-wrapper'\nimport { useFieldContext, useResolvedFieldSize, useResolvedFieldDisabled, useResolvedFieldMode, useResolvedFieldVariant, useResolvedFieldInvalid } from '@/design-system/components/Field/field-context'\nimport { ItemInlineAction } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n// ── Format ──────────────────────────────────────────────────────────────────\n\nexport interface NumberFormatOptions {\n /** 小數位數 /\n precision?: number\n /* 前綴（如 '$'、'NT$'） /\n prefix?: string\n /* 後綴（如 '%'、'元'） /\n suffix?: string\n /* locale（預設 'en-US'） /\n locale?: string\n}\n\nfunction formatNumber(\n value: number \| null \| undefined,\n options: NumberFormatOptions = {},\n): string {\n if (value == null) return ''\n const { precision, prefix = '', suffix = '', locale = 'en-US' } = options\n const formatted = precision != null\n ? value.toLocaleString(locale, { minimumFractionDigits: precision, maximumFractionDigits: precision })\n : value.toLocaleString(locale)\n return `${prefix}${formatted}${suffix}`\n}\n\n// Phase B1(2026-05-05):NumberInputDisplay 退場。\n// 改用 `<NumberInput mode=\"display\" value={...} prefix={...} ... />`,format 邏輯在 mode='display' 分支重用。\n\n// ── Types ───────────────────────────────────────────────────────────────────\n\nexport interface NumberInputProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' \| 'value' \| 'onChange' \| 'type'>,\n Omit<VariantProps<typeof fieldWrapperStyles>, 'mode' \| 'variant'>,\n NumberFormatOptions {\n /* Field display mode /\n mode?: FieldMode\n /\n Visual chrome(正交於 mode);Phase B1(2026-05-05)新增。\n * - `'default'`(預設)— 完整 Field wrapper chrome。\n * - `'bare'` — 透明 variant,hover/focus 才 reveal(Toolbar inline / DataTable cell)。\n \n 透傳:在 `<Field variant=\"bare\">` 內自動繼承 context.variant;per-prop override context。\n /\n variant?: FieldVariant\n /* Error 狀態（正交於 mode）。 /\n error?: boolean\n /* 數值 /\n value?: number \| null\n /* 數值變更 /\n onChange?: (value: number \| null) => void\n /* 右側 inline action — 宣告式 API，Field 根據 size 自動渲染。 /\n endAction?: InlineActionConfig\n /\n 右側 slot(ReactNode)— escape hatch 供 consumer 放自訂元素(如 stepper button group / 自訂 popover trigger)。\n * 跟 `endAction` 互斥(同時傳 endSlot 會優先,endAction 被忽略)。\n * 規則對齊 Input.endSlot:90% case 用 endAction 宣告式 API,10% config 表達不出時走 endSlot。\n /\n endSlot?: React.ReactNode\n}\n\n// ── Component ───────────────────────────────────────────────────────────────\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n (\n {\n mode: modeProp,\n variant: variantProp,\n error: errorProp = false,\n size: sizeProp,\n value,\n onChange,\n precision,\n prefix,\n suffix,\n locale,\n endAction,\n endSlot,\n className,\n disabled: disabledProp,\n readOnly,\n id: idProp,\n onBlur: onBlurProp,\n onKeyDown: onKeyDownProp,\n 'aria-describedby': ariaDescribedByProp,\n 'aria-errormessage': ariaErrorMessageProp,\n ...props\n },\n ref\n ) => {\n const fieldCtx = useFieldContext()\n const error = useResolvedFieldInvalid(errorProp)\n const size = useResolvedFieldSize(sizeProp)\n const disabled = useResolvedFieldDisabled(disabledProp)\n // chrome 透傳:per-prop override context;context 沒值則 'default'\n const variant: FieldVariant = useResolvedFieldVariant(variantProp)\n // 2026-06-08 SSOT:mode 經 useResolvedFieldMode 統一解析(prop > 有效 disabled > fieldCtx.mode > readOnly > 'edit')\n const resolvedMode: FieldMode = useResolvedFieldMode({ mode: modeProp, disabled, readOnly })\n\n // 2026-07-05 D4 draft state:controlled value 回寫會吃掉輸入中間態('-'、'1.'、'0.0' 等\n // parse 後 lossy 的 raw 字串)— 例:已有值 5 全選打「-」→ onChange(null) 回寫把 DOM 重設\n // 為空,負號被吃、無法打出 -5。修法對齊 Ant InputNumber / Adobe Spectrum NumberField 的\n // internal draft string canonical:輸入期間 DOM 顯示以 local draft 優先,parse 成功即時同步\n // onChange(parsed);blur / Enter commit 清 draft 回 value 顯示;Escape 一併棄 draft(對齊\n // form-validation 規則 4 回復原值)。宣告於 non-edit early return 之前(Rules-of-Hooks,\n // 同 LinkInput 2026-07-04 修法)。\n const [draft, setDraft] = React.useState<string \| null>(null)\n\n // display / readonly / disabled 都顯示格式化值(span 取代 input)\n if (resolvedMode !== 'edit') {\n return (\n <div\n className={cn(fieldWrapperStyles({ mode: resolvedMode, variant: variant, size }), className)}\n data-field-mode={resolvedMode}\n >\n <span\n className={cn(\n 'flex-1 min-w-0',\n resolvedMode === 'disabled' && 'text-fg-disabled cursor-not-allowed',\n // 2026-05-31 M24:disabled > muted。disabled 時不可再套 muted(否則 neutral-7 蓋過 disabled neutral-6)\n value == null && resolvedMode !== 'disabled' && 'text-fg-muted',\n )}\n >\n {value == null ? EMPTY_DISPLAY : formatNumber(value, { precision, prefix, suffix, locale })}\n </span>\n </div>\n )\n }\n\n // edit 模式:raw 數值輸入(draft 承載中間態;value 面語意不變 — ''/'-' 視為空、NaN 忽略)\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const raw = e.target.value\n setDraft(raw)\n if (!onChange) return\n if (raw === '' \|\| raw === '-') {\n onChange(null)\n return\n }\n const parsed = Number(raw)\n if (!Number.isNaN(parsed)) {\n onChange(parsed)\n }\n }\n\n return (\n <div\n className={cn(\n fieldWrapperStyles({ mode: 'edit', variant: variant, size, error }),\n className,\n )}\n data-field-mode=\"edit\"\n data-error={error ? '' : undefined}\n >\n <input\n ref={ref}\n type=\"text\"\n inputMode=\"decimal\"\n id={idProp ?? fieldCtx?.id}\n // 輸入期間 draft(raw 字串)優先;非輸入期間才從 value prop 同步顯示(2026-07-05 D4)\n value={draft ?? (value != null ? String(value) : '')}\n onChange={handleChange}\n // blur / Enter = commit(清 draft,顯示回 committed value);Escape 棄 draft\n onBlur={(e) => { setDraft(null); onBlurProp?.(e) }}\n onKeyDown={(e) => {\n if (e.key === 'Enter' \|\| e.key === 'Escape') setDraft(null)\n onKeyDownProp?.(e)\n }}\n aria-invalid={error \|\| undefined}\n aria-required={fieldCtx?.required \|\| undefined}\n aria-describedby={ariaDescribedByProp ?? fieldCtx?.descriptionId}\n aria-errormessage={ariaErrorMessageProp ?? (error ? fieldCtx?.errorId : undefined)}\n className={bareInputStyles}\n {...props}\n />\n {endSlot ? (\n // endSlot escape hatch:consumer 自控右側 slot(對齊 Input.endSlot canonical)\n endSlot\n ) : endAction ? (\n <ItemInlineAction action={endAction} size={size ?? 'md'} />\n ) : null}\n </div>\n )\n }\n)\nNumberInput.displayName = 'NumberInput'\n\n// code-quality-allow: dead-export — public API surface — consumer-exposed for future use\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 numberInputMeta = {\n component: 'NumberInput',\n family: 4,\n variants: {\n\n },\n sizes: {\n\n },\n // 'active' 移除 — Field chrome 無按壓態;stepper 按壓屬內嵌 ItemInlineActionButton(2026-07-07 詞彙統一 DS-wide 按壓訊號盤點:檔內 0 active: utility / 0 -active token)。\n states: ['default', 'hover', 'focus-visible', 'disabled'],\n tokens: {\n bg: [],\n fg: ['text-fg-disabled', 'text-fg-muted'],\n ring: [],\n },\n} as const\n\n// code-quality-allow: dead-export — public API surface — consumer-exposed for future use\nexport { NumberInput, formatNumber }\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"number-input.js","sources":["../../../src/components/NumberInput/number-input.tsx"],"sourcesContent":["import * as React from 'react'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport type { FieldMode, FieldVariant, FieldVariantInternal } from '@/design-system/components/Field/field-types'\nimport type { InlineActionConfig } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { fieldWrapperStyles, bareInputStyles } from '@/design-system/components/Field/field-wrapper'\nimport { useFieldEmptyDisplay, fieldEmptyColorClass } from '@/design-system/components/Field/field-context'\nimport { useFieldContext, useResolvedFieldSize, useResolvedFieldDisabled, useResolvedFieldMode, useResolvedFieldVariant, useResolvedFieldInvalid } from '@/design-system/components/Field/field-context'\nimport { ItemInlineAction } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n// ── Format ──────────────────────────────────────────────────────────────────\n\nexport interface NumberFormatOptions {\n /** 小數位數 /\n precision?: number\n /* 前綴（如 '$'、'NT$'） /\n prefix?: string\n /* 後綴（如 '%'、'元'） /\n suffix?: string\n /* locale（預設 'en-US'） /\n locale?: string\n}\n\nfunction formatNumber(\n value: number \| null \| undefined,\n options: NumberFormatOptions = {},\n): string {\n if (value == null) return ''\n const { precision, prefix = '', suffix = '', locale = 'en-US' } = options\n const formatted = precision != null\n ? value.toLocaleString(locale, { minimumFractionDigits: precision, maximumFractionDigits: precision })\n : value.toLocaleString(locale)\n return `${prefix}${formatted}${suffix}`\n}\n\n// Phase B1(2026-05-05):NumberInputDisplay 退場。\n// 改用 `<NumberInput mode=\"display\" value={...} prefix={...} ... />`,format 邏輯在 mode='display' 分支重用。\n\n// ── Types ───────────────────────────────────────────────────────────────────\n\nexport interface NumberInputProps\n // `defaultValue` 一併 Omit(2026-07-14 dim-26):number-input.spec.md「controlled-only,不支援\n // defaultValue」宣稱的型別面機械封鎖 — 原本仍在型別 surface 且經 {...props} spread 到已\n // controlled 的 input(React value/defaultValue dev warning)。與 LinkInput(link-input.tsx)同款。\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' \| 'value' \| 'defaultValue' \| 'onChange' \| 'type'>,\n Omit<VariantProps<typeof fieldWrapperStyles>, 'mode' \| 'variant' \| 'width'>,\n NumberFormatOptions {\n /* Field display mode /\n mode?: FieldMode\n /\n Visual chrome(正交於 mode);Phase B1(2026-05-05)新增。\n * - `'default'`(預設)— 完整 Field wrapper chrome。\n * (2026-07-09 `bare` variant 退役;naked = cell-as-input substrate,@internal)\n \n 透傳:在 `<Field variant=\"default\">` 內自動繼承 context.variant;per-prop override context。\n /\n variant?: FieldVariant\n /* Error 狀態（正交於 mode）。 /\n error?: boolean\n /* 數值 /\n value?: number \| null\n /* 數值變更 /\n onChange?: (value: number \| null) => void\n /* 右側 inline action — 宣告式 API，Field 根據 size 自動渲染。 /\n endAction?: InlineActionConfig\n /\n 右側 slot(ReactNode)— escape hatch 供 consumer 放自訂元素(如 stepper button group / 自訂 popover trigger)。\n * 跟 `endAction` 互斥(同時傳 endSlot 會優先,endAction 被忽略)。\n * 規則對齊 Input.endSlot:90% case 用 endAction 宣告式 API,10% config 表達不出時走 endSlot。\n /\n endSlot?: React.ReactNode\n}\n\n// ── Component ───────────────────────────────────────────────────────────────\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n (\n {\n mode: modeProp,\n variant: variantProp,\n error: errorProp = false,\n size: sizeProp,\n value,\n onChange,\n precision,\n prefix,\n suffix,\n locale,\n endAction,\n endSlot,\n className,\n disabled: disabledProp,\n readOnly,\n id: idProp,\n onBlur: onBlurProp,\n onKeyDown: onKeyDownProp,\n 'aria-describedby': ariaDescribedByProp,\n 'aria-errormessage': ariaErrorMessageProp,\n ...props\n },\n ref\n ) => {\n const fieldCtx = useFieldContext()\n const error = useResolvedFieldInvalid(errorProp)\n const size = useResolvedFieldSize(sizeProp)\n const disabled = useResolvedFieldDisabled(disabledProp)\n // chrome 透傳:per-prop override context;context 沒值則 'default'\n const variant: FieldVariantInternal = useResolvedFieldVariant(variantProp)\n // 2026-06-08 SSOT:mode 經 useResolvedFieldMode 統一解析(prop > 有效 disabled > fieldCtx.mode > readOnly > 'edit')\n const resolvedMode: FieldMode = useResolvedFieldMode({ mode: modeProp, disabled, readOnly })\n const emptyDisplay = useFieldEmptyDisplay()\n\n // 2026-07-05 D4 draft state:controlled value 回寫會吃掉輸入中間態('-'、'1.'、'0.0' 等\n // parse 後 lossy 的 raw 字串)— 例:已有值 5 全選打「-」→ onChange(null) 回寫把 DOM 重設\n // 為空,負號被吃、無法打出 -5。修法對齊 Ant InputNumber / Adobe Spectrum NumberField 的\n // internal draft string canonical:輸入期間 DOM 顯示以 local draft 優先,parse 成功即時同步\n // onChange(parsed);blur / Enter commit 清 draft、顯示回 committed value;Escape 棄未提交\n // raw draft 字串、顯示回 committed value(NumberInput 為 live-commit:每次合法 parse 即\n // onChange,故非回復 pre-edit 原值 — 真 revert 需另存 pre-edit snapshot,屬 API 擴充)。\n // 宣告於 non-edit early return 之前(Rules-of-Hooks,\n // 同 LinkInput 2026-07-04 修法)。\n const [draft, setDraft] = React.useState<string \| null>(null)\n\n // display / readonly / disabled 都顯示格式化值(span 取代 input)\n if (resolvedMode !== 'edit') {\n return (\n <div\n className={cn(fieldWrapperStyles({ mode: resolvedMode, variant: variant, size }), className)}\n data-field-mode={resolvedMode}\n >\n <span\n className={cn(\n 'flex-1 min-w-0',\n resolvedMode === 'disabled' && 'text-fg-disabled cursor-not-allowed',\n // 2026-07-09 空值符號前景 + M24:fieldEmptyColorClass = disabled→fg-disabled / else→foreground(同 readonly value 色)\n value == null && fieldEmptyColorClass(resolvedMode),\n )}\n >\n {value == null ? emptyDisplay : formatNumber(value, { precision, prefix, suffix, locale })}\n </span>\n </div>\n )\n }\n\n // edit 模式:raw 數值輸入(draft 承載中間態;value 面語意不變 — ''/'-' 視為空、NaN 忽略)\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const raw = e.target.value\n setDraft(raw)\n if (!onChange) return\n if (raw === '' \|\| raw === '-') {\n onChange(null)\n return\n }\n const parsed = Number(raw)\n if (!Number.isNaN(parsed)) {\n onChange(parsed)\n }\n }\n\n return (\n <div\n className={cn(\n fieldWrapperStyles({ mode: 'edit', variant: variant, size, error }),\n className,\n )}\n data-field-mode=\"edit\"\n data-error={error ? '' : undefined}\n >\n <input\n ref={ref}\n type=\"text\"\n inputMode=\"decimal\"\n id={idProp ?? fieldCtx?.id}\n // 輸入期間 draft(raw 字串)優先;非輸入期間才從 value prop 同步顯示(2026-07-05 D4)\n value={draft ?? (value != null ? String(value) : '')}\n onChange={handleChange}\n // blur / Enter = commit(清 draft,顯示回 committed value);Escape 棄 draft\n onBlur={(e) => { setDraft(null); onBlurProp?.(e) }}\n onKeyDown={(e) => {\n if (e.key === 'Enter' \|\| e.key === 'Escape') setDraft(null)\n onKeyDownProp?.(e)\n }}\n aria-invalid={error \|\| undefined}\n aria-required={fieldCtx?.required \|\| undefined}\n aria-describedby={ariaDescribedByProp ?? fieldCtx?.descriptionId}\n aria-errormessage={ariaErrorMessageProp ?? (error ? fieldCtx?.errorId : undefined)}\n className={bareInputStyles}\n {...props}\n />\n {endSlot ? (\n // endSlot escape hatch:consumer 自控右側 slot(對齊 Input.endSlot canonical)\n endSlot\n ) : endAction ? (\n <ItemInlineAction action={endAction} size={size ?? 'md'} />\n ) : null}\n </div>\n )\n }\n)\nNumberInput.displayName = 'NumberInput'\n\n// code-quality-allow: dead-export — public API surface — consumer-exposed for future use\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 numberInputMeta = {\n component: 'NumberInput',\n family: 4,\n variants: {\n\n },\n sizes: {\n\n },\n // 'active' 移除 — Field chrome 無按壓態;stepper 按壓屬內嵌 ItemInlineActionButton(2026-07-07 詞彙統一 DS-wide 按壓訊號盤點:檔內 0 active: utility / 0 -active token)。\n states: ['default', 'hover', 'focus-visible', 'disabled'],\n tokens: {\n bg: [],\n fg: ['text-fg-disabled', 'text-fg-muted'],\n ring: [],\n },\n} as const\n\n// code-quality-allow: dead-export — public API surface — consumer-exposed for future use\nexport { NumberInput, formatNumber }\n"],"names":[],"mappings":"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"}

package/dist/components/OverflowIndicator/overflow-indicator.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"overflow-indicator.d.ts","sourceRoot":"","sources":["../../../src/components/OverflowIndicator/overflow-indicator.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AA6B9B,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IAC/D,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAmDD,QAAA,MAAM,iBAAiB,~~gGAuDtB~~,CAAA;AAKD,eAAO,MAAM,qBAAqB;;;;;;;;;;;CAgBxB,CAAA;AAEV,OAAO,EAAE,iBAAiB,EAAE,CAAA"}
1	+ {"version":3,"file":"overflow-indicator.d.ts","sourceRoot":"","sources":["../../../src/components/OverflowIndicator/overflow-indicator.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AA6B9B,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IAC/D,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAmDD,QAAA,MAAM,iBAAiB,gGAwDtB,CAAA;AAKD,eAAO,MAAM,qBAAqB;;;;;;;;;;;CAgBxB,CAAA;AAEV,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/OverflowIndicator/overflow-indicator.js CHANGED Viewed

@@ -3,7 +3,7 @@ import * as React from "react";
 import { cn } from "../../lib/utils.js";
 import { HoverCard, HoverCardTrigger, HoverCardContent } from "../HoverCard/hover-card.js";
 import { tagVariants } from "../Tag/tag.js";
-import { HOVER_DELAY_CLOSE_MS, HOVER_DELAY_PLAIN_MS } from "../../tokens/motion/motion.js";
+import { MOTION_DELAY_CLOSE_MS, MOTION_DELAY_PLAIN_MS } from "../../tokens/motion/motion.js";
 const triggerSize = {
   sm: "h-5 min-w-5",
   md: "h-6 min-w-6",
@@ -59,8 +59,6 @@ const OverflowIndicator = React.forwardRef(
         ref,
         "data-overflow-indicator": "",
         tabIndex: 0,
-        role: "button",
-        "aria-haspopup": "dialog",
         className: cn(tagVariants({ color: "neutral", size }), "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", className),
         ...props,
         children: /* @__PURE__ */ jsxs("span", { className: "px-1", children: [
@@ -74,8 +72,6 @@ const OverflowIndicator = React.forwardRef(
         ref,
         "data-overflow-indicator": "",
         tabIndex: 0,
-        role: "button",
-        "aria-haspopup": "dialog",
         className: cn(
           "shrink-0 rounded-full inline-grid place-content-center",
           "bg-muted text-foreground font-medium leading-none cursor-pointer",
@@ -91,7 +87,7 @@ const OverflowIndicator = React.forwardRef(
         ]
       }
     );
-    return /* @__PURE__ */ jsxs(HoverCard, { openDelay: HOVER_DELAY_PLAIN_MS, closeDelay: HOVER_DELAY_CLOSE_MS, children: [
+    return /* @__PURE__ */ jsxs(HoverCard, { openDelay: MOTION_DELAY_PLAIN_MS, closeDelay: MOTION_DELAY_CLOSE_MS, children: [
       /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: true, children: trigger }),
       /* @__PURE__ */ jsx(HoverCardContent, { className: "bg-tooltip rounded-lg", "data-theme": "dark", children: /* @__PURE__ */ jsx(ShrinkWrapList, { children }) })
     ] });

package/dist/components/OverflowIndicator/overflow-indicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"overflow-indicator.js","sources":["../../../src/components/OverflowIndicator/overflow-indicator.tsx"],"sourcesContent":["/*\n @internal — DS-internal 單元(per `.claude/rules/ui-development.md` Public vs Internal canonical;spec frontmatter `isInternal`)。\n * 不進 root barrel front-door;由 Combobox / PeoplePicker 等 DS 元件 wrap 消費,end-user app 請用 wrapper 元件。\n /\nimport as React from 'react'\nimport { cn } from '@/lib/utils'\nimport { HoverCard, HoverCardTrigger, HoverCardContent } from '@/design-system/components/HoverCard/hover-card'\nimport { tagVariants } from '@/design-system/components/Tag/tag'\nimport { ~~HOVER_DELAY_PLAIN_MS~~, ~~HOVER_DELAY_CLOSE_MS~~ } from '@/design-system/tokens/motion/motion'\n\n/*\n OverflowIndicator — +N 觸發器 + HoverCard 顯示溢出內容\n \n 統一用 HoverCard（不用 Tooltip）——溢出內容可能需要互動：\n * - 人員 +N：tag dismiss + hover name card\n * - 一般 +N：穩定顯示溢出項目\n \n trigger 不用 Tag 元件（Tag 有內建 truncation Tooltip 會跟 HoverCard 衝突），\n * 改用 tagVariants 直接套樣式。\n */\n\nconst triggerSize: Record<string, string> = {\n sm: 'h-5 min-w-5',\n md: 'h-6 min-w-6',\n lg: 'h-6 min-w-6',\n}\n\nconst triggerText: Record<string, string> = {\n sm: 'text-[10px]',\n md: 'text-caption',\n lg: 'text-caption',\n}\n\nexport interface OverflowIndicatorProps\n extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {\n count: number\n shape?: 'circle' \| 'tag'\n size?: 'sm' \| 'md' \| 'lg'\n children: React.ReactNode\n className?: string\n}\n\nfunction ShrinkWrapList({ children }: { children: React.ReactNode }) {\n const containerRef = React.useRef<HTMLDivElement \| null>(null)\n\n // 2026-05-16 audit codex Round 6:rAF capture + cancel on unmount/re-run(defensive hygiene)。\n // 原 callback ref `requestAnimationFrame(() => ...)` 沒 cancel,unmount-during-rAF 可能 fire 後\n // mutate detached element.style — no-op but pattern hygiene 應對齊 DS-wide rAF cancel canonical。\n React.useLayoutEffect(() => {\n const container = containerRef.current\n if (!container) return\n let rafId = 0\n rafId = requestAnimationFrame(() => {\n rafId = 0\n const cs = getComputedStyle(container)\n const padL = parseFloat(cs.paddingLeft) \|\| 0\n const padR = parseFloat(cs.paddingRight) \|\| 0\n const gap = parseFloat(cs.gap) \|\| parseFloat(cs.columnGap) \|\| 0\n const available = container.offsetWidth - padL - padR\n\n const items = Array.from(container.children) as HTMLElement[]\n if (items.length === 0) return\n\n let currentRow = 0\n let maxRow = 0\n\n items.forEach(item => {\n const w = item.offsetWidth\n const needed = currentRow > 0 ? currentRow + gap + w : w\n\n if (needed > available && currentRow > 0) {\n maxRow = Math.max(maxRow, currentRow)\n currentRow = w\n } else {\n currentRow = needed\n }\n })\n maxRow = Math.max(maxRow, currentRow)\n\n container.style.maxWidth = `${Math.ceil(maxRow) + padL + padR + 1}px`\n })\n return () => { if (rafId) cancelAnimationFrame(rafId) }\n }, [children])\n\n return (\n <div ref={containerRef} className=\"flex flex-wrap gap-1 p-2 max-w-[280px]\">\n {children}\n </div>\n )\n}\n\nconst OverflowIndicator = React.forwardRef<HTMLSpanElement, OverflowIndicatorProps>(\n function OverflowIndicator(\n { count, shape = 'circle', size = 'md', children, className, ...props },\n ref,\n ) {\n if (count <= 0) return null\n\n const trigger = shape === 'tag' ? (\n <span\n ref={ref}\n data-overflow-indicator=\"\"\n tabIndex={0}\n ~~role=\"button\"\n aria-haspopup=\"dialog\"\n~~ className={cn(tagVariants({ color: 'neutral', size }), 'cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1', className)}\n {...props}\n >\n <span className=\"px-1\">+{count}</span>\n </span>\n ) : (\n <span\n ref={ref}\n data-overflow-indicator=\"\"\n tabIndex={0}\n ~~role=\"button\"\n aria-haspopup=\"dialog\"\n~~ className={cn(\n 'shrink-0 rounded-full inline-grid place-content-center',\n 'bg-muted text-foreground font-medium leading-none cursor-pointer',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\n triggerSize[size],\n triggerText[size],\n className,\n )}\n {...props}\n >\n +{count}\n </span>\n )\n\n // 2026-05-18 fix(per user audit「所有 hovercard 應消費 hover delay token」+ motion.spec.md SSOT):\n // plain tier(純列表展開、無 fetch)= ~~HOVER_DELAY_PLAIN_MS~~,per motion.spec.md 對照表 row;\n // close = ~~HOVER_DELAY_CLOSE_MS~~。2026-06-11 修:2026-05-18 token 遷移誤挑 rich(原 hardcode 200/300\n // 兩 tier 皆非,遷移未對照 spec 表)— popup 可互動性由 close 緩衝保障,與 open tier 無關。\n return (\n <HoverCard openDelay={~~HOVER_DELAY_PLAIN_MS~~} closeDelay={~~HOVER_DELAY_CLOSE_MS~~}>\n <HoverCardTrigger asChild>\n {trigger}\n </HoverCardTrigger>\n <HoverCardContent className=\"bg-tooltip rounded-lg\" data-theme=\"dark\">\n <ShrinkWrapList>{children}</ShrinkWrapList>\n </HoverCardContent>\n </HoverCard>\n )\n },\n)\nOverflowIndicator.displayName = 'OverflowIndicator'\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 overflowIndicatorMeta = {\n component: 'OverflowIndicator',\n family: 'self-contained', // 對齊 overflow-indicator.spec.md frontmatter family: self-contained(SSOT)\n variants: {\n\n },\n sizes: {\n\n },\n // 2026-07-04 audit 對齊(spec:95「本身無 hover / active / disabled / selected 變化」;code 有 focus-visible ring tsx:106/121)\n states: ['default', 'focus-visible'],\n tokens: {\n bg: ['bg-muted'],\n fg: ['text-foreground'],\n ring: [],\n },\n} as const\n\nexport { OverflowIndicator }\n"],"names":["OverflowIndicator"],"mappings":";;;;;;AAqBA,MAAM,cAAsC;AAAA,EAC1C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,cAAsC;AAAA,EAC1C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAWA,SAAS,eAAe,EAAE,YAA2C;AACnE,QAAM,eAAe,MAAM,OAA8B,IAAI;AAK7D,QAAM,gBAAgB,MAAM;AAC1B,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,UAAW;AAChB,QAAI,QAAQ;AACZ,YAAQ,sBAAsB,MAAM;AAClC,cAAQ;AACR,YAAM,KAAK,iBAAiB,SAAS;AACrC,YAAM,OAAO,WAAW,GAAG,WAAW,KAAK;AAC3C,YAAM,OAAO,WAAW,GAAG,YAAY,KAAK;AAC5C,YAAM,MAAM,WAAW,GAAG,GAAG,KAAK,WAAW,GAAG,SAAS,KAAK;AAC9D,YAAM,YAAY,UAAU,cAAc,OAAO;AAEjD,YAAM,QAAQ,MAAM,KAAK,UAAU,QAAQ;AAC3C,UAAI,MAAM,WAAW,EAAG;AAExB,UAAI,aAAa;AACjB,UAAI,SAAS;AAEb,YAAM,QAAQ,CAAA,SAAQ;AACpB,cAAM,IAAI,KAAK;AACf,cAAM,SAAS,aAAa,IAAI,aAAa,MAAM,IAAI;AAEvD,YAAI,SAAS,aAAa,aAAa,GAAG;AACxC,mBAAS,KAAK,IAAI,QAAQ,UAAU;AACpC,uBAAa;AAAA,QACf,OAAO;AACL,uBAAa;AAAA,QACf;AAAA,MACF,CAAC;AACD,eAAS,KAAK,IAAI,QAAQ,UAAU;AAEpC,gBAAU,MAAM,WAAW,GAAG,KAAK,KAAK,MAAM,IAAI,OAAO,OAAO,CAAC;AAAA,IACnE,CAAC;AACD,WAAO,MAAM;AAAE,UAAI,4BAA4B,KAAK;AAAA,IAAE;AAAA,EACxD,GAAG,CAAC,QAAQ,CAAC;AAEb,6BACG,OAAA,EAAI,KAAK,cAAc,WAAU,0CAC/B,UACH;AAEJ;AAEA,MAAM,oBAAoB,MAAM;AAAA,EAC9B,SAASA,mBACP,EAAE,OAAO,QAAQ,UAAU,OAAO,MAAM,UAAU,WAAW,GAAG,MAAA,GAChE,KACA;AACA,QAAI,SAAS,EAAG,QAAO;~~AAEvB~~,UAAM,UAAU,UAAU,QACxB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,2BAAwB;AAAA,QACxB,UAAU;AAAA,QACV,~~MAAK;AAAA,QACL,iBAAc;AAAA,QACd,~~WAAW,GAAG,YAAY,EAAE,OAAO,WAAW,KAAA,CAAM,GAAG,sHAAsH,SAAS;AAAA,QACrL,GAAG;AAAA,QAEJ,UAAA,qBAAC,QAAA,EAAK,WAAU,QAAO,UAAA;AAAA,UAAA;AAAA,UAAE;AAAA,QAAA,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA,IAGjC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,2BAAwB;AAAA,QACxB,UAAU;AAAA,QACV,~~MAAK;AAAA,QACL,iBAAc;AAAA,QACd,~~WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,YAAY,IAAI;AAAA,UAChB,YAAY,IAAI;AAAA,UAChB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QACL,UAAA;AAAA,UAAA;AAAA,UACG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAQN,WACE,qBAAC,WAAA,EAAU,WAAW,~~sBAAsB~~,YAAY,~~sBACtD~~,UAAA;AAAA,MAAA,oBAAC,kBAAA,EAAiB,SAAO,MACtB,UAAA,SACH;AAAA,MACA,oBAAC,oBAAiB,WAAU,yBAAwB,cAAW,QAC7D,UAAA,oBAAC,gBAAA,EAAgB,SAAA,CAAS,EAAA,CAC5B;AAAA,IAAA,GACF;AAAA,EAEJ;AACF;AACA,kBAAkB,cAAc;AAIzB,MAAM,wBAAwB;AAAA,EACnC,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA;AAAA,EAIP,QAAQ,CAAC,WAAW,eAAe;AAAA,EACnC,QAAQ;AAAA,IACN,IAAI,CAAC,UAAU;AAAA,IACf,IAAI,CAAC,iBAAiB;AAAA,IACtB,MAAM,CAAA;AAAA,EAAC;AAEX;"}
1	+ {"version":3,"file":"overflow-indicator.js","sources":["../../../src/components/OverflowIndicator/overflow-indicator.tsx"],"sourcesContent":["/*\n @internal — DS-internal 單元(per `.claude/rules/ui-development.md` Public vs Internal canonical;spec frontmatter `isInternal`)。\n * 不進 root barrel front-door;由 Combobox / PeoplePicker 等 DS 元件 wrap 消費,end-user app 請用 wrapper 元件。\n /\nimport as React from 'react'\nimport { cn } from '@/lib/utils'\nimport { HoverCard, HoverCardTrigger, HoverCardContent } from '@/design-system/components/HoverCard/hover-card'\nimport { tagVariants } from '@/design-system/components/Tag/tag'\nimport { MOTION_DELAY_PLAIN_MS, MOTION_DELAY_CLOSE_MS } from '@/design-system/tokens/motion/motion'\n\n/*\n OverflowIndicator — +N 觸發器 + HoverCard 顯示溢出內容\n \n 統一用 HoverCard（不用 Tooltip）——溢出內容可能需要互動：\n * - 人員 +N：tag dismiss + hover name card\n * - 一般 +N：穩定顯示溢出項目\n \n trigger 不用 Tag 元件（Tag 有內建 truncation Tooltip 會跟 HoverCard 衝突），\n * 改用 tagVariants 直接套樣式。\n */\n\nconst triggerSize: Record<string, string> = {\n sm: 'h-5 min-w-5',\n md: 'h-6 min-w-6',\n lg: 'h-6 min-w-6',\n}\n\nconst triggerText: Record<string, string> = {\n sm: 'text-[10px]',\n md: 'text-caption',\n lg: 'text-caption',\n}\n\nexport interface OverflowIndicatorProps\n extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {\n count: number\n shape?: 'circle' \| 'tag'\n size?: 'sm' \| 'md' \| 'lg'\n children: React.ReactNode\n className?: string\n}\n\nfunction ShrinkWrapList({ children }: { children: React.ReactNode }) {\n const containerRef = React.useRef<HTMLDivElement \| null>(null)\n\n // 2026-05-16 audit codex Round 6:rAF capture + cancel on unmount/re-run(defensive hygiene)。\n // 原 callback ref `requestAnimationFrame(() => ...)` 沒 cancel,unmount-during-rAF 可能 fire 後\n // mutate detached element.style — no-op but pattern hygiene 應對齊 DS-wide rAF cancel canonical。\n React.useLayoutEffect(() => {\n const container = containerRef.current\n if (!container) return\n let rafId = 0\n rafId = requestAnimationFrame(() => {\n rafId = 0\n const cs = getComputedStyle(container)\n const padL = parseFloat(cs.paddingLeft) \|\| 0\n const padR = parseFloat(cs.paddingRight) \|\| 0\n const gap = parseFloat(cs.gap) \|\| parseFloat(cs.columnGap) \|\| 0\n const available = container.offsetWidth - padL - padR\n\n const items = Array.from(container.children) as HTMLElement[]\n if (items.length === 0) return\n\n let currentRow = 0\n let maxRow = 0\n\n items.forEach(item => {\n const w = item.offsetWidth\n const needed = currentRow > 0 ? currentRow + gap + w : w\n\n if (needed > available && currentRow > 0) {\n maxRow = Math.max(maxRow, currentRow)\n currentRow = w\n } else {\n currentRow = needed\n }\n })\n maxRow = Math.max(maxRow, currentRow)\n\n container.style.maxWidth = `${Math.ceil(maxRow) + padL + padR + 1}px`\n })\n return () => { if (rafId) cancelAnimationFrame(rafId) }\n }, [children])\n\n return (\n <div ref={containerRef} className=\"flex flex-wrap gap-1 p-2 max-w-[280px]\">\n {children}\n </div>\n )\n}\n\nconst OverflowIndicator = React.forwardRef<HTMLSpanElement, OverflowIndicatorProps>(\n function OverflowIndicator(\n { count, shape = 'circle', size = 'md', children, className, ...props },\n ref,\n ) {\n if (count <= 0) return null\n\n // a11y(2026-07-14 dim-6):拆 role=\"button\" + aria-haspopup=\"dialog\" —— trigger 無\n // activation 行為(無 Enter/Space handler,HoverCard 靠 hover/focus 自動開),宣告了\n // button/haspopup 卻按 Enter 無反應 = 對 AT 空承諾。對齊 Avatar hoverCard 同款拆除\n // (avatar.tsx 2026-07-06 + hover-card.spec.md「A11y 預設」:Radix 官方零 role/aria 定位)。\n // trigger 有可見 \"+N\" 文字,無需 aria-label / role;保留 tabIndex=0 + focus ring(WCAG 2.1.1)。\n const trigger = shape === 'tag' ? (\n <span\n ref={ref}\n data-overflow-indicator=\"\"\n tabIndex={0}\n className={cn(tagVariants({ color: 'neutral', size }), 'cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1', className)}\n {...props}\n >\n <span className=\"px-1\">+{count}</span>\n </span>\n ) : (\n <span\n ref={ref}\n data-overflow-indicator=\"\"\n tabIndex={0}\n className={cn(\n 'shrink-0 rounded-full inline-grid place-content-center',\n 'bg-muted text-foreground font-medium leading-none cursor-pointer',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\n triggerSize[size],\n triggerText[size],\n className,\n )}\n {...props}\n >\n +{count}\n </span>\n )\n\n // 2026-05-18 fix(per user audit「所有 hovercard 應消費 hover delay token」+ motion.spec.md SSOT):\n // plain tier(純列表展開、無 fetch)= MOTION_DELAY_PLAIN_MS,per motion.spec.md 對照表 row;\n // close = MOTION_DELAY_CLOSE_MS。2026-06-11 修:2026-05-18 token 遷移誤挑 rich(原 hardcode 200/300\n // 兩 tier 皆非,遷移未對照 spec 表)— popup 可互動性由 close 緩衝保障,與 open tier 無關。\n return (\n <HoverCard openDelay={MOTION_DELAY_PLAIN_MS} closeDelay={MOTION_DELAY_CLOSE_MS}>\n <HoverCardTrigger asChild>\n {trigger}\n </HoverCardTrigger>\n <HoverCardContent className=\"bg-tooltip rounded-lg\" data-theme=\"dark\">\n <ShrinkWrapList>{children}</ShrinkWrapList>\n </HoverCardContent>\n </HoverCard>\n )\n },\n)\nOverflowIndicator.displayName = 'OverflowIndicator'\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 overflowIndicatorMeta = {\n component: 'OverflowIndicator',\n family: 'self-contained', // 對齊 overflow-indicator.spec.md frontmatter family: self-contained(SSOT)\n variants: {\n\n },\n sizes: {\n\n },\n // 2026-07-04 audit 對齊(spec:95「本身無 hover / active / disabled / selected 變化」;code 有 focus-visible ring tsx:106/121)\n states: ['default', 'focus-visible'],\n tokens: {\n bg: ['bg-muted'],\n fg: ['text-foreground'],\n ring: [],\n },\n} as const\n\nexport { OverflowIndicator }\n"],"names":["OverflowIndicator"],"mappings":";;;;;;AAqBA,MAAM,cAAsC;AAAA,EAC1C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,cAAsC;AAAA,EAC1C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAWA,SAAS,eAAe,EAAE,YAA2C;AACnE,QAAM,eAAe,MAAM,OAA8B,IAAI;AAK7D,QAAM,gBAAgB,MAAM;AAC1B,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,UAAW;AAChB,QAAI,QAAQ;AACZ,YAAQ,sBAAsB,MAAM;AAClC,cAAQ;AACR,YAAM,KAAK,iBAAiB,SAAS;AACrC,YAAM,OAAO,WAAW,GAAG,WAAW,KAAK;AAC3C,YAAM,OAAO,WAAW,GAAG,YAAY,KAAK;AAC5C,YAAM,MAAM,WAAW,GAAG,GAAG,KAAK,WAAW,GAAG,SAAS,KAAK;AAC9D,YAAM,YAAY,UAAU,cAAc,OAAO;AAEjD,YAAM,QAAQ,MAAM,KAAK,UAAU,QAAQ;AAC3C,UAAI,MAAM,WAAW,EAAG;AAExB,UAAI,aAAa;AACjB,UAAI,SAAS;AAEb,YAAM,QAAQ,CAAA,SAAQ;AACpB,cAAM,IAAI,KAAK;AACf,cAAM,SAAS,aAAa,IAAI,aAAa,MAAM,IAAI;AAEvD,YAAI,SAAS,aAAa,aAAa,GAAG;AACxC,mBAAS,KAAK,IAAI,QAAQ,UAAU;AACpC,uBAAa;AAAA,QACf,OAAO;AACL,uBAAa;AAAA,QACf;AAAA,MACF,CAAC;AACD,eAAS,KAAK,IAAI,QAAQ,UAAU;AAEpC,gBAAU,MAAM,WAAW,GAAG,KAAK,KAAK,MAAM,IAAI,OAAO,OAAO,CAAC;AAAA,IACnE,CAAC;AACD,WAAO,MAAM;AAAE,UAAI,4BAA4B,KAAK;AAAA,IAAE;AAAA,EACxD,GAAG,CAAC,QAAQ,CAAC;AAEb,6BACG,OAAA,EAAI,KAAK,cAAc,WAAU,0CAC/B,UACH;AAEJ;AAEA,MAAM,oBAAoB,MAAM;AAAA,EAC9B,SAASA,mBACP,EAAE,OAAO,QAAQ,UAAU,OAAO,MAAM,UAAU,WAAW,GAAG,MAAA,GAChE,KACA;AACA,QAAI,SAAS,EAAG,QAAO;AAOvB,UAAM,UAAU,UAAU,QACxB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,2BAAwB;AAAA,QACxB,UAAU;AAAA,QACV,WAAW,GAAG,YAAY,EAAE,OAAO,WAAW,KAAA,CAAM,GAAG,sHAAsH,SAAS;AAAA,QACrL,GAAG;AAAA,QAEJ,UAAA,qBAAC,QAAA,EAAK,WAAU,QAAO,UAAA;AAAA,UAAA;AAAA,UAAE;AAAA,QAAA,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA,IAGjC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,2BAAwB;AAAA,QACxB,UAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,YAAY,IAAI;AAAA,UAChB,YAAY,IAAI;AAAA,UAChB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QACL,UAAA;AAAA,UAAA;AAAA,UACG;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAQN,WACE,qBAAC,WAAA,EAAU,WAAW,uBAAuB,YAAY,uBACvD,UAAA;AAAA,MAAA,oBAAC,kBAAA,EAAiB,SAAO,MACtB,UAAA,SACH;AAAA,MACA,oBAAC,oBAAiB,WAAU,yBAAwB,cAAW,QAC7D,UAAA,oBAAC,gBAAA,EAAgB,SAAA,CAAS,EAAA,CAC5B;AAAA,IAAA,GACF;AAAA,EAEJ;AACF;AACA,kBAAkB,cAAc;AAIzB,MAAM,wBAAwB;AAAA,EACnC,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA;AAAA,EAIP,QAAQ,CAAC,WAAW,eAAe;AAAA,EACnC,QAAQ;AAAA,IACN,IAAI,CAAC,UAAU;AAAA,IACf,IAAI,CAAC,iBAAiB;AAAA,IACtB,MAAM,CAAA;AAAA,EAAC;AAEX;"}

package/dist/components/Pagination/pagination.js CHANGED Viewed

@@ -91,7 +91,7 @@ const Pagination = React.forwardRef(
             children: slot
           }
         ) }, slot) : (
-          // Ellipsis 純指示不可點(Ant / MUI / shadcn 同);寬度對齊數字鈕保持節奏
+          // Ellipsis 純指示不可點(MUI / shadcn 同;Ant 為可點 jump-5 派,見 spec);寬度對齊數字鈕保持節奏
           /* @__PURE__ */ jsx(
             "li",
             {