npm - @qijenchen/design-system - Versions diffs - 0.1.0-beta.4 → 0.1.0-beta.6 - Mend

@qijenchen/design-system 0.1.0-beta.4 → 0.1.0-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (386) hide show

package/dist/components/Sidebar/sidebar.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sidebar.js","sources":["../../../src/components/Sidebar/sidebar.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.\n// code-quality-allow: file-size — foundational composite(SidebarProvider / Sidebar / SidebarMenu / SidebarGroup / SidebarMenuButton 等 10+ primitives 共享 context + 20+ sidebar-specific features;已是 foundational SSOT spec cap 800)\nimport * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport type { LucideIcon } from \"lucide-react\"\nimport { ChevronDown, PanelLeft } from \"lucide-react\"\n\nimport { useIsNarrowViewport } from \"@/design-system/hooks/use-is-narrow-viewport\"\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/design-system/components/Badge/badge\"\nimport { Button } from \"@/design-system/components/Button/button\"\nimport { Input } from \"@/design-system/components/Input/input\"\nimport { ScrollArea } from \"@/design-system/components/ScrollArea/scroll-area\"\nimport { Separator } from \"@/design-system/components/Separator/separator\"\nimport {\n Sheet,\n SheetContent,\n SheetDescription,\n SheetHeader,\n SheetTitle,\n} from \"@/design-system/components/Sheet/sheet\"\nimport { Skeleton } from \"@/design-system/components/Skeleton/skeleton\"\nimport { ChromeHeader } from \"@/design-system/patterns/header-canonical/chrome-header\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/design-system/components/Tooltip/tooltip\"\n// Row primitive 共用常數與 helpers——單一 source of truth\nimport {\n AVATAR_SIZE,\n ICON_SIZE,\n ItemIcon,\n ItemLabel,\n ItemInlineAction,\n ItemInlineActionButton,\n RowSizeProvider,\n getUniformPrefixSlotStyle,\n ROW_PADDING_BY_SIZE,\n type RowSize,\n type InlineActionConfig,\n} from \"@/design-system/patterns/element-anatomy/item-anatomy\"\n\n/**\n * Sidebar\n * ─────────────────────────────────────────────────────────────\n * 本元件的 item / label 視覺規格刻意對齊 MenuItem(menuItemVariants)\n * ——sidebar、dropdown-menu、select-menu 共用同一條 item-layout 公式:\n *\n * px = var(--layout-space-loose) (sidebar 脈絡;md=16 / lg=24)\n * py = calc((--field-height-md - 1lh) / 2)\n * font: text-body leading-compact font-medium\n * hover / selected: bg-neutral-hover / bg-neutral-selected\n *\n * 這確保 SidebarGroupLabel(header 模式)和 SidebarMenuButton(互動模式)\n * 擁有完全相同的 row height,消除「label 和 items 之間高度落差」的問題。\n */\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\n// ── Context ────────────────────────────────────────────────────────────────\n\n// Sidebar 的 size 直接用 item-layout pattern 的 RowSize type(sm/md/lg),\n// 跟所有 row primitives 保持同一套 size 語意\ntype SidebarSize = RowSize\n\ntype SidebarContextProps = {\n state: \"expanded\" | \"collapsed\"\n open: boolean\n setOpen: (open: boolean) => void\n openMobile: boolean\n setOpenMobile: (open: boolean) => void\n isMobile: boolean\n toggleSidebar: () => void\n // 全 sidebar 共用的 size(sm/md/lg)——透過 SidebarProvider 一次設定,\n // 下游所有 SidebarMenuButton / SidebarGroupLabel / SidebarMenuSkeleton 自動繼承。\n size: SidebarSize\n // Single-selection state:整個 sidebar 同時只有一個 active item。\n // SidebarMenuButton 傳 `id` prop,自動從這裡算 isActive、自動 onClick 時 setActiveId。\n // Consumer 可 controlled(傳 activeId + onActiveChange)或 uncontrolled(僅傳\n // defaultActiveId)。Router-driven 的 sidebar 通常 controlled(URL → activeId)。\n activeId: string | undefined\n setActiveId: (id: string) => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n const context = React.useContext(SidebarContext)\n if (!context) {\n throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n }\n return context\n}\n\n// ── Provider ───────────────────────────────────────────────────────────────\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst SidebarProvider = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> & {\n defaultOpen?: boolean\n open?: boolean\n onOpenChange?: (open: boolean) => void\n /** Sidebar row 元件的預設尺寸(sm/md/lg),propagate 給所有 children。Default: \"md\" */\n size?: SidebarSize\n /** 當前 active item 的 id(controlled)——router-driven sidebar 從 URL 算出來傳進。 */\n activeId?: string\n /** 初始 active id(uncontrolled)。 */\n defaultActiveId?: string\n /** Active id 改變時的 callback(controlled 必傳)。 */\n onActiveChange?: (id: string) => void\n /**\n * 全域 prefix 對齊。**預設 `false`**——只在「sidebar 內有大量 brand logo 跟一般 icon\n * 混用,期待 label 齊左掃視」時 opt-in `true`。\n *\n * **典型 use case**(should opt-in):\n * - Linear / Raycast 風格的 integration 清單:Home / Inbox(lucide icon)\n * + GitHub / Slack / Figma(brand logo,24px)混在同一個 menu\n * - App launcher / workspace switcher / connected apps,brand logo 為主體\n *\n * **不該 opt-in**:\n * - 全 icon 主導覽 + 全 avatar user footer(語意不同層級,該分 group 不該強迫對齊)\n * - 沒有真實混用情境只想要「視覺整齊」(預設行為已經對)\n *\n * 開啟後機制:CSS `:has()` 偵測 sidebar 子樹同時存在 `data-prefix-type=\"icon\"` 和\n * `\"avatar\"`(由 `<ItemIcon>` / `<ItemAvatar>` 自動標記)時,套用固定 24px 槽,\n * 跨 menu / 跨 group 全域 label 對齊。不混用時零成本。\n *\n * 為什麼預設關閉而非 always-on auto:explicit-over-implicit——sidebar 排版行為\n * 應該從寫的 prop 一眼看出,不藏 CSS 魔法。詳見 `sidebar.spec.md`。\n */\n uniformPrefix?: boolean\n }\n>(\n // code-quality-allow: long-function — SidebarProvider 整合 dual-state(open + activeId)+ mobile sync + keyboard handler + context memo + style binding。拆 sub-fn 會打斷 React state binding chain + Context provider 順序語意(M21 prop variant test:拆分降低可讀性,單 fn 內 state lifecycle 一目了然)。當前 97 < cap 200。\n (\n {\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n size = \"md\",\n activeId: activeIdProp,\n defaultActiveId,\n onActiveChange,\n uniformPrefix = false,\n className,\n style,\n children,\n ...props\n },\n ref\n ) => {\n const [_activeId, _setActiveId] = React.useState<string | undefined>(defaultActiveId)\n const activeId = activeIdProp ?? _activeId\n const setActiveId = React.useCallback(\n (id: string) => {\n if (activeIdProp === undefined) _setActiveId(id)\n onActiveChange?.(id)\n },\n [activeIdProp, onActiveChange]\n )\n const isMobile = useIsNarrowViewport()\n const [openMobile, setOpenMobile] = React.useState(false)\n\n const [_open, _setOpen] = React.useState(defaultOpen)\n const open = openProp ?? _open\n const setOpen = React.useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === \"function\" ? value(open) : value\n if (setOpenProp) {\n setOpenProp(openState)\n } else {\n _setOpen(openState)\n }\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n },\n [setOpenProp, open]\n )\n\n const toggleSidebar = React.useCallback(() => {\n return isMobile\n ? setOpenMobile((o) => !o)\n : setOpen((o) => !o)\n }, [isMobile, setOpen, setOpenMobile])\n\n React.useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (\n event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n (event.metaKey || event.ctrlKey)\n ) {\n event.preventDefault()\n toggleSidebar()\n }\n }\n window.addEventListener(\"keydown\", handleKeyDown)\n return () => window.removeEventListener(\"keydown\", handleKeyDown)\n }, [toggleSidebar])\n\n // code-quality-allow: long-function — SidebarProvider 內 dual-state(open + activeId)+ mobile + handler refs + useMemo context 集中一處;拆 sub-fn 會打斷 useMemo dep stability + Context provider 順序。當前 97 < cap 200。Script naive heuristic 把 `const state = ?` 三元當 fn 起點誤報。\n const state = open ? \"expanded\" : \"collapsed\"\n\n const contextValue = React.useMemo<SidebarContextProps>(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n size,\n activeId,\n setActiveId,\n }),\n [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar, size, activeId, setActiveId]\n )\n\n // 不在此處包 TooltipProvider——shadcn 原版預設 delayDuration=0,會覆蓋\n // 應用層的 delay 設定,造成 sidebar 內部 tooltip 行為跟其他地方不一致。\n // TooltipProvider 應由應用層(Storybook preview.tsx、app root)統一設定。\n // RowSizeProvider 讓整個 sidebar 子樹的 <ItemIcon> / <ItemAvatar> 都能 auto-size,\n // asChild consumer 不需要再手動查 ICON_SIZE / AVATAR_SIZE。\n //\n // ── 全域 prefix 對齊(預設關閉,explicit opt-in)──\n // false(預設):school A,各 menu 自然 prefix 寬度,跨 menu 不對齊\n // true:opt-in CSS `:has()` auto-detect,混用時套用、不混用零成本(school B,Notion 慣例)\n const slotStyle = getUniformPrefixSlotStyle(size)\n const slotValue = slotStyle[\"--item-prefix-slot\" as keyof typeof slotStyle]\n // 2026-05-22 Approach 9 — per-row prefix size mirror(JS const → CSS var):\n // `--item-icon-size` ← ICON_SIZE[size] (sm/md=16, lg=20)\n // `--item-avatar-size` ← AVATAR_SIZE.inline[size] (sm=20, md/lg=24)\n // 供 SidebarMenuButton collapsed pl 公式消費,讓所有 prefix 中心(icon/avatar)鎖回\n // rail center = --sidebar-width-icon/2(per user mental model:rail anchor =\n // GlobalHeader toggle geometry,sidebar 收合所有元素 cx 對齊此 rail center)。\n // Rail anchor 自身不動(--sidebar-menu-icon-size 維持 1rem 固定,per globals.css :root)。\n const wrapperStyle = React.useMemo<React.CSSProperties>(\n () =>\n ({\n \"--item-icon-size\": `${ICON_SIZE[size]}px`,\n \"--item-avatar-size\": `${AVATAR_SIZE.inline[size]}px`,\n ...(uniformPrefix ? { \"--mixed-prefix-slot\": slotValue } : {}),\n ...style,\n } as React.CSSProperties),\n [size, uniformPrefix, slotValue, style]\n )\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <RowSizeProvider value={size}>\n <div\n style={wrapperStyle}\n className={cn(\n \"group/sidebar-wrapper flex min-h-svh w-full\",\n // CSS :has() 偵測 — 只在 uniformPrefix=true(預設)時掛\n // mixing detected → 同時把 --item-icon-size cascade 到 slot 寬(`!` important 蓋\n // 過 wrapperStyle inline,讓 collapsed pl 公式知道「ItemPrefix wrapper 被撐到\n // 24,effective prefix width = 24 非 16」)。\n uniformPrefix &&\n \"has-[[data-prefix-type=icon]]:has-[[data-prefix-type=avatar]]:[--item-prefix-slot:var(--mixed-prefix-slot)] has-[[data-prefix-type=icon]]:has-[[data-prefix-type=avatar]]:![--item-icon-size:var(--mixed-prefix-slot)]\",\n className\n )}\n ref={ref}\n {...props}\n >\n {children}\n </div>\n </RowSizeProvider>\n </SidebarContext.Provider>\n )\n }\n)\nSidebarProvider.displayName = \"SidebarProvider\"\n\n// ── Sidebar container ──────────────────────────────────────────────────────\n\nconst Sidebar = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> & {\n side?: \"left\" | \"right\"\n collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n /**\n * Viewport top inset(2026-05-20 ship per AppShell `primary-header` unblock)。\n * 預設 undefined = sidebar 從 viewport top 起算(`top:0 / h:svh`,當前 default)。\n * 提供 CSS value(eg. `'var(--chrome-header-height)'` 或 `'48px'`)時,sidebar 改\n * 從該值起算(`top: viewportInsetTop / height: calc(100svh - viewportInsetTop)`),\n * 讓 global header 不被覆蓋(AppShell primary-header mode 必傳)。\n * 對齊 Mantine `layout=\"default\"` navbar 高度扣 header 慣例。\n */\n viewportInsetTop?: string\n }\n>(\n (\n {\n side = \"left\",\n collapsible = \"offcanvas\",\n viewportInsetTop,\n className,\n children,\n ...props\n },\n ref\n ) => {\n const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n const insetStyle: React.CSSProperties | undefined = viewportInsetTop\n ? { top: viewportInsetTop, height: `calc(100svh - ${viewportInsetTop})` }\n : undefined\n\n if (collapsible === \"none\") {\n return (\n <div\n className={cn(\n \"flex h-full w-[var(--sidebar-width)] flex-col bg-surface text-foreground\",\n className\n )}\n ref={ref}\n {...props}\n >\n {children}\n </div>\n )\n }\n\n if (isMobile) {\n return (\n <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n <SheetContent\n data-sidebar=\"sidebar\"\n data-mobile=\"true\"\n className=\"w-[var(--sidebar-width)] bg-surface p-0 text-foreground [&>button]:hidden\"\n style={\n {\n \"--sidebar-width\": \"var(--sidebar-width-mobile)\",\n } as React.CSSProperties\n }\n side={side}\n >\n <SheetHeader className=\"sr-only\">\n <SheetTitle>Sidebar</SheetTitle>\n <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n </SheetHeader>\n <div className=\"flex h-full w-full flex-col\">{children}</div>\n </SheetContent>\n </Sheet>\n )\n }\n\n return (\n <div\n ref={ref}\n className=\"group peer hidden shrink-0 text-foreground md:block\"\n data-state={state}\n data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n data-side={side}\n >\n {/* Gap div:佔據 sidebar 實際寬度,推開主內容 */}\n <div\n className={cn(\n \"relative w-[var(--sidebar-width)] min-w-[var(--sidebar-width-min)] bg-transparent transition-[width,min-width] duration-200 ease-linear motion-reduce:duration-0\",\n \"group-data-[collapsible=offcanvas]:!w-0 group-data-[collapsible=offcanvas]:!min-w-0\",\n \"group-data-[side=right]:rotate-180\",\n \"group-data-[collapsible=icon]:!w-[var(--sidebar-width-icon)] group-data-[collapsible=icon]:!min-w-0\"\n )}\n />\n <div\n style={insetStyle}\n className={cn(\n // 2026-05-20 v3:`inset-y-0 h-svh` → 可被 viewportInsetTop prop override(per AppShell primary-header)\n !viewportInsetTop && \"inset-y-0 h-svh\",\n // 2026-05-21 v9 fix(per user 「右側分隔線跑去哪 + sidebar 寬度沒正確變化」):\n // 補 `overflow-x-hidden` — C* refactor 主機制(outer narrows to sidebar-width-icon\n // 時 clip inner 272px overflow,visual right border 顯示,主內容不被遮)。原 C*\n // commit 漏加 className 只 comment 提及。\n \"overflow-x-hidden\",\n \"fixed z-10 hidden w-[var(--sidebar-width)] min-w-[var(--sidebar-width-min)] transition-[left,right,width,min-width] duration-200 ease-linear motion-reduce:duration-0 md:flex\",\n \"group-data-[collapsible=icon]:!min-w-0\",\n side === \"left\"\n ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n \"group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]\",\n \"group-data-[side=left]:border-r group-data-[side=left]:border-divider\",\n \"group-data-[side=right]:border-l group-data-[side=right]:border-divider\",\n className\n )}\n {...props}\n >\n {/* SidebarInner:永遠 full sidebar-width via inline style(Tailwind JIT 沒 compile\n `min-w-[var(--sidebar-width)]` arbitrary class — 只 generated min-w-sidebar-width-min)。\n Inline style 繞 JIT 確保 272px。Collapsed mode 只是 outer overflow-x:hidden clip 出\n 左側 sidebar-width-icon = visible icon rail。 */}\n <div\n data-sidebar=\"sidebar\"\n style={{ width: 'var(--sidebar-width)', minWidth: 'var(--sidebar-width)' }}\n className=\"flex h-full shrink-0 flex-col bg-surface\"\n >\n {children}\n </div>\n </div>\n </div>\n )\n }\n)\nSidebar.displayName = \"Sidebar\"\n\n// ── Trigger / Rail / Input ─────────────────────────────────────────────────\n\n// SidebarTrigger — 用 Button 原生的 size=\"sm\" iconOnly,\n// 高度自動跟 density 走(field-height-sm @ md=28 / lg=32)\n// 不 override size,避免 density 切換時 trigger 不變\nconst SidebarTrigger = React.forwardRef<\n React.ElementRef<typeof Button>,\n React.ComponentProps<typeof Button>\n>(({ className, onClick, ...props }, ref) => {\n const { toggleSidebar } = useSidebar()\n\n return (\n <Button\n ref={ref}\n data-sidebar=\"trigger\"\n variant=\"text\"\n size=\"sm\"\n iconOnly\n startIcon={PanelLeft}\n aria-label=\"Toggle Sidebar\"\n className={className}\n onClick={(event) => {\n onClick?.(event)\n toggleSidebar()\n }}\n {...props}\n />\n )\n})\nSidebarTrigger.displayName = \"SidebarTrigger\"\n\n// SidebarInput — 用 Input 元件原生高度(跟 density 自動走),不 override\nconst SidebarInput = React.forwardRef<\n React.ElementRef<typeof Input>,\n React.ComponentProps<typeof Input>\n>(({ className, ...props }, ref) => {\n return (\n <Input\n ref={ref}\n data-sidebar=\"input\"\n className={cn(\"w-full\", className)}\n {...props}\n />\n )\n})\nSidebarInput.displayName = \"SidebarInput\"\n\n// ── Shell regions ──────────────────────────────────────────────────────────\n\n// SidebarHeader / SidebarFooter:\n// - 固定高度 `var(--chrome-header-height)`(md=48 / lg=56,density-responsive)\n// - 跨元件 chrome header 共享同一個 token,自動跟主內容 page header 對齊\n// - 水平 padding 用 loose token(跟 items 的 px 對齊)\n// - 邊框是結構邊界(分隔 fixed/scroll 區),full-width 不內縮\n//\n// 為什麼 density-responsive:chrome 裡放的 button 綁定 field-height token,\n// 會隨 density 變大。Chrome 如果不跟著放大,lg density 下 padding 會被擠壓。\nconst SidebarHeader = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> & { withTabs?: boolean; tabsSlot?: React.ReactNode }\n>(({ className, withTabs, tabsSlot, ...props }, ref) => {\n return (\n // 2026-05-21 v9 — restore main behavior(per user「不應該調整原本的樣式,只有說收起來的時候\n // 要調整 header logo 的位置使其與其下 icon 水平置中」):\n // - Expanded mode:ChromeHeader default `px-loose`(16px L+R),avatar 跟 menu icon 對齊\n // - Collapsed mode:`!px-0 !justify-center` 拿掉 padding + 內容置中,WorkspaceBrand text\n // 已 `group-data-[collapsible=icon]:hidden`,collapsed 只剩 avatar 24px,centered in 48px\n // square → avatar.center = 24 = menu icon center.x ✓\n // 完全 match main 行為(v7 leadingRail / v8 -ml-1 surgical 全撤回)。\n <ChromeHeader\n ref={ref}\n withTabs={withTabs}\n tabsSlot={tabsSlot}\n data-sidebar=\"header\"\n className={cn(\n // 2026-05-21 v14 — rail-derived collapsed padding,full SSOT cascade(per user directive\n // 「avatar尺寸、menu item padding、menu icon尺寸任一變動都要正確連動」+ codex Layer B\n // 比稿共識):\n //\n // 公式 derivation(rail-centered geometric identity):\n // avatar.cx = pl + avatar/2 = (sidebar-width-icon - avatar)/2 + avatar/2 = sidebar-width-icon/2\n // menu icon.cx = loose + icon-size/2\n // sidebar-width-icon = 2*loose + icon-size → sidebar-width-icon/2 = loose + icon-size/2 ✓\n //\n // → 任何 avatar / loose / icon-size 改值,公式自動對齊 menu icon 中心(rail 幾何恆等)。\n //\n // SSOT 連動鏈:\n // --layout-space-loose (density token) ─┐\n // --sidebar-menu-icon-size ├→ --sidebar-width-icon (calc cascade)\n // └→ 公式自動跟 ✓\n // --chrome-header-avatar-size (header-canonical.css local token):公式 var 引用,\n // JS 端透過 WorkspaceBrand RowSizeProvider value=\"md\"\n // + AVATAR_SIZE.inline.md spec-coupled 共識 sync。\n //\n // Numerical equivalence to v13 `loose-4` 公式(verified):\n // md density: (48-24)/2 = 12 = loose-4 = 12 ✓ identical\n // lg density: (64-24)/2 = 20 = loose-4 = 20 ✓ identical\n // → v14 upgrade 純 SSOT chain robustness,0 視覺改變。\n \"group-data-[collapsible=icon]:!pl-[calc((var(--sidebar-width-icon)-var(--chrome-header-avatar-size))/2)]\",\n \"group-data-[collapsible=icon]:!pr-0\",\n \"transition-[padding] duration-200 ease-linear motion-reduce:duration-0\",\n className\n )}\n {...props}\n />\n )\n})\nSidebarHeader.displayName = \"SidebarHeader\"\n\n// SidebarFooter — pinned 在 sidebar 底部的 menu group 容器,不是固定高度 chrome slot。\n// 行為跟 SidebarGroup 類似(flex flex-col py-2),但永遠靠底(shrink-0)且有 border-t 分隔。\n// Consumer 放 SidebarMenu + SidebarMenuButton,高度由內容決定(1~N 個 items)。\n// 典型內容:user menu、settings、help、logout 等底部選項群組。\nconst SidebarFooter = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n return (\n <div\n ref={ref}\n data-sidebar=\"footer\"\n className={cn(\n \"flex shrink-0 flex-col py-2 border-t border-divider\",\n className\n )}\n {...props}\n />\n )\n})\nSidebarFooter.displayName = \"SidebarFooter\"\n\nconst SidebarSeparator = React.forwardRef<\n React.ElementRef<typeof Separator>,\n React.ComponentProps<typeof Separator>\n>(({ className, ...props }, ref) => {\n // 預設對齊 loose token:分隔兩個 scrollable group 時,跟 item 內容對齊。\n // 分隔 fixed 元件(Header/Footer 與 Content)時,consumer 可傳 className 覆寫成 mx-0。\n return (\n <Separator\n ref={ref}\n data-sidebar=\"separator\"\n className={cn(\n \"mx-[var(--layout-space-loose)] w-auto bg-divider\",\n className\n )}\n {...props}\n />\n )\n})\nSidebarSeparator.displayName = \"SidebarSeparator\"\n\nconst SidebarContent = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\">\n>(({ className, children, ...props }, ref) => {\n return (\n <div\n ref={ref}\n data-sidebar=\"content\"\n // SidebarContent 用 ScrollArea 處理長列表 scroll——跨 OS 一致不吃寬度(macOS\n // overlay vs Windows/Linux always-visible 差異見 scroll-area.tsx 註解)。\n // 呼吸空間和分隔線由 SidebarGroup 自己處理(對齊 MenuGroup 的 py-2 + [&+&]:border-t)。\n // ScrollArea Root 本身 overflow-hidden,icon-collapsed 時不會露出 scroll chrome。\n className={cn(\n \"flex min-h-0 flex-1 flex-col\",\n className\n )}\n {...props}\n >\n <ScrollArea className=\"flex-1\">\n <div className=\"flex flex-col\">{children}</div>\n </ScrollArea>\n </div>\n )\n})\nSidebarContent.displayName = \"SidebarContent\"\n\n// ── Group ──────────────────────────────────────────────────────────────────\n\n// SidebarGroupContext——讓 `SidebarGroupLabel` 和 `SidebarGroupContent` 知道當前\n// 所在的 group 是否 collapsible,以自動切換渲染模式(label 變 trigger,content 變\n// `Collapsible.Content`)。沒有 context 就是舊行為(非 collapsible 的 plain div)。\ntype SidebarGroupContextValue = {\n collapsible: boolean\n}\nconst SidebarGroupContext = React.createContext<SidebarGroupContextValue | null>(null)\n\nfunction useSidebarGroup() {\n return React.useContext(SidebarGroupContext)\n}\n\n/**\n * SidebarGroup\n *\n * 預設是非互動的 plain group(div)。當 `collapsible` = true 時自動切換成 Radix\n * Collapsible:SidebarGroupLabel 變 trigger、SidebarGroupContent 變 Content、\n * 自動渲染 chevron 於 label 尾端、chevron 依 open state 旋轉。\n *\n * ── API 設計決策 ──\n * 為什麼是 group 層級的 prop 而不是 label 層級?因為「group 是否可收合」是結構層\n * 的決定,影響 group 所有子 primitive 的渲染模式(label 變 button、content 變\n * animated container)。把 prop 放在 label 上會讓 content 不知道自己該不該被包,\n * 形成跨元件的 prop drilling。放在 group 上用 context 傳遞是 React 的標準做法。\n */\nconst SidebarGroup = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> & {\n collapsible?: boolean\n defaultOpen?: boolean\n open?: boolean\n onOpenChange?: (open: boolean) => void\n }\n>(({ className, collapsible = false, defaultOpen = true, open, onOpenChange, children, ...props }, ref) => {\n const contextValue = React.useMemo<SidebarGroupContextValue>(\n () => ({ collapsible }),\n [collapsible]\n )\n\n // 非 collapsible 就是 plain div,舊行為完全不變\n const baseClass = cn(\n \"relative flex w-full min-w-0 flex-col py-2\",\n \"[&+&]:before:absolute [&+&]:before:top-0 [&+&]:before:left-[var(--layout-space-loose)] [&+&]:before:right-[var(--layout-space-loose)] [&+&]:before:h-px [&+&]:before:bg-divider [&+&]:before:content-['']\",\n className\n )\n\n if (!collapsible) {\n return (\n <SidebarGroupContext.Provider value={contextValue}>\n <div ref={ref} data-sidebar=\"group\" className={baseClass} {...props}>\n {children}\n </div>\n </SidebarGroupContext.Provider>\n )\n }\n\n // Collapsible 模式:Radix Collapsible.Root 當 group container\n return (\n <SidebarGroupContext.Provider value={contextValue}>\n <CollapsiblePrimitive.Root\n ref={ref}\n data-sidebar=\"group\"\n defaultOpen={defaultOpen}\n open={open}\n onOpenChange={onOpenChange}\n className={baseClass}\n // Collapsible 在 icon 模式下整個隱藏(跟 TreeView 一樣——icon rail 沒空間放展開的 tree)\n // Consumer 若要在 icon 模式顯示整個 group,自行傳 className 覆寫\n {...(props as React.ComponentProps<typeof CollapsiblePrimitive.Root>)}\n >\n {children}\n </CollapsiblePrimitive.Root>\n </SidebarGroupContext.Provider>\n )\n})\nSidebarGroup.displayName = \"SidebarGroup\"\n\nconst SidebarGroupContent = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\">\n>(({ className, ...props }, ref) => {\n const group = useSidebarGroup()\n if (group?.collapsible) {\n return (\n <CollapsiblePrimitive.Content\n // Radix 提供 data-state=\"open|closed\",搭配 animate 做展開/收合動畫\n // (若之後需要,可在這個 div 上加 CSS animation)\n data-sidebar=\"group-content\"\n className={cn(\"w-full overflow-hidden\", className)}\n {...(props as React.ComponentProps<typeof CollapsiblePrimitive.Content>)}\n >\n <div ref={ref}>{props.children}</div>\n </CollapsiblePrimitive.Content>\n )\n }\n return (\n <div\n ref={ref}\n data-sidebar=\"group-content\"\n className={cn(\"w-full\", className)}\n {...props}\n />\n )\n})\nSidebarGroupContent.displayName = \"SidebarGroupContent\"\n\n// SidebarGroupLabel — 完全對齊 MenuItem header 的視覺 + TreeView 的 sm/md/lg 尺寸:\n// - 跟 SidebarMenuButton 共用 item-layout 公式(同 py 公式、同 text size、同 icon size)\n// - 唯一差異:font-medium + text-fg-muted + pointer-events-none(header 語意)\n// 這樣 label 和 items 的 row height 在任何 size 下都完全對齊。\n//\n// Icon 模式:整列 display:none(不是 -mt + opacity 0,避免脆弱的 margin 計算)\nconst sidebarGroupLabelVariants = cva(\n [\n // items-start 對齊 item-layout 規則(跟 SidebarMenuButton / TreeItem / MenuItem 一致)\n \"flex w-full items-start gap-2\",\n \"px-[var(--layout-space-loose)]\",\n \"font-medium text-fg-muted\",\n \"cursor-default select-none pointer-events-none outline-none\",\n // icon 模式:display:none 硬隱藏(跟 SidebarMenuButton label span 一致的策略)\n \"group-data-[collapsible=icon]:hidden\",\n ],\n {\n variants: {\n // 消費 ROW_PADDING_BY_SIZE SSOT(跟 SidebarMenuButton / MenuItem / TreeItem 一致)\n size: ROW_PADDING_BY_SIZE,\n },\n defaultVariants: { size: \"md\" },\n }\n)\n\nconst SidebarGroupLabel = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> & {\n asChild?: boolean\n /** ARIA label for the expand/collapse chevron (only when group is collapsible). Override for i18n. Default: 「展開或收合」 */\n toggleAriaLabel?: string\n } & VariantProps<typeof sidebarGroupLabelVariants>\n>(({ className, asChild = false, size: sizeProp, children, toggleAriaLabel = '展開或收合' /* i18n-allow: DS default; consumer override via toggleAriaLabel prop */, ...props }, ref) => {\n const { size: contextSize } = useSidebar()\n const size = sizeProp ?? contextSize\n const group = useSidebarGroup()\n\n // Collapsible group:label 本身仍是 plain header(保留原本語意),\n // chevron 是 suffix slot 裡的 inline action button,用 Radix Collapsible.Trigger asChild\n // 包住 `ItemInlineActionButton`——視覺規格完全對齊 uiSize.spec.md「Inline Action」,\n // 跟 SidebarMenuButton 的 suffix inline action 同一套 canonical 實作。\n //\n // **為什麼 chevron 是 inline action 而非整個 label 是 trigger**:\n // 1. 同 sidebar 內的 inline action 視覺必須一致(fg-muted → foreground、hover bg、圓角)\n // 2. Linear / Notion / Finder 等世界級 sidebar 都是「label 裝飾、chevron 互動」\n // 3. 整個 label 當 trigger 會把 label 升格為 button,跟非 collapsible group 的 label\n // 語意不一致(一個是 div、一個是 button),無障礙與視覺焦點都會跳動\n if (group?.collapsible) {\n return (\n <div\n ref={ref}\n data-sidebar=\"group-label\"\n role=\"presentation\"\n className={cn(\n sidebarGroupLabelVariants({ size }),\n // Single-line group header:改用 items-center 讓 chevron button(16×16)跟 text 垂直精確置中。\n // cva base 的 `items-start` 是 multi-line safety,單行 header 用不到,明確覆寫成 center。\n \"!items-center\",\n className\n )}\n {...props}\n >\n <span className=\"min-w-0 flex-1 truncate\">{children}</span>\n {/* Chevron:inline action button,Radix Collapsible.Trigger asChild 包住,\n Radix 會 merge onClick + aria-expanded + data-state 到 button。\n ── Suffix 位置的 chevron 用 accordion 慣例 ──\n base = ChevronDown (`v`),open 時 rotate-180° → `^`。\n 對齊 Radix Accordion / shadcn Collapsible / Material Expansion / Linear 的 section header。\n (Prefix 位置的 chevron 如 TreeView 才用 ChevronRight + rotate-90 的 tree disclosure 慣例) */}\n <CollapsiblePrimitive.Trigger asChild>\n <ItemInlineActionButton\n icon={ChevronDown}\n aria-label={toggleAriaLabel}\n className=\"pointer-events-auto ml-auto\"\n iconClassName=\"transition-transform duration-150 motion-reduce:duration-0 [[data-state=open]_&]:rotate-180\"\n />\n </CollapsiblePrimitive.Trigger>\n </div>\n )\n }\n\n // 非 collapsible:plain label(div,pointer-events-none)\n const Comp = asChild ? Slot : \"div\"\n return (\n <Comp\n ref={ref}\n data-sidebar=\"group-label\"\n role=\"presentation\"\n className={cn(sidebarGroupLabelVariants({ size }), className)}\n {...props}\n >\n {children}\n </Comp>\n )\n})\nSidebarGroupLabel.displayName = \"SidebarGroupLabel\"\n\nconst SidebarGroupAction = React.forwardRef<\n HTMLButtonElement,\n React.ComponentProps<\"button\"> & { asChild?: boolean }\n>(({ className, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\"\n return (\n <Comp\n ref={ref}\n data-sidebar=\"group-action\"\n className={cn(\n \"absolute right-[var(--layout-space-loose)] top-2 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-fg-muted outline-none ring-ring transition-colors hover:bg-neutral-hover hover:text-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n \"after:absolute after:-inset-2 after:md:hidden\",\n \"group-data-[collapsible=icon]:hidden\",\n className\n )}\n {...props}\n />\n )\n})\nSidebarGroupAction.displayName = \"SidebarGroupAction\"\n\n// ── Menu ───────────────────────────────────────────────────────────────────\n\n// SidebarMenu — items 容器\n//\n// Prefix 對齊由 `SidebarProvider` 全域 auto-detect 處理(school B,Notion/Linear 慣例):\n// 整個 sidebar 子樹同時存在 icon 和 avatar prefix 時,自動套用固定槽,跨 menu 跨 group 對齊。\n// 若要關閉,在 `<SidebarProvider uniformPrefix={false}>` 全域控制。SidebarMenu 沒有\n// per-menu 覆寫——沒有真實 use case,YAGNI。\nconst SidebarMenu = React.forwardRef<\n HTMLUListElement,\n React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n <ul\n ref={ref}\n data-sidebar=\"menu\"\n // 無 gap:items 連續緊貼(對齊 DropdownMenu / TreeView 的視覺節奏)\n className={cn(\"flex w-full min-w-0 flex-col\", className)}\n {...props}\n />\n))\nSidebarMenu.displayName = \"SidebarMenu\"\n\nconst SidebarMenuItem = React.forwardRef<\n HTMLLIElement,\n React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n <li\n ref={ref}\n data-sidebar=\"menu-item\"\n className={cn(\"group/menu-item relative\", className)}\n {...props}\n />\n))\nSidebarMenuItem.displayName = \"SidebarMenuItem\"\n\n/**\n * SidebarMenuButton\n *\n * 對齊 MenuItem / TreeItem 的 item-layout,支援 sm/md/lg 三種尺寸:\n * - horizontal: px = var(--layout-space-loose)\n * - vertical: py = calc((--field-height-{size} - 1lh) / 2)\n * - typography: text-body leading-compact(sm/md)/ text-body-lg(lg)+ font-medium\n * - icon: size-4 (sm/md) / size-5 (lg)\n * - hover: bg-neutral-hover\n * - selected: bg-neutral-selected(data-active=true)\n *\n * Icon 模式:button 保持 w-full 填滿 sidebar icon rail,鎖高為 field-height-{size},\n * content 用 justify-center 居中,label span 以 display:none 硬隱藏。\n */\nconst sidebarMenuButtonVariants = cva(\n [\n \"peer/menu-button group/menu-button\",\n // items-start(跟 TreeItem / MenuItem 一致的 item-layout 規則):\n // 多行 label 時 prefix 留在第一行不飄移。\n // 單行 label 時(我們的預設情境,truncate = line-clamp-1),效果跟 items-center 完全相同,\n // 因為 prefix 被包在 `h-[1lh] flex items-center` 容器,強制對齊第一行文字中線。\n \"flex w-full items-start gap-2 text-left overflow-hidden\",\n \"px-[var(--layout-space-loose)]\",\n \"font-medium text-fg-secondary\",\n \"cursor-pointer select-none outline-none\",\n // 2026-05-21 v4 C* refactor(per codex M31 Layer C 比稿 final architecture):\n // 撤回所有 `group-data-[collapsible=icon]:*` overrides。Sidebar outer overflow-x:hidden\n // 自動 clip menu button 右側 label / badge / action,左側 icon 自然顯示在 sidebar-width-icon\n // range 內。Row geometry 永遠 stable(px-loose + items-start + gap-2 + height auto),\n // 無 discrete property switch → 無 fly / 無 flutter / 無 jitter。\n //\n // Label/badge/action 自然存在 DOM(a11y screen reader 仍讀到),只是 outer clip 視覺消失。\n // Tooltip 仍在 collapsed state 顯示(per L1043-1055 既有 hidden 條件)。\n //\n // 對齊 MUI MiniDrawer + shadcn canonical(width morph + overflow clip + row geometry 不變)。\n \"transition-[background-color,color] duration-200 ease-linear motion-reduce:duration-0\",\n \"hover:bg-neutral-hover hover:text-foreground\",\n \"focus-visible:bg-neutral-hover focus-visible:text-foreground\",\n \"disabled:pointer-events-none disabled:opacity-disabled\",\n \"aria-disabled:pointer-events-none aria-disabled:opacity-disabled\",\n \"data-[active=true]:bg-neutral-selected data-[active=true]:text-foreground\",\n \"group-has-[[data-sidebar=menu-action]]/menu-item:pr-8\",\n // 2026-05-21 v5 restore label display:none(user 抓「label 沒消失」):\n // C* outer overflow-x:hidden 理論 clip,但 label.x=40 在 sidebar-width-icon=48 內 → 首字\n // 部分可見。display:none 是 instant 切換非 main animation,跟 C* 「不用 display:none 做主\n // 動畫」不衝突(label 不參與 width 動畫,純 final state)。對齊 shadcn canonical。\n \"group-data-[collapsible=icon]:[&_[data-sidebar=menu-label]]:hidden\",\n // 2026-05-22 Approach 9 — 收合時所有 prefix center 鎖回 rail center\n // (--sidebar-width-icon/2 = GlobalHeader toggle geometry SSOT)。\n // 公式: pl = (rail - prefix-width) / 2,prefix-width 由 SidebarProvider 注入的\n // --item-icon-size / --item-avatar-size CSS var(JS const mirror)提供。\n // 任何 row size(sm/md/lg)× density(md/lg)× prefix type(icon/avatar)6 cell 全對齊。\n \"group-data-[collapsible=icon]:has-[[data-prefix-type=icon]]:!pl-[calc((var(--sidebar-width-icon)-var(--item-icon-size))/2)]\",\n \"group-data-[collapsible=icon]:has-[[data-prefix-type=avatar]]:!pl-[calc((var(--sidebar-width-icon)-var(--item-avatar-size))/2)]\",\n ],\n {\n variants: {\n // size:消費 ROW_PADDING_BY_SIZE SSOT(item-anatomy.tsx)+ Sidebar-specific collapsed height\n // 前為 3 cva(menu / sidebar / tree)重複同一 py 公式,drift risk 已知。\n // 改用 shared SSOT 後 formula 改一處全同步。\n size: {\n // 2026-05-21 v4 C*:撤回 `group-data-[collapsible=icon]:!h-[...]` height lock\n // (per codex Layer C — row height 永遠 stable,collapsed 只 outer clip 視覺)\n sm: ROW_PADDING_BY_SIZE.sm,\n md: ROW_PADDING_BY_SIZE.md,\n lg: ROW_PADDING_BY_SIZE.lg,\n },\n variant: {\n /** 預設 — 導覽 item,參與 single-selection */\n default: \"\",\n /**\n * Meta 命令 row(例:「查看更多」「載入更多」「Show all」「+ 新增專案」)。\n *\n * 語意上**不是導覽目的地**,是 section 底部的命令。規格:\n * - 文字從 `text-fg-secondary` 退到 `text-fg-muted`(視覺重量下沉,hover 才升到 foreground)\n * - **不該參與 single-selection**:不傳 `id`,TS 階段提醒;執行階段傳了也不會 active\n * - `font-medium` 降為 `font-normal`(更輕,signal「這不是 primary 導覽」)\n * - 世界級對照:Linear \"Show N more\"、Notion \"Show N more\"、Slack \"Show more\"、\n * Gmail Labels \"More\"\n */\n meta: [\n \"font-normal text-fg-muted\",\n // meta variant 不該有 active 態;即使誤傳 isActive 也不啟動\n \"data-[active=true]:bg-transparent data-[active=true]:text-fg-muted\",\n ],\n },\n },\n defaultVariants: { size: \"md\", variant: \"default\" },\n }\n)\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst SidebarMenuButton = React.forwardRef<\n HTMLButtonElement,\n Omit<React.ComponentProps<\"button\">, \"id\"> & {\n asChild?: boolean\n /**\n * Item 的唯一識別(對齊 `SidebarProvider.activeId`)。**強烈建議傳**——\n * 傳了之後 `isActive` 自動從 context 算、`onClick` 自動 setActiveId,\n * 整個 sidebar 的 single-selection 自動成立,不會寫出啞 item。\n */\n id?: string\n /**\n * 手動覆寫 active 狀態(極少用)。預設從 `SidebarProvider.activeId === id` 自動算。\n * 兩者都傳時以 `isActive` 為準。\n */\n isActive?: boolean\n startIcon?: LucideIcon\n tooltip?: string | React.ComponentProps<typeof TooltipContent>\n /**\n * Suffix slot 的 inline actions(宣告式 API,對齊 uiSize.spec.md「Inline Action」)。\n * Host 自動用 `<ItemInlineAction>` 渲染,consumer 只宣告 intent。\n * Icon 模式下自動隱藏。\n */\n inlineActions?: InlineActionConfig[]\n /**\n * 右側 actions slot(ReactNode)— escape hatch 供 consumer 放自訂元素\n * (如 DropdownMenu trigger / 自訂 popover trigger / 多 tier 動作)。\n *\n * 跟 `inlineActions` 互斥(同時傳 `inlineActionsSlot` 會優先,`inlineActions` 被忽略)。\n * 規則對齊 Input.endSlot canonical:90% case 用 `inlineActions` 宣告式 API,\n * 10% config 表達不出時走 slot。\n *\n * Padding budget:slot mode 預留 1 icon 寬度的 paddingRight(覆寫多 icon 寬度需 consumer 自控 className)。\n * Reveal / collapsed-hide / 絕對定位 chrome 跟 inlineActions 共用,consumer 不需重做。\n */\n inlineActionsSlot?: React.ReactNode\n /**\n * Inline actions 的顯示模式:\n * - `false`(預設):永遠顯示\n * - `\"hover\"`:row hover 時才淡入(TreeView 模式)\n */\n actionsReveal?: false | \"hover\"\n } & VariantProps<typeof sidebarMenuButtonVariants>\n>(\n (\n {\n asChild = false,\n id,\n isActive: isActiveProp,\n size: sizeProp,\n variant = \"default\",\n startIcon: StartIcon,\n tooltip,\n inlineActions,\n inlineActionsSlot,\n actionsReveal = false,\n className,\n children,\n onClick,\n ...props\n },\n ref\n ) => {\n const Comp = asChild ? Slot : \"button\"\n // 沒傳 size 就從 SidebarProvider context 繼承(預設 md)\n const { isMobile, state, size: contextSize, activeId, setActiveId } = useSidebar()\n const size = sizeProp ?? contextSize\n\n // Meta variant 永不參與 single-selection,即使誤傳 id / isActive\n const isMeta = variant === \"meta\"\n\n // Active 狀態:明確傳的 isActive 優先;否則 `activeId === id` 自動算\n // Meta variant 永遠 false\n const isActive = isMeta ? false : (isActiveProp ?? (id !== undefined && activeId === id))\n\n // Click handler:id 存在且非 meta 才 setActiveId(single-selection 自動建立),\n // 同時呼叫 consumer 傳入的 onClick\n // code-quality-allow: long-function — helper fn 結構緊密,拆 sub-fn 會跨 fn 傳 state 反而複雜\n const handleClick = React.useCallback(\n (e: React.MouseEvent<HTMLButtonElement>) => {\n if (!isMeta && id !== undefined) setActiveId(id)\n onClick?.(e)\n },\n [isMeta, id, setActiveId, onClick]\n )\n\n // asChild 時,我們不能額外 wrap span / icon——Slot 要求單一 child。\n // 所以 asChild 的 consumer 自行放 icon + label(記得 prefix 要包在 h-[1lh] 容器,\n // label span 要有 data-sidebar=\"menu-label\" attribute 才能參與 icon 模式自動隱藏)。\n //\n // Label span 在 icon 模式下透過 cva base 的 `[&_[data-sidebar=menu-label]]:hidden` display:none,\n // 這樣 flex 只剩 icon 一個 child,justify-center 可以真正置中。\n // Sidebar 寬度 transition 200ms 是唯一持續動畫,使用者視線跟著寬度走,不會察覺 label 的瞬切。\n // 用 `<ItemIcon>` / `<ItemLabel>` helper,**不直接寫 ItemPrefix wrap StartIcon**——\n // ItemIcon 內部會自動加 `data-prefix-type=\"icon\"`,讓 SidebarProvider 的全域\n // `:has()` prefix-mix 偵測能命中。直接用 ItemPrefix 就會錯過這個 tag,\n // 全域對齊功能對 SidebarMenuButton 路徑失效(曾經發生過的 bug)。\n const content = asChild ? (\n children\n ) : (\n <>\n {StartIcon && <ItemIcon icon={StartIcon} />}\n <ItemLabel>{children}</ItemLabel>\n </>\n )\n\n const hasSlot = !!inlineActionsSlot\n const hasActions = hasSlot || (!!inlineActions && inlineActions.length > 0)\n\n // 計算 suffix 所佔寬度:N×icon + (N-1)×gap-2(8px),再加 gap-2 跟 label 之間的間隔\n // Slot mode 預設按 1 icon 預留(consumer 寬度自控)\n const iconSz = ICON_SIZE[size ?? \"md\"]\n const n = hasSlot ? 1 : (inlineActions?.length ?? 0)\n const suffixContentWidth = n > 0 ? n * iconSz + (n - 1) * 8 : 0\n // Button 的 paddingRight = loose + suffix 寬度 + gap-2\n // 用 CSS calc 表達 loose token,不硬寫 px(loose 會隨 density 變)\n const buttonPaddingRight = hasActions\n ? `calc(var(--layout-space-loose) + ${suffixContentWidth}px + 0.5rem)`\n : undefined\n\n const button = (\n <Comp\n ref={ref}\n data-sidebar=\"menu-button\"\n data-active={isActive}\n className={cn(sidebarMenuButtonVariants({ size, variant }), className)}\n style={hasActions ? { paddingRight: buttonPaddingRight } : undefined}\n onClick={handleClick}\n {...props}\n >\n {content}\n </Comp>\n )\n\n // Suffix inline actions——絕對定位在 menu-item 右邊,\n // 跟 button 同層(不是 button 的 child,避免巢狀 button)。\n const suffixNode = hasActions ? (\n <span\n data-sidebar=\"menu-inline-actions\"\n className={cn(\n \"absolute top-1/2 -translate-y-1/2 flex items-center gap-2\",\n \"right-[var(--layout-space-loose)]\",\n // Icon 模式隱藏(跟 SidebarMenuBadge / SidebarMenuAction 一致)\n \"group-data-[collapsible=icon]:hidden\",\n // hover-reveal:滑鼠 hover 或鍵盤 focus(但不是 mouse click 的 focus)時顯示。\n // 用 `:has(:focus-visible)` 而非 `:focus-within`——focus-within 會被\n // mouse click 觸發,導致 click 之後 actions 永久顯示直到焦點移走;\n // focus-visible 只在鍵盤 tab 時啟動,mouse click 不會觸發,符合使用者直覺。\n actionsReveal === \"hover\" &&\n \"opacity-0 group-hover/menu-item:opacity-100 group-has-[:focus-visible]/menu-item:opacity-100 transition-opacity duration-150\"\n )}\n >\n {hasSlot\n ? inlineActionsSlot\n : inlineActions!.map((action, i) => (\n <ItemInlineAction key={action.label + i} action={action} />\n ))}\n </span>\n ) : null\n\n // code-quality-allow: long-function — helper fn 結構緊密,拆 sub-fn 會跨 fn 傳 state 反而複雜\n const buttonWithTooltip = tooltip ? (\n (() => {\n const tooltipProps =\n typeof tooltip === \"string\" ? { children: tooltip } : tooltip\n return (\n <Tooltip>\n <TooltipTrigger asChild>{button}</TooltipTrigger>\n <TooltipContent\n side=\"right\"\n align=\"center\"\n hidden={state !== \"collapsed\" || isMobile}\n {...tooltipProps}\n />\n </Tooltip>\n )\n })()\n ) : (\n button\n )\n\n if (!suffixNode) return buttonWithTooltip\n return (\n <>\n {buttonWithTooltip}\n {suffixNode}\n </>\n )\n }\n)\nSidebarMenuButton.displayName = \"SidebarMenuButton\"\n\nconst SidebarMenuAction = React.forwardRef<\n HTMLButtonElement,\n React.ComponentProps<\"button\"> & {\n asChild?: boolean\n showOnHover?: boolean\n }\n>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\"\n\n return (\n <Comp\n ref={ref}\n data-sidebar=\"menu-action\"\n className={cn(\n \"absolute right-[var(--layout-space-loose)] top-1/2 -translate-y-1/2 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-fg-muted outline-none ring-ring transition-colors hover:bg-neutral-hover hover:text-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n \"after:absolute after:-inset-2 after:md:hidden\",\n \"group-data-[collapsible=icon]:hidden\",\n showOnHover &&\n \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-foreground md:opacity-0\",\n className\n )}\n {...props}\n />\n )\n})\nSidebarMenuAction.displayName = \"SidebarMenuAction\"\n\n// SidebarMenuBadge — 重用專案的 Badge 元件,絕對定位在 menu item 右側\n// Consumer 傳入 Badge 的所有 props(count / variant / max 等)\nconst SidebarMenuBadge = React.forwardRef<\n React.ElementRef<typeof Badge>,\n React.ComponentProps<typeof Badge>\n>(({ className, ...props }, ref) => (\n <Badge\n ref={ref}\n data-sidebar=\"menu-badge\"\n className={cn(\n \"pointer-events-none absolute right-[var(--layout-space-loose)] top-1/2 -translate-y-1/2\",\n \"group-data-[collapsible=icon]:hidden\",\n className\n )}\n {...props}\n />\n))\nSidebarMenuBadge.displayName = \"SidebarMenuBadge\"\n\n// SidebarMenuSkeleton — 對齊 SidebarMenuButton 的 item-layout 公式,支援 sm/md/lg\n// 沒傳 size 就從 context 繼承,確保 loading 狀態跟實際 item 同高不跳動\nconst sidebarMenuSkeletonVariants = cva(\n [\n \"flex items-start gap-2\",\n \"px-[var(--layout-space-loose)]\",\n ],\n {\n variants: {\n // 消費 ROW_PADDING_BY_SIZE SSOT + skeleton-icon size modifier(Sidebar-specific)\n // 注:skeleton 無文字,typography class 雖被帶入但無害,保持公式一處同步\n size: {\n sm: [ROW_PADDING_BY_SIZE.sm, \"[&>[data-sidebar=menu-skeleton-icon]]:size-4\"],\n md: [ROW_PADDING_BY_SIZE.md, \"[&>[data-sidebar=menu-skeleton-icon]]:size-4\"],\n lg: [ROW_PADDING_BY_SIZE.lg, \"[&>[data-sidebar=menu-skeleton-icon]]:size-5\"],\n },\n },\n defaultVariants: { size: \"md\" },\n }\n)\n\nconst SidebarMenuSkeleton = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> & {\n showIcon?: boolean\n } & VariantProps<typeof sidebarMenuSkeletonVariants>\n>(({ className, showIcon = false, size: sizeProp, ...props }, ref) => {\n const { size: contextSize } = useSidebar()\n const size = sizeProp ?? contextSize\n const width = React.useMemo(() => {\n return `${Math.floor(Math.random() * 40) + 50}%`\n }, [])\n\n return (\n <div\n ref={ref}\n data-sidebar=\"menu-skeleton\"\n className={cn(sidebarMenuSkeletonVariants({ size }), className)}\n {...props}\n >\n {showIcon && (\n <Skeleton\n className=\"rounded-md shrink-0\"\n data-sidebar=\"menu-skeleton-icon\"\n />\n )}\n <Skeleton\n className=\"h-4 max-w-[var(--skeleton-width)] flex-1\"\n data-sidebar=\"menu-skeleton-text\"\n style={\n {\n \"--skeleton-width\": width,\n } as React.CSSProperties\n }\n />\n </div>\n )\n})\nSidebarMenuSkeleton.displayName = \"SidebarMenuSkeleton\"\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 sidebarMeta = {\n component: 'Sidebar',\n family: null, // non-family composite / overlay / layout\n variants: {\n default: { when: '標準導覽 row,參與 single-selection' },\n meta: { when: 'Section 底部命令 row(Show more / 新增),不參與 selection' },\n },\n sizes: {\n sm: { px: 28, when: '次導覽 / 設定頁 / 緊湊空間' },\n md: { px: 32, when: '預設 — 應用程式主導覽' },\n lg: { px: 36, when: '重要主導覽 / icon-prominent workspace switcher' },\n },\n states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n tokens: {\n bg: ['bg-neutral-hover', 'bg-surface', 'bg-transparent'],\n fg: ['text-fg-muted', 'text-fg-secondary', 'text-foreground'],\n ring: ['ring-ring'],\n },\n defaultSize: 'md',\n} as const\n\nexport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarProvider,\n SidebarSeparator,\n SidebarTrigger,\n useSidebar,\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Skeleton/skeleton.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import * as React from "react";
+declare const Skeleton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export declare const skeletonMeta: {
+    readonly component: "Skeleton";
+    readonly family: null;
+    readonly variants: {};
+    readonly sizes: {};
+    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly tokens: {
+        readonly bg: readonly ["bg-muted"];
+        readonly fg: readonly [];
+        readonly ring: readonly [];
+    };
+};
+export { Skeleton };
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/components/Skeleton/skeleton.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,QAAA,MAAM,QAAQ,6GASZ,CAAA;AAKF,eAAO,MAAM,YAAY;;;;;;;;;;;CAef,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/Skeleton/skeleton.js ADDED Viewed

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+const Skeleton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("animate-pulse rounded-md bg-muted motion-reduce:animate-none", className),
+    ...props
+  }
+));
+Skeleton.displayName = "Skeleton";
+const skeletonMeta = {
+  component: "Skeleton",
+  family: null,
+  // non-family composite / overlay / layout
+  variants: {},
+  sizes: {},
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: ["bg-muted"],
+    fg: [],
+    ring: []
+  }
+};
+export {
+  Skeleton,
+  skeletonMeta
+};
+//# sourceMappingURL=skeleton.js.map

package/dist/components/Skeleton/skeleton.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"skeleton.js","sources":["../../../src/components/Skeleton/skeleton.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nconst Skeleton = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\"animate-pulse rounded-md bg-muted motion-reduce:animate-none\", className)}\n {...props}\n />\n))\nSkeleton.displayName = \"Skeleton\"\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 skeletonMeta = {\n component: 'Skeleton',\n family: null, // non-family composite / overlay / layout\n variants: {\n\n },\n sizes: {\n\n },\n states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n tokens: {\n bg: ['bg-muted'],\n fg: [],\n ring: [],\n },\n} as const\n\nexport { Skeleton }\n"],"names":[],"mappings":";;;AAGA,MAAM,WAAW,MAAM,WAGrB,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAC1B;AAAA,EAAC;AAAA,EAAA;AAAA,IACC;AAAA,IACA,WAAW,GAAG,gEAAgE,SAAS;AAAA,IACtF,GAAG;AAAA,EAAA;AACN,CACD;AACD,SAAS,cAAc;AAIhB,MAAM,eAAe;AAAA,EAC1B,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,UAAU;AAAA,IACf,IAAI,CAAA;AAAA,IACJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}

package/dist/components/Slider/slider.d.ts ADDED Viewed

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { type VariantProps } from 'class-variance-authority';
+/**
+ * Slider — 數值範圍選取器
+ *
+ * 基於 Radix Slider primitive,橋接設計系統 token。詳細設計原則見 `slider.spec.md`。
+ *
+ * ── 核心設計 ──
+ * 1. **視覺單一**:track 厚度、thumb 直徑、ring 尺寸都是固定值,不隨 `size` 變
+ * 2. **`size` 只控容器外高**:對齊 Field family 的 `h-field-*` tier,讓 Slider 能跟
+ *    Input / NumberInput / Select 在 Field 內並排對齊
+ * 3. **Range mode 免費**:Radix 原生支援 `value: number[]`,傳多值自動多 thumb
+ * 4. **Hover / active 用 elevation 陰影**:不用色變,避免暗示「這是 button」
+ */
+declare const sliderRootVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface SliderProps extends Omit<React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, 'children'>, VariantProps<typeof sliderRootVariants> {
+}
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const sliderMeta: {
+    readonly component: "Slider";
+    readonly family: 4;
+    readonly variants: {};
+    readonly sizes: {
+        readonly sm: {
+            readonly px: 28;
+            readonly when: "Toolbar / inline 編輯";
+        };
+        readonly md: {
+            readonly px: 36;
+            readonly when: "預設 — Form / cell inline edit";
+        };
+        readonly lg: {
+            readonly px: 44;
+            readonly when: "Marketing / 高 touch 區";
+        };
+    };
+    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly tokens: {
+        readonly bg: readonly ["bg-muted", "bg-primary", "bg-secondary", "bg-surface"];
+        readonly fg: readonly [];
+        readonly ring: readonly [];
+    };
+};
+export { Slider, sliderRootVariants };
+//# sourceMappingURL=slider.d.ts.map

package/dist/components/Slider/slider.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/slider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE;;;;;;;;;;;GAWG;AAEH,QAAA,MAAM,kBAAkB;;8EA8BvB,CAAA;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,EACnF,YAAY,CAAC,OAAO,kBAAkB,CAAC;CAAG;AAE9C,QAAA,MAAM,MAAM,qFAiFV,CAAA;AAKF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;CAeb,CAAA;AAEV,OAAO,EAAE,MAAM,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/components/Slider/slider.js ADDED Viewed

@@ -0,0 +1,108 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+const sliderRootVariants = cva(
+  // 容器外層:水平置中 + relative(Radix 會絕對定位內部元素)
+  // flex items-center 讓 track+thumb 在任何 field-height 下都垂直置中
+  //
+  // ── Disabled 策略:灰階 token swap(對齊 Button / Checkbox)──
+  // Slider 的藍色 range 是美學視覺,不是 semantic state——使用者從 disabled
+  // slider 需要辨識的是 thumb 位置 + range 長度,這兩者不依賴顏色。失去藍色
+  // 沒有資訊損失。
+  //
+  // 跟 Switch 的差別:Switch 的 on/off 是純顏色差異(沒有形狀差異),所以必須
+  // 靠 opacity 保留色彩身分。Slider 的位置/長度是形狀差異,不需要保留顏色身分,
+  // 跟 Checkbox(checkmark 形狀 = semantic 載體)同類,應該走灰階。
+  //
+  // 詳細判準見 `slider.spec.md` 的「Disabled 策略」章節。
+  [
+    "relative flex items-center w-full min-w-0 touch-none select-none",
+    "data-[disabled]:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-field-sm",
+        md: "h-field-md",
+        lg: "h-field-lg"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const Slider = React.forwardRef(({ className, size, value, defaultValue, "aria-label": ariaLabel, ...props }, ref) => {
+  const thumbCount = Array.isArray(value) && value.length || Array.isArray(defaultValue) && defaultValue.length || 1;
+  return /* @__PURE__ */ jsxs(
+    SliderPrimitive.Root,
+    {
+      ref,
+      value,
+      defaultValue,
+      className: cn(sliderRootVariants({ size }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SliderPrimitive.Track, { className: cn(
+          "relative grow overflow-hidden rounded-full h-1",
+          // Rest:bg-secondary(n-3,「微淡可辨」的 subtle fill,跟 Tag neutral / Badge low 同級)
+          // Disabled:bg-muted(n-2,「disabled-like 退化」底色)
+          "bg-secondary data-[disabled]:bg-muted"
+        ), children: /* @__PURE__ */ jsx(
+          SliderPrimitive.Range,
+          {
+            className: cn(
+              "absolute h-full bg-primary",
+              "data-[disabled]:bg-border"
+            )
+          }
+        ) }),
+        Array.from({ length: thumbCount }).map((_, i) => /* @__PURE__ */ jsx(
+          SliderPrimitive.Thumb,
+          {
+            className: cn(
+              "block h-4 w-4 shrink-0 rounded-full cursor-grab",
+              "bg-surface border-2 border-primary",
+              "transition-all duration-150",
+              // Hover:border 加深到 primary-hover + elevation 陰影
+              "hover:border-primary-hover hover:[box-shadow:var(--elevation-100)]",
+              "active:cursor-grabbing active:border-primary-hover active:[box-shadow:var(--elevation-200)]",
+              // Focus:border 加深(跟 hover 同視覺),不加 ring 或 halo
+              "outline-none focus-visible:border-primary-hover",
+              // Disabled:border 跟 Range 一起退成 border(n-5),bg 保留 bg-surface
+              "data-[disabled]:cursor-not-allowed data-[disabled]:border-border",
+              "data-[disabled]:hover:[box-shadow:none]"
+            ),
+            "aria-label": ariaLabel ? thumbCount > 1 ? `${ariaLabel} (${i + 1})` : ariaLabel : thumbCount > 1 ? `Thumb ${i + 1}` : void 0
+          },
+          i
+        ))
+      ]
+    }
+  );
+});
+Slider.displayName = "Slider";
+const sliderMeta = {
+  component: "Slider",
+  family: 4,
+  variants: {},
+  sizes: {
+    sm: { px: 28, when: "Toolbar / inline 編輯" },
+    md: { px: 36, when: "預設 — Form / cell inline edit" },
+    lg: { px: 44, when: "Marketing / 高 touch 區" }
+  },
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: ["bg-muted", "bg-primary", "bg-secondary", "bg-surface"],
+    fg: [],
+    ring: []
+  }
+};
+export {
+  Slider,
+  sliderMeta,
+  sliderRootVariants
+};
+//# sourceMappingURL=slider.js.map

package/dist/components/Slider/slider.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"slider.js","sources":["../../../src/components/Slider/slider.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as SliderPrimitive from '@radix-ui/react-slider'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\n/**\n * Slider — 數值範圍選取器\n *\n * 基於 Radix Slider primitive,橋接設計系統 token。詳細設計原則見 `slider.spec.md`。\n *\n * ── 核心設計 ──\n * 1. **視覺單一**:track 厚度、thumb 直徑、ring 尺寸都是固定值,不隨 `size` 變\n * 2. **`size` 只控容器外高**:對齊 Field family 的 `h-field-*` tier,讓 Slider 能跟\n * Input / NumberInput / Select 在 Field 內並排對齊\n * 3. **Range mode 免費**:Radix 原生支援 `value: number[]`,傳多值自動多 thumb\n * 4. **Hover / active 用 elevation 陰影**:不用色變,避免暗示「這是 button」\n */\n\nconst sliderRootVariants = cva(\n // 容器外層:水平置中 + relative(Radix 會絕對定位內部元素)\n // flex items-center 讓 track+thumb 在任何 field-height 下都垂直置中\n //\n // ── Disabled 策略:灰階 token swap(對齊 Button / Checkbox)──\n // Slider 的藍色 range 是美學視覺,不是 semantic state——使用者從 disabled\n // slider 需要辨識的是 thumb 位置 + range 長度,這兩者不依賴顏色。失去藍色\n // 沒有資訊損失。\n //\n // 跟 Switch 的差別:Switch 的 on/off 是純顏色差異(沒有形狀差異),所以必須\n // 靠 opacity 保留色彩身分。Slider 的位置/長度是形狀差異,不需要保留顏色身分,\n // 跟 Checkbox(checkmark 形狀 = semantic 載體)同類,應該走灰階。\n //\n // 詳細判準見 `slider.spec.md` 的「Disabled 策略」章節。\n [\n 'relative flex items-center w-full min-w-0 touch-none select-none',\n 'data-[disabled]:cursor-not-allowed',\n ],\n {\n variants: {\n size: {\n sm: 'h-field-sm',\n md: 'h-field-md',\n lg: 'h-field-lg',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n },\n)\n\nexport interface SliderProps\n extends Omit<React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, 'children'>,\n VariantProps<typeof sliderRootVariants> {}\n\nconst Slider = React.forwardRef<\n React.ElementRef<typeof SliderPrimitive.Root>,\n SliderProps\n>(({ className, size, value, defaultValue, 'aria-label': ariaLabel, ...props }, ref) => {\n // 推導要渲染幾個 thumb:controlled 用 value,uncontrolled 用 defaultValue,\n // 都沒有時 fallback 單 thumb(Radix 預設行為)\n const thumbCount =\n (Array.isArray(value) && value.length) ||\n (Array.isArray(defaultValue) && defaultValue.length) ||\n 1\n\n return (\n <SliderPrimitive.Root\n ref={ref}\n value={value}\n defaultValue={defaultValue}\n className={cn(sliderRootVariants({ size }), className)}\n {...props}\n >\n {/*\n Track — rest 用 bg-secondary(n-3,「微淡可辨」),disabled 用 bg-muted(n-2,退化)。\n 跟 Tag neutral / Badge low 同家族。\n */}\n <SliderPrimitive.Track className={cn(\n 'relative grow overflow-hidden rounded-full h-1',\n // Rest:bg-secondary(n-3,「微淡可辨」的 subtle fill,跟 Tag neutral / Badge low 同級)\n // Disabled:bg-muted(n-2,「disabled-like 退化」底色)\n 'bg-secondary data-[disabled]:bg-muted',\n )}>\n {/*\n Range — 填滿段。\n\n ── Range 色 = Thumb border 色(語意一致) ──\n Rest 兩者都是 `primary`,disabled 兩者都是 `border`(n-5)。為什麼要一致?\n Range 是「填充視覺」,Thumb border 是「thumb 的輪廓線」——視覺上 thumb\n 的 border 剛好是 range 的延續(thumb 坐落在 range 的端點上,border 跟\n range 在色彩上融為一體,看起來像「range 包住 thumb」而不是「thumb 浮在\n range 上」)。兩個 token 綁在一起,不論什麼 state 都一致。\n */}\n <SliderPrimitive.Range\n className={cn(\n 'absolute h-full bg-primary',\n 'data-[disabled]:bg-border',\n )}\n />\n </SliderPrimitive.Track>\n\n {/*\n Thumb — N 個(由 thumbCount 決定)。\n 白底 + 2px 邊框,邊框色 = Range 色(**一致綁定**):\n - Rest: `border-primary` ↔ Range `bg-primary`\n - Disabled: `border-border` ↔ Range `bg-border`\n 這個一致性讓 thumb border 跟 range 融為一體,看起來像「range 包住 thumb」\n 的連續視覺。thumb 的白底則是「被 range 圍住的空心洞」,讓 thumb 的位置\n 清楚浮出。不論 state,thumb border 跟 range 永遠同色。\n\n **為什麼 thumb bg 不能改**:`bg-surface`(白)必須在 rest / disabled 都維持,\n 否則會融入 track 的 `bg-muted` 裡消失。這是之前踩過的同色融色 bug\n (曾經寫成 `data-[disabled]:bg-muted` 讓 thumb 跟 track 完全融合)。\n */}\n {Array.from({ length: thumbCount }).map((_, i) => (\n <SliderPrimitive.Thumb\n key={i}\n className={cn(\n 'block h-4 w-4 shrink-0 rounded-full cursor-grab',\n 'bg-surface border-2 border-primary',\n 'transition-all duration-150',\n // Hover:border 加深到 primary-hover + elevation 陰影\n 'hover:border-primary-hover hover:[box-shadow:var(--elevation-100)]',\n 'active:cursor-grabbing active:border-primary-hover active:[box-shadow:var(--elevation-200)]',\n // Focus:border 加深(跟 hover 同視覺),不加 ring 或 halo\n 'outline-none focus-visible:border-primary-hover',\n // Disabled:border 跟 Range 一起退成 border(n-5),bg 保留 bg-surface\n 'data-[disabled]:cursor-not-allowed data-[disabled]:border-border',\n 'data-[disabled]:hover:[box-shadow:none]',\n )}\n aria-label={ariaLabel ? (thumbCount > 1 ? `${ariaLabel} (${i + 1})` : ariaLabel) : (thumbCount > 1 ? `Thumb ${i + 1}` : undefined)}\n />\n ))}\n </SliderPrimitive.Root>\n )\n})\nSlider.displayName = 'Slider'\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 sliderMeta = {\n component: 'Slider',\n family: 4,\n variants: {},\n sizes: {\n sm: { px: 28, when: 'Toolbar / inline 編輯' },\n md: { px: 36, when: '預設 — Form / cell inline edit' },\n lg: { px: 44, when: 'Marketing / 高 touch 區' },\n },\n states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n tokens: {\n bg: ['bg-muted', 'bg-primary', 'bg-secondary', 'bg-surface'],\n fg: [],\n ring: [],\n },\n} as const\n\nexport { Slider, sliderRootVariants }\n"],"names":[],"mappings":";;;;;AAkBA,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAczB;AAAA,IACE;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ;AAMA,MAAM,SAAS,MAAM,WAGnB,CAAC,EAAE,WAAW,MAAM,OAAO,cAAc,cAAc,WAAW,GAAG,MAAA,GAAS,QAAQ;AAGtF,QAAM,aACH,MAAM,QAAQ,KAAK,KAAK,MAAM,UAC9B,MAAM,QAAQ,YAAY,KAAK,aAAa,UAC7C;AAEF,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW,GAAG,mBAAmB,EAAE,KAAA,CAAM,GAAG,SAAS;AAAA,MACpD,GAAG;AAAA,MAMJ,UAAA;AAAA,QAAA,oBAAC,gBAAgB,OAAhB,EAAsB,WAAW;AAAA,UAChC;AAAA;AAAA;AAAA,UAGA;AAAA,QAAA,GAYA,UAAA;AAAA,UAAC,gBAAgB;AAAA,UAAhB;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA,GAEJ;AAAA,QAeC,MAAM,KAAK,EAAE,QAAQ,WAAA,CAAY,EAAE,IAAI,CAAC,GAAG,MAC1C;AAAA,UAAC,gBAAgB;AAAA,UAAhB;AAAA,YAEC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA;AAAA,cAEA;AAAA,cACA;AAAA;AAAA,cAEA;AAAA;AAAA,cAEA;AAAA,cACA;AAAA,YAAA;AAAA,YAEF,cAAY,YAAa,aAAa,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC,MAAM,YAAc,aAAa,IAAI,SAAS,IAAI,CAAC,KAAK;AAAA,UAAA;AAAA,UAdnH;AAAA,QAAA,CAgBR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AACD,OAAO,cAAc;AAId,MAAM,aAAa;AAAA,EACxB,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU,CAAA;AAAA,EACV,OAAO;AAAA,IACL,IAAI,EAAE,IAAI,IAAI,MAAM,sBAAA;AAAA,IACpB,IAAI,EAAE,IAAI,IAAI,MAAM,+BAAA;AAAA,IACpB,IAAI,EAAE,IAAI,IAAI,MAAM,wBAAA;AAAA,EAAwB;AAAA,EAE9C,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAC,YAAY,cAAc,gBAAgB,YAAY;AAAA,IAC3D,IAAI,CAAA;AAAA,IACJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}

package/dist/components/Steps/steps.d.ts ADDED Viewed

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+export type StepsSize = 'sm' | 'md' | 'lg';
+export type StepsOrientation = 'vertical' | 'horizontal';
+export type StepsExpansion = 'follow-active' | 'multiple';
+export type StepContentState = 'upcoming' | 'reachable' | 'current' | 'completed' | 'error';
+declare const stepsRootVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface StepsProps extends Omit<React.HTMLAttributes<HTMLOListElement>, 'onChange' | 'defaultValue'>, VariantProps<typeof stepsRootVariants> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    completedValues?: string[];
+    errorValues?: string[];
+    linear?: boolean;
+    size?: StepsSize;
+    orientation?: StepsOrientation;
+    expansion?: StepsExpansion;
+    defaultExpanded?: 'all' | 'none' | string[];
+}
+declare const Steps: React.ForwardRefExoticComponent<StepsProps & React.RefAttributes<HTMLOListElement>>;
+interface StepItemInjectedProps {
+    __isLast?: boolean;
+}
+export interface StepItemProps extends Omit<React.HTMLAttributes<HTMLLIElement>, 'value'>, StepItemInjectedProps {
+    value: string;
+    state?: 'error';
+    disabled?: boolean;
+}
+declare const stepItemVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const StepItem: React.ForwardRefExoticComponent<StepItemProps & React.RefAttributes<HTMLLIElement>>;
+export interface StepLabelProps extends React.HTMLAttributes<HTMLSpanElement> {
+}
+declare const StepLabel: React.ForwardRefExoticComponent<StepLabelProps & React.RefAttributes<HTMLSpanElement>>;
+export interface StepDescriptionProps extends React.HTMLAttributes<HTMLSpanElement> {
+}
+declare const StepDescription: React.ForwardRefExoticComponent<StepDescriptionProps & React.RefAttributes<HTMLSpanElement>>;
+export interface StepContentProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+declare const StepContent: React.ForwardRefExoticComponent<StepContentProps & React.RefAttributes<HTMLDivElement>>;
+export declare const stepsMeta: {
+    readonly component: "Steps";
+    readonly family: 2;
+    readonly variants: {};
+    readonly sizes: {
+        readonly sm: {
+            readonly px: 8;
+            readonly when: "Sidebar / 緊湊 onboarding;indicator 8px dot";
+        };
+        readonly md: {
+            readonly px: 24;
+            readonly when: "預設 — wizard / checkout / 註冊主流程;indicator 24px circle";
+        };
+        readonly lg: {
+            readonly px: 32;
+            readonly when: "Marketing 流程展示 / 重要 onboarding;indicator 32px circle";
+        };
+    };
+    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly tokens: {
+        readonly bg: readonly ["bg-primary"];
+        readonly fg: readonly ["--fg-disabled", "--foreground", "--on-emphasis", "text-error-text", "text-fg-disabled", "text-fg-muted", "text-fg-secondary", "text-foreground"];
+        readonly ring: readonly [];
+    };
+};
+export { Steps, StepItem, StepLabel, StepDescription, StepContent, stepsRootVariants, stepItemVariants };
+//# sourceMappingURL=steps.d.ts.map

package/dist/components/Steps/steps.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"steps.d.ts","sourceRoot":"","sources":["../../../src/components/Steps/steps.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE1C,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,YAAY,CAAA;AACxD,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG,UAAU,CAAA;AACzD,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAA;AA2I3F,QAAA,MAAM,iBAAiB;;8EAQrB,CAAA;AAEF,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,cAAc,CAAC,EAC/E,YAAY,CAAC,OAAO,iBAAiB,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;IACtB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,WAAW,CAAC,EAAE,gBAAgB,CAAA;IAC9B,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,eAAe,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,EAAE,CAAA;CAC5C;AAGD,QAAA,MAAM,KAAK,qFAsHV,CAAA;AAKD,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC,EACxD,qBAAqB;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,gBAAgB;;;8EAgBpB,CAAA;AAGF,QAAA,MAAM,QAAQ,qFA8Db,CAAA;AA2VD,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAGhF,QAAA,MAAM,SAAS,wFA0Bd,CAAA;AAKD,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAEtF,QAAA,MAAM,eAAe,8FA2BpB,CAAA;AAKD,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjF,QAAA,MAAM,WAAW,yFAchB,CAAA;AAOD,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;CAeZ,CAAA;AAEV,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,CAAA"}