kaleido-ui 0.2.2 → 0.2.4

package/dist/web/chunk-QFIGSIXA.js

@@ -0,0 +1,558 @@
+"use client";
+import {
+  InlineSelector
+} from "./chunk-Z2SS7UJ4.js";
+import {
+  AssetIcon
+} from "./chunk-2REWXJEN.js";
+import {
+  iconBadgeOverlayClass
+} from "./chunk-CZPNI33A.js";
+import {
+  ScrollArea
+} from "./chunk-DCUAE6PX.js";
+import {
+  NetworkBadge
+} from "./chunk-IV6AAVUE.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  Check,
+  ExpandMore,
+  Hub,
+  Search
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/asset-selector.tsx
+import { useState } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function NetworkMiniBadge({ iconUrl, label }) {
+  return /* @__PURE__ */ jsx("span", { className: cn(iconBadgeOverlayClass, "overflow-hidden bg-card"), children: iconUrl ? /* @__PURE__ */ jsx("img", { src: iconUrl, alt: label ?? "", className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsx("span", { className: cn("flex h-full w-full items-center justify-center bg-muted leading-none text-muted-foreground", eyebrow), children: label?.charAt(0) }) });
+}
+function readableTagColor(color) {
+  const raw = color.replace("#", "");
+  const hex = raw.length === 3 ? raw.split("").map((char) => char + char).join("") : raw;
+  if (!/^[0-9a-fA-F]{6}$/.test(hex)) return color;
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  const luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+  return luminance < 0.45 ? `color-mix(in srgb, ${color} 45%, white)` : color;
+}
+var chipBaseClass = cn("shrink-0 rounded-full transition-all duration-200", eyebrow);
+var chipActiveClass = "bg-primary bg-gradient-primary text-primary-foreground shadow-button-primary";
+var chipIdleClass = "bg-surface-card text-text-dimmed shadow-raised hover-gradient-violet hover:text-secondary-content";
+function AssetSelectorNetworkMark({ network }) {
+  return network.iconUrl ? /* @__PURE__ */ jsx("img", { src: network.iconUrl, alt: "", className: "size-4 shrink-0 rounded-full" }) : /* @__PURE__ */ jsx("span", { className: cn("flex size-4 shrink-0 items-center justify-center rounded-full bg-muted leading-none text-muted-foreground", eyebrow), children: network.label.charAt(0) });
+}
+var NETWORK_STACK_VISIBLE = 3;
+function AssetSelectorNetworkFilterTrigger({
+  activeNetworkOption,
+  networks,
+  open,
+  onClick
+}) {
+  const visibleNetworks = networks.slice(0, NETWORK_STACK_VISIBLE);
+  const overflowCount = networks.length - visibleNetworks.length;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-label": activeNetworkOption ? void 0 : "All networks",
+      className: cn(
+        chipBaseClass,
+        "flex items-center gap-1.5 py-1 pl-1.5 pr-2.5",
+        activeNetworkOption || open ? chipActiveClass : chipIdleClass
+      ),
+      children: [
+        activeNetworkOption ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(AssetSelectorNetworkMark, { network: activeNetworkOption }),
+          activeNetworkOption.label
+        ] }) : /* @__PURE__ */ jsxs("span", { className: "flex items-center -space-x-1.5", "aria-hidden": "true", children: [
+          visibleNetworks.map((network) => /* @__PURE__ */ jsx("span", { className: "rounded-full ring-2 ring-card", children: /* @__PURE__ */ jsx(AssetSelectorNetworkMark, { network }) }, network.id)),
+          overflowCount > 0 && /* @__PURE__ */ jsxs("span", { className: "flex size-4 shrink-0 items-center justify-center rounded-full bg-muted text-xxs font-bold leading-none text-muted-foreground ring-2 ring-card", children: [
+            "+",
+            overflowCount
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          IconGlyph,
+          {
+            glyph: ExpandMore,
+            size: "xs",
+            className: cn("shrink-0 transition-transform duration-200", open && "rotate-180")
+          }
+        )
+      ]
+    }
+  );
+}
+function AssetSelector({
+  label,
+  selectedTicker,
+  selectedId,
+  options,
+  categories = [],
+  defaultActiveCategories,
+  networks = [],
+  quickAssets = [],
+  networkFilter,
+  venueFilter,
+  disabled,
+  disabledTicker,
+  disabledId,
+  compact,
+  onOpenPanelHeightChange,
+  onChange
+}) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [activeCategories, setActiveCategories] = useState(
+    defaultActiveCategories ?? categories.map((category) => category.id)
+  );
+  const [activeNetwork, setActiveNetwork] = useState(null);
+  const [networkMenuOpen, setNetworkMenuOpen] = useState(false);
+  const [activeQuickAsset, setActiveQuickAsset] = useState(null);
+  const selectedKey = selectedId ?? selectedTicker;
+  const selected = options.find((option) => option.id === selectedKey) ?? options.find((option) => option.ticker === selectedTicker);
+  const selectedOptionId = selected?.id ?? selectedKey;
+  const hasCategoryFilters = categories.length > 0;
+  const hasNetworkFilter = networks.length > 0;
+  const hasQuickAssets = quickAssets.length > 0;
+  const activeNetworkOption = networks.find((network) => network.id === activeNetwork) ?? null;
+  const filtered = options.filter((option) => {
+    const category = option.category ?? null;
+    const matchesCategory = !hasCategoryFilters || category === null || activeCategories.includes(category);
+    const matchesNetwork = !networkFilter || option.network === networkFilter;
+    const matchesNetworkFilter = !activeNetwork || option.networkId == null || option.networkId === activeNetwork;
+    const matchesQuickAsset = !activeQuickAsset || option.ticker.toUpperCase() === activeQuickAsset;
+    const matchesVenue = !venueFilter || option.venue === venueFilter;
+    if (!matchesCategory || !matchesNetwork || !matchesNetworkFilter || !matchesQuickAsset || !matchesVenue)
+      return false;
+    if (!search) return true;
+    const searchValue = search.toLowerCase();
+    const matchesSearch = option.ticker.toLowerCase().includes(searchValue) || (option.name?.toLowerCase().includes(searchValue) ?? false) || (option.assetId?.toLowerCase().includes(searchValue) ?? false) || (option.network?.toLowerCase().includes(searchValue) ?? false) || (option.networkTag?.label.toLowerCase().includes(searchValue) ?? false) || (option.category?.toLowerCase().includes(searchValue) ?? false);
+    return matchesSearch;
+  }).sort((a, b) => {
+    if (a.id === selectedOptionId) return -1;
+    if (b.id === selectedOptionId) return 1;
+    return a.ticker.localeCompare(b.ticker);
+  });
+  const inlineOptions = filtered.map((option) => ({
+    ...option,
+    id: option.id,
+    label: option.ticker,
+    disabled: option.id === disabledId || option.ticker === disabledTicker
+  }));
+  const categoryLabelById = new Map(categories.map((category) => [category.id, category.label]));
+  const networkFilterButton = hasNetworkFilter && /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
+    /* @__PURE__ */ jsx(
+      AssetSelectorNetworkFilterTrigger,
+      {
+        activeNetworkOption,
+        networks,
+        open: networkMenuOpen,
+        onClick: () => setNetworkMenuOpen((value) => !value)
+      }
+    ),
+    networkMenuOpen && /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-full z-10 mt-1.5 w-48 overflow-hidden rounded-xl bg-popover shadow-popover", children: /* @__PURE__ */ jsxs(ScrollArea, { viewportClassName: "max-h-60 p-1", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setActiveNetwork(null);
+            setNetworkMenuOpen(false);
+          },
+          className: cn(
+            "flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-caption font-semibold transition-colors",
+            activeNetwork === null ? "bg-secondary/15 text-secondary-content" : "text-foreground/75 hover-gradient-violet hover:text-foreground"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(IconGlyph, { glyph: Hub, size: "xs", className: "shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: "All networks" }),
+            activeNetwork === null && /* @__PURE__ */ jsx(IconGlyph, { glyph: Check, size: "xs", className: "shrink-0 text-secondary-content" })
+          ]
+        }
+      ),
+      networks.map((network) => {
+        const isActive = activeNetwork === network.id;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setActiveNetwork(network.id);
+              setNetworkMenuOpen(false);
+            },
+            className: cn(
+              "flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-caption font-semibold transition-colors",
+              isActive ? "bg-secondary/15 text-secondary-content" : "text-foreground/75 hover-gradient-violet hover:text-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(AssetSelectorNetworkMark, { network }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: network.label }),
+              isActive && /* @__PURE__ */ jsx(IconGlyph, { glyph: Check, size: "xs", className: "shrink-0 text-secondary-content" })
+            ]
+          },
+          network.id
+        );
+      })
+    ] }) })
+  ] });
+  const filterControls = (hasQuickAssets || hasCategoryFilters) && /* @__PURE__ */ jsxs(Fragment, { children: [
+    hasQuickAssets && /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap items-center gap-1.5", children: quickAssets.map((quick) => {
+      const tickerKey = quick.ticker.toUpperCase();
+      const isActive = activeQuickAsset === tickerKey;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => setActiveQuickAsset(isActive ? null : tickerKey),
+          className: cn(
+            chipBaseClass,
+            "flex items-center gap-1.5 py-1 pl-1.5 pr-2.5",
+            isActive ? chipActiveClass : chipIdleClass
+          ),
+          children: [
+            quick.iconUrl ? /* @__PURE__ */ jsx("img", { src: quick.iconUrl, alt: "", className: "size-4 shrink-0 rounded-full" }) : /* @__PURE__ */ jsx(AssetIcon, { ticker: quick.ticker, size: 16, className: "shrink-0" }),
+            quick.ticker
+          ]
+        },
+        tickerKey
+      );
+    }) }),
+    hasCategoryFilters && /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setActiveCategories(categories.map((category) => category.id)),
+          className: cn(
+            chipBaseClass,
+            "px-2.5 py-1",
+            activeCategories.length === categories.length ? chipActiveClass : chipIdleClass
+          ),
+          children: "All"
+        }
+      ),
+      categories.map((category) => {
+        const isActive = activeCategories.includes(category.id);
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setActiveCategories(
+              (current) => current.includes(category.id) ? current.filter((value) => value !== category.id) : [...current, category.id]
+            ),
+            className: cn(
+              chipBaseClass,
+              "px-2.5 py-1",
+              isActive ? chipActiveClass : chipIdleClass
+            ),
+            children: category.label
+          },
+          category.id
+        );
+      })
+    ] })
+  ] });
+  const renderAssetOption = (option, optionSelected, optionDisabled) => {
+    const optionCategoryLabel = option.categoryLabel || (option.category ? categoryLabelById.get(option.category) : void 0);
+    const hasNetworkBadge = Boolean(option.networkIconUrl || option.networkTag);
+    return /* @__PURE__ */ jsxs("span", { className: "group flex w-full items-center gap-3 text-body", children: [
+      /* @__PURE__ */ jsxs("span", { className: "relative shrink-0", children: [
+        /* @__PURE__ */ jsx(
+          AssetIcon,
+          {
+            ticker: option.ticker,
+            logoUri: option.icon,
+            size: 38,
+            className: cn(
+              "shrink-0 transition-transform duration-200",
+              !optionDisabled && "group-hover:scale-[1.04]"
+            )
+          }
+        ),
+        hasNetworkBadge && /* @__PURE__ */ jsx(
+          NetworkMiniBadge,
+          {
+            iconUrl: option.networkIconUrl,
+            label: option.networkTag?.label
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-3 text-left", children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex flex-col leading-tight", children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "max-w-full truncate text-body font-bold tracking-wide text-foreground",
+            title: option.name ?? option.ticker,
+            children: option.name ?? option.ticker
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 flex-col items-end gap-0.5", children: [
+          optionSelected ? /* @__PURE__ */ jsx("span", { className: cn("rounded-full bg-primary bg-gradient-primary px-2 py-0.5 text-primary-foreground shadow-button-primary", eyebrow), children: "Current" }) : option.networkTag ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "rounded-full px-2 py-0.5",
+                eyebrow,
+                !option.networkTag.color && "bg-secondary/15 text-secondary-content"
+              ),
+              style: option.networkTag.color ? {
+                backgroundColor: `color-mix(in srgb, ${option.networkTag.color} 15%, transparent)`,
+                color: readableTagColor(option.networkTag.color)
+              } : void 0,
+              children: option.networkTag.label
+            }
+          ) : optionCategoryLabel && /* @__PURE__ */ jsx("span", { className: cn("rounded-full bg-secondary/15 px-2 py-0.5 text-muted-foreground", eyebrow), children: optionCategoryLabel }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "max-w-24 truncate",
+                option.networkTag ? "text-caption text-muted-foreground" : cn(eyebrow, "text-muted-foreground")
+              ),
+              title: optionDisabled ? "In use" : option.ticker,
+              children: optionDisabled ? "In use" : option.ticker
+            }
+          )
+        ] })
+      ] })
+    ] });
+  };
+  if (compact) {
+    const closePanel = () => {
+      setOpen(false);
+      setSearch("");
+      setNetworkMenuOpen(false);
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "relative w-36 flex-shrink-0", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled,
+          onClick: () => !disabled && setOpen((value) => !value),
+          className: cn(
+            "group flex w-full items-center gap-3 rounded-full px-3 py-2 text-left transition-all duration-200 disabled:cursor-not-allowed disabled:opacity-50",
+            open ? "bg-gradient-active ring-1 ring-inset ring-primary/40" : "bg-foreground/5 shadow-raised hover-gradient-violet"
+          ),
+          children: selected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("span", { className: "relative shrink-0", children: [
+              /* @__PURE__ */ jsx(AssetIcon, { ticker: selected.ticker, logoUri: selected.icon, size: 38 }),
+              selected.networkIconUrl || selected.networkTag ? /* @__PURE__ */ jsx(
+                NetworkMiniBadge,
+                {
+                  iconUrl: selected.networkIconUrl,
+                  label: selected.networkTag?.label
+                }
+              ) : selected.network && /* @__PURE__ */ jsx(
+                NetworkBadge,
+                {
+                  network: selected.network,
+                  size: "sm",
+                  className: "absolute -bottom-2 -right-2"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 text-left", children: /* @__PURE__ */ jsx("span", { className: "block truncate text-title font-bold leading-tight text-foreground", children: selected.ticker }) })
+          ] }) : /* @__PURE__ */ jsx("span", { className: "px-1 py-1 text-caption font-semibold text-foreground/55", children: "Select..." })
+        }
+      ),
+      open && typeof document !== "undefined" && createPortal(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "fixed inset-0 z-[var(--z-modal)] flex items-end justify-center bg-black/70 backdrop-blur-sm duration-200 animate-in fade-in sm:items-center sm:p-4",
+            onClick: closePanel,
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex max-h-[85vh] w-full max-w-[26rem] flex-col overflow-hidden rounded-t-2xl bg-popover bg-gradient-card-hero shadow-popover duration-300 animate-in slide-in-from-bottom-8 sm:max-h-[80vh] sm:rounded-2xl sm:slide-in-from-bottom-0 sm:zoom-in-95",
+                onClick: (event) => event.stopPropagation(),
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 bg-secondary/5 px-4 py-3.5", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                      /* @__PURE__ */ jsxs("p", { className: "text-mini font-medium uppercase tracking-eyebrow-wide text-muted-foreground", children: [
+                        label,
+                        " Asset"
+                      ] }),
+                      /* @__PURE__ */ jsxs("p", { className: "mt-1 text-body font-semibold text-foreground/90", children: [
+                        filtered.length,
+                        " option",
+                        filtered.length === 1 ? "" : "s",
+                        " available"
+                      ] })
+                    ] }),
+                    networkFilterButton || selected && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-full bg-secondary/15 px-2.5 py-1 shadow-raised", children: [
+                      /* @__PURE__ */ jsx(AssetIcon, { ticker: selected.ticker, logoUri: selected.icon, size: 18 }),
+                      /* @__PURE__ */ jsx("span", { className: "text-tiny font-semibold text-foreground", children: selected.ticker })
+                    ] })
+                  ] }) }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 px-4 py-3", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                      /* @__PURE__ */ jsx(
+                        IconGlyph,
+                        {
+                          glyph: Search,
+                          size: "sm",
+                          className: "absolute left-3.5 top-1/2 -translate-y-1/2 text-foreground/55"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          autoFocus: true,
+                          type: "text",
+                          value: search,
+                          onChange: (event) => setSearch(event.target.value),
+                          placeholder: "Search...",
+                          className: "h-11 w-full rounded-2xl bg-foreground/[0.06] ring-1 ring-inset ring-border hover:ring-secondary/40 pl-10 pr-3 text-caption text-foreground shadow-inner transition-all placeholder:text-muted-foreground focus:ring-primary/50 focus:shadow-glow-primary-soft focus:outline-none"
+                        }
+                      )
+                    ] }),
+                    filterControls
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "mx-4 h-px bg-border" }),
+                  /* @__PURE__ */ jsx(ScrollArea, { className: "min-h-0 flex-1", viewportClassName: "max-h-[56vh] px-2 py-2 pb-6", children: filtered.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 px-4 py-10 text-center text-caption text-foreground/55", children: [
+                    /* @__PURE__ */ jsx(IconGlyph, { glyph: Search, size: "md", className: "opacity-40" }),
+                    /* @__PURE__ */ jsxs("span", { children: [
+                      "No assets match ",
+                      search ? `"${search}"` : "the active filters"
+                    ] })
+                  ] }) : filtered.map((option) => {
+                    const optionKey = option.id;
+                    const optionSelected = optionKey === selectedOptionId;
+                    const optionDisabled = option.id === disabledId || option.ticker === disabledTicker;
+                    return /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        disabled: optionDisabled,
+                        onClick: () => {
+                          if (optionDisabled) return;
+                          onChange(optionKey);
+                          closePanel();
+                        },
+                        className: cn(
+                          "group flex w-full items-center gap-3 rounded-2xl border px-3 py-3 text-body transition-all duration-200",
+                          optionSelected ? "border-transparent bg-gradient-active ring-1 ring-inset ring-primary/40" : optionDisabled ? "cursor-not-allowed border-transparent bg-foreground/[0.015] opacity-45" : "border-transparent bg-transparent hover-gradient-violet"
+                        ),
+                        children: renderAssetOption(option, optionSelected, optionDisabled)
+                      },
+                      optionKey
+                    );
+                  }) })
+                ]
+              }
+            )
+          }
+        ),
+        document.body
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    InlineSelector,
+    {
+      label,
+      value: selectedOptionId,
+      options: inlineOptions,
+      onChange: (ticker) => {
+        onChange(ticker);
+        setSearch("");
+      },
+      disabled,
+      className: "space-y-1.5",
+      panelClassName: "bg-popover bg-gradient-card-hero p-0 shadow-popover",
+      optionClassName: "mx-1.5 px-3 py-3",
+      onOpenPanelHeightChange,
+      renderTrigger: ({ open: open2 }) => /* @__PURE__ */ jsxs("span", { className: "block", children: [
+        /* @__PURE__ */ jsx("span", { className: cn("mb-1.5 ml-1 block text-muted-foreground", eyebrow), children: label }),
+        /* @__PURE__ */ jsxs("span", { className: "flex w-full items-center justify-between rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card px-4 py-3 text-left shadow-card transition-all duration-200 hover:shadow-card-hover", children: [
+          /* @__PURE__ */ jsx("span", { className: "flex items-center gap-3", children: selected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(AssetIcon, { ticker: selected.ticker, logoUri: selected.icon, size: 32 }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-body font-semibold text-foreground", children: selected.ticker }),
+              /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-caption text-foreground/55", children: selected.name })
+            ] })
+          ] }) : /* @__PURE__ */ jsx("span", { className: "text-caption text-foreground/55", children: "Select asset..." }) }),
+          /* @__PURE__ */ jsx(
+            IconGlyph,
+            {
+              glyph: ExpandMore,
+              size: "sm",
+              className: cn(
+                "ml-2 flex-shrink-0 text-foreground/55 transition-transform duration-200",
+                open2 && "rotate-180"
+              )
+            }
+          )
+        ] })
+      ] }),
+      renderPanelHeader: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "bg-secondary/5 px-4 py-3.5", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxs("p", { className: "text-mini font-medium uppercase tracking-eyebrow-wide text-muted-foreground", children: [
+              label,
+              " Asset"
+            ] }),
+            /* @__PURE__ */ jsxs("p", { className: "mt-1 text-body font-semibold text-foreground/90", children: [
+              filtered.length,
+              " option",
+              filtered.length === 1 ? "" : "s",
+              " available"
+            ] })
+          ] }),
+          networkFilterButton || selected && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-full bg-secondary/15 px-2.5 py-1 shadow-raised", children: [
+            /* @__PURE__ */ jsx(AssetIcon, { ticker: selected.ticker, logoUri: selected.icon, size: 18 }),
+            /* @__PURE__ */ jsx("span", { className: "text-tiny font-semibold text-foreground", children: selected.ticker })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "px-4 py-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(
+              IconGlyph,
+              {
+                glyph: Search,
+                size: "sm",
+                className: "absolute left-3.5 top-1/2 -translate-y-1/2 text-foreground/55"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                autoFocus: true,
+                type: "text",
+                value: search,
+                onChange: (event) => setSearch(event.target.value),
+                placeholder: "Search...",
+                className: "h-11 w-full rounded-2xl bg-foreground/[0.06] ring-1 ring-inset ring-border hover:ring-secondary/40 pl-10 pr-3 text-caption text-foreground shadow-inner transition-all placeholder:text-muted-foreground focus:ring-primary/50 focus:shadow-glow-primary-soft focus:outline-none"
+              }
+            )
+          ] }),
+          filterControls
+        ] })
+      ] }),
+      renderOption: ({ option, selected: optionSelected, disabled: optionDisabled }) => {
+        return renderAssetOption(option, optionSelected, optionDisabled);
+      }
+    }
+  );
+}
+
+export {
+  AssetSelectorNetworkFilterTrigger,
+  AssetSelector
+};

package/dist/web/chunk-QRFFLA3N.js

@@ -0,0 +1,84 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/primitives/switch.tsx
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Switch = React.forwardRef(
+  ({
+    checked = false,
+    onCheckedChange,
+    disabled = false,
+    className,
+    icons,
+    id,
+    title,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "data-slot": dataSlot = "switch",
+    "data-mode": dataMode
+  }, ref) => {
+    const glyph = (on) => cn(
+      "relative z-10 flex size-7 items-center justify-center transition-colors duration-300",
+      checked === on ? "text-brand" : "text-muted-foreground group-hover:text-foreground/80"
+    );
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        id,
+        type: "button",
+        role: "switch",
+        "aria-checked": checked,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy,
+        title,
+        "data-slot": dataSlot,
+        "data-mode": dataMode,
+        "data-state": checked ? "checked" : "unchecked",
+        disabled,
+        onClick: () => onCheckedChange?.(!checked),
+        className: cn(
+          // The base: an inset track and a raised card thumb. Only the off track
+          // is ringed in violet: on light it would otherwise have no edge.
+          "group relative inline-flex shrink-0 cursor-pointer items-center rounded-full p-1 shadow-inner transition-all duration-300",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:shadow-glow-primary-soft",
+          "disabled:pointer-events-none disabled:opacity-50",
+          // The wide track is 18 steps: p-1 + two size-7 glyphs + p-1 leaves 2 between
+          // them, so the thumb's 9-step slide lands exactly on the second glyph.
+          icons ? "h-9 w-18" : "h-6 w-11",
+          !icons && checked ? "bg-primary bg-gradient-primary" : "bg-foreground/8 ring-1 ring-inset ring-secondary/20",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "pointer-events-none absolute left-1 top-1 rounded-full shadow-raised transition-transform duration-300 ease-out motion-reduce:transition-none",
+                icons ? "size-7" : "size-4",
+                // Compact and off, a card thumb would vanish into the track.
+                !icons && !checked ? "bg-secondary-content" : "bg-card bg-gradient-card",
+                checked && (icons ? "translate-x-9" : "translate-x-5")
+              )
+            }
+          ),
+          icons && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: glyph(false), children: icons.off }),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn(glyph(true), "ml-auto"), children: icons.on })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Switch.displayName = "Switch";
+
+export {
+  Switch
+};