@qijenchen/design-system 0.1.0-beta.13 → 0.1.0-beta.131

package/dist/components/Calendar/calendar.js

@@ -3,58 +3,90 @@ import * as React from "react";
 import { ChevronLeft, ChevronRight, Plus } from "lucide-react";
 import { startOfMonth, endOfMonth, startOfWeek, endOfWeek, eachDayOfInterval, isSameMonth, isSameDay, format, subMonths, addMonths } from "date-fns";
 import { cn } from "../../lib/utils.js";
+import { CAT_ACCENT, CAT_EVENT } from "../../tokens/categorical-color.js";
 import { Button } from "../Button/button.js";
-import { SegmentedControl, SegmentedControlItem } from "../SegmentedControl/segmented-control.js";
-const EVENT_COLOR_CLASSES = {
-  blue: "bg-[var(--color-blue-1)] text-[var(--color-blue-7)] hover:bg-[var(--color-blue-2)]",
-  green: "bg-[var(--color-green-1)] text-[var(--color-green-7)] hover:bg-[var(--color-green-2)]",
-  orange: "bg-[var(--color-deep-orange-1)] text-[var(--color-deep-orange-7)] hover:bg-[var(--color-deep-orange-2)]",
-  purple: "bg-[var(--color-purple-1)] text-[var(--color-purple-7)] hover:bg-[var(--color-purple-2)]",
-  red: "bg-[var(--color-deep-orange-1)] text-[var(--color-deep-orange-7)] hover:bg-[var(--color-deep-orange-2)]",
-  yellow: "bg-[var(--color-yellow-1)] text-[var(--color-yellow-7)] hover:bg-[var(--color-yellow-2)]"
-};
+import { TruncatedText } from "../../patterns/element-anatomy/truncated-text.js";
+import { Tooltip, TooltipTrigger, TooltipContent } from "../Tooltip/tooltip.js";
+import { useTruncated } from "../../hooks/use-truncated.js";
+const EVENT_COLOR_CLASSES = CAT_EVENT;
+const EVENT_ALLDAY_ACCENT = CAT_ACCENT;
 function coerceDate(value) {
-  return value instanceof Date ? value : new Date(value);
-}
-function eventsOnDate(events, date) {
-  return events.filter((e) => {
-    const start = coerceDate(e.start);
-    const end = coerceDate(e.end);
-    const d = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
-    const s = new Date(start.getFullYear(), start.getMonth(), start.getDate()).getTime();
-    const eEnd = new Date(end.getFullYear(), end.getMonth(), end.getDate()).getTime();
-    return d >= s && d <= eEnd;
-  });
+  if (value instanceof Date) return value;
+  const dateOnly = /^\d{4}-\d{2}-\d{2}$/.exec(value);
+  if (dateOnly) {
+    const [y, m, d] = value.split("-").map(Number);
+    return new Date(y, m - 1, d);
+  }
+  return new Date(value);
 }
 const MAX_TILES_PER_CELL = 3;
+function MonthEventTile({
+  event,
+  colorClass,
+  onEventClick
+}) {
+  const { ref: truncationRef, isTruncated } = useTruncated({ deps: [event.title] });
+  return (
+    // 恆 wrap、未截斷 open={false} 靜默(truncated-text.spec.md always-wrap:條件 wrap 會 remount 丟 RO 訂閱)
+    /* @__PURE__ */ jsxs(Tooltip, { open: isTruncated ? void 0 : false, children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__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: /* @__PURE__ */ jsx("span", { ref: truncationRef, className: "block truncate", children: event.title })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: event.title })
+    ] })
+  );
+}
 const Calendar = React.forwardRef(function Calendar2({
-  view: viewProp,
-  defaultView = "month",
-  onViewChange,
   referenceDate: referenceDateProp,
   defaultReferenceDate,
   onReferenceDateChange,
+  today: todayProp,
   events = [],
   onEventClick,
   onDateClick,
   onCreateEvent,
   weekStartsOn = 0,
   renderEventTile,
-  size = "md",
   className,
   locale = "en-US",
   prevAriaLabel = "上個月",
   // i18n-allow: DS default; consumer override via prevAriaLabel prop
   nextAriaLabel = "下個月",
   // i18n-allow: DS default; consumer override via nextAriaLabel prop
-  viewToggleAriaLabel = "檢視切換",
-  // i18n-allow: DS default; consumer override via viewToggleAriaLabel prop
+  navAriaLabel = "行事曆月份導覽",
+  // i18n-allow: DS default; consumer override via navAriaLabel prop
   todayLabel = "今天",
   // i18n-allow: DS default; consumer override via todayLabel prop
+  createLabel = "新事件",
+  // i18n-allow: DS default; consumer override via createLabel prop
   ...props
 }, ref) {
+  const resolvedToday = todayProp ?? /* @__PURE__ */ new Date();
   const [internalRef, setInternalRef] = React.useState(
-    defaultReferenceDate ?? /* @__PURE__ */ new Date()
+    () => new Date((defaultReferenceDate ?? resolvedToday).getTime())
   );
   const refDate = referenceDateProp ?? internalRef;
   const setRefDate = React.useCallback(
@@ -64,15 +96,6 @@ const Calendar = React.forwardRef(function Calendar2({
     },
     [referenceDateProp, onReferenceDateChange]
   );
-  const [internalView, setInternalView] = React.useState(defaultView);
-  const currentView = viewProp ?? internalView;
-  const setView = React.useCallback(
-    (next) => {
-      if (viewProp === void 0) setInternalView(next);
-      onViewChange == null ? void 0 : onViewChange(next);
-    },
-    [viewProp, onViewChange]
-  );
   const days = React.useMemo(() => {
     const monthStart = startOfMonth(refDate);
     const monthEnd = endOfMonth(refDate);
@@ -80,17 +103,46 @@ const Calendar = React.forwardRef(function Calendar2({
     const gridEnd = endOfWeek(monthEnd, { weekStartsOn });
     return eachDayOfInterval({ start: gridStart, end: gridEnd });
   }, [refDate, weekStartsOn]);
-  const monthTitle = new Intl.DateTimeFormat(locale, {
-    year: "numeric",
-    month: "long"
-  }).format(refDate);
-  const today = /* @__PURE__ */ new Date();
+  const monthTitleFormatter = React.useMemo(
+    () => new Intl.DateTimeFormat(locale, { year: "numeric", month: "long" }),
+    [locale]
+  );
+  const monthTitle = monthTitleFormatter.format(refDate);
   const weekdayNames = React.useMemo(() => {
     return days.slice(0, 7).map(
       (d) => new Intl.DateTimeFormat(locale, { weekday: "short" }).format(d)
     );
   }, [days, locale]);
-  const handleToday = () => setRefDate(/* @__PURE__ */ new Date());
+  const eventsByDate = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (days.length === 0) return map;
+    const first = days[0];
+    const last = days[days.length - 1];
+    const gridStart = new Date(first.getFullYear(), first.getMonth(), first.getDate()).getTime();
+    const gridEnd = new Date(last.getFullYear(), last.getMonth(), last.getDate()).getTime();
+    for (const e of events) {
+      const start = coerceDate(e.start);
+      const end = coerceDate(e.end);
+      const eEnd = new Date(end.getFullYear(), end.getMonth(), end.getDate()).getTime();
+      let sMs = new Date(start.getFullYear(), start.getMonth(), start.getDate()).getTime();
+      if (eEnd < gridStart || sMs > gridEnd) continue;
+      if (sMs < gridStart) sMs = gridStart;
+      const lastMs = Math.min(eEnd, gridEnd);
+      const cursor = new Date(sMs);
+      while (cursor.getTime() <= lastMs) {
+        const key = `${cursor.getFullYear()}-${cursor.getMonth() + 1}-${cursor.getDate()}`;
+        const bucket = map.get(key);
+        if (bucket) bucket.push(e);
+        else map.set(key, [e]);
+        cursor.setDate(cursor.getDate() + 1);
+      }
+    }
+    for (const bucket of map.values()) {
+      bucket.sort((a, b) => Number(b.allDay ?? false) - Number(a.allDay ?? false));
+    }
+    return map;
+  }, [events, days]);
+  const handleToday = () => setRefDate(new Date(resolvedToday.getTime()));
   const handlePrev = () => setRefDate(subMonths(refDate, 1));
   const handleNext = () => setRefDate(addMonths(refDate, 1));
   return /* @__PURE__ */ jsxs(
@@ -101,8 +153,6 @@ const Calendar = React.forwardRef(function Calendar2({
         "flex flex-col w-full h-full bg-surface rounded-md border border-divider overflow-hidden",
         className
       ),
-      "data-view": currentView,
-      "data-size": size,
       ...props,
       children: [
         /* @__PURE__ */ jsxs(
@@ -113,7 +163,7 @@ const Calendar = React.forwardRef(function Calendar2({
               "px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]"
             ),
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxs("nav", { className: "flex items-center gap-2", "aria-label": navAriaLabel, children: [
                 /* @__PURE__ */ jsx(
                   Button,
                   {
@@ -138,22 +188,8 @@ const Calendar = React.forwardRef(function Calendar2({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx("h2", { className: "text-body-lg font-medium text-foreground flex-1 min-w-0 truncate ml-2", children: monthTitle }),
-              /* @__PURE__ */ jsxs(
-                SegmentedControl,
-                {
-                  size: "sm",
-                  value: currentView,
-                  onValueChange: (v) => setView(v),
-                  "aria-label": viewToggleAriaLabel,
-                  children: [
-                    /* @__PURE__ */ jsx(SegmentedControlItem, { value: "day", disabled: true, children: "日" }),
-                    /* @__PURE__ */ jsx(SegmentedControlItem, { value: "week", disabled: true, children: "週" }),
-                    /* @__PURE__ */ jsx(SegmentedControlItem, { value: "month", children: "月" })
-                  ]
-                }
-              ),
-              onCreateEvent && /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", startIcon: Plus, onClick: onCreateEvent, children: "新事件" })
+              /* @__PURE__ */ jsx("h2", { className: "text-body-lg font-medium text-foreground flex-1 min-w-0 truncate ml-2", children: /* @__PURE__ */ jsx(TruncatedText, { display: "block", children: monthTitle }) }),
+              onCreateEvent && /* @__PURE__ */ jsx(Button, { variant: "primary", size: "sm", startIcon: Plus, onClick: onCreateEvent, children: createLabel })
             ]
           }
         ),
@@ -173,86 +209,94 @@ const Calendar = React.forwardRef(function Calendar2({
             "aria-label": `月行事曆,${monthTitle}`,
             children: Array.from({ length: Math.ceil(days.length / 7) }, (_, rowIdx) => /* @__PURE__ */ jsx("div", { role: "row", style: { display: "contents" }, children: days.slice(rowIdx * 7, rowIdx * 7 + 7).map((date) => {
               const inMonth = isSameMonth(date, refDate);
-              const isToday = isSameDay(date, today);
-              const dayEvents = eventsOnDate(events, date);
+              const isToday = isSameDay(date, resolvedToday);
+              const dayEvents = eventsByDate.get(`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`) ?? [];
               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-primary 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 colorClass = EVENT_COLOR_CLASSES[event.color ?? "blue"];
-                        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",
+                              {
+                                role: "button",
+                                tabIndex: 0,
+                                "aria-label": `事件:${event.title}`,
+                                onClick: (e) => {
+                                  e.stopPropagation();
+                                  onEventClick == null ? void 0 : onEventClick(event);
+                                },
+                                onKeyDown: (e) => {
+                                  if (e.key === "Enter" || e.key === " ") {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    onEventClick == null ? void 0 : onEventClick(event);
+                                  }
+                                },
+                                className: "rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                                children: renderEventTile(event)
+                              },
+                              event.id
+                            );
+                          }
                           return /* @__PURE__ */ jsx(
-                            "div",
+                            MonthEventTile,
                             {
-                              onClick: (e) => {
-                                e.stopPropagation();
-                                onEventClick == null ? void 0 : onEventClick(event);
-                              },
-                              children: renderEventTile(event)
+                              event,
+                              colorClass,
+                              onEventClick
                             },
                             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",
-                              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))
           }
@@ -268,9 +312,10 @@ const calendarMeta = {
   // non-family composite / overlay / layout
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  // 'active' 移除 — 日期格按壓視覺屬 DateGrid(其 meta 已 −active);nav 按壓屬內嵌 Button(2026-07-07 詞彙統一 DS-wide 按壓訊號盤點:檔內 0 active: utility / 0 *-active token)。
+  states: ["default", "hover", "focus-visible", "disabled"],
   tokens: {
-    bg: ["bg-muted", "bg-neutral-hover", "bg-primary", "bg-surface"],
+    bg: ["bg-muted", "bg-neutral-hover", "bg-info", "bg-surface"],
     fg: ["text-fg-disabled", "text-fg-muted", "text-foreground"],
     ring: ["ring-ring"]
   }

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 { 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   * 事件類別色。值為 DS primitive 色名(blue / green / orange / purple / red / yellow)。\n   * 對照 Badge / Tag 的 primitive color variants。\n   */\n  color?: 'blue' | 'green' | 'orange' | 'purple' | 'red' | 'yellow'\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  viewToggleAriaLabel?: string\n  todayLabel?: string\n}\n\n// ── Event tile color tokens ─────────────────────────────────────────────────\n// 對齊 Tag / Badge 的 primitive color system(見 `color.spec.md`)\n\nconst EVENT_COLOR_CLASSES: Record<NonNullable<CalendarEvent['color']>, string> = {\n  blue: 'bg-[var(--color-blue-1)] text-[var(--color-blue-7)] hover:bg-[var(--color-blue-2)]',\n  green: 'bg-[var(--color-green-1)] text-[var(--color-green-7)] hover:bg-[var(--color-green-2)]',\n  orange: 'bg-[var(--color-deep-orange-1)] text-[var(--color-deep-orange-7)] hover:bg-[var(--color-deep-orange-2)]',\n  purple: 'bg-[var(--color-purple-1)] text-[var(--color-purple-7)] hover:bg-[var(--color-purple-2)]',\n  red: 'bg-[var(--color-deep-orange-1)] text-[var(--color-deep-orange-7)] hover:bg-[var(--color-deep-orange-2)]',\n  yellow: 'bg-[var(--color-yellow-1)] text-[var(--color-yellow-7)] hover:bg-[var(--color-yellow-2)]',\n}\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  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        <div className=\"flex items-center gap-2\">\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        </div>\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              const dayEvents = eventsOnDate(events, date)\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-primary 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 colorClass = EVENT_COLOR_CLASSES[event.color ?? 'blue']\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                        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-primary', '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 { TruncatedText } from '@/design-system/patterns/element-anatomy/truncated-text'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/design-system/components/Tooltip/tooltip'\nimport { useTruncated } from '@/design-system/hooks/use-truncated'\n\n/**\n * Calendar — 月事件檢視 canvas\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 * ── Implemented scope ──\n * 月 view(toolbar / grid / event tile / today highlight / outside days)。未實作的\n * week/day/size/drag 能力不預佔公開 prop 或 disabled control。\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 interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  /** 聚焦日期(月 view 的那個月) */\n  referenceDate?: Date\n  defaultReferenceDate?: Date\n  onReferenceDateChange?: (date: Date) => void\n  /**\n   * 「今天」的時間來源。預設為呼叫端當下時間；傳入可讓 SSR、測試與視覺快照完全\n   * deterministic。此值同時擁有 today highlight、Today button target，以及未提供\n   * referenceDate/defaultReferenceDate 時的初始月份。\n   */\n  today?: Date\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  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  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\n// 預設事件 tile 抽出 component:截斷 tooltip 需 useTruncated(hook 不能在 map callback 內)。\n// 截斷 → tooltip 顯完整標題(tooltip.spec.md:32,僅實際截斷時);tile 是 interactive host\n// (role=button,hover 直達)→ trigger = tile 本體、量測內層文字 span — useTruncated 自組\n// pattern(truncated-text.spec.md「trigger 需自控」指定解;範本 inline-edit.tsx:251 + tag.tsx)。\nfunction MonthEventTile({\n  event,\n  colorClass,\n  onEventClick,\n}: {\n  event: CalendarEvent\n  colorClass: string\n  onEventClick?: (event: CalendarEvent) => void\n}) {\n  const { ref: truncationRef, isTruncated } = useTruncated<HTMLSpanElement>({ deps: [event.title] })\n  return (\n    // 恆 wrap、未截斷 open={false} 靜默(truncated-text.spec.md always-wrap:條件 wrap 會 remount 丟 RO 訂閱)\n    <Tooltip open={isTruncated ? undefined : false}>\n      <TooltipTrigger asChild>\n        <div\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          <span ref={truncationRef} className=\"block truncate\">{event.title}</span>\n        </div>\n      </TooltipTrigger>\n      <TooltipContent>{event.title}</TooltipContent>\n    </Tooltip>\n  )\n}\n\nconst Calendar = React.forwardRef<HTMLDivElement, CalendarProps>(function Calendar({\n  referenceDate: referenceDateProp,\n  defaultReferenceDate,\n  onReferenceDateChange,\n  today: todayProp,\n  events = [],\n  onEventClick,\n  onDateClick,\n  onCreateEvent,\n  weekStartsOn = 0,\n  renderEventTile,\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  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  const resolvedToday = todayProp ?? new Date()\n  // Controlled / uncontrolled refDate\n  const [internalRef, setInternalRef] = React.useState<Date>(\n    () => new Date((defaultReferenceDate ?? resolvedToday).getTime()),\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  // 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 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(resolvedToday.getTime()))\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      {...props}\n    >\n      {/* Toolbar:[◀] [今天] [▶]  title  [+ 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          {/* 2026-07-28:截斷必附 tooltip(tooltip.spec.md「截斷 → tooltip,僅實際截斷時顯示」)——\n              窄 toolbar 下標題被裁掉沒有補救路徑。display=\"block\":h2 是 block container。 */}\n          <TruncatedText display=\"block\">{monthTitle}</TruncatedText>\n        </h2>\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, resolvedToday)\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                        role=\"button\"\n                        tabIndex={0}\n                        aria-label={`事件:${event.title}`}\n                        onClick={(e) => {\n                          e.stopPropagation()\n                          onEventClick?.(event)\n                        }}\n                        onKeyDown={(e) => {\n                          if (e.key === 'Enter' || e.key === ' ') {\n                            e.preventDefault()\n                            e.stopPropagation()\n                            onEventClick?.(event)\n                          }\n                        }}\n                        className=\"rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n                      >\n                        {renderEventTile(event)}\n                      </div>\n                    )\n                  }\n                  return (\n                    <MonthEventTile\n                      key={event.id}\n                      event={event}\n                      colorClass={colorClass}\n                      onEventClick={onEventClick}\n                    />\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":";;;;;;;;;;AA0GA,MAAM,sBAAsB;AAC5B,MAAM,sBAAsB;AAI5B,SAAS,WAAW,OAA4B;AAC9C,MAAI,iBAAiB,KAAM,QAAO;AAMlC,QAAM,WAAW,sBAAsB,KAAK,KAAK;AACjD,MAAI,UAAU;AACZ,UAAM,CAAC,GAAG,GAAG,CAAC,IAAI,MAAM,MAAM,GAAG,EAAE,IAAI,MAAM;AAC7C,WAAO,IAAI,KAAK,GAAG,IAAI,GAAG,CAAC;AAAA,EAC7B;AACA,SAAO,IAAI,KAAK,KAAK;AACvB;AAOA,MAAM,qBAAqB;AAM3B,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,EAAE,KAAK,eAAe,gBAAgB,aAA8B,EAAE,MAAM,CAAC,MAAM,KAAK,GAAG;AACjG;AAAA;AAAA,IAEE,qBAAC,SAAA,EAAQ,MAAM,cAAc,SAAY,OACvC,UAAA;AAAA,MAAA,oBAAC,gBAAA,EAAe,SAAO,MACrB,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAU;AAAA,UACV,SAAS,CAAC,MAAM;AACd,cAAE,gBAAA;AACF,yDAAe;AAAA,UACjB;AAAA,UACA,WAAW,CAAC,MAAM;AAChB,gBAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,gBAAE,eAAA;AACF,2DAAe;AAAA,YACjB;AAAA,UACF;AAAA,UACA,cAAY,MAAM,MAAM,KAAK;AAAA,UAC7B,WAAW;AAAA,YACT;AAAA;AAAA;AAAA,YAGA;AAAA,YACA;AAAA,UAAA;AAAA,UAGF,8BAAC,QAAA,EAAK,KAAK,eAAe,WAAU,kBAAkB,gBAAM,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA,GAEtE;AAAA,MACA,oBAAC,gBAAA,EAAgB,UAAA,MAAM,MAAA,CAAM;AAAA,IAAA,EAAA,CAC/B;AAAA;AAEJ;AAEA,MAAM,WAAW,MAAM,WAA0C,SAASA,UAAS;AAAA,EACjF,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS,CAAA;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,gBAAgB;AAAA;AAAA,EAChB,gBAAgB;AAAA;AAAA,EAChB,eAAe;AAAA;AAAA,EACf,aAAa;AAAA;AAAA,EACb,cAAc;AAAA;AAAA,EACd,GAAG;AACL,GAAG,KAAK;AACN,QAAM,gBAAgB,aAAa,oBAAI,KAAA;AAEvC,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM;AAAA,IAC1C,MAAM,IAAI,MAAM,wBAAwB,eAAe,SAAS;AAAA,EAAA;AAElE,QAAM,UAAU,qBAAqB;AACrC,QAAM,aAAa,MAAM;AAAA,IACvB,CAAC,SAAe;AACd,UAAI,sBAAsB,OAAW,gBAAe,IAAI;AACxD,qEAAwB;AAAA,IAC1B;AAAA,IACA,CAAC,mBAAmB,qBAAqB;AAAA,EAAA;AAI3C,QAAM,OAAO,MAAM,QAAQ,MAAM;AAC/B,UAAM,aAAa,aAAa,OAAO;AACvC,UAAM,WAAW,WAAW,OAAO;AACnC,UAAM,YAAY,YAAY,YAAY,EAAE,cAAc;AAC1D,UAAM,UAAU,UAAU,UAAU,EAAE,cAAc;AACpD,WAAO,kBAAkB,EAAE,OAAO,WAAW,KAAK,SAAS;AAAA,EAC7D,GAAG,CAAC,SAAS,YAAY,CAAC;AAI1B,QAAM,sBAAsB,MAAM;AAAA,IAChC,MAAM,IAAI,KAAK,eAAe,QAAQ,EAAE,MAAM,WAAW,OAAO,QAAQ;AAAA,IACxE,CAAC,MAAM;AAAA,EAAA;AAET,QAAM,aAAa,oBAAoB,OAAO,OAAO;AAErD,QAAM,eAAe,MAAM,QAAQ,MAAM;AAEvC,WAAO,KAAK,MAAM,GAAG,CAAC,EAAE;AAAA,MAAI,CAAC,MAC3B,IAAI,KAAK,eAAe,QAAQ,EAAE,SAAS,QAAA,CAAS,EAAE,OAAO,CAAC;AAAA,IAAA;AAAA,EAElE,GAAG,CAAC,MAAM,MAAM,CAAC;AAMjB,QAAM,eAAe,MAAM,QAAQ,MAAM;AACvC,UAAM,0BAAU,IAAA;AAChB,QAAI,KAAK,WAAW,EAAG,QAAO;AAC9B,UAAM,QAAQ,KAAK,CAAC;AACpB,UAAM,OAAO,KAAK,KAAK,SAAS,CAAC;AACjC,UAAM,YAAY,IAAI,KAAK,MAAM,YAAA,GAAe,MAAM,SAAA,GAAY,MAAM,QAAA,CAAS,EAAE,QAAA;AACnF,UAAM,UAAU,IAAI,KAAK,KAAK,YAAA,GAAe,KAAK,SAAA,GAAY,KAAK,QAAA,CAAS,EAAE,QAAA;AAC9E,eAAW,KAAK,QAAQ;AACtB,YAAM,QAAQ,WAAW,EAAE,KAAK;AAChC,YAAM,MAAM,WAAW,EAAE,GAAG;AAC5B,YAAM,OAAO,IAAI,KAAK,IAAI,YAAA,GAAe,IAAI,SAAA,GAAY,IAAI,QAAA,CAAS,EAAE,QAAA;AACxE,UAAI,MAAM,IAAI,KAAK,MAAM,YAAA,GAAe,MAAM,SAAA,GAAY,MAAM,QAAA,CAAS,EAAE,QAAA;AAC3E,UAAI,OAAO,aAAa,MAAM,QAAS;AACvC,UAAI,MAAM,UAAW,OAAM;AAC3B,YAAM,SAAS,KAAK,IAAI,MAAM,OAAO;AACrC,YAAM,SAAS,IAAI,KAAK,GAAG;AAC3B,aAAO,OAAO,QAAA,KAAa,QAAQ;AACjC,cAAM,MAAM,GAAG,OAAO,YAAA,CAAa,IAAI,OAAO,SAAA,IAAa,CAAC,IAAI,OAAO,SAAS;AAChF,cAAM,SAAS,IAAI,IAAI,GAAG;AAC1B,YAAI,OAAQ,QAAO,KAAK,CAAC;AAAA,YACpB,KAAI,IAAI,KAAK,CAAC,CAAC,CAAC;AACrB,eAAO,QAAQ,OAAO,QAAA,IAAY,CAAC;AAAA,MACrC;AAAA,IACF;AAEA,eAAW,UAAU,IAAI,UAAU;AACjC,aAAO,KAAK,CAAC,GAAG,MAAM,OAAO,EAAE,UAAU,KAAK,IAAI,OAAO,EAAE,UAAU,KAAK,CAAC;AAAA,IAC7E;AACA,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,IAAI,CAAC;AAEjB,QAAM,cAAc,MAAM,WAAW,IAAI,KAAK,cAAc,QAAA,CAAS,CAAC;AACtE,QAAM,aAAa,MAAM,WAAW,UAAU,SAAS,CAAC,CAAC;AACzD,QAAM,aAAa,MAAM,WAAW,UAAU,SAAS,CAAC,CAAC;AAEzD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAGJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAIF,UAAA;AAAA,cAAA,qBAAC,OAAA,EAAI,WAAU,2BAA0B,cAAY,cACnD,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,SAAQ;AAAA,oBACR,MAAK;AAAA,oBACL,UAAQ;AAAA,oBACR,WAAW;AAAA,oBACX,cAAY;AAAA,oBACZ,SAAS;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEX,oBAAC,UAAO,SAAQ,YAAW,MAAK,MAAK,SAAS,aAC3C,UAAA,WAAA,CACH;AAAA,gBACA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,SAAQ;AAAA,oBACR,MAAK;AAAA,oBACL,UAAQ;AAAA,oBACR,WAAW;AAAA,oBACX,cAAY;AAAA,oBACZ,SAAS;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACX,GACF;AAAA,cAEA,oBAAC,QAAG,WAAU,yEAGZ,8BAAC,eAAA,EAAc,SAAQ,SAAS,UAAA,WAAA,CAAW,EAAA,CAC7C;AAAA,cAEC,iBACC,oBAAC,QAAA,EAAO,SAAQ,WAAU,MAAK,MAAK,WAAW,MAAM,SAAS,eAC3D,UAAA,YAAA,CACH;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAKJ,oBAAC,SAAI,WAAU,qDACZ,uBAAa,IAAI,CAAC,MAAM,MACvB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YAET,UAAA;AAAA,UAAA;AAAA,UAHI;AAAA,QAAA,CAKR,GACH;AAAA,QAIA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,cAAY,QAAQ,UAAU;AAAA,YAE7B,UAAA,MAAM,KAAK,EAAE,QAAQ,KAAK,KAAK,KAAK,SAAS,CAAC,EAAA,GAAK,CAAC,GAAG,WACtD,oBAAC,OAAA,EAAiB,MAAK,OAAM,OAAO,EAAE,SAAS,WAAA,GAC5C,UAAA,KAAK,MAAM,SAAS,GAAG,SAAS,IAAI,CAAC,EAAE,IAAI,CAAC,SAAS;AACpD,oBAAM,UAAU,YAAY,MAAM,OAAO;AACzC,oBAAM,UAAU,UAAU,MAAM,aAAa;AAG7C,oBAAM,YAAY,aAAa,IAAI,GAAG,KAAK,YAAA,CAAa,IAAI,KAAK,SAAA,IAAa,CAAC,IAAI,KAAK,SAAS,EAAE,KAAK,CAAA;AACxG,oBAAM,gBAAgB,UAAU,MAAM,GAAG,kBAAkB;AAC3D,oBAAM,gBAAgB,UAAU,SAAS,cAAc;AAEvD;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKE;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBAEC,MAAK;AAAA,oBACL,SAAS,MAAM,2CAAc;AAAA,oBACjC,WAAW;AAAA,sBACT;AAAA,sBACA;AAAA,sBACA;AAAA,sBACA;AAAA,sBACA,CAAC,WAAW;AAAA,oBAAA;AAAA,oBAKd,UAAA;AAAA,sBAAA,oBAAC,OAAA,EAAI,WAAU,gCACb,UAAA;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC,MAAK;AAAA,0BACL,cAAY,GAAG,OAAO,MAAM,YAAY,CAAC,IAAI,UAAU,MAAM;AAAA,0BAC7D,SAAS,CAAC,MAAM;AACd,8BAAE,gBAAA;AACF,uEAAc;AAAA,0BAChB;AAAA,0BACA,WAAW;AAAA,4BACT;AAAA,4BACA;AAAA,4BACA,WAAW;AAAA,4BACX,CAAC,WAAW,CAAC,WAAW;AAAA,0BAAA;AAAA,0BAGzB,UAAA,OAAO,MAAM,GAAG;AAAA,wBAAA;AAAA,sBAAA,GAErB;AAAA,sBAGA,qBAAC,OAAA,EAAI,WAAU,iCACZ,UAAA;AAAA,wBAAA,cAAc,IAAI,CAAC,UAAU;AAC5B,gCAAM,KAAK,MAAM,SAAS;AAE1B,gCAAM,aAAa,MAAM,SACrB,GAAG,oBAAoB,EAAE,GAAG,oBAAoB,EAAE,GAAG,aAAa,IAClE,oBAAoB,EAAE;AAC1B,8BAAI,iBAAiB;AACnB,mCACE;AAAA,8BAAC;AAAA,8BAAA;AAAA,gCAEC,MAAK;AAAA,gCACL,UAAU;AAAA,gCACV,cAAY,MAAM,MAAM,KAAK;AAAA,gCAC7B,SAAS,CAAC,MAAM;AACd,oCAAE,gBAAA;AACF,+EAAe;AAAA,gCACjB;AAAA,gCACA,WAAW,CAAC,MAAM;AAChB,sCAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,sCAAE,eAAA;AACF,sCAAE,gBAAA;AACF,iFAAe;AAAA,kCACjB;AAAA,gCACF;AAAA,gCACA,WAAU;AAAA,gCAET,0BAAgB,KAAK;AAAA,8BAAA;AAAA,8BAjBjB,MAAM;AAAA,4BAAA;AAAA,0BAoBjB;AACA,iCACE;AAAA,4BAAC;AAAA,4BAAA;AAAA,8BAEC;AAAA,8BACA;AAAA,8BACA;AAAA,4BAAA;AAAA,4BAHK,MAAM;AAAA,0BAAA;AAAA,wBAMjB,CAAC;AAAA,wBACA,gBAAgB,KACf,qBAAC,OAAA,EAAI,WAAU,qCAAoC,UAAA;AAAA,0BAAA;AAAA,0BAC/C;AAAA,0BAAc;AAAA,wBAAA,EAAA,CAClB;AAAA,sBAAA,EAAA,CAEJ;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBA9ES,KAAK,YAAA;AAAA,gBAAY;AAAA;AAAA,YAiF5B,CAAC,EAAA,GAjGO,MAkGV,CACD;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AACD,SAAS,cAAc;AAIhB,MAAM,eAAe;AAAA,EAC1B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA;AAAA,EAIP,QAAQ,CAAC,WAAW,SAAS,iBAAiB,UAAU;AAAA,EACxD,QAAQ;AAAA,IACN,IAAI,CAAC,YAAY,oBAAoB,WAAW,YAAY;AAAA,IAC5D,IAAI,CAAC,oBAAoB,iBAAiB,iBAAiB;AAAA,IAC3D,MAAM,CAAC,WAAW;AAAA,EAAA;AAEtB;"}

package/dist/components/Calendar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './calendar';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Calendar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/index.ts"],"names":[],"mappings":"AAIA,cAAc,YAAY,CAAA"}

package/dist/components/Calendar/index.js

@@ -0,0 +1,6 @@
+import { Calendar, calendarMeta } from "./calendar.js";
+export {
+  Calendar,
+  calendarMeta
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Carousel/carousel.d.ts

@@ -36,21 +36,27 @@ interface CarouselProps {
 }
 declare const Carousel: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & CarouselProps & React.RefAttributes<HTMLDivElement>>;
 declare const CarouselContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const CarouselItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-type ArrowProps = {
-    className?: string;
-    /** ARIA label. Override for i18n. Prev default: 「上一張」;Next default: 「下一張」 */
-    'aria-label'?: string;
-};
-declare const CarouselPrevious: React.ForwardRefExoticComponent<ArrowProps & React.RefAttributes<HTMLButtonElement>>;
-declare const CarouselNext: React.ForwardRefExoticComponent<ArrowProps & React.RefAttributes<HTMLButtonElement>>;
+interface CarouselItemInternalProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** @internal CarouselContent 注入 —— 用於自動 slide 位置名。 */
+    _slideIndex?: number;
+    _slideTotal?: number;
+}
+declare const CarouselItem: React.ForwardRefExoticComponent<CarouselItemInternalProps & React.RefAttributes<HTMLDivElement>>;
+declare const CarouselPrevious: React.ForwardRefExoticComponent<Omit<Omit<import("../../components/Button/button").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref">, "iconOnly"> & {
+    /** 定位層 wrapper 的 className(絕對定位 + hover-only 顯示層);箭頭按鈕樣式走 `className`。 */
+    wrapperClassName?: string;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const CarouselNext: React.ForwardRefExoticComponent<Omit<Omit<import("../../components/Button/button").ButtonProps & React.RefAttributes<HTMLButtonElement>, "ref">, "iconOnly"> & {
+    /** 定位層 wrapper 的 className(絕對定位 + hover-only 顯示層);箭頭按鈕樣式走 `className`。 */
+    wrapperClassName?: string;
+} & React.RefAttributes<HTMLButtonElement>>;
 declare const CarouselDots: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export declare const carouselMeta: {
     readonly component: "Carousel";
     readonly family: null;
     readonly variants: {};
     readonly sizes: {};
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default", "hover", "focus-visible", "disabled"];
     readonly tokens: {
         readonly bg: readonly [];
         readonly fg: readonly [];

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,6HAsGb,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,6HAkHb,CAAA;AAKD,QAAA,MAAM,eAAe,6GA4BnB,CAAA;AAGF,UAAU,yBAA0B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,QAAA,MAAM,YAAY,kGAqBjB,CAAA;AA4BD,QAAA,MAAM,gBAAgB;IAbpB,0EAA0E;uBACvD,MAAM;2CAwD1B,CAAA;AAID,QAAA,MAAM,YAAY;IA7DhB,0EAA0E;uBACvD,MAAM;2CAqG1B,CAAA;AAKD,QAAA,MAAM,YAAY,6GAuDhB,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"}