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

package/dist/components/Textarea/textarea.js

@@ -2,8 +2,8 @@ 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";
+import { useFieldContext, useResolvedFieldVariant, useResolvedFieldInvalid, useResolvedFieldSize, useResolvedFieldMode, useFieldEmptyDisplay, fieldEmptyColorClass } from "../Field/field-context.js";
+import { useControllable } from "../../hooks/use-controllable.js";
 const textareaVariants = cva(
   [
     "w-full rounded-md",
@@ -13,27 +13,33 @@ const textareaVariants = cva(
     // 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",
+    "px-[var(--field-px)]",
     "transition-colors duration-150"
   ],
   {
     variants: {
       mode: {
         edit: "",
-        display: "",
+        view: "",
         readonly: "",
         disabled: ""
       },
-      // chrome 對齊 fieldWrapperStyles.variant(default / bare / naked)。
+      // chrome 對齊 fieldWrapperStyles.variant(default / naked;2026-07-09 `bare` 退役)。
       variant: {
         default: "",
-        bare: "",
         naked: ""
       },
+      // py 隨 size 走 --field-control-py-* 公式,讓單行 Textarea 與同 size Input 等高
+      // (uiSize.css SSOT;DataTable naked compound 以 !py-* 覆蓋,不受影響)
       size: {
-        sm: "text-body",
-        md: "text-body",
-        lg: "text-body-lg"
+        sm: "text-body py-[var(--field-control-py-sm)]",
+        md: "text-body py-[var(--field-control-py-md)]",
+        lg: "text-body-lg py-[var(--field-control-py-lg)]"
+      },
+      // error(2026-07-04 Q1,鏡射 fieldWrapperStyles error variant;Phase D 整併時一起收)
+      error: {
+        true: "",
+        false: ""
       }
     },
     compoundVariants: [
@@ -43,52 +49,40 @@ const textareaVariants = cva(
         variant: "default",
         className: [
           "bg-surface border border-border",
-          "hover:border-border-hover",
-          "focus-visible:!border-primary focus-visible:hover:!border-primary"
+          "hover:border-border-hover"
         ]
       },
+      { mode: "edit", variant: "default", error: false, className: "focus-within:!border-primary focus-within:hover:!border-primary" },
       {
-        mode: "display",
+        // 2026-07-16 round16 Model A(user GO,推翻 2026-05-13 Path Ⅰ 的 `!px-0 !py-0`):
+        // Textarea view×default = **edit 幾何減 chrome** — 保留 base 的 field-px 與
+        // size 對應 field-control-py token(= edit 內距),只拔 border/bg。多行 read↔edit 零跳。跟 Field wrapper
+        // view×default 同 SSOT(field-wrapper.tsx)。
+        mode: "view",
         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"
+        className: "bg-transparent border border-transparent"
       },
       {
         mode: "readonly",
         variant: "default",
-        className: "bg-disabled border border-transparent"
+        // 2026-07-13 a11y(WCAG 2.4.7):readonly 有值渲 native <textarea readOnly> 可鍵盤聚焦,base
+        //   outline-none + border-transparent 無焦點指示 → 鏡射 field-wrapper.tsx readonly ring idiom
+        //   (field-controls.spec.md「readonly focus ring」)。textarea 為裸 focusable element,直接用
+        //   focus-visible:(非 :has()),僅鍵盤聚焦顯示、滑鼠點擊不觸發。
+        className: "bg-readonly border border-transparent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
       },
       {
         mode: "disabled",
         variant: "default",
         className: "bg-disabled border border-transparent cursor-not-allowed text-fg-disabled"
       },
-      // bare chrome × mode(對齊 fieldWrapperStyles bare 規則)
+      // (2026-07-09 `bare` chrome × mode compounds 退役已移除;error:true 為 variant-agnostic 保留)
       {
         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"
+        error: true,
+        className: "border-error hover:border-error-hover focus-within:!border-error focus-within:hover:!border-error"
       },
+      // (2026-07-09 display×bare / readonly×bare / disabled×bare compounds 退役已移除)
       // 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)。
@@ -100,29 +94,28 @@ const textareaVariants = cva(
           "!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
+          // textarea UA stylesheet 預設 line-height: normal(1.2-1.5 不定),會跟 view
           // `<div>` text-body line-height: 1.5(21px @ 14px)不一致 → cell 進 edit 後 height
           // shift。顯式 leading 對齊 div 行為。
           "!leading-[1.5]"
         ]
       },
+      { mode: "edit", variant: "naked", error: false, className: "focus-visible:!border-primary focus-visible:hover:!border-primary" },
       // 2026-05-13 Q1 R4 verify(per codex Q1 verdict 補 Textarea nuance):
-      // Textarea naked display/readonly/disabled 用 `!h-full`,**不**對齊 Field wrapper 的 `!h-auto`。
+      // Textarea view×naked 用 `!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]" }
+      { mode: "view", variant: "naked", className: "bg-transparent !rounded-none !h-full !resize-none !px-0 !py-0 border border-transparent !leading-[1.5]" }
+      // 2026-07-16 round16:`readonly×naked` / `disabled×naked` 死格移除(鏡射 field-wrapper.tsx;
+      //   DataTable cell 廢 disabled 態 + readonly 從不入 naked,全庫 0 消費)。
     ],
     defaultVariants: {
       mode: "edit",
       variant: "default",
-      size: "md"
+      size: "md",
+      error: false
     }
   }
 );
@@ -135,48 +128,87 @@ const Textarea = React.forwardRef(
     className,
     disabled,
     readOnly,
-    rows = 3,
+    rows: rowsProp,
+    autoSize = false,
     value,
+    defaultValue,
     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 variant = useResolvedFieldVariant(variantProp);
+    const error = useResolvedFieldInvalid(errorProp);
+    const size = useResolvedFieldSize(sizeProp);
+    const resolvedMode = useResolvedFieldMode({ mode: modeProp, disabled, readOnly });
+    const emptyDisplay = useFieldEmptyDisplay();
     const isEditable = resolvedMode === "edit";
-    const isDisplay = resolvedMode === "display";
+    const isView = resolvedMode === "view";
     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;
+    const isControlled = value !== void 0;
+    const [resolved, setResolved] = useControllable({
+      value,
+      defaultValue: defaultValue ?? ""
+    });
+    const displayValue = resolved != null && resolved !== "" ? String(resolved) : null;
+    const showDisplaySpan = isView || resolvedMode === "readonly" && displayValue == null;
+    const innerRef = React.useRef(null);
+    React.useEffect(() => {
+      var _a;
+      if (isControlled || showDisplaySpan) return;
+      const form = (_a = innerRef.current) == null ? void 0 : _a.form;
+      if (!form) return;
+      const handleReset = () => setResolved(defaultValue ?? "");
+      form.addEventListener("reset", handleReset);
+      return () => form.removeEventListener("reset", handleReset);
+    }, [isControlled, showDisplaySpan, defaultValue, setResolved]);
+    const setRef = React.useCallback((el) => {
+      innerRef.current = el;
+      if (typeof ref === "function") ref(el);
+      else if (ref) ref.current = el;
+    }, [ref]);
+    if (showDisplaySpan) {
+      const spanMode = isView ? "view" : "readonly";
       return /* @__PURE__ */ jsx(
         "div",
         {
           id: inputId,
-          "data-field-mode": "display",
+          "data-field-mode": spanMode,
           "aria-describedby": ariaDescribedBy,
           className: cn(
-            textareaVariants({ mode: "display", variant, size }),
+            textareaVariants({ mode: spanMode, variant, size }),
             "whitespace-pre-wrap break-words",
-            displayValue == null && "text-fg-muted",
+            displayValue == null && fieldEmptyColorClass(resolvedMode),
             className
           ),
-          children: displayValue ?? EMPTY_DISPLAY
+          children: displayValue ?? emptyDisplay
         }
       );
     }
+    const autoSizeMaxRows = typeof autoSize === "object" ? autoSize.maxRows : void 0;
+    const autoSizeRows = () => {
+      const text = String(resolved ?? "");
+      const newlineRows = (text.match(/\n/g) || []).length + 1;
+      const wrapRows = Math.ceil(text.length / 40);
+      return Math.min(autoSizeMaxRows ?? 10, Math.max(1, newlineRows, wrapRows));
+    };
+    const rows = rowsProp ?? (autoSize ? autoSizeRows() : 3);
+    const autoSizeStyle = autoSize ? {
+      // any-allow: CSS `field-sizing` 尚未進 TypeScript lib.dom,narrow 到 CSSProperties 仍需 cast
+      fieldSizing: "content",
+      ...autoSizeMaxRows === void 0 ? {} : { maxHeight: `calc(${autoSizeMaxRows} * 1lh + 2 * var(--field-control-py-${size}) + 2px)` }
+    } : void 0;
     return /* @__PURE__ */ jsx(
       "textarea",
       {
-        ref,
+        ref: setRef,
         id: inputId,
         rows,
-        value,
+        style: autoSizeStyle ? { ...autoSizeStyle, ...props.style } : props.style,
+        value: resolved,
         disabled: resolvedMode === "disabled",
         readOnly: resolvedMode === "readonly",
         "aria-invalid": error || void 0,
@@ -186,14 +218,15 @@ const Textarea = React.forwardRef(
         "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"
-          ],
+          textareaVariants({ mode: resolvedMode, variant, size, error }),
           className
         ),
-        ...props
+        ...props,
+        onChange: (e) => {
+          var _a;
+          setResolved(e.target.value);
+          (_a = props.onChange) == null ? void 0 : _a.call(props, e);
+        }
       }
     );
   }
@@ -204,13 +237,18 @@ const textareaMeta = {
   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" }
+    sm: { typography: "body" },
+    md: { typography: "body" },
+    lg: { typography: "body-lg" }
   },
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  // states 對齊 cva compoundVariants + anatomy ColorMatrix 真實 state 集合;
+  //   text input 無 'active'(按下)視覺態(Material/Polaris/Carbon TextArea 共識)。
+  //   'focus-visible' 泛指 focus 態:default chrome 實為 focus-within(滑鼠+鍵盤皆亮),naked chrome
+  //   為 focus-visible(鍵盤限定),readonly 有值態為 focus-visible ring(見上方 compoundVariants)。
+  states: ["default", "hover", "focus-visible", "readonly", "disabled", "error"],
   tokens: {
-    bg: ["bg-disabled", "bg-surface"],
+    bg: ["bg-disabled", "bg-readonly", "bg-surface"],
+    // 2026-07-04 補:readonly×default cva 實際消費(spec「Readonly 特例」主打 token)
     fg: ["text-fg-disabled", "text-fg-muted", "text-foreground"],
     ring: []
   },

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

@@ -1 +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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"}
+{"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, FieldVariantInternal } from '@/design-system/components/Field/field-types'\nimport { useFieldContext, useResolvedFieldSize, useResolvedFieldMode, useResolvedFieldVariant, useResolvedFieldInvalid } from '@/design-system/components/Field/field-context'\nimport { useFieldEmptyDisplay, fieldEmptyColorClass } from '@/design-system/components/Field/field-context'\nimport { useControllable } from '@/design-system/hooks/use-controllable'\n\n/**\n * Textarea — 多行文字輸入\n *\n * ── 定位 ────────────────────────────────────────────────────────────────\n * 多行版本的 Input，edit / view / 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 *   - view 渲染 <div> + white-space:pre-wrap 保留多行文本\n *\n * ── Padding 規則 ───────────────────────────────────────────────────────\n * 多行內容必須有上下內距才能閱讀舒適。不沿用 Input 的 items-center；\n * 上下內距使用 size 對應的 `--field-control-py-*` token，左右使用 `--field-px`，與同 size Input/Field family 幾何一致。\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 / naked;`bare` 2026-07-09 退役),mode×chrome 的\n// chrome 規則由 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-[var(--field-px)]',\n    'transition-colors duration-150',\n  ],\n  {\n    variants: {\n      mode: {\n        edit: '',\n        view: '',\n        readonly: '',\n        disabled: '',\n      },\n      // chrome 對齊 fieldWrapperStyles.variant(default / naked;2026-07-09 `bare` 退役)。\n      variant: {\n        default: '',\n        naked: '',\n      },\n      // py 隨 size 走 --field-control-py-* 公式,讓單行 Textarea 與同 size Input 等高\n      // (uiSize.css SSOT;DataTable naked compound 以 !py-* 覆蓋,不受影響)\n      size: {\n        sm: 'text-body py-[var(--field-control-py-sm)]',\n        md: 'text-body py-[var(--field-control-py-md)]',\n        lg: 'text-body-lg py-[var(--field-control-py-lg)]',\n      },\n      // error(2026-07-04 Q1,鏡射 fieldWrapperStyles error variant;Phase D 整併時一起收)\n      error: {\n        true: '',\n        false: '',\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        ],\n      },\n      { mode: 'edit', variant: 'default', error: false, className: 'focus-within:!border-primary focus-within:hover:!border-primary' },\n      {\n        // 2026-07-16 round16 Model A(user GO,推翻 2026-05-13 Path Ⅰ 的 `!px-0 !py-0`):\n        // Textarea view×default = **edit 幾何減 chrome** — 保留 base 的 field-px 與\n        // size 對應 field-control-py token(= edit 內距),只拔 border/bg。多行 read↔edit 零跳。跟 Field wrapper\n        // view×default 同 SSOT(field-wrapper.tsx)。\n        mode: 'view',\n        variant: 'default',\n        className: 'bg-transparent border border-transparent',\n      },\n      {\n        mode: 'readonly',\n        variant: 'default',\n        // 2026-07-13 a11y(WCAG 2.4.7):readonly 有值渲 native <textarea readOnly> 可鍵盤聚焦,base\n        //   outline-none + border-transparent 無焦點指示 → 鏡射 field-wrapper.tsx readonly ring idiom\n        //   (field-controls.spec.md「readonly focus ring」)。textarea 為裸 focusable element,直接用\n        //   focus-visible:(非 :has()),僅鍵盤聚焦顯示、滑鼠點擊不觸發。\n        className: 'bg-readonly border border-transparent focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\n      },\n      {\n        mode: 'disabled',\n        variant: 'default',\n        className: 'bg-disabled border border-transparent cursor-not-allowed text-fg-disabled',\n      },\n      // (2026-07-09 `bare` chrome × mode compounds 退役已移除;error:true 為 variant-agnostic 保留)\n      {\n        mode: 'edit',\n        error: true,\n        className: 'border-error hover:border-error-hover focus-within:!border-error focus-within:hover:!border-error',\n      },\n      // (2026-07-09 display×bare / readonly×bare / disabled×bare compounds 退役已移除)\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          // textarea UA stylesheet 預設 line-height: normal(1.2-1.5 不定),會跟 view\n          // `<div>` text-body line-height: 1.5(21px @ 14px)不一致 → cell 進 edit 後 height\n          // shift。顯式 leading 對齊 div 行為。\n          '!leading-[1.5]',\n        ],\n      },\n      { mode: 'edit', variant: 'naked', error: false, className: 'focus-visible:!border-primary focus-visible:hover:!border-primary' },\n      // 2026-05-13 Q1 R4 verify(per codex Q1 verdict 補 Textarea nuance):\n      // Textarea view×naked 用 `!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: 'view', variant: 'naked', className: 'bg-transparent !rounded-none !h-full !resize-none !px-0 !py-0 border border-transparent !leading-[1.5]' },\n      // 2026-07-16 round16:`readonly×naked` / `disabled×naked` 死格移除(鏡射 field-wrapper.tsx;\n      //   DataTable cell 廢 disabled 態 + readonly 從不入 naked,全庫 0 消費)。\n    ],\n    defaultVariants: {\n      mode: 'edit',\n      variant: 'default',\n      size: 'md',\n      error: false,\n    },\n  }\n)\n\nexport interface TextareaProps\n  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>,\n    Omit<VariantProps<typeof textareaVariants>, 'mode' | 'variant'> {\n  /** Field view mode */\n  mode?: FieldMode\n  /**\n   * Visual chrome(正交於 mode);Phase B1(2026-05-05)新增。透傳自 FieldContext.variant,per-prop override。\n   * - `'default'` — 完整 chrome(form 場景)\n   * (2026-07-09 `bare` variant 退役;naked = cell-as-input substrate,@internal)\n   * - `'naked'` — 完全無 chrome,cell-as-input(host cell 提供 border + focus frame,對齊 Airtable / Notion / Excel cell editing)\n   */\n  variant?: FieldVariant\n  /** Error 狀態（正交於 mode）。border-error + aria-invalid。 */\n  error?: boolean\n  /**\n   * Edit 態高度隨內容(`field-sizing: content`)。`{ maxRows }` 設上限,超過改捲動。\n   *\n   * 為何是能力而非預設:表單 Textarea 的 `rows={3}` 預留高度是刻意的(textarea.spec.md\n   * 「rows / min-h」);但 cell-as-input 與 InlineEdit 的 view 態高度由內容決定,edit 若固定\n   * rows 就會在 read↔edit 之間跳高。此 prop 讓兩種語境共用同一份實作,而非各自在呼叫端手刻\n   * (原本只有 DataTable cell-registry 有這段膠水,InlineEdit 因此漂移)。\n   */\n  autoSize?: boolean | { maxRows?: number }\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: rowsProp,\n      autoSize = false,\n      value,\n      defaultValue,\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: FieldVariantInternal = useResolvedFieldVariant(variantProp)\n    const error = useResolvedFieldInvalid(errorProp)\n    const size = useResolvedFieldSize(sizeProp)\n    // 2026-06-08 SSOT:mode 經 useResolvedFieldMode 統一解析(prop > 有效 disabled > fieldCtx.mode > readOnly > 'edit')\n    const resolvedMode: FieldMode = useResolvedFieldMode({ mode: modeProp, disabled, readOnly })\n    const emptyDisplay = useFieldEmptyDisplay()\n    const isEditable = resolvedMode === 'edit'\n    const isView = resolvedMode === 'view'\n    const inputId = idProp ?? fieldCtx?.id\n    const ariaDescribedBy = ariaDescribedByProp ?? fieldCtx?.descriptionId\n    const ariaErrorMessage = ariaErrorMessageProp ?? (error ? fieldCtx?.errorId : undefined)\n\n    // ── view mode(+ readonly 空值)純展示,渲染 <div> 取代 <textarea>(white-space:pre-wrap 保留多行) ──\n    // 對齊 Carbon read-only / Cloudscape display-mode\n    // 2026-07-08 user 拍板:readonly 空值也走 view-div 顯 '-'(readonly **有值** 仍走下方\n    // native <textarea readOnly> 保留選取/複製語意 — field-controls.spec.md「null / undefined 值」)。\n    // 2026-07-13 fix:空值判斷需認得 uncontrolled defaultValue — readonly / view 也要顯示內容,\n    //   不可誤判為空值渲 '-'(原為靜態 value ?? defaultValue)。\n    // 2026-07-14 R2(dual-model consensus,同 Input input.tsx):resolved value 改走 useControllable\n    // 內部 SSOT(Radix idiom)。原靜態版有 typing-stale gap:uncontrolled 打字後外部切\n    // view / readonly 仍顯示 stale defaultValue。uncontrolled 時 native textarea 由\n    // value={resolved} 內部驅動(defaultValue 只作初始值,不落 DOM attribute),同時修\n    // remount-stale(切 view 再回 edit 從 defaultValue attribute 重掛)+ form.reset() stale\n    // (HTML 標準 reset 不發 input event,下方 reset bridge 修)。controlled(傳 value)時\n    // useControllable 純 passthrough,行為與原本完全一致。consumer onChange 不接進 hook\n    // (保留 native event signature),於 <textarea> onChange 另行轉發。\n    const isControlled = value !== undefined\n    const [resolved, setResolved] = useControllable<string | number | readonly string[]>({\n      value: value as string | number | readonly string[] | undefined,\n      defaultValue: defaultValue ?? '',\n    })\n    const displayValue = resolved != null && resolved !== '' ? String(resolved) : null\n    const showDisplaySpan = isView || (resolvedMode === 'readonly' && displayValue == null)\n\n    // form.reset() bridge(uncontrolled only):reset 恢復 defaultValue 但不發 input event →\n    // 手動把 resolved 歸位 defaultValue。keyed on showDisplaySpan:view 分支不掛 native\n    // textarea,回 edit 重掛時 effect 重跑補掛 listener。\n    const innerRef = React.useRef<HTMLTextAreaElement | null>(null)\n    React.useEffect(() => {\n      if (isControlled || showDisplaySpan) return\n      const form = innerRef.current?.form\n      if (!form) return\n      const handleReset = () => setResolved(defaultValue ?? '')\n      form.addEventListener('reset', handleReset)\n      return () => form.removeEventListener('reset', handleReset)\n    }, [isControlled, showDisplaySpan, defaultValue, setResolved])\n    // Merge refs(LinkInput setRef idiom,link-input.tsx:138)\n    const setRef = React.useCallback((el: HTMLTextAreaElement | null) => {\n      innerRef.current = el\n      if (typeof ref === 'function') ref(el)\n      else if (ref) (ref as React.MutableRefObject<HTMLTextAreaElement | null>).current = el\n    }, [ref])\n\n    if (showDisplaySpan) {\n      const spanMode = isView ? 'view' : 'readonly'\n      return (\n        <div\n          id={inputId}\n          data-field-mode={spanMode}\n          aria-describedby={ariaDescribedBy}\n          className={cn(\n            textareaVariants({ mode: spanMode, variant: variant, size }),\n            'whitespace-pre-wrap break-words',\n            displayValue == null && fieldEmptyColorClass(resolvedMode),\n            className,\n          )}\n        >\n          {displayValue ?? emptyDisplay}\n        </div>\n      )\n    }\n\n    // autoSize:`field-sizing: content` 讓 textarea 長到內容高度(Chrome 123+ / FF 122+ / Safari 17+)。\n    // rows 是舊瀏覽器 fallback——沿用 cell 既有的換行 + 折行估算,別讓不支援的環境退回單行。\n    const autoSizeMaxRows = typeof autoSize === 'object' ? autoSize.maxRows : undefined\n    const autoSizeRows = () => {\n      const text = String(resolved ?? '')\n      const newlineRows = (text.match(/\\n/g) || []).length + 1\n      const wrapRows = Math.ceil(text.length / 40)\n      return Math.min(autoSizeMaxRows ?? 10, Math.max(1, newlineRows, wrapRows))\n    }\n    const rows = rowsProp ?? (autoSize ? autoSizeRows() : 3)\n    const autoSizeStyle: React.CSSProperties | undefined = autoSize\n      ? ({\n        // any-allow: CSS `field-sizing` 尚未進 TypeScript lib.dom,narrow 到 CSSProperties 仍需 cast\n        fieldSizing: 'content',\n        ...(autoSizeMaxRows === undefined\n          ? {}\n          : { maxHeight: `calc(${autoSizeMaxRows} * 1lh + 2 * var(--field-control-py-${size}) + 2px)` }),\n      } as React.CSSProperties)\n      : undefined\n\n    return (\n      <textarea\n        ref={setRef}\n        id={inputId}\n        rows={rows}\n        style={autoSizeStyle ? { ...autoSizeStyle, ...props.style } : props.style}\n        value={resolved}\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, error }),\n          className\n        )}\n        {...props}\n        // 置於 {...props} 後:寫回 resolved SSOT(controlled 時 useControllable 內部為 no-op)再轉發 consumer onChange。\n        onChange={(e) => {\n          setResolved(e.target.value)\n          props.onChange?.(e)\n        }}\n      />\n    )\n  }\n)\nTextarea.displayName = 'Textarea'\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// sizes 只反映 Textarea 真實控制的軸:typography(size 只控字體,不綁 field-height、無 icon slot —\n//   高度由 rows + resize-y 決定,per textarea.spec.md L88-92 / L64 / L113)。\nexport const textareaMeta = {\n  component: 'Textarea',\n  family: 4,\n  variants: {\n\n  },\n  sizes: {\n    sm: { typography: 'body' },\n    md: { typography: 'body' },\n    lg: { typography: 'body-lg' },\n  },\n  // states 對齊 cva compoundVariants + anatomy ColorMatrix 真實 state 集合;\n  //   text input 無 'active'(按下)視覺態(Material/Polaris/Carbon TextArea 共識)。\n  //   'focus-visible' 泛指 focus 態:default chrome 實為 focus-within(滑鼠+鍵盤皆亮),naked chrome\n  //   為 focus-visible(鍵盤限定),readonly 有值態為 focus-visible ring(見上方 compoundVariants)。\n  states: ['default', 'hover', 'focus-visible', 'readonly', 'disabled', 'error'],\n  tokens: {\n    bg: ['bg-disabled', 'bg-readonly', 'bg-surface'], // 2026-07-04 補:readonly×default cva 實際消費(spec「Readonly 特例」主打 token)\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/index.d.ts

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

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

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

package/dist/components/TimePicker/index.js

@@ -0,0 +1,6 @@
+import { TimePicker, timePickerMeta } from "./time-picker.js";
+export {
+  TimePicker,
+  timePickerMeta
+};
+//# sourceMappingURL=index.js.map

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

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

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

@@ -1 +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"}
+{"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;AAuID,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

@@ -37,6 +37,7 @@ function TimeColumn({ values, selected, disabledSet, label, onSelect, withDivide
     item.scrollIntoView({ block: "center", behavior: isFirstRunRef.current ? "auto" : "smooth" });
     isFirstRunRef.current = false;
   }, [values, selected]);
+  const baseId = React.useId();
   const handleKeyDown = (e) => {
     const idx = values.indexOf(selected);
     if (e.key === "ArrowDown") {
@@ -62,42 +63,49 @@ function TimeColumn({ values, selected, disabledSet, label, onSelect, withDivide
       }
     }
   };
-  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
-        );
-      })
-    }
-  ) });
+  return (
+    // viewportTabIndex=-1:焦點直接落 listbox(有 keydown),消除「Viewport+listbox 雙 tab stop
+    // + 焦點落 Viewport 時 ↑/↓ 觸發原生捲動非選值」a11y bug(axe 由 listbox tabIndex=0 滿足)
+    /* @__PURE__ */ jsx(ScrollArea, { viewportTabIndex: -1, className: cn("flex-1 h-full", withDivider && "border-r border-divider"), children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: listRef,
+        role: "listbox",
+        "aria-label": label,
+        "aria-activedescendant": selected != null && values.includes(selected) ? `${baseId}-opt-${selected}` : void 0,
+        tabIndex: 0,
+        onKeyDown: handleKeyDown,
+        className: "flex flex-col py-2 focus-visible:outline-2 focus-visible:outline-ring 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",
+            {
+              id: `${baseId}-opt-${v}`,
+              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",
+                // 2026-08-11(SSOT = item-anatomy「選中 × 互動疊加」):滑鼠釘住本就正確;補鍵盤焦點深一階。
+                isSelected && "bg-neutral-selected text-foreground hover:bg-neutral-selected focus-visible:bg-neutral-selected-focus",
+                isDisabled && "text-fg-disabled cursor-not-allowed hover:bg-transparent"
+              ),
+              children: String(v).padStart(2, "0")
+            },
+            v
+          );
+        })
+      }
+    ) })
+  );
 }
 function TimeColumns({
   value,

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

@@ -1 +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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"}
+{"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  // a11y:穩定 id 前綴,讓 listbox `aria-activedescendant` 指向目前 active(= selected)option。\n  // single-tabstop + 方向鍵 listbox 應透過 activedescendant 告知 AT 哪個 option active,\n  // 否則 SR 方向鍵移動時讀不出目前 option(WAI-ARIA listbox virtual-focus 慣例)。\n  const baseId = React.useId()\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    // viewportTabIndex=-1:焦點直接落 listbox(有 keydown),消除「Viewport+listbox 雙 tab stop\n    // + 焦點落 Viewport 時 ↑/↓ 觸發原生捲動非選值」a11y bug(axe 由 listbox tabIndex=0 滿足)\n    <ScrollArea viewportTabIndex={-1} className={cn('flex-1 h-full', withDivider && 'border-r border-divider')}>\n      <div\n        ref={listRef}\n        role=\"listbox\"\n        aria-label={label}\n        // guard values.includes:off-step value(如 minuteStep=15 但分=07)的 option 未渲染,\n        // 指向未渲染 id = 懸空 ARIA 參照(AT 讀空);僅真實渲染的 option 才掛\n        aria-activedescendant={selected != null && values.includes(selected) ? `${baseId}-opt-${selected}` : undefined}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        className=\"flex flex-col py-2 focus-visible:outline-2 focus-visible:outline-ring 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              id={`${baseId}-opt-${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                // 2026-08-11(SSOT = item-anatomy「選中 × 互動疊加」):滑鼠釘住本就正確;補鍵盤焦點深一階。\n                isSelected && 'bg-neutral-selected text-foreground hover:bg-neutral-selected focus-visible:bg-neutral-selected-focus',\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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"}