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

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

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

package/dist/components/RadioGroup/radio-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"radio-group.js","sources":["../../../src/components/RadioGroup/radio-group.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { Circle } from \"lucide-react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport type { FieldMode, FieldVariant } from \"@/design-system/components/Field/field-types\"\nimport { useFieldContext, useResolvedFieldMode, useResolvedFieldDisabled, useResolvedFieldSize } from \"@/design-system/components/Field/field-context\"\nimport { SelectionItem } from \"@/design-system/components/SelectionControl/selection-item\"\nimport type { LucideIcon } from \"lucide-react\"\nimport type { AvatarData } from \"@/design-system/components/Avatar/avatar\"\nimport { fieldWrapperStyles } from \"@/design-system/components/Field/field-wrapper\"\nimport { useFieldEmptyDisplay, fieldEmptyColorClass } from '@/design-system/components/Field/field-context'\n\n// ── RadioGroup display mode ─────────────────────────────────────────────────\n// RadioGroup mode='display' 時:Group 不渲染 Radix primitive(無 radio 視覺),\n// 改由 RadioGroup 本體 walk props.children,找 control.value === selectedValue 的\n// SelectionItem,把它的 label 渲染為單一純文字 span(其他選項不顯示)。\n// 對齊 Carbon read-only single-select(只顯示 selected 內容)+ Airtable / Notion read-only。\n// 實作在 RadioGroup forwardRef 內(見下方 mode === 'display' 分支)。\n\n// ── RadioGroup ──────────────────────────────────────────────────────────────\n\nexport interface RadioGroupProps\n extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {\n /*\n Field mode(2026-05-05 Phase B3 align):\n * edit — 一般可互動 RadioGroup(預設)\n * display — 純展示:不渲染 Radix Root / 任何 radio 視覺;RadioGroup 本體 walk\n * children,僅 control.value === group.value 那筆把 label 渲染為純文字 span。\n * 對齊 Carbon read-only / DataTable single-select cell read mode。\n * readonly — standalone:ReadonlyContext 傳 items 鎖互動保留視覺;Field 內:灰框 + 選中項 label(不渲染 radio 群組)\n * disabled — 同 RadioGroupPrimitive.Root disabled 屬性\n /\n mode?: FieldMode\n /\n Visual chrome — RadioGroup 本體無 input wrapper variant,本 prop 對主體無視覺影響;\n * 為對齊 Field 4-mode + chrome 透傳契約而保留(M19 一致性)。\n /\n variant?: FieldVariant\n}\n\n// RadioGroup mode='readonly' → 透過 context 把 readOnly 傳給所有 child RadioGroupItem\n// (item 已支援 readOnly prop + data-[readonly] 樣式;Radix Root 無 readOnly,故用 context)。\nconst RadioGroupReadonlyContext = React.createContext(false)\n\n// group-level disabled(standalone <RadioGroup disabled>)→ context 傳給 items,讓 SelectionItem\n// label/description 也降 text-fg-disabled(Radix Root disabled 只 propagate 給 radio 圈、不碰 label 色)。\n// 對齊本檔 RadioGroupReadonlyContext 既有模式 + spec「Disabled」邊界案例(Group-level disabled 視覺繼承 SelectionItem SSOT text-fg-disabled)。\nconst RadioGroupDisabledContext = React.createContext(false)\n\n// walk children 找 control.value === selectedValue 的 SelectionItem label(display / readonly-in-Field 共用)\nfunction findSelectedRadioLabel(children: React.ReactNode, selectedValue: string \| undefined): React.ReactNode {\n let selectedLabel: React.ReactNode = null\n React.Children.forEach(children, (child) => {\n if (!React.isValidElement(child)) return\n const cProps = child.props as { control?: unknown; label?: React.ReactNode; value?: unknown }\n // 形狀 1:<RadioGroupItem value label>(主用法)— value/label 直掛 props\n if (cProps.value === selectedValue && cProps.value !== undefined) {\n selectedLabel = cProps.label ?? selectedValue\n return\n }\n // 形狀 2:<SelectionItem control={<RadioGroupItem value/>} label>(組合用法)\n const control = cProps.control\n if (React.isValidElement(control)) {\n const controlValue = (control.props as { value?: unknown }).value\n if (controlValue === selectedValue) {\n selectedLabel = cProps.label ?? selectedValue\n }\n }\n })\n return selectedLabel\n}\n\nconst RadioGroup = React.forwardRef<\n React.ElementRef<typeof RadioGroupPrimitive.Root>,\n RadioGroupProps\n>(({ className, mode, variant: _chrome, value, defaultValue, ...props }, ref) => {\n // 2026-06-08 SSOT cascade:resolvedMode 經 resolver hook 讀 fieldCtx(原 root 完全不讀 → <Field disabled>/<Field mode> 失效)\n const resolvedMode = useResolvedFieldMode({ mode, disabled: (props as { disabled?: boolean }).disabled })\n const emptyDisplay = useFieldEmptyDisplay()\n const fieldCtx = useFieldContext()\n // readonly 灰框 size:走 SSOT resolver(RadioGroup 無 size prop → ctx > 'md')\n const resolvedBoxSize = useResolvedFieldSize(undefined, 'md') as 'sm' \| 'md' \| 'lg'\n // mode='display' — 純展示 selected option 的 label,不渲染任何 radio control 視覺。\n // 對齊 Carbon read-only single-select(只顯示 selected 內容)+ Airtable / Notion read-only。\n // 實作:walk children 找 control.value === selectedValue 的 SelectionItem,render label plain text。\n // (不用 context dispatch 給 RadioGroupItem — SelectionItem layout wrapper 仍會渲染所有 item label)\n // 2026-07-04 修:display / readonly-in-Field 分支的 <div> 原丟棄剩餘 props(id/data-/aria-)\n // 且不轉發 forwardRef ref → 自家 radio-group.stories.tsx display demo 傳的 aria-label 都靜默失效。\n // 抽出 Radix 專屬 non-DOM props,其餘 DOM props 於兩分支 spread 轉發(與 Checkbox/Switch 同修);\n // edit 主路徑不受影響(Root 仍 spread 完整 props)。\n const {\n onValueChange: _onValueChange,\n disabled: _disabled,\n required: _required,\n name: _name,\n orientation: _orientation,\n dir: _dir,\n loop: _loop,\n asChild: _asChild,\n children: _children,\n ...restDomProps\n } = props as RadioGroupProps & { asChild?: boolean }\n\n if (resolvedMode === 'display') {\n const selectedValue = (value ?? defaultValue) as string \| undefined\n if (!selectedValue) {\n return <div {...restDomProps} ref={ref as React.Ref<HTMLDivElement>} role=\"group\" className={cn('grid', className)}><span className={fieldEmptyColorClass(resolvedMode)}>{emptyDisplay}</span></div>\n }\n const selectedLabel = findSelectedRadioLabel(props.children, selectedValue)\n return (\n <div {...restDomProps} ref={ref as React.Ref<HTMLDivElement>} role=\"group\" className={cn('grid', className)}>\n <span className=\"text-foreground\">{selectedLabel ?? selectedValue}</span>\n </div>\n )\n }\n\n // ── mode='readonly' in Field(2026-06-12 user 拍板,與 Checkbox/Switch 灰框模型一致)──\n // Field 內 readonly 單選 = fieldWrapperStyles readonly 灰框 + 選中項 label 文字\n // (= Select readonly 同款呈現:同為「單選資料」,鎖定時呈現一致)。\n // standalone readonly(無 Field)維持原樣鎖互動(ReadonlyContext 路徑)。\n if (resolvedMode === 'readonly' && fieldCtx?.hasFieldWrapper === true) {\n const selectedValue = (value ?? defaultValue) as string \| undefined\n const selectedLabel = selectedValue ? findSelectedRadioLabel(props.children, selectedValue) : null\n const boxSize = resolvedBoxSize\n return (\n <div\n {...restDomProps}\n ref={ref as React.Ref<HTMLDivElement>}\n role=\"radiogroup\"\n aria-readonly=\"true\"\n aria-labelledby={fieldCtx?.labelId}\n aria-invalid={fieldCtx?.invalid \|\| undefined}\n data-readonly=\"true\"\n tabIndex={0}\n className={cn(\n fieldWrapperStyles({ size: boxSize, mode: 'readonly', variant: 'default' }),\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n className,\n )}\n >\n {selectedValue\n ? <span className=\"text-foreground\">{selectedLabel ?? selectedValue}</span>\n : <span className={fieldEmptyColorClass(resolvedMode)}>{emptyDisplay}</span>}\n </div>\n )\n }\n\n // mode='disabled' → Radix Root disabled(原生 propagate 給所有 item);\n // mode='readonly' → context 傳 readOnly 給 items(item 渲染為 data-[readonly] 鎖互動 + aria-readonly)。\n return (\n <RadioGroupReadonlyContext.Provider value={resolvedMode === 'readonly'}>\n <RadioGroupDisabledContext.Provider value={resolvedMode === 'disabled'}>\n <RadioGroupPrimitive.Root\n className={cn(\"grid\", className)}\n value={value}\n defaultValue={defaultValue}\n // Field 內:role=\"radiogroup\" 的 <div> 無法被 <label for> 命名 → 自讀 fieldCtx 接\n // aria-labelledby / aria-invalid / aria-describedby(field-context.ts「下游 control 需自讀\n // labelId」;對齊 slider.tsx / Rating / TimePicker 的 fieldLabelId 接線 + 上方 readonly-in-Field 分支)。\n // standalone(無 Field)時皆 undefined,consumer 的 {...props} aria- 照舊生效(置於 spread 前故可被覆蓋)。\n aria-labelledby={fieldCtx?.labelId}\n aria-invalid={fieldCtx?.invalid \|\| undefined}\n aria-describedby={fieldCtx?.descriptionId}\n // a11y(2026-07-14 dim-10):readonly 語意放 radiogroup(aria-readonly 合法 role;\n // 對齊上方 readonly-in-Field 分支 L133)。item(role=radio)不帶 aria-readonly —\n // axe 實證 radio 不允許該屬性,item 靠 data-readonly + tabIndex + click guard 鎖互動。\n aria-readonly={resolvedMode === 'readonly' \|\| undefined}\n {...props}\n disabled={resolvedMode === 'disabled'}\n ref={ref}\n />\n </RadioGroupDisabledContext.Provider>\n </RadioGroupReadonlyContext.Provider>\n )\n})\nRadioGroup.displayName = 'RadioGroup'\n// Field layout 宣告：RadioGroup 是 block primitive（多項堆疊），\n// 進入 <Field> 時 control area 自動切 items-start（block 分支不設 min-h、不加 padding-top,\n// 高度由內容決定;額外加 paddingTop 會 double padding — field.tsx block control area SSOT）。\n// Convention 詳見 components/Field/field.spec.md「Control area:Inline vs Block」段落。\n;(RadioGroup as unknown as { fieldLayout: 'block' }).fieldLayout = 'block'\n\n// ── RadioGroupItem Variants ─────────────────────────────────────────────────\n// 與 Checkbox 完全對齊：sm/md=16px, lg=20px。差異只有形狀（rounded-full）和指示器（filled dot）。\n\nconst radioItemVariants = cva(\n [\n 'grid place-content-center shrink-0 rounded-full',\n 'border border-border bg-surface',\n 'transition-colors duration-150',\n 'hover:border-border-hover',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\n 'data-[state=checked]:border-primary data-[state=checked]:text-primary',\n 'data-[state=checked]:hover:border-primary-hover data-[state=checked]:hover:text-primary-hover',\n 'disabled:cursor-not-allowed disabled:bg-disabled disabled:border-transparent disabled:hover:border-transparent',\n 'disabled:data-[state=checked]:bg-disabled disabled:data-[state=checked]:border-transparent disabled:data-[state=checked]:text-fg-disabled',\n // readOnly：鎖定互動但維持 checked/unchecked 視覺\n 'data-[readonly=true]:pointer-events-none data-[readonly=true]:cursor-default',\n 'data-[readonly=true]:hover:border-border',\n ],\n {\n variants: {\n size: {\n sm: 'h-4 w-4',\n md: 'h-4 w-4',\n lg: 'h-5 w-5',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n)\n\n// ── Dot Size ────────────────────────────────────────────────────────────────\nconst dotSize: Record<string, number> = { sm: 8, md: 8, lg: 10 }\n\n// ── Types ───────────────────────────────────────────────────────────────────\n\ntype RadioItemPrimitiveProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n\nexport interface RadioGroupItemProps\n extends RadioItemPrimitiveProps,\n VariantProps<typeof radioItemVariants> {\n /*\n Inline label。提供時 RadioGroupItem 自動透過 SelectionItem 包裝，\n * 套用 codified 樣式（text-body / text-foreground / disabled 色）。\n * 在 <Field> context 內時此 prop 仍然生效（Radio 的 label 是每個 item\n * 各自的，不是整組 Field 的；FieldLabel 是 RadioGroup 整體的 label）。\n /\n label?: React.ReactNode\n /\n Inline description（secondary 文字）。須與 label 搭配使用。\n * 套用 text-body / text-fg-secondary 樣式。\n /\n description?: React.ReactNode\n /* 可選左側 icon(label 前)— 2026-06-12 M30 修:轉發 SelectionItem 既有 canonical 槽(selection-item.tsx jsDoc SSOT;與 avatar 互斥)/\n icon?: LucideIcon\n /* 可選左側 avatar(label 前)— 同上 /\n avatar?: AvatarData\n /\n readonly 模式：鎖定互動但維持 checked/unchecked 視覺正確。\n * 通常整個 RadioGroup 一起設 readonly（由 parent RadioGroup 的 disabled\n * 或 readonly 行為決定），個別 item 也可設。\n */\n readOnly?: boolean\n}\n\n// ── RadioGroupItem ──────────────────────────────────────────────────────────\n\nconst RadioGroupItem = React.forwardRef<\n React.ElementRef<typeof RadioGroupPrimitive.Item>,\n RadioGroupItemProps\n>(\n (\n {\n className,\n size,\n label,\n icon,\n avatar,\n description,\n readOnly = false,\n disabled,\n id: idProp,\n ...props\n },\n ref\n ) => {\n const sizeKey = size ?? 'md'\n const dotPx = dotSize[sizeKey]\n\n // 注意:RadioGroup mode='display' 的純文字渲染由 RadioGroup 本體 walk-children 處理\n // (見上方 RadioGroup forwardRef 的 mode === 'display' 分支),RadioGroupItem 在 display\n // mode 下不會被獨立 render,故此處無 display 分支。\n\n // 注意：Radio 的 label 語意與 Checkbox/Switch 不同——\n // Checkbox/Switch 的 label 就是該 control 的唯一 label（被 Field context 接管），\n // RadioGroupItem 的 label 是「該選項」的 label（每 item 各自擁有），\n // FieldLabel 則是整個 RadioGroup 的 label。\n // 因此 RadioGroupItem 的 label 不因 Field context 被忽略。\n // group-level disabled(standalone <RadioGroup disabled>)也要降 label/description 色 —— Radix Root\n // disabled 只 propagate 給 radio 圈,label 色由 SelectionItem disabled 決定,故讀 RadioGroupDisabledContext 補上。\n const groupDisabled = React.useContext(RadioGroupDisabledContext)\n const resolvedDisabled = useResolvedFieldDisabled(disabled) \|\| groupDisabled\n // group-level readonly(RadioGroup mode='readonly')或 item-level readOnly,任一 true 即鎖互動。\n const groupReadonly = React.useContext(RadioGroupReadonlyContext)\n const effectiveReadonly = readOnly \|\| groupReadonly\n\n const generatedId = React.useId()\n const inputId = idProp ?? generatedId\n\n const rootEl = (\n <RadioGroupPrimitive.Item\n id={inputId}\n ref={ref}\n disabled={resolvedDisabled}\n // a11y(2026-07-14 dim-10):item(role=radio)不帶 aria-readonly — axe 實證 radio 不允許\n // 該屬性(readonly 語意由 Root role=radiogroup 宣告,見上方 L167-170)。item 靠\n // data-readonly + tabIndex + click guard 鎖互動。\n data-readonly={effectiveReadonly \|\| undefined}\n tabIndex={effectiveReadonly ? -1 : undefined}\n className={cn(radioItemVariants({ size }), className)}\n {...props}\n // 2026-07-05 D4 修:readOnly 鎖互動補 label 繞道 — <label htmlFor> 的 synthetic click\n // 不是 pointer event,cva pointer-events-none 攔不到,點 label 文字仍選中。\n // preventDefault 讓 Radix composeEventHandlers(checkForDefaultPrevented)跳過內部 onCheck;\n // 必列在 {...props} 之後才不被 consumer onClick 覆蓋(與 Checkbox/Switch 同修)。\n // 同時攔 Radix roving-focus 的 arrow-key onFocus → click() 路徑(同為 click event)。\n onClick={(event) => {\n if (effectiveReadonly) {\n event.preventDefault()\n return\n }\n props.onClick?.(event)\n }}\n >\n <RadioGroupPrimitive.Indicator className=\"grid place-content-center\">\n <Circle\n style={{ width: dotPx, height: dotPx }}\n className=\"fill-current text-current\"\n />\n </RadioGroupPrimitive.Indicator>\n </RadioGroupPrimitive.Item>\n )\n\n // 無 label → 只渲染 radio 本體\n if (label == null) return rootEl\n\n // 有 label → 透過 SelectionItem 包裝，與 Checkbox 一致（disabled 已於上方 useResolvedFieldDisabled 解析）\n return (\n <SelectionItem\n control={rootEl}\n label={label}\n description={description}\n icon={icon}\n avatar={avatar}\n htmlFor={inputId}\n disabled={resolvedDisabled}\n size={sizeKey}\n />\n )\n }\n)\nRadioGroupItem.displayName = 'RadioGroupItem'\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 radioGroupMeta = {\n component: 'RadioGroup',\n family: null, // self-contained primitive(對齊 spec frontmatter self-contained + body L31;非 Family 4 — field-controls.spec.md 成員名單不含 RadioGroup)\n variants: {\n\n },\n sizes: {\n // iconSize = 渲染指示器尺寸(對齊 checkbox/switch meta 慣例:checkbox iconSize=真 Check glyph 12/12/16)。\n // Radio 指示器是 filled dot 非 glyph,真值 = 上方 `const dotSize` map 8/8/10;\n // 控件框 16/16/20 與 Checkbox 對齊但那是 box 非「指示器」,不入此鍵(避免 metadata 語意 drift)。\n sm: { fieldHeight: 28, iconSize: 8, typography: 'body' },\n md: { fieldHeight: 32, iconSize: 8, typography: 'body' },\n lg: { fieldHeight: 36, iconSize: 10, typography: 'body-lg' },\n },\n // 2026-07-04 修 stale meta:移除 'active' — radioItemVariants cva 無 active-state 樣式,\n // Radix radio 也無 data-state=active(對照 checkboxMeta 正確不含 active)\n // 'checked' = 選定持續態(card 式 = border+text primary;2026-07-07 meta 詞彙統一補列)\n states: ['default', 'hover', 'checked', 'focus-visible', 'disabled'],\n tokens: {\n bg: ['bg-disabled', 'bg-surface'],\n fg: ['text-fg-disabled', 'text-fg-secondary', 'text-foreground', 'text-primary'],\n ring: ['ring-ring'],\n },\n defaultSize: 'md',\n} as const\n\nexport { RadioGroup, RadioGroupItem, radioItemVariants }\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"radio-group.js","sources":["../../../src/components/RadioGroup/radio-group.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { Circle } from \"lucide-react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport type { FieldMode, FieldVariant } from \"@/design-system/components/Field/field-types\"\nimport { useFieldContext, useResolvedFieldMode, useResolvedFieldDisabled, useResolvedFieldSize } from \"@/design-system/components/Field/field-context\"\nimport { SelectionItem } from \"@/design-system/components/SelectionControl/selection-item\"\nimport type { LucideIcon } from \"lucide-react\"\nimport type { AvatarData } from \"@/design-system/components/Avatar/avatar\"\nimport { fieldWrapperStyles } from \"@/design-system/components/Field/field-wrapper\"\nimport { useFieldEmptyDisplay, fieldEmptyColorClass } from '@/design-system/components/Field/field-context'\n\n// ── RadioGroup view mode ────────────────────────────────────────────────────\n// RadioGroup mode='view' 時:Group 不渲染 Radix primitive(無 radio 視覺),\n// 改由 RadioGroup 本體 walk props.children,找 control.value === selectedValue 的\n// SelectionItem,把它的 label 渲染為單一純文字 span(其他選項不顯示)。\n// 對齊 Carbon read-only single-select(只顯示 selected 內容)+ Airtable / Notion read-only。\n// 實作在 RadioGroup forwardRef 內(見下方 mode === 'view' 分支)。\n\n// ── RadioGroup ──────────────────────────────────────────────────────────────\n\nexport interface RadioGroupProps\n // asChild Omit(2026-07-18 決策2):RadioGroup 恆持有多個 radio item → <Root asChild> 的\n // Radix Slot React.Children.only crash;view/readonly 模式更直接渲染固定 <div> 忽略之。\n // children 保留(edit 容器內容 + view/readonly 走訪選中 label,見 body cast @line ~105)。\n extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>, 'asChild'> {\n /*\n Field mode(2026-05-05 Phase B3 align):\n * edit — 一般可互動 RadioGroup(預設)\n * view — 純展示:不渲染 Radix Root / 任何 radio 視覺;RadioGroup 本體 walk\n * children,僅 control.value === group.value 那筆把 label 渲染為純文字 span。\n * 對齊 Carbon read-only / DataTable single-select cell read mode。\n * readonly — standalone:ReadonlyContext 傳 items 鎖互動保留視覺;Field 內:灰框 + 選中項 label(不渲染 radio 群組)\n * disabled — 同 RadioGroupPrimitive.Root disabled 屬性\n /\n mode?: FieldMode\n /\n Visual chrome — RadioGroup 本體無 input wrapper variant,本 prop 對主體無視覺影響;\n * 為對齊 Field 4-mode + chrome 透傳契約而保留(M19 一致性)。\n /\n variant?: FieldVariant\n}\n\n// RadioGroup mode='readonly' → 透過 context 把 readOnly 傳給所有 child RadioGroupItem\n// (item 已支援 readOnly prop + data-[readonly] 樣式;Radix Root 無 readOnly,故用 context)。\nconst RadioGroupReadonlyContext = React.createContext(false)\n\n// group-level disabled(standalone <RadioGroup disabled>)→ context 傳給 items,讓 SelectionItem\n// label/description 也降 text-fg-disabled(Radix Root disabled 只 propagate 給 radio 圈、不碰 label 色)。\n// 對齊本檔 RadioGroupReadonlyContext 既有模式 + spec「Disabled」邊界案例(Group-level disabled 視覺繼承 SelectionItem SSOT text-fg-disabled)。\nconst RadioGroupDisabledContext = React.createContext(false)\n\n// walk children 找 control.value === selectedValue 的 SelectionItem label(view / readonly-in-Field 共用)\nfunction findSelectedRadioLabel(children: React.ReactNode, selectedValue: string \| undefined): React.ReactNode {\n let selectedLabel: React.ReactNode = null\n React.Children.forEach(children, (child) => {\n if (!React.isValidElement(child)) return\n const cProps = child.props as { control?: unknown; label?: React.ReactNode; value?: unknown }\n // 形狀 1:<RadioGroupItem value label>(主用法)— value/label 直掛 props\n if (cProps.value === selectedValue && cProps.value !== undefined) {\n selectedLabel = cProps.label ?? selectedValue\n return\n }\n // 形狀 2:<SelectionItem control={<RadioGroupItem value/>} label>(組合用法)\n const control = cProps.control\n if (React.isValidElement(control)) {\n const controlValue = (control.props as { value?: unknown }).value\n if (controlValue === selectedValue) {\n selectedLabel = cProps.label ?? selectedValue\n }\n }\n })\n return selectedLabel\n}\n\nconst RadioGroup = React.forwardRef<\n React.ElementRef<typeof RadioGroupPrimitive.Root>,\n RadioGroupProps\n>(({ className, mode, variant: _chrome, value, defaultValue, ...props }, ref) => {\n // 2026-06-08 SSOT cascade:resolvedMode 經 resolver hook 讀 fieldCtx(原 root 完全不讀 → <Field disabled>/<Field mode> 失效)\n const resolvedMode = useResolvedFieldMode({ mode, disabled: (props as { disabled?: boolean }).disabled })\n const emptyDisplay = useFieldEmptyDisplay()\n const fieldCtx = useFieldContext()\n // readonly 灰框 size:走 SSOT resolver(RadioGroup 無 size prop → ctx > 'md')\n const resolvedBoxSize = useResolvedFieldSize(undefined, 'md') as 'sm' \| 'md' \| 'lg'\n // mode='view' — 純展示 selected option 的 label,不渲染任何 radio control 視覺。\n // 對齊 Carbon read-only single-select(只顯示 selected 內容)+ Airtable / Notion read-only。\n // 實作:walk children 找 control.value === selectedValue 的 SelectionItem,render label plain text。\n // (不用 context dispatch 給 RadioGroupItem — SelectionItem layout wrapper 仍會渲染所有 item label)\n // 2026-07-04 修:view / readonly-in-Field 分支的 <div> 原丟棄剩餘 props(id/data-/aria-)\n // 且不轉發 forwardRef ref → 自家 radio-group.stories.tsx view demo 傳的 aria-label 都靜默失效。\n // 抽出 Radix 專屬 non-DOM props,其餘 DOM props 於兩分支 spread 轉發(與 Checkbox/Switch 同修);\n // edit 主路徑不受影響(Root 仍 spread 完整 props)。\n const {\n onValueChange: _onValueChange,\n disabled: _disabled,\n required: _required,\n name: _name,\n orientation: _orientation,\n dir: _dir,\n loop: _loop,\n asChild: _asChild,\n children: _children,\n ...restDomProps\n } = props as RadioGroupProps & { asChild?: boolean }\n\n if (resolvedMode === 'view') {\n const selectedValue = (value ?? defaultValue) as string \| undefined\n if (!selectedValue) {\n return <div {...restDomProps} ref={ref as React.Ref<HTMLDivElement>} role=\"group\" className={cn('grid', className)}><span className={fieldEmptyColorClass(resolvedMode)}>{emptyDisplay}</span></div>\n }\n const selectedLabel = findSelectedRadioLabel(props.children, selectedValue)\n return (\n <div {...restDomProps} ref={ref as React.Ref<HTMLDivElement>} role=\"group\" className={cn('grid', className)}>\n <span className=\"text-foreground\">{selectedLabel ?? selectedValue}</span>\n </div>\n )\n }\n\n // ── mode='readonly' in Field(2026-06-12 user 拍板,與 Checkbox/Switch 灰框模型一致)──\n // Field 內 readonly 單選 = fieldWrapperStyles readonly 灰框 + 選中項 label 文字\n // (= Select readonly 同款呈現:同為「單選資料」,鎖定時呈現一致)。\n // standalone readonly(無 Field)維持原樣鎖互動(ReadonlyContext 路徑)。\n if (resolvedMode === 'readonly' && fieldCtx?.hasFieldWrapper === true) {\n const selectedValue = (value ?? defaultValue) as string \| undefined\n const selectedLabel = selectedValue ? findSelectedRadioLabel(props.children, selectedValue) : null\n const boxSize = resolvedBoxSize\n return (\n <div\n {...restDomProps}\n ref={ref as React.Ref<HTMLDivElement>}\n role=\"radiogroup\"\n aria-readonly=\"true\"\n aria-labelledby={fieldCtx?.labelId}\n aria-invalid={fieldCtx?.invalid \|\| undefined}\n data-readonly=\"true\"\n tabIndex={0}\n className={cn(\n fieldWrapperStyles({ size: boxSize, mode: 'readonly', variant: 'default' }),\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n className,\n )}\n >\n {selectedValue\n ? <span className=\"text-foreground\">{selectedLabel ?? selectedValue}</span>\n : <span className={fieldEmptyColorClass(resolvedMode)}>{emptyDisplay}</span>}\n </div>\n )\n }\n\n // mode='disabled' → Radix Root disabled(原生 propagate 給所有 item);\n // mode='readonly' → context 傳 readOnly 給 items(item 渲染為 data-[readonly] 鎖互動 + aria-readonly)。\n return (\n <RadioGroupReadonlyContext.Provider value={resolvedMode === 'readonly'}>\n <RadioGroupDisabledContext.Provider value={resolvedMode === 'disabled'}>\n <RadioGroupPrimitive.Root\n className={cn(\"grid\", className)}\n value={value}\n defaultValue={defaultValue}\n // Field 內:role=\"radiogroup\" 的 <div> 無法被 <label for> 命名 → 自讀 fieldCtx 接\n // aria-labelledby / aria-invalid / aria-describedby(field-context.ts「下游 control 需自讀\n // labelId」;對齊 slider.tsx / Rating / TimePicker 的 fieldLabelId 接線 + 上方 readonly-in-Field 分支)。\n // standalone(無 Field)時皆 undefined,consumer 的 {...props} aria- 照舊生效(置於 spread 前故可被覆蓋)。\n aria-labelledby={fieldCtx?.labelId}\n aria-invalid={fieldCtx?.invalid \|\| undefined}\n aria-describedby={fieldCtx?.descriptionId}\n // a11y(2026-07-14 dim-10):readonly 語意放 radiogroup(aria-readonly 合法 role;\n // 對齊上方 readonly-in-Field 分支 L133)。item(role=radio)不帶 aria-readonly —\n // axe 實證 radio 不允許該屬性,item 靠 data-readonly + tabIndex + click guard 鎖互動。\n aria-readonly={resolvedMode === 'readonly' \|\| undefined}\n {...props}\n disabled={resolvedMode === 'disabled'}\n ref={ref}\n />\n </RadioGroupDisabledContext.Provider>\n </RadioGroupReadonlyContext.Provider>\n )\n})\nRadioGroup.displayName = 'RadioGroup'\n// Field layout 宣告：RadioGroup 是 block primitive（多項堆疊），\n// 進入 <Field> 時 control area 自動切 items-start（block 分支不設 min-h、不加 padding-top,\n// 高度由內容決定;額外加 paddingTop 會 double padding — field.tsx block control area SSOT）。\n// Convention 詳見 components/Field/field.spec.md「Control area:Inline vs Block」段落。\n;(RadioGroup as unknown as { fieldLayout: 'block' }).fieldLayout = 'block'\n\n// ── RadioGroupItem Variants ─────────────────────────────────────────────────\n// 與 Checkbox 完全對齊：sm/md=16px, lg=20px。差異只有形狀（rounded-full）和指示器（filled dot）。\n\nconst radioItemVariants = cva(\n [\n 'grid place-content-center shrink-0 rounded-full',\n 'border border-border bg-surface',\n 'transition-colors duration-150',\n 'hover:border-border-hover',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\n 'data-[state=checked]:border-primary data-[state=checked]:text-primary',\n 'data-[state=checked]:hover:border-primary-hover data-[state=checked]:hover:text-primary-hover',\n 'disabled:cursor-not-allowed disabled:bg-disabled disabled:border-transparent disabled:hover:border-transparent',\n 'disabled:data-[state=checked]:bg-disabled disabled:data-[state=checked]:border-transparent disabled:data-[state=checked]:text-fg-disabled',\n // readOnly：鎖定互動但維持 checked/unchecked 視覺\n 'data-[readonly=true]:pointer-events-none data-[readonly=true]:cursor-default',\n 'data-[readonly=true]:hover:border-border',\n ],\n {\n variants: {\n size: {\n sm: 'h-4 w-4',\n md: 'h-4 w-4',\n lg: 'h-5 w-5',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n)\n\n// ── Dot Size ────────────────────────────────────────────────────────────────\nconst dotSize: Record<string, number> = { sm: 8, md: 8, lg: 10 }\n\n// ── Types ───────────────────────────────────────────────────────────────────\n\ntype RadioItemPrimitiveProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n\nexport interface RadioGroupItemProps\n // asChild / children Omit(2026-07-18 決策2):item 固定渲染 Indicator dot(<Circle/>)—\n // children 被固定 Indicator 靜默覆蓋,asChild 破壞 radio 結構。對齊 Checkbox 收窄。label 走 `label` prop。\n extends Omit<RadioItemPrimitiveProps, 'asChild' \| 'children'>,\n VariantProps<typeof radioItemVariants> {\n /*\n Inline label。提供時 RadioGroupItem 自動透過 SelectionItem 包裝，\n * 套用 codified 樣式（text-body / text-foreground / disabled 色）。\n * 在 <Field> context 內時此 prop 仍然生效（Radio 的 label 是每個 item\n * 各自的，不是整組 Field 的；FieldLabel 是 RadioGroup 整體的 label）。\n /\n label?: React.ReactNode\n /\n Inline description（secondary 文字）。須與 label 搭配使用。\n * 套用 text-body / text-fg-secondary 樣式。\n /\n description?: React.ReactNode\n /* 可選左側 icon(label 前)— 2026-06-12 M30 修:轉發 SelectionItem 既有 canonical 槽(selection-item.tsx jsDoc SSOT;與 avatar 互斥)/\n icon?: LucideIcon\n /* 可選左側 avatar(label 前)— 同上 /\n avatar?: AvatarData\n /\n readonly 模式：鎖定互動但維持 checked/unchecked 視覺正確。\n * 通常整個 RadioGroup 一起設 readonly（由 parent RadioGroup 的 disabled\n * 或 readonly 行為決定），個別 item 也可設。\n */\n readOnly?: boolean\n}\n\n// ── RadioGroupItem ──────────────────────────────────────────────────────────\n\nconst RadioGroupItem = React.forwardRef<\n React.ElementRef<typeof RadioGroupPrimitive.Item>,\n RadioGroupItemProps\n>(\n (\n {\n className,\n size,\n label,\n icon,\n avatar,\n description,\n readOnly = false,\n disabled,\n id: idProp,\n ...props\n },\n ref\n ) => {\n const sizeKey = size ?? 'md'\n const dotPx = dotSize[sizeKey]\n\n // 注意:RadioGroup mode='view' 的純文字渲染由 RadioGroup 本體 walk-children 處理\n // (見上方 RadioGroup forwardRef 的 mode === 'view' 分支),RadioGroupItem 在 view\n // mode 下不會被獨立 render,故此處無 view 分支。\n\n // 注意：Radio 的 label 語意與 Checkbox/Switch 不同——\n // Checkbox/Switch 的 label 就是該 control 的唯一 label（被 Field context 接管），\n // RadioGroupItem 的 label 是「該選項」的 label（每 item 各自擁有），\n // FieldLabel 則是整個 RadioGroup 的 label。\n // 因此 RadioGroupItem 的 label 不因 Field context 被忽略。\n // group-level disabled(standalone <RadioGroup disabled>)也要降 label/description 色 —— Radix Root\n // disabled 只 propagate 給 radio 圈,label 色由 SelectionItem disabled 決定,故讀 RadioGroupDisabledContext 補上。\n const groupDisabled = React.useContext(RadioGroupDisabledContext)\n const resolvedDisabled = useResolvedFieldDisabled(disabled) \|\| groupDisabled\n // group-level readonly(RadioGroup mode='readonly')或 item-level readOnly,任一 true 即鎖互動。\n const groupReadonly = React.useContext(RadioGroupReadonlyContext)\n const effectiveReadonly = readOnly \|\| groupReadonly\n\n const generatedId = React.useId()\n const inputId = idProp ?? generatedId\n\n const rootEl = (\n <RadioGroupPrimitive.Item\n id={inputId}\n ref={ref}\n disabled={resolvedDisabled}\n // a11y(2026-07-14 dim-10):item(role=radio)不帶 aria-readonly — axe 實證 radio 不允許\n // 該屬性(readonly 語意由 Root role=radiogroup 宣告,見上方 L167-170)。item 靠\n // data-readonly + tabIndex + click guard 鎖互動。\n data-readonly={effectiveReadonly \|\| undefined}\n tabIndex={effectiveReadonly ? -1 : undefined}\n className={cn(radioItemVariants({ size }), className)}\n {...props}\n // 2026-07-05 D4 修:readOnly 鎖互動補 label 繞道 — <label htmlFor> 的 synthetic click\n // 不是 pointer event,cva pointer-events-none 攔不到,點 label 文字仍選中。\n // preventDefault 讓 Radix composeEventHandlers(checkForDefaultPrevented)跳過內部 onCheck;\n // 必列在 {...props} 之後才不被 consumer onClick 覆蓋(與 Checkbox/Switch 同修)。\n // 同時攔 Radix roving-focus 的 arrow-key onFocus → click() 路徑(同為 click event)。\n onClick={(event) => {\n if (effectiveReadonly) {\n event.preventDefault()\n return\n }\n props.onClick?.(event)\n }}\n >\n <RadioGroupPrimitive.Indicator className=\"grid place-content-center\">\n <Circle\n style={{ width: dotPx, height: dotPx }}\n className=\"fill-current text-current\"\n />\n </RadioGroupPrimitive.Indicator>\n </RadioGroupPrimitive.Item>\n )\n\n // 無 label → 只渲染 radio 本體\n if (label == null) return rootEl\n\n // 有 label → 透過 SelectionItem 包裝，與 Checkbox 一致（disabled 已於上方 useResolvedFieldDisabled 解析）\n return (\n <SelectionItem\n control={rootEl}\n label={label}\n description={description}\n icon={icon}\n avatar={avatar}\n htmlFor={inputId}\n disabled={resolvedDisabled}\n size={sizeKey}\n />\n )\n }\n)\nRadioGroupItem.displayName = 'RadioGroupItem'\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 radioGroupMeta = {\n component: 'RadioGroup',\n family: null, // self-contained primitive(對齊 spec frontmatter self-contained + body L31;非 Family 4 — field-controls.spec.md 成員名單不含 RadioGroup)\n variants: {\n\n },\n sizes: {\n // iconSize = 渲染指示器尺寸(對齊 checkbox/switch meta 慣例:checkbox iconSize=真 Check glyph 12/12/16)。\n // Radio 指示器是 filled dot 非 glyph,真值 = 上方 `const dotSize` map 8/8/10;\n // 控件框 16/16/20 與 Checkbox 對齊但那是 box 非「指示器」,不入此鍵(避免 metadata 語意 drift)。\n sm: { fieldHeight: 28, iconSize: 8, typography: 'body' },\n md: { fieldHeight: 32, iconSize: 8, typography: 'body' },\n lg: { fieldHeight: 36, iconSize: 10, typography: 'body-lg' },\n },\n // 2026-07-04 修 stale meta:移除 'active' — radioItemVariants cva 無 active-state 樣式,\n // Radix radio 也無 data-state=active(對照 checkboxMeta 正確不含 active)\n // 'checked' = 選定持續態(card 式 = border+text primary;2026-07-07 meta 詞彙統一補列)\n states: ['default', 'hover', 'checked', 'focus-visible', 'disabled'],\n tokens: {\n bg: ['bg-disabled', 'bg-surface'],\n fg: ['text-fg-disabled', 'text-fg-secondary', 'text-foreground', 'text-primary'],\n ring: ['ring-ring'],\n },\n defaultSize: 'md',\n} as const\n\nexport { RadioGroup, RadioGroupItem, radioItemVariants }\n"],"names":[],"mappings":";;;;;;;;;AAgDA,MAAM,4BAA4B,MAAM,cAAc,KAAK;AAK3D,MAAM,4BAA4B,MAAM,cAAc,KAAK;AAG3D,SAAS,uBAAuB,UAA2B,eAAoD;AAC7G,MAAI,gBAAiC;AACrC,QAAM,SAAS,QAAQ,UAAU,CAAC,UAAU;AAC1C,QAAI,CAAC,MAAM,eAAe,KAAK,EAAG;AAClC,UAAM,SAAS,MAAM;AAErB,QAAI,OAAO,UAAU,iBAAiB,OAAO,UAAU,QAAW;AAChE,sBAAgB,OAAO,SAAS;AAChC;AAAA,IACF;AAEA,UAAM,UAAU,OAAO;AACvB,QAAI,MAAM,eAAe,OAAO,GAAG;AACjC,YAAM,eAAgB,QAAQ,MAA8B;AAC5D,UAAI,iBAAiB,eAAe;AAClC,wBAAgB,OAAO,SAAS;AAAA,MAClC;AAAA,IACF;AAAA,EACF,CAAC;AACD,SAAO;AACT;AAEA,MAAM,aAAa,MAAM,WAGvB,CAAC,EAAE,WAAW,MAAM,SAAS,SAAS,OAAO,cAAc,GAAG,MAAA,GAAS,QAAQ;AAE/E,QAAM,eAAe,qBAAqB,EAAE,MAAM,UAAW,MAAiC,UAAU;AACxG,QAAM,eAAe,qBAAA;AACrB,QAAM,WAAW,gBAAA;AAEjB,QAAM,kBAAkB,qBAAqB,QAAW,IAAI;AAS5D,QAAM;AAAA,IACJ,eAAe;AAAA,IACf,UAAU;AAAA,IACV,UAAU;AAAA,IACV,MAAM;AAAA,IACN,aAAa;AAAA,IACb,KAAK;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD;AAEJ,MAAI,iBAAiB,QAAQ;AAC3B,UAAM,gBAAiB,SAAS;AAChC,QAAI,CAAC,eAAe;AAClB,iCAAQ,OAAA,EAAK,GAAG,cAAc,KAAuC,MAAK,SAAQ,WAAW,GAAG,QAAQ,SAAS,GAAG,8BAAC,QAAA,EAAK,WAAW,qBAAqB,YAAY,GAAI,wBAAa,GAAO;AAAA,IAChM;AACA,UAAM,gBAAgB,uBAAuB,MAAM,UAAU,aAAa;AAC1E,+BACG,OAAA,EAAK,GAAG,cAAc,KAAuC,MAAK,SAAQ,WAAW,GAAG,QAAQ,SAAS,GACxG,UAAA,oBAAC,QAAA,EAAK,WAAU,mBAAmB,UAAA,iBAAiB,eAAc,GACpE;AAAA,EAEJ;AAMA,MAAI,iBAAiB,eAAc,qCAAU,qBAAoB,MAAM;AACrE,UAAM,gBAAiB,SAAS;AAChC,UAAM,gBAAgB,gBAAgB,uBAAuB,MAAM,UAAU,aAAa,IAAI;AAC9F,UAAM,UAAU;AAChB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,MAAK;AAAA,QACL,iBAAc;AAAA,QACd,mBAAiB,qCAAU;AAAA,QAC3B,iBAAc,qCAAU,YAAW;AAAA,QACnC,iBAAc;AAAA,QACd,UAAU;AAAA,QACV,WAAW;AAAA,UACT,mBAAmB,EAAE,MAAM,SAAS,MAAM,YAAY,SAAS,WAAW;AAAA,UAC1E;AAAA,UACA;AAAA,QAAA;AAAA,QAGD,UAAA,gBACG,oBAAC,QAAA,EAAK,WAAU,mBAAmB,UAAA,iBAAiB,cAAA,CAAc,IAClE,oBAAC,QAAA,EAAK,WAAW,qBAAqB,YAAY,GAAI,UAAA,aAAA,CAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EAG7E;AAIA,SACE,oBAAC,0BAA0B,UAA1B,EAAmC,OAAO,iBAAiB,YAC1D,UAAA,oBAAC,0BAA0B,UAA1B,EAAmC,OAAO,iBAAiB,YAC1D,UAAA;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACC,WAAW,GAAG,QAAQ,SAAS;AAAA,MAC/B;AAAA,MACA;AAAA,MAKA,mBAAiB,qCAAU;AAAA,MAC3B,iBAAc,qCAAU,YAAW;AAAA,MACnC,oBAAkB,qCAAU;AAAA,MAI5B,iBAAe,iBAAiB,cAAc;AAAA,MAC7C,GAAG;AAAA,MACJ,UAAU,iBAAiB;AAAA,MAC3B;AAAA,IAAA;AAAA,EAAA,GAEJ,EAAA,CACF;AAEJ,CAAC;AACD,WAAW,cAAc;AAKvB,WAAmD,cAAc;AAKnE,MAAM,oBAAoB;AAAA,EACxB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAGA,MAAM,UAAkC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAA;AAqC5D,MAAM,iBAAiB,MAAM;AAAA,EAI3B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,IAAI;AAAA,IACJ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,UAAU,QAAQ;AACxB,UAAM,QAAQ,QAAQ,OAAO;AAa7B,UAAM,gBAAgB,MAAM,WAAW,yBAAyB;AAChE,UAAM,mBAAmB,yBAAyB,QAAQ,KAAK;AAE/D,UAAM,gBAAgB,MAAM,WAAW,yBAAyB;AAChE,UAAM,oBAAoB,YAAY;AAEtC,UAAM,cAAc,MAAM,MAAA;AAC1B,UAAM,UAAU,UAAU;AAE1B,UAAM,SACJ;AAAA,MAAC,oBAAoB;AAAA,MAApB;AAAA,QACC,IAAI;AAAA,QACJ;AAAA,QACA,UAAU;AAAA,QAIV,iBAAe,qBAAqB;AAAA,QACpC,UAAU,oBAAoB,KAAK;AAAA,QACnC,WAAW,GAAG,kBAAkB,EAAE,KAAA,CAAM,GAAG,SAAS;AAAA,QACnD,GAAG;AAAA,QAMJ,SAAS,CAAC,UAAU;;AAClB,cAAI,mBAAmB;AACrB,kBAAM,eAAA;AACN;AAAA,UACF;AACA,sBAAM,YAAN,+BAAgB;AAAA,QAClB;AAAA,QAEA,UAAA,oBAAC,oBAAoB,WAApB,EAA8B,WAAU,6BACvC,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,OAAO,OAAO,QAAQ,MAAA;AAAA,YAC/B,WAAU;AAAA,UAAA;AAAA,QAAA,EACZ,CACF;AAAA,MAAA;AAAA,IAAA;AAKJ,QAAI,SAAS,KAAM,QAAO;AAG1B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT,UAAU;AAAA,QACV,MAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AACF;AACA,eAAe,cAAc;AAItB,MAAM,iBAAiB;AAAA,EAC5B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI,EAAE,aAAa,IAAI,UAAU,GAAG,YAAY,OAAA;AAAA,IAChD,IAAI,EAAE,aAAa,IAAI,UAAU,GAAG,YAAY,OAAA;AAAA,IAChD,IAAI,EAAE,aAAa,IAAI,UAAU,IAAI,YAAY,UAAA;AAAA,EAAU;AAAA;AAAA;AAAA;AAAA,EAK7D,QAAQ,CAAC,WAAW,SAAS,WAAW,iBAAiB,UAAU;AAAA,EACnE,QAAQ;AAAA,IACN,IAAI,CAAC,eAAe,YAAY;AAAA,IAChC,IAAI,CAAC,oBAAoB,qBAAqB,mBAAmB,cAAc;AAAA,IAC/E,MAAM,CAAC,WAAW;AAAA,EAAA;AAAA,EAEpB,aAAa;AACf;"}

package/dist/components/Rating/rating.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"rating.d.ts","sourceRoot":"","sources":["../../../src/components/Rating/rating.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,cAAc,CAAA;AAsDpD,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACzF,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,eAAe;IACf,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,gEAAgE;IAChE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAChC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oCAAoC;IACpC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAGD,QAAA,MAAM,MAAM,~~oFA4HX~~,CAAA;AA6ED,eAAO,MAAM,UAAU;;;;;;;;;;;CAeb,CAAA;AAEV,OAAO,EAAE,MAAM,EAAE,CAAA"}
1	+ {"version":3,"file":"rating.d.ts","sourceRoot":"","sources":["../../../src/components/Rating/rating.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,cAAc,CAAA;AAsDpD,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACzF,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,eAAe;IACf,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,gEAAgE;IAChE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAChC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oCAAoC;IACpC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAGD,QAAA,MAAM,MAAM,oFAgIX,CAAA;AA6ED,eAAO,MAAM,UAAU;;;;;;;;;;;CAeb,CAAA;AAEV,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/Rating/rating.js CHANGED Viewed

@@ -25,6 +25,10 @@ const Rating = React.forwardRef(
     className,
     ...props
   }, ref) => {
+    var _a;
+    if (typeof process !== "undefined" && ((_a = process.env) == null ? void 0 : _a.NODE_ENV) !== "production" && (max > 7 || max < 1 || Math.round(max) !== max)) {
+      console.warn(`[DS] Rating max ${max} 超出 canonical 範圍 1-7(或非整數)。建議 ≤7 顆星(對齊世界級 review-stars)。`);
+    }
     const fieldCtx = useFieldContext();
     const disabled = useResolvedFieldDisabled(disabledProp);
     const resolvedMode = useResolvedFieldMode({ mode: void 0, disabled, readOnly: readOnlyProp });

package/dist/components/Rating/rating.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"rating.js","sources":["../../../src/components/Rating/rating.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport { Star, type LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { useFieldContext, useResolvedFieldSize, useResolvedFieldDisabled, useResolvedFieldMode } from '@/design-system/components/Field/field-context'\n\n/*\n Rating — 星星評分元件\n \n 世界級對照:Ant Design `<Rate>`、Material MUI `<Rating>`。\n * shadcn 核心沒有 Rating,本元件自建。\n \n ── 使用情境 ──\n * - review / feedback:商品評分 / 服務評分(可編輯 + 唯讀兩種)\n * - display:已提交評分的唯讀呈現(商品清單星等)\n \n ── 視覺 ──\n * 填色用 `var(--warning)`(yellow-6,世界級黃星 convention;與 warning 語意共用色相\n * 但語境不同,評分 = UX convention color 非 status)。\n * 空色用 `var(--divider)`(neutral-4 借 divider semantic alias;灰色;與 disabled/empty 同級)。\n \n ── 互動 ──\n * interactive(預設):hover 預覽、click 設值、keyboard Left/Right 改值\n * readOnly:純顯示,不響應 hover / click\n \n ── 精度 ──\n * precision=\"full\"(預設) — 整星(1, 2, 3, 4, 5)\n * precision=\"half\" — 半星(0.5, 1, 1.5, 2, 2.5, ..., 5)\n /\n\n// ── Icon size canonical(2026-04-21 AR48 修正)──\n//\n// Rating 的「一顆星」視覺重量接近 Avatar / identity icon,不是純 inline icon。\n// 理由:\n// - 星星是 filled shape(解析整個 icon 是重量感的一部分),不像純 outline icon 靠 stroke\n// - Field 內 Rating 跟 Avatar / Tag 並排時視覺份量要對齊,否則 row height 一致但 icon 看起來比重量不對\n// - 世界級對照:Ant Rate in Form = 20px、Material MUI Rating fontSize=inherit 預設約 24、Airbnb 評分星 24px\n//\n// 因此 Field 內 Rating icon size 對齊 item-anatomy inline Avatar sizes:sm=20 / md=24 / lg=24。\n// 非 icon tier(16/16/20)——star 不是次要 affordance icon,它是主要資料視覺。\n//\n// Container 高度仍對齊 `--field-height-`(sm=28 / md=32 / lg=36),讓 Rating 可與其他\n// field-height family 元件(Input / Select)並排時 row height 對齊。\n//\n// ── 使用情境 ──\n// - Standalone(獨立展示評分,如商品卡 / 評論)→ 預設 `xs`(container 24,icon 20,\n// 對齊 Avatar sm 20px;iOS HIG / Airbnb 商品卡星星 20-24px)\n// - Field 內(表單評分欄位)→ 跟 Field 尺寸對齊(sm=20 / md=24 / lg=24,default md)\nconst SIZE_PX = { xs: 20, sm: 20, md: 24, lg: 24 } as const\nconst CONTAINER_HEIGHT: Record<'xs' \| 'sm' \| 'md' \| 'lg', string> = {\n xs: 'h-field-xs',\n sm: 'h-field-sm',\n md: 'h-field-md',\n lg: 'h-field-lg',\n}\n\nexport interface RatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n /** 當前評分(0 ~ max) /\n value?: number\n /* 預設值(uncontrolled) /\n defaultValue?: number\n /* 評分改變 callback /\n onChange?: (value: number) => void\n /* 滿分(預設 5) /\n max?: number\n /* 尺寸。standalone 建議 xs(24px);Field 內跟隨 Field size 傳 sm/md/lg /\n size?: 'xs' \| 'sm' \| 'md' \| 'lg'\n /* 精度:full = 整星,half = 半星 /\n precision?: 'full' \| 'half'\n /* 唯讀(無 hover / click 響應) /\n readOnly?: boolean\n /* 完全停用 /\n disabled?: boolean\n /\n Loading 狀態 — 正在取得既有評分 / 正在儲存。\n * 視覺同 disabled(composite 整塊 opacity-disabled)但 semantic 不同:\n * loading = 暫時性等待(aria-busy),disabled = 永久業務規則(aria-disabled)。\n * 詳 rating.spec.md「Interactive vs ReadOnly」+「Loading canonical」\n /\n loading?: boolean\n /* 自訂 icon(預設 Star);傳 LucideIcon /\n icon?: LucideIcon\n /\n a11y label。readOnly(role=img)時必填。\n * interactive(role=slider)時:在 Field 內免填(自動 aria-labelledby 指向 FieldLabel);\n * standalone(無 Field)時必填——role=slider 依 WAI-ARIA APG 必有 accessible name。\n /\n 'aria-label'?: string\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst Rating = React.forwardRef<HTMLDivElement, RatingProps>(\n (\n {\n value,\n defaultValue = 0,\n onChange,\n max = 5,\n size: sizeProp,\n precision = 'full',\n readOnly: readOnlyProp = false,\n disabled: disabledProp,\n loading = false,\n icon: Icon = Star,\n className,\n ...props\n },\n ref,\n ) => {\n // Context-aware default size(AR31 canonical):\n // - Field 內(有 FieldContext.size) → 跟 Field size 對齊(sm / md / lg)\n // - Standalone(無 Field context) → default `xs`(24px,對齊 Avatar / Tag sm / iOS HIG standalone)\n // consumer 可傳 size 顯式 override。世界級對照:Material Rating standalone 24dp、\n // Ant Rate in Form 跟 Form.itemSize,standalone 24px。\n const fieldCtx = useFieldContext() // 保留:aria-labelledby 用 fieldCtx.labelId\n // 2026-06-08 SSOT:<Field disabled> cascade(原 isInteractive 只看 local disabled prop)\n const disabled = useResolvedFieldDisabled(disabledProp)\n // <Field mode=\"readonly\"> cascade(2026-06-12 補):Rating 的 readonly 呈現 = 星星本身\n // (星星即值語言,role=img,全業界 review-stars canonical)——不包灰框,只鎖互動。\n const resolvedMode = useResolvedFieldMode({ mode: undefined, disabled, readOnly: readOnlyProp })\n const readOnly = readOnlyProp \|\| resolvedMode === 'readonly'\n const size = useResolvedFieldSize<'xs' \| 'sm' \| 'md' \| 'lg'>(sizeProp, 'xs') // SSOT:統一 size resolution(Rating default 'xs')\n const [internalValue, setInternalValue] = React.useState(defaultValue)\n const [hoverValue, setHoverValue] = React.useState<number \| null>(null)\n const isControlled = value !== undefined\n const currentValue = isControlled ? value : internalValue\n const displayValue = hoverValue ?? currentValue\n const iconPx = SIZE_PX[size]\n const isInteractive = !readOnly && !disabled && !loading\n\n const setValue = (v: number) => {\n if (!isControlled) setInternalValue(v)\n onChange?.(v)\n }\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (!isInteractive) return\n const step = precision === 'half' ? 0.5 : 1\n // Full ARIA slider pattern(WAI-ARIA):Arrow / Home / End 支援 — D4 UX audit 2026-04-22\n if (e.key === 'ArrowRight' \|\| e.key === 'ArrowUp') {\n e.preventDefault()\n setValue(Math.min(max, currentValue + step))\n } else if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowDown') {\n e.preventDefault()\n setValue(Math.max(0, currentValue - step))\n } else if (e.key === 'Home') {\n e.preventDefault()\n setValue(0)\n } else if (e.key === 'End') {\n e.preventDefault()\n setValue(max)\n }\n }\n\n return (\n <div\n ref={ref}\n role={isInteractive ? 'slider' : 'img'}\n // a11y(#30):role=slider 必有 accessible name(WAI-ARIA APG slider pattern)。\n // Field 內 → 自動 aria-labelledby 指向 FieldLabel 的 id(fieldCtx.labelId,免填);\n // Standalone → 仍需 consumer 傳 aria-label。對齊 TimePicker / DatePicker 同 canonical\n // (time-picker.tsx:313 / date-picker.tsx:514:aria-labelledby={fieldCtx?.labelId})。\n // 置於 {...props} 前,consumer 顯式傳的 aria-labelledby 仍可覆寫。\n aria-labelledby={fieldCtx?.labelId} // 2026-06-12 修:readonly/disabled(role=img)也需 accessible name,labelledby 對 img 合法\n aria-valuenow={isInteractive ? currentValue : undefined}\n aria-valuemin={isInteractive ? 0 : undefined}\n aria-valuemax={isInteractive ? max : undefined}\n aria-valuetext={isInteractive ? `${currentValue} of ${max} stars` : undefined}\n aria-disabled={disabled \|\| undefined}\n // a11y: 刻意不設 aria-readonly — readOnly 時 role=img(axe aria-allowed-attr 禁 img 用 aria-readonly,2026-04-25);\n // interactive 時 role=slider 但必非 readOnly(isInteractive = !readOnly)。兩 state 皆不該有此屬性,故省略。\n aria-busy={loading \|\| undefined}\n tabIndex={isInteractive ? 0 : undefined}\n onKeyDown={handleKeyDown}\n onMouseLeave={() => setHoverValue(null)}\n className={cn(\n 'inline-flex items-center gap-1',\n // Container 對齊 field-height family,讓 Rating 可與 Input/Select/Button 並排 row-align\n CONTAINER_HEIGHT[size],\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-md',\n // disabled 跟 loading 視覺相同(composite uniform dim),semantic 由 aria-disabled / aria-busy 區分\n (disabled \|\| loading) && 'opacity-disabled pointer-events-none',\n className,\n )}\n {...props}\n >\n {Array.from({ length: max }, (_, i) => {\n const starValue = i + 1\n const fillRatio = Math.max(0, Math.min(1, displayValue - i)) // 0..1\n const isHalf = precision === 'half' && fillRatio > 0 && fillRatio < 1\n\n return (\n <StarIcon\n key={i}\n Icon={Icon}\n sizePx={iconPx}\n fillRatio={fillRatio}\n isHalf={isHalf}\n interactive={isInteractive}\n onHover={(halfFirst) => {\n if (!isInteractive) return\n const v = precision === 'half' && halfFirst ? starValue - 0.5 : starValue\n setHoverValue(v)\n }}\n onClick={(halfFirst) => {\n if (!isInteractive) return\n const v = precision === 'half' && halfFirst ? starValue - 0.5 : starValue\n setValue(v)\n }}\n />\n )\n })}\n </div>\n )\n },\n)\nRating.displayName = 'Rating'\n\n// ── StarIcon: 單顆星 + half-precision overlay ─────────────────────────────\n\ninterface StarIconProps {\n Icon: LucideIcon\n sizePx: number\n fillRatio: number // 0..1\n isHalf: boolean\n interactive: boolean\n onHover: (halfFirst: boolean) => void\n onClick: (halfFirst: boolean) => void\n}\n\nconst FILL_FILLED = 'var(--warning)' // yellow-6 — 黃星 convention\nconst FILL_EMPTY = 'var(--divider)' // 灰色空星(neutral-4 借 divider semantic alias,user 2026-05-09 拍板;對齊 Material rgba(0,0,0,0.26) muted-fill canonical)\n\nfunction StarIcon({ Icon, sizePx, fillRatio, isHalf, interactive, onHover, onClick }: StarIconProps) {\n // a11y(2026-04-25 axe nested-interactive fix):inner 點擊目標改 <span>(非 interactive\n // element),不會跟外層 role='slider' 形成 nested-interactive 違規。鍵盤控制統一在外層\n // slider 的 arrow keys,inner 只處理 mouse click 定位。Ant Rate / Material MUI 同模式。\n if (!isHalf) {\n // Full: 一整顆 fill(filled 或 empty)\n const fill = fillRatio >= 1 ? FILL_FILLED : FILL_EMPTY\n return (\n <span\n role=\"presentation\"\n onMouseEnter={interactive ? () => onHover(false) : undefined}\n onClick={interactive ? () => onClick(false) : undefined}\n className={cn(\n 'inline-flex',\n interactive ? 'cursor-pointer' : 'cursor-default',\n )}\n style={{ color: fill }}\n aria-hidden\n >\n {/ stroke=\"none\" 移除 Lucide Star 預設的 outline stroke(lucide defaultAttributes\n strokeWidth=2 + stroke=currentColor 會畫輪廓),讓星星是純 fill-only 的 shape——\n fill 與 outline 同色視覺上仍有亮度差。\n 世界級對照:Ant Rate / Material MUI Rating 皆純 fill,無 outline stroke。/}\n <Icon size={sizePx} fill={fill} stroke=\"none\" className=\"shrink-0\" />\n </span>\n )\n }\n\n // Half: 兩個重疊 icon,左半 filled / 右半 empty + 兩個 hover zone 切半星\n return (\n <span aria-hidden className=\"relative inline-flex\" style={{ width: sizePx, height: sizePx }}>\n <Icon size={sizePx} fill={FILL_EMPTY} stroke=\"none\" aria-hidden className=\"absolute inset-0\" style={{ color: FILL_EMPTY }} />\n <span className=\"absolute inset-0 overflow-hidden\" style={{ width: sizePx fillRatio }}>\n <Icon size={sizePx} fill={FILL_FILLED} stroke=\"none\" aria-hidden style={{ color: FILL_FILLED }} />\n </span>\n {interactive && (\n <>\n <span\n role=\"presentation\"\n onMouseEnter={() => onHover(true)}\n onClick={() => onClick(true)}\n className=\"absolute inset-y-0 left-0 w-1/2 cursor-pointer\"\n aria-hidden\n />\n <span\n role=\"presentation\"\n onMouseEnter={() => onHover(false)}\n onClick={() => onClick(false)}\n className=\"absolute inset-y-0 right-0 w-1/2 cursor-pointer\"\n aria-hidden\n />\n </>\n )}\n </span>\n )\n}\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const ratingMeta = {\n component: 'Rating',\n family: null, // self-contained primitive(對齊 spec frontmatter self-contained + body L24;非 Family 4)\n variants: {\n\n },\n sizes: {\n\n },\n states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n tokens: {\n bg: ['bg-transparent'],\n fg: [],\n ring: ['ring-ring'],\n },\n} as const\n\nexport { Rating }\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"rating.js","sources":["../../../src/components/Rating/rating.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport { Star, type LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { useFieldContext, useResolvedFieldSize, useResolvedFieldDisabled, useResolvedFieldMode } from '@/design-system/components/Field/field-context'\n\n/*\n Rating — 星星評分元件\n \n 世界級對照:Ant Design `<Rate>`、Material MUI `<Rating>`。\n * shadcn 核心沒有 Rating,本元件自建。\n \n ── 使用情境 ──\n * - review / feedback:商品評分 / 服務評分(可編輯 + 唯讀兩種)\n * - view:已提交評分的唯讀呈現(商品清單星等)\n \n ── 視覺 ──\n * 填色用 `var(--warning)`(yellow-6,世界級黃星 convention;與 warning 語意共用色相\n * 但語境不同,評分 = UX convention color 非 status)。\n * 空色用 `var(--divider)`(neutral-4 借 divider semantic alias;灰色;與 disabled/empty 同級)。\n \n ── 互動 ──\n * interactive(預設):hover 預覽、click 設值、keyboard Left/Right 改值\n * readOnly:純顯示,不響應 hover / click\n \n ── 精度 ──\n * precision=\"full\"(預設) — 整星(1, 2, 3, 4, 5)\n * precision=\"half\" — 半星(0.5, 1, 1.5, 2, 2.5, ..., 5)\n /\n\n// ── Icon size canonical(2026-04-21 AR48 修正)──\n//\n// Rating 的「一顆星」視覺重量接近 Avatar / identity icon,不是純 inline icon。\n// 理由:\n// - 星星是 filled shape(解析整個 icon 是重量感的一部分),不像純 outline icon 靠 stroke\n// - Field 內 Rating 跟 Avatar / Tag 並排時視覺份量要對齊,否則 row height 一致但 icon 看起來比重量不對\n// - 世界級對照:Ant Rate in Form = 20px、Material MUI Rating fontSize=inherit 預設約 24、Airbnb 評分星 24px\n//\n// 因此 Field 內 Rating icon size 對齊 item-anatomy inline Avatar sizes:sm=20 / md=24 / lg=24。\n// 非 icon tier(16/16/20)——star 不是次要 affordance icon,它是主要資料視覺。\n//\n// Container 高度仍對齊 `--field-height-`(sm=28 / md=32 / lg=36),讓 Rating 可與其他\n// field-height family 元件(Input / Select)並排時 row height 對齊。\n//\n// ── 使用情境 ──\n// - Standalone(獨立展示評分,如商品卡 / 評論)→ 預設 `xs`(container 24,icon 20,\n// 對齊 Avatar sm 20px;iOS HIG / Airbnb 商品卡星星 20-24px)\n// - Field 內(表單評分欄位)→ 跟 Field 尺寸對齊(sm=20 / md=24 / lg=24,default md)\nconst SIZE_PX = { xs: 20, sm: 20, md: 24, lg: 24 } as const\nconst CONTAINER_HEIGHT: Record<'xs' \| 'sm' \| 'md' \| 'lg', string> = {\n xs: 'h-field-xs',\n sm: 'h-field-sm',\n md: 'h-field-md',\n lg: 'h-field-lg',\n}\n\nexport interface RatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n /** 當前評分(0 ~ max) /\n value?: number\n /* 預設值(uncontrolled) /\n defaultValue?: number\n /* 評分改變 callback /\n onChange?: (value: number) => void\n /* 滿分(預設 5) /\n max?: number\n /* 尺寸。standalone 建議 xs(24px);Field 內跟隨 Field size 傳 sm/md/lg /\n size?: 'xs' \| 'sm' \| 'md' \| 'lg'\n /* 精度:full = 整星,half = 半星 /\n precision?: 'full' \| 'half'\n /* 唯讀(無 hover / click 響應) /\n readOnly?: boolean\n /* 完全停用 /\n disabled?: boolean\n /\n Loading 狀態 — 正在取得既有評分 / 正在儲存。\n * 視覺同 disabled(composite 整塊 opacity-disabled)但 semantic 不同:\n * loading = 暫時性等待(aria-busy),disabled = 永久業務規則(aria-disabled)。\n * 詳 rating.spec.md「Interactive vs ReadOnly」+「Loading canonical」\n /\n loading?: boolean\n /* 自訂 icon(預設 Star);傳 LucideIcon /\n icon?: LucideIcon\n /\n a11y label。readOnly(role=img)時必填。\n * interactive(role=slider)時:在 Field 內免填(自動 aria-labelledby 指向 FieldLabel);\n * standalone(無 Field)時必填——role=slider 依 WAI-ARIA APG 必有 accessible name。\n /\n 'aria-label'?: string\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst Rating = React.forwardRef<HTMLDivElement, RatingProps>(\n (\n {\n value,\n defaultValue = 0,\n onChange,\n max = 5,\n size: sizeProp,\n precision = 'full',\n readOnly: readOnlyProp = false,\n disabled: disabledProp,\n loading = false,\n icon: Icon = Star,\n className,\n ...props\n },\n ref,\n ) => {\n // Context-aware default size(AR31 canonical):\n // - Field 內(有 FieldContext.size) → 跟 Field size 對齊(sm / md / lg)\n // - Standalone(無 Field context) → default `xs`(24px,對齊 Avatar / Tag sm / iOS HIG standalone)\n // consumer 可傳 size 顯式 override。世界級對照:Material Rating standalone 24dp、\n // Ant Rate in Form 跟 Form.itemSize,standalone 24px。\n // 2026-07-18 決策4:max dev-warn(spec canonical ≤7;維持 number 型別不收窄,對齊 MUI Rating.max)。\n if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production' && (max > 7 \|\| max < 1 \|\| Math.round(max) !== max)) {\n console.warn(`[DS] Rating max ${max} 超出 canonical 範圍 1-7(或非整數)。建議 ≤7 顆星(對齊世界級 review-stars)。`)\n }\n const fieldCtx = useFieldContext() // 保留:aria-labelledby 用 fieldCtx.labelId\n // 2026-06-08 SSOT:<Field disabled> cascade(原 isInteractive 只看 local disabled prop)\n const disabled = useResolvedFieldDisabled(disabledProp)\n // <Field mode=\"readonly\"> cascade(2026-06-12 補):Rating 的 readonly 呈現 = 星星本身\n // (星星即值語言,role=img,全業界 review-stars canonical)——不包灰框,只鎖互動。\n const resolvedMode = useResolvedFieldMode({ mode: undefined, disabled, readOnly: readOnlyProp })\n const readOnly = readOnlyProp \|\| resolvedMode === 'readonly'\n const size = useResolvedFieldSize<'xs' \| 'sm' \| 'md' \| 'lg'>(sizeProp, 'xs') // SSOT:統一 size resolution(Rating default 'xs')\n const [internalValue, setInternalValue] = React.useState(defaultValue)\n const [hoverValue, setHoverValue] = React.useState<number \| null>(null)\n const isControlled = value !== undefined\n const currentValue = isControlled ? value : internalValue\n const displayValue = hoverValue ?? currentValue\n const iconPx = SIZE_PX[size]\n const isInteractive = !readOnly && !disabled && !loading\n\n const setValue = (v: number) => {\n if (!isControlled) setInternalValue(v)\n onChange?.(v)\n }\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (!isInteractive) return\n const step = precision === 'half' ? 0.5 : 1\n // Full ARIA slider pattern(WAI-ARIA):Arrow / Home / End 支援 — D4 UX audit 2026-04-22\n if (e.key === 'ArrowRight' \|\| e.key === 'ArrowUp') {\n e.preventDefault()\n setValue(Math.min(max, currentValue + step))\n } else if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowDown') {\n e.preventDefault()\n setValue(Math.max(0, currentValue - step))\n } else if (e.key === 'Home') {\n e.preventDefault()\n setValue(0)\n } else if (e.key === 'End') {\n e.preventDefault()\n setValue(max)\n }\n }\n\n return (\n <div\n ref={ref}\n role={isInteractive ? 'slider' : 'img'}\n // a11y(#30):role=slider 必有 accessible name(WAI-ARIA APG slider pattern)。\n // Field 內 → 自動 aria-labelledby 指向 FieldLabel 的 id(fieldCtx.labelId,免填);\n // Standalone → 仍需 consumer 傳 aria-label。對齊 TimePicker / DatePicker 同 canonical\n // (time-picker.tsx:313 / date-picker.tsx:514:aria-labelledby={fieldCtx?.labelId})。\n // 置於 {...props} 前,consumer 顯式傳的 aria-labelledby 仍可覆寫。\n aria-labelledby={fieldCtx?.labelId} // 2026-06-12 修:readonly/disabled(role=img)也需 accessible name,labelledby 對 img 合法\n aria-valuenow={isInteractive ? currentValue : undefined}\n aria-valuemin={isInteractive ? 0 : undefined}\n aria-valuemax={isInteractive ? max : undefined}\n aria-valuetext={isInteractive ? `${currentValue} of ${max} stars` : undefined}\n aria-disabled={disabled \|\| undefined}\n // a11y: 刻意不設 aria-readonly — readOnly 時 role=img(axe aria-allowed-attr 禁 img 用 aria-readonly,2026-04-25);\n // interactive 時 role=slider 但必非 readOnly(isInteractive = !readOnly)。兩 state 皆不該有此屬性,故省略。\n aria-busy={loading \|\| undefined}\n tabIndex={isInteractive ? 0 : undefined}\n onKeyDown={handleKeyDown}\n onMouseLeave={() => setHoverValue(null)}\n className={cn(\n 'inline-flex items-center gap-1',\n // Container 對齊 field-height family,讓 Rating 可與 Input/Select/Button 並排 row-align\n CONTAINER_HEIGHT[size],\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-md',\n // disabled 跟 loading 視覺相同(composite uniform dim),semantic 由 aria-disabled / aria-busy 區分\n (disabled \|\| loading) && 'opacity-disabled pointer-events-none',\n className,\n )}\n {...props}\n >\n {Array.from({ length: max }, (_, i) => {\n const starValue = i + 1\n const fillRatio = Math.max(0, Math.min(1, displayValue - i)) // 0..1\n const isHalf = precision === 'half' && fillRatio > 0 && fillRatio < 1\n\n return (\n <StarIcon\n key={i}\n Icon={Icon}\n sizePx={iconPx}\n fillRatio={fillRatio}\n isHalf={isHalf}\n interactive={isInteractive}\n onHover={(halfFirst) => {\n if (!isInteractive) return\n const v = precision === 'half' && halfFirst ? starValue - 0.5 : starValue\n setHoverValue(v)\n }}\n onClick={(halfFirst) => {\n if (!isInteractive) return\n const v = precision === 'half' && halfFirst ? starValue - 0.5 : starValue\n setValue(v)\n }}\n />\n )\n })}\n </div>\n )\n },\n)\nRating.displayName = 'Rating'\n\n// ── StarIcon: 單顆星 + half-precision overlay ─────────────────────────────\n\ninterface StarIconProps {\n Icon: LucideIcon\n sizePx: number\n fillRatio: number // 0..1\n isHalf: boolean\n interactive: boolean\n onHover: (halfFirst: boolean) => void\n onClick: (halfFirst: boolean) => void\n}\n\nconst FILL_FILLED = 'var(--warning)' // yellow-6 — 黃星 convention\nconst FILL_EMPTY = 'var(--divider)' // 灰色空星(neutral-4 借 divider semantic alias,user 2026-05-09 拍板;對齊 Material rgba(0,0,0,0.26) muted-fill canonical)\n\nfunction StarIcon({ Icon, sizePx, fillRatio, isHalf, interactive, onHover, onClick }: StarIconProps) {\n // a11y(2026-04-25 axe nested-interactive fix):inner 點擊目標改 <span>(非 interactive\n // element),不會跟外層 role='slider' 形成 nested-interactive 違規。鍵盤控制統一在外層\n // slider 的 arrow keys,inner 只處理 mouse click 定位。Ant Rate / Material MUI 同模式。\n if (!isHalf) {\n // Full: 一整顆 fill(filled 或 empty)\n const fill = fillRatio >= 1 ? FILL_FILLED : FILL_EMPTY\n return (\n <span\n role=\"presentation\"\n onMouseEnter={interactive ? () => onHover(false) : undefined}\n onClick={interactive ? () => onClick(false) : undefined}\n className={cn(\n 'inline-flex',\n interactive ? 'cursor-pointer' : 'cursor-default',\n )}\n style={{ color: fill }}\n aria-hidden\n >\n {/ stroke=\"none\" 移除 Lucide Star 預設的 outline stroke(lucide defaultAttributes\n strokeWidth=2 + stroke=currentColor 會畫輪廓),讓星星是純 fill-only 的 shape——\n fill 與 outline 同色視覺上仍有亮度差。\n 世界級對照:Ant Rate / Material MUI Rating 皆純 fill,無 outline stroke。/}\n <Icon size={sizePx} fill={fill} stroke=\"none\" className=\"shrink-0\" />\n </span>\n )\n }\n\n // Half: 兩個重疊 icon,左半 filled / 右半 empty + 兩個 hover zone 切半星\n return (\n <span aria-hidden className=\"relative inline-flex\" style={{ width: sizePx, height: sizePx }}>\n <Icon size={sizePx} fill={FILL_EMPTY} stroke=\"none\" aria-hidden className=\"absolute inset-0\" style={{ color: FILL_EMPTY }} />\n <span className=\"absolute inset-0 overflow-hidden\" style={{ width: sizePx fillRatio }}>\n <Icon size={sizePx} fill={FILL_FILLED} stroke=\"none\" aria-hidden style={{ color: FILL_FILLED }} />\n </span>\n {interactive && (\n <>\n <span\n role=\"presentation\"\n onMouseEnter={() => onHover(true)}\n onClick={() => onClick(true)}\n className=\"absolute inset-y-0 left-0 w-1/2 cursor-pointer\"\n aria-hidden\n />\n <span\n role=\"presentation\"\n onMouseEnter={() => onHover(false)}\n onClick={() => onClick(false)}\n className=\"absolute inset-y-0 right-0 w-1/2 cursor-pointer\"\n aria-hidden\n />\n </>\n )}\n </span>\n )\n}\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const ratingMeta = {\n component: 'Rating',\n family: null, // self-contained primitive(對齊 spec frontmatter self-contained + body L24;非 Family 4)\n variants: {\n\n },\n sizes: {\n\n },\n states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n tokens: {\n bg: ['bg-transparent'],\n fg: [],\n ring: ['ring-ring'],\n },\n} as const\n\nexport { Rating }\n"],"names":[],"mappings":"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"}

package/dist/components/ScrollArea/scroll-area.d.ts CHANGED Viewed

@@ -17,7 +17,8 @@ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
  * 捲動時浮現(hover / scroll 自動顯示)。
  *
  * ── 何時用 ──
- * - DataTable 橫向捲動(水平跑版最明顯場景)
+ * - 寬內容橫向捲動(寬表格類 demo / 程式碼區塊;例外:DataTable 中央捲動區走 native
+ *   overflow-x-auto + scrollLeft 同步,不用 ScrollArea — 見 scroll-area.spec.md「何時用」)
  * - Sheet / Dialog 垂直內容捲動(body 太長)
  * - Sidebar nav 長列表
  * - 任何「內容可能溢出容器」且「跨 OS 視覺必須一致」的場景
@@ -27,7 +28,7 @@ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
  * - 單行 truncate(用 text-overflow:ellipsis 就夠)
  * - 極短內容(不會捲動 → 不需 wrapper)
  */
-declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref">, "asChild"> & {
     /** 2026-07-08(WM 戰役 R2):Radix Viewport 內建 wrapper `display:table; min-width:100%`
      *  讓垂直捲動容器內的 flex 多欄佈局以 max-content 佈局、突破 100% 寬(WM 兩欄 dialog
      *  右欄被裁 33px 實證)。垂直捲動場景 opt-in 此 prop 中和為 block/w-full(水平捲動

package/dist/components/ScrollArea/scroll-area.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/scroll-area.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAGlE~~;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG~~;AAEH,QAAA,MAAM,UAAU;~~IAGZ~~;;;qDAGiD;YACzC,OAAO;IACf;;8DAE0D;uBACvC,CAAC,GAAG,CAAC,CAAC;wCA6B3B,CAAA;AAGF,QAAA,MAAM,SAAS,wKAwBb,CAAA;AAKF,eAAO,MAAM,cAAc;;;;;;;;;;;CAejB,CAAA;AAEV,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAA"}
1	+ {"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/scroll-area.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAA;AAGlE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,QAAA,MAAM,UAAU;IAKZ;;;qDAGiD;YACzC,OAAO;IACf;;8DAE0D;uBACvC,CAAC,GAAG,CAAC,CAAC;wCA6B3B,CAAA;AAGF,QAAA,MAAM,SAAS,wKAwBb,CAAA;AAKF,eAAO,MAAM,cAAc;;;;;;;;;;;CAejB,CAAA;AAEV,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/ScrollArea/scroll-area.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"scroll-area.js","sources":["../../../src/components/ScrollArea/scroll-area.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'\nimport { cn } from '@/lib/utils'\n\n/*\n ScrollArea — 自訂樣式的捲動區(Radix ScrollArea primitive 包裝)\n \n 世界級對照:shadcn `ScrollArea` / Ant Design scrollable 容器的 pattern。\n \n ── 為什麼需要 ScrollArea ──\n * Native scrollbar 跨 OS 不一致:\n * macOS: overlay(不吃寬度,預設隱藏,滾動時浮出)\n * Windows / Linux: always-visible(永遠吃 ~15-17px 寬度)\n \n 結果:同一個 DataTable / Sheet / Dialog 內容在 macOS 看起來對齊,在 Windows\n * 右側被吃 17px 跑版(「Left pinned + Row Actions」那張圖的問題)。\n \n ScrollArea 用 Radix 包裝自建 overlay 捲軸 → 跨 OS 一致不吃寬度,\n * 捲動時浮現(hover / scroll 自動顯示)。\n \n ── 何時用 ──\n * - DataTable ~~橫向捲動(水平跑版最明顯場景~~)\n * - Sheet / Dialog 垂直內容捲動(body 太長)\n * - Sidebar nav 長列表\n * - 任何「內容可能溢出容器」且「跨 OS 視覺必須一致」的場景\n \n ── 何時不用 ──\n * - 全頁捲動(瀏覽器 document scroll,保持 native 即可;ScrollArea 是 sub-region)\n * - 單行 truncate(用 text-overflow:ellipsis 就夠)\n * - 極短內容(不會捲動 → 不需 wrapper)\n /\n\nconst ScrollArea = React.forwardRef<\n React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {\n /* 2026-07-08(WM 戰役 R2):Radix Viewport 內建 wrapper `display:table; min-width:100%`\n * 讓垂直捲動容器內的 flex 多欄佈局以 max-content 佈局、突破 100% 寬(WM 兩欄 dialog\n * 右欄被裁 33px 實證)。垂直捲動場景 opt-in 此 prop 中和為 block/w-full(水平捲動\n * 場景勿開 — table wrapper 是其 min-content 溢出機制)。 /\n fillX?: boolean\n /* Viewport tabIndex(預設 0 = axe scrollable-region-focusable fix)。內容已有自帶\n * focusable 元素(如 TimePicker role=listbox tabIndex=0)時傳 -1 消除雙 tab stop —\n * axe 由內部 focusable 內容滿足,焦點直接落在有 keydown 的 listbox 上。 /\n viewportTabIndex?: 0 \| -1\n }\n>(({ className, children, fillX, viewportTabIndex = 0, ...props }, ref) => (\n <ScrollAreaPrimitive.Root\n ref={ref}\n className={cn('relative flex flex-col overflow-hidden', className)}\n {...props}\n >\n {/ Viewport canonical(2026-04-23):Root 用 `flex flex-col`,Viewport 用 `flex-1 min-h-0`。\n 原 `h-full` 在 Root 為 flex item(外層 flex-1 min-h-0)時失效 — Chrome 不把\n flex-computed 高度視為 `height: 100%` 的 definite anchor,導致 Viewport 撐成\n content height 而非 parent height → 失去 scroll 能力。\n 改 Root 為 flex container,Viewport 成 flex item,flex algorithm 給 definite height。\n `w-full` 保留(水平維度不受影響)。 /}\n {/ a11y(2026-04-25 axe scrollable-region-focusable fix):Viewport 需 tabIndex=0\n 才能 keyboard focus(Safari 不自動把 scroll container 標 focusable)。focus-\n visible:outline 用 DS focus ring,不破壞視覺。 /}\n <ScrollAreaPrimitive.Viewport\n tabIndex={viewportTabIndex}\n className={cn(\n 'flex-1 min-h-0 w-full rounded-[inherit] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring',\n fillX && '[&>div]:!block [&>div]:!w-full [&>div]:!min-w-0',\n )}\n >\n {children}\n </ScrollAreaPrimitive.Viewport>\n <ScrollBar />\n <ScrollAreaPrimitive.Corner />\n </ScrollAreaPrimitive.Root>\n))\nScrollArea.displayName = 'ScrollArea'\n\nconst ScrollBar = React.forwardRef<\n React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(({ className, orientation = 'vertical', ...props }, ref) => (\n <ScrollAreaPrimitive.ScrollAreaScrollbar\n ref={ref}\n orientation={orientation}\n className={cn(\n 'flex touch-none select-none transition-colors',\n orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',\n orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',\n className,\n )}\n {...props}\n >\n {/ Thumb 用 scrollbar-thumb / -hover semantic alias(2026-05-09 抽 SSOT,跟 DataTable fake scrollbar\n 共享 token)。Token 值仍 = `--border` / `--border-hover`(neutral-5/-6)— 世界級 SaaS\n (Linear / Notion / Figma / macOS)scrollbar thumb 慣例「很淡、幾乎看不見,hover 略深」。\n 前身直接 `bg-border` borrowing(2026-04 ship)→ semantic alias 收斂 SSOT(避免 thumb 視覺\n 未來演化時誤動 Field/Input/Checkbox border 視覺)。對齊 shadcn ScrollArea source `bg-border`。 */}\n <ScrollAreaPrimitive.ScrollAreaThumb\n className={cn('relative flex-1 rounded-full bg-[var(--scrollbar-thumb)] hover:bg-[var(--scrollbar-thumb-hover)] transition-colors')}\n />\n </ScrollAreaPrimitive.ScrollAreaScrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const scrollAreaMeta = {\n component: 'ScrollArea',\n family: 'self-contained', // 對齊 scroll-area.spec.md frontmatter(SSOT;同 Separator/OverflowIndicator meta 寫法)\n variants: {\n\n },\n sizes: {\n\n },\n states: ['default'],\n tokens: {\n bg: [],\n fg: [],\n ring: [],\n },\n} as const\n\nexport { ScrollArea, ScrollBar }\n"],"names":[],"mappings":";;;;~~AAiCA~~,MAAM,aAAa,MAAM,~~WAavB~~,CAAC,EAAE,WAAW,UAAU,OAAO,mBAAmB,GAAG,GAAG,MAAA,GAAS,QACjE;AAAA,EAAC,oBAAoB;AAAA,EAApB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,0CAA0C,SAAS;AAAA,IAChE,GAAG;AAAA,IAWJ,UAAA;AAAA,MAAA;AAAA,QAAC,oBAAoB;AAAA,QAApB;AAAA,UACC,UAAU;AAAA,UACV,WAAW;AAAA,YACT;AAAA,YACA,SAAS;AAAA,UAAA;AAAA,UAGV;AAAA,QAAA;AAAA,MAAA;AAAA,0BAEF,WAAA,EAAU;AAAA,MACX,oBAAC,oBAAoB,QAApB,CAAA,CAA2B;AAAA,IAAA;AAAA,EAAA;AAC9B,CACD;AACD,WAAW,cAAc;AAEzB,MAAM,YAAY,MAAM,WAGtB,CAAC,EAAE,WAAW,cAAc,YAAY,GAAG,SAAS,QACpD;AAAA,EAAC,oBAAoB;AAAA,EAApB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA,gBAAgB,cAAc;AAAA,MAC9B,gBAAgB,gBAAgB;AAAA,MAChC;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAOJ,UAAA;AAAA,MAAC,oBAAoB;AAAA,MAApB;AAAA,QACC,WAAW,GAAG,oHAAoH;AAAA,MAAA;AAAA,IAAA;AAAA,EACpI;AACF,CACD;AACD,UAAU,cAAc,oBAAoB,oBAAoB;AAIzD,MAAM,iBAAiB;AAAA,EAC5B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAA;AAAA,IACJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}
1	+ {"version":3,"file":"scroll-area.js","sources":["../../../src/components/ScrollArea/scroll-area.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'\nimport { cn } from '@/lib/utils'\n\n/*\n ScrollArea — 自訂樣式的捲動區(Radix ScrollArea primitive 包裝)\n \n 世界級對照:shadcn `ScrollArea` / Ant Design scrollable 容器的 pattern。\n \n ── 為什麼需要 ScrollArea ──\n * Native scrollbar 跨 OS 不一致:\n * macOS: overlay(不吃寬度,預設隱藏,滾動時浮出)\n * Windows / Linux: always-visible(永遠吃 ~15-17px 寬度)\n \n 結果:同一個 DataTable / Sheet / Dialog 內容在 macOS 看起來對齊,在 Windows\n * 右側被吃 17px 跑版(「Left pinned + Row Actions」那張圖的問題)。\n \n ScrollArea 用 Radix 包裝自建 overlay 捲軸 → 跨 OS 一致不吃寬度,\n * 捲動時浮現(hover / scroll 自動顯示)。\n \n ── 何時用 ──\n * - 寬內容橫向捲動(寬表格類 demo / 程式碼區塊;例外:DataTable 中央捲動區走 native\n * overflow-x-auto + scrollLeft 同步,不用 ScrollArea — 見 scroll-area.spec.md「何時用」)\n * - Sheet / Dialog 垂直內容捲動(body 太長)\n * - Sidebar nav 長列表\n * - 任何「內容可能溢出容器」且「跨 OS 視覺必須一致」的場景\n \n ── 何時不用 ──\n * - 全頁捲動(瀏覽器 document scroll,保持 native 即可;ScrollArea 是 sub-region)\n * - 單行 truncate(用 text-overflow:ellipsis 就夠)\n * - 極短內容(不會捲動 → 不需 wrapper)\n /\n\nconst ScrollArea = React.forwardRef<\n React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n // asChild Omit(2026-07-18 決策2):Root 恆渲染固定三子節點(Viewport + ScrollBar + Corner)\n // → <Root asChild> Radix Slot React.Children.only crash。children 保留(路由進固定 Viewport)。\n Omit<React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>, 'asChild'> & {\n /* 2026-07-08(WM 戰役 R2):Radix Viewport 內建 wrapper `display:table; min-width:100%`\n * 讓垂直捲動容器內的 flex 多欄佈局以 max-content 佈局、突破 100% 寬(WM 兩欄 dialog\n * 右欄被裁 33px 實證)。垂直捲動場景 opt-in 此 prop 中和為 block/w-full(水平捲動\n * 場景勿開 — table wrapper 是其 min-content 溢出機制)。 /\n fillX?: boolean\n /* Viewport tabIndex(預設 0 = axe scrollable-region-focusable fix)。內容已有自帶\n * focusable 元素(如 TimePicker role=listbox tabIndex=0)時傳 -1 消除雙 tab stop —\n * axe 由內部 focusable 內容滿足,焦點直接落在有 keydown 的 listbox 上。 /\n viewportTabIndex?: 0 \| -1\n }\n>(({ className, children, fillX, viewportTabIndex = 0, ...props }, ref) => (\n <ScrollAreaPrimitive.Root\n ref={ref}\n className={cn('relative flex flex-col overflow-hidden', className)}\n {...props}\n >\n {/ Viewport canonical(2026-04-23):Root 用 `flex flex-col`,Viewport 用 `flex-1 min-h-0`。\n 原 `h-full` 在 Root 為 flex item(外層 flex-1 min-h-0)時失效 — Chrome 不把\n flex-computed 高度視為 `height: 100%` 的 definite anchor,導致 Viewport 撐成\n content height 而非 parent height → 失去 scroll 能力。\n 改 Root 為 flex container,Viewport 成 flex item,flex algorithm 給 definite height。\n `w-full` 保留(水平維度不受影響)。 /}\n {/ a11y(2026-04-25 axe scrollable-region-focusable fix):Viewport 需 tabIndex=0\n 才能 keyboard focus(Safari 不自動把 scroll container 標 focusable)。focus-\n visible:outline 用 DS focus ring,不破壞視覺。 /}\n <ScrollAreaPrimitive.Viewport\n tabIndex={viewportTabIndex}\n className={cn(\n 'flex-1 min-h-0 w-full rounded-[inherit] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring',\n fillX && '[&>div]:!block [&>div]:!w-full [&>div]:!min-w-0',\n )}\n >\n {children}\n </ScrollAreaPrimitive.Viewport>\n <ScrollBar />\n <ScrollAreaPrimitive.Corner />\n </ScrollAreaPrimitive.Root>\n))\nScrollArea.displayName = 'ScrollArea'\n\nconst ScrollBar = React.forwardRef<\n React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(({ className, orientation = 'vertical', ...props }, ref) => (\n <ScrollAreaPrimitive.ScrollAreaScrollbar\n ref={ref}\n orientation={orientation}\n className={cn(\n 'flex touch-none select-none transition-colors',\n orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',\n orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',\n className,\n )}\n {...props}\n >\n {/ Thumb 用 scrollbar-thumb / -hover semantic alias(2026-05-09 抽 SSOT,跟 DataTable fake scrollbar\n 共享 token)。Token 值仍 = `--border` / `--border-hover`(neutral-5/-6)— 世界級 SaaS\n (Linear / Notion / Figma / macOS)scrollbar thumb 慣例「很淡、幾乎看不見,hover 略深」。\n 前身直接 `bg-border` borrowing(2026-04 ship)→ semantic alias 收斂 SSOT(避免 thumb 視覺\n 未來演化時誤動 Field/Input/Checkbox border 視覺)。對齊 shadcn ScrollArea source `bg-border`。 */}\n <ScrollAreaPrimitive.ScrollAreaThumb\n className={cn('relative flex-1 rounded-full bg-[var(--scrollbar-thumb)] hover:bg-[var(--scrollbar-thumb-hover)] transition-colors')}\n />\n </ScrollAreaPrimitive.ScrollAreaScrollbar>\n))\nScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const scrollAreaMeta = {\n component: 'ScrollArea',\n family: 'self-contained', // 對齊 scroll-area.spec.md frontmatter(SSOT;同 Separator/OverflowIndicator meta 寫法)\n variants: {\n\n },\n sizes: {\n\n },\n states: ['default'],\n tokens: {\n bg: [],\n fg: [],\n ring: [],\n },\n} as const\n\nexport { ScrollArea, ScrollBar }\n"],"names":[],"mappings":";;;;AAkCA,MAAM,aAAa,MAAM,WAevB,CAAC,EAAE,WAAW,UAAU,OAAO,mBAAmB,GAAG,GAAG,MAAA,GAAS,QACjE;AAAA,EAAC,oBAAoB;AAAA,EAApB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,0CAA0C,SAAS;AAAA,IAChE,GAAG;AAAA,IAWJ,UAAA;AAAA,MAAA;AAAA,QAAC,oBAAoB;AAAA,QAApB;AAAA,UACC,UAAU;AAAA,UACV,WAAW;AAAA,YACT;AAAA,YACA,SAAS;AAAA,UAAA;AAAA,UAGV;AAAA,QAAA;AAAA,MAAA;AAAA,0BAEF,WAAA,EAAU;AAAA,MACX,oBAAC,oBAAoB,QAApB,CAAA,CAA2B;AAAA,IAAA;AAAA,EAAA;AAC9B,CACD;AACD,WAAW,cAAc;AAEzB,MAAM,YAAY,MAAM,WAGtB,CAAC,EAAE,WAAW,cAAc,YAAY,GAAG,SAAS,QACpD;AAAA,EAAC,oBAAoB;AAAA,EAApB;AAAA,IACC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA,gBAAgB,cAAc;AAAA,MAC9B,gBAAgB,gBAAgB;AAAA,MAChC;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAOJ,UAAA;AAAA,MAAC,oBAAoB;AAAA,MAApB;AAAA,QACC,WAAW,GAAG,oHAAoH;AAAA,MAAA;AAAA,IAAA;AAAA,EACpI;AACF,CACD;AACD,UAAU,cAAc,oBAAoB,oBAAoB;AAIzD,MAAM,iBAAiB;AAAA,EAC5B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAA;AAAA,IACJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}

package/dist/components/SegmentedControl/segmented-control.d.ts CHANGED Viewed

@@ -8,8 +8,9 @@ import type { LucideIcon } from 'lucide-react';
  * 內部 item 結構鏡射 Button，但兩者型別獨立。
  *
  * ── 定位 ──
- *   切 value（不是切 view）。塞得進 Field，Tabs 不行。
- *   切 view → Tabs；單一 on/off → Button pressed；>5 個選項 → Select。
+ *   互斥多選一的 compact control；選值可驅動下方內容變化（ViewSwitcher 合法——
+ *   「切 value 不能切 view」是錯的二分法，spec「定位」段）。塞得進 Field，Tabs 不行。
+ *   與 Tabs 分界看規模 / 結構角色（spec「與 Tabs 的分界」段）；單一 on/off → Button pressed；>5 個選項 → Select。
  *
  * ── Size（對齊 field-height / Button 系列）──
  *   xs   h-field-xs（24 固定）
@@ -46,7 +47,7 @@ declare const itemVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "xs" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface SegmentedControlItemProps extends React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> {
+export interface SegmentedControlItemProps extends Omit<React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>, 'asChild'> {
     /** 左側 icon（LucideIcon）。group iconOnly = true 時必填。 */
     startIcon?: LucideIcon;
     /** 右側 suffix badge（通常是計數指示器）。group iconOnly = true 時會被忽略。 */

package/dist/components/SegmentedControl/segmented-control.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/segmented-control.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAEpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAM9C~~;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG~~;AAEH,KAAK,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAiBrD,QAAA,MAAM,wBAAwB;;8EAa7B,CAAA;AAED,MAAM,WAAW,qBACf,SAAQ,IAAI,CACR,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,EAChE,MAAM,GAAG,cAAc,GAAG,OAAO,GAAG,eAAe,CACpD;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAA;IAC3B,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC;AAED,QAAA,MAAM,gBAAgB,8FA4DrB,CAAA;AAmBD,QAAA,MAAM,YAAY;;;8EAiDjB,CAAA;AAMD,MAAM,WAAW,~~yBACf~~,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC;~~IACxE~~,qDAAqD;IACrD,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,oBAAoB,qGA4DxB,CAAA;AAMF,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmBvB,CAAA;AAEV,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,YAAY,IAAI,4BAA4B,EAAE,CAAA;AACzH,YAAY,EAAE,oBAAoB,EAAE,CAAA"}
1	+ {"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/segmented-control.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,oBAAoB,MAAM,8BAA8B,CAAA;AAEpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAM9C;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,KAAK,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAiBrD,QAAA,MAAM,wBAAwB;;8EAa7B,CAAA;AAED,MAAM,WAAW,qBACf,SAAQ,IAAI,CACR,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,EAChE,MAAM,GAAG,cAAc,GAAG,OAAO,GAAG,eAAe,CACpD;IACH,IAAI,CAAC,EAAE,oBAAoB,CAAA;IAC3B,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC;AAED,QAAA,MAAM,gBAAgB,8FA4DrB,CAAA;AAmBD,QAAA,MAAM,YAAY;;;8EAiDjB,CAAA;AAMD,MAAM,WAAW,yBAGf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,oBAAoB,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IACzF,qDAAqD;IACrD,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,oBAAoB,qGA4DxB,CAAA;AAMF,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmBvB,CAAA;AAEV,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,YAAY,IAAI,4BAA4B,EAAE,CAAA;AACzH,YAAY,EAAE,oBAAoB,EAAE,CAAA"}

package/dist/components/SegmentedControl/segmented-control.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"segmented-control.js","sources":["../../../src/components/SegmentedControl/segmented-control.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\nimport { cva } from 'class-variance-authority'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { useResolvedFieldSize, useResolvedFieldDisabled } from '@/design-system/components/Field/field-context'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/design-system/components/Tooltip/tooltip'\nimport { ICON_SIZE } from '@/design-system/tokens/uiSize/icon-size'\n\n/*\n SegmentedControl — 互斥多選一的 value 選擇器\n \n 基於 Radix ToggleGroup（寫死 type=\"single\"），橋接設計系統 token。\n * 內部 item 結構鏡射 Button，但兩者型別獨立。\n \n ── 定位 ──\n * 切 value（不是切 view）。塞得進 Field，Tabs 不行。\n * 切 view → Tabs；單一 on/off → Button pressed；>5 個選項 → Select。\n \n ── Size（對齊 field-height / Button 系列）──\n * xs h-field-xs（24 固定）\n * sm h-field-sm（28/32）\n * md h-field-md（32/36）★ 預設（跟 Button / Input / 所有 field-height 系列一致）\n * lg h-field-lg（36/40）\n \n ── fullWidth ──\n * false ★ 預設，item 寬度由內容決定（hug content）\n * true SegmentedControl 撐滿父容器寬度，所有 item 等分\n \n ── Item 結構 ──\n * [startIcon?] [<span px-1>label</span>] [<span gap-1>suffix?</span>]\n * suffix 目前只支援 badge；endIcon 為保留 slot、未開放\n \n ── iconOnly（group-level）──\n * 整組同時 icon-only 或全帶 label，不可混搭。\n /\n\ntype SegmentedControlSize = 'xs' \| 'sm' \| 'md' \| 'lg'\n\ninterface SegmentedControlContextValue {\n size: SegmentedControlSize\n fullWidth: boolean\n iconOnly: boolean\n disabled: boolean\n}\n\nconst SegmentedControlContext = React.createContext<SegmentedControlContextValue>({\n size: 'md',\n fullWidth: false,\n iconOnly: false,\n disabled: false,\n})\n\n// ── Root ──\nconst segmentedControlVariants = cva(\n 'flex items-stretch rounded-md',\n {\n variants: {\n fullWidth: {\n true: 'w-full',\n false: 'w-fit',\n },\n },\n defaultVariants: {\n fullWidth: false,\n },\n }\n)\n\nexport interface SegmentedControlProps\n extends Omit<\n React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>,\n 'type' \| 'defaultValue' \| 'value' \| 'onValueChange'\n > {\n size?: SegmentedControlSize\n /* 撐滿父容器寬度，所有 item 等分。預設 false（hug content） /\n fullWidth?: boolean\n iconOnly?: boolean\n value?: string\n defaultValue?: string\n onValueChange?: (value: string) => void\n}\n\nconst SegmentedControl = React.forwardRef<\n React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n SegmentedControlProps\n>(\n (\n {\n className,\n size: sizeProp,\n fullWidth = false,\n iconOnly = false,\n disabled,\n children,\n value,\n defaultValue,\n onValueChange,\n ...props\n },\n ref\n ) => {\n // Field 內自動讀 size + disabled,跟 Button 同機制(SSOT resolver hook)\n const resolvedSize = useResolvedFieldSize<SegmentedControlSize>(sizeProp, 'md') // SSOT:統一 size resolution(原散落 ?? fieldCtx?.size ?? 'md')\n const resolvedDisabled = useResolvedFieldDisabled(disabled)\n\n // 2026-07-04:恆 controlled mirror(見下方 onValueChange 註解)— uncontrolled consumer 的\n // defaultValue 收進 internal state,Radix 永遠拿 controlled value → deselect 空值可攔。\n const [internalValue, setInternalValue] = React.useState(defaultValue ?? '') // '' = controlled 無選取(恆 controlled 從 mount 起,避免 un→controlled 切換)\n const resolvedValue = value !== undefined ? value : internalValue\n\n // Memoize provider value(2026-04-22 D3 perf audit):避免每次父 render 重建 4-field object\n // 讓 children SegmentedControlItem 不必要 re-render\n const ctxValue = React.useMemo(\n () => ({ size: resolvedSize, fullWidth, iconOnly, disabled: resolvedDisabled }),\n [resolvedSize, fullWidth, iconOnly, resolvedDisabled],\n )\n\n return (\n <SegmentedControlContext.Provider value={ctxValue}>\n <ToggleGroupPrimitive.Root\n ref={ref}\n type=\"single\"\n value={resolvedValue}\n onValueChange={(v) => {\n // Radix 的 single ToggleGroup 允許 deselect（返回空字串）\n // SegmentedControl 是 radio 語意，不允許空值——忽略 deselect。\n // 2026-07-04 修:原 uncontrolled(只傳 defaultValue)時 Radix 內部 state 直通,\n // 點已選中項照樣 deselect 成空值(spec:236「恆有一值」失守)→ wrapper 恆 controlled\n // (internalValue mirror),空字串一律不進 state 也不呼叫 consumer callback。\n if (!v) return\n if (value === undefined) setInternalValue(v)\n onValueChange?.(v)\n }}\n disabled={resolvedDisabled}\n className={cn(segmentedControlVariants({ fullWidth }), className)}\n {...props}\n >\n {children}\n </ToggleGroupPrimitive.Root>\n </SegmentedControlContext.Provider>\n )\n }\n)\nSegmentedControl.displayName = 'SegmentedControl'\n\n// ── Item ──\n\n/\n Icon-only base — Polaris/Atlassian idiom:`aspect-square + p-0 + flex-center`。\n * 0 magic-number、0 公式、0 border-deduction;flex centering(已在 itemVariants base)\n * 自動將 SVG 視覺置中,任何 size / icon 都自然正方形。\n \n 對齊 `Button.tsx` 的 `ICON_ONLY_BASE`(2026-04-25 從 padding-formula 派改 padding-free)。\n * Rule-of-3:目前 2 處 consumer(Button + SegmentedControl),尚未抽 utility/token;\n * 第 3 個 host 加入時抽到 `packages/design-system/src/utils/`。\n \n 舊公式 `(field-height - icon)/2` 沒扣 border 2px,造成 SegmentedControl item 從\n * 設計 spec「自然正方形」漂移為 34×32 長方形(2026-04-25 audit 發現)。\n /\nconst ICON_ONLY_BASE = 'aspect-square p-0 min-w-0 gap-0'\n\nconst itemVariants = cva(\n [\n 'relative inline-flex items-center justify-center',\n 'whitespace-nowrap font-medium',\n 'border border-border bg-surface text-fg-secondary',\n 'transition-colors duration-150',\n 'cursor-pointer select-none',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:z-20',\n // disabled：cursor-not-allowed + 鎖住 hover 色（不用 pointer-events-none，否則 cursor 無法變）\n // button[disabled] 本身擋 click，不需靠 pointer-events: none\n 'disabled:cursor-not-allowed disabled:text-fg-disabled',\n 'disabled:hover:text-fg-disabled disabled:hover:border-border',\n // hover（未選）：border 加深一階 + 文字轉深，對齊 Input / Chip hover\n 'hover:text-foreground hover:border-border-hover hover:z-[5]',\n // selected: 文字 + 邊框都用 primary base,底色維持 bg-surface 不變 (跟 Chip 一致)\n // ── 這是 pill 風格元件 (Chip / SegmentedControl) 的 canonical 選中規則(SSOT = semantic.css「選中狀態」段):\n // primary base 同時染文字和線條;底色不改 (不用 primary-subtle)。\n // 2026-07-06 user 拍板:持續選中 hover 階 → base(三家世界級「瞬時弱、持續強」實錘)。\n // Tabs 是 underline 風格,規則不同 (文字 foreground + 底線 primary)。\n // z-10 讓 border 浮在相鄰 item 之上\n 'data-[state=on]:text-primary data-[state=on]:border-primary data-[state=on]:z-10',\n // 選中之上的 hover = 同色相升 hover 階(2026-07-06 user 拍板;Button pressed hover 家族\n // + Ant active hover 同派;跟 Chip 一致,顯式宣告解掉 CSS 平手 source-order 脆弱性)\n 'data-[state=on]:hover:text-primary-hover data-[state=on]:hover:border-primary-hover',\n // disabled × selected 疊加(2026-07-07 user 拍板統一;M24 disabled 全滅,同 Chip)\n 'data-[state=on]:disabled:border-border data-[state=on]:disabled:text-fg-disabled',\n 'data-[state=on]:disabled:hover:border-border data-[state=on]:disabled:hover:text-fg-disabled',\n // item 連體：除第一個外，-ml-px 讓相鄰 border 重疊\n 'first:rounded-l-md last:rounded-r-md',\n '[&:not(:first-child)]:-ml-px',\n ],\n {\n variants: {\n size: {\n xs: 'h-field-xs px-2 text-caption leading-compact gap-0',\n sm: 'h-field-sm px-3 text-body leading-compact gap-1',\n md: 'h-field-md px-3 text-body leading-compact gap-1',\n lg: 'h-field-lg px-3 text-body-lg leading-compact gap-1',\n },\n fullWidth: {\n true: 'flex-1 min-w-0',\n false: '',\n },\n },\n defaultVariants: {\n size: 'md',\n fullWidth: false,\n },\n }\n)\n\n// iconOnly 是 group-level 決策（由 <SegmentedControl iconOnly> 控制），\n// 不是 per-item 決策，所以 Item 型別不用 discriminated union 強制 iconOnly。\n// 但當 group iconOnly = true 時，每個 item 必須提供 startIcon + aria-label——\n// 這是語意契約，在 render 階段檢查並在 dev mode 發出警告（TS 層做不到這層檢查）。\nexport interface SegmentedControlItemProps\n extends React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> {\n /* 左側 icon（LucideIcon）。group iconOnly = true 時必填。 /\n startIcon?: LucideIcon\n /* 右側 suffix badge（通常是計數指示器）。group iconOnly = true 時會被忽略。 /\n badge?: React.ReactNode\n /\n 無障礙名稱。帶 label 時可選（label 已傳達語意），\n * 但 group iconOnly = true 時必填——同時驅動 screen reader 和自動 tooltip。\n /\n 'aria-label'?: string\n children?: React.ReactNode\n}\n\nconst SegmentedControlItem = React.forwardRef<\n React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n SegmentedControlItemProps\n>(({ className, startIcon: StartIcon, badge, children, 'aria-label': ariaLabel, ...restProps }, ref) => {\n const { size, fullWidth, iconOnly: groupIconOnly } = React.useContext(SegmentedControlContext)\n // 2026-05-18 改 per user 拍板「沒機械化導致偏移」+「做完」approval(對齊 Button xs / uiSize Icon Tier):\n // 原 xs=14 跟 Button xs=16 不一致,xs/sm/md 統一 16 對齊 uiSize.spec.md(xs/sm/md→16, lg→20)。\n // 2026-05-18 改 import ICON_SIZE SSOT(per user『做完』approval,消除 M17 違反 7+ 重複 ternary)\n // 2026-05-31 #14:ICON_SIZE 只有 sm/md/lg key,size='xs' 會落 undefined → 對齊上方註解「xs/sm/md 統一 16」讓 xs 取 sm(16px)。\n const iconSize = size === 'xs' ? ICON_SIZE.sm : ICON_SIZE[size as 'sm' \| 'md' \| 'lg']\n const hasSuffix = badge != null\n\n // Dev-mode 語意契約檢查：group iconOnly = true 時，item 必須有 startIcon + aria-label\n if (import.meta.env?.DEV && groupIconOnly) {\n if (!StartIcon) {\n console.warn(\n '[SegmentedControl] iconOnly 群組內的 item 必須提供 startIcon。'\n )\n }\n if (!ariaLabel) {\n console.warn(\n '[SegmentedControl] iconOnly 群組內的 item 必須提供 aria-label（作為無障礙名稱與自動 tooltip 來源）。'\n )\n }\n }\n\n const effectiveIconOnly = groupIconOnly\n\n const itemEl = (\n <ToggleGroupPrimitive.Item\n ref={ref}\n className={cn(\n itemVariants({ size, fullWidth }),\n effectiveIconOnly && ICON_ONLY_BASE,\n className,\n )}\n aria-label={ariaLabel}\n {...restProps}\n >\n {StartIcon && <StartIcon size={iconSize} aria-hidden />}\n {!effectiveIconOnly && children != null && <span className=\"px-1\">{children}</span>}\n {/ suffix wrapper：即使目前只有 badge，wrapper 從第一天就存在，\n 未來若開放 endIcon，直接加入此 span 內 gap-1 自動生效 /}\n {hasSuffix && !effectiveIconOnly && (\n <span className=\"inline-flex items-center gap-1\">{badge}</span>\n )}\n </ToggleGroupPrimitive.Item>\n )\n\n // icon-only 自動包 Tooltip（與 Button icon-only 一致）\n if (effectiveIconOnly && typeof ariaLabel === 'string') {\n return (\n <Tooltip>\n <TooltipTrigger asChild>{itemEl}</TooltipTrigger>\n <TooltipContent>{ariaLabel}</TooltipContent>\n </Tooltip>\n )\n }\n\n return itemEl\n})\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n\n// Story auto-compile metadata — Phase 2 fill(2026-05-15)\n// Sizes 真實 cva keys = xs/sm/md/lg(itemVariants.size),映射 field-height- token tier\n// SegmentedControl 無語意 variant(選中 vs 未選是 state 不是 variant)— 與 Button.variant 刻意不同(spec「與 Button 的血緣」段)\nexport const segmentedControlMeta = {\n component: 'SegmentedControl',\n family: 3, // Family 3(Pill Layout)— 對齊 spec frontmatter family:3 + body L42\n variants: {},\n sizes: {\n xs: { fieldHeight: 24, typography: 'caption', iconSize: 16, purpose: 'row-embedded inline action / DataTable inline filter' },\n sm: { fieldHeight: 28, typography: 'body', iconSize: 16, purpose: 'compact chrome bar / dense toolbar' },\n md: { fieldHeight: 32, typography: 'body', iconSize: 16, purpose: '預設 — form field 對齊' },\n lg: { fieldHeight: 36, typography: 'body-lg', iconSize: 20, purpose: 'touch / prominent CTA' },\n },\n // 2026-07-04 audit 對齊:cva 無 active(按下)專屬樣式,移除 'active'\n // 'selected' = data-[state=on](2026-07-07 meta 詞彙統一補列:持續選中一律 'selected';cva 無按壓 active 樣式)\n states: ['default', 'hover', 'selected', 'focus-visible', 'disabled'],\n tokens: {\n bg: ['bg-surface'],\n fg: ['text-fg-disabled', 'text-fg-secondary', 'text-foreground', 'text-primary'], // selected 態 cva data-[state=on]:text-primary 實際消費(2026-07-06 選中改 base)\n ring: ['ring-ring'],\n },\n defaultSize: 'md',\n} as const\n\nexport { SegmentedControl, SegmentedControlItem, segmentedControlVariants, itemVariants as segmentedControlItemVariants }\nexport type { SegmentedControlSize }\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"segmented-control.js","sources":["../../../src/components/SegmentedControl/segmented-control.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\nimport { cva } from 'class-variance-authority'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { useResolvedFieldSize, useResolvedFieldDisabled } from '@/design-system/components/Field/field-context'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/design-system/components/Tooltip/tooltip'\nimport { ICON_SIZE } from '@/design-system/tokens/uiSize/icon-size'\n\n/*\n SegmentedControl — 互斥多選一的 value 選擇器\n \n 基於 Radix ToggleGroup（寫死 type=\"single\"），橋接設計系統 token。\n * 內部 item 結構鏡射 Button，但兩者型別獨立。\n \n ── 定位 ──\n * 互斥多選一的 compact control；選值可驅動下方內容變化（ViewSwitcher 合法——\n * 「切 value 不能切 view」是錯的二分法，spec「定位」段）。塞得進 Field，Tabs 不行。\n * 與 Tabs 分界看規模 / 結構角色（spec「與 Tabs 的分界」段）；單一 on/off → Button pressed；>5 個選項 → Select。\n \n ── Size（對齊 field-height / Button 系列）──\n * xs h-field-xs（24 固定）\n * sm h-field-sm（28/32）\n * md h-field-md（32/36）★ 預設（跟 Button / Input / 所有 field-height 系列一致）\n * lg h-field-lg（36/40）\n \n ── fullWidth ──\n * false ★ 預設，item 寬度由內容決定（hug content）\n * true SegmentedControl 撐滿父容器寬度，所有 item 等分\n \n ── Item 結構 ──\n * [startIcon?] [<span px-1>label</span>] [<span gap-1>suffix?</span>]\n * suffix 目前只支援 badge；endIcon 為保留 slot、未開放\n \n ── iconOnly（group-level）──\n * 整組同時 icon-only 或全帶 label，不可混搭。\n /\n\ntype SegmentedControlSize = 'xs' \| 'sm' \| 'md' \| 'lg'\n\ninterface SegmentedControlContextValue {\n size: SegmentedControlSize\n fullWidth: boolean\n iconOnly: boolean\n disabled: boolean\n}\n\nconst SegmentedControlContext = React.createContext<SegmentedControlContextValue>({\n size: 'md',\n fullWidth: false,\n iconOnly: false,\n disabled: false,\n})\n\n// ── Root ──\nconst segmentedControlVariants = cva(\n 'flex items-stretch rounded-md',\n {\n variants: {\n fullWidth: {\n true: 'w-full',\n false: 'w-fit',\n },\n },\n defaultVariants: {\n fullWidth: false,\n },\n }\n)\n\nexport interface SegmentedControlProps\n extends Omit<\n React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>,\n 'type' \| 'defaultValue' \| 'value' \| 'onValueChange'\n > {\n size?: SegmentedControlSize\n /* 撐滿父容器寬度，所有 item 等分。預設 false（hug content） /\n fullWidth?: boolean\n iconOnly?: boolean\n value?: string\n defaultValue?: string\n onValueChange?: (value: string) => void\n}\n\nconst SegmentedControl = React.forwardRef<\n React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n SegmentedControlProps\n>(\n (\n {\n className,\n size: sizeProp,\n fullWidth = false,\n iconOnly = false,\n disabled,\n children,\n value,\n defaultValue,\n onValueChange,\n ...props\n },\n ref\n ) => {\n // Field 內自動讀 size + disabled,跟 Button 同機制(SSOT resolver hook)\n const resolvedSize = useResolvedFieldSize<SegmentedControlSize>(sizeProp, 'md') // SSOT:統一 size resolution(原散落 ?? fieldCtx?.size ?? 'md')\n const resolvedDisabled = useResolvedFieldDisabled(disabled)\n\n // 2026-07-04:恆 controlled mirror(見下方 onValueChange 註解)— uncontrolled consumer 的\n // defaultValue 收進 internal state,Radix 永遠拿 controlled value → deselect 空值可攔。\n const [internalValue, setInternalValue] = React.useState(defaultValue ?? '') // '' = controlled 無選取(恆 controlled 從 mount 起,避免 un→controlled 切換)\n const resolvedValue = value !== undefined ? value : internalValue\n\n // Memoize provider value(2026-04-22 D3 perf audit):避免每次父 render 重建 4-field object\n // 讓 children SegmentedControlItem 不必要 re-render\n const ctxValue = React.useMemo(\n () => ({ size: resolvedSize, fullWidth, iconOnly, disabled: resolvedDisabled }),\n [resolvedSize, fullWidth, iconOnly, resolvedDisabled],\n )\n\n return (\n <SegmentedControlContext.Provider value={ctxValue}>\n <ToggleGroupPrimitive.Root\n ref={ref}\n type=\"single\"\n value={resolvedValue}\n onValueChange={(v) => {\n // Radix 的 single ToggleGroup 允許 deselect（返回空字串）\n // SegmentedControl 是 radio 語意，不允許空值——忽略 deselect。\n // 2026-07-04 修:原 uncontrolled(只傳 defaultValue)時 Radix 內部 state 直通,\n // 點已選中項照樣 deselect 成空值(spec:236「恆有一值」失守)→ wrapper 恆 controlled\n // (internalValue mirror),空字串一律不進 state 也不呼叫 consumer callback。\n if (!v) return\n if (value === undefined) setInternalValue(v)\n onValueChange?.(v)\n }}\n disabled={resolvedDisabled}\n className={cn(segmentedControlVariants({ fullWidth }), className)}\n {...props}\n >\n {children}\n </ToggleGroupPrimitive.Root>\n </SegmentedControlContext.Provider>\n )\n }\n)\nSegmentedControl.displayName = 'SegmentedControl'\n\n// ── Item ──\n\n/\n Icon-only base — Polaris/Atlassian idiom:`aspect-square + p-0 + flex-center`。\n * 0 magic-number、0 公式、0 border-deduction;flex centering(已在 itemVariants base)\n * 自動將 SVG 視覺置中,任何 size / icon 都自然正方形。\n \n 對齊 `Button.tsx` 的 `ICON_ONLY_BASE`(2026-04-25 從 padding-formula 派改 padding-free)。\n * Rule-of-3:目前 2 處 consumer(Button + SegmentedControl),尚未抽 utility/token;\n * 第 3 個 host 加入時抽到 `packages/design-system/src/utils/`。\n \n 舊公式 `(field-height - icon)/2` 沒扣 border 2px,造成 SegmentedControl item 從\n * 設計 spec「自然正方形」漂移為 34×32 長方形(2026-04-25 audit 發現)。\n /\nconst ICON_ONLY_BASE = 'aspect-square p-0 min-w-0 gap-0'\n\nconst itemVariants = cva(\n [\n 'relative inline-flex items-center justify-center',\n 'whitespace-nowrap font-medium',\n 'border border-border bg-surface text-fg-secondary',\n 'transition-colors duration-150',\n 'cursor-pointer select-none',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:z-20',\n // disabled：cursor-not-allowed + 鎖住 hover 色（不用 pointer-events-none，否則 cursor 無法變）\n // button[disabled] 本身擋 click，不需靠 pointer-events: none\n 'disabled:cursor-not-allowed disabled:text-fg-disabled',\n 'disabled:hover:text-fg-disabled disabled:hover:border-border',\n // hover（未選）：border 加深一階 + 文字轉深，對齊 Input / Chip hover\n 'hover:text-foreground hover:border-border-hover hover:z-[5]',\n // selected: 文字 + 邊框都用 primary base,底色維持 bg-surface 不變 (跟 Chip 一致)\n // ── 這是 pill 風格元件 (Chip / SegmentedControl) 的 canonical 選中規則(SSOT = semantic.css「選中狀態」段):\n // primary base 同時染文字和線條;底色不改 (不用 primary-subtle)。\n // 2026-07-06 user 拍板:持續選中 hover 階 → base(三家世界級「瞬時弱、持續強」實錘)。\n // Tabs 是 underline 風格,規則不同 (文字 foreground + 底線 primary)。\n // z-10 讓 border 浮在相鄰 item 之上\n 'data-[state=on]:text-primary data-[state=on]:border-primary data-[state=on]:z-10',\n // 選中之上的 hover = 同色相升 hover 階(2026-07-06 user 拍板;Button pressed hover 家族\n // + Ant active hover 同派;跟 Chip 一致,顯式宣告解掉 CSS 平手 source-order 脆弱性)\n 'data-[state=on]:hover:text-primary-hover data-[state=on]:hover:border-primary-hover',\n // disabled × selected 疊加(2026-07-07 user 拍板統一;M24 disabled 全滅,同 Chip)\n 'data-[state=on]:disabled:border-border data-[state=on]:disabled:text-fg-disabled',\n 'data-[state=on]:disabled:hover:border-border data-[state=on]:disabled:hover:text-fg-disabled',\n // item 連體：除第一個外，-ml-px 讓相鄰 border 重疊\n 'first:rounded-l-md last:rounded-r-md',\n '[&:not(:first-child)]:-ml-px',\n ],\n {\n variants: {\n size: {\n xs: 'h-field-xs px-2 text-caption leading-compact gap-0',\n sm: 'h-field-sm px-3 text-body leading-compact gap-1',\n md: 'h-field-md px-3 text-body leading-compact gap-1',\n lg: 'h-field-lg px-3 text-body-lg leading-compact gap-1',\n },\n fullWidth: {\n true: 'flex-1 min-w-0',\n false: '',\n },\n },\n defaultVariants: {\n size: 'md',\n fullWidth: false,\n },\n }\n)\n\n// iconOnly 是 group-level 決策（由 <SegmentedControl iconOnly> 控制），\n// 不是 per-item 決策，所以 Item 型別不用 discriminated union 強制 iconOnly。\n// 但當 group iconOnly = true 時，每個 item 必須提供 startIcon + aria-label——\n// 這是語意契約，在 render 階段檢查並在 dev mode 發出警告（TS 層做不到這層檢查）。\nexport interface SegmentedControlItemProps\n // asChild Omit(2026-07-18 決策2):item 固定渲染 [startIcon?, <span>{children}</span>, badge?]\n // 多節點陣列 → Radix Slot React.Children.only 恆 crash。children(label)保留合法。對齊 Chip 收窄。\n extends Omit<React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>, 'asChild'> {\n /* 左側 icon（LucideIcon）。group iconOnly = true 時必填。 /\n startIcon?: LucideIcon\n /* 右側 suffix badge（通常是計數指示器）。group iconOnly = true 時會被忽略。 /\n badge?: React.ReactNode\n /\n 無障礙名稱。帶 label 時可選（label 已傳達語意），\n * 但 group iconOnly = true 時必填——同時驅動 screen reader 和自動 tooltip。\n /\n 'aria-label'?: string\n children?: React.ReactNode\n}\n\nconst SegmentedControlItem = React.forwardRef<\n React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n SegmentedControlItemProps\n>(({ className, startIcon: StartIcon, badge, children, 'aria-label': ariaLabel, ...restProps }, ref) => {\n const { size, fullWidth, iconOnly: groupIconOnly } = React.useContext(SegmentedControlContext)\n // 2026-05-18 改 per user 拍板「沒機械化導致偏移」+「做完」approval(對齊 Button xs / uiSize Icon Tier):\n // 原 xs=14 跟 Button xs=16 不一致,xs/sm/md 統一 16 對齊 uiSize.spec.md(xs/sm/md→16, lg→20)。\n // 2026-05-18 改 import ICON_SIZE SSOT(per user『做完』approval,消除 M17 違反 7+ 重複 ternary)\n // 2026-05-31 #14:ICON_SIZE 只有 sm/md/lg key,size='xs' 會落 undefined → 對齊上方註解「xs/sm/md 統一 16」讓 xs 取 sm(16px)。\n const iconSize = size === 'xs' ? ICON_SIZE.sm : ICON_SIZE[size as 'sm' \| 'md' \| 'lg']\n const hasSuffix = badge != null\n\n // Dev-mode 語意契約檢查：group iconOnly = true 時，item 必須有 startIcon + aria-label\n if (import.meta.env?.DEV && groupIconOnly) {\n if (!StartIcon) {\n console.warn(\n '[SegmentedControl] iconOnly 群組內的 item 必須提供 startIcon。'\n )\n }\n if (!ariaLabel) {\n console.warn(\n '[SegmentedControl] iconOnly 群組內的 item 必須提供 aria-label（作為無障礙名稱與自動 tooltip 來源）。'\n )\n }\n }\n\n const effectiveIconOnly = groupIconOnly\n\n const itemEl = (\n <ToggleGroupPrimitive.Item\n ref={ref}\n className={cn(\n itemVariants({ size, fullWidth }),\n effectiveIconOnly && ICON_ONLY_BASE,\n className,\n )}\n aria-label={ariaLabel}\n {...restProps}\n >\n {StartIcon && <StartIcon size={iconSize} aria-hidden />}\n {!effectiveIconOnly && children != null && <span className=\"px-1\">{children}</span>}\n {/ suffix wrapper：即使目前只有 badge，wrapper 從第一天就存在，\n 未來若開放 endIcon，直接加入此 span 內 gap-1 自動生效 /}\n {hasSuffix && !effectiveIconOnly && (\n <span className=\"inline-flex items-center gap-1\">{badge}</span>\n )}\n </ToggleGroupPrimitive.Item>\n )\n\n // icon-only 自動包 Tooltip（與 Button icon-only 一致）\n if (effectiveIconOnly && typeof ariaLabel === 'string') {\n return (\n <Tooltip>\n <TooltipTrigger asChild>{itemEl}</TooltipTrigger>\n <TooltipContent>{ariaLabel}</TooltipContent>\n </Tooltip>\n )\n }\n\n return itemEl\n})\nSegmentedControlItem.displayName = 'SegmentedControlItem'\n\n// Story auto-compile metadata — Phase 2 fill(2026-05-15)\n// Sizes 真實 cva keys = xs/sm/md/lg(itemVariants.size),映射 field-height- token tier\n// SegmentedControl 無語意 variant(選中 vs 未選是 state 不是 variant)— 與 Button.variant 刻意不同(spec「與 Button 的血緣」段)\nexport const segmentedControlMeta = {\n component: 'SegmentedControl',\n family: 3, // Family 3(Pill Layout)— 對齊 spec frontmatter family:3 + body L42\n variants: {},\n sizes: {\n xs: { fieldHeight: 24, typography: 'caption', iconSize: 16, purpose: 'row-embedded inline action / DataTable inline filter' },\n sm: { fieldHeight: 28, typography: 'body', iconSize: 16, purpose: 'compact chrome bar / dense toolbar' },\n md: { fieldHeight: 32, typography: 'body', iconSize: 16, purpose: '預設 — form field 對齊' },\n lg: { fieldHeight: 36, typography: 'body-lg', iconSize: 20, purpose: 'touch / prominent CTA' },\n },\n // 2026-07-04 audit 對齊:cva 無 active(按下)專屬樣式,移除 'active'\n // 'selected' = data-[state=on](2026-07-07 meta 詞彙統一補列:持續選中一律 'selected';cva 無按壓 active 樣式)\n states: ['default', 'hover', 'selected', 'focus-visible', 'disabled'],\n tokens: {\n bg: ['bg-surface'],\n fg: ['text-fg-disabled', 'text-fg-secondary', 'text-foreground', 'text-primary'], // selected 態 cva data-[state=on]:text-primary 實際消費(2026-07-06 選中改 base)\n ring: ['ring-ring'],\n },\n defaultSize: 'md',\n} as const\n\nexport { SegmentedControl, SegmentedControlItem, segmentedControlVariants, itemVariants as segmentedControlItemVariants }\nexport type { SegmentedControlSize }\n"],"names":[],"mappings":"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"}

package/dist/components/Select/select.d.ts CHANGED Viewed

@@ -104,10 +104,10 @@ export interface SelectProps extends Pick<React.SelectHTMLAttributes<HTMLSelectE
      *  DataTable cell-as-input 用:open=false 時 cell 自動 exit edit mode(避免 dismiss 後卡住)。 */
     onOpenChange?: (open: boolean) => void;
     /**
-     * Display mode 顯 picker intrinsic end icon(2026-05-08 D path Phase 1)。
-     * 預設 false:`mode="display"` 純展示 bare span(向後相容)。
-     * `variant="naked" && mode="display"` 場景(DataTable cell)opt-in 設 true → wrap 進
-     * Field naked-display + 渲 ChevronDown ItemSuffix。**只 display mode 生效**;readonly /
+     * View mode 顯 picker intrinsic end icon(2026-05-08 D path Phase 1)。
+     * 預設 false:`mode="view"` 純展示 bare span(向後相容)。
+     * `variant="naked" && mode="view"` 場景(DataTable cell)opt-in 設 true → wrap 進
+     * Field naked-view + 渲 ChevronDown ItemSuffix。**只 view mode 生效**;readonly /
      * disabled / edit 已有 Field wrapper + suffix(不受此 prop 影響)。
      * Authority:`data-table.spec.md:204` + `inline-action.spec.md:157`「Field family endAction(自動繼承)」。
      * @default false
@@ -117,9 +117,9 @@ export interface SelectProps extends Pick<React.SelectHTMLAttributes<HTMLSelectE
      * 「已選項目」客製 render(2026-05-07 v15.5;2026-07-08 A 案回歸修正擴及 4 mode)。
      *
      * 設了 → 已選值不走純文字 / Tag 預設 path,改用 consumer 提供的 ReactNode(收 selectedOpt)。
-     * **display / readonly / disabled / edit 4 mode 共享同一 renderer**(field-controls.spec.md
+     * **view / readonly / disabled / edit 4 mode 共享同一 renderer**(field-controls.spec.md
      * 共享 contract (a),禁 edit-only)— renderer 輸出屬「值內容」(status icon+text 等語意呈現),
-     * display 態照常渲染;A 案撤的是 affordance(chevron/outline),非值內容(field.spec.md L6 分層)。
+     * view 態照常渲染;A 案撤的是 affordance(chevron/outline),非值內容(field.spec.md L6 分層)。
      * Searchable+open 仍走 input(搜尋優先)。Empty value(no selection)仍走 placeholder。
      *
      * 用例:PeoplePicker 用此 slot 把 single 選中的 person render 成 PersonDisplay
@@ -131,6 +131,16 @@ export interface SelectProps extends Pick<React.SelectHTMLAttributes<HTMLSelectE
      *  僅 Custom path(searchable dropdown)生效,Native path 無搜尋空狀態。
      *  對齊 MUI noOptionsText / Ant notFoundContent / Polaris emptyState 三家公開覆寫點共識。 */
     emptyText?: string;
+    /**
+     * 可建立新選項(creatable,2026-07-18 決策11 user 拍板 forward 到 Select)。**需搭配 `searchable`**
+     * ——搜尋非空且無完全同名既有選項時,dropdown 顯 create row(Plus + `createLabel`)。
+     * 邏輯/顯示/互動 SSOT 住在 SelectMenu(Select 的 trigger 搜尋以受控 `search` 驅動 SelectMenu creatable
+     * 顯隱)。與 Combobox.creatable 同一底層。非 searchable 時無 create 通道(無輸入處)。 */
+    creatable?: boolean;
+    /** 建立新選項 callback（收使用者輸入的搜尋字串）。 */
+    onCreate?: (value: string) => void;
+    /** create row 的 label 格式，預設 '直接使用「{query}」'（forward SelectMenu SSOT）。 */
+    createLabel?: (query: string) => string;
 }
 declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement | HTMLSelectElement>>;
 export declare const selectMeta: {

package/dist/components/Select/select.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/select.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAwB,UAAU,EAAE,MAAM,8CAA8C,CAAA;AAK7H,OAAO,EAAwD,KAAK,gBAAgB,EAAE,MAAM,mDAAmD,CAAA;AAc/I;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,YAAa,SAAQ,gBAAgB;IACpD,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,2CAA2C;AAC3C,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;CACd;AAID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CACV,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAE3C,IAAI,GAAG,WAAW,GAAG,OAAO,GAC5B,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GACzC,SAAS,GAAG,QAAQ,GAAG,WAAW,GAClC,YAAY,GAAG,kBAAkB,GAAG,mBAAmB,GAEvD,WAAW,GAAG,cAAc,CAC/B;IACD,4FAA4F;IAC5F,CAAC,aAAa,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAA;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,uFAAuF;IACvF,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB;;iEAE6D;IAC7D,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,mEAAmE;IACnE,MAAM,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC5B,qFAAqF;IACrF,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB;;;;kGAI8F;IAC9F,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IACzB,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;4CAGwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;0EAEsE;IACtE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;yFACqF;IACrF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC;;;;;;;;OAQG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B;;;;;;;;;;;OAWG;IACH,oBAAoB,CAAC,EAAE,CAAC,WAAW,EAAE,YAAY,KAAK,KAAK,CAAC,SAAS,CAAA;IACrE;;;qFAGiF;IACjF,SAAS,CAAC,EAAE,MAAM,CAAA;~~CACnB~~;~~AAgqBD~~,QAAA,MAAM,MAAM,wGAUX,CAAA;AAKD,eAAO,MAAM,UAAU;;;;;;;;;;;CAgBb,CAAA;AAEV,OAAO,EAAE,MAAM,EAAE,CAAA"}
1	+ {"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/select.tsx"],"names":[],"mappings":"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"}

package/dist/components/Select/select.js CHANGED Viewed

@@ -136,7 +136,7 @@ function ReadonlyDisplay({
   const isTextDisplay = display !== "tag";
   const emptyColorCls = fieldEmptyColorClass(resolvedMode);
   const emptyText = placeholder ?? emptyDisplay;
-  if (resolvedMode === "display") {
+  if (resolvedMode === "view") {
     if (!showDisplayEndIcon) {
       if (!value) return /* @__PURE__ */ jsx("span", { className: cn(fieldDisplayTextClass(sz), emptyColorCls, className), children: emptyText });
       if (selectedItemRenderer && selectedOpt) {
@@ -150,8 +150,8 @@ function ReadonlyDisplay({
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: cn(fieldWrapperStyles({ mode: "display", variant, width, size: sz }), value && !isTextDisplay && tagPadding[sz], className),
-        "data-field-mode": "display",
+        className: cn(fieldWrapperStyles({ mode: "view", variant, width, size: sz }), value && !isTextDisplay && tagPadding[sz], className),
+        "data-field-mode": "view",
         children: [
           selectedItemRenderer && value && selectedOpt ? (
             // renderer 優先(同 CustomSelectTriggerContent 優先序):值內容歸 renderer,chevron 歸 D-path chrome
@@ -208,13 +208,16 @@ const NativeSelect = React.forwardRef(
     // 2026-07-04:Custom-path-only props 顯式 destructure 丟棄(不 spread 到原生 <select> 消 React
     // unknown-prop warning);各 prop docblock 已註「僅 Custom path 生效」語意
     // 2026-07-08 A 案回歸修正:selectedItemRenderer 從丟棄名單移出 — Native path 的
-    // ReadonlyDisplay(display/readonly/disabled)同樣消費值內容 renderer(contract (a) 4-mode
+    // ReadonlyDisplay(view/readonly/disabled)同樣消費值內容 renderer(contract (a) 4-mode
     // 共享,值內容不因 pointer type 而異);native <select> edit 路徑仍不消費(原生 option 無法客製 render)。
     searchable: _searchable,
     groups: _groups,
     loading: _loading,
     minRows: _minRows,
     emptyText: _emptyText,
+    creatable: _creatable,
+    onCreate: _onCreate,
+    createLabel: _createLabel,
     defaultOpen: _defaultOpen,
     onOpenChange: _onOpenChange,
     selectedItemRenderer,
@@ -339,6 +342,9 @@ const CustomSelect = React.forwardRef(
     loading,
     minRows,
     emptyText,
+    creatable = false,
+    onCreate,
+    createLabel,
     defaultOpen = false,
     onOpenChange,
     selectedItemRenderer,
@@ -380,7 +386,8 @@ const CustomSelect = React.forwardRef(
     const selectedOpt = options == null ? void 0 : options.find((o) => o.value === value);
     const selectedLabel = (selectedOpt == null ? void 0 : selectedOpt.label) ?? value ?? "";
     const SelectedIcon = selectedOpt == null ? void 0 : selectedOpt.icon;
-    const filteredOptions = searchable && search ? options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase())) : options;
+    const trimmedSearch = search.trim();
+    const filteredOptions = searchable && trimmedSearch ? options.filter((o) => o.label.toLowerCase().includes(trimmedSearch.toLowerCase())) : options;
     const menuOptions = React.useMemo(
       () => filteredOptions.map((opt) => ({
         value: opt.value,
@@ -519,6 +526,11 @@ const CustomSelect = React.forwardRef(
         value: value ?? null,
         onValueChange: handleValueChange,
         searchable: false,
+        creatable,
+        onCreate,
+        createLabel,
+        search: searchable ? search : void 0,
+        onSearchChange: searchable ? setSearch : void 0,
         loading,
         emptyText,
         size,