kaleido-ui 0.2.2 → 0.2.5

package/dist/web/chunk-AMIAAHZM.js

@@ -0,0 +1,232 @@
+"use client";
+import {
+  ChartFrame,
+  ChartLegend,
+  ChartTooltip,
+  TICK_FONT,
+  axisTextWidth,
+  chartLabelIndices,
+  chartValueTicks,
+  defaultChartFormat,
+  nextActiveIndex,
+  plotClass,
+  seriesColor,
+  tooltipText,
+  useChartWidth,
+  useSeriesVisibility
+} from "./chunk-CXLGQSHM.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/charts/line-chart.tsx
+import { useId, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var MARGIN = { top: 12, right: 16, bottom: 26, left: 8 };
+function LineChart({
+  data,
+  series: allSeries,
+  label,
+  scaleLabel,
+  area = false,
+  integer = false,
+  formatValue = defaultChartFormat,
+  height = 240,
+  empty,
+  className,
+  ...head
+}) {
+  const [containerRef, width] = useChartWidth();
+  const [active, setActive] = useState(null);
+  const idBase = `line-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  const visibility = useSeriesVisibility(allSeries.map((s) => s.id));
+  const series = allSeries.filter((s) => visibility.isVisible(s.id));
+  const slotOf = (id) => allSeries.findIndex((s) => s.id === id);
+  const count = data.length;
+  if (count === 0 || series.length === 0) return /* @__PURE__ */ jsx(Fragment, { children: empty ?? null });
+  const max = Math.max(0, ...data.flatMap((d) => series.map((s) => d.values[s.id] ?? 0)));
+  const ticks = chartValueTicks(max, { integer });
+  const tickLabels = ticks.map(formatValue);
+  const plotLeft = MARGIN.left + axisTextWidth(tickLabels) + 8;
+  const plotRight = width - MARGIN.right;
+  const plotTop = MARGIN.top;
+  const plotBottom = height - MARGIN.bottom;
+  const plotWidth = Math.max(1, plotRight - plotLeft);
+  const plotHeight = Math.max(1, plotBottom - plotTop);
+  const top = max > 0 ? max : 1;
+  const x = (index) => count === 1 ? plotLeft + plotWidth / 2 : plotLeft + index / (count - 1) * plotWidth;
+  const y = (value) => plotBottom - Math.max(0, value) / top * plotHeight;
+  const labelIndices = chartLabelIndices(count, plotWidth / 72);
+  const showArea = area && series.length === 1;
+  const pathFor = (id) => data.map((d, index) => `${index === 0 ? "M" : "L"}${x(index).toFixed(2)},${y(d.values[id] ?? 0).toFixed(2)}`).join("");
+  const rowsAt = (index) => series.map((s, slot) => ({
+    id: s.id,
+    label: s.label,
+    value: formatValue(data[index].values[s.id] ?? 0),
+    color: seriesColor(slotOf(s.id))
+  }));
+  const onPointerMove = (event) => {
+    const box = event.currentTarget.getBoundingClientRect();
+    const px = (event.clientX - box.left) / box.width * width;
+    const ratio = count === 1 ? 0 : (px - plotLeft) / plotWidth;
+    setActive(Math.max(0, Math.min(count - 1, Math.round(ratio * (count - 1)))));
+  };
+  const onKeyDown = (event) => {
+    if (nextActiveIndex(event.key, active, count) === void 0) return;
+    event.preventDefault();
+    setActive((current) => {
+      const next = nextActiveIndex(event.key, current, count);
+      return next === void 0 ? current : next;
+    });
+  };
+  const activeDatum = active === null ? null : data[active];
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      ...head,
+      label,
+      className,
+      scale: `${scaleLabel} \xB7 linear, from 0`,
+      legend: allSeries.length > 1 ? /* @__PURE__ */ jsx(
+        ChartLegend,
+        {
+          keyShape: "line",
+          items: allSeries.map((s, slot) => ({ id: s.id, label: s.label, color: seriesColor(slot) })),
+          ...visibility.legend
+        }
+      ) : void 0,
+      table: {
+        columns: ["Period", ...series.map((s) => s.label)],
+        rows: data.map((d) => [d.detail ?? d.label, ...series.map((s) => formatValue(d.values[s.id] ?? 0))])
+      },
+      announcement: activeDatum ? tooltipText(activeDatum.detail ?? activeDatum.label, rowsAt(active)) : void 0,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: containerRef,
+          role: "group",
+          "aria-roledescription": "chart",
+          "aria-label": `${label}: ${count} points. Arrow keys move between them.`,
+          tabIndex: 0,
+          onKeyDown,
+          onBlur: () => setActive(null),
+          className: plotClass,
+          children: [
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                width: "100%",
+                height,
+                viewBox: `0 0 ${width} ${height}`,
+                className: "block overflow-visible",
+                "aria-hidden": "true",
+                onPointerMove,
+                onPointerLeave: () => setActive(null),
+                children: [
+                  showArea && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: `${idBase}-wash`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+                    /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: seriesColor(0), stopOpacity: "0.14" }),
+                    /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: seriesColor(0), stopOpacity: "0.04" })
+                  ] }) }),
+                  /* @__PURE__ */ jsx("g", { "data-slot": "chart-y-axis", children: ticks.map((tick, index) => /* @__PURE__ */ jsxs("g", { children: [
+                    /* @__PURE__ */ jsx("line", { x1: plotLeft, x2: plotRight, y1: y(tick), y2: y(tick), stroke: "var(--border)" }),
+                    /* @__PURE__ */ jsx(
+                      "text",
+                      {
+                        x: plotLeft - 8,
+                        y: y(tick),
+                        dy: "0.32em",
+                        textAnchor: "end",
+                        fontSize: TICK_FONT,
+                        fill: "var(--muted-foreground)",
+                        style: { fontVariantNumeric: "tabular-nums" },
+                        children: tickLabels[index]
+                      }
+                    )
+                  ] }, tick)) }),
+                  showArea && /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      "data-slot": "chart-area",
+                      d: `${pathFor(series[0].id)}L${x(count - 1)},${plotBottom}L${x(0)},${plotBottom}Z`,
+                      fill: `url(#${idBase}-wash)`
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("g", { "data-slot": "chart-lines", children: series.map((s, slot) => /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      "data-series": s.id,
+                      d: pathFor(s.id),
+                      fill: "none",
+                      stroke: seriesColor(slotOf(s.id)),
+                      strokeWidth: 2,
+                      strokeLinejoin: "round",
+                      strokeLinecap: "round"
+                    },
+                    s.id
+                  )) }),
+                  /* @__PURE__ */ jsx("g", { "data-slot": "chart-end-markers", children: series.map((s, slot) => /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx: x(count - 1),
+                      cy: y(data[count - 1].values[s.id] ?? 0),
+                      r: 4,
+                      fill: seriesColor(slotOf(s.id)),
+                      stroke: "var(--card)",
+                      strokeWidth: 2
+                    },
+                    s.id
+                  )) }),
+                  active !== null && /* @__PURE__ */ jsxs("g", { "data-slot": "chart-crosshair", children: [
+                    /* @__PURE__ */ jsx("line", { x1: x(active), x2: x(active), y1: plotTop, y2: plotBottom, stroke: "var(--muted-foreground)", strokeWidth: 1 }),
+                    series.map((s, slot) => /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        cx: x(active),
+                        cy: y(data[active].values[s.id] ?? 0),
+                        r: 4,
+                        fill: seriesColor(slotOf(s.id)),
+                        stroke: "var(--card)",
+                        strokeWidth: 2
+                      },
+                      s.id
+                    ))
+                  ] }),
+                  /* @__PURE__ */ jsx("g", { "data-slot": "chart-x-axis", children: labelIndices.map((index) => /* @__PURE__ */ jsx(
+                    "text",
+                    {
+                      x: x(index),
+                      y: plotBottom + 18,
+                      textAnchor: index === 0 && count > 1 ? "start" : index === count - 1 && count > 1 ? "end" : "middle",
+                      fontSize: TICK_FONT,
+                      fill: "var(--muted-foreground)",
+                      children: data[index].label
+                    },
+                    data[index].key
+                  )) })
+                ]
+              }
+            ),
+            activeDatum && /* @__PURE__ */ jsx(
+              ChartTooltip,
+              {
+                title: activeDatum.detail ?? activeDatum.label,
+                rows: rowsAt(active),
+                x: x(active) * (containerRef.current ? containerRef.current.clientWidth / width : 1),
+                y: plotTop,
+                width: containerRef.current?.clientWidth ?? width
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+function AreaChart(props) {
+  return /* @__PURE__ */ jsx(LineChart, { ...props, area: true, className: cn(props.className) });
+}
+
+export {
+  LineChart,
+  AreaChart
+};

package/dist/web/chunk-ASHU5XNR.js

@@ -0,0 +1,21 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/amount.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Amount({ figure, asset, missingAsset = "asset not reported", stacked = false, className }) {
+  if (figure === null || figure === void 0 || figure === "" || figure === "\u2014") {
+    return /* @__PURE__ */ jsx("span", { "data-slot": "amount", className: cn("text-muted-foreground", className), children: "\u2014" });
+  }
+  return /* @__PURE__ */ jsxs("span", { "data-slot": "amount", className: cn(stacked ? "inline-flex flex-col items-start" : "inline", "tabular-nums", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: figure }),
+    " ",
+    /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-caption font-normal text-muted-foreground", children: asset ?? missingAsset })
+  ] });
+}
+
+export {
+  Amount
+};

package/dist/web/chunk-AU5ZGWGA.js

@@ -0,0 +1,247 @@
+"use client";
+import {
+  QrCode
+} from "./chunk-F2LIZX5K.js";
+import {
+  Label
+} from "./chunk-H3GYLFHP.js";
+import {
+  CopyIcon,
+  InvoiceStatusBanner,
+  PaidOverlay
+} from "./chunk-W4G74KFZ.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  Check,
+  ContentCopy,
+  Person,
+  ProgressActivity,
+  Refresh
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/components/deposit-generated-view.tsx
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function parseAssetAmount(amountString, asset) {
+  const value = Number(amountString);
+  if (!Number.isFinite(value)) return 0;
+  return Math.round(value * Math.pow(10, asset?.precision ?? 0));
+}
+function formatAssetAmount(amount, asset) {
+  const precision = asset?.precision ?? 0;
+  return (amount / Math.pow(10, precision)).toLocaleString("en-US", {
+    maximumFractionDigits: precision,
+    minimumFractionDigits: 0
+  });
+}
+function DepositGeneratedView({
+  network,
+  net,
+  isBtc,
+  address,
+  addressLabel,
+  recipientId,
+  arkSubMode,
+  invoiceStatus,
+  isInvoicePending,
+  isInvoicePaid,
+  isInvoiceFailedOrExpired,
+  amount,
+  handleAmountChange,
+  loading,
+  copied,
+  copyToClipboard,
+  getUnitLabel,
+  selectedAsset,
+  maxDepositAmount,
+  setAddress,
+  setRecipientId,
+  setAmount,
+  setInvoiceStatus,
+  showQrNetworkBadge = true,
+  showRegenerate = true,
+  onRegenerate
+}) {
+  const btcAmountId = useId();
+  const assetAmountId = useId();
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3 animate-in fade-in zoom-in-95 duration-300", children: [
+    (network === "lightning" || network === "arkade" && arkSubMode === "ark") && isBtc && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 rounded-xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-2.5 shadow-card", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between px-1", children: /* @__PURE__ */ jsx(Label, { htmlFor: btcAmountId, children: "Specify amount (optional)" }) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: btcAmountId,
+          type: "text",
+          value: amount,
+          onChange: handleAmountChange,
+          placeholder: "Any amount",
+          className: "w-full rounded-lg bg-card/55 bg-gradient-card ring-1 ring-inset ring-secondary/15 hover:ring-secondary/35 px-3 py-1.5 font-mono text-caption font-bold text-foreground shadow-inner transition-all placeholder:text-muted-foreground focus:ring-primary/50 focus:shadow-glow-primary-soft focus:outline-none",
+          inputMode: "decimal"
+        }
+      ),
+      amount && /* @__PURE__ */ jsx("p", { className: "text-xxs text-warning-fg/70", children: loading ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(IconGlyph, { glyph: ProgressActivity, className: "animate-spin text-icon-xxs" }),
+        "Updating ",
+        network === "arkade" ? "URI" : "invoice",
+        "..."
+      ] }) : network === "arkade" ? `Unified URI for ${amount} ${getUnitLabel()}` : `Invoice for ${amount} ${getUnitLabel()}` })
+    ] }),
+    network === "lightning" && !isBtc && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 rounded-xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-2.5 shadow-card", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between px-1", children: /* @__PURE__ */ jsx(Label, { htmlFor: assetAmountId, children: "Specify amount (optional)" }) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: assetAmountId,
+          type: "text",
+          value: amount,
+          onChange: handleAmountChange,
+          placeholder: selectedAsset?.ticker ? `Any amount (${selectedAsset.ticker})` : "Any amount",
+          className: "w-full rounded-lg bg-card/55 bg-gradient-card ring-1 ring-inset ring-secondary/15 hover:ring-secondary/35 px-3 py-1.5 font-mono text-caption font-bold text-foreground shadow-inner transition-all placeholder:text-muted-foreground focus:ring-primary/50 focus:shadow-glow-primary-soft focus:outline-none",
+          inputMode: "decimal"
+        }
+      ),
+      amount && /* @__PURE__ */ jsx("p", { className: "text-xxs text-warning-fg/70", children: loading ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(IconGlyph, { glyph: ProgressActivity, className: "animate-spin text-icon-xxs" }),
+        "Updating invoice..."
+      ] }) : `Invoice for ${amount} ${getUnitLabel()}` }),
+      amount && maxDepositAmount > 0 && parseAssetAmount(amount, selectedAsset) > maxDepositAmount && /* @__PURE__ */ jsxs("p", { className: "rounded-lg bg-danger/10 px-2.5 py-1.5 text-xxs text-danger-fg", children: [
+        "Exceeds max: ",
+        formatAssetAmount(maxDepositAmount, selectedAsset),
+        " ",
+        getUnitLabel()
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "relative flex flex-col items-center rounded-2xl bg-white p-3.5 transition-all",
+          style: net.qrGlow,
+          children: [
+            showQrNetworkBadge && network !== "spark" && network !== "arkade" && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "absolute right-2.5 top-2.5 flex items-center gap-1 rounded-full bg-foreground/90 px-1.5 py-0.5 text-xxs font-bold shadow-sm",
+                  net.text
+                ),
+                children: [
+                  net.icon,
+                  /* @__PURE__ */ jsx("span", { children: net.label })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(QrCode, { value: address, size: 188 }),
+            isInvoicePaid && /* @__PURE__ */ jsx(PaidOverlay, {}),
+            loading && !isInvoicePaid && // Loading scrim — sits over the QR while a fresh address/invoice
+            // is being fetched (e.g. after the New Address button).
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center rounded-2xl bg-foreground/80 backdrop-blur-sm", children: /* @__PURE__ */ jsx(IconGlyph, { glyph: ProgressActivity, className: "animate-spin text-icon-3xl text-network-bitcoin-fg" }) })
+          ]
+        }
+      ),
+      (() => {
+        const isAddressCopied = copied === address;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "flex items-center gap-1 rounded-full px-2.5 py-1 transition-all",
+              eyebrow,
+              isAddressCopied ? "bg-primary/10 text-brand shadow-glow-primary-soft" : "bg-secondary/15 text-secondary-content shadow-raised hover-gradient-violet hover:text-foreground"
+            ),
+            onClick: (event) => {
+              event.stopPropagation();
+              void copyToClipboard(address);
+            },
+            children: [
+              /* @__PURE__ */ jsx(IconGlyph, { glyph: isAddressCopied ? Check : ContentCopy, size: "xs" }),
+              isAddressCopied ? "Copied" : network === "lightning" ? "Copy Invoice" : "Copy Address"
+            ]
+          }
+        );
+      })()
+    ] }),
+    network === "lightning" && invoiceStatus && /* @__PURE__ */ jsx(
+      InvoiceStatusBanner,
+      {
+        isInvoicePending,
+        isInvoicePaid,
+        isInvoiceFailedOrExpired,
+        invoiceStatus
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-testid": "deposit-generated-address",
+        "data-address": address,
+        className: cn(
+          "group flex cursor-pointer items-center gap-2 rounded-xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card px-2.5 py-1.5 shadow-card",
+          "transition-all hover-gradient-violet hover:shadow-card-hover active:scale-[0.98]"
+        ),
+        onClick: () => void copyToClipboard(address),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: cn("flex size-5 flex-shrink-0 items-center justify-center rounded-md", net.bg), children: net.icon }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("p", { className: cn(eyebrow, net.text), children: /* @__PURE__ */ jsx("span", { "data-testid": "deposit-address-label", children: addressLabel }) }),
+            /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate font-mono text-tiny text-muted-foreground", children: address.length > 50 ? `${address.slice(0, 18)}...${address.slice(-14)}` : address })
+          ] }),
+          /* @__PURE__ */ jsx(CopyIcon, { copied: copied === address })
+        ]
+      }
+    ),
+    recipientId && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "group flex cursor-pointer items-center gap-2 rounded-xl bg-primary/10 px-2.5 py-1.5 shadow-raised",
+          "transition-all hover:bg-primary/15 active:scale-[0.98]"
+        ),
+        onClick: () => void copyToClipboard(recipientId),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex size-5 flex-shrink-0 items-center justify-center rounded-md bg-primary/15", children: /* @__PURE__ */ jsx(IconGlyph, { glyph: Person, size: "xs", className: "text-brand" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("p", { className: cn("text-brand", eyebrow), children: "Recipient ID" }),
+            /* @__PURE__ */ jsx("p", { className: "mt-0.5 truncate font-mono text-tiny text-muted-foreground", children: recipientId.length > 50 ? `${recipientId.slice(0, 18)}...${recipientId.slice(-14)}` : recipientId })
+          ] }),
+          /* @__PURE__ */ jsx(CopyIcon, { copied: copied === recipientId })
+        ]
+      }
+    ),
+    showRegenerate && /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-1", children: /* @__PURE__ */ jsx(
+      GlyphButton,
+      {
+        label: `New ${network === "lightning" ? "invoice" : "address"}`,
+        variant: "secondary",
+        disabled: loading,
+        onClick: () => {
+          if (onRegenerate) {
+            void onRegenerate();
+            return;
+          }
+          setAddress("");
+          setRecipientId("");
+          setAmount("");
+          setInvoiceStatus(null);
+        },
+        icon: /* @__PURE__ */ jsx(IconGlyph, { glyph: Refresh, "aria-hidden": "true", className: cn(loading && "animate-spin motion-reduce:animate-none") })
+      }
+    ) })
+  ] });
+}
+
+export {
+  DepositGeneratedView
+};

package/dist/web/chunk-AVJ56TMD.js

@@ -0,0 +1,107 @@
+"use client";
+import {
+  InlineSelector
+} from "./chunk-YRRZ22OK.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  ExpandMore
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/components/filter-dropdown.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function FilterDropdown({
+  label,
+  value,
+  options,
+  onChange,
+  className,
+  compact = false,
+  onOpenPanelHeightChange,
+  hideLabel = false
+}) {
+  const selected = options.find((option) => option.id === value) ?? options[0];
+  const specificOptions = options.filter((option) => option.id !== "all");
+  const isFiltered = value !== "all";
+  const scrolls = options.length > 4;
+  const overflowBadge = value === "all" && specificOptions.length > 0 ? /* @__PURE__ */ jsxs("span", { className: "shrink-0 text-xxs font-semibold leading-none text-muted-foreground", children: [
+    "+",
+    specificOptions.length
+  ] }) : null;
+  return /* @__PURE__ */ jsx(
+    InlineSelector,
+    {
+      label,
+      value,
+      options,
+      onChange,
+      className: cn("flex-1", className),
+      panelClassName: "min-w-[140px]",
+      optionClassName: "px-3 py-2.5",
+      scrollClassName: scrolls ? "max-h-none -mr-1" : void 0,
+      scrollViewportClassName: scrolls ? "max-h-[211.5px] pr-1.5" : void 0,
+      onOpenPanelHeightChange,
+      renderTrigger: ({ open }) => /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn(
+            "flex w-full items-center justify-between rounded-2xl leading-none outline-none transition-all",
+            compact ? "gap-1 px-2 py-1.5" : "gap-1.5 px-2.5 py-2",
+            isFiltered ? "bg-primary/10 bg-gradient-active shadow-glow-primary-faint ring-1 ring-inset ring-primary/40" : "bg-foreground/[0.09] shadow-raised backdrop-blur-md hover-gradient-violet",
+            open && !isFiltered && "bg-secondary/15 ring-1 ring-inset ring-secondary/30"
+          ),
+          children: [
+            !hideLabel && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "shrink-0 font-medium uppercase tracking-eyebrow",
+                  compact ? "text-xxs" : "text-mini",
+                  isFiltered ? "text-brand" : "text-foreground/55"
+                ),
+                children: label
+              }
+            ),
+            !hideLabel && overflowBadge,
+            /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 items-center justify-center gap-1.5", children: value === "all" ? hideLabel ? overflowBadge : null : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "flex size-6 shrink-0 items-center justify-center", children: selected?.icon }),
+              /* @__PURE__ */ jsx("span", { className: "truncate text-tiny font-bold text-foreground", children: selected?.label })
+            ] }) }),
+            /* @__PURE__ */ jsx(
+              IconGlyph,
+              {
+                glyph: ExpandMore,
+                className: cn(
+                  "shrink-0 text-icon-xs text-foreground/55 transition-transform",
+                  (open || isFiltered) && "text-secondary-content",
+                  open && "rotate-180"
+                )
+              }
+            )
+          ]
+        }
+      ),
+      renderOption: ({ option, selected: optionSelected }) => /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn(
+            "flex w-full items-center gap-2 leading-none transition-all",
+            optionSelected ? "text-foreground" : "text-foreground/60 hover:text-foreground/90"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "flex size-6 shrink-0 items-center justify-center", children: option.icon }),
+            /* @__PURE__ */ jsx("span", { className: cn("text-caption", optionSelected ? "font-bold" : "font-medium"), children: option.label })
+          ]
+        }
+      )
+    }
+  );
+}
+
+export {
+  FilterDropdown
+};