@demokit-ui/demokit 0.1.0 → 0.1.2

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

@@ -0,0 +1,24 @@
+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 interface ChartFunnelStage {
+    label: string;
+    value: number;
+}
+export interface ChartFunnelProps {
+    stages?: ChartFunnelStage[];
+    height?: number;
+    seriesName?: string;
+    unit?: string;
+    valueFormatter?: (value: number, stage: ChartFunnelStage) => string;
+}
+export declare function ChartFunnel({ stages, height, seriesName, unit, valueFormatter, }?: ChartFunnelProps): 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,422 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { Suspense as g, lazy as y } from "react";
+import { useChartPalette as c } from "../../../tokens/chart-palette.js";
+const v = y(async () => {
+  const o = (await import("react-apexcharts")).default, t = o && typeof o == "object" && "default" in o ? o.default : o;
+  if (!t)
+    throw new Error("react-apexcharts default export is unavailable");
+  return { default: t };
+});
+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(v, { ...r })
+    }
+  );
+}
+function u({ 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__ */ a("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 w() {
+  const r = c(), o = ["文档模板", "检查单", "评审规范", "其他"], t = [40, 24, 18, 18], n = o.map((s, m) => r[m % r.length]);
+  return /* @__PURE__ */ a("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: t, type: "donut", height: 200, width: 200 }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-2 text-sm", children: o.map((s, m) => /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ e("span", { className: "size-2 rounded-full shrink-0", style: { background: n[m] } }),
+      /* @__PURE__ */ e("span", { className: "flex-1", children: s }),
+      /* @__PURE__ */ a("span", { className: "font-mono text-xs text-muted-foreground", children: [
+        t[m],
+        "%"
+      ] })
+    ] }, s)) })
+  ] });
+}
+function k() {
+  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__ */ a("div", { className: "flex items-center gap-6", children: [
+    /* @__PURE__ */ a("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 N() {
+  const r = c(), o = [
+    { name: "2024", data: [44, 55, 57, 56] },
+    { name: "2025", data: [76, 85, 101, 98] }
+  ], t = r.slice(0, 2);
+  return /* @__PURE__ */ a("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: t,
+      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(u, { items: o.map((l, s) => ({ name: l.name, color: t[s] })) })
+  ] });
+}
+function C() {
+  const r = c(), o = ["研发部", "产品部", "设计部", "运营部", "市场部", "行政部"], t = [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: t }], type: "bar", height: 280 });
+}
+function z() {
+  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] }
+  ], t = r.slice(0, 3);
+  return /* @__PURE__ */ a("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: t,
+      legend: { show: !1 },
+      grid: { borderColor: "var(--color-border)", strokeDashArray: 3 },
+      tooltip: { shared: !0, intersect: !1 }
+    }, series: o, type: "line", height: 260 }),
+    /* @__PURE__ */ e(u, { items: o.map((l, s) => ({ name: l.name, color: t[s] })) })
+  ] });
+}
+function T() {
+  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] }
+  ], t = r.slice(0, 3);
+  return /* @__PURE__ */ a("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: t,
+      legend: { show: !1 },
+      grid: { borderColor: "var(--color-border)", strokeDashArray: 3 },
+      dataLabels: { enabled: !1 },
+      tooltip: { shared: !0 }
+    }, series: o, type: "area", height: 260 }),
+    /* @__PURE__ */ e(u, { items: o.map((l, s) => ({ name: l.name, color: t[s] })) })
+  ] });
+}
+function B() {
+  const r = c(), o = [r[0], r[2]];
+  return /* @__PURE__ */ a("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(u, { items: [{ name: "营收", color: o[0] }, { name: "增长率", color: o[1] }] })
+  ] });
+}
+function D() {
+  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: (t) => `${t}%` }
+        }
+      }
+    },
+    colors: [r[0]],
+    stroke: { lineCap: "round" },
+    labels: ["达成率"]
+  };
+  return /* @__PURE__ */ a("div", { className: "flex items-center gap-6", children: [
+    /* @__PURE__ */ e(d, { options: o, series: [72], type: "radialBar", height: 200, width: 200 }),
+    /* @__PURE__ */ a("div", { className: "grid grid-cols-1 gap-2 text-sm", children: [
+      /* @__PURE__ */ e("div", { className: "text-muted-foreground text-xs", children: "季度目标" }),
+      /* @__PURE__ */ a("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 A() {
+  const r = c(), o = [
+    { name: "当前版本", data: [80, 65, 70, 88, 75, 82] },
+    { name: "上一版本", data: [65, 55, 60, 70, 68, 72] }
+  ], t = 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: t,
+    stroke: { width: 2 },
+    fill: { opacity: 0.2 },
+    markers: { size: 3, strokeColors: t },
+    legend: { show: !1 },
+    plotOptions: { radar: { polygons: { strokeColors: "var(--color-border)", connectorColors: "var(--color-border)" } } }
+  };
+  return /* @__PURE__ */ a("div", { children: [
+    /* @__PURE__ */ e(d, { options: n, series: o, type: "radar", height: 280 }),
+    /* @__PURE__ */ e(u, { items: o.map((l, s) => ({ name: l.name, color: t[s] })) })
+  ] });
+}
+function L() {
+  const r = c(), o = ["0", "3", "6", "9", "12", "15", "18", "21"], t = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], 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 = t.map((p, f) => ({
+    name: p,
+    data: o.map((x, i) => ({ x: `${x}时`, y: n[f][i] }))
+  })), s = r[0], m = [r[0], r[2], r[4]], b = {
+    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: m[0], name: "冷" },
+            { from: 21, to: 50, color: m[1], name: "中" },
+            { from: 51, to: 100, color: m[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: b, series: l, type: "heatmap", height: 280 });
+}
+const S = [
+  { label: "访问", value: 5200 },
+  { label: "注册", value: 3120 },
+  { label: "激活", value: 1580 },
+  { label: "付费", value: 620 },
+  { label: "续费", value: 380 }
+];
+function R({
+  stages: r = S,
+  height: o = 280,
+  seriesName: t = "用户",
+  unit: n = "人",
+  valueFormatter: l
+} = {}) {
+  const s = c(), m = r.map((i) => i.label), b = r.map((i) => i.value), p = r.map((i, h) => s[h % s.length]), f = l ?? ((i) => `${new Intl.NumberFormat("zh-CN", {
+    maximumFractionDigits: 1
+  }).format(i)} ${n}`);
+  return /* @__PURE__ */ a("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: (i, h) => m[h.dataPointIndex],
+        style: { colors: ["var(--color-card)"], fontWeight: 600, fontSize: "12px" },
+        dropShadow: { enabled: !1 }
+      },
+      xaxis: { categories: m, labels: { show: !1 } },
+      yaxis: { labels: { show: !1 } },
+      colors: p,
+      legend: { show: !1 },
+      grid: { show: !1, padding: { left: 0, right: 0 } },
+      tooltip: {
+        y: {
+          formatter: (i, h) => f(i, r[h.dataPointIndex])
+        }
+      }
+    }, series: [{ name: t, data: b }], type: "bar", height: o }),
+    /* @__PURE__ */ e(
+      u,
+      {
+        items: r.map((i, h) => ({
+          name: `${i.label} · ${f(i.value, i)}`,
+          color: p[h]
+        }))
+      }
+    )
+  ] });
+}
+function F() {
+  const o = c().slice(0, 4), t = [
+    {
+      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__ */ a("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: t, type: "rangeBar", height: 260 }),
+    /* @__PURE__ */ e(u, { items: ["需求分析", "原型设计", "开发实现", "测试验收"].map((l, s) => ({ name: l, color: o[s] })) })
+  ] });
+}
+function E() {
+  return /* @__PURE__ */ a("div", { className: "flex flex-col gap-10", children: [
+    /* @__PURE__ */ a("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Donut（占比环）" }),
+      /* @__PURE__ */ e(w, {})
+    ] }),
+    /* @__PURE__ */ a("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Sparkline（KPI 迷你图）" }),
+      /* @__PURE__ */ e(k, {})
+    ] }),
+    /* @__PURE__ */ a("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Column（纵向柱状 · 分组对比）" }),
+      /* @__PURE__ */ e(N, {})
+    ] }),
+    /* @__PURE__ */ a("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Bar（横向条形 · 排行）" }),
+      /* @__PURE__ */ e(C, {})
+    ] }),
+    /* @__PURE__ */ a("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Line（多序列折线 · 时间趋势）" }),
+      /* @__PURE__ */ e(z, {})
+    ] }),
+    /* @__PURE__ */ a("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Area（堆叠面积）" }),
+      /* @__PURE__ */ e(T, {})
+    ] }),
+    /* @__PURE__ */ a("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Mixed（柱线组合 · 双轴）" }),
+      /* @__PURE__ */ e(B, {})
+    ] }),
+    /* @__PURE__ */ a("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "RadialBar（径向进度）" }),
+      /* @__PURE__ */ e(D, {})
+    ] }),
+    /* @__PURE__ */ a("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Radar（雷达 · 多维能力）" }),
+      /* @__PURE__ */ e(A, {})
+    ] }),
+    /* @__PURE__ */ a("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Heatmap（热力 · 时段密度）" }),
+      /* @__PURE__ */ e(L, {})
+    ] }),
+    /* @__PURE__ */ a("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Funnel（转化漏斗）" }),
+      /* @__PURE__ */ e(R, {})
+    ] }),
+    /* @__PURE__ */ a("section", { children: [
+      /* @__PURE__ */ e("h3", { className: "text-sm font-semibold mb-3", children: "Timeline（甘特排期 · RangeBar）" }),
+      /* @__PURE__ */ e(F, {})
+    ] })
+  ] });
+}
+export {
+  T as ChartArea,
+  C as ChartBar,
+  N as ChartColumn,
+  w as ChartDonut,
+  R as ChartFunnel,
+  L as ChartHeatmap,
+  z as ChartLine,
+  B as ChartMixed,
+  A as ChartRadar,
+  D as ChartRadialBar,
+  E as ChartShowcase,
+  k as ChartSparkline,
+  F 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;