kaleido-ui 0.2.2 → 0.2.5

package/dist/web/chunk-VAMCLWLF.js

@@ -0,0 +1,403 @@
+"use client";
+import {
+  TooltipBubble
+} from "./chunk-YQDCU7ZL.js";
+import {
+  ScrollArea
+} from "./chunk-DCUAE6PX.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  ChevronLeft,
+  ChevronRight
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/primitives/drawer.tsx
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Slot } from "@radix-ui/react-slot";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DrawerContext = React.createContext({ collapsed: false });
+var DrawerOpenContext = React.createContext(void 0);
+var useDrawerCollapsed = () => React.useContext(DrawerContext).collapsed;
+var panel = "flex h-full flex-col border-r border-divider/30 bg-surface-base bg-gradient-card text-foreground shadow-raised";
+var sectionLabel = cn(eyebrow, "text-muted-foreground");
+var DrawerSidebar = React.forwardRef(
+  ({
+    className,
+    children,
+    collapsed = false,
+    onCollapsedChange,
+    header,
+    collapseLabel = "Collapse sidebar",
+    expandLabel = "Expand sidebar",
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      ref,
+      "data-state": collapsed ? "collapsed" : "expanded",
+      className: cn(
+        panel,
+        // Sticky rather than fixed, so the page beside it needs no margin
+        // kept in step with its width.
+        "sticky top-0 h-screen shrink-0 transition-[width] duration-300 ease-in-out motion-reduce:transition-none",
+        collapsed ? "w-20" : "w-72",
+        className
+      ),
+      ...props,
+      children: [
+        (header || onCollapsedChange) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center px-4 py-5", collapsed ? "justify-center" : "justify-between gap-3"), children: [
+          !collapsed && header && /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: header }),
+          onCollapsedChange && /* @__PURE__ */ jsx(
+            GlyphButton,
+            {
+              icon: collapsed ? ChevronRight : ChevronLeft,
+              label: collapsed ? expandLabel : collapseLabel,
+              "aria-expanded": !collapsed,
+              onClick: () => onCollapsedChange(!collapsed)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          DrawerContext.Provider,
+          {
+            value: { collapsed, expand: onCollapsedChange ? () => onCollapsedChange(false) : void 0 },
+            children
+          }
+        )
+      ]
+    }
+  )
+);
+DrawerSidebar.displayName = "DrawerSidebar";
+var Drawer = ({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  ...props
+}) => {
+  const [uncontrolled, setUncontrolled] = React.useState(defaultOpen);
+  const open = openProp ?? uncontrolled;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (openProp === void 0) setUncontrolled(next);
+      onOpenChange?.(next);
+    },
+    [openProp, onOpenChange]
+  );
+  const close = React.useCallback(() => setOpen(false), [setOpen]);
+  return /* @__PURE__ */ jsx(DrawerOpenContext.Provider, { value: close, children: /* @__PURE__ */ jsx(DialogPrimitive.Root, { open, onOpenChange: setOpen, ...props }) });
+};
+Drawer.displayName = "Drawer";
+var DrawerTrigger = DialogPrimitive.Trigger;
+var DrawerPortal = DialogPrimitive.Portal;
+var DrawerClose = DialogPrimitive.Close;
+var DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-lg data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out motion-reduce:animate-none",
+      className
+    ),
+    ...props
+  }
+));
+DrawerOverlay.displayName = "DrawerOverlay";
+var DrawerContent = React.forwardRef(({ className, children, header, showClose = true, closeLabel = "Close navigation", ...props }, ref) => {
+  const close = React.useContext(DrawerOpenContext);
+  return /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+    /* @__PURE__ */ jsx(DrawerOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        ref,
+        className: cn(
+          panel,
+          // The expanded sidebar's width, never more than 85% of the viewport so
+          // a strip of the page stays visible to tap away.
+          "fixed inset-y-0 left-0 z-50 w-72 max-w-[85vw] focus:outline-none data-[state=open]:animate-drawer-in-left data-[state=closed]:animate-drawer-out-left motion-reduce:animate-none",
+          className
+        ),
+        ...props,
+        children: [
+          (header || showClose) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 px-4 py-5", children: [
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: header }),
+            showClose && /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(GlyphButton, { icon: ChevronLeft, label: closeLabel }) })
+          ] }),
+          /* @__PURE__ */ jsx(DrawerContext.Provider, { value: { collapsed: false, close }, children })
+        ]
+      }
+    )
+  ] });
+});
+DrawerContent.displayName = "DrawerContent";
+var DrawerTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Title, { ref, className: cn("px-4", sectionLabel, className), ...props }));
+DrawerTitle.displayName = "DrawerTitle";
+var DrawerDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, { ref, className: cn("sr-only", className), ...props }));
+DrawerDescription.displayName = "DrawerDescription";
+var DrawerBody = ({ className, children, ...props }) => /* @__PURE__ */ jsx(ScrollArea, { className: "min-h-0 flex-1", viewportClassName: cn("px-4 py-4", className), ...props, children });
+DrawerBody.displayName = "DrawerBody";
+var DrawerSection = ({ className, label, children, ...props }) => {
+  const { collapsed } = React.useContext(DrawerContext);
+  return /* @__PURE__ */ jsxs("div", { className: cn("group/section [&+&]:mt-6", className), ...props, children: [
+    collapsed ? /* @__PURE__ */ jsx("div", { role: "separator", className: "mx-2 my-3 border-t border-divider/60 group-first/section:hidden" }) : label && /* @__PURE__ */ jsx("div", { className: cn("mb-2 px-4", sectionLabel), children: label }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children })
+  ] });
+};
+DrawerSection.displayName = "DrawerSection";
+var activeIcon = "[&>span[aria-hidden=true]]:text-status-success";
+var activeRow = cn(
+  "bg-primary/10 bg-gradient-active font-semibold text-foreground ring-1 ring-inset ring-primary/40 shadow-nav-active",
+  activeIcon
+);
+var idleRow = "text-content-secondary hover-gradient-violet hover:text-foreground hover:shadow-raised";
+var DrawerGroupContext = React.createContext(false);
+var DrawerNavItem = React.forwardRef(
+  ({ className, icon, label, active = false, asChild = false, disabledReason, children, title, onClick, ...props }, ref) => {
+    const { collapsed, close } = React.useContext(DrawerContext);
+    const nested = React.useContext(DrawerGroupContext);
+    const reasonId = React.useId();
+    const restricted = (rowClassName, row) => /* @__PURE__ */ jsxs("span", { "data-slot": "drawer-nav-item-restricted", className: "group/tooltip relative block", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          role: "link",
+          "aria-disabled": "true",
+          "aria-describedby": reasonId,
+          tabIndex: 0,
+          title,
+          className: cn(rowClassName, "cursor-not-allowed opacity-50 hover:translate-x-0 hover:scale-100"),
+          children: row
+        }
+      ),
+      /* @__PURE__ */ jsx(TooltipBubble, { id: reasonId, placement: collapsed ? "right" : "bottom", children: disabledReason })
+    ] });
+    if (nested) {
+      const row = /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "flex shrink-0 transition-transform duration-200 hover:scale-110 motion-reduce:transition-none", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: label })
+      ] });
+      const rowProps = {
+        ref,
+        "aria-current": active ? "page" : void 0,
+        title,
+        className: cn(
+          "flex min-w-0 items-center gap-3 rounded-lg px-4 py-2.5 text-caption transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+          active ? cn("bg-primary/10 bg-gradient-active font-semibold text-brand", activeIcon) : "text-content-secondary hover:translate-x-1 hover-gradient-violet hover:text-foreground motion-reduce:hover:translate-x-0",
+          className
+        ),
+        onClick: (event) => {
+          onClick?.(event);
+          close?.();
+        },
+        ...props
+      };
+      if (disabledReason) return restricted(rowProps.className, row);
+      return asChild && React.isValidElement(children) ? /* @__PURE__ */ jsx(Slot, { ...rowProps, children: React.cloneElement(children, void 0, row) }) : /* @__PURE__ */ jsx("a", { ...rowProps, children: row });
+    }
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      icon && /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "flex shrink-0 transition-transform duration-300 group-hover:scale-110 motion-reduce:transition-none",
+          children: icon
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: cn("truncate text-body font-semibold", collapsed && "sr-only"), children: label })
+    ] });
+    const itemProps = {
+      ref,
+      "aria-current": active ? "page" : void 0,
+      title: title ?? (collapsed && typeof label === "string" ? label : void 0),
+      className: cn(
+        "group flex min-w-0 items-center rounded-xl px-4 py-3 transition-all duration-300 hover:scale-[1.02] focus:outline-none focus-visible:ring-2 focus-visible:ring-ring active:scale-95 motion-reduce:transition-none motion-reduce:hover:scale-100",
+        collapsed ? "justify-center" : "gap-4",
+        active ? activeRow : idleRow,
+        className
+      ),
+      // In the mobile drawer, choosing a destination is the end of the errand
+      // -- even when the link prevents the default, as a router link does.
+      onClick: (event) => {
+        onClick?.(event);
+        close?.();
+      },
+      ...props
+    };
+    if (disabledReason) return restricted(itemProps.className, content);
+    const item = asChild && React.isValidElement(children) ? /* @__PURE__ */ jsx(Slot, { ...itemProps, children: React.cloneElement(children, void 0, content) }) : /* @__PURE__ */ jsx("a", { ...itemProps, children: content });
+    return item;
+  }
+);
+DrawerNavItem.displayName = "DrawerNavItem";
+var DrawerNavGroup = ({
+  icon,
+  label,
+  active = false,
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  href: hrefProp,
+  railHref,
+  onNavigate,
+  expandGroupLabel,
+  children,
+  className
+}) => {
+  const href = hrefProp ?? railHref;
+  const { collapsed, close, expand } = React.useContext(DrawerContext);
+  const [uncontrolled, setUncontrolled] = React.useState(defaultOpen ?? active);
+  const open = openProp ?? uncontrolled;
+  const setOpen = (next) => {
+    if (openProp === void 0) setUncontrolled(next);
+    onOpenChange?.(next);
+  };
+  React.useEffect(() => {
+    if (active && openProp === void 0) setUncontrolled(true);
+  }, [active, openProp]);
+  const follow = (event) => {
+    if (!href || !onNavigate) return;
+    event.preventDefault();
+    onNavigate(href);
+  };
+  const panelId = React.useId();
+  const labelId = `${panelId}-label`;
+  const rowClass = cn(
+    "group flex w-full min-w-0 items-center rounded-xl px-4 py-3 text-left transition-all duration-300 hover:scale-[1.02] focus:outline-none focus-visible:ring-2 focus-visible:ring-ring active:scale-95 motion-reduce:transition-none motion-reduce:hover:scale-100",
+    collapsed ? "justify-center" : "gap-4",
+    active ? activeRow : idleRow
+  );
+  const iconNode = icon && /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "flex shrink-0 transition-transform duration-300 group-hover:scale-110 motion-reduce:transition-none",
+      children: icon
+    }
+  );
+  const rowContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    iconNode,
+    /* @__PURE__ */ jsx("span", { id: labelId, className: "min-w-0 flex-1 truncate text-body font-semibold", children: label }),
+    /* @__PURE__ */ jsx(
+      IconGlyph,
+      {
+        glyph: ChevronRight,
+        className: cn(
+          "shrink-0 text-icon-md transition-all duration-300 motion-reduce:transition-none",
+          open && "rotate-90"
+        )
+      }
+    )
+  ] });
+  if (collapsed) {
+    const railTitle = typeof label === "string" ? label : void 0;
+    return href ? /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href,
+        title: railTitle,
+        className: cn(rowClass, className),
+        onClick: (event) => {
+          follow(event);
+          setOpen(true);
+          expand?.();
+          close?.();
+        },
+        children: [
+          iconNode,
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+        ]
+      }
+    ) : expand ? (
+      // No first page to go to: the icon unfolds the sidebar onto the group, open.
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          title: railTitle,
+          "aria-label": expandGroupLabel ?? (railTitle ? `${railTitle}: expand the sidebar to show its pages` : void 0),
+          className: cn(rowClass, className),
+          onClick: () => {
+            setOpen(true);
+            expand();
+          },
+          children: [
+            iconNode,
+            !expandGroupLabel && !railTitle && /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+          ]
+        }
+      )
+    ) : /* @__PURE__ */ jsxs("div", { title: railTitle, className: cn(rowClass, className), children: [
+      iconNode,
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: label })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    !open && href ? (
+      // Closed, with a first page: the row is a link there, and opens.
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href,
+          "aria-expanded": false,
+          "aria-controls": panelId,
+          className: rowClass,
+          onClick: (event) => {
+            follow(event);
+            setOpen(true);
+            close?.();
+          },
+          children: rowContent
+        }
+      )
+    ) : /* @__PURE__ */ jsx("button", { type: "button", "aria-expanded": open, "aria-controls": panelId, className: rowClass, onClick: () => setOpen(!open), children: rowContent }),
+    open && // A named group, so a screen reader says which submenu its pages belong to.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: panelId,
+        role: "group",
+        "aria-labelledby": labelId,
+        className: "mt-2 space-y-1.5 pl-4 data-[state=open]:animate-fade-in motion-reduce:animate-none",
+        "data-state": "open",
+        children: /* @__PURE__ */ jsx(DrawerGroupContext.Provider, { value: true, children })
+      }
+    )
+  ] });
+};
+DrawerNavGroup.displayName = "DrawerNavGroup";
+var DrawerFooter = ({ className, children, ...props }) => /* @__PURE__ */ jsxs("div", { className: cn("px-4 pb-4", className), ...props, children: [
+  /* @__PURE__ */ jsx("div", { role: "separator", className: "mb-4 border-t border-divider/60" }),
+  children
+] });
+DrawerFooter.displayName = "DrawerFooter";
+
+export {
+  useDrawerCollapsed,
+  DrawerSidebar,
+  Drawer,
+  DrawerTrigger,
+  DrawerPortal,
+  DrawerClose,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerBody,
+  DrawerSection,
+  DrawerNavItem,
+  DrawerNavGroup,
+  DrawerFooter
+};

package/dist/web/chunk-VLZMX43R.js

@@ -0,0 +1,45 @@
+"use client";
+
+// src/web/hooks/use-asset-icon.ts
+import { useState, useEffect } from "react";
+var DEFAULT_ICON_CDN_BASE_URL = "https://raw.githubusercontent.com/kaleidoswap/coinmarketcap-icons-cryptos/refs/heads/main/icons/";
+var DICEBEAR_SHAPES_BASE_URL = "https://api.dicebear.com/9.x/shapes/svg";
+var TICKER_MAPPINGS = {
+  SAT: "BTC",
+  None: ""
+};
+var VALID_ICON_TICKER_REGEX = /^[A-Z0-9-]{1,12}$/;
+function getAssetIconUrl(ticker, cdnBaseUrl = DEFAULT_ICON_CDN_BASE_URL) {
+  if (!ticker || ticker.trim() === "") return "";
+  const normalized = ticker.toUpperCase().trim();
+  if (!VALID_ICON_TICKER_REGEX.test(normalized)) return "";
+  if (TICKER_MAPPINGS[normalized] !== void 0) {
+    const mapped = TICKER_MAPPINGS[normalized];
+    if (mapped === "") return "";
+    return getAssetIconUrl(mapped, cdnBaseUrl);
+  }
+  return `${cdnBaseUrl}${normalized.toLowerCase()}.png`;
+}
+function getFallbackAssetIconUrl(seed) {
+  const normalized = seed.trim();
+  if (!normalized) return "";
+  const params = new URLSearchParams({
+    seed: normalized,
+    backgroundType: "gradientLinear",
+    radius: "50"
+  });
+  return `${DICEBEAR_SHAPES_BASE_URL}?${params.toString()}`;
+}
+function useAssetIcon(ticker, cdnBaseUrl) {
+  const [url, setUrl] = useState(() => getAssetIconUrl(ticker, cdnBaseUrl));
+  useEffect(() => {
+    setUrl(getAssetIconUrl(ticker, cdnBaseUrl));
+  }, [ticker, cdnBaseUrl]);
+  return url;
+}
+
+export {
+  getAssetIconUrl,
+  getFallbackAssetIconUrl,
+  useAssetIcon
+};

package/dist/web/chunk-VM6AGMYO.js

@@ -0,0 +1,46 @@
+"use client";
+
+// src/web/utils/amount-display.ts
+var NUMBER_RE = /^-?(?:\d{1,3}(?:,\d{3})+|\d+)(?:\.\d+)?$/;
+function formatDisplayAmountText(value, options = {}) {
+  if (value === null || value === void 0 || value === "") return "";
+  const unit = options.unit ?? "token";
+  const raw = typeof value === "number" ? String(value) : value.trim();
+  const suffixMatch = raw.match(/(\s+[A-Za-z][\w.-]*)$/u);
+  const suffix = suffixMatch?.[1] ?? "";
+  const detectedUnit = suffix.trim() === "BTC" ? "BTC" : suffix.trim() === "sats" ? "sats" : suffix.trim() === "mBTC" ? "mBTC" : unit;
+  const maxDecimals = detectedUnit === "sats" ? 0 : detectedUnit === "BTC" ? 8 : detectedUnit === "mBTC" ? 5 : options.maxDecimals ?? 6;
+  const numeric = suffix ? raw.slice(0, -suffix.length) : raw;
+  const match = numeric.match(NUMBER_RE);
+  if (!match) return raw;
+  const num = parseFloat(numeric.replace(/,/g, ""));
+  if (!Number.isFinite(num)) return raw;
+  const factor = Math.pow(10, maxDecimals);
+  const rounded = Math.round(num * factor) / factor;
+  const formatted = rounded.toLocaleString("en-US", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: maxDecimals
+  });
+  return `${formatted}${suffix}`;
+}
+var DEFAULT_AMOUNT_LOCALE = "en-US";
+function formatAmount(value, options = {}) {
+  if (!Number.isFinite(value)) return String(value);
+  return new Intl.NumberFormat(options.locale ?? DEFAULT_AMOUNT_LOCALE, {
+    maximumFractionDigits: options.maximumFractionDigits ?? 20
+  }).format(value);
+}
+function formatCompactAmount(value, locale = "en-US") {
+  if (!Number.isFinite(value)) return String(value);
+  return new Intl.NumberFormat(locale, {
+    notation: "compact",
+    maximumFractionDigits: 2
+  }).format(value);
+}
+
+export {
+  formatDisplayAmountText,
+  DEFAULT_AMOUNT_LOCALE,
+  formatAmount,
+  formatCompactAmount
+};

package/dist/web/chunk-VNL2QI5B.js

@@ -0,0 +1,43 @@
+"use client";
+import {
+  NetworkBadge
+} from "./chunk-EBQ35SOM.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/swap-badge.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SwapBadge({ from, to, size = "md", className }) {
+  const arrowSize = size === "sm" ? "size-2.5" : "size-3";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn("inline-flex items-center gap-1", className),
+      role: "img",
+      "aria-label": `${from} to ${to}`,
+      children: [
+        /* @__PURE__ */ jsx(NetworkBadge, { network: from, size: size === "sm" ? "sm" : "md" }),
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: cn(arrowSize, "shrink-0 text-secondary-content"),
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 3,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx("path", { d: "M5 12h14M13 6l6 6-6 6" })
+          }
+        ),
+        /* @__PURE__ */ jsx(NetworkBadge, { network: to, size: size === "sm" ? "sm" : "md" })
+      ]
+    }
+  );
+}
+
+export {
+  SwapBadge
+};