kaleido-ui 0.2.1 → 0.2.4

package/dist/web/chunk-QXCCUYNY.js

@@ -0,0 +1,232 @@
+"use client";
+import {
+  ChartFrame,
+  ChartLegend,
+  ChartTooltip,
+  TICK_FONT,
+  axisTextWidth,
+  chartLabelIndices,
+  chartValueTicks,
+  defaultChartFormat,
+  nextActiveIndex,
+  plotClass,
+  seriesColor,
+  tooltipText,
+  useChartWidth,
+  useSeriesVisibility
+} from "./chunk-EK5N3ZPW.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/charts/line-chart.tsx
+import { useId, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MARGIN = { top: 12, right: 16, bottom: 26, left: 8 };
+function LineChart({
+  data,
+  series: allSeries,
+  label,
+  scaleLabel,
+  area = false,
+  integer = false,
+  formatValue = defaultChartFormat,
+  height = 240,
+  empty,
+  className,
+  ...head
+}) {
+  const [containerRef, width] = useChartWidth();
+  const [active, setActive] = useState(null);
+  const idBase = `line-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const visibility = useSeriesVisibility(allSeries.map((s) => s.id));
+  const series = allSeries.filter((s) => visibility.isVisible(s.id));
+  const slotOf = (id) => allSeries.findIndex((s) => s.id === id);
+  const count = data.length;
+  if (count === 0 || series.length === 0) return /* @__PURE__ */ jsx(Fragment, { children: empty ?? null });
+  const max = Math.max(0, ...data.flatMap((d) => series.map((s) => d.values[s.id] ?? 0)));
+  const ticks = chartValueTicks(max, { integer });
+  const tickLabels = ticks.map(formatValue);
+  const plotLeft = MARGIN.left + axisTextWidth(tickLabels) + 8;
+  const plotRight = width - MARGIN.right;
+  const plotTop = MARGIN.top;
+  const plotBottom = height - MARGIN.bottom;
+  const plotWidth = Math.max(1, plotRight - plotLeft);
+  const plotHeight = Math.max(1, plotBottom - plotTop);
+  const top = max > 0 ? max : 1;
+  const x = (index) => count === 1 ? plotLeft + plotWidth / 2 : plotLeft + index / (count - 1) * plotWidth;
+  const y = (value) => plotBottom - Math.max(0, value) / top * plotHeight;
+  const labelIndices = chartLabelIndices(count, plotWidth / 72);
+  const showArea = area && series.length === 1;
+  const pathFor = (id) => data.map((d, index) => `${index === 0 ? "M" : "L"}${x(index).toFixed(2)},${y(d.values[id] ?? 0).toFixed(2)}`).join("");
+  const rowsAt = (index) => series.map((s, slot) => ({
+    id: s.id,
+    label: s.label,
+    value: formatValue(data[index].values[s.id] ?? 0),
+    color: seriesColor(slotOf(s.id))
+  }));
+  const onPointerMove = (event) => {
+    const box = event.currentTarget.getBoundingClientRect();
+    const px = (event.clientX - box.left) / box.width * width;
+    const ratio = count === 1 ? 0 : (px - plotLeft) / plotWidth;
+    setActive(Math.max(0, Math.min(count - 1, Math.round(ratio * (count - 1)))));
+  };
+  const onKeyDown = (event) => {
+    if (nextActiveIndex(event.key, active, count) === void 0) return;
+    event.preventDefault();
+    setActive((current) => {
+      const next = nextActiveIndex(event.key, current, count);
+      return next === void 0 ? current : next;
+    });
+  };
+  const activeDatum = active === null ? null : data[active];
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      ...head,
+      label,
+      className,
+      scale: `${scaleLabel} \xB7 linear, from 0`,
+      legend: allSeries.length > 1 ? /* @__PURE__ */ jsx(
+        ChartLegend,
+        {
+          keyShape: "line",
+          items: allSeries.map((s, slot) => ({ id: s.id, label: s.label, color: seriesColor(slot) })),
+          ...visibility.legend
+        }
+      ) : void 0,
+      table: {
+        columns: ["Period", ...series.map((s) => s.label)],
+        rows: data.map((d) => [d.detail ?? d.label, ...series.map((s) => formatValue(d.values[s.id] ?? 0))])
+      },
+      announcement: activeDatum ? tooltipText(activeDatum.detail ?? activeDatum.label, rowsAt(active)) : void 0,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: containerRef,
+          role: "group",
+          "aria-roledescription": "chart",
+          "aria-label": `${label}: ${count} points. Arrow keys move between them.`,
+          tabIndex: 0,
+          onKeyDown,
+          onBlur: () => setActive(null),
+          className: plotClass,
+          children: [
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                width: "100%",
+                height,
+                viewBox: `0 0 ${width} ${height}`,
+                className: "block overflow-visible",
+                "aria-hidden": "true",
+                onPointerMove,
+                onPointerLeave: () => setActive(null),
+                children: [
+                  showArea && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: `${idBase}-wash`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+                    /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: seriesColor(0), stopOpacity: "0.14" }),
+                    /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: seriesColor(0), stopOpacity: "0.04" })
+                  ] }) }),
+                  /* @__PURE__ */ jsx("g", { "data-slot": "chart-y-axis", children: ticks.map((tick, index) => /* @__PURE__ */ jsxs("g", { children: [
+                    /* @__PURE__ */ jsx("line", { x1: plotLeft, x2: plotRight, y1: y(tick), y2: y(tick), stroke: "var(--border)" }),
+                    /* @__PURE__ */ jsx(
+                      "text",
+                      {
+                        x: plotLeft - 8,
+                        y: y(tick),
+                        dy: "0.32em",
+                        textAnchor: "end",
+                        fontSize: TICK_FONT,
+                        fill: "var(--muted-foreground)",
+                        style: { fontVariantNumeric: "tabular-nums" },
+                        children: tickLabels[index]
+                      }
+                    )
+                  ] }, tick)) }),
+                  showArea && /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      "data-slot": "chart-area",
+                      d: `${pathFor(series[0].id)}L${x(count - 1)},${plotBottom}L${x(0)},${plotBottom}Z`,
+                      fill: `url(#${idBase}-wash)`
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("g", { "data-slot": "chart-lines", children: series.map((s, slot) => /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      "data-series": s.id,
+                      d: pathFor(s.id),
+                      fill: "none",
+                      stroke: seriesColor(slotOf(s.id)),
+                      strokeWidth: 2,
+                      strokeLinejoin: "round",
+                      strokeLinecap: "round"
+                    },
+                    s.id
+                  )) }),
+                  /* @__PURE__ */ jsx("g", { "data-slot": "chart-end-markers", children: series.map((s, slot) => /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: x(count - 1),
+                      cy: y(data[count - 1].values[s.id] ?? 0),
+                      r: 4,
+                      fill: seriesColor(slotOf(s.id)),
+                      stroke: "var(--card)",
+                      strokeWidth: 2
+                    },
+                    s.id
+                  )) }),
+                  active !== null && /* @__PURE__ */ jsxs("g", { "data-slot": "chart-crosshair", children: [
+                    /* @__PURE__ */ jsx("line", { x1: x(active), x2: x(active), y1: plotTop, y2: plotBottom, stroke: "var(--muted-foreground)", strokeWidth: 1 }),
+                    series.map((s, slot) => /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        cx: x(active),
+                        cy: y(data[active].values[s.id] ?? 0),
+                        r: 4,
+                        fill: seriesColor(slotOf(s.id)),
+                        stroke: "var(--card)",
+                        strokeWidth: 2
+                      },
+                      s.id
+                    ))
+                  ] }),
+                  /* @__PURE__ */ jsx("g", { "data-slot": "chart-x-axis", children: labelIndices.map((index) => /* @__PURE__ */ jsx(
+                    "text",
+                    {
+                      x: x(index),
+                      y: plotBottom + 18,
+                      textAnchor: index === 0 && count > 1 ? "start" : index === count - 1 && count > 1 ? "end" : "middle",
+                      fontSize: TICK_FONT,
+                      fill: "var(--muted-foreground)",
+                      children: data[index].label
+                    },
+                    data[index].key
+                  )) })
+                ]
+              }
+            ),
+            activeDatum && /* @__PURE__ */ jsx(
+              ChartTooltip,
+              {
+                title: activeDatum.detail ?? activeDatum.label,
+                rows: rowsAt(active),
+                x: x(active) * (containerRef.current ? containerRef.current.clientWidth / width : 1),
+                y: plotTop,
+                width: containerRef.current?.clientWidth ?? width
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function AreaChart(props) {
+  return /* @__PURE__ */ jsx(LineChart, { ...props, area: true, className: cn(props.className) });
+}
+
+export {
+  LineChart,
+  AreaChart
+};

package/dist/web/chunk-QXZ2WY3B.js

@@ -0,0 +1,38 @@
+"use client";
+import {
+  Switch
+} from "./chunk-QRFFLA3N.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/switch-row.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SwitchRow({
+  label,
+  description,
+  checked,
+  disabled,
+  onCheckedChange,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-start justify-between gap-3 rounded-xl bg-muted/40 p-3 shadow-raised transition-colors hover-gradient-violet", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-body font-medium text-foreground", children: label }),
+      description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-caption leading-snug text-muted-foreground", children: description })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Switch,
+      {
+        checked,
+        disabled,
+        onCheckedChange,
+        "aria-label": label
+      }
+    )
+  ] });
+}
+
+export {
+  SwitchRow
+};

package/dist/web/chunk-R2MV4S4U.js

@@ -0,0 +1,50 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/notice-bar.tsx
+import { useEffect, useLayoutEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function NoticeBar({ children, hidden = false, heightVariable = "--kui-notice-height", className }) {
+  const ref = useRef(null);
+  useIsomorphicLayoutEffect(() => {
+    const element = ref.current;
+    const root = typeof document === "undefined" ? null : document.documentElement;
+    if (!root) return;
+    if (hidden || !element) {
+      root.style.removeProperty(heightVariable);
+      return;
+    }
+    const publish = () => root.style.setProperty(heightVariable, `${Math.round(element.getBoundingClientRect().height)}px`);
+    publish();
+    let cleanup;
+    if (typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver(publish);
+      observer.observe(element);
+      cleanup = () => observer.disconnect();
+    } else {
+      window.addEventListener("resize", publish);
+      cleanup = () => window.removeEventListener("resize", publish);
+    }
+    return () => {
+      cleanup();
+      root.style.removeProperty(heightVariable);
+    };
+  }, [hidden, heightVariable]);
+  if (hidden) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "notice-bar",
+      className: cn("fixed inset-x-0 top-0 z-[var(--z-popover)] bg-background/90 bg-gradient-card px-4 py-2 shadow-raised backdrop-blur-xl backdrop-saturate-150", className),
+      children
+    }
+  );
+}
+
+export {
+  NoticeBar
+};

package/dist/web/chunk-R3IIXFGK.js

@@ -0,0 +1,48 @@
+"use client";
+import {
+  TabsList,
+  TabsTrigger
+} from "./chunk-ZR32WYJA.js";
+import {
+  AppIcon
+} from "./chunk-PS7Q6MMU.js";
+
+// src/web/components/activity-type-tabs.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ActivityTypeTabs({ counts = {} }) {
+  const actions = [
+    { value: "all", label: "All" },
+    { value: "received", label: "In", icon: "receive", actionIcon: "call_received" },
+    { value: "sent", label: "Out", icon: "send", actionIcon: "arrow_outward" },
+    { value: "swaps", label: "Swap", icon: "swap", actionIcon: "swap_horiz" }
+  ];
+  return /* @__PURE__ */ jsx(TabsList, { className: "grid h-12 w-full grid-cols-4 gap-1 rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-1 shadow-card", children: actions.map((action) => /* @__PURE__ */ jsxs(
+    TabsTrigger,
+    {
+      value: action.value,
+      "data-action-icon": action.actionIcon,
+      className: "group h-full rounded-xl px-1.5 text-caption font-bold tracking-wide text-muted-foreground transition-all hover-gradient-violet hover:text-secondary-content data-[state=active]:bg-primary active-gradient-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-button-primary data-[state=active]:hover:bg-primary data-[state=active]:hover:text-primary-foreground",
+      children: [
+        action.icon && /* @__PURE__ */ jsx(
+          AppIcon,
+          {
+            name: action.icon,
+            size: "sm",
+            className: "mr-1 shrink-0 leading-none text-muted-foreground transition-colors group-hover:text-secondary-content group-data-[state=active]:text-primary-foreground"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { children: action.label }),
+        action.value === "all" && counts.all ? /* @__PURE__ */ jsxs("span", { className: "ml-1", children: [
+          "(",
+          counts.all,
+          ")"
+        ] }) : null
+      ]
+    },
+    action.value
+  )) });
+}
+
+export {
+  ActivityTypeTabs
+};

package/dist/web/chunk-RIOY4LFJ.js

@@ -0,0 +1,141 @@
+"use client";
+import {
+  Icon
+} from "./chunk-A6MSV4MA.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/bottom-nav.tsx
+import { useLayoutEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function BottomNav({
+  activeView,
+  items,
+  onChange,
+  position = "fixed",
+  className
+}) {
+  const trackRef = useRef(null);
+  const blobRef = useRef(null);
+  const buttonRefs = useRef(/* @__PURE__ */ new Map());
+  const placed = useRef(null);
+  useLayoutEffect(() => {
+    const blob = blobRef.current;
+    const button = activeView !== void 0 ? buttonRefs.current.get(activeView) : void 0;
+    if (!blob) return;
+    if (!button) {
+      blob.style.opacity = "0";
+      placed.current = null;
+      return;
+    }
+    const to = { x: button.offsetLeft, w: button.offsetWidth };
+    const from = placed.current;
+    blob.style.opacity = "1";
+    blob.style.width = `${to.w}px`;
+    blob.style.transform = `translateX(${to.x}px)`;
+    placed.current = to;
+    const reduce = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    if (!from || reduce || from.x === to.x && from.w === to.w) return;
+    if (typeof blob.animate !== "function") return;
+    const frame = (center, width, scaleY = 1) => `translateX(${center - width / 2}px) scaleY(${scaleY})`;
+    const fromC = from.x + from.w / 2;
+    const toC = to.x + to.w / 2;
+    const midC = (fromC + toC) / 2;
+    const pinched = Math.min(from.w, to.w) * 0.68;
+    const swollen = to.w * 1.08;
+    blob.animate(
+      [
+        { transform: frame(fromC, from.w), width: `${from.w}px`, offset: 0 },
+        { transform: frame(midC, pinched, 0.72), width: `${pinched}px`, offset: 0.45, easing: "cubic-bezier(0.2, 0.8, 0.3, 1)" },
+        { transform: frame(toC, swollen, 1.04), width: `${swollen}px`, offset: 0.78, easing: "ease-out" },
+        { transform: frame(toC, to.w), width: `${to.w}px`, offset: 1 }
+      ],
+      { duration: 560, easing: "cubic-bezier(0.45, 0, 0.25, 1)" }
+    );
+  }, [activeView, items.length]);
+  useLayoutEffect(() => {
+    const track = trackRef.current;
+    if (!track || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      const blob = blobRef.current;
+      const button = activeView !== void 0 ? buttonRefs.current.get(activeView) : void 0;
+      if (!blob || !button) return;
+      blob.style.width = `${button.offsetWidth}px`;
+      blob.style.transform = `translateX(${button.offsetLeft}px)`;
+      placed.current = { x: button.offsetLeft, w: button.offsetWidth };
+    });
+    observer.observe(track);
+    return () => observer.disconnect();
+  }, [activeView]);
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      className: cn(
+        "w-[90%] max-w-[21.25rem] rounded-full bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card shadow-card-secondary",
+        position === "fixed" ? "fixed bottom-6 left-1/2 z-[var(--z-nav)] -translate-x-1/2" : "relative",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { ref: trackRef, className: "relative flex items-center justify-around px-0 py-2", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            ref: blobRef,
+            "aria-hidden": true,
+            className: "pointer-events-none absolute left-0 top-2 h-[3.25rem] rounded-full bg-primary bg-gradient-primary opacity-0 shadow-button-primary"
+          }
+        ),
+        items.map(({ id, label, icon, iconName, testId }) => {
+          const isActive = activeView === id;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref: (node) => {
+                if (node) buttonRefs.current.set(id, node);
+                else buttonRefs.current.delete(id);
+              },
+              type: "button",
+              onClick: () => onChange(id),
+              "data-testid": testId ?? `bottom-nav-${id}`,
+              className: cn(
+                "relative z-10 flex h-[3.25rem] w-[4rem] flex-col items-center justify-center rounded-full transition-all duration-300",
+                isActive ? "text-primary-foreground" : "text-muted-foreground hover-gradient-violet hover:text-secondary-content active:scale-95"
+              ),
+              children: [
+                iconName ? /* @__PURE__ */ jsxs("div", { className: "relative size-icon-nav", children: [
+                  /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      name: iconName,
+                      className: cn(
+                        "absolute inset-0 size-icon-nav transition-all duration-300",
+                        isActive ? "opacity-0 scale-75" : "opacity-100 scale-100"
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      name: iconName,
+                      filled: true,
+                      className: cn(
+                        "absolute inset-0 size-icon-nav transition-all duration-300",
+                        isActive ? "opacity-100 scale-100" : "opacity-0 scale-75"
+                      )
+                    }
+                  )
+                ] }) : icon ?? null,
+                /* @__PURE__ */ jsx("span", { className: "mt-0.5 max-w-full truncate text-xxs font-semibold leading-none transition-colors duration-300", children: label })
+              ]
+            },
+            id
+          );
+        })
+      ] })
+    }
+  );
+}
+
+export {
+  BottomNav
+};

package/dist/web/chunk-RV7Z3B3V.js

@@ -0,0 +1,106 @@
+"use client";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  Check,
+  Close,
+  Help
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/swap-step-list.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultStatusLabels = {
+  done: "Done",
+  active: "In progress",
+  pending: "To do",
+  failed: "Failed",
+  unknown: "Cannot be checked"
+};
+var dotClass = {
+  done: "bg-primary bg-gradient-primary text-background shadow-glow-primary-soft",
+  active: "bg-secondary bg-gradient-brand text-white shadow-glow-violet",
+  pending: "bg-secondary/15 text-secondary-content ring-1 ring-inset ring-secondary/25",
+  failed: "bg-danger/20 text-danger-fg",
+  unknown: "bg-foreground/8 text-muted-foreground ring-1 ring-inset ring-foreground/10"
+};
+var labelClass = {
+  done: "text-foreground",
+  active: "text-foreground",
+  pending: "text-muted-foreground",
+  failed: "text-danger-fg",
+  unknown: "text-foreground"
+};
+function SwapStepList({ steps, connector = true, statusLabels, className }) {
+  const labels = { ...defaultStatusLabels, ...statusLabels };
+  return (
+    // A checklist's items stand alone, so a hairline rule separates them where
+    // a flow has its rail.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "swap-step-list",
+        className: cn("flex flex-col", !connector && "divide-y divide-divider/35", className),
+        children: steps.map((step, index) => {
+          const isLast = index === steps.length - 1;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-slot": "swap-step",
+              "data-status": step.status,
+              className: cn("flex gap-3", !connector && "py-3 first:pt-0 last:pb-0"),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex w-5 shrink-0 flex-col items-center", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      className: cn(
+                        "flex size-5 items-center justify-center rounded-full text-xxs font-bold",
+                        dotClass[step.status],
+                        step.status === "active" && "animate-pulse"
+                      ),
+                      children: step.status === "done" ? /* @__PURE__ */ jsx(IconGlyph, { glyph: Check, className: "text-icon-sm" }) : step.status === "failed" ? /* @__PURE__ */ jsx(IconGlyph, { glyph: Close, className: "text-icon-sm" }) : step.status === "unknown" ? /* @__PURE__ */ jsx(IconGlyph, { glyph: Help, className: "text-icon-sm" }) : index + 1
+                    }
+                  ),
+                  connector && !isLast && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      className: cn(
+                        "mt-1 w-0.5 flex-1",
+                        step.status === "done" ? "bg-primary/60" : step.status === "active" ? "bg-secondary/40" : "bg-secondary/15"
+                      )
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: cn("min-w-0 flex-1", connector && !isLast ? "pb-4" : "pb-0"), children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                    /* @__PURE__ */ jsxs("p", { className: cn("text-body font-medium", labelClass[step.status]), children: [
+                      /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                        labels[step.status],
+                        ": "
+                      ] }),
+                      step.label
+                    ] }),
+                    step.badges
+                  ] }),
+                  step.description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-caption leading-snug text-muted-foreground", children: step.description }),
+                  step.action && /* @__PURE__ */ jsx("div", { className: "mt-2", children: step.action })
+                ] })
+              ]
+            },
+            step.id
+          );
+        })
+      }
+    )
+  );
+}
+
+export {
+  SwapStepList
+};

package/dist/web/chunk-RXXYUYBP.js

@@ -0,0 +1,25 @@
+"use client";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/section-header.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SectionHeader({
+  children,
+  right,
+  as: Tag = "h2",
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between gap-3 px-1", className), children: [
+    /* @__PURE__ */ jsx(Tag, { className: cn("text-muted-foreground", eyebrow), children }),
+    right
+  ] });
+}
+
+export {
+  SectionHeader
+};