kaleido-ui 0.2.1 → 0.2.4

package/dist/web/chunk-DNHRMPKI.js

@@ -0,0 +1,63 @@
+"use client";
+import {
+  DottedLeader
+} from "./chunk-CXMCWSWC.js";
+import {
+  CopyButton
+} from "./chunk-QCQRA6L5.js";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  Check,
+  ContentCopy
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/activity-detail-row.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ActivityDetailRow({
+  label,
+  value,
+  fullValue,
+  copyValue,
+  onCopy,
+  isCopied
+}) {
+  return (
+    // min-h-8 equalizes text-only rows with taller value content (badges,
+    // pills) so the label-to-label rhythm stays uniform down the list.
+    /* @__PURE__ */ jsxs("div", { className: "flex min-h-8 items-center gap-3 py-1 last:pb-0", children: [
+      /* @__PURE__ */ jsx("span", { className: cn("shrink-0 text-muted-foreground", eyebrow), children: label }),
+      /* @__PURE__ */ jsx(DottedLeader, {}),
+      /* @__PURE__ */ jsxs("div", { className: "flex max-w-[65%] items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate font-mono text-caption font-medium text-foreground/90", children: value }),
+        onCopy && /* @__PURE__ */ jsx(
+          GlyphButton,
+          {
+            icon: isCopied ? Check : ContentCopy,
+            label: `Copy ${label.toLowerCase()}`,
+            title: fullValue ? `Copy: ${fullValue}` : "Copy",
+            size: "sm",
+            variant: "surface",
+            className: "-my-1",
+            onClick: (event) => {
+              event.stopPropagation();
+              onCopy();
+            }
+          }
+        ),
+        !onCopy && copyValue !== void 0 && /* @__PURE__ */ jsx(CopyButton, { value: copyValue, label: label.toLowerCase(), variant: "surface" })
+      ] })
+    ] })
+  );
+}
+
+export {
+  ActivityDetailRow
+};

package/dist/web/chunk-DXFFYCU3.js

@@ -0,0 +1,83 @@
+"use client";
+import {
+  AppIcon
+} from "./chunk-PS7Q6MMU.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  ArkadeNetworkIcon,
+  LightningNetworkIcon,
+  OnchainNetworkIcon,
+  SparkNetworkIcon
+} from "./chunk-LYCLVP26.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/activity-network-filters.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function getActivityNetworkFilterIcon(filter) {
+  switch (filter) {
+    case "onchain":
+      return /* @__PURE__ */ jsx(OnchainNetworkIcon, { className: "size-3.5" });
+    case "lightning":
+      return /* @__PURE__ */ jsx(LightningNetworkIcon, { className: "size-3.5", alt: "" });
+    case "spark":
+      return /* @__PURE__ */ jsx(SparkNetworkIcon, { className: "size-3.5", alt: "" });
+    case "arkade":
+      return /* @__PURE__ */ jsx(ArkadeNetworkIcon, { className: "size-3.5 rounded", alt: "" });
+    default:
+      return /* @__PURE__ */ jsx(AppIcon, { name: "allNetworks", size: "xs", className: "size-icon-sm" });
+  }
+}
+function ActivityNetworkFilters({
+  filters,
+  activeFilter,
+  onChange,
+  className,
+  ariaLabel = "Filter activity by network"
+}) {
+  if (filters.length <= 1) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "aria-label": ariaLabel,
+      className: cn("flex gap-1.5 overflow-x-auto pb-0.5 no-scrollbar", className),
+      children: filters.map((filter) => {
+        const isActive = activeFilter === filter.value;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": isActive,
+            onClick: () => onChange(filter.value),
+            className: cn(
+              "flex shrink-0 items-center gap-1 rounded-full px-2.5 py-1.5 transition-all",
+              eyebrow,
+              isActive ? "bg-primary bg-gradient-primary text-primary-foreground shadow-button-primary" : "bg-foreground/5 text-muted-foreground hover-gradient-violet hover:text-secondary-content"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "flex size-3 items-center justify-center",
+                  children: filter.icon ?? getActivityNetworkFilterIcon(filter.value)
+                }
+              ),
+              filter.label
+            ]
+          },
+          filter.value
+        );
+      })
+    }
+  );
+}
+
+export {
+  getActivityNetworkFilterIcon,
+  ActivityNetworkFilters
+};

package/dist/web/chunk-EK5N3ZPW.js

@@ -0,0 +1,417 @@
+"use client";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "./chunk-TCFHH5TE.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "./chunk-UHXOPILM.js";
+import {
+  FilterChipGroup
+} from "./chunk-HVKSBEZN.js";
+import {
+  formatAmount
+} from "./chunk-VM6AGMYO.js";
+import {
+  Icon
+} from "./chunk-A6MSV4MA.js";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  BarChart,
+  Check,
+  Event,
+  TableRows,
+  Tune
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/charts/core.tsx
+import {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+
+// src/tokens/chart.ts
+var chartSeries = {
+  /** green, violet, azzurro, then yellow, magenta, orange */
+  dark: ["#17b581", "#8374da", "#179fd4", "#b3880f", "#db589e", "#de6907"],
+  light: ["#17b581", "#6851c3", "#0f9cd0", "#dea805", "#c34189", "#fe904d"]
+};
+var chartSeriesLimit = chartSeries.dark.length;
+var chartScatterSeriesLimit = 3;
+
+// src/web/components/charts/core.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var seriesColor = (slot) => `var(--series-${slot % chartSeriesLimit + 1})`;
+var defaultChartFormat = (value) => formatAmount(value);
+var TICK_FONT = 11;
+var axisTextWidth = (labels) => Math.max(0, ...labels.map((label) => label.length)) * TICK_FONT * 0.62;
+function chartValueTicks(max, { integer = false } = {}) {
+  if (!Number.isFinite(max) || max <= 0) return [0];
+  const rough = max / 4;
+  const magnitude = 10 ** Math.floor(Math.log10(rough));
+  let step = [1, 2, 5, 10].map((m) => m * magnitude).find((s) => s >= rough) ?? 10 * magnitude;
+  if (integer) step = Math.max(1, Math.round(step));
+  const ticks = [0];
+  for (let value = step; value < max - max * 0.15; value += step) {
+    ticks.push(Number(value.toPrecision(12)));
+  }
+  ticks.push(max);
+  return ticks;
+}
+function chartLabelIndices(count, maxLabels) {
+  if (count <= 0) return [];
+  if (count === 1) return [0];
+  const slots = Math.max(2, Math.min(count, Math.floor(maxLabels)));
+  const indices = /* @__PURE__ */ new Set();
+  for (let slot = 0; slot < slots; slot += 1) {
+    indices.add(Math.round(slot * (count - 1) / (slots - 1)));
+  }
+  return [...indices].sort((a, b) => a - b);
+}
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function useChartWidth(fallback = 640) {
+  const ref = useRef(null);
+  const [width, setWidth] = useState(fallback);
+  useIsomorphicLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+    const measured = Math.round(element.getBoundingClientRect().width);
+    if (measured > 0) setWidth(measured);
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(([entry]) => {
+      const next = Math.round(entry.contentRect.width);
+      if (next > 0) setWidth(next);
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return [ref, width];
+}
+function ChartLegend({
+  items,
+  keyShape = "rect",
+  hidden,
+  onToggle,
+  className
+}) {
+  const visibleCount = items.filter((item) => !hidden?.has(item.id)).length;
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "data-slot": "chart-legend",
+      className: cn("m-0 flex list-none flex-wrap justify-center gap-x-4 gap-y-1 p-0 text-caption text-foreground", className),
+      children: items.map((item) => {
+        const off = hidden?.has(item.id) ?? false;
+        const key = item.swatch ?? /* @__PURE__ */ jsx(LegendSwatch, { color: item.color, shape: keyShape });
+        return /* @__PURE__ */ jsx("li", { className: "flex items-center", children: onToggle ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": !off,
+            disabled: !off && visibleCount <= 1,
+            title: off ? "Show" : "Hide",
+            onClick: () => onToggle(item.id),
+            className: cn(
+              "flex items-center gap-1.5 rounded-md px-1.5 py-0.5 text-foreground transition-all hover-gradient-violet focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-default disabled:hover:bg-none",
+              off && "opacity-45 line-through"
+            ),
+            children: [
+              key,
+              item.label
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 px-1.5 py-0.5", children: [
+          key,
+          item.label
+        ] }) }, item.id);
+      })
+    }
+  );
+}
+function useSeriesVisibility(ids) {
+  const [hidden, setHidden] = useState(() => /* @__PURE__ */ new Set());
+  const onToggle = (id) => setHidden((current) => {
+    const next = new Set(current);
+    if (next.has(id)) next.delete(id);
+    else if (ids.filter((other) => !next.has(other)).length > 1) next.add(id);
+    return next;
+  });
+  const hiddenNow = useMemo(() => {
+    const kept = new Set(ids.filter((id) => hidden.has(id)));
+    return ids.length > 0 && kept.size >= ids.length ? /* @__PURE__ */ new Set() : kept;
+  }, [ids, hidden]);
+  return {
+    isVisible: (id) => !hiddenNow.has(id),
+    legend: { hidden: hiddenNow, onToggle }
+  };
+}
+function LegendSwatch({ color, shape = "rect" }) {
+  return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", "aria-hidden": "true", className: "shrink-0", children: shape === "line" ? /* @__PURE__ */ jsx("line", { x1: "1", x2: "11", y1: "6", y2: "6", stroke: color, strokeWidth: "2", strokeLinecap: "round" }) : shape === "dot" ? /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "4", fill: color }) : /* @__PURE__ */ jsx("rect", { width: "12", height: "12", rx: "3", fill: color }) });
+}
+function ChartTooltip({
+  title,
+  rows,
+  x,
+  y,
+  width,
+  swatch = "line"
+}) {
+  const flip = x > width * 0.6;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "chart-tooltip",
+      role: "presentation",
+      className: "pointer-events-none absolute z-10 min-w-32 rounded-xl bg-popover bg-gradient-card-hero px-3 py-2 text-caption text-popover-foreground shadow-popover",
+      style: {
+        left: flip ? void 0 : x + 12,
+        right: flip ? width - x + 12 : void 0,
+        top: Math.max(0, y - 8)
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-1 font-semibold text-foreground", children: title }),
+        /* @__PURE__ */ jsx("ul", { className: "m-0 list-none space-y-0.5 p-0", children: rows.map((row) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2 whitespace-nowrap", children: [
+          /* @__PURE__ */ jsx(LegendSwatch, { color: row.color, shape: swatch }),
+          /* @__PURE__ */ jsx("span", { className: "font-semibold tabular-nums text-foreground", children: row.value }),
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: row.label })
+        ] }, row.id)) })
+      ]
+    }
+  );
+}
+var tooltipText = (title, rows) => [title, ...rows.map((row) => `${row.value} ${typeof row.label === "string" ? row.label : ""}`.trim())].join(" \xB7 ");
+function nextActiveIndex(key, current, count, { vertical = false } = {}) {
+  if (count === 0) return void 0;
+  const at = current ?? -1;
+  const forward = vertical ? "ArrowDown" : "ArrowRight";
+  const back = vertical ? "ArrowUp" : "ArrowLeft";
+  switch (key) {
+    case forward:
+      return Math.min(count - 1, at + 1);
+    case back:
+      return at < 0 ? count - 1 : Math.max(0, at - 1);
+    case "Home":
+      return 0;
+    case "End":
+      return count - 1;
+    case "Escape":
+      return null;
+    default:
+      return void 0;
+  }
+}
+var viewOptions = [
+  { value: "chart", ariaLabel: "Chart", icon: /* @__PURE__ */ jsx(IconGlyph, { glyph: BarChart, size: "sm" }) },
+  { value: "table", ariaLabel: "Table", icon: /* @__PURE__ */ jsx(IconGlyph, { glyph: TableRows, size: "sm" }) }
+];
+var tableOption = viewOptions[1];
+function ChartViewToggle({
+  view,
+  onChange,
+  views,
+  chartView,
+  onChartViewChange
+}) {
+  const options = views && views.length > 0 ? [...views.map((v) => ({ value: v.value, ariaLabel: v.label, icon: /* @__PURE__ */ jsx(Icon, { name: v.icon, size: "sm" }) })), tableOption] : viewOptions;
+  const value = view === "table" ? "table" : views && views.length > 0 ? chartView ?? views[0].value : "chart";
+  return /* @__PURE__ */ jsx("div", { "data-slot": "chart-view-toggle", className: "shrink-0", children: /* @__PURE__ */ jsx(
+    FilterChipGroup,
+    {
+      variant: "segmented",
+      ariaLabel: "View",
+      options,
+      value,
+      onChange: (next) => {
+        if (next === "table") return onChange("table");
+        onChange("chart");
+        if (views && views.length > 0) onChartViewChange?.(next);
+      }
+    }
+  ) });
+}
+function ChartTimeframeMenu({
+  timeframes,
+  value,
+  onChange
+}) {
+  const current = timeframes.find((t) => t.value === value) ?? timeframes[0];
+  return /* @__PURE__ */ jsx("div", { "data-slot": "chart-timeframe", className: "shrink-0", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(GlyphButton, { icon: Event, label: `Timeframe: ${current.label}` }) }),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { className: "min-w-28", children: timeframes.map((t) => /* @__PURE__ */ jsxs(
+      DropdownMenuItem,
+      {
+        onSelect: () => onChange(t.value),
+        icon: /* @__PURE__ */ jsx(IconGlyph, { glyph: Check, className: t.value === current.value ? void 0 : "invisible" }),
+        children: [
+          t.label,
+          t.value === current.value && /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (current)" })
+        ]
+      },
+      t.value
+    )) })
+  ] }) });
+}
+function ChartFiltersMenu({
+  filters,
+  active,
+  onChange
+}) {
+  const on = filters.filter((f) => active.includes(f.value));
+  const toggle = (value) => onChange(active.includes(value) ? active.filter((v) => v !== value) : [...active, value]);
+  return /* @__PURE__ */ jsx("div", { "data-slot": "chart-filters", className: "shrink-0", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      GlyphButton,
+      {
+        icon: Tune,
+        variant: on.length > 0 ? "surface" : "quiet",
+        label: on.length > 0 ? `Filters: ${on.length} on` : "Filters"
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { className: "min-w-44", children: filters.map((f) => {
+      const checked = active.includes(f.value);
+      return /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          role: "menuitemcheckbox",
+          "aria-checked": checked,
+          onSelect: (event) => {
+            event.preventDefault();
+            toggle(f.value);
+          },
+          icon: /* @__PURE__ */ jsx(IconGlyph, { glyph: Check, className: checked ? void 0 : "invisible" }),
+          children: f.label
+        },
+        f.value
+      );
+    }) })
+  ] }) });
+}
+function ChartHeader({
+  title,
+  description,
+  timeframes,
+  timeframe,
+  onTimeframeChange,
+  filters,
+  activeFilters,
+  onFiltersChange,
+  view,
+  onViewChange,
+  views,
+  chartView,
+  onChartViewChange
+}) {
+  const showTimeframes = timeframes && timeframes.length > 0 && onTimeframeChange;
+  const showFilters = filters && filters.length > 0 && onFiltersChange;
+  const hasText = Boolean(title || description);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "chart-header",
+      className: cn("flex flex-wrap items-start gap-x-4 gap-y-2", hasText ? "justify-between" : "justify-end"),
+      children: [
+        hasText && /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+          title && /* @__PURE__ */ jsx("h3", { className: "m-0 text-subhead font-semibold leading-none tracking-tight text-foreground", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "m-0 text-caption text-muted-foreground", children: description })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+          (showTimeframes || showFilters) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+            showFilters && /* @__PURE__ */ jsx(ChartFiltersMenu, { filters, active: activeFilters ?? [], onChange: onFiltersChange }),
+            showTimeframes && /* @__PURE__ */ jsx(
+              ChartTimeframeMenu,
+              {
+                timeframes,
+                value: timeframe ?? timeframes[0].value,
+                onChange: onTimeframeChange
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            ChartViewToggle,
+            {
+              view,
+              onChange: onViewChange,
+              views,
+              chartView,
+              onChartViewChange
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ChartLegendRow({ children }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "chart-legend-row", children });
+}
+function ChartDataTable({ label, table }) {
+  return /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx("caption", { className: "sr-only", children: label }),
+    /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: table.columns.map((column, index) => /* @__PURE__ */ jsx(TableHead, { className: index > 0 ? "text-right" : void 0, children: column }, index)) }) }),
+    /* @__PURE__ */ jsx(TableBody, { children: table.rows.map((row, rowIndex) => /* @__PURE__ */ jsx(TableRow, { children: row.map((cell, cellIndex) => /* @__PURE__ */ jsx(TableCell, { className: cellIndex > 0 ? "text-right tabular-nums" : void 0, children: cell }, cellIndex)) }, rowIndex)) })
+  ] });
+}
+function ChartFrame({
+  label,
+  scale,
+  legend,
+  table,
+  announcement,
+  children,
+  className,
+  ...head
+}) {
+  const [view, setView] = useState("chart");
+  return /* @__PURE__ */ jsxs("figure", { "data-slot": "chart", "aria-label": label, className: cn("m-0 min-w-0 space-y-3", className), children: [
+    scale && /* @__PURE__ */ jsx("p", { "data-slot": "chart-scale", className: "sr-only", children: scale }),
+    /* @__PURE__ */ jsx(ChartHeader, { ...head, view, onViewChange: setView }),
+    view === "chart" ? children : /* @__PURE__ */ jsx(ChartDataTable, { label, table }),
+    view === "chart" && legend && /* @__PURE__ */ jsx(ChartLegendRow, { children: legend }),
+    /* @__PURE__ */ jsx("p", { "aria-live": "polite", className: "sr-only", children: announcement ?? "" })
+  ] });
+}
+var plotClass = "relative w-full min-w-0 rounded-xl outline-none transition-shadow duration-200 focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:shadow-glow-primary-soft";
+
+export {
+  chartSeriesLimit,
+  chartScatterSeriesLimit,
+  seriesColor,
+  defaultChartFormat,
+  TICK_FONT,
+  axisTextWidth,
+  chartValueTicks,
+  chartLabelIndices,
+  useChartWidth,
+  ChartLegend,
+  useSeriesVisibility,
+  LegendSwatch,
+  ChartTooltip,
+  tooltipText,
+  nextActiveIndex,
+  ChartViewToggle,
+  ChartTimeframeMenu,
+  ChartFiltersMenu,
+  ChartHeader,
+  ChartLegendRow,
+  ChartDataTable,
+  ChartFrame,
+  plotClass
+};