@qijenchen/design-system 0.1.0-beta.10

package/dist/components/Tag/tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.js","sources":["../../../src/components/Tag/tag.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\nimport type { LucideIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Tooltip, TooltipTrigger, TooltipContent } from \"@/design-system/components/Tooltip/tooltip\"\nimport { ItemInlineActionButton } from \"@/design-system/patterns/element-anatomy/item-anatomy\"\n\n// ── Tag（inline label）─────────────────────────────────────────────────────\n// 用於分類標籤、狀態標記、多選已選值。\n//\n// 三種尺寸（子元件補齊原則——消費端直接透傳 size，不做 mapping）：\n//   sm — 20px 高, 12px 字, 4px tag-px, font-medium（配 field sm）\n//   md — 24px 高, 14px 字, 4px tag-px, font-normal（配 field md）— 預設\n//   lg — 24px = md alias（配 field lg，子元件補齊原則）\n//\n// 截斷：max-w-40（160px），超出時文字 truncate + 自動 tooltip。\n// 用 Canvas measureText 偵測截斷（scrollWidth 在 flex 內不可靠）。\n\nlet _measureCtx: CanvasRenderingContext2D | null = null\nfunction getMeasureCtx() {\n  if (!_measureCtx) _measureCtx = document.createElement('canvas').getContext('2d')\n  return _measureCtx\n}\n\nconst tagVariants = cva(\n  \"inline-flex items-center rounded-md border border-transparent transition-colors cursor-text\",\n  {\n    variants: {\n      color: {\n        // 直接引用 primitive（bg=step-1, text=step-7），不經過語義層\n        // step-1 在 dark mode 用 alpha 公式，step-7 用 lighter 公式——兩個 mode 都正確\n        neutral:   \"bg-secondary text-foreground\",\n        blue:      \"bg-[var(--color-blue-1)] text-[var(--color-blue-7)]\",\n        red:       \"bg-[var(--color-deep-orange-1)] text-[var(--color-deep-orange-7)]\",\n        green:     \"bg-[var(--color-green-1)] text-[var(--color-green-7)]\",\n        yellow:    \"bg-[var(--color-yellow-1)] text-[var(--color-yellow-7)]\",\n        turquoise: \"bg-[var(--color-turquoise-1)] text-[var(--color-turquoise-7)]\",\n        purple:    \"bg-[var(--color-purple-1)] text-[var(--color-purple-7)]\",\n        magenta:   \"bg-[var(--color-magenta-1)] text-[var(--color-magenta-7)]\",\n        indigo:    \"bg-[var(--color-indigo-1)] text-[var(--color-indigo-7)]\",\n      },\n      size: {\n        sm: \"h-5 px-1 text-caption font-medium\",\n        md: \"h-6 px-1 text-body font-normal\",\n        lg: \"h-6 px-1 text-body font-normal\",\n      },\n    },\n    defaultVariants: {\n      color: \"neutral\",\n      size: \"md\",\n    },\n  }\n)\n\n// ── Solid variant 色彩（step-6 底 + 白字，warning 用 --warning-foreground）──\n// 直接引用 primitive step-6，不經過語義層\n// neutral 用 neutral-9 + --inverse-fg（light=白字, dark=深字，自動反轉）\nconst SOLID_CLASSES: Record<string, string> = {\n  neutral:   'bg-[var(--color-neutral-9)] text-inverse-fg',\n  blue:      'bg-[var(--color-blue-6)] text-on-emphasis',\n  red:       'bg-[var(--color-deep-orange-6)] text-on-emphasis',\n  green:     'bg-[var(--color-green-6)] text-on-emphasis',\n  yellow:    'bg-[var(--color-yellow-6)] text-[var(--warning-foreground)]',\n  turquoise: 'bg-[var(--color-turquoise-6)] text-on-emphasis',\n  purple:    'bg-[var(--color-purple-6)] text-on-emphasis',\n  magenta:   'bg-[var(--color-magenta-6)] text-on-emphasis',\n  indigo:    'bg-[var(--color-indigo-6)] text-on-emphasis',\n}\n\nexport interface TagProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'prefix' | 'color'>,\n    VariantProps<typeof tagVariants> {\n  /** 左側 icon（LucideIcon），由 Tag 統一 16px。與 avatar 互斥。 */\n  icon?: LucideIcon\n  /** 左側 avatar（ReactNode），與 icon 互斥。 */\n  avatar?: React.ReactNode\n  /** 可移除——Tag 自動渲染 dismiss 按鈕並控制尺寸與互動樣式 */\n  onDismiss?: () => void\n  /** 深底白字模式（step-6 背景 + 白色前景，warning 例外） */\n  solid?: boolean\n  /**\n   * 2026-05-15 Q3 真 SSOT fix(per user verbatim「同空間兩判斷點」+「不要冰山一角」):\n   * Tag 寬度由 parent constrain,不套預設 max-w-40(160px)。用於 cell-as-input narrow cell\n   * (< 160px)時 Tag fit cell 寬度 + truncate ellipsis,而非 160px 後被 cell `overflow-hidden`\n   * 硬切。對齊「同 cell width → 同 overflow 判斷」SSOT。Default false 保 backward compat\n   * (wrap layout / pill rail 等仍受 160px 保護)。\n   */\n  unbounded?: boolean\n}\n\n// ── Solid dismiss hover/active bg ──\n// 用 semantic --{hue}-hover/active token，跟 --primary-hover/active 同模式：\n// solid 色彩 shade change（hover 較亮 step、active 較暗 step），跟 Button 等\n// 互動元件視覺一致。在 semantic 層做 dark mode swap 確保方向跨 mode 一致。\n// neutral 特例：bg 是 neutral-9 隨 mode 反轉，用 --inverse-neutral-* 鏡射\nconst SOLID_DISMISS_HOVER: Record<string, { hover: string; active: string }> = {\n  neutral:   { hover: 'var(--inverse-neutral-hover)', active: 'var(--inverse-neutral-active)' },\n  blue:      { hover: 'var(--blue-hover)',            active: 'var(--blue-active)' },\n  red:       { hover: 'var(--red-hover)',             active: 'var(--red-active)' },\n  green:     { hover: 'var(--green-hover)',           active: 'var(--green-active)' },\n  yellow:    { hover: 'var(--yellow-hover)',          active: 'var(--yellow-active)' },\n  turquoise: { hover: 'var(--turquoise-hover)',       active: 'var(--turquoise-active)' },\n  purple:    { hover: 'var(--purple-hover)',          active: 'var(--purple-active)' },\n  magenta:   { hover: 'var(--magenta-hover)',         active: 'var(--magenta-active)' },\n  indigo:    { hover: 'var(--indigo-hover)',          active: 'var(--indigo-active)' },\n}\n\n// ── Dismiss（internal）────────────────────────────────────────────────────\n// 走 `ItemInlineActionButton`(item-anatomy SSOT)+ `hoverBgClassName` override prop\n// (2026-05-01 整合,消除原 Tag 自刻 `<button>` 繞 DS infra 的 tech debt)。\n//\n// 視覺對齊:`size=\"md\"` → icon 16 / hover-bg 18,跟 Tag 既有手刻幾何完全相等。\n// Solid variant(blue/green/red 等)透過 `hoverBgClassName` 套色相 override token;\n// Subtle variant 落用 ItemInlineActionButton 預設 neutral-hover。\n// 圖標色繼承 Tag 文字色 → `text-current` 三態覆寫。\n\nfunction TagDismiss({ onDismiss, label, solid, color }: { onDismiss: () => void; label: string; solid?: boolean; color?: string }) {\n  const solidColors = solid && color ? SOLID_DISMISS_HOVER[color] : undefined\n\n  return (\n    <ItemInlineActionButton\n      icon={X}\n      size=\"md\"\n      onClick={(e) => { e.stopPropagation(); onDismiss() }}\n      aria-label={`移除 ${label}`}\n      style={solidColors ? ({ '--dismiss-hover': solidColors.hover, '--dismiss-active': solidColors.active } as React.CSSProperties) : undefined}\n      hoverBgClassName={\n        solidColors\n          ? 'group-hover/action:bg-[var(--dismiss-hover)] group-active/action:bg-[var(--dismiss-active)]'\n          : undefined\n      }\n      // Override default fg-muted → 繼承 Tag 文字色(label 同色)\n      className=\"text-current hover:text-current active:text-current\"\n    />\n  )\n}\n\nfunction TagInner(\n  { className, color, size, icon: Icon, avatar, onDismiss, solid, unbounded = false, children, style, ...props }: TagProps,\n  forwardedRef: React.ForwardedRef<HTMLDivElement>,\n) {\n  const solidClass = solid ? SOLID_CLASSES[color ?? 'neutral'] : undefined\n  const ownRef = React.useRef<HTMLDivElement | null>(null)\n  const [isTruncated, setIsTruncated] = React.useState(false)\n\n  React.useLayoutEffect(() => {\n    const el = ownRef.current\n    if (!el) return\n    const ctx = getMeasureCtx()\n    const check = () => {\n      const textSpan = el.querySelector('[data-tag-text]')\n      if (!textSpan || !ctx) return\n      const text = textSpan.textContent || ''\n      const cs = getComputedStyle(textSpan)\n      ctx.font = `${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`\n      const textWidth = ctx.measureText(text).width\n      const padL = parseFloat(cs.paddingLeft) || 0\n      const padR = parseFloat(cs.paddingRight) || 0\n      const needed = textWidth + padL + padR\n      setIsTruncated(needed > (textSpan as HTMLElement).clientWidth + 1)\n    }\n    check()\n    const obs = new ResizeObserver(check)\n    obs.observe(el)\n    return () => obs.disconnect()\n  }, [children])\n\n  const label = typeof children === 'string' ? children : ''\n\n  const tag = (\n    <div\n      ref={(el) => {\n        ownRef.current = el\n        if (typeof forwardedRef === 'function') forwardedRef(el)\n        else if (forwardedRef) (forwardedRef as React.MutableRefObject<HTMLDivElement | null>).current = el\n      }}\n      data-tag-root=\"\"\n      className={cn(tagVariants({ color, size }), solidClass, 'w-fit min-w-0 overflow-hidden', className)}\n      // 2026-05-18 Round 5 fix(per Codex M31 Round 5 verdict + user 拍板「那就開始做」):\n      // 用 CSS var `--combobox-tag-area-inline-size`(由 Combobox useOverflowCount JS-injected)取代\n      // `min(100%, 10rem)` cyclic percentage。CSS Sizing 3 §5.2.1:percentage 在 indefinite containing\n      // block 退化為 initial value → Round 4 的 100% 沒 enforce。改 explicit px 值(JS measured)避此 trap。\n      // unbounded=true:cap = inject 寬(回 cell-as-input narrow cell 原 behavior)\n      // default:cap = min(inject 寬, 160px)— 兩 cap 取小。fallback(無 var,Form context 等)= 100% / 10rem。\n      style={{\n        maxWidth: unbounded\n          ? 'var(--combobox-tag-area-inline-size, 100%)'\n          : 'min(var(--combobox-tag-area-inline-size, 10rem), 10rem)',\n        ...style,\n      }}\n      {...props}\n    >\n      {Icon && <Icon size={16} aria-hidden />}\n      {avatar && <span className=\"shrink-0 w-4 h-4 rounded-full overflow-hidden inline-grid place-content-center [&>*]:w-full [&>*]:h-full\">{avatar}</span>}\n      <span data-tag-text=\"\" className=\"px-1 truncate min-w-0\">{children}</span>\n      {onDismiss && <TagDismiss onDismiss={onDismiss} label={label} solid={solid} color={color ?? 'neutral'} />}\n    </div>\n  )\n\n  if (!isTruncated) return tag\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{tag}</TooltipTrigger>\n      <TooltipContent>{children}</TooltipContent>\n    </Tooltip>\n  )\n}\n\nconst Tag = React.forwardRef<HTMLDivElement, TagProps>(TagInner)\nTag.displayName = 'Tag'\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 tagMeta = {\n  component: 'Tag',\n  family: 3,\n  variants: {\n    neutral: { purpose: '通用分類、草稿、無特定語義' },\n    blue: { purpose: '進行中、資訊提示、active 狀態（對應 --info）' },\n    red: { purpose: '錯誤、已封鎖、危險（對應 --error）' },\n    green: { purpose: '成功、已完成、已核准（對應 --success）' },\n    yellow: { purpose: '警告、待審核、注意（對應 --warning）' },\n    turquoise: { purpose: '分類色（無固定語義）' },\n    purple: { purpose: '分類色（無固定語義）' },\n    magenta: { purpose: '分類色（無固定語義）' },\n    indigo: { purpose: '分類色（無固定語義）' },\n  },\n  sizes: {\n    sm: { fieldHeight: 28, iconSize: 16, typography: 'body' },\n    md: { fieldHeight: 32, iconSize: 16, typography: 'body' },\n    lg: { fieldHeight: 40, iconSize: 20, typography: 'body' },\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-neutral-active', 'bg-neutral-hover', 'bg-secondary', 'bg-transparent'],\n    fg: ['text-foreground', 'text-inverse-fg'],\n    ring: [],\n  },\n  defaultVariant: 'neutral',\n  defaultSize: 'md',\n} as const\n\nexport { Tag, tagVariants }\n"],"names":[],"mappings":"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"}

package/dist/components/Textarea/textarea.d.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import type { FieldMode, FieldVariant } from '../../components/Field/field-types';
+/**
+ * Textarea — 多行文字輸入
+ *
+ * ── 定位 ────────────────────────────────────────────────────────────────
+ * 多行版本的 Input，edit / display / readonly / disabled 四態與 Input 邏輯一致(Phase B1 2026-05-05)。
+ * 不同於 Input：
+ *   - 沒有固定 field-height（高度由 rows 或 min-h 決定）
+ *   - 沒有 startIcon / endAction（textarea 慣例不放 icon）
+ *   - readonly 呈現保留邊框與 padding，只改底色，讓多行文字有合理閱讀區
+ *   - display 渲染 <div> + white-space:pre-wrap 保留多行文本
+ *
+ * ── Padding 規則 ───────────────────────────────────────────────────────
+ * 多行內容必須有上下內距才能閱讀舒適。不沿用 Input 的 items-center，
+ * 改用 py-2（8px）固定上下內距 + px-3 左右內距（與 Input 一致）。
+ *
+ * ── Size ────────────────────────────────────────────────────────────────
+ * sm / md → text-body（14px）
+ * lg      → text-body-lg（16px）
+ *
+ * ── rows / min-h ───────────────────────────────────────────────────────
+ * 預設 rows={3}。消費者可透過 rows prop 調整，或透過 min-h-* className 覆寫。
+ */
+declare const textareaVariants: (props?: ({
+    mode?: "display" | "disabled" | "edit" | "readonly" | null | undefined;
+    variant?: "default" | "bare" | "naked" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>, Omit<VariantProps<typeof textareaVariants>, 'mode' | 'variant'> {
+    /** Field display mode */
+    mode?: FieldMode;
+    /**
+     * Visual chrome(正交於 mode);Phase B1(2026-05-05)新增。透傳自 FieldContext.variant,per-prop override。
+     * - `'default'` — 完整 chrome(form 場景)
+     * - `'bare'` — 透明 variant,hover/focus reveal(toolbar / cell-as-input)
+     */
+    variant?: FieldVariant;
+    /** Error 狀態（正交於 mode）。border-error + aria-invalid。 */
+    error?: boolean;
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const textareaMeta: {
+    readonly component: "Textarea";
+    readonly family: 4;
+    readonly variants: {};
+    readonly sizes: {
+        readonly sm: {
+            readonly fieldHeight: 28;
+            readonly iconSize: 16;
+            readonly typography: "body";
+        };
+        readonly md: {
+            readonly fieldHeight: 32;
+            readonly iconSize: 16;
+            readonly typography: "body";
+        };
+        readonly lg: {
+            readonly fieldHeight: 40;
+            readonly iconSize: 20;
+            readonly typography: "body";
+        };
+    };
+    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly tokens: {
+        readonly bg: readonly ["bg-disabled", "bg-surface"];
+        readonly fg: readonly ["text-fg-disabled", "text-fg-muted", "text-foreground"];
+        readonly ring: readonly [];
+    };
+    readonly defaultSize: "md";
+};
+export { Textarea, textareaVariants };
+//# sourceMappingURL=textarea.d.ts.map

package/dist/components/Textarea/textarea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/textarea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAI3F;;;;;;;;;;;;;;;;;;;;;GAqBG;AAIH,QAAA,MAAM,gBAAgB;;;;8EAyHrB,CAAA;AAED,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC,EACrE,IAAI,CAAC,YAAY,CAAC,OAAO,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjE,yBAAyB;IACzB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;OAIG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,sDAAsD;IACtD,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAGD,QAAA,MAAM,QAAQ,2FAkFb,CAAA;AAKD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkBf,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/Textarea/textarea.js

@@ -0,0 +1,224 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+import { useFieldContext } from "../Field/field-context.js";
+import { EMPTY_DISPLAY } from "../Field/field-wrapper.js";
+const textareaVariants = cva(
+  [
+    "w-full rounded-md",
+    "text-foreground font-normal",
+    "outline-none resize-y",
+    "placeholder:text-fg-muted",
+    // K10 fix(2026-05-04):disabled 時 placeholder + text 切 fg-disabled(parallel 到 bareInputStyles)
+    //   Textarea 自身 `<textarea disabled>` 帶 disabled HTML attribute,用 `disabled:` variant 直接命中
+    "disabled:placeholder:text-fg-disabled disabled:text-fg-disabled",
+    "px-3 py-2",
+    "transition-colors duration-150"
+  ],
+  {
+    variants: {
+      mode: {
+        edit: "",
+        display: "",
+        readonly: "",
+        disabled: ""
+      },
+      // chrome 對齊 fieldWrapperStyles.variant(default / bare / naked)。
+      variant: {
+        default: "",
+        bare: "",
+        naked: ""
+      },
+      size: {
+        sm: "text-body",
+        md: "text-body",
+        lg: "text-body-lg"
+      }
+    },
+    compoundVariants: [
+      // default chrome × mode
+      {
+        mode: "edit",
+        variant: "default",
+        className: [
+          "bg-surface border border-border",
+          "hover:border-border-hover",
+          "focus-visible:!border-primary focus-visible:hover:!border-primary"
+        ]
+      },
+      {
+        mode: "display",
+        variant: "default",
+        // 2026-05-13 Q3 Path Ⅰ:Textarea default display zero chrome,!px-0 !py-0 override base `px-3 py-2`
+        // (跟 Input 同 SSOT,per field-controls.spec.md (d))
+        className: "bg-transparent border border-transparent !px-0 !py-0"
+      },
+      {
+        mode: "readonly",
+        variant: "default",
+        className: "bg-disabled border border-transparent"
+      },
+      {
+        mode: "disabled",
+        variant: "default",
+        className: "bg-disabled border border-transparent cursor-not-allowed text-fg-disabled"
+      },
+      // bare chrome × mode(對齊 fieldWrapperStyles bare 規則)
+      {
+        mode: "edit",
+        variant: "bare",
+        className: [
+          "bg-transparent border border-transparent",
+          "hover:border-border",
+          "focus-visible:!border-primary focus-visible:hover:!border-primary"
+        ]
+      },
+      {
+        mode: "display",
+        variant: "bare",
+        className: "bg-transparent border border-transparent"
+      },
+      {
+        mode: "readonly",
+        variant: "bare",
+        className: "bg-transparent border border-transparent"
+      },
+      {
+        mode: "disabled",
+        variant: "bare",
+        className: "bg-transparent border border-transparent cursor-not-allowed opacity-disabled text-fg-disabled"
+      },
+      // naked chrome × mode — cell-as-input substrate(2026-05-06 v14 revert v12)。
+      //   v12 `!absolute -inset-px` autoRowHeight 不相容 → revert v9 baseline + 保留 v13.3
+      //   focus !important。focus-visible 用 textarea 自身 selector(focusable element)。
+      {
+        mode: "edit",
+        variant: "naked",
+        className: [
+          "bg-transparent !rounded-none !resize-none !h-full",
+          "!px-[var(--table-cell-px)] !py-[var(--table-cell-py)]",
+          "border border-border",
+          "hover:border-border-hover",
+          "focus-visible:!border-primary focus-visible:hover:!border-primary",
+          // textarea UA stylesheet 預設 line-height: normal(1.2-1.5 不定),會跟 display
+          // `<div>` text-body line-height: 1.5(21px @ 14px)不一致 → cell 進 edit 後 height
+          // shift。顯式 leading 對齊 div 行為。
+          "!leading-[1.5]"
+        ]
+      },
+      // 2026-05-13 Q1 R4 verify(per codex Q1 verdict 補 Textarea nuance):
+      // Textarea naked display/readonly/disabled 用 `!h-full`,**不**對齊 Field wrapper 的 `!h-auto`。
+      // Why divergence:textarea 是 native form element 帶 intrinsic rows-based height,且 cell 內
+      // multi-line text 需要撐滿 cell 而非依 line-height intrinsic。`!h-full` 讓 textarea 填滿 cell
+      // 高度,文字 anchored to cell.top + cell padding(同視覺結果 Field wrapper autoRow !h-auto)。
+      // 此 divergence intentional + documented;非 SSOT violation。
+      { mode: "display", variant: "naked", className: "bg-transparent !rounded-none !h-full !resize-none !px-0 !py-0 border border-transparent !leading-[1.5]" },
+      { mode: "readonly", variant: "naked", className: "bg-transparent !rounded-none !h-full !resize-none !px-0 !py-0 border border-transparent !leading-[1.5]" },
+      // 2026-05-13 codex V2 fix:移除 `opacity-disabled` blanket(對齊 field-wrapper.tsx naked R3 fix +
+      //   color.spec.md:729 逃生艙 rule)。Textarea 已用具體 `text-fg-disabled` token,不需要 wrapper opacity。
+      { mode: "disabled", variant: "naked", className: "bg-transparent !rounded-none cursor-not-allowed text-fg-disabled !h-full !resize-none !px-0 !py-0 border border-transparent !leading-[1.5]" }
+    ],
+    defaultVariants: {
+      mode: "edit",
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+const Textarea = React.forwardRef(
+  ({
+    mode: modeProp,
+    variant: variantProp,
+    error: errorProp = false,
+    size: sizeProp,
+    className,
+    disabled,
+    readOnly,
+    rows = 3,
+    value,
+    id: idProp,
+    "aria-describedby": ariaDescribedByProp,
+    "aria-errormessage": ariaErrorMessageProp,
+    ...props
+  }, ref) => {
+    const fieldCtx = useFieldContext();
+    const variant = variantProp ?? (fieldCtx == null ? void 0 : fieldCtx.variant) ?? "default";
+    const error = errorProp || ((fieldCtx == null ? void 0 : fieldCtx.invalid) ?? false);
+    const size = sizeProp ?? (fieldCtx == null ? void 0 : fieldCtx.size) ?? "md";
+    const resolvedMode = modeProp ?? (fieldCtx == null ? void 0 : fieldCtx.mode) ?? (readOnly ? "readonly" : disabled ?? (fieldCtx == null ? void 0 : fieldCtx.disabled) ? "disabled" : "edit");
+    const isEditable = resolvedMode === "edit";
+    const isDisplay = resolvedMode === "display";
+    const inputId = idProp ?? (fieldCtx == null ? void 0 : fieldCtx.id);
+    const ariaDescribedBy = ariaDescribedByProp ?? (fieldCtx == null ? void 0 : fieldCtx.descriptionId);
+    const ariaErrorMessage = ariaErrorMessageProp ?? (error ? fieldCtx == null ? void 0 : fieldCtx.errorId : void 0);
+    if (isDisplay) {
+      const displayValue = value != null && value !== "" ? String(value) : null;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: inputId,
+          "data-field-mode": "display",
+          "aria-describedby": ariaDescribedBy,
+          className: cn(
+            textareaVariants({ mode: "display", variant, size }),
+            "whitespace-pre-wrap break-words",
+            displayValue == null && "text-fg-muted",
+            className
+          ),
+          children: displayValue ?? EMPTY_DISPLAY
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        id: inputId,
+        rows,
+        value,
+        disabled: resolvedMode === "disabled",
+        readOnly: resolvedMode === "readonly",
+        "aria-invalid": error || void 0,
+        "aria-required": (fieldCtx == null ? void 0 : fieldCtx.required) || void 0,
+        "aria-describedby": ariaDescribedBy,
+        "aria-errormessage": ariaErrorMessage,
+        "data-field-mode": resolvedMode,
+        "data-error": isEditable && error ? "" : void 0,
+        className: cn(
+          textareaVariants({ mode: resolvedMode, variant, size }),
+          isEditable && error && [
+            "border-error hover:border-error-hover",
+            "focus-visible:border-error focus-visible:hover:border-error"
+          ],
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+const textareaMeta = {
+  component: "Textarea",
+  family: 4,
+  variants: {},
+  sizes: {
+    sm: { fieldHeight: 28, iconSize: 16, typography: "body" },
+    md: { fieldHeight: 32, iconSize: 16, typography: "body" },
+    lg: { fieldHeight: 40, iconSize: 20, typography: "body" }
+  },
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: ["bg-disabled", "bg-surface"],
+    fg: ["text-fg-disabled", "text-fg-muted", "text-foreground"],
+    ring: []
+  },
+  defaultSize: "md"
+};
+export {
+  Textarea,
+  textareaMeta,
+  textareaVariants
+};
+//# sourceMappingURL=textarea.js.map

package/dist/components/Textarea/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sources":["../../../src/components/Textarea/textarea.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 { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport type { FieldMode, FieldVariant } from '@/design-system/components/Field/field-types'\nimport { useFieldContext } from '@/design-system/components/Field/field-context'\nimport { EMPTY_DISPLAY } from '@/design-system/components/Field/field-wrapper'\n\n/**\n * Textarea — 多行文字輸入\n *\n * ── 定位 ────────────────────────────────────────────────────────────────\n * 多行版本的 Input，edit / display / readonly / disabled 四態與 Input 邏輯一致(Phase B1 2026-05-05)。\n * 不同於 Input：\n *   - 沒有固定 field-height（高度由 rows 或 min-h 決定）\n *   - 沒有 startIcon / endAction（textarea 慣例不放 icon）\n *   - readonly 呈現保留邊框與 padding，只改底色，讓多行文字有合理閱讀區\n *   - display 渲染 <div> + white-space:pre-wrap 保留多行文本\n *\n * ── Padding 規則 ───────────────────────────────────────────────────────\n * 多行內容必須有上下內距才能閱讀舒適。不沿用 Input 的 items-center，\n * 改用 py-2（8px）固定上下內距 + px-3 左右內距（與 Input 一致）。\n *\n * ── Size ────────────────────────────────────────────────────────────────\n * sm / md → text-body（14px）\n * lg      → text-body-lg（16px）\n *\n * ── rows / min-h ───────────────────────────────────────────────────────\n * 預設 rows={3}。消費者可透過 rows prop 調整，或透過 min-h-* className 覆寫。\n */\n\n// Phase B1(2026-05-05):新增 chrome variant(default / bare),mode×chrome 的 chrome 規則由\n// compoundVariants 決定,鏡射 fieldWrapperStyles 對齊 canonical(Phase D 將整併進 fieldWrapperStyles)。\nconst textareaVariants = cva(\n  [\n    'w-full rounded-md',\n    'text-foreground font-normal',\n    'outline-none resize-y',\n    'placeholder:text-fg-muted',\n    // K10 fix(2026-05-04):disabled 時 placeholder + text 切 fg-disabled(parallel 到 bareInputStyles)\n    //   Textarea 自身 `<textarea disabled>` 帶 disabled HTML attribute,用 `disabled:` variant 直接命中\n    'disabled:placeholder:text-fg-disabled disabled:text-fg-disabled',\n    'px-3 py-2',\n    'transition-colors duration-150',\n  ],\n  {\n    variants: {\n      mode: {\n        edit: '',\n        display: '',\n        readonly: '',\n        disabled: '',\n      },\n      // chrome 對齊 fieldWrapperStyles.variant(default / bare / naked)。\n      variant: {\n        default: '',\n        bare: '',\n        naked: '',\n      },\n      size: {\n        sm: 'text-body',\n        md: 'text-body',\n        lg: 'text-body-lg',\n      },\n    },\n    compoundVariants: [\n      // default chrome × mode\n      {\n        mode: 'edit',\n        variant: 'default',\n        className: [\n          'bg-surface border border-border',\n          'hover:border-border-hover',\n          'focus-visible:!border-primary focus-visible:hover:!border-primary',\n        ],\n      },\n      {\n        mode: 'display',\n        variant: 'default',\n        // 2026-05-13 Q3 Path Ⅰ:Textarea default display zero chrome,!px-0 !py-0 override base `px-3 py-2`\n        // (跟 Input 同 SSOT,per field-controls.spec.md (d))\n        className: 'bg-transparent border border-transparent !px-0 !py-0',\n      },\n      {\n        mode: 'readonly',\n        variant: 'default',\n        className: 'bg-disabled border border-transparent',\n      },\n      {\n        mode: 'disabled',\n        variant: 'default',\n        className: 'bg-disabled border border-transparent cursor-not-allowed text-fg-disabled',\n      },\n      // bare chrome × mode(對齊 fieldWrapperStyles bare 規則)\n      {\n        mode: 'edit',\n        variant: 'bare',\n        className: [\n          'bg-transparent border border-transparent',\n          'hover:border-border',\n          'focus-visible:!border-primary focus-visible:hover:!border-primary',\n        ],\n      },\n      {\n        mode: 'display',\n        variant: 'bare',\n        className: 'bg-transparent border border-transparent',\n      },\n      {\n        mode: 'readonly',\n        variant: 'bare',\n        className: 'bg-transparent border border-transparent',\n      },\n      {\n        mode: 'disabled',\n        variant: 'bare',\n        className: 'bg-transparent border border-transparent cursor-not-allowed opacity-disabled text-fg-disabled',\n      },\n      // naked chrome × mode — cell-as-input substrate(2026-05-06 v14 revert v12)。\n      //   v12 `!absolute -inset-px` autoRowHeight 不相容 → revert v9 baseline + 保留 v13.3\n      //   focus !important。focus-visible 用 textarea 自身 selector(focusable element)。\n      {\n        mode: 'edit',\n        variant: 'naked',\n        className: [\n          'bg-transparent !rounded-none !resize-none !h-full',\n          '!px-[var(--table-cell-px)] !py-[var(--table-cell-py)]',\n          'border border-border',\n          'hover:border-border-hover',\n          'focus-visible:!border-primary focus-visible:hover:!border-primary',\n          // textarea UA stylesheet 預設 line-height: normal(1.2-1.5 不定),會跟 display\n          // `<div>` text-body line-height: 1.5(21px @ 14px)不一致 → cell 進 edit 後 height\n          // shift。顯式 leading 對齊 div 行為。\n          '!leading-[1.5]',\n        ],\n      },\n      // 2026-05-13 Q1 R4 verify(per codex Q1 verdict 補 Textarea nuance):\n      // Textarea naked display/readonly/disabled 用 `!h-full`,**不**對齊 Field wrapper 的 `!h-auto`。\n      // Why divergence:textarea 是 native form element 帶 intrinsic rows-based height,且 cell 內\n      // multi-line text 需要撐滿 cell 而非依 line-height intrinsic。`!h-full` 讓 textarea 填滿 cell\n      // 高度,文字 anchored to cell.top + cell padding(同視覺結果 Field wrapper autoRow !h-auto)。\n      // 此 divergence intentional + documented;非 SSOT violation。\n      { mode: 'display', variant: 'naked', className: 'bg-transparent !rounded-none !h-full !resize-none !px-0 !py-0 border border-transparent !leading-[1.5]' },\n      { mode: 'readonly', variant: 'naked', className: 'bg-transparent !rounded-none !h-full !resize-none !px-0 !py-0 border border-transparent !leading-[1.5]' },\n      // 2026-05-13 codex V2 fix:移除 `opacity-disabled` blanket(對齊 field-wrapper.tsx naked R3 fix +\n      //   color.spec.md:729 逃生艙 rule)。Textarea 已用具體 `text-fg-disabled` token,不需要 wrapper opacity。\n      { mode: 'disabled', variant: 'naked', className: 'bg-transparent !rounded-none cursor-not-allowed text-fg-disabled !h-full !resize-none !px-0 !py-0 border border-transparent !leading-[1.5]' },\n    ],\n    defaultVariants: {\n      mode: 'edit',\n      variant: 'default',\n      size: 'md',\n    },\n  }\n)\n\nexport interface TextareaProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>,\n    Omit<VariantProps<typeof textareaVariants>, 'mode' | 'variant'> {\n  /** Field display mode */\n  mode?: FieldMode\n  /**\n   * Visual chrome(正交於 mode);Phase B1(2026-05-05)新增。透傳自 FieldContext.variant,per-prop override。\n   * - `'default'` — 完整 chrome(form 場景)\n   * - `'bare'` — 透明 variant,hover/focus reveal(toolbar / cell-as-input)\n   */\n  variant?: FieldVariant\n  /** Error 狀態（正交於 mode）。border-error + aria-invalid。 */\n  error?: boolean\n}\n\n// code-quality-allow: long-function — Textarea forwardRef body 含 mode×size×variant×error 4 軸 prop + autoFocus + aria 完整覆蓋,拆 sub-fn 會把 useFieldContext / fieldWrapperStyles 跨檔 drilling\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (\n    {\n      mode: modeProp,\n      variant: variantProp,\n      error: errorProp = false,\n      size: sizeProp,\n      className,\n      disabled,\n      readOnly,\n      rows = 3,\n      value,\n      id: idProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-errormessage': ariaErrorMessageProp,\n      ...props\n    },\n    ref\n  ) => {\n    // Field context 整合：disabled / mode / chrome / invalid / size / id 都能從 context 繼承\n    const fieldCtx = useFieldContext()\n    // chrome 透傳:per-prop override context\n    const variant: FieldVariant = variantProp ?? fieldCtx?.variant ?? 'default'\n    const error = errorProp || (fieldCtx?.invalid ?? false)\n    const size = sizeProp ?? fieldCtx?.size ?? 'md'\n    // mode resolve order(Phase B1 2026-05-05):prop > fieldCtx > readOnly/disabled fallback > 'edit'\n    const resolvedMode: FieldMode = modeProp\n      ?? fieldCtx?.mode\n      ?? (readOnly ? 'readonly' : (disabled ?? fieldCtx?.disabled) ? 'disabled' : 'edit')\n    const isEditable = resolvedMode === 'edit'\n    const isDisplay = resolvedMode === 'display'\n    const inputId = idProp ?? fieldCtx?.id\n    const ariaDescribedBy = ariaDescribedByProp ?? fieldCtx?.descriptionId\n    const ariaErrorMessage = ariaErrorMessageProp ?? (error ? fieldCtx?.errorId : undefined)\n\n    // ── display mode:純展示,渲染 <div> 取代 <textarea>(white-space:pre-wrap 保留多行) ──\n    // 對齊 Carbon read-only / Cloudscape display-mode\n    if (isDisplay) {\n      const displayValue = value != null && value !== '' ? String(value) : null\n      return (\n        <div\n          id={inputId}\n          data-field-mode=\"display\"\n          aria-describedby={ariaDescribedBy}\n          className={cn(\n            textareaVariants({ mode: 'display', variant: variant, size }),\n            'whitespace-pre-wrap break-words',\n            displayValue == null && 'text-fg-muted',\n            className,\n          )}\n        >\n          {displayValue ?? EMPTY_DISPLAY}\n        </div>\n      )\n    }\n\n    return (\n      <textarea\n        ref={ref}\n        id={inputId}\n        rows={rows}\n        value={value as string | number | readonly string[] | undefined}\n        disabled={resolvedMode === 'disabled'}\n        readOnly={resolvedMode === 'readonly'}\n        aria-invalid={error || undefined}\n        aria-required={fieldCtx?.required || undefined}\n        aria-describedby={ariaDescribedBy}\n        aria-errormessage={ariaErrorMessage}\n        data-field-mode={resolvedMode}\n        data-error={isEditable && error ? '' : undefined}\n        className={cn(\n          textareaVariants({ mode: resolvedMode, variant: variant, size }),\n          isEditable && error && [\n            'border-error hover:border-error-hover',\n            'focus-visible:border-error focus-visible:hover:border-error',\n          ],\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\nTextarea.displayName = 'Textarea'\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 textareaMeta = {\n  component: 'Textarea',\n  family: 4,\n  variants: {\n\n  },\n  sizes: {\n    sm: { fieldHeight: 28, iconSize: 16, typography: 'body' },\n    md: { fieldHeight: 32, iconSize: 16, typography: 'body' },\n    lg: { fieldHeight: 40, iconSize: 20, typography: 'body' },\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-disabled', 'bg-surface'],\n    fg: ['text-fg-disabled', 'text-fg-muted', 'text-foreground'],\n    ring: [],\n  },\n  defaultSize: 'md',\n} as const\n\nexport { Textarea, textareaVariants }\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,46 @@
+/**
+ * TimeColumns — H/M/S scroll selector primitive(M17 Rule-of-3 SSOT)。
+ *
+ * 共用消費者:
+ * - `TimePicker`(本元件家)
+ * - `DatePicker showTime`(date + time)
+ * - `DatePickerRange showTime`(range with time)
+ *
+ * 抽出原因:三個 picker 共用 H/M/S column scroll-pick 行為,公式重覆 = M17 違反。
+ * 抽到 TimePicker/(time scroll selector 的 canonical 家)。
+ *
+ * ── 設計 ──
+ * - Value:`TimeParts { hours, minutes, seconds }`(對齊 date-fns / Date getHours()...)
+ * - Step:每欄獨立 `minuteStep` / `secondStep`(會議常用 15)
+ * - Disabled:`disabledHours / disabledMinutes / disabledSeconds`(動態根據已選其他欄位)
+ * - Visual:對齊 ref/timepicker.png — 多欄並排 + border-r 分隔
+ */
+export interface TimeParts {
+    hours: number;
+    minutes: number;
+    seconds: number;
+}
+export type TimeStep = 1 | 5 | 10 | 15 | 30;
+export interface TimeColumnsDisabled {
+    hours?: number[];
+    minutes?: number[];
+    seconds?: number[];
+}
+/** Parse "HH:MM:SS" / "HH:MM" / full ISO datetime — returns time parts only */
+export declare function isoToTimeParts(iso: string | null | undefined): TimeParts | undefined;
+/** Format time parts → "HH:MM" or "HH:MM:SS" depending on showSeconds */
+export declare function timePartsToString(parts: TimeParts, showSeconds?: boolean): string;
+export interface TimeColumnsProps {
+    value?: TimeParts;
+    onChange: (next: TimeParts) => void;
+    showSeconds?: boolean;
+    minuteStep?: TimeStep;
+    secondStep?: TimeStep;
+    /** 動態 disabled 各欄位 value 子集 */
+    disabled?: TimeColumnsDisabled;
+    className?: string;
+    /** 是否在最左側加 border-l(配 DatePicker showTime / Range date+time 拼接時用) */
+    leadingDivider?: boolean;
+}
+export declare function TimeColumns({ value, onChange, showSeconds, minuteStep, secondStep, disabled, className, leadingDivider, }: TimeColumnsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=time-columns.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-columns.d.ts","sourceRoot":"","sources":["../../../src/components/TimePicker/time-columns.tsx"],"names":[],"mappings":"AACA;;;;;;;;;;;;;;;;GAgBG;AAQH,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,MAAM,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA;AAE3C,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;CACnB;AAID,+EAA+E;AAC/E,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAapF;AAED,yEAAyE;AACzE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,EAAE,WAAW,UAAQ,GAAG,MAAM,CAM/E;AA2HD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,mBAAmB,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qEAAqE;IACrE,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,WAAmB,EACnB,UAAc,EACd,UAAc,EACd,QAAQ,EACR,SAAS,EACT,cAAsB,GACvB,EAAE,gBAAgB,2CAkDlB"}

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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"}