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

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (622) hide show

package/dist/components/Calendar/calendar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"calendar.js","sources":["../../../src/components/Calendar/calendar.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 { ChevronLeft, ChevronRight, Plus } from 'lucide-react'\nimport {\n startOfMonth,\n endOfMonth,\n startOfWeek,\n endOfWeek,\n eachDayOfInterval,\n format,\n isSameMonth,\n isSameDay,\n addMonths,\n subMonths,\n} from 'date-fns'\nimport { cn } from '@/lib/utils'\nimport { CAT_EVENT, CAT_ACCENT, type CategoricalHue } from '@/design-system/tokens/categorical-color'\nimport { Button } from '@/design-system/components/Button/button'\nimport { SegmentedControl, SegmentedControlItem } from '@/design-system/components/SegmentedControl/segmented-control'\n\n/*\n Calendar — 事件檢視 canvas(月 view MVP)\n \n 定位:看事件的 page-level canvas,對齊 Notion Calendar / Google Calendar。\n * 完整 spec 見 `calendar.spec.md`。\n \n ── Layout Family ──\n * 非 4-Family,屬 page-composite(多區塊 Toolbar + Grid + EventTile)。\n \n ── MVP scope(本次 session)──\n * - 月 view 完整(toolbar / grid / event tile / today highlight / outside days)\n * - 週 / 日 view 是 tech debt\n * - 拖拉增刪 event 是 tech debt\n \n ── 與 DatePicker 的區分 ──\n * DatePicker 是「選日期」form control;Calendar 是「看事件」page canvas。\n * 名字相近但職責完全不同,spec 頂段明示分界。\n /\n\n// ── Types ──────────────────────────────────────────────────────────────────\n\nexport interface CalendarEvent {\n id: string\n title: string\n /* ISO 字串 \"YYYY-MM-DD\"(all-day)或 \"YYYY-MM-DDTHH:mm\"(timed) /\n start: string \| Date\n end: string \| Date\n allDay?: boolean\n /\n 事件類別色(categorical 色相,1:1 對 `--color-{hue}-`)。消費 categorical-color SSOT,\n 與 Tag / Avatar 共用同一組 12 色相。2026-06-04 修:原 `orange` 與 `red` 都誤接 deep-orange;\n * 改消費 SSOT 後 orange→`--color-orange-`、red→`--color-red-`(品牌紅 hue 25),各自獨立。\n /\n color?: CategoricalHue\n metadata?: Record<string, unknown>\n}\n\nexport type CalendarView = 'month' \| 'week' \| 'day'\n\nexport interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n /* 當前 view(MVP 只 'month',其餘 view tech debt) /\n view?: CalendarView\n defaultView?: CalendarView\n onViewChange?: (view: CalendarView) => void\n\n /* 聚焦日期(月 view 的那個月) /\n referenceDate?: Date\n defaultReferenceDate?: Date\n onReferenceDateChange?: (date: Date) => void\n\n /* 事件資料 /\n events?: CalendarEvent[]\n\n /* 點 event tile 回調 /\n onEventClick?: (event: CalendarEvent) => void\n /* 點月 cell 回調(用於新增) /\n onDateClick?: (date: Date) => void\n /* 點新事件 CTA 回調 /\n onCreateEvent?: () => void\n\n /* 0 = Sunday, 1 = Monday。預設 0(對齊 Google Calendar 美系預設) /\n weekStartsOn?: 0 \| 1\n\n /* 自訂 event tile 渲染 /\n renderEventTile?: (event: CalendarEvent) => React.ReactNode\n\n /* size(MVP 只 md;lg 為 tech debt) /\n size?: 'md' \| 'lg'\n className?: string\n\n /* locale(預設 'en-US') /\n locale?: string\n\n /* ARIA labels for chrome controls. Override for i18n. /\n prevAriaLabel?: string\n nextAriaLabel?: string\n /* 月份導覽 <nav> landmark 的 aria-label。Override for i18n. /\n navAriaLabel?: string\n viewToggleAriaLabel?: string\n todayLabel?: string\n /* 「新事件」CTA 文字。Override for i18n。CTA 僅在傳 `onCreateEvent` 時渲染(spec Toolbar 段)。 /\n createLabel?: string\n}\n\n// ── Event tile color tokens ─────────────────────────────────────────────────\n// 消費 categorical-color SSOT(CAT_EVENT = subtle 底 + hover step-2;CAT_ACCENT = 左側 step-6\n// 實心條),與 Tag / Avatar 共用 12 色相,key X 一律對 `--color-X-`(1:1)。\n// 2026-06-01 allDay:全天事件 = 淡底 tile + 左側實心 accent 條 + medium,視覺區分「全天長條」vs\n// 有時間事件;用 accent border 而非 solid fill 保文字對比安全。對齊 Google Calendar / Outlook 慣例。\nconst EVENT_COLOR_CLASSES = CAT_EVENT\nconst EVENT_ALLDAY_ACCENT = CAT_ACCENT\n\n// ── Helpers ────────────────────────────────────────────────────────────────\n\nfunction coerceDate(value: string \| Date): Date {\n return value instanceof Date ? value : new Date(value)\n}\n\n// eventsOnDate(per-cell 全 events 掃描)已由 eventsByDate bucketing memo 取代並移除\n// (2026-07-06 D3 perf;留著會觸發 noUnusedLocals TS6133)。\n\n// ── Component ──────────────────────────────────────────────────────────────\n\nconst MAX_TILES_PER_CELL = 3\n\nconst Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(function Calendar({\n view: viewProp,\n defaultView = 'month',\n onViewChange,\n referenceDate: referenceDateProp,\n defaultReferenceDate,\n onReferenceDateChange,\n events = [],\n onEventClick,\n onDateClick,\n onCreateEvent,\n weekStartsOn = 0,\n renderEventTile,\n size = 'md',\n className,\n locale = 'en-US',\n prevAriaLabel = '上個月', // i18n-allow: DS default; consumer override via prevAriaLabel prop\n nextAriaLabel = '下個月', // i18n-allow: DS default; consumer override via nextAriaLabel prop\n navAriaLabel = '行事曆月份導覽', // i18n-allow: DS default; consumer override via navAriaLabel prop\n viewToggleAriaLabel = '檢視切換', // i18n-allow: DS default; consumer override via viewToggleAriaLabel prop\n todayLabel = '今天', // i18n-allow: DS default; consumer override via todayLabel prop\n createLabel = '新事件', // i18n-allow: DS default; consumer override via createLabel prop\n ...props\n}, ref) {\n // Controlled / uncontrolled refDate\n const [internalRef, setInternalRef] = React.useState<Date>(\n defaultReferenceDate ?? new Date(),\n )\n const refDate = referenceDateProp ?? internalRef\n const setRefDate = React.useCallback(\n (next: Date) => {\n if (referenceDateProp === undefined) setInternalRef(next)\n onReferenceDateChange?.(next)\n },\n [referenceDateProp, onReferenceDateChange],\n )\n\n // View state(MVP 只用 month,其他 tech debt)\n const [internalView, setInternalView] = React.useState<CalendarView>(defaultView)\n const currentView = viewProp ?? internalView\n const setView = React.useCallback(\n (next: CalendarView) => {\n if (viewProp === undefined) setInternalView(next)\n onViewChange?.(next)\n },\n [viewProp, onViewChange],\n )\n\n // Build month grid\n const days = React.useMemo(() => {\n const monthStart = startOfMonth(refDate)\n const monthEnd = endOfMonth(refDate)\n const gridStart = startOfWeek(monthStart, { weekStartsOn })\n const gridEnd = endOfWeek(monthEnd, { weekStartsOn })\n return eachDayOfInterval({ start: gridStart, end: gridEnd })\n }, [refDate, weekStartsOn])\n\n // 2026-07-06 D3 perf:formatter 依 locale memo(對齊 weekdayNames 既有做法),避免每 render 重建\n // Intl.DateTimeFormat(已知貴的 constructor);.format(refDate) 每 render 仍執行(cheap)。\n const monthTitleFormatter = React.useMemo(\n () => new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long' }),\n [locale],\n )\n const monthTitle = monthTitleFormatter.format(refDate)\n\n const today = new Date()\n\n const weekdayNames = React.useMemo(() => {\n // 取 `days[0..6]` 的名字(gridStart 開始 7 天,正好一週)\n return days.slice(0, 7).map((d) =>\n new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(d),\n )\n }, [days, locale])\n\n // 2026-07-06 D3 perf:原每 render 對 42 cells 各跑 eventsOnDate 全 events filter = O(42×N) +\n // 每比較配 ~5 個 Date;數百-上千 events(行事曆真實規模)單次 render 數十 ms,且父層任何 re-render\n // 全額重付。改 useMemo 單趟 bucket:每 event 只 parse 一次,展開 [start..end](clamp 到可見 grid,\n // 避免長跨度 event 展開爆量)寫入 date→events Map,順便完成 allDay 排序。cell 內改 O(1) map.get。行為 Δ=0。\n const eventsByDate = React.useMemo(() => {\n const map = new Map<string, CalendarEvent[]>()\n if (days.length === 0) return map\n const first = days[0]\n const last = days[days.length - 1]\n const gridStart = new Date(first.getFullYear(), first.getMonth(), first.getDate()).getTime()\n const gridEnd = new Date(last.getFullYear(), last.getMonth(), last.getDate()).getTime()\n for (const e of events) {\n const start = coerceDate(e.start)\n const end = coerceDate(e.end)\n const eEnd = new Date(end.getFullYear(), end.getMonth(), end.getDate()).getTime()\n let sMs = new Date(start.getFullYear(), start.getMonth(), start.getDate()).getTime()\n if (eEnd < gridStart \|\| sMs > gridEnd) continue // 可見窗外對 42 cells 無貢獻\n if (sMs < gridStart) sMs = gridStart\n const lastMs = Math.min(eEnd, gridEnd)\n const cursor = new Date(sMs)\n while (cursor.getTime() <= lastMs) {\n const key = `${cursor.getFullYear()}-${cursor.getMonth() + 1}-${cursor.getDate()}`\n const bucket = map.get(key)\n if (bucket) bucket.push(e)\n else map.set(key, [e])\n cursor.setDate(cursor.getDate() + 1)\n }\n }\n // allDay 排前(對齊 Google Calendar 全天列在上;V8 stable sort 保 events 原序 → 與舊 per-cell 一致)\n for (const bucket of map.values()) {\n bucket.sort((a, b) => Number(b.allDay ?? false) - Number(a.allDay ?? false))\n }\n return map\n }, [events, days])\n\n const handleToday = () => setRefDate(new Date())\n const handlePrev = () => setRefDate(subMonths(refDate, 1))\n const handleNext = () => setRefDate(addMonths(refDate, 1))\n\n return (\n <div\n ref={ref}\n className={cn(\n 'flex flex-col w-full h-full bg-surface rounded-md border border-divider overflow-hidden',\n className,\n )}\n data-view={currentView}\n data-size={size}\n {...props}\n >\n {/* Toolbar:[◀] [今天] [▶] title [view tabs] [+ new] /}\n <div\n className={cn(\n 'flex items-center gap-2 shrink-0 border-b border-divider',\n 'px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]',\n )}\n >\n {/ 月份導覽 landmark:prev / 今天 / next 包成 <nav> 給 SR landmark 導航(per calendar.spec.md a11y 段) /}\n <nav className=\"flex items-center gap-2\" aria-label={navAriaLabel}>\n <Button\n variant=\"text\"\n size=\"sm\"\n iconOnly\n startIcon={ChevronLeft}\n aria-label={prevAriaLabel}\n onClick={handlePrev}\n />\n <Button variant=\"tertiary\" size=\"sm\" onClick={handleToday}>\n {todayLabel}\n </Button>\n <Button\n variant=\"text\"\n size=\"sm\"\n iconOnly\n startIcon={ChevronRight}\n aria-label={nextAriaLabel}\n onClick={handleNext}\n />\n </nav>\n\n <h2 className=\"text-body-lg font-medium text-foreground flex-1 min-w-0 truncate ml-2\">\n {monthTitle}\n </h2>\n\n {/ View switcher:用 SegmentedControl(互斥多選一 canonical)——\n 對齊 CLAUDE.md「互斥分類選擇走 SegmentedControl,非 checked Button group」原則。\n Button 的 pressed 是「toggle 持續狀態」語意,不適合「單選 view 切換」 /}\n <SegmentedControl\n size=\"sm\"\n value={currentView}\n onValueChange={(v) => setView(v as CalendarView)}\n aria-label={viewToggleAriaLabel}\n >\n <SegmentedControlItem value=\"day\" disabled>日</SegmentedControlItem>\n <SegmentedControlItem value=\"week\" disabled>週</SegmentedControlItem>\n <SegmentedControlItem value=\"month\">月</SegmentedControlItem>\n </SegmentedControl>\n\n {onCreateEvent && (\n <Button variant=\"primary\" size=\"sm\" startIcon={Plus} onClick={onCreateEvent}>\n {createLabel}\n </Button>\n )}\n </div>\n\n {/ Weekday header /}\n <div className=\"grid grid-cols-7 border-b border-divider bg-muted\">\n {weekdayNames.map((name, i) => (\n <div\n key={i}\n className=\"px-2 py-1.5 text-caption text-fg-muted font-normal text-center\"\n >\n {name}\n </div>\n ))}\n </div>\n\n {/ Month grid:7 cols, ~5-6 rows。a11y(2026-04-25):WAI-ARIA grid 要求 row > gridcell\n 階層,chunk days 7 一組,wrap 成 role='row'(display:contents 保 CSS grid 佈局)。 /}\n <div\n className=\"grid grid-cols-7 flex-1 min-h-0\"\n role=\"grid\"\n aria-label={`月行事曆,${monthTitle}`}\n >\n {Array.from({ length: Math.ceil(days.length / 7) }, (_, rowIdx) => (\n <div key={rowIdx} role=\"row\" style={{ display: 'contents' }}>\n {days.slice(rowIdx 7, rowIdx * 7 + 7).map((date) => {\n const inMonth = isSameMonth(date, refDate)\n const isToday = isSameDay(date, today)\n // 2026-06-01 allDay:全天事件排 cell 頂端(對齊 Google Calendar 全天列在上)——\n // 排序已在 eventsByDate bucketing memo 內完成(D3 perf),cell 內 O(1) 查表\n const dayEvents = eventsByDate.get(`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`) ?? []\n const visibleEvents = dayEvents.slice(0, MAX_TILES_PER_CELL)\n const overflowCount = dayEvents.length - visibleEvents.length\n\n return (\n // 2026-06-11 a11y(user 拍板 2c 修 code):cell 從 <button role=\"gridcell\"> 改非互動容器 —\n // W3C button 語義禁止互動後代,cell 內含 role=\"button\" 事件 tile = nested-interactive 違規。\n // 對齊 Google Calendar:gridcell = 容器,日期數字按鈕 = 日期級 keyboard 入口,tile 各自為 button。\n // div onClick 保留滑鼠「點 cell 空白處等同點日期」便利(keyboard 走日期數字按鈕,功能等價)。\n <div\n key={date.toISOString()}\n role=\"gridcell\"\n onClick={() => onDateClick?.(date)}\n className={cn(\n 'flex flex-col gap-1 min-h-28 p-1.5 text-left',\n 'border-r border-b border-divider last:border-r-0',\n '[&:nth-child(7n)]:border-r-0',\n 'hover:bg-neutral-hover transition-colors',\n !inMonth && 'bg-muted',\n )}\n >\n {/* Date number = keyboard 入口;今天/平日統一 24px 圓形 hit-area(WCAG 2.5.8 ≥24,\n 今天 pill 本就 24px,平日跟齊 → 跨 cell 數字光學對齊) /}\n <div className=\"flex items-start justify-end\">\n <button\n type=\"button\"\n aria-label={`${format(date, 'yyyy-MM-dd')},${dayEvents.length} 個事件`}\n onClick={(e) => {\n e.stopPropagation()\n onDateClick?.(date)\n }}\n className={cn(\n 'inline-flex items-center justify-center min-w-6 h-6 rounded-full text-body font-medium',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n isToday && 'px-2 bg-info text-on-emphasis',\n !isToday && !inMonth && 'text-fg-disabled',\n )}\n >\n {format(date, 'd')}\n </button>\n </div>\n\n {/ Event tiles /}\n <div className=\"flex flex-col gap-0.5 min-h-0\">\n {visibleEvents.map((event) => {\n const ec = event.color ?? 'blue'\n // 2026-06-01 allDay:淡底 + 左 accent 條 + medium = 「全天長條」視覺(區分有時間事件)\n const colorClass = event.allDay\n ? cn(EVENT_COLOR_CLASSES[ec], EVENT_ALLDAY_ACCENT[ec], 'font-medium')\n : EVENT_COLOR_CLASSES[ec]\n if (renderEventTile) {\n return (\n <div\n key={event.id}\n onClick={(e) => {\n e.stopPropagation()\n onEventClick?.(event)\n }}\n >\n {renderEventTile(event)}\n </div>\n )\n }\n return (\n <div\n key={event.id}\n role=\"button\"\n tabIndex={0}\n onClick={(e) => {\n e.stopPropagation()\n onEventClick?.(event)\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault()\n onEventClick?.(event)\n }\n }}\n aria-label={`事件:${event.title}`}\n className={cn(\n 'rounded-md px-1.5 py-0.5 text-caption truncate cursor-pointer transition-colors',\n // 2026-05-31 #22:事件 tile 是 focusable(tabIndex=0 role=button)但原無 focus ring\n // → WCAG 2.4.7 不合規。補 focus-visible ring 對齊日期格按鈕。\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n colorClass,\n )}\n >\n {event.title}\n </div>\n )\n })}\n {overflowCount > 0 && (\n <div className=\"text-caption text-fg-muted px-1.5\">\n +{overflowCount} more\n </div>\n )}\n </div>\n </div>\n )\n })}\n </div>\n ))}\n </div>\n </div>\n )\n})\nCalendar.displayName = \"Calendar\"\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 calendarMeta = {\n component: 'Calendar',\n family: null, // non-family composite / overlay / layout\n variants: {\n\n },\n sizes: {\n\n },\n // 'active' 移除 — 日期格按壓視覺屬 DateGrid(其 meta 已 −active);nav 按壓屬內嵌 Button(2026-07-07 詞彙統一 DS-wide 按壓訊號盤點:檔內 0 active: utility / 0 -active token)。\n states: ['default', 'hover', 'focus-visible', 'disabled'],\n tokens: {\n bg: ['bg-muted', 'bg-neutral-hover', 'bg-info', 'bg-surface'],\n fg: ['text-fg-disabled', 'text-fg-muted', 'text-foreground'],\n ring: ['ring-ring'],\n },\n} as const\n\nexport { Calendar }\n"],"names":["Calendar"],"mappings":"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"}
1	+ {"version":3,"file":"calendar.js","sources":["../../../src/components/Calendar/calendar.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 { ChevronLeft, ChevronRight, Plus } from 'lucide-react'\nimport {\n startOfMonth,\n endOfMonth,\n startOfWeek,\n endOfWeek,\n eachDayOfInterval,\n format,\n isSameMonth,\n isSameDay,\n addMonths,\n subMonths,\n} from 'date-fns'\nimport { cn } from '@/lib/utils'\nimport { CAT_EVENT, CAT_ACCENT, type CategoricalHue } from '@/design-system/tokens/categorical-color'\nimport { Button } from '@/design-system/components/Button/button'\nimport { SegmentedControl, SegmentedControlItem } from '@/design-system/components/SegmentedControl/segmented-control'\n\n/*\n Calendar — 事件檢視 canvas(月 view MVP)\n \n 定位:看事件的 page-level canvas,對齊 Notion Calendar / Google Calendar。\n * 完整 spec 見 `calendar.spec.md`。\n \n ── Layout Family ──\n * 非 4-Family,屬 page-composite(多區塊 Toolbar + Grid + EventTile)。\n \n ── MVP scope ──\n * - 月 view 完整(toolbar / grid / event tile / today highlight / outside days)\n * - 週 / 日 view + size lg = roadmap:尚未實作,目前只渲染月檢視(誠實 API,\n * props 保留給未來增量,2026-07-14 user 拍板;行為明細見 spec「狀態 > 邊界案例」)\n * - 拖拉增刪 event 是 roadmap(見 spec「MVP vs 後續增量」)\n \n ── 與 DatePicker 的區分 ──\n * DatePicker 是「選日期」form control;Calendar 是「看事件」page canvas。\n * 名字相近但職責完全不同,spec 頂段明示分界。\n /\n\n// ── Types ──────────────────────────────────────────────────────────────────\n\nexport interface CalendarEvent {\n id: string\n title: string\n /* ISO 字串 \"YYYY-MM-DD\"(all-day)或 \"YYYY-MM-DDTHH:mm\"(timed) /\n start: string \| Date\n end: string \| Date\n allDay?: boolean\n /\n 事件類別色(categorical 色相,1:1 對 `--color-{hue}-`)。消費 categorical-color SSOT,\n 與 Tag / Avatar 共用同一組 12 色相。2026-06-04 修:原 `orange` 與 `red` 都誤接 deep-orange;\n * 改消費 SSOT 後 orange→`--color-orange-`、red→`--color-red-`(品牌紅 hue 25),各自獨立。\n /\n color?: CategoricalHue\n metadata?: Record<string, unknown>\n}\n\nexport type CalendarView = 'month' \| 'week' \| 'day'\n\nexport interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n /\n 當前 view。roadmap:`'week'` / `'day'` 尚未實作,目前只渲染月檢視——\n * 傳入不報錯:grid 仍為月檢視,僅 `data-view` 同步 + SegmentedControl 週/日項 disabled\n * (誠實 API;見 calendar.spec.md「狀態 > 邊界案例」+「MVP vs 後續增量」)。\n /\n view?: CalendarView\n defaultView?: CalendarView\n onViewChange?: (view: CalendarView) => void\n\n /* 聚焦日期(月 view 的那個月) /\n referenceDate?: Date\n defaultReferenceDate?: Date\n onReferenceDateChange?: (date: Date) => void\n\n /* 事件資料 /\n events?: CalendarEvent[]\n\n /* 點 event tile 回調 /\n onEventClick?: (event: CalendarEvent) => void\n /* 點月 cell 回調(用於新增) /\n onDateClick?: (date: Date) => void\n /* 點新事件 CTA 回調 /\n onCreateEvent?: () => void\n\n /* 0 = Sunday, 1 = Monday。預設 0(對齊 Google Calendar 美系預設) /\n weekStartsOn?: 0 \| 1\n\n /* 自訂 event tile 渲染 /\n renderEventTile?: (event: CalendarEvent) => React.ReactNode\n\n /\n size。roadmap:`'lg'` 尚未實作,視覺與 `'md'` 相同——傳入不報錯,\n * 僅設 `data-size` attribute,無任何 CSS 消費(誠實 API;prop 保留給未來 cell 密度增量)。\n /\n size?: 'md' \| 'lg'\n className?: string\n\n /* locale(預設 'en-US') /\n locale?: string\n\n /* ARIA labels for chrome controls. Override for i18n. /\n prevAriaLabel?: string\n nextAriaLabel?: string\n /* 月份導覽 <nav> landmark 的 aria-label。Override for i18n. /\n navAriaLabel?: string\n viewToggleAriaLabel?: string\n todayLabel?: string\n /* 「新事件」CTA 文字。Override for i18n。CTA 僅在傳 `onCreateEvent` 時渲染(spec Toolbar 段)。 /\n createLabel?: string\n}\n\n// ── Event tile color tokens ─────────────────────────────────────────────────\n// 消費 categorical-color SSOT(CAT_EVENT = subtle 底 + hover step-2;CAT_ACCENT = 左側 step-6\n// 實心條),與 Tag / Avatar 共用 12 色相,key X 一律對 `--color-X-`(1:1)。\n// 2026-06-01 allDay:全天事件 = 淡底 tile + 左側實心 accent 條 + medium,視覺區分「全天長條」vs\n// 有時間事件;用 accent border 而非 solid fill 保文字對比安全。對齊 Google Calendar / Outlook 慣例。\nconst EVENT_COLOR_CLASSES = CAT_EVENT\nconst EVENT_ALLDAY_ACCENT = CAT_ACCENT\n\n// ── Helpers ────────────────────────────────────────────────────────────────\n\nfunction coerceDate(value: string \| Date): Date {\n if (value instanceof Date) return value\n // date-only ISO(\"YYYY-MM-DD\")用本地午夜建構,不走 new Date(str)。\n // 原因:`new Date('2026-06-15')` 按 UTC 午夜解析,而 eventsByDate 分桶以本地\n // getFullYear/Month/Date 讀取 → 負 UTC 時區(西半球)的 all-day 事件被移到前一天\n // (真實 timezone bug)。手動 split 建本地 Date,與分桶的本地讀取一致。\n // 含時間的字串(YYYY-MM-DDTHH:mm,無 offset)ES 規範本就以本地解析,走原生 new Date()。\n const dateOnly = /^\\d{4}-\\d{2}-\\d{2}$/.exec(value)\n if (dateOnly) {\n const [y, m, d] = value.split('-').map(Number)\n return new Date(y, m - 1, d)\n }\n return new Date(value)\n}\n\n// eventsOnDate(per-cell 全 events 掃描)已由 eventsByDate bucketing memo 取代並移除\n// (2026-07-06 D3 perf;留著會觸發 noUnusedLocals TS6133)。\n\n// ── Component ──────────────────────────────────────────────────────────────\n\nconst MAX_TILES_PER_CELL = 3\n\nconst Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(function Calendar({\n view: viewProp,\n defaultView = 'month',\n onViewChange,\n referenceDate: referenceDateProp,\n defaultReferenceDate,\n onReferenceDateChange,\n events = [],\n onEventClick,\n onDateClick,\n onCreateEvent,\n weekStartsOn = 0,\n renderEventTile,\n size = 'md',\n className,\n locale = 'en-US',\n prevAriaLabel = '上個月', // i18n-allow: DS default; consumer override via prevAriaLabel prop\n nextAriaLabel = '下個月', // i18n-allow: DS default; consumer override via nextAriaLabel prop\n navAriaLabel = '行事曆月份導覽', // i18n-allow: DS default; consumer override via navAriaLabel prop\n viewToggleAriaLabel = '檢視切換', // i18n-allow: DS default; consumer override via viewToggleAriaLabel prop\n todayLabel = '今天', // i18n-allow: DS default; consumer override via todayLabel prop\n createLabel = '新事件', // i18n-allow: DS default; consumer override via createLabel prop\n ...props\n}, ref) {\n // Controlled / uncontrolled refDate\n const [internalRef, setInternalRef] = React.useState<Date>(\n defaultReferenceDate ?? new Date(),\n )\n const refDate = referenceDateProp ?? internalRef\n const setRefDate = React.useCallback(\n (next: Date) => {\n if (referenceDateProp === undefined) setInternalRef(next)\n onReferenceDateChange?.(next)\n },\n [referenceDateProp, onReferenceDateChange],\n )\n\n // View state(roadmap:week/day 尚未實作,受控值照收但 grid 恆為月檢視)\n const [internalView, setInternalView] = React.useState<CalendarView>(defaultView)\n const currentView = viewProp ?? internalView\n const setView = React.useCallback(\n (next: CalendarView) => {\n if (viewProp === undefined) setInternalView(next)\n onViewChange?.(next)\n },\n [viewProp, onViewChange],\n )\n\n // Build month grid\n const days = React.useMemo(() => {\n const monthStart = startOfMonth(refDate)\n const monthEnd = endOfMonth(refDate)\n const gridStart = startOfWeek(monthStart, { weekStartsOn })\n const gridEnd = endOfWeek(monthEnd, { weekStartsOn })\n return eachDayOfInterval({ start: gridStart, end: gridEnd })\n }, [refDate, weekStartsOn])\n\n // 2026-07-06 D3 perf:formatter 依 locale memo(對齊 weekdayNames 既有做法),避免每 render 重建\n // Intl.DateTimeFormat(已知貴的 constructor);.format(refDate) 每 render 仍執行(cheap)。\n const monthTitleFormatter = React.useMemo(\n () => new Intl.DateTimeFormat(locale, { year: 'numeric', month: 'long' }),\n [locale],\n )\n const monthTitle = monthTitleFormatter.format(refDate)\n\n const today = new Date()\n\n const weekdayNames = React.useMemo(() => {\n // 取 `days[0..6]` 的名字(gridStart 開始 7 天,正好一週)\n return days.slice(0, 7).map((d) =>\n new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(d),\n )\n }, [days, locale])\n\n // 2026-07-06 D3 perf:原每 render 對 42 cells 各跑 eventsOnDate 全 events filter = O(42×N) +\n // 每比較配 ~5 個 Date;數百-上千 events(行事曆真實規模)單次 render 數十 ms,且父層任何 re-render\n // 全額重付。改 useMemo 單趟 bucket:每 event 只 parse 一次,展開 [start..end](clamp 到可見 grid,\n // 避免長跨度 event 展開爆量)寫入 date→events Map,順便完成 allDay 排序。cell 內改 O(1) map.get。行為 Δ=0。\n const eventsByDate = React.useMemo(() => {\n const map = new Map<string, CalendarEvent[]>()\n if (days.length === 0) return map\n const first = days[0]\n const last = days[days.length - 1]\n const gridStart = new Date(first.getFullYear(), first.getMonth(), first.getDate()).getTime()\n const gridEnd = new Date(last.getFullYear(), last.getMonth(), last.getDate()).getTime()\n for (const e of events) {\n const start = coerceDate(e.start)\n const end = coerceDate(e.end)\n const eEnd = new Date(end.getFullYear(), end.getMonth(), end.getDate()).getTime()\n let sMs = new Date(start.getFullYear(), start.getMonth(), start.getDate()).getTime()\n if (eEnd < gridStart \|\| sMs > gridEnd) continue // 可見窗外對 42 cells 無貢獻\n if (sMs < gridStart) sMs = gridStart\n const lastMs = Math.min(eEnd, gridEnd)\n const cursor = new Date(sMs)\n while (cursor.getTime() <= lastMs) {\n const key = `${cursor.getFullYear()}-${cursor.getMonth() + 1}-${cursor.getDate()}`\n const bucket = map.get(key)\n if (bucket) bucket.push(e)\n else map.set(key, [e])\n cursor.setDate(cursor.getDate() + 1)\n }\n }\n // allDay 排前(對齊 Google Calendar 全天列在上;V8 stable sort 保 events 原序 → 與舊 per-cell 一致)\n for (const bucket of map.values()) {\n bucket.sort((a, b) => Number(b.allDay ?? false) - Number(a.allDay ?? false))\n }\n return map\n }, [events, days])\n\n const handleToday = () => setRefDate(new Date())\n const handlePrev = () => setRefDate(subMonths(refDate, 1))\n const handleNext = () => setRefDate(addMonths(refDate, 1))\n\n return (\n <div\n ref={ref}\n className={cn(\n 'flex flex-col w-full h-full bg-surface rounded-md border border-divider overflow-hidden',\n className,\n )}\n data-view={currentView}\n data-size={size}\n {...props}\n >\n {/* Toolbar:[◀] [今天] [▶] title [view tabs] [+ new] /}\n <div\n className={cn(\n 'flex items-center gap-2 shrink-0 border-b border-divider',\n 'px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]',\n )}\n >\n {/ 月份導覽 landmark:prev / 今天 / next 包成 <nav> 給 SR landmark 導航(per calendar.spec.md a11y 段) /}\n <nav className=\"flex items-center gap-2\" aria-label={navAriaLabel}>\n <Button\n variant=\"text\"\n size=\"sm\"\n iconOnly\n startIcon={ChevronLeft}\n aria-label={prevAriaLabel}\n onClick={handlePrev}\n />\n <Button variant=\"tertiary\" size=\"sm\" onClick={handleToday}>\n {todayLabel}\n </Button>\n <Button\n variant=\"text\"\n size=\"sm\"\n iconOnly\n startIcon={ChevronRight}\n aria-label={nextAriaLabel}\n onClick={handleNext}\n />\n </nav>\n\n <h2 className=\"text-body-lg font-medium text-foreground flex-1 min-w-0 truncate ml-2\">\n {monthTitle}\n </h2>\n\n {/ View switcher:用 SegmentedControl(互斥多選一 canonical)——\n 對齊 CLAUDE.md「互斥分類選擇走 SegmentedControl,非 checked Button group」原則。\n Button 的 pressed 是「toggle 持續狀態」語意,不適合「單選 view 切換」 /}\n <SegmentedControl\n size=\"sm\"\n value={currentView}\n onValueChange={(v) => setView(v as CalendarView)}\n aria-label={viewToggleAriaLabel}\n >\n <SegmentedControlItem value=\"day\" disabled>日</SegmentedControlItem>\n <SegmentedControlItem value=\"week\" disabled>週</SegmentedControlItem>\n <SegmentedControlItem value=\"month\">月</SegmentedControlItem>\n </SegmentedControl>\n\n {onCreateEvent && (\n <Button variant=\"primary\" size=\"sm\" startIcon={Plus} onClick={onCreateEvent}>\n {createLabel}\n </Button>\n )}\n </div>\n\n {/ Weekday header /}\n <div className=\"grid grid-cols-7 border-b border-divider bg-muted\">\n {weekdayNames.map((name, i) => (\n <div\n key={i}\n className=\"px-2 py-1.5 text-caption text-fg-muted font-normal text-center\"\n >\n {name}\n </div>\n ))}\n </div>\n\n {/ Month grid:7 cols, ~5-6 rows。a11y(2026-04-25):WAI-ARIA grid 要求 row > gridcell\n 階層,chunk days 7 一組,wrap 成 role='row'(display:contents 保 CSS grid 佈局)。 /}\n <div\n className=\"grid grid-cols-7 flex-1 min-h-0\"\n role=\"grid\"\n aria-label={`月行事曆,${monthTitle}`}\n >\n {Array.from({ length: Math.ceil(days.length / 7) }, (_, rowIdx) => (\n <div key={rowIdx} role=\"row\" style={{ display: 'contents' }}>\n {days.slice(rowIdx 7, rowIdx * 7 + 7).map((date) => {\n const inMonth = isSameMonth(date, refDate)\n const isToday = isSameDay(date, today)\n // 2026-06-01 allDay:全天事件排 cell 頂端(對齊 Google Calendar 全天列在上)——\n // 排序已在 eventsByDate bucketing memo 內完成(D3 perf),cell 內 O(1) 查表\n const dayEvents = eventsByDate.get(`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`) ?? []\n const visibleEvents = dayEvents.slice(0, MAX_TILES_PER_CELL)\n const overflowCount = dayEvents.length - visibleEvents.length\n\n return (\n // 2026-06-11 a11y(user 拍板 2c 修 code):cell 從 <button role=\"gridcell\"> 改非互動容器 —\n // W3C button 語義禁止互動後代,cell 內含 role=\"button\" 事件 tile = nested-interactive 違規。\n // 對齊 Google Calendar:gridcell = 容器,日期數字按鈕 = 日期級 keyboard 入口,tile 各自為 button。\n // div onClick 保留滑鼠「點 cell 空白處等同點日期」便利(keyboard 走日期數字按鈕,功能等價)。\n <div\n key={date.toISOString()}\n role=\"gridcell\"\n onClick={() => onDateClick?.(date)}\n className={cn(\n 'flex flex-col gap-1 min-h-28 p-1.5 text-left',\n 'border-r border-b border-divider last:border-r-0',\n '[&:nth-child(7n)]:border-r-0',\n 'hover:bg-neutral-hover transition-colors',\n !inMonth && 'bg-muted',\n )}\n >\n {/* Date number = keyboard 入口;今天/平日統一 24px 圓形 hit-area(WCAG 2.5.8 ≥24,\n 今天 pill 本就 24px,平日跟齊 → 跨 cell 數字光學對齊) /}\n <div className=\"flex items-start justify-end\">\n <button\n type=\"button\"\n aria-label={`${format(date, 'yyyy-MM-dd')},${dayEvents.length} 個事件`}\n onClick={(e) => {\n e.stopPropagation()\n onDateClick?.(date)\n }}\n className={cn(\n 'inline-flex items-center justify-center min-w-6 h-6 rounded-full text-body font-medium',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n isToday && 'px-2 bg-info text-on-emphasis',\n !isToday && !inMonth && 'text-fg-disabled',\n )}\n >\n {format(date, 'd')}\n </button>\n </div>\n\n {/ Event tiles /}\n <div className=\"flex flex-col gap-0.5 min-h-0\">\n {visibleEvents.map((event) => {\n const ec = event.color ?? 'blue'\n // 2026-06-01 allDay:淡底 + 左 accent 條 + medium = 「全天長條」視覺(區分有時間事件)\n const colorClass = event.allDay\n ? cn(EVENT_COLOR_CLASSES[ec], EVENT_ALLDAY_ACCENT[ec], 'font-medium')\n : EVENT_COLOR_CLASSES[ec]\n if (renderEventTile) {\n return (\n <div\n key={event.id}\n onClick={(e) => {\n e.stopPropagation()\n onEventClick?.(event)\n }}\n >\n {renderEventTile(event)}\n </div>\n )\n }\n return (\n <div\n key={event.id}\n role=\"button\"\n tabIndex={0}\n onClick={(e) => {\n e.stopPropagation()\n onEventClick?.(event)\n }}\n onKeyDown={(e) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault()\n onEventClick?.(event)\n }\n }}\n aria-label={`事件:${event.title}`}\n className={cn(\n 'rounded-md px-1.5 py-0.5 text-caption truncate cursor-pointer transition-colors',\n // 2026-05-31 #22:事件 tile 是 focusable(tabIndex=0 role=button)但原無 focus ring\n // → WCAG 2.4.7 不合規。補 focus-visible ring 對齊日期格按鈕。\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n colorClass,\n )}\n >\n {event.title}\n </div>\n )\n })}\n {overflowCount > 0 && (\n <div className=\"text-caption text-fg-muted px-1.5\">\n +{overflowCount} more\n </div>\n )}\n </div>\n </div>\n )\n })}\n </div>\n ))}\n </div>\n </div>\n )\n})\nCalendar.displayName = \"Calendar\"\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 calendarMeta = {\n component: 'Calendar',\n family: null, // non-family composite / overlay / layout\n variants: {\n\n },\n sizes: {\n\n },\n // 'active' 移除 — 日期格按壓視覺屬 DateGrid(其 meta 已 −active);nav 按壓屬內嵌 Button(2026-07-07 詞彙統一 DS-wide 按壓訊號盤點:檔內 0 active: utility / 0 -active token)。\n states: ['default', 'hover', 'focus-visible', 'disabled'],\n tokens: {\n bg: ['bg-muted', 'bg-neutral-hover', 'bg-info', 'bg-surface'],\n fg: ['text-fg-disabled', 'text-fg-muted', 'text-foreground'],\n ring: ['ring-ring'],\n },\n} as const\n\nexport { Calendar }\n"],"names":["Calendar"],"mappings":"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"}

package/dist/components/Carousel/carousel.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/carousel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,gBAAgB,EAAE,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAKlF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,KAAK,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAC1C,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAChE,KAAK,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAC/C,KAAK,cAAc,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAE9C,UAAU,aAAa;IACrB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAA;CACpC;AAyBD,QAAA,MAAM,QAAQ,~~6HA0Gb~~,CAAA;AAKD,QAAA,MAAM,eAAe,6GAkBnB,CAAA;AAGF,QAAA,MAAM,YAAY,6GAkBhB,CAAA;AAQF,KAAK,UAAU,GAAG;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAWD,QAAA,MAAM,gBAAgB,sFA8BrB,CAAA;AAID,QAAA,MAAM,YAAY,sFA4BjB,CAAA;AAKD,QAAA,MAAM,YAAY,6GAqDhB,CAAA;AAKF,eAAO,MAAM,YAAY;;;;;;;;;;;CAiBf,CAAA;AAEV,OAAO,EACL,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,KAAK,WAAW,GACjB,CAAA"}
1	+ {"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../../src/components/Carousel/carousel.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,gBAAgB,EAAE,EAAE,KAAK,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAKlF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,KAAK,WAAW,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAC1C,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAChE,KAAK,eAAe,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAC/C,KAAK,cAAc,GAAG,qBAAqB,CAAC,CAAC,CAAC,CAAA;AAE9C,UAAU,aAAa;IACrB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAA;CACpC;AAyBD,QAAA,MAAM,QAAQ,6HAkHb,CAAA;AAKD,QAAA,MAAM,eAAe,6GAkBnB,CAAA;AAGF,QAAA,MAAM,YAAY,6GAkBhB,CAAA;AAQF,KAAK,UAAU,GAAG;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAWD,QAAA,MAAM,gBAAgB,sFA8BrB,CAAA;AAID,QAAA,MAAM,YAAY,sFA4BjB,CAAA;AAKD,QAAA,MAAM,YAAY,6GAqDhB,CAAA;AAKF,eAAO,MAAM,YAAY;;;;;;;;;;;CAiBf,CAAA;AAEV,OAAO,EACL,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,KAAK,WAAW,GACjB,CAAA"}

package/dist/components/Carousel/carousel.js CHANGED Viewed

@@ -34,6 +34,11 @@ const Carousel = React.forwardRef(
       setCanScrollNext(a.canScrollNext());
       setSelectedIndex(a.selectedScrollSnap());
     }, []);
+    const onReInit = React.useCallback((a) => {
+      if (!a) return;
+      setScrollSnaps(a.scrollSnapList());
+      onSelect(a);
+    }, [onSelect]);
     const scrollPrev = React.useCallback(() => api == null ? void 0 : api.scrollPrev(), [api]);
     const scrollNext = React.useCallback(() => api == null ? void 0 : api.scrollNext(), [api]);
     const scrollTo = React.useCallback((i) => api == null ? void 0 : api.scrollTo(i), [api]);
@@ -45,13 +50,13 @@ const Carousel = React.forwardRef(
       if (!api) return;
       setScrollSnaps(api.scrollSnapList());
       onSelect(api);
-      api.on("reInit", onSelect);
+      api.on("reInit", onReInit);
       api.on("select", onSelect);
       return () => {
         api == null ? void 0 : api.off("select", onSelect);
-        api == null ? void 0 : api.off("reInit", onSelect);
+        api == null ? void 0 : api.off("reInit", onReInit);
       };
-    }, [api, onSelect]);
+    }, [api, onSelect, onReInit]);
     const handleKeyDown = (e) => {
       const prevKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
       const nextKey = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";

package/dist/components/Carousel/carousel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"carousel.js","sources":["../../../src/components/Carousel/carousel.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 useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/design-system/components/Button/button'\n\n/*\n Carousel — 圖片 / 內容水平(或垂直)輪播\n \n 實作基礎:shadcn `Carousel` 結構 + `embla-carousel-react` v8 engine + 本 DS token。\n \n ── 世界級對照 ──\n * shadcn Carousel(本元件主要參考)/ Ant Carousel / Polaris 無 /\n * Swiper(獨立 lib,功能更多但不在 DS 範疇)\n \n ── 視覺慣例(user 指示) ──\n * 預設「hover 上去」左右兩邊才出現 prev/next 按鈕,不打擾主視覺;\n * 指示器(dots)在底部中央,clickable。\n \n ── API(shadcn parity) ──\n * <Carousel opts plugins orientation>\n * <CarouselContent>\n * <CarouselItem>...</CarouselItem>\n * <CarouselItem>...</CarouselItem>\n * </CarouselContent>\n * <CarouselPrevious /> ← 左箭頭\n * <CarouselNext /> ← 右箭頭\n * <CarouselDots /> ← 本 DS 擴充(shadcn 無,Ant/Swiper 慣例)\n * </Carousel>\n /\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ninterface CarouselProps {\n opts?: CarouselOptions\n plugins?: CarouselPlugin\n orientation?: 'horizontal' \| 'vertical'\n setApi?: (api: CarouselApi) => void\n}\n\ninterface CarouselContextProps extends CarouselProps {\n carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n api: ReturnType<typeof useEmblaCarousel>[1]\n scrollPrev: () => void\n scrollNext: () => void\n scrollTo: (i: number) => void\n canScrollPrev: boolean\n canScrollNext: boolean\n selectedIndex: number\n scrollSnaps: number[]\n orientation: 'horizontal' \| 'vertical'\n}\n\nconst CarouselContext = React.createContext<CarouselContextProps \| null>(null)\n\nfunction useCarousel() {\n const ctx = React.useContext(CarouselContext)\n if (!ctx) throw new Error('useCarousel 必須在 <Carousel> 內使用')\n return ctx\n}\n\n// ── Root ────────────────────────────────────────────────────────────────────\n\nconst Carousel = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement> & CarouselProps\n>(\n (\n {\n orientation = 'horizontal',\n opts,\n setApi,\n plugins,\n className,\n children,\n ...props\n },\n ref,\n ) => {\n const [carouselRef, api] = useEmblaCarousel(\n { ...opts, axis: orientation === 'horizontal' ? 'x' : 'y' },\n plugins,\n )\n const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n const [canScrollNext, setCanScrollNext] = React.useState(false)\n const [selectedIndex, setSelectedIndex] = React.useState(0)\n const [scrollSnaps, setScrollSnaps] = React.useState<number[]>([])\n\n const onSelect = React.useCallback((a: CarouselApi) => {\n if (!a) return\n setCanScrollPrev(a.canScrollPrev())\n setCanScrollNext(a.canScrollNext())\n setSelectedIndex(a.selectedScrollSnap())\n }, [])\n\n const scrollPrev = React.useCallback(() => api?.scrollPrev(), [api])\n const scrollNext = React.useCallback(() => api?.scrollNext(), [api])\n const scrollTo = React.useCallback((i: number) => api?.scrollTo(i), [api])\n\n React.useEffect(() => {\n if (!api \|\| !setApi) return\n setApi(api)\n }, [api, setApi])\n\n React.useEffect(() => {\n if (!api) return\n setScrollSnaps(api.scrollSnapList())\n onSelect(api)\n api.on('reInit', onSelect)\n api.on('select', onSelect)\n return () => {\n api?.off('select', onSelect)\n api?.off('reInit', onSelect) // D3 fix: previously leaked — stale closure on remount\n }\n }, [api, onSelect])\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n // 鍵盤方向對齊內容捲動方向(APG 建議):horizontal → ←/→;vertical → ↑/↓\n const prevKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'\n const nextKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'\n if (e.key === prevKey) { e.preventDefault(); scrollPrev() }\n else if (e.key === nextKey) { e.preventDefault(); scrollNext() }\n }\n\n const contextValue = React.useMemo(\n () => ({\n carouselRef,\n api,\n opts,\n orientation,\n scrollPrev,\n scrollNext,\n scrollTo,\n canScrollPrev,\n canScrollNext,\n selectedIndex,\n scrollSnaps,\n }),\n [\n carouselRef,\n api,\n opts,\n orientation,\n scrollPrev,\n scrollNext,\n scrollTo,\n canScrollPrev,\n canScrollNext,\n selectedIndex,\n scrollSnaps,\n ]\n )\n\n return (\n <CarouselContext.Provider value={contextValue}>\n <div\n ref={ref}\n onKeyDownCapture={handleKeyDown}\n className={cn('group/carousel relative', className)}\n role=\"region\"\n aria-roledescription=\"carousel\"\n aria-label=\"輪播\"\n {...props}\n >\n {children}\n </div>\n </CarouselContext.Provider>\n )\n },\n)\nCarousel.displayName = 'Carousel'\n\n// ── Content / Item ──────────────────────────────────────────────────────────\n\nconst CarouselContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n const { carouselRef, orientation } = useCarousel()\n return (\n <div ref={carouselRef} className=\"overflow-hidden\">\n <div\n ref={ref}\n className={cn(\n 'flex',\n orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n className,\n )}\n {...props}\n />\n </div>\n )\n})\nCarouselContent.displayName = 'CarouselContent'\n\nconst CarouselItem = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n const { orientation } = useCarousel()\n return (\n <div\n ref={ref}\n role=\"group\"\n aria-roledescription=\"slide\"\n className={cn(\n 'min-w-0 shrink-0 grow-0 basis-full',\n orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n className,\n )}\n {...props}\n />\n )\n})\nCarouselItem.displayName = 'CarouselItem'\n\n// ── Arrow buttons(hover 才顯示)────────────────────────────────────────────\n// 使用 DS Button (tertiary + iconOnly size md);hover-only 顯示由 wrapper 的\n// opacity transition 控制(Button 本身不負責)。此 wrapper 存在僅為絕對定位 +\n// hover/focus 可見性,不再覆寫 Button 的視覺 token。\n\ntype ArrowProps = {\n className?: string\n /* ARIA label. Override for i18n. Prev default: 「上一張」;Next default: 「下一張」 /\n 'aria-label'?: string\n}\n\nconst arrowWrapperClass = cn(\n 'absolute z-10',\n 'transition-opacity duration-200',\n 'opacity-0 group-hover/carousel:opacity-100',\n 'focus-within:opacity-100',\n '[&:has(button:disabled)]:opacity-0 [&:has(button:disabled)]:pointer-events-none',\n)\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst CarouselPrevious = React.forwardRef<HTMLButtonElement, ArrowProps>(\n ({ className, 'aria-label': ariaLabel = '上一張' / i18n-allow: DS default; consumer override via aria-label prop / }, ref) => {\n const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n return (\n <div\n className={cn(\n arrowWrapperClass,\n orientation === 'horizontal'\n ? 'left-3 top-1/2 -translate-y-1/2'\n : 'top-3 left-1/2 -translate-x-1/2 rotate-90',\n className,\n )}\n >\n <Button\n ref={ref}\n variant=\"tertiary\"\n size=\"md\"\n iconOnly\n startIcon={ChevronLeft}\n aria-label={ariaLabel}\n disabled={!canScrollPrev}\n onClick={scrollPrev}\n // documented exception:視覺取向的 media carousel 箭頭用 rounded-full 圓形,\n // 優於 DS default rounded-md。對齊 Instagram / Airbnb / Notion / Apple Photos\n // 世界級慣例 — media carousel 箭頭圓形減少視覺方塊感壓迫內容。spec「箭頭視覺規格」有明示。\n className=\"rounded-full\"\n />\n </div>\n )\n },\n)\nCarouselPrevious.displayName = 'CarouselPrevious'\n\n// code-quality-allow: long-function — 與 CarouselPrevious 結構對稱的 JSX-heavy arrow(方向/位置/邊界三態 className 組合),拆 helper 會破壞兩支對讀性\nconst CarouselNext = React.forwardRef<HTMLButtonElement, ArrowProps>(\n ({ className, 'aria-label': ariaLabel = '下一張' / i18n-allow: DS default; consumer override via aria-label prop / }, ref) => {\n const { orientation, scrollNext, canScrollNext } = useCarousel()\n return (\n <div\n className={cn(\n arrowWrapperClass,\n orientation === 'horizontal'\n ? 'right-3 top-1/2 -translate-y-1/2'\n : 'bottom-3 left-1/2 -translate-x-1/2 rotate-90',\n className,\n )}\n >\n <Button\n ref={ref}\n variant=\"tertiary\"\n size=\"md\"\n iconOnly\n startIcon={ChevronRight}\n aria-label={ariaLabel}\n disabled={!canScrollNext}\n onClick={scrollNext}\n // documented exception:同 Previous,媒體導向 carousel 箭頭圓形\n className=\"rounded-full\"\n />\n </div>\n )\n },\n)\nCarouselNext.displayName = 'CarouselNext'\n\n// ── Dots indicator(底部中央)───────────────────────────────────────────────\n\nconst CarouselDots = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n const { scrollSnaps, selectedIndex, scrollTo } = useCarousel()\n if (scrollSnaps.length <= 1) return null\n return (\n <div\n ref={ref}\n className={cn(\n 'absolute bottom-3 left-1/2 -translate-x-1/2 z-10',\n 'flex items-center gap-1.5',\n className,\n )}\n // 2026-06-12 a11y(deep-audit R2 verdict b):APG grouped carousel 模型,非 tabs 模型。\n // APG:「picker buttons 收在 group 容器;現張的 picker button aria-disabled=true」\n // (https://www.w3.org/WAI/ARIA/apg/patterns/carousel/)+ Embla 官方 Accessibility plugin\n // 同採 plain button + label、無 tab roles(https://www.embla-carousel.com/docs/plugins/accessibility)。\n // 為何不用完整 tabs 模型(slide=tabpanel + dot aria-controls):\n // (1) Embla snap ≠ slide — basis-1/3 多張並排時 1 dot 控多張,tab↔tabpanel 1:1 不成立\n // (2) tabs 鍵盤契約(方向鍵移 tablist 內 focus)與根容器方向鍵=切張(本檔 handleKeyDown)衝突\n // (3) compound API 下 CarouselItem 不知 index,aria-controls id 接線需額外 registration\n // 舊實作 role=\"tablist\"/\"tab\" + aria-selected 是半套 tabs(無 aria-controls、slide 非 tabpanel)= 非法混血。\n // 現張標記用 aria-current(非 APG 原文的 aria-disabled)— M23 DS 既有 canonical 優先:\n // FileViewer filmstrip(file-viewer.tsx aria-current={active ? 'true' : undefined})同類\n // 「視覺項導航 + 現張標記」已 codify group + button + aria-current;Bootstrap 5 indicators 同 idiom。\n role=\"group\"\n aria-label=\"輪播指示器\" / i18n-allow: DS default; 對齊同檔其他 aria-label 語言 */\n {...props}\n >\n {scrollSnaps.map((_, i) => (\n <button\n key={i}\n type=\"button\"\n // 現張 dot aria-current(告知 SR「你在這張」;仍可 focus / 點擊為 no-op)\n aria-current={i === selectedIndex ? 'true' : undefined}\n aria-label={`跳至第 ${i + 1} 張`}\n onClick={() => scrollTo(i)}\n className={cn(\n 'h-1.5 rounded-full transition-all',\n // 2026-06-11 a11y(R2;Phase B codex 修重疊):hit-area 垂直擴至 24px、水平 ±3px(dot 6px+gap 6px → 中心距 12px,±3 恰相切零重疊;再寬必互搶點擊)\n // — 視覺 dot 維持 6×6 不變,僅點擊目標擴大(anatomy story 原宣稱的 hit-area 機制補真)\n 'relative before:absolute before:-inset-y-[9px] before:-inset-x-[3px] before:content-[\"\"]',\n // Dots 疊在 media(image/video)之上,不是 token color 底——用 --on-emphasis 保持語義\n // 跟其他「於飽和色底上的淺色前景」一致\n 'bg-on-emphasis/60 hover:bg-on-emphasis/80',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n i === selectedIndex ? 'w-6 bg-on-emphasis' : 'w-1.5',\n )}\n />\n ))}\n </div>\n )\n})\nCarouselDots.displayName = 'CarouselDots'\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 carouselMeta = {\n component: 'Carousel',\n family: null, // non-family composite / overlay / layout\n variants: {\n\n },\n sizes: {\n\n },\n // 'active' 移除 — 全檔無按壓視覺(prev/next 按壓屬內嵌 Button meta,同 Notice/Alert 排除慣例;\n // 2026-07-07 詞彙統一 DS-wide 交叉掃補修)。dot hover 為自有 hover 態(bg-on-emphasis alpha 變體)。\n states: ['default', 'hover', 'focus-visible', 'disabled'],\n tokens: {\n bg: [],\n fg: [],\n ring: ['ring-ring'],\n },\n} as const\n\nexport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselPrevious,\n CarouselNext,\n CarouselDots,\n type CarouselApi,\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"carousel.js","sources":["../../../src/components/Carousel/carousel.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 useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/design-system/components/Button/button'\n\n/*\n Carousel — 圖片 / 內容水平(或垂直)輪播\n \n 實作基礎:shadcn `Carousel` 結構 + `embla-carousel-react` v8 engine + 本 DS token。\n \n ── 世界級對照 ──\n * shadcn Carousel(本元件主要參考)/ Ant Carousel / Polaris 無 /\n * Swiper(獨立 lib,功能更多但不在 DS 範疇)\n \n ── 視覺慣例(user 指示) ──\n * 預設「hover 上去」左右兩邊才出現 prev/next 按鈕,不打擾主視覺;\n * 指示器(dots)在底部中央,clickable。\n \n ── API(shadcn parity) ──\n * <Carousel opts plugins orientation>\n * <CarouselContent>\n * <CarouselItem>...</CarouselItem>\n * <CarouselItem>...</CarouselItem>\n * </CarouselContent>\n * <CarouselPrevious /> ← 左箭頭\n * <CarouselNext /> ← 右箭頭\n * <CarouselDots /> ← 本 DS 擴充(shadcn 無,Ant/Swiper 慣例)\n * </Carousel>\n /\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ninterface CarouselProps {\n opts?: CarouselOptions\n plugins?: CarouselPlugin\n orientation?: 'horizontal' \| 'vertical'\n setApi?: (api: CarouselApi) => void\n}\n\ninterface CarouselContextProps extends CarouselProps {\n carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n api: ReturnType<typeof useEmblaCarousel>[1]\n scrollPrev: () => void\n scrollNext: () => void\n scrollTo: (i: number) => void\n canScrollPrev: boolean\n canScrollNext: boolean\n selectedIndex: number\n scrollSnaps: number[]\n orientation: 'horizontal' \| 'vertical'\n}\n\nconst CarouselContext = React.createContext<CarouselContextProps \| null>(null)\n\nfunction useCarousel() {\n const ctx = React.useContext(CarouselContext)\n if (!ctx) throw new Error('useCarousel 必須在 <Carousel> 內使用')\n return ctx\n}\n\n// ── Root ────────────────────────────────────────────────────────────────────\n\nconst Carousel = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement> & CarouselProps\n>(\n (\n {\n orientation = 'horizontal',\n opts,\n setApi,\n plugins,\n className,\n children,\n ...props\n },\n ref,\n ) => {\n const [carouselRef, api] = useEmblaCarousel(\n { ...opts, axis: orientation === 'horizontal' ? 'x' : 'y' },\n plugins,\n )\n const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n const [canScrollNext, setCanScrollNext] = React.useState(false)\n const [selectedIndex, setSelectedIndex] = React.useState(0)\n const [scrollSnaps, setScrollSnaps] = React.useState<number[]>([])\n\n const onSelect = React.useCallback((a: CarouselApi) => {\n if (!a) return\n setCanScrollPrev(a.canScrollPrev())\n setCanScrollNext(a.canScrollNext())\n setSelectedIndex(a.selectedScrollSnap())\n }, [])\n\n // reInit(動態 slide 增減 / options 變更)必刷新 scrollSnaps —— onSelect 只讀 select\n // 狀態不含 scrollSnapList;若不在此補,dots 數量 stale(舊 dots 殘留 / 縮減不更新)。\n const onReInit = React.useCallback((a: CarouselApi) => {\n if (!a) return\n setScrollSnaps(a.scrollSnapList())\n onSelect(a)\n }, [onSelect])\n\n const scrollPrev = React.useCallback(() => api?.scrollPrev(), [api])\n const scrollNext = React.useCallback(() => api?.scrollNext(), [api])\n const scrollTo = React.useCallback((i: number) => api?.scrollTo(i), [api])\n\n React.useEffect(() => {\n if (!api \|\| !setApi) return\n setApi(api)\n }, [api, setApi])\n\n React.useEffect(() => {\n if (!api) return\n setScrollSnaps(api.scrollSnapList())\n onSelect(api)\n api.on('reInit', onReInit)\n api.on('select', onSelect)\n return () => {\n api?.off('select', onSelect)\n api?.off('reInit', onReInit) // D3 fix: previously leaked — stale closure on remount\n }\n }, [api, onSelect, onReInit])\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n // 鍵盤方向對齊內容捲動方向(APG 建議):horizontal → ←/→;vertical → ↑/↓\n const prevKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'\n const nextKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'\n if (e.key === prevKey) { e.preventDefault(); scrollPrev() }\n else if (e.key === nextKey) { e.preventDefault(); scrollNext() }\n }\n\n const contextValue = React.useMemo(\n () => ({\n carouselRef,\n api,\n opts,\n orientation,\n scrollPrev,\n scrollNext,\n scrollTo,\n canScrollPrev,\n canScrollNext,\n selectedIndex,\n scrollSnaps,\n }),\n [\n carouselRef,\n api,\n opts,\n orientation,\n scrollPrev,\n scrollNext,\n scrollTo,\n canScrollPrev,\n canScrollNext,\n selectedIndex,\n scrollSnaps,\n ]\n )\n\n return (\n <CarouselContext.Provider value={contextValue}>\n <div\n ref={ref}\n onKeyDownCapture={handleKeyDown}\n className={cn('group/carousel relative', className)}\n role=\"region\"\n aria-roledescription=\"carousel\"\n aria-label=\"輪播\"\n {...props}\n >\n {children}\n </div>\n </CarouselContext.Provider>\n )\n },\n)\nCarousel.displayName = 'Carousel'\n\n// ── Content / Item ──────────────────────────────────────────────────────────\n\nconst CarouselContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n const { carouselRef, orientation } = useCarousel()\n return (\n <div ref={carouselRef} className=\"overflow-hidden\">\n <div\n ref={ref}\n className={cn(\n 'flex',\n orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',\n className,\n )}\n {...props}\n />\n </div>\n )\n})\nCarouselContent.displayName = 'CarouselContent'\n\nconst CarouselItem = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n const { orientation } = useCarousel()\n return (\n <div\n ref={ref}\n role=\"group\"\n aria-roledescription=\"slide\"\n className={cn(\n 'min-w-0 shrink-0 grow-0 basis-full',\n orientation === 'horizontal' ? 'pl-4' : 'pt-4',\n className,\n )}\n {...props}\n />\n )\n})\nCarouselItem.displayName = 'CarouselItem'\n\n// ── Arrow buttons(hover 才顯示)────────────────────────────────────────────\n// 使用 DS Button (tertiary + iconOnly size md);hover-only 顯示由 wrapper 的\n// opacity transition 控制(Button 本身不負責)。此 wrapper 存在僅為絕對定位 +\n// hover/focus 可見性,不再覆寫 Button 的視覺 token。\n\ntype ArrowProps = {\n className?: string\n /* ARIA label. Override for i18n. Prev default: 「上一張」;Next default: 「下一張」 /\n 'aria-label'?: string\n}\n\nconst arrowWrapperClass = cn(\n 'absolute z-10',\n 'transition-opacity duration-200',\n 'opacity-0 group-hover/carousel:opacity-100',\n 'focus-within:opacity-100',\n '[&:has(button:disabled)]:opacity-0 [&:has(button:disabled)]:pointer-events-none',\n)\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst CarouselPrevious = React.forwardRef<HTMLButtonElement, ArrowProps>(\n ({ className, 'aria-label': ariaLabel = '上一張' / i18n-allow: DS default; consumer override via aria-label prop / }, ref) => {\n const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n return (\n <div\n className={cn(\n arrowWrapperClass,\n orientation === 'horizontal'\n ? 'left-3 top-1/2 -translate-y-1/2'\n : 'top-3 left-1/2 -translate-x-1/2 rotate-90',\n className,\n )}\n >\n <Button\n ref={ref}\n variant=\"tertiary\"\n size=\"md\"\n iconOnly\n startIcon={ChevronLeft}\n aria-label={ariaLabel}\n disabled={!canScrollPrev}\n onClick={scrollPrev}\n // documented exception:視覺取向的 media carousel 箭頭用 rounded-full 圓形,\n // 優於 DS default rounded-md。對齊 Instagram / Airbnb / Notion / Apple Photos\n // 世界級慣例 — media carousel 箭頭圓形減少視覺方塊感壓迫內容。spec「箭頭視覺規格」有明示。\n className=\"rounded-full\"\n />\n </div>\n )\n },\n)\nCarouselPrevious.displayName = 'CarouselPrevious'\n\n// code-quality-allow: long-function — 與 CarouselPrevious 結構對稱的 JSX-heavy arrow(方向/位置/邊界三態 className 組合),拆 helper 會破壞兩支對讀性\nconst CarouselNext = React.forwardRef<HTMLButtonElement, ArrowProps>(\n ({ className, 'aria-label': ariaLabel = '下一張' / i18n-allow: DS default; consumer override via aria-label prop / }, ref) => {\n const { orientation, scrollNext, canScrollNext } = useCarousel()\n return (\n <div\n className={cn(\n arrowWrapperClass,\n orientation === 'horizontal'\n ? 'right-3 top-1/2 -translate-y-1/2'\n : 'bottom-3 left-1/2 -translate-x-1/2 rotate-90',\n className,\n )}\n >\n <Button\n ref={ref}\n variant=\"tertiary\"\n size=\"md\"\n iconOnly\n startIcon={ChevronRight}\n aria-label={ariaLabel}\n disabled={!canScrollNext}\n onClick={scrollNext}\n // documented exception:同 Previous,媒體導向 carousel 箭頭圓形\n className=\"rounded-full\"\n />\n </div>\n )\n },\n)\nCarouselNext.displayName = 'CarouselNext'\n\n// ── Dots indicator(底部中央)───────────────────────────────────────────────\n\nconst CarouselDots = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n const { scrollSnaps, selectedIndex, scrollTo } = useCarousel()\n if (scrollSnaps.length <= 1) return null\n return (\n <div\n ref={ref}\n className={cn(\n 'absolute bottom-3 left-1/2 -translate-x-1/2 z-10',\n 'flex items-center gap-1.5',\n className,\n )}\n // 2026-06-12 a11y(deep-audit R2 verdict b):APG grouped carousel 模型,非 tabs 模型。\n // APG:「picker buttons 收在 group 容器;現張的 picker button aria-disabled=true」\n // (https://www.w3.org/WAI/ARIA/apg/patterns/carousel/)+ Embla 官方 Accessibility plugin\n // 同採 plain button + label、無 tab roles(https://www.embla-carousel.com/docs/plugins/accessibility)。\n // 為何不用完整 tabs 模型(slide=tabpanel + dot aria-controls):\n // (1) Embla snap ≠ slide — basis-1/3 多張並排時 1 dot 控多張,tab↔tabpanel 1:1 不成立\n // (2) tabs 鍵盤契約(方向鍵移 tablist 內 focus)與根容器方向鍵=切張(本檔 handleKeyDown)衝突\n // (3) compound API 下 CarouselItem 不知 index,aria-controls id 接線需額外 registration\n // 舊實作 role=\"tablist\"/\"tab\" + aria-selected 是半套 tabs(無 aria-controls、slide 非 tabpanel)= 非法混血。\n // 現張標記用 aria-current(非 APG 原文的 aria-disabled)— M23 DS 既有 canonical 優先:\n // FileViewer filmstrip(file-viewer.tsx aria-current={active ? 'true' : undefined})同類\n // 「視覺項導航 + 現張標記」已 codify group + button + aria-current;Bootstrap 5 indicators 同 idiom。\n role=\"group\"\n aria-label=\"輪播指示器\" / i18n-allow: DS default; 對齊同檔其他 aria-label 語言 */\n {...props}\n >\n {scrollSnaps.map((_, i) => (\n <button\n key={i}\n type=\"button\"\n // 現張 dot aria-current(告知 SR「你在這張」;仍可 focus / 點擊為 no-op)\n aria-current={i === selectedIndex ? 'true' : undefined}\n aria-label={`跳至第 ${i + 1} 張`}\n onClick={() => scrollTo(i)}\n className={cn(\n 'h-1.5 rounded-full transition-all',\n // 2026-06-11 a11y(R2;Phase B codex 修重疊):hit-area 垂直擴至 24px、水平 ±3px(dot 6px+gap 6px → 中心距 12px,±3 恰相切零重疊;再寬必互搶點擊)\n // — 視覺 dot 維持 6×6 不變,僅點擊目標擴大(anatomy story 原宣稱的 hit-area 機制補真)\n 'relative before:absolute before:-inset-y-[9px] before:-inset-x-[3px] before:content-[\"\"]',\n // Dots 疊在 media(image/video)之上,不是 token color 底——用 --on-emphasis 保持語義\n // 跟其他「於飽和色底上的淺色前景」一致\n 'bg-on-emphasis/60 hover:bg-on-emphasis/80',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n i === selectedIndex ? 'w-6 bg-on-emphasis' : 'w-1.5',\n )}\n />\n ))}\n </div>\n )\n})\nCarouselDots.displayName = 'CarouselDots'\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 carouselMeta = {\n component: 'Carousel',\n family: null, // non-family composite / overlay / layout\n variants: {\n\n },\n sizes: {\n\n },\n // 'active' 移除 — 全檔無按壓視覺(prev/next 按壓屬內嵌 Button meta,同 Notice/Alert 排除慣例;\n // 2026-07-07 詞彙統一 DS-wide 交叉掃補修)。dot hover 為自有 hover 態(bg-on-emphasis alpha 變體)。\n states: ['default', 'hover', 'focus-visible', 'disabled'],\n tokens: {\n bg: [],\n fg: [],\n ring: ['ring-ring'],\n },\n} as const\n\nexport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselPrevious,\n CarouselNext,\n CarouselDots,\n type CarouselApi,\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Chart/chart.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../../src/components/Chart/chart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,iBAAiB,MAAM,UAAU,CAAA;AAG7C;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,MAAM,WAAW,GAAG;KACvB,CAAC,IAAI,MAAM,GAAG;QACb,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;QACvB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;KAC3B,GAAG,CACA;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,KAAK,CAAA;KAAE,GACjC;QAAE,KAAK,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC,OAAO,GAAG,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,CAC7D;CACF,CAAA;AAcD,UAAU,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAC/D,MAAM,EAAE,WAAW,CAAA;IACnB,QAAQ,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,mBAAmB,CAAC,CAAC,UAAU,CAAC,CAAA;CACzF;AAED,QAAA,MAAM,cAAc,~~yGAuCnB~~,CAAA;AASD,iBAAS,UAAU,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,WAAW,CAAA;CAAE,kDAuBtE;AAID,QAAA,MAAM,YAAY,kCAA4B,CAAA;AAE9C,KAAK,0BAA0B,GAAG;IAChC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB,CAAA;AAED,UAAU,wBAAyB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACnF,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,0BAA0B,EAAE,CAAA;IACtC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,0BAA0B,EAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IAC3F,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,CACV,KAAK,EAAE,OAAO,EACd,IAAI,EAAE,OAAO,EACb,IAAI,EAAE,0BAA0B,EAChC,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,OAAO,KACb,KAAK,CAAC,SAAS,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAA;IACrC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAGD,QAAA,MAAM,mBAAmB,8GAmHxB,CAAA;AAKD,QAAA,MAAM,WAAW,sGAA2B,CAAA;AAE5C,KAAK,yBAAyB,GAAG;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB,CAAA;AAED,UAAU,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACnE,OAAO,CAAC,EAAE,yBAAyB,EAAE,CAAA;IACrC,aAAa,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAA;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,QAAA,MAAM,kBAAkB,6GAkCvB,CAAA;AA0BD,eAAO,MAAM,SAAS;;;;;;;;;;;CAeZ,CAAA;AAEV,OAAO,EACL,cAAc,EACd,YAAY,EACZ,mBAAmB,EACnB,WAAW,EACX,kBAAkB,EAClB,UAAU,GACX,CAAA"}
1	+ {"version":3,"file":"chart.d.ts","sourceRoot":"","sources":["../../../src/components/Chart/chart.tsx"],"names":[],"mappings":"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"}

package/dist/components/Chart/chart.js CHANGED Viewed

@@ -17,6 +17,7 @@ const ChartContainer = React.forwardRef(
       "div",
       {
         ref,
+        id,
         "data-chart": chartId,
         className: cn(
           // 整體視覺套用本 DS typography + token

package/dist/components/Chart/chart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chart.js","sources":["../../../src/components/Chart/chart.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as RechartsPrimitive from 'recharts'\nimport { cn } from '@/lib/utils'\n\n/*\n Chart — shadcn-style wrapper over Recharts + 本 DS token\n \n 結構對齊 shadcn chart(ChartContainer / ChartTooltipContent / ChartLegendContent),\n * 但所有視覺(tooltip / legend / grid / axis)改用本 DS token。\n \n ── Color mapping ──\n * ChartConfig.{key}.color 接受 2 種形式:\n * 1. CSS var 字串('var(--chart-1)' 等)\n * 2. 任何合法 CSS color\n * 預設建議使用 --chart-1..5(本 DS 提供的 5 色類別 token)\n \n ── 視覺 token ──\n * Tooltip: bg-surface-raised / border-border / shadow-[var(--elevation-200)] / rounded-md\n * Legend text: text-fg-secondary / text-caption\n * Grid: stroke-divider\n * Axis tick: text-fg-muted / text-caption\n /\n\nexport type ChartConfig = {\n [k in string]: {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n \| { color?: string; theme?: never }\n \| { color?: never; theme: Record<'light' \| 'dark', string> }\n )\n}\n\ntype ChartContextProps = { config: ChartConfig }\n\nconst ChartContext = React.createContext<ChartContextProps \| null>(null)\n\nfunction useChart() {\n const ctx = React.useContext(ChartContext)\n if (!ctx) throw new Error('useChart 必須在 <ChartContainer> 內使用')\n return ctx\n}\n\n// ── ChartContainer ─────────────────────────────────────────────────────────\n\ninterface ChartContainerProps extends React.ComponentProps<'div'> {\n config: ChartConfig\n children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children']\n}\n\nconst ChartContainer = React.forwardRef<HTMLDivElement, ChartContainerProps>(\n ({ id, className, children, config, ...props }, ref) => {\n const uniqueId = React.useId()\n const chartId = `chart-${id \|\| uniqueId.replace(/:/g, '')}`\n // Memoize provider value(2026-04-22 D3 perf audit):避免 render 重建 wrapper object\n const ctxValue = React.useMemo(() => ({ config }), [config])\n\n return (\n <ChartContext.Provider value={ctxValue}>\n <div\n ref={ref}\n data-chart={chartId}\n className={cn(\n // 整體視覺套用本 DS typography + token\n // 預設 aspect-video(16:9)— Recharts ResponsiveContainer 需 parent 有高度。\n // Consumer 若需其他比例,包 <AspectRatio ratio={n}> 覆寫(AspectRatio 的 padding-bottom 高度會蓋過此 class)。\n 'flex aspect-video justify-center text-caption',\n // recharts 內部預設樣式覆寫:grid / axis / tooltip shadow 等\n \"[&_.recharts-cartesian-grid_line]:stroke-divider\",\n \"[&_.recharts-cartesian-axis-tick_text]:fill-fg-muted\",\n \"[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-divider\",\n \"[&_.recharts-reference-line_[stroke='#ccc']]:stroke-divider\",\n \"[&_.recharts-dot[stroke='#fff']]:stroke-transparent\",\n \"[&_.recharts-layer]:outline-none\",\n \"[&_.recharts-sector[stroke='#fff']]:stroke-transparent\",\n \"[&_.recharts-sector]:outline-none\",\n \"[&_.recharts-surface]:outline-none\",\n className,\n )}\n {...props}\n >\n <ChartStyle id={chartId} config={config} />\n <RechartsPrimitive.ResponsiveContainer>\n {children}\n </RechartsPrimitive.ResponsiveContainer>\n </div>\n </ChartContext.Provider>\n )\n },\n)\nChartContainer.displayName = 'ChartContainer'\n\n// ── ChartStyle ──────────────────────────────────────────────────────────────\n// 將 config 內每個 key 的 color 注入 scoped CSS variable(`--color-{key}`),\n// 供 Recharts `fill={`var(--color-${key})`}` 直接消費。\n\nconst THEMES = { light: '', dark: '[data-theme=dark] ' } as const\n\nfunction ChartStyle({ id, config }: { id: string; config: ChartConfig }) {\n const entries = Object.entries(config).filter(([, v]) => 'color' in v \|\| 'theme' in v)\n if (entries.length === 0) return null\n\n return (\n <style\n dangerouslySetInnerHTML={{\n __html: Object.entries(THEMES)\n .map(([theme, prefix]) => {\n const vars = entries\n .map(([key, item]) => {\n const color =\n 'theme' in item ? item.theme?.[theme as keyof typeof item.theme] : item.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .filter(Boolean)\n .join('\\n')\n return `${prefix}[data-chart=${id}] {\\n${vars}\\n}`\n })\n .join('\\n'),\n }}\n />\n )\n}\n\n// ── ChartTooltip / ChartTooltipContent ─────────────────────────────────────\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\ntype RechartsTooltipPayloadItem = {\n value?: string \| number\n name?: string \| number\n dataKey?: string \| number\n color?: string\n payload?: unknown\n [key: string]: unknown\n}\n\ninterface ChartTooltipContentProps extends Omit<React.ComponentProps<'div'>, 'color'> {\n active?: boolean\n payload?: RechartsTooltipPayloadItem[]\n label?: unknown\n labelFormatter?: (value: unknown, payload: RechartsTooltipPayloadItem[]) => React.ReactNode\n labelClassName?: string\n formatter?: (\n value: unknown,\n name: unknown,\n item: RechartsTooltipPayloadItem,\n index: number,\n payload: unknown,\n ) => React.ReactNode\n color?: string\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: 'line' \| 'dot' \| 'dashed'\n nameKey?: string\n labelKey?: string\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst ChartTooltipContent = React.forwardRef<HTMLDivElement, ChartTooltipContentProps>(\n (\n {\n active,\n payload,\n className,\n indicator = 'dot',\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n },\n ref,\n ) => {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel \|\| !payload?.length) return null\n const [item] = payload\n const key = `${labelKey \|\| item.dataKey \|\| item.name \|\| 'value'}`\n const itemConfig = getPayloadConfig(config, item, key)\n const value =\n !labelKey && typeof label === 'string'\n ? config[label as keyof typeof config]?.label \|\| label\n : itemConfig?.label\n if (labelFormatter) return <div className={cn('font-medium', labelClassName)}>{labelFormatter(value, payload)}</div>\n if (!value) return null\n return <div className={cn('font-medium', labelClassName)}>{value}</div>\n }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey])\n\n if (!active \|\| !payload?.length) return null\n\n const nestLabel = payload.length === 1 && indicator !== 'dot'\n\n return (\n <div\n ref={ref}\n // 2026-05-31 #5:自訂 tooltip 補 role=status + aria-live,保留 Recharts 原生 SR 朗讀(spec L146 宣稱鍵盤可達+讀屏)\n role=\"status\"\n aria-live=\"polite\"\n className={cn(\n 'grid min-w-32 items-start gap-1.5 rounded-md border border-border bg-surface-raised px-2.5 py-1.5 text-caption shadow-[var(--elevation-200)]',\n className,\n )}\n >\n {!nestLabel ? tooltipLabel : null}\n <div className=\"grid gap-1.5\">\n {payload.map((item, index) => {\n const key = `${nameKey \|\| item.name \|\| item.dataKey \|\| 'value'}`\n const itemConfig = getPayloadConfig(config, item, key)\n const indicatorColor = color \|\| (item.payload as { fill?: string })?.fill \|\| item.color\n\n return (\n <div\n key={item.dataKey \|\| index}\n className={cn(\n 'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-fg-muted',\n indicator === 'dot' && 'items-center',\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n <itemConfig.icon />\n ) : (\n !hideIndicator && (\n <div\n className={cn('shrink-0 rounded-xs border-(--color-border) bg-(--color-bg)', {\n 'h-2.5 w-2.5': indicator === 'dot',\n 'w-1': indicator === 'line',\n 'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',\n 'my-0.5': nestLabel && indicator === 'dashed',\n })}\n style={\n {\n '--color-bg': indicatorColor,\n '--color-border': indicatorColor,\n } as React.CSSProperties\n }\n />\n )\n )}\n <div\n className={cn(\n 'flex flex-1 justify-between leading-none',\n nestLabel ? 'items-end' : 'items-center',\n )}\n >\n <div className=\"grid gap-1.5\">\n {nestLabel ? tooltipLabel : null}\n <span className=\"text-fg-secondary\">{itemConfig?.label \|\| item.name}</span>\n </div>\n {/ 2026-07-04 修:falsy check 會讓合法資料值 0 不渲染(shadcn 上游同病)→ null check */}\n {item.value != null && (\n <span className=\"text-foreground font-mono font-medium tabular-nums\">\n {item.value.toLocaleString()}\n </span>\n )}\n </div>\n </>\n )}\n </div>\n )\n })}\n </div>\n </div>\n )\n },\n)\nChartTooltipContent.displayName = 'ChartTooltipContent'\n\n// ── ChartLegend / ChartLegendContent ───────────────────────────────────────\n\nconst ChartLegend = RechartsPrimitive.Legend\n\ntype RechartsLegendPayloadItem = {\n value?: unknown\n dataKey?: string \| number\n color?: string\n payload?: unknown\n [key: string]: unknown\n}\n\ninterface ChartLegendContentProps extends React.ComponentProps<'div'> {\n payload?: RechartsLegendPayloadItem[]\n verticalAlign?: 'top' \| 'middle' \| 'bottom'\n hideIcon?: boolean\n nameKey?: string\n}\n\nconst ChartLegendContent = React.forwardRef<HTMLDivElement, ChartLegendContentProps>(\n ({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey }, ref) => {\n const { config } = useChart()\n if (!payload?.length) return null\n\n return (\n <div\n ref={ref}\n className={cn(\n 'flex items-center justify-center gap-4',\n verticalAlign === 'top' ? 'pb-3' : 'pt-3',\n className,\n )}\n >\n {payload.map((item) => {\n const key = `${nameKey \|\| item.dataKey \|\| 'value'}`\n const itemConfig = getPayloadConfig(config, item, key)\n return (\n <div\n key={String(item.value)}\n className=\"flex items-center gap-1.5 text-fg-secondary [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-fg-muted\"\n >\n {itemConfig?.icon && !hideIcon ? (\n <itemConfig.icon />\n ) : (\n <div className=\"h-2 w-2 shrink-0 rounded-xs\" style={{ backgroundColor: item.color }} />\n )}\n {itemConfig?.label}\n </div>\n )\n })}\n </div>\n )\n },\n)\nChartLegendContent.displayName = 'ChartLegendContent'\n\n// ── helpers ────────────────────────────────────────────────────────────────\n\nfunction getPayloadConfig(\n config: ChartConfig,\n payload: unknown,\n key: string,\n) {\n if (typeof payload !== 'object' \|\| payload === null) return undefined\n const payloadPayload =\n 'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null\n ? payload.payload\n : undefined\n let configLabelKey: string = key\n if (key in (payload as Record<string, unknown>) && typeof (payload as Record<string, unknown>)[key] === 'string') {\n configLabelKey = (payload as Record<string, string>)[key]\n } else if (payloadPayload && key in payloadPayload && typeof (payloadPayload as Record<string, unknown>)[key] === 'string') {\n configLabelKey = (payloadPayload as Record<string, string>)[key]\n }\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const chartMeta = {\n component: 'Chart',\n family: null, // non-family composite / overlay / layout\n variants: {\n\n },\n sizes: {\n\n },\n states: ['default'],\n tokens: {\n bg: ['bg-surface-raised', 'bg-transparent'],\n fg: ['text-fg-muted', 'text-fg-secondary', 'text-foreground'],\n ring: [],\n },\n} as const\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"chart.js","sources":["../../../src/components/Chart/chart.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as RechartsPrimitive from 'recharts'\nimport { cn } from '@/lib/utils'\n\n/*\n Chart — shadcn-style wrapper over Recharts + 本 DS token\n \n 結構對齊 shadcn chart(ChartContainer / ChartTooltipContent / ChartLegendContent),\n * 但所有視覺(tooltip / legend / grid / axis)改用本 DS token。\n \n ── Color mapping ──\n * ChartConfig.{key}.color 接受 2 種形式:\n * 1. CSS var 字串('var(--chart-1)' 等)\n * 2. 任何合法 CSS color\n * 預設建議使用 --chart-1..5(本 DS 提供的 5 色類別 token)\n \n ── 視覺 token ──\n * Tooltip: bg-surface-raised / border-border / shadow-[var(--elevation-200)] / rounded-md\n * Legend text: text-fg-secondary / text-caption\n * Grid: stroke-divider\n * Axis tick: text-fg-muted / text-caption\n /\n\nexport type ChartConfig = {\n [k in string]: {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n \| { color?: string; theme?: never }\n \| { color?: never; theme: Record<'light' \| 'dark', string> }\n )\n}\n\ntype ChartContextProps = { config: ChartConfig }\n\nconst ChartContext = React.createContext<ChartContextProps \| null>(null)\n\nfunction useChart() {\n const ctx = React.useContext(ChartContext)\n if (!ctx) throw new Error('useChart 必須在 <ChartContainer> 內使用')\n return ctx\n}\n\n// ── ChartContainer ─────────────────────────────────────────────────────────\n\ninterface ChartContainerProps extends React.ComponentProps<'div'> {\n config: ChartConfig\n children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children']\n}\n\nconst ChartContainer = React.forwardRef<HTMLDivElement, ChartContainerProps>(\n ({ id, className, children, config, ...props }, ref) => {\n const uniqueId = React.useId()\n const chartId = `chart-${id \|\| uniqueId.replace(/:/g, '')}`\n // Memoize provider value(2026-04-22 D3 perf audit):避免 render 重建 wrapper object\n const ctxValue = React.useMemo(() => ({ config }), [config])\n\n return (\n <ChartContext.Provider value={ctxValue}>\n <div\n ref={ref}\n // 2026-07-14 audit Dim 9(passthrough 完整度):id 原被 destructure 只拿去組 data-chart,\n // native id attr 靜默吞掉 —— consumer 傳 id 期待 DOM id(anchor / aria 參照)必須落地。\n id={id}\n data-chart={chartId}\n className={cn(\n // 整體視覺套用本 DS typography + token\n // 預設 aspect-video(16:9)— Recharts ResponsiveContainer 需 parent 有高度。\n // Consumer 若需其他比例,包 <AspectRatio ratio={n}> 覆寫(AspectRatio 的 padding-bottom 高度會蓋過此 class)。\n 'flex aspect-video justify-center text-caption',\n // recharts 內部預設樣式覆寫:grid / axis / tooltip shadow 等\n \"[&_.recharts-cartesian-grid_line]:stroke-divider\",\n \"[&_.recharts-cartesian-axis-tick_text]:fill-fg-muted\",\n \"[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-divider\",\n \"[&_.recharts-reference-line_[stroke='#ccc']]:stroke-divider\",\n \"[&_.recharts-dot[stroke='#fff']]:stroke-transparent\",\n \"[&_.recharts-layer]:outline-none\",\n \"[&_.recharts-sector[stroke='#fff']]:stroke-transparent\",\n \"[&_.recharts-sector]:outline-none\",\n \"[&_.recharts-surface]:outline-none\",\n className,\n )}\n {...props}\n >\n <ChartStyle id={chartId} config={config} />\n <RechartsPrimitive.ResponsiveContainer>\n {children}\n </RechartsPrimitive.ResponsiveContainer>\n </div>\n </ChartContext.Provider>\n )\n },\n)\nChartContainer.displayName = 'ChartContainer'\n\n// ── ChartStyle ──────────────────────────────────────────────────────────────\n// 將 config 內每個 key 的 color 注入 scoped CSS variable(`--color-{key}`),\n// 供 Recharts `fill={`var(--color-${key})`}` 直接消費。\n\nconst THEMES = { light: '', dark: '[data-theme=dark] ' } as const\n\nfunction ChartStyle({ id, config }: { id: string; config: ChartConfig }) {\n const entries = Object.entries(config).filter(([, v]) => 'color' in v \|\| 'theme' in v)\n if (entries.length === 0) return null\n\n return (\n <style\n dangerouslySetInnerHTML={{\n __html: Object.entries(THEMES)\n .map(([theme, prefix]) => {\n const vars = entries\n .map(([key, item]) => {\n const color =\n 'theme' in item ? item.theme?.[theme as keyof typeof item.theme] : item.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .filter(Boolean)\n .join('\\n')\n return `${prefix}[data-chart=${id}] {\\n${vars}\\n}`\n })\n .join('\\n'),\n }}\n />\n )\n}\n\n// ── ChartTooltip / ChartTooltipContent ─────────────────────────────────────\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\ntype RechartsTooltipPayloadItem = {\n value?: string \| number\n name?: string \| number\n dataKey?: string \| number\n color?: string\n payload?: unknown\n [key: string]: unknown\n}\n\ninterface ChartTooltipContentProps extends Omit<React.ComponentProps<'div'>, 'color'> {\n active?: boolean\n payload?: RechartsTooltipPayloadItem[]\n label?: unknown\n labelFormatter?: (value: unknown, payload: RechartsTooltipPayloadItem[]) => React.ReactNode\n labelClassName?: string\n formatter?: (\n value: unknown,\n name: unknown,\n item: RechartsTooltipPayloadItem,\n index: number,\n payload: unknown,\n ) => React.ReactNode\n color?: string\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: 'line' \| 'dot' \| 'dashed'\n nameKey?: string\n labelKey?: string\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst ChartTooltipContent = React.forwardRef<HTMLDivElement, ChartTooltipContentProps>(\n (\n {\n active,\n payload,\n className,\n indicator = 'dot',\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n },\n ref,\n ) => {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel \|\| !payload?.length) return null\n const [item] = payload\n const key = `${labelKey \|\| item.dataKey \|\| item.name \|\| 'value'}`\n const itemConfig = getPayloadConfig(config, item, key)\n const value =\n !labelKey && typeof label === 'string'\n ? config[label as keyof typeof config]?.label \|\| label\n : itemConfig?.label\n if (labelFormatter) return <div className={cn('font-medium', labelClassName)}>{labelFormatter(value, payload)}</div>\n if (!value) return null\n return <div className={cn('font-medium', labelClassName)}>{value}</div>\n }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey])\n\n if (!active \|\| !payload?.length) return null\n\n const nestLabel = payload.length === 1 && indicator !== 'dot'\n\n return (\n <div\n ref={ref}\n // 2026-05-31 #5:自訂 tooltip 補 role=status + aria-live,保留 Recharts 原生 SR 朗讀(spec L146 宣稱鍵盤可達+讀屏)\n role=\"status\"\n aria-live=\"polite\"\n className={cn(\n 'grid min-w-32 items-start gap-1.5 rounded-md border border-border bg-surface-raised px-2.5 py-1.5 text-caption shadow-[var(--elevation-200)]',\n className,\n )}\n >\n {!nestLabel ? tooltipLabel : null}\n <div className=\"grid gap-1.5\">\n {payload.map((item, index) => {\n const key = `${nameKey \|\| item.name \|\| item.dataKey \|\| 'value'}`\n const itemConfig = getPayloadConfig(config, item, key)\n const indicatorColor = color \|\| (item.payload as { fill?: string })?.fill \|\| item.color\n\n return (\n <div\n key={item.dataKey \|\| index}\n className={cn(\n 'flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-fg-muted',\n indicator === 'dot' && 'items-center',\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n <itemConfig.icon />\n ) : (\n !hideIndicator && (\n <div\n className={cn('shrink-0 rounded-xs border-(--color-border) bg-(--color-bg)', {\n 'h-2.5 w-2.5': indicator === 'dot',\n 'w-1': indicator === 'line',\n 'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',\n 'my-0.5': nestLabel && indicator === 'dashed',\n })}\n style={\n {\n '--color-bg': indicatorColor,\n '--color-border': indicatorColor,\n } as React.CSSProperties\n }\n />\n )\n )}\n <div\n className={cn(\n 'flex flex-1 justify-between leading-none',\n nestLabel ? 'items-end' : 'items-center',\n )}\n >\n <div className=\"grid gap-1.5\">\n {nestLabel ? tooltipLabel : null}\n <span className=\"text-fg-secondary\">{itemConfig?.label \|\| item.name}</span>\n </div>\n {/ 2026-07-04 修:falsy check 會讓合法資料值 0 不渲染(shadcn 上游同病)→ null check */}\n {item.value != null && (\n <span className=\"text-foreground font-mono font-medium tabular-nums\">\n {item.value.toLocaleString()}\n </span>\n )}\n </div>\n </>\n )}\n </div>\n )\n })}\n </div>\n </div>\n )\n },\n)\nChartTooltipContent.displayName = 'ChartTooltipContent'\n\n// ── ChartLegend / ChartLegendContent ───────────────────────────────────────\n\nconst ChartLegend = RechartsPrimitive.Legend\n\ntype RechartsLegendPayloadItem = {\n value?: unknown\n dataKey?: string \| number\n color?: string\n payload?: unknown\n [key: string]: unknown\n}\n\ninterface ChartLegendContentProps extends React.ComponentProps<'div'> {\n payload?: RechartsLegendPayloadItem[]\n verticalAlign?: 'top' \| 'middle' \| 'bottom'\n hideIcon?: boolean\n nameKey?: string\n}\n\nconst ChartLegendContent = React.forwardRef<HTMLDivElement, ChartLegendContentProps>(\n ({ className, hideIcon = false, payload, verticalAlign = 'bottom', nameKey }, ref) => {\n const { config } = useChart()\n if (!payload?.length) return null\n\n return (\n <div\n ref={ref}\n className={cn(\n 'flex items-center justify-center gap-4',\n verticalAlign === 'top' ? 'pb-3' : 'pt-3',\n className,\n )}\n >\n {payload.map((item) => {\n const key = `${nameKey \|\| item.dataKey \|\| 'value'}`\n const itemConfig = getPayloadConfig(config, item, key)\n return (\n <div\n key={String(item.value)}\n className=\"flex items-center gap-1.5 text-fg-secondary [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-fg-muted\"\n >\n {itemConfig?.icon && !hideIcon ? (\n <itemConfig.icon />\n ) : (\n <div className=\"h-2 w-2 shrink-0 rounded-xs\" style={{ backgroundColor: item.color }} />\n )}\n {itemConfig?.label}\n </div>\n )\n })}\n </div>\n )\n },\n)\nChartLegendContent.displayName = 'ChartLegendContent'\n\n// ── helpers ────────────────────────────────────────────────────────────────\n\nfunction getPayloadConfig(\n config: ChartConfig,\n payload: unknown,\n key: string,\n) {\n if (typeof payload !== 'object' \|\| payload === null) return undefined\n const payloadPayload =\n 'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null\n ? payload.payload\n : undefined\n let configLabelKey: string = key\n if (key in (payload as Record<string, unknown>) && typeof (payload as Record<string, unknown>)[key] === 'string') {\n configLabelKey = (payload as Record<string, string>)[key]\n } else if (payloadPayload && key in payloadPayload && typeof (payloadPayload as Record<string, unknown>)[key] === 'string') {\n configLabelKey = (payloadPayload as Record<string, string>)[key]\n }\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const chartMeta = {\n component: 'Chart',\n family: null, // non-family composite / overlay / layout\n variants: {\n\n },\n sizes: {\n\n },\n states: ['default'],\n tokens: {\n bg: ['bg-surface-raised', 'bg-transparent'],\n fg: ['text-fg-muted', 'text-fg-secondary', 'text-foreground'],\n ring: [],\n },\n} as const\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n"],"names":[],"mappings":"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"}

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

@@ -36,7 +36,7 @@ export interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof Che
     /**
      * Field mode(2026-05-05 Phase B3 align):
      *   edit     — 一般可互動 checkbox(預設)
-     *   display  — **純展示**:渲染 ✓ / —(無互動 primitive、無 input chrome);
+     *   display  — **純展示**:渲染 Check / X icon(true=勾 / false=叉,無互動 primitive、無 input chrome);
      *              對齊 Carbon read-only / DataTable boolean cell 場景。取代既有 BooleanDisplay。
      *   readonly — 同 readOnly prop:checkbox 視覺保留 + 鎖互動 + a11y readonly signal
      *   disabled — 同 disabled prop:降色 + 鎖互動

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

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAA;AAE7D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;~~AAI3F~~,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAA;AAM1E,QAAA,MAAM,gBAAgB;;8EA8BrB,CAAA;AAiCD,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,EACnE,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,uHAAuH;IACvH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,iDAAiD;IACjD,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAID,QAAA,MAAM,QAAQ,~~yFA8Kb~~,CAAA;AAKD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoBf,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}
1	+ {"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAA;AAE7D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAK3F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAA;AAM1E,QAAA,MAAM,gBAAgB;;8EA8BrB,CAAA;AAiCD,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,EACnE,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,uHAAuH;IACvH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,iDAAiD;IACjD,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAID,QAAA,MAAM,QAAQ,yFAkLb,CAAA;AAKD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoBf,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}

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

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Minus, Check } from "lucide-react";
@@ -7,6 +7,7 @@ import { cn } from "../../lib/utils.js";
 import { useFieldContext, useResolvedFieldDisabled, useResolvedFieldMode, useResolvedFieldSize } from "../Field/field-context.js";
 import { fieldWrapperStyles } from "../Field/field-wrapper.js";
 import { SelectionItem } from "../SelectionControl/selection-item.js";
+import { BooleanValueIcon } from "../SelectionControl/boolean-value.js";
 import { CheckboxGroupContext } from "./checkbox-group.js";
 const checkboxVariants = cva(
   [
@@ -87,7 +88,7 @@ const Checkbox = React.forwardRef(
     } = props;
     if (resolvedMode === "display") {
       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: "—" });
+      return /* @__PURE__ */ jsx("span", { ...restDomProps, ref, className: "inline-flex", children: /* @__PURE__ */ jsx(BooleanValueIcon, { checked: isChecked, size: resolvedBoxSize }) });
     }
     if (effectiveReadOnly && insideField && effectiveLabel == null) {
       const isChecked = (checkedProp ?? defaultCheckedProp) === true;
@@ -109,7 +110,7 @@ const Checkbox = React.forwardRef(
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
             className
           ),
-          children: isChecked ? /* @__PURE__ */ jsx("span", { className: "text-foreground", children: "✓" }) : /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: "—" })
+          children: /* @__PURE__ */ jsx(BooleanValueIcon, { checked: isChecked, size: boxSize })
         }
       );
     }
@@ -133,7 +134,10 @@ const Checkbox = React.forwardRef(
           }
           (_a = props.onClick) == null ? void 0 : _a.call(props, event);
         },
-        children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "grid place-content-center text-current", children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { style: { width: iconPx, height: iconPx }, strokeWidth: iconStrokeWidth }) : /* @__PURE__ */ jsx(Check, { style: { width: iconPx, height: iconPx }, strokeWidth: iconStrokeWidth }) })
+        children: /* @__PURE__ */ jsxs(CheckboxPrimitive.Indicator, { className: "group/indicator grid place-content-center text-current", children: [
+          /* @__PURE__ */ jsx(Minus, { className: "hidden group-data-[state=indeterminate]/indicator:block", style: { width: iconPx, height: iconPx }, strokeWidth: iconStrokeWidth }),
+          /* @__PURE__ */ jsx(Check, { className: "hidden group-data-[state=checked]/indicator:block", style: { width: iconPx, height: iconPx }, strokeWidth: iconStrokeWidth })
+        ] })
       }
     );
     if (effectiveLabel == null) return rootEl;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.js","sources":["../../../src/components/Checkbox/checkbox.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { Check, Minus } from \"lucide-react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport type { FieldMode, FieldVariant } from \"@/design-system/components/Field/field-types\"\nimport { useFieldContext, useResolvedFieldDisabled, useResolvedFieldMode, useResolvedFieldSize } from \"@/design-system/components/Field/field-context\"\nimport { fieldWrapperStyles } from \"@/design-system/components/Field/field-wrapper\"\nimport { SelectionItem } from \"@/design-system/components/SelectionControl/selection-item\"\nimport type { LucideIcon } from \"lucide-react\"\nimport type { AvatarData } from \"@/design-system/components/Avatar/avatar\"\nimport { CheckboxGroupContext } from \"./checkbox-group\"\n\n// ── Variants ────────────────────────────────────────────────────────────────\n// 三種尺寸（sm/md=16px, lg=20px），對齊 icon 系統與 SelectionItem。\n\nconst checkboxVariants = cva(\n [\n 'grid place-content-center shrink-0 rounded-md',\n 'border border-border bg-surface',\n 'transition-colors duration-150',\n 'hover:border-border-hover',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\n 'data-[state=checked]:bg-primary data-[state=checked]:text-on-emphasis data-[state=checked]:border-primary',\n 'data-[state=checked]:hover:bg-primary-hover data-[state=checked]:hover:border-primary-hover',\n 'data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-on-emphasis data-[state=indeterminate]:border-primary',\n 'data-[state=indeterminate]:hover:bg-primary-hover data-[state=indeterminate]:hover:border-primary-hover',\n 'disabled:cursor-not-allowed disabled:bg-disabled disabled:border-transparent disabled:hover:border-transparent',\n 'disabled:data-[state=checked]:bg-disabled disabled:data-[state=checked]:text-fg-disabled disabled:data-[state=checked]:border-transparent',\n 'disabled:data-[state=indeterminate]:bg-disabled disabled:data-[state=indeterminate]:text-fg-disabled disabled:data-[state=indeterminate]:border-transparent',\n // readOnly：鎖定互動但維持 checked/unchecked 視覺\n 'data-[readonly=true]:pointer-events-none data-[readonly=true]:cursor-default',\n 'data-[readonly=true]:hover:border-border',\n ],\n {\n variants: {\n size: {\n sm: 'h-4 w-4',\n md: 'h-4 w-4',\n lg: 'h-5 w-5',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n)\n\n// ── Check Icon Size ─────────────────────────────────────────────────────────\nconst checkIconSize: Record<string, number> = { sm: 12, md: 12, lg: 16 }\n\n// ── Check Icon Stroke Weight ────────────────────────────────────────────────\n// 16px 以下 icon 視覺不夠顯眼 → 用較粗 stroke 補償。Lucide 預設 strokeWidth=2 在\n// 12px 下 render 約 1px 線寬,視覺偏細;加粗到 3.5(render ≈ 1.75px)才有足夠視覺權重。\n// 16px 用 2.5(render ≈ 1.67px)讓 checked 態的 check icon 夠顯眼。\n//\n// 為什麼不是 3 / 2:本 session 實測 3 / 2 在 storybook 上兩個 size 的 render 線寬差僅\n// 0.17px(1.5 vs 1.33),使用者肉眼看不出差異(image #64 回報)。改為 3.5 / 2.5:\n// - md 12px × 3.5 → 1.75px 線寬\n// - lg 16px × 2.5 → 1.67px 線寬\n// 兩者仍接近但 md 的線寬絕對值跟 16px 預設(1.33)有更明顯差異,視覺上「小 check 更粗」。\n//\n// 世界級對照:iOS HIG / Material 3 / Polaris 的 checkmark 在 <16px 下皆加粗 compensate。\n// 為什麼不用 Lucide absoluteStrokeWidth:那保持「絕對 px 粗細」,我們反而要「小尺寸比例更粗」。\n//\n// Check 與 Minus(indeterminate)共用此規則;Switch 的 SPECS.checkStroke 採同樣值。\n// 2026-05-18 簡化 per user 視覺證「sm/md 3.5 vs lg 2.5 看不出差別」(image #64 + 2nd round\n// 圖一 video proof)+「做完」approval:\n// - 原 {3.5, 3.5, 2.5} → effective render thickness 1.75 / 1.75 / 1.67 = 跨 size 差 0.08px(視覺看不出)\n// - 改 {3, 3, 2.5} 保留 sm/md 小尺寸 legibility insurance(per iOS HIG / Material 3 cite)\n// + lg 仍稍粗於 Lucide default 2(保留 compensation 主旨,但不過度差異化)\n// ⚠️ 2026-06-12:發現 base.css `.lucide{stroke-width:1.75}` 全域規則自 2026-04-08 起\n// 無條件蓋掉本 prop(CSS class > SVG attribute)→ 本表從未真渲染過,上述 05-18 視覺\n// 測試兩者實為 0.875px(證據污染)。base.css 已改 `[stroke-width='2']` 限定,本表自此\n// 真實生效(pixel 驗證 1.50px)。SSOT → .claude/references/ui-dev-rules.md「小尺寸 icon stroke 補償」\nconst checkStrokeWidth: Record<string, number> = { sm: 3, md: 3, lg: 2.5 }\n\n// ── Types ───────────────────────────────────────────────────────────────────\n\nexport interface CheckboxProps\n extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,\n VariantProps<typeof checkboxVariants> {\n /*\n Inline label。提供時 Checkbox 自動透過 SelectionItem 包裝，\n * 套用 text-body / text-foreground / disabled 色的 codified 樣式。\n * 在 <Field> context 內且不在 CheckboxGroup 內時，此 prop 會被忽略（由 FieldLabel 接管）；\n * CheckboxGroup 內每個 checkbox 的 label 是它自己的選項名，必保留\n * （同檔 shouldSuppressLabel = insideField && !insideGroup，AR50 anchor）。\n /\n label?: React.ReactNode\n /\n Inline description（secondary 文字）。須與 label 搭配使用。\n * 套用 text-body / text-fg-secondary 樣式。\n * 在 <Field> context 內且不在 CheckboxGroup 內時，此 prop 會被忽略（由 FieldDescription 接管）；\n * CheckboxGroup 內的 description 屬各選項自有，必保留（同 label 的 group 例外）。\n /\n description?: React.ReactNode\n /* 可選左側 icon(label 前)— 2026-06-12 M30 修:轉發 SelectionItem 既有 canonical 槽(selection-item.tsx jsDoc 為 SSOT;與 avatar 互斥)/\n icon?: LucideIcon\n /* 可選左側 avatar(label 前)— 同上,SelectionItem 槽轉發 /\n avatar?: AvatarData\n /\n readonly 模式：鎖定互動但維持 checked/unchecked 視覺正確。\n * 與 disabled 的差異：readonly 不降色（可讀），disabled 降色（弱化）。\n * 用於表單 readonly 呈現、DataTable cell 非編輯態。\n /\n readOnly?: boolean\n /\n Field mode(2026-05-05 Phase B3 align):\n * edit — 一般可互動 checkbox(預設)\n * display — 純展示:渲染 ✓ / —(無互動 primitive、無 input chrome);\n * 對齊 Carbon read-only / DataTable boolean cell 場景。取代既有 BooleanDisplay。\n * readonly — 同 readOnly prop:checkbox 視覺保留 + 鎖互動 + a11y readonly signal\n * disabled — 同 disabled prop:降色 + 鎖互動\n /\n mode?: FieldMode\n /\n Visual chrome — checkbox 本體無 input wrapper variant,本 prop 對 checkbox 主體無視覺影響;\n * 為對齊 Field 4-mode + chrome 透傳契約而保留(M19 一致性)。\n /\n variant?: FieldVariant\n}\n\n// ── Component ───────────────────────────────────────────────────────────────\n\nconst Checkbox = React.forwardRef<\n React.ElementRef<typeof CheckboxPrimitive.Root>,\n CheckboxProps\n>(\n (\n {\n className,\n size,\n label,\n icon,\n avatar,\n description,\n readOnly = false,\n disabled,\n mode,\n // chrome 對 Checkbox 主體無視覺影響(無 input wrapper)— 接收純為 prop 一致性;destructure 防 leak 到 DOM。\n variant: _chrome,\n id: idProp,\n ...props\n },\n ref\n ) => {\n const sizeKey = size ?? 'md'\n const iconPx = checkIconSize[sizeKey]\n const iconStrokeWidth = checkStrokeWidth[sizeKey]\n\n // Field context:Checkbox 單獨塞進 Field(binary toggle)時,忽略自己的 label 讓 FieldLabel 接管\n // 2026-05-31 #35:hooks(useFieldContext / useContext / useId)必在任何 conditional return 前呼叫(Rules of Hooks)。\n // 原 mode='display' early return 寫在 hooks 之上 → runtime 切 mode 會 hook count 不一致 crash;已下移至 hooks 後。\n //\n // 例外:Checkbox 是 CheckboxGroup 的 child 時(multi-select 情境),每個 checkbox\n // 的 label 是它自己的選項名,FieldLabel 只是群組名稱 — 此時 label 必須保留,\n // 不能被 Field context 吞掉。AR50 的根因就是這個 branch 之前誤把 group 內的 checkbox\n // label 全清空,導致 sheet 內 3 個 checkbox 沒 label。\n const fieldCtx = useFieldContext()\n const checkboxGroupCtx = React.useContext(CheckboxGroupContext)\n const insideField = fieldCtx?.hasFieldWrapper === true\n const insideGroup = checkboxGroupCtx?.inGroup === true\n const shouldSuppressLabel = insideField && !insideGroup\n const effectiveLabel = shouldSuppressLabel ? undefined : label\n const effectiveDescription = shouldSuppressLabel ? undefined : description\n\n // Id 連結\n //\n // ── 2026-04-21 bug fix ──\n // 原本:`idProp ?? fieldCtx?.id ?? generatedId`。\n // 在 Field 內 fieldCtx.id 存在,CheckboxGroup 所有 children 共用同一個 id →\n // 每個 checkbox 的 `<label htmlFor={sameId}>` 全指向第一個 checkbox →\n // 點任何 label 都只開關第一個 checkbox(real bug)。\n //\n // 修法:group 內的 checkbox 強制用 generatedId(唯一),不沿用 Field id;\n // solo in Field(binary toggle)才沿用 fieldCtx.id 讓 FieldLabel htmlFor 生效。\n const generatedId = React.useId()\n const inputId = idProp ?? (insideGroup ? generatedId : (fieldCtx?.id ?? generatedId))\n\n // 2026-06-08 SSOT cascade:disabled + mode 經 resolver hook(原 raw prop → <Field disabled>/<Field mode=\"display\"> 漏 cascade)\n const resolvedDisabled = useResolvedFieldDisabled(disabled)\n const resolvedMode = useResolvedFieldMode({ mode, disabled, readOnly })\n const effectiveReadOnly = readOnly \|\| resolvedMode === 'readonly'\n // mode='disabled'(如 DataTable disabled cell 直傳)必須落到真 disabled chrome —\n // 2026-06-12 修:原本只看 resolvedDisabled(prop/fieldCtx),mode='disabled' 無人消費\n // → disabled boolean cell 渲出可 focus 的正常外觀 checkbox(違 field-controls.spec L286)\n const effectiveDisabled = resolvedDisabled \|\| 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\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 轉發(與 Switch/\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 // 純展示模式:無互動 primitive、渲染 ✓ / —(checked=true → ✓ / 其他 → —)。取代 BooleanDisplay。\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 拍板「灰框 + ✓/—」)─────────────\n // Field 內 readonly boolean = readonly 灰框 chrome + display 同款值語言 ✓/—。\n // 灰框消費 fieldWrapperStyles 同一 cva = 與 Input readonly 字面同源(SSOT,改一處全動)。\n // 理由:同一張 readonly 表單裡文字控件有 bg-readonly 灰框鎖定訊號,boolean 保留全彩\n // 控件會誤導「仍可操作」(世界級 0/4 用原樣鎖互動:Salesforce=✓ 靜態 glyph /\n // SAP=靜態文字 / Atlassian=readView / Ant Pro=文字)。\n // Scope:僅 Field 內且無 inline label(FieldLabel 接管 label 的表單欄位場景);\n // standalone readOnly(settings list / SelectionItem row)維持原樣鎖互動不變。\n if (effectiveReadOnly && insideField && effectiveLabel == null) {\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=\"checkbox\"\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 <CheckboxPrimitive.Root\n id={inputId}\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 className={cn(checkboxVariants({ size }), className)}\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 覆蓋(readOnly 時 consumer onClick 一併鎖,\n // 與 pointer-events-none 擋直接點擊的行為一致)。\n onClick={(event) => {\n if (effectiveReadOnly) {\n event.preventDefault()\n return\n }\n props.onClick?.(event)\n }}\n >\n <CheckboxPrimitive.Indicator className=\"grid place-content-center text-current\">\n {props.checked === 'indeterminate'\n ? <Minus style={{ width: iconPx, height: iconPx }} strokeWidth={iconStrokeWidth} />\n : <Check style={{ width: iconPx, height: iconPx }} strokeWidth={iconStrokeWidth} />\n }\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n )\n\n // 無 label → 只渲染 checkbox 本體\n if (effectiveLabel == null) return rootEl\n\n // 有 label → 透過 SelectionItem 包裝（control 在左、label+description 在右）\n return (\n <SelectionItem\n control={rootEl}\n label={effectiveLabel}\n description={effectiveDescription}\n icon={icon}\n avatar={avatar}\n htmlFor={inputId}\n disabled={effectiveDisabled}\n size={sizeKey}\n />\n )\n }\n)\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const checkboxMeta = {\n component: 'Checkbox',\n family: null, // self-contained primitive(對齊 spec frontmatter self-contained + body L31;非 Family 4)\n variants: {\n\n },\n sizes: {\n // 2026-06-10 修 stale meta:iconSize 對齊 checkIconSize 真值(L49 sm/md=12, lg=16;deep-audit A.1b 抓 metadata drift)\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 // 'checked' = 勾選持續態(bg-primary;2026-07-07 meta 詞彙統一補列,含 indeterminate 同族)\n states: ['default', 'hover', 'checked', 'focus-visible', 'disabled'],\n tokens: {\n bg: ['bg-disabled', 'bg-primary', 'bg-primary-hover', 'bg-surface'],\n fg: ['text-fg-disabled', 'text-fg-secondary', 'text-foreground'],\n ring: ['ring-ring'],\n },\n defaultSize: 'md',\n} as const\n\nexport { Checkbox, checkboxVariants }\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"checkbox.js","sources":["../../../src/components/Checkbox/checkbox.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { Check, Minus } from \"lucide-react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport type { FieldMode, FieldVariant } from \"@/design-system/components/Field/field-types\"\nimport { useFieldContext, useResolvedFieldDisabled, useResolvedFieldMode, useResolvedFieldSize } from \"@/design-system/components/Field/field-context\"\nimport { fieldWrapperStyles } from \"@/design-system/components/Field/field-wrapper\"\nimport { SelectionItem } from \"@/design-system/components/SelectionControl/selection-item\"\nimport { BooleanValueIcon } from \"@/design-system/components/SelectionControl/boolean-value\"\nimport type { LucideIcon } from \"lucide-react\"\nimport type { AvatarData } from \"@/design-system/components/Avatar/avatar\"\nimport { CheckboxGroupContext } from \"./checkbox-group\"\n\n// ── Variants ────────────────────────────────────────────────────────────────\n// 三種尺寸（sm/md=16px, lg=20px），對齊 icon 系統與 SelectionItem。\n\nconst checkboxVariants = cva(\n [\n 'grid place-content-center shrink-0 rounded-md',\n 'border border-border bg-surface',\n 'transition-colors duration-150',\n 'hover:border-border-hover',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\n 'data-[state=checked]:bg-primary data-[state=checked]:text-on-emphasis data-[state=checked]:border-primary',\n 'data-[state=checked]:hover:bg-primary-hover data-[state=checked]:hover:border-primary-hover',\n 'data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-on-emphasis data-[state=indeterminate]:border-primary',\n 'data-[state=indeterminate]:hover:bg-primary-hover data-[state=indeterminate]:hover:border-primary-hover',\n 'disabled:cursor-not-allowed disabled:bg-disabled disabled:border-transparent disabled:hover:border-transparent',\n 'disabled:data-[state=checked]:bg-disabled disabled:data-[state=checked]:text-fg-disabled disabled:data-[state=checked]:border-transparent',\n 'disabled:data-[state=indeterminate]:bg-disabled disabled:data-[state=indeterminate]:text-fg-disabled disabled:data-[state=indeterminate]:border-transparent',\n // readOnly：鎖定互動但維持 checked/unchecked 視覺\n 'data-[readonly=true]:pointer-events-none data-[readonly=true]:cursor-default',\n 'data-[readonly=true]:hover:border-border',\n ],\n {\n variants: {\n size: {\n sm: 'h-4 w-4',\n md: 'h-4 w-4',\n lg: 'h-5 w-5',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n }\n)\n\n// ── Check Icon Size ─────────────────────────────────────────────────────────\nconst checkIconSize: Record<string, number> = { sm: 12, md: 12, lg: 16 }\n\n// ── Check Icon Stroke Weight ────────────────────────────────────────────────\n// 16px 以下 icon 視覺不夠顯眼 → 用較粗 stroke 補償。Lucide 預設 strokeWidth=2 在\n// 12px 下 render 約 1px 線寬,視覺偏細;加粗到 3.5(render ≈ 1.75px)才有足夠視覺權重。\n// 16px 用 2.5(render ≈ 1.67px)讓 checked 態的 check icon 夠顯眼。\n//\n// 為什麼不是 3 / 2:本 session 實測 3 / 2 在 storybook 上兩個 size 的 render 線寬差僅\n// 0.17px(1.5 vs 1.33),使用者肉眼看不出差異(image #64 回報)。改為 3.5 / 2.5:\n// - md 12px × 3.5 → 1.75px 線寬\n// - lg 16px × 2.5 → 1.67px 線寬\n// 兩者仍接近但 md 的線寬絕對值跟 16px 預設(1.33)有更明顯差異,視覺上「小 check 更粗」。\n//\n// 世界級對照:iOS HIG / Material 3 / Polaris 的 checkmark 在 <16px 下皆加粗 compensate。\n// 為什麼不用 Lucide absoluteStrokeWidth:那保持「絕對 px 粗細」,我們反而要「小尺寸比例更粗」。\n//\n// Check 與 Minus(indeterminate)共用此規則;Switch 的 SPECS.checkStroke 採同樣值。\n// 2026-05-18 簡化 per user 視覺證「sm/md 3.5 vs lg 2.5 看不出差別」(image #64 + 2nd round\n// 圖一 video proof)+「做完」approval:\n// - 原 {3.5, 3.5, 2.5} → effective render thickness 1.75 / 1.75 / 1.67 = 跨 size 差 0.08px(視覺看不出)\n// - 改 {3, 3, 2.5} 保留 sm/md 小尺寸 legibility insurance(per iOS HIG / Material 3 cite)\n// + lg 仍稍粗於 Lucide default 2(保留 compensation 主旨,但不過度差異化)\n// ⚠️ 2026-06-12:發現 base.css `.lucide{stroke-width:1.75}` 全域規則自 2026-04-08 起\n// 無條件蓋掉本 prop(CSS class > SVG attribute)→ 本表從未真渲染過,上述 05-18 視覺\n// 測試兩者實為 0.875px(證據污染)。base.css 已改 `[stroke-width='2']` 限定,本表自此\n// 真實生效(pixel 驗證 1.50px)。SSOT → .claude/references/ui-dev-rules.md「小尺寸 icon stroke 補償」\nconst checkStrokeWidth: Record<string, number> = { sm: 3, md: 3, lg: 2.5 }\n\n// ── Types ───────────────────────────────────────────────────────────────────\n\nexport interface CheckboxProps\n extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,\n VariantProps<typeof checkboxVariants> {\n /*\n Inline label。提供時 Checkbox 自動透過 SelectionItem 包裝，\n * 套用 text-body / text-foreground / disabled 色的 codified 樣式。\n * 在 <Field> context 內且不在 CheckboxGroup 內時，此 prop 會被忽略（由 FieldLabel 接管）；\n * CheckboxGroup 內每個 checkbox 的 label 是它自己的選項名，必保留\n * （同檔 shouldSuppressLabel = insideField && !insideGroup，AR50 anchor）。\n /\n label?: React.ReactNode\n /\n Inline description（secondary 文字）。須與 label 搭配使用。\n * 套用 text-body / text-fg-secondary 樣式。\n * 在 <Field> context 內且不在 CheckboxGroup 內時，此 prop 會被忽略（由 FieldDescription 接管）；\n * CheckboxGroup 內的 description 屬各選項自有，必保留（同 label 的 group 例外）。\n /\n description?: React.ReactNode\n /* 可選左側 icon(label 前)— 2026-06-12 M30 修:轉發 SelectionItem 既有 canonical 槽(selection-item.tsx jsDoc 為 SSOT;與 avatar 互斥)/\n icon?: LucideIcon\n /* 可選左側 avatar(label 前)— 同上,SelectionItem 槽轉發 /\n avatar?: AvatarData\n /\n readonly 模式：鎖定互動但維持 checked/unchecked 視覺正確。\n * 與 disabled 的差異：readonly 不降色（可讀），disabled 降色（弱化）。\n * 用於表單 readonly 呈現、DataTable cell 非編輯態。\n /\n readOnly?: boolean\n /\n Field mode(2026-05-05 Phase B3 align):\n * edit — 一般可互動 checkbox(預設)\n * display — 純展示:渲染 Check / X icon(true=勾 / false=叉,無互動 primitive、無 input chrome);\n * 對齊 Carbon read-only / DataTable boolean cell 場景。取代既有 BooleanDisplay。\n * readonly — 同 readOnly prop:checkbox 視覺保留 + 鎖互動 + a11y readonly signal\n * disabled — 同 disabled prop:降色 + 鎖互動\n /\n mode?: FieldMode\n /\n Visual chrome — checkbox 本體無 input wrapper variant,本 prop 對 checkbox 主體無視覺影響;\n * 為對齊 Field 4-mode + chrome 透傳契約而保留(M19 一致性)。\n /\n variant?: FieldVariant\n}\n\n// ── Component ───────────────────────────────────────────────────────────────\n\nconst Checkbox = React.forwardRef<\n React.ElementRef<typeof CheckboxPrimitive.Root>,\n CheckboxProps\n>(\n (\n {\n className,\n size,\n label,\n icon,\n avatar,\n description,\n readOnly = false,\n disabled,\n mode,\n // chrome 對 Checkbox 主體無視覺影響(無 input wrapper)— 接收純為 prop 一致性;destructure 防 leak 到 DOM。\n variant: _chrome,\n id: idProp,\n ...props\n },\n ref\n ) => {\n const sizeKey = size ?? 'md'\n const iconPx = checkIconSize[sizeKey]\n const iconStrokeWidth = checkStrokeWidth[sizeKey]\n\n // Field context:Checkbox 單獨塞進 Field(binary toggle)時,忽略自己的 label 讓 FieldLabel 接管\n // 2026-05-31 #35:hooks(useFieldContext / useContext / useId)必在任何 conditional return 前呼叫(Rules of Hooks)。\n // 原 mode='display' early return 寫在 hooks 之上 → runtime 切 mode 會 hook count 不一致 crash;已下移至 hooks 後。\n //\n // 例外:Checkbox 是 CheckboxGroup 的 child 時(multi-select 情境),每個 checkbox\n // 的 label 是它自己的選項名,FieldLabel 只是群組名稱 — 此時 label 必須保留,\n // 不能被 Field context 吞掉。AR50 的根因就是這個 branch 之前誤把 group 內的 checkbox\n // label 全清空,導致 sheet 內 3 個 checkbox 沒 label。\n const fieldCtx = useFieldContext()\n const checkboxGroupCtx = React.useContext(CheckboxGroupContext)\n const insideField = fieldCtx?.hasFieldWrapper === true\n const insideGroup = checkboxGroupCtx?.inGroup === true\n const shouldSuppressLabel = insideField && !insideGroup\n const effectiveLabel = shouldSuppressLabel ? undefined : label\n const effectiveDescription = shouldSuppressLabel ? undefined : description\n\n // Id 連結\n //\n // ── 2026-04-21 bug fix ──\n // 原本:`idProp ?? fieldCtx?.id ?? generatedId`。\n // 在 Field 內 fieldCtx.id 存在,CheckboxGroup 所有 children 共用同一個 id →\n // 每個 checkbox 的 `<label htmlFor={sameId}>` 全指向第一個 checkbox →\n // 點任何 label 都只開關第一個 checkbox(real bug)。\n //\n // 修法:group 內的 checkbox 強制用 generatedId(唯一),不沿用 Field id;\n // solo in Field(binary toggle)才沿用 fieldCtx.id 讓 FieldLabel htmlFor 生效。\n const generatedId = React.useId()\n const inputId = idProp ?? (insideGroup ? generatedId : (fieldCtx?.id ?? generatedId))\n\n // 2026-06-08 SSOT cascade:disabled + mode 經 resolver hook(原 raw prop → <Field disabled>/<Field mode=\"display\"> 漏 cascade)\n const resolvedDisabled = useResolvedFieldDisabled(disabled)\n const resolvedMode = useResolvedFieldMode({ mode, disabled, readOnly })\n const effectiveReadOnly = readOnly \|\| resolvedMode === 'readonly'\n // mode='disabled'(如 DataTable disabled cell 直傳)必須落到真 disabled chrome —\n // 2026-06-12 修:原本只看 resolvedDisabled(prop/fieldCtx),mode='disabled' 無人消費\n // → disabled boolean cell 渲出可 focus 的正常外觀 checkbox(違 field-controls.spec L286)\n const effectiveDisabled = resolvedDisabled \|\| 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\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 轉發(與 Switch/\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 // 純展示模式:無互動 primitive、渲染 Check / X icon(true=勾 / false=叉,中性 foreground 色)。\n // boolean 值展示符號 SSOT = SelectionControl/boolean-value.tsx(勾/叉 icon + 中性色 + M22 世界級對照)。取代 BooleanDisplay。\n if (resolvedMode === 'display') {\n const isChecked = checkedProp === true\n return (\n <span {...restDomProps} ref={ref as React.Ref<HTMLSpanElement>} className=\"inline-flex\">\n <BooleanValueIcon checked={isChecked} size={resolvedBoxSize} />\n </span>\n )\n }\n\n // ── mode='readonly' in Field(2026-06-12 拍板「灰框 + 勾/叉」;2026-07-09 ✓/— glyph → Check/X icon)─\n // Field 內 readonly boolean = readonly 灰框 chrome + display 同款值語言(勾/叉 icon)。\n // 灰框消費 fieldWrapperStyles 同一 cva = 與 Input readonly 字面同源(SSOT,改一處全動)。\n // 理由:同一張 readonly 表單裡文字控件有 bg-readonly 灰框鎖定訊號,boolean 保留全彩\n // 控件會誤導「仍可操作」(世界級 0/4 用原樣鎖互動:Salesforce=✓ 靜態 glyph /\n // SAP=靜態文字 / Atlassian=readView / Ant Pro=文字)。\n // Scope:僅 Field 內且無 inline label(FieldLabel 接管 label 的表單欄位場景);\n // standalone readOnly(settings list / SelectionItem row)維持原樣鎖互動不變。\n if (effectiveReadOnly && insideField && effectiveLabel == null) {\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=\"checkbox\"\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 <BooleanValueIcon checked={isChecked} size={boxSize} />\n </div>\n )\n }\n\n const rootEl = (\n <CheckboxPrimitive.Root\n id={inputId}\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 className={cn(checkboxVariants({ size }), className)}\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 覆蓋(readOnly 時 consumer onClick 一併鎖,\n // 與 pointer-events-none 擋直接點擊的行為一致)。\n onClick={(event) => {\n if (effectiveReadOnly) {\n event.preventDefault()\n return\n }\n props.onClick?.(event)\n }}\n >\n {/ 圖示切換走 Radix data-state(CSS),非 props.checked(JS)—— uncontrolled\n defaultChecked=\"indeterminate\" 時 props.checked=undefined,JS 判斷會錯渲 Check;\n data-state 涵蓋 controlled/uncontrolled 全部轉換(Radix 為 SSOT)。 */}\n <CheckboxPrimitive.Indicator className=\"group/indicator grid place-content-center text-current\">\n <Minus className=\"hidden group-data-[state=indeterminate]/indicator:block\" style={{ width: iconPx, height: iconPx }} strokeWidth={iconStrokeWidth} />\n <Check className=\"hidden group-data-[state=checked]/indicator:block\" style={{ width: iconPx, height: iconPx }} strokeWidth={iconStrokeWidth} />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n )\n\n // 無 label → 只渲染 checkbox 本體\n if (effectiveLabel == null) return rootEl\n\n // 有 label → 透過 SelectionItem 包裝（control 在左、label+description 在右）\n return (\n <SelectionItem\n control={rootEl}\n label={effectiveLabel}\n description={effectiveDescription}\n icon={icon}\n avatar={avatar}\n htmlFor={inputId}\n disabled={effectiveDisabled}\n size={sizeKey}\n />\n )\n }\n)\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const checkboxMeta = {\n component: 'Checkbox',\n family: null, // self-contained primitive(對齊 spec frontmatter self-contained + body L31;非 Family 4)\n variants: {\n\n },\n sizes: {\n // 2026-06-10 修 stale meta:iconSize 對齊 checkIconSize 真值(L49 sm/md=12, lg=16;deep-audit A.1b 抓 metadata drift)\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 // 'checked' = 勾選持續態(bg-primary;2026-07-07 meta 詞彙統一補列,含 indeterminate 同族)\n states: ['default', 'hover', 'checked', 'focus-visible', 'disabled'],\n tokens: {\n bg: ['bg-disabled', 'bg-primary', 'bg-primary-hover', 'bg-surface'],\n fg: ['text-fg-disabled', 'text-fg-secondary', 'text-foreground'],\n ring: ['ring-ring'],\n },\n defaultSize: 'md',\n} as const\n\nexport { Checkbox, checkboxVariants }\n"],"names":[],"mappings":"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"}