@demokit-ui/demokit 0.1.0 → 0.1.1

package/dist/kit/components/form/label/label.examples.d.ts

@@ -0,0 +1,4 @@
+export declare function LabelBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function LabelRequired(): import("react/jsx-runtime").JSX.Element;
+export declare function LabelWithHint(): import("react/jsx-runtime").JSX.Element;
+export declare function LabelShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/form/label/label.examples.js

@@ -0,0 +1,49 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { Label as l } from "./label.js";
+import { Input as s } from "../input/input.js";
+function t() {
+  return /* @__PURE__ */ i("div", { className: "space-y-1.5 w-64", children: [
+    /* @__PURE__ */ e(l, { htmlFor: "name", children: "姓名" }),
+    /* @__PURE__ */ e(s, { id: "name", placeholder: "请输入姓名" })
+  ] });
+}
+function n() {
+  return /* @__PURE__ */ i("div", { className: "space-y-1.5 w-64", children: [
+    /* @__PURE__ */ i(l, { htmlFor: "email", children: [
+      "邮箱 ",
+      /* @__PURE__ */ e("span", { className: "text-destructive", children: "*" })
+    ] }),
+    /* @__PURE__ */ e(s, { id: "email", type: "email", required: !0 })
+  ] });
+}
+function r() {
+  return /* @__PURE__ */ i("div", { className: "space-y-1.5 w-64", children: [
+    /* @__PURE__ */ i("div", { className: "flex items-baseline justify-between", children: [
+      /* @__PURE__ */ e(l, { htmlFor: "id", children: "员工工号" }),
+      /* @__PURE__ */ e("span", { className: "text-xs text-muted-foreground", children: "6 位数字" })
+    ] }),
+    /* @__PURE__ */ e(s, { id: "id" })
+  ] });
+}
+function m() {
+  return /* @__PURE__ */ i("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(t, {})
+    ] }),
+    /* @__PURE__ */ i("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "带必填 *" }),
+      /* @__PURE__ */ e(n, {})
+    ] }),
+    /* @__PURE__ */ i("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "带辅助说明" }),
+      /* @__PURE__ */ e(r, {})
+    ] })
+  ] });
+}
+export {
+  t as LabelBasic,
+  n as LabelRequired,
+  m as LabelShowcase,
+  r as LabelWithHint
+};

package/dist/kit/components/form/radio-group/radio-group.examples.d.ts

@@ -0,0 +1,3 @@
+export declare function RadioGroupBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function RadioGroupHorizontal(): import("react/jsx-runtime").JSX.Element;
+export declare function RadioGroupShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/form/radio-group/radio-group.examples.js

@@ -0,0 +1,40 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { RadioGroup as l, RadioGroupItem as o } from "./radio-group.js";
+import { Label as s } from "../label/label.js";
+function t() {
+  return /* @__PURE__ */ e(l, { defaultValue: "weekly", className: "space-y-2", children: [
+    ["daily", "每日"],
+    ["weekly", "每周"],
+    ["monthly", "每月"]
+  ].map(([r, i]) => /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ e(o, { value: r, id: `r-${r}` }),
+    /* @__PURE__ */ e(s, { htmlFor: `r-${r}`, className: "cursor-pointer", children: i })
+  ] }, r)) });
+}
+function c() {
+  return /* @__PURE__ */ e(l, { defaultValue: "time", className: "flex gap-6", children: [
+    ["time", "按时间"],
+    ["priority", "按优先级"],
+    ["name", "按名称"]
+  ].map(([r, i]) => /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ e(o, { value: r, id: `h-${r}` }),
+    /* @__PURE__ */ e(s, { htmlFor: `h-${r}`, className: "cursor-pointer", children: i })
+  ] }, r)) });
+}
+function h() {
+  return /* @__PURE__ */ a("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ a("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "纵向" }),
+      /* @__PURE__ */ e(t, {})
+    ] }),
+    /* @__PURE__ */ a("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "横向" }),
+      /* @__PURE__ */ e(c, {})
+    ] })
+  ] });
+}
+export {
+  t as RadioGroupBasic,
+  c as RadioGroupHorizontal,
+  h as RadioGroupShowcase
+};

package/dist/kit/components/form/select/select.examples.d.ts

@@ -0,0 +1,3 @@
+export declare function SelectBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function SelectGrouped(): import("react/jsx-runtime").JSX.Element;
+export declare function SelectShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/form/select/select.examples.js

@@ -0,0 +1,58 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { useState as u } from "react";
+import { Label as n } from "../label/label.js";
+import { Select as t, SelectTrigger as d, SelectValue as a, SelectContent as h, SelectItem as c, SelectGroup as r, SelectLabel as i, SelectSeparator as m } from "./select.js";
+function p() {
+  const [o, s] = u();
+  return /* @__PURE__ */ l("div", { className: "space-y-1.5 w-48", children: [
+    /* @__PURE__ */ e(n, { children: "优先级" }),
+    /* @__PURE__ */ l(t, { value: o, onValueChange: s, children: [
+      /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(a, { placeholder: "选择优先级" }) }),
+      /* @__PURE__ */ l(h, { children: [
+        /* @__PURE__ */ e(c, { value: "critical", children: "Critical" }),
+        /* @__PURE__ */ e(c, { value: "high", children: "High" }),
+        /* @__PURE__ */ e(c, { value: "medium", children: "Medium" }),
+        /* @__PURE__ */ e(c, { value: "low", children: "Low" }),
+        /* @__PURE__ */ e(c, { value: "none", children: "None" })
+      ] })
+    ] })
+  ] });
+}
+function v() {
+  return /* @__PURE__ */ l("div", { className: "space-y-1.5 w-48", children: [
+    /* @__PURE__ */ e(n, { children: "选择团队" }),
+    /* @__PURE__ */ l(t, { children: [
+      /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(a, { placeholder: "选择团队" }) }),
+      /* @__PURE__ */ l(h, { children: [
+        /* @__PURE__ */ l(r, { children: [
+          /* @__PURE__ */ e(i, { children: "工程部门" }),
+          /* @__PURE__ */ e(c, { value: "frontend", children: "前端" }),
+          /* @__PURE__ */ e(c, { value: "backend", children: "后端" })
+        ] }),
+        /* @__PURE__ */ e(m, {}),
+        /* @__PURE__ */ l(r, { children: [
+          /* @__PURE__ */ e(i, { children: "业务部门" }),
+          /* @__PURE__ */ e(c, { value: "sales", children: "销售" }),
+          /* @__PURE__ */ e(c, { value: "support", children: "客服" })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function g() {
+  return /* @__PURE__ */ l("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ l("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "基础" }),
+      /* @__PURE__ */ e(p, {})
+    ] }),
+    /* @__PURE__ */ l("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "带分组" }),
+      /* @__PURE__ */ e(v, {})
+    ] })
+  ] });
+}
+export {
+  p as SelectBasic,
+  v as SelectGrouped,
+  g as SelectShowcase
+};

package/dist/kit/components/form/slider/slider.examples.d.ts

@@ -0,0 +1,3 @@
+export declare function SliderBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function SliderRange(): import("react/jsx-runtime").JSX.Element;
+export declare function SliderShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/form/slider/slider.examples.js

@@ -0,0 +1,46 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useState as i } from "react";
+import { Label as l } from "../label/label.js";
+import { Slider as r } from "./slider.js";
+function a() {
+  const [s, n] = i([50]);
+  return /* @__PURE__ */ t("div", { className: "w-80 space-y-2", children: [
+    /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ e(l, { children: "音量" }),
+      /* @__PURE__ */ e("span", { className: "text-sm text-muted-foreground font-mono", children: s[0] })
+    ] }),
+    /* @__PURE__ */ e(r, { value: s, onValueChange: n, max: 100, step: 1 })
+  ] });
+}
+function c() {
+  const [s, n] = i([20, 80]);
+  return /* @__PURE__ */ t("div", { className: "w-80 space-y-2", children: [
+    /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ e(l, { children: "价格区间" }),
+      /* @__PURE__ */ t("span", { className: "text-sm text-muted-foreground font-mono", children: [
+        "¥",
+        s[0],
+        " ~ ¥",
+        s[1]
+      ] })
+    ] }),
+    /* @__PURE__ */ e(r, { value: s, onValueChange: n, max: 100, step: 5 })
+  ] });
+}
+function h() {
+  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: "单值" }),
+      /* @__PURE__ */ e(a, {})
+    ] }),
+    /* @__PURE__ */ t("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "区间" }),
+      /* @__PURE__ */ e(c, {})
+    ] })
+  ] });
+}
+export {
+  a as SliderBasic,
+  c as SliderRange,
+  h as SliderShowcase
+};

package/dist/kit/components/form/switch/switch.examples.d.ts

@@ -0,0 +1,3 @@
+export declare function SwitchBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function SwitchList(): import("react/jsx-runtime").JSX.Element;
+export declare function SwitchShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/form/switch/switch.examples.js

@@ -0,0 +1,37 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { Switch as d } from "./switch.js";
+import { Label as i } from "../label/label.js";
+function c() {
+  return /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ e(d, { id: "s1" }),
+    /* @__PURE__ */ e(i, { htmlFor: "s1", className: "cursor-pointer", children: "桌面通知" })
+  ] });
+}
+function t() {
+  return /* @__PURE__ */ e("div", { className: "space-y-3 w-72", children: [
+    { id: "ss-auto", label: "自动保存草稿", defaultChecked: !0 },
+    { id: "ss-notify", label: "桌面通知", defaultChecked: !1 },
+    { id: "ss-compact", label: "紧凑布局", defaultChecked: !1 },
+    { id: "ss-sound", label: "操作音效", disabled: !0 }
+  ].map((s) => /* @__PURE__ */ l("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ e(i, { htmlFor: s.id, className: s.disabled ? "text-muted-foreground" : "cursor-pointer", children: s.label }),
+    /* @__PURE__ */ e(d, { id: s.id, defaultChecked: s.defaultChecked, disabled: s.disabled })
+  ] }, s.id)) });
+}
+function m() {
+  return /* @__PURE__ */ l("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ l("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "基础" }),
+      /* @__PURE__ */ e(c, {})
+    ] }),
+    /* @__PURE__ */ l("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "设置项列表" }),
+      /* @__PURE__ */ e(t, {})
+    ] })
+  ] });
+}
+export {
+  c as SwitchBasic,
+  t as SwitchList,
+  m as SwitchShowcase
+};

package/dist/kit/components/form/textarea/textarea.examples.d.ts

@@ -0,0 +1,3 @@
+export declare function TextareaBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function TextareaWithCounter(): import("react/jsx-runtime").JSX.Element;
+export declare function TextareaShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/form/textarea/textarea.examples.js

@@ -0,0 +1,49 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { useState as c } from "react";
+import { Label as o } from "../label/label.js";
+import { Textarea as n } from "./textarea.js";
+function l() {
+  return /* @__PURE__ */ t("div", { className: "space-y-1.5 w-96", children: [
+    /* @__PURE__ */ e(o, { htmlFor: "note", children: "备注" }),
+    /* @__PURE__ */ e(n, { id: "note", rows: 4, placeholder: "请输入备注..." })
+  ] });
+}
+function i() {
+  const [r, a] = c("");
+  return /* @__PURE__ */ t("div", { className: "space-y-1.5 w-96", children: [
+    /* @__PURE__ */ e(o, { htmlFor: "desc", children: "变更说明" }),
+    /* @__PURE__ */ e(
+      n,
+      {
+        id: "desc",
+        rows: 4,
+        maxLength: 200,
+        value: r,
+        onChange: (s) => a(s.target.value),
+        placeholder: "请描述变更原因..."
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: "text-xs text-muted-foreground text-right font-mono", children: [
+      r.length,
+      " / ",
+      200
+    ] })
+  ] });
+}
+function u() {
+  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: "基础" }),
+      /* @__PURE__ */ e(l, {})
+    ] }),
+    /* @__PURE__ */ t("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "带字数计数" }),
+      /* @__PURE__ */ e(i, {})
+    ] })
+  ] });
+}
+export {
+  l as TextareaBasic,
+  u as TextareaShowcase,
+  i as TextareaWithCounter
+};

package/dist/kit/components/form/toggle/toggle.examples.d.ts

@@ -0,0 +1,3 @@
+export declare function ToggleBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function ToggleText(): import("react/jsx-runtime").JSX.Element;
+export declare function ToggleShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/form/toggle/toggle.examples.js

@@ -0,0 +1,33 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { RiBold as s, RiItalic as a, RiUnderline as r } from "@remixicon/react";
+import { Toggle as i } from "./toggle.js";
+function c() {
+  return /* @__PURE__ */ l("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ e(i, { "aria-label": "加粗", children: /* @__PURE__ */ e(s, { className: "size-4" }) }),
+    /* @__PURE__ */ e(i, { "aria-label": "斜体", defaultPressed: !0, children: /* @__PURE__ */ e(a, { className: "size-4" }) }),
+    /* @__PURE__ */ e(i, { "aria-label": "下划线", children: /* @__PURE__ */ e(r, { className: "size-4" }) })
+  ] });
+}
+function n() {
+  return /* @__PURE__ */ l("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ e(i, { children: "仅显示我的" }),
+    /* @__PURE__ */ e(i, { defaultPressed: !0, children: "只看未读" })
+  ] });
+}
+function m() {
+  return /* @__PURE__ */ l("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ l("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "图标切换" }),
+      /* @__PURE__ */ e(c, {})
+    ] }),
+    /* @__PURE__ */ l("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "文字切换" }),
+      /* @__PURE__ */ e(n, {})
+    ] })
+  ] });
+}
+export {
+  c as ToggleBasic,
+  m as ToggleShowcase,
+  n as ToggleText
+};

package/dist/kit/components/form/toggle-group/toggle-group.examples.d.ts

@@ -0,0 +1,4 @@
+export declare function ToggleGroupSingle(): import("react/jsx-runtime").JSX.Element;
+export declare function ToggleGroupMultiple(): import("react/jsx-runtime").JSX.Element;
+export declare function ToggleGroupView(): import("react/jsx-runtime").JSX.Element;
+export declare function ToggleGroupShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/form/toggle-group/toggle-group.examples.js

@@ -0,0 +1,46 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { ToggleGroup as i, ToggleGroupItem as l } from "./toggle-group.js";
+function r() {
+  return /* @__PURE__ */ n(i, { type: "single", defaultValue: "center", children: [
+    /* @__PURE__ */ e(l, { value: "left", children: "左" }),
+    /* @__PURE__ */ e(l, { value: "center", children: "中" }),
+    /* @__PURE__ */ e(l, { value: "right", children: "右" }),
+    /* @__PURE__ */ e(l, { value: "justify", children: "两端" })
+  ] });
+}
+function t() {
+  return /* @__PURE__ */ n(i, { type: "multiple", defaultValue: ["bold"], children: [
+    /* @__PURE__ */ e(l, { value: "bold", children: "粗" }),
+    /* @__PURE__ */ e(l, { value: "italic", children: "斜" }),
+    /* @__PURE__ */ e(l, { value: "underline", children: "下划线" })
+  ] });
+}
+function c() {
+  return /* @__PURE__ */ n(i, { type: "single", defaultValue: "list", children: [
+    /* @__PURE__ */ e(l, { value: "list", children: "列表" }),
+    /* @__PURE__ */ e(l, { value: "card", children: "卡片" }),
+    /* @__PURE__ */ e(l, { value: "kanban", children: "看板" })
+  ] });
+}
+function d() {
+  return /* @__PURE__ */ n("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ n("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "互斥单选（对齐）" }),
+      /* @__PURE__ */ e(r, {})
+    ] }),
+    /* @__PURE__ */ n("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "多选（格式）" }),
+      /* @__PURE__ */ e(t, {})
+    ] }),
+    /* @__PURE__ */ n("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "视图切换" }),
+      /* @__PURE__ */ e(c, {})
+    ] })
+  ] });
+}
+export {
+  t as ToggleGroupMultiple,
+  d as ToggleGroupShowcase,
+  r as ToggleGroupSingle,
+  c as ToggleGroupView
+};

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;