@qijenchen/design-system 0.1.0-beta.10

package/dist/components/FileItem/file-item.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+export interface FileItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    name: string;
+    /**
+     * 兩種呈現 mode（精簡 vs 完整）：
+     * - `compact`（預設）：paperclip + filename 單行 inline
+     * - `rich`：縮圖 + 檔名 + size + status + progress 的完整 card 呈現
+     */
+    mode?: 'compact' | 'rich';
+    status?: 'uploading' | 'completed' | 'error';
+    progress?: number;
+    /** rich mode: 檔案大小、狀態訊息。compact: 只有 error 才顯示。 ReactNode 支援 inline clickable link(如「View log」)。 */
+    description?: React.ReactNode;
+    thumbnailSrc?: string;
+    actions?: React.ReactNode;
+    onClick?: () => void;
+    /**
+     * Hover 動作(passive 狀態 icon 變互動 button 的 UX):
+     * - `onDownload`:有值時,`status="completed"` 的綠 ✓ icon 在 row hover 時
+     *   換成 Download ↓ button;click 觸發 onDownload。無值保持 passive 綠 ✓。
+     * - `onRetry`:有值時,`status="error"` 的紅 ✗ icon 在 row hover 時換成 RotateCw ⟲
+     *   button;click 觸發 onRetry。無值保持 passive 紅 ✗。
+     *
+     * 世界級對照:Gmail / Slack / Dropbox 附件的 passive 狀態 → hover 變 action
+     * 的 UX,使用者知道檔案狀態且能立即行動。
+     */
+    onDownload?: () => void;
+    onRetry?: () => void;
+}
+declare const FileItem: React.ForwardRefExoticComponent<FileItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const fileItemMeta: {
+    readonly component: "FileItem";
+    readonly family: 2;
+    readonly variants: {};
+    readonly sizes: {};
+    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly tokens: {
+        readonly bg: readonly ["bg-neutral-hover", "bg-secondary", "bg-surface"];
+        readonly fg: readonly ["text-fg-muted", "text-fg-secondary"];
+        readonly ring: readonly [];
+    };
+};
+export { FileItem };
+//# sourceMappingURL=file-item.d.ts.map

package/dist/components/FileItem/file-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-item.d.ts","sourceRoot":"","sources":["../../../src/components/FileItem/file-item.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AA6C9B,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACxF,IAAI,EAAE,MAAM,CAAA;IACZ;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IACzB,MAAM,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,OAAO,CAAA;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,mGAAmG;IACnG,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAGD,QAAA,MAAM,QAAQ,sFA+Nb,CAAA;AAKD,eAAO,MAAM,YAAY;;;;;;;;;;;CAef,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/FileItem/file-item.js

@@ -0,0 +1,202 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Download, RotateCw, XCircle, CircleCheck, Paperclip } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Avatar } from "../Avatar/avatar.js";
+import { Button } from "../Button/button.js";
+import { ProgressBar } from "../ProgressBar/progress-bar.js";
+import { ItemPrefix, ItemContent } from "../../patterns/element-anatomy/item-anatomy.js";
+const STATUS_ICON = {
+  completed: { icon: CircleCheck, color: "text-success" },
+  error: { icon: XCircle, color: "text-error" }
+};
+const PROGRESS_STATUS_MAP = {
+  uploading: "inProgress",
+  completed: "success",
+  error: "error"
+};
+const AVATAR_SIZE = 48;
+const ICON_PX = 16;
+const FileItem = React.forwardRef(
+  ({
+    name,
+    mode = "compact",
+    status,
+    progress = 0,
+    description,
+    thumbnailSrc,
+    actions,
+    onClick,
+    onDownload,
+    onRetry,
+    className,
+    ...props
+  }, ref) => {
+    const isRich = mode === "rich";
+    const hasStatus = !!status;
+    const statusConfig = status && status !== "uploading" ? STATUS_ICON[status] : null;
+    const progressWidth = status === "completed" ? 100 : progress;
+    const showDesc = isRich ? !!description : status === "error" && !!description;
+    const hoverClass = onClick ? "cursor-pointer" : "";
+    const progressBar = hasStatus ? /* @__PURE__ */ jsx(
+      ProgressBar,
+      {
+        value: progressWidth,
+        status: PROGRESS_STATUS_MAP[status],
+        height: isRich ? void 0 : 2,
+        "aria-label": `${name} 上傳進度`
+      }
+    ) : null;
+    const suffixAlign = "h-[1lh]";
+    const slotHw = "var(--field-height-xs)";
+    const hoverAction = status === "completed" && onDownload ? { icon: Download, onClick: onDownload, label: "下載" } : status === "error" && onRetry ? { icon: RotateCw, onClick: onRetry, label: "重試" } : null;
+    const statusSlot = statusConfig ? /* @__PURE__ */ jsxs(
+      "span",
+      {
+        "data-unbounded": "true",
+        className: "relative inline-flex items-center justify-center shrink-0",
+        style: { width: slotHw, height: slotHw },
+        children: [
+          /* @__PURE__ */ jsx(
+            statusConfig.icon,
+            {
+              size: ICON_PX,
+              className: cn(
+                "shrink-0 transition-opacity",
+                statusConfig.color,
+                hoverAction && "group-hover/row:opacity-0"
+              ),
+              "aria-hidden": true
+            }
+          ),
+          hoverAction && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "text",
+              size: "xs",
+              iconOnly: true,
+              startIcon: hoverAction.icon,
+              "aria-label": hoverAction.label,
+              onClick: (e) => {
+                e.stopPropagation();
+                hoverAction.onClick();
+              },
+              className: "absolute inset-0 opacity-0 group-hover/row:opacity-100 transition-opacity"
+            }
+          )
+        ]
+      }
+    ) : null;
+    const suffix = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-2 shrink-0",
+          suffixAlign,
+          // data-unbounded chrome-canonical trick:let Button xs (24) live inside h-[1lh]
+          // wrapper(compact ~18.2 / rich ~18.2 scanning)without pushing row height。
+          // 視覺/hit area 仍 24,layout footprint 收斂到 1lh。同 overlay-surface
+          // 的 SurfaceHeader dismiss canonical(2026-04-22 v5)。
+          // **child selector `[&>[data-unbounded]]`(非 descendant)**:只針對 suffix
+          // wrapper **直接子元素**(statusSlot span、actions Button)套 margin,
+          // 避免 status slot 內部 hover-swap Button(nested)也套造成 layout 跳動。
+          "[&>[data-unbounded]]:my-[calc((1lh-var(--field-height-xs))/2)]"
+        ),
+        children: [
+          status === "uploading" && isRich && /* @__PURE__ */ jsxs("span", { className: "text-fg-secondary tabular-nums", children: [
+            progress,
+            "%"
+          ] }),
+          statusSlot,
+          actions
+        ]
+      }
+    );
+    const contentRow = /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+      /* @__PURE__ */ jsx(
+        ItemContent,
+        {
+          label: name,
+          description: showDesc ? description : void 0,
+          mode: "scanning",
+          descriptionTone: status === "error" ? "error" : "secondary"
+        }
+      ),
+      suffix
+    ] });
+    const rowA11y = {};
+    const compactStaticBg = !progressBar ? "bg-secondary" : "";
+    if (isRich) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          className: cn(
+            "group/row flex items-start gap-2 px-3 py-3 w-full text-body leading-compact transition-colors",
+            "border border-divider rounded-md bg-surface",
+            hoverClass,
+            className
+          ),
+          onClick,
+          ...rowA11y,
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx(Avatar, { src: thumbnailSrc, alt: name, size: AVATAR_SIZE, shape: "square", className: "shrink-0" }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col flex-1 min-w-0 gap-2",
+                  progressBar ? "justify-between" : "justify-center"
+                ),
+                style: { minHeight: AVATAR_SIZE },
+                children: [
+                  contentRow,
+                  progressBar
+                ]
+              }
+            )
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "group/row relative flex items-start gap-2 px-3 py-2 w-full text-body leading-compact transition-colors rounded-md",
+          compactStaticBg,
+          hoverClass,
+          className
+        ),
+        onClick,
+        ...rowA11y,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(ItemPrefix, { children: /* @__PURE__ */ jsx(Paperclip, { size: ICON_PX, className: "shrink-0 text-fg-muted", "aria-hidden": true }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col flex-1 min-w-0", children: contentRow }),
+          progressBar && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 right-3", style: { left: `calc(0.75rem + ${ICON_PX}px + 0.5rem)` }, children: progressBar })
+        ]
+      }
+    );
+  }
+);
+FileItem.displayName = "FileItem";
+const fileItemMeta = {
+  component: "FileItem",
+  family: 2,
+  variants: {},
+  sizes: {},
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: ["bg-neutral-hover", "bg-secondary", "bg-surface"],
+    fg: ["text-fg-muted", "text-fg-secondary"],
+    ring: []
+  }
+};
+export {
+  FileItem,
+  fileItemMeta
+};
+//# sourceMappingURL=file-item.js.map

package/dist/components/FileItem/file-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-item.js","sources":["../../../src/components/FileItem/file-item.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport { Paperclip, CircleCheck, XCircle, Download, RotateCw } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar } from '@/design-system/components/Avatar/avatar'\nimport { Button } from '@/design-system/components/Button/button'\nimport { ProgressBar } from '@/design-system/components/ProgressBar/progress-bar'\nimport { ItemContent, ItemPrefix } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n/**\n * FileItem — 檔案顯示 / 上傳進度\n *\n * Typography: 閱讀模式 — text-body (14px) 預設行高 (1.5)\n *\n * 兩種 mode（精簡 vs 完整內容呈現）:\n *\n * compact（★ default）: Paperclip 16px 在左。右側 content + bar。\n *   py = gap = 4px (gap-1)，對稱。\n *   description 只有 error 才顯示。\n *   bar 跟文字左邊對齊（在 icon 右邊的 column 內）。\n *\n * rich: Avatar 48px square 在左（顯示檔案內容縮圖）。右側 content + bar。\n *   多行 description（size / status message）。\n *   有 bar → justify-between（bar 底部對齊 avatar）\n *   無 bar → justify-center（文字垂直置中對齊 avatar）\n *\n * status 可選。不傳 = 已上傳檔案（無 bar，可點擊下載）。\n * onClick → hover:bg-neutral-hover + cursor-pointer。\n */\n\nconst STATUS_ICON = {\n  completed: { icon: CircleCheck, color: 'text-success' },\n  error: { icon: XCircle, color: 'text-error' },\n} as const\n\n// ProgressBar status 映射:uploading=inProgress(藍) / completed=success(綠) / error=error(紅)\n// 與 ProgressBar 元件的 status prop 對齊,不需再維護 PROGRESS_COLOR 本地 map。\nconst PROGRESS_STATUS_MAP = {\n  uploading: 'inProgress',\n  completed: 'success',\n  error: 'error',\n} as const\n\nconst AVATAR_SIZE = 48\nconst ICON_PX = 16\n\nexport interface FileItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  name: string\n  /**\n   * 兩種呈現 mode（精簡 vs 完整）：\n   * - `compact`（預設）：paperclip + filename 單行 inline\n   * - `rich`：縮圖 + 檔名 + size + status + progress 的完整 card 呈現\n   */\n  mode?: 'compact' | 'rich'\n  status?: 'uploading' | 'completed' | 'error'\n  progress?: number\n  /** rich mode: 檔案大小、狀態訊息。compact: 只有 error 才顯示。 ReactNode 支援 inline clickable link(如「View log」)。 */\n  description?: React.ReactNode\n  thumbnailSrc?: string\n  actions?: React.ReactNode\n  onClick?: () => void\n  /**\n   * Hover 動作(passive 狀態 icon 變互動 button 的 UX):\n   * - `onDownload`:有值時,`status=\"completed\"` 的綠 ✓ icon 在 row hover 時\n   *   換成 Download ↓ button;click 觸發 onDownload。無值保持 passive 綠 ✓。\n   * - `onRetry`:有值時,`status=\"error\"` 的紅 ✗ icon 在 row hover 時換成 RotateCw ⟲\n   *   button;click 觸發 onRetry。無值保持 passive 紅 ✗。\n   *\n   * 世界級對照:Gmail / Slack / Dropbox 附件的 passive 狀態 → hover 變 action\n   * 的 UX,使用者知道檔案狀態且能立即行動。\n   */\n  onDownload?: () => void\n  onRetry?: () => void\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst FileItem = React.forwardRef<HTMLDivElement, FileItemProps>(\n  (\n    {\n      name,\n      mode = 'compact',\n      status,\n      progress = 0,\n      description,\n      thumbnailSrc,\n      actions,\n      onClick,\n      onDownload,\n      onRetry,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const isRich = mode === 'rich'\n    const hasStatus = !!status\n    const statusConfig = status && status !== 'uploading' ? STATUS_ICON[status] : null\n    const progressWidth = status === 'completed' ? 100 : progress\n\n    // compact 只有 error 才顯示 description\n    const showDesc = isRich ? !!description : (status === 'error' && !!description)\n\n    // Hover 行為 canonical(2026-04-23 user 校準):**FileItem 永不顯示 hover-bg**。\n    // 三種型態都有永久 visual anchor:rich = border card / compact Type B = bg-secondary /\n    // compact Type A = 底部 progress bar(分隔線型 affordance)——再加 hover-bg 是\n    // double-emphasis,視覺雜。世界級共識(Slack / Notion / Figma / Gmail 皆無 hover-bg):\n    // permanent-anchored 元件 hover 只靠 cursor + action icon fade / border highlight,\n    // 不靠 row bg。onClick 存在時只給 `cursor-pointer`,affordance 靠 cursor + 點擊行為本身。\n    const hoverClass = onClick ? 'cursor-pointer' : ''\n\n    // 消費 ProgressBar 元件(SSOT);不再自 roll bar。\n    // height override:compact mode 用 2px(極密集 row layout),rich mode 用預設 4px。\n    // 這是 ProgressBar `height` prop 的唯一合法 consumer(見 progress-bar.tsx docblock)。\n    // a11y(2026-04-25 axe aria-progressbar-name):aria-label 用 file name 作 context。\n    const progressBar = hasStatus ? (\n      <ProgressBar\n        value={progressWidth}\n        status={PROGRESS_STATUS_MAP[status!]}\n        height={isRich ? undefined : 2}\n        aria-label={`${name} 上傳進度`}\n      />\n    ) : null\n\n    // suffix 對齊 label 第一行(item-anatomy「24px 閾值對齊規則」小 suffix canonical):\n    // icons 16 ≤ 24 屬小 suffix,統一 `h-[1lh]` inline,不因 desc wrap 改公式。\n    // 兩 mode 同公式,跟 item-anatomy 一致。\n    const suffixAlign = 'h-[1lh]'\n\n    // Status slot 幾何(2026-04-23 user 統一):rich + compact 都用 `var(--field-height-xs)`(24)\n    // 容器,裡面 Button xs iconOnly variant=\"text\"(auto data-unbounded)。\n    // Compact 不影響 row 高度 = suffix wrapper 的 data-unbounded CSS 讓 Button layout\n    // 收斂到 1lh(同 compact row 內容高),視覺/touch target 仍 24。\n    const slotHw = 'var(--field-height-xs)'\n\n    const hoverAction =\n      status === 'completed' && onDownload ? { icon: Download, onClick: onDownload, label: '下載' } :\n      status === 'error' && onRetry        ? { icon: RotateCw, onClick: onRetry,    label: '重試' } :\n      null\n\n    const statusSlot = statusConfig ? (\n      <span\n        data-unbounded=\"true\"\n        className=\"relative inline-flex items-center justify-center shrink-0\"\n        style={{ width: slotHw, height: slotHw }}\n      >\n        {/* Passive 狀態 icon:預設可見;若有 hover-swap,row-hover 時淡出 */}\n        <statusConfig.icon\n          size={ICON_PX}\n          className={cn(\n            'shrink-0 transition-opacity',\n            statusConfig.color,\n            hoverAction && 'group-hover/row:opacity-0',\n          )}\n          aria-hidden\n        />\n        {/* Active action:row-hover 時淡入(rich + compact 同 Button xs 統一) */}\n        {hoverAction && (\n          <Button\n            variant=\"text\"\n            size=\"xs\"\n            iconOnly\n            startIcon={hoverAction.icon}\n            aria-label={hoverAction.label}\n            onClick={(e) => { e.stopPropagation(); hoverAction.onClick() }}\n            className=\"absolute inset-0 opacity-0 group-hover/row:opacity-100 transition-opacity\"\n          />\n        )}\n      </span>\n    ) : null\n\n    const suffix = (\n      <div\n        className={cn(\n          'flex items-center gap-2 shrink-0',\n          suffixAlign,\n          // data-unbounded chrome-canonical trick:let Button xs (24) live inside h-[1lh]\n          // wrapper(compact ~18.2 / rich ~18.2 scanning)without pushing row height。\n          // 視覺/hit area 仍 24,layout footprint 收斂到 1lh。同 overlay-surface\n          // 的 SurfaceHeader dismiss canonical(2026-04-22 v5)。\n          // **child selector `[&>[data-unbounded]]`(非 descendant)**:只針對 suffix\n          // wrapper **直接子元素**(statusSlot span、actions Button)套 margin,\n          // 避免 status slot 內部 hover-swap Button(nested)也套造成 layout 跳動。\n          '[&>[data-unbounded]]:my-[calc((1lh-var(--field-height-xs))/2)]',\n        )}\n      >\n        {status === 'uploading' && isRich && (\n          <span className=\"text-fg-secondary tabular-nums\">{progress}%</span>\n        )}\n        {statusSlot}\n        {actions}\n      </div>\n    )\n\n    // content row — 消費 ItemContent primitive(封裝 label + desc + mt-gap token SSOT)。\n    // 兩 mode 共用:primitive 改 → 兩 mode 同步,不需 grep。\n    // typography:scanning mode(2026-04-23 user 指示)—— label body(14/1.3) + desc caption(12/1.3);\n    // row 本身加 `leading-compact` 配合 scanning idiom(同 MenuItem row)。\n    const contentRow = (\n      <div className=\"flex items-start gap-2\">\n        <ItemContent\n          label={name}\n          description={showDesc ? description : undefined}\n          mode=\"scanning\"\n          descriptionTone={status === 'error' ? 'error' : 'secondary'}\n        />\n        {suffix}\n      </div>\n    )\n\n    // a11y(2026-04-25 nested-interactive fix):FileItem row 含 inner interactive\n    // (hover-swap action button / ProgressBar / Avatar hoverCard trigger)。原本\n    // role='button' + tabIndex=0 整列可鍵盤點,與 inner buttons 構成 nested-interactive\n    // (axe serious)。移除 row 層 button semantic → mouse 仍可點(onClick 保留),\n    // 鍵盤 user 直接 tab 到 inner primary action。Trade-off:失去「整列 Enter 開啟」\n    // 但滿足 WCAG;世界級對照:Slack message row / Notion page row 同模式 — row 只\n    // mouse 點,inner 有 explicit 按鈕負責鍵盤。\n    const rowA11y = {}\n\n    // Compact 靜態背景(AR20):無進度條 → 顯示 `bg-secondary`(= neutral-3)作「檔案已上傳 /\n    // 靜態列表」視覺區隔,跟「上傳中(有 progress bar)」對照。hover 不改 bg(見上方\n    // hoverClass canonical:FileItem 永不顯示 hover-bg)。\n    // **為什麼 bg-secondary 不 bg-neutral-3**:`bg-neutral-3` 不是合法 Tailwind utility\n    // (primitive token `--color-neutral-3` 沒經 `@theme inline` 橋接);`bg-secondary`\n    // 是 semantic token 橋接的 utility(見 `tokens/color/semantic.css`@theme inline),\n    // 底色同樣指向 `--color-neutral-3`。對齊 Badge low / ProgressBar track SSOT。\n    const compactStaticBg = !progressBar ? 'bg-secondary' : ''\n\n    // ── rich(含縮圖完整呈現)——AR17 canonical:加邊框 + gap-2 ──\n    // Rich mode 是「檔案 card」風格,外框讓每個 row 視覺上是獨立 card\n    // (Slack / Notion / Linear attachment 慣例)\n    if (isRich) {\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            'group/row flex items-start gap-2 px-3 py-3 w-full text-body leading-compact transition-colors',\n            'border border-divider rounded-md bg-surface',\n            hoverClass,\n            className,\n          )}\n          onClick={onClick}\n          {...rowA11y}\n          {...props}\n        >\n          <Avatar src={thumbnailSrc} alt={name} size={AVATAR_SIZE} shape=\"square\" className=\"shrink-0\" />\n          {/* Rich layout invariant(2026-04-23 user 校準):\n              - content col minHeight = AVATAR_SIZE(48),確保 1-line desc 時內容 ≥ avatar 高\n              - `justify-between`(有 bar)/`justify-center`(無 bar):\n                * 1-line desc:label 頂 + progress bar 底 **自動對齊 avatar 頂/底**\n                * 無 bar:content 垂直 center 對齊 avatar 中\n              - `gap-2`:desc ↔ progress bar **至少 8px gap**(multi-line desc 時 bar 溢出仍保 8px)\n              - row `items-start`:avatar top-align 作視覺引導(tight-stack box 內 item 邊界) */}\n          <div\n            className={cn(\n              'flex flex-col flex-1 min-w-0 gap-2',\n              progressBar ? 'justify-between' : 'justify-center',\n            )}\n            style={{ minHeight: AVATAR_SIZE }}\n          >\n            {contentRow}\n            {progressBar}\n          </div>\n        </div>\n      )\n    }\n\n    // ── compact: py-2 對稱, bar absolute 底部 ──\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'group/row relative flex items-start gap-2 px-3 py-2 w-full text-body leading-compact transition-colors rounded-md',\n          compactStaticBg,\n          hoverClass,\n          className,\n        )}\n        onClick={onClick}\n        {...rowA11y}\n        {...props}\n      >\n        <ItemPrefix>\n          <Paperclip size={ICON_PX} className=\"shrink-0 text-fg-muted\" aria-hidden />\n        </ItemPrefix>\n        {/* Compact 共用 contentRow(via ItemContent primitive SSOT)—— 先前 inline\n            hand-craft 導致 compact label↔desc gap 跟 rich 不同步。shared contentRow\n            保證兩 mode 修 primitive 一處全同步。 */}\n        <div className=\"flex flex-col flex-1 min-w-0\">\n          {contentRow}\n        </div>\n\n        {/* ProgressBar: absolute 底部, left 對齊 label(跳過 icon + gap) */}\n        {progressBar && (\n          <div className=\"absolute bottom-0 right-3\" style={{ left: `calc(0.75rem + ${ICON_PX}px + 0.5rem)` }}>\n            {progressBar}\n          </div>\n        )}\n      </div>\n    )\n  },\n)\nFileItem.displayName = 'FileItem'\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 fileItemMeta = {\n  component: 'FileItem',\n  family: 2,\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-neutral-hover', 'bg-secondary', 'bg-surface'],\n    fg: ['text-fg-muted', 'text-fg-secondary'],\n    ring: [],\n  },\n} as const\n\nexport { FileItem }\n"],"names":[],"mappings":"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"}

package/dist/components/FileUpload/file-upload.d.ts

@@ -0,0 +1,97 @@
+import * as React from 'react';
+/**
+ * FileUpload — 拖放 / 點擊上傳區塊
+ *
+ * 世界級對照:Ant Design `Upload.Dragger`、Polaris `DropZone`、Material community MUI-File-Input。
+ * 與本 DS 既有 FileItem(顯示已上傳檔案)配對 — 這裡 own「上傳觸發 + 拖放偵測」,
+ * 上傳後的檔案清單顯示交給 consumer 用 FileItem 渲染。
+ *
+ * ── 4 狀態 ──
+ * idle     (default) — border-dashed border-divider  bg-surface
+ * drag-over         — border-dashed border-primary  bg-primary-subtle
+ * loading           — 上傳中(async)顯示 CircularProgress,阻擋新互動
+ * disabled          — opacity-disabled pointer-events-none
+ *
+ * ── children 插槽 ──
+ * 預設渲染 `<Empty icon={Upload} title description />` — 重用 Empty 元件 own
+ * 的「icon + title + description 垂直居中」SSOT 避免視覺漂移。Empty 改字體 /
+ * gap / icon 尺寸時 FileUpload 自動跟進。若 consumer 傳 children 則整個覆寫。
+ *
+ * ── API ──
+ * onUpload: 使用者選取或拖放檔案時觸發,回傳 File[](至少 1 個)。
+ * multiple: 允許多檔。預設 false(單檔)。
+ * accept:   MIME filter(例 "image/*,.pdf"),傳給 <input type=file>。
+ * maxSize:  單檔最大 bytes;超過靜默忽略(consumer 若需要錯誤提示,走 onReject)。
+ * onReject: 被 maxSize / accept 擋下的檔案(提供錯誤訊息顯示機會)。
+ */
+/**
+ * Uploaded / uploading file status item(for `files` prop)。
+ * Consumer 持 state(progress / status),FileUpload 只負責渲染。
+ */
+export interface FileUploadStatus {
+    id: string;
+    name: string;
+    /** bytes */
+    size?: number;
+    /** Upload 進度(0-100)— uploading 時顯示 progress bar */
+    progress?: number;
+    status?: 'uploading' | 'completed' | 'error';
+    /** Error 訊息 / size 等 description */
+    description?: React.ReactNode;
+    /** Thumbnail URL for rich mode */
+    thumbnailSrc?: string;
+}
+export interface FileUploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onDrop'> {
+    onUpload?: (files: File[]) => void;
+    onReject?: (files: File[], reason: 'size' | 'type') => void;
+    multiple?: boolean;
+    accept?: string;
+    maxSize?: number;
+    disabled?: boolean;
+    /**
+     * Loading 狀態(async 上傳 / 伺服器處理中)。
+     * - 顯示 CircularProgress 取代預設 Empty 內容
+     * - 阻擋新點擊 / drag 事件(避免 double-submit)
+     * - 宣告 `aria-busy="true"` 讓 screen reader 感知處理中
+     * - Consumer 負責在上傳完成後自己切回 `loading={false}`
+     */
+    loading?: boolean;
+    /** Loading 狀態的文字標題(預設「上傳中…」) */
+    loadingTitle?: string;
+    /** 標題文字(預設「Click or drag file here to upload」) */
+    title?: string;
+    /** 說明文字(預設「Support for a single or bulk upload」) */
+    description?: string;
+    /** 若傳入 children,覆寫預設 Empty 結構 */
+    children?: React.ReactNode;
+    /**
+     * Uploaded / uploading 檔案清單。傳入 → FileUpload 在 drop zone 下方渲染列表。
+     * 不傳 → 不顯示(consumer 可自行用 FileItem 組成,pre-2026-04-24 行為)。
+     * 每項有 status 狀態會對應 icon:
+     *   - `uploading`:CircularProgress(+ progress bar 若 progress 給)
+     *   - `completed`:綠色 ✓(success 狀態視覺確認)
+     *   - `error`:紅色 ✗(+ description 顯示錯誤訊息)
+     */
+    files?: FileUploadStatus[];
+    /** File list 每項顯示模式。Default: 'compact'(單行);'rich' = 含 thumbnail / size / progress bar */
+    fileListMode?: 'compact' | 'rich';
+    /** File list 移除 callback。有值 → 每項右側顯示 X dismiss button;無 → 不可移除(view-only) */
+    onRemove?: (id: string) => void;
+    /** File list dismiss button ARIA label template。預設 `移除 {name}`。For i18n. */
+    removeAriaLabel?: (name: string) => string;
+}
+declare const FileUpload: React.ForwardRefExoticComponent<FileUploadProps & React.RefAttributes<HTMLDivElement>>;
+export declare const fileUploadMeta: {
+    readonly component: "FileUpload";
+    readonly family: null;
+    readonly variants: {};
+    readonly sizes: {};
+    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly tokens: {
+        readonly bg: readonly ["bg-neutral-hover", "bg-primary-subtle", "bg-surface"];
+        readonly fg: readonly [];
+        readonly ring: readonly ["ring-ring"];
+    };
+};
+export { FileUpload };
+//# sourceMappingURL=file-upload.d.ts.map

package/dist/components/FileUpload/file-upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../../src/components/FileUpload/file-upload.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,OAAO,CAAA;IAC5C,oCAAoC;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC3F,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gCAAgC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC1B,yFAAyF;IACzF,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IACjC,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,4EAA4E;IAC5E,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;CAC3C;AAGD,QAAA,MAAM,UAAU,wFA4Lf,CAAA;AA0BD,eAAO,MAAM,cAAc;;;;;;;;;;;CAejB,CAAA;AAEV,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/components/FileUpload/file-upload.js

@@ -0,0 +1,231 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { X, Upload } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Empty } from "../Empty/empty.js";
+import { CircularProgress } from "../CircularProgress/circular-progress.js";
+import { FileItem } from "../FileItem/file-item.js";
+import { Button } from "../Button/button.js";
+const FileUpload = React.forwardRef(
+  ({
+    onUpload,
+    onReject,
+    multiple = false,
+    accept,
+    maxSize,
+    disabled = false,
+    loading = false,
+    loadingTitle = "上傳中…",
+    // i18n-allow: DS default; consumer override via loadingTitle prop
+    title = "Click or drag file here to upload",
+    // i18n-allow: DS default; consumer override via title prop
+    description = multiple ? "Support for a single or bulk upload" : "Support for a single file upload",
+    // i18n-allow: DS default; consumer override via description prop
+    children,
+    files,
+    fileListMode = "compact",
+    onRemove,
+    removeAriaLabel = (name) => `移除 ${name}`,
+    // i18n-allow: DS default; consumer override via removeAriaLabel prop
+    className,
+    onClick,
+    ...props
+  }, ref) => {
+    const inputRef = React.useRef(null);
+    const [isDragOver, setDragOver] = React.useState(false);
+    const filterAndDispatch = (files2) => {
+      if (!files2 || files2.length === 0) return;
+      const accepted = [];
+      const rejectedBySize = [];
+      const rejectedByType = [];
+      Array.from(files2).forEach((f) => {
+        if (maxSize != null && f.size > maxSize) {
+          rejectedBySize.push(f);
+          return;
+        }
+        if (accept && !matchAccept(f, accept)) {
+          rejectedByType.push(f);
+          return;
+        }
+        accepted.push(f);
+      });
+      if (rejectedBySize.length) onReject == null ? void 0 : onReject(rejectedBySize, "size");
+      if (rejectedByType.length) onReject == null ? void 0 : onReject(rejectedByType, "type");
+      if (accepted.length) onUpload == null ? void 0 : onUpload(multiple ? accepted : accepted.slice(0, 1));
+    };
+    const handleClick = (e) => {
+      var _a;
+      if (!disabled) (_a = inputRef.current) == null ? void 0 : _a.click();
+      onClick == null ? void 0 : onClick(e);
+    };
+    const state = disabled ? "disabled" : loading ? "loading" : isDragOver ? "drag-over" : "idle";
+    const isBlocked = disabled || loading;
+    const hasFiles = Array.isArray(files) && files.length > 0;
+    const fileListNode = hasFiles ? /* @__PURE__ */ jsx(
+      "ul",
+      {
+        className: cn(
+          // stack vertically with consistent gap;bg-surface 在容器外的 chrome / consumer bg 之上
+          "flex flex-col gap-2 w-full",
+          "mt-3"
+        ),
+        "aria-label": "Uploaded files",
+        children: files.map((f) => /* @__PURE__ */ jsx("li", { className: "list-none", children: /* @__PURE__ */ jsx(
+          FileItem,
+          {
+            mode: fileListMode,
+            name: f.name,
+            status: f.status,
+            progress: f.progress,
+            description: f.description ?? (f.size != null ? formatBytes(f.size) : void 0),
+            thumbnailSrc: f.thumbnailSrc,
+            actions: onRemove ? (
+              // Collection remove(per-file)— 不是 dismiss surface,故不套 `dismiss` prop。
+              // 視覺與 dismiss 一致(text variant + fg-muted dim)— 對齊 inline-action.spec.md
+              // 「Dismiss canonical — X close only」L249-251:onRemove callback 不觸發 dismiss prop。
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  iconOnly: true,
+                  variant: "text",
+                  size: "xs",
+                  startIcon: X,
+                  "aria-label": removeAriaLabel(f.name),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onRemove(f.id);
+                  },
+                  className: "text-fg-muted hover:text-foreground"
+                }
+              )
+            ) : void 0
+          }
+        ) }, f.id))
+      }
+    ) : null;
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("w-full", hasFiles && "flex flex-col"), children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "button",
+          tabIndex: isBlocked ? -1 : 0,
+          "aria-disabled": disabled || void 0,
+          "aria-busy": loading || void 0,
+          "data-state": state,
+          onClick: handleClick,
+          onKeyDown: (e) => {
+            var _a;
+            if (isBlocked) return;
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              (_a = inputRef.current) == null ? void 0 : _a.click();
+            }
+          },
+          onDragEnter: (e) => {
+            if (isBlocked) return;
+            e.preventDefault();
+            setDragOver(true);
+          },
+          onDragLeave: (e) => {
+            if (isBlocked) return;
+            e.preventDefault();
+            setDragOver(false);
+          },
+          onDragOver: (e) => {
+            if (isBlocked) return;
+            e.preventDefault();
+          },
+          onDrop: (e) => {
+            if (isBlocked) return;
+            e.preventDefault();
+            setDragOver(false);
+            filterAndDispatch(e.dataTransfer.files);
+          },
+          className: cn(
+            // 寬度 w-full 填滿 consumer 容器(user 明示「寬度填滿」);高度由 padding + 內容物決定(不固定 h)
+            "flex flex-col items-center justify-center gap-2 text-center w-full",
+            // 對稱 padding p-[var(--layout-space-loose)]:四邊等距,density-aware(md=24px / lg=32px),對齊 DS chrome padding canonical。
+            // 不再硬寫 px-6 py-10(不對稱+非 token)。內容物(icon + title + description)垂直堆疊由 gap-2 控制
+            "rounded-md border-2 border-dashed p-[var(--layout-space-loose)]",
+            "cursor-pointer transition-colors",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            // idle
+            "border-divider bg-surface hover:bg-neutral-hover",
+            // drag-over
+            "data-[state=drag-over]:border-primary data-[state=drag-over]:bg-primary-subtle data-[state=drag-over]:hover:bg-primary-subtle",
+            // loading(阻擋新互動但不 opacity-disabled — 避免跟 disabled 視覺撞,保持「處理中」語意)
+            "data-[state=loading]:cursor-progress data-[state=loading]:pointer-events-none",
+            // disabled
+            "data-[state=disabled]:opacity-disabled data-[state=disabled]:pointer-events-none data-[state=disabled]:cursor-not-allowed",
+            className
+          ),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "file",
+                className: "hidden",
+                multiple,
+                accept,
+                disabled,
+                onChange: (e) => filterAndDispatch(e.target.files)
+              }
+            ),
+            loading ? /* @__PURE__ */ jsx(
+              Empty,
+              {
+                icon: /* @__PURE__ */ jsx(CircularProgress, { size: 48 }),
+                title: loadingTitle
+              }
+            ) : children ?? /* @__PURE__ */ jsx(
+              Empty,
+              {
+                icon: Upload,
+                title,
+                description
+              }
+            )
+          ]
+        }
+      ),
+      fileListNode
+    ] });
+  }
+);
+FileUpload.displayName = "FileUpload";
+function formatBytes(n) {
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  if (n < 1024 * 1024 * 1024) return `${(n / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(n / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+}
+function matchAccept(file, accept) {
+  const patterns = accept.split(",").map((s) => s.trim().toLowerCase());
+  const fileName = file.name.toLowerCase();
+  const fileType = file.type.toLowerCase();
+  return patterns.some((p) => {
+    if (p.startsWith(".")) return fileName.endsWith(p);
+    if (p.endsWith("/*")) return fileType.startsWith(p.slice(0, -1));
+    return fileType === p;
+  });
+}
+const fileUploadMeta = {
+  component: "FileUpload",
+  family: null,
+  // non-family composite / overlay / layout
+  variants: {},
+  sizes: {},
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: ["bg-neutral-hover", "bg-primary-subtle", "bg-surface"],
+    fg: [],
+    ring: ["ring-ring"]
+  }
+};
+export {
+  FileUpload,
+  fileUploadMeta
+};
+//# sourceMappingURL=file-upload.js.map