@demokit-ui/demokit 0.1.0 → 0.1.1

package/dist/kit/components/chart/chart/chart.examples.d.ts

@@ -0,0 +1,13 @@
+export declare function ChartDonut(): import("react/jsx-runtime").JSX.Element;
+export declare function ChartSparkline(): import("react/jsx-runtime").JSX.Element;
+export declare function ChartColumn(): import("react/jsx-runtime").JSX.Element;
+export declare function ChartBar(): import("react/jsx-runtime").JSX.Element;
+export declare function ChartLine(): import("react/jsx-runtime").JSX.Element;
+export declare function ChartArea(): import("react/jsx-runtime").JSX.Element;
+export declare function ChartMixed(): import("react/jsx-runtime").JSX.Element;
+export declare function ChartRadialBar(): import("react/jsx-runtime").JSX.Element;
+export declare function ChartRadar(): import("react/jsx-runtime").JSX.Element;
+export declare function ChartHeatmap(): import("react/jsx-runtime").JSX.Element;
+export declare function ChartFunnel(): import("react/jsx-runtime").JSX.Element;
+export declare function ChartTimeline(): import("react/jsx-runtime").JSX.Element;
+export declare function ChartShowcase(): import("react/jsx-runtime").JSX.Element;

package/dist/kit/components/chart/chart/chart.examples.js

@@ -0,0 +1,390 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { Suspense as g, lazy as x } from "react";
+import { useChartPalette as c } from "../../../tokens/chart-palette.js";
+const y = x(() => import("react-apexcharts"));
+function d(r) {
+  return /* @__PURE__ */ e(
+    g,
+    {
+      fallback: /* @__PURE__ */ e(
+        "div",
+        {
+          className: "flex items-center justify-center rounded-md bg-muted/20 text-xs text-muted-foreground",
+          style: { height: r.height, width: r.width },
+          children: "加载图表..."
+        }
+      ),
+      children: /* @__PURE__ */ e(y, { ...r })
+    }
+  );
+}
+function m({ items: r }) {
+  return /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-x-4 gap-y-1 text-sm mt-2", children: r.map((o) => /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ e("span", { className: "size-2 rounded-full shrink-0", style: { background: o.color } }),
+    /* @__PURE__ */ e("span", { children: o.name })
+  ] }, o.name)) });
+}
+function v() {
+  const r = c(), o = ["文档模板", "检查单", "评审规范", "其他"], a = [40, 24, 18, 18], n = o.map((s, i) => r[i % r.length]);
+  return /* @__PURE__ */ t("div", { className: "flex items-center gap-6", children: [
+    /* @__PURE__ */ e(d, { options: {
+      chart: { type: "donut" },
+      labels: o,
+      colors: n,
+      stroke: { width: 2, colors: ["var(--color-card)"] },
+      legend: { show: !1 },
+      dataLabels: { enabled: !1 },
+      plotOptions: {
+        pie: {
+          donut: {
+            size: "70%",
+            labels: {
+              show: !0,
+              name: { show: !0, fontSize: "12px" },
+              value: { show: !0, fontSize: "22px", fontWeight: 600 },
+              total: { show: !0, label: "总占比", formatter: () => "100%" }
+            }
+          }
+        }
+      }
+    }, series: a, type: "donut", height: 200, width: 200 }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-2 text-sm", children: o.map((s, i) => /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ e("span", { className: "size-2 rounded-full shrink-0", style: { background: n[i] } }),
+      /* @__PURE__ */ e("span", { className: "flex-1", children: s }),
+      /* @__PURE__ */ t("span", { className: "font-mono text-xs text-muted-foreground", children: [
+        a[i],
+        "%"
+      ] })
+    ] }, s)) })
+  ] });
+}
+function w() {
+  const r = c(), o = {
+    chart: { type: "area", sparkline: { enabled: !0 } },
+    stroke: { curve: "smooth", width: 2, colors: [r[0]] },
+    fill: { type: "gradient", gradient: { opacityFrom: 0.35, opacityTo: 0 } },
+    colors: [r[0]],
+    tooltip: { enabled: !1 }
+  };
+  return /* @__PURE__ */ t("div", { className: "flex items-center gap-6", children: [
+    /* @__PURE__ */ t("div", { children: [
+      /* @__PURE__ */ e("div", { className: "text-xs text-muted-foreground", children: "本周流程" }),
+      /* @__PURE__ */ e("div", { className: "text-2xl font-semibold", children: "14" })
+    ] }),
+    /* @__PURE__ */ e(d, { options: o, series: [{ data: [8, 10, 9, 11, 13, 12, 14] }], type: "area", height: 42, width: 120 })
+  ] });
+}
+function k() {
+  const r = c(), o = [
+    { name: "2024", data: [44, 55, 57, 56] },
+    { name: "2025", data: [76, 85, 101, 98] }
+  ], a = r.slice(0, 2);
+  return /* @__PURE__ */ t("div", { children: [
+    /* @__PURE__ */ e(d, { options: {
+      chart: { type: "bar", toolbar: { show: !1 } },
+      plotOptions: { bar: { horizontal: !1, columnWidth: "50%", borderRadius: 4, borderRadiusApplication: "end" } },
+      dataLabels: { enabled: !1 },
+      stroke: { show: !0, width: 2, colors: ["transparent"] },
+      xaxis: { categories: ["Q1", "Q2", "Q3", "Q4"], axisBorder: { color: "var(--color-border)" }, axisTicks: { color: "var(--color-border)" } },
+      yaxis: { labels: { style: { colors: "var(--color-muted-foreground)" } } },
+      colors: a,
+      fill: { opacity: 1 },
+      tooltip: { y: { formatter: (l) => `${l} 万` } },
+      legend: { show: !1 },
+      grid: { borderColor: "var(--color-border)", strokeDashArray: 3 }
+    }, series: o, type: "bar", height: 260 }),
+    /* @__PURE__ */ e(m, { items: o.map((l, s) => ({ name: l.name, color: a[s] })) })
+  ] });
+}
+function C() {
+  const r = c(), o = ["研发部", "产品部", "设计部", "运营部", "市场部", "行政部"], a = [44, 55, 57, 56, 61, 58], n = {
+    chart: { type: "bar", toolbar: { show: !1 } },
+    plotOptions: { bar: { horizontal: !0, borderRadius: 4, borderRadiusApplication: "end", barHeight: "60%" } },
+    dataLabels: { enabled: !0, style: { colors: ["var(--color-card)"], fontSize: "11px", fontWeight: 600 } },
+    xaxis: { categories: o, axisBorder: { color: "var(--color-border)" }, axisTicks: { color: "var(--color-border)" }, labels: { style: { colors: "var(--color-muted-foreground)" } } },
+    yaxis: { labels: { style: { colors: "var(--color-muted-foreground)" } } },
+    colors: [r[0]],
+    grid: { borderColor: "var(--color-border)", strokeDashArray: 3 },
+    legend: { show: !1 },
+    tooltip: { y: { formatter: (l) => `${l} 人` } }
+  };
+  return /* @__PURE__ */ e(d, { options: n, series: [{ name: "人员数", data: a }], type: "bar", height: 280 });
+}
+function N() {
+  const r = c(), o = [
+    { name: "申报量", data: [31, 40, 28, 51, 42, 109] },
+    { name: "通过数", data: [11, 32, 45, 32, 34, 52] },
+    { name: "驳回数", data: [4, 8, 6, 10, 7, 9] }
+  ], a = r.slice(0, 3);
+  return /* @__PURE__ */ t("div", { children: [
+    /* @__PURE__ */ e(d, { options: {
+      chart: { type: "line", toolbar: { show: !1 }, zoom: { enabled: !1 } },
+      stroke: { curve: "smooth", width: 2 },
+      markers: { size: 0, hover: { size: 5 } },
+      xaxis: { categories: ["1月", "2月", "3月", "4月", "5月", "6月"], axisBorder: { color: "var(--color-border)" }, axisTicks: { color: "var(--color-border)" }, labels: { style: { colors: "var(--color-muted-foreground)" } } },
+      yaxis: { labels: { style: { colors: "var(--color-muted-foreground)" } } },
+      colors: a,
+      legend: { show: !1 },
+      grid: { borderColor: "var(--color-border)", strokeDashArray: 3 },
+      tooltip: { shared: !0, intersect: !1 }
+    }, series: o, type: "line", height: 260 }),
+    /* @__PURE__ */ e(m, { items: o.map((l, s) => ({ name: l.name, color: a[s] })) })
+  ] });
+}
+function z() {
+  const r = c(), o = [
+    { name: "研发", data: [31, 40, 28, 51, 42, 20, 15] },
+    { name: "设计", data: [11, 32, 45, 32, 34, 18, 12] },
+    { name: "测试", data: [14, 18, 22, 28, 26, 15, 10] }
+  ], a = r.slice(0, 3);
+  return /* @__PURE__ */ t("div", { children: [
+    /* @__PURE__ */ e(d, { options: {
+      chart: { type: "area", stacked: !0, toolbar: { show: !1 }, zoom: { enabled: !1 } },
+      stroke: { curve: "smooth", width: 2, colors: ["var(--color-card)"] },
+      fill: { type: "gradient", gradient: { opacityFrom: 0.7, opacityTo: 0.2 } },
+      xaxis: { categories: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], axisBorder: { color: "var(--color-border)" }, axisTicks: { color: "var(--color-border)" }, labels: { style: { colors: "var(--color-muted-foreground)" } } },
+      yaxis: { labels: { style: { colors: "var(--color-muted-foreground)" } } },
+      colors: a,
+      legend: { show: !1 },
+      grid: { borderColor: "var(--color-border)", strokeDashArray: 3 },
+      dataLabels: { enabled: !1 },
+      tooltip: { shared: !0 }
+    }, series: o, type: "area", height: 260 }),
+    /* @__PURE__ */ e(m, { items: o.map((l, s) => ({ name: l.name, color: a[s] })) })
+  ] });
+}
+function T() {
+  const r = c(), o = [r[0], r[2]];
+  return /* @__PURE__ */ t("div", { children: [
+    /* @__PURE__ */ e(d, { options: {
+      chart: { toolbar: { show: !1 } },
+      stroke: { width: [0, 3], curve: "smooth" },
+      plotOptions: { bar: { columnWidth: "40%", borderRadius: 4, borderRadiusApplication: "end" } },
+      dataLabels: { enabled: !1 },
+      xaxis: { categories: ["1月", "2月", "3月", "4月", "5月", "6月"], axisBorder: { color: "var(--color-border)" }, axisTicks: { color: "var(--color-border)" }, labels: { style: { colors: "var(--color-muted-foreground)" } } },
+      yaxis: [
+        { seriesName: "营收", title: { text: "营收 (万)", style: { color: "var(--color-muted-foreground)" } }, labels: { style: { colors: "var(--color-muted-foreground)" } } },
+        { seriesName: "增长率", opposite: !0, title: { text: "增长率 (%)", style: { color: "var(--color-muted-foreground)" } }, labels: { style: { colors: "var(--color-muted-foreground)" } } }
+      ],
+      colors: o,
+      grid: { borderColor: "var(--color-border)", strokeDashArray: 3 },
+      legend: { show: !1 },
+      tooltip: { shared: !0, intersect: !1 }
+    }, series: [
+      { name: "营收", type: "column", data: [120, 132, 108, 145, 168, 155] },
+      { name: "增长率", type: "line", data: [12, 14, -8, 15, 18, 10] }
+    ], type: "line", height: 260 }),
+    /* @__PURE__ */ e(m, { items: [{ name: "营收", color: o[0] }, { name: "增长率", color: o[1] }] })
+  ] });
+}
+function B() {
+  const r = c(), o = {
+    chart: { type: "radialBar" },
+    plotOptions: {
+      radialBar: {
+        hollow: { size: "62%" },
+        track: { background: "var(--color-muted)", strokeWidth: "100%" },
+        dataLabels: {
+          name: { show: !0, fontSize: "12px", color: "var(--color-muted-foreground)", offsetY: -4 },
+          value: { show: !0, fontSize: "26px", fontWeight: 600, color: "var(--color-foreground)", offsetY: 6, formatter: (a) => `${a}%` }
+        }
+      }
+    },
+    colors: [r[0]],
+    stroke: { lineCap: "round" },
+    labels: ["达成率"]
+  };
+  return /* @__PURE__ */ t("div", { className: "flex items-center gap-6", children: [
+    /* @__PURE__ */ e(d, { options: o, series: [72], type: "radialBar", height: 200, width: 200 }),
+    /* @__PURE__ */ t("div", { className: "grid grid-cols-1 gap-2 text-sm", children: [
+      /* @__PURE__ */ e("div", { className: "text-muted-foreground text-xs", children: "季度目标" }),
+      /* @__PURE__ */ t("div", { children: [
+        /* @__PURE__ */ e("span", { className: "text-2xl font-semibold font-mono", children: "72" }),
+        /* @__PURE__ */ e("span", { className: "text-muted-foreground text-sm", children: " / 100" })
+      ] }),
+      /* @__PURE__ */ e("div", { className: "text-xs text-muted-foreground", children: "剩余 28 个工作日" })
+    ] })
+  ] });
+}
+function D() {
+  const r = c(), o = [
+    { name: "当前版本", data: [80, 65, 70, 88, 75, 82] },
+    { name: "上一版本", data: [65, 55, 60, 70, 68, 72] }
+  ], a = r.slice(0, 2), n = {
+    chart: { type: "radar", toolbar: { show: !1 } },
+    xaxis: { categories: ["响应", "稳定", "扩展", "安全", "易用", "性能"], labels: { style: { colors: Array(6).fill("var(--color-muted-foreground)") } } },
+    yaxis: { show: !1 },
+    colors: a,
+    stroke: { width: 2 },
+    fill: { opacity: 0.2 },
+    markers: { size: 3, strokeColors: a },
+    legend: { show: !1 },
+    plotOptions: { radar: { polygons: { strokeColors: "var(--color-border)", connectorColors: "var(--color-border)" } } }
+  };
+  return /* @__PURE__ */ t("div", { children: [
+    /* @__PURE__ */ e(d, { options: n, series: o, type: "radar", height: 280 }),
+    /* @__PURE__ */ e(m, { items: o.map((l, s) => ({ name: l.name, color: a[s] })) })
+  ] });
+}
+function A() {
+  const r = c(), o = ["0", "3", "6", "9", "12", "15", "18", "21"], a = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], n = [
+    [5, 2, 12, 58, 72, 64, 48, 22],
+    [7, 3, 15, 62, 78, 70, 52, 25],
+    [6, 2, 14, 60, 80, 74, 55, 28],
+    [8, 4, 16, 65, 82, 76, 58, 30],
+    [10, 5, 18, 68, 85, 80, 62, 35],
+    [12, 8, 22, 45, 55, 50, 42, 28],
+    [15, 10, 20, 38, 42, 40, 35, 22]
+  ], l = a.map((p, u) => ({
+    name: p,
+    data: o.map((f, b) => ({ x: `${f}时`, y: n[u][b] }))
+  })), s = r[0], i = [r[0], r[2], r[4]], h = {
+    chart: { type: "heatmap", toolbar: { show: !1 } },
+    dataLabels: { enabled: !1 },
+    colors: [s],
+    plotOptions: {
+      heatmap: {
+        shadeIntensity: 0.5,
+        radius: 2,
+        useFillColorAsStroke: !1,
+        colorScale: {
+          ranges: [
+            { from: 0, to: 20, color: i[0], name: "冷" },
+            { from: 21, to: 50, color: i[1], name: "中" },
+            { from: 51, to: 100, color: i[2], name: "热" }
+          ]
+        }
+      }
+    },
+    stroke: { width: 1, colors: ["var(--color-card)"] },
+    xaxis: { axisBorder: { color: "var(--color-border)" }, axisTicks: { color: "var(--color-border)" }, labels: { style: { colors: "var(--color-muted-foreground)" } } },
+    yaxis: { labels: { style: { colors: "var(--color-muted-foreground)" } } },
+    grid: { borderColor: "var(--color-border)" },
+    legend: { show: !1 }
+  };
+  return /* @__PURE__ */ e(d, { options: h, series: l, type: "heatmap", height: 280 });
+}
+function R() {
+  const r = c(), o = ["访问", "注册", "激活", "付费", "续费"], a = [5200, 3120, 1580, 620, 380], n = o.map((s, i) => r[i % r.length]);
+  return /* @__PURE__ */ t("div", { children: [
+    /* @__PURE__ */ e(d, { options: {
+      chart: { type: "bar", toolbar: { show: !1 } },
+      plotOptions: {
+        bar: {
+          horizontal: !0,
+          barHeight: "75%",
+          distributed: !0,
+          borderRadius: 0,
+          isFunnel: !0
+        }
+      },
+      dataLabels: {
+        enabled: !0,
+        formatter: (s, i) => o[i.dataPointIndex],
+        style: { colors: ["var(--color-card)"], fontWeight: 600, fontSize: "12px" },
+        dropShadow: { enabled: !1 }
+      },
+      xaxis: { categories: o, labels: { show: !1 } },
+      yaxis: { labels: { show: !1 } },
+      colors: n,
+      legend: { show: !1 },
+      grid: { show: !1, padding: { left: 0, right: 0 } },
+      tooltip: { y: { formatter: (s) => `${s} 人` } }
+    }, series: [{ name: "用户", data: a }], type: "bar", height: 280 }),
+    /* @__PURE__ */ e(m, { items: o.map((s, i) => ({ name: `${s} · ${a[i]}`, color: n[i] })) })
+  ] });
+}
+function L() {
+  const o = c().slice(0, 4), a = [
+    {
+      data: [
+        { x: "需求分析", y: [(/* @__PURE__ */ new Date("2025-03-01")).getTime(), (/* @__PURE__ */ new Date("2025-03-05")).getTime()], fillColor: o[0] },
+        { x: "原型设计", y: [(/* @__PURE__ */ new Date("2025-03-04")).getTime(), (/* @__PURE__ */ new Date("2025-03-10")).getTime()], fillColor: o[1] },
+        { x: "开发实现", y: [(/* @__PURE__ */ new Date("2025-03-09")).getTime(), (/* @__PURE__ */ new Date("2025-03-20")).getTime()], fillColor: o[2] },
+        { x: "测试验收", y: [(/* @__PURE__ */ new Date("2025-03-18")).getTime(), (/* @__PURE__ */ new Date("2025-03-25")).getTime()], fillColor: o[3] }
+      ]
+    }
+  ];
+  return /* @__PURE__ */ t("div", { children: [
+    /* @__PURE__ */ e(d, { options: {
+      chart: { type: "rangeBar", toolbar: { show: !1 } },
+      plotOptions: { bar: { horizontal: !0, barHeight: "55%", rangeBarGroupRows: !0, borderRadius: 4 } },
+      xaxis: { type: "datetime", axisBorder: { color: "var(--color-border)" }, axisTicks: { color: "var(--color-border)" }, labels: { style: { colors: "var(--color-muted-foreground)" } } },
+      yaxis: { labels: { style: { colors: "var(--color-muted-foreground)" } } },
+      stroke: { width: 1, colors: ["var(--color-card)"] },
+      fill: { type: "solid", opacity: 0.85 },
+      dataLabels: { enabled: !1 },
+      grid: { borderColor: "var(--color-border)", strokeDashArray: 3 },
+      legend: { show: !1 },
+      tooltip: { x: { format: "yyyy-MM-dd" } }
+    }, series: a, type: "rangeBar", height: 260 }),
+    /* @__PURE__ */ e(m, { items: ["需求分析", "原型设计", "开发实现", "测试验收"].map((l, s) => ({ name: l, color: o[s] })) })
+  ] });
+}
+function $() {
+  return /* @__PURE__ */ t("div", { className: "flex flex-col gap-10", children: [
+    /* @__PURE__ */ t("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Donut（占比环）" }),
+      /* @__PURE__ */ e(v, {})
+    ] }),
+    /* @__PURE__ */ t("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Sparkline（KPI 迷你图）" }),
+      /* @__PURE__ */ e(w, {})
+    ] }),
+    /* @__PURE__ */ t("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Column（纵向柱状 · 分组对比）" }),
+      /* @__PURE__ */ e(k, {})
+    ] }),
+    /* @__PURE__ */ t("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Bar（横向条形 · 排行）" }),
+      /* @__PURE__ */ e(C, {})
+    ] }),
+    /* @__PURE__ */ t("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Line（多序列折线 · 时间趋势）" }),
+      /* @__PURE__ */ e(N, {})
+    ] }),
+    /* @__PURE__ */ t("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Area（堆叠面积）" }),
+      /* @__PURE__ */ e(z, {})
+    ] }),
+    /* @__PURE__ */ t("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Mixed（柱线组合 · 双轴）" }),
+      /* @__PURE__ */ e(T, {})
+    ] }),
+    /* @__PURE__ */ t("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "RadialBar（径向进度）" }),
+      /* @__PURE__ */ e(B, {})
+    ] }),
+    /* @__PURE__ */ t("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Radar（雷达 · 多维能力）" }),
+      /* @__PURE__ */ e(D, {})
+    ] }),
+    /* @__PURE__ */ t("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Heatmap（热力 · 时段密度）" }),
+      /* @__PURE__ */ e(A, {})
+    ] }),
+    /* @__PURE__ */ t("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Funnel（转化漏斗）" }),
+      /* @__PURE__ */ e(R, {})
+    ] }),
+    /* @__PURE__ */ t("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Timeline（甘特排期 · RangeBar）" }),
+      /* @__PURE__ */ e(L, {})
+    ] })
+  ] });
+}
+export {
+  z as ChartArea,
+  C as ChartBar,
+  k as ChartColumn,
+  v as ChartDonut,
+  R as ChartFunnel,
+  A as ChartHeatmap,
+  N as ChartLine,
+  T as ChartMixed,
+  D as ChartRadar,
+  B as ChartRadialBar,
+  $ as ChartShowcase,
+  w as ChartSparkline,
+  L as ChartTimeline
+};

package/dist/kit/components/composite/action-bar/action-bar.examples.d.ts

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

package/dist/kit/components/composite/action-bar/action-bar.examples.js

@@ -0,0 +1,35 @@
+import { jsx as r, jsxs as n, Fragment as i } from "react/jsx-runtime";
+import { Save as t, Send as a } from "lucide-react";
+import { ActionBar as o } from "./action-bar.js";
+import { Button as e } from "../../form/button/button.js";
+import { Badge as c } from "../../data-display/badge/badge.js";
+function m() {
+  return /* @__PURE__ */ r(
+    o,
+    {
+      summary: /* @__PURE__ */ n("span", { className: "flex flex-wrap items-center gap-2", children: [
+        "已选择 ",
+        /* @__PURE__ */ r(c, { appearance: "light", children: "6 项" }),
+        "可批量分配负责人或导出结果。"
+      ] }),
+      secondaryActions: /* @__PURE__ */ r(e, { variant: "outline", children: "取消" }),
+      actions: /* @__PURE__ */ n(i, { children: [
+        /* @__PURE__ */ n(e, { variant: "outline", children: [
+          /* @__PURE__ */ r(t, {}),
+          "保存草稿"
+        ] }),
+        /* @__PURE__ */ n(e, { children: [
+          /* @__PURE__ */ r(a, {}),
+          "提交"
+        ] })
+      ] })
+    }
+  );
+}
+function h() {
+  return /* @__PURE__ */ r(m, {});
+}
+export {
+  m as ActionBarBasic,
+  h as ActionBarShowcase
+};

package/dist/kit/components/composite/action-card/action-card.examples.d.ts

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

package/dist/kit/components/composite/action-card/action-card.examples.js

@@ -0,0 +1,34 @@
+import { jsxs as r, jsx as i } from "react/jsx-runtime";
+import { UploadCloud as n } from "lucide-react";
+import { ActionCard as t } from "./action-card.js";
+import { Button as o } from "../../form/button/button.js";
+function c() {
+  return /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ i(
+      t,
+      {
+        icon: n,
+        title: "导入项目数据",
+        description: "上传 Excel 或 CSV 文件，系统会自动识别字段并生成导入预览。",
+        action: /* @__PURE__ */ i(o, { children: "开始导入" }),
+        secondaryAction: /* @__PURE__ */ i(o, { variant: "outline", children: "下载模板" }),
+        tone: "primary"
+      }
+    ),
+    /* @__PURE__ */ i(
+      t,
+      {
+        title: "配置通知规则",
+        description: "为关键项目节点开启站内信、邮件或企业 IM 通知。",
+        action: /* @__PURE__ */ i(o, { variant: "outline", children: "去配置" })
+      }
+    )
+  ] });
+}
+function s() {
+  return /* @__PURE__ */ i(c, {});
+}
+export {
+  c as ActionCardBasic,
+  s as ActionCardShowcase
+};

package/dist/kit/components/composite/activity-feed/activity-feed.examples.d.ts

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

package/dist/kit/components/composite/activity-feed/activity-feed.examples.js

@@ -0,0 +1,44 @@
+import { jsx as i } from "react/jsx-runtime";
+import { ActivityFeed as t } from "./activity-feed.js";
+import { Badge as a } from "../../data-display/badge/badge.js";
+function r() {
+  return /* @__PURE__ */ i(
+    t,
+    {
+      items: [
+        {
+          id: 1,
+          actor: "林青",
+          action: "提交了预算审批",
+          time: "10:32",
+          description: "预算从 ¥720,000 调整为 ¥860,000。",
+          avatarFallback: "LQ",
+          meta: /* @__PURE__ */ i(a, { variant: "warning", appearance: "light", size: "sm", children: "待审批" })
+        },
+        {
+          id: 2,
+          actor: "周然",
+          action: "完成了质量规则联调",
+          time: "09:18",
+          description: "主数据规则命中率已恢复到阈值以上。",
+          avatarFallback: "ZR"
+        },
+        {
+          id: 3,
+          actor: "陈序",
+          action: "更新了项目里程碑",
+          time: "昨天",
+          description: "验收时间调整到 05-12。",
+          avatarFallback: "CX"
+        }
+      ]
+    }
+  );
+}
+function n() {
+  return /* @__PURE__ */ i(r, {});
+}
+export {
+  r as ActivityFeedBasic,
+  n as ActivityFeedShowcase
+};

package/dist/kit/components/composite/alert-card/alert-card.examples.d.ts

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

package/dist/kit/components/composite/alert-card/alert-card.examples.js

@@ -0,0 +1,18 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { AlertCard as e } from "./alert-card.js";
+import { Button as r } from "../../form/button/button.js";
+function s() {
+  return /* @__PURE__ */ i("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ t(e, { title: "同步完成", description: "12 个项目指标已完成同步。", severity: "success" }),
+    /* @__PURE__ */ t(e, { title: "预算即将超限", description: "当前项目预算使用率已达到 86%。", severity: "warning", actions: /* @__PURE__ */ t(r, { size: "sm", variant: "outline", children: "查看" }) }),
+    /* @__PURE__ */ t(e, { title: "接口调用失败", description: "审批系统连接超时，请检查集成配置。", severity: "destructive" }),
+    /* @__PURE__ */ t(e, { title: "版本提示", description: "复合组件可用于后台页面的高频反馈场景。", severity: "info" })
+  ] });
+}
+function a() {
+  return /* @__PURE__ */ t(s, {});
+}
+export {
+  s as AlertCardList,
+  a as AlertCardShowcase
+};

package/dist/kit/components/composite/approval-flow/approval-flow.examples.d.ts

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

package/dist/kit/components/composite/approval-flow/approval-flow.examples.js

@@ -0,0 +1,70 @@
+import { jsx as a } from "react/jsx-runtime";
+import { ApprovalFlow as t } from "./approval-flow.js";
+const r = [
+  {
+    id: 1,
+    actor: "范米花儿",
+    time: "2024/09/15 09:00",
+    status: "started",
+    avatarSrc: "/avatar.png",
+    avatarFallback: "范"
+  },
+  {
+    id: 2,
+    actor: "范米花儿",
+    time: "2024/09/15 09:00",
+    status: "approved",
+    avatarSrc: "/avatar.png",
+    avatarFallback: "范"
+  },
+  {
+    id: 3,
+    actor: "范米花儿",
+    time: "2024/09/15 09:00",
+    status: "approved",
+    avatarFallback: "F",
+    comment: "这里是评论内容，这里是评论内容这里是评论内容这里是评论内容"
+  },
+  {
+    id: 4,
+    actor: "范米花儿",
+    time: "2024/09/15 09:00",
+    status: "processing",
+    avatarSrc: "/avatar.png",
+    avatarFallback: "范",
+    rule: "1人通过即可",
+    participants: [
+      { id: "a", name: "李四", avatarSrc: "/avatar.png", avatarFallback: "李" },
+      { id: "b", name: "李四", avatarSrc: "/avatar.png", avatarFallback: "李" },
+      { id: "c", name: "李四", avatarSrc: "/avatar.png", avatarFallback: "李" }
+    ]
+  },
+  {
+    id: 5,
+    actor: "范米花儿",
+    time: "2024/09/15 09:00",
+    status: "pending",
+    avatarSrc: "/avatar.png",
+    avatarFallback: "范"
+  }
+];
+function l() {
+  return /* @__PURE__ */ a(
+    t,
+    {
+      tabs: [
+        { value: "flow", label: "审批流程" },
+        { value: "comments", label: "评论" }
+      ],
+      defaultActiveTab: "flow",
+      items: r
+    }
+  );
+}
+function e() {
+  return /* @__PURE__ */ a("div", { className: "w-full", children: /* @__PURE__ */ a(l, {}) });
+}
+export {
+  l as ApprovalFlowBasic,
+  e as ApprovalFlowShowcase
+};

package/dist/kit/components/composite/auth-shell/auth-shell.examples.d.ts

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

package/dist/kit/components/composite/auth-shell/auth-shell.examples.js

@@ -0,0 +1,23 @@
+import { jsx as r } from "react/jsx-runtime";
+import { AuthShell as o } from "./auth-shell.js";
+import { LoginCard as t, PasswordLoginForm as i } from "../login-card/login-card.js";
+function d() {
+  return /* @__PURE__ */ r(
+    o,
+    {
+      brand: "DemoKit Cloud",
+      title: "统一身份入口",
+      description: "适合管理后台、SaaS 控制台和企业内部系统的登录页外壳。",
+      aside: /* @__PURE__ */ r("div", { className: "rounded-xl border border-border bg-card/80 p-4 text-sm text-muted-foreground", children: "今日已有 328 位成员通过统一身份入口访问工作台。" }),
+      footer: "登录即表示你同意安全策略和隐私条款。",
+      children: /* @__PURE__ */ r(t, { title: "欢迎回来", description: "使用账号密码登录", children: /* @__PURE__ */ r(i, { onSubmit: (e) => e.preventDefault() }) })
+    }
+  );
+}
+function a() {
+  return /* @__PURE__ */ r(d, {});
+}
+export {
+  d as AuthShellBasic,
+  a as AuthShellShowcase
+};

package/dist/kit/components/composite/board-toolbar/board-toolbar.examples.d.ts

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