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

package/dist/components/Calendar/calendar.js

@@ -174,86 +174,97 @@ const Calendar = React.forwardRef(function Calendar2({
               const dayEvents = eventsOnDate(events, date).slice().sort((a, b) => Number(b.allDay ?? false) - Number(a.allDay ?? false));
               const visibleEvents = dayEvents.slice(0, MAX_TILES_PER_CELL);
               const overflowCount = dayEvents.length - visibleEvents.length;
-              return /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  role: "gridcell",
-                  "aria-label": `${format(date, "yyyy-MM-dd")},${dayEvents.length} 個事件`,
-                  onClick: () => onDateClick == null ? void 0 : onDateClick(date),
-                  className: cn(
-                    "flex flex-col gap-1 min-h-28 p-1.5 text-left",
-                    "border-r border-b border-divider last:border-r-0",
-                    "[&:nth-child(7n)]:border-r-0",
-                    "hover:bg-neutral-hover transition-colors",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                    !inMonth && "bg-muted"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx("div", { className: "flex items-start justify-end", children: isToday ? /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center min-w-6 h-6 px-2 rounded-full bg-info text-on-emphasis text-body font-medium", children: format(date, "d") }) : /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: cn(
-                          "text-body font-medium",
-                          !inMonth && "text-fg-disabled"
-                        ),
-                        children: format(date, "d")
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 min-h-0", children: [
-                      visibleEvents.map((event) => {
-                        const ec = event.color ?? "blue";
-                        const colorClass = event.allDay ? cn(EVENT_COLOR_CLASSES[ec], EVENT_ALLDAY_ACCENT[ec], "font-medium") : EVENT_COLOR_CLASSES[ec];
-                        if (renderEventTile) {
+              return (
+                // 2026-06-11 a11y(user 拍板 2c 修 code):cell 從 <button role="gridcell"> 改非互動容器 —
+                // W3C button 語義禁止互動後代,cell 內含 role="button" 事件 tile = nested-interactive 違規。
+                // 對齊 Google Calendar:gridcell = 容器,日期數字按鈕 = 日期級 keyboard 入口,tile 各自為 button。
+                // div onClick 保留滑鼠「點 cell 空白處等同點日期」便利(keyboard 走日期數字按鈕,功能等價)。
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    role: "gridcell",
+                    onClick: () => onDateClick == null ? void 0 : onDateClick(date),
+                    className: cn(
+                      "flex flex-col gap-1 min-h-28 p-1.5 text-left",
+                      "border-r border-b border-divider last:border-r-0",
+                      "[&:nth-child(7n)]:border-r-0",
+                      "hover:bg-neutral-hover transition-colors",
+                      !inMonth && "bg-muted"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("div", { className: "flex items-start justify-end", children: /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": `${format(date, "yyyy-MM-dd")},${dayEvents.length} 個事件`,
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            onDateClick == null ? void 0 : onDateClick(date);
+                          },
+                          className: cn(
+                            "inline-flex items-center justify-center min-w-6 h-6 rounded-full text-body font-medium",
+                            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                            isToday && "px-2 bg-info text-on-emphasis",
+                            !isToday && !inMonth && "text-fg-disabled"
+                          ),
+                          children: format(date, "d")
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 min-h-0", children: [
+                        visibleEvents.map((event) => {
+                          const ec = event.color ?? "blue";
+                          const colorClass = event.allDay ? cn(EVENT_COLOR_CLASSES[ec], EVENT_ALLDAY_ACCENT[ec], "font-medium") : EVENT_COLOR_CLASSES[ec];
+                          if (renderEventTile) {
+                            return /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                onClick: (e) => {
+                                  e.stopPropagation();
+                                  onEventClick == null ? void 0 : onEventClick(event);
+                                },
+                                children: renderEventTile(event)
+                              },
+                              event.id
+                            );
+                          }
                           return /* @__PURE__ */ jsx(
                             "div",
                             {
+                              role: "button",
+                              tabIndex: 0,
                               onClick: (e) => {
                                 e.stopPropagation();
                                 onEventClick == null ? void 0 : onEventClick(event);
                               },
-                              children: renderEventTile(event)
+                              onKeyDown: (e) => {
+                                if (e.key === "Enter" || e.key === " ") {
+                                  e.preventDefault();
+                                  onEventClick == null ? void 0 : onEventClick(event);
+                                }
+                              },
+                              "aria-label": `事件:${event.title}`,
+                              className: cn(
+                                "rounded-md px-1.5 py-0.5 text-caption truncate cursor-pointer transition-colors",
+                                // 2026-05-31 #22:事件 tile 是 focusable(tabIndex=0 role=button)但原無 focus ring
+                                // → WCAG 2.4.7 不合規。補 focus-visible ring 對齊日期格按鈕。
+                                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                                colorClass
+                              ),
+                              children: event.title
                             },
                             event.id
                           );
-                        }
-                        return /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            role: "button",
-                            tabIndex: 0,
-                            onClick: (e) => {
-                              e.stopPropagation();
-                              onEventClick == null ? void 0 : onEventClick(event);
-                            },
-                            onKeyDown: (e) => {
-                              if (e.key === "Enter" || e.key === " ") {
-                                e.preventDefault();
-                                onEventClick == null ? void 0 : onEventClick(event);
-                              }
-                            },
-                            "aria-label": `事件:${event.title}`,
-                            className: cn(
-                              "rounded-md px-1.5 py-0.5 text-caption truncate cursor-pointer transition-colors",
-                              // 2026-05-31 #22:事件 tile 是 focusable(tabIndex=0 role=button)但原無 focus ring
-                              // → WCAG 2.4.7 不合規。補 focus-visible ring 對齊日期格按鈕。
-                              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                              colorClass
-                            ),
-                            children: event.title
-                          },
-                          event.id
-                        );
-                      }),
-                      overflowCount > 0 && /* @__PURE__ */ jsxs("div", { className: "text-caption text-fg-muted px-1.5", children: [
-                        "+",
-                        overflowCount,
-                        " more"
+                        }),
+                        overflowCount > 0 && /* @__PURE__ */ jsxs("div", { className: "text-caption text-fg-muted px-1.5", children: [
+                          "+",
+                          overflowCount,
+                          " more"
+                        ] })
                       ] })
-                    ] })
-                  ]
-                },
-                date.toISOString()
+                    ]
+                  },
+                  date.toISOString()
+                )
               );
             }) }, rowIdx))
           }

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

@@ -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 見 `event-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}\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\nfunction eventsOnDate(events: CalendarEvent[], date: Date): CalendarEvent[] {\n  return events.filter((e) => {\n    const start = coerceDate(e.start)\n    const end = coerceDate(e.end)\n    // 日期落在 [start, end] 範圍內(日精度)\n    const d = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime()\n    const s = new Date(start.getFullYear(), start.getMonth(), start.getDate()).getTime()\n    const eEnd = new Date(end.getFullYear(), end.getMonth(), end.getDate()).getTime()\n    return d >= s && d <= eEnd\n  })\n}\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  ...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  const monthTitle = new Intl.DateTimeFormat(locale, {\n    year: 'numeric',\n    month: 'long',\n  }).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  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            新事件\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              const dayEvents = eventsOnDate(events, date).slice().sort((a, b) => Number(b.allDay ?? false) - Number(a.allDay ?? false))\n              const visibleEvents = dayEvents.slice(0, MAX_TILES_PER_CELL)\n              const overflowCount = dayEvents.length - visibleEvents.length\n\n              return (\n                <button\n                  key={date.toISOString()}\n                  type=\"button\"\n                  role=\"gridcell\"\n                  aria-label={`${format(date, 'yyyy-MM-dd')},${dayEvents.length} 個事件`}\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                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n                !inMonth && 'bg-muted',\n              )}\n            >\n              {/* Date number header */}\n              <div className=\"flex items-start justify-end\">\n                {isToday ? (\n                  <span className=\"inline-flex items-center justify-center min-w-6 h-6 px-2 rounded-full bg-info text-on-emphasis text-body font-medium\">\n                    {format(date, 'd')}\n                  </span>\n                ) : (\n                  <span\n                    className={cn(\n                      'text-body font-medium',\n                      !inMonth && 'text-fg-disabled',\n                    )}\n                  >\n                    {format(date, 'd')}\n                  </span>\n                )}\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            </button>\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  states: ['default', 'hover', 'active', '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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"}
+{"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}\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\nfunction eventsOnDate(events: CalendarEvent[], date: Date): CalendarEvent[] {\n  return events.filter((e) => {\n    const start = coerceDate(e.start)\n    const end = coerceDate(e.end)\n    // 日期落在 [start, end] 範圍內(日精度)\n    const d = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime()\n    const s = new Date(start.getFullYear(), start.getMonth(), start.getDate()).getTime()\n    const eEnd = new Date(end.getFullYear(), end.getMonth(), end.getDate()).getTime()\n    return d >= s && d <= eEnd\n  })\n}\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  ...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  const monthTitle = new Intl.DateTimeFormat(locale, {\n    year: 'numeric',\n    month: 'long',\n  }).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  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            新事件\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              const dayEvents = eventsOnDate(events, date).slice().sort((a, b) => Number(b.allDay ?? false) - Number(a.allDay ?? false))\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  states: ['default', 'hover', 'active', '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

@@ -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;AAGD,QAAA,MAAM,YAAY,sFA4BjB,CAAA;AAKD,QAAA,MAAM,YAAY,6GAsChB,CAAA;AAKF,eAAO,MAAM,YAAY;;;;;;;;;;;CAef,CAAA;AAEV,OAAO,EACL,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,YAAY,EACZ,KAAK,WAAW,GACjB,CAAA"}
+{"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;AAGD,QAAA,MAAM,YAAY,sFA4BjB,CAAA;AAKD,QAAA,MAAM,YAAY,6GAqDhB,CAAA;AAKF,eAAO,MAAM,YAAY;;;;;;;;;;;CAef,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

@@ -228,19 +228,21 @@ const CarouselDots = React.forwardRef(({ className, ...props }, ref) => {
         "flex items-center gap-1.5",
         className
       ),
-      role: "tablist",
+      role: "group",
       "aria-label": "輪播指示器",
       ...props,
       children: scrollSnaps.map((_, i) => /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          role: "tab",
-          "aria-selected": i === selectedIndex,
+          "aria-current": i === selectedIndex ? "true" : void 0,
           "aria-label": `跳至第 ${i + 1} 張`,
           onClick: () => scrollTo(i),
           className: cn(
             "h-1.5 rounded-full transition-all",
+            // 2026-06-11 a11y(R2;Phase B codex 修重疊):hit-area 垂直擴至 24px、水平 ±3px(dot 6px+gap 6px → 中心距 12px,±3 恰相切零重疊;再寬必互搶點擊)
+            // — 視覺 dot 維持 6×6 不變,僅點擊目標擴大(anatomy story 原宣稱的 hit-area 機制補真)
+            'relative before:absolute before:-inset-y-[9px] before:-inset-x-[3px] before:content-[""]',
             // Dots 疊在 media(image/video)之上,不是 token color 底——用 --on-emphasis 保持語義
             // 跟其他「於飽和色底上的淺色前景」一致
             "bg-on-emphasis/60 hover:bg-on-emphasis/80",

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

@@ -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 (secondary + 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\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      role=\"tablist\"\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          role=\"tab\"\n          aria-selected={i === selectedIndex}\n          aria-label={`跳至第 ${i + 1} 張`}\n          onClick={() => scrollTo(i)}\n          className={cn(\n            'h-1.5 rounded-full transition-all',\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  states: ['default', 'hover', 'active', '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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"}
+{"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\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  states: ['default', 'hover', 'active', '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/Checkbox/checkbox-group.d.ts

@@ -14,7 +14,8 @@ export declare const CheckboxGroupContext: React.Context<{
  * **禁止**外層加 `gap-y-*` / `space-y-*` / margin —— 會 double padding,違反 canonical。
  *
  * ── 對齊 RadioGroup canonical ──
- * Radix `RadioGroup.Root` 預設用 `grid` (無 gap);本元件垂直也用 `grid`(無 gap),
+ * 本 DS `RadioGroup` wrapper 用 `grid`(無 gap;radio-group.tsx 自加——Radix primitive
+ * 本身 unstyled,無預設 layout);本元件垂直也用 `grid`(無 gap),
  * horizontal 用 `flex flex-wrap gap-4`(短 label 並排才需水平 gap)。
  *
  * ── 為什麼 vertical 不給 gap 也能好看 ──

package/dist/components/Checkbox/checkbox-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/checkbox-group.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,eAAO,MAAM,oBAAoB;aAAkC,IAAI;SAAgB,CAAA;AAEvF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AAEH,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E;;;;OAIG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;CACxC;AAKD,QAAA,MAAM,aAAa,2FAgBlB,CAAA;AAMD,OAAO,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/checkbox-group.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAY9B,eAAO,MAAM,oBAAoB;aAAkC,IAAI;SAAgB,CAAA;AAEvF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAEH,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E;;;;OAIG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;CACxC;AAKD,QAAA,MAAM,aAAa,2FAgBlB,CAAA;AAMD,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/Checkbox/checkbox-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.js","sources":["../../../src/components/Checkbox/checkbox-group.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport { cn } from '@/lib/utils'\n\n// ── CheckboxGroupContext ────────────────────────────────────────────────────\n// 讓內部 `<Checkbox>` 知道「我在 CheckboxGroup 裡」→ 即使 Field context 也存在,\n// checkbox 仍然保留自己的 label(每個 checkbox 是 group 的一個選項,FieldLabel 只是群組名稱)。\n//\n// 反之:Checkbox **單獨**塞進 Field(無 CheckboxGroup 包)時,Checkbox 才忽略自己的 label\n// 讓 FieldLabel 接管 —— 那是「binary toggle in Field」的場景。\n//\n// 這是 AR50 的根因:沒這個 context 前,CheckboxGroup 內部的 Checkbox 會誤以為「被 Field 包了」\n// 就把 label 全丟掉,導致 Sheet 範例的 Checkboxes 全部沒 label。\nexport const CheckboxGroupContext = React.createContext<{ inGroup: true } | null>(null)\n\n/**\n * CheckboxGroup — 多選 Checkbox 的 layout primitive\n *\n * ── Canonical 鐵律(2026-04-21 user 明示 + codified)──\n *\n * **垂直 CheckboxGroup 的 item 之間沒有外部 gap**。間距完全靠每個 Checkbox 內部的\n * `SelectionItem py = (field-height - 1lh) / 2` 公式生成 —— 單行高度對齊 field-height,\n * 多 row stacked 時 row-to-row 自然有 py × 2 的呼吸空間。\n *\n * **禁止**外層加 `gap-y-*` / `space-y-*` / margin —— 會 double padding,違反 canonical。\n *\n * ── 對齊 RadioGroup canonical ──\n * Radix `RadioGroup.Root` 預設用 `grid` (無 gap);本元件垂直也用 `grid`(無 gap),\n * horizontal 用 `flex flex-wrap gap-4`(短 label 並排才需水平 gap)。\n *\n * ── 為什麼 vertical 不給 gap 也能好看 ──\n * SelectionItem py 的公式讓每個 Checkbox row 的「單行高度 = field-height」。row 堆疊時\n * 相鄰 row 的 py 相加 = 2×py ≈ 10-12px 真實 row-to-row 視覺呼吸空間。Atlassian / Ant /\n * Chakra / GitHub CheckboxGroup 皆同流派 —— row 高度定義 gap,不加外部 gap。\n *\n * ── 本 session 曾經的錯誤 + 釐清 ──\n * 早先曾以為「gap 要加」是因為「row 黏在一起」——但實際根因是 `Checkbox` 在 Field\n * context 內誤吞自己的 label(見 checkbox.tsx 的 CheckboxGroupContext 修正)。\n * label 回來後 row 自然撐開,不需要 gap。修正後的 canonical 鐵律:**zero gap,\n * 間距由 SelectionItem py 獨家擁有**。\n *\n * ── fieldLayout:block ──\n * 在 `<Field orientation=\"horizontal\">` 內,control area auto `items-start` +\n * padding-top 公式對齊第一個 item 的 label 第一行(見 field.spec.md)。\n *\n * ── 用法範例 ──\n *   <CheckboxGroup>\n *     <Checkbox label=\"待處理\" defaultChecked />\n *     <Checkbox label=\"進行中\" defaultChecked />\n *     <Checkbox label=\"已完成\" />\n *   </CheckboxGroup>\n *\n *   <CheckboxGroup orientation=\"horizontal\">\n *     <Checkbox label=\"Email\" />\n *     <Checkbox label=\"Push\" />\n *     <Checkbox label=\"SMS\" />\n *   </CheckboxGroup>\n */\n\nexport interface CheckboxGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * 排列方向。\n   * - `vertical`(預設):多選項目堆疊,row 間距由 SelectionItem 擁有(外層 0 gap)\n   * - `horizontal`:選項並排,gap-4 分隔(短 label 場景,如「Email / Push / SMS」)\n   */\n  orientation?: 'vertical' | 'horizontal'\n}\n\n// Module-level 常數(2026-04-22 D3 perf audit):provider value 無狀態,hoist 避免 render 重建\nconst CHECKBOX_GROUP_CTX_VALUE = { inGroup: true } as const\n\nconst CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(\n  ({ className, orientation = 'vertical', ...props }, ref) => (\n    <CheckboxGroupContext.Provider value={CHECKBOX_GROUP_CTX_VALUE}>\n      <div\n        ref={ref}\n        role=\"group\"\n        className={cn(\n          // 垂直 CheckboxGroup:zero gap(間距由 SelectionItem py 獨家擁有,見 docblock canonical)\n          // 水平:短 label 並排需水平 gap-4(label 沒有 py 擴散,需要顯式 gap)\n          orientation === 'vertical' ? 'grid' : 'flex flex-wrap gap-4',\n          className\n        )}\n        {...props}\n      />\n    </CheckboxGroupContext.Provider>\n  )\n)\nCheckboxGroup.displayName = 'CheckboxGroup'\n// Field layout declaration:block primitive(多項堆疊)——進入 <Field> 時\n// control area 自動切 items-start + padding-top 公式。對齊 RadioGroup 做法。\n;(CheckboxGroup as unknown as { fieldLayout: 'block' }).fieldLayout = 'block'\n\nexport { CheckboxGroup }\n"],"names":[],"mappings":";;;AAaO,MAAM,uBAAuB,MAAM,cAAwC,IAAI;AAwDtF,MAAM,2BAA2B,EAAE,SAAS,KAAA;AAE5C,MAAM,gBAAgB,MAAM;AAAA,EAC1B,CAAC,EAAE,WAAW,cAAc,YAAY,GAAG,MAAA,GAAS,QAClD,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,0BACpC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,WAAW;AAAA;AAAA;AAAA,QAGT,gBAAgB,aAAa,SAAS;AAAA,QACtC;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA,EACN,CACF;AAEJ;AACA,cAAc,cAAc;AAG1B,cAAsD,cAAc;"}
+{"version":3,"file":"checkbox-group.js","sources":["../../../src/components/Checkbox/checkbox-group.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport { cn } from '@/lib/utils'\n\n// ── CheckboxGroupContext ────────────────────────────────────────────────────\n// 讓內部 `<Checkbox>` 知道「我在 CheckboxGroup 裡」→ 即使 Field context 也存在,\n// checkbox 仍然保留自己的 label(每個 checkbox 是 group 的一個選項,FieldLabel 只是群組名稱)。\n//\n// 反之:Checkbox **單獨**塞進 Field(無 CheckboxGroup 包)時,Checkbox 才忽略自己的 label\n// 讓 FieldLabel 接管 —— 那是「binary toggle in Field」的場景。\n//\n// 這是 AR50 的根因:沒這個 context 前,CheckboxGroup 內部的 Checkbox 會誤以為「被 Field 包了」\n// 就把 label 全丟掉,導致 Sheet 範例的 Checkboxes 全部沒 label。\nexport const CheckboxGroupContext = React.createContext<{ inGroup: true } | null>(null)\n\n/**\n * CheckboxGroup — 多選 Checkbox 的 layout primitive\n *\n * ── Canonical 鐵律(2026-04-21 user 明示 + codified)──\n *\n * **垂直 CheckboxGroup 的 item 之間沒有外部 gap**。間距完全靠每個 Checkbox 內部的\n * `SelectionItem py = (field-height - 1lh) / 2` 公式生成 —— 單行高度對齊 field-height,\n * 多 row stacked 時 row-to-row 自然有 py × 2 的呼吸空間。\n *\n * **禁止**外層加 `gap-y-*` / `space-y-*` / margin —— 會 double padding,違反 canonical。\n *\n * ── 對齊 RadioGroup canonical ──\n * 本 DS `RadioGroup` wrapper 用 `grid`(無 gap;radio-group.tsx 自加——Radix primitive\n * 本身 unstyled,無預設 layout);本元件垂直也用 `grid`(無 gap),\n * horizontal 用 `flex flex-wrap gap-4`(短 label 並排才需水平 gap)。\n *\n * ── 為什麼 vertical 不給 gap 也能好看 ──\n * SelectionItem py 的公式讓每個 Checkbox row 的「單行高度 = field-height」。row 堆疊時\n * 相鄰 row 的 py 相加 = 2×py ≈ 10-12px 真實 row-to-row 視覺呼吸空間。Atlassian / Ant /\n * Chakra / GitHub CheckboxGroup 皆同流派 —— row 高度定義 gap,不加外部 gap。\n *\n * ── 本 session 曾經的錯誤 + 釐清 ──\n * 早先曾以為「gap 要加」是因為「row 黏在一起」——但實際根因是 `Checkbox` 在 Field\n * context 內誤吞自己的 label(見 checkbox.tsx 的 CheckboxGroupContext 修正)。\n * label 回來後 row 自然撐開,不需要 gap。修正後的 canonical 鐵律:**zero gap,\n * 間距由 SelectionItem py 獨家擁有**。\n *\n * ── fieldLayout:block ──\n * 在 `<Field orientation=\"horizontal\">` 內,control area auto `items-start` +\n * padding-top 公式對齊第一個 item 的 label 第一行(見 field.spec.md)。\n *\n * ── 用法範例 ──\n *   <CheckboxGroup>\n *     <Checkbox label=\"待處理\" defaultChecked />\n *     <Checkbox label=\"進行中\" defaultChecked />\n *     <Checkbox label=\"已完成\" />\n *   </CheckboxGroup>\n *\n *   <CheckboxGroup orientation=\"horizontal\">\n *     <Checkbox label=\"Email\" />\n *     <Checkbox label=\"Push\" />\n *     <Checkbox label=\"SMS\" />\n *   </CheckboxGroup>\n */\n\nexport interface CheckboxGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * 排列方向。\n   * - `vertical`(預設):多選項目堆疊,row 間距由 SelectionItem 擁有(外層 0 gap)\n   * - `horizontal`:選項並排,gap-4 分隔(短 label 場景,如「Email / Push / SMS」)\n   */\n  orientation?: 'vertical' | 'horizontal'\n}\n\n// Module-level 常數(2026-04-22 D3 perf audit):provider value 無狀態,hoist 避免 render 重建\nconst CHECKBOX_GROUP_CTX_VALUE = { inGroup: true } as const\n\nconst CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(\n  ({ className, orientation = 'vertical', ...props }, ref) => (\n    <CheckboxGroupContext.Provider value={CHECKBOX_GROUP_CTX_VALUE}>\n      <div\n        ref={ref}\n        role=\"group\"\n        className={cn(\n          // 垂直 CheckboxGroup:zero gap(間距由 SelectionItem py 獨家擁有,見 docblock canonical)\n          // 水平:短 label 並排需水平 gap-4(label 沒有 py 擴散,需要顯式 gap)\n          orientation === 'vertical' ? 'grid' : 'flex flex-wrap gap-4',\n          className\n        )}\n        {...props}\n      />\n    </CheckboxGroupContext.Provider>\n  )\n)\nCheckboxGroup.displayName = 'CheckboxGroup'\n// Field layout declaration:block primitive(多項堆疊)——進入 <Field> 時\n// control area 自動切 items-start + padding-top 公式。對齊 RadioGroup 做法。\n;(CheckboxGroup as unknown as { fieldLayout: 'block' }).fieldLayout = 'block'\n\nexport { CheckboxGroup }\n"],"names":[],"mappings":";;;AAaO,MAAM,uBAAuB,MAAM,cAAwC,IAAI;AAyDtF,MAAM,2BAA2B,EAAE,SAAS,KAAA;AAE5C,MAAM,gBAAgB,MAAM;AAAA,EAC1B,CAAC,EAAE,WAAW,cAAc,YAAY,GAAG,MAAA,GAAS,QAClD,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,0BACpC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,WAAW;AAAA;AAAA;AAAA,QAGT,gBAAgB,aAAa,SAAS;AAAA,QACtC;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA,EACN,CACF;AAEJ;AACA,cAAc,cAAc;AAG1B,cAAsD,cAAc;"}

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

@@ -2,6 +2,8 @@ import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { type VariantProps } from "class-variance-authority";
 import type { FieldMode, FieldVariant } from "../../components/Field/field-types";
+import type { LucideIcon } from "lucide-react";
+import type { AvatarData } from "../../components/Avatar/avatar";
 declare const checkboxVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -18,6 +20,10 @@ export interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof Che
      * 在 <Field> context 內時此 prop 會被忽略（由 FieldDescription 接管）。
      */
     description?: React.ReactNode;
+    /** 可選左側 icon(label 前)— 2026-06-12 M30 修:轉發 SelectionItem 既有 canonical 槽(selection-item.tsx jsDoc 為 SSOT;與 avatar 互斥)*/
+    icon?: LucideIcon;
+    /** 可選左側 avatar(label 前)— 同上,SelectionItem 槽轉發 */
+    avatar?: AvatarData;
     /**
      * readonly 模式：鎖定互動但維持 checked/unchecked 視覺正確。
      * 與 disabled 的差異：readonly 不降色（可讀），disabled 降色（弱化）。
@@ -47,17 +53,17 @@ export declare const checkboxMeta: {
     readonly sizes: {
         readonly sm: {
             readonly fieldHeight: 28;
-            readonly iconSize: 16;
+            readonly iconSize: 12;
             readonly typography: "body";
         };
         readonly md: {
             readonly fieldHeight: 32;
-            readonly iconSize: 16;
+            readonly iconSize: 12;
             readonly typography: "body";
         };
         readonly lg: {
             readonly fieldHeight: 36;
-            readonly iconSize: 20;
+            readonly iconSize: 16;
             readonly typography: "body";
         };
     };

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

@@ -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;AAQ3F,QAAA,MAAM,gBAAgB;;8EA8BrB,CAAA;AA6BD,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,EACnE,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAID,QAAA,MAAM,QAAQ,yFAuGb,CAAA;AAKD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBf,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}
+{"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;AAG3F,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAA;AAM1E,QAAA,MAAM,gBAAgB;;8EA8BrB,CAAA;AA6BD,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,EACnE,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;OAIG;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,yFA2Gb,CAAA;AAKD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmBf,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/Checkbox/checkbox.js

@@ -45,6 +45,8 @@ const Checkbox = React.forwardRef(
     className,
     size,
     label,
+    icon,
+    avatar,
     description,
     readOnly = false,
     disabled,
@@ -95,6 +97,8 @@ const Checkbox = React.forwardRef(
         control: rootEl,
         label: effectiveLabel,
         description: effectiveDescription,
+        icon,
+        avatar,
         htmlFor: inputId,
         disabled: resolvedDisabled,
         size: sizeKey
@@ -109,9 +113,10 @@ const checkboxMeta = {
   // self-contained primitive(對齊 spec frontmatter self-contained + body L31;非 Family 4)
   variants: {},
   sizes: {
-    sm: { fieldHeight: 28, iconSize: 16, typography: "body" },
-    md: { fieldHeight: 32, iconSize: 16, typography: "body" },
-    lg: { fieldHeight: 36, iconSize: 20, typography: "body" }
+    // 2026-06-10 修 stale meta:iconSize 對齊 checkIconSize 真值(L49 sm/md=12, lg=16;deep-audit A.1b 抓 metadata drift)
+    sm: { fieldHeight: 28, iconSize: 12, typography: "body" },
+    md: { fieldHeight: 32, iconSize: 12, typography: "body" },
+    lg: { fieldHeight: 36, iconSize: 16, typography: "body" }
   },
   states: ["default", "hover", "focus-visible", "disabled"],
   tokens: {