@qijenchen/design-system 0.1.0-beta.10

package/dist/components/DropdownMenu/dropdown-menu.d.ts

@@ -0,0 +1,111 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { type LucideIcon } from "lucide-react";
+import type { AvatarData } from "../../components/Avatar/avatar";
+import { type RowSize } from "../../patterns/element-anatomy/item-anatomy";
+/**
+ * DropdownMenu — Radix DropdownMenu + MenuItem visual layer
+ *
+ * 架構分工：
+ * - Radix primitives：behavior（keyboard nav, focus management, aria roles）
+ * - MenuItem：visual（layout, padding, icon alignment, typography）
+ *
+ * Radix primitive 是外層容器,控制 `data-[highlighted]:bg-neutral-hover`。
+ * MenuItem 內層只負責佈局,不加互動樣式。
+ *
+ * ── Hover / highlight canonical(2026-04-22 修正)──
+ * 用 Radix 官方的 `data-[highlighted]` attribute,**不用 `:focus-visible` / `:hover` /
+ * `:focus`**:
+ *   - Radix 在 **mouse hover、keyboard arrow nav、focus move in** 時自動 set `data-highlighted`
+ *   - mouse leave / focus move out / menu close 時自動清掉
+ *   - 不會在 click 後留殘影(Radix 內部已處理)
+ *   - 跨瀏覽器一致(不依賴 `:focus-visible` 的 heuristic)
+ *
+ * 曾經用過 `focus-visible:bg-neutral-hover` 的理由:避免 click 後殘影。但實測:mouse hover
+ * 觸發 Radix 程式化 `.focus()`,Chromium / Safari / Firefox 對 programmatic focus 是否 fire
+ * `:focus-visible` 行為不一致,導致 mouse hover 有時無 bg。改用 `data-[highlighted]:` 後行為
+ * 一致 —— 世界級 canonical(shadcn / Radix docs / Ariakit 皆此)。
+ */
+declare const floatingLayerClass: string;
+type SizeKey = RowSize;
+declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+interface DropdownMenuContentProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {
+    size?: SizeKey;
+    /** 最小寬度（px），預設跟隨觸發元件寬度 */
+    minWidth?: number;
+    /** 最大高度（px），超過時捲動 */
+    maxHeight?: number;
+}
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface DropdownMenuItemProps extends Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>, 'children'> {
+    children: React.ReactNode;
+    /** 左側 icon */
+    startIcon?: LucideIcon;
+    /** 左側頭像資料（AvatarData），與 startIcon 互斥 */
+    avatar?: AvatarData;
+    /** 次要說明文字 */
+    description?: React.ReactNode;
+    /** 後綴 Tag（ReactNode） */
+    tag?: React.ReactNode;
+    /** 後綴 Badge（ReactNode） */
+    badge?: React.ReactNode;
+    /** 後綴指示型 icon（LucideIcon），fg-muted */
+    endIcon?: LucideIcon;
+    /** 鍵盤快捷鍵 */
+    shortcut?: string;
+    /** 單選選中（bg-neutral-selected，持續選中狀態）*/
+    selected?: boolean;
+}
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>>;
+interface DropdownMenuSubTriggerProps extends Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger>, 'children'> {
+    children: React.ReactNode;
+    /** 左側 icon */
+    startIcon?: LucideIcon;
+    /** 子選單目前狀態值文字（如 "深色"） */
+    value?: string;
+    /** 子選單狀態 badge */
+    badge?: React.ReactNode;
+}
+declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>>;
+interface DropdownMenuCheckboxItemProps extends Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>, 'children'> {
+    children: React.ReactNode;
+    /** 左側 icon */
+    startIcon?: LucideIcon;
+    /** 次要說明文字 */
+    description?: React.ReactNode;
+}
+declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface DropdownMenuRadioItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> {
+    /** Prefix icon(LucideIcon) */
+    startIcon?: LucideIcon;
+    /** 次要說明文字 */
+    description?: React.ReactNode;
+}
+declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const dropdownMenuMeta: {
+    readonly component: "DropdownMenu";
+    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-surface-raised", "bg-transparent"];
+        readonly fg: readonly ["text-fg-disabled", "text-fg-muted"];
+        readonly ring: readonly [];
+    };
+};
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuShortcut, floatingLayerClass, };
+export type { SizeKey, DropdownMenuItemProps };
+//# sourceMappingURL=dropdown-menu.d.ts.map

package/dist/components/DropdownMenu/dropdown-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownMenu/dropdown-menu.tsx"],"names":[],"mappings":"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"}

package/dist/components/DropdownMenu/dropdown-menu.js

@@ -0,0 +1,288 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { ChevronRight } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { MenuItem } from "../Menu/menu-item.js";
+import { ScrollArea } from "../ScrollArea/scroll-area.js";
+import { OVERLAY_COLLISION_PADDING, OVERLAY_SIDE_OFFSET } from "../../tokens/elevation/overlay-geometry.js";
+import { useRowSize, RowSizeProvider, ICON_SIZE as ICON_SIZE$1 } from "../../patterns/element-anatomy/item-anatomy.js";
+const floatingLayerClass = [
+  "z-50 overflow-hidden rounded-lg border border-border bg-surface-raised",
+  "data-[state=open]:animate-in data-[state=closed]:animate-out motion-reduce:animate-none",
+  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+  "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+  "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+  "origin-[var(--radix-dropdown-menu-content-transform-origin)]"
+].join(" ");
+const ICON_SIZE = ICON_SIZE$1;
+const radixItemClass = [
+  "relative cursor-pointer select-none outline-none",
+  "transition-colors duration-150",
+  "data-[highlighted]:bg-neutral-hover",
+  "data-[disabled]:pointer-events-none data-[disabled]:text-fg-disabled data-[disabled]:cursor-default"
+].join(" ");
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Trigger,
+  {
+    ref,
+    className: cn("outline-none", className),
+    ...props
+  }
+));
+DropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName;
+const DropdownMenuGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Group,
+  {
+    ref,
+    className: cn("[&+&]:border-t [&+&]:border-divider [&+&]:mt-2 [&+&]:pt-2", className),
+    ...props
+  }
+));
+DropdownMenuGroup.displayName = "DropdownMenuGroup";
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+const DropdownMenuContent = React.forwardRef(({ className, size = "md", sideOffset = OVERLAY_SIDE_OFFSET, collisionPadding = OVERLAY_COLLISION_PADDING, align = "start", minWidth, maxHeight, children, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    collisionPadding,
+    align,
+    onCloseAutoFocus: (e) => e.preventDefault(),
+    className: cn(floatingLayerClass, !maxHeight && "py-2", className),
+    style: {
+      boxShadow: "var(--elevation-200)",
+      minWidth: minWidth ?? "max(180px, var(--radix-dropdown-menu-trigger-width))",
+      maxHeight
+    },
+    ...props,
+    children: /* @__PURE__ */ jsx(RowSizeProvider, { value: size, children: maxHeight ? (
+      // 長選單用 ScrollArea 跨 OS 一致捲動(不吃寬度,macOS/Windows 視覺一致)
+      // py-2 移到內層,ScrollArea Viewport 才能 scroll 整個 padded 區
+      /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[inherit]", children: /* @__PURE__ */ jsx("div", { className: "py-2", children }) })
+    ) : children })
+  }
+) }));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+const DropdownMenuSubContent = React.forwardRef(({ className, children, ...props }, ref) => {
+  const size = useRowSize();
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.SubContent,
+    {
+      ref,
+      sideOffset: OVERLAY_SIDE_OFFSET,
+      className: cn(floatingLayerClass, "py-2", className),
+      style: { boxShadow: "var(--elevation-200)", minWidth: 180 },
+      ...props,
+      children: /* @__PURE__ */ jsx(RowSizeProvider, { value: size, children })
+    }
+  );
+});
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+function buildEndContent(size, badge, endIcon, shortcut) {
+  const EndIcon = endIcon;
+  if (!badge && !EndIcon && !shortcut) return void 0;
+  const iconPx = ICON_SIZE[size];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    badge,
+    EndIcon && /* @__PURE__ */ jsx(EndIcon, { size: iconPx, className: "text-fg-muted", "aria-hidden": true }),
+    shortcut && /* @__PURE__ */ jsx("span", { className: "text-caption text-fg-muted", children: shortcut })
+  ] });
+}
+const DropdownMenuItem = React.forwardRef(({ className, children, startIcon, avatar, description, tag, badge, endIcon, shortcut, selected, disabled, ...props }, ref) => {
+  const size = useRowSize();
+  const endContent = buildEndContent(size, badge, endIcon, shortcut);
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Item,
+    {
+      ref,
+      disabled,
+      className: cn(
+        radixItemClass,
+        selected && "bg-neutral-selected",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          size,
+          startIcon,
+          avatar,
+          description,
+          tag,
+          endContent,
+          disabled,
+          role: "presentation",
+          className: "!bg-transparent hover:!bg-transparent pointer-events-none",
+          children
+        }
+      )
+    }
+  );
+});
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+const DropdownMenuSubTrigger = React.forwardRef(({ className, children, startIcon, value, badge, ...props }, ref) => {
+  const size = useRowSize();
+  const iconPx = ICON_SIZE[size];
+  const endContent = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+    value && /* @__PURE__ */ jsx("span", { className: "text-fg-muted", children: value }),
+    badge,
+    /* @__PURE__ */ jsx(ChevronRight, { size: iconPx, className: "text-fg-muted" })
+  ] });
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.SubTrigger,
+    {
+      ref,
+      className: cn(
+        radixItemClass,
+        "data-[state=open]:bg-neutral-hover",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          size,
+          startIcon,
+          endContent,
+          role: "presentation",
+          className: "!bg-transparent hover:!bg-transparent pointer-events-none",
+          children
+        }
+      )
+    }
+  );
+});
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, startIcon, description, checked, disabled, ...props }, ref) => {
+  const size = useRowSize();
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.CheckboxItem,
+    {
+      ref,
+      checked,
+      disabled,
+      onSelect: (e) => e.preventDefault(),
+      className: cn(radixItemClass, className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          size,
+          checkbox: true,
+          checked: !!checked,
+          startIcon,
+          description,
+          disabled,
+          role: "presentation",
+          className: "!bg-transparent hover:!bg-transparent pointer-events-none",
+          children
+        }
+      )
+    }
+  );
+});
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+const DropdownMenuLabel = React.forwardRef(({ className, children, ...props }, ref) => {
+  const size = useRowSize();
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Label,
+    {
+      ref,
+      className: cn("outline-none", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          size,
+          header: true,
+          role: "presentation",
+          className: "pointer-events-none",
+          children
+        }
+      )
+    }
+  );
+});
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("my-2 h-px bg-divider", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+const DropdownMenuRadioItem = React.forwardRef(({ className, children, startIcon, description, disabled, ...props }, ref) => {
+  const size = useRowSize();
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.RadioItem,
+    {
+      ref,
+      disabled,
+      onSelect: (e) => e.preventDefault(),
+      className: cn(radixItemClass, "data-[state=checked]:[&>*]:bg-neutral-selected", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          size,
+          startIcon,
+          description,
+          disabled,
+          role: "presentation",
+          className: "!bg-transparent hover:!bg-transparent pointer-events-none",
+          children
+        }
+      )
+    }
+  );
+});
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+const DropdownMenuShortcut = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn("ml-auto text-footnote text-fg-muted tracking-shortcut", className),
+    ...props
+  }
+);
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+const dropdownMenuMeta = {
+  component: "DropdownMenu",
+  family: null,
+  // non-family composite / overlay / layout
+  variants: {},
+  sizes: {},
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: ["bg-neutral-hover", "bg-surface-raised", "bg-transparent"],
+    fg: ["text-fg-disabled", "text-fg-muted"],
+    ring: []
+  }
+};
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  dropdownMenuMeta,
+  floatingLayerClass
+};
+//# sourceMappingURL=dropdown-menu.js.map

package/dist/components/DropdownMenu/dropdown-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.js","sources":["../../../src/components/DropdownMenu/dropdown-menu.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport type { AvatarData } from \"@/design-system/components/Avatar/avatar\"\nimport { MenuItem } from \"@/design-system/components/Menu/menu-item\"\nimport { ScrollArea } from \"@/design-system/components/ScrollArea/scroll-area\"\nimport { OVERLAY_SIDE_OFFSET, OVERLAY_COLLISION_PADDING } from \"@/design-system/tokens/elevation/overlay-geometry\"\nimport {\n  RowSizeProvider,\n  useRowSize,\n  ICON_SIZE as ROW_ICON_SIZE,\n  type RowSize,\n} from \"@/design-system/patterns/element-anatomy/item-anatomy\"\n\n/**\n * DropdownMenu — Radix DropdownMenu + MenuItem visual layer\n *\n * 架構分工：\n * - Radix primitives：behavior（keyboard nav, focus management, aria roles）\n * - MenuItem：visual（layout, padding, icon alignment, typography）\n *\n * Radix primitive 是外層容器,控制 `data-[highlighted]:bg-neutral-hover`。\n * MenuItem 內層只負責佈局,不加互動樣式。\n *\n * ── Hover / highlight canonical(2026-04-22 修正)──\n * 用 Radix 官方的 `data-[highlighted]` attribute,**不用 `:focus-visible` / `:hover` /\n * `:focus`**:\n *   - Radix 在 **mouse hover、keyboard arrow nav、focus move in** 時自動 set `data-highlighted`\n *   - mouse leave / focus move out / menu close 時自動清掉\n *   - 不會在 click 後留殘影(Radix 內部已處理)\n *   - 跨瀏覽器一致(不依賴 `:focus-visible` 的 heuristic)\n *\n * 曾經用過 `focus-visible:bg-neutral-hover` 的理由:避免 click 後殘影。但實測:mouse hover\n * 觸發 Radix 程式化 `.focus()`,Chromium / Safari / Firefox 對 programmatic focus 是否 fire\n * `:focus-visible` 行為不一致,導致 mouse hover 有時無 bg。改用 `data-[highlighted]:` 後行為\n * 一致 —— 世界級 canonical(shadcn / Radix docs / Ariakit 皆此)。\n */\n\n// ── Floating layer 共用樣式 ──\nconst floatingLayerClass = [\n  'z-50 overflow-hidden rounded-lg border border-border bg-surface-raised',\n  'data-[state=open]:animate-in data-[state=closed]:animate-out motion-reduce:animate-none',\n  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n  'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n  'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',\n  'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n  'origin-[var(--radix-dropdown-menu-content-transform-origin)]',\n].join(' ')\n\n// ── Size:統一用 RowSizeContext(item-layout module),消除本地 SizeContext 漂移 ──\ntype SizeKey = RowSize\n// Re-export for backward compat(內部命名)\nconst ICON_SIZE = ROW_ICON_SIZE\n\n// ── Shared item classes on Radix primitive ──\n// Highlight(hover + keyboard nav): 用 Radix `data-[highlighted]` canonical(見 docblock)\nconst radixItemClass = [\n  'relative cursor-pointer select-none outline-none',\n  'transition-colors duration-150',\n  'data-[highlighted]:bg-neutral-hover',\n  'data-[disabled]:pointer-events-none data-[disabled]:text-fg-disabled data-[disabled]:cursor-default',\n].join(' ')\n\n// ── Root ──\nconst DropdownMenu = DropdownMenuPrimitive.Root\nconst DropdownMenuTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Trigger\n    ref={ref}\n    className={cn('outline-none', className)}\n    {...props}\n  />\n))\nDropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName\n// DropdownMenuGroup — 對齊 MenuGroup 的 group separation 設計語言\n//\n// 設計語言(跨 Menu-like 元件統一,SSOT 見 item-anatomy.spec.md\n// 「Group auto-separation」):\n//   每個 group 上下各 8px padding,相鄰 group 之間用 border-divider 分隔\n//   兩個 group 之間視覺 gap = 8px(上一個 bottom)+ 8px(下一個 top)= 16px + border\n//\n// MenuGroup(menu-item.tsx)實作:`py-2 [&+&]:border-t [&+&]:border-divider`\n//   (在 Command.List 下提供 Content 邊界 8px + group 間 16px gap)\n//\n// DropdownMenuGroup(本元件)實作:`[&+&]:mt-2 [&+&]:pt-2 [&+&]:border-t\n// [&+&]:border-divider`(因為 DropdownMenuContent 已有 py-2 提供 Content 邊界\n// 的 8px,只需在第二個起的 group 加 8+8 = 16px gap + border)\n//\n// **視覺結果等同**:兩種實作的 visual output 一致,只是「padding 住在哪層」\n// 不同。不強制統一 CSS 表達式——DropdownMenuContent 的 py-2 是既有 Radix\n// 期望的行為,移除會影響 trigger 鍵盤導覽的 focus offset。\nconst DropdownMenuGroup = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Group\n    ref={ref}\n    className={cn('[&+&]:border-t [&+&]:border-divider [&+&]:mt-2 [&+&]:pt-2', className)}\n    {...props}\n  />\n))\nDropdownMenuGroup.displayName = 'DropdownMenuGroup'\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\n// ── Content ──\ninterface DropdownMenuContentProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {\n  size?: SizeKey\n  /** 最小寬度（px），預設跟隨觸發元件寬度 */\n  minWidth?: number\n  /** 最大高度（px），超過時捲動 */\n  maxHeight?: number\n}\n\nconst DropdownMenuContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Content>,\n  DropdownMenuContentProps\n>(({ className, size = 'md', sideOffset = OVERLAY_SIDE_OFFSET, collisionPadding = OVERLAY_COLLISION_PADDING, align = 'start', minWidth, maxHeight, children, ...props }, ref) => (\n  <DropdownMenuPrimitive.Portal>\n    <DropdownMenuPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      collisionPadding={collisionPadding}\n      align={align}\n      onCloseAutoFocus={(e) => e.preventDefault()}\n      className={cn(floatingLayerClass, !maxHeight && 'py-2', className)}\n      style={{\n        boxShadow: 'var(--elevation-200)',\n        minWidth: minWidth ?? 'max(180px, var(--radix-dropdown-menu-trigger-width))',\n        maxHeight,\n      }}\n      {...props}\n    >\n      <RowSizeProvider value={size}>\n        {maxHeight ? (\n          // 長選單用 ScrollArea 跨 OS 一致捲動(不吃寬度,macOS/Windows 視覺一致)\n          // py-2 移到內層,ScrollArea Viewport 才能 scroll 整個 padded 區\n          <ScrollArea className=\"max-h-[inherit]\">\n            <div className=\"py-2\">{children}</div>\n          </ScrollArea>\n        ) : (\n          children\n        )}\n      </RowSizeProvider>\n    </DropdownMenuPrimitive.Content>\n  </DropdownMenuPrimitive.Portal>\n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\n// ── SubContent ──\nconst DropdownMenuSubContent = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, children, ...props }, ref) => {\n  const size = useRowSize()\n  return (\n    <DropdownMenuPrimitive.SubContent\n      ref={ref}\n      sideOffset={OVERLAY_SIDE_OFFSET}\n      className={cn(floatingLayerClass, 'py-2', className)}\n      style={{ boxShadow: 'var(--elevation-200)', minWidth: 180 }}\n      {...props}\n    >\n      <RowSizeProvider value={size}>\n        {children}\n      </RowSizeProvider>\n    </DropdownMenuPrimitive.SubContent>\n  )\n})\nDropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName\n\n// ── Helper: build endContent from badge + endIcon + shortcut ──\nfunction buildEndContent(\n  size: SizeKey,\n  badge?: React.ReactNode,\n  endIcon?: LucideIcon,\n  shortcut?: string,\n): React.ReactNode | undefined {\n  const EndIcon = endIcon\n  if (!badge && !EndIcon && !shortcut) return undefined\n  const iconPx = ICON_SIZE[size]\n  return (\n    <>\n      {badge}\n      {EndIcon && <EndIcon size={iconPx} className=\"text-fg-muted\" aria-hidden />}\n      {shortcut && <span className=\"text-caption text-fg-muted\">{shortcut}</span>}\n    </>\n  )\n}\n\n// ── Item ──\ninterface DropdownMenuItemProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>, 'children'> {\n  children: React.ReactNode\n  /** 左側 icon */\n  startIcon?: LucideIcon\n  /** 左側頭像資料（AvatarData），與 startIcon 互斥 */\n  avatar?: AvatarData\n  /** 次要說明文字 */\n  description?: React.ReactNode\n  /** 後綴 Tag（ReactNode） */\n  tag?: React.ReactNode\n  /** 後綴 Badge（ReactNode） */\n  badge?: React.ReactNode\n  /** 後綴指示型 icon（LucideIcon），fg-muted */\n  endIcon?: LucideIcon\n  /** 鍵盤快捷鍵 */\n  shortcut?: string\n  /** 單選選中（bg-neutral-selected，持續選中狀態）*/\n  selected?: boolean\n}\n\nconst DropdownMenuItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Item>,\n  DropdownMenuItemProps\n>(({ className, children, startIcon, avatar, description, tag, badge, endIcon, shortcut, selected, disabled, ...props }, ref) => {\n  const size = useRowSize()\n  const endContent = buildEndContent(size, badge, endIcon, shortcut)\n\n  return (\n    <DropdownMenuPrimitive.Item\n      ref={ref}\n      disabled={disabled}\n      className={cn(\n        radixItemClass,\n        selected && 'bg-neutral-selected',\n        className,\n      )}\n      {...props}\n    >\n      <MenuItem\n        size={size}\n        startIcon={startIcon}\n        avatar={avatar}\n        description={description}\n        tag={tag}\n        endContent={endContent}\n        disabled={disabled}\n        // Pure visual — Radix parent handles role/aria/interaction\n        role=\"presentation\"\n        className=\"!bg-transparent hover:!bg-transparent pointer-events-none\"\n      >\n        {children}\n      </MenuItem>\n    </DropdownMenuPrimitive.Item>\n  )\n})\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\n// ── SubTrigger（子選單觸發器，自動附加 ChevronRight）──\ninterface DropdownMenuSubTriggerProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger>, 'children'> {\n  children: React.ReactNode\n  /** 左側 icon */\n  startIcon?: LucideIcon\n  /** 子選單目前狀態值文字（如 \"深色\"） */\n  value?: string\n  /** 子選單狀態 badge */\n  badge?: React.ReactNode\n}\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,\n  DropdownMenuSubTriggerProps\n>(({ className, children, startIcon, value, badge, ...props }, ref) => {\n  const size = useRowSize()\n  const iconPx = ICON_SIZE[size]\n\n  // SubTrigger suffix: [value?] [badge?] [ChevronRight] with gap-1\n  const endContent = (\n    <div className=\"flex items-center gap-1\">\n      {value && <span className=\"text-fg-muted\">{value}</span>}\n      {badge}\n      <ChevronRight size={iconPx} className=\"text-fg-muted\" />\n    </div>\n  )\n\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      ref={ref}\n      className={cn(\n        radixItemClass,\n        'data-[state=open]:bg-neutral-hover',\n        className,\n      )}\n      {...props}\n    >\n      <MenuItem\n        size={size}\n        startIcon={startIcon}\n        endContent={endContent}\n        role=\"presentation\"\n        className=\"!bg-transparent hover:!bg-transparent pointer-events-none\"\n      >\n        {children}\n      </MenuItem>\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n})\nDropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName\n\n// ── CheckboxItem ──\ninterface DropdownMenuCheckboxItemProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>, 'children'> {\n  children: React.ReactNode\n  /** 左側 icon */\n  startIcon?: LucideIcon\n  /** 次要說明文字 */\n  description?: React.ReactNode\n}\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n  DropdownMenuCheckboxItemProps\n>(({ className, children, startIcon, description, checked, disabled, ...props }, ref) => {\n  const size = useRowSize()\n\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      ref={ref}\n      checked={checked}\n      disabled={disabled}\n      onSelect={(e) => e.preventDefault()}\n      className={cn(radixItemClass, className)}\n      {...props}\n    >\n      <MenuItem\n        size={size}\n        checkbox\n        checked={!!checked}\n        startIcon={startIcon}\n        description={description}\n        disabled={disabled}\n        role=\"presentation\"\n        className=\"!bg-transparent hover:!bg-transparent pointer-events-none\"\n      >\n        {children}\n      </MenuItem>\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n})\nDropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName\n\n// ── Label（群組標題）──\nconst DropdownMenuLabel = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Label>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>\n>(({ className, children, ...props }, ref) => {\n  const size = useRowSize()\n  return (\n    <DropdownMenuPrimitive.Label\n      ref={ref}\n      className={cn('outline-none', className)}\n      {...props}\n    >\n      <MenuItem\n        size={size}\n        header\n        role=\"presentation\"\n        className=\"pointer-events-none\"\n      >\n        {children}\n      </MenuItem>\n    </DropdownMenuPrimitive.Label>\n  )\n})\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\n// ── Separator ──\nconst DropdownMenuSeparator = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <DropdownMenuPrimitive.Separator\n    ref={ref}\n    className={cn(\"my-2 h-px bg-divider\", className)}\n    {...props}\n  />\n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\n// ── RadioItem（單選，排序方式等）──\n// Radix handles checked state; visual用 MenuItem 的 selected highlight。\ninterface DropdownMenuRadioItemProps\n  extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> {\n  /** Prefix icon(LucideIcon) */\n  startIcon?: LucideIcon\n  /** 次要說明文字 */\n  description?: React.ReactNode\n}\n\nconst DropdownMenuRadioItem = React.forwardRef<\n  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,\n  DropdownMenuRadioItemProps\n>(({ className, children, startIcon, description, disabled, ...props }, ref) => {\n  const size = useRowSize()\n\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      ref={ref}\n      disabled={disabled}\n      onSelect={(e) => e.preventDefault()}\n      className={cn(radixItemClass, 'data-[state=checked]:[&>*]:bg-neutral-selected', className)}\n      {...props}\n    >\n      <MenuItem\n        size={size}\n        startIcon={startIcon}\n        description={description}\n        disabled={disabled}\n        role=\"presentation\"\n        className=\"!bg-transparent hover:!bg-transparent pointer-events-none\"\n      >\n        {children}\n      </MenuItem>\n    </DropdownMenuPrimitive.RadioItem>\n  )\n})\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\n// ── Shortcut（鍵盤快捷鍵提示，ml-auto 靠右）──\n// 作為 MenuItem children 的後綴,視覺為 fg-muted 小字。\nconst DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (\n  <span\n    className={cn('ml-auto text-footnote text-fg-muted tracking-shortcut', className)}\n    {...props}\n  />\n)\nDropdownMenuShortcut.displayName = 'DropdownMenuShortcut'\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 dropdownMenuMeta = {\n  component: 'DropdownMenu',\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-neutral-hover', 'bg-surface-raised', 'bg-transparent'],\n    fg: ['text-fg-disabled', 'text-fg-muted'],\n    ring: [],\n  },\n} as const\n\nexport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuGroup,\n  DropdownMenuPortal,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuShortcut,\n  floatingLayerClass,\n}\nexport type { SizeKey, DropdownMenuItemProps }\n"],"names":["ROW_ICON_SIZE"],"mappings":";;;;;;;;;AAyCA,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAKV,MAAM,YAAYA;AAIlB,MAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAGV,MAAM,eAAe,sBAAsB;AAC3C,MAAM,sBAAsB,MAAM,WAGhC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,sBAAsB;AAAA,EAAtB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,gBAAgB,SAAS;AAAA,IACtC,GAAG;AAAA,EAAA;AACN,CACD;AACD,oBAAoB,cAAc,sBAAsB,QAAQ;AAkBhE,MAAM,oBAAoB,MAAM,WAG9B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,sBAAsB;AAAA,EAAtB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,6DAA6D,SAAS;AAAA,IACnF,GAAG;AAAA,EAAA;AACN,CACD;AACD,kBAAkB,cAAc;AAEhC,MAAM,qBAAqB,sBAAsB;AACjD,MAAM,kBAAkB,sBAAsB;AAC9C,MAAM,yBAAyB,sBAAsB;AAYrD,MAAM,sBAAsB,MAAM,WAGhC,CAAC,EAAE,WAAW,OAAO,MAAM,aAAa,qBAAqB,mBAAmB,2BAA2B,QAAQ,SAAS,UAAU,WAAW,UAAU,GAAG,MAAA,GAAS,QACvK,oBAAC,sBAAsB,QAAtB,EACC,UAAA;AAAA,EAAC,sBAAsB;AAAA,EAAtB;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB,CAAC,MAAM,EAAE,eAAA;AAAA,IAC3B,WAAW,GAAG,oBAAoB,CAAC,aAAa,QAAQ,SAAS;AAAA,IACjE,OAAO;AAAA,MACL,WAAW;AAAA,MACX,UAAU,YAAY;AAAA,MACtB;AAAA,IAAA;AAAA,IAED,GAAG;AAAA,IAEJ,UAAA,oBAAC,iBAAA,EAAgB,OAAO,MACrB,UAAA;AAAA;AAAA;AAAA,MAGC,oBAAC,cAAW,WAAU,mBACpB,8BAAC,OAAA,EAAI,WAAU,QAAQ,SAAA,CAAS,EAAA,CAClC;AAAA,QAEA,SAAA,CAEJ;AAAA,EAAA;AACF,GACF,CACD;AACD,oBAAoB,cAAc,sBAAsB,QAAQ;AAGhE,MAAM,yBAAyB,MAAM,WAGnC,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC5C,QAAM,OAAO,WAAA;AACb,SACE;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACC;AAAA,MACA,YAAY;AAAA,MACZ,WAAW,GAAG,oBAAoB,QAAQ,SAAS;AAAA,MACnD,OAAO,EAAE,WAAW,wBAAwB,UAAU,IAAA;AAAA,MACrD,GAAG;AAAA,MAEJ,UAAA,oBAAC,iBAAA,EAAgB,OAAO,MACrB,SAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;AACD,uBAAuB,cAAc,sBAAsB,WAAW;AAGtE,SAAS,gBACP,MACA,OACA,SACA,UAC6B;AAC7B,QAAM,UAAU;AAChB,MAAI,CAAC,SAAS,CAAC,WAAW,CAAC,SAAU,QAAO;AAC5C,QAAM,SAAS,UAAU,IAAI;AAC7B,SACE,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA;AAAA,IACA,+BAAY,SAAA,EAAQ,MAAM,QAAQ,WAAU,iBAAgB,eAAW,MAAC;AAAA,IACxE,YAAY,oBAAC,QAAA,EAAK,WAAU,8BAA8B,UAAA,SAAA,CAAS;AAAA,EAAA,GACtE;AAEJ;AAwBA,MAAM,mBAAmB,MAAM,WAG7B,CAAC,EAAE,WAAW,UAAU,WAAW,QAAQ,aAAa,KAAK,OAAO,SAAS,UAAU,UAAU,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC/H,QAAM,OAAO,WAAA;AACb,QAAM,aAAa,gBAAgB,MAAM,OAAO,SAAS,QAAQ;AAEjE,SACE;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,YAAY;AAAA,QACZ;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UAEA,MAAK;AAAA,UACL,WAAU;AAAA,UAET;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,CAAC;AACD,iBAAiB,cAAc,sBAAsB,KAAK;AAc1D,MAAM,yBAAyB,MAAM,WAGnC,CAAC,EAAE,WAAW,UAAU,WAAW,OAAO,OAAO,GAAG,MAAA,GAAS,QAAQ;AACrE,QAAM,OAAO,WAAA;AACb,QAAM,SAAS,UAAU,IAAI;AAG7B,QAAM,aACJ,qBAAC,OAAA,EAAI,WAAU,2BACZ,UAAA;AAAA,IAAA,SAAS,oBAAC,QAAA,EAAK,WAAU,iBAAiB,UAAA,OAAM;AAAA,IAChD;AAAA,IACD,oBAAC,cAAA,EAAa,MAAM,QAAQ,WAAU,gBAAA,CAAgB;AAAA,EAAA,GACxD;AAGF,SACE;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,WAAU;AAAA,UAET;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,CAAC;AACD,uBAAuB,cAAc,sBAAsB,WAAW;AAYtE,MAAM,2BAA2B,MAAM,WAGrC,CAAC,EAAE,WAAW,UAAU,WAAW,aAAa,SAAS,UAAU,GAAG,MAAA,GAAS,QAAQ;AACvF,QAAM,OAAO,WAAA;AAEb,SACE;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,CAAC,MAAM,EAAE,eAAA;AAAA,MACnB,WAAW,GAAG,gBAAgB,SAAS;AAAA,MACtC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,UAAQ;AAAA,UACR,SAAS,CAAC,CAAC;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,WAAU;AAAA,UAET;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,CAAC;AACD,yBAAyB,cAAc,sBAAsB,aAAa;AAG1E,MAAM,oBAAoB,MAAM,WAG9B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC5C,QAAM,OAAO,WAAA;AACb,SACE;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACC;AAAA,MACA,WAAW,GAAG,gBAAgB,SAAS;AAAA,MACtC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,QAAM;AAAA,UACN,MAAK;AAAA,UACL,WAAU;AAAA,UAET;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,CAAC;AACD,kBAAkB,cAAc,sBAAsB,MAAM;AAG5D,MAAM,wBAAwB,MAAM,WAGlC,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC,sBAAsB;AAAA,EAAtB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,wBAAwB,SAAS;AAAA,IAC9C,GAAG;AAAA,EAAA;AACN,CACD;AACD,sBAAsB,cAAc,sBAAsB,UAAU;AAYpE,MAAM,wBAAwB,MAAM,WAGlC,CAAC,EAAE,WAAW,UAAU,WAAW,aAAa,UAAU,GAAG,MAAA,GAAS,QAAQ;AAC9E,QAAM,OAAO,WAAA;AAEb,SACE;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACC;AAAA,MACA;AAAA,MACA,UAAU,CAAC,MAAM,EAAE,eAAA;AAAA,MACnB,WAAW,GAAG,gBAAgB,kDAAkD,SAAS;AAAA,MACxF,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,MAAK;AAAA,UACL,WAAU;AAAA,UAET;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,CAAC;AACD,sBAAsB,cAAc,sBAAsB,UAAU;AAIpE,MAAM,uBAAuB,CAAC,EAAE,WAAW,GAAG,YAC5C;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,yDAAyD,SAAS;AAAA,IAC/E,GAAG;AAAA,EAAA;AACN;AAEF,qBAAqB,cAAc;AAI5B,MAAM,mBAAmB;AAAA,EAC9B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAC,oBAAoB,qBAAqB,gBAAgB;AAAA,IAC9D,IAAI,CAAC,oBAAoB,eAAe;AAAA,IACxC,MAAM,CAAA;AAAA,EAAC;AAEX;"}

package/dist/components/Empty/empty.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import type { LucideIcon } from 'lucide-react';
+/**
+ * Empty — 空狀態視覺元件
+ *
+ * 居中垂直堆疊:icon(Avatar) → title → description → action。
+ * 所有 slot 皆可選,預設只需 description。
+ *
+ * 間距固定,不隨 density 變（Empty 是展示性元件,不是工作區域元件）:
+ *   icon → text = mb-4（16px）
+ *   desc → action = mt-6（24px）
+ *   title → desc = `var(--item-gap-label-desc)`（token,預設 2px,item-anatomy SSOT）
+ *
+ * Outer padding 由 consumer 容器決定(py-12 / py-6 / py-16 等）。
+ */
+export interface EmptyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** LucideIcon → 自動包 Avatar 48px neutral;ReactElement → 原樣渲染 */
+    icon?: LucideIcon | React.ReactElement;
+    /** 標題(可選,font-medium,適用於首次引導) */
+    title?: string;
+    /** 說明文字 */
+    description?: string;
+    /** 行動按鈕(可選) */
+    action?: React.ReactNode;
+}
+declare const Empty: React.ForwardRefExoticComponent<EmptyProps & React.RefAttributes<HTMLDivElement>>;
+export declare const emptyMeta: {
+    readonly component: "Empty";
+    readonly family: null;
+    readonly variants: {};
+    readonly sizes: {};
+    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly tokens: {
+        readonly bg: readonly [];
+        readonly fg: readonly ["text-fg-muted", "text-fg-secondary", "text-foreground"];
+        readonly ring: readonly [];
+    };
+};
+export { Empty };
+//# sourceMappingURL=empty.d.ts.map

package/dist/components/Empty/empty.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty.d.ts","sourceRoot":"","sources":["../../../src/components/Empty/empty.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAK9C;;;;;;;;;;;;GAYG;AAEH,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,+DAA+D;IAC/D,IAAI,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,YAAY,CAAA;IACtC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe;IACf,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAED,QAAA,MAAM,KAAK,mFAsDV,CAAA;AAKD,eAAO,MAAM,SAAS;;;;;;;;;;;CAeZ,CAAA;AAEV,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/Empty/empty.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { Avatar } from "../Avatar/avatar.js";
+import { useRowSize } from "../../patterns/element-anatomy/item-anatomy.js";
+const Empty = React.forwardRef(
+  ({ icon, title, description, action, className, ...props }, ref) => {
+    const rowSize = useRowSize("md");
+    const descFont = rowSize === "lg" ? "text-body-lg" : "text-body";
+    let iconElement = null;
+    if (icon) {
+      if (React.isValidElement(icon)) {
+        iconElement = icon;
+      } else {
+        const Icon = icon;
+        iconElement = /* @__PURE__ */ jsx(Avatar, { icon: Icon, size: 48, color: "neutral" });
+      }
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-col items-center text-center", className),
+        ...props,
+        children: [
+          iconElement && /* @__PURE__ */ jsx("div", { className: "mb-4", children: iconElement }),
+          title && /* @__PURE__ */ jsx("span", { className: "text-body-lg font-medium text-foreground", children: title }),
+          description && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                // 字體跟 RowSizeContext 對齊:sm/md = text-body (14px),lg = text-body-lg (16px)
+                // 在 menu 內自動對齊 menu items;standalone 時 fallback text-body
+                descFont,
+                title || action ? "text-fg-secondary" : "text-fg-muted",
+                // Empty title 永遠 body-lg(16)→ 用 reading-lg token(label tier 決定)
+                title && "mt-[var(--item-gap-label-desc-reading-lg)]"
+              ),
+              children: description
+            }
+          ),
+          action && /* @__PURE__ */ jsx("div", { className: "mt-6", children: action })
+        ]
+      }
+    );
+  }
+);
+Empty.displayName = "Empty";
+const emptyMeta = {
+  component: "Empty",
+  family: null,
+  // non-family composite / overlay / layout
+  variants: {},
+  sizes: {},
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: [],
+    fg: ["text-fg-muted", "text-fg-secondary", "text-foreground"],
+    ring: []
+  }
+};
+export {
+  Empty,
+  emptyMeta
+};
+//# sourceMappingURL=empty.js.map

package/dist/components/Empty/empty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty.js","sources":["../../../src/components/Empty/empty.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar } from '@/design-system/components/Avatar/avatar'\nimport { useRowSize } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n/**\n * Empty — 空狀態視覺元件\n *\n * 居中垂直堆疊:icon(Avatar) → title → description → action。\n * 所有 slot 皆可選,預設只需 description。\n *\n * 間距固定,不隨 density 變（Empty 是展示性元件,不是工作區域元件）:\n *   icon → text = mb-4（16px）\n *   desc → action = mt-6（24px）\n *   title → desc = `var(--item-gap-label-desc)`（token,預設 2px,item-anatomy SSOT）\n *\n * Outer padding 由 consumer 容器決定(py-12 / py-6 / py-16 等）。\n */\n\nexport interface EmptyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** LucideIcon → 自動包 Avatar 48px neutral;ReactElement → 原樣渲染 */\n  icon?: LucideIcon | React.ReactElement\n  /** 標題(可選,font-medium,適用於首次引導) */\n  title?: string\n  /** 說明文字 */\n  description?: string\n  /** 行動按鈕(可選) */\n  action?: React.ReactNode\n}\n\nconst Empty = React.forwardRef<HTMLDivElement, EmptyProps>(\n  ({ icon, title, description, action, className, ...props }, ref) => {\n    // 字體 tier:讀 RowSizeContext(menu 內自動對齊 menu items 的字體）\n    // 沒有 context(standalone）→ fallback 'md' → text-body (14px)\n    const rowSize = useRowSize('md')\n    const descFont = rowSize === 'lg' ? 'text-body-lg' : 'text-body'\n\n    // Icon rendering: ReactElement → as-is;LucideIcon(component,包括 forwardRef 物件)→ 包 Avatar\n    // 注意:Lucide v0.577+ icons 是 forwardRef 物件(`typeof === 'object'`),不是 function。\n    // 必用 React.isValidElement 判斷 element vs component(typeof 會把 forwardRef 物件誤歸 object)。\n    let iconElement: React.ReactNode = null\n    if (icon) {\n      if (React.isValidElement(icon)) {\n        iconElement = icon\n      } else {\n        const Icon = icon as LucideIcon\n        iconElement = <Avatar icon={Icon} size={48} color=\"neutral\" />\n      }\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn('flex flex-col items-center text-center', className)}\n        {...props}\n      >\n        {iconElement && (\n          <div className=\"mb-4\">{iconElement}</div>\n        )}\n        {title && (\n          <span className=\"text-body-lg font-medium text-foreground\">\n            {title}\n          </span>\n        )}\n        {description && (\n          <span\n            className={cn(\n              // 字體跟 RowSizeContext 對齊:sm/md = text-body (14px),lg = text-body-lg (16px)\n              // 在 menu 內自動對齊 menu items;standalone 時 fallback text-body\n              descFont,\n              (title || action) ? 'text-fg-secondary' : 'text-fg-muted',\n              // Empty title 永遠 body-lg(16)→ 用 reading-lg token(label tier 決定)\n              title && 'mt-[var(--item-gap-label-desc-reading-lg)]',\n            )}\n          >\n            {description}\n          </span>\n        )}\n        {action && (\n          <div className=\"mt-6\">{action}</div>\n        )}\n      </div>\n    )\n  },\n)\nEmpty.displayName = 'Empty'\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 emptyMeta = {\n  component: 'Empty',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: [],\n    fg: ['text-fg-muted', 'text-fg-secondary', 'text-foreground'],\n    ring: [],\n  },\n} as const\n\nexport { Empty }\n"],"names":[],"mappings":";;;;;AA+BA,MAAM,QAAQ,MAAM;AAAA,EAClB,CAAC,EAAE,MAAM,OAAO,aAAa,QAAQ,WAAW,GAAG,MAAA,GAAS,QAAQ;AAGlE,UAAM,UAAU,WAAW,IAAI;AAC/B,UAAM,WAAW,YAAY,OAAO,iBAAiB;AAKrD,QAAI,cAA+B;AACnC,QAAI,MAAM;AACR,UAAI,MAAM,eAAe,IAAI,GAAG;AAC9B,sBAAc;AAAA,MAChB,OAAO;AACL,cAAM,OAAO;AACb,0CAAe,QAAA,EAAO,MAAM,MAAM,MAAM,IAAI,OAAM,WAAU;AAAA,MAC9D;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,0CAA0C,SAAS;AAAA,QAChE,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,eACC,oBAAC,OAAA,EAAI,WAAU,QAAQ,UAAA,aAAY;AAAA,UAEpC,SACC,oBAAC,QAAA,EAAK,WAAU,4CACb,UAAA,OACH;AAAA,UAED,eACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA;AAAA;AAAA,gBAGT;AAAA,gBACC,SAAS,SAAU,sBAAsB;AAAA;AAAA,gBAE1C,SAAS;AAAA,cAAA;AAAA,cAGV,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJ,UACC,oBAAC,OAAA,EAAI,WAAU,QAAQ,UAAA,OAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAItC;AACF;AACA,MAAM,cAAc;AAIb,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAC,iBAAiB,qBAAqB,iBAAiB;AAAA,IAC5D,MAAM,CAAA;AAAA,EAAC;AAEX;"}