@qijenchen/design-system 0.1.0-beta.10

package/dist/components/TimePicker/time-picker.d.ts

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import type { LucideIcon } from 'lucide-react';
+import type { FieldMode, FieldVariant } from '../../components/Field/field-types';
+import { type TimeParts, type TimeStep } from '../../components/TimePicker/time-columns';
+/**
+ * TimePicker — 單一時間(時/分/秒)輸入與顯示元件
+ *
+ * ── 定位(同 DatePicker 家族)──
+ * Value 以 ISO time string 儲存("HH:mm" 或 "HH:mm:ss"),local-time 語義(不帶時區)。
+ * Edit 用本 DS 自建 time column panel + Popover 呈現,視覺與 DatePicker 一致。
+ * Display 用 Intl.DateTimeFormat 格式化(跨 locale / 12h-24h 統一經過此 API)。
+ *
+ * ── Layout Family ──
+ * CLAUDE.md 4-Family Model Family 4(Field control layout)消費者。結構繼承
+ * `fieldWrapperStyles + [<editable>] [endIcon=Clock]`,視覺對齊 DatePicker(同
+ * 「點擊觸發浮層」role:indicator 在 suffix slot,對齊 Material `endAdornment` /
+ * Ant DatePicker / Polaris Picker 共識)。
+ *
+ * ── 實作基礎 ──
+ * Trigger:`<button>` + `fieldWrapperStyles`(視覺仍是 Input wrapper,改為可點擊觸發浮層)
+ * Popup:`Popover`(消費 overlay-surface pattern)
+ * Panel 主體:自建 column picker(三欄 scrollable list),不引入第三方 time library
+ *
+ * ── 共用規則 ──
+ * Mode / size / disabled / error 等詳見 `../Field/field-controls.spec.md`。
+ */
+export interface TimeFormatOptions {
+    /** Intl.DateTimeFormat options(預設 { hour: '2-digit', minute: '2-digit', hour12: false }) */
+    formatOptions?: Intl.DateTimeFormatOptions;
+    /** locale(預設 'en-US') */
+    locale?: string;
+}
+export interface DisabledTimeResult {
+    disabledHours?: number[];
+    disabledMinutes?: number[];
+    disabledSeconds?: number[];
+}
+export interface TimePickerProps extends TimeFormatOptions, Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'placeholder'> {
+    mode?: FieldMode;
+    /** Field chrome variant. Default = context.variant ?? 'default'. Per-prop override. */
+    variant?: FieldVariant;
+    error?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    /** ISO time string("HH:mm" 或 "HH:mm:ss") */
+    value?: string | null;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+    /** 允許清空已選值 */
+    clearable?: boolean;
+    /**
+     * 是否顯示秒欄(三欄 picker)。預設 false(兩欄:時/分)。
+     * format 自動對應:false → "HH:mm",true → "HH:mm:ss"。
+     */
+    showSeconds?: boolean;
+    /** 分鐘步進(會議常用 15)。預設 1 */
+    minuteStep?: TimeStep;
+    /** 秒步進。預設 1。僅 showSeconds=true 有效 */
+    secondStep?: TimeStep;
+    /** 動態 disabled 某些時/分/秒(基於已選其他欄位)。 */
+    disabledTime?: (parts: TimeParts) => DisabledTimeResult;
+    /**
+     * Suffix indicator(2026-05-05 v9 canonical fix):「點擊觸發浮層」indicator 一律 suffix
+     * (對齊 DatePicker calendar / Material endAdornment)。預設 Clock,傳 null 可關閉。
+     */
+    endIcon?: LucideIcon | null;
+    /**
+     * Display 是否渲 endIcon + Field naked wrapper(D-path opt-in,2026-05-08)
+     * — DataTable cell display↔edit 像素級對齊用。預設 false(裸 span,backward compat)。
+     * 設 true 時 display 也走 fieldWrapperStyles(naked variant)+ ItemSuffix Clock,
+     * 與 edit 同 DOM 結構,消除 Layer-B padding mismatch。
+     */
+    showDisplayEndIcon?: boolean;
+    /** Initial open state(uncontrolled)— DataTable cell-as-input 1-step open canonical */
+    defaultOpen?: boolean;
+    /** open state 變更 callback。DataTable cell-as-input 用:open=false → cell exit edit */
+    onOpenChange?: (open: boolean) => void;
+}
+declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLDivElement>>;
+export declare const timePickerMeta: {
+    readonly component: "TimePicker";
+    readonly family: 4;
+    readonly variants: {};
+    readonly sizes: {};
+    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly tokens: {
+        readonly bg: readonly ["bg-neutral-hover", "bg-primary", "bg-transparent"];
+        readonly fg: readonly ["text-fg-disabled", "text-fg-muted", "text-foreground"];
+        readonly ring: readonly [];
+    };
+};
+export { TimePicker };
+//# sourceMappingURL=time-picker.d.ts.map

package/dist/components/TimePicker/time-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/time-picker.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAW3F,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,QAAQ,EAEd,MAAM,oDAAoD,CAAA;AAG3D;;;;;;;;;;;;;;;;;;;;;GAqBG;AASH,MAAM,WAAW,iBAAiB;IAChC,4FAA4F;IAC5F,aAAa,CAAC,EAAE,IAAI,CAAC,qBAAqB,CAAA;IAC1C,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAsBD,MAAM,WAAW,kBAAkB;IACjC,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;CAC3B;AAID,MAAM,WAAW,eACf,SAAQ,iBAAiB,EACvB,IAAI,CACF,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,UAAU,GAAG,aAAa,CAC3B;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,uFAAuF;IACvF,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,yBAAyB;IACzB,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,qCAAqC;IACrC,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,qCAAqC;IACrC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,kBAAkB,CAAA;IACvD;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,IAAI,CAAA;IAC3B;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,sFAAsF;IACtF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,mFAAmF;IACnF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC;AAGD,QAAA,MAAM,UAAU,wFAgQf,CAAA;AAKD,eAAO,MAAM,cAAc;;;;;;;;;;;CAejB,CAAA;AAEV,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/components/TimePicker/time-picker.js

@@ -0,0 +1,253 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Clock, X } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { EMPTY_DISPLAY, fieldWrapperStyles, fieldDisplayTextClass, bareInputStyles } from "../Field/field-wrapper.js";
+import { ItemSuffix, ICON_SIZE, ItemInlineAction } from "../../patterns/element-anatomy/item-anatomy.js";
+import { Popover, PopoverTrigger, PopoverContent } from "../Popover/popover.js";
+import { useFieldContext } from "../Field/field-context.js";
+import { Button } from "../Button/button.js";
+import { isoToTimeParts, TimeColumns, timePartsToString } from "./time-columns.js";
+function formatTime(iso, options = {}) {
+  const parts = isoToTimeParts(iso);
+  if (!parts) return iso;
+  const {
+    formatOptions = { hour: "2-digit", minute: "2-digit", hour12: false },
+    locale = "en-US"
+  } = options;
+  const d = /* @__PURE__ */ new Date();
+  d.setHours(parts.hours, parts.minutes, parts.seconds, 0);
+  return new Intl.DateTimeFormat(locale, formatOptions).format(d);
+}
+const TimePicker = React.forwardRef(
+  ({
+    mode = "edit",
+    variant: variantProp,
+    error: errorProp = false,
+    size = "md",
+    value,
+    onChange,
+    placeholder,
+    className,
+    disabled: disabledProp,
+    clearable = false,
+    showSeconds = false,
+    minuteStep = 1,
+    secondStep = 1,
+    disabledTime,
+    endIcon,
+    showDisplayEndIcon = false,
+    formatOptions,
+    locale,
+    defaultOpen = false,
+    onOpenChange,
+    id: idProp,
+    "aria-describedby": ariaDescribedByProp,
+    "aria-errormessage": ariaErrorMessageProp,
+    ...props
+  }, ref) => {
+    const fieldCtx = useFieldContext();
+    const error = errorProp || ((fieldCtx == null ? void 0 : fieldCtx.invalid) ?? false);
+    const disabled = disabledProp ?? (fieldCtx == null ? void 0 : fieldCtx.disabled);
+    const resolvedMode = disabled ? "disabled" : mode;
+    const variant = variantProp ?? (fieldCtx == null ? void 0 : fieldCtx.variant) ?? "default";
+    const isEditable = resolvedMode === "edit";
+    const iconSize = ICON_SIZE[size];
+    const EndIconCmp = endIcon === null ? null : endIcon ?? Clock;
+    const defaultPlaceholder = showSeconds ? "HH:MM:SS" : "HH:MM";
+    const resolvedPlaceholder = placeholder ?? defaultPlaceholder;
+    const showClear = clearable && !!value && isEditable;
+    const [open, setOpenState] = React.useState(defaultOpen);
+    const setOpen = React.useCallback((next) => {
+      setOpenState(next);
+      onOpenChange == null ? void 0 : onOpenChange(next);
+    }, [onOpenChange]);
+    const currentParts = React.useMemo(() => isoToTimeParts(value), [value]);
+    const [draft, setDraft] = React.useState(
+      () => currentParts ?? { hours: 0, minutes: 0, seconds: 0 }
+    );
+    React.useEffect(() => {
+      if (open) {
+        setDraft(currentParts ?? { hours: 0, minutes: 0, seconds: 0 });
+      }
+    }, [open, currentParts]);
+    const disabledForColumns = React.useMemo(() => {
+      if (!disabledTime) return void 0;
+      const res = disabledTime(draft);
+      return {
+        hours: res.disabledHours,
+        minutes: res.disabledMinutes,
+        seconds: res.disabledSeconds
+      };
+    }, [disabledTime, draft]);
+    const commitDraft = (next) => {
+      setDraft(next);
+      onChange == null ? void 0 : onChange(timePartsToString(next, showSeconds));
+    };
+    const handleNow = () => {
+      const now = /* @__PURE__ */ new Date();
+      const m = Math.round(now.getMinutes() / minuteStep) * minuteStep;
+      const s = showSeconds ? Math.round(now.getSeconds() / secondStep) * secondStep : 0;
+      const next = {
+        hours: now.getHours(),
+        minutes: Math.min(m, 59),
+        seconds: Math.min(s, 59)
+      };
+      commitDraft(next);
+      setOpen(false);
+    };
+    if (resolvedMode === "display") {
+      if (!showDisplayEndIcon) {
+        if (!value) return /* @__PURE__ */ jsx("span", { className: cn(fieldDisplayTextClass(size), "text-fg-muted", className), children: EMPTY_DISPLAY });
+        return /* @__PURE__ */ jsx("span", { className: cn(fieldDisplayTextClass(size), "truncate", className), children: formatTime(value, { formatOptions, locale }) });
+      }
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(fieldWrapperStyles({ mode: "display", variant, size }), className),
+          "data-field-mode": "display",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: cn(bareInputStyles, "flex-1 min-w-0 truncate", !value && "text-fg-muted"), children: value ? formatTime(value, { formatOptions, locale }) : EMPTY_DISPLAY }),
+            EndIconCmp && /* @__PURE__ */ jsx(ItemSuffix, { className: "pointer-events-none", children: /* @__PURE__ */ jsx(EndIconCmp, { size: iconSize, className: "text-fg-muted", "aria-hidden": true }) })
+          ]
+        }
+      );
+    }
+    if (!isEditable) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(fieldWrapperStyles({ mode: resolvedMode, variant, size }), className),
+          "data-field-mode": resolvedMode,
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "flex-1 min-w-0",
+                  resolvedMode === "disabled" && "text-fg-disabled"
+                ),
+                children: value ? formatTime(value, { formatOptions, locale }) : /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: EMPTY_DISPLAY })
+              }
+            ),
+            EndIconCmp && /* @__PURE__ */ jsx(ItemSuffix, { className: "pointer-events-none", children: /* @__PURE__ */ jsx(
+              EndIconCmp,
+              {
+                size: iconSize,
+                className: resolvedMode === "disabled" ? "text-fg-disabled" : "text-fg-muted",
+                "aria-hidden": true
+              }
+            ) })
+          ]
+        }
+      );
+    }
+    const displayText = value ? formatTime(value, { formatOptions, locale }) : /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: resolvedPlaceholder });
+    return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          id: idProp ?? (fieldCtx == null ? void 0 : fieldCtx.id),
+          role: "combobox",
+          tabIndex: disabled ? -1 : 0,
+          "aria-disabled": disabled || void 0,
+          "aria-labelledby": fieldCtx == null ? void 0 : fieldCtx.labelId,
+          "aria-invalid": error || void 0,
+          "aria-required": (fieldCtx == null ? void 0 : fieldCtx.required) || void 0,
+          "aria-describedby": ariaDescribedByProp ?? (fieldCtx == null ? void 0 : fieldCtx.descriptionId),
+          "aria-errormessage": ariaErrorMessageProp ?? (error ? fieldCtx == null ? void 0 : fieldCtx.errorId : void 0),
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          "data-field-mode": "edit",
+          "data-error": error ? "" : void 0,
+          className: cn(
+            fieldWrapperStyles({ mode: "edit", variant, size }),
+            "text-left cursor-pointer",
+            "focus-visible:outline-none",
+            error && [
+              "border-error hover:border-error-hover",
+              "focus-within:border-error focus-within:hover:border-error"
+            ],
+            className
+          ),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: cn(bareInputStyles, "truncate", !value && "text-fg-muted"), children: displayText }),
+            showClear && /* @__PURE__ */ jsx(
+              ItemInlineAction,
+              {
+                size: size ?? "md",
+                action: {
+                  icon: X,
+                  label: "清除時間",
+                  // i18n-allow: DS default inline-action label
+                  onClick: (e) => {
+                    e == null ? void 0 : e.stopPropagation();
+                    onChange == null ? void 0 : onChange("");
+                  }
+                }
+              }
+            ),
+            EndIconCmp && /* @__PURE__ */ jsx(ItemSuffix, { className: "pointer-events-none", children: /* @__PURE__ */ jsx(EndIconCmp, { size: iconSize, className: "text-fg-muted", "aria-hidden": true }) })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-[216px]", children: [
+        /* @__PURE__ */ jsx(
+          TimeColumns,
+          {
+            value: draft,
+            onChange: commitDraft,
+            showSeconds,
+            minuteStep,
+            secondStep,
+            disabled: disabledForColumns,
+            className: "flex-1 min-h-0"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-between gap-2",
+              "border-t border-divider",
+              "px-[var(--layout-space-tight)] py-[var(--layout-space-tight)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Button, { variant: "text", size: "sm", onClick: handleNow, children: "此刻" }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "primary",
+                  size: "sm",
+                  onClick: () => setOpen(false),
+                  children: "確定"
+                }
+              )
+            ]
+          }
+        )
+      ] }) })
+    ] });
+  }
+);
+TimePicker.displayName = "TimePicker";
+const timePickerMeta = {
+  component: "TimePicker",
+  family: 4,
+  variants: {},
+  sizes: {},
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: ["bg-neutral-hover", "bg-primary", "bg-transparent"],
+    fg: ["text-fg-disabled", "text-fg-muted", "text-foreground"],
+    ring: []
+  }
+};
+export {
+  TimePicker,
+  timePickerMeta
+};
+//# sourceMappingURL=time-picker.js.map

package/dist/components/TimePicker/time-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.js","sources":["../../../src/components/TimePicker/time-picker.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 { X, Clock } from 'lucide-react'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport type { FieldMode, FieldVariant } from '@/design-system/components/Field/field-types'\nimport {\n  fieldWrapperStyles,\n  bareInputStyles,\n  EMPTY_DISPLAY,\n  fieldDisplayTextClass,\n} from '@/design-system/components/Field/field-wrapper'\nimport { ItemInlineAction, ItemSuffix } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { Popover, PopoverTrigger, PopoverContent } from '@/design-system/components/Popover/popover'\nimport { useFieldContext } from '@/design-system/components/Field/field-context'\nimport { Button } from '@/design-system/components/Button/button'\nimport {\n  TimeColumns,\n  isoToTimeParts,\n  timePartsToString,\n  type TimeParts,\n  type TimeStep,\n  type TimeColumnsDisabled,\n} from '@/design-system/components/TimePicker/time-columns'\nimport { ICON_SIZE } from '@/design-system/tokens/uiSize/icon-size'\n\n/**\n * TimePicker — 單一時間(時/分/秒)輸入與顯示元件\n *\n * ── 定位(同 DatePicker 家族)──\n * Value 以 ISO time string 儲存(\"HH:mm\" 或 \"HH:mm:ss\"),local-time 語義(不帶時區)。\n * Edit 用本 DS 自建 time column panel + Popover 呈現,視覺與 DatePicker 一致。\n * Display 用 Intl.DateTimeFormat 格式化(跨 locale / 12h-24h 統一經過此 API)。\n *\n * ── Layout Family ──\n * CLAUDE.md 4-Family Model Family 4(Field control layout)消費者。結構繼承\n * `fieldWrapperStyles + [<editable>] [endIcon=Clock]`,視覺對齊 DatePicker(同\n * 「點擊觸發浮層」role:indicator 在 suffix slot,對齊 Material `endAdornment` /\n * Ant DatePicker / Polaris Picker 共識)。\n *\n * ── 實作基礎 ──\n * Trigger:`<button>` + `fieldWrapperStyles`(視覺仍是 Input wrapper,改為可點擊觸發浮層)\n * Popup:`Popover`(消費 overlay-surface pattern)\n * Panel 主體:自建 column picker(三欄 scrollable list),不引入第三方 time library\n *\n * ── 共用規則 ──\n * Mode / size / disabled / error 等詳見 `../Field/field-controls.spec.md`。\n */\n\n// ── Time ISO <-> parts conversion ───────────────────────────────────────────\n// Value 用 ISO time string(HH:mm 或 HH:mm:ss),local-time 語義(不帶時區/日期)。\n// 跟 DatePicker 的 ISO date string 策略一致。\n// `isoToTimeParts` / `timePartsToString` 改 import from time-columns(M17 SSOT)。\n\n// ── Display formatting ──────────────────────────────────────────────────────\n\nexport interface TimeFormatOptions {\n  /** Intl.DateTimeFormat options(預設 { hour: '2-digit', minute: '2-digit', hour12: false }) */\n  formatOptions?: Intl.DateTimeFormatOptions\n  /** locale(預設 'en-US') */\n  locale?: string\n}\n\nfunction formatTime(\n  iso: string,\n  options: TimeFormatOptions = {},\n): string {\n  const parts = isoToTimeParts(iso)\n  if (!parts) return iso\n  const {\n    formatOptions = { hour: '2-digit', minute: '2-digit', hour12: false },\n    locale = 'en-US',\n  } = options\n  // 借用 Date 讓 Intl.DateTimeFormat 處理 locale / 12h-24h\n  const d = new Date()\n  d.setHours(parts.hours, parts.minutes, parts.seconds, 0)\n  return new Intl.DateTimeFormat(locale, formatOptions).format(d)\n}\n\n// ── Disabled time callback ──────────────────────────────────────────────────\n// `Step` / `buildRange` / `TimeColumn`(內部欄位實作)拔掉,改 import `TimeColumns` primitive。\n\n// code-quality-allow: dead-export — public API surface — consumer-exposed for future use\nexport interface DisabledTimeResult {\n  disabledHours?: number[]\n  disabledMinutes?: number[]\n  disabledSeconds?: number[]\n}\n\n// ── Component props ─────────────────────────────────────────────────────────\n\nexport interface TimePickerProps\n  extends TimeFormatOptions,\n    Omit<\n      React.HTMLAttributes<HTMLDivElement>,\n      'onChange' | 'placeholder'\n    > {\n  mode?: FieldMode\n  /** Field chrome variant. Default = context.variant ?? 'default'. Per-prop override. */\n  variant?: FieldVariant\n  error?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  /** ISO time string(\"HH:mm\" 或 \"HH:mm:ss\") */\n  value?: string | null\n  onChange?: (value: string) => void\n  placeholder?: string\n  className?: string\n  disabled?: boolean\n  /** 允許清空已選值 */\n  clearable?: boolean\n  /**\n   * 是否顯示秒欄(三欄 picker)。預設 false(兩欄:時/分)。\n   * format 自動對應:false → \"HH:mm\",true → \"HH:mm:ss\"。\n   */\n  showSeconds?: boolean\n  /** 分鐘步進(會議常用 15)。預設 1 */\n  minuteStep?: TimeStep\n  /** 秒步進。預設 1。僅 showSeconds=true 有效 */\n  secondStep?: TimeStep\n  /** 動態 disabled 某些時/分/秒(基於已選其他欄位)。 */\n  disabledTime?: (parts: TimeParts) => DisabledTimeResult\n  /**\n   * Suffix indicator(2026-05-05 v9 canonical fix):「點擊觸發浮層」indicator 一律 suffix\n   * (對齊 DatePicker calendar / Material endAdornment)。預設 Clock,傳 null 可關閉。\n   */\n  endIcon?: LucideIcon | null\n  /**\n   * Display 是否渲 endIcon + Field naked wrapper(D-path opt-in,2026-05-08)\n   * — DataTable cell display↔edit 像素級對齊用。預設 false(裸 span,backward compat)。\n   * 設 true 時 display 也走 fieldWrapperStyles(naked variant)+ ItemSuffix Clock,\n   * 與 edit 同 DOM 結構,消除 Layer-B padding mismatch。\n   */\n  showDisplayEndIcon?: boolean\n  /** Initial open state(uncontrolled)— DataTable cell-as-input 1-step open canonical */\n  defaultOpen?: boolean\n  /** open state 變更 callback。DataTable cell-as-input 用:open=false → cell exit edit */\n  onOpenChange?: (open: boolean) => void\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(\n  (\n    {\n      mode = 'edit',\n      variant: variantProp,\n      error: errorProp = false,\n      size = 'md',\n      value,\n      onChange,\n      placeholder,\n      className,\n      disabled: disabledProp,\n      clearable = false,\n      showSeconds = false,\n      minuteStep = 1,\n      secondStep = 1,\n      disabledTime,\n      endIcon,\n      showDisplayEndIcon = false,\n      formatOptions,\n      locale,\n      defaultOpen = false,\n      onOpenChange,\n      id: idProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-errormessage': ariaErrorMessageProp,\n      ...props\n    },\n    ref,\n  ) => {\n    const fieldCtx = useFieldContext()\n    const error = errorProp || (fieldCtx?.invalid ?? false)\n    const disabled = disabledProp ?? fieldCtx?.disabled\n    const resolvedMode = disabled ? 'disabled' : mode\n    const variant: FieldVariant = variantProp ?? fieldCtx?.variant ?? 'default'\n    const isEditable = resolvedMode === 'edit'\n    // 2026-05-18 改 import ICON_SIZE SSOT(per user『做完』approval,消除 M17 違反 7+ 重複 ternary)\n  const iconSize = ICON_SIZE[size as 'sm' | 'md' | 'lg']\n    const EndIconCmp: LucideIcon | null =\n      endIcon === null ? null : (endIcon ?? Clock)\n    const defaultPlaceholder = showSeconds ? 'HH:MM:SS' : 'HH:MM'\n    const resolvedPlaceholder = placeholder ?? defaultPlaceholder\n    const showClear = clearable && !!value && isEditable\n    const [open, setOpenState] = React.useState(defaultOpen)\n    const setOpen = React.useCallback((next: boolean) => { setOpenState(next); onOpenChange?.(next) }, [onOpenChange])\n\n    const currentParts = React.useMemo(() => isoToTimeParts(value), [value])\n    // draft 僅在 panel 開啟時用來處理 commit(OK button)的暫存\n    const [draft, setDraft] = React.useState<TimeParts>(\n      () => currentParts ?? { hours: 0, minutes: 0, seconds: 0 },\n    )\n\n    // 每次 popover 開啟時以當前 value 初始化 draft\n    React.useEffect(() => {\n      if (open) {\n        setDraft(currentParts ?? { hours: 0, minutes: 0, seconds: 0 })\n      }\n    }, [open, currentParts])\n\n    const disabledForColumns: TimeColumnsDisabled | undefined = React.useMemo(() => {\n      if (!disabledTime) return undefined\n      const res = disabledTime(draft)\n      return {\n        hours: res.disabledHours,\n        minutes: res.disabledMinutes,\n        seconds: res.disabledSeconds,\n      }\n    }, [disabledTime, draft])\n\n    const commitDraft = (next: TimeParts) => {\n      setDraft(next)\n      onChange?.(timePartsToString(next, showSeconds))\n    }\n\n    const handleNow = () => {\n      const now = new Date()\n      // 按照 minuteStep / secondStep 對齊\n      const m = Math.round(now.getMinutes() / minuteStep) * minuteStep\n      const s = showSeconds\n        ? Math.round(now.getSeconds() / secondStep) * secondStep\n        : 0\n      const next: TimeParts = {\n        hours: now.getHours(),\n        minutes: Math.min(m, 59),\n        seconds: Math.min(s, 59),\n      }\n      commitDraft(next)\n      setOpen(false)\n    }\n\n    // mode='display'(Phase B2 2026-05-05):純內容輸出 — 對齊原 TimePickerDisplay sub-component(retired)。\n    //   Default(showDisplayEndIcon=false):無 Field wrapper / 無 Clock icon — backward compat 裸 span。\n    //   Opt-in(showDisplayEndIcon=true,2026-05-08 D-path):Field naked wrapper + ItemSuffix Clock,\n    //   與 edit 同結構消除 cell display↔edit 像素偏移(Layer-B padding mismatch)。\n    if (resolvedMode === 'display') {\n      if (!showDisplayEndIcon) {\n        // 2026-05-14 I2 fix(spec contract (e) display typography canonical):bare span 套\n        // `fieldDisplayTextClass(size)`(sm/md→text-body,lg→text-body-lg)— 對齊 Field family 統一。\n        if (!value) return <span className={cn(fieldDisplayTextClass(size), 'text-fg-muted', className)}>{EMPTY_DISPLAY}</span>\n        return <span className={cn(fieldDisplayTextClass(size), 'truncate', className)}>{formatTime(value, { formatOptions, locale })}</span>\n      }\n      return (\n        <div\n          className={cn(fieldWrapperStyles({ mode: 'display', variant, size }), className)}\n          data-field-mode=\"display\"\n        >\n          <span className={cn(bareInputStyles, 'flex-1 min-w-0 truncate', !value && 'text-fg-muted')}>\n            {value ? formatTime(value, { formatOptions, locale }) : EMPTY_DISPLAY}\n          </span>\n          {EndIconCmp && (\n            <ItemSuffix className=\"pointer-events-none\">\n              <EndIconCmp size={iconSize} className=\"text-fg-muted\" aria-hidden />\n            </ItemSuffix>\n          )}\n        </div>\n      )\n    }\n\n    // readonly / disabled\n    if (!isEditable) {\n      return (\n        <div\n          className={cn(fieldWrapperStyles({ mode: resolvedMode, variant: variant, size }), className)}\n          data-field-mode={resolvedMode}\n          {...(props as React.HTMLAttributes<HTMLDivElement>)}\n        >\n          <span\n            className={cn(\n              'flex-1 min-w-0',\n              resolvedMode === 'disabled' && 'text-fg-disabled',\n            )}\n          >\n            {value\n              ? formatTime(value, { formatOptions, locale })\n              : <span className=\"text-fg-muted\">{EMPTY_DISPLAY}</span>\n            }\n          </span>\n          {EndIconCmp && (\n            <ItemSuffix className=\"pointer-events-none\">\n              <EndIconCmp\n                size={iconSize}\n                className={resolvedMode === 'disabled' ? 'text-fg-disabled' : 'text-fg-muted'}\n                aria-hidden\n              />\n            </ItemSuffix>\n          )}\n        </div>\n      )\n    }\n\n    const displayText = value\n      ? formatTime(value, { formatOptions, locale })\n      : <span className=\"text-fg-muted\">{resolvedPlaceholder}</span>\n\n    return (\n      <Popover open={open} onOpenChange={setOpen}>\n        {/* a11y(2026-04-25 nested-interactive fix):trigger 改 <div role='combobox'>\n            (對齊 Select / Combobox 同 pattern),原 <button> 會與內層 ItemInlineAction\n            清除 button 構成 nested-interactive。Radix Popover 在 trigger asChild 下會\n            自動 inject keyboard handler(Enter / Space 開啟)+ 正確 aria attributes。 */}\n        <PopoverTrigger asChild>\n          <div\n            ref={ref}\n            id={idProp ?? fieldCtx?.id}\n            role=\"combobox\"\n            tabIndex={disabled ? -1 : 0}\n            aria-disabled={disabled || undefined}\n            aria-labelledby={fieldCtx?.labelId}\n            aria-invalid={error || undefined}\n            aria-required={fieldCtx?.required || undefined}\n            aria-describedby={ariaDescribedByProp ?? fieldCtx?.descriptionId}\n            aria-errormessage={ariaErrorMessageProp ?? (error ? fieldCtx?.errorId : undefined)}\n            aria-haspopup=\"dialog\"\n            aria-expanded={open}\n            data-field-mode=\"edit\"\n            data-error={error ? '' : undefined}\n            className={cn(\n              fieldWrapperStyles({ mode: 'edit', variant: variant, size }),\n              'text-left cursor-pointer',\n              'focus-visible:outline-none',\n              error && [\n                'border-error hover:border-error-hover',\n                'focus-within:border-error focus-within:hover:border-error',\n              ],\n              className,\n            )}\n            {...props}\n          >\n            <span className={cn(bareInputStyles, 'truncate', !value && 'text-fg-muted')}>\n              {displayText}\n            </span>\n            {showClear && (\n              <ItemInlineAction\n                size={size ?? 'md'}\n                action={{\n                  icon: X,\n                  label: '清除時間', // i18n-allow: DS default inline-action label\n                  onClick: (e) => {\n                    e?.stopPropagation()\n                    onChange?.('')\n                  },\n                }}\n              />\n            )}\n            {EndIconCmp && (\n              <ItemSuffix className=\"pointer-events-none\">\n                <EndIconCmp size={iconSize} className=\"text-fg-muted\" aria-hidden />\n              </ItemSuffix>\n            )}\n          </div>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          {/* Panel 對齊 ref/timepicker.png:2-3 個 SelectMenu 式欄位並排,分隔線分開。\n              Width 依欄數由 TimeColumns 決定:2 欄 w-40 / 3 欄 w-60。\n              Height 由 wrapper 控:216px 預設(~7 items)。\n              TimeColumns 本身 h-full,parent 控 height — 讓 DatePicker showTime / Range 可\n              用 flex-row items-stretch 自動同 calendar 高。 */}\n          <div className=\"flex flex-col h-[216px]\">\n            <TimeColumns\n              value={draft}\n              onChange={commitDraft}\n              showSeconds={showSeconds}\n              minuteStep={minuteStep}\n              secondStep={secondStep}\n              disabled={disabledForColumns}\n              // 2026-05-06 v9.1 M25 chain fix:TimeColumns 自然高 = 24 buttons × ~28.7px = 688px\n              // 會撐破 parent h-[216px]。flex-1 + min-h-0 讓 TimeColumns 取 parent 剩餘空間\n              // (216 - footer 40 = 176px)→ ScrollArea h-full 才能正確收斂 →\n              // listbox scrollIntoView 找對 nearest scrollable ancestor(內部 viewport),\n              // 不會走到 document body 把 popover 內容推出畫面(user 報「hours 欄空白」根因)。\n              className=\"flex-1 min-h-0\"\n            />\n            {/* Footer:Now + OK */}\n            <div\n              className={cn(\n                'flex items-center justify-between gap-2',\n                'border-t border-divider',\n                'px-[var(--layout-space-tight)] py-[var(--layout-space-tight)]',\n              )}\n            >\n              <Button variant=\"text\" size=\"sm\" onClick={handleNow}>\n                此刻\n              </Button>\n              <Button\n                variant=\"primary\"\n                size=\"sm\"\n                onClick={() => setOpen(false)}\n              >\n                確定\n              </Button>\n            </div>\n          </div>\n        </PopoverContent>\n      </Popover>\n    )\n  },\n)\nTimePicker.displayName = 'TimePicker'\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 timePickerMeta = {\n  component: 'TimePicker',\n  family: 4,\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-neutral-hover', 'bg-primary', 'bg-transparent'],\n    fg: ['text-fg-disabled', 'text-fg-muted', 'text-foreground'],\n    ring: [],\n  },\n} as const\n\nexport { TimePicker }\n"],"names":[],"mappings":"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"}

package/dist/components/Toast/toast.d.ts

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { type NoticeVariant } from '../../components/Notice/notice';
+/**
+ * Toast — 非阻斷式浮動通知
+ *
+ * ── Container 三層結構（所有 variant 統一） ──
+ *
+ * 1. Shadow wrapper: rounded-lg + elevation-200（永遠在頁面 theme 解析）
+ * 2. Bg layer: bg-{color}（有色相 variant 在頁面 theme 解析）
+ * 3. Theme layer: data-theme + text-foreground（content token re-resolve）
+ *
+ * neutral/success(inverse): bg + theme 同層（bg-surface-raised 需要跟 data-theme 一起翻轉）
+ * info/error(dark): bg 在 outer,theme 在 inner
+ * warning(light always): bg 在 outer,theme="light" 在 inner
+ */
+export type ToastVariant = NoticeVariant;
+export interface ToastOptions {
+    variant?: ToastVariant;
+    title: string;
+    description?: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    duration?: number;
+}
+export declare function toast(options: ToastOptions): string | number;
+export interface ToasterProps {
+    position?: 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
+}
+declare const Toaster: React.ForwardRefExoticComponent<ToasterProps & React.RefAttributes<HTMLDivElement>>;
+export declare const toastMeta: {
+    readonly component: "Toast";
+    readonly family: null;
+    readonly variants: {
+        readonly neutral: {
+            readonly when: "非狀態通知;一般 announcement / tip";
+        };
+        readonly info: {
+            readonly when: "資訊性提示(新版本 / 同步完成)";
+        };
+        readonly success: {
+            readonly when: "成功確認(已寄送 / 付款完成)";
+        };
+        readonly warning: {
+            readonly when: "可恢復警告(未儲存 / 連線不穩)";
+        };
+        readonly error: {
+            readonly when: "錯誤(匯入失敗 / 權限不足);action prop 可加重試";
+        };
+    };
+    readonly sizes: {};
+    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly tokens: {
+        readonly bg: readonly ["bg-error", "bg-info", "bg-surface-raised", "bg-warning"];
+        readonly fg: readonly ["text-foreground"];
+        readonly ring: readonly [];
+    };
+};
+export { Toaster };
+//# sourceMappingURL=toast.d.ts.map

package/dist/components/Toast/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAA2B,KAAK,aAAa,EAAE,MAAM,0CAA0C,CAAA;AAGtG;;;;;;;;;;;;GAYG;AAGH,MAAM,MAAM,YAAY,GAAG,aAAa,CAAA;AAExC,MAAM,WAAW,YAAY;IAC3B,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAA;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAqDD,wBAAgB,KAAK,CAAC,OAAO,EAAE,YAAY,mBAG1C;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,aAAa,GAAG,cAAc,GAAG,eAAe,CAAA;CACtG;AAMD,QAAA,MAAM,OAAO,qFAUZ,CAAA;AAKD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBZ,CAAA;AAEV,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/dist/components/Toast/toast.js

@@ -0,0 +1,76 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Toaster as Toaster$1, toast as toast$1 } from "sonner";
+import { useInverseTheme, Notice } from "../Notice/notice.js";
+import { Button } from "../Button/button.js";
+function ToastInner({
+  id,
+  variant = "neutral",
+  action,
+  ...rest
+}) {
+  const inverseTheme = useInverseTheme();
+  const isInverse = variant === "neutral" || variant === "success";
+  const dismiss = () => toast$1.dismiss(id);
+  const actionButton = action ? /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", onClick: action.onClick, children: action.label }) : void 0;
+  const isCritical = variant === "error" || variant === "warning";
+  const liveRole = isCritical ? "alert" : "status";
+  const liveLevel = isCritical ? "assertive" : "polite";
+  if (isInverse) {
+    return /* @__PURE__ */ jsx("div", { role: liveRole, "aria-live": liveLevel, className: "rounded-lg overflow-hidden", style: { boxShadow: "var(--elevation-200)" }, children: /* @__PURE__ */ jsx("div", { "data-theme": inverseTheme, className: "bg-surface-raised text-foreground", children: /* @__PURE__ */ jsx(
+      Notice,
+      {
+        variant,
+        iconClassName: variant === "success" ? "text-success" : void 0,
+        endContent: actionButton,
+        onDismiss: dismiss,
+        ...rest
+      }
+    ) }) });
+  }
+  const bg = variant === "warning" ? "bg-warning" : variant === "error" ? "bg-error" : "bg-info";
+  const theme = variant === "warning" ? "light" : "dark";
+  return /* @__PURE__ */ jsx("div", { role: liveRole, "aria-live": liveLevel, className: "rounded-lg overflow-hidden", style: { boxShadow: "var(--elevation-200)" }, children: /* @__PURE__ */ jsx("div", { className: bg, children: /* @__PURE__ */ jsx("div", { "data-theme": theme, className: "text-foreground", children: /* @__PURE__ */ jsx(Notice, { variant, endContent: actionButton, onDismiss: dismiss, ...rest }) }) }) });
+}
+function toast(options) {
+  const { duration = 4e3, ...rest } = options;
+  return toast$1.custom((id) => /* @__PURE__ */ jsx(ToastInner, { id, ...rest }), { duration });
+}
+const Toaster = React.forwardRef(
+  ({ position = "bottom-right", ...props }, _ref) => {
+    return /* @__PURE__ */ jsx(
+      Toaster$1,
+      {
+        position,
+        toastOptions: { unstyled: true, className: "w-[360px]" },
+        ...props
+      }
+    );
+  }
+);
+Toaster.displayName = "Toaster";
+const toastMeta = {
+  component: "Toast",
+  family: null,
+  // non-family composite / overlay / layout
+  variants: {
+    neutral: { when: "非狀態通知;一般 announcement / tip" },
+    info: { when: "資訊性提示(新版本 / 同步完成)" },
+    success: { when: "成功確認(已寄送 / 付款完成)" },
+    warning: { when: "可恢復警告(未儲存 / 連線不穩)" },
+    error: { when: "錯誤(匯入失敗 / 權限不足);action prop 可加重試" }
+  },
+  sizes: {},
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: ["bg-error", "bg-info", "bg-surface-raised", "bg-warning"],
+    fg: ["text-foreground"],
+    ring: []
+  }
+};
+export {
+  Toaster,
+  toast,
+  toastMeta
+};
+//# sourceMappingURL=toast.js.map

package/dist/components/Toast/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sources":["../../../src/components/Toast/toast.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Toaster as SonnerToaster, toast as sonnerToast } from 'sonner'\nimport { Notice, useInverseTheme, type NoticeVariant } from '@/design-system/components/Notice/notice'\nimport { Button } from '@/design-system/components/Button/button'\n\n/**\n * Toast — 非阻斷式浮動通知\n *\n * ── Container 三層結構（所有 variant 統一） ──\n *\n * 1. Shadow wrapper: rounded-lg + elevation-200（永遠在頁面 theme 解析）\n * 2. Bg layer: bg-{color}（有色相 variant 在頁面 theme 解析）\n * 3. Theme layer: data-theme + text-foreground（content token re-resolve）\n *\n * neutral/success(inverse): bg + theme 同層（bg-surface-raised 需要跟 data-theme 一起翻轉）\n * info/error(dark): bg 在 outer,theme 在 inner\n * warning(light always): bg 在 outer,theme=\"light\" 在 inner\n */\n\n// code-quality-allow: dead-export — public API surface — consumer-exposed for future use\nexport type ToastVariant = NoticeVariant\n\nexport interface ToastOptions {\n  variant?: ToastVariant\n  title: string\n  description?: string\n  action?: { label: string; onClick: () => void }\n  duration?: number\n}\n\nfunction ToastInner({\n  id,\n  variant = 'neutral',\n  action,\n  ...rest\n}: ToastOptions & { id: string | number }) {\n  const inverseTheme = useInverseTheme()\n  const isInverse = variant === 'neutral' || variant === 'success'\n  const dismiss = () => sonnerToast.dismiss(id)\n\n  const actionButton = action ? (\n    <Button variant=\"tertiary\" size=\"xs\" onClick={action.onClick}>{action.label}</Button>\n  ) : undefined\n\n  // ── Live region 由 outer Toast wrapper 擁有(WAI-ARIA + spec L59-60 canonical) ──\n  // Notice(inner layout)不再帶 role,避免 nested live region。\n  // - error / warning → role=\"alert\" + aria-live=\"assertive\"(中斷朗讀)\n  // - info / success / neutral → role=\"status\" + aria-live=\"polite\"(空閒朗讀)\n  const isCritical = variant === 'error' || variant === 'warning'\n  const liveRole = isCritical ? 'alert' : 'status'\n  const liveLevel = isCritical ? 'assertive' : 'polite'\n\n  // ── 1. Shadow wrapper（統一,永遠在頁面 theme） ──\n  // ── 2+3. Bg + theme layer ──\n\n  if (isInverse) {\n    // bg-surface-raised 需要跟 data-theme 同層翻轉\n    return (\n      <div role={liveRole} aria-live={liveLevel} className=\"rounded-lg overflow-hidden\" style={{ boxShadow: 'var(--elevation-200)' }}>\n        <div data-theme={inverseTheme} className=\"bg-surface-raised text-foreground\">\n          <Notice variant={variant} iconClassName={variant === 'success' ? 'text-success' : undefined}\n            endContent={actionButton} onDismiss={dismiss} {...rest} />\n        </div>\n      </div>\n    )\n  }\n\n  const bg = variant === 'warning' ? 'bg-warning' : variant === 'error' ? 'bg-error' : 'bg-info'\n  const theme = variant === 'warning' ? 'light' : 'dark'\n\n  return (\n    <div role={liveRole} aria-live={liveLevel} className=\"rounded-lg overflow-hidden\" style={{ boxShadow: 'var(--elevation-200)' }}>\n      <div className={bg}>\n        <div data-theme={theme} className=\"text-foreground\">\n          <Notice variant={variant} endContent={actionButton} onDismiss={dismiss} {...rest} />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport function toast(options: ToastOptions) {\n  const { duration = 4000, ...rest } = options\n  return sonnerToast.custom((id) => <ToastInner id={id} {...rest} />, { duration })\n}\n\nexport interface ToasterProps {\n  position?: 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center'\n}\n\n// shadcn canonical:forwardRef + displayName 統一。Sonner Toaster portal-renders\n// 到 document body,ref 對 Toaster 本身無實際 DOM 節點可接(portal 逃逸),\n// 但保留 forwardRef 簽名以符合 DS 統一 API(consumer 可 typecheck 傳 ref,\n// 與其他 DS 元件一致)。\nconst Toaster = React.forwardRef<HTMLDivElement, ToasterProps>(\n  ({ position = 'bottom-right', ...props }, _ref) => {\n    return (\n      <SonnerToaster\n        position={position}\n        toastOptions={{ unstyled: true, className: 'w-[360px]' }}\n        {...props}\n      />\n    )\n  },\n)\nToaster.displayName = 'Toaster'\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 toastMeta = {\n  component: 'Toast',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n    neutral: { when: '非狀態通知;一般 announcement / tip' },\n    info: { when: '資訊性提示(新版本 / 同步完成)' },\n    success: { when: '成功確認(已寄送 / 付款完成)' },\n    warning: { when: '可恢復警告(未儲存 / 連線不穩)' },\n    error: { when: '錯誤(匯入失敗 / 權限不足);action prop 可加重試' },\n  },\n  sizes: {},\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-error', 'bg-info', 'bg-surface-raised', 'bg-warning'],\n    fg: ['text-foreground'],\n    ring: [],\n  },\n} as const\n\nexport { Toaster }\n"],"names":["sonnerToast","SonnerToaster"],"mappings":";;;;;AA8BA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAA2C;AACzC,QAAM,eAAe,gBAAA;AACrB,QAAM,YAAY,YAAY,aAAa,YAAY;AACvD,QAAM,UAAU,MAAMA,QAAY,QAAQ,EAAE;AAE5C,QAAM,eAAe,SACnB,oBAAC,QAAA,EAAO,SAAQ,YAAW,MAAK,MAAK,SAAS,OAAO,SAAU,UAAA,OAAO,OAAM,IAC1E;AAMJ,QAAM,aAAa,YAAY,WAAW,YAAY;AACtD,QAAM,WAAW,aAAa,UAAU;AACxC,QAAM,YAAY,aAAa,cAAc;AAK7C,MAAI,WAAW;AAEb,+BACG,OAAA,EAAI,MAAM,UAAU,aAAW,WAAW,WAAU,8BAA6B,OAAO,EAAE,WAAW,0BACpG,UAAA,oBAAC,SAAI,cAAY,cAAc,WAAU,qCACvC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAO;AAAA,QAAkB,eAAe,YAAY,YAAY,iBAAiB;AAAA,QAChF,YAAY;AAAA,QAAc,WAAW;AAAA,QAAU,GAAG;AAAA,MAAA;AAAA,IAAA,GACtD,EAAA,CACF;AAAA,EAEJ;AAEA,QAAM,KAAK,YAAY,YAAY,eAAe,YAAY,UAAU,aAAa;AACrF,QAAM,QAAQ,YAAY,YAAY,UAAU;AAEhD,SACE,oBAAC,OAAA,EAAI,MAAM,UAAU,aAAW,WAAW,WAAU,8BAA6B,OAAO,EAAE,WAAW,uBAAA,GACpG,UAAA,oBAAC,SAAI,WAAW,IACd,UAAA,oBAAC,OAAA,EAAI,cAAY,OAAO,WAAU,mBAChC,8BAAC,QAAA,EAAO,SAAkB,YAAY,cAAc,WAAW,SAAU,GAAG,MAAM,EAAA,CACpF,GACF,GACF;AAEJ;AAEO,SAAS,MAAM,SAAuB;AAC3C,QAAM,EAAE,WAAW,KAAM,GAAG,SAAS;AACrC,SAAOA,QAAY,OAAO,CAAC,OAAO,oBAAC,YAAA,EAAW,IAAS,GAAG,KAAA,CAAM,GAAI,EAAE,SAAA,CAAU;AAClF;AAUA,MAAM,UAAU,MAAM;AAAA,EACpB,CAAC,EAAE,WAAW,gBAAgB,GAAG,MAAA,GAAS,SAAS;AACjD,WACE;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,cAAc,EAAE,UAAU,MAAM,WAAW,YAAA;AAAA,QAC1C,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AACA,QAAQ,cAAc;AAIf,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU;AAAA,IACR,SAAS,EAAE,MAAM,8BAAA;AAAA,IACjB,MAAM,EAAE,MAAM,oBAAA;AAAA,IACd,SAAS,EAAE,MAAM,mBAAA;AAAA,IACjB,SAAS,EAAE,MAAM,oBAAA;AAAA,IACjB,OAAO,EAAE,MAAM,mCAAA;AAAA,EAAmC;AAAA,EAEpD,OAAO,CAAA;AAAA,EACP,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAC,YAAY,WAAW,qBAAqB,YAAY;AAAA,IAC7D,IAAI,CAAC,iBAAiB;AAAA,IACtB,MAAM,CAAA;AAAA,EAAC;AAEX;"}

package/dist/components/Tooltip/tooltip.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+declare const TooltipProvider: ({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) => import("react/jsx-runtime").JSX.Element;
+declare const Tooltip: ({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const tooltipMeta: {
+    readonly component: "Tooltip";
+    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 [];
+    };
+};
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/components/Tooltip/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAU3D,QAAA,MAAM,eAAe,GAAI,6BAAoD,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,4CAElI,CAAA;AAED,QAAA,MAAM,OAAO,GAAI,6BAAoD,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,4CAEtH,CAAA;AAED,QAAA,MAAM,cAAc,gHAA2B,CAAA;AAE/C,QAAA,MAAM,cAAc,gKAwBlB,CAAA;AAKF,eAAO,MAAM,WAAW;;;;;;;;;;;CAed,CAAA;AAEV,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/Tooltip/tooltip.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "../../lib/utils.js";
+import { OVERLAY_COLLISION_PADDING, OVERLAY_SIDE_OFFSET } from "../../tokens/elevation/overlay-geometry.js";
+import { HOVER_DELAY_PLAIN_MS } from "../../tokens/motion/motion.js";
+const TooltipProvider = ({ delayDuration = HOVER_DELAY_PLAIN_MS, ...props }) => /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration, ...props });
+const Tooltip = ({ delayDuration = HOVER_DELAY_PLAIN_MS, ...props }) => /* @__PURE__ */ jsx(TooltipPrimitive.Root, { delayDuration, ...props });
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipContent = React.forwardRef(({ className, sideOffset = OVERLAY_SIDE_OFFSET, collisionPadding = OVERLAY_COLLISION_PADDING, style, children, ...props }, ref) => (
+  // collisionPadding default 8px:避免 tooltip 貼 viewport 邊(Radix avoidCollisions 預設 true 但 padding 0 會貼邊)
+  // 對齊 HoverCard canonical 避免 viewport edge clipping
+  /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    TooltipPrimitive.Content,
+    {
+      ref,
+      sideOffset,
+      collisionPadding,
+      className: cn(
+        "z-50 overflow-hidden rounded-md px-3 py-2 text-body font-normal text-on-emphasis bg-tooltip max-w-[280px]",
+        "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 motion-reduce:animate-none motion-reduce:zoom-in-100",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "origin-[var(--radix-tooltip-content-transform-origin)]",
+        className
+      ),
+      style: { boxShadow: "var(--elevation-200)", ...style },
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { "data-theme": "dark", className: "contents", children })
+    }
+  ) })
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+const tooltipMeta = {
+  component: "Tooltip",
+  family: null,
+  // non-family composite / overlay / layout
+  variants: {},
+  sizes: {},
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: [],
+    fg: [],
+    ring: []
+  }
+};
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  tooltipMeta
+};
+//# sourceMappingURL=tooltip.js.map