kaleido-ui 0.2.2 → 0.2.5

package/dist/web/chunk-QGWVZ5NG.js

@@ -0,0 +1,73 @@
+"use client";
+import {
+  AssetIcon
+} from "./chunk-SGXLWU4V.js";
+import {
+  NETWORK_CONFIG
+} from "./chunk-W4G74KFZ.js";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  AccountBalanceWallet,
+  CheckCircle
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/components/deposit-success-screen.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function DepositSuccessScreen({
+  handleDone,
+  displayTicker,
+  selectedAsset,
+  network,
+  arkSubMode = "ark"
+}) {
+  const net = NETWORK_CONFIG[network];
+  const networkLabel = network === "arkade" ? arkSubMode === "boarding" ? "Arkade Boarding" : "Arkade" : net.label;
+  const isInstant = network === "lightning" || network === "spark";
+  const title = isInstant ? "Payment Received!" : "Deposit Detected!";
+  const subtitle = isInstant ? `Your ${displayTicker} has arrived via ${networkLabel}.` : `Incoming deposit detected via ${networkLabel}. Funds will be available after confirmation.`;
+  return /* @__PURE__ */ jsx("div", { className: "flex h-screen flex-col overflow-hidden bg-background bg-page-radial font-display text-foreground", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center justify-center p-6 text-center", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative mb-8", children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 scale-150 animate-pulse rounded-full bg-secondary/25 blur-2xl" }),
+      /* @__PURE__ */ jsx("div", { className: "relative flex size-20 items-center justify-center rounded-full bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card-hero shadow-glow-brand", children: /* @__PURE__ */ jsx(IconGlyph, { glyph: CheckCircle, className: "size-12 text-brand animate-in zoom-in-50 duration-500" }) })
+    ] }),
+    /* @__PURE__ */ jsx("h1", { className: "mb-2 text-headline font-bold text-gradient-brand", children: title }),
+    /* @__PURE__ */ jsx("p", { className: "mb-8 max-w-[260px] text-caption leading-relaxed text-muted-foreground", children: subtitle }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-10 flex items-center gap-3 rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card-hero px-4 py-3 shadow-card", children: [
+      /* @__PURE__ */ jsx(AssetIcon, { ticker: displayTicker, size: 36 }),
+      /* @__PURE__ */ jsxs("div", { className: "text-left", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-body font-bold text-foreground", children: displayTicker }),
+        /* @__PURE__ */ jsx("p", { className: "text-caption text-foreground/55", children: selectedAsset?.name ?? displayTicker })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "ml-1 flex items-center gap-1 rounded-full px-2.5 py-1 text-xxs font-bold",
+            net.bg,
+            net.text
+          ),
+          children: [
+            net.icon,
+            /* @__PURE__ */ jsx("span", { children: networkLabel })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Button, { variant: "cta", size: "cta", onClick: handleDone, children: [
+      /* @__PURE__ */ jsx(IconGlyph, { glyph: AccountBalanceWallet, className: "text-icon-lg" }),
+      "Back to Wallet"
+    ] })
+  ] }) });
+}
+
+export {
+  DepositSuccessScreen
+};

package/dist/web/chunk-QLUUM53Z.js

@@ -0,0 +1,90 @@
+"use client";
+import {
+  Collapsible,
+  CollapsibleChevron,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "./chunk-Q2IXLUSM.js";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  Tune
+} from "./chunk-XXH4TYKZ.js";
+import {
+  useIsNarrow
+} from "./chunk-MTQ22SKE.js";
+
+// src/web/components/filter-bar.tsx
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function activeFiltersLabel(count) {
+  return `${count} ${count === 1 ? "filter" : "filters"} applied`;
+}
+var defaultCountLabel = (count) => count > 0 ? `${count} active` : "none";
+function FilterBar({
+  activeCount,
+  onClear,
+  children,
+  activeLabel = activeFiltersLabel,
+  clearLabel = "Clear all",
+  filtersLabel = "Filters",
+  countLabel = defaultCountLabel,
+  defaultOpen = false,
+  align = "start",
+  className
+}) {
+  const narrow = useIsNarrow();
+  const [open, setOpen] = useState(defaultOpen);
+  const clear = activeCount > 0 && onClear ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onClear, children: clearLabel }) : null;
+  if (narrow) {
+    return /* @__PURE__ */ jsxs(Collapsible, { open, onOpenChange: setOpen, "data-slot": "filter-bar", "data-layout": "narrow", className: cn("space-y-3", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs(
+          CollapsibleTrigger,
+          {
+            type: "button",
+            "aria-label": `${filtersLabel}, ${countLabel(activeCount)}`,
+            className: "inline-flex h-9 items-center gap-2 rounded-xl bg-muted/40 px-3 text-caption font-semibold text-foreground shadow-raised hover-gradient-violet data-[state=open]:bg-secondary/15 data-[state=open]:text-secondary-content",
+            children: [
+              /* @__PURE__ */ jsx(IconGlyph, { glyph: Tune, className: "text-icon-md" }),
+              filtersLabel,
+              activeCount > 0 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "rounded-full bg-primary/15 px-1.5 text-xxs font-bold text-brand", children: activeCount }),
+              /* @__PURE__ */ jsx(CollapsibleChevron, {})
+            ]
+          }
+        ),
+        clear
+      ] }),
+      /* @__PURE__ */ jsx(CollapsibleContent, { className: "flex flex-col gap-3", children })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "filter-bar",
+      "data-layout": "wide",
+      className: cn("flex flex-wrap items-end gap-3", align === "end" && "justify-end", className),
+      children: [
+        children,
+        activeCount > 0 && // Its own line under the filters, never squeezed in beside them.
+        // The count belongs to the controls above it: a tighter gap than theirs.
+        /* @__PURE__ */ jsxs("div", { className: cn("-mt-1.5 flex basis-full items-center gap-2", align === "end" && "justify-end"), children: [
+          /* @__PURE__ */ jsx("span", { className: "text-caption text-muted-foreground", children: activeLabel(activeCount) }),
+          clear
+        ] })
+      ]
+    }
+  );
+}
+
+export {
+  activeFiltersLabel,
+  FilterBar
+};

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

package/dist/web/chunk-QTZT7QMI.js

@@ -0,0 +1,83 @@
+"use client";
+import {
+  AppIcon
+} from "./chunk-I2N3HZ4M.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  ArkadeNetworkIcon,
+  LightningNetworkIcon,
+  OnchainNetworkIcon,
+  SparkNetworkIcon
+} from "./chunk-WBW5E6LC.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/activity-network-filters.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function getActivityNetworkFilterIcon(filter) {
+  switch (filter) {
+    case "onchain":
+      return /* @__PURE__ */ jsx(OnchainNetworkIcon, { className: "size-3.5" });
+    case "lightning":
+      return /* @__PURE__ */ jsx(LightningNetworkIcon, { className: "size-3.5", alt: "" });
+    case "spark":
+      return /* @__PURE__ */ jsx(SparkNetworkIcon, { className: "size-3.5", alt: "" });
+    case "arkade":
+      return /* @__PURE__ */ jsx(ArkadeNetworkIcon, { className: "size-3.5 rounded", alt: "" });
+    default:
+      return /* @__PURE__ */ jsx(AppIcon, { name: "allNetworks", size: "xs", className: "size-icon-sm" });
+  }
+}
+function ActivityNetworkFilters({
+  filters,
+  activeFilter,
+  onChange,
+  className,
+  ariaLabel = "Filter activity by network"
+}) {
+  if (filters.length <= 1) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "aria-label": ariaLabel,
+      className: cn("flex gap-1.5 overflow-x-auto pb-0.5 no-scrollbar", className),
+      children: filters.map((filter) => {
+        const isActive = activeFilter === filter.value;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": isActive,
+            onClick: () => onChange(filter.value),
+            className: cn(
+              "flex shrink-0 items-center gap-1 rounded-full px-2.5 py-1.5 transition-all",
+              eyebrow,
+              isActive ? "bg-primary bg-gradient-primary text-primary-foreground shadow-button-primary" : "bg-foreground/5 text-muted-foreground hover-gradient-violet hover:text-secondary-content"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "flex size-3 items-center justify-center",
+                  children: filter.icon ?? getActivityNetworkFilterIcon(filter.value)
+                }
+              ),
+              filter.label
+            ]
+          },
+          filter.value
+        );
+      })
+    }
+  );
+}
+
+export {
+  getActivityNetworkFilterIcon,
+  ActivityNetworkFilters
+};

package/dist/web/chunk-QXZ2WY3B.js

@@ -0,0 +1,38 @@
+"use client";
+import {
+  Switch
+} from "./chunk-QRFFLA3N.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/switch-row.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SwitchRow({
+  label,
+  description,
+  checked,
+  disabled,
+  onCheckedChange,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-start justify-between gap-3 rounded-xl bg-muted/40 p-3 shadow-raised transition-colors hover-gradient-violet", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-body font-medium text-foreground", children: label }),
+      description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-caption leading-snug text-muted-foreground", children: description })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Switch,
+      {
+        checked,
+        disabled,
+        onCheckedChange,
+        "aria-label": label
+      }
+    )
+  ] });
+}
+
+export {
+  SwitchRow
+};

package/dist/web/chunk-R2MV4S4U.js

@@ -0,0 +1,50 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/notice-bar.tsx
+import { useEffect, useLayoutEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function NoticeBar({ children, hidden = false, heightVariable = "--kui-notice-height", className }) {
+  const ref = useRef(null);
+  useIsomorphicLayoutEffect(() => {
+    const element = ref.current;
+    const root = typeof document === "undefined" ? null : document.documentElement;
+    if (!root) return;
+    if (hidden || !element) {
+      root.style.removeProperty(heightVariable);
+      return;
+    }
+    const publish = () => root.style.setProperty(heightVariable, `${Math.round(element.getBoundingClientRect().height)}px`);
+    publish();
+    let cleanup;
+    if (typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver(publish);
+      observer.observe(element);
+      cleanup = () => observer.disconnect();
+    } else {
+      window.addEventListener("resize", publish);
+      cleanup = () => window.removeEventListener("resize", publish);
+    }
+    return () => {
+      cleanup();
+      root.style.removeProperty(heightVariable);
+    };
+  }, [hidden, heightVariable]);
+  if (hidden) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "notice-bar",
+      className: cn("fixed inset-x-0 top-0 z-[var(--z-popover)] bg-background/90 bg-gradient-card px-4 py-2 shadow-raised backdrop-blur-xl backdrop-saturate-150", className),
+      children
+    }
+  );
+}
+
+export {
+  NoticeBar
+};

package/dist/web/chunk-RA5YGBRB.js

@@ -0,0 +1,106 @@
+"use client";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  Check,
+  Close,
+  Help
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/components/swap-step-list.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultStatusLabels = {
+  done: "Done",
+  active: "In progress",
+  pending: "To do",
+  failed: "Failed",
+  unknown: "Cannot be checked"
+};
+var dotClass = {
+  done: "bg-primary bg-gradient-primary text-background shadow-glow-primary-soft",
+  active: "bg-secondary bg-gradient-brand text-white shadow-glow-violet",
+  pending: "bg-secondary/15 text-secondary-content ring-1 ring-inset ring-secondary/25",
+  failed: "bg-danger/20 text-danger-fg",
+  unknown: "bg-foreground/8 text-muted-foreground ring-1 ring-inset ring-foreground/10"
+};
+var labelClass = {
+  done: "text-foreground",
+  active: "text-foreground",
+  pending: "text-muted-foreground",
+  failed: "text-danger-fg",
+  unknown: "text-foreground"
+};
+function SwapStepList({ steps, connector = true, statusLabels, className }) {
+  const labels = { ...defaultStatusLabels, ...statusLabels };
+  return (
+    // A checklist's items stand alone, so a hairline rule separates them where
+    // a flow has its rail.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "swap-step-list",
+        className: cn("flex flex-col", !connector && "divide-y divide-divider/35", className),
+        children: steps.map((step, index) => {
+          const isLast = index === steps.length - 1;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-slot": "swap-step",
+              "data-status": step.status,
+              className: cn("flex gap-3", !connector && "py-3 first:pt-0 last:pb-0"),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex w-5 shrink-0 flex-col items-center", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      className: cn(
+                        "flex size-5 items-center justify-center rounded-full text-xxs font-bold",
+                        dotClass[step.status],
+                        step.status === "active" && "animate-pulse"
+                      ),
+                      children: step.status === "done" ? /* @__PURE__ */ jsx(IconGlyph, { glyph: Check, className: "text-icon-sm" }) : step.status === "failed" ? /* @__PURE__ */ jsx(IconGlyph, { glyph: Close, className: "text-icon-sm" }) : step.status === "unknown" ? /* @__PURE__ */ jsx(IconGlyph, { glyph: Help, className: "text-icon-sm" }) : index + 1
+                    }
+                  ),
+                  connector && !isLast && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      className: cn(
+                        "mt-1 w-0.5 flex-1",
+                        step.status === "done" ? "bg-primary/60" : step.status === "active" ? "bg-secondary/40" : "bg-secondary/15"
+                      )
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: cn("min-w-0 flex-1", connector && !isLast ? "pb-4" : "pb-0"), children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                    /* @__PURE__ */ jsxs("p", { className: cn("text-body font-medium", labelClass[step.status]), children: [
+                      /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                        labels[step.status],
+                        ": "
+                      ] }),
+                      step.label
+                    ] }),
+                    step.badges
+                  ] }),
+                  step.description && /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-caption leading-snug text-muted-foreground", children: step.description }),
+                  step.action && /* @__PURE__ */ jsx("div", { className: "mt-2", children: step.action })
+                ] })
+              ]
+            },
+            step.id
+          );
+        })
+      }
+    )
+  );
+}
+
+export {
+  SwapStepList
+};

package/dist/web/chunk-RIOY4LFJ.js

@@ -0,0 +1,141 @@
+"use client";
+import {
+  Icon
+} from "./chunk-A6MSV4MA.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/bottom-nav.tsx
+import { useLayoutEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function BottomNav({
+  activeView,
+  items,
+  onChange,
+  position = "fixed",
+  className
+}) {
+  const trackRef = useRef(null);
+  const blobRef = useRef(null);
+  const buttonRefs = useRef(/* @__PURE__ */ new Map());
+  const placed = useRef(null);
+  useLayoutEffect(() => {
+    const blob = blobRef.current;
+    const button = activeView !== void 0 ? buttonRefs.current.get(activeView) : void 0;
+    if (!blob) return;
+    if (!button) {
+      blob.style.opacity = "0";
+      placed.current = null;
+      return;
+    }
+    const to = { x: button.offsetLeft, w: button.offsetWidth };
+    const from = placed.current;
+    blob.style.opacity = "1";
+    blob.style.width = `${to.w}px`;
+    blob.style.transform = `translateX(${to.x}px)`;
+    placed.current = to;
+    const reduce = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    if (!from || reduce || from.x === to.x && from.w === to.w) return;
+    if (typeof blob.animate !== "function") return;
+    const frame = (center, width, scaleY = 1) => `translateX(${center - width / 2}px) scaleY(${scaleY})`;
+    const fromC = from.x + from.w / 2;
+    const toC = to.x + to.w / 2;
+    const midC = (fromC + toC) / 2;
+    const pinched = Math.min(from.w, to.w) * 0.68;
+    const swollen = to.w * 1.08;
+    blob.animate(
+      [
+        { transform: frame(fromC, from.w), width: `${from.w}px`, offset: 0 },
+        { transform: frame(midC, pinched, 0.72), width: `${pinched}px`, offset: 0.45, easing: "cubic-bezier(0.2, 0.8, 0.3, 1)" },
+        { transform: frame(toC, swollen, 1.04), width: `${swollen}px`, offset: 0.78, easing: "ease-out" },
+        { transform: frame(toC, to.w), width: `${to.w}px`, offset: 1 }
+      ],
+      { duration: 560, easing: "cubic-bezier(0.45, 0, 0.25, 1)" }
+    );
+  }, [activeView, items.length]);
+  useLayoutEffect(() => {
+    const track = trackRef.current;
+    if (!track || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      const blob = blobRef.current;
+      const button = activeView !== void 0 ? buttonRefs.current.get(activeView) : void 0;
+      if (!blob || !button) return;
+      blob.style.width = `${button.offsetWidth}px`;
+      blob.style.transform = `translateX(${button.offsetLeft}px)`;
+      placed.current = { x: button.offsetLeft, w: button.offsetWidth };
+    });
+    observer.observe(track);
+    return () => observer.disconnect();
+  }, [activeView]);
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      className: cn(
+        "w-[90%] max-w-[21.25rem] rounded-full bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card shadow-card-secondary",
+        position === "fixed" ? "fixed bottom-6 left-1/2 z-[var(--z-nav)] -translate-x-1/2" : "relative",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { ref: trackRef, className: "relative flex items-center justify-around px-0 py-2", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            ref: blobRef,
+            "aria-hidden": true,
+            className: "pointer-events-none absolute left-0 top-2 h-[3.25rem] rounded-full bg-primary bg-gradient-primary opacity-0 shadow-button-primary"
+          }
+        ),
+        items.map(({ id, label, icon, iconName, testId }) => {
+          const isActive = activeView === id;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref: (node) => {
+                if (node) buttonRefs.current.set(id, node);
+                else buttonRefs.current.delete(id);
+              },
+              type: "button",
+              onClick: () => onChange(id),
+              "data-testid": testId ?? `bottom-nav-${id}`,
+              className: cn(
+                "relative z-10 flex h-[3.25rem] w-[4rem] flex-col items-center justify-center rounded-full transition-all duration-300",
+                isActive ? "text-primary-foreground" : "text-muted-foreground hover-gradient-violet hover:text-secondary-content active:scale-95"
+              ),
+              children: [
+                iconName ? /* @__PURE__ */ jsxs("div", { className: "relative size-icon-nav", children: [
+                  /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      name: iconName,
+                      className: cn(
+                        "absolute inset-0 size-icon-nav transition-all duration-300",
+                        isActive ? "opacity-0 scale-75" : "opacity-100 scale-100"
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      name: iconName,
+                      filled: true,
+                      className: cn(
+                        "absolute inset-0 size-icon-nav transition-all duration-300",
+                        isActive ? "opacity-100 scale-100" : "opacity-0 scale-75"
+                      )
+                    }
+                  )
+                ] }) : icon ?? null,
+                /* @__PURE__ */ jsx("span", { className: "mt-0.5 max-w-full truncate text-xxs font-semibold leading-none transition-colors duration-300", children: label })
+              ]
+            },
+            id
+          );
+        })
+      ] })
+    }
+  );
+}
+
+export {
+  BottomNav
+};