@qijenchen/design-system 0.1.0-beta.10

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

@@ -0,0 +1,81 @@
+import * as React from 'react';
+/**
+ * Calendar — 事件檢視 canvas(月 view MVP)
+ *
+ * 定位:看事件的 page-level canvas,對齊 Notion Calendar / Google Calendar。
+ * 完整 spec 見 `event-calendar.spec.md`。
+ *
+ * ── Layout Family ──
+ * 非 4-Family,屬 page-composite(多區塊 Toolbar + Grid + EventTile)。
+ *
+ * ── MVP scope(本次 session)──
+ * - 月 view 完整(toolbar / grid / event tile / today highlight / outside days)
+ * - 週 / 日 view 是 tech debt
+ * - 拖拉增刪 event 是 tech debt
+ *
+ * ── 與 DatePicker 的區分 ──
+ * DatePicker 是「選日期」form control;Calendar 是「看事件」page canvas。
+ * 名字相近但職責完全不同,spec 頂段明示分界。
+ */
+export interface CalendarEvent {
+    id: string;
+    title: string;
+    /** ISO 字串 "YYYY-MM-DD"(all-day)或 "YYYY-MM-DDTHH:mm"(timed) */
+    start: string | Date;
+    end: string | Date;
+    allDay?: boolean;
+    /**
+     * 事件類別色。值為 DS primitive 色名(blue / green / orange / purple / red / yellow)。
+     * 對照 Badge / Tag 的 primitive color variants。
+     */
+    color?: 'blue' | 'green' | 'orange' | 'purple' | 'red' | 'yellow';
+    metadata?: Record<string, unknown>;
+}
+export type CalendarView = 'month' | 'week' | 'day';
+export interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /** 當前 view(MVP 只 'month',其餘 view tech debt) */
+    view?: CalendarView;
+    defaultView?: CalendarView;
+    onViewChange?: (view: CalendarView) => void;
+    /** 聚焦日期(月 view 的那個月) */
+    referenceDate?: Date;
+    defaultReferenceDate?: Date;
+    onReferenceDateChange?: (date: Date) => void;
+    /** 事件資料 */
+    events?: CalendarEvent[];
+    /** 點 event tile 回調 */
+    onEventClick?: (event: CalendarEvent) => void;
+    /** 點月 cell 回調(用於新增) */
+    onDateClick?: (date: Date) => void;
+    /** 點新事件 CTA 回調 */
+    onCreateEvent?: () => void;
+    /** 0 = Sunday, 1 = Monday。預設 0(對齊 Google Calendar 美系預設) */
+    weekStartsOn?: 0 | 1;
+    /** 自訂 event tile 渲染 */
+    renderEventTile?: (event: CalendarEvent) => React.ReactNode;
+    /** size(MVP 只 md;lg 為 tech debt) */
+    size?: 'md' | 'lg';
+    className?: string;
+    /** locale(預設 'en-US') */
+    locale?: string;
+    /** ARIA labels for chrome controls. Override for i18n. */
+    prevAriaLabel?: string;
+    nextAriaLabel?: string;
+    viewToggleAriaLabel?: string;
+    todayLabel?: string;
+}
+declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>>;
+export declare const calendarMeta: {
+    readonly component: "Calendar";
+    readonly family: null;
+    readonly variants: {};
+    readonly sizes: {};
+    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly tokens: {
+        readonly bg: readonly ["bg-muted", "bg-neutral-hover", "bg-primary", "bg-surface"];
+        readonly fg: readonly ["text-fg-disabled", "text-fg-muted", "text-foreground"];
+        readonly ring: readonly ["ring-ring"];
+    };
+};
+export { Calendar };
+//# sourceMappingURL=calendar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/calendar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkB9B;;;;;;;;;;;;;;;;;GAiBG;AAIH,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,8DAA8D;IAC9D,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAA;IACjE,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACnC;AAED,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,CAAA;AAEnD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC3F,+CAA+C;IAC/C,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,WAAW,CAAC,EAAE,YAAY,CAAA;IAC1B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAA;IAE3C,wBAAwB;IACxB,aAAa,CAAC,EAAE,IAAI,CAAA;IACpB,oBAAoB,CAAC,EAAE,IAAI,CAAA;IAC3B,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IAE5C,WAAW;IACX,MAAM,CAAC,EAAE,aAAa,EAAE,CAAA;IAExB,sBAAsB;IACtB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IAC7C,uBAAuB;IACvB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IAClC,kBAAkB;IAClB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAE1B,2DAA2D;IAC3D,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;IAEpB,uBAAuB;IACvB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,KAAK,CAAC,SAAS,CAAA;IAE3D,oCAAoC;IACpC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IAEf,0DAA0D;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAoCD,QAAA,MAAM,QAAQ,sFAgQZ,CAAA;AAKF,eAAO,MAAM,YAAY;;;;;;;;;;;CAef,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/Calendar/calendar.js

@@ -0,0 +1,282 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+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 { 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)]"
+};
+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;
+  });
+}
+const MAX_TILES_PER_CELL = 3;
+const Calendar = React.forwardRef(function Calendar2({
+  view: viewProp,
+  defaultView = "month",
+  onViewChange,
+  referenceDate: referenceDateProp,
+  defaultReferenceDate,
+  onReferenceDateChange,
+  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
+  todayLabel = "今天",
+  // i18n-allow: DS default; consumer override via todayLabel prop
+  ...props
+}, ref) {
+  const [internalRef, setInternalRef] = React.useState(
+    defaultReferenceDate ?? /* @__PURE__ */ new Date()
+  );
+  const refDate = referenceDateProp ?? internalRef;
+  const setRefDate = React.useCallback(
+    (next) => {
+      if (referenceDateProp === void 0) setInternalRef(next);
+      onReferenceDateChange == null ? void 0 : onReferenceDateChange(next);
+    },
+    [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);
+    const gridStart = startOfWeek(monthStart, { weekStartsOn });
+    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 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 handlePrev = () => setRefDate(subMonths(refDate, 1));
+  const handleNext = () => setRefDate(addMonths(refDate, 1));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "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(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-2 shrink-0 border-b border-divider",
+              "px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "text",
+                    size: "sm",
+                    iconOnly: true,
+                    startIcon: ChevronLeft,
+                    "aria-label": prevAriaLabel,
+                    onClick: handlePrev
+                  }
+                ),
+                /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", onClick: handleToday, children: todayLabel }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "text",
+                    size: "sm",
+                    iconOnly: true,
+                    startIcon: ChevronRight,
+                    "aria-label": nextAriaLabel,
+                    onClick: handleNext
+                  }
+                )
+              ] }),
+              /* @__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("div", { className: "grid grid-cols-7 border-b border-divider bg-muted", children: weekdayNames.map((name, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "px-2 py-1.5 text-caption text-fg-muted font-normal text-center",
+            children: name
+          },
+          i
+        )) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "grid grid-cols-7 flex-1 min-h-0",
+            role: "grid",
+            "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 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 /* @__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);
+                            },
+                            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"
+                      ] })
+                    ] })
+                  ]
+                },
+                date.toISOString()
+              );
+            }) }, rowIdx))
+          }
+        )
+      ]
+    }
+  );
+});
+Calendar.displayName = "Calendar";
+const calendarMeta = {
+  component: "Calendar",
+  family: null,
+  // non-family composite / overlay / layout
+  variants: {},
+  sizes: {},
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: ["bg-muted", "bg-neutral-hover", "bg-primary", "bg-surface"],
+    fg: ["text-fg-disabled", "text-fg-muted", "text-foreground"],
+    ring: ["ring-ring"]
+  }
+};
+export {
+  Calendar,
+  calendarMeta
+};
+//# sourceMappingURL=calendar.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';
+/**
+ * Carousel — 圖片 / 內容水平(或垂直)輪播
+ *
+ * 實作基礎:shadcn `Carousel` 結構 + `embla-carousel-react` v8 engine + 本 DS token。
+ *
+ * ── 世界級對照 ──
+ * shadcn Carousel(本元件主要參考)/ Ant Carousel / Polaris 無 /
+ * Swiper(獨立 lib,功能更多但不在 DS 範疇)
+ *
+ * ── 視覺慣例(user 指示) ──
+ * 預設「hover 上去」左右兩邊才出現 prev/next 按鈕,不打擾主視覺;
+ * 指示器(dots)在底部中央,clickable。
+ *
+ * ── API(shadcn parity) ──
+ * <Carousel opts plugins orientation>
+ *   <CarouselContent>
+ *     <CarouselItem>...</CarouselItem>
+ *     <CarouselItem>...</CarouselItem>
+ *   </CarouselContent>
+ *   <CarouselPrevious />  ← 左箭頭
+ *   <CarouselNext />       ← 右箭頭
+ *   <CarouselDots />       ← 本 DS 擴充(shadcn 無,Ant/Swiper 慣例)
+ * </Carousel>
+ */
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+interface CarouselProps {
+    opts?: CarouselOptions;
+    plugins?: CarouselPlugin;
+    orientation?: 'horizontal' | 'vertical';
+    setApi?: (api: CarouselApi) => void;
+}
+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>>;
+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 tokens: {
+        readonly bg: readonly [];
+        readonly fg: readonly [];
+        readonly ring: readonly ["ring-ring"];
+    };
+};
+export { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, CarouselDots, type CarouselApi, };
+//# sourceMappingURL=carousel.d.ts.map

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

@@ -0,0 +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"}