@qijenchen/design-system 0.1.0-beta.10

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/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 DropPosition = 'before' | 'after' | 'inside';
+/** onDragEnd callback 的參數 */
+export interface TreeDragEndEvent {
+    /** 被拖曳的 node id */
+    sourceId: string;
+    /** 目標 node id */
+    targetId: string;
+    /** 放置位置:before(同層上方)/ after(同層下方)/ inside(成為子 node) */
+    position: DropPosition;
+}
+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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"}