kaleido-ui 0.2.2 → 0.2.5

package/dist/web/chunk-T2NBG4KF.js

@@ -0,0 +1,276 @@
+"use client";
+import {
+  formatDisplayAmountText
+} from "./chunk-VM6AGMYO.js";
+import {
+  AssetSelector
+} from "./chunk-SVYDLG2C.js";
+import {
+  DottedLeader
+} from "./chunk-CXMCWSWC.js";
+import {
+  cardSurface
+} from "./chunk-GZZ5KVON.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  SwapVert,
+  Warning
+} from "./chunk-XXH4TYKZ.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-T7CEJV6P.js

@@ -0,0 +1,66 @@
+"use client";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/settings-section-card.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SettingsSectionCard({
+  icon,
+  title,
+  description,
+  badge,
+  children,
+  className,
+  bodyClassName
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: cn("space-y-4 rounded-xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-4 shadow-card-secondary", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [
+        icon && /* @__PURE__ */ jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-secondary/15 text-secondary-content", children: icon }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-body font-bold text-foreground", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-caption text-muted-foreground", children: description })
+        ] })
+      ] }),
+      badge
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: bodyClassName, children })
+  ] });
+}
+var badgeToneClass = {
+  primary: "bg-primary/10 text-brand",
+  info: "bg-secondary/15 text-secondary-content",
+  warning: "bg-warning/10 text-warning-fg",
+  danger: "bg-danger/10 text-danger-fg",
+  success: "bg-success/10 text-success-fg",
+  // Theme tokens, not white alphas: on the light theme a white-on-white badge
+  // disappears. On dark these resolve to the same 7% / 55% white.
+  muted: "bg-foreground/[0.07] text-muted-foreground",
+  secondary: "bg-secondary/10 text-secondary-content",
+  // The one badge that is its edge, like the outline Button.
+  outline: "border border-border bg-transparent text-foreground"
+};
+function ToneBadge({ children, tone = "muted", case: letterCase = "upper", className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "tone-badge",
+      className: cn(
+        "rounded-full px-2.5 py-1",
+        letterCase === "upper" ? eyebrow : "text-caption font-semibold tabular-nums",
+        badgeToneClass[tone],
+        className
+      ),
+      children
+    }
+  );
+}
+
+export {
+  SettingsSectionCard,
+  ToneBadge
+};

package/dist/web/chunk-TAA6PO5V.js

@@ -0,0 +1,63 @@
+"use client";
+import {
+  DottedLeader
+} from "./chunk-CXMCWSWC.js";
+import {
+  CopyButton
+} from "./chunk-GEXPB5CG.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  Check,
+  ContentCopy
+} from "./chunk-XXH4TYKZ.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-TI7NWMEQ.js

@@ -0,0 +1,34 @@
+"use client";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/environment-indicator.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function EnvironmentIndicator({ name, qualifier, isTest, className, ...rest }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      role: "status",
+      "data-slot": "environment-indicator",
+      "data-environment": isTest ? "test" : "live",
+      className: cn(
+        "inline-flex shrink-0 items-center gap-2 rounded-full px-3 py-1",
+        isTest ? "bg-warning/10 text-warning-fg" : "bg-success/10 text-success-fg",
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-caption font-semibold", children: name }),
+        /* @__PURE__ */ jsx("span", { className: cn(eyebrow, "text-caption"), children: qualifier })
+      ]
+    }
+  );
+}
+
+export {
+  EnvironmentIndicator
+};

package/dist/web/chunk-TJGHAD5O.js

@@ -0,0 +1,40 @@
+"use client";
+import {
+  CopyButton
+} from "./chunk-GEXPB5CG.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/instants-statement.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function InstantsStatement({
+  description,
+  start,
+  end,
+  startLabel = "Range start",
+  endLabel = "Range end",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "instants-statement", className: cn("space-y-1 text-caption text-muted-foreground", className), ...rest, children: [
+    /* @__PURE__ */ jsx("p", { className: "m-0", children: description }),
+    start || end ? /* @__PURE__ */ jsxs("dl", { className: "m-0 space-y-1", children: [
+      start ? /* @__PURE__ */ jsx(Boundary, { label: startLabel, value: start }) : null,
+      end ? /* @__PURE__ */ jsx(Boundary, { label: endLabel, value: end }) : null
+    ] }) : null
+  ] });
+}
+function Boundary({ label, value }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2", children: [
+    /* @__PURE__ */ jsx("dt", { children: label }),
+    /* @__PURE__ */ jsxs("dd", { className: "m-0 inline-flex items-center gap-1 font-mono text-foreground", children: [
+      /* @__PURE__ */ jsx("span", { className: "select-all break-all", children: value }),
+      /* @__PURE__ */ jsx(CopyButton, { value, label: label.toLowerCase() })
+    ] })
+  ] });
+}
+
+export {
+  InstantsStatement
+};

package/dist/web/chunk-TKRMGN7J.js

@@ -0,0 +1,8 @@
+"use client";
+
+// src/web/utils/field-styles.ts
+var fieldSurface = "rounded-xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card shadow-inner ring-1 ring-inset ring-secondary/15 transition-all placeholder:text-muted-foreground hover:ring-secondary/35 focus-visible:outline-none focus-visible:ring-primary/50 focus-visible:shadow-glow-primary-soft disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:ring-secondary/15";
+
+export {
+  fieldSurface
+};

package/dist/web/chunk-TS4UYWJJ.js

@@ -0,0 +1,105 @@
+"use client";
+
+// src/web/hooks/use-toast.ts
+import * as React from "react";
+var TOAST_LIMIT = 1;
+var TOAST_REMOVE_DELAY = 1e3;
+var count = 0;
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+var toastTimeouts = /* @__PURE__ */ new Map();
+var addToRemoveQueue = (toastId) => {
+  if (toastTimeouts.has(toastId)) return;
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({ type: "REMOVE_TOAST", toastId });
+  }, TOAST_REMOVE_DELAY);
+  toastTimeouts.set(toastId, timeout);
+};
+var reducer = (state, action) => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT)
+      };
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map(
+          (t) => t.id === action.toast.id ? { ...t, ...action.toast } : t
+        )
+      };
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast2) => addToRemoveQueue(toast2.id));
+      }
+      return {
+        ...state,
+        toasts: state.toasts.map(
+          (t) => t.id === toastId || toastId === void 0 ? { ...t, open: false } : t
+        )
+      };
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === void 0) return { ...state, toasts: [] };
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId)
+      };
+  }
+};
+var listeners = [];
+var memoryState = { toasts: [] };
+function dispatch(action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => listener(memoryState));
+}
+function toast({ duration, ...props }) {
+  const effectiveDuration = duration ?? (props.variant === "destructive" ? 12e3 : 4e3);
+  const id = genId();
+  const update = (props2) => dispatch({ type: "UPDATE_TOAST", toast: { ...props2, id } });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      duration: effectiveDuration,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      }
+    }
+  });
+  if (effectiveDuration > 0) {
+    setTimeout(() => dismiss(), effectiveDuration);
+  }
+  return { id, dismiss, update };
+}
+function useToast() {
+  const [state, setState] = React.useState(memoryState);
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) listeners.splice(index, 1);
+    };
+  }, [state]);
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId) => dispatch({ type: "DISMISS_TOAST", toastId })
+  };
+}
+
+export {
+  reducer,
+  toast,
+  useToast
+};