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

package/dist/components/Notice/notice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notice.d.ts","sourceRoot":"","sources":["../../../src/components/Notice/notice.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;AAUhF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAM3D,CAAA;AAQD,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC3D,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,KAAK,CAAA;CAC7C;AAED,QAAA,MAAM,MAAM,oFAyDX,CAAA;AA+BD,wBAAgB,eAAe,IAAI,MAAM,GAAG,OAAO,CAGlD;AAID,eAAO,MAAM,UAAU;;;;;;;;;;;CAeb,CAAA;AAEV,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/components/Notice/notice.js

@@ -0,0 +1,121 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { XCircle, TriangleAlert, CircleCheck, Info, X } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../Button/button.js";
+import { ItemPrefix, ItemContent } from "../../patterns/element-anatomy/item-anatomy.js";
+const VARIANT_ICON = {
+  neutral: null,
+  info: Info,
+  success: CircleCheck,
+  warning: TriangleAlert,
+  error: XCircle
+};
+const SUBTLE_ICON_COLOR = {
+  neutral: "text-fg-muted",
+  info: "text-info-text",
+  success: "text-success-text",
+  warning: "text-warning-text",
+  error: "text-error-text"
+};
+const NOTICE_LAYOUT = [
+  "flex items-start gap-2 w-full",
+  "text-body leading-compact",
+  "px-4 py-3"
+].join(" ");
+const Notice = React.forwardRef(
+  ({
+    variant = "neutral",
+    title,
+    description,
+    endContent,
+    dismissible = true,
+    onDismiss,
+    dismissAriaLabel = "關閉通知",
+    // i18n-allow: DS default; consumer override via dismissAriaLabel prop
+    iconClassName,
+    className,
+    ...props
+  }, ref) => {
+    const StatusIcon = VARIANT_ICON[variant];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(NOTICE_LAYOUT, className),
+        ...props,
+        children: [
+          StatusIcon && /* @__PURE__ */ jsx(ItemPrefix, { children: /* @__PURE__ */ jsx(StatusIcon, { size: 16, className: cn("shrink-0", iconClassName), "aria-hidden": true }) }),
+          /* @__PURE__ */ jsx(
+            ItemContent,
+            {
+              label: title,
+              description,
+              labelClassName: description ? "font-medium" : void 0
+            }
+          ),
+          (endContent || dismissible) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0 h-[1lh]", children: [
+            endContent,
+            dismissible && /* @__PURE__ */ jsx(
+              Button,
+              {
+                "data-dismiss": true,
+                iconOnly: true,
+                dismiss: true,
+                size: "xs",
+                startIcon: X,
+                "aria-label": dismissAriaLabel,
+                onClick: onDismiss
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+Notice.displayName = "Notice";
+let themeObserverStarted = false;
+const themeSubscribers = /* @__PURE__ */ new Set();
+function getInverseTheme() {
+  if (typeof document === "undefined") return "dark";
+  const current = document.documentElement.getAttribute("data-theme") ?? "light";
+  return current === "dark" ? "light" : "dark";
+}
+function startThemeObserver() {
+  if (themeObserverStarted || typeof document === "undefined") return;
+  themeObserverStarted = true;
+  const root = document.documentElement;
+  const observer = new MutationObserver(() => {
+    themeSubscribers.forEach((cb) => cb());
+  });
+  observer.observe(root, { attributes: true, attributeFilter: ["data-theme"] });
+}
+function subscribe(cb) {
+  startThemeObserver();
+  themeSubscribers.add(cb);
+  return () => themeSubscribers.delete(cb);
+}
+function useInverseTheme() {
+  return React.useSyncExternalStore(subscribe, getInverseTheme, getInverseTheme);
+}
+const noticeMeta = {
+  component: "Notice",
+  family: null,
+  // non-family composite / overlay / layout
+  variants: {},
+  sizes: {},
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: [],
+    fg: ["text-error-text", "text-fg-muted", "text-fg-secondary", "text-info-text", "text-success-text", "text-warning-text"],
+    ring: []
+  }
+};
+export {
+  Notice,
+  SUBTLE_ICON_COLOR,
+  noticeMeta,
+  useInverseTheme
+};
+//# sourceMappingURL=notice.js.map

package/dist/components/Notice/notice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notice.js","sources":["../../../src/components/Notice/notice.tsx"],"sourcesContent":["import * as React from 'react'\nimport { X as XIcon, Info, CircleCheck, TriangleAlert, XCircle, type LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/design-system/components/Button/button'\nimport { ItemContent, ItemPrefix } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n/**\n * Notice — Toast / Alert 共用的視覺佈局層\n *\n * ── Typography: md tier ──\n * title: text-body (14px) leading-compact — 有 description 時加 font-medium\n * description: text-body (14px) leading-compact + text-fg-secondary (neutral-8)\n * 14px 配 14px — 視覺層級靠 font-weight + color 區分,不靠 font-size。\n *\n * ── Padding（固定,不隨 density 變） ──\n * px = px-4（16px）\n * py = py-3（12px）\n * gap = gap-2（8px）\n * Toast/Alert 是浮動通知,不是工作區域元件——density 控制表單/選單的緊湊度,\n * 通知的尺寸應該固定,不隨 density 縮放。\n *\n * ── Icon: md tier ──\n * icon size: 16px（ICON_SIZE.md）\n *\n * ── Dismiss X(chrome corner close,Cat 3 Action group region)──\n * 用 Button iconOnly dismiss **size=\"xs\"** — 非 Inline Action、非自刻 button。\n * Rationale(Notification banner family canonical):\n * - Notice / Alert / Toast 屬 **notification banner family**(ephemeral、px-4 py-3 固定不隨 density),\n *   dismiss 是邊角小 affordance,xs 視覺不搶眼不跟 content 競爭。見 `overlay-surface.spec.md`\n *   「Chrome dismiss size canonical」三家族分類(Modal sm / Non-modal xs / Notification xs)\n * - Close 左側可加 refresh / share(action group region),皆統一 xs\n * - `dismiss` prop 自動套 variant=\"text\" + fg-muted override\n * SSOT:patterns/element-anatomy/inline-action.spec.md「Dismiss canonical — X close only」\n *      + components/Alert/alert.spec.md「Chrome corner close X canonical」。\n */\n\nexport type NoticeVariant = 'neutral' | 'info' | 'success' | 'warning' | 'error'\n\nconst VARIANT_ICON: Record<NoticeVariant, LucideIcon | null> = {\n  neutral: null,\n  info: Info,\n  success: CircleCheck,\n  warning: TriangleAlert,\n  error: XCircle,\n}\n\nexport const SUBTLE_ICON_COLOR: Record<NoticeVariant, string> = {\n  neutral: 'text-fg-muted',\n  info: 'text-info-text',\n  success: 'text-success-text',\n  warning: 'text-warning-text',\n  error: 'text-error-text',\n}\n\nconst NOTICE_LAYOUT = [\n  'flex items-start gap-2 w-full',\n  'text-body leading-compact',\n  'px-4 py-3',\n].join(' ')\n\nexport interface NoticeProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  variant?: NoticeVariant\n  title: React.ReactNode\n  description?: React.ReactNode\n  endContent?: React.ReactNode\n  dismissible?: boolean\n  onDismiss?: () => void\n  /** ARIA label for the dismiss button. Override for i18n. Default: \"關閉通知\" */\n  dismissAriaLabel?: string\n  iconClassName?: string\n  /**\n   * ARIA role 由 wrapping consumer 決定(Alert / Toast / 自管 host),Notice 預設不帶 role。\n   * Notice 是 layout primitive,Alert / Toast 是 live region 擁有者——避免 nested live region\n   * 造成 screen reader 重複朗讀。明文傳遞才覆寫。\n   */\n  role?: 'status' | 'alert'\n  /**\n   * 對應 role 的 aria-live 策略,wrapping consumer 決定;Notice 預設 undefined 不帶 live region。\n   */\n  'aria-live'?: 'polite' | 'assertive' | 'off'\n}\n\nconst Notice = React.forwardRef<HTMLDivElement, NoticeProps>(\n  (\n    {\n      variant = 'neutral',\n      title,\n      description,\n      endContent,\n      dismissible = true,\n      onDismiss,\n      dismissAriaLabel = '關閉通知', // i18n-allow: DS default; consumer override via dismissAriaLabel prop\n      iconClassName,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const StatusIcon = VARIANT_ICON[variant]\n\n    return (\n      <div\n        ref={ref}\n        className={cn(NOTICE_LAYOUT, className)}\n        {...props}\n      >\n        {StatusIcon && (\n          <ItemPrefix>\n            <StatusIcon size={16} className={cn('shrink-0', iconClassName)} aria-hidden />\n          </ItemPrefix>\n        )}\n\n        {/* Title + description 消費 ItemContent primitive(SSOT)。\n            Label 有 desc 時 font-medium(Notice idiom:title 跟 desc 對照時 title 要更重)。 */}\n        <ItemContent\n          label={title}\n          description={description}\n          labelClassName={description ? 'font-medium' : undefined}\n        />\n\n        {(endContent || dismissible) && (\n          <div className=\"flex items-center gap-2 shrink-0 h-[1lh]\">\n            {endContent}\n            {dismissible && (\n              <Button\n                data-dismiss\n                iconOnly\n                dismiss\n                size=\"xs\"\n                startIcon={XIcon}\n                aria-label={dismissAriaLabel}\n                onClick={onDismiss}\n              />\n            )}\n          </div>\n        )}\n      </div>\n    )\n  },\n)\nNotice.displayName = 'Notice'\n\n// Singleton MutationObserver + subscription fan-out(2026-04-22 D3 perf audit):\n// 先前每個 useInverseTheme consumer(Alert / Toast / Notice instance 等)各建一個 MO,\n// N 個 Notice = N 個 observers。singleton 共用一個 MO + pub/sub 讓 theme swap 只做一次 DOM read。\nlet themeObserverStarted = false\nconst themeSubscribers = new Set<() => void>()\n\nfunction getInverseTheme(): 'dark' | 'light' {\n  if (typeof document === 'undefined') return 'dark'\n  const current = document.documentElement.getAttribute('data-theme') ?? 'light'\n  return current === 'dark' ? 'light' : 'dark'\n}\n\nfunction startThemeObserver() {\n  if (themeObserverStarted || typeof document === 'undefined') return\n  themeObserverStarted = true\n  const root = document.documentElement\n  const observer = new MutationObserver(() => {\n    themeSubscribers.forEach((cb) => cb())\n  })\n  observer.observe(root, { attributes: true, attributeFilter: ['data-theme'] })\n}\n\nfunction subscribe(cb: () => void): () => void {\n  startThemeObserver()\n  themeSubscribers.add(cb)\n  return () => themeSubscribers.delete(cb)\n}\n\nexport function useInverseTheme(): 'dark' | 'light' {\n  // useSyncExternalStore canonical (React 18+):單一 external source 被 N consumers 訂閱\n  return React.useSyncExternalStore(subscribe, getInverseTheme, getInverseTheme)\n}\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 noticeMeta = {\n  component: 'Notice',\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: [],\n    fg: ['text-error-text', 'text-fg-muted', 'text-fg-secondary', 'text-info-text', 'text-success-text', 'text-warning-text'],\n    ring: [],\n  },\n} as const\n\nexport { Notice }\n"],"names":["XIcon"],"mappings":";;;;;;AAsCA,MAAM,eAAyD;AAAA,EAC7D,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;AAEO,MAAM,oBAAmD;AAAA,EAC9D,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;AAEA,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAyBV,MAAM,SAAS,MAAM;AAAA,EACnB,CACE;AAAA,IACE,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,mBAAmB;AAAA;AAAA,IACnB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,aAAa,aAAa,OAAO;AAEvC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,eAAe,SAAS;AAAA,QACrC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,cACC,oBAAC,YAAA,EACC,UAAA,oBAAC,YAAA,EAAW,MAAM,IAAI,WAAW,GAAG,YAAY,aAAa,GAAG,eAAW,MAAC,GAC9E;AAAA,UAKF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP;AAAA,cACA,gBAAgB,cAAc,gBAAgB;AAAA,YAAA;AAAA,UAAA;AAAA,WAG9C,cAAc,gBACd,qBAAC,OAAA,EAAI,WAAU,4CACZ,UAAA;AAAA,YAAA;AAAA,YACA,eACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,gBAAY;AAAA,gBACZ,UAAQ;AAAA,gBACR,SAAO;AAAA,gBACP,MAAK;AAAA,gBACL,WAAWA;AAAAA,gBACX,cAAY;AAAA,gBACZ,SAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UACX,EAAA,CAEJ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AACA,OAAO,cAAc;AAKrB,IAAI,uBAAuB;AAC3B,MAAM,uCAAuB,IAAA;AAE7B,SAAS,kBAAoC;AAC3C,MAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,QAAM,UAAU,SAAS,gBAAgB,aAAa,YAAY,KAAK;AACvE,SAAO,YAAY,SAAS,UAAU;AACxC;AAEA,SAAS,qBAAqB;AAC5B,MAAI,wBAAwB,OAAO,aAAa,YAAa;AAC7D,yBAAuB;AACvB,QAAM,OAAO,SAAS;AACtB,QAAM,WAAW,IAAI,iBAAiB,MAAM;AAC1C,qBAAiB,QAAQ,CAAC,OAAO,GAAA,CAAI;AAAA,EACvC,CAAC;AACD,WAAS,QAAQ,MAAM,EAAE,YAAY,MAAM,iBAAiB,CAAC,YAAY,GAAG;AAC9E;AAEA,SAAS,UAAU,IAA4B;AAC7C,qBAAA;AACA,mBAAiB,IAAI,EAAE;AACvB,SAAO,MAAM,iBAAiB,OAAO,EAAE;AACzC;AAEO,SAAS,kBAAoC;AAElD,SAAO,MAAM,qBAAqB,WAAW,iBAAiB,eAAe;AAC/E;AAIO,MAAM,aAAa;AAAA,EACxB,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,CAAA;AAAA,IACJ,IAAI,CAAC,mBAAmB,iBAAiB,qBAAqB,kBAAkB,qBAAqB,mBAAmB;AAAA,IACxH,MAAM,CAAA;AAAA,EAAC;AAEX;"}

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

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

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

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

package/dist/components/NumberInput/index.js

@@ -0,0 +1,7 @@
+import { NumberInput, formatNumber, numberInputMeta } from "./number-input.js";
+export {
+  NumberInput,
+  formatNumber,
+  numberInputMeta
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/NumberInput/number-input.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import type { FieldMode, FieldVariant } from '../../components/Field/field-types';
+import type { InlineActionConfig } from '../../patterns/element-anatomy/item-anatomy';
+import { fieldWrapperStyles } from '../../components/Field/field-wrapper';
+export interface NumberFormatOptions {
+    /** 小數位數 */
+    precision?: number;
+    /** 前綴（如 '$'、'NT$'） */
+    prefix?: string;
+    /** 後綴（如 '%'、'元'） */
+    suffix?: string;
+    /** locale（預設 'en-US'） */
+    locale?: string;
+}
+declare function formatNumber(value: number | null | undefined, options?: NumberFormatOptions): string;
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'onChange' | 'type'>, Omit<VariantProps<typeof fieldWrapperStyles>, 'mode' | 'variant'>, NumberFormatOptions {
+    /** Field display mode */
+    mode?: FieldMode;
+    /**
+     * Visual chrome(正交於 mode);Phase B1(2026-05-05)新增。
+     * - `'default'`(預設)— 完整 Field wrapper chrome。
+     * - `'bare'` — 透明 variant,hover/focus 才 reveal(Toolbar inline / DataTable cell)。
+     *
+     * 透傳:在 `<Field variant="bare">` 內自動繼承 context.variant;per-prop override context。
+     */
+    variant?: FieldVariant;
+    /** Error 狀態（正交於 mode）。 */
+    error?: boolean;
+    /** 數值 */
+    value?: number | null;
+    /** 數值變更 */
+    onChange?: (value: number | null) => void;
+    /** 右側 inline action — 宣告式 API，Field 根據 size 自動渲染。 */
+    endAction?: InlineActionConfig;
+    /**
+     * 右側 slot(ReactNode)— escape hatch 供 consumer 放自訂元素(如 stepper button group / 自訂 popover trigger)。
+     * 跟 `endAction` 互斥(同時傳 endSlot 會優先,endAction 被忽略)。
+     * 規則對齊 Input.endSlot:90% case 用 endAction 宣告式 API,10% config 表達不出時走 endSlot。
+     */
+    endSlot?: React.ReactNode;
+}
+declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const numberInputMeta: {
+    readonly component: "NumberInput";
+    readonly family: 4;
+    readonly variants: {};
+    readonly sizes: {};
+    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly tokens: {
+        readonly bg: readonly [];
+        readonly fg: readonly ["text-fg-disabled", "text-fg-muted"];
+        readonly ring: readonly [];
+    };
+};
+export { NumberInput, formatNumber };
+//# sourceMappingURL=number-input.d.ts.map

package/dist/components/NumberInput/number-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/number-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE5D,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAC3F,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uDAAuD,CAAA;AAC/F,OAAO,EAAE,kBAAkB,EAAkC,MAAM,gDAAgD,CAAA;AAMnH,MAAM,WAAW,mBAAmB;IAClC,WAAW;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,yBAAyB;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,iBAAS,YAAY,CACnB,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAChC,OAAO,GAAE,mBAAwB,GAChC,MAAM,CAOR;AAOD,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC,EAC/F,IAAI,CAAC,YAAY,CAAC,OAAO,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,EACjE,mBAAmB;IACrB,yBAAyB;IACzB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,0BAA0B;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,SAAS;IACT,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,WAAW;IACX,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACzC,qDAAqD;IACrD,SAAS,CAAC,EAAE,kBAAkB,CAAA;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAKD,QAAA,MAAM,WAAW,2FA0GhB,CAAA;AAMD,eAAO,MAAM,eAAe;;;;;;;;;;;CAelB,CAAA;AAGV,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/NumberInput/number-input.js

@@ -0,0 +1,131 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { EMPTY_DISPLAY, fieldWrapperStyles, bareInputStyles } from "../Field/field-wrapper.js";
+import { useFieldContext } from "../Field/field-context.js";
+import { ItemInlineAction } from "../../patterns/element-anatomy/item-anatomy.js";
+function formatNumber(value, options = {}) {
+  if (value == null) return "";
+  const { precision, prefix = "", suffix = "", locale = "en-US" } = options;
+  const formatted = precision != null ? value.toLocaleString(locale, { minimumFractionDigits: precision, maximumFractionDigits: precision }) : value.toLocaleString(locale);
+  return `${prefix}${formatted}${suffix}`;
+}
+const NumberInput = React.forwardRef(
+  ({
+    mode: modeProp,
+    variant: variantProp,
+    error: errorProp = false,
+    size: sizeProp,
+    value,
+    onChange,
+    precision,
+    prefix,
+    suffix,
+    locale,
+    endAction,
+    endSlot,
+    className,
+    disabled: disabledProp,
+    readOnly,
+    id: idProp,
+    "aria-describedby": ariaDescribedByProp,
+    "aria-errormessage": ariaErrorMessageProp,
+    ...props
+  }, ref) => {
+    const fieldCtx = useFieldContext();
+    const error = errorProp || ((fieldCtx == null ? void 0 : fieldCtx.invalid) ?? false);
+    const size = sizeProp ?? (fieldCtx == null ? void 0 : fieldCtx.size) ?? "md";
+    const disabled = disabledProp ?? (fieldCtx == null ? void 0 : fieldCtx.disabled);
+    const variant = variantProp ?? (fieldCtx == null ? void 0 : fieldCtx.variant) ?? "default";
+    const resolvedMode = modeProp ?? (fieldCtx == null ? void 0 : fieldCtx.mode) ?? (readOnly ? "readonly" : disabled ? "disabled" : "edit");
+    if (resolvedMode !== "edit") {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(fieldWrapperStyles({ mode: resolvedMode, variant, size }), className),
+          "data-field-mode": resolvedMode,
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "flex-1 min-w-0",
+                resolvedMode === "disabled" && "text-fg-disabled cursor-not-allowed",
+                value == null && "text-fg-muted"
+              ),
+              children: value == null ? EMPTY_DISPLAY : formatNumber(value, { precision, prefix, suffix, locale })
+            }
+          )
+        }
+      );
+    }
+    const handleChange = (e) => {
+      if (!onChange) return;
+      const raw = e.target.value;
+      if (raw === "" || raw === "-") {
+        onChange(null);
+        return;
+      }
+      const parsed = Number(raw);
+      if (!Number.isNaN(parsed)) {
+        onChange(parsed);
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          fieldWrapperStyles({ mode: "edit", variant, size }),
+          error && [
+            "border-error hover:border-error-hover",
+            "focus-within:border-error focus-within:hover:border-error"
+          ],
+          className
+        ),
+        "data-field-mode": "edit",
+        "data-error": error ? "" : void 0,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "text",
+              inputMode: "decimal",
+              id: idProp ?? (fieldCtx == null ? void 0 : fieldCtx.id),
+              value: value ?? "",
+              onChange: handleChange,
+              "aria-invalid": error || void 0,
+              "aria-required": (fieldCtx == null ? void 0 : fieldCtx.required) || void 0,
+              "aria-describedby": ariaDescribedByProp ?? (fieldCtx == null ? void 0 : fieldCtx.descriptionId),
+              "aria-errormessage": ariaErrorMessageProp ?? (error ? fieldCtx == null ? void 0 : fieldCtx.errorId : void 0),
+              className: bareInputStyles,
+              ...props
+            }
+          ),
+          endSlot ? (
+            // endSlot escape hatch:consumer 自控右側 slot(對齊 Input.endSlot canonical)
+            endSlot
+          ) : endAction ? /* @__PURE__ */ jsx(ItemInlineAction, { action: endAction, size: size ?? "md" }) : null
+        ]
+      }
+    );
+  }
+);
+NumberInput.displayName = "NumberInput";
+const numberInputMeta = {
+  component: "NumberInput",
+  family: 4,
+  variants: {},
+  sizes: {},
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: [],
+    fg: ["text-fg-disabled", "text-fg-muted"],
+    ring: []
+  }
+};
+export {
+  NumberInput,
+  formatNumber,
+  numberInputMeta
+};
+//# sourceMappingURL=number-input.js.map

package/dist/components/NumberInput/number-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.js","sources":["../../../src/components/NumberInput/number-input.tsx"],"sourcesContent":["import * as React from 'react'\nimport { type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\nimport type { FieldMode, FieldVariant } from '@/design-system/components/Field/field-types'\nimport type { InlineActionConfig } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { fieldWrapperStyles, bareInputStyles, EMPTY_DISPLAY } from '@/design-system/components/Field/field-wrapper'\nimport { useFieldContext } from '@/design-system/components/Field/field-context'\nimport { ItemInlineAction } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n// ── Format ──────────────────────────────────────────────────────────────────\n\nexport interface NumberFormatOptions {\n  /** 小數位數 */\n  precision?: number\n  /** 前綴（如 '$'、'NT$'） */\n  prefix?: string\n  /** 後綴（如 '%'、'元'） */\n  suffix?: string\n  /** locale（預設 'en-US'） */\n  locale?: string\n}\n\nfunction formatNumber(\n  value: number | null | undefined,\n  options: NumberFormatOptions = {},\n): string {\n  if (value == null) return ''\n  const { precision, prefix = '', suffix = '', locale = 'en-US' } = options\n  const formatted = precision != null\n    ? value.toLocaleString(locale, { minimumFractionDigits: precision, maximumFractionDigits: precision })\n    : value.toLocaleString(locale)\n  return `${prefix}${formatted}${suffix}`\n}\n\n// Phase B1(2026-05-05):NumberInputDisplay 退場。\n// 改用 `<NumberInput mode=\"display\" value={...} prefix={...} ... />`,format 邏輯在 mode='display' 分支重用。\n\n// ── Types ───────────────────────────────────────────────────────────────────\n\nexport interface NumberInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'onChange' | 'type'>,\n    Omit<VariantProps<typeof fieldWrapperStyles>, 'mode' | 'variant'>,\n    NumberFormatOptions {\n  /** Field display mode */\n  mode?: FieldMode\n  /**\n   * Visual chrome(正交於 mode);Phase B1(2026-05-05)新增。\n   * - `'default'`(預設)— 完整 Field wrapper chrome。\n   * - `'bare'` — 透明 variant,hover/focus 才 reveal(Toolbar inline / DataTable cell)。\n   *\n   * 透傳:在 `<Field variant=\"bare\">` 內自動繼承 context.variant;per-prop override context。\n   */\n  variant?: FieldVariant\n  /** Error 狀態（正交於 mode）。 */\n  error?: boolean\n  /** 數值 */\n  value?: number | null\n  /** 數值變更 */\n  onChange?: (value: number | null) => void\n  /** 右側 inline action — 宣告式 API，Field 根據 size 自動渲染。 */\n  endAction?: InlineActionConfig\n  /**\n   * 右側 slot(ReactNode)— escape hatch 供 consumer 放自訂元素(如 stepper button group / 自訂 popover trigger)。\n   * 跟 `endAction` 互斥(同時傳 endSlot 會優先,endAction 被忽略)。\n   * 規則對齊 Input.endSlot:90% case 用 endAction 宣告式 API,10% config 表達不出時走 endSlot。\n   */\n  endSlot?: React.ReactNode\n}\n\n// ── Component ───────────────────────────────────────────────────────────────\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  (\n    {\n      mode: modeProp,\n      variant: variantProp,\n      error: errorProp = false,\n      size: sizeProp,\n      value,\n      onChange,\n      precision,\n      prefix,\n      suffix,\n      locale,\n      endAction,\n      endSlot,\n      className,\n      disabled: disabledProp,\n      readOnly,\n      id: idProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-errormessage': ariaErrorMessageProp,\n      ...props\n    },\n    ref\n  ) => {\n    const fieldCtx = useFieldContext()\n    const error = errorProp || (fieldCtx?.invalid ?? false)\n    const size = sizeProp ?? fieldCtx?.size ?? 'md'\n    const disabled = disabledProp ?? fieldCtx?.disabled\n    // chrome 透傳:per-prop override context;context 沒值則 'default'\n    const variant: FieldVariant = variantProp ?? fieldCtx?.variant ?? 'default'\n    // mode resolve order(Phase B1 2026-05-05):prop > fieldCtx > readOnly/disabled fallback\n    const resolvedMode: FieldMode = modeProp\n      ?? fieldCtx?.mode\n      ?? (readOnly ? 'readonly' : disabled ? 'disabled' : 'edit')\n\n    // display / readonly / disabled 都顯示格式化值(span 取代 input)\n    if (resolvedMode !== 'edit') {\n      return (\n        <div\n          className={cn(fieldWrapperStyles({ mode: resolvedMode, variant: variant, size }), className)}\n          data-field-mode={resolvedMode}\n        >\n          <span\n            className={cn(\n              'flex-1 min-w-0',\n              resolvedMode === 'disabled' && 'text-fg-disabled cursor-not-allowed',\n              value == null && 'text-fg-muted',\n            )}\n          >\n            {value == null ? EMPTY_DISPLAY : formatNumber(value, { precision, prefix, suffix, locale })}\n          </span>\n        </div>\n      )\n    }\n\n    // edit 模式：raw 數值輸入\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (!onChange) return\n      const raw = e.target.value\n      if (raw === '' || raw === '-') {\n        onChange(null)\n        return\n      }\n      const parsed = Number(raw)\n      if (!Number.isNaN(parsed)) {\n        onChange(parsed)\n      }\n    }\n\n    return (\n      <div\n        className={cn(\n          fieldWrapperStyles({ mode: 'edit', variant: variant, size }),\n          error && [\n            'border-error hover:border-error-hover',\n            'focus-within:border-error focus-within:hover:border-error',\n          ],\n          className,\n        )}\n        data-field-mode=\"edit\"\n        data-error={error ? '' : undefined}\n      >\n        <input\n          ref={ref}\n          type=\"text\"\n          inputMode=\"decimal\"\n          id={idProp ?? fieldCtx?.id}\n          value={value ?? ''}\n          onChange={handleChange}\n          aria-invalid={error || undefined}\n          aria-required={fieldCtx?.required || undefined}\n          aria-describedby={ariaDescribedByProp ?? fieldCtx?.descriptionId}\n          aria-errormessage={ariaErrorMessageProp ?? (error ? fieldCtx?.errorId : undefined)}\n          className={bareInputStyles}\n          {...props}\n        />\n        {endSlot ? (\n          // endSlot escape hatch:consumer 自控右側 slot(對齊 Input.endSlot canonical)\n          endSlot\n        ) : endAction ? (\n          <ItemInlineAction action={endAction} size={size ?? 'md'} />\n        ) : null}\n      </div>\n    )\n  }\n)\nNumberInput.displayName = 'NumberInput'\n\n// code-quality-allow: dead-export — public API surface — consumer-exposed for future use\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 numberInputMeta = {\n  component: 'NumberInput',\n  family: 4,\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: [],\n    fg: ['text-fg-disabled', 'text-fg-muted'],\n    ring: [],\n  },\n} as const\n\n// code-quality-allow: dead-export — public API surface — consumer-exposed for future use\nexport { NumberInput, formatNumber }\n"],"names":[],"mappings":"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"}

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

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

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

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

package/dist/components/OverflowIndicator/index.js

@@ -0,0 +1,6 @@
+import { OverflowIndicator, overflowIndicatorMeta } from "./overflow-indicator.js";
+export {
+  OverflowIndicator,
+  overflowIndicatorMeta
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/OverflowIndicator/overflow-indicator.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export interface OverflowIndicatorProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+    count: number;
+    shape?: 'circle' | 'tag';
+    size?: 'sm' | 'md' | 'lg';
+    children: React.ReactNode;
+    className?: string;
+}
+declare const OverflowIndicator: React.ForwardRefExoticComponent<OverflowIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const overflowIndicatorMeta: {
+    readonly component: "OverflowIndicator";
+    readonly family: null;
+    readonly variants: {};
+    readonly sizes: {};
+    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly tokens: {
+        readonly bg: readonly ["bg-muted"];
+        readonly fg: readonly ["text-foreground"];
+        readonly ring: readonly [];
+    };
+};
+export { OverflowIndicator };
+//# sourceMappingURL=overflow-indicator.d.ts.map

package/dist/components/OverflowIndicator/overflow-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overflow-indicator.d.ts","sourceRoot":"","sources":["../../../src/components/OverflowIndicator/overflow-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AA6B9B,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IAC/D,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAmDD,QAAA,MAAM,iBAAiB,gGA8CtB,CAAA;AAKD,eAAO,MAAM,qBAAqB;;;;;;;;;;;CAexB,CAAA;AAEV,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/components/OverflowIndicator/overflow-indicator.js

@@ -0,0 +1,111 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { HoverCard, HoverCardTrigger, HoverCardContent } from "../HoverCard/hover-card.js";
+import { tagVariants } from "../Tag/tag.js";
+import { HOVER_DELAY_CLOSE_MS, HOVER_DELAY_RICH_MS } from "../../tokens/motion/motion.js";
+const triggerSize = {
+  sm: "h-5 min-w-5",
+  md: "h-6 min-w-6",
+  lg: "h-6 min-w-6"
+};
+const triggerText = {
+  sm: "text-[10px]",
+  md: "text-caption",
+  lg: "text-caption"
+};
+function ShrinkWrapList({ children }) {
+  const containerRef = React.useRef(null);
+  React.useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    let rafId = 0;
+    rafId = requestAnimationFrame(() => {
+      rafId = 0;
+      const cs = getComputedStyle(container);
+      const padL = parseFloat(cs.paddingLeft) || 0;
+      const padR = parseFloat(cs.paddingRight) || 0;
+      const gap = parseFloat(cs.gap) || parseFloat(cs.columnGap) || 0;
+      const available = container.offsetWidth - padL - padR;
+      const items = Array.from(container.children);
+      if (items.length === 0) return;
+      let currentRow = 0;
+      let maxRow = 0;
+      items.forEach((item) => {
+        const w = item.offsetWidth;
+        const needed = currentRow > 0 ? currentRow + gap + w : w;
+        if (needed > available && currentRow > 0) {
+          maxRow = Math.max(maxRow, currentRow);
+          currentRow = w;
+        } else {
+          currentRow = needed;
+        }
+      });
+      maxRow = Math.max(maxRow, currentRow);
+      container.style.maxWidth = `${Math.ceil(maxRow) + padL + padR + 1}px`;
+    });
+    return () => {
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+  }, [children]);
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: "flex flex-wrap gap-1 p-2 max-w-[280px]", children });
+}
+const OverflowIndicator = React.forwardRef(
+  function OverflowIndicator2({ count, shape = "circle", size = "md", children, className, ...props }, ref) {
+    if (count <= 0) return null;
+    const trigger = shape === "tag" ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "data-overflow-indicator": "",
+        className: cn(tagVariants({ color: "neutral", size }), "cursor-default", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs("span", { className: "px-1", children: [
+          "+",
+          count
+        ] })
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        "data-overflow-indicator": "",
+        className: cn(
+          "shrink-0 rounded-full inline-grid place-content-center",
+          "bg-muted text-foreground font-medium leading-none cursor-default",
+          triggerSize[size],
+          triggerText[size],
+          className
+        ),
+        ...props,
+        children: [
+          "+",
+          count
+        ]
+      }
+    );
+    return /* @__PURE__ */ jsxs(HoverCard, { openDelay: HOVER_DELAY_RICH_MS, closeDelay: HOVER_DELAY_CLOSE_MS, children: [
+      /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsx(HoverCardContent, { className: "bg-tooltip rounded-lg", "data-theme": "dark", children: /* @__PURE__ */ jsx(ShrinkWrapList, { children }) })
+    ] });
+  }
+);
+OverflowIndicator.displayName = "OverflowIndicator";
+const overflowIndicatorMeta = {
+  component: "OverflowIndicator",
+  family: null,
+  // non-family composite / overlay / layout
+  variants: {},
+  sizes: {},
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: ["bg-muted"],
+    fg: ["text-foreground"],
+    ring: []
+  }
+};
+export {
+  OverflowIndicator,
+  overflowIndicatorMeta
+};
+//# sourceMappingURL=overflow-indicator.js.map

package/dist/components/OverflowIndicator/overflow-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overflow-indicator.js","sources":["../../../src/components/OverflowIndicator/overflow-indicator.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '@/lib/utils'\nimport { HoverCard, HoverCardTrigger, HoverCardContent } from '@/design-system/components/HoverCard/hover-card'\nimport { tagVariants } from '@/design-system/components/Tag/tag'\nimport { HOVER_DELAY_RICH_MS, HOVER_DELAY_CLOSE_MS } from '@/design-system/tokens/motion/motion'\n\n/**\n * OverflowIndicator — +N 觸發器 + HoverCard 顯示溢出內容\n *\n * 統一用 HoverCard（不用 Tooltip）——溢出內容可能需要互動：\n * - 人員 +N：tag dismiss + hover name card\n * - 一般 +N：穩定顯示溢出項目\n *\n * trigger 不用 Tag 元件（Tag 有內建 truncation Tooltip 會跟 HoverCard 衝突），\n * 改用 tagVariants 直接套樣式。\n */\n\nconst triggerSize: Record<string, string> = {\n  sm: 'h-5 min-w-5',\n  md: 'h-6 min-w-6',\n  lg: 'h-6 min-w-6',\n}\n\nconst triggerText: Record<string, string> = {\n  sm: 'text-[10px]',\n  md: 'text-caption',\n  lg: 'text-caption',\n}\n\nexport interface OverflowIndicatorProps\n  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {\n  count: number\n  shape?: 'circle' | 'tag'\n  size?: 'sm' | 'md' | 'lg'\n  children: React.ReactNode\n  className?: string\n}\n\nfunction ShrinkWrapList({ children }: { children: React.ReactNode }) {\n  const containerRef = React.useRef<HTMLDivElement | null>(null)\n\n  // 2026-05-16 audit codex Round 6:rAF capture + cancel on unmount/re-run(defensive hygiene)。\n  // 原 callback ref `requestAnimationFrame(() => ...)` 沒 cancel,unmount-during-rAF 可能 fire 後\n  // mutate detached element.style — no-op but pattern hygiene 應對齊 DS-wide rAF cancel canonical。\n  React.useLayoutEffect(() => {\n    const container = containerRef.current\n    if (!container) return\n    let rafId = 0\n    rafId = requestAnimationFrame(() => {\n      rafId = 0\n      const cs = getComputedStyle(container)\n      const padL = parseFloat(cs.paddingLeft) || 0\n      const padR = parseFloat(cs.paddingRight) || 0\n      const gap = parseFloat(cs.gap) || parseFloat(cs.columnGap) || 0\n      const available = container.offsetWidth - padL - padR\n\n      const items = Array.from(container.children) as HTMLElement[]\n      if (items.length === 0) return\n\n      let currentRow = 0\n      let maxRow = 0\n\n      items.forEach(item => {\n        const w = item.offsetWidth\n        const needed = currentRow > 0 ? currentRow + gap + w : w\n\n        if (needed > available && currentRow > 0) {\n          maxRow = Math.max(maxRow, currentRow)\n          currentRow = w\n        } else {\n          currentRow = needed\n        }\n      })\n      maxRow = Math.max(maxRow, currentRow)\n\n      container.style.maxWidth = `${Math.ceil(maxRow) + padL + padR + 1}px`\n    })\n    return () => { if (rafId) cancelAnimationFrame(rafId) }\n  }, [children])\n\n  return (\n    <div ref={containerRef} className=\"flex flex-wrap gap-1 p-2 max-w-[280px]\">\n      {children}\n    </div>\n  )\n}\n\nconst OverflowIndicator = React.forwardRef<HTMLSpanElement, OverflowIndicatorProps>(\n  function OverflowIndicator(\n    { count, shape = 'circle', size = 'md', children, className, ...props },\n    ref,\n  ) {\n    if (count <= 0) return null\n\n    const trigger = shape === 'tag' ? (\n      <span\n        ref={ref}\n        data-overflow-indicator=\"\"\n        className={cn(tagVariants({ color: 'neutral', size }), 'cursor-default', className)}\n        {...props}\n      >\n        <span className=\"px-1\">+{count}</span>\n      </span>\n    ) : (\n      <span\n        ref={ref}\n        data-overflow-indicator=\"\"\n        className={cn(\n          'shrink-0 rounded-full inline-grid place-content-center',\n          'bg-muted text-foreground font-medium leading-none cursor-default',\n          triggerSize[size],\n          triggerText[size],\n          className,\n        )}\n        {...props}\n      >\n        +{count}\n      </span>\n    )\n\n    // 2026-05-18 fix(per user audit「所有 hovercard 應消費 hover delay token」+ motion.spec.md SSOT):\n    // rich tier(可互動 popup,user 可移浮層上操作)= HOVER_DELAY_RICH_MS;close = HOVER_DELAY_CLOSE_MS。\n    return (\n      <HoverCard openDelay={HOVER_DELAY_RICH_MS} closeDelay={HOVER_DELAY_CLOSE_MS}>\n        <HoverCardTrigger asChild>\n          {trigger}\n        </HoverCardTrigger>\n        <HoverCardContent className=\"bg-tooltip rounded-lg\" data-theme=\"dark\">\n          <ShrinkWrapList>{children}</ShrinkWrapList>\n        </HoverCardContent>\n      </HoverCard>\n    )\n  },\n)\nOverflowIndicator.displayName = 'OverflowIndicator'\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 overflowIndicatorMeta = {\n  component: 'OverflowIndicator',\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-muted'],\n    fg: ['text-foreground'],\n    ring: [],\n  },\n} as const\n\nexport { OverflowIndicator }\n"],"names":["OverflowIndicator"],"mappings":"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"}

package/dist/components/PeoplePicker/avatar-stack-overflow.d.ts

@@ -0,0 +1,57 @@
+/**
+ * avatar-stack-overflow — Deterministic SSOT primitive for avatar stack overflow math
+ *
+ * **2026-05-15 Bug 3 fix(Claude+Codex Step 5 比稿 consensus,user verbatim「就 A」)**:
+ *
+ * Real root cause of Bug 3「same cell width but different overflow timing per total count」:
+ *   1. `useOverflowCount` 在 Combobox 用 DOM `offsetWidth` 量測 + `overflowW = 60` fallback(實際 24px)
+ *   2. `overflowEl` 不被 ResizeObserver observe,first calc 用 fallback 後不會 recalc
+ *   3. `offsetWidth` 不減 `-ml-0.5` overlap → measurement 偏保守
+ *   4. **架構違反**:`MultiPersonDisplay` display path 用 canvas-based 算 / Combobox edit path 用 DOM offsetWidth
+ *      → 同 cell width 兩 path 不同結果 → user verbatim「同寬 cell overflow 時間不一樣」SSOT 根本被違反
+ *
+ * **Fix**(per codex Q3 consensus):抽 pure formula + React hook,display + edit 兩 path **共用**。
+ *
+ * **Deterministic formula**:
+ * ```
+ * firstAvatar + (visible - 1) * (avatar - overlap) + overflowChip <= available
+ * ```
+ * - `firstAvatar`:第一個 avatar 全寬 = `avatarPx`
+ * - subsequent items:`avatar - overlap`(stack `-ml-0.5` 視覺等同 measurement subtract)
+ * - `overflowChip`:若有 hidden,留 +N chip 空間;最後一個 visible item 不需留(`remaining === 0`)
+ *
+ * **Why centralize**:M14 mechanical guard against future drift。`MultiPersonDisplay` +
+ * PeoplePicker stack edit + future avatar consumers 都 import 此 helper,不可 copy formula。
+ * 對齊 codex「one avatar-stack primitive owns avatarPx, overlapPx, overflowChipPx」directive。
+ *
+ * **Benchmark cite**(per codex external baseline):MDN flex truncation / MUI Autocomplete
+ * limitTags / Ant Select maxTagCount="responsive"(explicit overflow contract,非 incidental clip)/
+ * Primer Truncate(parent-constrained max width)。
+ */
+/**
+ * Pure deterministic visible-count formula for avatar stack with overlap + overflow chip.
+ *
+ * @param availablePx — Container width available for the entire stack(含 +N chip 預留空間)
+ * @param total — Total avatars in selection
+ * @param avatarPx — Per-avatar pixel width(包含 ring border)
+ * @param overlapPx — Negative margin overlap between siblings(default 2px = `-ml-0.5`)
+ * @param overflowChipPx — Width reserved for +N indicator when overflow needed(default 24px = circle h-6 min-w-6)
+ * @returns visible count(0 ≤ visible ≤ total)。若全部 fit 則 visible = total(無 +N chip);否則 visible 為 max fit。
+ */
+export declare function getAvatarStackVisibleCount({ availablePx, total, avatarPx, overlapPx, overflowChipPx: _overflowChipPx, }: {
+    availablePx: number;
+    total: number;
+    avatarPx: number;
+    overlapPx?: number;
+    overflowChipPx?: number;
+}): number;
+/**
+ * Map size token to avatar pixel(對齊 person-display.tsx:80 AVATAR_PX SSOT)。
+ */
+export declare const AVATAR_STACK_AVATAR_PX: Record<'sm' | 'md' | 'lg', number>;
+/**
+ * Default overflow chip width per size(對齊 overflow-indicator.tsx:17 triggerSize SSOT)。
+ * shape='circle' → h-{5|6} min-w-{5|6} ≈ 20-24px
+ */
+export declare const AVATAR_STACK_OVERFLOW_CHIP_PX: Record<'sm' | 'md' | 'lg', number>;
+//# sourceMappingURL=avatar-stack-overflow.d.ts.map

package/dist/components/PeoplePicker/avatar-stack-overflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-stack-overflow.d.ts","sourceRoot":"","sources":["../../../src/components/PeoplePicker/avatar-stack-overflow.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH;;;;;;;;;GASG;AACH,wBAAgB,0BAA0B,CAAC,EACzC,WAAW,EACX,KAAK,EACL,QAAQ,EACR,SAAa,EAKb,cAAc,EAAE,eAAoB,GACrC,EAAE;IACD,WAAW,EAAE,MAAM,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,GAAG,MAAM,CAuBT;AAED;;GAEG;AACH,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,EAAE,MAAM,CAIrE,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,6BAA6B,EAAE,MAAM,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,EAAE,MAAM,CAI5E,CAAA"}