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

package/dist/components/HoverCard/hover-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"hover-card.js","sources":["../../../src/components/HoverCard/hover-card.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\n\nimport { cn } from \"@/lib/utils\"\nimport { OVERLAY_SIDE_OFFSET } from \"@/design-system/tokens/elevation/overlay-geometry\"\n\n/**\n * HoverCard — hover 顯示可互動內容的浮層（行為 primitive）\n *\n * 跟 Tooltip 的差異：內容可互動（按鈕、連結、hover 子元素）。\n *\n * **不含視覺樣式**——bg、border、shadow、padding 由 consumer 決定：\n * - OverflowIndicator：深色 Tooltip 樣式（bg-tooltip + data-theme=\"dark\"）\n * - NameCard：亮色 Card 樣式（bg-surface-raised + elevation-200）\n *\n * 只提供：z-index、動畫、sideOffset。\n */\n\nconst HoverCard = HoverCardPrimitive.Root\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n  React.ElementRef<typeof HoverCardPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = OVERLAY_SIDE_OFFSET, collisionPadding = 12, ...props }, ref) => (\n  // HoverCardPrimitive.Portal(2026-04-23):把 Content 搬到 `document.body`。\n  // 不 Portal 時 Content 會 DOM-nested 在 trigger subtree,如 trigger 位於 OverflowIndicator\n  // `data-theme=\"dark\"` tooltip 內部 → Avatar 自帶 HoverCard 的 Content 也卡在 dark subtree,\n  // CSS var(--foreground) 繼承 dark 值 → NameCard 內部文字變 white 看不見(user 抓的 bug)。\n  // Portal 到 body 讓 CSS 繼承 chain 從 app root data-theme 起算,不受 trigger subtree 污染。\n  //\n  // collisionPadding=12:Radix / browser 內部 1-2px rounding 讓 visual padding 比 prop 值少 1-2px。\n  // 提高到 12 保證使用者實際看到 ≥ 8px viewport edge gap(overlay-surface「靠邊 8px」canonical)。\n  <HoverCardPrimitive.Portal>\n    <HoverCardPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      collisionPadding={collisionPadding}\n      className={cn(\n        \"z-50 outline-none\",\n        // 2026-05-04 viewport-aware max-h SSOT(對齊 Popover):header/footer 永遠 in-viewport,body 壓縮 scroll\n        // 2026-05-05 audit dim 35 fix:加 `min-h-0` 完成 M25 chain invariant\n        \"max-h-[var(--radix-hover-card-content-available-height,100vh)] flex flex-col overflow-hidden min-h-0\",\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n        \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n        \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n        \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2\",\n        \"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        \"origin-[var(--radix-hover-card-content-transform-origin)]\",\n        className,\n      )}\n      {...props}\n    />\n  </HoverCardPrimitive.Portal>\n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\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 hoverCardMeta = {\n  component: 'HoverCard',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-surface-raised'],\n    fg: ['--foreground'],\n    ring: [],\n  },\n} as const\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n"],"names":[],"mappings":";;;;;AAkBA,MAAM,YAAY,mBAAmB;AAErC,MAAM,mBAAmB,mBAAmB;AAE5C,MAAM,mBAAmB,MAAM,WAG7B,CAAC,EAAE,WAAW,QAAQ,UAAU,aAAa,qBAAqB,mBAAmB,IAAI,GAAG,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASrG,oBAAC,mBAAmB,QAAnB,EACC,UAAA;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA,EACN,CACF;AAAA,CACD;AACD,iBAAiB,cAAc,mBAAmB,QAAQ;AAInD,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAC,mBAAmB;AAAA,IACxB,IAAI,CAAC,cAAc;AAAA,IACnB,MAAM,CAAA;AAAA,EAAC;AAEX;"}
+{"version":3,"file":"hover-card.js","sources":["../../../src/components/HoverCard/hover-card.tsx"],"sourcesContent":["/**\n * @internal — DS-internal 單元(per `packages/design-system/ds-canonical/rules/ui-development.md` Public vs Internal canonical;spec frontmatter `isInternal`)。\n * 不進 root barrel front-door;由 Avatar(hoverCard)/ OverflowIndicator 等 DS 元件 wrap 消費,end-user app 請用 wrapper 元件。\n */\nimport * as React from \"react\"\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\n\nimport { cn } from \"@/lib/utils\"\nimport { OVERLAY_SIDE_OFFSET } from \"@/design-system/tokens/elevation/overlay-geometry\"\nimport { MOTION_DELAY_RICH_MS, MOTION_DELAY_CLOSE_MS } from \"@/design-system/tokens/motion/motion\"\nimport { overlayMotion } from \"@/design-system/tokens/motion/overlay-motion\"\n\n/**\n * HoverCard — hover 顯示可互動內容的浮層（行為 primitive）\n *\n * 跟 Tooltip 的差異：內容可互動（按鈕、連結、hover 子元素）。\n *\n * **不含視覺樣式**——bg、border、shadow、padding 由 consumer 決定：\n * - OverflowIndicator：深色 Tooltip 樣式（bg-tooltip + data-theme=\"dark\"）\n * - ProfileCard：亮色 Card 樣式（bg-surface-raised + elevation-200）\n *\n * 只提供：z-index、動畫、sideOffset。\n */\n\n// 2026-06-11 user 拍板 A 案(「確保所有 hover 延遲都有按照設計原則」):Root 預設接 motion token SSOT\n// (rich 700ms open / close 200ms)— 對齊 tooltip.tsx 同 pattern(2026-05-18 拍板 #3A)。\n// 原裸用 Radix 預設 open 700 / close 300:open 巧合同值、close 300 ≠ canonical 200(drift)。\n// Consumer 仍可 per-instance override(Avatar 同值傳入、OverflowIndicator 傳 plain)。\nconst HoverCard = ({ openDelay = MOTION_DELAY_RICH_MS, closeDelay = MOTION_DELAY_CLOSE_MS, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) => (\n  <HoverCardPrimitive.Root openDelay={openDelay} closeDelay={closeDelay} {...props} />\n)\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n  React.ElementRef<typeof HoverCardPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = OVERLAY_SIDE_OFFSET, collisionPadding = 12, ...props }, ref) => (\n  // HoverCardPrimitive.Portal(2026-04-23):把 Content 搬到 `document.body`。\n  // 不 Portal 時 Content 會 DOM-nested 在 trigger subtree,如 trigger 位於 OverflowIndicator\n  // `data-theme=\"dark\"` tooltip 內部 → Avatar 自帶 HoverCard 的 Content 也卡在 dark subtree,\n  // CSS var(--foreground) 繼承 dark 值 → ProfileCard 內部文字變 white 看不見(user 抓的 bug)。\n  // Portal 到 body 讓 CSS 繼承 chain 從 app root data-theme 起算,不受 trigger subtree 污染。\n  //\n  // collisionPadding=12:Radix / browser 內部 1-2px rounding 讓 visual padding 比 prop 值少 1-2px。\n  // 提高到 12 保證使用者實際看到 ≥ 8px viewport edge gap(overlay-surface「靠邊 8px」canonical)。\n  <HoverCardPrimitive.Portal>\n    <HoverCardPrimitive.Content\n      ref={ref}\n      align={align}\n      sideOffset={sideOffset}\n      collisionPadding={collisionPadding}\n      className={cn(\n        \"z-50 outline-none\",\n        // 2026-05-04 viewport-aware max-h SSOT(對齊 Popover):header/footer 永遠 in-viewport,body 壓縮 scroll\n        // 2026-05-05 audit dim 35 fix:加 `min-h-0` 完成 M25 chain invariant\n        \"max-h-[var(--radix-hover-card-content-available-height,100vh)] flex flex-col overflow-hidden min-h-0\",\n        // 2026-07-05 補 motion-reduce 豁免:對齊 overlay 家族 canonical(popover.tsx / dialog.tsx /\n        // dropdown-menu.tsx / tooltip.tsx 同位置寫法)— prefers-reduced-motion 下停用進出場動畫。\n        overlayMotion,\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n        \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n        \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n        \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2\",\n        \"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n        \"origin-[var(--radix-hover-card-content-transform-origin)]\",\n        className,\n      )}\n      {...props}\n    />\n  </HoverCardPrimitive.Portal>\n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\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 hoverCardMeta = {\n  component: 'HoverCard',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default'],\n  tokens: {\n    // 2026-07-16 deep-audit A.1b:清 Phase-1 佔位 — HoverCard 為純行為 primitive,\n    // Content 不套任何 bg/fg(spec「純行為 primitive」段);bg-surface-raised 屬 consumer(ProfileCard)。\n    bg: [],\n    fg: [],\n    ring: [],\n  },\n} as const\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n"],"names":[],"mappings":";;;;;;;AA4BA,MAAM,YAAY,CAAC,EAAE,YAAY,sBAAsB,aAAa,uBAAuB,GAAG,MAAA,0BAC3F,mBAAmB,MAAnB,EAAwB,WAAsB,YAAyB,GAAG,MAAA,CAAO;AAGpF,MAAM,mBAAmB,mBAAmB;AAE5C,MAAM,mBAAmB,MAAM,WAG7B,CAAC,EAAE,WAAW,QAAQ,UAAU,aAAa,qBAAqB,mBAAmB,IAAI,GAAG,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASrG,oBAAC,mBAAmB,QAAnB,EACC,UAAA;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA;AAAA;AAAA,QAGA;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA,EACN,CACF;AAAA,CACD;AACD,iBAAiB,cAAc,mBAAmB,QAAQ;AAInD,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA;AAAA;AAAA,IAGN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAA;AAAA,IACJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}

package/dist/components/HoverCard/index.d.ts

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

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

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

package/dist/components/HoverCard/index.js

@@ -0,0 +1,8 @@
+import { HoverCard, HoverCardContent, HoverCardTrigger, hoverCardMeta } from "./hover-card.js";
+export {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+  hoverCardMeta
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/InlineEdit/index.d.ts

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

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

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

package/dist/components/InlineEdit/index.js

@@ -0,0 +1,6 @@
+import { InlineEdit, inlineEditMeta } from "./inline-edit.js";
+export {
+  InlineEdit,
+  inlineEditMeta
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/InlineEdit/inline-edit.d.ts

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import type { FieldSize } from '../../components/Field/field-context';
+/** renderEdit 回呼收到的受控介面 —— consumer 換任意 Field 控件(Textarea / Select / DatePicker …)接線用 */
+export interface InlineEditRenderProps<T = string> {
+    /** 目前編輯中的草稿值(內部管理,非已 commit 的 value) */
+    value: T;
+    /** 草稿變更 */
+    onChange: (next: T) => void;
+    /** 提交草稿 → onCommit(next) + 回 view 態 */
+    commit: () => void;
+    /** 放棄草稿 → 回 view 態不 commit */
+    cancel: () => void;
+    /** 進 edit 態時自動 focus 控件 */
+    autoFocus: boolean;
+    /** 尺寸(cascade 給控件,與 view 態高度對齊) */
+    size: FieldSize;
+    /** 控件無障礙標籤(= label prop) */
+    'aria-label'?: string;
+}
+type ReadTag = 'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export interface InlineEditProps<T = string> {
+    /** 已提交的欄位值(view 態顯示;edit 進入時作草稿初值)。泛型:string / number / string[] / PersonValue 等 */
+    value: T;
+    /** 提交回呼 —— blur / Enter 且草稿有變更時觸發 */
+    onCommit: (next: T) => void;
+    /**
+     * 自訂 edit 態控件(換 Textarea / Select / DatePicker 等 Field 控件,必用 `mode="edit"`)。
+     * 不傳則預設:multiline → `<Textarea mode="edit">`,否則 `<Input mode="edit">`(僅 T=string 時預設有效;非 string 值必傳此 prop)。
+     */
+    renderEdit?: (props: InlineEditRenderProps<T>) => React.ReactNode;
+    /**
+     * 自訂 view 態格式化顯示。不傳則顯示 `String(value)`(空值顯 placeholder)。
+     * **SSOT 鐵律**:要顯示 Tag / 日期格式 / option label 等,**渲染對應控件的 `mode="view"`**
+     * (如 `renderRead={(v) => <Select mode="view" display="tag" value={v} options={opts} />}`),
+     * 不可自刻 —— 格式化 + 內部間距 SSOT 住在該控件的 view mode(見檔頭 Model A)。
+     */
+    renderRead?: (value: T) => React.ReactNode;
+    /** 多行欄位(Jira description 類):view 態換行 + 預設 edit 態用 `<Textarea>`,Enter=換行、Cmd/Ctrl+Enter 或 blur 提交 */
+    multiline?: boolean;
+    /**
+     * 多行 edit 態的高度上限(行數)。預設無上限 —— 高度隨內容,與 view 態同源(= DataTable cell 語意)。
+     * 設定後超過行數改為捲動。僅在 `multiline` 時有意義。
+     */
+    editMaxRows?: number;
+    /**
+     * 是否可編輯(預設 true)。false → view 態無 hover 入口、無藍框、不可點進 edit(對齊世界級就地編輯
+     * **無 disabled 態**,鎖定 = 純 view 無入口、**不灰化**;cite 見檔頭 MUI X / AG Grid URL)。
+     * 永久唯讀資料 → 用 `<Control mode="view">` 或此 prop false;不用 disabled。
+     */
+    editable?: boolean;
+    /** 欄位人類可讀名稱 —— 組 view 按鈕 aria-label(「編輯 {label}」)+ 控件 aria-label */
+    label?: string;
+    /** 空值時 view 態顯示的提示文字(fg-muted) */
+    placeholder?: string;
+    /** 尺寸 —— view 態最小高度 + 預設 Input 尺寸(不傳則經 useResolvedFieldSize 接 Field size cascade,standalone fallback sm) */
+    size?: FieldSize;
+    /** view 態語意標籤(標題場景傳 'h1'/'h2' 維持文件大綱;預設 'span') */
+    as?: ReadTag;
+    /** view 態文字樣式(如標題 `text-h4 font-bold`) */
+    readClassName?: string;
+    /** 外層容器 className */
+    className?: string;
+}
+declare const InlineEdit: (<T = string>(props: InlineEditProps<T> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.ReactElement) & {
+    displayName?: string;
+    fieldPreferredSize?: FieldSize;
+};
+export declare const inlineEditMeta: {
+    readonly component: "InlineEdit";
+    readonly family: "composite";
+    readonly variants: {};
+    readonly sizes: {};
+    readonly states: readonly ["default", "hover", "focus-visible", "editing", "readonly"];
+    readonly tokens: {
+        readonly bg: readonly ["bg-neutral-hover"];
+        readonly fg: readonly ["text-fg-muted"];
+        readonly border: readonly ["border-transparent", "border-primary"];
+        readonly ring: readonly [];
+    };
+    readonly defaultVariant: undefined;
+    readonly defaultSize: undefined;
+};
+export { InlineEdit };
+//# sourceMappingURL=inline-edit.d.ts.map

package/dist/components/InlineEdit/inline-edit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-edit.d.ts","sourceRoot":"","sources":["../../../src/components/InlineEdit/inline-edit.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gDAAgD,CAAA;AAS/E,yFAAyF;AACzF,MAAM,WAAW,qBAAqB,CAAC,CAAC,GAAG,MAAM;IAC/C,wCAAwC;IACxC,KAAK,EAAE,CAAC,CAAA;IACR,WAAW;IACX,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAA;IAC3B,uCAAuC;IACvC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,8BAA8B;IAC9B,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,2BAA2B;IAC3B,SAAS,EAAE,OAAO,CAAA;IAClB,mCAAmC;IACnC,IAAI,EAAE,SAAS,CAAA;IACf,4BAA4B;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,KAAK,OAAO,GAAG,MAAM,GAAG,GAAG,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE7E,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,MAAM;IACzC,oFAAoF;IACpF,KAAK,EAAE,CAAC,CAAA;IACR,qCAAqC;IACrC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAA;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IACjE;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IAC1C,oGAAoG;IACpG,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,4GAA4G;IAC5G,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,mDAAmD;IACnD,EAAE,CAAC,EAAE,OAAO,CAAA;IACZ,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAyUD,QAAA,MAAM,UAAU,EAAuC,CAAC,CAAC,CAAC,GAAG,MAAM,EACjE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,KAC5D,KAAK,CAAC,YAAY,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,kBAAkB,CAAC,EAAE,SAAS,CAAA;CAAE,CAAA;AASnF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;CAcjB,CAAA;AAEV,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/components/InlineEdit/inline-edit.js

@@ -0,0 +1,254 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { Input } from "../Input/input.js";
+import { Textarea } from "../Textarea/textarea.js";
+import { useResolvedFieldSize, useRegisterFieldPreferredSize, useFieldContext, FieldSurfaceProvider } from "../Field/field-context.js";
+import { fieldViewGeometry, fieldDisplayTextClass } from "../Field/field-wrapper.js";
+import { makeEditSettleKeyHandler } from "../Field/field-edit-keys.js";
+import { useTruncated } from "../../hooks/use-truncated.js";
+import { Tooltip, TooltipTrigger, TooltipContent } from "../Tooltip/tooltip.js";
+function InlineEditImpl({
+  value,
+  onCommit,
+  renderEdit,
+  renderRead,
+  multiline = false,
+  editMaxRows,
+  editable = true,
+  label,
+  placeholder,
+  size: sizeProp,
+  as = "span",
+  readClassName,
+  className
+}, ref) {
+  var _a;
+  const size = useResolvedFieldSize(sizeProp, "sm");
+  useRegisterFieldPreferredSize("sm");
+  const fieldCtx = useFieldContext();
+  const orientation = (fieldCtx == null ? void 0 : fieldCtx.orientation) ?? "vertical";
+  const [editing, setEditing] = React.useState(false);
+  const [draft, setDraft] = React.useState(value);
+  const draftRef = React.useRef(draft);
+  const finalizedRef = React.useRef(false);
+  const returnFocusRef = React.useRef(false);
+  const readButtonRef = React.useRef(null);
+  const editContainerRef = React.useRef(null);
+  const setEditContainerRef = React.useCallback(
+    (node) => {
+      editContainerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  const setDraftValue = React.useCallback((next) => {
+    draftRef.current = next;
+    setDraft(next);
+  }, []);
+  const enterEdit = React.useCallback(() => {
+    finalizedRef.current = false;
+    setDraftValue(value);
+    setEditing(true);
+  }, [value, setDraftValue]);
+  const commit = React.useCallback(
+    (returnFocus) => {
+      if (finalizedRef.current) return;
+      finalizedRef.current = true;
+      returnFocusRef.current = returnFocus;
+      setEditing(false);
+      if (draftRef.current !== value) onCommit(draftRef.current);
+    },
+    [value, onCommit]
+  );
+  const cancel = React.useCallback(() => {
+    if (finalizedRef.current) return;
+    finalizedRef.current = true;
+    returnFocusRef.current = true;
+    setEditing(false);
+  }, []);
+  const handleEditBlur = React.useCallback((e) => {
+    const wrapper = e.currentTarget;
+    requestAnimationFrame(() => {
+      if (finalizedRef.current) return;
+      const active = document.activeElement;
+      if (active && wrapper.contains(active)) return;
+      if (active && active.closest('[data-radix-popper-content-wrapper],[data-radix-select-viewport],[role="listbox"],[role="dialog"]')) return;
+      commit(false);
+    });
+  }, [commit]);
+  React.useEffect(() => {
+    var _a2;
+    if (!editing && returnFocusRef.current) {
+      returnFocusRef.current = false;
+      (_a2 = readButtonRef.current) == null ? void 0 : _a2.focus();
+    }
+  }, [editing]);
+  React.useEffect(() => {
+    if (!editing) return;
+    const onPointerDown = (e) => {
+      if (finalizedRef.current) return;
+      const target = e.target;
+      if (!target) return;
+      const box = editContainerRef.current;
+      if (box && box.contains(target)) return;
+      if (target.closest('[data-radix-popper-content-wrapper],[data-radix-select-viewport],[role="listbox"],[role="dialog"]')) return;
+      commit(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [editing, commit]);
+  const isEmpty = value == null || value === "" || Array.isArray(value) && value.length === 0;
+  const Tag = as;
+  const singleLinePlainView = !renderRead && !multiline;
+  const { ref: truncationRef, isTruncated } = useTruncated({
+    deps: [singleLinePlainView && !isEmpty ? String(value) : ""]
+  });
+  const plainTruncationActive = singleLinePlainView && !isEmpty && isTruncated;
+  const delegatedView = !!renderRead;
+  const { ref: delegatedViewRef, isTruncated: delegatedTruncated } = useTruncated({
+    measure: (el) => Array.from(el.querySelectorAll(".truncate")).some(
+      (node) => node.scrollWidth > node.clientWidth
+    ),
+    deps: [delegatedView && editable && !isEmpty ? value : null]
+  });
+  const delegatedTruncationActive = delegatedView && editable && !isEmpty && delegatedTruncated;
+  const truncationTooltipActive = plainTruncationActive || delegatedTruncationActive;
+  const alignBleed = orientation === "vertical" ? "-mx-[var(--field-px)] w-[calc(100%_+_2_*_var(--field-px))]" : "w-full min-w-0";
+  if (editing) {
+    const editProps = {
+      value: draft,
+      onChange: setDraftValue,
+      commit: () => commit(true),
+      cancel,
+      autoFocus: true,
+      size,
+      "aria-label": label
+    };
+    const defaultEditNode = multiline ? /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        autoFocus: true,
+        mode: "edit",
+        autoSize: editMaxRows === void 0 ? true : { maxRows: editMaxRows },
+        value: draft,
+        size,
+        "aria-label": label,
+        onChange: (e) => setDraftValue(e.target.value),
+        onBlur: () => commit(false),
+        onKeyDown: makeEditSettleKeyHandler({ onCommit: () => commit(true), onCancel: cancel, commitOnEnter: false })
+      }
+    ) : /* @__PURE__ */ jsx(
+      Input,
+      {
+        autoFocus: true,
+        mode: "edit",
+        value: draft,
+        size,
+        "aria-label": label,
+        onChange: (e) => setDraftValue(e.target.value),
+        onBlur: () => commit(false),
+        onKeyDown: makeEditSettleKeyHandler({ onCommit: () => commit(true), onCancel: cancel })
+      }
+    );
+    const editNode = renderEdit ? renderEdit(editProps) : defaultEditNode;
+    return (
+      // exit SSOT 雙保險:onBlur(focusout,tab-out / 非 overlay 控件)+ document pointerdown-outside(overlay
+      //   點外面 Radix 送焦回 trigger 時 focusout 不觸發之補位)。任何 edit 控件離開 → 回 view。
+      // edit 態**不套** surface='inline-edit'(完全繼承原 field,含 tagPadding — Jira 式,user 2026-07-17 拍板)。
+      /* @__PURE__ */ jsx("div", { ref: setEditContainerRef, "data-editing": true, className: cn(alignBleed, className), onBlur: handleEditBlur, children: editNode })
+    );
+  }
+  const viewNode = renderRead ? (
+    // 格式化 view(consumer 傳 <Control mode="view"> 等)。**對齊 SSOT(2026-07-17)**:委派控件的
+    // bare view 一律 0px 左內距(audit 證實 Select/Combobox/DatePicker/TimePicker/PeoplePicker/LinkInput
+    // 預設 view 皆裸 span/Tag),故 InlineEdit 用**與純值路徑同一個 `fieldViewGeometry(field-px + min-h +
+    // py)`** 包住 renderRead → 委派控件 view 左 px 統一 field-px、高度統一 field-height → 固定
+    // `-mx-field-px` 精準抵消 → tag/avatar/值左緣落 label x=0。不碰任何控件 tagPadding(bare view 本就不用)。
+    // surface='inline-edit' 保留為 per-control 逃生訊號(若某控件 bare view 有內部 inset 破壞對齊,該控件可
+    // 讀 surface 自抑;目前全控件 bare view=0px 不需)。
+    /* @__PURE__ */ jsx(FieldSurfaceProvider, { surface: "inline-edit", children: /* @__PURE__ */ jsx("div", { ref: delegatedViewRef, className: fieldViewGeometry(size, multiline), children: renderRead(value) }) })
+  ) : /* @__PURE__ */ jsx(
+    Tag,
+    {
+      "data-empty": isEmpty,
+      className: cn(
+        // 純值/標題共用 view 幾何 SSOT(px-field-px + min-h-field + 單行 items-center / 多行 items-start py-2)
+        fieldViewGeometry(size, multiline),
+        // view 態 typography 預設消費 Field view SSOT(sm/md→text-body,lg→text-body-lg)——
+        // plain 用法 view 字級 = edit <Input>(text-body)= <Input mode="view"> 字級,三者一致零跳字。
+        fieldDisplayTextClass(size),
+        // 多行:保留換行(pre-wrap)+ 長字斷行 —— view 忠實呈現 Textarea 內容(Jira description 類)。
+        multiline && "whitespace-pre-wrap break-words",
+        readClassName,
+        isEmpty && "text-fg-muted"
+      ),
+      children: isEmpty || multiline ? isEmpty ? placeholder : String(value) : /* @__PURE__ */ jsx("span", { ref: truncationRef, className: "truncate min-w-0", children: String(value) })
+    }
+  );
+  return (
+    // 截斷 tooltip:trigger = 整個 view 容器(隱形 Pressable 吞掉內層 hover,故不能掛在值 span);
+    // 純值路徑量內層值 span、委派路徑量 wrapper 子樹(見上方兩段 useTruncated 註解);
+    // 恆 wrap 保 DOM 生命週期穩定(truncated-text 檔頭 always-wrap 教訓),未截斷時 open={false} 靜默。
+    /* @__PURE__ */ jsxs(Tooltip, { open: truncationTooltipActive ? void 0 : false, children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          "data-editing": false,
+          "data-editable": editable || void 0,
+          className: cn(
+            "relative flex min-w-0 rounded-md border border-transparent transition-colors duration-150",
+            alignBleed,
+            // editable 才有 hover 底色 + 鍵盤 focus 藍框(Field focus 語言,非 Button ring);
+            //   editable=false = 純 view 鎖定,無入口、無藍框、不灰化。
+            editable && "hover:bg-neutral-hover [&:has(button:focus-visible)]:border-primary",
+            className
+          ),
+          children: [
+            viewNode,
+            editable && /* @__PURE__ */ jsx(
+              "button",
+              {
+                ref: readButtonRef,
+                type: "button",
+                "aria-label": label ? `編輯 ${label}` : "編輯",
+                onClick: enterEdit,
+                className: "absolute inset-0 cursor-text rounded-md focus-visible:outline-none"
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: delegatedTruncationActive ? (
+        // 委派路徑內容 = wrapper 子樹當下 DOM 的 textContent(完整格式化文字;
+        // 非 string T 不可 String(value) —— 如 string[] / PersonValue)
+        (_a = delegatedViewRef.current) == null ? void 0 : _a.textContent
+      ) : plainTruncationActive ? String(value) : null })
+    ] })
+  );
+}
+const InlineEdit = React.forwardRef(InlineEditImpl);
+InlineEdit.displayName = "InlineEdit";
+InlineEdit.fieldPreferredSize = "sm";
+const inlineEditMeta = {
+  component: "InlineEdit",
+  family: "composite",
+  variants: {},
+  sizes: {},
+  states: ["default", "hover", "focus-visible", "editing", "readonly"],
+  tokens: {
+    bg: ["bg-neutral-hover"],
+    fg: ["text-fg-muted"],
+    border: ["border-transparent", "border-primary"],
+    ring: []
+  },
+  defaultVariant: void 0,
+  defaultSize: void 0
+};
+export {
+  InlineEdit,
+  inlineEditMeta
+};
+//# sourceMappingURL=inline-edit.js.map

package/dist/components/InlineEdit/inline-edit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inline-edit.js","sources":["../../../src/components/InlineEdit/inline-edit.tsx"],"sourcesContent":["// ── 消費的 SSOT ──\n// - components/Field/field-controls.spec.md(「軸二 就地編輯 host」段:InlineEdit = view↔edit 二態疊在 Field 之上;edit-in-place + editable 閘)\n// - components/Field/field-edit-keys.ts(makeEditSettleKeyHandler = Enter/Esc + 中文 IME guard 結算 SSOT,與 DataTable cell 同源)\n// - components/Field/field-wrapper.tsx(fieldViewGeometry = view 幾何 class SSOT〔純值/標題路徑〕;fieldDisplayTextClass = view 字級)\n// - components/Input/input.tsx / Textarea/textarea.tsx(預設 renderEdit;不重刻 input chrome)\n// - components/Field/field-context.ts(useFieldContext / useResolvedFieldSize;接 size/orientation/labelId cascade)\n// - tokens/uiSize/uiSize.css(--field-px 水平內距 SSOT / --field-height-{sm,md,lg} view 態高度)\n// - tokens/color/color.spec.md(bg-neutral-hover = hover 回饋)\n// - 世界級對照(泛型 readView/editView 就地編輯 + read 態底色 tint + 隱形 Pressable):\n//   Atlassian inline-edit(readView/editView 兩 render prop + read wrapper 靠負邊距對齊 edit)\n//     https://github.com/pioug/atlassian-frontend-mirror/blob/main/design-system/inline-edit/src/internal/read-view.tsx\n//   就地編輯無 disabled 態(鎖定 = 純 view 無入口、不灰化):MUI X isCellEditable / cellMode\n//     https://mui.com/x/react-data-grid/editing/ + AG Grid editable https://www.ag-grid.com/react-data-grid/cell-editing/\n//\n// ── Model A(2026-07-16 round16,user GO)──────────────────────────────────────\n// InlineEdit **不自帶 geometry cva**(消 M17 重複):\n//   - 值-格式化(Select→Tag / Date / avatar)→ renderRead 委派 `<Control mode=\"view\">`,幾何 + 內部間距\n//     皆由控件 view×default 提供(read=edit 同一顆 → 天生一致、多 tag/avatar 間距零偏移)。\n//   - 純值 / 標題 `<Tag as=\"h1\">` → 套 `fieldViewGeometry(size, multiline)` helper(= view×default 幾何 SSOT)。\n//   InlineEdit 本體只給:`-mx`(orientation-aware,拉到欄左緣,= 上方 read-view 負邊距對照)+ hover bg + focus 藍框 + 隱形 Pressable。\n//   read↔edit 零跳 = view 與 edit 同一顆控件、只差 chrome。\n// **格式化 read 鐵律**:renderRead 要顯示 Tag/日期/label,**渲染對應控件的 `mode=\"view\"`**\n//   (如 `<Select mode=\"view\" display=\"tag\">`),不可自刻 —— 格式化 SSOT 住在該控件的 view mode。\nimport * as React from 'react'\nimport { cn } from '@/lib/utils'\nimport { Input } from '@/design-system/components/Input/input'\nimport { Textarea } from '@/design-system/components/Textarea/textarea'\nimport type { FieldSize } from '@/design-system/components/Field/field-context'\nimport { useFieldContext, useResolvedFieldSize, useRegisterFieldPreferredSize, FieldSurfaceProvider } from '@/design-system/components/Field/field-context'\nimport { fieldDisplayTextClass, fieldViewGeometry } from '@/design-system/components/Field/field-wrapper'\nimport { makeEditSettleKeyHandler } from '@/design-system/components/Field/field-edit-keys'\nimport { useTruncated } from '@/design-system/hooks/use-truncated'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/design-system/components/Tooltip/tooltip'\n\n// ── Types ───────────────────────────────────────────────────────────────────\n\n/** renderEdit 回呼收到的受控介面 —— consumer 換任意 Field 控件(Textarea / Select / DatePicker …)接線用 */\nexport interface InlineEditRenderProps<T = string> {\n  /** 目前編輯中的草稿值(內部管理,非已 commit 的 value) */\n  value: T\n  /** 草稿變更 */\n  onChange: (next: T) => void\n  /** 提交草稿 → onCommit(next) + 回 view 態 */\n  commit: () => void\n  /** 放棄草稿 → 回 view 態不 commit */\n  cancel: () => void\n  /** 進 edit 態時自動 focus 控件 */\n  autoFocus: boolean\n  /** 尺寸(cascade 給控件,與 view 態高度對齊) */\n  size: FieldSize\n  /** 控件無障礙標籤(= label prop) */\n  'aria-label'?: string\n}\n\ntype ReadTag = 'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\nexport interface InlineEditProps<T = string> {\n  /** 已提交的欄位值(view 態顯示;edit 進入時作草稿初值)。泛型:string / number / string[] / PersonValue 等 */\n  value: T\n  /** 提交回呼 —— blur / Enter 且草稿有變更時觸發 */\n  onCommit: (next: T) => void\n  /**\n   * 自訂 edit 態控件(換 Textarea / Select / DatePicker 等 Field 控件,必用 `mode=\"edit\"`)。\n   * 不傳則預設:multiline → `<Textarea mode=\"edit\">`,否則 `<Input mode=\"edit\">`(僅 T=string 時預設有效;非 string 值必傳此 prop)。\n   */\n  renderEdit?: (props: InlineEditRenderProps<T>) => React.ReactNode\n  /**\n   * 自訂 view 態格式化顯示。不傳則顯示 `String(value)`(空值顯 placeholder)。\n   * **SSOT 鐵律**:要顯示 Tag / 日期格式 / option label 等,**渲染對應控件的 `mode=\"view\"`**\n   * (如 `renderRead={(v) => <Select mode=\"view\" display=\"tag\" value={v} options={opts} />}`),\n   * 不可自刻 —— 格式化 + 內部間距 SSOT 住在該控件的 view mode(見檔頭 Model A)。\n   */\n  renderRead?: (value: T) => React.ReactNode\n  /** 多行欄位(Jira description 類):view 態換行 + 預設 edit 態用 `<Textarea>`,Enter=換行、Cmd/Ctrl+Enter 或 blur 提交 */\n  multiline?: boolean\n  /**\n   * 多行 edit 態的高度上限(行數)。預設無上限 —— 高度隨內容,與 view 態同源(= DataTable cell 語意)。\n   * 設定後超過行數改為捲動。僅在 `multiline` 時有意義。\n   */\n  editMaxRows?: number\n  /**\n   * 是否可編輯(預設 true)。false → view 態無 hover 入口、無藍框、不可點進 edit(對齊世界級就地編輯\n   * **無 disabled 態**,鎖定 = 純 view 無入口、**不灰化**;cite 見檔頭 MUI X / AG Grid URL)。\n   * 永久唯讀資料 → 用 `<Control mode=\"view\">` 或此 prop false;不用 disabled。\n   */\n  editable?: boolean\n  /** 欄位人類可讀名稱 —— 組 view 按鈕 aria-label(「編輯 {label}」)+ 控件 aria-label */\n  label?: string\n  /** 空值時 view 態顯示的提示文字(fg-muted) */\n  placeholder?: string\n  /** 尺寸 —— view 態最小高度 + 預設 Input 尺寸(不傳則經 useResolvedFieldSize 接 Field size cascade,standalone fallback sm) */\n  size?: FieldSize\n  /** view 態語意標籤(標題場景傳 'h1'/'h2' 維持文件大綱;預設 'span') */\n  as?: ReadTag\n  /** view 態文字樣式(如標題 `text-h4 font-bold`) */\n  readClassName?: string\n  /** 外層容器 className */\n  className?: string\n}\n\n/**\n * InlineEdit — 就地編輯 primitive(view ↔ edit 二態,泛型 <T>)\n *\n * 互動模型 world-class 對照見檔頭「消費的 SSOT」+ inline-edit.spec.md benchmark 表:\n * - **view 態** = 純文字 / 格式化 renderRead、寬度 fill 容器、透明邊框(預留)→ 視覺 = 純內容\n * - **hover(view,editable)** = 灰色底色 `bg-neutral-hover` + `rounded-md`(**非邊框**)+ cursor\n * - **鍵盤 focus(view,editable)** = 外框染 `border-primary` 藍框(Field focus 語言,非 Button ring)\n * - **click / Enter/Space** = 切 edit 態 = 真正的 Field 控件(mode=\"edit\":border + focus + input);多行走 Textarea\n * - **退出**:blur(滑鼠)→ commit + 純 view 不搶焦;Enter(鍵盤)→ commit + 焦點回 view 按鈕 + 藍框;Esc → cancel 還原\n * - **鍵盤結算**:消費 `makeEditSettleKeyHandler`(含中文 IME guard,與 DataTable cell 同源)\n * - **editable=false**:view 無 hover / 無 Pressable / 不可進 edit、**不灰化**(detail-pane 鎖定語意)\n *\n * view 態用隱形 Pressable(絕對定位 `<button>` 疊於內容上)—— 讓 `as=\"h1\"` 等標題標籤保留文件大綱\n * a11y,同時提供鍵盤 focus + Enter 進 edit(HTML 內容模型不允許 heading 巢狀於 button,故分離)。\n */\nfunction InlineEditImpl<T = string>(\n  {\n    value,\n    onCommit,\n    renderEdit,\n    renderRead,\n    multiline = false,\n    editMaxRows,\n    editable = true,\n    label,\n    placeholder,\n    size: sizeProp,\n    as = 'span',\n    readClassName,\n    className,\n  }: InlineEditProps<T>,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  // size:接 fieldCtx.size cascade,fallback sm。Field 只有在 consumer 顯式指定或已解析出偏好時\n  //   才壓過此 fallback(sizeExplicit),因此包一層 wrapper 也不會靜默退回 md。\n  const size = useResolvedFieldSize(sizeProp, 'sm')\n  // 同時向外層 Field 註冊偏好,讓 Field 的控件槽高度跟上(靜態 fieldPreferredSize 被 wrapper 遮蔽時的補位)。\n  useRegisterFieldPreferredSize('sm')\n  // orientation:vertical(值貼 label 左緣 → 用 -mx)/ horizontal(值落內容欄左緣+field-px = 對齊 sibling 控件 → 不用 -mx)。\n  const fieldCtx = useFieldContext()\n  const orientation = fieldCtx?.orientation ?? 'vertical'\n\n  const [editing, setEditing] = React.useState(false)\n  const [draft, setDraft] = React.useState<T>(value)\n  // draft 最新值 ref —— commit 從事件 handler 呼叫時避免 stale closure\n  const draftRef = React.useRef(draft)\n  // 單次結算 guard —— Enter/Esc 已結算後,unmount 觸發的 onBlur 不再重複 commit\n  const finalizedRef = React.useRef(false)\n  // 鍵盤結算後把 focus 送回 view 按鈕(a11y:焦點不遺失);滑鼠 blur 不送回(不搶焦)\n  const returnFocusRef = React.useRef(false)\n  const readButtonRef = React.useRef<HTMLButtonElement>(null)\n  // edit 態容器 ref(pointerdown-outside 用);與 forwarded ref merge。\n  // 顯式 `| null` → mutable overload(手動賦值 .current;`useRef<T>(null)` 會匹配 readonly RefObject overload)。\n  const editContainerRef = React.useRef<HTMLDivElement | null>(null)\n  const setEditContainerRef = React.useCallback(\n    (node: HTMLDivElement | null) => {\n      editContainerRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n    },\n    [ref],\n  )\n\n  const setDraftValue = React.useCallback((next: T) => {\n    draftRef.current = next\n    setDraft(next)\n  }, [])\n\n  const enterEdit = React.useCallback(() => {\n    finalizedRef.current = false\n    setDraftValue(value)\n    setEditing(true)\n  }, [value, setDraftValue])\n\n  // commit(returnFocus):鍵盤結算傳 true(焦點回 view 按鈕);滑鼠 blur 傳 false(不搶焦、純 view)\n  const commit = React.useCallback(\n    (returnFocus: boolean) => {\n      if (finalizedRef.current) return\n      finalizedRef.current = true\n      returnFocusRef.current = returnFocus\n      setEditing(false)\n      if (draftRef.current !== value) onCommit(draftRef.current)\n    },\n    [value, onCommit],\n  )\n\n  const cancel = React.useCallback(() => {\n    if (finalizedRef.current) return\n    finalizedRef.current = true\n    returnFocusRef.current = true // Esc = 鍵盤路徑,焦點回 view 按鈕\n    setEditing(false)\n  }, [])\n\n  // ── Exit-on-blur SSOT(2026-07-17 root cause 修:blur 後 chrome 殘留)──────────────\n  // InlineEdit **保證**任何 edit 控件(預設 Input + 自訂 renderEdit 的 Select/DatePicker/Combobox…)\n  // blur 都回 view,**不靠** consumer 在 renderEdit 自接 onBlur(舊設計缺口:story Select 只接\n  //   onChange→commit,不選直接 blur → commit 從沒呼叫 → 卡 editing=true,edit chrome 殘留)。\n  // portal-aware:overlay 控件(Select/DatePicker)開的 Radix popper/listbox 是 portaled 出子樹,\n  //   焦點在其中時**不誤結算**(dropdown 操作中);真正離開(都不在 edit 子樹 + 不在本 edit 的 overlay)才 commit。\n  // rAF 延一拍讓焦點落定(Radix 關 popover 時焦點先回 trigger,避免 blur 瞬間誤判)。\n  const handleEditBlur = React.useCallback((e: React.FocusEvent<HTMLDivElement>) => {\n    const wrapper = e.currentTarget\n    requestAnimationFrame(() => {\n      if (finalizedRef.current) return\n      const active = document.activeElement\n      if (active && wrapper.contains(active)) return // 仍在 edit 子樹(如 trigger)\n      // 焦點在本 edit 開的 Radix overlay 內 → dropdown 操作中,不結算\n      if (active && active.closest('[data-radix-popper-content-wrapper],[data-radix-select-viewport],[role=\"listbox\"],[role=\"dialog\"]')) return\n      commit(false) // blur 離開 → 回 view(滑鼠路徑不搶焦)\n    })\n  }, [commit])\n\n  // 鍵盤結算後把 focus 送回 view 按鈕(commit(true)/cancel);滑鼠 blur(commit(false))刻意不送回——\n  //   對齊 inline-edit.spec.md「退出 edit 態(focus 分流)」:鍵盤結算焦點回 view 按鈕 + 藍框、\n  //   滑鼠 blur 回純 view 不搶焦。focus-visible 保證只有鍵盤路徑顯藍框。\n  React.useEffect(() => {\n    if (!editing && returnFocusRef.current) {\n      returnFocusRef.current = false\n      readButtonRef.current?.focus()\n    }\n  }, [editing])\n\n  // ── Pointerdown-outside exit(2026-07-17,blur 殘留 root cause 真修)──────────────\n  // focusout 不夠:overlay 控件(Select)點外面關 popover 時 Radix 把焦點送回 trigger(在 edit 子樹內)\n  //   → onBlur 不觸發 → 卡 editing。改用 document-level pointerdown-outside 偵測(對齊 Radix\n  //   DismissableLayer onPointerDownOutside https://www.radix-ui.com/primitives/docs/utilities/dismissable-layer\n  //   + Atlassian inline-edit click-outside 退出\n  //   https://github.com/pioug/atlassian-frontend-mirror/blob/main/design-system/inline-edit/src/inline-edit.tsx):\n  //   editing 時點在 edit 子樹外且不在本 edit popover 內的 pointerdown → commit 回 view。\n  //   保證任何控件(含 overlay)點外面都回 display,不靠 consumer 在 renderEdit 自接。\n  React.useEffect(() => {\n    if (!editing) return\n    const onPointerDown = (e: PointerEvent) => {\n      if (finalizedRef.current) return\n      const target = e.target as Element | null\n      if (!target) return\n      const box = editContainerRef.current\n      if (box && box.contains(target)) return // 點在 edit 子樹內(trigger 等)\n      // 點在本 edit 開的 Radix overlay 內(popper / listbox / dialog)→ dropdown 操作中,不結算\n      if (target.closest('[data-radix-popper-content-wrapper],[data-radix-select-viewport],[role=\"listbox\"],[role=\"dialog\"]')) return\n      commit(false)\n    }\n    document.addEventListener('pointerdown', onPointerDown, true)\n    return () => document.removeEventListener('pointerdown', onPointerDown, true)\n  }, [editing, commit])\n\n  const isEmpty =\n    value == null || (value as unknown) === '' || (Array.isArray(value) && value.length === 0)\n  const Tag = as as React.ElementType\n\n  // 單行純值 view 的截斷 tooltip:量測內層值 span,但 **trigger = 整個 view 容器**。\n  // 不能用 <TruncatedText>(trigger=值 span 本身):view 上疊著透明 Pressable(click-to-edit\n  // 入口,absolute inset-0),所有 hover 都被按鈕吞掉,值 span 永遠收不到 pointerenter →\n  // tooltip 永不開(2026-07-28 user 實測抓到)。truncated-text.spec 對「trigger 需自控」場景\n  // 的指定解 = 直接消費 public useTruncated 自組;DataTable cell 無疊層所以能用 primitive。\n  const singleLinePlainView = !renderRead && !multiline\n  const { ref: truncationRef, isTruncated } = useTruncated<HTMLSpanElement>({\n    deps: [singleLinePlainView && !isEmpty ? String(value) : ''],\n  })\n  const plainTruncationActive = singleLinePlainView && !isEmpty && isTruncated\n\n  // 委派 view(renderRead)同規則(tooltip.spec.md「截斷文字 → tooltip,截斷才顯」):委派控件\n  // 自帶的截斷 tooltip(Input <TruncatedText> / Tag)trigger 在內層,editable 時同樣被透明\n  // Pressable 吞掉 hover → 永不開,故外層容器 Tooltip 一併服務委派路徑。量測 = use-truncated\n  // options.measure 自訂策略(檔頭明載 Tag「observe root、量測內層」即同款開口):走訪 wrapper\n  // 子樹,任一 `.truncate` 後代溢出即視為截斷(委派控件截斷元素皆帶 truncate class:Tag 內層\n  // span / TruncatedText span / Select view span)。editable=false 不渲染 Pressable → 控件自身\n  // tooltip 可達,外層讓位避免雙重顯示。\n  const delegatedView = !!renderRead\n  const { ref: delegatedViewRef, isTruncated: delegatedTruncated } = useTruncated<HTMLDivElement>({\n    measure: (el) =>\n      Array.from(el.querySelectorAll<HTMLElement>('.truncate')).some(\n        (node) => node.scrollWidth > node.clientWidth,\n      ),\n    deps: [delegatedView && editable && !isEmpty ? value : null],\n  })\n  const delegatedTruncationActive = delegatedView && editable && !isEmpty && delegatedTruncated\n  const truncationTooltipActive = plainTruncationActive || delegatedTruncationActive\n\n  // 對齊盒(orientation-aware,Model A;2026-07-17 移除 fieldCtx gate — root cause 修):\n  //   vertical(預設,含 standalone)→ `-mx-field-px` + `w-calc` 把整塊拉到欄左緣(值貼 label 左緣;\n  //     view 委派控件在 `surface='inline-edit'` 下 px 統一 field-px → 被 -mx 精準抵消 → 落 x=0 對齊 label)。\n  //   horizontal → 不用 -mx(純 `w-full`,值內縮 px = 對齊 sibling 控件)。\n  //   ⚠️ **移除舊 `fieldCtx &&` gate(root cause)**:standalone 預設 orientation='vertical'(:131),舊 gate 讓\n  //     standalone 掉到 `w-full` 無 -mx → 內容內縮 field-px 不對齊 label(圖一/圖二 bug)。spec Model A\n  //     (field-controls.spec.md:71「orientation-aware -mx / vertical 貼 label」)只依 orientation、不依 fieldCtx。\n  //     -mx bleed field-px 到容器 padding = 刻意(hover/edit 才顯真實邊界)→ consumer 放 ≥field-px padding 容器\n  //     (detail panel / card;stories 容器 layout-space-loose 16px > field-px 12px 天然吸收)。\n  const alignBleed =\n    orientation === 'vertical'\n      ? '-mx-[var(--field-px)] w-[calc(100%_+_2_*_var(--field-px))]'\n      : 'w-full min-w-0'\n\n  if (editing) {\n    const editProps: InlineEditRenderProps<T> = {\n      value: draft,\n      onChange: setDraftValue,\n      commit: () => commit(true),\n      cancel,\n      autoFocus: true,\n      size,\n      'aria-label': label,\n    }\n    // 預設 edit 控件:multiline → Textarea(Enter=換行、Cmd/Ctrl+Enter/blur 提交);否則 Input。\n    // 兩者皆 mode=\"edit\"(edit 態 = 真正的 edit-mode Field 控件),Enter/Esc 結算走 makeEditSettleKeyHandler(含 IME guard)。\n    // string-only 預設路徑;非 string 值必傳 renderEdit。\n    const defaultEditNode = multiline ? (\n      <Textarea\n        autoFocus\n        mode=\"edit\"\n        // view 態高度由內容決定,edit 態必須同源,否則 read↔edit 之間跳高(DataTable cell 早就是\n        // 內容驅動,standalone InlineEdit 原本卡在 rows=3)。consumer 要上限就傳 editMaxRows。\n        autoSize={editMaxRows === undefined ? true : { maxRows: editMaxRows }}\n        value={draft as unknown as string}\n        size={size}\n        aria-label={label}\n        onChange={(e) => setDraftValue(e.target.value as unknown as T)}\n        onBlur={() => commit(false)}\n        // 多行:plain Enter=換行、Esc=cancel、Cmd/Ctrl+Enter=commit —— 全走 makeEditSettleKeyHandler SSOT。\n        onKeyDown={makeEditSettleKeyHandler({ onCommit: () => commit(true), onCancel: cancel, commitOnEnter: false })}\n      />\n    ) : (\n      <Input\n        autoFocus\n        mode=\"edit\"\n        value={draft as unknown as string}\n        size={size}\n        aria-label={label}\n        onChange={(e) => setDraftValue(e.target.value as unknown as T)}\n        onBlur={() => commit(false)}\n        onKeyDown={makeEditSettleKeyHandler({ onCommit: () => commit(true), onCancel: cancel })}\n      />\n    )\n    const editNode = renderEdit ? renderEdit(editProps) : defaultEditNode\n    return (\n      // exit SSOT 雙保險:onBlur(focusout,tab-out / 非 overlay 控件)+ document pointerdown-outside(overlay\n      //   點外面 Radix 送焦回 trigger 時 focusout 不觸發之補位)。任何 edit 控件離開 → 回 view。\n      // edit 態**不套** surface='inline-edit'(完全繼承原 field,含 tagPadding — Jira 式,user 2026-07-17 拍板)。\n      <div ref={setEditContainerRef} data-editing className={cn(alignBleed, className)} onBlur={handleEditBlur}>\n        {editNode}\n      </div>\n    )\n  }\n\n  // view 態:外框只承載對齊盒 + (editable 時) hover bg + 鍵盤 focus 藍框;幾何由內容(委派控件 view / fieldViewGeometry)提供。\n  const viewNode = renderRead ? (\n    // 格式化 view(consumer 傳 <Control mode=\"view\"> 等)。**對齊 SSOT(2026-07-17)**:委派控件的\n    // bare view 一律 0px 左內距(audit 證實 Select/Combobox/DatePicker/TimePicker/PeoplePicker/LinkInput\n    // 預設 view 皆裸 span/Tag),故 InlineEdit 用**與純值路徑同一個 `fieldViewGeometry(field-px + min-h +\n    // py)`** 包住 renderRead → 委派控件 view 左 px 統一 field-px、高度統一 field-height → 固定\n    // `-mx-field-px` 精準抵消 → tag/avatar/值左緣落 label x=0。不碰任何控件 tagPadding(bare view 本就不用)。\n    // surface='inline-edit' 保留為 per-control 逃生訊號(若某控件 bare view 有內部 inset 破壞對齊,該控件可\n    // 讀 surface 自抑;目前全控件 bare view=0px 不需)。\n    <FieldSurfaceProvider surface=\"inline-edit\">\n      {/* delegatedViewRef = 委派路徑截斷量測根(walk `.truncate` 後代;見上方 useTruncated 註解) */}\n      <div ref={delegatedViewRef} className={fieldViewGeometry(size, multiline)}>{renderRead(value)}</div>\n    </FieldSurfaceProvider>\n  ) : (\n    <Tag\n      data-empty={isEmpty}\n      className={cn(\n        // 純值/標題共用 view 幾何 SSOT(px-field-px + min-h-field + 單行 items-center / 多行 items-start py-2)\n        fieldViewGeometry(size, multiline),\n        // view 態 typography 預設消費 Field view SSOT(sm/md→text-body,lg→text-body-lg)——\n        // plain 用法 view 字級 = edit <Input>(text-body)= <Input mode=\"view\"> 字級,三者一致零跳字。\n        fieldDisplayTextClass(size),\n        // 多行:保留換行(pre-wrap)+ 長字斷行 —— view 忠實呈現 Textarea 內容(Jira description 類)。\n        multiline && 'whitespace-pre-wrap break-words',\n        readClassName,\n        isEmpty && 'text-fg-muted',\n      )}\n    >\n      {isEmpty || multiline\n        ? (isEmpty ? placeholder : String(value))\n        // 單行 view 恆一行:溢出改 ellipsis(tooltip.spec.md「截斷文字 → tooltip」);\n        // tooltip 掛在外層 view 容器(見 truncationRef 註解——隱形 Pressable 吞 hover)。\n        : <span ref={truncationRef} className=\"truncate min-w-0\">{String(value)}</span>}\n    </Tag>\n  )\n\n  return (\n    // 截斷 tooltip:trigger = 整個 view 容器(隱形 Pressable 吞掉內層 hover,故不能掛在值 span);\n    // 純值路徑量內層值 span、委派路徑量 wrapper 子樹(見上方兩段 useTruncated 註解);\n    // 恆 wrap 保 DOM 生命週期穩定(truncated-text 檔頭 always-wrap 教訓),未截斷時 open={false} 靜默。\n    <Tooltip open={truncationTooltipActive ? undefined : false}>\n      <TooltipTrigger asChild>\n        <div\n          ref={ref}\n          data-editing={false}\n          data-editable={editable || undefined}\n          className={cn(\n            'relative flex min-w-0 rounded-md border border-transparent transition-colors duration-150',\n            alignBleed,\n            // editable 才有 hover 底色 + 鍵盤 focus 藍框(Field focus 語言,非 Button ring);\n            //   editable=false = 純 view 鎖定,無入口、無藍框、不灰化。\n            editable && 'hover:bg-neutral-hover [&:has(button:focus-visible)]:border-primary',\n            className,\n          )}\n        >\n          {viewNode}\n          {/* 隱形 Pressable(僅 editable):提供 click + 鍵盤 Tab focus + Enter/Space 進 edit;透明疊於內容上。\n              hover 底色 + focus 藍框由外層 div 承載(Field focus 語言),故本 button 只需 outline-none 消瀏覽器預設外框。 */}\n          {editable && (\n            <button\n              ref={readButtonRef}\n              type=\"button\"\n              aria-label={label ? `編輯 ${label}` : '編輯'}\n              onClick={enterEdit}\n              className=\"absolute inset-0 cursor-text rounded-md focus-visible:outline-none\"\n            />\n          )}\n        </div>\n      </TooltipTrigger>\n      <TooltipContent>\n        {delegatedTruncationActive\n          ? // 委派路徑內容 = wrapper 子樹當下 DOM 的 textContent(完整格式化文字;\n            // 非 string T 不可 String(value) —— 如 string[] / PersonValue)\n            delegatedViewRef.current?.textContent\n          : plainTruncationActive\n            ? String(value)\n            : null}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\n// 泛型 forwardRef:forwardRef 不原生支援泛型,以 cast 還原公開型別(標準 workaround)。\nconst InlineEdit = React.forwardRef(InlineEditImpl) as (<T = string>(\n  props: InlineEditProps<T> & { ref?: React.Ref<HTMLDivElement> },\n) => React.ReactElement) & { displayName?: string; fieldPreferredSize?: FieldSize }\nInlineEdit.displayName = 'InlineEdit'\n// 靜態偏好尺寸:外層 `<Field>` render 時讀 `child.type.fieldPreferredSize` → Field.size 未顯式指定時收 sm\n//   (對齊 detectControlLayout 讀 fieldLayout 的機制;InlineEdit view 態無邊框,md 過大會讓版面鬆散)。\nInlineEdit.fieldPreferredSize = 'sm'\n\n// Story auto-compile metadata — canonical migration(2026-08-01)\n// Geometry and size belong to Field controls; InlineEdit owns only the\n// view-to-edit orchestration and its read-view interaction affordances.\nexport const inlineEditMeta = {\n  component: 'InlineEdit',\n  family: 'composite',\n  variants: {},\n  sizes: {},\n  states: ['default', 'hover', 'focus-visible', 'editing', 'readonly'],\n  tokens: {\n    bg: ['bg-neutral-hover'],\n    fg: ['text-fg-muted'],\n    border: ['border-transparent', 'border-primary'],\n    ring: [],\n  },\n  defaultVariant: undefined,\n  defaultSize: undefined,\n} as const\n\nexport { InlineEdit }\n"],"names":["_a"],"mappings":"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"}

package/dist/components/Input/index.d.ts

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

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

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

package/dist/components/Input/index.js

@@ -0,0 +1,6 @@
+import { Input, inputMeta } from "./input.js";
+export {
+  Input,
+  inputMeta
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/Input/input.d.ts

@@ -4,16 +4,17 @@ import type { LucideIcon } from 'lucide-react';
 import type { FieldMode, FieldVariant } from '../../components/Field/field-types';
 import { fieldWrapperStyles } from '../../components/Field/field-wrapper';
 import { type InlineActionConfig } from '../../patterns/element-anatomy/item-anatomy';
-export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, Omit<VariantProps<typeof fieldWrapperStyles>, 'mode' | 'variant'> {
-    /** Field display mode */
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, Omit<VariantProps<typeof fieldWrapperStyles>, 'mode' | 'variant' | 'width'> {
+    /** Field mode */
     mode?: FieldMode;
     /**
-     * Visual chrome(正交於 mode);Phase B1(2026-05-05)從 `variant` 改名 `chrome`,對齊 FieldContext.variant 透傳。
+     * Visual variant(正交於 mode),對齊 FieldContext.variant 透傳。
+     * 公開 variant 一個(2026-07-09 `bare` 退役,詳 field-types.ts FieldVariant note;naked 2026-07-14 型別收窄至 FieldVariantInternal):
      * - `'default'`(預設)— Field wrapper 完整 variant:bg-surface + 明顯 border + hover/focus 回饋。適用表單、Field 內嵌。
-     * - `'bare'` — 透明 variant,hover / focus 才出現 border。適用 Toolbar inline editing(如 FileViewer zoom input / chart config toolbar / rich text toolbar number input)+ DataTable cell-as-input。保留 padding / typography / height,只拿掉背景和常態 border。
      *
-     * 透傳:在 `<Field variant="bare">` 內自動繼承 context.variant;per-prop override context。
-     * 世界級對照(bare):VS Code settings input / Figma toolbar number / Notion prop input。
+     * @internal `'naked'` — 完全無 chrome / 無 border / 無 focus ring。單獨使用無視覺邊界,**不可直接 standalone 用**;僅供 DS 內部 cell-as-input 組合(edit×naked 的 border/hover/focus/error 由 field-wrapper 自渲 state machine 提供,非 host cell 自管;詳 field-wrapper.tsx)。consumer 請用 `default`(2026-07-14 起型別層已擋:公開 FieldVariant 不含 naked,僅 DataTable cell-registry 經 WithFieldVariantInternal 通道傳入)。
+     *
+     * 透傳:在 `<Field variant="default">` 內自動繼承 context.variant;per-prop override context。
      */
     variant?: FieldVariant;
     /** Error 狀態（正交於 mode）。border-error + aria-invalid。 */
@@ -50,7 +51,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
      * **不要用在**:表單 Field(Field 需要欄寬對齊,不該隨值跳動)
      *
      * **fallback**:不支援 `field-sizing` 的瀏覽器會退化為 `w-auto`(wrapper 縮到 content 尺寸,
-     * input 本身有 min-width 避免消失)。UX 上稍不一致但不致斷;若必須精準對齊所有瀏覽器,
+     * input 為 min-w-0,依 content/placeholder 撐寬)。UX 上稍不一致但不致斷;若必須精準對齊所有瀏覽器,
      * consumer 可自行傳 `style={{ width: ... }}` 顯式寬度,不走 auto。
      */
     autoWidth?: boolean;
@@ -59,9 +60,29 @@ declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttri
 export declare const inputMeta: {
     readonly component: "Input";
     readonly family: 4;
-    readonly variants: {};
-    readonly sizes: {};
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly variants: {
+        readonly default: {
+            readonly purpose: "Field wrapper 完整 chrome(bg-surface + border + hover/focus 回饋)— 表單 / Field 內嵌";
+        };
+    };
+    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: 36;
+            readonly iconSize: 20;
+            readonly typography: "body-lg";
+        };
+    };
+    readonly states: readonly ["default", "hover", "focus-visible", "disabled"];
     readonly tokens: {
         readonly bg: readonly ["bg-surface"];
         readonly fg: readonly ["text-fg-disabled", "text-fg-muted"];

package/dist/components/Input/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAC3F,OAAO,EAAE,kBAAkB,EAAkC,MAAM,gDAAgD,CAAA;AAEnH,OAAO,EAAgC,KAAK,kBAAkB,EAAE,MAAM,uDAAuD,CAAA;AAM7H,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,EAC/D,IAAI,CAAC,YAAY,CAAC,OAAO,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnE,yBAAyB;IACzB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,sDAAsD;IACtD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,oDAAoD;IACpD,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,qDAAqD;IACrD,SAAS,CAAC,EAAE,kBAAkB,CAAA;IAC9B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;;;;;;;;;;OAcG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAKD,QAAA,MAAM,KAAK,qFAwIV,CAAA;AAQD,eAAO,MAAM,SAAS;;;;;;;;;;;CAeZ,CAAA;AAEV,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAwB,MAAM,8CAA8C,CAAA;AACjH,OAAO,EAAE,kBAAkB,EAAmB,MAAM,gDAAgD,CAAA;AAGpG,OAAO,EAAgC,KAAK,kBAAkB,EAAE,MAAM,uDAAuD,CAAA;AAO7H,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,EAC/D,IAAI,CAAC,YAAY,CAAC,OAAO,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IAC7E,iBAAiB;IACjB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,sDAAsD;IACtD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,oDAAoD;IACpD,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,qDAAqD;IACrD,SAAS,CAAC,EAAE,kBAAkB,CAAA;IAC9B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;;;;;;;;;;OAcG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAKD,QAAA,MAAM,KAAK,qFAwLV,CAAA;AAUD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmBZ,CAAA;AAEV,OAAO,EAAE,KAAK,EAAE,CAAA"}