kaleido-ui 0.2.2 → 0.2.5

package/dist/native/index.js

@@ -1372,60 +1372,6 @@ function ModeToggle({ icon, size = 40, onToggle }) {
   );
 }
 
-// src/tokens/app-semantic.ts
-var appSemanticDark = {
-  // Near-black ramp with a violet cast (~245 deg, low saturation): the
-  // surfaces lean violet, the accents carry the colour — green first.
-  "surface-base": "14 13 22",
-  //  #0E0D16 — deepest bg, sidebar
-  "surface-raised": "20 19 30",
-  // #14131E — page body bg
-  "surface-overlay": "28 26 42",
-  // #1C1A2A — card bg
-  "surface-elevated": "40 38 56",
-  // #282638 — sections inside cards
-  "surface-high": "54 51 74",
-  //    #36334A — hover/active highlights
-  // An inset box inside a card (DisclosureCard), used at /40: on dark it is
-  // the muted fill; on light a cool grey, so the box still reads on white.
-  "surface-inset": "20 19 30",
-  //   #14131E
-  primary: "21 233 154",
-  //         #15E99A
-  "primary-emphasis": "18 201 126",
-  // #12C97E
-  "primary-foreground": "14 13 22",
-  secondary: "111 50 255",
-  //       #6F32FF — brand violet
-  "secondary-emphasis": "84 32 204",
-  // #5420CC
-  "secondary-foreground": "255 255 255",
-  "secondary-content": "164 138 255",
-  // #A48AFF — violet text/icons on dark
-  "content-primary": "237 236 246",
-  // #EDECF6 — cool white
-  "content-secondary": "152 149 180",
-  // #9895B4
-  "content-tertiary": "98 95 124",
-  // #625F7C
-  "content-inverse": "14 13 22",
-  "border-subtle": "38 36 54",
-  //   #262436
-  "border-default": "52 50 72",
-  //  #343248
-  "border-strong": "21 233 154",
-  "status-success": "34 197 94",
-  "status-danger": "248 113 113",
-  "status-warning": "245 158 11",
-  "status-info": "56 189 248",
-  divider: "86 83 110",
-  //          #56536E
-  // Spark's mark is white on dark, black on light.
-  "network-spark": "255 255 255"
-  // #FFFFFF
-};
-var appSemanticOrder = Object.keys(appSemanticDark);
-
 // src/tokens/typography.ts
 var fontFamily = {
   display: "'Satoshi', system-ui, -apple-system, sans-serif",
@@ -1555,84 +1501,12 @@ var shadowLight = {
   toast: `0 0 0 1px ${lightInk(0.06)}, 0 10px 28px -10px ${lightInk(0.2)}`
 };
 
-// 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"]
-};
-
 // src/tokens/transitions.ts
 var transition = {
   fast: "150ms ease-out",
   default: "200ms ease-out",
   slow: "300ms ease-out"
 };
-
-// src/tokens/chart.ts
-var chartSeries = {
-  /** green, violet, azzurro, then yellow, magenta, orange */
-  dark: ["#17b581", "#8374da", "#179fd4", "#b3880f", "#db589e", "#de6907"],
-  light: ["#17b581", "#6851c3", "#0f9cd0", "#dea805", "#c34189", "#fe904d"]
-};
-var chartSeriesLimit = chartSeries.dark.length;
 export {
   ActionButton,
   AlertBanner,

package/dist/web/assets/kaleidoswap-brand.js

@@ -0,0 +1,11 @@
+"use client";
+import {
+  kaleidoswapLogoHorizontalArtwork,
+  kaleidoswapLogoVerticalArtwork,
+  kaleidoswapMarkArtwork
+} from "../chunk-FSQV54O4.js";
+export {
+  kaleidoswapLogoHorizontalArtwork,
+  kaleidoswapLogoVerticalArtwork,
+  kaleidoswapMarkArtwork
+};

package/dist/web/assets/protocol-icons.js

@@ -0,0 +1,7 @@
+"use client";
+import {
+  protocolIcons
+} from "../chunk-WEPSTI3Z.js";
+export {
+  protocolIcons
+};

package/dist/web/chunk-25RRZDZ2.js

@@ -0,0 +1,269 @@
+"use client";
+import {
+  protocolIcons
+} from "./chunk-WEPSTI3Z.js";
+
+// src/web/components/mobile-hero-animation.tsx
+import { useRef, useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var PROTOCOLS = [
+  { name: "Bitcoin", network: "Bitcoin", iconSuffix: "bitcoin/bitcoin-logo.svg" },
+  { name: "Lightning", network: "LN", iconSuffix: "lightning/lightning.svg" },
+  { name: "RGB", network: "RGB20", iconSuffix: "rgb/rgb-logo.svg" },
+  { name: "Spark", network: "Spark", iconSuffix: "spark/Asterisk/Spark Asterisk White.svg" },
+  { name: "Arkade", network: "Arkade", iconSuffix: "arkade/arkade-icon.svg" },
+  { name: "Liquid", network: "Liquid", iconSuffix: "liquid/logo-liquid.svg" },
+  { name: "Taproot Assets", network: "Taproot", iconSuffix: "taproot-assets/tapass-logo.svg" }
+];
+var C = 140;
+var ORBIT_R = 118;
+var BADGE_SIZE = 40;
+var BADGE_HALF = BADGE_SIZE / 2;
+var N = PROTOCOLS.length;
+var PROTOCOL_COLORS = {
+  Bitcoin: "#F7931A",
+  LN: "#fbbf24",
+  RGB20: "#EF4444",
+  Spark: "#FFFFFF",
+  Arkade: "#8B5CF6",
+  Liquid: "#22e1c9",
+  Taproot: "#D1D6D8"
+};
+var hexPath = (r) => {
+  const pts = Array.from({ length: 6 }, (_, i) => {
+    const a = Math.PI / 3 * i - Math.PI / 6;
+    return `${r * Math.cos(a)},${r * Math.sin(a)}`;
+  });
+  return `M${pts.join("L")}Z`;
+};
+var KEYFRAMES = `
+@keyframes mha-orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+@keyframes mha-counter-spin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
+`;
+var MobileHeroAnimation = ({
+  size = 280,
+  className,
+  iconBasePath
+}) => {
+  const containerRef = useRef(null);
+  const [reducedMotion, setReducedMotion] = useState(false);
+  const [isVisible, setIsVisible] = useState(true);
+  useEffect(() => {
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReducedMotion(mq.matches);
+    const handler = (e) => setReducedMotion(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(([entry]) => setIsVisible(entry.isIntersecting), { threshold: 0.1 });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  const anim = !reducedMotion && isVisible;
+  const scale = size / 280;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      style: { position: "relative", width: size, height: size },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: KEYFRAMES }),
+        /* @__PURE__ */ jsxs("div", { style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: 280,
+          height: 280,
+          transformOrigin: "top left",
+          transform: scale !== 1 ? `scale(${scale})` : void 0
+        }, children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              viewBox: "0 0 280 280",
+              width: "280",
+              height: "280",
+              style: { position: "absolute", inset: 0 },
+              xmlns: "http://www.w3.org/2000/svg",
+              children: [
+                /* @__PURE__ */ jsxs("defs", { children: [
+                  /* @__PURE__ */ jsxs("radialGradient", { id: "mh-center-glow", cx: "50%", cy: "50%", r: "50%", children: [
+                    /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#0e9dff", stopOpacity: "0.3" }),
+                    /* @__PURE__ */ jsx("stop", { offset: "40%", stopColor: "#8a5cf6", stopOpacity: "0.15" }),
+                    /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "transparent", stopOpacity: "0" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("linearGradient", { id: "mh-gp", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+                    /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#22c55e" }),
+                    /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#8a5cf6" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("linearGradient", { id: "mh-bp", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
+                    /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "#0e9dff" }),
+                    /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "#8a5cf6" })
+                  ] }),
+                  /* @__PURE__ */ jsxs("filter", { id: "mh-glow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+                    /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "2.5", result: "blur" }),
+                    /* @__PURE__ */ jsxs("feMerge", { children: [
+                      /* @__PURE__ */ jsx("feMergeNode", { in: "blur" }),
+                      /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("circle", { cx: C, cy: C, r: ORBIT_R, fill: "none", stroke: "#0e9dff", strokeWidth: "1", strokeOpacity: "0.25", opacity: "0.4", children: anim && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("animate", { attributeName: "r", values: `${ORBIT_R};${Math.round(ORBIT_R * 1.12)};${ORBIT_R}`, dur: "2.5s", repeatCount: "indefinite" }),
+                  /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.4;0;0.4", dur: "2.5s", repeatCount: "indefinite" })
+                ] }) }),
+                /* @__PURE__ */ jsx("circle", { cx: C, cy: C, r: 80, fill: "none", stroke: "rgba(255,255,255,0.1)", strokeWidth: "1", strokeDasharray: "4 4" }),
+                /* @__PURE__ */ jsx(
+                  "g",
+                  {
+                    style: {
+                      animation: anim ? "mha-orbit-spin 20s linear infinite" : void 0,
+                      transformOrigin: "50% 50%",
+                      transformBox: "view-box"
+                    },
+                    children: PROTOCOLS.map((protocol, i) => {
+                      const angle = i / N * 2 * Math.PI;
+                      const dx = Math.cos(angle);
+                      const dy = Math.sin(angle);
+                      const x1 = C + dx * 28;
+                      const y1 = C + dy * 28;
+                      const x2 = C + dx * (ORBIT_R - BADGE_HALF);
+                      const y2 = C + dy * (ORBIT_R - BADGE_HALF);
+                      const color = PROTOCOL_COLORS[protocol.network] ?? "#ffffff";
+                      const dur = `${2 + i * 0.3}s`;
+                      return /* @__PURE__ */ jsxs("g", { children: [
+                        /* @__PURE__ */ jsx(
+                          "line",
+                          {
+                            x1,
+                            y1,
+                            x2,
+                            y2,
+                            stroke: color,
+                            strokeWidth: "0.8",
+                            strokeDasharray: "2 4",
+                            opacity: "0.25",
+                            children: anim && /* @__PURE__ */ jsx("animate", { attributeName: "stroke-dashoffset", from: "0", to: "-12", dur: `${1.5 + i * 0.2}s`, repeatCount: "indefinite" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("circle", { r: "2", fill: color, opacity: "0", children: anim && /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx("animate", { attributeName: "cx", values: `${x1};${x2}`, dur, repeatCount: "indefinite" }),
+                          /* @__PURE__ */ jsx("animate", { attributeName: "cy", values: `${y1};${y2}`, dur, repeatCount: "indefinite" }),
+                          /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0;0.85;0", dur, repeatCount: "indefinite" }),
+                          /* @__PURE__ */ jsx("animate", { attributeName: "r", values: "1.5;2.5;1.5", dur, repeatCount: "indefinite" })
+                        ] }) })
+                      ] }, `line-${i}`);
+                    })
+                  }
+                ),
+                /* @__PURE__ */ jsx("circle", { cx: C, cy: C, r: "42", fill: "url(#mh-center-glow)", children: anim && /* @__PURE__ */ jsx("animate", { attributeName: "r", values: "38;46;38", dur: "4s", repeatCount: "indefinite" }) }),
+                /* @__PURE__ */ jsx("circle", { cx: C, cy: C, r: "29", fill: "none", stroke: "url(#mh-bp)", strokeWidth: "1", opacity: "0", children: anim && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("animate", { attributeName: "r", values: "27;38", dur: "3s", repeatCount: "indefinite" }),
+                  /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.4;0", dur: "3s", repeatCount: "indefinite" })
+                ] }) }),
+                /* @__PURE__ */ jsx("circle", { cx: C, cy: C, r: "27", fill: "none", stroke: "url(#mh-gp)", strokeWidth: "0.8", opacity: "0", children: anim && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("animate", { attributeName: "r", values: "27;36", dur: "3s", repeatCount: "indefinite", begin: "1.5s" }),
+                  /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.3;0", dur: "3s", repeatCount: "indefinite", begin: "1.5s" })
+                ] }) }),
+                /* @__PURE__ */ jsx("g", { transform: `translate(${C},${C})`, children: /* @__PURE__ */ jsxs("g", { children: [
+                  anim && /* @__PURE__ */ jsx(
+                    "animateTransform",
+                    {
+                      attributeName: "transform",
+                      type: "rotate",
+                      from: "0",
+                      to: "360",
+                      dur: "40s",
+                      repeatCount: "indefinite",
+                      additive: "sum"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("path", { d: hexPath(34), fill: "none", stroke: "url(#mh-gp)", strokeWidth: "1.5", opacity: "0.4", filter: "url(#mh-glow)", children: anim && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("animate", { attributeName: "opacity", values: "0.3;0.65;0.3", dur: "3s", repeatCount: "indefinite" }),
+                    /* @__PURE__ */ jsx("animate", { attributeName: "stroke-width", values: "1.5;2.5;1.5", dur: "3s", repeatCount: "indefinite" })
+                  ] }) })
+                ] }) }),
+                /* @__PURE__ */ jsx("g", { transform: `translate(${C},${C})`, children: /* @__PURE__ */ jsxs("g", { children: [
+                  anim && /* @__PURE__ */ jsx(
+                    "animateTransform",
+                    {
+                      attributeName: "transform",
+                      type: "rotate",
+                      from: "0",
+                      to: "-360",
+                      dur: "40s",
+                      repeatCount: "indefinite",
+                      additive: "sum"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("path", { d: hexPath(32), fill: "rgba(10,15,30,0.75)", stroke: "rgba(255,255,255,0.08)", strokeWidth: "0.5" })
+                ] }) }),
+                /* @__PURE__ */ jsxs("g", { transform: `translate(${C - 18.8},${C - 18.8}) scale(0.0912)`, children: [
+                  /* @__PURE__ */ jsx("path", { d: "M137.306 411.865H0.000244141L68.6795 343.29L137.306 411.865Z", fill: "#6F32FF" }),
+                  /* @__PURE__ */ jsx("path", { d: "M0 0H137.306L68.6267 68.574L0 0Z", fill: "#6F32FF" }),
+                  /* @__PURE__ */ jsx("path", { d: "M137.148 274.559H274.455L411.708 411.866H274.401L137.148 274.559Z", fill: "#17B581" }),
+                  /* @__PURE__ */ jsx("path", { d: "M137.149 274.559L68.6274 205.933L137.201 137.306L274.455 137.411L205.776 206.038L274.456 274.559H137.149Z", fill: "#15E99A" }),
+                  /* @__PURE__ */ jsx("path", { d: "M274.479 0.104797H411.786L274.533 137.411H137.226L274.479 0.104797Z", fill: "#17B581" })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: {
+            position: "absolute",
+            inset: 0,
+            width: 280,
+            height: 280,
+            animation: anim ? "mha-orbit-spin 20s linear infinite" : "none"
+          }, children: PROTOCOLS.map((protocol, i) => {
+            const angle = i / N * 2 * Math.PI;
+            const x = C + Math.cos(angle) * ORBIT_R - BADGE_HALF;
+            const y = C + Math.sin(angle) * ORBIT_R - BADGE_HALF;
+            const color = PROTOCOL_COLORS[protocol.network] ?? "#ffffff";
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  left: x,
+                  top: y,
+                  width: BADGE_SIZE,
+                  height: BADGE_SIZE,
+                  animation: anim ? "mha-counter-spin 20s linear infinite" : "none"
+                },
+                children: /* @__PURE__ */ jsx("div", { style: {
+                  width: "100%",
+                  height: "100%",
+                  borderRadius: "50%",
+                  overflow: "hidden",
+                  background: "rgba(255,255,255,0.05)",
+                  backdropFilter: "blur(4px)",
+                  border: `1px solid ${color}55`,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                }, children: /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: iconBasePath ? `${iconBasePath}/${protocol.iconSuffix}` : protocolIcons[protocol.network] ?? protocol.iconSuffix,
+                    alt: protocol.name,
+                    className: protocol.network === "Spark" ? "kui-mono-icon" : void 0,
+                    style: { width: 20, height: 20, objectFit: "contain" }
+                  }
+                ) })
+              },
+              i
+            );
+          }) })
+        ] })
+      ]
+    }
+  );
+};
+
+export {
+  MobileHeroAnimation
+};

package/dist/web/chunk-2Q5SSNFO.js

@@ -0,0 +1,63 @@
+"use client";
+import {
+  Icon
+} from "./chunk-A6MSV4MA.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/info-panel.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var toneClass = {
+  default: {
+    panel: "bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card shadow-card",
+    icon: "text-secondary-content",
+    title: "text-foreground"
+  },
+  primary: {
+    panel: "bg-primary/10",
+    icon: "text-brand",
+    title: "text-brand"
+  },
+  info: {
+    panel: "bg-info/10 bg-gradient-card shadow-raised",
+    icon: "text-info-fg",
+    title: "text-info-fg"
+  },
+  warning: {
+    panel: "bg-warning/10",
+    icon: "text-warning-fg",
+    title: "text-warning-fg"
+  },
+  danger: {
+    panel: "bg-danger/10",
+    icon: "text-danger-fg",
+    title: "text-danger-fg"
+  },
+  success: {
+    panel: "bg-success/10",
+    icon: "text-success-fg",
+    title: "text-success-fg"
+  }
+};
+function InfoPanel({
+  tone = "info",
+  title,
+  icon = tone === "danger" ? "warning" : tone === "success" ? "check_circle" : "info",
+  children,
+  className
+}) {
+  const styles = toneClass[tone];
+  const renderedIcon = typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, className: cn("mt-0.5 shrink-0 text-icon-xl", styles.icon) }) : icon;
+  return /* @__PURE__ */ jsx("div", { className: cn("rounded-xl p-4", styles.panel, className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+    renderedIcon,
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      title && /* @__PURE__ */ jsx("p", { className: cn("text-body font-bold", styles.title), children: title }),
+      /* @__PURE__ */ jsx("div", { className: cn("text-caption leading-relaxed", title ? "mt-1" : "", styles.title), children })
+    ] })
+  ] }) });
+}
+
+export {
+  InfoPanel
+};

package/dist/web/chunk-2VKFRAX3.js

@@ -0,0 +1,39 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/settings-selector-row.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SettingsSelectorRow({
+  icon,
+  title,
+  description,
+  control,
+  className,
+  iconClassName
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-start justify-between gap-3 rounded-2xl bg-card/55 backdrop-blur-xl backdrop-saturate-150 bg-gradient-card p-5 shadow-card-secondary", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-start gap-3", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex size-10 shrink-0 items-center justify-center rounded-xl bg-secondary/15 text-secondary-content",
+            iconClassName
+          ),
+          children: icon
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-body font-bold tracking-wide text-foreground", children: title }),
+        description && /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-caption font-medium text-muted-foreground", children: description })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "shrink-0", children: control })
+  ] });
+}
+
+export {
+  SettingsSelectorRow
+};