kaleido-ui 0.2.2 → 0.2.4

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
+};

package/dist/web/chunk-IK32AIOS.js

@@ -0,0 +1,27 @@
+"use client";
+import {
+  CopyButton
+} from "./chunk-QCQRA6L5.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/copyable.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Copyable({ value, label, children, mono = true, wrap = false, className }) {
+  return /* @__PURE__ */ jsxs("span", { "data-slot": "copyable", className: cn("inline-flex min-w-0 max-w-full items-center gap-1", className), children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        title: value,
+        className: cn("min-w-0 select-all text-foreground", wrap ? "break-all" : "truncate", mono && "font-mono text-caption"),
+        children: children ?? value
+      }
+    ),
+    /* @__PURE__ */ jsx(CopyButton, { value, label })
+  ] });
+}
+
+export {
+  Copyable
+};

package/dist/web/chunk-IMER4KGH.js

@@ -0,0 +1,151 @@
+"use client";
+import {
+  Input
+} from "./chunk-5GBURTY4.js";
+import {
+  Label
+} from "./chunk-H3GYLFHP.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  Close
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/list-field.tsx
+import { useId, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SEPARATORS = /[\s,]+/;
+function ListField({
+  label,
+  noun,
+  requirement,
+  items,
+  onChange,
+  check = () => null,
+  form,
+  example,
+  error,
+  emptyLabel = "None added.",
+  itemsLabel,
+  removeLabel = (item) => `Remove ${item}`,
+  mono = true,
+  className
+}) {
+  const id = useId();
+  const [draft, setDraft] = useState("");
+  const [draftError, setDraftError] = useState(null);
+  const commit = (text) => {
+    const pieces = text.split(SEPARATORS).filter(Boolean);
+    if (pieces.length === 0) {
+      setDraftError(null);
+      return;
+    }
+    const accepted = [];
+    const rejected = [];
+    let firstProblem = null;
+    for (const piece of pieces) {
+      const problem = check(piece);
+      if (problem === null) {
+        if (!items.includes(piece) && !accepted.includes(piece)) accepted.push(piece);
+      } else {
+        rejected.push(piece);
+        firstProblem ?? (firstProblem = problem);
+      }
+    }
+    if (accepted.length > 0) onChange([...items, ...accepted]);
+    setDraft(rejected.join(", "));
+    setDraftError(firstProblem);
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === ",") {
+      event.preventDefault();
+      commit(draft);
+    } else if (event.key === "Backspace" && draft === "" && items.length > 0) {
+      onChange(items.slice(0, -1));
+    }
+  };
+  const onPaste = (event) => {
+    const text = event.clipboardData.getData("text");
+    if (SEPARATORS.test(text.trim())) {
+      event.preventDefault();
+      commit(`${draft} ${text}`);
+    }
+  };
+  const shown = draftError ?? error ?? null;
+  const groupLabel = itemsLabel ?? (typeof label === "string" ? `${label}: added` : void 0);
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "list-field", className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ jsxs(Label, { htmlFor: id, children: [
+      label,
+      requirement && /* @__PURE__ */ jsxs("span", { className: "font-normal text-muted-foreground", children: [
+        " (",
+        requirement,
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        id,
+        value: draft,
+        onChange: (event) => {
+          setDraft(event.target.value);
+          if (draftError) setDraftError(null);
+        },
+        onKeyDown,
+        onPaste,
+        onBlur: () => draft.trim() !== "" && commit(draft),
+        placeholder: example,
+        autoComplete: "off",
+        spellCheck: false,
+        "aria-invalid": shown ? true : void 0,
+        "aria-describedby": `${id}-help${shown ? ` ${id}-error` : ""}`,
+        className: cn(mono && "font-mono")
+      }
+    ),
+    /* @__PURE__ */ jsxs("p", { id: `${id}-help`, className: "m-0 text-caption text-muted-foreground", children: [
+      form,
+      form ? " " : "",
+      example && /* @__PURE__ */ jsxs(Fragment, { children: [
+        "Example: ",
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: example }),
+        ".",
+        " "
+      ] }),
+      "Press Enter or comma to add each ",
+      noun,
+      "."
+    ] }),
+    shown && /* @__PURE__ */ jsx("p", { id: `${id}-error`, role: "alert", className: "m-0 text-caption text-danger-fg", children: shown }),
+    /* @__PURE__ */ jsx("div", { role: "group", "aria-label": groupLabel, children: items.length === 0 ? /* @__PURE__ */ jsx("p", { className: "m-0 text-caption text-muted-foreground", children: emptyLabel }) : /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-wrap gap-2 p-0", children: items.map((item) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: cn(
+          "inline-flex items-center gap-1 rounded-full bg-foreground/[0.07] py-1 pl-3 pr-1 text-caption text-foreground",
+          mono && "font-mono"
+        ),
+        children: [
+          item,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": removeLabel(item),
+              className: "flex rounded-full p-1 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              onClick: () => onChange(items.filter((other) => other !== item)),
+              children: /* @__PURE__ */ jsx(IconGlyph, { glyph: Close, className: "text-icon-xs" })
+            }
+          )
+        ]
+      },
+      item
+    )) }) })
+  ] });
+}
+
+export {
+  ListField
+};

package/dist/web/chunk-IV6AAVUE.js

@@ -0,0 +1,177 @@
+"use client";
+import {
+  OnchainNetworkIcon
+} from "./chunk-LYCLVP26.js";
+import {
+  protocolIcons
+} from "./chunk-WEPSTI3Z.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/network-badge.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var networkConfig = {
+  L1: {
+    chipVar: "--color-network-bitcoin-chip",
+    accentVar: "--color-network-bitcoin",
+    textVar: "--color-network-bitcoin-text",
+    border: "border-network-bitcoin/20",
+    label: "L1",
+    iconSuffix: "bitcoin/bitcoin-logo.svg"
+  },
+  LN: {
+    chipVar: "--color-network-lightning-chip",
+    accentVar: "--color-network-lightning",
+    textVar: "--color-network-lightning-text",
+    border: "border-network-lightning/20",
+    label: "LN",
+    iconSuffix: "lightning/lightning.svg"
+  },
+  RGB20: {
+    chipVar: "--color-network-rgb-chip",
+    accentVar: "--color-network-rgb",
+    textVar: "--color-network-rgb-text",
+    border: "border-danger/20",
+    label: "RGB",
+    iconSuffix: "rgb/rgb-logo.svg"
+  },
+  RGB21: {
+    chipVar: "--color-network-rgb-chip",
+    accentVar: "--color-network-rgb",
+    textVar: "--color-network-rgb-text",
+    border: "border-danger/20",
+    label: "RGB21",
+    iconSuffix: "rgb/rgb-logo.svg"
+  },
+  "RGB-L1": {
+    chipVar: "--color-network-rgb-chip",
+    accentVar: "--color-network-rgb",
+    textVar: "--color-network-rgb-text",
+    border: "border-danger/20",
+    label: "RGB L1",
+    iconSuffix: "rgb/rgb-logo.svg"
+  },
+  "RGB-LN": {
+    chipVar: "--color-network-rgb-chip",
+    accentVar: "--color-network-rgb",
+    textVar: "--color-network-rgb-text",
+    border: "border-danger/20",
+    label: "RGB LN",
+    iconSuffix: "rgb/rgb-logo.svg"
+  },
+  Spark: {
+    chipVar: "--color-network-spark-chip",
+    accentVar: "--color-network-spark",
+    textVar: "--color-network-spark-text",
+    border: "border-black/20 dark:border-foreground/20",
+    label: "Spark",
+    iconSuffix: "spark/Asterisk/Spark Asterisk White.svg",
+    // The asterisk is white: drawn black on the light theme, like the label.
+    defaultIconClassName: "kui-mono-icon"
+  },
+  Arkade: {
+    chipVar: "--color-network-arkade-chip",
+    accentVar: "--color-network-arkade",
+    textVar: "--color-network-arkade-text",
+    border: "border-network-arkade/20",
+    label: "Arkade",
+    iconSuffix: "arkade/arkade-icon.svg"
+  },
+  Bitcoin: {
+    chipVar: "--color-network-bitcoin-chip",
+    accentVar: "--color-network-bitcoin",
+    textVar: "--color-network-bitcoin-text",
+    border: "border-network-bitcoin/20",
+    label: "Bitcoin",
+    iconSuffix: "bitcoin/bitcoin-logo.svg"
+  },
+  Liquid: {
+    chipVar: "--color-network-liquid-chip",
+    accentVar: "--color-network-liquid",
+    textVar: "--color-network-liquid-text",
+    border: "border-network-liquid/20",
+    label: "Liquid",
+    iconSuffix: "liquid/logo-liquid.svg"
+  },
+  Taproot: {
+    chipVar: "--color-network-taproot-chip",
+    accentVar: "--color-network-taproot",
+    textVar: "--color-network-taproot-text",
+    border: "border-network-taproot/20",
+    label: "Taproot",
+    iconSuffix: "taproot-assets/tapass-logo.svg"
+  }
+};
+function networkChipStyle(network) {
+  const { chipVar, textVar } = networkConfig[network];
+  return { backgroundColor: `var(${chipVar})`, color: `var(${textVar})` };
+}
+function networkChipVars(network) {
+  const { chipVar, textVar, accentVar } = networkConfig[network];
+  return {
+    "--kui-network-chip": `var(${chipVar})`,
+    "--kui-network-text": `var(${textVar})`,
+    "--kui-network-accent": `var(${accentVar})`
+  };
+}
+function NetworkBadge({
+  network,
+  iconBasePath,
+  showLabel,
+  children,
+  size = "md",
+  className,
+  iconClassName
+}) {
+  const { label, iconSuffix, defaultIconClassName } = networkConfig[network];
+  const icon = iconBasePath ? `${iconBasePath}/${iconSuffix}` : protocolIcons[network] ?? `${iconSuffix}`;
+  const shouldShowLabel = showLabel ?? false;
+  const content = children ?? (shouldShowLabel ? label : null);
+  const chipSize = size === "sm" ? "size-6" : size === "lg" ? "size-14" : "size-8";
+  const imageSize = size === "sm" ? "size-3.5" : size === "lg" ? "size-7" : "size-icon-lg";
+  const chipStyle = networkChipStyle(network);
+  const renderGlyph = (className2) => network === "L1" ? /* @__PURE__ */ jsx(OnchainNetworkIcon, { className: className2 }) : /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: icon,
+      alt: network,
+      className: cn(className2, "object-contain", defaultIconClassName, iconClassName)
+    }
+  );
+  if (!content) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "flex items-center justify-center rounded-full shadow-inner",
+          chipSize,
+          className
+        ),
+        style: chipStyle,
+        children: renderGlyph(imageSize)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "flex w-max items-center justify-center gap-1 rounded-full font-bold shadow-inner",
+        size === "sm" ? "px-2 py-1 text-xxs" : size === "lg" ? "gap-2 px-4 py-3 text-body" : "px-2.5 py-1 text-caption",
+        className
+      ),
+      style: chipStyle,
+      children: [
+        renderGlyph(size === "sm" ? "size-3" : size === "lg" ? "size-6" : "size-3.5"),
+        content
+      ]
+    }
+  );
+}
+
+export {
+  networkChipStyle,
+  networkChipVars,
+  NetworkBadge
+};