kaleido-ui 0.2.1 → 0.2.4

package/dist/web/chunk-LSY4DY2I.js

@@ -0,0 +1,72 @@
+"use client";
+import {
+  colors
+} from "./chunk-A7MPRLJL.js";
+
+// src/tokens/brand.ts
+var brandMark = {
+  violet: "#6F32FF",
+  green: "#17B581",
+  mint: "#15E99A"
+};
+var themedForeground = {
+  light: {
+    // Brand green at full saturation (no red), as light as it goes and still
+    // clears 4.5:1 on every light surface (4.55:1 on #EFEFF4).
+    brand: "#007D49",
+    "accent-send-fg": "#6428F0",
+    "accent-recv-fg": "#007D49",
+    "success-fg": "#076A43",
+    // a shade under brand: it also sits on a 14% mint tint
+    // Tailwind -800 shades: -700 measured only 3.7 to 4.3:1 on the light ramp.
+    "warning-fg": "#92400E",
+    "danger-fg": "#991B1B",
+    "info-fg": "#1E40AF",
+    "network-bitcoin-fg": "#92400E",
+    "network-lightning-fg": "#854D0E",
+    "network-liquid-fg": "#115E59",
+    "network-arkade-fg": "#5B21B6",
+    "network-spark-fg": "#0D0C14",
+    // Spark is black on light
+    "network-rgb-fg": "#991B1B",
+    "network-taproot-fg": "#464A69"
+  },
+  dark: {
+    brand: colors.primary,
+    "accent-send-fg": "#AD94FB",
+    "accent-recv-fg": colors.primary,
+    "success-fg": colors.success,
+    "warning-fg": colors.warning,
+    // danger #E53535 and info #4290FF are 3.0:1 and 3.2:1 on the elevated
+    // surface. Same hues, lifted until they clear 4.5:1.
+    "danger-fg": "#FF9999",
+    "info-fg": "#8BBDFF",
+    "network-bitcoin-fg": colors.networkText.bitcoin,
+    "network-lightning-fg": colors.networkText.lightning,
+    "network-liquid-fg": colors.networkText.liquid,
+    // The rgb and arkade *-text tokens dip under 4.5:1 on the elevated
+    // surface (3.9 and 4.1), so their -fg twins are lifted a step.
+    "network-arkade-fg": "#B49CF5",
+    "network-spark-fg": colors.network.spark,
+    // and white on dark
+    "network-rgb-fg": "#F09490",
+    "network-taproot-fg": colors.networkText.taproot
+  }
+};
+var themedForegroundOrder = Object.keys(themedForeground.light);
+var halo = {
+  primary: colors.tx.receive,
+  secondary: brandMark.violet,
+  blur: "110px"
+};
+var brandTheme = {
+  /** AA-safe light primary: white on it is 6.3:1, it is 5.1:1 on the light ramp. */
+  lightPrimary: themedForeground.light.brand,
+  /** Lifted dark status colours (see `themedForeground.dark`). */
+  darkDanger: themedForeground.dark["danger-fg"],
+  darkInfo: themedForeground.dark["info-fg"]
+};
+
+export {
+  brandMark
+};

package/dist/web/chunk-LYCLVP26.js

@@ -0,0 +1,101 @@
+"use client";
+import {
+  protocolIcons
+} from "./chunk-WEPSTI3Z.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/network-icon.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function LightningNetworkIcon({
+  className = "size-3.5",
+  alt = "Lightning"
+}) {
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: "/icons/lightning/lightning.svg",
+      alt,
+      className: cn("object-contain", className)
+    }
+  );
+}
+function SparkNetworkIcon({ className = "size-3.5", alt = "Spark" }) {
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: "/icons/spark/Asterisk/Spark Asterisk White.svg",
+      alt,
+      className: cn("kui-mono-icon object-contain", className)
+    }
+  );
+}
+function ArkadeNetworkIcon({
+  className = "size-3.5 rounded-sm",
+  alt = "Arkade"
+}) {
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: "/icons/arkade/arkade-icon.svg",
+      alt,
+      className: cn("object-contain", className)
+    }
+  );
+}
+function NostrNetworkIcon({
+  className = "size-3.5",
+  alt = "Nostr"
+}) {
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: "/icons/nostr-icon.svg",
+      alt,
+      className: cn("object-contain", className)
+    }
+  );
+}
+function RgbNetworkIcon({ className = "size-3.5", alt = "RGB" }) {
+  return /* @__PURE__ */ jsx("img", { src: protocolIcons["RGB20"], alt, className: cn("object-contain", className) });
+}
+function OnchainNetworkIcon({
+  className = "size-3.5",
+  inherit = false
+}) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      "aria-hidden": true,
+      width: "1em",
+      height: "1em",
+      className: cn("inline-block shrink-0", className),
+      style: inherit ? void 0 : { color: "var(--color-network-bitcoin)" },
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "2", y: "2", width: "8", height: "8", rx: "2", stroke: "none" }),
+        /* @__PURE__ */ jsx("rect", { x: "14", y: "2", width: "8", height: "8", rx: "2", stroke: "none" }),
+        /* @__PURE__ */ jsx("rect", { x: "14", y: "14", width: "8", height: "8", rx: "2", stroke: "none" }),
+        /* @__PURE__ */ jsx("path", { d: "M10 6h4M18 10v4", fill: "none" })
+      ]
+    }
+  );
+}
+function LiquidNetworkIcon({ className = "size-3.5", alt = "Liquid" }) {
+  return /* @__PURE__ */ jsx("img", { src: protocolIcons.Liquid, alt, className: cn("object-contain", className) });
+}
+
+export {
+  LightningNetworkIcon,
+  SparkNetworkIcon,
+  ArkadeNetworkIcon,
+  NostrNetworkIcon,
+  RgbNetworkIcon,
+  OnchainNetworkIcon,
+  LiquidNetworkIcon
+};

package/dist/web/chunk-LZ6PIXUO.js

@@ -0,0 +1,43 @@
+"use client";
+import {
+  CopyButton
+} from "./chunk-QCQRA6L5.js";
+import {
+  Collapsible,
+  CollapsibleChevron,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "./chunk-6IBQJIHT.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/value-list.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ValueList({ values, singular, plural, emptyLabel = "None", defaultOpen = false, className }) {
+  if (values.length === 0) {
+    return /* @__PURE__ */ jsx("span", { className: cn("text-caption text-muted-foreground", className), children: emptyLabel });
+  }
+  const summary = `${values.length} ${values.length === 1 ? singular : plural}`;
+  return /* @__PURE__ */ jsxs(Collapsible, { defaultOpen, "data-slot": "value-list", className: cn("min-w-0", className), children: [
+    /* @__PURE__ */ jsxs(
+      CollapsibleTrigger,
+      {
+        type: "button",
+        className: "inline-flex items-center gap-1 rounded-lg text-caption font-semibold text-foreground transition-colors hover:text-secondary-content data-[state=open]:text-secondary-content",
+        children: [
+          summary,
+          /* @__PURE__ */ jsx(CollapsibleChevron, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("ul", { className: "m-0 mt-2 list-none space-y-1 p-0", children: values.map((value, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1 rounded-xl kui-well px-3 py-1.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 select-all break-all font-mono text-caption text-foreground", children: value }),
+      /* @__PURE__ */ jsx(CopyButton, { value, label: singular })
+    ] }, `${index}-${value}`)) }) })
+  ] });
+}
+
+export {
+  ValueList
+};

package/dist/web/chunk-LZ723UCB.js

@@ -0,0 +1,96 @@
+"use client";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  Close
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/primitives/dialog.tsx
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogClose = DialogPrimitive.Close;
+var DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-background/80 bg-page-radial backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var DialogContent = React.forwardRef(({ className, children, showClose = true, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        // True-center with ZERO positional animation. The -50%/-50% centering
+        // lives on the CSS `translate` property ([translate:-50%_-50%]), NOT
+        // on `transform` — the tailwindcss-animate keyframes override the
+        // whole `transform` property while animating, so any transform-based
+        // centering (translate-x-[-50%] + slide-in-from-left-1/2) gets
+        // re-interpolated per frame and reads as a drift from the left.
+        // With centering out of `transform`, the entrance/exit is purely a
+        // fast fade + 0.98↔1 zoom (150ms ease-out) around the dialog's own
+        // center. No slide-in/out utilities may ever be added back here.
+        // (BottomSheet owns its own slide-up; it does not use this.)
+        // Its one edge is the popover shadow's hairline.
+        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-sm [translate:-50%_-50%] gap-4 rounded-2xl bg-card bg-gradient-card-hero p-6 shadow-popover duration-150 ease-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-[0.98] data-[state=closed]:zoom-out-[0.98]",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        showClose && /* @__PURE__ */ jsx(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx(GlyphButton, { icon: Close, label: "Close", size: "sm", className: "absolute right-3 top-3" }) })
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className), ...props });
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-between", className), ...props });
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-subhead font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-caption text-muted-foreground", className),
+    ...props
+  }
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogClose,
+  DialogOverlay,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription
+};

package/dist/web/chunk-M6RXTQEL.js

@@ -0,0 +1,90 @@
+"use client";
+import {
+  useIsNarrow
+} from "./chunk-MTQ22SKE.js";
+import {
+  Collapsible,
+  CollapsibleChevron,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "./chunk-6IBQJIHT.js";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  Tune
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.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-MTQ22SKE.js

@@ -0,0 +1,39 @@
+"use client";
+
+// src/web/hooks/use-media-query.ts
+import { useEffect, useState } from "react";
+
+// src/tokens/breakpoints.ts
+var breakpoint = {
+  sm: "40rem",
+  // 640px
+  md: "48rem",
+  // 768px
+  lg: "64rem",
+  // 1024px
+  xl: "80rem"
+  // 1280px
+};
+
+// src/web/hooks/use-media-query.ts
+var matches = (query) => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query).matches : false;
+function useMediaQuery(query) {
+  const [value, setValue] = useState(() => matches(query));
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const list = window.matchMedia(query);
+    const update = () => setValue(list.matches);
+    update();
+    list.addEventListener?.("change", update);
+    return () => list.removeEventListener?.("change", update);
+  }, [query]);
+  return value;
+}
+function useIsNarrow() {
+  return useMediaQuery(`(max-width: calc(${breakpoint.sm} - 0.02px))`);
+}
+
+export {
+  useMediaQuery,
+  useIsNarrow
+};

package/dist/web/chunk-MTQOAMDW.js

@@ -0,0 +1,8 @@
+"use client";
+
+// src/web/utils/type-roles.ts
+var eyebrow = "text-mini font-medium uppercase tracking-eyebrow";
+
+export {
+  eyebrow
+};

package/dist/web/chunk-NEXA6VGG.js

@@ -0,0 +1,91 @@
+"use client";
+import {
+  ListSkeletonRows
+} from "./chunk-5MM5YGGG.js";
+import {
+  InfoPanel
+} from "./chunk-2Q5SSNFO.js";
+import {
+  EmptyState
+} from "./chunk-UZ4LWR4X.js";
+import {
+  Button
+} from "./chunk-OWSKP527.js";
+
+// src/web/components/query-state.tsx
+import { useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function defaultClassifyError(error) {
+  const message = error instanceof Error ? error.message : typeof error === "string" ? error : "Something went wrong.";
+  return { title: "Could not load", message, tone: "danger", retryable: true };
+}
+function QueryState({ announce, ...props }) {
+  const message = useResultAnnouncement(announce, !props.isLoading && !props.error);
+  const body = /* @__PURE__ */ jsx(QueryStateBody, { ...props });
+  if (!announce) return body;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "sr-only", children: message }),
+    body
+  ] });
+}
+function useResultAnnouncement(announce, settled) {
+  const [message, setMessage] = useState("");
+  const spokenFor = useRef(null);
+  const key = announce?.key;
+  const next = announce?.message ?? "";
+  useEffect(() => {
+    if (key === void 0 || !settled) return;
+    if (spokenFor.current === null) {
+      spokenFor.current = key;
+      return;
+    }
+    if (spokenFor.current === key) return;
+    spokenFor.current = key;
+    setMessage(next);
+  }, [key, next, settled]);
+  return message;
+}
+function QueryStateBody({
+  isLoading = false,
+  error,
+  isEmpty = false,
+  children,
+  classifyError = defaultClassifyError,
+  onRetry,
+  retryLabel = "Try again",
+  errorConsequence,
+  emptyTitle = "Nothing here yet",
+  emptyDescription,
+  emptyAction,
+  skeletonRows = 3,
+  loadingLabel = "Loading",
+  errorDetail
+}) {
+  if (isLoading) {
+    return (
+      // aria-busy, so a screen reader reports the region as loading rather than empty.
+      /* @__PURE__ */ jsx("div", { role: "status", "aria-label": loadingLabel, "aria-busy": "true", "data-slot": "query-state", "data-state": "loading", children: /* @__PURE__ */ jsx(ListSkeletonRows, { rows: skeletonRows }) })
+    );
+  }
+  if (error) {
+    const view = classifyError(error);
+    const detail = errorDetail?.(error);
+    return /* @__PURE__ */ jsxs("div", { role: "alert", "data-slot": "query-state", "data-state": "error", className: "space-y-3", children: [
+      /* @__PURE__ */ jsx(InfoPanel, { tone: view.tone, title: view.title, children: /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        errorConsequence && /* @__PURE__ */ jsx("p", { className: "m-0 font-semibold", children: errorConsequence }),
+        /* @__PURE__ */ jsx("p", { className: "m-0", children: view.message }),
+        view.retryable && onRetry && /* @__PURE__ */ jsx(Button, { type: "button", variant: "surface", size: "sm", onClick: onRetry, children: retryLabel })
+      ] }) }),
+      detail ? /* @__PURE__ */ jsx("div", { "data-slot": "query-state-detail", className: "text-caption text-muted-foreground", children: detail }) : null
+    ] });
+  }
+  if (isEmpty) {
+    return /* @__PURE__ */ jsx("div", { "data-slot": "query-state", "data-state": "empty", children: /* @__PURE__ */ jsx(EmptyState, { title: emptyTitle, description: emptyDescription, action: emptyAction }) });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+
+export {
+  defaultClassifyError,
+  QueryState
+};

package/dist/web/chunk-NSA777UY.js

@@ -0,0 +1,89 @@
+"use client";
+import {
+  InlineSelector
+} from "./chunk-Z2SS7UJ4.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  Check,
+  ExpandMore
+} from "./chunk-XXH4TYKZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/option-selector.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function OptionSelector({
+  label,
+  value,
+  options,
+  onChange,
+  compact = false,
+  className,
+  onOpenPanelHeightChange,
+  triggerAlign = "between"
+}) {
+  const selected = options.find((option) => option.id === value) ?? options[0];
+  return /* @__PURE__ */ jsx(
+    InlineSelector,
+    {
+      label,
+      value,
+      options,
+      onChange,
+      className: cn(compact ? "w-auto shrink-0" : "w-full", className),
+      panelClassName: "right-0 left-auto min-w-[11rem] rounded-xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card",
+      optionClassName: "px-3.5 py-2.5 data-[selected]:shadow-none",
+      onOpenPanelHeightChange,
+      renderTrigger: ({ open }) => /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn(
+            "flex h-9 min-w-[4.5rem] items-center gap-1.5 rounded-full bg-foreground/8 px-3.5 text-body font-semibold leading-none text-foreground shadow-raised transition-all hover-gradient-violet",
+            triggerAlign === "center" ? "justify-center" : "justify-between",
+            open && "bg-secondary/20 text-secondary-content ring-1 ring-inset ring-secondary/40 shadow-glow-violet-soft hover-gradient-violet",
+            !compact && "w-full"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate leading-normal", children: selected?.label }),
+            /* @__PURE__ */ jsx(
+              IconGlyph,
+              {
+                glyph: ExpandMore,
+                className: cn(
+                  "shrink-0 text-icon-xs transition-transform",
+                  open ? "rotate-180 text-secondary-content" : "text-muted-foreground"
+                )
+              }
+            )
+          ]
+        }
+      ),
+      renderOption: ({ option, selected: optionSelected }) => /* @__PURE__ */ jsxs("span", { className: "flex w-full items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+          option.icon && /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center", children: option.icon }),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "block truncate text-body",
+                  optionSelected ? "font-semibold text-brand" : "font-medium text-foreground"
+                ),
+                children: option.label
+              }
+            ),
+            option.description && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block truncate text-tiny text-muted-foreground", children: option.description })
+          ] })
+        ] }),
+        optionSelected && /* @__PURE__ */ jsx(IconGlyph, { glyph: Check, className: "text-icon-sm text-secondary-content" })
+      ] })
+    }
+  );
+}
+
+export {
+  OptionSelector
+};

package/dist/web/chunk-O2TTO5FS.js

@@ -0,0 +1,24 @@
+"use client";
+import {
+  Icon
+} from "./chunk-A6MSV4MA.js";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+
+// src/web/primitives/icon-button.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var IconButton = React.forwardRef(({ icon, ...props }, ref) => /* @__PURE__ */ jsx(
+  GlyphButton,
+  {
+    ref,
+    icon: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, "aria-hidden": "true" }) : icon,
+    ...props
+  }
+));
+IconButton.displayName = "IconButton";
+
+export {
+  IconButton
+};