kaleido-ui 0.2.2 → 0.2.5

package/dist/web/chunk-HKIYPISK.js

@@ -0,0 +1,175 @@
+"use client";
+import {
+  NetworkStatusChip
+} from "./chunk-CZGN7SQH.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle
+} from "./chunk-D2ZG6TZM.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  Settings
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/components/account-status-tabs.tsx
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function AccountStatusDetails({
+  account,
+  onEdit
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "p-6", "data-testid": `account-status-details-${account.id}`, children: [
+    /* @__PURE__ */ jsx(DialogHeader, { className: "text-left", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-testid": `account-status-protocol-logo-${account.id}`,
+          className: cn(
+            "flex size-16 shrink-0 items-center justify-center rounded-2xl shadow-raised",
+            account.accentBg
+          ),
+          children: account.detailIcon ?? account.icon
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground", eyebrow), children: account.label }),
+          /* @__PURE__ */ jsx("span", { className: cn("size-2 rounded-full", account.dotTone) })
+        ] }),
+        /* @__PURE__ */ jsx(DialogTitle, { className: "mt-1 text-title font-bold text-foreground", children: account.title }),
+        /* @__PURE__ */ jsx(DialogDescription, { className: "mt-2 text-caption leading-relaxed text-muted-foreground", children: account.description })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-5 grid grid-cols-2 gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: cn("rounded-2xl px-4 py-3 shadow-raised", account.networkBannerClassName), children: [
+        /* @__PURE__ */ jsx("div", { className: eyebrow, children: "Network" }),
+        /* @__PURE__ */ jsx("div", { className: "mt-1 break-words text-body font-semibold", children: account.networkLabel })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "rounded-2xl kui-well px-4 py-3 shadow-raised", children: [
+        /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", eyebrow), children: "Status" }),
+        /* @__PURE__ */ jsx("div", { className: "mt-1 break-words text-body font-semibold text-foreground/90", children: account.state })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "mt-5 text-caption leading-relaxed text-muted-foreground", children: account.detail }),
+    account.details && account.details.length > 0 && /* @__PURE__ */ jsx("dl", { className: "mt-5 space-y-2 rounded-2xl kui-well px-4 py-3 shadow-inner", children: account.details.map((item) => /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[max-content_minmax(0,1fr)] gap-3 text-caption", children: [
+      /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: item.label }),
+      /* @__PURE__ */ jsx("dd", { className: "min-w-0 break-words text-right font-medium text-foreground/90", children: item.value })
+    ] }, item.label)) }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-5", children: [
+      /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", eyebrow), children: "Capabilities" }),
+      /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: account.capabilityBullets.map((capability) => /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: "inline-flex items-center gap-1.5 rounded-full bg-secondary/15 px-2.5 py-1 text-xxs font-medium text-secondary-content",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-primary" }),
+            capability
+          ]
+        },
+        capability
+      )) })
+    ] }),
+    onEdit && /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        "data-testid": `account-status-edit-${account.id}`,
+        onClick: () => onEdit(account.id),
+        className: "mt-6 w-full bg-gradient-primary bg-primary text-primary-foreground shadow-button-primary hover:bg-primary/90",
+        children: [
+          /* @__PURE__ */ jsx(IconGlyph, { glyph: Settings, size: "sm" }),
+          "Edit Settings"
+        ]
+      }
+    )
+  ] });
+}
+function AccountStatusTabs({
+  accounts,
+  onSelect,
+  onEdit
+}) {
+  const [selectedAccountId, setSelectedAccountId] = useState(null);
+  const selectedAccount = selectedAccountId ? accounts.find((account) => account.id === selectedAccountId) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "flex max-w-full flex-wrap items-center justify-end pl-3", children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 px-1", children: accounts.map((account) => /* @__PURE__ */ jsxs("div", { className: "group relative shrink-0", children: [
+      /* @__PURE__ */ jsx(
+        NetworkStatusChip,
+        {
+          onClick: () => onSelect ? onSelect(account.id) : setSelectedAccountId(account.id),
+          icon: account.icon,
+          network: account.network,
+          dotClassName: account.dotTone,
+          ariaLabel: onSelect ? `Open ${account.title}` : `Open ${account.title} details`
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "pointer-events-none absolute bottom-[calc(100%+12px)] right-0 z-20 hidden w-64 rounded-2xl bg-popover/95 bg-gradient-card p-3.5 opacity-0 shadow-popover backdrop-blur-xl transition-all duration-150 group-hover:opacity-100 md:block"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+              /* @__PURE__ */ jsx("span", { className: "shrink-0", children: account.icon }),
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground", eyebrow), children: account.label }),
+                  /* @__PURE__ */ jsx("span", { className: cn("size-2 rounded-full", account.dotTone) })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "mt-1 text-body font-semibold text-foreground/90", children: account.title }),
+                /* @__PURE__ */ jsx("div", { className: "mt-1 text-caption font-medium text-muted-foreground", children: account.state })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "mt-3 text-caption leading-relaxed text-foreground/70", children: account.detail }),
+            /* @__PURE__ */ jsx("p", { className: "mt-2 text-caption leading-relaxed text-muted-foreground", children: account.description }),
+            /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-1.5", children: account.capabilityBullets.map((capability) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "rounded-full bg-secondary/15 px-2 py-1 text-xxs font-medium text-secondary-content",
+                children: capability
+              },
+              capability
+            )) })
+          ]
+        }
+      )
+    ] }, account.id)) }) }),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: selectedAccountId !== null,
+        onOpenChange: (open) => !open && setSelectedAccountId(null),
+        children: selectedAccount && /* @__PURE__ */ jsx(DialogContent, { className: "bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card-hero p-0 text-foreground shadow-popover", children: /* @__PURE__ */ jsx(
+          AccountStatusDetails,
+          {
+            account: selectedAccount,
+            onEdit: onEdit ? (id) => {
+              setSelectedAccountId(null);
+              onEdit(id);
+            } : void 0
+          }
+        ) })
+      }
+    )
+  ] });
+}
+
+export {
+  AccountStatusDetails,
+  AccountStatusTabs
+};

package/dist/web/chunk-HLPL5AHD.js

@@ -0,0 +1,54 @@
+"use client";
+import {
+  Collapsible,
+  CollapsibleChevron,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "./chunk-Q2IXLUSM.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/basic-collapsible.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function BasicCollapsible({
+  title,
+  children,
+  open,
+  onOpenChange,
+  defaultOpen,
+  className,
+  triggerClassName,
+  contentClassName
+}) {
+  return /* @__PURE__ */ jsxs(
+    Collapsible,
+    {
+      open,
+      onOpenChange,
+      defaultOpen,
+      "data-slot": "basic-collapsible",
+      className: cn("overflow-hidden rounded-xl bg-surface-inset/40 shadow-raised", className),
+      children: [
+        /* @__PURE__ */ jsxs(
+          CollapsibleTrigger,
+          {
+            className: cn(
+              "flex w-full items-center justify-between px-3 py-2 text-caption font-semibold text-foreground hover-gradient-violet focus-visible:ring-inset",
+              triggerClassName
+            ),
+            children: [
+              title,
+              /* @__PURE__ */ jsx(CollapsibleChevron, {})
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(CollapsibleContent, { className: cn("px-3 pb-3 pt-1 text-caption text-muted-foreground", contentClassName), children })
+      ]
+    }
+  );
+}
+
+export {
+  BasicCollapsible
+};

package/dist/web/chunk-HO65ENYH.js

@@ -0,0 +1,99 @@
+"use client";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from "./chunk-D2ZG6TZM.js";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  Refresh
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/components/confirm-dialog.tsx
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  destructive = false,
+  busy = false,
+  confirmDisabled = false,
+  onConfirm,
+  className
+}) {
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { "data-slot": "confirm-dialog", className, children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+      description && /* @__PURE__ */ jsx(DialogDescription, { children: description })
+    ] }),
+    children,
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", disabled: busy, onClick: () => onOpenChange(false), children: cancelLabel }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: destructive ? "destructive" : "default",
+          disabled: confirmDisabled,
+          "aria-busy": busy || void 0,
+          onClick: () => {
+            if (!busy) onConfirm();
+          },
+          children: [
+            busy && /* @__PURE__ */ jsx(IconGlyph, { glyph: Refresh, className: "animate-spin text-icon-md motion-reduce:animate-none" }),
+            confirmLabel
+          ]
+        }
+      )
+    ] })
+  ] }) });
+}
+function useDiscardGuard({
+  dirty,
+  onClose,
+  title = "Discard what you entered?",
+  description = "You have unsaved input. If you close this now, it is lost.",
+  keepLabel = "Keep editing",
+  discardLabel = "Discard"
+}) {
+  const [asking, setAsking] = useState(false);
+  const request = () => {
+    if (dirty) setAsking(true);
+    else onClose();
+  };
+  const confirm = /* @__PURE__ */ jsx(
+    ConfirmDialog,
+    {
+      open: asking,
+      onOpenChange: setAsking,
+      title,
+      description,
+      cancelLabel: keepLabel,
+      confirmLabel: discardLabel,
+      destructive: true,
+      onConfirm: () => {
+        setAsking(false);
+        onClose();
+      }
+    }
+  );
+  return { request, confirm };
+}
+
+export {
+  ConfirmDialog,
+  useDiscardGuard
+};

package/dist/web/chunk-HP25HN7Q.js

@@ -0,0 +1,69 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/charts/sparkline.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Sparkline({ values, label, width = 96, height = 28, pulse = false, tone = "default", className }) {
+  const fill = height === "fill";
+  const boxRef = useRef(null);
+  const [measured, setMeasured] = useState(28);
+  useEffect(() => {
+    const box = boxRef.current;
+    if (!fill || !box) return;
+    const measure = () => setMeasured(Math.max(16, Math.round(box.getBoundingClientRect().height)));
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(box);
+    return () => observer.disconnect();
+  }, [fill]);
+  if (values.length < 2) return null;
+  const h = fill ? measured : height;
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const span = max - min || 1;
+  const pad = 4;
+  const x = (index) => pad + index / (values.length - 1) * (width - pad * 2);
+  const y = (value) => h - pad - (value - min) / span * (h - pad * 2);
+  const d = values.map((value, index) => `${index === 0 ? "M" : "L"}${x(index).toFixed(1)},${y(value).toFixed(1)}`).join("");
+  const last = values.length - 1;
+  const dot = tone === "negative" ? "var(--color-danger)" : "var(--series-1)";
+  const svg = /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "data-slot": "sparkline",
+      role: "img",
+      "aria-label": label,
+      width,
+      height: h,
+      viewBox: `0 0 ${width} ${h}`,
+      className: cn("block shrink-0 overflow-visible", !fill && className, fill && "absolute inset-y-0 right-0"),
+      children: [
+        /* @__PURE__ */ jsx("path", { d, fill: "none", stroke: "var(--muted-foreground)", strokeWidth: 1.5, strokeLinejoin: "round", strokeLinecap: "round" }),
+        pulse && /* @__PURE__ */ jsx(
+          "circle",
+          {
+            "data-slot": "sparkline-pulse",
+            "aria-hidden": "true",
+            cx: x(last),
+            cy: y(values[last]),
+            r: 4,
+            fill: dot,
+            className: "opacity-0 motion-safe:animate-ping motion-safe:opacity-75",
+            style: { transformBox: "fill-box", transformOrigin: "center" }
+          }
+        ),
+        /* @__PURE__ */ jsx("circle", { cx: x(last), cy: y(values[last]), r: 4, fill: dot, stroke: "var(--card)", strokeWidth: 2 })
+      ]
+    }
+  );
+  if (!fill) return svg;
+  return /* @__PURE__ */ jsx("span", { ref: boxRef, className: cn("relative block h-full", className), style: { width }, children: svg });
+}
+
+export {
+  Sparkline
+};

package/dist/web/chunk-HVKSBEZN.js

@@ -0,0 +1,98 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/filter-chip-group.tsx
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FilterChipGroup({
+  options,
+  value,
+  onChange,
+  variant = "chips",
+  ariaLabel,
+  className
+}) {
+  const refs = useRef([]);
+  const segmented = variant === "segmented";
+  const onKeyDown = (event) => {
+    if (!segmented) return;
+    const enabled = options.map((option, index) => ({ option, index })).filter(({ option }) => !option.disabled);
+    if (enabled.length === 0) return;
+    const at = Math.max(0, enabled.findIndex(({ option }) => option.value === value));
+    let next;
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") next = (at + 1) % enabled.length;
+    else if (event.key === "ArrowLeft" || event.key === "ArrowUp") next = (at - 1 + enabled.length) % enabled.length;
+    else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = enabled.length - 1;
+    if (next === void 0) return;
+    event.preventDefault();
+    const target = enabled[next];
+    onChange(target.option.value);
+    refs.current[target.index]?.focus();
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: segmented ? "radiogroup" : void 0,
+      "aria-label": ariaLabel,
+      "data-variant": variant,
+      onKeyDown,
+      className: cn(
+        segmented ? "inline-flex gap-0.5 rounded-xl bg-card p-0.5 shadow-raised" : "flex gap-1.5 overflow-x-auto no-scrollbar",
+        className
+      ),
+      children: options.map((option, index) => {
+        const active = option.value === value;
+        const iconOnly = option.label === void 0 || option.label === null;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: (node) => {
+              refs.current[index] = node;
+            },
+            type: "button",
+            role: segmented ? "radio" : void 0,
+            "aria-checked": segmented ? active : void 0,
+            tabIndex: segmented ? active ? 0 : -1 : void 0,
+            "aria-label": option.ariaLabel,
+            title: iconOnly ? option.ariaLabel : void 0,
+            disabled: option.disabled,
+            onClick: () => onChange(option.value),
+            className: cn(
+              segmented ? cn(
+                "flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-lg font-semibold transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:shadow-glow-primary-soft",
+                iconOnly ? "size-8" : "h-8 px-3 text-caption",
+                active ? "bg-primary bg-gradient-primary text-primary-foreground shadow-button-primary" : "text-muted-foreground hover-gradient-violet hover:text-secondary-content"
+              ) : cn(
+                "flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full px-2.5 py-1 text-tiny font-bold transition-all",
+                active ? "bg-primary bg-gradient-primary text-primary-foreground shadow-button-primary" : "bg-foreground/5 text-muted-foreground hover-gradient-violet hover:text-secondary-content"
+              ),
+              option.disabled && "cursor-not-allowed opacity-40"
+            ),
+            children: [
+              option.icon,
+              option.label,
+              option.count !== void 0 && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "rounded-full px-1.5 py-0.5 text-xxs",
+                    segmented ? active ? "bg-primary-foreground/15" : "bg-secondary/15 text-secondary-content" : active ? "bg-foreground/20" : "bg-secondary/15 text-secondary-content"
+                  ),
+                  children: option.count
+                }
+              )
+            ]
+          },
+          option.value
+        );
+      })
+    }
+  );
+}
+
+export {
+  FilterChipGroup
+};

package/dist/web/chunk-HWKXZNBN.js

@@ -0,0 +1,74 @@
+"use client";
+import {
+  StatusIconBadge
+} from "./chunk-CZPNI33A.js";
+import {
+  Icon
+} from "./chunk-A6MSV4MA.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/activity-row.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var directionUi = {
+  inbound: { icon: "south_west", iconClass: "bg-primary/20 text-brand", amountClass: "text-brand", sign: "+" },
+  outbound: { icon: "north_east", iconClass: "bg-foreground/10 text-muted-foreground", amountClass: "text-foreground", sign: "-" },
+  swap: { icon: "swap_horiz", iconClass: "bg-foreground/10 text-foreground", amountClass: "text-foreground", sign: "" },
+  neutral: { icon: "receipt_long", iconClass: "bg-secondary/15 text-secondary-content", amountClass: "text-foreground", sign: "" }
+};
+function ActivityRow({
+  title,
+  amount,
+  direction = "neutral",
+  status,
+  timestamp,
+  networkBadge,
+  unit,
+  icon,
+  onClick,
+  className
+}) {
+  const ui = directionUi[direction];
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
+      /* @__PURE__ */ jsx(
+        StatusIconBadge,
+        {
+          status,
+          icon: /* @__PURE__ */ jsx("div", { className: cn("flex size-10 items-center justify-center rounded-xl shadow-inner", ui.iconClass), children: typeof icon === "string" || !icon ? /* @__PURE__ */ jsx(Icon, { name: icon ?? ui.icon, className: "text-icon-xl" }) : icon })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate text-body font-bold tracking-wide text-foreground", children: title }),
+          networkBadge
+        ] }),
+        timestamp && /* @__PURE__ */ jsx("div", { className: "mt-1 flex items-center gap-2", children: /* @__PURE__ */ jsx("span", { className: "text-xxs text-muted-foreground", children: timestamp }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "shrink-0 text-right", children: [
+      /* @__PURE__ */ jsxs("p", { className: cn("text-body font-bold tracking-wide", ui.amountClass), children: [
+        ui.sign,
+        amount
+      ] }),
+      unit && /* @__PURE__ */ jsx("p", { className: cn("mt-0.5 text-muted-foreground", eyebrow), children: unit })
+    ] })
+  ] });
+  const rowClassName = cn(
+    "flex w-full items-center justify-between gap-3 rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-4 shadow-card transition-all duration-200",
+    onClick && "hover:bg-accent hover:shadow-card-hover",
+    className
+  );
+  if (onClick) {
+    return /* @__PURE__ */ jsx("button", { type: "button", onClick, className: rowClassName, children: content });
+  }
+  return /* @__PURE__ */ jsx("div", { className: rowClassName, children: content });
+}
+
+export {
+  ActivityRow
+};

package/dist/web/chunk-HY3VMT27.js

@@ -0,0 +1,64 @@
+"use client";
+import {
+  brandMark
+} from "./chunk-LSY4DY2I.js";
+import {
+  kaleidoswapLogoHorizontalArtwork,
+  kaleidoswapLogoVerticalArtwork,
+  kaleidoswapMarkArtwork
+} from "./chunk-FSQV54O4.js";
+
+// src/web/components/kaleidoswap-logo.tsx
+import { jsx } from "react/jsx-runtime";
+var PAINT = {
+  violet: brandMark.violet,
+  green: brandMark.green,
+  mint: brandMark.mint,
+  // The wordmark follows the surrounding text colour, so it reads on light
+  // and dark surfaces alike (`text-foreground` is a good default).
+  text: "currentColor"
+};
+function BrandSvg({
+  artwork,
+  title = "KaleidoSwap",
+  className,
+  ...props
+}) {
+  const decorative = title === "";
+  const [, , vbWidth, vbHeight] = artwork.viewBox.split(" ").map(Number);
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: artwork.viewBox,
+      width: Math.round(32 * vbWidth / vbHeight),
+      height: 32,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      role: decorative ? void 0 : "img",
+      "aria-label": decorative ? void 0 : title,
+      "aria-hidden": decorative ? true : void 0,
+      focusable: "false",
+      className,
+      ...props,
+      children: artwork.paths.map((path, index) => /* @__PURE__ */ jsx("path", { d: path.d, fill: PAINT[path.fill] }, index))
+    }
+  );
+}
+function KaleidoswapMark(props) {
+  return /* @__PURE__ */ jsx(BrandSvg, { artwork: kaleidoswapMarkArtwork, ...props });
+}
+function KaleidoswapLogo({ orientation = "horizontal", ...props }) {
+  return /* @__PURE__ */ jsx(
+    BrandSvg,
+    {
+      artwork: orientation === "vertical" ? kaleidoswapLogoVerticalArtwork : kaleidoswapLogoHorizontalArtwork,
+      "data-orientation": orientation,
+      ...props
+    }
+  );
+}
+
+export {
+  KaleidoswapMark,
+  KaleidoswapLogo
+};