kaleido-ui 0.2.1 → 0.2.4

package/dist/web/chunk-2VAS6VYJ.js

@@ -0,0 +1,106 @@
+"use client";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  Close
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/primitives/toast.tsx
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var ToastProvider = ToastPrimitives.Provider;
+var ToastViewport = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Viewport,
+  {
+    ref,
+    className: cn(
+      "fixed bottom-20 left-0 right-0 z-[100] flex max-h-screen w-full flex-col items-center p-4 gap-2",
+      className
+    ),
+    ...props
+  }
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+var toastVariants = cva(
+  "group pointer-events-auto relative flex w-full max-w-md items-center justify-between space-x-3 overflow-hidden rounded-xl backdrop-blur-xl p-4 shadow-toast transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-bottom-full data-[state=open]:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card-hero text-foreground",
+        // `destructive` is also the marker the group-[.destructive] parts read.
+        destructive: "destructive bg-danger/20 text-danger-fg"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Toast = React.forwardRef(({ className, variant, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    ToastPrimitives.Root,
+    {
+      ref,
+      className: cn(toastVariants({ variant }), className),
+      ...props
+    }
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+var ToastAction = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Action,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-lg bg-secondary/15 bg-gradient-surface px-3 text-caption font-semibold text-secondary-content shadow-raised transition-all hover-gradient-violet hover:shadow-button-surface-hover focus:outline-none disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:bg-danger/15 group-[.destructive]:bg-none group-[.destructive]:text-danger-fg group-[.destructive]:hover:bg-danger/25",
+      className
+    ),
+    ...props
+  }
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+var ToastClose = React.forwardRef(({ className, label = "Close", variant, ...props }, ref) => /* @__PURE__ */ jsx(ToastPrimitives.Close, { ref, asChild: true, "toast-close": "", ...props, children: /* @__PURE__ */ jsx(
+  GlyphButton,
+  {
+    icon: Close,
+    label,
+    size: "sm",
+    variant: variant === "destructive" ? "danger-subtle" : "quiet",
+    className
+  }
+) }));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+var ToastTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Title,
+  {
+    ref,
+    className: cn("text-body font-semibold text-foreground", className),
+    ...props
+  }
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+var ToastDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitives.Description,
+  {
+    ref,
+    className: cn("text-caption text-muted-foreground", className),
+    ...props
+  }
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+export {
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastTitle,
+  ToastDescription
+};

package/dist/web/chunk-2VKFRAX3.js

@@ -0,0 +1,39 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/settings-selector-row.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SettingsSelectorRow({
+  icon,
+  title,
+  description,
+  control,
+  className,
+  iconClassName
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-start justify-between gap-3 rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-5 shadow-card-secondary", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex size-10 shrink-0 items-center justify-center rounded-xl bg-secondary/15 text-secondary-content",
+            iconClassName
+          ),
+          children: icon
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-body font-bold tracking-wide text-foreground", children: title }),
+        description && /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-caption font-medium text-muted-foreground", children: description })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "shrink-0", children: control })
+  ] });
+}
+
+export {
+  SettingsSelectorRow
+};

package/dist/web/chunk-2Z6KFK4Z.js

@@ -0,0 +1,41 @@
+"use client";
+import {
+  networkChipVars
+} from "./chunk-IV6AAVUE.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/network-status-chip.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function NetworkStatusChip({
+  icon,
+  network,
+  dotClassName,
+  onClick,
+  ariaLabel,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-label": ariaLabel,
+      className: cn(
+        "inline-flex items-center gap-1.5 rounded-full px-1.5 py-1 shadow-raised transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
+        network ? "kui-network-chip" : "bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card hover:bg-accent hover:shadow-glow-violet-soft",
+        className
+      ),
+      style: network ? networkChipVars(network) : void 0,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "shrink-0", children: icon }),
+        dotClassName && /* @__PURE__ */ jsx("span", { className: cn("size-2 rounded-full", dotClassName) })
+      ]
+    }
+  );
+}
+
+export {
+  NetworkStatusChip
+};

package/dist/web/chunk-4246Y2F2.js

@@ -0,0 +1,276 @@
+"use client";
+import {
+  formatDisplayAmountText
+} from "./chunk-VM6AGMYO.js";
+import {
+  AssetSelector
+} from "./chunk-QFIGSIXA.js";
+import {
+  DottedLeader
+} from "./chunk-CXMCWSWC.js";
+import {
+  cardSurface
+} from "./chunk-GZZ5KVON.js";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  SwapVert,
+  Warning
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/swap-input-card.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var PERCENTAGES = [25, 50, 75, 100];
+function SwapInputCard({
+  fromTicker,
+  toTicker,
+  fromSelectedId,
+  toSelectedId,
+  fromInput,
+  fromOptions,
+  toOptions,
+  categories,
+  defaultActiveCategories,
+  fromNetworks,
+  fromQuickAssets,
+  availableText,
+  showMaxText = false,
+  maxText,
+  selectedPercentage = null,
+  percentageDisabled = false,
+  hidePercentages = false,
+  oneWay = false,
+  fromUnitLabel,
+  fromDisplayUnit,
+  fromUnitIsToggle = false,
+  receiveAmount,
+  receiveUnitLabel,
+  receiveDisplayUnit,
+  isLoadingQuote = false,
+  quoteError,
+  quoteRateText,
+  quoteVenueText,
+  quoteVenueTone = "primary",
+  quoteFeeText,
+  quoteExpiresText,
+  quoteExpiresUrgent = false,
+  warning,
+  submitLabel,
+  submitIcon,
+  submitVariant = "cta",
+  submitDisabled = false,
+  onFromTickerChange,
+  onToTickerChange,
+  onFromInputChange,
+  onPercentageClick,
+  onToggleFromUnit,
+  onFlip,
+  onSubmit
+}) {
+  const availableDisplayText = formatDisplayAmountText(availableText, {
+    unit: fromDisplayUnit
+  });
+  const maxDisplayText = maxText ? formatDisplayAmountText(maxText, {
+    unit: fromDisplayUnit
+  }) : void 0;
+  const receiveDisplayText = receiveAmount ? formatDisplayAmountText(receiveAmount, {
+    unit: receiveDisplayUnit
+  }) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative mb-3 flex flex-col rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card-hero shadow-card transition-all duration-300", children: [
+      /* @__PURE__ */ jsxs("div", { className: "p-3.5 pb-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", eyebrow), children: "You Pay" }),
+          !hidePercentages && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: PERCENTAGES.map((percent) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              disabled: percentageDisabled,
+              onClick: () => onPercentageClick(percent),
+              className: cn(
+                "rounded px-1.5 py-0.5 text-xxs font-bold transition-all duration-300 disabled:cursor-not-allowed disabled:opacity-40",
+                selectedPercentage === percent ? "bg-primary bg-gradient-primary text-primary-foreground shadow-button-primary" : "bg-secondary/10 text-secondary-content shadow-raised hover-gradient-violet hover:text-foreground"
+              ),
+              children: [
+                percent,
+                "%"
+              ]
+            },
+            percent
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            AssetSelector,
+            {
+              compact: true,
+              label: "From",
+              selectedTicker: fromTicker,
+              selectedId: fromSelectedId,
+              options: fromOptions,
+              categories,
+              defaultActiveCategories,
+              networks: fromNetworks,
+              quickAssets: fromQuickAssets,
+              disabledId: toSelectedId,
+              onChange: onFromTickerChange
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 overflow-hidden text-right", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                inputMode: "decimal",
+                value: fromInput,
+                maxLength: 24,
+                onChange: (event) => onFromInputChange(event.target.value),
+                placeholder: "0",
+                className: "w-full min-w-0 border-none bg-transparent text-right text-headline font-bold tabular-nums text-foreground placeholder:text-foreground/15 focus:outline-none"
+              }
+            ),
+            fromUnitIsToggle && onToggleFromUnit ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onToggleFromUnit,
+                className: "mt-0.5 text-right text-caption text-muted-foreground transition-colors hover:text-secondary-content",
+                title: "Tap to switch unit",
+                children: fromUnitLabel
+              }
+            ) : /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-caption text-muted-foreground", children: fromUnitLabel })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "mt-2 flex items-center justify-between gap-2", children: /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "min-w-0 max-w-full truncate text-xxs font-medium tabular-nums text-foreground/60",
+            title: showMaxText && maxText ? `Max: ${maxText}` : `Available: ${availableText}`,
+            children: showMaxText && maxDisplayText ? `Max: ${maxDisplayText}` : `Available: ${availableDisplayText}`
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "relative flex h-px items-center justify-center bg-foreground/15", children: /* @__PURE__ */ jsx(
+        GlyphButton,
+        {
+          icon: SwapVert,
+          label: "Flip assets",
+          variant: "secondary",
+          size: "lg",
+          shape: "circle",
+          onClick: onFlip,
+          className: "absolute ring-4 ring-card [&_svg]:transition-transform [&_svg]:duration-500 hover:[&_svg]:rotate-180 motion-reduce:[&_svg]:transition-none"
+        }
+      ) }),
+      /* @__PURE__ */ jsxs("div", { className: "rounded-b-2xl bg-gradient-to-br from-secondary/[0.06] to-primary/[0.08] p-3.5 pt-4 transition-all duration-300", children: [
+        /* @__PURE__ */ jsx("p", { className: cn("mb-2 text-brand/70", eyebrow), children: "You Receive" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            AssetSelector,
+            {
+              compact: true,
+              label: "To",
+              selectedTicker: toTicker,
+              selectedId: toSelectedId,
+              options: toOptions,
+              categories,
+              defaultActiveCategories,
+              disabledId: fromSelectedId,
+              onChange: onToTickerChange
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 text-right", children: [
+            isLoadingQuote ? /* @__PURE__ */ jsx("div", { className: "ml-auto h-8 w-28 animate-pulse rounded-lg bg-secondary/15" }) : receiveAmount ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "block max-w-full truncate text-headline font-bold tabular-nums text-brand",
+                title: receiveAmount,
+                children: receiveDisplayText
+              }
+            ) : /* @__PURE__ */ jsx("span", { className: "text-headline font-bold text-foreground/15", children: "-" }),
+            /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-caption text-muted-foreground", children: receiveUnitLabel || toTicker || "-" })
+          ] })
+        ] })
+      ] })
+    ] }),
+    (quoteError || quoteRateText || quoteVenueText || quoteFeeText || quoteExpiresText) && /* @__PURE__ */ jsx("div", { className: cn(cardSurface.secondary, "p-3"), children: quoteError ? /* @__PURE__ */ jsx("p", { className: "text-center text-caption text-danger-fg", children: quoteError }) : /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+      quoteVenueText && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-caption", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-foreground/55", children: "Provider" }),
+        /* @__PURE__ */ jsx(DottedLeader, {}),
+        /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 font-medium text-foreground/65", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "size-1.5 rounded-full",
+                quoteVenueTone === "spark" && "bg-network-spark",
+                quoteVenueTone === "info" && "bg-info",
+                quoteVenueTone === "primary" && "bg-primary"
+              ),
+              "aria-hidden": true
+            }
+          ),
+          quoteVenueText
+        ] })
+      ] }),
+      quoteRateText && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-caption", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-foreground/55", children: "Rate" }),
+        /* @__PURE__ */ jsx(DottedLeader, {}),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground/65", children: quoteRateText })
+      ] }),
+      (quoteFeeText || quoteExpiresText) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-caption", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-foreground/55", children: "Fee" }),
+        /* @__PURE__ */ jsx(DottedLeader, {}),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          quoteFeeText && /* @__PURE__ */ jsx("span", { className: "text-foreground/65", children: quoteFeeText }),
+          quoteFeeText && quoteExpiresText && /* @__PURE__ */ jsx("span", { className: "text-foreground/15", children: "\xB7" }),
+          quoteExpiresText && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "tabular-nums",
+                quoteExpiresUrgent ? "font-semibold text-warning-fg" : "text-foreground/55"
+              ),
+              children: quoteExpiresText
+            }
+          )
+        ] })
+      ] })
+    ] }) }),
+    warning && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 rounded-xl bg-danger/10 p-3", children: [
+      /* @__PURE__ */ jsx(IconGlyph, { glyph: Warning, size: "sm", className: "mt-0.5 text-danger-fg" }),
+      /* @__PURE__ */ jsx("p", { className: "text-caption leading-relaxed text-danger-fg", children: warning })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: submitVariant,
+        size: "cta",
+        className: "mt-4 w-full",
+        onClick: onSubmit,
+        disabled: submitDisabled,
+        children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center justify-center gap-2", children: [
+          submitIcon,
+          /* @__PURE__ */ jsx("span", { children: submitLabel })
+        ] })
+      }
+    )
+  ] });
+}
+
+export {
+  SwapInputCard
+};

package/dist/web/chunk-4MLPMRXA.js

@@ -0,0 +1,85 @@
+"use client";
+import {
+  fieldSurface
+} from "./chunk-TKRMGN7J.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  KeyboardArrowDown,
+  KeyboardArrowUp
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/primitives/number-input.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var NumberInput = React.forwardRef(
+  ({ className, value, onChange, min, max, step = 1, disabled, ...props }, ref) => {
+    const inputRef = React.useRef(null);
+    const resolvedRef = ref ?? inputRef;
+    const nudge = (direction) => {
+      const el = resolvedRef.current;
+      if (!el) return;
+      const current = parseFloat(el.value) || 0;
+      const next = current + direction * Number(step);
+      const clamped = min !== void 0 ? Math.max(Number(min), next) : next;
+      const final = max !== void 0 ? Math.min(Number(max), clamped) : clamped;
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;
+      nativeInputValueSetter?.call(el, String(final));
+      el.dispatchEvent(new Event("input", { bubbles: true }));
+      el.dispatchEvent(new Event("change", { bubbles: true }));
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: resolvedRef,
+          type: "number",
+          value,
+          onChange,
+          min,
+          max,
+          step,
+          disabled,
+          className: cn(
+            "flex h-12 w-full px-4 py-3 pr-10 text-body",
+            fieldSurface,
+            "[&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [-moz-appearance:textfield]",
+            className
+          ),
+          ...props
+        }
+      ),
+      !disabled && /* @__PURE__ */ jsxs("div", { className: "absolute right-2 top-1/2 -translate-y-1/2 flex flex-col", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            onClick: () => nudge(1),
+            className: "flex items-center justify-center h-4 w-5 rounded text-muted-foreground hover-gradient-violet hover:text-secondary-content transition-colors",
+            children: /* @__PURE__ */ jsx(IconGlyph, { glyph: KeyboardArrowUp, className: "text-icon-sm" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            tabIndex: -1,
+            onClick: () => nudge(-1),
+            className: "flex items-center justify-center h-4 w-5 rounded text-muted-foreground hover-gradient-violet hover:text-secondary-content transition-colors",
+            children: /* @__PURE__ */ jsx(IconGlyph, { glyph: KeyboardArrowDown, className: "text-icon-sm" })
+          }
+        )
+      ] })
+    ] });
+  }
+);
+NumberInput.displayName = "NumberInput";
+
+export {
+  NumberInput
+};