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

package/dist/components/Toast/toast.d.ts

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { type NoticeVariant } from '../../components/Notice/notice';
+/**
+ * Toast — 非阻斷式浮動通知
+ *
+ * ── Container 三層結構（所有 variant 統一） ──
+ *
+ * 1. Shadow wrapper: rounded-lg + elevation-200（永遠在頁面 theme 解析）
+ * 2. Bg layer: bg-{color}（有色相 variant 在頁面 theme 解析）
+ * 3. Theme layer: data-theme + text-foreground（content token re-resolve）
+ *
+ * neutral/success(inverse): bg + theme 同層（bg-surface-raised 需要跟 data-theme 一起翻轉）
+ * info/error(dark): bg 在 outer,theme 在 inner
+ * warning(light always): bg 在 outer,theme="light" 在 inner
+ */
+export type ToastVariant = NoticeVariant;
+export interface ToastOptions {
+    variant?: ToastVariant;
+    title: string;
+    description?: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    duration?: number;
+}
+export declare function toast(options: ToastOptions): string | number;
+export interface ToasterProps {
+    position?: 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
+}
+declare const Toaster: React.ForwardRefExoticComponent<ToasterProps & React.RefAttributes<HTMLDivElement>>;
+export declare const toastMeta: {
+    readonly component: "Toast";
+    readonly family: null;
+    readonly variants: {
+        readonly neutral: {
+            readonly when: "非狀態通知;一般 announcement / tip";
+        };
+        readonly info: {
+            readonly when: "資訊性提示(新版本 / 同步完成)";
+        };
+        readonly success: {
+            readonly when: "成功確認(已寄送 / 付款完成)";
+        };
+        readonly warning: {
+            readonly when: "可恢復警告(未儲存 / 連線不穩)";
+        };
+        readonly error: {
+            readonly when: "錯誤(匯入失敗 / 權限不足);action prop 可加重試";
+        };
+    };
+    readonly sizes: {};
+    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly tokens: {
+        readonly bg: readonly ["bg-error", "bg-info", "bg-surface-raised", "bg-warning"];
+        readonly fg: readonly ["text-foreground"];
+        readonly ring: readonly [];
+    };
+};
+export { Toaster };
+//# sourceMappingURL=toast.d.ts.map

package/dist/components/Toast/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAA2B,KAAK,aAAa,EAAE,MAAM,0CAA0C,CAAA;AAGtG;;;;;;;;;;;;GAYG;AAGH,MAAM,MAAM,YAAY,GAAG,aAAa,CAAA;AAExC,MAAM,WAAW,YAAY;IAC3B,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAA;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAqDD,wBAAgB,KAAK,CAAC,OAAO,EAAE,YAAY,mBAG1C;AAED,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,aAAa,GAAG,cAAc,GAAG,eAAe,CAAA;CACtG;AAMD,QAAA,MAAM,OAAO,qFAUZ,CAAA;AAKD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBZ,CAAA;AAEV,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/dist/components/Toast/toast.js

@@ -0,0 +1,76 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Toaster as Toaster$1, toast as toast$1 } from "sonner";
+import { useInverseTheme, Notice } from "../Notice/notice.js";
+import { Button } from "../Button/button.js";
+function ToastInner({
+  id,
+  variant = "neutral",
+  action,
+  ...rest
+}) {
+  const inverseTheme = useInverseTheme();
+  const isInverse = variant === "neutral" || variant === "success";
+  const dismiss = () => toast$1.dismiss(id);
+  const actionButton = action ? /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xs", onClick: action.onClick, children: action.label }) : void 0;
+  const isCritical = variant === "error" || variant === "warning";
+  const liveRole = isCritical ? "alert" : "status";
+  const liveLevel = isCritical ? "assertive" : "polite";
+  if (isInverse) {
+    return /* @__PURE__ */ jsx("div", { role: liveRole, "aria-live": liveLevel, className: "rounded-lg overflow-hidden", style: { boxShadow: "var(--elevation-200)" }, children: /* @__PURE__ */ jsx("div", { "data-theme": inverseTheme, className: "bg-surface-raised text-foreground", children: /* @__PURE__ */ jsx(
+      Notice,
+      {
+        variant,
+        iconClassName: variant === "success" ? "text-success" : void 0,
+        endContent: actionButton,
+        onDismiss: dismiss,
+        ...rest
+      }
+    ) }) });
+  }
+  const bg = variant === "warning" ? "bg-warning" : variant === "error" ? "bg-error" : "bg-info";
+  const theme = variant === "warning" ? "light" : "dark";
+  return /* @__PURE__ */ jsx("div", { role: liveRole, "aria-live": liveLevel, className: "rounded-lg overflow-hidden", style: { boxShadow: "var(--elevation-200)" }, children: /* @__PURE__ */ jsx("div", { className: bg, children: /* @__PURE__ */ jsx("div", { "data-theme": theme, className: "text-foreground", children: /* @__PURE__ */ jsx(Notice, { variant, endContent: actionButton, onDismiss: dismiss, ...rest }) }) }) });
+}
+function toast(options) {
+  const { duration = 4e3, ...rest } = options;
+  return toast$1.custom((id) => /* @__PURE__ */ jsx(ToastInner, { id, ...rest }), { duration });
+}
+const Toaster = React.forwardRef(
+  ({ position = "bottom-right", ...props }, _ref) => {
+    return /* @__PURE__ */ jsx(
+      Toaster$1,
+      {
+        position,
+        toastOptions: { unstyled: true, className: "w-[360px]" },
+        ...props
+      }
+    );
+  }
+);
+Toaster.displayName = "Toaster";
+const toastMeta = {
+  component: "Toast",
+  family: null,
+  // non-family composite / overlay / layout
+  variants: {
+    neutral: { when: "非狀態通知;一般 announcement / tip" },
+    info: { when: "資訊性提示(新版本 / 同步完成)" },
+    success: { when: "成功確認(已寄送 / 付款完成)" },
+    warning: { when: "可恢復警告(未儲存 / 連線不穩)" },
+    error: { when: "錯誤(匯入失敗 / 權限不足);action prop 可加重試" }
+  },
+  sizes: {},
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: ["bg-error", "bg-info", "bg-surface-raised", "bg-warning"],
+    fg: ["text-foreground"],
+    ring: []
+  }
+};
+export {
+  Toaster,
+  toast,
+  toastMeta
+};
+//# sourceMappingURL=toast.js.map

package/dist/components/Toast/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sources":["../../../src/components/Toast/toast.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Toaster as SonnerToaster, toast as sonnerToast } from 'sonner'\nimport { Notice, useInverseTheme, type NoticeVariant } from '@/design-system/components/Notice/notice'\nimport { Button } from '@/design-system/components/Button/button'\n\n/**\n * Toast — 非阻斷式浮動通知\n *\n * ── Container 三層結構（所有 variant 統一） ──\n *\n * 1. Shadow wrapper: rounded-lg + elevation-200（永遠在頁面 theme 解析）\n * 2. Bg layer: bg-{color}（有色相 variant 在頁面 theme 解析）\n * 3. Theme layer: data-theme + text-foreground（content token re-resolve）\n *\n * neutral/success(inverse): bg + theme 同層（bg-surface-raised 需要跟 data-theme 一起翻轉）\n * info/error(dark): bg 在 outer,theme 在 inner\n * warning(light always): bg 在 outer,theme=\"light\" 在 inner\n */\n\n// code-quality-allow: dead-export — public API surface — consumer-exposed for future use\nexport type ToastVariant = NoticeVariant\n\nexport interface ToastOptions {\n  variant?: ToastVariant\n  title: string\n  description?: string\n  action?: { label: string; onClick: () => void }\n  duration?: number\n}\n\nfunction ToastInner({\n  id,\n  variant = 'neutral',\n  action,\n  ...rest\n}: ToastOptions & { id: string | number }) {\n  const inverseTheme = useInverseTheme()\n  const isInverse = variant === 'neutral' || variant === 'success'\n  const dismiss = () => sonnerToast.dismiss(id)\n\n  const actionButton = action ? (\n    <Button variant=\"tertiary\" size=\"xs\" onClick={action.onClick}>{action.label}</Button>\n  ) : undefined\n\n  // ── Live region 由 outer Toast wrapper 擁有(WAI-ARIA + spec L59-60 canonical) ──\n  // Notice(inner layout)不再帶 role,避免 nested live region。\n  // - error / warning → role=\"alert\" + aria-live=\"assertive\"(中斷朗讀)\n  // - info / success / neutral → role=\"status\" + aria-live=\"polite\"(空閒朗讀)\n  const isCritical = variant === 'error' || variant === 'warning'\n  const liveRole = isCritical ? 'alert' : 'status'\n  const liveLevel = isCritical ? 'assertive' : 'polite'\n\n  // ── 1. Shadow wrapper（統一,永遠在頁面 theme） ──\n  // ── 2+3. Bg + theme layer ──\n\n  if (isInverse) {\n    // bg-surface-raised 需要跟 data-theme 同層翻轉\n    return (\n      <div role={liveRole} aria-live={liveLevel} className=\"rounded-lg overflow-hidden\" style={{ boxShadow: 'var(--elevation-200)' }}>\n        <div data-theme={inverseTheme} className=\"bg-surface-raised text-foreground\">\n          <Notice variant={variant} iconClassName={variant === 'success' ? 'text-success' : undefined}\n            endContent={actionButton} onDismiss={dismiss} {...rest} />\n        </div>\n      </div>\n    )\n  }\n\n  const bg = variant === 'warning' ? 'bg-warning' : variant === 'error' ? 'bg-error' : 'bg-info'\n  const theme = variant === 'warning' ? 'light' : 'dark'\n\n  return (\n    <div role={liveRole} aria-live={liveLevel} className=\"rounded-lg overflow-hidden\" style={{ boxShadow: 'var(--elevation-200)' }}>\n      <div className={bg}>\n        <div data-theme={theme} className=\"text-foreground\">\n          <Notice variant={variant} endContent={actionButton} onDismiss={dismiss} {...rest} />\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport function toast(options: ToastOptions) {\n  const { duration = 4000, ...rest } = options\n  return sonnerToast.custom((id) => <ToastInner id={id} {...rest} />, { duration })\n}\n\nexport interface ToasterProps {\n  position?: 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center'\n}\n\n// shadcn canonical:forwardRef + displayName 統一。Sonner Toaster portal-renders\n// 到 document body,ref 對 Toaster 本身無實際 DOM 節點可接(portal 逃逸),\n// 但保留 forwardRef 簽名以符合 DS 統一 API(consumer 可 typecheck 傳 ref,\n// 與其他 DS 元件一致)。\nconst Toaster = React.forwardRef<HTMLDivElement, ToasterProps>(\n  ({ position = 'bottom-right', ...props }, _ref) => {\n    return (\n      <SonnerToaster\n        position={position}\n        toastOptions={{ unstyled: true, className: 'w-[360px]' }}\n        {...props}\n      />\n    )\n  },\n)\nToaster.displayName = 'Toaster'\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 toastMeta = {\n  component: 'Toast',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n    neutral: { when: '非狀態通知;一般 announcement / tip' },\n    info: { when: '資訊性提示(新版本 / 同步完成)' },\n    success: { when: '成功確認(已寄送 / 付款完成)' },\n    warning: { when: '可恢復警告(未儲存 / 連線不穩)' },\n    error: { when: '錯誤(匯入失敗 / 權限不足);action prop 可加重試' },\n  },\n  sizes: {},\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-error', 'bg-info', 'bg-surface-raised', 'bg-warning'],\n    fg: ['text-foreground'],\n    ring: [],\n  },\n} as const\n\nexport { Toaster }\n"],"names":["sonnerToast","SonnerToaster"],"mappings":";;;;;AA8BA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAA2C;AACzC,QAAM,eAAe,gBAAA;AACrB,QAAM,YAAY,YAAY,aAAa,YAAY;AACvD,QAAM,UAAU,MAAMA,QAAY,QAAQ,EAAE;AAE5C,QAAM,eAAe,SACnB,oBAAC,QAAA,EAAO,SAAQ,YAAW,MAAK,MAAK,SAAS,OAAO,SAAU,UAAA,OAAO,OAAM,IAC1E;AAMJ,QAAM,aAAa,YAAY,WAAW,YAAY;AACtD,QAAM,WAAW,aAAa,UAAU;AACxC,QAAM,YAAY,aAAa,cAAc;AAK7C,MAAI,WAAW;AAEb,+BACG,OAAA,EAAI,MAAM,UAAU,aAAW,WAAW,WAAU,8BAA6B,OAAO,EAAE,WAAW,0BACpG,UAAA,oBAAC,SAAI,cAAY,cAAc,WAAU,qCACvC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAO;AAAA,QAAkB,eAAe,YAAY,YAAY,iBAAiB;AAAA,QAChF,YAAY;AAAA,QAAc,WAAW;AAAA,QAAU,GAAG;AAAA,MAAA;AAAA,IAAA,GACtD,EAAA,CACF;AAAA,EAEJ;AAEA,QAAM,KAAK,YAAY,YAAY,eAAe,YAAY,UAAU,aAAa;AACrF,QAAM,QAAQ,YAAY,YAAY,UAAU;AAEhD,SACE,oBAAC,OAAA,EAAI,MAAM,UAAU,aAAW,WAAW,WAAU,8BAA6B,OAAO,EAAE,WAAW,uBAAA,GACpG,UAAA,oBAAC,SAAI,WAAW,IACd,UAAA,oBAAC,OAAA,EAAI,cAAY,OAAO,WAAU,mBAChC,8BAAC,QAAA,EAAO,SAAkB,YAAY,cAAc,WAAW,SAAU,GAAG,MAAM,EAAA,CACpF,GACF,GACF;AAEJ;AAEO,SAAS,MAAM,SAAuB;AAC3C,QAAM,EAAE,WAAW,KAAM,GAAG,SAAS;AACrC,SAAOA,QAAY,OAAO,CAAC,OAAO,oBAAC,YAAA,EAAW,IAAS,GAAG,KAAA,CAAM,GAAI,EAAE,SAAA,CAAU;AAClF;AAUA,MAAM,UAAU,MAAM;AAAA,EACpB,CAAC,EAAE,WAAW,gBAAgB,GAAG,MAAA,GAAS,SAAS;AACjD,WACE;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,cAAc,EAAE,UAAU,MAAM,WAAW,YAAA;AAAA,QAC1C,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AACA,QAAQ,cAAc;AAIf,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU;AAAA,IACR,SAAS,EAAE,MAAM,8BAAA;AAAA,IACjB,MAAM,EAAE,MAAM,oBAAA;AAAA,IACd,SAAS,EAAE,MAAM,mBAAA;AAAA,IACjB,SAAS,EAAE,MAAM,oBAAA;AAAA,IACjB,OAAO,EAAE,MAAM,mCAAA;AAAA,EAAmC;AAAA,EAEpD,OAAO,CAAA;AAAA,EACP,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAC,YAAY,WAAW,qBAAqB,YAAY;AAAA,IAC7D,IAAI,CAAC,iBAAiB;AAAA,IACtB,MAAM,CAAA;AAAA,EAAC;AAEX;"}

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

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

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

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

package/dist/components/Tooltip/index.js

@@ -0,0 +1,9 @@
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, tooltipMeta } from "./tooltip.js";
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  tooltipMeta
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/Tooltip/tooltip.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+declare const TooltipProvider: ({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) => import("react/jsx-runtime").JSX.Element;
+declare const Tooltip: ({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) => import("react/jsx-runtime").JSX.Element;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const tooltipMeta: {
+    readonly component: "Tooltip";
+    readonly family: null;
+    readonly variants: {};
+    readonly sizes: {};
+    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly tokens: {
+        readonly bg: readonly [];
+        readonly fg: readonly [];
+        readonly ring: readonly [];
+    };
+};
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/components/Tooltip/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAA;AAU3D,QAAA,MAAM,eAAe,GAAI,6BAAoD,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,4CAElI,CAAA;AAED,QAAA,MAAM,OAAO,GAAI,6BAAoD,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,4CAEtH,CAAA;AAED,QAAA,MAAM,cAAc,gHAA2B,CAAA;AAE/C,QAAA,MAAM,cAAc,gKAwBlB,CAAA;AAKF,eAAO,MAAM,WAAW;;;;;;;;;;;CAed,CAAA;AAEV,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/Tooltip/tooltip.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "../../lib/utils.js";
+import { OVERLAY_COLLISION_PADDING, OVERLAY_SIDE_OFFSET } from "../../tokens/elevation/overlay-geometry.js";
+import { HOVER_DELAY_PLAIN_MS } from "../../tokens/motion/motion.js";
+const TooltipProvider = ({ delayDuration = HOVER_DELAY_PLAIN_MS, ...props }) => /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration, ...props });
+const Tooltip = ({ delayDuration = HOVER_DELAY_PLAIN_MS, ...props }) => /* @__PURE__ */ jsx(TooltipPrimitive.Root, { delayDuration, ...props });
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipContent = React.forwardRef(({ className, sideOffset = OVERLAY_SIDE_OFFSET, collisionPadding = OVERLAY_COLLISION_PADDING, style, children, ...props }, ref) => (
+  // collisionPadding default 8px:避免 tooltip 貼 viewport 邊(Radix avoidCollisions 預設 true 但 padding 0 會貼邊)
+  // 對齊 HoverCard canonical 避免 viewport edge clipping
+  /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    TooltipPrimitive.Content,
+    {
+      ref,
+      sideOffset,
+      collisionPadding,
+      className: cn(
+        "z-50 overflow-hidden rounded-md px-3 py-2 text-body font-normal text-on-emphasis bg-tooltip max-w-[280px]",
+        "animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 motion-reduce:animate-none motion-reduce:zoom-in-100",
+        "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-tooltip-content-transform-origin)]",
+        className
+      ),
+      style: { boxShadow: "var(--elevation-200)", ...style },
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { "data-theme": "dark", className: "contents", children })
+    }
+  ) })
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+const tooltipMeta = {
+  component: "Tooltip",
+  family: null,
+  // non-family composite / overlay / layout
+  variants: {},
+  sizes: {},
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: [],
+    fg: [],
+    ring: []
+  }
+};
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  tooltipMeta
+};
+//# sourceMappingURL=tooltip.js.map

package/dist/components/Tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sources":["../../../src/components/Tooltip/tooltip.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\"\n\nimport { cn } from \"@/lib/utils\"\nimport { OVERLAY_SIDE_OFFSET, OVERLAY_COLLISION_PADDING } from \"@/design-system/tokens/elevation/overlay-geometry\"\nimport { HOVER_DELAY_PLAIN_MS } from \"@/design-system/tokens/motion/motion\"\n\n// 2026-05-18 ship per user 拍板 #3A:Tooltip Provider 預設 delayDuration 對齊 motion token SSOT。\n// Radix 預設 700ms 過保守(被 Material 150-200 / MUI 100 / Atlassian 300 集體驗證),DS 統一用\n// `--hover-delay-plain` (500ms,JS mirror `HOVER_DELAY_PLAIN_MS`)。Consumer 仍可 per-instance override。\n// 2026-05-21 D5 Phase B codex 抓 comment 200 vs token 500 drift → 註解 500ms 對齊 motion.css:27 SSOT。\nconst TooltipProvider = ({ delayDuration = HOVER_DELAY_PLAIN_MS, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) => (\n  <TooltipPrimitive.Provider delayDuration={delayDuration} {...props} />\n)\n\nconst Tooltip = ({ delayDuration = HOVER_DELAY_PLAIN_MS, ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) => (\n  <TooltipPrimitive.Root delayDuration={delayDuration} {...props} />\n)\n\nconst TooltipTrigger = TooltipPrimitive.Trigger\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(({ className, sideOffset = OVERLAY_SIDE_OFFSET, collisionPadding = OVERLAY_COLLISION_PADDING, style, children, ...props }, ref) => (\n  // collisionPadding default 8px:避免 tooltip 貼 viewport 邊(Radix avoidCollisions 預設 true 但 padding 0 會貼邊)\n  // 對齊 HoverCard canonical 避免 viewport edge clipping\n  <TooltipPrimitive.Portal>\n    <TooltipPrimitive.Content\n      ref={ref}\n      sideOffset={sideOffset}\n      collisionPadding={collisionPadding}\n      className={cn(\n        \"z-50 overflow-hidden rounded-md px-3 py-2 text-body font-normal text-on-emphasis bg-tooltip max-w-[280px]\",\n        \"animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 motion-reduce:animate-none motion-reduce:zoom-in-100\",\n        \"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\",\n        \"origin-[var(--radix-tooltip-content-transform-origin)]\",\n        className\n      )}\n      style={{ boxShadow: 'var(--elevation-200)', ...style }}\n      {...props}\n    >\n      <div data-theme=\"dark\" className=\"contents\">{children}</div>\n    </TooltipPrimitive.Content>\n  </TooltipPrimitive.Portal>\n))\nTooltipContent.displayName = TooltipPrimitive.Content.displayName\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const tooltipMeta = {\n  component: 'Tooltip',\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: [],\n    ring: [],\n  },\n} as const\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n"],"names":[],"mappings":";;;;;;AAWA,MAAM,kBAAkB,CAAC,EAAE,gBAAgB,sBAAsB,GAAG,MAAA,MAClE,oBAAC,iBAAiB,UAAjB,EAA0B,eAA+B,GAAG,MAAA,CAAO;AAGtE,MAAM,UAAU,CAAC,EAAE,gBAAgB,sBAAsB,GAAG,MAAA,MAC1D,oBAAC,iBAAiB,MAAjB,EAAsB,eAA+B,GAAG,MAAA,CAAO;AAGlE,MAAM,iBAAiB,iBAAiB;AAExC,MAAM,iBAAiB,MAAM,WAG3B,CAAC,EAAE,WAAW,aAAa,qBAAqB,mBAAmB,2BAA2B,OAAO,UAAU,GAAG,SAAS;AAAA;AAAA;AAAA,EAG3H,oBAAC,iBAAiB,QAAjB,EACC,UAAA;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,OAAO,EAAE,WAAW,wBAAwB,GAAG,MAAA;AAAA,MAC9C,GAAG;AAAA,MAEJ,8BAAC,OAAA,EAAI,cAAW,QAAO,WAAU,YAAY,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA,EACxD,CACF;AAAA,CACD;AACD,eAAe,cAAc,iBAAiB,QAAQ;AAI/C,MAAM,cAAc;AAAA,EACzB,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,CAAA;AAAA,IACJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}

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

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

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

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

package/dist/components/TreeView/index.js

@@ -0,0 +1,8 @@
+import { TreeItem, TreeView, treeItemVariants, treeViewMeta } from "./tree-view.js";
+export {
+  TreeItem,
+  TreeView,
+  treeItemVariants,
+  treeViewMeta
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/TreeView/tree-view.d.ts

@@ -0,0 +1,166 @@
+import * as React from 'react';
+import type { LucideIcon } from 'lucide-react';
+import { type InlineActionConfig } from '../../patterns/element-anatomy/item-anatomy';
+/**
+ * TreeView — 階層結構的遞迴元件
+ *
+ * 一個 TreeItem 就是一個 node——有 children 就可展開,沒有就是 leaf。
+ * 沒有第二個概念(沒有 TreeGroup)。
+ *
+ * TreeView 負責:
+ *   1. 遞迴渲染 + indent
+ *   2. 展開/收合狀態管理
+ *   3. 鍵盤導覽 + ARIA tree
+ *
+ * 它不管 node 裡面長什麼樣——icon、badge、status indicator 等
+ * 由 consumer 透過 props / slots 決定。
+ *
+ * 詳見 tree-view.spec.md。
+ */
+type SizeKey = 'sm' | 'md' | 'lg';
+type SelectionMode = 'single' | 'multiple' | 'none';
+/**
+ * TreeView 的使用脈絡,決定 item 的水平 padding:
+ * - `'sidebar'`:頁面側邊欄,用 `--layout-space-loose` token(md=16px / lg=24px,跟 density 連動)
+ * - `'menu'`:浮層選單 / dropdown,px-3(12px),對齊 MenuItem / DropdownMenu
+ */
+type TreeContext = 'sidebar' | 'menu';
+/** Drag drop position — 拖放目標的三種位置 */
+export type TreeDropPosition = 'before' | 'after' | 'inside';
+/** onDragEnd callback 的參數 */
+export interface TreeDragEndEvent {
+    /** 被拖曳的 node id */
+    sourceId: string;
+    /** 目標 node id */
+    targetId: string;
+    /** 放置位置:before(同層上方)/ after(同層下方)/ inside(成為子 node) */
+    position: TreeDropPosition;
+}
+export interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onDragEnd'> {
+    /** 元件尺寸,影響 node 高度、icon 大小、indent 寬度 */
+    size?: SizeKey;
+    /**
+     * 使用脈絡,決定 item 的水平 padding:
+     * - `'sidebar'`(預設):頁面側邊欄,px-2(8px)
+     * - `'menu'`:浮層選單 / dropdown,px-3(12px),對齊 MenuItem
+     */
+    context?: TreeContext;
+    /** 選取模式。預設 'single'(sidebar nav / stepper) */
+    selectionMode?: SelectionMode;
+    /** 點擊 label 時是否同時展開 children。預設 false(chevron 是展開的唯一控件) */
+    expandOnSelect?: boolean;
+    /** 受控:展開的 node id 集合 */
+    expandedIds?: Set<string>;
+    /** 受控:展開狀態變更 callback */
+    onExpandedChange?: (ids: Set<string>) => void;
+    /** 受控:選取的 node id 集合 */
+    selectedIds?: Set<string>;
+    /** 受控:選取狀態變更 callback */
+    onSelectedChange?: (ids: Set<string>) => void;
+    /** 非受控:預設展開的 node id 陣列 */
+    defaultExpandedIds?: string[];
+    /** 非受控:預設選取的 node id 陣列 */
+    defaultSelectedIds?: string[];
+    /**
+     * 啟用拖曳排序。預設 false。
+     * 啟用後每個 TreeItem 左側出現 drag handle(GripVertical icon),
+     * 拖曳時顯示 drop indicator(before / after / inside 三種位置)。
+     * Consumer 透過 `onDragEnd` callback 接收 reorder 事件,自行更新 data。
+     */
+    draggable?: boolean;
+    /** Drag 結束時觸發,提供 sourceId、targetId、position。Consumer 負責 reorder。 */
+    onDragEnd?: (event: TreeDragEndEvent) => void;
+    /** ARIA label */
+    'aria-label'?: string;
+}
+declare const TreeView: React.ForwardRefExoticComponent<TreeViewProps & React.RefAttributes<HTMLDivElement>>;
+declare const treeItemVariants: (props?: ({
+    size?: import("../../patterns/element-anatomy/item-anatomy").RowSize | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id'> {
+    /** 唯一 id。必填,用於 expand / select / keyboard 追蹤 */
+    id: string;
+    /** 主要文字 */
+    label: React.ReactNode;
+    /** 左側 icon(chevron 之後)。LucideIcon 型別,尺寸由 TreeView size 決定 */
+    icon?: LucideIcon;
+    /**
+     * Checkbox(多選模式,label 前方)。傳入 ReactNode(Checkbox 元件)。
+     * 位置:在 icon 之後、label 之前。
+     * 單選模式通常不需要(用 bg-neutral-selected 表達選中)。
+     */
+    checkbox?: React.ReactNode;
+    /**
+     * 右側 inline actions(suffix slot,宣告式 API)。對齊 `uiSize.spec.md`「Inline Action」
+     * 與 `SidebarMenuButton.inlineActions` 的同一條規格——TreeItem / SidebarMenuButton /
+     * 未來的 row primitive 全部用同一個 declarative API。
+     *
+     * Consumer 只宣告 intent,TreeItem 用 `<ItemInlineAction>` 自動渲染:
+     * - Icon 尺寸 = `ICON_SIZE[treeViewSize]`(自動)
+     * - Hover bg、tooltip、aria-label、cursor-pointer 自動處理
+     * - **不可以**手刻 button JSX(canonical 實作在 `item-layout.tsx`)
+     *
+     * ```tsx
+     * <TreeItem
+     *   id="inbox"
+     *   icon={Inbox}
+     *   label="Inbox"
+     *   inlineActions={[
+     *     { icon: MoreVertical, label: '更多', onClick: handleMore },
+     *     { icon: Plus,           label: '新增', onClick: handleAdd },
+     *   ]}
+     *   actionsReveal="hover"
+     * />
+     * ```
+     *
+     * 若需要永遠可見的 suffix(如 badge 計數),放在 `label` 內:
+     * ```tsx
+     * <TreeItem label={<>Inbox <Badge count={3} /></>} />
+     * ```
+     */
+    inlineActions?: InlineActionConfig[];
+    /**
+     * 右側 actions slot(ReactNode)— escape hatch 供 consumer 放自訂元素
+     * (如 DropdownMenu trigger / 自訂 popover / 多 tier 動作)。
+     *
+     * 跟 `inlineActions` 互斥(同時傳 `inlineActionsSlot` 會優先,`inlineActions` 被忽略)。
+     *
+     * 規則對齊 Input.endSlot canonical:90% case 用 `inlineActions` 宣告式 API,
+     * 10% config 表達不出時走 slot。視覺一致性由 consumer 負責(可使用 host 內部 helper
+     * — 但禁止 app-code 直接 import L3 primitive,見 `check_l3_primitive_import.sh`)。
+     */
+    inlineActionsSlot?: React.ReactNode;
+    /**
+     * Inline actions 的顯示模式:
+     * - `"hover"`(預設):row hover 或鍵盤 focus(focus-visible)時才淡入
+     * - `false`:常駐顯示
+     *
+     * 對齊 `SidebarMenuButton.actionsReveal`,同一套規則。
+     */
+    actionsReveal?: false | "hover";
+    /**
+     * 取代 chevron 的位置。用於 stepper 的 status indicator(●/○/✓)。
+     * 設定後 chevron 不渲染,改渲染 indicator。
+     */
+    indicator?: React.ReactNode;
+    /** 是否停用 */
+    disabled?: boolean;
+    /** 子 TreeItem(有 children = expandable,沒有 = leaf) */
+    children?: React.ReactNode;
+}
+declare const TreeItem: React.ForwardRefExoticComponent<TreeItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const treeViewMeta: {
+    readonly component: "TreeView";
+    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", "bg-primary-subtle", "bg-surface"];
+        readonly fg: readonly ["text-fg-disabled", "text-fg-muted", "text-fg-secondary", "text-foreground"];
+        readonly ring: readonly ["ring-ring"];
+    };
+    readonly defaultSize: "md";
+};
+export { TreeView, TreeItem, treeItemVariants };
+//# sourceMappingURL=tree-view.d.ts.map

package/dist/components/TreeView/tree-view.d.ts.map

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