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

package/dist/components/Tag/tag.js

@@ -0,0 +1,172 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { X } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Tooltip, TooltipTrigger, TooltipContent } from "../Tooltip/tooltip.js";
+import { ItemInlineActionButton } from "../../patterns/element-anatomy/item-anatomy.js";
+let _measureCtx = null;
+function getMeasureCtx() {
+  if (!_measureCtx) _measureCtx = document.createElement("canvas").getContext("2d");
+  return _measureCtx;
+}
+const tagVariants = cva(
+  "inline-flex items-center rounded-md border border-transparent transition-colors cursor-text",
+  {
+    variants: {
+      color: {
+        // 直接引用 primitive（bg=step-1, text=step-7），不經過語義層
+        // step-1 在 dark mode 用 alpha 公式，step-7 用 lighter 公式——兩個 mode 都正確
+        neutral: "bg-secondary text-foreground",
+        blue: "bg-[var(--color-blue-1)] text-[var(--color-blue-7)]",
+        red: "bg-[var(--color-deep-orange-1)] text-[var(--color-deep-orange-7)]",
+        green: "bg-[var(--color-green-1)] text-[var(--color-green-7)]",
+        yellow: "bg-[var(--color-yellow-1)] text-[var(--color-yellow-7)]",
+        turquoise: "bg-[var(--color-turquoise-1)] text-[var(--color-turquoise-7)]",
+        purple: "bg-[var(--color-purple-1)] text-[var(--color-purple-7)]",
+        magenta: "bg-[var(--color-magenta-1)] text-[var(--color-magenta-7)]",
+        indigo: "bg-[var(--color-indigo-1)] text-[var(--color-indigo-7)]"
+      },
+      size: {
+        sm: "h-5 px-1 text-caption font-medium",
+        md: "h-6 px-1 text-body font-normal",
+        lg: "h-6 px-1 text-body font-normal"
+      }
+    },
+    defaultVariants: {
+      color: "neutral",
+      size: "md"
+    }
+  }
+);
+const SOLID_CLASSES = {
+  neutral: "bg-[var(--color-neutral-9)] text-inverse-fg",
+  blue: "bg-[var(--color-blue-6)] text-on-emphasis",
+  red: "bg-[var(--color-deep-orange-6)] text-on-emphasis",
+  green: "bg-[var(--color-green-6)] text-on-emphasis",
+  yellow: "bg-[var(--color-yellow-6)] text-[var(--warning-foreground)]",
+  turquoise: "bg-[var(--color-turquoise-6)] text-on-emphasis",
+  purple: "bg-[var(--color-purple-6)] text-on-emphasis",
+  magenta: "bg-[var(--color-magenta-6)] text-on-emphasis",
+  indigo: "bg-[var(--color-indigo-6)] text-on-emphasis"
+};
+const SOLID_DISMISS_HOVER = {
+  neutral: { hover: "var(--inverse-neutral-hover)", active: "var(--inverse-neutral-active)" },
+  blue: { hover: "var(--blue-hover)", active: "var(--blue-active)" },
+  red: { hover: "var(--red-hover)", active: "var(--red-active)" },
+  green: { hover: "var(--green-hover)", active: "var(--green-active)" },
+  yellow: { hover: "var(--yellow-hover)", active: "var(--yellow-active)" },
+  turquoise: { hover: "var(--turquoise-hover)", active: "var(--turquoise-active)" },
+  purple: { hover: "var(--purple-hover)", active: "var(--purple-active)" },
+  magenta: { hover: "var(--magenta-hover)", active: "var(--magenta-active)" },
+  indigo: { hover: "var(--indigo-hover)", active: "var(--indigo-active)" }
+};
+function TagDismiss({ onDismiss, label, solid, color }) {
+  const solidColors = solid && color ? SOLID_DISMISS_HOVER[color] : void 0;
+  return /* @__PURE__ */ jsx(
+    ItemInlineActionButton,
+    {
+      icon: X,
+      size: "md",
+      onClick: (e) => {
+        e.stopPropagation();
+        onDismiss();
+      },
+      "aria-label": `移除 ${label}`,
+      style: solidColors ? { "--dismiss-hover": solidColors.hover, "--dismiss-active": solidColors.active } : void 0,
+      hoverBgClassName: solidColors ? "group-hover/action:bg-[var(--dismiss-hover)] group-active/action:bg-[var(--dismiss-active)]" : void 0,
+      className: "text-current hover:text-current active:text-current"
+    }
+  );
+}
+function TagInner({ className, color, size, icon: Icon, avatar, onDismiss, solid, unbounded = false, children, style, ...props }, forwardedRef) {
+  const solidClass = solid ? SOLID_CLASSES[color ?? "neutral"] : void 0;
+  const ownRef = React.useRef(null);
+  const [isTruncated, setIsTruncated] = React.useState(false);
+  React.useLayoutEffect(() => {
+    const el = ownRef.current;
+    if (!el) return;
+    const ctx = getMeasureCtx();
+    const check = () => {
+      const textSpan = el.querySelector("[data-tag-text]");
+      if (!textSpan || !ctx) return;
+      const text = textSpan.textContent || "";
+      const cs = getComputedStyle(textSpan);
+      ctx.font = `${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`;
+      const textWidth = ctx.measureText(text).width;
+      const padL = parseFloat(cs.paddingLeft) || 0;
+      const padR = parseFloat(cs.paddingRight) || 0;
+      const needed = textWidth + padL + padR;
+      setIsTruncated(needed > textSpan.clientWidth + 1);
+    };
+    check();
+    const obs = new ResizeObserver(check);
+    obs.observe(el);
+    return () => obs.disconnect();
+  }, [children]);
+  const label = typeof children === "string" ? children : "";
+  const tag = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: (el) => {
+        ownRef.current = el;
+        if (typeof forwardedRef === "function") forwardedRef(el);
+        else if (forwardedRef) forwardedRef.current = el;
+      },
+      "data-tag-root": "",
+      className: cn(tagVariants({ color, size }), solidClass, "w-fit min-w-0 overflow-hidden", className),
+      style: {
+        maxWidth: unbounded ? "var(--combobox-tag-area-inline-size, 100%)" : "min(var(--combobox-tag-area-inline-size, 10rem), 10rem)",
+        ...style
+      },
+      ...props,
+      children: [
+        Icon && /* @__PURE__ */ jsx(Icon, { size: 16, "aria-hidden": true }),
+        avatar && /* @__PURE__ */ jsx("span", { className: "shrink-0 w-4 h-4 rounded-full overflow-hidden inline-grid place-content-center [&>*]:w-full [&>*]:h-full", children: avatar }),
+        /* @__PURE__ */ jsx("span", { "data-tag-text": "", className: "px-1 truncate min-w-0", children }),
+        onDismiss && /* @__PURE__ */ jsx(TagDismiss, { onDismiss, label, solid, color: color ?? "neutral" })
+      ]
+    }
+  );
+  if (!isTruncated) return tag;
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: tag }),
+    /* @__PURE__ */ jsx(TooltipContent, { children })
+  ] });
+}
+const Tag = React.forwardRef(TagInner);
+Tag.displayName = "Tag";
+const tagMeta = {
+  component: "Tag",
+  family: 3,
+  variants: {
+    neutral: { purpose: "通用分類、草稿、無特定語義" },
+    blue: { purpose: "進行中、資訊提示、active 狀態（對應 --info）" },
+    red: { purpose: "錯誤、已封鎖、危險（對應 --error）" },
+    green: { purpose: "成功、已完成、已核准（對應 --success）" },
+    yellow: { purpose: "警告、待審核、注意（對應 --warning）" },
+    turquoise: { purpose: "分類色（無固定語義）" },
+    purple: { purpose: "分類色（無固定語義）" },
+    magenta: { purpose: "分類色（無固定語義）" },
+    indigo: { purpose: "分類色（無固定語義）" }
+  },
+  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-neutral-active", "bg-neutral-hover", "bg-secondary", "bg-transparent"],
+    fg: ["text-foreground", "text-inverse-fg"],
+    ring: []
+  },
+  defaultVariant: "neutral",
+  defaultSize: "md"
+};
+export {
+  Tag,
+  tagMeta,
+  tagVariants
+};
+//# sourceMappingURL=tag.js.map

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/index.d.ts

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

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

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

package/dist/components/Textarea/index.js

@@ -0,0 +1,7 @@
+import { Textarea, textareaMeta, textareaVariants } from "./textarea.js";
+export {
+  Textarea,
+  textareaMeta,
+  textareaVariants
+};
+//# sourceMappingURL=index.js.map

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

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

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/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

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