@demokit-ui/demokit 0.1.0 → 0.1.1

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;

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

@@ -0,0 +1,43 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { Tabs as l, TabsList as r, TabsTrigger as n, TabsContent as a } from "./tabs.js";
+import { Badge as i } from "../../data-display/badge/badge.js";
+function s() {
+  return /* @__PURE__ */ t(l, { defaultValue: "pending", children: [
+    /* @__PURE__ */ t(r, { variant: "line", className: "w-full justify-start", children: [
+      /* @__PURE__ */ t(n, { value: "pending", className: "gap-1.5", children: [
+        "待我审批",
+        /* @__PURE__ */ e(i, { variant: "destructive", appearance: "light", size: "xs", children: "7" })
+      ] }),
+      /* @__PURE__ */ e(n, { value: "done", children: "我已处理" }),
+      /* @__PURE__ */ e(n, { value: "mine", children: "我发起的" })
+    ] }),
+    /* @__PURE__ */ e(a, { value: "pending", className: "pt-4 text-sm text-muted-foreground", children: "待我审批内容占位" }),
+    /* @__PURE__ */ e(a, { value: "done", className: "pt-4 text-sm text-muted-foreground", children: "我已处理内容占位" }),
+    /* @__PURE__ */ e(a, { value: "mine", className: "pt-4 text-sm text-muted-foreground", children: "我发起的内容占位" })
+  ] });
+}
+function d() {
+  return /* @__PURE__ */ e(l, { defaultValue: "week", children: /* @__PURE__ */ t(r, { variant: "button", children: [
+    /* @__PURE__ */ e(n, { value: "day", children: "日" }),
+    /* @__PURE__ */ e(n, { value: "week", children: "周" }),
+    /* @__PURE__ */ e(n, { value: "month", children: "月" }),
+    /* @__PURE__ */ e(n, { value: "quarter", children: "季" })
+  ] }) });
+}
+function m() {
+  return /* @__PURE__ */ t("div", { className: "flex flex-col gap-8 max-w-xl", children: [
+    /* @__PURE__ */ t("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Line variant（卡内筛选）" }),
+      /* @__PURE__ */ e(s, {})
+    ] }),
+    /* @__PURE__ */ t("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Button variant（独立切换组）" }),
+      /* @__PURE__ */ e(d, {})
+    ] })
+  ] });
+}
+export {
+  d as TabsButton,
+  s as TabsLine,
+  m as TabsShowcase
+};

package/dist/styles.css

@@ -93,7 +93,8 @@
   gap: var(--dk-page-gap);
 }
 
-:where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='page-header']
+:where(.demo-tweak-scope, .demokit-tweak-scope)
+  [data-slot='page-header']
   > :not([hidden])
   ~ :not([hidden]) {
   margin-top: 0 !important;
@@ -104,11 +105,13 @@
 }
 
 :where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='filter-panel-body'],
-:where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='filter-panel-grid'] {
+:where(.demo-tweak-scope, .demokit-tweak-scope)
+  [data-slot='filter-panel-grid'] {
   gap: var(--dk-filter-gap);
 }
 
-:where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='filter-panel-footer'] {
+:where(.demo-tweak-scope, .demokit-tweak-scope)
+  [data-slot='filter-panel-footer'] {
   margin-top: var(--dk-filter-gap);
   padding-top: var(--dk-filter-gap);
 }
@@ -117,14 +120,16 @@
 :where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='input-wrapper'],
 :where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='select-trigger'],
 :where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='toggle-group'],
-:where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='toggle-group-item'] {
+:where(.demo-tweak-scope, .demokit-tweak-scope)
+  [data-slot='toggle-group-item'] {
   border-radius: var(--dk-radius-control);
 }
 
 :where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='input'],
 :where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='input-wrapper'],
 :where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='select-trigger'],
-:where(.demo-tweak-scope, .demokit-tweak-scope) [data-slot='toggle-group-item'] {
+:where(.demo-tweak-scope, .demokit-tweak-scope)
+  [data-slot='toggle-group-item'] {
   height: var(--dk-control-height);
 }
 
@@ -181,14 +186,20 @@
   color: var(--muted-foreground);
   border-radius: 0 6px 6px 0;
 }
-.kit-markdown ul, .kit-markdown ol {
+.kit-markdown ul,
+.kit-markdown ol {
   padding-inline-start: 1.5rem;
   margin: 0.5rem 0;
 }
-.kit-markdown li { margin: 0.25rem 0; }
-.kit-markdown li > ul, .kit-markdown li > ol { margin: 0.25rem 0; }
+.kit-markdown li {
+  margin: 0.25rem 0;
+}
+.kit-markdown li > ul,
+.kit-markdown li > ol {
+  margin: 0.25rem 0;
+}
 .kit-markdown code {
-  font-family: var(--font-mono, "SF Mono", "Menlo", monospace);
+  font-family: var(--font-mono, 'SF Mono', 'Menlo', monospace);
   background: var(--muted);
   padding: 0.12rem 0.4rem;
   border-radius: 4px;
@@ -215,8 +226,11 @@
   font-size: 13px;
   width: 100%;
 }
-.kit-markdown thead { background: var(--muted); }
-.kit-markdown th, .kit-markdown td {
+.kit-markdown thead {
+  background: var(--muted);
+}
+.kit-markdown th,
+.kit-markdown td {
   border: 1px solid var(--border);
   padding: 0.5rem 0.75rem;
   text-align: left;
@@ -234,4 +248,7 @@
   border-top: 1px solid var(--border);
   margin: 1.5rem 0;
 }
-.kit-markdown strong { color: var(--foreground); font-weight: 600; }
+.kit-markdown strong {
+  color: var(--foreground);
+  font-weight: 600;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@demokit-ui/demokit",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Open-source React component library with provider, styles, and composable UI primitives",
   "license": "MIT",
   "repository": {