npm - @qijenchen/design-system - Versions diffs - 0.1.0-beta.8 → 0.1.0-beta.80 - Mend

@qijenchen/design-system 0.1.0-beta.8 → 0.1.0-beta.80

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1356) hide show

package/dist/components/Tag/tag.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 import type { LucideIcon } from "lucide-react";
 declare const tagVariants: (props?: ({
-    color?: "blue" | "green" | "indigo" | "magenta" | "purple" | "red" | "turquoise" | "yellow" | "neutral" | null | undefined;
+    color?: "blue" | "green" | "indigo" | "lime" | "magenta" | "orange" | "purple" | "red" | "turquoise" | "yellow" | "neutral" | "deep-orange" | "amber" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface TagProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'prefix' | 'color'>, VariantProps<typeof tagVariants> {
@@ -10,9 +10,11 @@ export interface TagProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'pr
     icon?: LucideIcon;
     /** 左側 avatar（ReactNode），與 icon 互斥。 */
     avatar?: React.ReactNode;
-    /** 可移除——Tag 自動渲染 dismiss 按鈕並控制尺寸與互動樣式 */
-    onDismiss?: () => void;
-    /** 深底白字模式（step-6 背景 + 白色前景，warning 例外） */
+    /** 可移除——Tag 自動渲染 remove 按鈕並控制尺寸與互動樣式(從集合移除 item) */
+    onRemove?: () => void;
+    /** remove 按鈕的 aria-label 目標名(a11y)。children 為非字串 ReactNode 時建議傳,否則 SR 讀不出移除哪個 tag。預設取 string children。 */
+    dismissLabel?: string;
+    /** 深底模式（step-6 背景 + on-emphasis 配對前景;亮色 hue yellow/amber/orange/lime 用深字 --on-emphasis-dark,green 白字例外） */
     solid?: boolean;
     /**
      * 2026-05-15 Q3 真 SSOT fix(per user verbatim「同空間兩判斷點」+「不要冰山一角」):
@@ -29,51 +31,63 @@ export declare const tagMeta: {
     readonly family: 3;
     readonly variants: {
         readonly neutral: {
-            readonly purpose: "通用分類、草稿、無特定語義";
+            readonly purpose: "通用分類、草稿、無特定語義(secondary 底)";
         };
         readonly blue: {
-            readonly purpose: "進行中、資訊提示、active 狀態（對應 --info）";
-        };
-        readonly red: {
-            readonly purpose: "錯誤、已封鎖、危險（對應 --error）";
+            readonly purpose: "categorical 色相(--color-blue-*)";
         };
         readonly green: {
-            readonly purpose: "成功、已完成、已核准（對應 --success）";
+            readonly purpose: "categorical 色相(--color-green-*)";
+        };
+        readonly 'deep-orange': {
+            readonly purpose: "categorical 色相(--color-deep-orange-*,hue 38)";
         };
         readonly yellow: {
-            readonly purpose: "警告、待審核、注意（對應 --warning）";
+            readonly purpose: "categorical 色相(--color-yellow-*,淺底深字)";
+        };
+        readonly red: {
+            readonly purpose: "categorical 色相(--color-red-*,品牌紅家族 hue 25;≠ 語意 --error)";
+        };
+        readonly orange: {
+            readonly purpose: "categorical 色相(--color-orange-*)";
+        };
+        readonly amber: {
+            readonly purpose: "categorical 色相(--color-amber-*,淺底深字)";
+        };
+        readonly lime: {
+            readonly purpose: "categorical 色相(--color-lime-*)";
         };
         readonly turquoise: {
-            readonly purpose: "分類色（無固定語義）";
+            readonly purpose: "categorical 色相(--color-turquoise-*)";
+        };
+        readonly indigo: {
+            readonly purpose: "categorical 色相(--color-indigo-*)";
         };
         readonly purple: {
-            readonly purpose: "分類色（無固定語義）";
+            readonly purpose: "categorical 色相(--color-purple-*)";
         };
         readonly magenta: {
-            readonly purpose: "分類色（無固定語義）";
-        };
-        readonly indigo: {
-            readonly purpose: "分類色（無固定語義）";
+            readonly purpose: "categorical 色相(--color-magenta-*)";
         };
     };
     readonly sizes: {
         readonly sm: {
-            readonly fieldHeight: 28;
+            readonly height: 20;
             readonly iconSize: 16;
-            readonly typography: "body";
+            readonly typography: "caption";
         };
         readonly md: {
-            readonly fieldHeight: 32;
+            readonly height: 24;
             readonly iconSize: 16;
             readonly typography: "body";
         };
         readonly lg: {
-            readonly fieldHeight: 40;
-            readonly iconSize: 20;
+            readonly height: 24;
+            readonly iconSize: 16;
             readonly typography: "body";
         };
     };
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default"];
     readonly tokens: {
         readonly bg: readonly ["bg-neutral-active", "bg-neutral-hover", "bg-secondary", "bg-transparent"];
         readonly fg: readonly ["text-foreground", "text-inverse-fg"];

package/dist/components/Tag/tag.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;~~AAuB9C~~,QAAA,MAAM,WAAW;;;~~8EA4BhB~~,CAAA;~~AAiBD~~,MAAM,WAAW,QACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,EACpE,YAAY,CAAC,OAAO,WAAW,CAAC;IAClC,qDAAqD;IACrD,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,~~yCAAyC~~;~~IACzC~~,~~SAAS~~,CAAC,EAAE,MAAM,IAAI,CAAA;~~IACtB~~,~~0CAA0C~~;~~IAC1C~~,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;~~AAyHD~~,QAAA,MAAM,GAAG,iFAAuD,CAAA;AAKhE,eAAO,MAAM,OAAO~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BV~~,CAAA;AAEV,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,CAAA"}
1	+ {"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAwB9C,QAAA,MAAM,WAAW;;;8EAuBhB,CAAA;AAWD,MAAM,WAAW,QACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC,EACpE,YAAY,CAAC,OAAO,WAAW,CAAC;IAClC,qDAAqD;IACrD,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,sCAAsC;IACtC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,0GAA0G;IAC1G,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2GAA2G;IAC3G,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAkHD,QAAA,MAAM,GAAG,iFAAuD,CAAA;AAKhE,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCV,CAAA;AAEV,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/Tag/tag.js CHANGED Viewed

@@ -5,6 +5,7 @@ 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";
+import { CAT_SUBTLE, CAT_SOLID, CAT_INTERACT } from "../../tokens/categorical-color.js";
 let _measureCtx = null;
 function getMeasureCtx() {
   if (!_measureCtx) _measureCtx = document.createElement("canvas").getContext("2d");
@@ -14,18 +15,13 @@ const tagVariants = cva(
   "inline-flex items-center rounded-md border border-transparent transition-colors cursor-text",
   {
     variants: {
+      // color：categorical 色相(裝飾性分類,非語意狀態)。**消費 categorical-color SSOT**——
+      // key X 一律對 `--color-X-*`(1:1,零 offset)。neutral 非色相(無 hue),用 secondary 底自處理。
+      // 2026-06-04 修:原 `red` 誤接 `--color-deep-orange-*`(red=品牌紅 hue-25 ≠ deep-orange hue-38
+      // ≠ 語意 --error〔= deep-orange〕);改消費 SSOT 後 red→`--color-red-*`,並補齊全 12 色相。
       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)]"
+        ...CAT_SUBTLE
       },
       size: {
         sm: "h-5 px-1 text-caption font-medium",
@@ -41,27 +37,13 @@ const tagVariants = cva(
 );
 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"
+  ...CAT_SOLID
 };
 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)" }
+  ...CAT_INTERACT
 };
-function TagDismiss({ onDismiss, label, solid, color }) {
+function TagDismiss({ onRemove, label, solid, color }) {
   const solidColors = solid && color ? SOLID_DISMISS_HOVER[color] : void 0;
   return /* @__PURE__ */ jsx(
     ItemInlineActionButton,
@@ -70,16 +52,16 @@ function TagDismiss({ onDismiss, label, solid, color }) {
       size: "md",
       onClick: (e) => {
         e.stopPropagation();
-        onDismiss();
+        onRemove();
       },
-      "aria-label": `移除 ${label}`,
+      "aria-label": 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) {
+function TagInner({ className, color, size, icon: Icon, avatar, onRemove, dismissLabel, 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);
@@ -124,7 +106,7 @@ function TagInner({ className, color, size, icon: Icon, avatar, onDismiss, solid
         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" })
+        onRemove && /* @__PURE__ */ jsx(TagDismiss, { onRemove, label: dismissLabel || label, solid, color: color ?? "neutral" })
       ]
     }
   );
@@ -139,23 +121,36 @@ Tag.displayName = "Tag";
 const tagMeta = {
   component: "Tag",
   family: 3,
+  // categorical 色相(裝飾性分類,非語意狀態)。**1:1 對 `--color-{hue}-*` primitive,零 offset**。
+  // 不對應語意 token——語意狀態(error/info/success/warning)走 Notice / Alert 等狀態元件,
+  // 不是 Tag 色相。2026-06-04 修:移除原「red 對應 --error / blue 對應 --info ...」誤導框架
+  // (red = 品牌紅 hue-25,跟語意 --error〔= deep-orange〕無關)。
   variants: {
-    neutral: { purpose: "通用分類、草稿、無特定語義" },
-    blue: { purpose: "進行中、資訊提示、active 狀態（對應 --info）" },
-    red: { purpose: "錯誤、已封鎖、危險（對應 --error）" },
-    green: { purpose: "成功、已完成、已核准（對應 --success）" },
-    yellow: { purpose: "警告、待審核、注意（對應 --warning）" },
-    turquoise: { purpose: "分類色（無固定語義）" },
-    purple: { purpose: "分類色（無固定語義）" },
-    magenta: { purpose: "分類色（無固定語義）" },
-    indigo: { purpose: "分類色（無固定語義）" }
+    neutral: { purpose: "通用分類、草稿、無特定語義(secondary 底)" },
+    blue: { purpose: "categorical 色相(--color-blue-*)" },
+    green: { purpose: "categorical 色相(--color-green-*)" },
+    "deep-orange": { purpose: "categorical 色相(--color-deep-orange-*,hue 38)" },
+    yellow: { purpose: "categorical 色相(--color-yellow-*,淺底深字)" },
+    red: { purpose: "categorical 色相(--color-red-*,品牌紅家族 hue 25;≠ 語意 --error)" },
+    orange: { purpose: "categorical 色相(--color-orange-*)" },
+    amber: { purpose: "categorical 色相(--color-amber-*,淺底深字)" },
+    lime: { purpose: "categorical 色相(--color-lime-*)" },
+    turquoise: { purpose: "categorical 色相(--color-turquoise-*)" },
+    indigo: { purpose: "categorical 色相(--color-indigo-*)" },
+    purple: { purpose: "categorical 色相(--color-purple-*)" },
+    magenta: { purpose: "categorical 色相(--color-magenta-*)" }
   },
   sizes: {
-    sm: { fieldHeight: 28, iconSize: 16, typography: "body" },
-    md: { fieldHeight: 32, iconSize: 16, typography: "body" },
-    lg: { fieldHeight: 40, iconSize: 20, typography: "body" }
+    // Tag 尺寸不引用 field-height token（spec.md:180/241——Tag 與 Field 尺寸獨立）。
+    // height = Tag 自身高度（cva h-5/h-6/h-6 = 20/24/24，lg = md alias）。
+    // iconSize 全尺寸統一 16（tag.tsx:195 硬寫 size={16}）。
+    sm: { height: 20, iconSize: 16, typography: "caption" },
+    md: { height: 24, iconSize: 16, typography: "body" },
+    lg: { height: 24, iconSize: 16, typography: "body" }
   },
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  // Tag 為純展示 indicator，無互動 state（spec.md:249-256「為何無 StateBehavior」）。
+  // 唯一行為 dismiss 屬 Inline Action pattern，非 Tag 自有 state。
+  states: ["default"],
   tokens: {
     bg: ["bg-neutral-active", "bg-neutral-hover", "bg-secondary", "bg-transparent"],
     fg: ["text-foreground", "text-inverse-fg"],

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

	@@ -1 +1 @@
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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"}
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\"\nimport { CAT_SUBTLE, CAT_SOLID, CAT_INTERACT } from \"@/design-system/tokens/categorical-color\"\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：categorical 色相(裝飾性分類,非語意狀態)。消費 categorical-color SSOT——\n // key X 一律對 `--color-X-`(1:1,零 offset)。neutral 非色相(無 hue),用 secondary 底自處理。\n // 2026-06-04 修:原 `red` 誤接 `--color-deep-orange-`(red=品牌紅 hue-25 ≠ deep-orange hue-38\n // ≠ 語意 --error〔= deep-orange〕);改消費 SSOT 後 red→`--color-red-`,並補齊全 12 色相。\n color: {\n neutral: \"bg-secondary text-foreground\",\n ...CAT_SUBTLE,\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 底 + on-emphasis 配對文字,消費 categorical-color SSOT）──\n// 白字 --on-emphasis(夠深的 hue)/ 深字 --on-emphasis-dark(亮 hue:yellow/amber/orange/lime);green 白字例外。\n// 消費 categorical-color SSOT(CAT_SOLID,1:1 色相)。neutral 非色相,用 neutral-9\n// + --inverse-fg（light=白字, dark=深字，自動反轉）自處理。\nconst SOLID_CLASSES: Record<string, string> = {\n neutral: 'bg-[var(--color-neutral-9)] text-inverse-fg',\n ...CAT_SOLID,\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 自動渲染 remove 按鈕並控制尺寸與互動樣式(從集合移除 item) /\n onRemove?: () => void\n /* remove 按鈕的 aria-label 目標名(a11y)。children 為非字串 ReactNode 時建議傳,否則 SR 讀不出移除哪個 tag。預設取 string children。 /\n dismissLabel?: string\n /* 深底模式（step-6 背景 + on-emphasis 配對前景;亮色 hue yellow/amber/orange/lime 用深字 --on-emphasis-dark,green 白字例外） /\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// 消費 categorical-color SSOT(CAT_INTERACT,semantic --{hue}-hover/active token),\n// 跟 --primary-hover/active 同模式:solid 色彩 shade change(hover 較亮 step、active 較暗 step),\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 ...CAT_INTERACT,\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({ onRemove, label, solid, color }: { onRemove: () => 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(); onRemove() }}\n aria-label={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, onRemove, dismissLabel, 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 {onRemove && <TagDismiss onRemove={onRemove} label={dismissLabel \|\| 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 // categorical 色相(裝飾性分類,非語意狀態)。*1:1 對 `--color-{hue}-` primitive,零 offset*。\n // 不對應語意 token——語意狀態(error/info/success/warning)走 Notice / Alert 等狀態元件,\n // 不是 Tag 色相。2026-06-04 修:移除原「red 對應 --error / blue 對應 --info ...」誤導框架\n // (red = 品牌紅 hue-25,跟語意 --error〔= deep-orange〕無關)。\n variants: {\n neutral: { purpose: '通用分類、草稿、無特定語義(secondary 底)' },\n blue: { purpose: 'categorical 色相(--color-blue-)' },\n green: { purpose: 'categorical 色相(--color-green-)' },\n 'deep-orange': { purpose: 'categorical 色相(--color-deep-orange-,hue 38)' },\n yellow: { purpose: 'categorical 色相(--color-yellow-,淺底深字)' },\n red: { purpose: 'categorical 色相(--color-red-,品牌紅家族 hue 25;≠ 語意 --error)' },\n orange: { purpose: 'categorical 色相(--color-orange-)' },\n amber: { purpose: 'categorical 色相(--color-amber-,淺底深字)' },\n lime: { purpose: 'categorical 色相(--color-lime-)' },\n turquoise: { purpose: 'categorical 色相(--color-turquoise-)' },\n indigo: { purpose: 'categorical 色相(--color-indigo-)' },\n purple: { purpose: 'categorical 色相(--color-purple-)' },\n magenta: { purpose: 'categorical 色相(--color-magenta-*)' },\n },\n sizes: {\n // Tag 尺寸不引用 field-height token（spec.md:180/241——Tag 與 Field 尺寸獨立）。\n // height = Tag 自身高度（cva h-5/h-6/h-6 = 20/24/24，lg = md alias）。\n // iconSize 全尺寸統一 16（tag.tsx:195 硬寫 size={16}）。\n sm: { height: 20, iconSize: 16, typography: 'caption' },\n md: { height: 24, iconSize: 16, typography: 'body' },\n lg: { height: 24, iconSize: 16, typography: 'body' },\n },\n // Tag 為純展示 indicator，無互動 state（spec.md:249-256「為何無 StateBehavior」）。\n // 唯一行為 dismiss 屬 Inline Action pattern，非 Tag 自有 state。\n states: ['default'],\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 ADDED Viewed

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

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

	@@ -0,0 +1 @@
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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

@@ -14,7 +14,7 @@ import type { FieldMode, FieldVariant } from '../../components/Field/field-types
  *
  * ── Padding 規則 ───────────────────────────────────────────────────────
  * 多行內容必須有上下內距才能閱讀舒適。不沿用 Input 的 items-center，
- * 改用 py-2（8px）固定上下內距 + px-3 左右內距（與 Input 一致）。
+ * 改用 py-2（8px）固定上下內距 + px-[var(--field-px)]（12px token，左右內距 SSOT，與 Input/Field family 一致）。
  *
  * ── Size ────────────────────────────────────────────────────────────────
  * sm / md → text-body（14px）
@@ -34,7 +34,8 @@ export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTex
     /**
      * 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)
+     * - `'bare'` — 透明 variant,hover/focus 才 reveal inner border(toolbar / inline editing)
+     * - `'naked'` — 完全無 chrome,cell-as-input(host cell 提供 border + focus frame,對齊 Airtable / Notion / Excel cell editing)
      */
     variant?: FieldVariant;
     /** Error 狀態（正交於 mode）。border-error + aria-invalid。 */
@@ -47,22 +48,16 @@ export declare const textareaMeta: {
     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 typography: "body-lg";
         };
     };
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default", "hover", "focus-visible", "readonly", "disabled", "error"];
     readonly tokens: {
         readonly bg: readonly ["bg-disabled", "bg-surface"];
         readonly fg: readonly ["text-fg-disabled", "text-fg-muted", "text-foreground"];

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

	@@ -1 +1 @@
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"}
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;;;;;OAKG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,sDAAsD;IACtD,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAGD,QAAA,MAAM,QAAQ,2FAgFb,CAAA;AAMD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;CAoBf,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/Textarea/textarea.js CHANGED Viewed

@@ -2,7 +2,7 @@ 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 { useFieldContext, useResolvedFieldVariant, useResolvedFieldInvalid, useResolvedFieldSize, useResolvedFieldMode } from "../Field/field-context.js";
 import { EMPTY_DISPLAY } from "../Field/field-wrapper.js";
 const textareaVariants = cva(
   [
@@ -13,7 +13,7 @@ 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)] py-2",
     "transition-colors duration-150"
   ],
   {
@@ -50,14 +50,14 @@ const textareaVariants = cva(
       {
         mode: "display",
         variant: "default",
-        // 2026-05-13 Q3 Path Ⅰ:Textarea default display zero chrome,!px-0 !py-0 override base `px-3 py-2`
+        // 2026-05-13 Q3 Path Ⅰ:Textarea default display zero chrome,!px-0 !py-0 override base `px-[var(--field-px)] 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"
+        className: "bg-readonly border border-transparent"
       },
       {
         mode: "disabled",
@@ -143,10 +143,10 @@ const Textarea = React.forwardRef(
     ...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 isEditable = resolvedMode === "edit";
     const isDisplay = resolvedMode === "display";
     const inputId = idProp ?? (fieldCtx == null ? void 0 : fieldCtx.id);
@@ -204,11 +204,13 @@ 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 共識)。
+  states: ["default", "hover", "focus-visible", "readonly", "disabled", "error"],
   tokens: {
     bg: ["bg-disabled", "bg-surface"],
     fg: ["text-fg-disabled", "text-fg-muted", "text-foreground"],

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

	@@ -1 +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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"}
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, useResolvedFieldSize, useResolvedFieldMode, useResolvedFieldVariant, useResolvedFieldInvalid } 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-[var(--field-px)]（12px token，左右內距 SSOT，與 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 / 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-[var(--field-px)] 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-[var(--field-px)] 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-readonly 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 inner border(toolbar / inline editing)\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\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 = 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 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// 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 states: ['default', 'hover', 'focus-visible', 'readonly', 'disabled', 'error'],\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":";;;;;;AAiCA,MAAM,mBAAmB;AAAA,EACvB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU;AAAA,MAAA;AAAA;AAAA,MAGZ,SAAS;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,MAET,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,kBAAkB;AAAA;AAAA,MAEhB;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA;AAAA;AAAA,QAGT,WAAW;AAAA,MAAA;AAAA,MAEb;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,QACT,WAAW;AAAA,MAAA;AAAA,MAEb;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,QACT,WAAW;AAAA,MAAA;AAAA;AAAA,MAGb;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,QACT,WAAW;AAAA,MAAA;AAAA,MAEb;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,QACT,WAAW;AAAA,MAAA;AAAA,MAEb;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,QACT,WAAW;AAAA,MAAA;AAAA;AAAA;AAAA;AAAA,MAKb;AAAA,QACE,MAAM;AAAA,QACN,SAAS;AAAA,QACT,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA;AAAA;AAAA,UAIA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQF,EAAE,MAAM,WAAW,SAAS,SAAS,WAAW,yGAAA;AAAA,MAChD,EAAE,MAAM,YAAY,SAAS,SAAS,WAAW,yGAAA;AAAA;AAAA;AAAA,MAGjD,EAAE,MAAM,YAAY,SAAS,SAAS,WAAW,6IAAA;AAAA,IAA6I;AAAA,IAEhM,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAmBA,MAAM,WAAW,MAAM;AAAA,EACrB,CACE;AAAA,IACE,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO,YAAY;AAAA,IACnB,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,IAAI;AAAA,IACJ,oBAAoB;AAAA,IACpB,qBAAqB;AAAA,IACrB,GAAG;AAAA,EAAA,GAEL,QACG;AAEH,UAAM,WAAW,gBAAA;AAEjB,UAAM,UAAwB,wBAAwB,WAAW;AACjE,UAAM,QAAQ,wBAAwB,SAAS;AAC/C,UAAM,OAAO,qBAAqB,QAAQ;AAE1C,UAAM,eAA0B,qBAAqB,EAAE,MAAM,UAAU,UAAU,UAAU;AAC3F,UAAM,aAAa,iBAAiB;AACpC,UAAM,YAAY,iBAAiB;AACnC,UAAM,UAAU,WAAU,qCAAU;AACpC,UAAM,kBAAkB,wBAAuB,qCAAU;AACzD,UAAM,mBAAmB,yBAAyB,QAAQ,qCAAU,UAAU;AAI9E,QAAI,WAAW;AACb,YAAM,eAAe,SAAS,QAAQ,UAAU,KAAK,OAAO,KAAK,IAAI;AACrE,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ,mBAAgB;AAAA,UAChB,oBAAkB;AAAA,UAClB,WAAW;AAAA,YACT,iBAAiB,EAAE,MAAM,WAAW,SAAkB,MAAM;AAAA,YAC5D;AAAA,YACA,gBAAgB,QAAQ;AAAA,YACxB;AAAA,UAAA;AAAA,UAGD,UAAA,gBAAgB;AAAA,QAAA;AAAA,MAAA;AAAA,IAGvB;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,IAAI;AAAA,QACJ;AAAA,QACA;AAAA,QACA,UAAU,iBAAiB;AAAA,QAC3B,UAAU,iBAAiB;AAAA,QAC3B,gBAAc,SAAS;AAAA,QACvB,kBAAe,qCAAU,aAAY;AAAA,QACrC,oBAAkB;AAAA,QAClB,qBAAmB;AAAA,QACnB,mBAAiB;AAAA,QACjB,cAAY,cAAc,QAAQ,KAAK;AAAA,QACvC,WAAW;AAAA,UACT,iBAAiB,EAAE,MAAM,cAAc,SAAkB,MAAM;AAAA,UAC/D,cAAc,SAAS;AAAA,YACrB;AAAA,YACA;AAAA,UAAA;AAAA,UAEF;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AACA,SAAS,cAAc;AAKhB,MAAM,eAAe;AAAA,EAC1B,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO;AAAA,IACL,IAAI,EAAE,YAAY,OAAA;AAAA,IAClB,IAAI,EAAE,YAAY,OAAA;AAAA,IAClB,IAAI,EAAE,YAAY,UAAA;AAAA,EAAU;AAAA;AAAA;AAAA,EAI9B,QAAQ,CAAC,WAAW,SAAS,iBAAiB,YAAY,YAAY,OAAO;AAAA,EAC7E,QAAQ;AAAA,IACN,IAAI,CAAC,eAAe,YAAY;AAAA,IAChC,IAAI,CAAC,oBAAoB,iBAAiB,iBAAiB;AAAA,IAC3D,MAAM,CAAA;AAAA,EAAC;AAAA,EAET,aAAa;AACf;"}

package/dist/components/TimePicker/index.d.ts ADDED Viewed

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

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

	@@ -0,0 +1 @@
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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

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