@demokit-ui/demokit 0.1.0

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

@@ -0,0 +1,206 @@
+import { jsx as o, jsxs as h, Fragment as P } from "react/jsx-runtime";
+import * as f from "react";
+import { cn as l } from "../../../../lib/utils.js";
+import * as w from "recharts";
+const y = f.createContext(null);
+function j() {
+  const s = f.useContext(y);
+  if (!s)
+    throw new Error("useChart must be used within a <ChartContainer />");
+  return s;
+}
+const T = f.forwardRef(({ id: s, className: e, children: t, config: r, ...a }, i) => {
+  const d = f.useId(), c = `chart-${s || d.replace(/:/g, "")}`;
+  return /* @__PURE__ */ o(y.Provider, { value: { config: r }, children: /* @__PURE__ */ h(
+    "div",
+    {
+      "data-slot": "chart",
+      "data-chart": c,
+      ref: i,
+      className: l(
+        "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+        e
+      ),
+      ...a,
+      children: [
+        /* @__PURE__ */ o(I, { id: c, config: r }),
+        /* @__PURE__ */ o(w.ResponsiveContainer, { children: t })
+      ]
+    }
+  ) });
+});
+T.displayName = "Chart";
+const I = ({ id: s, config: e }) => {
+  const t = Object.entries(e).filter(([, r]) => r.color);
+  return t.length ? /* @__PURE__ */ o(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: `
+[data-chart=${s}] {
+${t.map(([r, a]) => {
+          const i = a.color;
+          return i ? `  --color-${r}: ${i};` : null;
+        }).join(`
+`)}
+}
+`
+      }
+    }
+  ) : null;
+}, E = w.Tooltip, K = f.forwardRef(
+  ({
+    active: s,
+    payload: e,
+    className: t,
+    indicator: r = "dot",
+    hideLabel: a = !1,
+    hideIndicator: i = !1,
+    label: d,
+    labelFormatter: c,
+    labelClassName: m,
+    formatter: g,
+    color: L,
+    nameKey: $,
+    labelKey: x
+  }, R) => {
+    const { config: p } = j(), N = f.useMemo(() => {
+      if (a || !e?.length)
+        return null;
+      const [n] = e, b = `${x || n.dataKey || n.name || "value"}`, C = _(p, n, b), u = !x && typeof d == "string" ? p[d]?.label || d : C?.label;
+      return c ? /* @__PURE__ */ o("div", { className: l("font-medium", m), children: c(u, e) }) : u ? /* @__PURE__ */ o("div", { className: l("font-medium", m), children: u }) : null;
+    }, [d, c, e, a, m, p, x]);
+    if (!s || !e?.length)
+      return null;
+    const v = e.length === 1 && r !== "dot";
+    return /* @__PURE__ */ h(
+      "div",
+      {
+        ref: R,
+        className: l(
+          "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+          t
+        ),
+        children: [
+          v ? null : N,
+          /* @__PURE__ */ o("div", { className: "grid gap-1.5", children: e.map((n, b) => {
+            const C = `${$ || n.name || n.dataKey || "value"}`, u = _(p, n, C), k = L || n.payload.fill || n.color;
+            return /* @__PURE__ */ o(
+              "div",
+              {
+                className: l(
+                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                  r === "dot" && "items-center"
+                ),
+                children: g && n?.value !== void 0 && n.name ? g(n.value, n.name, n, b, n.payload) : /* @__PURE__ */ h(P, { children: [
+                  u?.icon ? /* @__PURE__ */ o(u.icon, {}) : !i && /* @__PURE__ */ o(
+                    "div",
+                    {
+                      className: l("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+                        "h-2.5 w-2.5": r === "dot",
+                        "w-1": r === "line",
+                        "w-0 border-[1.5px] border-dashed bg-transparent": r === "dashed",
+                        "my-0.5": v && r === "dashed"
+                      }),
+                      style: {
+                        "--color-bg": k,
+                        "--color-border": k
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ h(
+                    "div",
+                    {
+                      className: l(
+                        "flex flex-1 justify-between leading-none",
+                        v ? "items-end" : "items-center"
+                      ),
+                      children: [
+                        /* @__PURE__ */ h("div", { className: "grid gap-1.5", children: [
+                          v ? N : null,
+                          /* @__PURE__ */ o("span", { className: "text-muted-foreground", children: u?.label || n.name })
+                        ] }),
+                        n.value && /* @__PURE__ */ o("span", { className: "text-foreground font-mono font-medium tabular-nums", children: n.value.toLocaleString() })
+                      ]
+                    }
+                  )
+                ] })
+              },
+              n.dataKey
+            );
+          }) })
+        ]
+      }
+    );
+  }
+);
+K.displayName = "ChartTooltip";
+const H = w.Legend;
+function O({
+  className: s,
+  children: e,
+  prefix: t = "单位：",
+  ...r
+}) {
+  return /* @__PURE__ */ h(
+    "span",
+    {
+      "data-slot": "chart-unit",
+      className: l("inline-flex items-baseline gap-0.5 text-xs font-normal text-muted-foreground", s),
+      ...r,
+      children: [
+        /* @__PURE__ */ o("span", { children: t }),
+        /* @__PURE__ */ o("span", { children: e })
+      ]
+    }
+  );
+}
+const S = f.forwardRef(({ className: s, hideIcon: e = !1, payload: t, verticalAlign: r = "bottom", nameKey: a }, i) => {
+  const { config: d } = j();
+  return t?.length ? /* @__PURE__ */ o(
+    "div",
+    {
+      ref: i,
+      className: l("flex items-center justify-center gap-4", r === "top" ? "pb-3" : "pt-3", s),
+      children: t.map((c) => {
+        const m = `${a || c.dataKey || "value"}`, g = _(d, c, m);
+        return /* @__PURE__ */ h(
+          "div",
+          {
+            className: l("[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"),
+            children: [
+              g?.icon && !e ? /* @__PURE__ */ o(g.icon, {}) : /* @__PURE__ */ o(
+                "div",
+                {
+                  className: "h-2 w-2 shrink-0 rounded-[2px]",
+                  style: {
+                    backgroundColor: c.color
+                  }
+                }
+              ),
+              g?.label
+            ]
+          },
+          c.value
+        );
+      })
+    }
+  ) : null;
+});
+S.displayName = "ChartLegend";
+function _(s, e, t) {
+  if (typeof e != "object" || e === null)
+    return;
+  const r = "payload" in e && typeof e.payload == "object" && e.payload !== null ? e.payload : void 0;
+  let a = t;
+  return t in e && typeof e[t] == "string" ? a = e[t] : r && t in r && typeof r[t] == "string" && (a = r[t]), a in s ? s[a] : s[t];
+}
+export {
+  T as ChartContainer,
+  H as ChartLegend,
+  S as ChartLegendContent,
+  I as ChartStyle,
+  E as ChartTooltip,
+  K as ChartTooltipContent,
+  O as ChartUnit
+};

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export interface ActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    summary?: React.ReactNode;
+    secondaryActions?: React.ReactNode;
+    actions?: React.ReactNode;
+    sticky?: boolean;
+    align?: 'start' | 'between' | 'end';
+}
+declare function ActionBar({ className, summary, secondaryActions, actions, sticky, align, children, ...props }: ActionBarProps): import("react/jsx-runtime").JSX.Element;
+export { ActionBar };

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

@@ -0,0 +1,38 @@
+import { jsxs as o, jsx as a } from "react/jsx-runtime";
+import { cn as f } from "../../../../lib/utils.js";
+function x({
+  className: d,
+  summary: t,
+  secondaryActions: r,
+  actions: s,
+  sticky: i,
+  align: e = "between",
+  children: m,
+  ...n
+}) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      "data-slot": "action-bar",
+      className: f(
+        "flex flex-col gap-3 rounded-lg border border-border bg-card p-3 shadow-sm sm:flex-row sm:items-center",
+        e === "between" && "sm:justify-between",
+        e === "start" && "sm:justify-start",
+        e === "end" && "sm:justify-end",
+        i && "sticky bottom-4 z-20",
+        d
+      ),
+      ...n,
+      children: [
+        (t || m) && /* @__PURE__ */ a("div", { className: "min-w-0 flex-1 text-sm text-muted-foreground", children: t ?? m }),
+        (r || s) && /* @__PURE__ */ o("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: [
+          r,
+          s
+        ] })
+      ]
+    }
+  );
+}
+export {
+  x as ActionBar
+};

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface ActionCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    action?: React.ReactNode;
+    secondaryAction?: React.ReactNode;
+    tone?: 'default' | 'primary' | 'muted';
+}
+declare function ActionCard({ className, title, description, icon: Icon, action, secondaryAction, tone, children, ...props }: ActionCardProps): import("react/jsx-runtime").JSX.Element;
+export { ActionCard };

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

@@ -0,0 +1,35 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { cn as f } from "../../../../lib/utils.js";
+import { Card as o, CardContent as p } from "../../data-display/card/card.js";
+import { TitleHelp as x } from "../../feedback/title-help/title-help.js";
+function y({ className: t, title: l, description: c, icon: i, action: a, secondaryAction: s, tone: m = "default", children: d, ...n }) {
+  return /* @__PURE__ */ e(
+    o,
+    {
+      "data-slot": "action-card",
+      className: f(
+        "card-surface",
+        m === "primary" && "border-primary/30 bg-primary/5",
+        m === "muted" && "bg-muted/50",
+        t
+      ),
+      ...n,
+      children: /* @__PURE__ */ r(p, { className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between", children: [
+        /* @__PURE__ */ r("div", { className: "flex min-w-0 items-center gap-3", children: [
+          i && /* @__PURE__ */ e("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: /* @__PURE__ */ e(i, { className: "size-5" }) }),
+          /* @__PURE__ */ r("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ e("div", { className: "font-medium text-foreground", children: /* @__PURE__ */ e(x, { help: c, children: l }) }),
+            d
+          ] })
+        ] }),
+        (a || s) && /* @__PURE__ */ r("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: [
+          s,
+          a
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  y as ActionCard
+};

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export interface ActivityFeedItem {
+    id: React.Key;
+    actor: React.ReactNode;
+    action: React.ReactNode;
+    time?: React.ReactNode;
+    description?: React.ReactNode;
+    avatarSrc?: string;
+    avatarFallback?: string;
+    meta?: React.ReactNode;
+}
+export interface ActivityFeedProps extends React.HTMLAttributes<HTMLDivElement> {
+    items: ActivityFeedItem[];
+    renderItem?: (item: ActivityFeedItem) => React.ReactNode;
+}
+declare function ActivityFeed({ className, items, renderItem, ...props }: ActivityFeedProps): import("react/jsx-runtime").JSX.Element;
+export { ActivityFeed };

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

@@ -0,0 +1,26 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import * as l from "react";
+import { cn as i } from "../../../../lib/utils.js";
+import { Avatar as n, AvatarImage as o, AvatarFallback as m } from "../../data-display/avatar/avatar.js";
+function v({ className: t, items: s, renderItem: d, ...c }) {
+  return /* @__PURE__ */ e("div", { "data-slot": "activity-feed", className: i("divide-y divide-border rounded-lg border border-border bg-card", t), ...c, children: s.map(
+    (a) => d ? /* @__PURE__ */ e(l.Fragment, { children: d(a) }, a.id) : /* @__PURE__ */ r("div", { className: "flex items-start gap-3 p-4", children: [
+      /* @__PURE__ */ r(n, { className: "size-9", children: [
+        a.avatarSrc && /* @__PURE__ */ e(o, { src: a.avatarSrc, alt: "" }),
+        /* @__PURE__ */ e(m, { children: a.avatarFallback ?? "DK" })
+      ] }),
+      /* @__PURE__ */ r("div", { className: "min-w-0 flex-1 space-y-1", children: [
+        /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center gap-x-1 gap-y-0.5 text-sm", children: [
+          /* @__PURE__ */ e("span", { className: "font-medium text-foreground", children: a.actor }),
+          /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: a.action }),
+          a.time && /* @__PURE__ */ e("span", { className: "ml-auto text-xs text-muted-foreground", children: a.time })
+        ] }),
+        a.description && /* @__PURE__ */ e("div", { className: "text-sm leading-relaxed text-muted-foreground", children: a.description }),
+        a.meta && /* @__PURE__ */ e("div", { className: "text-xs text-muted-foreground", children: a.meta })
+      ] })
+    ] }, a.id)
+  ) });
+}
+export {
+  v as ActivityFeed
+};

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export type AlertCardSeverity = 'info' | 'success' | 'warning' | 'destructive';
+export interface AlertCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    severity?: AlertCardSeverity;
+    actions?: React.ReactNode;
+}
+declare function AlertCard({ className, title, description, severity, actions, children, ...props }: AlertCardProps): import("react/jsx-runtime").JSX.Element;
+export { AlertCard };

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

@@ -0,0 +1,37 @@
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { AlertCircle as d, TriangleAlert as v, CheckCircle2 as f, Info as g } from "lucide-react";
+import { cn as u } from "../../../../lib/utils.js";
+import { Card as x, CardContent as N } from "../../data-display/card/card.js";
+const p = {
+  info: {
+    icon: g,
+    className: "border-primary/25 bg-primary/5 text-primary"
+  },
+  success: {
+    icon: f,
+    className: "border-[var(--color-success-soft,var(--color-green-200))] bg-[var(--color-success-soft,var(--color-green-50))] text-[var(--color-success-accent,var(--color-green-700))]"
+  },
+  warning: {
+    icon: v,
+    className: "border-[var(--color-warning-soft,var(--color-yellow-200))] bg-[var(--color-warning-soft,var(--color-yellow-50))] text-[var(--color-warning-accent,var(--color-yellow-700))]"
+  },
+  destructive: {
+    icon: d,
+    className: "border-destructive/20 bg-destructive/5 text-destructive"
+  }
+};
+function C({ className: s, title: t, description: e, severity: l = "info", actions: o, children: n, ...i }) {
+  const c = p[l], m = c.icon;
+  return /* @__PURE__ */ r(x, { "data-slot": "alert-card", className: u("border", c.className, s), ...i, children: /* @__PURE__ */ a(N, { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ r(m, { className: "mt-0.5 size-5 shrink-0" }),
+    /* @__PURE__ */ a("div", { className: "min-w-0 flex-1 space-y-1", children: [
+      /* @__PURE__ */ r("div", { className: "font-medium text-foreground", children: t }),
+      e && /* @__PURE__ */ r("div", { className: "text-sm leading-relaxed text-muted-foreground", children: e }),
+      n
+    ] }),
+    o && /* @__PURE__ */ r("div", { className: "flex shrink-0 items-center gap-2", children: o })
+  ] }) });
+}
+export {
+  C as AlertCard
+};

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

@@ -0,0 +1,51 @@
+import * as React from 'react';
+export type ApprovalFlowStatus = 'started' | 'approved' | 'processing' | 'pending' | 'rejected';
+export interface ApprovalFlowTab {
+    value: string;
+    label: React.ReactNode;
+    count?: React.ReactNode;
+}
+export interface ApprovalFlowParticipant {
+    id: React.Key;
+    name: React.ReactNode;
+    avatarSrc?: string;
+    avatarFallback?: React.ReactNode;
+    avatarAlt?: string;
+}
+export interface ApprovalFlowItem {
+    id: React.Key;
+    actor: React.ReactNode;
+    time?: React.ReactNode;
+    avatarSrc?: string;
+    avatarFallback?: React.ReactNode;
+    status?: ApprovalFlowStatus;
+    statusLabel?: React.ReactNode;
+    comment?: React.ReactNode;
+    rule?: React.ReactNode;
+    participants?: ApprovalFlowParticipant[];
+}
+export interface ApprovalFlowProps extends React.HTMLAttributes<HTMLDivElement> {
+    tabs?: ApprovalFlowTab[];
+    activeTab?: string;
+    defaultActiveTab?: string;
+    onTabChange?: (value: string) => void;
+    items?: ApprovalFlowItem[];
+    renderItem?: (item: ApprovalFlowItem, index: number) => React.ReactNode;
+    listClassName?: string;
+    empty?: React.ReactNode;
+}
+export interface ApprovalFlowStepProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    actor: React.ReactNode;
+    time?: React.ReactNode;
+    avatarSrc?: string;
+    avatarFallback?: React.ReactNode;
+    status?: ApprovalFlowStatus;
+    statusLabel?: React.ReactNode;
+    comment?: React.ReactNode;
+    rule?: React.ReactNode;
+    participants?: ApprovalFlowParticipant[];
+    isLast?: boolean;
+}
+declare function ApprovalFlow({ className, tabs, activeTab, defaultActiveTab, onTabChange, items, renderItem, listClassName, empty, children, ...props }: ApprovalFlowProps): import("react/jsx-runtime").JSX.Element;
+declare function ApprovalFlowStep({ className, actor, time, avatarSrc, avatarFallback, status, statusLabel, comment, rule, participants, isLast, ...props }: ApprovalFlowStepProps): import("react/jsx-runtime").JSX.Element;
+export { ApprovalFlow, ApprovalFlowStep };

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

@@ -0,0 +1,185 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import * as w from "react";
+import { X as z, Clock3 as C, Check as k } from "lucide-react";
+import { cn as d } from "../../../../lib/utils.js";
+import { Avatar as y, AvatarImage as A, AvatarFallback as F, AvatarIndicator as j } from "../../data-display/avatar/avatar.js";
+import { Badge as S } from "../../data-display/badge/badge.js";
+const U = {
+  started: {
+    label: "发起审批",
+    textClassName: "text-success",
+    indicatorClassName: "bg-success text-success-foreground",
+    Icon: k
+  },
+  approved: {
+    label: "已通过",
+    textClassName: "text-success",
+    indicatorClassName: "bg-success text-success-foreground",
+    Icon: k
+  },
+  processing: {
+    label: "审批中",
+    textClassName: "text-warning",
+    indicatorClassName: "bg-warning text-warning-foreground",
+    Icon: C
+  },
+  pending: {
+    label: "待审批",
+    textClassName: "text-muted-foreground",
+    indicatorClassName: "bg-muted text-muted-foreground",
+    Icon: C
+  },
+  rejected: {
+    label: "已拒绝",
+    textClassName: "text-destructive",
+    indicatorClassName: "bg-destructive text-destructive-foreground",
+    Icon: z
+  }
+};
+function D({
+  className: s,
+  tabs: t,
+  activeTab: c,
+  defaultActiveTab: a,
+  onTabChange: n,
+  items: m = [],
+  renderItem: x,
+  listClassName: g,
+  empty: f,
+  children: o,
+  ...p
+}) {
+  const [h, i] = w.useState(() => a ?? t?.[0]?.value), v = c ?? h;
+  function r(u) {
+    i(u), n?.(u);
+  }
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      "data-slot": "approval-flow",
+      className: d(
+        "flex w-full flex-col gap-[var(--dk-card-inner-gap)] bg-card p-[var(--dk-card-padding)] text-card-foreground",
+        s
+      ),
+      ...p,
+      children: [
+        t && t.length > 0 && /* @__PURE__ */ e(B, { tabs: t, activeTab: v, onTabChange: r }),
+        /* @__PURE__ */ l("div", { "data-slot": "approval-flow-list", className: d("flex min-w-0 flex-col", g), children: [
+          o,
+          !o && m.map((u, b) => {
+            const { id: N, ...T } = u;
+            return x ? /* @__PURE__ */ e(w.Fragment, { children: x(u, b) }, N) : /* @__PURE__ */ e(M, { ...T, isLast: b === m.length - 1 }, N);
+          })
+        ] }),
+        !o && m.length === 0 && /* @__PURE__ */ e("div", { className: "rounded-[var(--dk-radius-control)] bg-muted p-4 text-center text-sm text-muted-foreground", children: f ?? "暂无审批记录" })
+      ]
+    }
+  );
+}
+function B({
+  tabs: s,
+  activeTab: t,
+  onTabChange: c
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": "审批分类",
+      className: "flex min-h-12 w-full items-center gap-5 overflow-x-auto border-b border-border bg-card",
+      children: s.map((a) => {
+        const n = a.value === t;
+        return /* @__PURE__ */ l(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": n,
+            onClick: () => c(a.value),
+            className: d(
+              "relative flex h-12 shrink-0 items-center gap-1 text-sm leading-[22px] transition-colors",
+              n ? "font-medium text-foreground" : "font-normal text-muted-foreground hover:text-primary"
+            ),
+            children: [
+              /* @__PURE__ */ e("span", { children: a.label }),
+              a.count !== void 0 && /* @__PURE__ */ e(S, { variant: "primary", appearance: "light", size: "xs", shape: "circle", children: a.count }),
+              n && /* @__PURE__ */ e("span", { className: "absolute inset-x-0 bottom-0 h-0.5 bg-primary" })
+            ]
+          },
+          a.value
+        );
+      })
+    }
+  );
+}
+function M({
+  className: s,
+  actor: t,
+  time: c,
+  avatarSrc: a,
+  avatarFallback: n,
+  status: m = "pending",
+  statusLabel: x,
+  comment: g,
+  rule: f,
+  participants: o,
+  isLast: p = !1,
+  ...h
+}) {
+  const i = U[m], v = i.Icon;
+  return /* @__PURE__ */ l("div", { "data-slot": "approval-flow-step", className: d("flex min-w-0 gap-2", s), ...h, children: [
+    /* @__PURE__ */ l("div", { className: "flex shrink-0 flex-col items-center self-stretch", children: [
+      /* @__PURE__ */ l(y, { className: "size-11", children: [
+        a && /* @__PURE__ */ e(A, { src: a, alt: typeof t == "string" ? t : "" }),
+        /* @__PURE__ */ e(F, { className: "border-card bg-primary text-base text-primary-foreground", children: n ?? I(t) }),
+        /* @__PURE__ */ e(
+          j,
+          {
+            className: d(
+              "-bottom-0.5 -right-0.5 size-4 rounded-full border border-card",
+              i.indicatorClassName
+            ),
+            children: /* @__PURE__ */ e(v, { className: "size-2.5", strokeWidth: 3 })
+          }
+        )
+      ] }),
+      !p && /* @__PURE__ */ e("div", { "data-slot": "approval-flow-line", className: "mt-1 min-h-8 w-px flex-1 bg-border" })
+    ] }),
+    /* @__PURE__ */ l("div", { "data-slot": "approval-flow-step-content", className: d("min-w-0 flex-1", !p && "pb-8"), children: [
+      /* @__PURE__ */ l("div", { className: "flex min-w-0 items-center justify-between gap-3", children: [
+        /* @__PURE__ */ e("div", { className: "min-w-0 truncate text-sm font-medium leading-[22px] text-foreground", children: t }),
+        c && /* @__PURE__ */ e("time", { className: "shrink-0 text-xs leading-5 text-muted-foreground", children: c })
+      ] }),
+      /* @__PURE__ */ e("div", { className: d("truncate text-[13px] leading-[22px]", i.textClassName), children: x ?? i.label }),
+      f && /* @__PURE__ */ e("div", { className: "truncate text-[13px] leading-[22px] text-muted-foreground", children: f }),
+      o && o.length > 0 && /* @__PURE__ */ e("div", { className: "mt-1 flex min-w-0 gap-1 overflow-x-auto", children: o.map((r) => /* @__PURE__ */ l(
+        "span",
+        {
+          className: "inline-flex h-6 max-w-40 shrink-0 items-center gap-1 rounded-full bg-muted px-1.5 text-[13px] leading-[22px] text-foreground",
+          children: [
+            /* @__PURE__ */ l(y, { className: "size-3.5", children: [
+              r.avatarSrc && /* @__PURE__ */ e(
+                A,
+                {
+                  src: r.avatarSrc,
+                  alt: r.avatarAlt ?? (typeof r.name == "string" ? r.name : "")
+                }
+              ),
+              /* @__PURE__ */ e(F, { className: "border-0 bg-card text-[10px] text-muted-foreground", children: r.avatarFallback ?? I(r.name) })
+            ] }),
+            /* @__PURE__ */ e("span", { className: "truncate", children: r.name })
+          ]
+        },
+        r.id
+      )) }),
+      g && /* @__PURE__ */ e("div", { className: "mt-1 rounded-[var(--dk-radius-control)] bg-muted p-2 text-[13px] leading-[22px] text-muted-foreground", children: g })
+    ] })
+  ] });
+}
+function I(s) {
+  return typeof s == "string" && s.trim().length > 0 ? s.trim().slice(0, 1).toUpperCase() : "F";
+}
+export {
+  D as ApprovalFlow,
+  M as ApprovalFlowStep
+};

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+export interface AuthShellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    brand?: React.ReactNode;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    aside?: React.ReactNode;
+    footer?: React.ReactNode;
+}
+declare function AuthShell({ className, brand, title, description, aside, footer, children, ...props }: AuthShellProps): import("react/jsx-runtime").JSX.Element;
+export { AuthShell };