npm - @qijenchen/design-system - Versions diffs - 0.1.0-beta.80 → 0.1.0-beta.82 - Mend

@qijenchen/design-system 0.1.0-beta.80 → 0.1.0-beta.82

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

package/dist/components/Slider/slider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"slider.js","sources":["../../../src/components/Slider/slider.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as SliderPrimitive from '@radix-ui/react-slider'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { useFieldContext, useResolvedFieldDisabled, useResolvedFieldMode } from '@/design-system/components/Field/field-context'\n\n/*\n Slider — 數值範圍選取器\n \n 基於 Radix Slider primitive,橋接設計系統 token。詳細設計原則見 `slider.spec.md`。\n \n ── 核心設計 ──\n * 1. 視覺單一:track 厚度、thumb 直徑、thumb 邊框都是固定值,不隨 `size` 變\n * 2. `size` 只控容器外高:對齊 Field family 的 `h-field-` tier,讓 Slider 能跟\n Input / NumberInput / Select 在 Field 內並排對齊\n * 3. Range mode 免費:Radix 原生支援 `value: number[]`,傳多值自動多 thumb\n * 4. Hover / active 用 elevation 陰影:不用色變,避免暗示「這是 button」\n /\n\nconst sliderRootVariants = cva(\n // 容器外層:水平置中 + relative(Radix 會絕對定位內部元素)\n // flex items-center 讓 track+thumb 在任何 field-height 下都垂直置中\n //\n // ── Disabled 策略:灰階 token swap(對齊 Button / Checkbox)──\n // Slider 的藍色 range 是美學視覺,不是 semantic state——使用者從 disabled\n // slider 需要辨識的是 thumb 位置 + range 長度,這兩者不依賴顏色。失去藍色\n // 沒有資訊損失。\n //\n // 跟 Switch 的差別:Switch 的 on/off 是純顏色差異(沒有形狀差異),所以必須\n // 靠 opacity 保留色彩身分。Slider 的位置/長度是形狀差異,不需要保留顏色身分,\n // 跟 Checkbox(checkmark 形狀 = semantic 載體)同類,應該走灰階。\n //\n // 詳細判準見 `slider.spec.md` 的「Disabled 策略」章節。\n [\n 'relative flex items-center w-full min-w-0 touch-none select-none',\n 'data-[disabled]:cursor-not-allowed',\n ],\n {\n variants: {\n size: {\n sm: 'h-field-sm',\n md: 'h-field-md',\n lg: 'h-field-lg',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n },\n)\n\nexport interface SliderProps\n extends Omit<React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, 'children'>,\n VariantProps<typeof sliderRootVariants> {}\n\n// code-quality-allow: long-function — foundational composite(thumb-count 推導 + Field disabled 整合 + multi-mode render)\nconst Slider = React.forwardRef<\n React.ElementRef<typeof SliderPrimitive.Root>,\n SliderProps\n>(({ className, size, value, defaultValue, 'aria-label': ariaLabel, ...props }, ref) => {\n // Field 家族整合:被 <Field mode=\"disabled\"> 包裹時自動 disabled(per slider.spec.md「Slider 作為 Field\n // 家族整合時繼承其 canonical」)。Slider 已有完整 data-[disabled] 視覺,故只需把 fieldCtx disabled 接上。\n // 2026-06-08 SSOT:讀 useResolvedFieldDisabled()(fieldCtx.disabled)→ <Field disabled> 與 <Field mode=\"disabled\"> 都生效\n // 2026-06-12 補:<Field mode=\"readonly\"> → 鎖互動保留視覺(readonly ≠ disabled,不降色)\n const fieldDisabled = useResolvedFieldDisabled()\n const fieldMode = useResolvedFieldMode({ mode: undefined, disabled: undefined, readOnly: undefined })\n const fieldReadonly = fieldMode === 'readonly'\n // 2026-06-10 a11y:Field 內 Slider thumb(role=slider)無 accessible name(deep-audit axe 抓 aria-input-field-name)\n // → 預設接 FieldLabel(aria-labelledby),consumer ariaLabel 優先。對齊 rating/time-picker labelId 接線。\n const fieldLabelId = useFieldContext()?.labelId\n // 推導要渲染幾個 thumb:controlled 用 value,uncontrolled 用 defaultValue,\n // 都沒有時 fallback 單 thumb(Radix 預設行為)\n const thumbCount =\n (Array.isArray(value) && value.length) \|\|\n (Array.isArray(defaultValue) && defaultValue.length) \|\|\n 1\n\n return (\n <SliderPrimitive.Root\n ref={ref}\n value={value}\n defaultValue={defaultValue}\n className={cn(sliderRootVariants({ size }), fieldReadonly && 'pointer-events-none', className)}\n {...props}\n disabled={(props as { disabled?: boolean }).disabled \|\| fieldDisabled}\n // <Field mode=\"readonly\"> cascade(2026-06-12 補):鎖互動、保留正常視覺(readonly\n // 不降色;值仍可讀)。pointer-events-none 擋滑鼠,thumb tabIndex=-1 擋鍵盤。\n data-readonly={fieldReadonly \|\| undefined}\n >\n {/\n Track — rest 用 bg-secondary(n-3,「微淡可辨」),disabled 用 bg-muted(n-2,退化)。\n 跟 Tag neutral / Badge low 同家族。\n /}\n <SliderPrimitive.Track className={cn(\n 'relative grow overflow-hidden rounded-full h-1',\n // Rest:bg-secondary(n-3,「微淡可辨」的 subtle fill,跟 Tag neutral / Badge low 同級)\n // Disabled:bg-muted(n-2,「disabled-like 退化」底色)\n 'bg-secondary data-[disabled]:bg-muted',\n )}>\n {/\n Range — 填滿段。\n\n ── Range 色 = Thumb border 色(語意一致) ──\n Rest 兩者都是 `primary`,disabled 兩者都是 `border`(n-5)。為什麼要一致?\n Range 是「填充視覺」,Thumb border 是「thumb 的輪廓線」——視覺上 thumb\n 的 border 剛好是 range 的延續(thumb 坐落在 range 的端點上,border 跟\n range 在色彩上融為一體,看起來像「range 包住 thumb」而不是「thumb 浮在\n range 上」)。兩個 token 綁在一起,不論什麼 state 都一致。\n /}\n <SliderPrimitive.Range\n className={cn(\n 'absolute h-full bg-primary',\n 'data-[disabled]:bg-border',\n )}\n />\n </SliderPrimitive.Track>\n\n {/\n Thumb — N 個(由 thumbCount 決定)。\n 白底 + 2px 邊框,邊框色 = Range 色(一致綁定):\n - Rest: `border-primary` ↔ Range `bg-primary`\n - Disabled: `border-border` ↔ Range `bg-border`\n 這個一致性讓 thumb border 跟 range 融為一體,看起來像「range 包住 thumb」\n 的連續視覺。不論 state,thumb border 跟 range 永遠同色。\n\n Thumb bg 兩態(2026-06-12 user 拍板,深色模式破洞修正):\n - Rest/hover/active:`bg-on-emphasis`(固定白、深淺主題不反轉)— 對齊自家\n Switch thumb(switch.tsx bg-on-emphasis)+ Radix Themes(thumb 字面 white\n 無 dark override)+ Apple iOS(深色模式旋鈕仍白)。原 `bg-surface` 在深色\n = 8% 白半透明 → thumb 變深色破洞且 track 穿透。\n - Disabled:`bg-canvas`(不透明頁面背景色)— 沉回背景表達「不可動」,\n = Radix disabled thumb 用 gray-1(app background)同款;不透明故 track\n 不穿透。不可用 bg-muted(曾踩 thumb 跟 track 同色融合 bug;canvas 與\n track 的 muted 隔 n-5 邊框 + 不同值,不融)。\n /}\n {Array.from({ length: thumbCount }).map((_, i) => (\n <SliderPrimitive.Thumb\n key={i}\n tabIndex={fieldReadonly ? -1 : undefined}\n aria-readonly={fieldReadonly \|\| undefined}\n className={cn(\n 'block h-4 w-4 shrink-0 rounded-full cursor-grab',\n 'bg-on-emphasis border-2 border-primary',\n 'transition-all duration-150',\n // Hover:border 加深到 primary-hover + elevation 陰影\n 'hover:border-primary-hover hover:[box-shadow:var(--elevation-100)]',\n 'active:cursor-grabbing active:border-primary-hover active:[box-shadow:var(--elevation-200)]',\n // Focus:border 加深(跟 hover 同視覺),不加 ring 或 halo\n 'outline-none focus-visible:border-primary-hover',\n // Disabled:border 跟 Range 一起退成 border(n-5),bg 沉回 canvas(不透明背景色)\n 'data-[disabled]:cursor-not-allowed data-[disabled]:border-border data-[disabled]:bg-canvas',\n 'data-[disabled]:hover:[box-shadow:none]',\n )}\n // aria-label 策略(對齊 WAI-ARIA APG multi-thumb slider + Radix 原生語意標籤):\n // - consumer 傳 ariaLabel:單 thumb → 原樣;多 thumb → `{label} (N)` 區分\n // - 沒傳 ariaLabel:回傳 undefined,讓 Radix getLabel 提供語意標籤\n // (2 thumb → Minimum/Maximum;>2 thumb → Value N of M;單 thumb → 無)\n // 比硬寫 `Thumb N` 更語意化,且讓「繼承 Radix a11y 預設」名實相符\n aria-label={\n ariaLabel\n ? thumbCount > 1\n ? `${ariaLabel} (${i + 1})`\n : ariaLabel\n : undefined\n }\n aria-labelledby={!ariaLabel && fieldLabelId ? fieldLabelId : undefined}\n />\n ))}\n </SliderPrimitive.Root>\n )\n})\nSlider.displayName = 'Slider'\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 sliderMeta = {\n component: 'Slider',\n family: null, // self-contained(對齊 spec;同 rating.tsx 慣例),\n variants: {},\n // size 只控容器外高,對齊 Field family h-field-(md density:28/32/36px,uiSize.css)。\n // track 厚度 / thumb 直徑固定不隨 size 變,故無 iconSize / typography。\n // fieldHeight key 對齊 compile-stories.mjs 消費 schema(同 Button/Checkbox/Switch)。\n sizes: {\n sm: { fieldHeight: 28, when: 'Toolbar / inline 編輯' },\n md: { fieldHeight: 32, when: '預設 — Form / cell inline edit' },\n lg: { fieldHeight: 36, when: 'Marketing / 高 touch 區' },\n },\n states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n tokens: {\n bg: ['bg-muted', 'bg-primary', 'bg-secondary', 'bg-on-emphasis', 'bg-canvas'],\n fg: [],\n ring: [],\n },\n} as const\n\nexport { Slider, sliderRootVariants }\n"],"names":[],"mappings":";;;;;;AAmBA,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAczB;AAAA,IACE;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;AAOA,MAAM,SAAS,MAAM,WAGnB,CAAC,EAAE,WAAW,MAAM,OAAO,cAAc,cAAc,WAAW,GAAG,MAAA,GAAS,QAAQ;;AAKtF,QAAM,gBAAgB,yBAAA;AACtB,QAAM,YAAY,qBAAqB,EAAE,MAAM,QAAW,UAAU,QAAW,UAAU,QAAW;AACpG,QAAM,gBAAgB,cAAc;AAGpC,QAAM,gBAAe,2BAAA,mBAAmB;AAGxC,QAAM,aACH,MAAM,QAAQ,KAAK,KAAK,MAAM,UAC9B,MAAM,QAAQ,YAAY,KAAK,aAAa,UAC7C;AAEF,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,mBAAmB,EAAE,MAAM,GAAG,iBAAiB,uBAAuB,SAAS;AAAA,MAC5F,GAAG;AAAA,MACJ,UAAW,MAAiC,YAAY;AAAA,MAGxD,iBAAe,iBAAiB;AAAA,MAMhC,UAAA;AAAA,QAAA,oBAAC,gBAAgB,OAAhB,EAAsB,WAAW;AAAA,UAChC;AAAA;AAAA;AAAA,UAGA;AAAA,QAAA,GAYA,UAAA;AAAA,UAAC,gBAAgB;AAAA,UAAhB;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA,GAEJ;AAAA,QAoBC,MAAM,KAAK,EAAE,QAAQ,WAAA,CAAY,EAAE,IAAI,CAAC,GAAG,MAC1C;AAAA,UAAC,gBAAgB;AAAA,UAAhB;AAAA,YAEC,UAAU,gBAAgB,KAAK;AAAA,YAC/B,iBAAe,iBAAiB;AAAA,YAChC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA;AAAA,cAEA;AAAA,cACA;AAAA;AAAA,cAEA;AAAA;AAAA,cAEA;AAAA,cACA;AAAA,YAAA;AAAA,YAOF,cACE,YACI,aAAa,IACX,GAAG,SAAS,KAAK,IAAI,CAAC,MACtB,YACF;AAAA,YAEN,mBAAiB,CAAC,aAAa,eAAe,eAAe;AAAA,UAAA;AAAA,UA5BxD;AAAA,QAAA,CA8BR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AACD,OAAO,cAAc;AAId,MAAM,aAAa;AAAA,EACxB,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA;AAAA;AAAA;AAAA,EAIV,OAAO;AAAA,IACL,IAAI,EAAE,aAAa,IAAI,MAAM,sBAAA;AAAA,IAC7B,IAAI,EAAE,aAAa,IAAI,MAAM,+BAAA;AAAA,IAC7B,IAAI,EAAE,aAAa,IAAI,MAAM,wBAAA;AAAA,EAAwB;AAAA,EAEvD,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAC,YAAY,cAAc,gBAAgB,kBAAkB,WAAW;AAAA,IAC5E,IAAI,CAAA;AAAA,IACJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}
1	+ {"version":3,"file":"slider.js","sources":["../../../src/components/Slider/slider.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as SliderPrimitive from '@radix-ui/react-slider'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { useFieldContext, useResolvedFieldDisabled, useResolvedFieldMode } from '@/design-system/components/Field/field-context'\n\n/*\n Slider — 數值範圍選取器\n \n 基於 Radix Slider primitive,橋接設計系統 token。詳細設計原則見 `slider.spec.md`。\n \n ── 核心設計 ──\n * 1. 視覺單一:track 厚度、thumb 直徑、thumb 邊框都是固定值,不隨 `size` 變\n * 2. `size` 只控容器外高:對齊 Field family 的 `h-field-` tier,讓 Slider 能跟\n Input / NumberInput / Select 在 Field 內並排對齊\n * 3. Range mode 免費:Radix 原生支援 `value: number[]`,傳多值自動多 thumb\n * 4. Hover / active 用 elevation 陰影:不用色變,避免暗示「這是 button」\n /\n\nconst sliderRootVariants = cva(\n // 容器外層:水平置中 + relative(Radix 會絕對定位內部元素)\n // flex items-center 讓 track+thumb 在任何 field-height 下都垂直置中\n //\n // ── Disabled 策略:灰階 token swap(對齊 Button / Checkbox)──\n // Slider 的藍色 range 是美學視覺,不是 semantic state——使用者從 disabled\n // slider 需要辨識的是 thumb 位置 + range 長度,這兩者不依賴顏色。失去藍色\n // 沒有資訊損失。\n //\n // 跟 Switch 的差別:Switch 的 on/off 是純顏色差異(沒有形狀差異),所以必須\n // 靠 opacity 保留色彩身分。Slider 的位置/長度是形狀差異,不需要保留顏色身分,\n // 跟 Checkbox(checkmark 形狀 = semantic 載體)同類,應該走灰階。\n //\n // 詳細判準見 `slider.spec.md` 的「Disabled 策略」章節。\n [\n 'relative flex items-center w-full min-w-0 touch-none select-none',\n 'data-[disabled]:cursor-not-allowed',\n ],\n {\n variants: {\n size: {\n sm: 'h-field-sm',\n md: 'h-field-md',\n lg: 'h-field-lg',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n },\n)\n\nexport interface SliderProps\n // 'orientation' 一併 Omit(2026-07-07 deep-audit A.1b 殘項):spec「不支援 vertical」宣稱的\n // 型別面機械封鎖 — DS 樣式(track h-1 / w-full / items-center)假設 horizontal,透傳 vertical 壞版。\n extends Omit<React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, 'children' \| 'orientation'>,\n VariantProps<typeof sliderRootVariants> {}\n\n// code-quality-allow: long-function — foundational composite(thumb-count 推導 + Field disabled 整合 + multi-mode render)\nconst Slider = React.forwardRef<\n React.ElementRef<typeof SliderPrimitive.Root>,\n SliderProps\n>(({ className, size, value, defaultValue, 'aria-label': ariaLabel, ...props }, ref) => {\n // Field 家族整合:被 <Field mode=\"disabled\"> 包裹時自動 disabled(per slider.spec.md「Slider 作為 Field\n // 家族整合時繼承其 canonical」)。Slider 已有完整 data-[disabled] 視覺,故只需把 fieldCtx disabled 接上。\n // 2026-06-08 SSOT:讀 useResolvedFieldDisabled()(fieldCtx.disabled)→ <Field disabled> 與 <Field mode=\"disabled\"> 都生效\n // 2026-06-12 補:<Field mode=\"readonly\"> → 鎖互動保留視覺(readonly ≠ disabled,不降色)\n const fieldDisabled = useResolvedFieldDisabled()\n const fieldMode = useResolvedFieldMode({ mode: undefined, disabled: undefined, readOnly: undefined })\n const fieldReadonly = fieldMode === 'readonly'\n // 2026-06-10 a11y:Field 內 Slider thumb(role=slider)無 accessible name(deep-audit axe 抓 aria-input-field-name)\n // → 預設接 FieldLabel(aria-labelledby),consumer ariaLabel 優先。對齊 rating/time-picker labelId 接線。\n const fieldLabelId = useFieldContext()?.labelId\n // 推導要渲染幾個 thumb:controlled 用 value,uncontrolled 用 defaultValue,\n // 都沒有時 fallback 單 thumb(Radix 預設行為)\n const thumbCount =\n (Array.isArray(value) && value.length) \|\|\n (Array.isArray(defaultValue) && defaultValue.length) \|\|\n 1\n\n return (\n <SliderPrimitive.Root\n ref={ref}\n value={value}\n defaultValue={defaultValue}\n className={cn(sliderRootVariants({ size }), fieldReadonly && 'pointer-events-none', className)}\n {...props}\n disabled={(props as { disabled?: boolean }).disabled \|\| fieldDisabled}\n // <Field mode=\"readonly\"> cascade(2026-06-12 補):鎖互動、保留正常視覺(readonly\n // 不降色;值仍可讀)。pointer-events-none 擋滑鼠,thumb tabIndex=-1 擋鍵盤。\n data-readonly={fieldReadonly \|\| undefined}\n >\n {/\n Track — rest 用 bg-secondary(n-3,「微淡可辨」),disabled 用 bg-muted(n-2,退化)。\n 跟 Tag neutral / Badge low 同家族。\n /}\n <SliderPrimitive.Track className={cn(\n 'relative grow overflow-hidden rounded-full h-1',\n // Rest:bg-secondary(n-3,「微淡可辨」的 subtle fill,跟 Tag neutral / Badge low 同級)\n // Disabled:bg-muted(n-2,「disabled-like 退化」底色)\n 'bg-secondary data-[disabled]:bg-muted',\n )}>\n {/\n Range — 填滿段。\n\n ── Range 色 = Thumb border 色(語意一致) ──\n Rest 兩者都是 `primary`,disabled 兩者都是 `border`(n-5)。為什麼要一致?\n Range 是「填充視覺」,Thumb border 是「thumb 的輪廓線」——視覺上 thumb\n 的 border 剛好是 range 的延續(thumb 坐落在 range 的端點上,border 跟\n range 在色彩上融為一體,看起來像「range 包住 thumb」而不是「thumb 浮在\n range 上」)。兩個 token 綁在一起,不論什麼 state 都一致。\n /}\n <SliderPrimitive.Range\n className={cn(\n 'absolute h-full bg-primary',\n 'data-[disabled]:bg-border',\n )}\n />\n </SliderPrimitive.Track>\n\n {/\n Thumb — N 個(由 thumbCount 決定)。\n 白底 + 2px 邊框,邊框色 = Range 色(一致綁定):\n - Rest: `border-primary` ↔ Range `bg-primary`\n - Disabled: `border-border` ↔ Range `bg-border`\n 這個一致性讓 thumb border 跟 range 融為一體,看起來像「range 包住 thumb」\n 的連續視覺。同色綁定 scope = rest 與 disabled 兩態;互動態(hover/active/focus)\n 只動 thumb border 色階(+ elevation),range 填色恆定 —— 2026-07-06 修正原\n 「不論 state 永遠同色」過度宣稱(hover/active 一直都只動 thumb,claim 與 code 不符)。\n\n Thumb bg 兩態(2026-06-12 user 拍板,深色模式破洞修正):\n - Rest/hover/active:`bg-on-emphasis`(固定白、深淺主題不反轉)— 對齊自家\n Switch thumb(switch.tsx bg-on-emphasis)+ Radix Themes(thumb 字面 white\n 無 dark override)+ Apple iOS(深色模式旋鈕仍白)。原 `bg-surface` 在深色\n = 8% 白半透明 → thumb 變深色破洞且 track 穿透。\n - Disabled:`bg-canvas`(不透明頁面背景色)— 沉回背景表達「不可動」,\n = Radix disabled thumb 用 gray-1(app background)同款;不透明故 track\n 不穿透。不可用 bg-muted(曾踩 thumb 跟 track 同色融合 bug;canvas 與\n track 的 muted 隔 n-5 邊框 + 不同值,不融)。\n /}\n {Array.from({ length: thumbCount }).map((_, i) => (\n <SliderPrimitive.Thumb\n key={i}\n tabIndex={fieldReadonly ? -1 : undefined}\n aria-readonly={fieldReadonly \|\| undefined}\n className={cn(\n 'block h-4 w-4 shrink-0 rounded-full cursor-grab',\n 'bg-on-emphasis border-2 border-primary',\n 'transition-all duration-150',\n // Hover:border 升 hover 階(light mode 淺一階 lift,= Button primary hover 變色邏輯)\n // + elevation 陰影。2026-07-06 修語:原註解寫「加深」但 primary-hover 比 base 淺,\n // 措辭與 token 相反 — token 不遷就錯註解,註解修正。\n 'hover:border-primary-hover hover:[box-shadow:var(--elevation-100)]',\n // Active(按壓拖曳):深一階 primary-active(= Button active 邏輯 button.tsx active:-active\n // 對照組;原誤用 hover 階 = 全 DS 唯一 active-用-hover 偏移,2026-07-06 雙向全掃修正)\n 'active:cursor-grabbing active:border-primary-active active:[box-shadow:var(--elevation-200)]',\n // Focus:跟 hover 同視覺(hover 階),不加 ring 或 halo\n 'outline-none focus-visible:border-primary-hover',\n // Disabled:border 跟 Range 一起退成 border(n-5),bg 沉回 canvas(不透明背景色)\n 'data-[disabled]:cursor-not-allowed data-[disabled]:border-border data-[disabled]:bg-canvas',\n 'data-[disabled]:hover:[box-shadow:none]',\n )}\n // aria-label 策略(對齊 WAI-ARIA APG multi-thumb slider + Radix 原生語意標籤):\n // - consumer 傳 ariaLabel:單 thumb → 原樣;多 thumb → `{label} (N)` 區分\n // - 沒傳 ariaLabel:回傳 undefined,讓 Radix getLabel 提供語意標籤\n // (2 thumb → Minimum/Maximum;>2 thumb → Value N of M;單 thumb → 無)\n // 比硬寫 `Thumb N` 更語意化,且讓「繼承 Radix a11y 預設」名實相符\n aria-label={\n ariaLabel\n ? thumbCount > 1\n ? `${ariaLabel} (${i + 1})`\n : ariaLabel\n : undefined\n }\n aria-labelledby={!ariaLabel && fieldLabelId ? fieldLabelId : undefined}\n />\n ))}\n </SliderPrimitive.Root>\n )\n})\nSlider.displayName = 'Slider'\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 sliderMeta = {\n component: 'Slider',\n family: null, // self-contained(對齊 spec;同 rating.tsx 慣例),\n variants: {},\n // size 只控容器外高,對齊 Field family h-field-*(md density:28/32/36px,uiSize.css)。\n // track 厚度 / thumb 直徑固定不隨 size 變,故無 iconSize / typography。\n // fieldHeight key 對齊 compile-stories.mjs 消費 schema(同 Button/Checkbox/Switch)。\n sizes: {\n sm: { fieldHeight: 28, when: 'Toolbar / inline 編輯' },\n md: { fieldHeight: 32, when: '預設 — Form / cell inline edit' },\n lg: { fieldHeight: 36, when: 'Marketing / 高 touch 區' },\n },\n states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n tokens: {\n bg: ['bg-muted', 'bg-primary', 'bg-secondary', 'bg-on-emphasis', 'bg-canvas'],\n fg: [],\n ring: [],\n },\n} as const\n\nexport { Slider, sliderRootVariants }\n"],"names":[],"mappings":";;;;;;AAmBA,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAczB;AAAA,IACE;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;AASA,MAAM,SAAS,MAAM,WAGnB,CAAC,EAAE,WAAW,MAAM,OAAO,cAAc,cAAc,WAAW,GAAG,MAAA,GAAS,QAAQ;;AAKtF,QAAM,gBAAgB,yBAAA;AACtB,QAAM,YAAY,qBAAqB,EAAE,MAAM,QAAW,UAAU,QAAW,UAAU,QAAW;AACpG,QAAM,gBAAgB,cAAc;AAGpC,QAAM,gBAAe,2BAAA,mBAAmB;AAGxC,QAAM,aACH,MAAM,QAAQ,KAAK,KAAK,MAAM,UAC9B,MAAM,QAAQ,YAAY,KAAK,aAAa,UAC7C;AAEF,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,mBAAmB,EAAE,MAAM,GAAG,iBAAiB,uBAAuB,SAAS;AAAA,MAC5F,GAAG;AAAA,MACJ,UAAW,MAAiC,YAAY;AAAA,MAGxD,iBAAe,iBAAiB;AAAA,MAMhC,UAAA;AAAA,QAAA,oBAAC,gBAAgB,OAAhB,EAAsB,WAAW;AAAA,UAChC;AAAA;AAAA;AAAA,UAGA;AAAA,QAAA,GAYA,UAAA;AAAA,UAAC,gBAAgB;AAAA,UAAhB;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA,GAEJ;AAAA,QAsBC,MAAM,KAAK,EAAE,QAAQ,WAAA,CAAY,EAAE,IAAI,CAAC,GAAG,MAC1C;AAAA,UAAC,gBAAgB;AAAA,UAAhB;AAAA,YAEC,UAAU,gBAAgB,KAAK;AAAA,YAC/B,iBAAe,iBAAiB;AAAA,YAChC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA;AAAA;AAAA;AAAA,cAIA;AAAA;AAAA;AAAA,cAGA;AAAA;AAAA,cAEA;AAAA;AAAA,cAEA;AAAA,cACA;AAAA,YAAA;AAAA,YAOF,cACE,YACI,aAAa,IACX,GAAG,SAAS,KAAK,IAAI,CAAC,MACtB,YACF;AAAA,YAEN,mBAAiB,CAAC,aAAa,eAAe,eAAe;AAAA,UAAA;AAAA,UAhCxD;AAAA,QAAA,CAkCR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AACD,OAAO,cAAc;AAId,MAAM,aAAa;AAAA,EACxB,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA;AAAA;AAAA;AAAA,EAIV,OAAO;AAAA,IACL,IAAI,EAAE,aAAa,IAAI,MAAM,sBAAA;AAAA,IAC7B,IAAI,EAAE,aAAa,IAAI,MAAM,+BAAA;AAAA,IAC7B,IAAI,EAAE,aAAa,IAAI,MAAM,wBAAA;AAAA,EAAwB;AAAA,EAEvD,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAC,YAAY,cAAc,gBAAgB,kBAAkB,WAAW;AAAA,IAC5E,IAAI,CAAA;AAAA,IACJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}

package/dist/components/Steps/steps.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"steps.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/steps.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE1C,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,YAAY,CAAA;AACxD,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG,UAAU,CAAA;AACzD,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAA;AA4I3F,QAAA,MAAM,iBAAiB;;8EAQrB,CAAA;AAEF,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC,EAC/E,YAAY,CAAC,OAAO,iBAAiB,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;IACtB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,WAAW,CAAC,EAAE,gBAAgB,CAAA;IAC9B,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,eAAe,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,EAAE,CAAA;CAC5C;AAGD,QAAA,MAAM,KAAK,qFAyHV,CAAA;AAKD,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC,EACxD,qBAAqB;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,gBAAgB;;;8EAgBpB,CAAA;AAGF,QAAA,MAAM,QAAQ,qFA8Db,CAAA;~~AAkXD~~,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAGhF,QAAA,MAAM,SAAS,wFA4Bd,CAAA;AAKD,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAEtF,QAAA,MAAM,eAAe,8FA2BpB,CAAA;AAKD,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjF,QAAA,MAAM,WAAW,yFAchB,CAAA;AAOD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;CAeZ,CAAA;AAEV,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,CAAA"}
1	+ {"version":3,"file":"steps.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/steps.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE1C,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,YAAY,CAAA;AACxD,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG,UAAU,CAAA;AACzD,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAA;AA4I3F,QAAA,MAAM,iBAAiB;;8EAQrB,CAAA;AAEF,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC,EAC/E,YAAY,CAAC,OAAO,iBAAiB,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;IACtB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,WAAW,CAAC,EAAE,gBAAgB,CAAA;IAC9B,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,eAAe,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,EAAE,CAAA;CAC5C;AAGD,QAAA,MAAM,KAAK,qFAyHV,CAAA;AAKD,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC,EACxD,qBAAqB;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,gBAAgB;;;8EAgBpB,CAAA;AAGF,QAAA,MAAM,QAAQ,qFA8Db,CAAA;AA0XD,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAGhF,QAAA,MAAM,SAAS,wFA4Bd,CAAA;AAKD,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAEtF,QAAA,MAAM,eAAe,8FA2BpB,CAAA;AAKD,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjF,QAAA,MAAM,WAAW,yFAchB,CAAA;AAOD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;CAeZ,CAAA;AAEV,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/Steps/steps.js CHANGED Viewed

@@ -276,7 +276,7 @@ const STEP_STATUS_TEXT = {
   reachable: "未開始",
   upcoming: "未開始"
 };
-function StepItemHeader({ children, className, style }) {
+function StepItemHeader({ children, className, style, contentId }) {
   const item = useStepItemContext();
   const steps = useStepsContext();
   const index = React.useContext(StepIndexContext);
@@ -295,6 +295,8 @@ function StepItemHeader({ children, className, style }) {
       onClick: item.clickable ? item.activate : void 0,
       onKeyDown: item.clickable ? onKeyDown : void 0,
       "aria-disabled": item.disabled || void 0,
+      "aria-expanded": item.clickable && contentId ? item.expanded : void 0,
+      "aria-controls": item.clickable && contentId && item.expanded ? contentId : void 0,
       className: cn(
         // leading-compact:scanning-family header 行高 = 1.3(item-anatomy.spec.md:776 掃描模式 label 行高)。
         // 設在 header 而非 li 根 → prefix h-[1lh] + 水平 connector h-[1lh] + label(StepLabel 亦 leading-compact)
@@ -322,8 +324,9 @@ function VerticalLayout({
   const item = useStepItemContext();
   const showContent = !!content && item.expanded;
   const indicatorBox = INDICATOR_BOX_WIDTH[steps.size];
+  const contentId = React.useId();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(StepItemHeader, { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ jsxs(StepItemHeader, { className: "flex items-start gap-3", contentId: content ? contentId : void 0, children: [
       /* @__PURE__ */ jsx(ItemPrefix, { style: { width: indicatorBox }, children: /* @__PURE__ */ jsx(StepIndicator, {}) }),
       /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex items-start gap-2", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex flex-col", children: [
@@ -342,7 +345,7 @@ function VerticalLayout({
         ) })
       ] })
     ] }),
-    showContent && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 mt-3", children: [
+    showContent && /* @__PURE__ */ jsxs("div", { id: contentId, className: "flex items-start gap-3 mt-3", children: [
       /* @__PURE__ */ jsx("div", { className: "shrink-0", style: { width: indicatorBox } }),
       /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: content })
     ] }),

package/dist/components/Steps/steps.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"steps.js","sources":["../../../src/components/Steps/steps.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\n// code-quality-allow: file-size — foundational composite(Steps + StepItem + orientation/state/connector 邏輯緊密耦合,拆檔會讓 props drilling 複雜化超過可讀 gain)\nimport * as React from 'react'\nimport { Check, ChevronDown, X } from 'lucide-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { ItemPrefix, ItemSuffix } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n// ── Types ─────────────────────────────────────────────────────────────────\n\nexport type StepsSize = 'sm' \| 'md' \| 'lg'\n// code-quality-allow: dead-export — public API surface — consumer-exposed for future use\nexport type StepsOrientation = 'vertical' \| 'horizontal'\nexport type StepsExpansion = 'follow-active' \| 'multiple'\nexport type StepContentState = 'upcoming' \| 'reachable' \| 'current' \| 'completed' \| 'error'\n\n// ── Constants ─────────────────────────────────────────────────────────────\n\nconst INDICATOR_SIZE: Record<StepsSize, number> = {\n sm: 8,\n md: 24,\n lg: 32,\n}\n\nconst INDICATOR_ICON_SIZE: Record<StepsSize, number> = {\n sm: 0,\n md: 16,\n lg: 20,\n}\n\nconst SM_HIT_AREA = 24\n\nconst INDICATOR_BOX_WIDTH: Record<StepsSize, number> = {\n sm: SM_HIT_AREA,\n md: INDICATOR_SIZE.md,\n lg: INDICATOR_SIZE.lg,\n}\n\n// ── Outer ring (box-shadow, zero layout impact) ───────────────────────────\n\nconst RING_GAP_PX = 2\nconst RING_WIDTH_PX = 2\n\nfunction getOuterRingShadow(ringColor: string): string {\n return `0 0 0 ${RING_GAP_PX}px var(--surface), 0 0 0 ${RING_GAP_PX + RING_WIDTH_PX}px ${ringColor}`\n}\n\nfunction resolveRingColor(state: StepContentState, linear: boolean): string {\n if (state === 'error') return 'var(--error-hover)'\n if (state === 'current' && !linear) return 'var(--border-hover)'\n return 'var(--info-hover)'\n}\n\n// ── Contexts ──────────────────────────────────────────────────────────────\n\ninterface StepsContextValue {\n value: string \| undefined\n completedValues: Set<string>\n errorValues: Set<string>\n reachableValues: Set<string>\n linear: boolean\n size: StepsSize\n orientation: StepsOrientation\n expansion: StepsExpansion\n expandedSet: Set<string>\n setValue: (value: string) => void\n toggleExpanded: (value: string) => void\n total: number\n}\n\nconst StepsContext = React.createContext<StepsContextValue \| null>(null)\n\nfunction useStepsContext(): StepsContextValue {\n const ctx = React.useContext(StepsContext)\n if (!ctx) throw new Error('Steps compound components must be rendered inside <Steps>')\n return ctx\n}\n\ninterface StepItemContextValue {\n value: string\n state: StepContentState\n focused: boolean\n disabled: boolean\n clickable: boolean\n expanded: boolean\n isLast: boolean\n activate: () => void\n}\n\nconst StepItemContext = React.createContext<StepItemContextValue \| null>(null)\n\nfunction useStepItemContext(): StepItemContextValue {\n const ctx = React.useContext(StepItemContext)\n if (!ctx) throw new Error('StepLabel / StepDescription / StepContent must be inside <StepItem>')\n return ctx\n}\n\nconst StepIndexContext = React.createContext<number>(0)\n\n// ── Pure helpers ──────────────────────────────────────────────────────────\n\nfunction computeState(\n itemValue: string,\n value: string \| undefined,\n completedValues: Set<string>,\n errorValues: Set<string>,\n reachableValues: Set<string>,\n linear: boolean,\n override: StepContentState \| undefined,\n): StepContentState {\n if (override) return override\n if (errorValues.has(itemValue)) return 'error'\n if (completedValues.has(itemValue)) return 'completed'\n if (itemValue === value) return 'current'\n if (linear && reachableValues.has(itemValue)) return 'reachable'\n return 'upcoming'\n}\n\nfunction isClickable(\n state: StepContentState,\n linear: boolean,\n disabled: boolean,\n): boolean {\n if (disabled) return false\n if (!linear) return true\n return state !== 'upcoming'\n}\n\nfunction normalizeExpanded(\n defaultExpanded: 'all' \| 'none' \| string[] \| undefined,\n allValues: string[],\n): Set<string> {\n if (defaultExpanded === 'all') return new Set(allValues)\n if (!defaultExpanded \|\| defaultExpanded === 'none') return new Set()\n return new Set(defaultExpanded)\n}\n\nfunction computeReachableValues(\n childValues: string[],\n completedValues: string[],\n): Set<string> {\n const completed = new Set(completedValues)\n const reachable = new Set(completed)\n for (const v of childValues) {\n if (!completed.has(v)) {\n reachable.add(v)\n break\n }\n }\n return reachable\n}\n\n// ── Steps root ────────────────────────────────────────────────────────────\n\nconst stepsRootVariants = cva('list-none p-0 m-0', {\n variants: {\n orientation: {\n vertical: 'flex flex-col',\n horizontal: 'flex flex-row items-start gap-3',\n },\n },\n defaultVariants: { orientation: 'vertical' },\n})\n\nexport interface StepsProps\n extends Omit<React.HTMLAttributes<HTMLOListElement>, 'onChange' \| 'defaultValue'>,\n VariantProps<typeof stepsRootVariants> {\n value?: string\n defaultValue?: string\n onValueChange?: (value: string) => void\n completedValues?: string[]\n errorValues?: string[]\n linear?: boolean\n size?: StepsSize\n orientation?: StepsOrientation\n expansion?: StepsExpansion\n defaultExpanded?: 'all' \| 'none' \| string[]\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst Steps = React.forwardRef<HTMLOListElement, StepsProps>(\n (\n {\n value: valueProp,\n defaultValue,\n onValueChange,\n completedValues = [],\n errorValues = [],\n linear = true,\n size = 'md',\n orientation = 'vertical',\n expansion = 'follow-active',\n defaultExpanded,\n className,\n children,\n ...props\n },\n ref,\n ) => {\n const [internalValue, setInternalValue] = React.useState<string \| undefined>(defaultValue)\n const isControlled = valueProp !== undefined\n const value = isControlled ? valueProp : internalValue\n\n const setValue = React.useCallback(\n (next: string) => {\n if (!isControlled) setInternalValue(next)\n onValueChange?.(next)\n },\n [isControlled, onValueChange],\n )\n\n const childValues = React.useMemo(() => {\n const vals: string[] = []\n React.Children.forEach(children, child => {\n if (\n React.isValidElement(child) &&\n typeof child.props === 'object' &&\n child.props &&\n 'value' in child.props\n ) {\n vals.push(String((child.props as { value: string }).value))\n }\n })\n return vals\n }, [children])\n\n const reachableValues = React.useMemo(\n () => computeReachableValues(childValues, completedValues),\n [childValues, completedValues],\n )\n\n const [expandedSet, setExpandedSet] = React.useState<Set<string>>(() =>\n normalizeExpanded(defaultExpanded, childValues),\n )\n\n const toggleExpanded = React.useCallback((itemValue: string) => {\n setExpandedSet(prev => {\n const next = new Set(prev)\n if (next.has(itemValue)) next.delete(itemValue)\n else next.add(itemValue)\n return next\n })\n }, [])\n\n const stepCount = React.Children.count(children)\n\n const ctxValue = React.useMemo<StepsContextValue>(\n () => ({\n value,\n completedValues: new Set(completedValues),\n errorValues: new Set(errorValues),\n reachableValues,\n linear,\n size,\n orientation,\n expansion,\n expandedSet,\n setValue,\n toggleExpanded,\n total: stepCount,\n }),\n [value, completedValues, errorValues, reachableValues, linear, size, orientation, expansion, expandedSet, setValue, toggleExpanded, stepCount],\n )\n\n // Interleave horizontal connectors between items\n const count = stepCount\n const itemsWithIndex: React.ReactNode[] = []\n\n React.Children.forEach(children, (child, index) => {\n if (!React.isValidElement(child)) {\n itemsWithIndex.push(child)\n return\n }\n const isLast = index === count - 1\n const cloned = React.cloneElement(\n child as React.ReactElement<StepItemInjectedProps>,\n { __isLast: isLast },\n )\n itemsWithIndex.push(\n <StepIndexContext.Provider key={`item-${index}`} value={index + 1}>\n {cloned}\n </StepIndexContext.Provider>,\n )\n // Horizontal connectors are now INSIDE each StepItem (Ant Design pattern),\n // not between items. No interleaving needed.\n })\n\n return (\n <StepsContext.Provider value={ctxValue}>\n <ol\n ref={ref}\n data-orientation={orientation}\n data-size={size}\n className={cn(stepsRootVariants({ orientation }), className)}\n {...props}\n >\n {itemsWithIndex}\n </ol>\n </StepsContext.Provider>\n )\n },\n)\nSteps.displayName = 'Steps'\n\n// ── StepItem ──────────────────────────────────────────────────────────────\n\ninterface StepItemInjectedProps {\n __isLast?: boolean\n}\n\nexport interface StepItemProps\n extends Omit<React.HTMLAttributes<HTMLLIElement>, 'value'>,\n StepItemInjectedProps {\n value: string\n state?: 'error'\n disabled?: boolean\n}\n\nconst stepItemVariants = cva('group/step-item outline-none', {\n variants: {\n orientation: {\n // pb-6 on li provides spacing for next item; connector is absolute within li\n vertical: 'relative flex flex-col',\n // Ant Design pattern:flex-1 等寬(最後一步用 last: 覆蓋成自然寬度)。\n // Connector 在 item 內部(不是 items 之間的獨立元素)。\n horizontal: 'flex-1 min-w-0 last:flex-none last:shrink-0',\n },\n size: {\n sm: 'text-body',\n md: 'text-body',\n lg: 'text-body-lg',\n },\n },\n defaultVariants: { orientation: 'vertical', size: 'md' },\n})\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst StepItem = React.forwardRef<HTMLLIElement, StepItemProps>(\n ({ value, state: stateOverride, disabled = false, children, className, __isLast = false, ...props }, ref) => {\n const steps = useStepsContext()\n const state = computeState(\n value,\n steps.value,\n steps.completedValues,\n steps.errorValues,\n steps.reachableValues,\n steps.linear,\n stateOverride,\n )\n const focused = value === steps.value\n const clickable = isClickable(state, steps.linear, disabled)\n const expanded =\n steps.expansion === 'follow-active' ? focused : steps.expandedSet.has(value)\n\n const activate = React.useCallback(() => {\n if (!clickable) return\n // 永遠更新 focus(value),multiple 模式額外 toggle 展開\n steps.setValue(value)\n if (steps.expansion === 'multiple') {\n steps.toggleExpanded(value)\n }\n }, [clickable, steps, value])\n\n const itemCtx = React.useMemo<StepItemContextValue>(() => ({\n value,\n state,\n focused,\n disabled,\n clickable,\n expanded,\n isLast: __isLast,\n activate,\n }), [value, state, focused, disabled, clickable, expanded, __isLast, activate])\n\n const isVertical = steps.orientation === 'vertical'\n\n return (\n <StepItemContext.Provider value={itemCtx}>\n <li\n ref={ref}\n data-state={state}\n data-focused={focused \|\| undefined}\n data-disabled={disabled \|\| undefined}\n data-clickable={clickable \|\| undefined}\n aria-current={focused ? 'step' : undefined}\n aria-disabled={disabled \|\| undefined}\n className={cn(\n stepItemVariants({ orientation: steps.orientation, size: steps.size }),\n isVertical && !__isLast && 'pb-6',\n !clickable && 'cursor-not-allowed',\n className,\n )}\n {...props}\n >\n <StepItemLayout>{children}</StepItemLayout>\n </li>\n </StepItemContext.Provider>\n )\n },\n)\nStepItem.displayName = 'StepItem'\n\n// ── StepItem internal layout ─────────────────────────────────────────────\n\nfunction StepItemLayout({ children }: { children: React.ReactNode }) {\n const steps = useStepsContext()\n const item = useStepItemContext()\n\n let labelNode: React.ReactNode = null\n let descNode: React.ReactNode = null\n let contentNode: React.ReactNode = null\n React.Children.forEach(children, child => {\n if (!React.isValidElement(child)) return\n if (child.type === StepLabel) labelNode = child\n else if (child.type === StepDescription) descNode = child\n else if (child.type === StepContent) contentNode = child\n })\n\n if (steps.orientation === 'horizontal') {\n return <HorizontalLayout label={labelNode} description={descNode} />\n }\n return (\n <VerticalLayout label={labelNode} description={descNode} content={contentNode} isLast={item.isLast} />\n )\n}\n\n// ── Clickable header ─────────────────────────────────────────────────────\n\n// SR-only 狀態文字 map(2026-06-01 #25 a11y:indicator 是 aria-hidden 純視覺,故「第 N 步/共 M 步/狀態」\n// 需經 sr-only span 給螢幕報讀器。對齊 Carbon ProgressIndicator `--assistive-text`(已完成/進行中/未開始)慣例)\nconst STEP_STATUS_TEXT: Record<StepContentState, string> = {\n completed: '已完成',\n current: '進行中',\n error: '錯誤',\n reachable: '未開始',\n upcoming: '未開始',\n}\n\nfunction StepItemHeader({ children, className, style }: { children: React.ReactNode; className?: string; style?: React.CSSProperties }) {\n const item = useStepItemContext()\n const steps = useStepsContext()\n const index = React.useContext(StepIndexContext)\n const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (!item.clickable) return\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault()\n item.activate()\n }\n }\n return (\n <div\n role={item.clickable ? 'button' : undefined}\n tabIndex={item.clickable ? 0 : undefined}\n onClick={item.clickable ? item.activate : undefined}\n onKeyDown={item.clickable ? onKeyDown : undefined}\n aria-disabled={item.disabled \|\| undefined}\n className={cn(\n // leading-compact:scanning-family header 行高 = 1.3(item-anatomy.spec.md:776 掃描模式 label 行高)。\n // 設在 header 而非 li 根 → prefix h-[1lh] + 水平 connector h-[1lh] + label(StepLabel 亦 leading-compact)\n // 全用 1.3 對齊;li 根 text-body(1.5,steps.tsx:329-331)留給展開 content 的 reading 行高,不被\n // scanning 波及(避免改A壞B)。對齊 MenuItem 把 leading-compact 放 row 容器之原則(item-anatomy.tsx:144-146)。\n 'outline-none leading-compact',\n item.clickable\n ? 'cursor-pointer rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'\n : 'cursor-not-allowed',\n className,\n )}\n style={style}\n >\n <span className=\"sr-only\">{`第 ${index} 步,共 ${steps.total} 步,${STEP_STATUS_TEXT[item.state]}`}</span>\n {children}\n </div>\n )\n}\n\n// ── Vertical layout ──────────────────────────────────────────────────────\n\nfunction VerticalLayout({\n label,\n description,\n content,\n isLast,\n}: {\n label: React.ReactNode\n description: React.ReactNode\n content: React.ReactNode\n isLast: boolean\n}) {\n const steps = useStepsContext()\n const item = useStepItemContext()\n const showContent = !!content && item.expanded\n const indicatorBox = INDICATOR_BOX_WIDTH[steps.size]\n\n return (\n <>\n <StepItemHeader className=\"flex items-start gap-3\">\n {/* Row prefix slot — 消費 item-anatomy <ItemPrefix>(h-[1lh] 對齊 label 第一行 SSOT);\n width = INDICATOR_BOX_WIDTH 固定欄寬,base justify-center 讓 sm dot 在欄內置中 /}\n <ItemPrefix style={{ width: indicatorBox }}>\n <StepIndicator />\n </ItemPrefix>\n <div className=\"flex-1 min-w-0 flex items-start gap-2\">\n <div className=\"flex-1 min-w-0 flex flex-col\">\n {label}\n {description}\n </div>\n {/ Row suffix slot — 消費 item-anatomy <ItemSuffix>(h-[1lh] 對齊 label 第一行);\n text col 是 flex-1 → base ml-auto 惰性,8px 間距由父層 gap-2 提供(= MenuItem 父層 gap idiom)/}\n {steps.expansion === 'multiple' && !!content && (\n <ItemSuffix aria-hidden>\n <ChevronDown\n size={16}\n className={cn(\n 'text-fg-muted transition-transform duration-150',\n item.expanded && 'rotate-180',\n )}\n />\n </ItemSuffix>\n )}\n </div>\n </StepItemHeader>\n {showContent && (\n <div className=\"flex items-start gap-3 mt-3\">\n <div className=\"shrink-0\" style={{ width: indicatorBox }} />\n <div className=\"flex-1 min-w-0\">{content}</div>\n </div>\n )}\n {!isLast && <VerticalConnectorLine />}\n </>\n )\n}\n\n// ── Vertical connector ───────────────────────────────────────────────────\n\nfunction VerticalConnectorLine() {\n const steps = useStepsContext()\n const item = useStepItemContext()\n const isBlue = item.state === 'completed'\n const radius = INDICATOR_SIZE[steps.size] / 2\n const gap = 8\n\n return (\n <div\n aria-hidden\n className={cn(\n // leading-compact:connector 的 0.5lh 須跟 scanning label 同行高(1.3)→ 起點對齊 circle 中心\n // (circle 對齊 label 第一行;label 已 leading-compact)。否則 connector 繼承 li 根 1.5 → 0.5lh 偏大 → 起點偏低。\n 'absolute w-px leading-compact',\n isBlue ? 'bg-info' : 'bg-border',\n )}\n style={{\n left: INDICATOR_BOX_WIDTH[steps.size] / 2,\n top: `calc(0.5lh + ${radius}px + ${gap}px)`,\n bottom: `calc(${radius}px - 0.5lh + ${gap}px)`,\n }}\n />\n )\n}\n\n// ── Horizontal layout (Ant Design pattern) ──────────────────────────────\n//\n// Connector 在 item 內部(不是 items 之間的獨立元素):\n// Step (flex-1): [indicator][gap][label][gap][──connector──]\n// Last step: [indicator][gap][label] (無 connector)\n//\n// Root: flex-row gap-3 → gap 只在 step items 之間\n// Step items: flex-1 等寬(最後一步 flex-none 自然寬度)\n//\n// 等距保證:\n// label→connector gap = item 內 flex gap-3 = 12px\n// connector→next circle = root gap-3 = 12px\n// 兩邊都是 12px ✓\n//\n// Description 在 step item 內(connector 下方),wrap 到 item 寬度 = 最長到連結線尾段 ✓\n\nfunction HorizontalLayout({\n label,\n description,\n}: {\n label: React.ReactNode\n description: React.ReactNode\n}) {\n const item = useStepItemContext()\n const steps = useStepsContext()\n const isBlue = item.state === 'completed'\n const indicatorBox = INDICATOR_BOX_WIDTH[steps.size]\n\n return (\n <>\n {/ Row 1: indicator + label + connector(在同一個 flex row) /}\n <StepItemHeader className=\"flex items-start gap-3\">\n {/ Row prefix slot — 消費 item-anatomy <ItemPrefix>(h-[1lh] 對齊 label 第一行 SSOT)/}\n <ItemPrefix>\n <StepIndicator />\n </ItemPrefix>\n <div className=\"shrink-0 min-w-0\">{label}</div>\n {/ Connector 在 item 內部,flex-1 填滿剩餘寬度 /}\n {!item.isLast && (\n <div className=\"h-[1lh] flex-1 flex items-center min-w-4\" aria-hidden>\n <div className={cn('h-px w-full', isBlue ? 'bg-info' : 'bg-border')} />\n </div>\n )}\n </StepItemHeader>\n {/ Row 2: description — 在 item 寬度內 wrap(含 connector 佔的空間) */}\n {description && (\n <div className=\"min-w-0\" style={{ paddingLeft: indicatorBox + 12 }}>\n {description}\n </div>\n )}\n </>\n )\n}\n\n// ── StepIndicator ────────────────────────────────────────────────────────\n\nfunction StepIndicator() {\n const steps = useStepsContext()\n const item = useStepItemContext()\n const { size, linear } = steps\n const { state, focused, disabled } = item\n\n if (size === 'sm') return <SmIndicator state={state} focused={focused} disabled={disabled} linear={linear} />\n return <MdLgIndicator size={size} state={state} focused={focused} disabled={disabled} linear={linear} />\n}\n\n// ── sm indicator: 8px dot in 24px hit area ───────────────────────────────\n\nfunction SmIndicator({\n state,\n focused,\n disabled,\n linear,\n}: {\n state: StepContentState\n focused: boolean\n disabled: boolean\n linear: boolean\n}) {\n // sm current (linear) and reachable: hollow ring\n const isHollow = (state === 'current' && linear) \|\| state === 'reachable'\n\n let dotStyle: React.CSSProperties\n if (isHollow) {\n dotStyle = {\n width: INDICATOR_SIZE.sm,\n height: INDICATOR_SIZE.sm,\n background: 'transparent',\n border: '2px solid var(--info-hover)',\n boxShadow: focused ? getOuterRingShadow(resolveRingColor(state, linear)) : undefined,\n }\n } else {\n const dotBg =\n state === 'completed' ? 'var(--info)'\n : state === 'error' ? 'var(--error)'\n : state === 'current' && !linear ? 'var(--fg-disabled)'\n : 'var(--fg-disabled)' // upcoming + non-linear fallback\n\n dotStyle = {\n width: INDICATOR_SIZE.sm,\n height: INDICATOR_SIZE.sm,\n background: dotBg,\n boxShadow: focused ? getOuterRingShadow(resolveRingColor(state, linear)) : undefined,\n }\n }\n\n return (\n <span\n aria-hidden\n className=\"relative inline-flex items-center justify-center shrink-0\"\n style={{ width: SM_HIT_AREA, height: SM_HIT_AREA }}\n >\n <span\n className={cn('block rounded-full', disabled && 'opacity-disabled')}\n style={dotStyle}\n />\n </span>\n )\n}\n\n// ── md/lg indicator: filled circle with number/icon ──────────────────────\n\nfunction MdLgIndicator({\n size,\n state,\n focused,\n disabled,\n linear,\n}: {\n size: StepsSize\n state: StepContentState\n focused: boolean\n disabled: boolean\n linear: boolean\n}) {\n const diameter = INDICATOR_SIZE[size]\n const iconPx = INDICATOR_ICON_SIZE[size]\n\n let fillBg: string\n let contentColor: string\n\n switch (state) {\n case 'error':\n fillBg = 'var(--error)'\n contentColor = 'var(--on-emphasis)'\n break\n case 'completed':\n fillBg = 'var(--info)'\n contentColor = 'var(--on-emphasis)'\n break\n case 'current':\n if (linear) {\n fillBg = 'var(--info)'\n contentColor = 'var(--on-emphasis)'\n } else {\n fillBg = 'var(--secondary)'\n contentColor = 'var(--foreground)'\n }\n break\n case 'reachable':\n fillBg = 'var(--info)'\n contentColor = 'var(--on-emphasis)'\n break\n default: // upcoming\n if (linear) {\n fillBg = 'var(--muted)'\n contentColor = 'var(--fg-disabled)'\n } else {\n fillBg = 'var(--secondary)'\n contentColor = 'var(--foreground)'\n }\n break\n }\n\n return (\n <span\n aria-hidden\n className={cn(\n 'relative inline-flex items-center justify-center shrink-0 rounded-full',\n 'font-medium leading-none transition-colors',\n disabled && 'opacity-disabled',\n )}\n style={{\n width: diameter,\n height: diameter,\n background: fillBg,\n color: contentColor,\n // 2026-06-11 R2:對齊 spec canonical「indicator 數字與 label 同級」(steps.spec.md 狀態表 md=14/lg=16;spec 明文「之前寫小一號(md=12,lg=14)是錯的」)\n fontSize: size === 'lg' ? 'var(--font-body-lg-size)' : 'var(--font-body-size)',\n boxShadow: focused ? getOuterRingShadow(resolveRingColor(state, linear)) : undefined,\n }}\n >\n <IndicatorContent state={state} iconPx={iconPx} />\n </span>\n )\n}\n\nfunction IndicatorContent({ state, iconPx }: { state: StepContentState; iconPx: number }) {\n if (state === 'completed') return <Check size={iconPx} strokeWidth={2.5} />\n if (state === 'error') return <X size={iconPx} strokeWidth={2.5} />\n return <StepNumber />\n}\n\nfunction StepNumber() {\n const index = React.useContext(StepIndexContext)\n return <span>{index}</span>\n}\n\n// ── StepLabel ────────────────────────────────────────────────────────────\n\nexport interface StepLabelProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst StepLabel = React.forwardRef<HTMLSpanElement, StepLabelProps>(\n ({ className, children, ...props }, ref) => {\n const { size } = useStepsContext()\n const { state, focused, disabled } = useStepItemContext()\n\n return (\n <span\n ref={ref}\n className={cn(\n // leading-compact:scanning-family label 行高 = 1.3(item-anatomy.spec.md:776);text-body utility\n // 自帶 lh:1.5,須顯式 leading-compact 蓋回 1.3,跟 MenuItem label(實測 14px/18px=1.3)一致。\n 'font-medium break-words leading-compact',\n size === 'lg' ? 'text-body-lg' : 'text-body',\n disabled\n ? 'text-fg-disabled'\n : state === 'error'\n ? 'text-error-text'\n : focused\n ? 'text-foreground'\n : 'text-fg-secondary',\n className,\n )}\n {...props}\n >\n {children}\n </span>\n )\n },\n)\nStepLabel.displayName = 'StepLabel'\n\n// ── StepDescription ──────────────────────────────────────────────────────\n\nexport interface StepDescriptionProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\nconst StepDescription = React.forwardRef<HTMLSpanElement, StepDescriptionProps>(\n ({ className, children, style, ...props }, ref) => {\n const { size } = useStepsContext()\n const { disabled } = useStepItemContext()\n\n return (\n <span\n ref={ref}\n className={cn(\n // Steps 跟 MenuItem 同 scanning-family:sm/md = scanning(body+caption),lg = scanning-lg(body-lg+body-compact)\n size === 'lg'\n ? 'mt-[var(--item-gap-label-desc-scanning-lg)]'\n : 'mt-[var(--item-gap-label-desc-scanning)]',\n 'leading-compact break-words',\n disabled ? 'text-fg-disabled' : 'text-fg-secondary',\n className,\n )}\n style={{\n fontSize: size === 'lg' ? 'var(--font-body-size)' : 'var(--font-caption-size)',\n ...style,\n }}\n {...props}\n >\n {children}\n </span>\n )\n },\n)\nStepDescription.displayName = 'StepDescription'\n\n// ── StepContent ──────────────────────────────────────────────────────────\n\nexport interface StepContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst StepContent = React.forwardRef<HTMLDivElement, StepContentProps>(\n ({ className, children, ...props }, ref) => {\n const { orientation } = useStepsContext()\n if (orientation === 'horizontal') return null\n return (\n <div\n ref={ref}\n className={cn('text-body text-foreground min-w-0', className)}\n {...props}\n >\n {children}\n </div>\n )\n },\n)\nStepContent.displayName = 'StepContent'\n\n// ── Exports ──────────────────────────────────────────────────────────────\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 stepsMeta = {\n component: 'Steps',\n family: 2,\n variants: {},\n sizes: {\n sm: { px: 8, when: 'Sidebar / 緊湊 onboarding;indicator 8px dot' },\n md: { px: 24, when: '預設 — wizard / checkout / 註冊主流程;indicator 24px circle' },\n lg: { px: 32, when: 'Marketing 流程展示 / 重要 onboarding;indicator 32px circle' },\n },\n states: ['upcoming', 'reachable', 'current', 'completed', 'error'], // 2026-06-11 R2:content-state 模型(spec 狀態表),非 Phase-1 boilerplate 互動 states,\n tokens: {\n bg: ['bg-info'],\n fg: ['--fg-disabled', '--foreground', '--on-emphasis', 'text-error-text', 'text-fg-disabled', 'text-fg-muted', 'text-fg-secondary', 'text-foreground'],\n ring: [],\n },\n} as const\n\nexport { Steps, StepItem, StepLabel, StepDescription, StepContent, stepsRootVariants, stepItemVariants }\n"],"names":[],"mappings":";;;;;;AAkBA,MAAM,iBAA4C;AAAA,EAChD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,sBAAiD;AAAA,EACrD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,cAAc;AAEpB,MAAM,sBAAiD;AAAA,EACrD,IAAI;AAAA,EACJ,IAAI,eAAe;AAAA,EACnB,IAAI,eAAe;AACrB;AAIA,MAAM,cAAc;AACpB,MAAM,gBAAgB;AAEtB,SAAS,mBAAmB,WAA2B;AACrD,SAAO,SAAS,WAAW,4BAA4B,cAAc,aAAa,MAAM,SAAS;AACnG;AAEA,SAAS,iBAAiB,OAAyB,QAAyB;AAC1E,MAAI,UAAU,QAAS,QAAO;AAC9B,MAAI,UAAU,aAAa,CAAC,OAAQ,QAAO;AAC3C,SAAO;AACT;AAmBA,MAAM,eAAe,MAAM,cAAwC,IAAI;AAEvE,SAAS,kBAAqC;AAC5C,QAAM,MAAM,MAAM,WAAW,YAAY;AACzC,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,2DAA2D;AACrF,SAAO;AACT;AAaA,MAAM,kBAAkB,MAAM,cAA2C,IAAI;AAE7E,SAAS,qBAA2C;AAClD,QAAM,MAAM,MAAM,WAAW,eAAe;AAC5C,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,qEAAqE;AAC/F,SAAO;AACT;AAEA,MAAM,mBAAmB,MAAM,cAAsB,CAAC;AAItD,SAAS,aACP,WACA,OACA,iBACA,aACA,iBACA,QACA,UACkB;AAClB,MAAI,SAAU,QAAO;AACrB,MAAI,YAAY,IAAI,SAAS,EAAG,QAAO;AACvC,MAAI,gBAAgB,IAAI,SAAS,EAAG,QAAO;AAC3C,MAAI,cAAc,MAAO,QAAO;AAChC,MAAI,UAAU,gBAAgB,IAAI,SAAS,EAAG,QAAO;AACrD,SAAO;AACT;AAEA,SAAS,YACP,OACA,QACA,UACS;AACT,MAAI,SAAU,QAAO;AACrB,MAAI,CAAC,OAAQ,QAAO;AACpB,SAAO,UAAU;AACnB;AAEA,SAAS,kBACP,iBACA,WACa;AACb,MAAI,oBAAoB,MAAO,QAAO,IAAI,IAAI,SAAS;AACvD,MAAI,CAAC,mBAAmB,oBAAoB,OAAQ,4BAAW,IAAA;AAC/D,SAAO,IAAI,IAAI,eAAe;AAChC;AAEA,SAAS,uBACP,aACA,iBACa;AACb,QAAM,YAAY,IAAI,IAAI,eAAe;AACzC,QAAM,YAAY,IAAI,IAAI,SAAS;AACnC,aAAW,KAAK,aAAa;AAC3B,QAAI,CAAC,UAAU,IAAI,CAAC,GAAG;AACrB,gBAAU,IAAI,CAAC;AACf;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAIA,MAAM,oBAAoB,IAAI,qBAAqB;AAAA,EACjD,UAAU;AAAA,IACR,aAAa;AAAA,MACX,UAAU;AAAA,MACV,YAAY;AAAA,IAAA;AAAA,EACd;AAAA,EAEF,iBAAiB,EAAE,aAAa,WAAA;AAClC,CAAC;AAkBD,MAAM,QAAQ,MAAM;AAAA,EAClB,CACE;AAAA,IACE,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,kBAAkB,CAAA;AAAA,IAClB,cAAc,CAAA;AAAA,IACd,SAAS;AAAA,IACT,OAAO;AAAA,IACP,cAAc;AAAA,IACd,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAA6B,YAAY;AACzF,UAAM,eAAe,cAAc;AACnC,UAAM,QAAQ,eAAe,YAAY;AAEzC,UAAM,WAAW,MAAM;AAAA,MACrB,CAAC,SAAiB;AAChB,YAAI,CAAC,aAAc,kBAAiB,IAAI;AACxC,uDAAgB;AAAA,MAClB;AAAA,MACA,CAAC,cAAc,aAAa;AAAA,IAAA;AAG9B,UAAM,cAAc,MAAM,QAAQ,MAAM;AACtC,YAAM,OAAiB,CAAA;AACvB,YAAM,SAAS,QAAQ,UAAU,CAAA,UAAS;AACxC,YACE,MAAM,eAAe,KAAK,KAC1B,OAAO,MAAM,UAAU,YACvB,MAAM,SACN,WAAW,MAAM,OACjB;AACA,eAAK,KAAK,OAAQ,MAAM,MAA4B,KAAK,CAAC;AAAA,QAC5D;AAAA,MACF,CAAC;AACD,aAAO;AAAA,IACT,GAAG,CAAC,QAAQ,CAAC;AAEb,UAAM,kBAAkB,MAAM;AAAA,MAC5B,MAAM,uBAAuB,aAAa,eAAe;AAAA,MACzD,CAAC,aAAa,eAAe;AAAA,IAAA;AAG/B,UAAM,CAAC,aAAa,cAAc,IAAI,MAAM;AAAA,MAAsB,MAChE,kBAAkB,iBAAiB,WAAW;AAAA,IAAA;AAGhD,UAAM,iBAAiB,MAAM,YAAY,CAAC,cAAsB;AAC9D,qBAAe,CAAA,SAAQ;AACrB,cAAM,OAAO,IAAI,IAAI,IAAI;AACzB,YAAI,KAAK,IAAI,SAAS,EAAG,MAAK,OAAO,SAAS;AAAA,YACzC,MAAK,IAAI,SAAS;AACvB,eAAO;AAAA,MACT,CAAC;AAAA,IACH,GAAG,CAAA,CAAE;AAEL,UAAM,YAAY,MAAM,SAAS,MAAM,QAAQ;AAE/C,UAAM,WAAW,MAAM;AAAA,MACrB,OAAO;AAAA,QACL;AAAA,QACA,iBAAiB,IAAI,IAAI,eAAe;AAAA,QACxC,aAAa,IAAI,IAAI,WAAW;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,MAAA;AAAA,MAET,CAAC,OAAO,iBAAiB,aAAa,iBAAiB,QAAQ,MAAM,aAAa,WAAW,aAAa,UAAU,gBAAgB,SAAS;AAAA,IAAA;AAI/I,UAAM,QAAQ;AACd,UAAM,iBAAoC,CAAA;AAE1C,UAAM,SAAS,QAAQ,UAAU,CAAC,OAAO,UAAU;AACjD,UAAI,CAAC,MAAM,eAAe,KAAK,GAAG;AAChC,uBAAe,KAAK,KAAK;AACzB;AAAA,MACF;AACA,YAAM,SAAS,UAAU,QAAQ;AACjC,YAAM,SAAS,MAAM;AAAA,QACnB;AAAA,QACA,EAAE,UAAU,OAAA;AAAA,MAAO;AAErB,qBAAe;AAAA,QACb,oBAAC,iBAAiB,UAAjB,EAAgD,OAAO,QAAQ,GAC7D,UAAA,OAAA,GAD6B,QAAQ,KAAK,EAE7C;AAAA,MAAA;AAAA,IAIJ,CAAC;AAED,WACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,UAC5B,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,oBAAkB;AAAA,QAClB,aAAW;AAAA,QACX,WAAW,GAAG,kBAAkB,EAAE,YAAA,CAAa,GAAG,SAAS;AAAA,QAC1D,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;AAgBpB,MAAM,mBAAmB,IAAI,gCAAgC;AAAA,EAC3D,UAAU;AAAA,IACR,aAAa;AAAA;AAAA,MAEX,UAAU;AAAA;AAAA;AAAA,MAGV,YAAY;AAAA,IAAA;AAAA,IAEd,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,iBAAiB,EAAE,aAAa,YAAY,MAAM,KAAA;AACpD,CAAC;AAGD,MAAM,WAAW,MAAM;AAAA,EACrB,CAAC,EAAE,OAAO,OAAO,eAAe,WAAW,OAAO,UAAU,WAAW,WAAW,OAAO,GAAG,MAAA,GAAS,QAAQ;AAC3G,UAAM,QAAQ,gBAAA;AACd,UAAM,QAAQ;AAAA,MACZ;AAAA,MACA,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,IAAA;AAEF,UAAM,UAAU,UAAU,MAAM;AAChC,UAAM,YAAY,YAAY,OAAO,MAAM,QAAQ,QAAQ;AAC3D,UAAM,WACJ,MAAM,cAAc,kBAAkB,UAAU,MAAM,YAAY,IAAI,KAAK;AAE7E,UAAM,WAAW,MAAM,YAAY,MAAM;AACvC,UAAI,CAAC,UAAW;AAEhB,YAAM,SAAS,KAAK;AACpB,UAAI,MAAM,cAAc,YAAY;AAClC,cAAM,eAAe,KAAK;AAAA,MAC5B;AAAA,IACF,GAAG,CAAC,WAAW,OAAO,KAAK,CAAC;AAE5B,UAAM,UAAU,MAAM,QAA8B,OAAO;AAAA,MACzD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,IAAA,IACE,CAAC,OAAO,OAAO,SAAS,UAAU,WAAW,UAAU,UAAU,QAAQ,CAAC;AAE9E,UAAM,aAAa,MAAM,gBAAgB;AAEzC,WACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,SAC/B,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,gBAAc,WAAW;AAAA,QACzB,iBAAe,YAAY;AAAA,QAC3B,kBAAgB,aAAa;AAAA,QAC7B,gBAAc,UAAU,SAAS;AAAA,QACjC,iBAAe,YAAY;AAAA,QAC3B,WAAW;AAAA,UACT,iBAAiB,EAAE,aAAa,MAAM,aAAa,MAAM,MAAM,MAAM;AAAA,UACrE,cAAc,CAAC,YAAY;AAAA,UAC3B,CAAC,aAAa;AAAA,UACd;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA,oBAAC,kBAAgB,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA,GAE9B;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;AAIvB,SAAS,eAAe,EAAE,YAA2C;AACnE,QAAM,QAAQ,gBAAA;AACd,QAAM,OAAO,mBAAA;AAEb,MAAI,YAA6B;AACjC,MAAI,WAA4B;AAChC,MAAI,cAA+B;AACnC,QAAM,SAAS,QAAQ,UAAU,CAAA,UAAS;AACxC,QAAI,CAAC,MAAM,eAAe,KAAK,EAAG;AAClC,QAAI,MAAM,SAAS,UAAW,aAAY;AAAA,aACjC,MAAM,SAAS,gBAAiB,YAAW;AAAA,aAC3C,MAAM,SAAS,YAAa,eAAc;AAAA,EACrD,CAAC;AAED,MAAI,MAAM,gBAAgB,cAAc;AACtC,WAAO,oBAAC,kBAAA,EAAiB,OAAO,WAAW,aAAa,UAAU;AAAA,EACpE;AACA,SACE,oBAAC,gBAAA,EAAe,OAAO,WAAW,aAAa,UAAU,SAAS,aAAa,QAAQ,KAAK,OAAA,CAAQ;AAExG;AAMA,MAAM,mBAAqD;AAAA,EACzD,WAAW;AAAA,EACX,SAAS;AAAA,EACT,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AACZ;AAEA,SAAS,eAAe,EAAE,UAAU,WAAW,SAAyF;AACtI,QAAM,OAAO,mBAAA;AACb,QAAM,QAAQ,gBAAA;AACd,QAAM,QAAQ,MAAM,WAAW,gBAAgB;AAC/C,QAAM,YAAY,CAAC,MAA2C;AAC5D,QAAI,CAAC,KAAK,UAAW;AACrB,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAA;AACF,WAAK,SAAA;AAAA,IACP;AAAA,EACF;AACA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM,KAAK,YAAY,WAAW;AAAA,MAClC,UAAU,KAAK,YAAY,IAAI;AAAA,MAC/B,SAAS,KAAK,YAAY,KAAK,WAAW;AAAA,MAC1C,WAAW,KAAK,YAAY,YAAY;AAAA,MACxC,iBAAe,KAAK,YAAY;AAAA,MAChC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,QAKT;AAAA,QACA,KAAK,YACD,gHACA;AAAA,QACJ;AAAA,MAAA;AAAA,MAEF;AAAA,MAEA,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,WAAW,UAAA,KAAK,KAAK,QAAQ,MAAM,KAAK,MAAM,iBAAiB,KAAK,KAAK,CAAC,IAAG;AAAA,QAC5F;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAIA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,QAAQ,gBAAA;AACd,QAAM,OAAO,mBAAA;AACb,QAAM,cAAc,CAAC,CAAC,WAAW,KAAK;AACtC,QAAM,eAAe,oBAAoB,MAAM,IAAI;AAEnD,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,qBAAC,gBAAA,EAAe,WAAU,0BAGxB,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAW,OAAO,EAAE,OAAO,gBAC1B,UAAA,oBAAC,iBAAc,EAAA,CACjB;AAAA,MACA,qBAAC,OAAA,EAAI,WAAU,yCACb,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,gCACZ,UAAA;AAAA,UAAA;AAAA,UACA;AAAA,QAAA,GACH;AAAA,QAGC,MAAM,cAAc,cAAc,CAAC,CAAC,WACnC,oBAAC,YAAA,EAAW,eAAW,MACrB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAW;AAAA,cACT;AAAA,cACA,KAAK,YAAY;AAAA,YAAA;AAAA,UACnB;AAAA,QAAA,EACF,CACF;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA,GACF;AAAA,IACC,eACC,qBAAC,OAAA,EAAI,WAAU,+BACb,UAAA;AAAA,MAAA,oBAAC,SAAI,WAAU,YAAW,OAAO,EAAE,OAAO,gBAAgB;AAAA,MAC1D,oBAAC,OAAA,EAAI,WAAU,kBAAkB,UAAA,QAAA,CAAQ;AAAA,IAAA,GAC3C;AAAA,IAED,CAAC,UAAU,oBAAC,uBAAA,CAAA,CAAsB;AAAA,EAAA,GACrC;AAEJ;AAIA,SAAS,wBAAwB;AAC/B,QAAM,QAAQ,gBAAA;AACd,QAAM,OAAO,mBAAA;AACb,QAAM,SAAS,KAAK,UAAU;AAC9B,QAAM,SAAS,eAAe,MAAM,IAAI,IAAI;AAC5C,QAAM,MAAM;AAEZ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,MACX,WAAW;AAAA;AAAA;AAAA,QAGT;AAAA,QACA,SAAS,YAAY;AAAA,MAAA;AAAA,MAEvB,OAAO;AAAA,QACL,MAAM,oBAAoB,MAAM,IAAI,IAAI;AAAA,QACxC,KAAK,gBAAgB,MAAM,QAAQ,GAAG;AAAA,QACtC,QAAQ,QAAQ,MAAM,gBAAgB,GAAG;AAAA,MAAA;AAAA,IAC3C;AAAA,EAAA;AAGN;AAkBA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AACF,GAGG;AACD,QAAM,OAAO,mBAAA;AACb,QAAM,QAAQ,gBAAA;AACd,QAAM,SAAS,KAAK,UAAU;AAC9B,QAAM,eAAe,oBAAoB,MAAM,IAAI;AAEnD,SACE,qBAAA,UAAA,EAEE,UAAA;AAAA,IAAA,qBAAC,gBAAA,EAAe,WAAU,0BAExB,UAAA;AAAA,MAAA,oBAAC,YAAA,EACC,UAAA,oBAAC,eAAA,CAAA,CAAc,GACjB;AAAA,MACA,oBAAC,OAAA,EAAI,WAAU,oBAAoB,UAAA,OAAM;AAAA,MAExC,CAAC,KAAK,8BACJ,OAAA,EAAI,WAAU,4CAA2C,eAAW,MACnE,UAAA,oBAAC,OAAA,EAAI,WAAW,GAAG,eAAe,SAAS,YAAY,WAAW,GAAG,EAAA,CACvE;AAAA,IAAA,GAEJ;AAAA,IAEC,eACC,oBAAC,OAAA,EAAI,WAAU,WAAU,OAAO,EAAE,aAAa,eAAe,MAC3D,UAAA,YAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;AAIA,SAAS,gBAAgB;AACvB,QAAM,QAAQ,gBAAA;AACd,QAAM,OAAO,mBAAA;AACb,QAAM,EAAE,MAAM,OAAA,IAAW;AACzB,QAAM,EAAE,OAAO,SAAS,SAAA,IAAa;AAErC,MAAI,SAAS,KAAM,QAAO,oBAAC,eAAY,OAAc,SAAkB,UAAoB,QAAgB;AAC3G,6BAAQ,eAAA,EAAc,MAAY,OAAc,SAAkB,UAAoB,QAAgB;AACxG;AAIA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AAED,QAAM,WAAY,UAAU,aAAa,UAAW,UAAU;AAE9D,MAAI;AACJ,MAAI,UAAU;AACZ,eAAW;AAAA,MACT,OAAO,eAAe;AAAA,MACtB,QAAQ,eAAe;AAAA,MACvB,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,WAAW,UAAU,mBAAmB,iBAAiB,OAAO,MAAM,CAAC,IAAI;AAAA,IAAA;AAAA,EAE/E,OAAO;AACL,UAAM,QACJ,UAAU,cAAc,gBACpB,UAAU,UAAU,iBAClB,UAAU,aAAa,CAAC,SAAS,uBAC/B;AAEV,eAAW;AAAA,MACT,OAAO,eAAe;AAAA,MACtB,QAAQ,eAAe;AAAA,MACvB,YAAY;AAAA,MACZ,WAAW,UAAU,mBAAmB,iBAAiB,OAAO,MAAM,CAAC,IAAI;AAAA,IAAA;AAAA,EAE/E;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,MACX,WAAU;AAAA,MACV,OAAO,EAAE,OAAO,aAAa,QAAQ,YAAA;AAAA,MAErC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,GAAG,sBAAsB,YAAY,kBAAkB;AAAA,UAClE,OAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IACT;AAAA,EAAA;AAGN;AAIA,SAAS,cAAc;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,WAAW,eAAe,IAAI;AACpC,QAAM,SAAS,oBAAoB,IAAI;AAEvC,MAAI;AACJ,MAAI;AAEJ,UAAQ,OAAA;AAAA,IACN,KAAK;AACH,eAAS;AACT,qBAAe;AACf;AAAA,IACF,KAAK;AACH,eAAS;AACT,qBAAe;AACf;AAAA,IACF,KAAK;AACH,UAAI,QAAQ;AACV,iBAAS;AACT,uBAAe;AAAA,MACjB,OAAO;AACL,iBAAS;AACT,uBAAe;AAAA,MACjB;AACA;AAAA,IACF,KAAK;AACH,eAAS;AACT,qBAAe;AACf;AAAA,IACF;AACE,UAAI,QAAQ;AACV,iBAAS;AACT,uBAAe;AAAA,MACjB,OAAO;AACL,iBAAS;AACT,uBAAe;AAAA,MACjB;AACA;AAAA,EAAA;AAGJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,MACX,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,YAAY;AAAA,MAAA;AAAA,MAEd,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,OAAO;AAAA;AAAA,QAEP,UAAU,SAAS,OAAO,6BAA6B;AAAA,QACvD,WAAW,UAAU,mBAAmB,iBAAiB,OAAO,MAAM,CAAC,IAAI;AAAA,MAAA;AAAA,MAG7E,UAAA,oBAAC,kBAAA,EAAiB,OAAc,OAAA,CAAgB;AAAA,IAAA;AAAA,EAAA;AAGtD;AAEA,SAAS,iBAAiB,EAAE,OAAO,UAAuD;AACxF,MAAI,UAAU,YAAa,QAAO,oBAAC,SAAM,MAAM,QAAQ,aAAa,KAAK;AACzE,MAAI,UAAU,QAAS,QAAO,oBAAC,KAAE,MAAM,QAAQ,aAAa,KAAK;AACjE,6BAAQ,YAAA,EAAW;AACrB;AAEA,SAAS,aAAa;AACpB,QAAM,QAAQ,MAAM,WAAW,gBAAgB;AAC/C,SAAO,oBAAC,UAAM,UAAA,MAAA,CAAM;AACtB;AAOA,MAAM,YAAY,MAAM;AAAA,EACtB,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,UAAM,EAAE,KAAA,IAAS,gBAAA;AACjB,UAAM,EAAE,OAAO,SAAS,SAAA,IAAa,mBAAA;AAErC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA;AAAA;AAAA,UAGT;AAAA,UACA,SAAS,OAAO,iBAAiB;AAAA,UACjC,WACI,qBACA,UAAU,UACR,oBACA,UACE,oBACA;AAAA,UACR;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,UAAU,cAAc;AAMxB,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,UAAU,OAAO,GAAG,MAAA,GAAS,QAAQ;AACjD,UAAM,EAAE,KAAA,IAAS,gBAAA;AACjB,UAAM,EAAE,SAAA,IAAa,mBAAA;AAErB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA;AAAA,UAET,SAAS,OACL,gDACA;AAAA,UACJ;AAAA,UACA,WAAW,qBAAqB;AAAA,UAChC;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,UACL,UAAU,SAAS,OAAO,0BAA0B;AAAA,UACpD,GAAG;AAAA,QAAA;AAAA,QAEJ,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,gBAAgB,cAAc;AAM9B,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,UAAM,EAAE,YAAA,IAAgB,gBAAA;AACxB,QAAI,gBAAgB,aAAc,QAAO;AACzC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,qCAAqC,SAAS;AAAA,QAC3D,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,YAAY,cAAc;AAMnB,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU,CAAA;AAAA,EACV,OAAO;AAAA,IACL,IAAI,EAAE,IAAI,GAAG,MAAM,4CAAA;AAAA,IACnB,IAAI,EAAE,IAAI,IAAI,MAAM,uDAAA;AAAA,IACpB,IAAI,EAAE,IAAI,IAAI,MAAM,uDAAA;AAAA,EAAuD;AAAA,EAE7E,QAAQ,CAAC,YAAY,aAAa,WAAW,aAAa,OAAO;AAAA;AAAA,EACjE,QAAQ;AAAA,IACN,IAAI,CAAC,SAAS;AAAA,IACd,IAAI,CAAC,iBAAiB,gBAAgB,iBAAiB,mBAAmB,oBAAoB,iBAAiB,qBAAqB,iBAAiB;AAAA,IACrJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}
1	+ {"version":3,"file":"steps.js","sources":["../../../src/components/Steps/steps.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\n// code-quality-allow: file-size — foundational composite(Steps + StepItem + orientation/state/connector 邏輯緊密耦合,拆檔會讓 props drilling 複雜化超過可讀 gain)\nimport * as React from 'react'\nimport { Check, ChevronDown, X } from 'lucide-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport { ItemPrefix, ItemSuffix } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n// ── Types ─────────────────────────────────────────────────────────────────\n\nexport type StepsSize = 'sm' \| 'md' \| 'lg'\n// code-quality-allow: dead-export — public API surface — consumer-exposed for future use\nexport type StepsOrientation = 'vertical' \| 'horizontal'\nexport type StepsExpansion = 'follow-active' \| 'multiple'\nexport type StepContentState = 'upcoming' \| 'reachable' \| 'current' \| 'completed' \| 'error'\n\n// ── Constants ─────────────────────────────────────────────────────────────\n\nconst INDICATOR_SIZE: Record<StepsSize, number> = {\n sm: 8,\n md: 24,\n lg: 32,\n}\n\nconst INDICATOR_ICON_SIZE: Record<StepsSize, number> = {\n sm: 0,\n md: 16,\n lg: 20,\n}\n\nconst SM_HIT_AREA = 24\n\nconst INDICATOR_BOX_WIDTH: Record<StepsSize, number> = {\n sm: SM_HIT_AREA,\n md: INDICATOR_SIZE.md,\n lg: INDICATOR_SIZE.lg,\n}\n\n// ── Outer ring (box-shadow, zero layout impact) ───────────────────────────\n\nconst RING_GAP_PX = 2\nconst RING_WIDTH_PX = 2\n\nfunction getOuterRingShadow(ringColor: string): string {\n return `0 0 0 ${RING_GAP_PX}px var(--surface), 0 0 0 ${RING_GAP_PX + RING_WIDTH_PX}px ${ringColor}`\n}\n\nfunction resolveRingColor(state: StepContentState, linear: boolean): string {\n if (state === 'error') return 'var(--error-hover)'\n if (state === 'current' && !linear) return 'var(--border-hover)'\n return 'var(--info-hover)'\n}\n\n// ── Contexts ──────────────────────────────────────────────────────────────\n\ninterface StepsContextValue {\n value: string \| undefined\n completedValues: Set<string>\n errorValues: Set<string>\n reachableValues: Set<string>\n linear: boolean\n size: StepsSize\n orientation: StepsOrientation\n expansion: StepsExpansion\n expandedSet: Set<string>\n setValue: (value: string) => void\n toggleExpanded: (value: string) => void\n total: number\n}\n\nconst StepsContext = React.createContext<StepsContextValue \| null>(null)\n\nfunction useStepsContext(): StepsContextValue {\n const ctx = React.useContext(StepsContext)\n if (!ctx) throw new Error('Steps compound components must be rendered inside <Steps>')\n return ctx\n}\n\ninterface StepItemContextValue {\n value: string\n state: StepContentState\n focused: boolean\n disabled: boolean\n clickable: boolean\n expanded: boolean\n isLast: boolean\n activate: () => void\n}\n\nconst StepItemContext = React.createContext<StepItemContextValue \| null>(null)\n\nfunction useStepItemContext(): StepItemContextValue {\n const ctx = React.useContext(StepItemContext)\n if (!ctx) throw new Error('StepLabel / StepDescription / StepContent must be inside <StepItem>')\n return ctx\n}\n\nconst StepIndexContext = React.createContext<number>(0)\n\n// ── Pure helpers ──────────────────────────────────────────────────────────\n\nfunction computeState(\n itemValue: string,\n value: string \| undefined,\n completedValues: Set<string>,\n errorValues: Set<string>,\n reachableValues: Set<string>,\n linear: boolean,\n override: StepContentState \| undefined,\n): StepContentState {\n if (override) return override\n if (errorValues.has(itemValue)) return 'error'\n if (completedValues.has(itemValue)) return 'completed'\n if (itemValue === value) return 'current'\n if (linear && reachableValues.has(itemValue)) return 'reachable'\n return 'upcoming'\n}\n\nfunction isClickable(\n state: StepContentState,\n linear: boolean,\n disabled: boolean,\n): boolean {\n if (disabled) return false\n if (!linear) return true\n return state !== 'upcoming'\n}\n\nfunction normalizeExpanded(\n defaultExpanded: 'all' \| 'none' \| string[] \| undefined,\n allValues: string[],\n): Set<string> {\n if (defaultExpanded === 'all') return new Set(allValues)\n if (!defaultExpanded \|\| defaultExpanded === 'none') return new Set()\n return new Set(defaultExpanded)\n}\n\nfunction computeReachableValues(\n childValues: string[],\n completedValues: string[],\n): Set<string> {\n const completed = new Set(completedValues)\n const reachable = new Set(completed)\n for (const v of childValues) {\n if (!completed.has(v)) {\n reachable.add(v)\n break\n }\n }\n return reachable\n}\n\n// ── Steps root ────────────────────────────────────────────────────────────\n\nconst stepsRootVariants = cva('list-none p-0 m-0', {\n variants: {\n orientation: {\n vertical: 'flex flex-col',\n horizontal: 'flex flex-row items-start gap-3',\n },\n },\n defaultVariants: { orientation: 'vertical' },\n})\n\nexport interface StepsProps\n extends Omit<React.HTMLAttributes<HTMLOListElement>, 'onChange' \| 'defaultValue'>,\n VariantProps<typeof stepsRootVariants> {\n value?: string\n defaultValue?: string\n onValueChange?: (value: string) => void\n completedValues?: string[]\n errorValues?: string[]\n linear?: boolean\n size?: StepsSize\n orientation?: StepsOrientation\n expansion?: StepsExpansion\n defaultExpanded?: 'all' \| 'none' \| string[]\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst Steps = React.forwardRef<HTMLOListElement, StepsProps>(\n (\n {\n value: valueProp,\n defaultValue,\n onValueChange,\n completedValues = [],\n errorValues = [],\n linear = true,\n size = 'md',\n orientation = 'vertical',\n expansion = 'follow-active',\n defaultExpanded,\n className,\n children,\n ...props\n },\n ref,\n ) => {\n const [internalValue, setInternalValue] = React.useState<string \| undefined>(defaultValue)\n const isControlled = valueProp !== undefined\n const value = isControlled ? valueProp : internalValue\n\n const setValue = React.useCallback(\n (next: string) => {\n if (!isControlled) setInternalValue(next)\n onValueChange?.(next)\n },\n [isControlled, onValueChange],\n )\n\n const childValues = React.useMemo(() => {\n const vals: string[] = []\n React.Children.forEach(children, child => {\n if (\n React.isValidElement(child) &&\n typeof child.props === 'object' &&\n child.props &&\n 'value' in child.props\n ) {\n vals.push(String((child.props as { value: string }).value))\n }\n })\n return vals\n }, [children])\n\n const reachableValues = React.useMemo(\n () => computeReachableValues(childValues, completedValues),\n [childValues, completedValues],\n )\n\n const [expandedSet, setExpandedSet] = React.useState<Set<string>>(() =>\n normalizeExpanded(defaultExpanded, childValues),\n )\n\n const toggleExpanded = React.useCallback((itemValue: string) => {\n setExpandedSet(prev => {\n const next = new Set(prev)\n if (next.has(itemValue)) next.delete(itemValue)\n else next.add(itemValue)\n return next\n })\n }, [])\n\n const stepCount = React.Children.count(children)\n\n const ctxValue = React.useMemo<StepsContextValue>(\n () => ({\n value,\n completedValues: new Set(completedValues),\n errorValues: new Set(errorValues),\n reachableValues,\n linear,\n size,\n orientation,\n expansion,\n expandedSet,\n setValue,\n toggleExpanded,\n total: stepCount,\n }),\n [value, completedValues, errorValues, reachableValues, linear, size, orientation, expansion, expandedSet, setValue, toggleExpanded, stepCount],\n )\n\n // Interleave horizontal connectors between items\n const count = stepCount\n const itemsWithIndex: React.ReactNode[] = []\n\n React.Children.forEach(children, (child, index) => {\n if (!React.isValidElement(child)) {\n itemsWithIndex.push(child)\n return\n }\n const isLast = index === count - 1\n const cloned = React.cloneElement(\n child as React.ReactElement<StepItemInjectedProps>,\n { __isLast: isLast },\n )\n itemsWithIndex.push(\n <StepIndexContext.Provider key={`item-${index}`} value={index + 1}>\n {cloned}\n </StepIndexContext.Provider>,\n )\n // Horizontal connectors are now INSIDE each StepItem (Ant Design pattern),\n // not between items. No interleaving needed.\n })\n\n return (\n <StepsContext.Provider value={ctxValue}>\n <ol\n ref={ref}\n data-orientation={orientation}\n data-size={size}\n className={cn(stepsRootVariants({ orientation }), className)}\n {...props}\n >\n {itemsWithIndex}\n </ol>\n </StepsContext.Provider>\n )\n },\n)\nSteps.displayName = 'Steps'\n\n// ── StepItem ──────────────────────────────────────────────────────────────\n\ninterface StepItemInjectedProps {\n __isLast?: boolean\n}\n\nexport interface StepItemProps\n extends Omit<React.HTMLAttributes<HTMLLIElement>, 'value'>,\n StepItemInjectedProps {\n value: string\n state?: 'error'\n disabled?: boolean\n}\n\nconst stepItemVariants = cva('group/step-item outline-none', {\n variants: {\n orientation: {\n // pb-6 on li provides spacing for next item; connector is absolute within li\n vertical: 'relative flex flex-col',\n // Ant Design pattern:flex-1 等寬(最後一步用 last: 覆蓋成自然寬度)。\n // Connector 在 item 內部(不是 items 之間的獨立元素)。\n horizontal: 'flex-1 min-w-0 last:flex-none last:shrink-0',\n },\n size: {\n sm: 'text-body',\n md: 'text-body',\n lg: 'text-body-lg',\n },\n },\n defaultVariants: { orientation: 'vertical', size: 'md' },\n})\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst StepItem = React.forwardRef<HTMLLIElement, StepItemProps>(\n ({ value, state: stateOverride, disabled = false, children, className, __isLast = false, ...props }, ref) => {\n const steps = useStepsContext()\n const state = computeState(\n value,\n steps.value,\n steps.completedValues,\n steps.errorValues,\n steps.reachableValues,\n steps.linear,\n stateOverride,\n )\n const focused = value === steps.value\n const clickable = isClickable(state, steps.linear, disabled)\n const expanded =\n steps.expansion === 'follow-active' ? focused : steps.expandedSet.has(value)\n\n const activate = React.useCallback(() => {\n if (!clickable) return\n // 永遠更新 focus(value),multiple 模式額外 toggle 展開\n steps.setValue(value)\n if (steps.expansion === 'multiple') {\n steps.toggleExpanded(value)\n }\n }, [clickable, steps, value])\n\n const itemCtx = React.useMemo<StepItemContextValue>(() => ({\n value,\n state,\n focused,\n disabled,\n clickable,\n expanded,\n isLast: __isLast,\n activate,\n }), [value, state, focused, disabled, clickable, expanded, __isLast, activate])\n\n const isVertical = steps.orientation === 'vertical'\n\n return (\n <StepItemContext.Provider value={itemCtx}>\n <li\n ref={ref}\n data-state={state}\n data-focused={focused \|\| undefined}\n data-disabled={disabled \|\| undefined}\n data-clickable={clickable \|\| undefined}\n aria-current={focused ? 'step' : undefined}\n aria-disabled={disabled \|\| undefined}\n className={cn(\n stepItemVariants({ orientation: steps.orientation, size: steps.size }),\n isVertical && !__isLast && 'pb-6',\n !clickable && 'cursor-not-allowed',\n className,\n )}\n {...props}\n >\n <StepItemLayout>{children}</StepItemLayout>\n </li>\n </StepItemContext.Provider>\n )\n },\n)\nStepItem.displayName = 'StepItem'\n\n// ── StepItem internal layout ─────────────────────────────────────────────\n\nfunction StepItemLayout({ children }: { children: React.ReactNode }) {\n const steps = useStepsContext()\n const item = useStepItemContext()\n\n let labelNode: React.ReactNode = null\n let descNode: React.ReactNode = null\n let contentNode: React.ReactNode = null\n React.Children.forEach(children, child => {\n if (!React.isValidElement(child)) return\n if (child.type === StepLabel) labelNode = child\n else if (child.type === StepDescription) descNode = child\n else if (child.type === StepContent) contentNode = child\n })\n\n if (steps.orientation === 'horizontal') {\n return <HorizontalLayout label={labelNode} description={descNode} />\n }\n return (\n <VerticalLayout label={labelNode} description={descNode} content={contentNode} isLast={item.isLast} />\n )\n}\n\n// ── Clickable header ─────────────────────────────────────────────────────\n\n// SR-only 狀態文字 map(2026-06-01 #25 a11y:indicator 是 aria-hidden 純視覺,故「第 N 步/共 M 步/狀態」\n// 需經 sr-only span 給螢幕報讀器。對齊 Carbon ProgressIndicator `--assistive-text`(已完成/進行中/未開始)慣例)\nconst STEP_STATUS_TEXT: Record<StepContentState, string> = {\n completed: '已完成',\n current: '進行中',\n error: '錯誤',\n reachable: '未開始',\n upcoming: '未開始',\n}\n\nfunction StepItemHeader({ children, className, style, contentId }: { children: React.ReactNode; className?: string; style?: React.CSSProperties; contentId?: string }) {\n const item = useStepItemContext()\n const steps = useStepsContext()\n const index = React.useContext(StepIndexContext)\n const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n if (!item.clickable) return\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault()\n item.activate()\n }\n }\n return (\n <div\n role={item.clickable ? 'button' : undefined}\n tabIndex={item.clickable ? 0 : undefined}\n onClick={item.clickable ? item.activate : undefined}\n onKeyDown={item.clickable ? onKeyDown : undefined}\n aria-disabled={item.disabled \|\| undefined}\n // 2026-07-05 D4 修:step 有 content 的可點 header(role=button)必帶 aria-expanded —\n // WAI-ARIA disclosure pattern trigger 最低要求(multiple 模式 toggle;follow-active 亦\n // 同步反映展開狀態)。aria-controls 只在 content 實際 render(展開)時輸出,避免\n // dangling id reference(content 收合時不在 DOM)。\n aria-expanded={item.clickable && contentId ? item.expanded : undefined}\n aria-controls={item.clickable && contentId && item.expanded ? contentId : undefined}\n className={cn(\n // leading-compact:scanning-family header 行高 = 1.3(item-anatomy.spec.md:776 掃描模式 label 行高)。\n // 設在 header 而非 li 根 → prefix h-[1lh] + 水平 connector h-[1lh] + label(StepLabel 亦 leading-compact)\n // 全用 1.3 對齊;li 根 text-body(1.5,steps.tsx:329-331)留給展開 content 的 reading 行高,不被\n // scanning 波及(避免改A壞B)。對齊 MenuItem 把 leading-compact 放 row 容器之原則(item-anatomy.tsx:144-146)。\n 'outline-none leading-compact',\n item.clickable\n ? 'cursor-pointer rounded-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring'\n : 'cursor-not-allowed',\n className,\n )}\n style={style}\n >\n <span className=\"sr-only\">{`第 ${index} 步,共 ${steps.total} 步,${STEP_STATUS_TEXT[item.state]}`}</span>\n {children}\n </div>\n )\n}\n\n// ── Vertical layout ──────────────────────────────────────────────────────\n\nfunction VerticalLayout({\n label,\n description,\n content,\n isLast,\n}: {\n label: React.ReactNode\n description: React.ReactNode\n content: React.ReactNode\n isLast: boolean\n}) {\n const steps = useStepsContext()\n const item = useStepItemContext()\n const showContent = !!content && item.expanded\n const indicatorBox = INDICATOR_BOX_WIDTH[steps.size]\n // 2026-07-05 D4 修:content 區 id 供 header aria-controls 指向(disclosure 配線)\n const contentId = React.useId()\n\n return (\n <>\n <StepItemHeader className=\"flex items-start gap-3\" contentId={content ? contentId : undefined}>\n {/* Row prefix slot — 消費 item-anatomy <ItemPrefix>(h-[1lh] 對齊 label 第一行 SSOT);\n width = INDICATOR_BOX_WIDTH 固定欄寬,base justify-center 讓 sm dot 在欄內置中 /}\n <ItemPrefix style={{ width: indicatorBox }}>\n <StepIndicator />\n </ItemPrefix>\n <div className=\"flex-1 min-w-0 flex items-start gap-2\">\n <div className=\"flex-1 min-w-0 flex flex-col\">\n {label}\n {description}\n </div>\n {/ Row suffix slot — 消費 item-anatomy <ItemSuffix>(h-[1lh] 對齊 label 第一行);\n text col 是 flex-1 → base ml-auto 惰性,8px 間距由父層 gap-2 提供(= MenuItem 父層 gap idiom)/}\n {steps.expansion === 'multiple' && !!content && (\n <ItemSuffix aria-hidden>\n <ChevronDown\n size={16}\n className={cn(\n 'text-fg-muted transition-transform duration-150',\n item.expanded && 'rotate-180',\n )}\n />\n </ItemSuffix>\n )}\n </div>\n </StepItemHeader>\n {showContent && (\n <div id={contentId} className=\"flex items-start gap-3 mt-3\">\n <div className=\"shrink-0\" style={{ width: indicatorBox }} />\n <div className=\"flex-1 min-w-0\">{content}</div>\n </div>\n )}\n {!isLast && <VerticalConnectorLine />}\n </>\n )\n}\n\n// ── Vertical connector ───────────────────────────────────────────────────\n\nfunction VerticalConnectorLine() {\n const steps = useStepsContext()\n const item = useStepItemContext()\n const isBlue = item.state === 'completed'\n const radius = INDICATOR_SIZE[steps.size] / 2\n const gap = 8\n\n return (\n <div\n aria-hidden\n className={cn(\n // leading-compact:connector 的 0.5lh 須跟 scanning label 同行高(1.3)→ 起點對齊 circle 中心\n // (circle 對齊 label 第一行;label 已 leading-compact)。否則 connector 繼承 li 根 1.5 → 0.5lh 偏大 → 起點偏低。\n 'absolute w-px leading-compact',\n isBlue ? 'bg-info' : 'bg-border',\n )}\n style={{\n left: INDICATOR_BOX_WIDTH[steps.size] / 2,\n top: `calc(0.5lh + ${radius}px + ${gap}px)`,\n bottom: `calc(${radius}px - 0.5lh + ${gap}px)`,\n }}\n />\n )\n}\n\n// ── Horizontal layout (Ant Design pattern) ──────────────────────────────\n//\n// Connector 在 item 內部(不是 items 之間的獨立元素):\n// Step (flex-1): [indicator][gap][label][gap][──connector──]\n// Last step: [indicator][gap][label] (無 connector)\n//\n// Root: flex-row gap-3 → gap 只在 step items 之間\n// Step items: flex-1 等寬(最後一步 flex-none 自然寬度)\n//\n// 等距保證:\n// label→connector gap = item 內 flex gap-3 = 12px\n// connector→next circle = root gap-3 = 12px\n// 兩邊都是 12px ✓\n//\n// Description 在 step item 內(connector 下方),wrap 到 item 寬度 = 最長到連結線尾段 ✓\n\nfunction HorizontalLayout({\n label,\n description,\n}: {\n label: React.ReactNode\n description: React.ReactNode\n}) {\n const item = useStepItemContext()\n const steps = useStepsContext()\n const isBlue = item.state === 'completed'\n const indicatorBox = INDICATOR_BOX_WIDTH[steps.size]\n\n return (\n <>\n {/ Row 1: indicator + label + connector(在同一個 flex row) /}\n <StepItemHeader className=\"flex items-start gap-3\">\n {/ Row prefix slot — 消費 item-anatomy <ItemPrefix>(h-[1lh] 對齊 label 第一行 SSOT)/}\n <ItemPrefix>\n <StepIndicator />\n </ItemPrefix>\n <div className=\"shrink-0 min-w-0\">{label}</div>\n {/ Connector 在 item 內部,flex-1 填滿剩餘寬度 /}\n {!item.isLast && (\n <div className=\"h-[1lh] flex-1 flex items-center min-w-4\" aria-hidden>\n <div className={cn('h-px w-full', isBlue ? 'bg-info' : 'bg-border')} />\n </div>\n )}\n </StepItemHeader>\n {/ Row 2: description — 在 item 寬度內 wrap(含 connector 佔的空間) */}\n {description && (\n <div className=\"min-w-0\" style={{ paddingLeft: indicatorBox + 12 }}>\n {description}\n </div>\n )}\n </>\n )\n}\n\n// ── StepIndicator ────────────────────────────────────────────────────────\n\nfunction StepIndicator() {\n const steps = useStepsContext()\n const item = useStepItemContext()\n const { size, linear } = steps\n const { state, focused, disabled } = item\n\n if (size === 'sm') return <SmIndicator state={state} focused={focused} disabled={disabled} linear={linear} />\n return <MdLgIndicator size={size} state={state} focused={focused} disabled={disabled} linear={linear} />\n}\n\n// ── sm indicator: 8px dot in 24px hit area ───────────────────────────────\n\nfunction SmIndicator({\n state,\n focused,\n disabled,\n linear,\n}: {\n state: StepContentState\n focused: boolean\n disabled: boolean\n linear: boolean\n}) {\n // sm current (linear) and reachable: hollow ring\n const isHollow = (state === 'current' && linear) \|\| state === 'reachable'\n\n let dotStyle: React.CSSProperties\n if (isHollow) {\n dotStyle = {\n width: INDICATOR_SIZE.sm,\n height: INDICATOR_SIZE.sm,\n background: 'transparent',\n border: '2px solid var(--info-hover)',\n boxShadow: focused ? getOuterRingShadow(resolveRingColor(state, linear)) : undefined,\n }\n } else {\n const dotBg =\n state === 'completed' ? 'var(--info)'\n : state === 'error' ? 'var(--error)'\n : state === 'current' && !linear ? 'var(--fg-disabled)'\n : 'var(--fg-disabled)' // upcoming + non-linear fallback\n\n dotStyle = {\n width: INDICATOR_SIZE.sm,\n height: INDICATOR_SIZE.sm,\n background: dotBg,\n boxShadow: focused ? getOuterRingShadow(resolveRingColor(state, linear)) : undefined,\n }\n }\n\n return (\n <span\n aria-hidden\n className=\"relative inline-flex items-center justify-center shrink-0\"\n style={{ width: SM_HIT_AREA, height: SM_HIT_AREA }}\n >\n <span\n className={cn('block rounded-full', disabled && 'opacity-disabled')}\n style={dotStyle}\n />\n </span>\n )\n}\n\n// ── md/lg indicator: filled circle with number/icon ──────────────────────\n\nfunction MdLgIndicator({\n size,\n state,\n focused,\n disabled,\n linear,\n}: {\n size: StepsSize\n state: StepContentState\n focused: boolean\n disabled: boolean\n linear: boolean\n}) {\n const diameter = INDICATOR_SIZE[size]\n const iconPx = INDICATOR_ICON_SIZE[size]\n\n let fillBg: string\n let contentColor: string\n\n switch (state) {\n case 'error':\n fillBg = 'var(--error)'\n contentColor = 'var(--on-emphasis)'\n break\n case 'completed':\n fillBg = 'var(--info)'\n contentColor = 'var(--on-emphasis)'\n break\n case 'current':\n if (linear) {\n fillBg = 'var(--info)'\n contentColor = 'var(--on-emphasis)'\n } else {\n fillBg = 'var(--secondary)'\n contentColor = 'var(--foreground)'\n }\n break\n case 'reachable':\n fillBg = 'var(--info)'\n contentColor = 'var(--on-emphasis)'\n break\n default: // upcoming\n if (linear) {\n fillBg = 'var(--muted)'\n contentColor = 'var(--fg-disabled)'\n } else {\n fillBg = 'var(--secondary)'\n contentColor = 'var(--foreground)'\n }\n break\n }\n\n return (\n <span\n aria-hidden\n className={cn(\n 'relative inline-flex items-center justify-center shrink-0 rounded-full',\n 'font-medium leading-none transition-colors',\n disabled && 'opacity-disabled',\n )}\n style={{\n width: diameter,\n height: diameter,\n background: fillBg,\n color: contentColor,\n // 2026-06-11 R2:對齊 spec canonical「indicator 數字與 label 同級」(steps.spec.md 狀態表 md=14/lg=16;spec 明文「之前寫小一號(md=12,lg=14)是錯的」)\n fontSize: size === 'lg' ? 'var(--font-body-lg-size)' : 'var(--font-body-size)',\n boxShadow: focused ? getOuterRingShadow(resolveRingColor(state, linear)) : undefined,\n }}\n >\n <IndicatorContent state={state} iconPx={iconPx} />\n </span>\n )\n}\n\nfunction IndicatorContent({ state, iconPx }: { state: StepContentState; iconPx: number }) {\n if (state === 'completed') return <Check size={iconPx} strokeWidth={2.5} />\n if (state === 'error') return <X size={iconPx} strokeWidth={2.5} />\n return <StepNumber />\n}\n\nfunction StepNumber() {\n const index = React.useContext(StepIndexContext)\n return <span>{index}</span>\n}\n\n// ── StepLabel ────────────────────────────────────────────────────────────\n\nexport interface StepLabelProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst StepLabel = React.forwardRef<HTMLSpanElement, StepLabelProps>(\n ({ className, children, ...props }, ref) => {\n const { size } = useStepsContext()\n const { state, focused, disabled } = useStepItemContext()\n\n return (\n <span\n ref={ref}\n className={cn(\n // leading-compact:scanning-family label 行高 = 1.3(item-anatomy.spec.md:776);text-body utility\n // 自帶 lh:1.5,須顯式 leading-compact 蓋回 1.3,跟 MenuItem label(實測 14px/18px=1.3)一致。\n 'font-medium break-words leading-compact',\n size === 'lg' ? 'text-body-lg' : 'text-body',\n disabled\n ? 'text-fg-disabled'\n : state === 'error'\n ? 'text-error-text'\n : focused\n ? 'text-foreground'\n : 'text-fg-secondary',\n className,\n )}\n {...props}\n >\n {children}\n </span>\n )\n },\n)\nStepLabel.displayName = 'StepLabel'\n\n// ── StepDescription ──────────────────────────────────────────────────────\n\nexport interface StepDescriptionProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\nconst StepDescription = React.forwardRef<HTMLSpanElement, StepDescriptionProps>(\n ({ className, children, style, ...props }, ref) => {\n const { size } = useStepsContext()\n const { disabled } = useStepItemContext()\n\n return (\n <span\n ref={ref}\n className={cn(\n // Steps 跟 MenuItem 同 scanning-family:sm/md = scanning(body+caption),lg = scanning-lg(body-lg+body-compact)\n size === 'lg'\n ? 'mt-[var(--item-gap-label-desc-scanning-lg)]'\n : 'mt-[var(--item-gap-label-desc-scanning)]',\n 'leading-compact break-words',\n disabled ? 'text-fg-disabled' : 'text-fg-secondary',\n className,\n )}\n style={{\n fontSize: size === 'lg' ? 'var(--font-body-size)' : 'var(--font-caption-size)',\n ...style,\n }}\n {...props}\n >\n {children}\n </span>\n )\n },\n)\nStepDescription.displayName = 'StepDescription'\n\n// ── StepContent ──────────────────────────────────────────────────────────\n\nexport interface StepContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst StepContent = React.forwardRef<HTMLDivElement, StepContentProps>(\n ({ className, children, ...props }, ref) => {\n const { orientation } = useStepsContext()\n if (orientation === 'horizontal') return null\n return (\n <div\n ref={ref}\n className={cn('text-body text-foreground min-w-0', className)}\n {...props}\n >\n {children}\n </div>\n )\n },\n)\nStepContent.displayName = 'StepContent'\n\n// ── Exports ──────────────────────────────────────────────────────────────\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 stepsMeta = {\n component: 'Steps',\n family: 2,\n variants: {},\n sizes: {\n sm: { px: 8, when: 'Sidebar / 緊湊 onboarding;indicator 8px dot' },\n md: { px: 24, when: '預設 — wizard / checkout / 註冊主流程;indicator 24px circle' },\n lg: { px: 32, when: 'Marketing 流程展示 / 重要 onboarding;indicator 32px circle' },\n },\n states: ['upcoming', 'reachable', 'current', 'completed', 'error'], // 2026-06-11 R2:content-state 模型(spec 狀態表),非 Phase-1 boilerplate 互動 states,\n tokens: {\n bg: ['bg-info'],\n fg: ['--fg-disabled', '--foreground', '--on-emphasis', 'text-error-text', 'text-fg-disabled', 'text-fg-muted', 'text-fg-secondary', 'text-foreground'],\n ring: [],\n },\n} as const\n\nexport { Steps, StepItem, StepLabel, StepDescription, StepContent, stepsRootVariants, stepItemVariants }\n"],"names":[],"mappings":";;;;;;AAkBA,MAAM,iBAA4C;AAAA,EAChD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,sBAAiD;AAAA,EACrD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,cAAc;AAEpB,MAAM,sBAAiD;AAAA,EACrD,IAAI;AAAA,EACJ,IAAI,eAAe;AAAA,EACnB,IAAI,eAAe;AACrB;AAIA,MAAM,cAAc;AACpB,MAAM,gBAAgB;AAEtB,SAAS,mBAAmB,WAA2B;AACrD,SAAO,SAAS,WAAW,4BAA4B,cAAc,aAAa,MAAM,SAAS;AACnG;AAEA,SAAS,iBAAiB,OAAyB,QAAyB;AAC1E,MAAI,UAAU,QAAS,QAAO;AAC9B,MAAI,UAAU,aAAa,CAAC,OAAQ,QAAO;AAC3C,SAAO;AACT;AAmBA,MAAM,eAAe,MAAM,cAAwC,IAAI;AAEvE,SAAS,kBAAqC;AAC5C,QAAM,MAAM,MAAM,WAAW,YAAY;AACzC,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,2DAA2D;AACrF,SAAO;AACT;AAaA,MAAM,kBAAkB,MAAM,cAA2C,IAAI;AAE7E,SAAS,qBAA2C;AAClD,QAAM,MAAM,MAAM,WAAW,eAAe;AAC5C,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,qEAAqE;AAC/F,SAAO;AACT;AAEA,MAAM,mBAAmB,MAAM,cAAsB,CAAC;AAItD,SAAS,aACP,WACA,OACA,iBACA,aACA,iBACA,QACA,UACkB;AAClB,MAAI,SAAU,QAAO;AACrB,MAAI,YAAY,IAAI,SAAS,EAAG,QAAO;AACvC,MAAI,gBAAgB,IAAI,SAAS,EAAG,QAAO;AAC3C,MAAI,cAAc,MAAO,QAAO;AAChC,MAAI,UAAU,gBAAgB,IAAI,SAAS,EAAG,QAAO;AACrD,SAAO;AACT;AAEA,SAAS,YACP,OACA,QACA,UACS;AACT,MAAI,SAAU,QAAO;AACrB,MAAI,CAAC,OAAQ,QAAO;AACpB,SAAO,UAAU;AACnB;AAEA,SAAS,kBACP,iBACA,WACa;AACb,MAAI,oBAAoB,MAAO,QAAO,IAAI,IAAI,SAAS;AACvD,MAAI,CAAC,mBAAmB,oBAAoB,OAAQ,4BAAW,IAAA;AAC/D,SAAO,IAAI,IAAI,eAAe;AAChC;AAEA,SAAS,uBACP,aACA,iBACa;AACb,QAAM,YAAY,IAAI,IAAI,eAAe;AACzC,QAAM,YAAY,IAAI,IAAI,SAAS;AACnC,aAAW,KAAK,aAAa;AAC3B,QAAI,CAAC,UAAU,IAAI,CAAC,GAAG;AACrB,gBAAU,IAAI,CAAC;AACf;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAIA,MAAM,oBAAoB,IAAI,qBAAqB;AAAA,EACjD,UAAU;AAAA,IACR,aAAa;AAAA,MACX,UAAU;AAAA,MACV,YAAY;AAAA,IAAA;AAAA,EACd;AAAA,EAEF,iBAAiB,EAAE,aAAa,WAAA;AAClC,CAAC;AAkBD,MAAM,QAAQ,MAAM;AAAA,EAClB,CACE;AAAA,IACE,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,kBAAkB,CAAA;AAAA,IAClB,cAAc,CAAA;AAAA,IACd,SAAS;AAAA,IACT,OAAO;AAAA,IACP,cAAc;AAAA,IACd,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,CAAC,eAAe,gBAAgB,IAAI,MAAM,SAA6B,YAAY;AACzF,UAAM,eAAe,cAAc;AACnC,UAAM,QAAQ,eAAe,YAAY;AAEzC,UAAM,WAAW,MAAM;AAAA,MACrB,CAAC,SAAiB;AAChB,YAAI,CAAC,aAAc,kBAAiB,IAAI;AACxC,uDAAgB;AAAA,MAClB;AAAA,MACA,CAAC,cAAc,aAAa;AAAA,IAAA;AAG9B,UAAM,cAAc,MAAM,QAAQ,MAAM;AACtC,YAAM,OAAiB,CAAA;AACvB,YAAM,SAAS,QAAQ,UAAU,CAAA,UAAS;AACxC,YACE,MAAM,eAAe,KAAK,KAC1B,OAAO,MAAM,UAAU,YACvB,MAAM,SACN,WAAW,MAAM,OACjB;AACA,eAAK,KAAK,OAAQ,MAAM,MAA4B,KAAK,CAAC;AAAA,QAC5D;AAAA,MACF,CAAC;AACD,aAAO;AAAA,IACT,GAAG,CAAC,QAAQ,CAAC;AAEb,UAAM,kBAAkB,MAAM;AAAA,MAC5B,MAAM,uBAAuB,aAAa,eAAe;AAAA,MACzD,CAAC,aAAa,eAAe;AAAA,IAAA;AAG/B,UAAM,CAAC,aAAa,cAAc,IAAI,MAAM;AAAA,MAAsB,MAChE,kBAAkB,iBAAiB,WAAW;AAAA,IAAA;AAGhD,UAAM,iBAAiB,MAAM,YAAY,CAAC,cAAsB;AAC9D,qBAAe,CAAA,SAAQ;AACrB,cAAM,OAAO,IAAI,IAAI,IAAI;AACzB,YAAI,KAAK,IAAI,SAAS,EAAG,MAAK,OAAO,SAAS;AAAA,YACzC,MAAK,IAAI,SAAS;AACvB,eAAO;AAAA,MACT,CAAC;AAAA,IACH,GAAG,CAAA,CAAE;AAEL,UAAM,YAAY,MAAM,SAAS,MAAM,QAAQ;AAE/C,UAAM,WAAW,MAAM;AAAA,MACrB,OAAO;AAAA,QACL;AAAA,QACA,iBAAiB,IAAI,IAAI,eAAe;AAAA,QACxC,aAAa,IAAI,IAAI,WAAW;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,MAAA;AAAA,MAET,CAAC,OAAO,iBAAiB,aAAa,iBAAiB,QAAQ,MAAM,aAAa,WAAW,aAAa,UAAU,gBAAgB,SAAS;AAAA,IAAA;AAI/I,UAAM,QAAQ;AACd,UAAM,iBAAoC,CAAA;AAE1C,UAAM,SAAS,QAAQ,UAAU,CAAC,OAAO,UAAU;AACjD,UAAI,CAAC,MAAM,eAAe,KAAK,GAAG;AAChC,uBAAe,KAAK,KAAK;AACzB;AAAA,MACF;AACA,YAAM,SAAS,UAAU,QAAQ;AACjC,YAAM,SAAS,MAAM;AAAA,QACnB;AAAA,QACA,EAAE,UAAU,OAAA;AAAA,MAAO;AAErB,qBAAe;AAAA,QACb,oBAAC,iBAAiB,UAAjB,EAAgD,OAAO,QAAQ,GAC7D,UAAA,OAAA,GAD6B,QAAQ,KAAK,EAE7C;AAAA,MAAA;AAAA,IAIJ,CAAC;AAED,WACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,UAC5B,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,oBAAkB;AAAA,QAClB,aAAW;AAAA,QACX,WAAW,GAAG,kBAAkB,EAAE,YAAA,CAAa,GAAG,SAAS;AAAA,QAC1D,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;AAgBpB,MAAM,mBAAmB,IAAI,gCAAgC;AAAA,EAC3D,UAAU;AAAA,IACR,aAAa;AAAA;AAAA,MAEX,UAAU;AAAA;AAAA;AAAA,MAGV,YAAY;AAAA,IAAA;AAAA,IAEd,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAAA,EACN;AAAA,EAEF,iBAAiB,EAAE,aAAa,YAAY,MAAM,KAAA;AACpD,CAAC;AAGD,MAAM,WAAW,MAAM;AAAA,EACrB,CAAC,EAAE,OAAO,OAAO,eAAe,WAAW,OAAO,UAAU,WAAW,WAAW,OAAO,GAAG,MAAA,GAAS,QAAQ;AAC3G,UAAM,QAAQ,gBAAA;AACd,UAAM,QAAQ;AAAA,MACZ;AAAA,MACA,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,IAAA;AAEF,UAAM,UAAU,UAAU,MAAM;AAChC,UAAM,YAAY,YAAY,OAAO,MAAM,QAAQ,QAAQ;AAC3D,UAAM,WACJ,MAAM,cAAc,kBAAkB,UAAU,MAAM,YAAY,IAAI,KAAK;AAE7E,UAAM,WAAW,MAAM,YAAY,MAAM;AACvC,UAAI,CAAC,UAAW;AAEhB,YAAM,SAAS,KAAK;AACpB,UAAI,MAAM,cAAc,YAAY;AAClC,cAAM,eAAe,KAAK;AAAA,MAC5B;AAAA,IACF,GAAG,CAAC,WAAW,OAAO,KAAK,CAAC;AAE5B,UAAM,UAAU,MAAM,QAA8B,OAAO;AAAA,MACzD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,IAAA,IACE,CAAC,OAAO,OAAO,SAAS,UAAU,WAAW,UAAU,UAAU,QAAQ,CAAC;AAE9E,UAAM,aAAa,MAAM,gBAAgB;AAEzC,WACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,SAC/B,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,gBAAc,WAAW;AAAA,QACzB,iBAAe,YAAY;AAAA,QAC3B,kBAAgB,aAAa;AAAA,QAC7B,gBAAc,UAAU,SAAS;AAAA,QACjC,iBAAe,YAAY;AAAA,QAC3B,WAAW;AAAA,UACT,iBAAiB,EAAE,aAAa,MAAM,aAAa,MAAM,MAAM,MAAM;AAAA,UACrE,cAAc,CAAC,YAAY;AAAA,UAC3B,CAAC,aAAa;AAAA,UACd;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEJ,UAAA,oBAAC,kBAAgB,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA,GAE9B;AAAA,EAEJ;AACF;AACA,SAAS,cAAc;AAIvB,SAAS,eAAe,EAAE,YAA2C;AACnE,QAAM,QAAQ,gBAAA;AACd,QAAM,OAAO,mBAAA;AAEb,MAAI,YAA6B;AACjC,MAAI,WAA4B;AAChC,MAAI,cAA+B;AACnC,QAAM,SAAS,QAAQ,UAAU,CAAA,UAAS;AACxC,QAAI,CAAC,MAAM,eAAe,KAAK,EAAG;AAClC,QAAI,MAAM,SAAS,UAAW,aAAY;AAAA,aACjC,MAAM,SAAS,gBAAiB,YAAW;AAAA,aAC3C,MAAM,SAAS,YAAa,eAAc;AAAA,EACrD,CAAC;AAED,MAAI,MAAM,gBAAgB,cAAc;AACtC,WAAO,oBAAC,kBAAA,EAAiB,OAAO,WAAW,aAAa,UAAU;AAAA,EACpE;AACA,SACE,oBAAC,gBAAA,EAAe,OAAO,WAAW,aAAa,UAAU,SAAS,aAAa,QAAQ,KAAK,OAAA,CAAQ;AAExG;AAMA,MAAM,mBAAqD;AAAA,EACzD,WAAW;AAAA,EACX,SAAS;AAAA,EACT,OAAO;AAAA,EACP,WAAW;AAAA,EACX,UAAU;AACZ;AAEA,SAAS,eAAe,EAAE,UAAU,WAAW,OAAO,aAAiH;AACrK,QAAM,OAAO,mBAAA;AACb,QAAM,QAAQ,gBAAA;AACd,QAAM,QAAQ,MAAM,WAAW,gBAAgB;AAC/C,QAAM,YAAY,CAAC,MAA2C;AAC5D,QAAI,CAAC,KAAK,UAAW;AACrB,QAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,QAAE,eAAA;AACF,WAAK,SAAA;AAAA,IACP;AAAA,EACF;AACA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM,KAAK,YAAY,WAAW;AAAA,MAClC,UAAU,KAAK,YAAY,IAAI;AAAA,MAC/B,SAAS,KAAK,YAAY,KAAK,WAAW;AAAA,MAC1C,WAAW,KAAK,YAAY,YAAY;AAAA,MACxC,iBAAe,KAAK,YAAY;AAAA,MAKhC,iBAAe,KAAK,aAAa,YAAY,KAAK,WAAW;AAAA,MAC7D,iBAAe,KAAK,aAAa,aAAa,KAAK,WAAW,YAAY;AAAA,MAC1E,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,QAKT;AAAA,QACA,KAAK,YACD,gHACA;AAAA,QACJ;AAAA,MAAA;AAAA,MAEF;AAAA,MAEA,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,WAAW,UAAA,KAAK,KAAK,QAAQ,MAAM,KAAK,MAAM,iBAAiB,KAAK,KAAK,CAAC,IAAG;AAAA,QAC5F;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAIA,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,QAAQ,gBAAA;AACd,QAAM,OAAO,mBAAA;AACb,QAAM,cAAc,CAAC,CAAC,WAAW,KAAK;AACtC,QAAM,eAAe,oBAAoB,MAAM,IAAI;AAEnD,QAAM,YAAY,MAAM,MAAA;AAExB,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,qBAAC,kBAAe,WAAU,0BAAyB,WAAW,UAAU,YAAY,QAGlF,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAW,OAAO,EAAE,OAAO,gBAC1B,UAAA,oBAAC,iBAAc,EAAA,CACjB;AAAA,MACA,qBAAC,OAAA,EAAI,WAAU,yCACb,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,gCACZ,UAAA;AAAA,UAAA;AAAA,UACA;AAAA,QAAA,GACH;AAAA,QAGC,MAAM,cAAc,cAAc,CAAC,CAAC,WACnC,oBAAC,YAAA,EAAW,eAAW,MACrB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAW;AAAA,cACT;AAAA,cACA,KAAK,YAAY;AAAA,YAAA;AAAA,UACnB;AAAA,QAAA,EACF,CACF;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA,GACF;AAAA,IACC,eACC,qBAAC,OAAA,EAAI,IAAI,WAAW,WAAU,+BAC5B,UAAA;AAAA,MAAA,oBAAC,SAAI,WAAU,YAAW,OAAO,EAAE,OAAO,gBAAgB;AAAA,MAC1D,oBAAC,OAAA,EAAI,WAAU,kBAAkB,UAAA,QAAA,CAAQ;AAAA,IAAA,GAC3C;AAAA,IAED,CAAC,UAAU,oBAAC,uBAAA,CAAA,CAAsB;AAAA,EAAA,GACrC;AAEJ;AAIA,SAAS,wBAAwB;AAC/B,QAAM,QAAQ,gBAAA;AACd,QAAM,OAAO,mBAAA;AACb,QAAM,SAAS,KAAK,UAAU;AAC9B,QAAM,SAAS,eAAe,MAAM,IAAI,IAAI;AAC5C,QAAM,MAAM;AAEZ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,MACX,WAAW;AAAA;AAAA;AAAA,QAGT;AAAA,QACA,SAAS,YAAY;AAAA,MAAA;AAAA,MAEvB,OAAO;AAAA,QACL,MAAM,oBAAoB,MAAM,IAAI,IAAI;AAAA,QACxC,KAAK,gBAAgB,MAAM,QAAQ,GAAG;AAAA,QACtC,QAAQ,QAAQ,MAAM,gBAAgB,GAAG;AAAA,MAAA;AAAA,IAC3C;AAAA,EAAA;AAGN;AAkBA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AACF,GAGG;AACD,QAAM,OAAO,mBAAA;AACb,QAAM,QAAQ,gBAAA;AACd,QAAM,SAAS,KAAK,UAAU;AAC9B,QAAM,eAAe,oBAAoB,MAAM,IAAI;AAEnD,SACE,qBAAA,UAAA,EAEE,UAAA;AAAA,IAAA,qBAAC,gBAAA,EAAe,WAAU,0BAExB,UAAA;AAAA,MAAA,oBAAC,YAAA,EACC,UAAA,oBAAC,eAAA,CAAA,CAAc,GACjB;AAAA,MACA,oBAAC,OAAA,EAAI,WAAU,oBAAoB,UAAA,OAAM;AAAA,MAExC,CAAC,KAAK,8BACJ,OAAA,EAAI,WAAU,4CAA2C,eAAW,MACnE,UAAA,oBAAC,OAAA,EAAI,WAAW,GAAG,eAAe,SAAS,YAAY,WAAW,GAAG,EAAA,CACvE;AAAA,IAAA,GAEJ;AAAA,IAEC,eACC,oBAAC,OAAA,EAAI,WAAU,WAAU,OAAO,EAAE,aAAa,eAAe,MAC3D,UAAA,YAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;AAIA,SAAS,gBAAgB;AACvB,QAAM,QAAQ,gBAAA;AACd,QAAM,OAAO,mBAAA;AACb,QAAM,EAAE,MAAM,OAAA,IAAW;AACzB,QAAM,EAAE,OAAO,SAAS,SAAA,IAAa;AAErC,MAAI,SAAS,KAAM,QAAO,oBAAC,eAAY,OAAc,SAAkB,UAAoB,QAAgB;AAC3G,6BAAQ,eAAA,EAAc,MAAY,OAAc,SAAkB,UAAoB,QAAgB;AACxG;AAIA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AAED,QAAM,WAAY,UAAU,aAAa,UAAW,UAAU;AAE9D,MAAI;AACJ,MAAI,UAAU;AACZ,eAAW;AAAA,MACT,OAAO,eAAe;AAAA,MACtB,QAAQ,eAAe;AAAA,MACvB,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,WAAW,UAAU,mBAAmB,iBAAiB,OAAO,MAAM,CAAC,IAAI;AAAA,IAAA;AAAA,EAE/E,OAAO;AACL,UAAM,QACJ,UAAU,cAAc,gBACpB,UAAU,UAAU,iBAClB,UAAU,aAAa,CAAC,SAAS,uBAC/B;AAEV,eAAW;AAAA,MACT,OAAO,eAAe;AAAA,MACtB,QAAQ,eAAe;AAAA,MACvB,YAAY;AAAA,MACZ,WAAW,UAAU,mBAAmB,iBAAiB,OAAO,MAAM,CAAC,IAAI;AAAA,IAAA;AAAA,EAE/E;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,MACX,WAAU;AAAA,MACV,OAAO,EAAE,OAAO,aAAa,QAAQ,YAAA;AAAA,MAErC,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,GAAG,sBAAsB,YAAY,kBAAkB;AAAA,UAClE,OAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IACT;AAAA,EAAA;AAGN;AAIA,SAAS,cAAc;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,QAAM,WAAW,eAAe,IAAI;AACpC,QAAM,SAAS,oBAAoB,IAAI;AAEvC,MAAI;AACJ,MAAI;AAEJ,UAAQ,OAAA;AAAA,IACN,KAAK;AACH,eAAS;AACT,qBAAe;AACf;AAAA,IACF,KAAK;AACH,eAAS;AACT,qBAAe;AACf;AAAA,IACF,KAAK;AACH,UAAI,QAAQ;AACV,iBAAS;AACT,uBAAe;AAAA,MACjB,OAAO;AACL,iBAAS;AACT,uBAAe;AAAA,MACjB;AACA;AAAA,IACF,KAAK;AACH,eAAS;AACT,qBAAe;AACf;AAAA,IACF;AACE,UAAI,QAAQ;AACV,iBAAS;AACT,uBAAe;AAAA,MACjB,OAAO;AACL,iBAAS;AACT,uBAAe;AAAA,MACjB;AACA;AAAA,EAAA;AAGJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,MACX,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,YAAY;AAAA,MAAA;AAAA,MAEd,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,YAAY;AAAA,QACZ,OAAO;AAAA;AAAA,QAEP,UAAU,SAAS,OAAO,6BAA6B;AAAA,QACvD,WAAW,UAAU,mBAAmB,iBAAiB,OAAO,MAAM,CAAC,IAAI;AAAA,MAAA;AAAA,MAG7E,UAAA,oBAAC,kBAAA,EAAiB,OAAc,OAAA,CAAgB;AAAA,IAAA;AAAA,EAAA;AAGtD;AAEA,SAAS,iBAAiB,EAAE,OAAO,UAAuD;AACxF,MAAI,UAAU,YAAa,QAAO,oBAAC,SAAM,MAAM,QAAQ,aAAa,KAAK;AACzE,MAAI,UAAU,QAAS,QAAO,oBAAC,KAAE,MAAM,QAAQ,aAAa,KAAK;AACjE,6BAAQ,YAAA,EAAW;AACrB;AAEA,SAAS,aAAa;AACpB,QAAM,QAAQ,MAAM,WAAW,gBAAgB;AAC/C,SAAO,oBAAC,UAAM,UAAA,MAAA,CAAM;AACtB;AAOA,MAAM,YAAY,MAAM;AAAA,EACtB,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,UAAM,EAAE,KAAA,IAAS,gBAAA;AACjB,UAAM,EAAE,OAAO,SAAS,SAAA,IAAa,mBAAA;AAErC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA;AAAA;AAAA,UAGT;AAAA,UACA,SAAS,OAAO,iBAAiB;AAAA,UACjC,WACI,qBACA,UAAU,UACR,oBACA,UACE,oBACA;AAAA,UACR;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,UAAU,cAAc;AAMxB,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,UAAU,OAAO,GAAG,MAAA,GAAS,QAAQ;AACjD,UAAM,EAAE,KAAA,IAAS,gBAAA;AACjB,UAAM,EAAE,SAAA,IAAa,mBAAA;AAErB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA;AAAA,UAET,SAAS,OACL,gDACA;AAAA,UACJ;AAAA,UACA,WAAW,qBAAqB;AAAA,UAChC;AAAA,QAAA;AAAA,QAEF,OAAO;AAAA,UACL,UAAU,SAAS,OAAO,0BAA0B;AAAA,UACpD,GAAG;AAAA,QAAA;AAAA,QAEJ,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,gBAAgB,cAAc;AAM9B,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC1C,UAAM,EAAE,YAAA,IAAgB,gBAAA;AACxB,QAAI,gBAAgB,aAAc,QAAO;AACzC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,qCAAqC,SAAS;AAAA,QAC3D,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,YAAY,cAAc;AAMnB,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU,CAAA;AAAA,EACV,OAAO;AAAA,IACL,IAAI,EAAE,IAAI,GAAG,MAAM,4CAAA;AAAA,IACnB,IAAI,EAAE,IAAI,IAAI,MAAM,uDAAA;AAAA,IACpB,IAAI,EAAE,IAAI,IAAI,MAAM,uDAAA;AAAA,EAAuD;AAAA,EAE7E,QAAQ,CAAC,YAAY,aAAa,WAAW,aAAa,OAAO;AAAA;AAAA,EACjE,QAAQ;AAAA,IACN,IAAI,CAAC,SAAS;AAAA,IACd,IAAI,CAAC,iBAAiB,gBAAgB,iBAAiB,mBAAmB,oBAAoB,iBAAiB,qBAAqB,iBAAiB;AAAA,IACrJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}

package/dist/components/Switch/switch.d.ts CHANGED Viewed

@@ -102,9 +102,9 @@ export declare const switchMeta: {
             readonly typography: "body-lg";
         };
     };
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default", "hover", "checked", "focus-visible", "disabled"];
     readonly tokens: {
-        readonly bg: readonly ["bg-primary"];
+        readonly bg: readonly ["bg-border", "bg-on-emphasis", "bg-primary"];
         readonly fg: readonly ["text-fg-disabled", "text-fg-secondary", "text-foreground", "text-primary"];
         readonly ring: readonly ["ring-ring"];
     };

package/dist/components/Switch/switch.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,wBAAwB,CAAA;AAE1D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAI3F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEH,QAAA,MAAM,cAAc;;~~8EAsBnB~~,CAAA;~~AAcD~~,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,EAClE,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAED,QAAA,MAAM,MAAM,~~uFA2KX~~,CAAA;AAKD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CAkBb~~,CAAA;AAEV,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
1	+ {"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,wBAAwB,CAAA;AAE1D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAI3F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEH,QAAA,MAAM,cAAc;;8EA6BnB,CAAA;AAgBD,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,EAClE,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAED,QAAA,MAAM,MAAM,uFA8MX,CAAA;AAKD,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuBb,CAAA;AAEV,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/Switch/switch.js CHANGED Viewed

@@ -16,7 +16,14 @@ const switchVariants = cva(
     "data-[readonly=true]:pointer-events-none data-[readonly=true]:cursor-default",
     // OFF → ON 背景色
     "data-[state=unchecked]:bg-border",
-    "data-[state=checked]:bg-primary"
+    "data-[state=checked]:bg-primary",
+    // 選中之上的 hover = 同色相升 hover 階(2026-07-06 user 掃出 Switch 是「藍色選中家族」
+    // 唯一漏網:Checkbox checked hover 早有同款、Ant Switch checked hover = colorPrimaryHover
+    // 源碼實錘;順修 meta states 宣稱 'hover' 但 code 原本零 hover 樣式的 claim-vs-code 落差)。
+    // unchecked hover:border(n-5)→ border-hover(n-6)深一階,對齊 Checkbox 未選 hover
+    // 加深一階慣例 + Ant unchecked hover(colorTextTertiary 加深)同方向。
+    "data-[state=unchecked]:hover:bg-border-hover",
+    "data-[state=checked]:hover:bg-primary-hover"
   ],
   {
     variants: {
@@ -39,9 +46,11 @@ const SPECS = {
   // (render ≈ 1.67px,比預設 1.33px 稍粗讓 toggle check 夠顯眼)。跨 size 配對值由 checkbox.tsx 共用。
   // 2026-05-18 簡化 per user 視覺證 + Checkbox 同步(3.5 → 3 sm/md):effective render 差
   // 0.08px 視覺看不出,保留 compensation 主旨但不過度差異化。
-  sm: { thumb: 20, check: 12, checkStroke: 3, translate: "translateX(20px)" },
-  md: { thumb: 20, check: 12, checkStroke: 3, translate: "translateX(20px)" },
-  lg: { thumb: 24, check: 16, checkStroke: 2.5, translate: "translateX(24px)" }
+  // 2026-07-04 刪 dead field translate:整檔零消費,實際位移 SSOT = Thumb className
+  // translate-x-5(20px)/ translate-x-6(24px)(見下方 Thumb),消除雙住所漂移風險。
+  sm: { thumb: 20, check: 12, checkStroke: 3 },
+  md: { thumb: 20, check: 12, checkStroke: 3 },
+  lg: { thumb: 24, check: 16, checkStroke: 2.5 }
 };
 const Switch = React.forwardRef(
   ({
@@ -71,16 +80,29 @@ const Switch = React.forwardRef(
     const alignRightInField = insideField && (fieldCtx == null ? void 0 : fieldCtx.orientation) === "horizontal" ? "ml-auto" : "";
     const generatedId = React.useId();
     const inputId = idProp ?? (fieldCtx == null ? void 0 : fieldCtx.id) ?? generatedId;
+    const {
+      checked: checkedProp,
+      defaultChecked: defaultCheckedProp,
+      onCheckedChange: _onCheckedChange,
+      required: _required,
+      name: _name,
+      value: _value,
+      asChild: _asChild,
+      children: _children,
+      ...restDomProps
+    } = props;
     if (resolvedMode === "display") {
-      const isChecked = props.checked === true;
-      return isChecked ? /* @__PURE__ */ jsx("span", { className: "text-foreground", children: "✓" }) : /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: "—" });
+      const isChecked = checkedProp === true;
+      return isChecked ? /* @__PURE__ */ jsx("span", { ...restDomProps, ref, className: "text-foreground", children: "✓" }) : /* @__PURE__ */ jsx("span", { ...restDomProps, ref, className: "text-fg-muted", children: "—" });
     }
     if (effectiveReadOnly && insideField) {
-      const isChecked = (props.checked ?? props.defaultChecked) === true;
+      const isChecked = (checkedProp ?? defaultCheckedProp) === true;
       const boxSize = resolvedBoxSize;
       return /* @__PURE__ */ jsx(
         "div",
         {
+          ...restDomProps,
+          ref,
           role: "switch",
           "aria-checked": isChecked,
           "aria-readonly": "true",
@@ -109,6 +131,14 @@ const Switch = React.forwardRef(
         tabIndex: effectiveReadOnly ? -1 : void 0,
         "aria-describedby": fieldCtx == null ? void 0 : fieldCtx.descriptionId,
         ...props,
+        onClick: (event) => {
+          var _a;
+          if (effectiveReadOnly) {
+            event.preventDefault();
+            return;
+          }
+          (_a = props.onClick) == null ? void 0 : _a.call(props, event);
+        },
         children: /* @__PURE__ */ jsx(
           SwitchPrimitives.Thumb,
           {
@@ -138,6 +168,9 @@ const Switch = React.forwardRef(
       "label",
       {
         htmlFor: inputId,
+        onClick: (event) => {
+          if (effectiveReadOnly) event.preventDefault();
+        },
         className: cn(
           "inline-flex items-start gap-3 select-none",
           effectiveDisabled ? "cursor-not-allowed" : readOnly ? "cursor-default" : "cursor-pointer"
@@ -192,9 +225,14 @@ const switchMeta = {
     md: { fieldHeight: 32, iconSize: 12, typography: "body" },
     lg: { fieldHeight: 36, iconSize: 16, typography: "body-lg" }
   },
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  // 2026-07-04 修 stale meta:移除 'active' — switchVariants / Thumb 無 active-state 樣式
+  // (cva 只有 unchecked/checked/disabled/readonly/focus-visible;對照 checkboxMeta 正確不含 active)
+  // 'checked' = ON 持續態(bg-primary;2026-07-07 meta 詞彙統一補列,toggle 家族用 'checked')
+  states: ["default", "hover", "checked", "focus-visible", "disabled"],
   tokens: {
-    bg: ["bg-primary"],
+    // 2026-07-04 補齊漏列:bg-border = OFF track(cva data-[state=unchecked]:bg-border)、
+    // bg-on-emphasis = Thumb 白圓(Thumb className)— 兩者 code 實際消費,meta 原漏列
+    bg: ["bg-border", "bg-on-emphasis", "bg-primary"],
     fg: ["text-fg-disabled", "text-fg-secondary", "text-foreground", "text-primary"],
     ring: ["ring-ring"]
   },

package/dist/components/Switch/switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"switch.js","sources":["../../../src/components/Switch/switch.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 SwitchPrimitives from '@radix-ui/react-switch'\nimport { Check } from 'lucide-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport type { FieldMode, FieldVariant } from '@/design-system/components/Field/field-types'\nimport { useFieldContext, useResolvedFieldDisabled, useResolvedFieldMode, useResolvedFieldSize } from '@/design-system/components/Field/field-context'\nimport { fieldWrapperStyles } from '@/design-system/components/Field/field-wrapper'\n\n/*\n Switch — 開關控件\n \n ── 結構 ──\n * Track（pill 形容器）→ Thumb（白色圓 + 2px border + check icon）\n * Track 寬 = 2 × 高，thumb 直徑 = track 高度\n \n ── 尺寸（sm = md）──\n * sm/md: track 20×40, thumb 20, 白色圓 16, check 12（= checkbox sm/md）\n * lg: track 24×48, thumb 24, 白色圓 20, check 16（= checkbox lg）\n \n ── 視覺狀態 ──\n * OFF: track border (neutral-5), thumb 白色 + 2px border-border(neutral-5,與 OFF track 同色)無 check\n * ON: track primary, thumb 白色 + 2px primary border + primary check icon\n * disabled: opacity-disabled（整體透明度）\n * readOnly(standalone): 視覺同一般態，但 pointer-events-none + aria-readonly\n * readOnly(Field 內): 渲染 readonly 灰框 + ✓/—(2026-06-12 拍板,= Input readonly 同視覺語言)\n \n ── label / description / readOnly ──\n * Switch 可以透過 `label` 和 `description` props 在元件內直接渲染緊鄰的文字，\n * 樣式全部 codify 在元件內（text-body、foreground/fg-secondary、disabled 色）。\n \n 單獨使用時：\n * <Switch label=\"啟用通知\" description=\"收到新訊息時提醒\" />\n \n Form 內使用（在 <Field> context 內）：\n * <Field>\n * <FieldLabel>啟用通知</FieldLabel>\n * <Switch /> ← label/description prop 會被自動忽略\n * <FieldDescription>收到新訊息時提醒</FieldDescription>\n * </Field>\n \n Field context 透過 useFieldContext() 偵測，避免雙層 label。\n \n readOnly 模式：\n * <Switch readOnly checked={true} label=\"...\" />\n * standalone:視覺維持 ON/OFF 正確狀態,但無法互動、不在 tab order 內、寫入 aria-readonly。\n * Field 內:渲染 readonly 灰框 + ✓/—(不渲染 toggle;見 forwardRef 內 readonly 分支)。\n * 與 disabled 的差異：readonly 不降色（可讀），disabled 降色（弱化）。\n /\n\nconst switchVariants = cva(\n [\n 'group peer inline-flex shrink-0 cursor-pointer items-center rounded-full',\n 'transition-colors duration-150',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\n 'disabled:cursor-not-allowed disabled:opacity-disabled',\n // readOnly：鎖定互動但視覺正常\n 'data-[readonly=true]:pointer-events-none data-[readonly=true]:cursor-default',\n // OFF → ON 背景色\n 'data-[state=unchecked]:bg-border',\n 'data-[state=checked]:bg-primary',\n ],\n {\n variants: {\n size: {\n sm: 'h-5 w-10', // 20×40\n md: 'h-5 w-10', // 20×40\n lg: 'h-6 w-12', // 24×48\n },\n },\n defaultVariants: { size: 'md' },\n }\n)\n\nconst SPECS: Record<string, { thumb: number; check: number; checkStroke: number; translate: string }> = {\n // checkStroke:16px 以下 icon 視覺不夠顯眼 → 加粗 stroke 補償(跟 Checkbox 共用原則,\n // 見 checkbox.tsx 的 checkStrokeWidth 註解)。12px 用 3.5(render ≈ 1.75px 線寬,比 Lucide\n // 預設的 1px render 明顯更粗,視覺跟 16px 預設 stroke 的 1.33px 有足夠區別),16px 用 2.5\n // (render ≈ 1.67px,比預設 1.33px 稍粗讓 toggle check 夠顯眼)。跨 size 配對值由 checkbox.tsx 共用。\n // 2026-05-18 簡化 per user 視覺證 + Checkbox 同步(3.5 → 3 sm/md):effective render 差\n // 0.08px 視覺看不出,保留 compensation 主旨但不過度差異化。\n sm: { thumb: 20, check: 12, checkStroke: 3, translate: 'translateX(20px)' },\n md: { thumb: 20, check: 12, checkStroke: 3, translate: 'translateX(20px)' },\n lg: { thumb: 24, check: 16, checkStroke: 2.5, translate: 'translateX(24px)' },\n}\n\nexport interface SwitchProps\n extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>,\n VariantProps<typeof switchVariants> {\n /\n Inline label。提供時 Switch 自動包一個 <label> 並連結 htmlFor，\n * 套用 text-body / text-foreground / disabled 色的 codified 樣式。\n * 在 <Field> context 內時此 prop 會被忽略（由 FieldLabel 接管）。\n /\n label?: React.ReactNode\n /\n Inline description（secondary 文字）。須與 label 搭配使用，\n * 單獨設定 description 無效果。套用 text-body / text-fg-secondary 樣式。\n * 在 <Field> context 內時此 prop 會被忽略（由 FieldDescription 接管）。\n /\n description?: React.ReactNode\n /\n readonly 模式:standalone = 鎖定互動但維持 ON/OFF 視覺;Field 內 = 灰框 + ✓/—。\n * 與 disabled 的差異:readonly 不降色(可讀),disabled 降色(弱化)。\n * DataTable cell 非編輯態用 mode=\"display\"(✓/—),非 readOnly。\n /\n readOnly?: boolean\n /\n Field mode(2026-05-05 Phase B3 align):\n * edit — 一般可互動 Switch(預設)\n * display — 純展示:渲染 ✓ / —(無互動 primitive、無 input chrome);\n * 對齊 Carbon read-only / DataTable boolean cell。\n * `display` 完全無 toggle 形體;`readonly` 視場景(field-types.ts)。\n * readonly — standalone 同 readOnly prop(保留視覺鎖互動);Field 內 = 灰框 + ✓/—\n * disabled — 同 disabled prop\n /\n mode?: FieldMode\n /\n Visual chrome — Switch 本體無 input wrapper variant,本 prop 對 Switch 主體無視覺影響;\n * 為對齊 Field 4-mode + chrome 透傳契約而保留(M19 一致性)。\n /\n variant?: FieldVariant\n}\n\nconst Switch = React.forwardRef<\n React.ElementRef<typeof SwitchPrimitives.Root>,\n SwitchProps\n>(\n (\n {\n className,\n size,\n label,\n description,\n readOnly = false,\n disabled: disabledProp,\n mode,\n // chrome 對 Switch 主體無視覺影響(無 input wrapper)— 接收純為 prop 一致性;destructure 防 leak 到 DOM。\n variant: _chrome,\n id: idProp,\n ...props\n },\n ref\n ) => {\n const sizeKey = size ?? 'md'\n const spec = SPECS[sizeKey]\n\n // Field context 偵測：在 Field 內時忽略自己的 label/description，避免雙層\n // 2026-05-31 #35:hooks(useFieldContext / useId)必在任何 conditional return 前呼叫(Rules of Hooks)。\n // 原 mode='display' early return 寫在 hooks 之上 → runtime 切 mode 會 hook count 不一致 crash;已下移至 hooks 後。\n const fieldCtx = useFieldContext()\n // 2026-06-08 SSOT:<Field disabled>/<Field mode> cascade(原 disabled/mode 直傳 prop,漏 fieldCtx)\n const disabled = useResolvedFieldDisabled(disabledProp)\n const resolvedMode = useResolvedFieldMode({ mode, disabled, readOnly })\n const effectiveReadOnly = readOnly \|\| resolvedMode === 'readonly'\n // mode='disabled' 直傳(無 Field ctx 的 cell 場景)必須落到真 disabled chrome(同 Checkbox 2026-06-12 修)\n const effectiveDisabled = disabled \|\| resolvedMode === 'disabled'\n // readonly 灰框 size:走 SSOT resolver(prop > ctx > 'md',field-context.ts:150-161)\n const resolvedBoxSize = useResolvedFieldSize(size ?? undefined, 'md') as 'sm' \| 'md' \| 'lg'\n const insideField = fieldCtx?.hasFieldWrapper === true\n const effectiveLabel = insideField ? undefined : label\n const effectiveDescription = insideField ? undefined : description\n\n // 在 horizontal Field 內自動齊右(iOS / macOS Settings canonical):\n // horizontal Field 的 layout 是 label(固定寬)\| control area(fill),Switch 作為\n // trailing control 應靠右(對齊 horizontal DescriptionItem 的「label 左 / value 右」模式)。\n // 世界級對照:iOS Settings / macOS System Settings / GitHub Settings / Figma prefs\n // 一律 switch 齊右 — 視覺掃描快、對齊一致。\n const alignRightInField =\n insideField && fieldCtx?.orientation === 'horizontal' ? 'ml-auto' : ''\n\n // Id 連結：優先使用 prop，再退到 Field context 的 id，最後用 useId 生成\n const generatedId = React.useId()\n const inputId = idProp ?? fieldCtx?.id ?? generatedId\n\n // ── mode='display'(下移至所有 hooks 之後,per #35 Rules of Hooks)──────────\n // 純展示模式:無互動 toggle、渲染 ✓ / —。與 Checkbox display 對齊(同 boolean primitive)。\n if (resolvedMode === 'display') {\n const isChecked = props.checked === true\n return isChecked\n ? <span className=\"text-foreground\">✓</span>\n : <span className=\"text-fg-muted\">—</span>\n }\n\n // ── mode='readonly' in Field(2026-06-12 user 拍板「灰框 + ✓/—」,與 Checkbox 同款)──\n // Field 內 readonly boolean = fieldWrapperStyles readonly 灰框(= Input readonly 同源)\n // + ✓/— 值語言;standalone readOnly(settings list)維持原樣鎖互動。詳 checkbox.tsx 同段註解。\n if (effectiveReadOnly && insideField) {\n const isChecked = (props.checked ?? props.defaultChecked) === true\n const boxSize = resolvedBoxSize\n return (\n <div\n role=\"switch\"\n aria-checked={isChecked}\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 {isChecked ? <span className=\"text-foreground\">✓</span> : <span className=\"text-fg-muted\">—</span>}\n </div>\n )\n }\n\n const rootEl = (\n <SwitchPrimitives.Root\n id={inputId}\n className={cn(switchVariants({ size }), alignRightInField, className)}\n ref={ref}\n disabled={effectiveDisabled}\n aria-readonly={effectiveReadOnly \|\| undefined}\n data-readonly={effectiveReadOnly \|\| undefined}\n tabIndex={effectiveReadOnly ? -1 : undefined}\n aria-describedby={fieldCtx?.descriptionId}\n {...props}\n >\n <SwitchPrimitives.Thumb\n className={cn(\n 'pointer-events-none flex items-center justify-center rounded-full bg-on-emphasis border-2',\n 'transition-all duration-150',\n 'data-[state=unchecked]:translate-x-0 data-[state=unchecked]:border-border',\n 'data-[state=checked]:border-primary',\n sizeKey === 'lg' ? 'data-[state=checked]:translate-x-6' : 'data-[state=checked]:translate-x-5',\n )}\n style={{ width: spec.thumb, height: spec.thumb }}\n >\n {/ Check icon — Radix Thumb inherits data-state from Root /}\n <Check\n size={spec.check}\n strokeWidth={spec.checkStroke}\n className=\"text-primary opacity-0 transition-opacity duration-150 group-data-[state=checked]:opacity-100\"\n aria-hidden\n />\n </SwitchPrimitives.Thumb>\n </SwitchPrimitives.Root>\n )\n\n // 無 label → 只渲染 switch 本體\n if (effectiveLabel == null) return rootEl\n\n // 有 label → 包 <label> + codified 樣式\n // Switch 慣例：label 在左、switch 在右（對齊 iOS / Polaris / Material 標準）\n // label 行第一行對齊 switch 中線：容器用 items-start + switch 包 h-[1lh] flex-center\n return (\n <label\n htmlFor={inputId}\n className={cn(\n 'inline-flex items-start gap-3 select-none',\n effectiveDisabled ? 'cursor-not-allowed' : readOnly ? 'cursor-default' : 'cursor-pointer'\n )}\n >\n {/ Label↔desc gap typography-mode-aware:\n sm/md = reading(body+body 14/1.5),lg = reading-lg(body-lg+body 14/1.5) /}\n <span\n className={cn(\n 'flex-1 min-w-0 flex flex-col',\n sizeKey === 'lg'\n ? 'gap-[var(--item-gap-label-desc-reading-lg)]'\n : 'gap-[var(--item-gap-label-desc-reading)]',\n )}\n >\n <span\n className={cn(\n // Reading mode 字級:lg → text-body-lg (16px),sm/md → text-body (14px)\n sizeKey === 'lg' ? 'text-body-lg' : 'text-body',\n effectiveDisabled ? 'text-fg-disabled' : 'text-foreground'\n )}\n >\n {effectiveLabel}\n </span>\n {effectiveDescription != null && (\n <span\n className={cn(\n effectiveDisabled ? 'text-fg-disabled' : 'text-fg-secondary'\n )}\n // Reading mode description:最小 14px(spec 14→14px, 16→14px),lh 預設 1.5。\n // 用 inline style 直接繞過 tailwind-merge 對 text-body / text-fg- 的潛在衝突。\n style={{ fontSize: 'var(--font-body-size)' }}\n >\n {effectiveDescription}\n </span>\n )}\n </span>\n <span className=\"h-[1lh] flex items-center shrink-0\">\n {rootEl}\n </span>\n </label>\n )\n }\n)\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const switchMeta = {\n component: 'Switch',\n family: null, // self-contained primitive(對齊 spec frontmatter self-contained + body L31;非 Family 4)\n variants: {\n\n },\n sizes: {\n sm: { fieldHeight: 28, iconSize: 12, typography: 'body' },\n md: { fieldHeight: 32, iconSize: 12, typography: 'body' },\n lg: { fieldHeight: 36, iconSize: 16, typography: 'body-lg' },\n },\n states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n tokens: {\n bg: ['bg-primary'],\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 { Switch, switchVariants }\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"switch.js","sources":["../../../src/components/Switch/switch.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 SwitchPrimitives from '@radix-ui/react-switch'\nimport { Check } from 'lucide-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport type { FieldMode, FieldVariant } from '@/design-system/components/Field/field-types'\nimport { useFieldContext, useResolvedFieldDisabled, useResolvedFieldMode, useResolvedFieldSize } from '@/design-system/components/Field/field-context'\nimport { fieldWrapperStyles } from '@/design-system/components/Field/field-wrapper'\n\n/*\n Switch — 開關控件\n \n ── 結構 ──\n * Track（pill 形容器）→ Thumb（白色圓 + 2px border + check icon）\n * Track 寬 = 2 × 高，thumb 直徑 = track 高度\n \n ── 尺寸（sm = md）──\n * sm/md: track 20×40, thumb 20, 白色圓 16, check 12（= checkbox sm/md）\n * lg: track 24×48, thumb 24, 白色圓 20, check 16（= checkbox lg）\n \n ── 視覺狀態 ──\n * OFF: track border (neutral-5), thumb 白色 + 2px border-border(neutral-5,與 OFF track 同色)無 check\n * ON: track primary, thumb 白色 + 2px primary border + primary check icon\n * disabled: opacity-disabled（整體透明度）\n * readOnly(standalone): 視覺同一般態，但 pointer-events-none + aria-readonly\n * readOnly(Field 內): 渲染 readonly 灰框 + ✓/—(2026-06-12 拍板,= Input readonly 同視覺語言)\n \n ── label / description / readOnly ──\n * Switch 可以透過 `label` 和 `description` props 在元件內直接渲染緊鄰的文字，\n * 樣式全部 codify 在元件內（text-body、foreground/fg-secondary、disabled 色）。\n \n 單獨使用時：\n * <Switch label=\"啟用通知\" description=\"收到新訊息時提醒\" />\n \n Form 內使用（在 <Field> context 內）：\n * <Field>\n * <FieldLabel>啟用通知</FieldLabel>\n * <Switch /> ← label/description prop 會被自動忽略\n * <FieldDescription>收到新訊息時提醒</FieldDescription>\n * </Field>\n \n Field context 透過 useFieldContext() 偵測，避免雙層 label。\n \n readOnly 模式：\n * <Switch readOnly checked={true} label=\"...\" />\n * standalone:視覺維持 ON/OFF 正確狀態,但無法互動、不在 tab order 內、寫入 aria-readonly。\n * Field 內:渲染 readonly 灰框 + ✓/—(不渲染 toggle;見 forwardRef 內 readonly 分支)。\n * 與 disabled 的差異：readonly 不降色（可讀），disabled 降色（弱化）。\n /\n\nconst switchVariants = cva(\n [\n 'group peer inline-flex shrink-0 cursor-pointer items-center rounded-full',\n 'transition-colors duration-150',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\n 'disabled:cursor-not-allowed disabled:opacity-disabled',\n // readOnly：鎖定互動但視覺正常\n 'data-[readonly=true]:pointer-events-none data-[readonly=true]:cursor-default',\n // OFF → ON 背景色\n 'data-[state=unchecked]:bg-border',\n 'data-[state=checked]:bg-primary',\n // 選中之上的 hover = 同色相升 hover 階(2026-07-06 user 掃出 Switch 是「藍色選中家族」\n // 唯一漏網:Checkbox checked hover 早有同款、Ant Switch checked hover = colorPrimaryHover\n // 源碼實錘;順修 meta states 宣稱 'hover' 但 code 原本零 hover 樣式的 claim-vs-code 落差)。\n // unchecked hover:border(n-5)→ border-hover(n-6)深一階,對齊 Checkbox 未選 hover\n // 加深一階慣例 + Ant unchecked hover(colorTextTertiary 加深)同方向。\n 'data-[state=unchecked]:hover:bg-border-hover',\n 'data-[state=checked]:hover:bg-primary-hover',\n ],\n {\n variants: {\n size: {\n sm: 'h-5 w-10', // 20×40\n md: 'h-5 w-10', // 20×40\n lg: 'h-6 w-12', // 24×48\n },\n },\n defaultVariants: { size: 'md' },\n }\n)\n\nconst SPECS: Record<string, { thumb: number; check: number; checkStroke: number }> = {\n // checkStroke:16px 以下 icon 視覺不夠顯眼 → 加粗 stroke 補償(跟 Checkbox 共用原則,\n // 見 checkbox.tsx 的 checkStrokeWidth 註解)。12px 用 3.5(render ≈ 1.75px 線寬,比 Lucide\n // 預設的 1px render 明顯更粗,視覺跟 16px 預設 stroke 的 1.33px 有足夠區別),16px 用 2.5\n // (render ≈ 1.67px,比預設 1.33px 稍粗讓 toggle check 夠顯眼)。跨 size 配對值由 checkbox.tsx 共用。\n // 2026-05-18 簡化 per user 視覺證 + Checkbox 同步(3.5 → 3 sm/md):effective render 差\n // 0.08px 視覺看不出,保留 compensation 主旨但不過度差異化。\n // 2026-07-04 刪 dead field translate:整檔零消費,實際位移 SSOT = Thumb className\n // translate-x-5(20px)/ translate-x-6(24px)(見下方 Thumb),消除雙住所漂移風險。\n sm: { thumb: 20, check: 12, checkStroke: 3 },\n md: { thumb: 20, check: 12, checkStroke: 3 },\n lg: { thumb: 24, check: 16, checkStroke: 2.5 },\n}\n\nexport interface SwitchProps\n extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>,\n VariantProps<typeof switchVariants> {\n /\n Inline label。提供時 Switch 自動包一個 <label> 並連結 htmlFor，\n * 套用 text-body / text-foreground / disabled 色的 codified 樣式。\n * 在 <Field> context 內時此 prop 會被忽略（由 FieldLabel 接管）。\n /\n label?: React.ReactNode\n /\n Inline description（secondary 文字）。須與 label 搭配使用，\n * 單獨設定 description 無效果。套用 text-body / text-fg-secondary 樣式。\n * 在 <Field> context 內時此 prop 會被忽略（由 FieldDescription 接管）。\n /\n description?: React.ReactNode\n /\n readonly 模式:standalone = 鎖定互動但維持 ON/OFF 視覺;Field 內 = 灰框 + ✓/—。\n * 與 disabled 的差異:readonly 不降色(可讀),disabled 降色(弱化)。\n * DataTable cell 非編輯態用 mode=\"display\"(✓/—),非 readOnly。\n /\n readOnly?: boolean\n /\n Field mode(2026-05-05 Phase B3 align):\n * edit — 一般可互動 Switch(預設)\n * display — 純展示:渲染 ✓ / —(無互動 primitive、無 input chrome);\n * 對齊 Carbon read-only / DataTable boolean cell。\n * `display` 完全無 toggle 形體;`readonly` 視場景(field-types.ts)。\n * readonly — standalone 同 readOnly prop(保留視覺鎖互動);Field 內 = 灰框 + ✓/—\n * disabled — 同 disabled prop\n /\n mode?: FieldMode\n /\n Visual chrome — Switch 本體無 input wrapper variant,本 prop 對 Switch 主體無視覺影響;\n * 為對齊 Field 4-mode + chrome 透傳契約而保留(M19 一致性)。\n /\n variant?: FieldVariant\n}\n\nconst Switch = React.forwardRef<\n React.ElementRef<typeof SwitchPrimitives.Root>,\n SwitchProps\n>(\n (\n {\n className,\n size,\n label,\n description,\n readOnly = false,\n disabled: disabledProp,\n mode,\n // chrome 對 Switch 主體無視覺影響(無 input wrapper)— 接收純為 prop 一致性;destructure 防 leak 到 DOM。\n variant: _chrome,\n id: idProp,\n ...props\n },\n ref\n ) => {\n const sizeKey = size ?? 'md'\n const spec = SPECS[sizeKey]\n\n // Field context 偵測：在 Field 內時忽略自己的 label/description，避免雙層\n // 2026-05-31 #35:hooks(useFieldContext / useId)必在任何 conditional return 前呼叫(Rules of Hooks)。\n // 原 mode='display' early return 寫在 hooks 之上 → runtime 切 mode 會 hook count 不一致 crash;已下移至 hooks 後。\n const fieldCtx = useFieldContext()\n // 2026-06-08 SSOT:<Field disabled>/<Field mode> cascade(原 disabled/mode 直傳 prop,漏 fieldCtx)\n const disabled = useResolvedFieldDisabled(disabledProp)\n const resolvedMode = useResolvedFieldMode({ mode, disabled, readOnly })\n const effectiveReadOnly = readOnly \|\| resolvedMode === 'readonly'\n // mode='disabled' 直傳(無 Field ctx 的 cell 場景)必須落到真 disabled chrome(同 Checkbox 2026-06-12 修)\n const effectiveDisabled = disabled \|\| resolvedMode === 'disabled'\n // readonly 灰框 size:走 SSOT resolver(prop > ctx > 'md',field-context.ts:150-161)\n const resolvedBoxSize = useResolvedFieldSize(size ?? undefined, 'md') as 'sm' \| 'md' \| 'lg'\n const insideField = fieldCtx?.hasFieldWrapper === true\n const effectiveLabel = insideField ? undefined : label\n const effectiveDescription = insideField ? undefined : description\n\n // 在 horizontal Field 內自動齊右(iOS / macOS Settings canonical):\n // horizontal Field 的 layout 是 label(固定寬)\| control area(fill),Switch 作為\n // trailing control 應靠右(對齊 horizontal DescriptionItem 的「label 左 / value 右」模式)。\n // 世界級對照:iOS Settings / macOS System Settings / GitHub Settings / Figma prefs\n // 一律 switch 齊右 — 視覺掃描快、對齊一致。\n const alignRightInField =\n insideField && fieldCtx?.orientation === 'horizontal' ? 'ml-auto' : ''\n\n // Id 連結：優先使用 prop，再退到 Field context 的 id，最後用 useId 生成\n const generatedId = React.useId()\n const inputId = idProp ?? fieldCtx?.id ?? generatedId\n\n // 2026-07-04 修:display / readonly-in-Field 分支的裸 span/div 原丟棄剩餘 props\n // (id/data-/aria-)且不轉發 forwardRef ref → consumer 的 aria-label 等靜默失效。\n // 抽出 Radix 專屬 non-DOM props,其餘 DOM props 於兩分支 spread 轉發(與 Checkbox/\n // RadioGroup 同修);edit 主路徑不受影響(rootEl 仍 spread 完整 props)。\n const {\n checked: checkedProp,\n defaultChecked: defaultCheckedProp,\n onCheckedChange: _onCheckedChange,\n required: _required,\n name: _name,\n value: _value,\n asChild: _asChild,\n children: _children,\n ...restDomProps\n } = props\n\n // ── mode='display'(下移至所有 hooks 之後,per #35 Rules of Hooks)──────────\n // 純展示模式:無互動 toggle、渲染 ✓ / —。與 Checkbox display 對齊(同 boolean primitive)。\n if (resolvedMode === 'display') {\n const isChecked = checkedProp === true\n return isChecked\n ? <span {...restDomProps} ref={ref as React.Ref<HTMLSpanElement>} className=\"text-foreground\">✓</span>\n : <span {...restDomProps} ref={ref as React.Ref<HTMLSpanElement>} className=\"text-fg-muted\">—</span>\n }\n\n // ── mode='readonly' in Field(2026-06-12 user 拍板「灰框 + ✓/—」,與 Checkbox 同款)──\n // Field 內 readonly boolean = fieldWrapperStyles readonly 灰框(= Input readonly 同源)\n // + ✓/— 值語言;standalone readOnly(settings list)維持原樣鎖互動。詳 checkbox.tsx 同段註解。\n if (effectiveReadOnly && insideField) {\n const isChecked = (checkedProp ?? defaultCheckedProp) === true\n const boxSize = resolvedBoxSize\n return (\n <div\n {...(restDomProps as React.HTMLAttributes<HTMLDivElement>)}\n ref={ref as React.Ref<HTMLDivElement>}\n role=\"switch\"\n aria-checked={isChecked}\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 {isChecked ? <span className=\"text-foreground\">✓</span> : <span className=\"text-fg-muted\">—</span>}\n </div>\n )\n }\n\n const rootEl = (\n <SwitchPrimitives.Root\n id={inputId}\n className={cn(switchVariants({ size }), alignRightInField, className)}\n ref={ref}\n disabled={effectiveDisabled}\n aria-readonly={effectiveReadOnly \|\| undefined}\n data-readonly={effectiveReadOnly \|\| undefined}\n tabIndex={effectiveReadOnly ? -1 : undefined}\n aria-describedby={fieldCtx?.descriptionId}\n {...props}\n // 2026-07-05 D4 修:readOnly 鎖互動補 label 繞道 — <label htmlFor> 的 synthetic click\n // 不是 pointer event,cva pointer-events-none 攔不到,點 label 文字仍 toggle。\n // preventDefault 讓 Radix composeEventHandlers(checkForDefaultPrevented)跳過內部 toggle;\n // 必列在 {...props} 之後才不被 consumer onClick 覆蓋(與 Checkbox/RadioGroupItem 同修)。\n onClick={(event) => {\n if (effectiveReadOnly) {\n event.preventDefault()\n return\n }\n props.onClick?.(event)\n }}\n >\n <SwitchPrimitives.Thumb\n className={cn(\n 'pointer-events-none flex items-center justify-center rounded-full bg-on-emphasis border-2',\n 'transition-all duration-150',\n 'data-[state=unchecked]:translate-x-0 data-[state=unchecked]:border-border',\n 'data-[state=checked]:border-primary',\n sizeKey === 'lg' ? 'data-[state=checked]:translate-x-6' : 'data-[state=checked]:translate-x-5',\n )}\n style={{ width: spec.thumb, height: spec.thumb }}\n >\n {/ Check icon — Radix Thumb inherits data-state from Root /}\n <Check\n size={spec.check}\n strokeWidth={spec.checkStroke}\n className=\"text-primary opacity-0 transition-opacity duration-150 group-data-[state=checked]:opacity-100\"\n aria-hidden\n />\n </SwitchPrimitives.Thumb>\n </SwitchPrimitives.Root>\n )\n\n // 無 label → 只渲染 switch 本體\n if (effectiveLabel == null) return rootEl\n\n // 有 label → 包 <label> + codified 樣式\n // Switch 慣例：label 在左、switch 在右（對齊 iOS / Polaris / Material 標準）\n // label 行第一行對齊 switch 中線：容器用 items-start + switch 包 h-[1lh] flex-center\n return (\n <label\n htmlFor={inputId}\n // 2026-07-05 D4 修:readOnly 時在 label 端取消 synthetic activation(第一道防線;\n // Root onClick guard 為第二道 — 兩道對齊 finding suggestion 防 consumer 自寫 label 繞過)。\n onClick={(event) => {\n if (effectiveReadOnly) event.preventDefault()\n }}\n className={cn(\n 'inline-flex items-start gap-3 select-none',\n effectiveDisabled ? 'cursor-not-allowed' : readOnly ? 'cursor-default' : 'cursor-pointer'\n )}\n >\n {/ Label↔desc gap typography-mode-aware:\n sm/md = reading(body+body 14/1.5),lg = reading-lg(body-lg+body 14/1.5) /}\n <span\n className={cn(\n 'flex-1 min-w-0 flex flex-col',\n sizeKey === 'lg'\n ? 'gap-[var(--item-gap-label-desc-reading-lg)]'\n : 'gap-[var(--item-gap-label-desc-reading)]',\n )}\n >\n <span\n className={cn(\n // Reading mode 字級:lg → text-body-lg (16px),sm/md → text-body (14px)\n sizeKey === 'lg' ? 'text-body-lg' : 'text-body',\n effectiveDisabled ? 'text-fg-disabled' : 'text-foreground'\n )}\n >\n {effectiveLabel}\n </span>\n {effectiveDescription != null && (\n <span\n className={cn(\n effectiveDisabled ? 'text-fg-disabled' : 'text-fg-secondary'\n )}\n // Reading mode description:最小 14px(spec 14→14px, 16→14px),lh 預設 1.5。\n // 用 inline style 直接繞過 tailwind-merge 對 text-body / text-fg- 的潛在衝突。\n style={{ fontSize: 'var(--font-body-size)' }}\n >\n {effectiveDescription}\n </span>\n )}\n </span>\n {/* @row-slot-handcraft-allow: Field 控件的 1lh 首行對齊 wrapper(selection-control 家族 Checkbox/RadioGroup 同構),非 row item slot,不消費 MenuItem */}\n <span className=\"h-[1lh] flex items-center shrink-0\">\n {rootEl}\n </span>\n </label>\n )\n }\n)\nSwitch.displayName = SwitchPrimitives.Root.displayName\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const switchMeta = {\n component: 'Switch',\n family: null, // self-contained primitive(對齊 spec frontmatter self-contained + body L31;非 Family 4)\n variants: {\n\n },\n sizes: {\n sm: { fieldHeight: 28, iconSize: 12, typography: 'body' },\n md: { fieldHeight: 32, iconSize: 12, typography: 'body' },\n lg: { fieldHeight: 36, iconSize: 16, typography: 'body-lg' },\n },\n // 2026-07-04 修 stale meta:移除 'active' — switchVariants / Thumb 無 active-state 樣式\n // (cva 只有 unchecked/checked/disabled/readonly/focus-visible;對照 checkboxMeta 正確不含 active)\n // 'checked' = ON 持續態(bg-primary;2026-07-07 meta 詞彙統一補列,toggle 家族用 'checked')\n states: ['default', 'hover', 'checked', 'focus-visible', 'disabled'],\n tokens: {\n // 2026-07-04 補齊漏列:bg-border = OFF track(cva data-[state=unchecked]:bg-border)、\n // bg-on-emphasis = Thumb 白圓(Thumb className)— 兩者 code 實際消費,meta 原漏列\n bg: ['bg-border', 'bg-on-emphasis', 'bg-primary'],\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 { Switch, switchVariants }\n"],"names":[],"mappings":"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"}