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

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

@@ -1,13 +1,24 @@
 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 { fieldWrapperStyles, bareInputStyles } from "../Field/field-wrapper.js";
+import { useFieldContext, useResolvedFieldInvalid, useResolvedFieldSize, useResolvedFieldDisabled, useResolvedFieldVariant, useResolvedFieldMode, useFieldEmptyDisplay, fieldEmptyColorClass } from "../Field/field-context.js";
 import { ItemInlineAction } from "../../patterns/element-anatomy/item-anatomy.js";
 function formatNumber(value, options = {}) {
+  var _a;
   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);
+  let safePrecision = precision;
+  if (precision != null) {
+    const rounded = Math.round(precision);
+    if (rounded !== precision || precision < 0 || precision > 6) {
+      if (typeof process !== "undefined" && ((_a = process.env) == null ? void 0 : _a.NODE_ENV) !== "production") {
+        console.warn(`[DS] NumberInput precision ${precision} 超出 canonical 範圍 0-6(或非整數)→ clamp。請傳 0-6 整數。`);
+      }
+    }
+    safePrecision = Math.min(20, Math.max(0, rounded));
+  }
+  const formatted = safePrecision != null ? value.toLocaleString(locale, { minimumFractionDigits: safePrecision, maximumFractionDigits: safePrecision }) : value.toLocaleString(locale);
   return `${prefix}${formatted}${suffix}`;
 }
 const NumberInput = React.forwardRef(
@@ -28,16 +39,20 @@ const NumberInput = React.forwardRef(
     disabled: disabledProp,
     readOnly,
     id: idProp,
+    onBlur: onBlurProp,
+    onKeyDown: onKeyDownProp,
     "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");
+    const error = useResolvedFieldInvalid(errorProp);
+    const size = useResolvedFieldSize(sizeProp);
+    const disabled = useResolvedFieldDisabled(disabledProp);
+    const variant = useResolvedFieldVariant(variantProp);
+    const resolvedMode = useResolvedFieldMode({ mode: modeProp, disabled, readOnly });
+    const emptyDisplay = useFieldEmptyDisplay();
+    const [draft, setDraft] = React.useState(null);
     if (resolvedMode !== "edit") {
       return /* @__PURE__ */ jsx(
         "div",
@@ -50,17 +65,19 @@ const NumberInput = React.forwardRef(
               className: cn(
                 "flex-1 min-w-0",
                 resolvedMode === "disabled" && "text-fg-disabled cursor-not-allowed",
-                value == null && "text-fg-muted"
+                // 2026-07-09 空值符號前景 + M24:fieldEmptyColorClass = disabled→fg-disabled / else→foreground(同 readonly value 色)
+                value == null && fieldEmptyColorClass(resolvedMode)
               ),
-              children: value == null ? EMPTY_DISPLAY : formatNumber(value, { precision, prefix, suffix, locale })
+              children: value == null ? emptyDisplay : formatNumber(value, { precision, prefix, suffix, locale })
             }
           )
         }
       );
     }
     const handleChange = (e) => {
-      if (!onChange) return;
       const raw = e.target.value;
+      setDraft(raw);
+      if (!onChange) return;
       if (raw === "" || raw === "-") {
         onChange(null);
         return;
@@ -74,11 +91,7 @@ const NumberInput = React.forwardRef(
       "div",
       {
         className: cn(
-          fieldWrapperStyles({ mode: "edit", variant, size }),
-          error && [
-            "border-error hover:border-error-hover",
-            "focus-within:border-error focus-within:hover:border-error"
-          ],
+          fieldWrapperStyles({ mode: "edit", variant, size, error }),
           className
         ),
         "data-field-mode": "edit",
@@ -91,8 +104,16 @@ const NumberInput = React.forwardRef(
               type: "text",
               inputMode: "decimal",
               id: idProp ?? (fieldCtx == null ? void 0 : fieldCtx.id),
-              value: value ?? "",
+              value: draft ?? (value != null ? String(value) : ""),
               onChange: handleChange,
+              onBlur: (e) => {
+                setDraft(null);
+                onBlurProp == null ? void 0 : onBlurProp(e);
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === "Escape") setDraft(null);
+                onKeyDownProp == null ? void 0 : onKeyDownProp(e);
+              },
               "aria-invalid": error || void 0,
               "aria-required": (fieldCtx == null ? void 0 : fieldCtx.required) || void 0,
               "aria-describedby": ariaDescribedByProp ?? (fieldCtx == null ? void 0 : fieldCtx.descriptionId),
@@ -116,7 +137,8 @@ const numberInputMeta = {
   family: 4,
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  // 'active' 移除 — Field chrome 無按壓態;stepper 按壓屬內嵌 ItemInlineActionButton(2026-07-07 詞彙統一 DS-wide 按壓訊號盤點:檔內 0 active: utility / 0 *-active token)。
+  states: ["default", "hover", "focus-visible", "disabled"],
   tokens: {
     bg: [],
     fg: ["text-fg-disabled", "text-fg-muted"],

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

@@ -1 +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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"}
+{"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, FieldVariantInternal } from '@/design-system/components/Field/field-types'\nimport type { InlineActionConfig } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { fieldWrapperStyles, bareInputStyles } from '@/design-system/components/Field/field-wrapper'\nimport { useFieldEmptyDisplay, fieldEmptyColorClass } from '@/design-system/components/Field/field-context'\nimport { useFieldContext, useResolvedFieldSize, useResolvedFieldDisabled, useResolvedFieldMode, useResolvedFieldVariant, useResolvedFieldInvalid } 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  // 2026-07-18 決策4:precision guard —— 負數/小數/超界進 Intl.NumberFormat 會 RangeError(crash)。\n  //   clamp 回合法 Intl 範圍 [0,20](spec canonical ≤6);超界 dev-warn。維持 number 型別(對齊世界級 4 家)。\n  let safePrecision = precision\n  if (precision != null) {\n    const rounded = Math.round(precision)\n    if (rounded !== precision || precision < 0 || precision > 6) {\n      if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {\n        console.warn(`[DS] NumberInput precision ${precision} 超出 canonical 範圍 0-6(或非整數)→ clamp。請傳 0-6 整數。`)\n      }\n    }\n    safePrecision = Math.min(20, Math.max(0, rounded))\n  }\n  const formatted = safePrecision != null\n    ? value.toLocaleString(locale, { minimumFractionDigits: safePrecision, maximumFractionDigits: safePrecision })\n    : value.toLocaleString(locale)\n  return `${prefix}${formatted}${suffix}`\n}\n\n// Phase B1(2026-05-05):NumberInputDisplay 退場。\n// 改用 `<NumberInput mode=\"view\" value={...} prefix={...} ... />`,format 邏輯在 mode='view' 分支重用。\n\n// ── Types ───────────────────────────────────────────────────────────────────\n\nexport interface NumberInputProps\n  // `defaultValue` 一併 Omit(2026-07-14 dim-26):number-input.spec.md「controlled-only,不支援\n  // defaultValue」宣稱的型別面機械封鎖 — 原本仍在型別 surface 且經 {...props} spread 到已\n  // controlled 的 input(React value/defaultValue dev warning)。與 LinkInput(link-input.tsx)同款。\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'defaultValue' | 'onChange' | 'type'>,\n    Omit<VariantProps<typeof fieldWrapperStyles>, 'mode' | 'variant' | 'width'>,\n    NumberFormatOptions {\n  /** Field mode */\n  mode?: FieldMode\n  /**\n   * Visual chrome(正交於 mode);Phase B1(2026-05-05)新增。\n   * - `'default'`(預設)— 完整 Field wrapper chrome。\n   * (2026-07-09 `bare` variant 退役;naked = cell-as-input substrate,@internal)\n   *\n   * 透傳:在 `<Field variant=\"default\">` 內自動繼承 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      onBlur: onBlurProp,\n      onKeyDown: onKeyDownProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-errormessage': ariaErrorMessageProp,\n      ...props\n    },\n    ref\n  ) => {\n    const fieldCtx = useFieldContext()\n    const error = useResolvedFieldInvalid(errorProp)\n    const size = useResolvedFieldSize(sizeProp)\n    const disabled = useResolvedFieldDisabled(disabledProp)\n    // chrome 透傳:per-prop override context;context 沒值則 'default'\n    const variant: FieldVariantInternal = useResolvedFieldVariant(variantProp)\n    // 2026-06-08 SSOT:mode 經 useResolvedFieldMode 統一解析(prop > 有效 disabled > fieldCtx.mode > readOnly > 'edit')\n    const resolvedMode: FieldMode = useResolvedFieldMode({ mode: modeProp, disabled, readOnly })\n    const emptyDisplay = useFieldEmptyDisplay()\n\n    // 2026-07-05 D4 draft state:controlled value 回寫會吃掉輸入中間態('-'、'1.'、'0.0' 等\n    // parse 後 lossy 的 raw 字串)— 例:已有值 5 全選打「-」→ onChange(null) 回寫把 DOM 重設\n    // 為空,負號被吃、無法打出 -5。修法對齊 Ant InputNumber / Adobe Spectrum NumberField 的\n    // internal draft string canonical:輸入期間 DOM 顯示以 local draft 優先,parse 成功即時同步\n    // onChange(parsed);blur / Enter commit 清 draft、顯示回 committed value;Escape 棄未提交\n    // raw draft 字串、顯示回 committed value(NumberInput 為 live-commit:每次合法 parse 即\n    // onChange,故非回復 pre-edit 原值 — 真 revert 需另存 pre-edit snapshot,屬 API 擴充)。\n    // 宣告於 non-edit early return 之前(Rules-of-Hooks,\n    // 同 LinkInput 2026-07-04 修法)。\n    const [draft, setDraft] = React.useState<string | null>(null)\n\n    // view / 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              // 2026-07-09 空值符號前景 + M24:fieldEmptyColorClass = disabled→fg-disabled / else→foreground(同 readonly value 色)\n              value == null && fieldEmptyColorClass(resolvedMode),\n            )}\n          >\n            {value == null ? emptyDisplay : formatNumber(value, { precision, prefix, suffix, locale })}\n          </span>\n        </div>\n      )\n    }\n\n    // edit 模式:raw 數值輸入(draft 承載中間態;value 面語意不變 — ''/'-' 視為空、NaN 忽略)\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const raw = e.target.value\n      setDraft(raw)\n      if (!onChange) return\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, error }),\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          // 輸入期間 draft(raw 字串)優先;非輸入期間才從 value prop 同步顯示(2026-07-05 D4)\n          value={draft ?? (value != null ? String(value) : '')}\n          onChange={handleChange}\n          // blur / Enter = commit(清 draft,顯示回 committed value);Escape 棄 draft\n          onBlur={(e) => { setDraft(null); onBlurProp?.(e) }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter' || e.key === 'Escape') setDraft(null)\n            onKeyDownProp?.(e)\n          }}\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  // 'active' 移除 — Field chrome 無按壓態;stepper 按壓屬內嵌 ItemInlineActionButton(2026-07-07 詞彙統一 DS-wide 按壓訊號盤點:檔內 0 active: utility / 0 *-active token)。\n  states: ['default', 'hover', '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":";;;;;;AAuBA,SAAS,aACP,OACA,UAA+B,IACvB;;AACR,MAAI,SAAS,KAAM,QAAO;AAC1B,QAAM,EAAE,WAAW,SAAS,IAAI,SAAS,IAAI,SAAS,YAAY;AAGlE,MAAI,gBAAgB;AACpB,MAAI,aAAa,MAAM;AACrB,UAAM,UAAU,KAAK,MAAM,SAAS;AACpC,QAAI,YAAY,aAAa,YAAY,KAAK,YAAY,GAAG;AAC3D,UAAI,OAAO,YAAY,iBAAe,aAAQ,QAAR,mBAAa,cAAa,cAAc;AAC5E,gBAAQ,KAAK,8BAA8B,SAAS,8CAA8C;AAAA,MACpG;AAAA,IACF;AACA,oBAAgB,KAAK,IAAI,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC;AAAA,EACnD;AACA,QAAM,YAAY,iBAAiB,OAC/B,MAAM,eAAe,QAAQ,EAAE,uBAAuB,eAAe,uBAAuB,cAAA,CAAe,IAC3G,MAAM,eAAe,MAAM;AAC/B,SAAO,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM;AACvC;AA2CA,MAAM,cAAc,MAAM;AAAA,EACxB,CACE;AAAA,IACE,MAAM;AAAA,IACN,SAAS;AAAA,IACT,OAAO,YAAY;AAAA,IACnB,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,oBAAoB;AAAA,IACpB,qBAAqB;AAAA,IACrB,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,WAAW,gBAAA;AACjB,UAAM,QAAQ,wBAAwB,SAAS;AAC/C,UAAM,OAAO,qBAAqB,QAAQ;AAC1C,UAAM,WAAW,yBAAyB,YAAY;AAEtD,UAAM,UAAgC,wBAAwB,WAAW;AAEzE,UAAM,eAA0B,qBAAqB,EAAE,MAAM,UAAU,UAAU,UAAU;AAC3F,UAAM,eAAe,qBAAA;AAWrB,UAAM,CAAC,OAAO,QAAQ,IAAI,MAAM,SAAwB,IAAI;AAG5D,QAAI,iBAAiB,QAAQ;AAC3B,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,GAAG,mBAAmB,EAAE,MAAM,cAAc,SAAkB,MAAM,GAAG,SAAS;AAAA,UAC3F,mBAAiB;AAAA,UAEjB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,iBAAiB,cAAc;AAAA;AAAA,gBAE/B,SAAS,QAAQ,qBAAqB,YAAY;AAAA,cAAA;AAAA,cAGnD,UAAA,SAAS,OAAO,eAAe,aAAa,OAAO,EAAE,WAAW,QAAQ,QAAQ,OAAA,CAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QAC3F;AAAA,MAAA;AAAA,IAGN;AAGA,UAAM,eAAe,CAAC,MAA2C;AAC/D,YAAM,MAAM,EAAE,OAAO;AACrB,eAAS,GAAG;AACZ,UAAI,CAAC,SAAU;AACf,UAAI,QAAQ,MAAM,QAAQ,KAAK;AAC7B,iBAAS,IAAI;AACb;AAAA,MACF;AACA,YAAM,SAAS,OAAO,GAAG;AACzB,UAAI,CAAC,OAAO,MAAM,MAAM,GAAG;AACzB,iBAAS,MAAM;AAAA,MACjB;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT,mBAAmB,EAAE,MAAM,QAAQ,SAAkB,MAAM,OAAO;AAAA,UAClE;AAAA,QAAA;AAAA,QAEF,mBAAgB;AAAA,QAChB,cAAY,QAAQ,KAAK;AAAA,QAEzB,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,MAAK;AAAA,cACL,WAAU;AAAA,cACV,IAAI,WAAU,qCAAU;AAAA,cAExB,OAAO,UAAU,SAAS,OAAO,OAAO,KAAK,IAAI;AAAA,cACjD,UAAU;AAAA,cAEV,QAAQ,CAAC,MAAM;AAAE,yBAAS,IAAI;AAAG,yDAAa;AAAA,cAAG;AAAA,cACjD,WAAW,CAAC,MAAM;AAChB,oBAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,mBAAmB,IAAI;AAC1D,+DAAgB;AAAA,cAClB;AAAA,cACA,gBAAc,SAAS;AAAA,cACvB,kBAAe,qCAAU,aAAY;AAAA,cACrC,oBAAkB,wBAAuB,qCAAU;AAAA,cACnD,qBAAmB,yBAAyB,QAAQ,qCAAU,UAAU;AAAA,cACxE,WAAW;AAAA,cACV,GAAG;AAAA,YAAA;AAAA,UAAA;AAAA,UAEL;AAAA;AAAA,YAEC;AAAA,cACE,gCACD,kBAAA,EAAiB,QAAQ,WAAW,MAAM,QAAQ,MAAM,IACvD;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AACA,YAAY,cAAc;AAKnB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA;AAAA,EAIP,QAAQ,CAAC,WAAW,SAAS,iBAAiB,UAAU;AAAA,EACxD,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAC,oBAAoB,eAAe;AAAA,IACxC,MAAM,CAAA;AAAA,EAAC;AAEX;"}

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

@@ -1,3 +1,7 @@
+/**
+ * @internal — DS-internal 單元(per `packages/design-system/ds-canonical/rules/ui-development.md` Public vs Internal canonical;spec frontmatter `isInternal`)。
+ * 不進 root barrel front-door;由 Combobox / PeoplePicker 等 DS 元件 wrap 消費,end-user app 請用 wrapper 元件。
+ */
 import * as React from 'react';
 export interface OverflowIndicatorProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
     count: number;
@@ -9,10 +13,10 @@ export interface OverflowIndicatorProps extends Omit<React.HTMLAttributes<HTMLSp
 declare const OverflowIndicator: React.ForwardRefExoticComponent<OverflowIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
 export declare const overflowIndicatorMeta: {
     readonly component: "OverflowIndicator";
-    readonly family: null;
+    readonly family: "self-contained";
     readonly variants: {};
     readonly sizes: {};
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default", "focus-visible"];
     readonly tokens: {
         readonly bg: readonly ["bg-muted"];
         readonly fg: readonly ["text-foreground"];

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

@@ -1 +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"}
+{"version":3,"file":"overflow-indicator.d.ts","sourceRoot":"","sources":["../../../src/components/OverflowIndicator/overflow-indicator.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,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,gGAwDtB,CAAA;AAKD,eAAO,MAAM,qBAAqB;;;;;;;;;;;CAgBxB,CAAA;AAEV,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

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

@@ -3,7 +3,7 @@ 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";
+import { MOTION_DELAY_CLOSE_MS, MOTION_DELAY_PLAIN_MS } from "../../tokens/motion/motion.js";
 const triggerSize = {
   sm: "h-5 min-w-5",
   md: "h-6 min-w-6",
@@ -58,7 +58,8 @@ const OverflowIndicator = React.forwardRef(
       {
         ref,
         "data-overflow-indicator": "",
-        className: cn(tagVariants({ color: "neutral", size }), "cursor-default", className),
+        tabIndex: 0,
+        className: cn(tagVariants({ color: "neutral", size }), "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1", className),
         ...props,
         children: /* @__PURE__ */ jsxs("span", { className: "px-1", children: [
           "+",
@@ -70,9 +71,11 @@ const OverflowIndicator = React.forwardRef(
       {
         ref,
         "data-overflow-indicator": "",
+        tabIndex: 0,
         className: cn(
           "shrink-0 rounded-full inline-grid place-content-center",
-          "bg-muted text-foreground font-medium leading-none cursor-default",
+          "bg-muted text-foreground font-medium leading-none cursor-pointer",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
           triggerSize[size],
           triggerText[size],
           className
@@ -84,7 +87,7 @@ const OverflowIndicator = React.forwardRef(
         ]
       }
     );
-    return /* @__PURE__ */ jsxs(HoverCard, { openDelay: HOVER_DELAY_RICH_MS, closeDelay: HOVER_DELAY_CLOSE_MS, children: [
+    return /* @__PURE__ */ jsxs(HoverCard, { openDelay: MOTION_DELAY_PLAIN_MS, closeDelay: MOTION_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 }) })
     ] });
@@ -93,11 +96,12 @@ const OverflowIndicator = React.forwardRef(
 OverflowIndicator.displayName = "OverflowIndicator";
 const overflowIndicatorMeta = {
   component: "OverflowIndicator",
-  family: null,
-  // non-family composite / overlay / layout
+  family: "self-contained",
+  // 對齊 overflow-indicator.spec.md frontmatter family: self-contained(SSOT)
   variants: {},
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  // 2026-07-04 audit 對齊(spec:95「本身無 hover / active / disabled / selected 變化」;code 有 focus-visible ring tsx:106/121)
+  states: ["default", "focus-visible"],
   tokens: {
     bg: ["bg-muted"],
     fg: ["text-foreground"],

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

@@ -1 +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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"}
+{"version":3,"file":"overflow-indicator.js","sources":["../../../src/components/OverflowIndicator/overflow-indicator.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;由 Combobox / PeoplePicker 等 DS 元件 wrap 消費,end-user app 請用 wrapper 元件。\n */\nimport * 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 { MOTION_DELAY_PLAIN_MS, MOTION_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    // a11y(2026-07-14 dim-6):拆 role=\"button\" + aria-haspopup=\"dialog\" —— trigger 無\n    // activation 行為(無 Enter/Space handler,HoverCard 靠 hover/focus 自動開),宣告了\n    // button/haspopup 卻按 Enter 無反應 = 對 AT 空承諾。對齊 Avatar hoverCard 同款拆除\n    // (avatar.tsx 2026-07-06 + hover-card.spec.md「A11y 預設」:Radix 官方零 role/aria 定位)。\n    // trigger 有可見 \"+N\" 文字,無需 aria-label / role;保留 tabIndex=0 + focus ring(WCAG 2.1.1)。\n    const trigger = shape === 'tag' ? (\n      <span\n        ref={ref}\n        data-overflow-indicator=\"\"\n        tabIndex={0}\n        className={cn(tagVariants({ color: 'neutral', size }), 'cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1', className)}\n        {...props}\n      >\n        <span className=\"px-1\">+{count}</span>\n      </span>\n    ) : (\n      <span\n        ref={ref}\n        data-overflow-indicator=\"\"\n        tabIndex={0}\n        className={cn(\n          'shrink-0 rounded-full inline-grid place-content-center',\n          'bg-muted text-foreground font-medium leading-none cursor-pointer',\n          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\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    // plain tier(純列表展開、無 fetch)= MOTION_DELAY_PLAIN_MS,per motion.spec.md 對照表 row;\n    // close = MOTION_DELAY_CLOSE_MS。2026-06-11 修:2026-05-18 token 遷移誤挑 rich(原 hardcode 200/300\n    // 兩 tier 皆非,遷移未對照 spec 表)— popup 可互動性由 close 緩衝保障,與 open tier 無關。\n    return (\n      <HoverCard openDelay={MOTION_DELAY_PLAIN_MS} closeDelay={MOTION_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: 'self-contained', // 對齊 overflow-indicator.spec.md frontmatter family: self-contained(SSOT)\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  // 2026-07-04 audit 對齊(spec:95「本身無 hover / active / disabled / selected 變化」;code 有 focus-visible ring tsx:106/121)\n  states: ['default', 'focus-visible'],\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/Pagination/index.d.ts

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

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

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

package/dist/components/Pagination/index.js

@@ -0,0 +1,6 @@
+import { Pagination, paginationMeta } from "./pagination.js";
+export {
+  Pagination,
+  paginationMeta
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/Pagination/pagination.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+export interface PaginationProps extends React.ComponentPropsWithoutRef<'nav'> {
+    /** 資料總筆數(Ant `total` 同款資料模型;<= 0 不渲染)。總頁數 = ceil(total / pageSize) 內部推導。 */
+    total: number;
+    /** 每頁筆數(controlled;搭配 onPageSizeChange)。不傳 = uncontrolled(defaultPageSize 起始)。 */
+    pageSize?: number;
+    /** uncontrolled 每頁筆數初始值(預設 20)。 */
+    defaultPageSize?: number;
+    /** 當前頁(1-based,controlled)。不傳 = uncontrolled(defaultPage 起始)。越界防禦性 clamp。 */
+    page?: number;
+    /** uncontrolled 初始頁(1-based,預設 1)。 */
+    defaultPage?: number;
+    /** 換頁 callback(1-based)。URL 同步在此接 router,不把按鈕換 <a>。每頁筆數變更時自動回第 1 頁並 fire。 */
+    onPageChange?: (page: number) => void;
+    /** 每頁筆數變更 callback。 */
+    onPageSizeChange?: (pageSize: number) => void;
+    /** 完整形態:左側顯示「第 x–y 筆,共 N 筆」range 資訊(Ant showTotal / MUI / Carbon 同款,opt-in)。 */
+    showTotal?: boolean;
+    /** 完整形態:頁碼右側渲染「N 筆/頁」選單(消費 Select sm;Ant showSizeChanger 同款,opt-in)。 */
+    pageSizeOptions?: number[];
+    /** 上一頁按鈕 aria-label(iconOnly 必有名)。 */
+    prevAriaLabel?: string;
+    /** 下一頁按鈕 aria-label。 */
+    nextAriaLabel?: string;
+}
+/**
+ * Pagination —— 大量資料切頁後的位置導覽(數字頁碼派,2026-07-05 user 拍板)。
+ *
+ * 本元件是分頁的**完整功能 SSOT**(2026-07-06 user 拍板):頁碼 + 總筆數資訊(showTotal)
+ * + 每頁筆數選單(pageSizeOptions)全部 own 在此;完整形態 layout =「資訊左、操作右」
+ * (Ant 源碼結構同款:total 文字最左、size changer 最右)。DataTable 等 consumer 轉發
+ * config 消費本元件,不自拼分頁列。與虛擬滾動互斥。詳 ./pagination.spec.md。
+ */
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLElement>>;
+export declare const paginationMeta: {
+    readonly component: "Pagination";
+    readonly family: null;
+    readonly variants: {};
+    readonly sizes: {};
+    readonly states: readonly ["default", "hover", "active", "selected", "focus-visible", "disabled"];
+    readonly tokens: {
+        readonly bg: readonly ["bg-surface", "bg-neutral-hover", "bg-neutral-active"];
+        readonly fg: readonly ["text-foreground", "text-primary", "text-primary-hover", "text-primary-active", "text-fg-muted", "text-fg-secondary", "text-fg-disabled"];
+        readonly border: readonly ["border-primary", "border-primary-hover", "border-primary-active"];
+        readonly ring: readonly ["ring-ring"];
+    };
+};
+export { Pagination };
+//# sourceMappingURL=pagination.d.ts.map

package/dist/components/Pagination/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/pagination.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAgD9B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IAC5E,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAA;IACb,kFAAkF;IAClF,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,mCAAmC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6EAA6E;IAC7E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,uBAAuB;IACvB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,gFAAgF;IAChF,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,wEAAwE;IACxE,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,wBAAwB;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,UAAU,qFAqJf,CAAA;AAGD,eAAO,MAAM,cAAc;;;;;;;;;;;;CAgBjB,CAAA;AAEV,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/components/Pagination/pagination.js

@@ -0,0 +1,182 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronLeft, MoreHorizontal, ChevronRight } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../Button/button.js";
+import { Select } from "../Select/select.js";
+import { useControllable } from "../../hooks/use-controllable.js";
+const BOUNDARY_COUNT = 1;
+const SIBLING_COUNT = 1;
+function getPaginationRange(page, totalPages) {
+  const range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
+  if (totalPages <= BOUNDARY_COUNT * 2 + SIBLING_COUNT * 2 + 3) return range(1, totalPages);
+  const startPages = range(1, BOUNDARY_COUNT);
+  const endPages = range(totalPages - BOUNDARY_COUNT + 1, totalPages);
+  const siblingsStart = Math.max(
+    Math.min(page - SIBLING_COUNT, totalPages - BOUNDARY_COUNT - SIBLING_COUNT * 2 - 1),
+    BOUNDARY_COUNT + 2
+  );
+  const siblingsEnd = Math.min(
+    Math.max(page + SIBLING_COUNT, BOUNDARY_COUNT + SIBLING_COUNT * 2 + 2),
+    totalPages - BOUNDARY_COUNT - 1
+  );
+  return [
+    ...startPages,
+    ...siblingsStart > BOUNDARY_COUNT + 2 ? ["ellipsis-start"] : [BOUNDARY_COUNT + 1],
+    ...range(siblingsStart, siblingsEnd),
+    ...siblingsEnd < totalPages - BOUNDARY_COUNT - 1 ? ["ellipsis-end"] : [totalPages - BOUNDARY_COUNT],
+    ...endPages
+  ];
+}
+const Pagination = React.forwardRef(
+  ({
+    total,
+    pageSize: pageSizeProp,
+    defaultPageSize = 20,
+    page: pageProp,
+    defaultPage = 1,
+    onPageChange,
+    onPageSizeChange,
+    showTotal = false,
+    pageSizeOptions,
+    prevAriaLabel = "上一頁",
+    // i18n-allow: DS default; consumer override via prop(precedent calendar.tsx)
+    nextAriaLabel = "下一頁",
+    // i18n-allow: DS default; consumer override via prop
+    className,
+    ...props
+  }, ref) => {
+    const [pageSize, setPageSize] = useControllable({
+      value: pageSizeProp,
+      defaultValue: defaultPageSize,
+      onChange: onPageSizeChange
+    });
+    const [page, setPage] = useControllable({
+      value: pageProp,
+      defaultValue: defaultPage,
+      onChange: onPageChange
+    });
+    if (total <= 0) return null;
+    const safePageSize = Math.max(1, Math.floor(pageSize));
+    const totalPages = Math.max(1, Math.ceil(total / safePageSize));
+    const current = Math.min(Math.max(page, 1), totalPages);
+    const slots = getPaginationRange(current, totalPages);
+    const hasSizeChanger = !!pageSizeOptions && pageSizeOptions.length > 0;
+    const hasExtras = showTotal || hasSizeChanger;
+    const rangeStart = (current - 1) * safePageSize + 1;
+    const rangeEnd = Math.min(current * safePageSize, total);
+    const sizeOptions = hasSizeChanger ? pageSizeOptions.includes(safePageSize) ? pageSizeOptions : [safePageSize, ...pageSizeOptions] : [];
+    const pageList = /* @__PURE__ */ jsxs("ul", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "text",
+          size: "sm",
+          iconOnly: true,
+          startIcon: ChevronLeft,
+          "aria-label": prevAriaLabel,
+          disabled: current <= 1,
+          onClick: () => setPage(current - 1)
+        }
+      ) }),
+      slots.map(
+        (slot) => typeof slot === "number" ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: slot === current ? "secondary" : "text",
+            size: "sm",
+            "aria-current": slot === current ? "page" : void 0,
+            className: "min-w-[var(--field-height-sm)] px-1 justify-center tabular-nums",
+            onClick: () => setPage(slot),
+            children: slot
+          }
+        ) }, slot) : (
+          // Ellipsis 純指示不可點(MUI / shadcn 同;Ant 為可點 jump-5 派,見 spec);寬度對齊數字鈕保持節奏
+          /* @__PURE__ */ jsx(
+            "li",
+            {
+              "aria-hidden": true,
+              className: "flex min-w-[var(--field-height-sm)] items-center justify-center",
+              children: /* @__PURE__ */ jsx(MoreHorizontal, { size: 16, className: "text-fg-muted" })
+            },
+            slot
+          )
+        )
+      ),
+      /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "text",
+          size: "sm",
+          iconOnly: true,
+          startIcon: ChevronRight,
+          "aria-label": nextAriaLabel,
+          disabled: current >= totalPages,
+          onClick: () => setPage(current + 1)
+        }
+      ) })
+    ] });
+    return /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        ref,
+        "aria-label": "Pagination",
+        className: cn(
+          "flex items-center",
+          // 完整形態 =「資訊左、操作右」(Ant 源碼結構:total 文字最左 li、size changer 最右 li)
+          hasExtras && "w-full justify-between gap-[var(--layout-space-tight)]",
+          className
+        ),
+        ...props,
+        children: [
+          hasExtras && // i18n-allow: DS default(range 格式 = Ant/MUI/Carbon 共識);showTotal=false 時渲染
+          // 空 span 佔 justify-between 左位,不含 stray 文字節點
+          /* @__PURE__ */ jsx("span", { className: "text-body text-fg-secondary", children: showTotal ? `第 ${rangeStart}–${rangeEnd} 筆,共 ${total} 筆` : null }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--layout-space-tight)]", children: [
+            pageList,
+            hasSizeChanger && /* @__PURE__ */ jsx(
+              Select,
+              {
+                size: "sm",
+                "aria-label": "每頁筆數",
+                className: "w-28",
+                value: String(safePageSize),
+                onChange: (v) => {
+                  const next = Number(v);
+                  if (!Number.isFinite(next) || next <= 0 || next === safePageSize) return;
+                  setPageSize(next);
+                  setPage(1);
+                },
+                options: sizeOptions.map((n) => ({ value: String(n), label: `${n} 筆/頁` }))
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+Pagination.displayName = "Pagination";
+const paginationMeta = {
+  component: "Pagination",
+  family: null,
+  // non-family composite(nav 橫排 control row;按鈕消費 Family 3 Button Pill)
+  variants: {},
+  // 單一尺寸(按鈕固定 Button sm;無 size 軸)—— 頁碼列是 chrome 級導覽不隨 Field 密度縮放,
+  // spec「SizeMatrix N/A rationale」段有完整理由
+  sizes: {},
+  // 'selected' = 當前頁(語意由 aria-current="page" 承載;2026-07-07 meta 詞彙統一:持續選中一律 'selected')
+  states: ["default", "hover", "active", "selected", "focus-visible", "disabled"],
+  tokens: {
+    // bg:未選/上下頁(Button text)hover 灰底 + active 深一階;當前頁(secondary)bg-surface
+    bg: ["bg-surface", "bg-neutral-hover", "bg-neutral-active"],
+    fg: ["text-foreground", "text-primary", "text-primary-hover", "text-primary-active", "text-fg-muted", "text-fg-secondary", "text-fg-disabled"],
+    border: ["border-primary", "border-primary-hover", "border-primary-active"],
+    ring: ["ring-ring"]
+  }
+};
+export {
+  Pagination,
+  paginationMeta
+};
+//# sourceMappingURL=pagination.js.map

package/dist/components/Pagination/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","sources":["../../../src/components/Pagination/pagination.tsx"],"sourcesContent":["// ────────────────────────────── 消費的 SSOT ──────────────────────────────\n// - Button:../Button/button.tsx —— 全部按鈕純 variant 組裝零視覺客製(2026-07-06 user 抓出):\n//   上下頁 = text iconOnly / 未選數字 = text / 當前頁 = secondary(rest primary 描邊染字不染底、\n//   hover 升 hover 階、active 深一階 —— 與 semantic.css「選中」canonical + 拍板 #8 完全同拼寫);\n//   選中「語意」由 aria-current=\"page\" 承載(非 pressed —— pressed 是可取消 toggle,當前頁不可取消)\n// - Select(size=\"sm\"):../Select/select.tsx —— 完整形態的「N 筆/頁」選單\n// - Ellipsis icon:MoreHorizontal(packages/design-system/ds-canonical/rules/ui-development.md「Icon canonical」)\n// - DOM 骨架:shadcn Pagination(nav > ul > li + aria-current=\"page\");\n//   controlled 事件驅動 + total/pageSize 資料模型對齊 Ant Pagination(2026-07-06 user 拍板:\n//   Pagination 本體 = 完整功能 SSOT —— showTotal / 每頁筆數皆本元件 own,Table 轉發 config 消費)\n// 設計規則:./pagination.spec.md\nimport * as React from 'react'\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/design-system/components/Button/button'\nimport { Select } from '@/design-system/components/Select/select'\nimport { useControllable } from '@/design-system/hooks/use-controllable'\n\n// MUI usePagination 預設同款(boundaryCount/siblingCount = 1/1)。內部常數不開 props(M21\n// 最小 API);未來若開放,命名必沿用 MUI siblingCount / boundaryCount。\n// 最大格位 = 首尾各 1 + 當前頁左右各 1 + 當前頁 + 2 顆 ellipsis = 7,超過即摺疊。\nconst BOUNDARY_COUNT = 1\nconst SIBLING_COUNT = 1\n\ntype PaginationSlot = number | 'ellipsis-start' | 'ellipsis-end'\n\n// 摺疊演算法照 MUI usePagination(1/1 配置);兩顆 ellipsis 用 distinct 穩定 key\n// (Breadcrumb Math.random key remount 前車之鑑,breadcrumb.tsx:208-210)。\nfunction getPaginationRange(page: number, totalPages: number): PaginationSlot[] {\n  const range = (start: number, end: number) =>\n    Array.from({ length: end - start + 1 }, (_, i) => start + i)\n\n  // 全部放得下(≤ 7 頁)→ 不摺疊\n  if (totalPages <= BOUNDARY_COUNT * 2 + SIBLING_COUNT * 2 + 3) return range(1, totalPages)\n\n  const startPages = range(1, BOUNDARY_COUNT)\n  const endPages = range(totalPages - BOUNDARY_COUNT + 1, totalPages)\n  const siblingsStart = Math.max(\n    Math.min(page - SIBLING_COUNT, totalPages - BOUNDARY_COUNT - SIBLING_COUNT * 2 - 1),\n    BOUNDARY_COUNT + 2,\n  )\n  const siblingsEnd = Math.min(\n    Math.max(page + SIBLING_COUNT, BOUNDARY_COUNT + SIBLING_COUNT * 2 + 2),\n    totalPages - BOUNDARY_COUNT - 1,\n  )\n\n  return [\n    ...startPages,\n    ...(siblingsStart > BOUNDARY_COUNT + 2\n      ? (['ellipsis-start'] as const)\n      : [BOUNDARY_COUNT + 1]),\n    ...range(siblingsStart, siblingsEnd),\n    ...(siblingsEnd < totalPages - BOUNDARY_COUNT - 1\n      ? (['ellipsis-end'] as const)\n      : [totalPages - BOUNDARY_COUNT]),\n    ...endPages,\n  ]\n}\n\nexport interface PaginationProps extends React.ComponentPropsWithoutRef<'nav'> {\n  /** 資料總筆數(Ant `total` 同款資料模型;<= 0 不渲染)。總頁數 = ceil(total / pageSize) 內部推導。 */\n  total: number\n  /** 每頁筆數(controlled;搭配 onPageSizeChange)。不傳 = uncontrolled(defaultPageSize 起始)。 */\n  pageSize?: number\n  /** uncontrolled 每頁筆數初始值(預設 20)。 */\n  defaultPageSize?: number\n  /** 當前頁(1-based,controlled)。不傳 = uncontrolled(defaultPage 起始)。越界防禦性 clamp。 */\n  page?: number\n  /** uncontrolled 初始頁(1-based,預設 1)。 */\n  defaultPage?: number\n  /** 換頁 callback(1-based)。URL 同步在此接 router,不把按鈕換 <a>。每頁筆數變更時自動回第 1 頁並 fire。 */\n  onPageChange?: (page: number) => void\n  /** 每頁筆數變更 callback。 */\n  onPageSizeChange?: (pageSize: number) => void\n  /** 完整形態:左側顯示「第 x–y 筆,共 N 筆」range 資訊(Ant showTotal / MUI / Carbon 同款,opt-in)。 */\n  showTotal?: boolean\n  /** 完整形態:頁碼右側渲染「N 筆/頁」選單(消費 Select sm;Ant showSizeChanger 同款,opt-in)。 */\n  pageSizeOptions?: number[]\n  /** 上一頁按鈕 aria-label(iconOnly 必有名)。 */\n  prevAriaLabel?: string\n  /** 下一頁按鈕 aria-label。 */\n  nextAriaLabel?: string\n}\n\n/**\n * Pagination —— 大量資料切頁後的位置導覽(數字頁碼派,2026-07-05 user 拍板)。\n *\n * 本元件是分頁的**完整功能 SSOT**(2026-07-06 user 拍板):頁碼 + 總筆數資訊(showTotal)\n * + 每頁筆數選單(pageSizeOptions)全部 own 在此;完整形態 layout =「資訊左、操作右」\n * (Ant 源碼結構同款:total 文字最左、size changer 最右)。DataTable 等 consumer 轉發\n * config 消費本元件,不自拼分頁列。與虛擬滾動互斥。詳 ./pagination.spec.md。\n */\nconst Pagination = React.forwardRef<HTMLElement, PaginationProps>(\n  (\n    {\n      total,\n      pageSize: pageSizeProp,\n      defaultPageSize = 20,\n      page: pageProp,\n      defaultPage = 1,\n      onPageChange,\n      onPageSizeChange,\n      showTotal = false,\n      pageSizeOptions,\n      prevAriaLabel = '上一頁', // i18n-allow: DS default; consumer override via prop(precedent calendar.tsx)\n      nextAriaLabel = '下一頁', // i18n-allow: DS default; consumer override via prop\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    // Hooks 必在 early return 之前(React #310 canonical,select.tsx:503 同慣例)\n    const [pageSize, setPageSize] = useControllable<number>({\n      value: pageSizeProp,\n      defaultValue: defaultPageSize,\n      onChange: onPageSizeChange,\n    })\n    const [page, setPage] = useControllable<number>({\n      value: pageProp,\n      defaultValue: defaultPage,\n      onChange: onPageChange,\n    })\n\n    // 無資料 → 不渲染(空狀態由 Empty / 列表層表達,詳 spec 邊界案例)\n    if (total <= 0) return null\n\n    // pageSize <= 0 防禦 clamp(consumer contract violation)——防 totalPages 變 Infinity/NaN\n    // 渲染垃圾格位(spec 邊界案例表有對應 row)\n    const safePageSize = Math.max(1, Math.floor(pageSize))\n    const totalPages = Math.max(1, Math.ceil(total / safePageSize))\n    const current = Math.min(Math.max(page, 1), totalPages)\n    const slots = getPaginationRange(current, totalPages)\n    const hasSizeChanger = !!pageSizeOptions && pageSizeOptions.length > 0\n    const hasExtras = showTotal || hasSizeChanger\n    const rangeStart = (current - 1) * safePageSize + 1\n    const rangeEnd = Math.min(current * safePageSize, total)\n    // 當前 pageSize 不在 options 內時補進清單頭(否則 Select trigger 顯示裸值失去「N 筆/頁」文案)\n    const sizeOptions = hasSizeChanger\n      ? (pageSizeOptions!.includes(safePageSize) ? pageSizeOptions! : [safePageSize, ...pageSizeOptions!])\n      : []\n\n    const pageList = (\n      <ul className=\"flex items-center gap-1\">\n        <li>\n          <Button\n            variant=\"text\"\n            size=\"sm\"\n            iconOnly\n            startIcon={ChevronLeft}\n            aria-label={prevAriaLabel}\n            disabled={current <= 1}\n            onClick={() => setPage(current - 1)}\n          />\n        </li>\n        {slots.map((slot) =>\n          typeof slot === 'number' ? (\n            <li key={slot}>\n              {/* 當前頁 = <Button variant=\"secondary\"> 一比一零客製(2026-07-06 user 抓出可純組裝):\n                  secondary 的 rest(primary 描邊+染字+不染底)/ hover(升 hover 階)/ active(深一階)\n                  與 semantic.css「選中」canonical + 拍板 #8 完全同拼寫,且無 neutral 灰底 hover —\n                  消費既有 variant 取代手寫平行拼寫(M17/M23 SSOT)。選中「語意」由 aria-current=\"page\"\n                  承載,Button 僅為視覺 host;未選 = text variant。className 只剩等寬幾何\n                  (蓋掉 size sm 的 min-w-14/px-3,方形 item 對齊 Ant;兩 variant 同 border 寬零位移)。 */}\n              <Button\n                variant={slot === current ? 'secondary' : 'text'}\n                size=\"sm\"\n                aria-current={slot === current ? 'page' : undefined}\n                className=\"min-w-[var(--field-height-sm)] px-1 justify-center tabular-nums\"\n                onClick={() => setPage(slot)}\n              >\n                {slot}\n              </Button>\n            </li>\n          ) : (\n            // Ellipsis 純指示不可點(MUI / shadcn 同;Ant 為可點 jump-5 派,見 spec);寬度對齊數字鈕保持節奏\n            <li\n              key={slot}\n              aria-hidden\n              className=\"flex min-w-[var(--field-height-sm)] items-center justify-center\"\n            >\n              <MoreHorizontal size={16} className=\"text-fg-muted\" />\n            </li>\n          ),\n        )}\n        <li>\n          <Button\n            variant=\"text\"\n            size=\"sm\"\n            iconOnly\n            startIcon={ChevronRight}\n            aria-label={nextAriaLabel}\n            disabled={current >= totalPages}\n            onClick={() => setPage(current + 1)}\n          />\n        </li>\n      </ul>\n    )\n\n    return (\n      <nav\n        ref={ref}\n        aria-label=\"Pagination\"\n        className={cn(\n          'flex items-center',\n          // 完整形態 =「資訊左、操作右」(Ant 源碼結構:total 文字最左 li、size changer 最右 li)\n          hasExtras && 'w-full justify-between gap-[var(--layout-space-tight)]',\n          className,\n        )}\n        {...props}\n      >\n        {hasExtras && (\n          // i18n-allow: DS default(range 格式 = Ant/MUI/Carbon 共識);showTotal=false 時渲染\n          // 空 span 佔 justify-between 左位,不含 stray 文字節點\n          <span className=\"text-body text-fg-secondary\">\n            {showTotal ? `第 ${rangeStart}–${rangeEnd} 筆,共 ${total} 筆` : null}\n          </span>\n        )}\n        <div className=\"flex items-center gap-[var(--layout-space-tight)]\">\n          {pageList}\n          {hasSizeChanger && (\n            <Select\n              size=\"sm\"\n              aria-label=\"每頁筆數\" // i18n-allow: DS default\n              className=\"w-28\"\n              value={String(safePageSize)}\n              onChange={(v) => {\n                const next = Number(v)\n                // 同值重選 / 非法值不動作——防「重選 20 筆/頁」誤把頁碼重置回第 1 頁\n                if (!Number.isFinite(next) || next <= 0 || next === safePageSize) return\n                setPageSize(next)\n                // 換每頁筆數回第 1 頁——MUI TablePagination / TanStack autoResetPageIndex 派;\n                // Ant 為 preserve-position(clamp)派,本 DS 採 reset-to-1(spec「完整形態」段有註記)\n                setPage(1)\n              }}\n              options={sizeOptions.map((n) => ({ value: String(n), label: `${n} 筆/頁` }))} // i18n-allow: DS default(Ant「20 / page」內嵌同款)\n            />\n          )}\n        </div>\n      </nav>\n    )\n  },\n)\nPagination.displayName = 'Pagination'\n\nexport const paginationMeta = {\n  component: 'Pagination',\n  family: null, // non-family composite(nav 橫排 control row;按鈕消費 Family 3 Button Pill)\n  variants: {},\n  // 單一尺寸(按鈕固定 Button sm;無 size 軸)—— 頁碼列是 chrome 級導覽不隨 Field 密度縮放,\n  // spec「SizeMatrix N/A rationale」段有完整理由\n  sizes: {},\n  // 'selected' = 當前頁(語意由 aria-current=\"page\" 承載;2026-07-07 meta 詞彙統一:持續選中一律 'selected')\n  states: ['default', 'hover', 'active', 'selected', 'focus-visible', 'disabled'],\n  tokens: {\n    // bg:未選/上下頁(Button text)hover 灰底 + active 深一階;當前頁(secondary)bg-surface\n    bg: ['bg-surface', 'bg-neutral-hover', 'bg-neutral-active'],\n    fg: ['text-foreground', 'text-primary', 'text-primary-hover', 'text-primary-active', 'text-fg-muted', 'text-fg-secondary', 'text-fg-disabled'],\n    border: ['border-primary', 'border-primary-hover', 'border-primary-active'],\n    ring: ['ring-ring'],\n  },\n} as const\n\nexport { Pagination }\n"],"names":[],"mappings":"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"}