@qijenchen/design-system 0.1.0-beta.3 → 0.1.0-beta.32

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

@@ -0,0 +1,173 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { ScrollArea } from "../ScrollArea/scroll-area.js";
+import { cn } from "../../lib/utils.js";
+function isoToTimeParts(iso) {
+  if (!iso) return void 0;
+  const timeMatch = iso.match(/(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?/);
+  if (!timeMatch) return void 0;
+  const h = Number(timeMatch[1]);
+  const m = Number(timeMatch[2]);
+  const s = timeMatch[3] !== void 0 ? Number(timeMatch[3]) : 0;
+  if (Number.isNaN(h) || h < 0 || h > 23 || Number.isNaN(m) || m < 0 || m > 59 || Number.isNaN(s) || s < 0 || s > 59) return void 0;
+  return { hours: h, minutes: m, seconds: s };
+}
+function timePartsToString(parts, showSeconds = false) {
+  const hh = String(parts.hours).padStart(2, "0");
+  const mm = String(parts.minutes).padStart(2, "0");
+  if (!showSeconds) return `${hh}:${mm}`;
+  const ss = String(parts.seconds).padStart(2, "0");
+  return `${hh}:${mm}:${ss}`;
+}
+function buildRange(max, step) {
+  const arr = [];
+  for (let v = 0; v < max; v += step) arr.push(v);
+  return arr;
+}
+function TimeColumn({ values, selected, disabledSet, label, onSelect, withDivider }) {
+  const listRef = React.useRef(null);
+  const isFirstRunRef = React.useRef(true);
+  React.useEffect(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const idx = values.indexOf(selected);
+    if (idx < 0) return;
+    const item = list.children[idx];
+    if (!item) return;
+    item.scrollIntoView({ block: "center", behavior: isFirstRunRef.current ? "auto" : "smooth" });
+    isFirstRunRef.current = false;
+  }, [values, selected]);
+  const handleKeyDown = (e) => {
+    const idx = values.indexOf(selected);
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      const next = values.find((_, i) => i > idx && !(disabledSet == null ? void 0 : disabledSet.has(values[i]))) ?? values[idx];
+      onSelect(next);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      let i = idx - 1;
+      while (i >= 0 && (disabledSet == null ? void 0 : disabledSet.has(values[i]))) i--;
+      if (i >= 0) onSelect(values[i]);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      const first = values.find((v) => !(disabledSet == null ? void 0 : disabledSet.has(v)));
+      if (first !== void 0) onSelect(first);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      for (let i = values.length - 1; i >= 0; i--) {
+        if (!(disabledSet == null ? void 0 : disabledSet.has(values[i]))) {
+          onSelect(values[i]);
+          break;
+        }
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(ScrollArea, { className: cn("flex-1 h-full", withDivider && "border-r border-divider"), children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: listRef,
+      role: "listbox",
+      "aria-label": label,
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      className: "flex flex-col py-2 focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-[-2px]",
+      children: values.map((v) => {
+        const isSelected = v === selected;
+        const isDisabled = (disabledSet == null ? void 0 : disabledSet.has(v)) ?? false;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": isSelected,
+            disabled: isDisabled,
+            tabIndex: -1,
+            onClick: () => onSelect(v),
+            className: cn(
+              "w-full h-field-sm text-body tabular-nums",
+              "flex items-center justify-center",
+              "cursor-pointer transition-colors",
+              "hover:bg-neutral-hover",
+              isSelected && "bg-neutral-selected text-foreground hover:bg-neutral-selected",
+              isDisabled && "text-fg-disabled cursor-not-allowed hover:bg-transparent"
+            ),
+            children: String(v).padStart(2, "0")
+          },
+          v
+        );
+      })
+    }
+  ) });
+}
+function TimeColumns({
+  value,
+  onChange,
+  showSeconds = false,
+  minuteStep = 1,
+  secondStep = 1,
+  disabled,
+  className,
+  leadingDivider = false
+}) {
+  const safeValue = value ?? { hours: 0, minutes: 0, seconds: 0 };
+  const hourValues = React.useMemo(() => buildRange(24, 1), []);
+  const minuteValues = React.useMemo(() => buildRange(60, minuteStep), [minuteStep]);
+  const secondValues = React.useMemo(() => buildRange(60, secondStep), [secondStep]);
+  const disabledSets = React.useMemo(() => ({
+    hours: (disabled == null ? void 0 : disabled.hours) ? new Set(disabled.hours) : void 0,
+    minutes: (disabled == null ? void 0 : disabled.minutes) ? new Set(disabled.minutes) : void 0,
+    seconds: (disabled == null ? void 0 : disabled.seconds) ? new Set(disabled.seconds) : void 0
+  }), [disabled == null ? void 0 : disabled.hours, disabled == null ? void 0 : disabled.minutes, disabled == null ? void 0 : disabled.seconds]);
+  const widthClass = showSeconds ? "w-60" : "w-40";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-row",
+        widthClass,
+        leadingDivider && "border-l border-divider",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          TimeColumn,
+          {
+            values: hourValues,
+            selected: safeValue.hours,
+            disabledSet: disabledSets.hours,
+            label: "hours",
+            onSelect: (h) => onChange({ ...safeValue, hours: h }),
+            withDivider: true
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TimeColumn,
+          {
+            values: minuteValues,
+            selected: safeValue.minutes,
+            disabledSet: disabledSets.minutes,
+            label: "minutes",
+            onSelect: (m) => onChange({ ...safeValue, minutes: m }),
+            withDivider: showSeconds
+          }
+        ),
+        showSeconds && /* @__PURE__ */ jsx(
+          TimeColumn,
+          {
+            values: secondValues,
+            selected: safeValue.seconds,
+            disabledSet: disabledSets.seconds,
+            label: "seconds",
+            onSelect: (s) => onChange({ ...safeValue, seconds: s })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  TimeColumns,
+  isoToTimeParts,
+  timePartsToString
+};
+//# sourceMappingURL=time-columns.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-columns.js","sources":["../../../src/components/TimePicker/time-columns.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.\n/**\n * TimeColumns — H/M/S scroll selector primitive(M17 Rule-of-3 SSOT)。\n *\n * 共用消費者:\n * - `TimePicker`(本元件家)\n * - `DatePicker showTime`(date + time)\n * - `DatePickerRange showTime`(range with time)\n *\n * 抽出原因:三個 picker 共用 H/M/S column scroll-pick 行為,公式重覆 = M17 違反。\n * 抽到 TimePicker/(time scroll selector 的 canonical 家)。\n *\n * ── 設計 ──\n * - Value:`TimeParts { hours, minutes, seconds }`(對齊 date-fns / Date getHours()...)\n * - Step:每欄獨立 `minuteStep` / `secondStep`(會議常用 15)\n * - Disabled:`disabledHours / disabledMinutes / disabledSeconds`(動態根據已選其他欄位)\n * - Visual:對齊 ref/timepicker.png — 多欄並排 + border-r 分隔\n */\n\nimport * as React from 'react'\nimport { ScrollArea } from '@/design-system/components/ScrollArea/scroll-area'\nimport { cn } from '@/lib/utils'\n\n// ── Types ───────────────────────────────────────────────────────────────\n\nexport interface TimeParts {\n  hours: number\n  minutes: number\n  seconds: number\n}\n\nexport type TimeStep = 1 | 5 | 10 | 15 | 30\n\nexport interface TimeColumnsDisabled {\n  hours?: number[]\n  minutes?: number[]\n  seconds?: number[]\n}\n\n// ── ISO time parsing ────────────────────────────────────────────────────\n\n/** Parse \"HH:MM:SS\" / \"HH:MM\" / full ISO datetime — returns time parts only */\nexport function isoToTimeParts(iso: string | null | undefined): TimeParts | undefined {\n  if (!iso) return undefined\n  const timeMatch = iso.match(/(\\d{1,2}):(\\d{1,2})(?::(\\d{1,2}))?/)\n  if (!timeMatch) return undefined\n  const h = Number(timeMatch[1])\n  const m = Number(timeMatch[2])\n  const s = timeMatch[3] !== undefined ? Number(timeMatch[3]) : 0\n  if (\n    Number.isNaN(h) || h < 0 || h > 23 ||\n    Number.isNaN(m) || m < 0 || m > 59 ||\n    Number.isNaN(s) || s < 0 || s > 59\n  ) return undefined\n  return { hours: h, minutes: m, seconds: s }\n}\n\n/** Format time parts → \"HH:MM\" or \"HH:MM:SS\" depending on showSeconds */\nexport function timePartsToString(parts: TimeParts, showSeconds = false): string {\n  const hh = String(parts.hours).padStart(2, '0')\n  const mm = String(parts.minutes).padStart(2, '0')\n  if (!showSeconds) return `${hh}:${mm}`\n  const ss = String(parts.seconds).padStart(2, '0')\n  return `${hh}:${mm}:${ss}`\n}\n\n// ── Range builder ───────────────────────────────────────────────────────\n\nfunction buildRange(max: number, step: number): number[] {\n  const arr: number[] = []\n  for (let v = 0; v < max; v += step) arr.push(v)\n  return arr\n}\n\n// ── Single column ───────────────────────────────────────────────────────\n\ninterface TimeColumnProps {\n  values: number[]\n  selected: number\n  /** disabled value set(動態根據其他欄位推) */\n  disabledSet?: Set<number>\n  label: string\n  onSelect: (value: number) => void\n  /** 右側分隔線(對齊 ref 多欄樣式) */\n  withDivider?: boolean\n}\n\n// code-quality-allow: long-function — column 含 scroll-into-view useEffect / WAI-ARIA listbox 鍵盤 handler / 視覺 state 計算,拆 sub-fn 會切散 listbox accessibility 邏輯\nfunction TimeColumn({ values, selected, disabledSet, label, onSelect, withDivider }: TimeColumnProps) {\n  const listRef = React.useRef<HTMLDivElement>(null)\n\n  // 開啟時跳到 selected 位置(置中);後續變更走 smooth(對齊 iOS / Material / Ant timepicker idiom)。\n  // 用 scrollIntoView({ block: 'center' }) 自動找最近的 scrollable ancestor —\n  // 比 manual scrollTop + parentElement 強健(Radix ScrollArea 結構為 Viewport > inner-div > content,\n  // listRef.parentElement 不是真正 scrollable 元素)。\n  // mount 用 'auto' 避免開啟瞬間出現飄移,後續 user 操作走 'smooth'(同 Tabs/Chip/FileViewer canonical)。\n  const isFirstRunRef = React.useRef(true)\n  React.useEffect(() => {\n    const list = listRef.current\n    if (!list) return\n    const idx = values.indexOf(selected)\n    if (idx < 0) return\n    const item = list.children[idx] as HTMLElement | undefined\n    if (!item) return\n    item.scrollIntoView({ block: 'center', behavior: isFirstRunRef.current ? 'auto' : 'smooth' })\n    isFirstRunRef.current = false\n  }, [values, selected])\n\n  // WAI-ARIA listbox keyboard pattern:ArrowUp/Down 切 option / Home / End 跳邊界。\n  // 對標 Ant TimePicker / Material TimePicker。Tab 跳離 listbox(走預設行為,不 stopPropagation)。\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    const idx = values.indexOf(selected)\n    if (e.key === 'ArrowDown') {\n      e.preventDefault()\n      const next = values.find((_, i) => i > idx && !disabledSet?.has(values[i])) ?? values[idx]\n      onSelect(next)\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      // 反向找第一個 enabled\n      let i = idx - 1\n      while (i >= 0 && disabledSet?.has(values[i])) i--\n      if (i >= 0) onSelect(values[i])\n    } else if (e.key === 'Home') {\n      e.preventDefault()\n      const first = values.find((v) => !disabledSet?.has(v))\n      if (first !== undefined) onSelect(first)\n    } else if (e.key === 'End') {\n      e.preventDefault()\n      for (let i = values.length - 1; i >= 0; i--) {\n        if (!disabledSet?.has(values[i])) {\n          onSelect(values[i])\n          break\n        }\n      }\n    }\n  }\n\n  // WAI-ARIA listbox pattern:role=listbox 直接包 role=option(button),不另用 li 包\n  // (li role=option + 內含 button 會被 axe 抓 nested-interactive)\n  // 高度策略:本 primitive 不鎖死 height(對齊 ScrollArea / Combobox 同 idiom)。\n  // ScrollArea 用 h-full,parent flex container 控高 — 讓 consumer:\n  //   - TimePicker:wrap in h-[216px] container(預設 ~7 items)\n  //   - DatePicker showTime / Range:flex-row items-stretch + calendar 一起決定高度(自動同高)\n  return (\n    <ScrollArea className={cn('flex-1 h-full', withDivider && 'border-r border-divider')}>\n      <div\n        ref={listRef}\n        role=\"listbox\"\n        aria-label={label}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        className=\"flex flex-col py-2 focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-[-2px]\"\n      >\n        {values.map((v) => {\n          const isSelected = v === selected\n          const isDisabled = disabledSet?.has(v) ?? false\n          return (\n            <button\n              key={v}\n              type=\"button\"\n              role=\"option\"\n              aria-selected={isSelected}\n              disabled={isDisabled}\n              // tabIndex=-1:listbox 自身 tabbable + 用 ArrowUp/Down 切 option(WAI-ARIA roving),\n              // 不讓每個 option 都進 Tab order(會 Tab 84 次過完 hours+minutes)\n              tabIndex={-1}\n              onClick={() => onSelect(v)}\n              className={cn(\n                'w-full h-field-sm text-body tabular-nums',\n                'flex items-center justify-center',\n                'cursor-pointer transition-colors',\n                'hover:bg-neutral-hover',\n                isSelected && 'bg-neutral-selected text-foreground hover:bg-neutral-selected',\n                isDisabled && 'text-fg-disabled cursor-not-allowed hover:bg-transparent',\n              )}\n            >\n              {String(v).padStart(2, '0')}\n            </button>\n          )\n        })}\n      </div>\n    </ScrollArea>\n  )\n}\n\n// ── Composite — H/M/S columns ──────────────────────────────────────────\n\nexport interface TimeColumnsProps {\n  value?: TimeParts\n  onChange: (next: TimeParts) => void\n  showSeconds?: boolean\n  minuteStep?: TimeStep\n  secondStep?: TimeStep\n  /** 動態 disabled 各欄位 value 子集 */\n  disabled?: TimeColumnsDisabled\n  className?: string\n  /** 是否在最左側加 border-l(配 DatePicker showTime / Range date+time 拼接時用) */\n  leadingDivider?: boolean\n}\n\nexport function TimeColumns({\n  value,\n  onChange,\n  showSeconds = false,\n  minuteStep = 1,\n  secondStep = 1,\n  disabled,\n  className,\n  leadingDivider = false,\n}: TimeColumnsProps) {\n  const safeValue: TimeParts = value ?? { hours: 0, minutes: 0, seconds: 0 }\n  const hourValues = React.useMemo(() => buildRange(24, 1), [])\n  const minuteValues = React.useMemo(() => buildRange(60, minuteStep), [minuteStep])\n  const secondValues = React.useMemo(() => buildRange(60, secondStep), [secondStep])\n\n  const disabledSets = React.useMemo(() => ({\n    hours:   disabled?.hours   ? new Set(disabled.hours)   : undefined,\n    minutes: disabled?.minutes ? new Set(disabled.minutes) : undefined,\n    seconds: disabled?.seconds ? new Set(disabled.seconds) : undefined,\n  }), [disabled?.hours, disabled?.minutes, disabled?.seconds])\n\n  const widthClass = showSeconds ? 'w-60' : 'w-40'\n\n  return (\n    <div\n      className={cn(\n        'flex flex-row',\n        widthClass,\n        leadingDivider && 'border-l border-divider',\n        className,\n      )}\n    >\n      <TimeColumn\n        values={hourValues}\n        selected={safeValue.hours}\n        disabledSet={disabledSets.hours}\n        label=\"hours\"\n        onSelect={(h) => onChange({ ...safeValue, hours: h })}\n        withDivider\n      />\n      <TimeColumn\n        values={minuteValues}\n        selected={safeValue.minutes}\n        disabledSet={disabledSets.minutes}\n        label=\"minutes\"\n        onSelect={(m) => onChange({ ...safeValue, minutes: m })}\n        withDivider={showSeconds}\n      />\n      {showSeconds && (\n        <TimeColumn\n          values={secondValues}\n          selected={safeValue.seconds}\n          disabledSet={disabledSets.seconds}\n          label=\"seconds\"\n          onSelect={(s) => onChange({ ...safeValue, seconds: s })}\n        />\n      )}\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

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, fieldDisplayTextClass, bareInputStyles, fieldWrapperStyles } from "../Field/field-wrapper.js";
+import { ICON_SIZE, ItemSuffix, 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/index.d.ts

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

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

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

package/dist/components/Toast/index.js

@@ -0,0 +1,7 @@
+import { Toaster, toast, toastMeta } from "./toast.js";
+export {
+  Toaster,
+  toast,
+  toastMeta
+};
+//# sourceMappingURL=index.js.map

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

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