@demokit-ui/demokit 0.1.0 → 0.1.2

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

@@ -106,3 +106,94 @@ export * from './composite/sprint-summary/sprint-summary';
 export * from './composite/board-toolbar/board-toolbar';
 export * from './composite/oauth-login-buttons/oauth-login-buttons';
 export * from './composite/forgot-password-form/forgot-password-form';
+export * from './chart/chart/chart.examples';
+export * from './composite/action-bar/action-bar.examples';
+export * from './composite/action-card/action-card.examples';
+export * from './composite/activity-feed/activity-feed.examples';
+export * from './composite/alert-card/alert-card.examples';
+export * from './composite/approval-flow/approval-flow.examples';
+export * from './composite/auth-shell/auth-shell.examples';
+export * from './composite/board-toolbar/board-toolbar.examples';
+export * from './composite/chart-card/chart-card.examples';
+export * from './composite/chart-toolbar/chart-toolbar.examples';
+export * from './composite/data-section/data-section.examples';
+export * from './composite/description-grid/description-grid.examples';
+export * from './composite/detail-header/detail-header.examples';
+export * from './composite/filter-panel/filter-panel.examples';
+export * from './composite/filter-toolbar/filter-toolbar.examples';
+export * from './composite/forgot-password-form/forgot-password-form.examples';
+export * from './composite/form-section/form-section.examples';
+export * from './composite/kanban-board/kanban-board.examples';
+export * from './composite/login-card/login-card.examples';
+export * from './composite/message-list-card/message-list-card.examples';
+export * from './composite/metric-card/metric-card.examples';
+export * from './composite/milestone-card/milestone-card.examples';
+export * from './composite/oauth-login-buttons/oauth-login-buttons.examples';
+export * from './composite/page-header/page-header.examples';
+export * from './composite/profile-card/profile-card.examples';
+export * from './composite/progress-card/progress-card.examples';
+export * from './composite/project-card/project-card.examples';
+export * from './composite/shortcut-card/shortcut-card.examples';
+export * from './composite/sprint-summary/sprint-summary.examples';
+export * from './composite/state-panel/state-panel.examples';
+export * from './composite/summary-card/summary-card.examples';
+export * from './composite/task-card/task-card.examples';
+export * from './composite/timeline/timeline.examples';
+export * from './composite/todo-card/todo-card.examples';
+export * from './data-display/avatar-group/avatar-group.examples';
+export * from './data-display/avatar/avatar.examples';
+export * from './data-display/badge/badge.examples';
+export * from './data-display/card/card.examples';
+export * from './data-display/data-grid/data-grid.examples';
+export * from './data-display/kbd/kbd.examples';
+export * from './data-display/money-amount/money-amount.examples';
+export * from './data-display/progress/progress.examples';
+export * from './data-display/skeleton/skeleton.examples';
+export * from './data-display/sliding-number/sliding-number.examples';
+export * from './data-display/stepper/stepper.examples';
+export * from './data-display/table/table.examples';
+export * from './decorative/aurora-background/aurora-background.examples';
+export * from './decorative/grid-background/grid-background.examples';
+export * from './decorative/shimmering-text/shimmering-text.examples';
+export * from './decorative/text-reveal/text-reveal.examples';
+export * from './feedback/alert-dialog/alert-dialog.examples';
+export * from './feedback/alert/alert.examples';
+export * from './feedback/context-menu/context-menu.examples';
+export * from './feedback/dialog/dialog.examples';
+export * from './feedback/drawer/drawer.examples';
+export * from './feedback/dropdown-menu/dropdown-menu.examples';
+export * from './feedback/hover-card/hover-card.examples';
+export * from './feedback/popover/popover.examples';
+export * from './feedback/sheet/sheet.examples';
+export * from './feedback/sonner/sonner.examples';
+export * from './feedback/title-help/title-help.examples';
+export * from './feedback/tooltip/tooltip.examples';
+export * from './form/button/button.examples';
+export * from './form/calendar/calendar.examples';
+export * from './form/checkbox/checkbox.examples';
+export * from './form/command/command.examples';
+export * from './form/datefield/datefield.examples';
+export * from './form/file-upload/file-upload.examples';
+export * from './form/form/form.examples';
+export * from './form/input/input.examples';
+export * from './form/label/label.examples';
+export * from './form/radio-group/radio-group.examples';
+export * from './form/select/select.examples';
+export * from './form/slider/slider.examples';
+export * from './form/switch/switch.examples';
+export * from './form/textarea/textarea.examples';
+export * from './form/toggle-group/toggle-group.examples';
+export * from './form/toggle/toggle.examples';
+export * from './layout/accordion/accordion.examples';
+export * from './layout/aspect-ratio/aspect-ratio.examples';
+export * from './layout/collapsible/collapsible.examples';
+export * from './layout/resizable/resizable.examples';
+export * from './layout/scroll-area/scroll-area.examples';
+export * from './layout/separator/separator.examples';
+export * from './navigation/accordion-menu/accordion-menu.examples';
+export * from './navigation/breadcrumb/breadcrumb.examples';
+export * from './navigation/menubar/menubar.examples';
+export * from './navigation/navigation-menu/navigation-menu.examples';
+export * from './navigation/pagination/pagination.examples';
+export * from './navigation/scrollspy/scrollspy.examples';
+export * from './navigation/tabs/tabs.examples';

package/dist/kit/components/layout/accordion/accordion.examples.d.ts

@@ -0,0 +1,2 @@
+export declare function AccordionBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/layout/accordion/accordion.examples.js

@@ -0,0 +1,34 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { Accordion as n, AccordionItem as c, AccordionTrigger as i, AccordionContent as o } from "./accordion.js";
+function l() {
+  return /* @__PURE__ */ r(n, { type: "single", collapsible: !0, className: "w-full max-w-xl", children: [
+    /* @__PURE__ */ r(c, { value: "item-1", children: [
+      /* @__PURE__ */ e(i, { children: "什么是 DemoKit？" }),
+      /* @__PURE__ */ e(o, { children: "一套用于快速产出 Demo 的 React 设计系统：一个 barrel 导入、严格 token 约束、组件选型决策文档齐全。" })
+    ] }),
+    /* @__PURE__ */ r(c, { value: "item-2", children: [
+      /* @__PURE__ */ e(i, { children: "如何切换主题？" }),
+      /* @__PURE__ */ e(o, { children: "通过 useSettings().storeOption('theme', 'glass' | 'navy') 切换，自动持久化到 localStorage。" })
+    ] }),
+    /* @__PURE__ */ r(c, { value: "item-3", children: [
+      /* @__PURE__ */ e(i, { children: "如何引入组件？" }),
+      /* @__PURE__ */ r(o, { children: [
+        "从 barrel 导入：import ",
+        "{",
+        " Card, Button ",
+        "}",
+        " from '@/kit/components'。不要走子路径，分类可能调整。"
+      ] })
+    ] })
+  ] });
+}
+function d() {
+  return /* @__PURE__ */ e("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ r("section", { children: [
+    /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "FAQ 折叠" }),
+    /* @__PURE__ */ e(l, {})
+  ] }) });
+}
+export {
+  l as AccordionBasic,
+  d as AccordionShowcase
+};

package/dist/kit/components/layout/aspect-ratio/aspect-ratio.examples.d.ts

@@ -0,0 +1,3 @@
+export declare function AspectRatioImage(): import("react/jsx-runtime").JSX.Element;
+export declare function AspectRatioSquare(): import("react/jsx-runtime").JSX.Element;
+export declare function AspectRatioShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/layout/aspect-ratio/aspect-ratio.examples.js

@@ -0,0 +1,29 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { AspectRatio as r } from "./aspect-ratio.js";
+function i() {
+  return /* @__PURE__ */ e("div", { className: "w-64", children: /* @__PURE__ */ e(r, { ratio: 16 / 9, className: "bg-muted rounded-md overflow-hidden", children: /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center text-sm text-muted-foreground", children: "16:9 占位" }) }) });
+}
+function s() {
+  return /* @__PURE__ */ t("div", { className: "flex gap-4", children: [
+    /* @__PURE__ */ e("div", { className: "w-32", children: /* @__PURE__ */ e(r, { ratio: 1, className: "bg-primary/10 rounded-md", children: /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center text-xs text-primary", children: "1:1" }) }) }),
+    /* @__PURE__ */ e("div", { className: "w-32", children: /* @__PURE__ */ e(r, { ratio: 4 / 3, className: "bg-primary/10 rounded-md", children: /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center text-xs text-primary", children: "4:3" }) }) }),
+    /* @__PURE__ */ e("div", { className: "w-32", children: /* @__PURE__ */ e(r, { ratio: 16 / 9, className: "bg-primary/10 rounded-md", children: /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center text-xs text-primary", children: "16:9" }) }) })
+  ] });
+}
+function a() {
+  return /* @__PURE__ */ t("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ t("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "16:9 图片占位" }),
+      /* @__PURE__ */ e(i, {})
+    ] }),
+    /* @__PURE__ */ t("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "不同比例对比" }),
+      /* @__PURE__ */ e(s, {})
+    ] })
+  ] });
+}
+export {
+  i as AspectRatioImage,
+  a as AspectRatioShowcase,
+  s as AspectRatioSquare
+};

package/dist/kit/components/layout/collapsible/collapsible.examples.d.ts

@@ -0,0 +1,2 @@
+export declare function CollapsibleBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function CollapsibleShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/layout/collapsible/collapsible.examples.js

@@ -0,0 +1,28 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { RiArrowDownSLine as r } from "@remixicon/react";
+import { Collapsible as l, CollapsibleTrigger as t, CollapsibleContent as o } from "./collapsible.js";
+import { Button as s } from "../../form/button/button.js";
+function n() {
+  return /* @__PURE__ */ i(l, { className: "max-w-md border border-border rounded-md", children: [
+    /* @__PURE__ */ i("div", { className: "flex items-center justify-between p-3", children: [
+      /* @__PURE__ */ e("div", { className: "text-sm font-medium", children: "高级设置" }),
+      /* @__PURE__ */ e(t, { asChild: !0, children: /* @__PURE__ */ e(s, { mode: "icon", variant: "ghost", size: "sm", children: /* @__PURE__ */ e(r, { className: "transition-transform [[data-state=open]>&]:rotate-180" }) }) })
+    ] }),
+    /* @__PURE__ */ i(o, { className: "px-3 pb-3 text-sm text-muted-foreground space-y-2", children: [
+      /* @__PURE__ */ e("div", { children: "• 缓存过期时间" }),
+      /* @__PURE__ */ e("div", { children: "• 并发请求数" }),
+      /* @__PURE__ */ e("div", { children: "• 重试策略" }),
+      /* @__PURE__ */ e("div", { children: "• 超时阈值" })
+    ] })
+  ] });
+}
+function h() {
+  return /* @__PURE__ */ e("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ i("section", { children: [
+    /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "展开 / 收起区域" }),
+    /* @__PURE__ */ e(n, {})
+  ] }) });
+}
+export {
+  n as CollapsibleBasic,
+  h as CollapsibleShowcase
+};

package/dist/kit/components/layout/resizable/resizable.examples.d.ts

@@ -0,0 +1,2 @@
+export declare function ResizableHorizontal(): import("react/jsx-runtime").JSX.Element;
+export declare function ResizableShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/layout/resizable/resizable.examples.js

@@ -0,0 +1,26 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { ResizablePanelGroup as t, ResizablePanel as l, ResizableHandle as i } from "./resizable.js";
+function n() {
+  return /* @__PURE__ */ r(
+    t,
+    {
+      direction: "horizontal",
+      className: "min-h-48 max-w-xl rounded-md border border-border",
+      children: [
+        /* @__PURE__ */ e(l, { defaultSize: 30, children: /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center p-3 text-sm text-muted-foreground", children: "侧栏 (30%)" }) }),
+        /* @__PURE__ */ e(i, { withHandle: !0 }),
+        /* @__PURE__ */ e(l, { defaultSize: 70, children: /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center p-3 text-sm text-muted-foreground", children: "主内容 (70%) · 拖拽中间分割条试试" }) })
+      ]
+    }
+  );
+}
+function a() {
+  return /* @__PURE__ */ e("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ r("section", { children: [
+    /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "横向双栏" }),
+    /* @__PURE__ */ e(n, {})
+  ] }) });
+}
+export {
+  n as ResizableHorizontal,
+  a as ResizableShowcase
+};

package/dist/kit/components/layout/scroll-area/scroll-area.examples.d.ts

@@ -0,0 +1,2 @@
+export declare function ScrollAreaBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function ScrollAreaShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/layout/scroll-area/scroll-area.examples.js

@@ -0,0 +1,16 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { ScrollArea as l } from "./scroll-area.js";
+const s = Array.from({ length: 40 }, (r, o) => `项目 #${o + 1}`);
+function a() {
+  return /* @__PURE__ */ e(l, { className: "h-64 w-56 rounded-md border border-border", children: /* @__PURE__ */ e("div", { className: "p-3 space-y-2", children: s.map((r) => /* @__PURE__ */ e("div", { className: "text-sm py-1 px-2 rounded hover:bg-muted", children: r }, r)) }) });
+}
+function m() {
+  return /* @__PURE__ */ e("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ c("section", { children: [
+    /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "纵向滚动列表" }),
+    /* @__PURE__ */ e(a, {})
+  ] }) });
+}
+export {
+  a as ScrollAreaBasic,
+  m as ScrollAreaShowcase
+};

package/dist/kit/components/layout/separator/separator.examples.d.ts

@@ -0,0 +1,3 @@
+export declare function SeparatorHorizontal(): import("react/jsx-runtime").JSX.Element;
+export declare function SeparatorVertical(): import("react/jsx-runtime").JSX.Element;
+export declare function SeparatorShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/layout/separator/separator.examples.js

@@ -0,0 +1,35 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { Separator as t } from "./separator.js";
+function a() {
+  return /* @__PURE__ */ r("div", { className: "space-y-3 max-w-md", children: [
+    /* @__PURE__ */ e("div", { className: "text-sm", children: "上方区域内容" }),
+    /* @__PURE__ */ e(t, {}),
+    /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground", children: "下方区域内容" })
+  ] });
+}
+function i() {
+  return /* @__PURE__ */ r("div", { className: "flex h-6 items-center gap-4 text-sm", children: [
+    /* @__PURE__ */ e("span", { children: "全部" }),
+    /* @__PURE__ */ e(t, { orientation: "vertical" }),
+    /* @__PURE__ */ e("span", { children: "未读" }),
+    /* @__PURE__ */ e(t, { orientation: "vertical" }),
+    /* @__PURE__ */ e("span", { children: "已收藏" })
+  ] });
+}
+function c() {
+  return /* @__PURE__ */ r("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ r("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "水平" }),
+      /* @__PURE__ */ e(a, {})
+    ] }),
+    /* @__PURE__ */ r("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "垂直" }),
+      /* @__PURE__ */ e(i, {})
+    ] })
+  ] });
+}
+export {
+  a as SeparatorHorizontal,
+  c as SeparatorShowcase,
+  i as SeparatorVertical
+};

package/dist/kit/components/navigation/accordion-menu/accordion-menu.examples.d.ts

@@ -0,0 +1,2 @@
+export declare function AccordionMenuBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionMenuShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/navigation/accordion-menu/accordion-menu.examples.js

@@ -0,0 +1,36 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { RiHome2Line as i, RiFolder2Line as l, RiSettings2Line as s } from "@remixicon/react";
+import { AccordionMenu as o, AccordionMenuGroup as n, AccordionMenuLabel as a, AccordionMenuItem as r, AccordionMenuSub as d, AccordionMenuSubTrigger as t, AccordionMenuSubContent as u } from "./accordion-menu.js";
+function m() {
+  return /* @__PURE__ */ e("div", { className: "w-64 border border-border rounded-md p-2 bg-card", children: /* @__PURE__ */ e(o, { selectedValue: "/projects", type: "single", collapsible: !0, children: /* @__PURE__ */ c(n, { children: [
+    /* @__PURE__ */ e(a, { children: "主菜单" }),
+    /* @__PURE__ */ c(r, { value: "/", className: "h-8", children: [
+      /* @__PURE__ */ e(i, { className: "size-4" }),
+      " 工作台"
+    ] }),
+    /* @__PURE__ */ c(d, { value: "/projects", children: [
+      /* @__PURE__ */ c(t, { className: "h-8", children: [
+        /* @__PURE__ */ e(l, { className: "size-4" }),
+        " 项目管理"
+      ] }),
+      /* @__PURE__ */ e(u, { type: "single", collapsible: !0, parentValue: "/projects", className: "ps-6", children: /* @__PURE__ */ c(n, { children: [
+        /* @__PURE__ */ e(r, { value: "/projects", className: "h-7 text-[13px]", children: "进行中" }),
+        /* @__PURE__ */ e(r, { value: "/projects/archive", className: "h-7 text-[13px]", children: "已归档" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ c(r, { value: "/settings", className: "h-8", children: [
+      /* @__PURE__ */ e(s, { className: "size-4" }),
+      " 系统设置"
+    ] })
+  ] }) }) });
+}
+function N() {
+  return /* @__PURE__ */ e("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ c("section", { children: [
+    /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "侧边栏菜单" }),
+    /* @__PURE__ */ e(m, {})
+  ] }) });
+}
+export {
+  m as AccordionMenuBasic,
+  N as AccordionMenuShowcase
+};

package/dist/kit/components/navigation/breadcrumb/breadcrumb.examples.d.ts

@@ -0,0 +1,3 @@
+export declare function BreadcrumbBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function BreadcrumbWithEllipsis(): import("react/jsx-runtime").JSX.Element;
+export declare function BreadcrumbShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/navigation/breadcrumb/breadcrumb.examples.js

@@ -0,0 +1,39 @@
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import { Breadcrumb as n, BreadcrumbList as l, BreadcrumbItem as e, BreadcrumbLink as d, BreadcrumbSeparator as i, BreadcrumbPage as h, BreadcrumbEllipsis as m } from "./breadcrumb.js";
+function a() {
+  return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ c(l, { children: [
+    /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(d, { href: "#", children: "首页" }) }),
+    /* @__PURE__ */ r(i, {}),
+    /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(d, { href: "#", children: "项目" }) }),
+    /* @__PURE__ */ r(i, {}),
+    /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(h, { children: "Acme Dashboard" }) })
+  ] }) });
+}
+function s() {
+  return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ c(l, { children: [
+    /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(d, { href: "#", children: "首页" }) }),
+    /* @__PURE__ */ r(i, {}),
+    /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(m, {}) }),
+    /* @__PURE__ */ r(i, {}),
+    /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(d, { href: "#", children: "模块" }) }),
+    /* @__PURE__ */ r(i, {}),
+    /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(h, { children: "Auth" }) })
+  ] }) });
+}
+function u() {
+  return /* @__PURE__ */ c("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ c("section", { children: [
+      /* @__PURE__ */ r("h3", { className: "text-sm font-semibold mb-3", children: "基础" }),
+      /* @__PURE__ */ r(a, {})
+    ] }),
+    /* @__PURE__ */ c("section", { children: [
+      /* @__PURE__ */ r("h3", { className: "text-sm font-semibold mb-3", children: "带省略" }),
+      /* @__PURE__ */ r(s, {})
+    ] })
+  ] });
+}
+export {
+  a as BreadcrumbBasic,
+  u as BreadcrumbShowcase,
+  s as BreadcrumbWithEllipsis
+};

package/dist/kit/components/navigation/menubar/menubar.examples.d.ts

@@ -0,0 +1,2 @@
+export declare function MenubarBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function MenubarShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/navigation/menubar/menubar.examples.js

@@ -0,0 +1,54 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { Menubar as d, MenubarMenu as i, MenubarTrigger as l, MenubarContent as h, MenubarItem as n, MenubarShortcut as c, MenubarSeparator as a } from "./menubar.js";
+function t() {
+  return /* @__PURE__ */ r(d, { children: [
+    /* @__PURE__ */ r(i, { children: [
+      /* @__PURE__ */ e(l, { children: "文件" }),
+      /* @__PURE__ */ r(h, { children: [
+        /* @__PURE__ */ r(n, { children: [
+          "新建 ",
+          /* @__PURE__ */ e(c, { children: "⌘N" })
+        ] }),
+        /* @__PURE__ */ r(n, { children: [
+          "打开 ",
+          /* @__PURE__ */ e(c, { children: "⌘O" })
+        ] }),
+        /* @__PURE__ */ e(a, {}),
+        /* @__PURE__ */ r(n, { children: [
+          "保存 ",
+          /* @__PURE__ */ e(c, { children: "⌘S" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ r(i, { children: [
+      /* @__PURE__ */ e(l, { children: "编辑" }),
+      /* @__PURE__ */ r(h, { children: [
+        /* @__PURE__ */ r(n, { children: [
+          "撤销 ",
+          /* @__PURE__ */ e(c, { children: "⌘Z" })
+        ] }),
+        /* @__PURE__ */ r(n, { children: [
+          "重做 ",
+          /* @__PURE__ */ e(c, { children: "⇧⌘Z" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ r(i, { children: [
+      /* @__PURE__ */ e(l, { children: "视图" }),
+      /* @__PURE__ */ r(h, { children: [
+        /* @__PURE__ */ e(n, { children: "全屏" }),
+        /* @__PURE__ */ e(n, { children: "切换侧栏" })
+      ] })
+    ] })
+  ] });
+}
+function s() {
+  return /* @__PURE__ */ e("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ r("section", { children: [
+    /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "桌面应用风格菜单条" }),
+    /* @__PURE__ */ e(t, {})
+  ] }) });
+}
+export {
+  t as MenubarBasic,
+  s as MenubarShowcase
+};

package/dist/kit/components/navigation/navigation-menu/navigation-menu.examples.d.ts

@@ -0,0 +1,2 @@
+export declare function NavigationMenuBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function NavigationMenuShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/navigation/navigation-menu/navigation-menu.examples.js

@@ -0,0 +1,31 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { NavigationMenu as r, NavigationMenuList as t, NavigationMenuItem as d, NavigationMenuTrigger as a, NavigationMenuContent as o, NavigationMenuLink as n } from "./navigation-menu.js";
+function c() {
+  return /* @__PURE__ */ e(r, { children: /* @__PURE__ */ i(t, { children: [
+    /* @__PURE__ */ i(d, { children: [
+      /* @__PURE__ */ e(a, { children: "产品" }),
+      /* @__PURE__ */ e(o, { children: /* @__PURE__ */ i("div", { className: "grid grid-cols-2 gap-3 p-4 w-[400px]", children: [
+        /* @__PURE__ */ i(n, { href: "#", className: "block p-3 rounded hover:bg-muted", children: [
+          /* @__PURE__ */ e("div", { className: "font-medium", children: "项目管理" }),
+          /* @__PURE__ */ e("div", { className: "text-xs text-muted-foreground mt-1", children: "项目 / 任务 / 里程碑" })
+        ] }),
+        /* @__PURE__ */ i(n, { href: "#", className: "block p-3 rounded hover:bg-muted", children: [
+          /* @__PURE__ */ e("div", { className: "font-medium", children: "审核中心" }),
+          /* @__PURE__ */ e("div", { className: "text-xs text-muted-foreground mt-1", children: "流程 / 抄送 / 归档" })
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(n, { href: "#", className: "px-4 py-2 hover:bg-muted rounded text-sm font-medium", children: "文档" }) }),
+    /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(n, { href: "#", className: "px-4 py-2 hover:bg-muted rounded text-sm font-medium", children: "定价" }) })
+  ] }) });
+}
+function s() {
+  return /* @__PURE__ */ e("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ i("section", { children: [
+    /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "顶部导航（带多列下拉）" }),
+    /* @__PURE__ */ e(c, {})
+  ] }) });
+}
+export {
+  c as NavigationMenuBasic,
+  s as NavigationMenuShowcase
+};

package/dist/kit/components/navigation/pagination/pagination.examples.d.ts

@@ -0,0 +1,2 @@
+export declare function PaginationBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function PaginationShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/navigation/pagination/pagination.examples.js

@@ -0,0 +1,42 @@
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { RiArrowLeftSLine as l, RiArrowRightSLine as s } from "@remixicon/react";
+import { cn as m } from "../../../../lib/utils.js";
+import { Pagination as h, PaginationContent as d, PaginationItem as e, PaginationEllipsis as f } from "./pagination.js";
+import { Button as g } from "../../form/button/button.js";
+function r({
+  children: n,
+  active: t,
+  className: o,
+  ...c
+}) {
+  return /* @__PURE__ */ i(
+    g,
+    {
+      mode: "icon",
+      size: "sm",
+      variant: t ? "primary" : "ghost",
+      className: m("size-8", o),
+      ...c,
+      children: n
+    }
+  );
+}
+function p() {
+  return /* @__PURE__ */ i(h, { children: /* @__PURE__ */ a(d, { children: [
+    /* @__PURE__ */ i(e, { children: /* @__PURE__ */ i(r, { "aria-label": "上一页", children: /* @__PURE__ */ i(l, { className: "size-4" }) }) }),
+    [1, 2, 3].map((n) => /* @__PURE__ */ i(e, { children: /* @__PURE__ */ i(r, { active: n === 2, children: n }) }, n)),
+    /* @__PURE__ */ i(e, { children: /* @__PURE__ */ i(f, {}) }),
+    /* @__PURE__ */ i(e, { children: /* @__PURE__ */ i(r, { children: "20" }) }),
+    /* @__PURE__ */ i(e, { children: /* @__PURE__ */ i(r, { "aria-label": "下一页", children: /* @__PURE__ */ i(s, { className: "size-4" }) }) })
+  ] }) });
+}
+function z() {
+  return /* @__PURE__ */ i("div", { className: "flex flex-col gap-6", children: /* @__PURE__ */ a("section", { children: [
+    /* @__PURE__ */ i("h3", { className: "text-sm font-semibold mb-3", children: "基础分页器" }),
+    /* @__PURE__ */ i(p, {})
+  ] }) });
+}
+export {
+  p as PaginationBasic,
+  z as PaginationShowcase
+};

package/dist/kit/components/navigation/scrollspy/scrollspy.examples.d.ts

@@ -0,0 +1,2 @@
+export declare function ScrollspyBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function ScrollspyShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/navigation/scrollspy/scrollspy.examples.js

@@ -0,0 +1,68 @@
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import { useRef as l } from "react";
+import { cn as a } from "../../../../lib/utils.js";
+import { Scrollspy as c } from "./scrollspy.js";
+const o = [
+  { id: "profile", title: "个人信息", body: "姓名、邮箱、电话、头像等基础资料。用于在平台内识别身份、接收通知。" },
+  { id: "security", title: "安全", body: "密码、双因子、登录设备管理。建议开启 2FA 并定期轮换密码。" },
+  { id: "notifications", title: "通知", body: "邮件、应用内、短信三个通道的开关 + 频率（即时 / 摘要）。" },
+  { id: "privacy", title: "隐私", body: "可见性设置 · 谁能搜到你、谁能看到你的项目。" },
+  { id: "billing", title: "计费", body: "订阅计划、发票、支付方式。企业版可切换月付 / 年付。" },
+  { id: "team", title: "团队", body: "成员邀请、角色、权限分配。可创建子团队进行二级管理。" },
+  { id: "integrations", title: "集成", body: "GitHub / GitLab / Jira / Slack 第三方接入与 Webhook 配置。" },
+  { id: "danger", title: "危险区", body: "导出所有数据、转移所有权、删除账户。所有操作不可撤销。" }
+];
+function s() {
+  const r = l(null);
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ref: r,
+      className: "h-[480px] overflow-y-auto rounded-xl border border-border bg-card",
+      children: /* @__PURE__ */ i("div", { className: "grid grid-cols-[160px_1fr] gap-6 p-6", children: [
+        /* @__PURE__ */ t(
+          c,
+          {
+            targetRef: r,
+            offset: 80,
+            history: !1,
+            className: "sticky top-0 self-start space-y-1",
+            children: o.map((e) => /* @__PURE__ */ t(
+              "a",
+              {
+                href: `#${e.id}`,
+                "data-scrollspy-anchor": e.id,
+                className: a(
+                  "block px-3 py-1.5 rounded text-sm text-foreground/70 hover:bg-muted hover:text-foreground",
+                  "[&[data-active=true]]:bg-primary/10 [&[data-active=true]]:text-primary [&[data-active=true]]:font-medium"
+                ),
+                children: e.title
+              },
+              e.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ t("div", { className: "space-y-10", children: o.map((e) => /* @__PURE__ */ i("section", { id: e.id, children: [
+          /* @__PURE__ */ t("h3", { className: "text-lg font-semibold text-foreground mb-2", children: e.title }),
+          /* @__PURE__ */ t("p", { className: "text-sm text-muted-foreground leading-7", children: e.body }),
+          /* @__PURE__ */ t("div", { className: "mt-3 space-y-2", children: [1, 2, 3].map((d) => /* @__PURE__ */ i("div", { className: "text-sm text-muted-foreground leading-7", children: [
+            e.title,
+            " · 补充说明 ",
+            d,
+            "：真实业务在此展开多行描述 / 表单 / 子项目。 滚动左侧可联动高亮对应锚点；点击左侧锚点会平滑滚动到对应章节。"
+          ] }, d)) })
+        ] }, e.id)) })
+      ] })
+    }
+  );
+}
+function u() {
+  return /* @__PURE__ */ i("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ t("div", { className: "text-sm text-muted-foreground", children: "滚动右侧内容区，左侧锚点会自动高亮当前章节。点击锚点可平滑跳转。" }),
+    /* @__PURE__ */ t(s, {})
+  ] });
+}
+export {
+  s as ScrollspyBasic,
+  u as ScrollspyShowcase
+};

package/dist/kit/components/navigation/tabs/tabs.examples.d.ts

@@ -0,0 +1,5 @@
+/** Line variant — in-card filter */
+export declare function TabsLine(): import("react/jsx-runtime").JSX.Element;
+/** Button variant — compact chart type switch */
+export declare function TabsButton(): import("react/jsx-runtime").JSX.Element;
+export declare function TabsShowcase(): import("react/jsx-runtime").JSX.Element;