@demokit-ui/demokit 0.1.0 → 0.1.1

package/dist/kit/components/data-display/avatar/avatar.examples.d.ts

@@ -0,0 +1,7 @@
+/** 基础：图片 + 回退首字母 */
+export declare function AvatarBasic(): import("react/jsx-runtime").JSX.Element;
+/** 尺寸梯度 */
+export declare function AvatarSizes(): import("react/jsx-runtime").JSX.Element;
+/** 带状态指示器（在线 / 离线 / 忙碌 / 离开） */
+export declare function AvatarWithStatus(): import("react/jsx-runtime").JSX.Element;
+export declare function AvatarShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/data-display/avatar/avatar.examples.js

@@ -0,0 +1,48 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { Avatar as s, AvatarImage as i, AvatarFallback as c, AvatarIndicator as l, AvatarStatus as r } from "./avatar.js";
+function n() {
+  return /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ a(s, { children: [
+      /* @__PURE__ */ e(i, { src: "/avatar.png", alt: "User" }),
+      /* @__PURE__ */ e(c, { children: "张" })
+    ] }),
+    /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(c, { children: "李" }) }),
+    /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(c, { className: "bg-primary/10 text-primary", children: "JD" }) })
+  ] });
+}
+function m() {
+  return /* @__PURE__ */ a("div", { className: "flex items-end gap-3", children: [
+    /* @__PURE__ */ e(s, { className: "size-6", children: /* @__PURE__ */ e(c, { className: "text-[10px] bg-muted", children: "S" }) }),
+    /* @__PURE__ */ e(s, { className: "size-8", children: /* @__PURE__ */ e(c, { className: "text-xs bg-muted", children: "M" }) }),
+    /* @__PURE__ */ e(s, { className: "size-10", children: /* @__PURE__ */ e(c, { className: "bg-muted", children: "L" }) }),
+    /* @__PURE__ */ e(s, { className: "size-14", children: /* @__PURE__ */ e(c, { className: "text-base bg-muted", children: "XL" }) })
+  ] });
+}
+function d() {
+  return /* @__PURE__ */ e("div", { className: "flex items-center gap-4", children: ["online", "offline", "busy", "away"].map((t) => /* @__PURE__ */ a(s, { className: "size-10", children: [
+    /* @__PURE__ */ e(c, { className: "bg-muted", children: "用户" }),
+    /* @__PURE__ */ e(l, { className: "-end-1 -bottom-1", children: /* @__PURE__ */ e(r, { variant: t }) })
+  ] }, t)) });
+}
+function N() {
+  return /* @__PURE__ */ a("div", { className: "flex flex-col gap-8", children: [
+    /* @__PURE__ */ a("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "基础形态" }),
+      /* @__PURE__ */ e(n, {})
+    ] }),
+    /* @__PURE__ */ a("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "尺寸梯度" }),
+      /* @__PURE__ */ e(m, {})
+    ] }),
+    /* @__PURE__ */ a("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "状态指示器" }),
+      /* @__PURE__ */ e(d, {})
+    ] })
+  ] });
+}
+export {
+  n as AvatarBasic,
+  N as AvatarShowcase,
+  m as AvatarSizes,
+  d as AvatarWithStatus
+};

package/dist/kit/components/data-display/avatar-group/avatar-group.examples.d.ts

@@ -0,0 +1,3 @@
+export declare function AvatarGroupBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function AvatarGroupCompact(): import("react/jsx-runtime").JSX.Element;
+export declare function AvatarGroupShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/data-display/avatar-group/avatar-group.examples.js

@@ -0,0 +1,35 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { AvatarGroup as r } from "./avatar-group.js";
+import { Avatar as s, AvatarFallback as a } from "../avatar/avatar.js";
+function l() {
+  return /* @__PURE__ */ c(r, { children: [
+    /* @__PURE__ */ e(s, { className: "size-8", children: /* @__PURE__ */ e(a, { className: "bg-primary/10 text-primary", children: "张" }) }),
+    /* @__PURE__ */ e(s, { className: "size-8", children: /* @__PURE__ */ e(a, { className: "bg-success/10 text-success", children: "李" }) }),
+    /* @__PURE__ */ e(s, { className: "size-8", children: /* @__PURE__ */ e(a, { className: "bg-warning/10 text-warning", children: "王" }) }),
+    /* @__PURE__ */ e(s, { className: "size-8", children: /* @__PURE__ */ e(a, { className: "bg-muted text-muted-foreground", children: "+5" }) })
+  ] });
+}
+function i() {
+  return /* @__PURE__ */ c(r, { children: [
+    /* @__PURE__ */ e(s, { className: "size-6", children: /* @__PURE__ */ e(a, { className: "text-[10px] bg-muted", children: "张" }) }),
+    /* @__PURE__ */ e(s, { className: "size-6", children: /* @__PURE__ */ e(a, { className: "text-[10px] bg-muted", children: "李" }) }),
+    /* @__PURE__ */ e(s, { className: "size-6", children: /* @__PURE__ */ e(a, { className: "text-[10px] bg-muted", children: "+3" }) })
+  ] });
+}
+function d() {
+  return /* @__PURE__ */ c("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(l, {})
+    ] }),
+    /* @__PURE__ */ c("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "紧凑（表格行内）" }),
+      /* @__PURE__ */ e(i, {})
+    ] })
+  ] });
+}
+export {
+  l as AvatarGroupBasic,
+  i as AvatarGroupCompact,
+  d as AvatarGroupShowcase
+};

package/dist/kit/components/data-display/badge/badge.examples.d.ts

@@ -0,0 +1,9 @@
+/** Variant x Appearance matrix */
+export declare function BadgeVariantMatrix(): import("react/jsx-runtime").JSX.Element;
+/** Size scale */
+export declare function BadgeSizes(): import("react/jsx-runtime").JSX.Element;
+/** 优先级示例 */
+export declare function BadgePriority(): import("react/jsx-runtime").JSX.Element;
+/** 任务类型示例 */
+export declare function BadgeTaskType(): import("react/jsx-runtime").JSX.Element;
+export declare function BadgeShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/data-display/badge/badge.examples.js

@@ -0,0 +1,57 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { Badge as a } from "./badge.js";
+const t = ["primary", "secondary", "success", "warning", "destructive", "info", "outline"], c = ["default", "light", "outline", "ghost"], l = ["xs", "sm", "md", "lg"];
+function s() {
+  return /* @__PURE__ */ e("div", { className: "space-y-3", children: c.map((n) => /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ e("div", { className: "w-20 text-xs text-muted-foreground", children: n }),
+    t.map((r) => /* @__PURE__ */ e(a, { variant: r, appearance: n, size: "sm", children: r }, r))
+  ] }, n)) });
+}
+function d() {
+  return /* @__PURE__ */ e("div", { className: "flex items-center gap-3", children: l.map((n) => /* @__PURE__ */ e(a, { variant: "primary", appearance: "light", size: n, children: n }, n)) });
+}
+function h() {
+  return /* @__PURE__ */ i("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ e(a, { variant: "destructive", appearance: "light", children: "Critical" }),
+    /* @__PURE__ */ e(a, { variant: "warning", appearance: "light", children: "High" }),
+    /* @__PURE__ */ e(a, { variant: "info", appearance: "light", children: "Medium" }),
+    /* @__PURE__ */ e(a, { variant: "primary", appearance: "light", children: "Low" }),
+    /* @__PURE__ */ e(a, { variant: "secondary", appearance: "light", children: "None" })
+  ] });
+}
+function m() {
+  return /* @__PURE__ */ i("div", { className: "flex gap-2", children: [
+    /* @__PURE__ */ e(a, { variant: "primary", appearance: "light", children: "Feature" }),
+    /* @__PURE__ */ e(a, { variant: "success", appearance: "light", children: "Release" }),
+    /* @__PURE__ */ e(a, { variant: "warning", appearance: "light", children: "Bug" }),
+    /* @__PURE__ */ e(a, { variant: "info", appearance: "light", children: "Chore" }),
+    /* @__PURE__ */ e(a, { variant: "destructive", appearance: "light", children: "Overdue" })
+  ] });
+}
+function g() {
+  return /* @__PURE__ */ i("div", { className: "flex flex-col gap-8", children: [
+    /* @__PURE__ */ i("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Variant × Appearance" }),
+      /* @__PURE__ */ e(s, {})
+    ] }),
+    /* @__PURE__ */ i("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Sizes" }),
+      /* @__PURE__ */ e(d, {})
+    ] }),
+    /* @__PURE__ */ i("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "优先级（示例映射）" }),
+      /* @__PURE__ */ e(h, {})
+    ] }),
+    /* @__PURE__ */ i("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "任务类型（示例映射）" }),
+      /* @__PURE__ */ e(m, {})
+    ] })
+  ] });
+}
+export {
+  h as BadgePriority,
+  g as BadgeShowcase,
+  d as BadgeSizes,
+  m as BadgeTaskType,
+  s as BadgeVariantMatrix
+};

package/dist/kit/components/data-display/card/card.examples.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Live examples for Card — wire these into a showcase route.
+ * Each exported function demonstrates a distinct usage pattern.
+ */
+/** 1. Minimal — title + content */
+export declare function CardMinimal(): import("react/jsx-runtime").JSX.Element;
+/** 2. With toolbar — link + action */
+export declare function CardWithToolbar(): import("react/jsx-runtime").JSX.Element;
+/** 3. KPI card — no header, big number */
+export declare function CardKpi(): import("react/jsx-runtime").JSX.Element;
+/** 4. With footer */
+export declare function CardWithFooter(): import("react/jsx-runtime").JSX.Element;
+/** 5. Accent — double-layer */
+export declare function CardAccent(): import("react/jsx-runtime").JSX.Element;
+/** Showcase composite — render all above */
+export declare function CardShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/data-display/card/card.examples.js

@@ -0,0 +1,72 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { Link as d } from "react-router-dom";
+import { Card as a, CardContent as t, CardHeader as n, CardTitle as c, CardDescription as l, CardFooter as s, CardToolbar as m } from "./card.js";
+import { Badge as o } from "../badge/badge.js";
+import { Button as i } from "../../form/button/button.js";
+function h() {
+  return /* @__PURE__ */ r(a, { className: "card-surface w-80", children: [
+    /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(c, { children: "基础卡片" }) }),
+    /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: "最常见形态：标题 + 内容。" }) })
+  ] });
+}
+function u() {
+  return /* @__PURE__ */ r(a, { className: "card-surface w-96", children: [
+    /* @__PURE__ */ r(n, { children: [
+      /* @__PURE__ */ e(c, { children: "流程中心" }),
+      /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e(
+        d,
+        {
+          to: "#",
+          className: "text-sm text-muted-foreground hover:text-primary",
+          children: "查看全部 →"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: "右上角放次级动作（链接或按钮）。" }) })
+  ] });
+}
+function f() {
+  return /* @__PURE__ */ e(a, { className: "card-surface w-72", children: /* @__PURE__ */ r(t, { className: "p-5", children: [
+    /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground", children: "待我审批" }),
+    /* @__PURE__ */ r("div", { className: "mt-1 flex items-baseline gap-2", children: [
+      /* @__PURE__ */ e("span", { className: "text-3xl font-semibold", children: "7" }),
+      /* @__PURE__ */ e(o, { variant: "destructive", appearance: "light", size: "sm", children: "超时 2 项" })
+    ] })
+  ] }) });
+}
+function p() {
+  return /* @__PURE__ */ r(a, { className: "card-surface w-96", children: [
+    /* @__PURE__ */ r(n, { children: [
+      /* @__PURE__ */ e(c, { children: "确认变更" }),
+      /* @__PURE__ */ e(l, { children: "此操作将同步所有订阅方" })
+    ] }),
+    /* @__PURE__ */ e(t, { children: "内容占位" }),
+    /* @__PURE__ */ r(s, { className: "justify-end gap-2", children: [
+      /* @__PURE__ */ e(i, { variant: "outline", size: "sm", children: "取消" }),
+      /* @__PURE__ */ e(i, { size: "sm", children: "确认" })
+    ] })
+  ] });
+}
+function x() {
+  return /* @__PURE__ */ e(a, { variant: "accent", className: "w-96", children: /* @__PURE__ */ r(t, { children: [
+    /* @__PURE__ */ e("div", { className: "text-sm font-medium", children: "内嵌卡片（accent 变体）" }),
+    /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground mt-1", children: "外层带浅灰底，里层仍是白卡，用于在列表中突出子卡。" })
+  ] }) });
+}
+function b() {
+  return /* @__PURE__ */ r("div", { className: "flex flex-wrap gap-5", children: [
+    /* @__PURE__ */ e(h, {}),
+    /* @__PURE__ */ e(u, {}),
+    /* @__PURE__ */ e(f, {}),
+    /* @__PURE__ */ e(p, {}),
+    /* @__PURE__ */ e(x, {})
+  ] });
+}
+export {
+  x as CardAccent,
+  f as CardKpi,
+  h as CardMinimal,
+  b as CardShowcase,
+  p as CardWithFooter,
+  u as CardWithToolbar
+};

package/dist/kit/components/data-display/data-grid/data-grid.examples.d.ts

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

package/dist/kit/components/data-display/data-grid/data-grid.examples.js

@@ -0,0 +1,92 @@
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { useState as g, useMemo as m } from "react";
+import { useReactTable as p, getPaginationRowModel as h, getSortedRowModel as w, getCoreRowModel as R, createColumnHelper as f } from "@tanstack/react-table";
+import { Badge as s } from "../badge/badge.js";
+import { DataGrid as x } from "./data-grid.js";
+import { DataGridTable as v } from "./data-grid-table.js";
+import { Button as d } from "../../form/button/button.js";
+const P = {
+  critical: "Critical",
+  high: "High",
+  medium: "Medium",
+  low: "Low",
+  none: "None"
+}, b = {
+  critical: "destructive",
+  high: "warning",
+  medium: "info",
+  low: "primary",
+  none: "secondary"
+}, i = [
+  { id: "PRJ-01", project: "Acme Dashboard", priority: "high", status: "In Progress", owner: "Alice Chen", updated: "2026-04-18" },
+  { id: "PRJ-02", project: "Mobile App Redesign", priority: "medium", status: "In Progress", owner: "Bob Miller", updated: "2026-04-17" },
+  { id: "PRJ-03", project: "API Gateway v2", priority: "critical", status: "Released", owner: "Carol Johnson", updated: "2026-04-10" },
+  { id: "PRJ-04", project: "Marketing Site", priority: "low", status: "In Review", owner: "Dave Smith", updated: "2026-04-15" },
+  { id: "PRJ-05", project: "Internal Admin", priority: "none", status: "In Progress", owner: "Eve Brown", updated: "2026-04-12" },
+  { id: "PRJ-06", project: "Billing Service", priority: "high", status: "In Progress", owner: "Frank Lee", updated: "2026-04-08" }
+], t = f();
+function I() {
+  const [l, c] = g([]), u = m(
+    () => [
+      t.accessor("id", { header: "编号", cell: (e) => /* @__PURE__ */ r("span", { className: "font-mono text-[12.5px]", children: e.getValue() }) }),
+      t.accessor("project", { header: "项目", cell: (e) => /* @__PURE__ */ r("span", { className: "font-medium text-foreground", children: e.getValue() }) }),
+      t.accessor("priority", {
+        header: "优先级",
+        cell: (e) => {
+          const n = e.getValue();
+          return /* @__PURE__ */ r(s, { variant: b[n], appearance: "light", size: "sm", children: P[n] });
+        }
+      }),
+      t.accessor("status", {
+        header: "状态",
+        cell: (e) => /* @__PURE__ */ r(
+          s,
+          {
+            variant: e.getValue() === "Released" ? "success" : e.getValue() === "In Review" ? "warning" : "primary",
+            appearance: "light",
+            size: "sm",
+            children: e.getValue()
+          }
+        )
+      }),
+      t.accessor("owner", { header: "负责人" }),
+      t.accessor("updated", {
+        header: "更新时间",
+        cell: (e) => /* @__PURE__ */ r("span", { className: "font-mono text-xs text-muted-foreground", children: e.getValue() })
+      })
+    ],
+    []
+  ), o = p({
+    data: i,
+    columns: u,
+    state: { sorting: l },
+    onSortingChange: c,
+    getCoreRowModel: R(),
+    getSortedRowModel: w(),
+    getPaginationRowModel: h()
+  });
+  return /* @__PURE__ */ a(x, { table: o, recordCount: i.length, children: [
+    /* @__PURE__ */ r(v, {}),
+    /* @__PURE__ */ a("div", { className: "flex items-center justify-between p-3 border-t border-border text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ a("span", { children: [
+        "共 ",
+        i.length,
+        " 条 · 点击表头可排序"
+      ] }),
+      /* @__PURE__ */ a("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ r(d, { size: "sm", variant: "outline", onClick: () => o.previousPage(), disabled: !o.getCanPreviousPage(), children: "上一页" }),
+        /* @__PURE__ */ r(d, { size: "sm", variant: "outline", onClick: () => o.nextPage(), disabled: !o.getCanNextPage(), children: "下一页" })
+      ] })
+    ] })
+  ] });
+}
+function T() {
+  return /* @__PURE__ */ a("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ r("div", { className: "text-sm text-muted-foreground", children: "基于 TanStack Table · 点击列头排序 · 内置分页逻辑。" }),
+    /* @__PURE__ */ r("div", { className: "rounded-xl border border-border overflow-hidden bg-card", children: /* @__PURE__ */ r(I, {}) })
+  ] });
+}
+export {
+  I as DataGridBasic,
+  T as DataGridShowcase
+};

package/dist/kit/components/data-display/kbd/kbd.examples.d.ts

@@ -0,0 +1,3 @@
+export declare function KbdBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function KbdTable(): import("react/jsx-runtime").JSX.Element;
+export declare function KbdShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/data-display/kbd/kbd.examples.js

@@ -0,0 +1,43 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { Kbd as s } from "./kbd.js";
+function l() {
+  return /* @__PURE__ */ n("div", { className: "flex items-center gap-2 text-sm", children: [
+    /* @__PURE__ */ e("span", { children: "按" }),
+    /* @__PURE__ */ e(s, { children: "Cmd" }),
+    /* @__PURE__ */ e("span", { children: "+" }),
+    /* @__PURE__ */ e(s, { children: "K" }),
+    /* @__PURE__ */ e("span", { children: "打开搜索" })
+  ] });
+}
+function i() {
+  return /* @__PURE__ */ e("table", { className: "text-sm", children: /* @__PURE__ */ e("tbody", { children: [
+    ["打开命令面板", ["⌘", "K"]],
+    ["新建文件", ["⌘", "N"]],
+    ["关闭窗口", ["⌘", "W"]],
+    ["搜索", ["⌘", "/"]],
+    ["取消", ["Esc"]]
+  ].map(([c, d]) => /* @__PURE__ */ n("tr", { children: [
+    /* @__PURE__ */ e("td", { className: "py-1.5 pr-8 text-muted-foreground", children: c }),
+    /* @__PURE__ */ e("td", { className: "py-1.5 space-x-1", children: d.map((t, r) => /* @__PURE__ */ n("span", { children: [
+      r > 0 && /* @__PURE__ */ e("span", { className: "mx-1 text-muted-foreground", children: "+" }),
+      /* @__PURE__ */ e(s, { children: t })
+    ] }, r)) })
+  ] }, c)) }) });
+}
+function h() {
+  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(l, {})
+    ] }),
+    /* @__PURE__ */ n("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "快捷键表" }),
+      /* @__PURE__ */ e(i, {})
+    ] })
+  ] });
+}
+export {
+  l as KbdBasic,
+  h as KbdShowcase,
+  i as KbdTable
+};

package/dist/kit/components/data-display/money-amount/money-amount.examples.d.ts

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

package/dist/kit/components/data-display/money-amount/money-amount.examples.js

@@ -0,0 +1,26 @@
+import { jsx as l, jsxs as a } from "react/jsx-runtime";
+import { MoneyAmount as r } from "./money-amount.js";
+const o = [
+  { label: "小额费用", value: 1280 },
+  { label: "项目预算", value: 128e3 },
+  { label: "年度收入", value: 86e6 },
+  { label: "固定万元", value: 128e3, unit: "wan" },
+  { label: "无效值", value: null }
+];
+function u() {
+  return /* @__PURE__ */ l("div", { className: "grid max-w-2xl gap-3 sm:grid-cols-2", children: o.map((e) => /* @__PURE__ */ a("div", { className: "rounded-lg border border-border bg-card p-4", children: [
+    /* @__PURE__ */ l("div", { className: "text-xs text-muted-foreground", children: e.label }),
+    /* @__PURE__ */ l(
+      r,
+      {
+        value: e.value,
+        unit: e.unit,
+        precision: 1,
+        className: "mt-2 text-2xl font-semibold"
+      }
+    )
+  ] }, e.label)) });
+}
+export {
+  u as MoneyAmountShowcase
+};

package/dist/kit/components/data-display/progress/progress.examples.d.ts

@@ -0,0 +1,3 @@
+export declare function ProgressBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function ProgressLevels(): import("react/jsx-runtime").JSX.Element;
+export declare function ProgressShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/data-display/progress/progress.examples.js

@@ -0,0 +1,45 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { Progress as n } from "./progress.js";
+function r() {
+  return /* @__PURE__ */ s("div", { className: "w-80 space-y-3", children: [
+    /* @__PURE__ */ s("div", { children: [
+      /* @__PURE__ */ s("div", { className: "flex justify-between text-xs mb-1.5", children: [
+        /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "上传进度" }),
+        /* @__PURE__ */ e("span", { className: "font-mono text-foreground", children: "60%" })
+      ] }),
+      /* @__PURE__ */ e(n, { value: 60 })
+    ] }),
+    /* @__PURE__ */ s("div", { children: [
+      /* @__PURE__ */ s("div", { className: "flex justify-between text-xs mb-1.5", children: [
+        /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "本周工时" }),
+        /* @__PURE__ */ e("span", { className: "font-mono text-foreground", children: "42.5 / 45 h" })
+      ] }),
+      /* @__PURE__ */ e(n, { value: 42.5 / 45 * 100 })
+    ] })
+  ] });
+}
+function l() {
+  return /* @__PURE__ */ s("div", { className: "w-80 space-y-3", children: [
+    /* @__PURE__ */ e(n, { value: 15 }),
+    /* @__PURE__ */ e(n, { value: 50 }),
+    /* @__PURE__ */ e(n, { value: 85 }),
+    /* @__PURE__ */ e(n, { value: 100 })
+  ] });
+}
+function c() {
+  return /* @__PURE__ */ s("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ s("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "带标签" }),
+      /* @__PURE__ */ e(r, {})
+    ] }),
+    /* @__PURE__ */ s("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "不同进度" }),
+      /* @__PURE__ */ e(l, {})
+    ] })
+  ] });
+}
+export {
+  r as ProgressBasic,
+  l as ProgressLevels,
+  c as ProgressShowcase
+};

package/dist/kit/components/data-display/skeleton/skeleton.examples.d.ts

@@ -0,0 +1,3 @@
+export declare function SkeletonCard(): import("react/jsx-runtime").JSX.Element;
+export declare function SkeletonRow(): import("react/jsx-runtime").JSX.Element;
+export declare function SkeletonShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/data-display/skeleton/skeleton.examples.js

@@ -0,0 +1,37 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { Skeleton as s } from "./skeleton.js";
+function c() {
+  return /* @__PURE__ */ l("div", { className: "card-surface rounded-xl p-5 w-80", children: [
+    /* @__PURE__ */ e(s, { className: "h-5 w-40 mb-3" }),
+    /* @__PURE__ */ e(s, { className: "h-4 w-full mb-2" }),
+    /* @__PURE__ */ e(s, { className: "h-4 w-5/6 mb-2" }),
+    /* @__PURE__ */ e(s, { className: "h-4 w-2/3" })
+  ] });
+}
+function m() {
+  return /* @__PURE__ */ e("div", { className: "space-y-2 w-96", children: [1, 2, 3].map((a) => /* @__PURE__ */ l("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ e(s, { className: "size-10 rounded-full" }),
+    /* @__PURE__ */ l("div", { className: "flex-1 space-y-1.5", children: [
+      /* @__PURE__ */ e(s, { className: "h-4 w-32" }),
+      /* @__PURE__ */ e(s, { className: "h-3 w-48" })
+    ] }),
+    /* @__PURE__ */ e(s, { className: "h-7 w-14" })
+  ] }, a)) });
+}
+function i() {
+  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(m, {})
+    ] })
+  ] });
+}
+export {
+  c as SkeletonCard,
+  m as SkeletonRow,
+  i as SkeletonShowcase
+};

package/dist/kit/components/data-display/sliding-number/sliding-number.examples.d.ts

@@ -0,0 +1,3 @@
+export declare function SlidingNumberBasic(): import("react/jsx-runtime").JSX.Element;
+export declare function SlidingNumberAutoIncrement(): import("react/jsx-runtime").JSX.Element;
+export declare function SlidingNumberShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/data-display/sliding-number/sliding-number.examples.js

@@ -0,0 +1,42 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { useState as s, useEffect as m } from "react";
+import { SlidingNumber as c } from "./sliding-number.js";
+import { Button as l } from "../../form/button/button.js";
+function a() {
+  const [r, t] = s(1234);
+  return /* @__PURE__ */ n("div", { className: "flex items-center gap-4", children: [
+    /* @__PURE__ */ e("div", { className: "text-3xl font-semibold tracking-tight", children: /* @__PURE__ */ e(c, { number: r }) }),
+    /* @__PURE__ */ n("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ e(l, { size: "sm", variant: "outline", onClick: () => t((i) => i - 100), children: "-100" }),
+      /* @__PURE__ */ e(l, { size: "sm", variant: "outline", onClick: () => t((i) => i + 100), children: "+100" }),
+      /* @__PURE__ */ e(l, { size: "sm", variant: "outline", onClick: () => t(Math.floor(Math.random() * 1e4)), children: "随机" })
+    ] })
+  ] });
+}
+function d() {
+  const [r, t] = s(0);
+  return m(() => {
+    const i = setInterval(() => t((o) => o + 1), 900);
+    return () => clearInterval(i);
+  }, []), /* @__PURE__ */ n("div", { className: "text-2xl font-semibold", children: [
+    "计数：",
+    /* @__PURE__ */ e(c, { number: r })
+  ] });
+}
+function N() {
+  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(a, {})
+    ] }),
+    /* @__PURE__ */ n("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "自动递增" }),
+      /* @__PURE__ */ e(d, {})
+    ] })
+  ] });
+}
+export {
+  d as SlidingNumberAutoIncrement,
+  a as SlidingNumberBasic,
+  N as SlidingNumberShowcase
+};

package/dist/kit/components/data-display/stepper/stepper.examples.d.ts

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

package/dist/kit/components/data-display/stepper/stepper.examples.js

@@ -0,0 +1,28 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { Fragment as i } from "react";
+import { Stepper as c, StepperItem as s, StepperTrigger as n, StepperIndicator as a, StepperTitle as m, StepperSeparator as o } from "./stepper.js";
+const l = [
+  { step: 1, title: "提交" },
+  { step: 2, title: "审核" },
+  { step: 3, title: "批准" },
+  { step: 4, title: "发布" }
+];
+function d() {
+  return /* @__PURE__ */ e(c, { defaultValue: 2, className: "w-full max-w-xl", children: l.map((t, p) => /* @__PURE__ */ r(i, { children: [
+    /* @__PURE__ */ e(s, { step: t.step, children: /* @__PURE__ */ r(n, { className: "flex flex-col items-center gap-1", children: [
+      /* @__PURE__ */ e(a, { children: t.step }),
+      /* @__PURE__ */ e(m, { children: t.title })
+    ] }) }),
+    p < l.length - 1 && /* @__PURE__ */ e(o, {})
+  ] }, t.step)) });
+}
+function x() {
+  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: "任务审批流（第 2 步进行中）" }),
+    /* @__PURE__ */ e(d, {})
+  ] }) });
+}
+export {
+  d as StepperBasic,
+  x as StepperShowcase
+};

package/dist/kit/components/data-display/table/table.examples.d.ts

@@ -0,0 +1,4 @@
+/** Minimal — 3 columns, no styling quirks. */
+export declare function TableMinimal(): import("react/jsx-runtime").JSX.Element;
+export declare function TableFlowCenter(): import("react/jsx-runtime").JSX.Element;
+export declare function TableShowcase(): import("react/jsx-runtime").JSX.Element;