@moondreamsdev/dreamer-ui 1.5.9 → 1.6.1

package/dist/components.esm.js

@@ -1,9 +1,10 @@
-import { jsx as u, jsxs as C } from "react/jsx-runtime";
-import { j as v, E as S, C as F, b as V, a as q, Q as G } from "./join-DATGxH1G.js";
-import j, { useState as N, useEffect as A, useCallback as E, useId as $, useMemo as R } from "react";
-function H() {
-  const [o, r] = N(0);
-  return A(() => {
+import { jsx as u, jsxs as y } from "react/jsx-runtime";
+import { join as v } from "./utils.esm.js";
+import j, { useState as E, useEffect as N, useCallback as A, useId as $, useMemo as R, isValidElement as S, cloneElement as V, createElement as F } from "react";
+import { E as q, C as G, b as H, a as K, Q as T } from "./QuestionMarkCircled-4DNhWOBS.js";
+function Q() {
+  const [t, r] = E(0);
+  return N(() => {
     const e = setInterval(() => {
       r((a) => (a + 1) % 3);
     }, 500);
@@ -13,13 +14,13 @@ function H() {
     {
       className: v(
         "rounded-full transition-all duration-500 ease-in-out size-[0.35em] bg-current",
-        o === e && "transform -translate-y-1"
+        t === e && "transform -translate-y-1"
       )
     },
     e
   )) });
 }
-const K = {
+const U = {
   base: "",
   primary: "bg-primary text-primary-foreground hover:bg-primary/85 disabled:bg-muted disabled:text-muted-foreground",
   secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/85 disabled:bg-muted/80 disabled:text-muted-foreground/80",
@@ -27,7 +28,7 @@ const K = {
   outline: "border border-primary text-primary hover:border-primary-foreground hover:text-primary-foreground disabled:border-muted disabled:text-muted",
   link: "underline-offset-4 hover:underline disabled:underline disabled:text-muted",
   danger: "bg-danger text-danger-foreground hover:bg-danger/85 disabled:bg-muted disabled:text-muted-foreground"
-}, T = {
+}, W = {
   stripped: "",
   fitted: "size-fit",
   sm: "px-2 py-1 text-sm",
@@ -35,7 +36,7 @@ const K = {
   lg: "px-6 py-3 text-lg",
   icon: "p-1 w-fit aspect-square",
   full: "p-2 w-full"
-}, Q = {
+}, Z = {
   none: "rounded-none",
   sm: "rounded-sm",
   md: "rounded-md",
@@ -46,50 +47,50 @@ const K = {
   size: "md",
   rounded: "md"
 };
-function ae({
-  variant: o = L.variant,
+function de({
+  variant: t = L.variant,
   size: r,
   rounded: e = L.rounded,
   loading: a,
-  linkTo: t,
-  linkProps: n,
+  linkTo: n,
+  linkProps: o,
   type: d = "button",
   className: i,
   ...l
 }) {
   let f;
-  o === "link" && !r ? f = "fitted" : f = r || L.size;
+  t === "link" && !r ? f = "fitted" : f = r || L.size;
   const s = v(
     "appearance-none focus:outline-none focus:ring not-disabled:hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed transition-all",
-    K[o],
-    T[f],
-    Q[e],
+    U[t],
+    W[f],
+    Z[e],
     a && "relative pointer-events-none",
-    t && "relative",
+    n && "relative",
     i
   );
-  return /* @__PURE__ */ C(
+  return /* @__PURE__ */ y(
     "button",
     {
       ...l,
-      role: t ? "link" : l.role,
-      "aria-label": l["aria-label"] || (n == null ? void 0 : n["aria-label"]),
-      "aria-description": l["aria-description"] || (n == null ? void 0 : n["aria-description"]),
+      role: n ? "link" : l.role,
+      "aria-label": l["aria-label"] || (o == null ? void 0 : o["aria-label"]),
+      "aria-description": l["aria-description"] || (o == null ? void 0 : o["aria-description"]),
       "aria-disabled": l.disabled || a,
       "aria-busy": a,
       type: d,
       className: s,
       children: [
-        a && /* @__PURE__ */ u(H, {}),
+        a && /* @__PURE__ */ u(Q, {}),
         /* @__PURE__ */ u("span", { className: v(a && "invisible"), children: l.children }),
-        t && !l.disabled && /* @__PURE__ */ u(
+        n && !l.disabled && /* @__PURE__ */ u(
           "a",
           {
-            ...n,
+            ...o,
             "aria-hidden": !0,
-            href: t,
-            target: (n == null ? void 0 : n.target) || "_blank",
-            rel: (n == null ? void 0 : n.rel) || "noreferrer",
+            href: n,
+            target: (o == null ? void 0 : o.target) || "_blank",
+            rel: (o == null ? void 0 : o.rel) || "noreferrer",
             className: "absolute inset-0"
           }
         )
@@ -97,8 +98,8 @@ function ae({
     }
   );
 }
-function U({ size: o = 15, color: r = "currentColor" }) {
-  return /* @__PURE__ */ u("svg", { width: o, height: o, className: "inline", viewBox: "0 0 15 15", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ u(
+function _({ size: t = 15, color: r = "currentColor" }) {
+  return /* @__PURE__ */ u("svg", { width: t, height: t, className: "inline", viewBox: "0 0 15 15", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ u(
     "path",
     {
       d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
@@ -108,47 +109,47 @@ function U({ size: o = 15, color: r = "currentColor" }) {
     }
   ) });
 }
-function W(o) {
-  const [r, e] = N(""), a = E((t) => {
-    let n = t, d = "";
-    for (; n && !d; ) {
-      const i = window.getComputedStyle(n).backgroundColor;
-      i && i !== "transparent" && i !== "rgba(0, 0, 0, 0)" && (d = i), n = n.parentElement;
+function J(t) {
+  const [r, e] = E(""), a = A((n) => {
+    let o = n, d = "";
+    for (; o && !d; ) {
+      const i = window.getComputedStyle(o).backgroundColor;
+      i && i !== "transparent" && i !== "rgba(0, 0, 0, 0)" && (d = i), o = o.parentElement;
     }
     return d || "transparent";
   }, []);
-  return A(() => {
-    const t = document.getElementById(o);
-    if (t) {
-      const n = a(t.parentElement);
-      e(n);
+  return N(() => {
+    const n = document.getElementById(t);
+    if (n) {
+      const o = a(n.parentElement);
+      e(o);
     }
-  }, [o, a]), r;
+  }, [t, a]), r;
 }
-function ne({
-  ref: o,
+function ie({
+  ref: t,
   id: r,
   size: e = 20,
   color: a,
-  filled: t = !1,
-  rounded: n = !0,
+  filled: n = !1,
+  rounded: o = !0,
   checked: d = !1,
   onCheckedChange: i,
   disabled: l,
   className: f = "",
   ...m
 }) {
-  const s = $(), g = R(() => r || `checkbox-${s}`, [r, s]), b = W(g), [c, h] = N(d);
-  A(() => {
-    h(d);
+  const s = $(), g = R(() => r || `checkbox-${s}`, [r, s]), b = J(g), [c, p] = E(d);
+  N(() => {
+    p(d);
   }, [d]);
   const w = () => {
-    l || (h(!c), i == null || i(!c));
-  }, p = (y) => {
-    y.key === " " && (y.preventDefault(), w());
+    l || (p(!c), i == null || i(!c));
+  }, h = (C) => {
+    C.key === " " && (C.preventDefault(), w());
   }, x = v(
     "flex items-center justify-center border outline outline-transparent focus:outline-current focus:outline-offset-2",
-    n && "rounded",
+    o && "rounded",
     l && "opacity-40 cursor-not-allowed",
     !l && "cursor-pointer",
     f
@@ -158,31 +159,31 @@ function ne({
     {
       id: g,
       type: "button",
-      ref: o,
+      ref: t,
       tabIndex: 0,
       role: "checkbox",
       onClick: w,
       "aria-checked": c,
       "aria-disabled": l,
-      onKeyDownCapture: p,
+      onKeyDownCapture: h,
       style: {
         width: e,
         height: e,
         color: a,
-        backgroundColor: c && t ? "currentcolor" : "transparent"
+        backgroundColor: c && n ? "currentcolor" : "transparent"
       },
       className: x,
       ...m,
-      children: c && /* @__PURE__ */ u(U, { size: e, color: t ? b : void 0 })
+      children: c && /* @__PURE__ */ u(_, { size: e, color: n ? b : void 0 })
     }
   );
 }
-const Z = {
+const X = {
   base: "",
   default: "ring ring-transparent focus:ring-primary-foreground not-disabled:data-error:ring-danger not-disabled:data-success:ring-success",
   underline: "border-b border-border focus:border-primary-foreground disabled:border-muted/30 not-disabled:data-error:border-danger not-disabled:data-success:border-success",
   outline: "border border-border focus:border-primary-foreground disabled:border-muted/30 not-disabled:data-error:border-danger not-disabled:data-success:border-success"
-}, _ = {
+}, Y = {
   none: "rounded-none",
   sm: "rounded-sm",
   md: "rounded-md",
@@ -192,9 +193,9 @@ const Z = {
   variant: "default",
   rounded: "none"
 };
-function D({ elementId: o, type: r, message: e }) {
-  return A(() => {
-    const a = document.getElementById(o);
+function D({ elementId: t, type: r, message: e }) {
+  return N(() => {
+    const a = document.getElementById(t);
     if (a) {
       if (!e && r === "error") {
         a.removeAttribute("data-error");
@@ -204,11 +205,11 @@ function D({ elementId: o, type: r, message: e }) {
         a.removeAttribute("data-success");
         return;
       }
-      return a.setAttribute("aria-describedby", `${o}-${r}-message`), a.setAttribute("aria-invalid", r === "error" ? "true" : "false"), r === "error" && a.setAttribute("data-error", "true"), r === "success" && a.setAttribute("data-success", "true"), () => {
+      return a.setAttribute("aria-describedby", `${t}-${r}-message`), a.setAttribute("aria-invalid", r === "error" ? "true" : "false"), r === "error" && a.setAttribute("data-error", "true"), r === "success" && a.setAttribute("data-success", "true"), () => {
         a.removeAttribute("aria-describedby"), a.removeAttribute("aria-invalid"), a.removeAttribute("data-error"), a.removeAttribute("data-success");
       };
     }
-  }, [o, r, e]), e ? /* @__PURE__ */ C(
+  }, [t, r, e]), e ? /* @__PURE__ */ y(
     "small",
     {
       className: v(
@@ -218,117 +219,129 @@ function D({ elementId: o, type: r, message: e }) {
       ),
       role: "status",
       children: [
-        r === "error" ? /* @__PURE__ */ u(S, {}) : /* @__PURE__ */ u(F, {}),
-        /* @__PURE__ */ u("span", { id: `${o}-${r}-message`, children: e })
+        r === "error" ? /* @__PURE__ */ u(q, {}) : /* @__PURE__ */ u(G, {}),
+        /* @__PURE__ */ u("span", { id: `${t}-${r}-message`, children: e })
       ]
     }
   ) : null;
 }
-function oe({
-  variant: o = k.variant,
+function ue({
+  variant: t = k.variant,
   rounded: r,
   displayOnlyMode: e = !1,
   errorMessage: a,
-  successMessage: t,
-  type: n = "text",
+  successMessage: n,
+  type: o = "text",
   className: d,
   ...i
 }) {
-  const l = $(), [f, m] = N(!1);
+  const l = $(), [f, m] = E(!1);
   let s = r;
-  o === "outline" && !r && (s = "md"), s = s || k.rounded;
+  t === "outline" && !r && (s = "md"), s = s || k.rounded;
   const c = v(
     "appearance-none w-full focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed placeholder:text-muted/70 hide-number-input-arrows transition-all",
     "file:mr-2 file:border-0 file:rounded-md file:px-1.5 file:py-1 file:bg-primary hover:file:bg-primary/85 file:text-sm file:font-medium file:text-foreground file:transition-colors",
-    !e && Z[o],
-    !e && _[s],
-    n === "password" && "pr-10",
+    !e && X[t],
+    !e && Y[s],
+    o === "password" && "pr-10",
     !e && "px-2 py-1",
     e && "pointer-events-none",
     d
   );
-  return /* @__PURE__ */ C("div", { className: v(e && "cursor-text"), style: { height: i.height, width: i.width }, children: [
-    /* @__PURE__ */ C("div", { className: v(n === "password" && "relative"), children: [
+  return /* @__PURE__ */ y("div", { className: v(e && "cursor-text"), style: { height: i.height, width: i.width }, children: [
+    /* @__PURE__ */ y("div", { className: v(o === "password" && "relative"), children: [
       /* @__PURE__ */ u(
         "input",
         {
           ...i,
           id: l,
-          type: n === "password" && f ? "text" : n,
+          type: o === "password" && f ? "text" : o,
           "aria-disabled": i.disabled,
           readOnly: e,
           "aria-readonly": e || i["aria-readonly"],
           "data-error": a ? !0 : void 0,
-          "data-success": t ? !0 : void 0,
+          "data-success": n ? !0 : void 0,
           className: c
         }
       ),
-      n === "password" && /* @__PURE__ */ u(
+      o === "password" && /* @__PURE__ */ u(
         "button",
         {
           onClick: () => m(!f),
           className: "absolute inset-y-0 right-0 px-2 hover:cursor-pointer",
           "aria-label": "Toggle password visibility",
           "data-state": f ? "visible" : "hidden",
-          children: f ? /* @__PURE__ */ u(V, { size: 20 }) : /* @__PURE__ */ u(q, { size: 20 })
+          children: f ? /* @__PURE__ */ u(H, { size: 20 }) : /* @__PURE__ */ u(K, { size: 20 })
         }
       )
     ] }),
     !e && /* @__PURE__ */ u(D, { elementId: l, type: "error", message: a }),
-    !e && /* @__PURE__ */ u(D, { elementId: l, type: "success", message: t })
+    !e && /* @__PURE__ */ u(D, { elementId: l, type: "success", message: n })
   ] });
 }
-function se({
-  display: o = "inline",
+function le({
+  display: t = "inline",
   width: r = "fit-content",
   className: e = "",
   required: a,
-  helpMessage: t,
-  suffix: n,
+  helpMessage: n,
+  suffix: o,
   htmlFor: d,
   children: i,
   ...l
 }) {
-  const f = $(), m = v("font-medium", o, e), s = t ? `${d ?? f}-help` : void 0;
-  return /* @__PURE__ */ C("div", { style: { display: o === "inline" ? "inline-flex" : "flex", width: r }, className: "relative", children: [
-    /* @__PURE__ */ C("label", { className: m, htmlFor: d, ...l, children: [
+  const f = $(), m = v("font-medium", t, e), s = n ? `${d ?? f}-help` : void 0;
+  return /* @__PURE__ */ y("div", { style: { display: t === "inline" ? "inline-flex" : "flex", width: r }, className: "relative", children: [
+    /* @__PURE__ */ y("label", { className: m, htmlFor: d, ...l, children: [
       i,
       a && /* @__PURE__ */ u("span", { className: "text-red-500 font-medium ml-1", "aria-label": "required", children: "*" })
     ] }),
-    t && /* @__PURE__ */ u(
+    n && /* @__PURE__ */ u(
       "span",
       {
         className: "text-gray-500 ml-1 size-fit -translate-y-1/3",
         "aria-describedby": s,
         "aria-label": "Help information",
-        title: t,
-        children: /* @__PURE__ */ u(G, {})
+        title: n,
+        children: /* @__PURE__ */ u(T, {})
       }
     ),
-    t && /* @__PURE__ */ u("div", { id: s, className: "sr-only", children: t }),
-    n && /* @__PURE__ */ u("span", { className: "ml-1", children: n })
+    n && /* @__PURE__ */ u("div", { id: s, className: "sr-only", children: n }),
+    o && /* @__PURE__ */ u("span", { className: "ml-1", children: o })
   ] });
 }
-function J({ itemId: o, checked: r, onChange: e, name: a, disabled: t = !1, className: n = "" }) {
+function ce({ children: t, ref: r, ...e }) {
+  if (S(t)) {
+    let a = { ...e };
+    return t.props && (a = { ...a, ...t.props }), V(t, {
+      ...a,
+      ref: (n) => {
+        typeof r == "function" ? r(n) : r && (r.current = n);
+      }
+    });
+  }
+  return F("div", { ...e, ref: r }, t);
+}
+function O({ itemId: t, checked: r, onChange: e, name: a, disabled: n = !1, className: o = "" }) {
   const d = "relative inline-flex items-center justify-center rounded-full", i = () => {
-    t || e();
+    n || e();
   }, l = v(
     d,
     !r && "hover:border-current/60",
-    !t && "border-current cursor-pointer",
-    t && "border-muted/60 cursor-not-allowed",
-    n
+    !n && "border-current cursor-pointer",
+    n && "border-muted/60 cursor-not-allowed",
+    o
   );
   return /* @__PURE__ */ u(
     "div",
     {
-      id: o,
+      id: t,
       role: "radio",
       tabIndex: -1,
       "aria-checked": r,
-      "aria-disabled": t,
+      "aria-disabled": n,
       "aria-description": `Radio button for ${a}`,
-      "aria-labelledby": `${o}-label`,
+      "aria-labelledby": `${t}-label`,
       onClick: i,
       className: l,
       style: {
@@ -340,27 +353,27 @@ function J({ itemId: o, checked: r, onChange: e, name: a, disabled: t = !1, clas
       children: r && /* @__PURE__ */ u(
         "div",
         {
-          className: v("size-full aspect-square rounded-full", t && "bg-muted/60", !t && "bg-current")
+          className: v("size-full aspect-square rounded-full", n && "bg-muted/60", !n && "bg-current")
         }
       )
     }
   );
 }
 function I({
-  value: o,
+  value: t,
   children: r,
   className: e = "",
   isSelected: a = !1,
-  onChange: t,
-  disabled: n = !1,
+  onChange: n,
+  disabled: o = !1,
   hideInput: d = !1,
   description: i,
   name: l
 }) {
-  const m = `radio-${$()}-${o}`, s = () => {
-    n || t == null || t(o);
+  const m = `radio-${$()}-${t}`, s = () => {
+    o || n == null || n(t);
   };
-  return /* @__PURE__ */ C(
+  return /* @__PURE__ */ y(
     "div",
     {
       title: i,
@@ -368,23 +381,23 @@ function I({
         "relative flex items-center",
         e,
         // Uses text color for borders
-        d && `p-2 border-2 focus-within:border-dashed focus-within:${n ? "border-current/50" : "border-current/80"}`,
-        d && !a && `border-transparent ${n ? "" : "not-focus-within:hover:border-border/60"}`,
+        d && `p-2 border-2 focus-within:border-dashed focus-within:${o ? "border-current/50" : "border-current/80"}`,
+        d && !a && `border-transparent ${o ? "" : "not-focus-within:hover:border-border/60"}`,
         d && a && "border-border",
-        n && "opacity-60 cursor-not-allowed"
+        o && "opacity-60 cursor-not-allowed"
       ),
       style: {
         gap: "0.5em"
       },
       children: [
         !d && /* @__PURE__ */ u(
-          J,
+          O,
           {
             itemId: m,
             name: l || "",
             checked: a,
             onChange: s,
-            disabled: n,
+            disabled: o,
             className: v(d && "")
           }
         ),
@@ -396,7 +409,7 @@ function I({
             role: d ? "radio" : void 0,
             onClick: d ? s : void 0,
             "aria-checked": d ? a ? "true" : "false" : void 0,
-            "aria-disabled": d ? n : void 0,
+            "aria-disabled": d ? o : void 0,
             "aria-description": d ? i || `Radio button for ${l}` : void 0,
             "aria-labelledby": d ? `${m}-label` : void 0,
             className: v(d && "size-full", typeof r == "object" && "grow focus:outline-none"),
@@ -405,7 +418,7 @@ function I({
               {
                 id: `${m}-label`,
                 onClick: d ? void 0 : s,
-                className: v(n && "cursor-not-allowed", !n && "cursor-pointer"),
+                className: v(o && "cursor-not-allowed", !o && "cursor-pointer"),
                 children: r
               }
             )
@@ -415,22 +428,22 @@ function I({
     }
   );
 }
-function X(o, r) {
-  const [e, a] = N(r), [t, n] = N(-1), [d, i] = N(!1), l = E((b, c) => {
-    var p;
-    const h = b[c];
-    h.hasAttribute("disabled") || h.getAttribute("aria-disabled") === "true" || ((p = b[c]) == null || p.click(), n(c));
-  }, []), f = E(
+function M(t, r) {
+  const [e, a] = E(r), [n, o] = E(-1), [d, i] = E(!1), l = A((b, c) => {
+    var h;
+    const p = b[c];
+    p.hasAttribute("disabled") || p.getAttribute("aria-disabled") === "true" || ((h = b[c]) == null || h.click(), o(c));
+  }, []), f = A(
     (b, c) => {
       var w;
       if (b.preventDefault(), d || !c.length) return;
-      const h = r !== -1 ? r : 0;
-      (w = c[h]) == null || w.focus(), a(h), r !== -1 && l(c, h);
+      const p = r !== -1 ? r : 0;
+      (w = c[p]) == null || w.focus(), a(p), r !== -1 && l(c, p);
     },
     [r, d, l]
-  ), m = E(
+  ), m = A(
     (b) => {
-      var p;
+      var h;
       if (!b.shiftKey)
         return;
       b.preventDefault();
@@ -438,30 +451,30 @@ function X(o, r) {
         document.querySelectorAll(
           'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
         )
-      ).filter((x) => !x.hasAttribute("disabled") && x.tabIndex >= 0), h = c.findIndex((x) => x.id === o), w = h > 0 ? h - 1 : c.length - 1;
-      (p = c[w]) == null || p.focus();
+      ).filter((x) => !x.hasAttribute("disabled") && x.tabIndex >= 0), p = c.findIndex((x) => x.id === t), w = p > 0 ? p - 1 : c.length - 1;
+      (h = c[w]) == null || h.focus();
     },
-    [o]
-  ), s = E(
+    [t]
+  ), s = A(
     (b, c) => {
-      var y;
+      var C;
       if (!c.length) return;
-      const h = b.target;
-      if (!c.some((B) => B.id === h.id)) return;
-      const p = e !== -1 ? e : 0;
-      let x = p;
+      const p = b.target;
+      if (!c.some((B) => B.id === p.id)) return;
+      const h = e !== -1 ? e : 0;
+      let x = h;
       switch (b.key) {
         case "ArrowUp":
         case "ArrowLeft":
-          b.preventDefault(), x = p > 0 ? p - 1 : c.length - 1;
+          b.preventDefault(), x = h > 0 ? h - 1 : c.length - 1;
           break;
         case "ArrowDown":
         case "ArrowRight":
-          b.preventDefault(), x = (p + 1) % c.length;
+          b.preventDefault(), x = (h + 1) % c.length;
           break;
         // Select the option when the space key is pressed
         case " ":
-          b.preventDefault(), l(c, p);
+          b.preventDefault(), l(c, h);
           return;
         case "Tab":
           m(b);
@@ -469,39 +482,39 @@ function X(o, r) {
         default:
           return;
       }
-      (y = c[x]) == null || y.focus(), a(x), t !== -1 && l(c, x);
+      (C = c[x]) == null || C.focus(), a(x), n !== -1 && l(c, x);
     },
-    [e, t, m, l]
-  ), g = E(() => {
-    const b = document.querySelector(`[id="${o}"][role="radiogroup"]`);
+    [e, n, m, l]
+  ), g = A(() => {
+    const b = document.querySelector(`[id="${t}"][role="radiogroup"]`);
     return b ? Array.from(b.querySelectorAll('[role="radio"]')) : [];
-  }, [o]);
-  A(() => {
-    const b = document.querySelector(`[id="${o}"][role="radiogroup"]`);
+  }, [t]);
+  N(() => {
+    const b = document.querySelector(`[id="${t}"][role="radiogroup"]`);
     if (!b) return;
-    const c = g(), h = (y) => f(y, c), w = (y) => s(y, c), p = () => i(!0), x = () => i(!1);
-    return document.addEventListener("keydown", w), b.addEventListener("focus", h), b.addEventListener("mousedown", p), document.addEventListener("mouseup", x), () => {
-      document.removeEventListener("keydown", w), b.removeEventListener("focus", h), b.removeEventListener("mousedown", p), document.removeEventListener("mouseup", x);
+    const c = g(), p = (C) => f(C, c), w = (C) => s(C, c), h = () => i(!0), x = () => i(!1);
+    return document.addEventListener("keydown", w), b.addEventListener("focus", p), b.addEventListener("mousedown", h), document.addEventListener("mouseup", x), () => {
+      document.removeEventListener("keydown", w), b.removeEventListener("focus", p), b.removeEventListener("mousedown", h), document.removeEventListener("mouseup", x);
     };
-  }, [o, g, f, s]);
+  }, [t, g, f, s]);
 }
-function de({
-  options: o = [],
+function be({
+  options: t = [],
   value: r,
   onChange: e,
   name: a,
-  children: t,
-  className: n = "",
+  children: n,
+  className: o = "",
   childrenClassName: d = "",
   hideInputs: i = !1
 }) {
   const l = $(), f = a || `radio-group-${l}`;
-  X(
+  M(
     f,
-    o.findIndex((s) => s === r)
+    t.findIndex((s) => s === r)
   );
-  const m = R(() => o.reduce((s, g) => (typeof g == "string" ? s.some((b) => b.value === g) || s.push({ label: g, value: g }) : s.push(g), s), []), [o]);
-  return /* @__PURE__ */ C("div", { id: f, role: "radiogroup", tabIndex: 0, className: v(n, "focus:outline-none"), children: [
+  const m = R(() => t.reduce((s, g) => (typeof g == "string" ? s.some((b) => b.value === g) || s.push({ label: g, value: g }) : s.push(g), s), []), [t]);
+  return /* @__PURE__ */ y("div", { id: f, role: "radiogroup", tabIndex: 0, className: v(o, "focus:outline-none"), children: [
     m.length > 0 && m.map((s, g) => /* @__PURE__ */ u(
       I,
       {
@@ -517,7 +530,7 @@ function de({
       },
       `${s.value}-${g}`
     )),
-    m.length === 0 && t && j.Children.map(t, (s) => j.isValidElement(s) && s.type === I ? /* @__PURE__ */ u(
+    m.length === 0 && n && j.Children.map(n, (s) => j.isValidElement(s) && s.type === I ? /* @__PURE__ */ u(
       I,
       {
         ...s.props,
@@ -531,9 +544,9 @@ function de({
     ) : null)
   ] });
 }
-function Y(o, r) {
-  A(() => {
-    const e = document.getElementById(o);
+function P(t, r) {
+  N(() => {
+    const e = document.getElementById(t);
     if (!e)
       return;
     if (!r) {
@@ -546,13 +559,13 @@ function Y(o, r) {
     return a(), e.addEventListener("input", a), e.addEventListener("resize", a), window.addEventListener("resize", a), () => {
       e.removeEventListener("input", a), e.removeEventListener("resize", a), window.removeEventListener("resize", a);
     };
-  }, [o, r]);
+  }, [t, r]);
 }
-const O = {
+const ee = {
   base: "",
   "left-line": "border-l border-border focus:border-primary-foreground disabled:border-muted/30 not-disabled:data-error:border-danger not-disabled:data-success:border-success",
   outline: "border border-border focus:border-primary-foreground disabled:border-muted/30 not-disabled:data-error:border-danger not-disabled:data-success:border-success"
-}, M = {
+}, re = {
   none: "rounded-none",
   sm: "rounded-sm",
   md: "rounded-md",
@@ -562,22 +575,22 @@ const O = {
   variant: "outline",
   rounded: "none"
 };
-function P({ elementId: o, maxLength: r }) {
-  const [e, a] = N(0);
-  return A(() => {
-    const t = document.getElementById(o);
-    if (!t)
+function te({ elementId: t, maxLength: r }) {
+  const [e, a] = E(0);
+  return N(() => {
+    const n = document.getElementById(t);
+    if (!n)
       return;
-    const n = () => {
-      const d = t.value.length;
+    const o = () => {
+      const d = n.value.length;
       a(d);
       const i = d >= r;
-      t.setAttribute("aria-describedby", `${o}-character-count`), t.setAttribute("aria-invalid", i ? "true" : "false"), i ? t.setAttribute("data-error", "true") : t.removeAttribute("data-error");
+      n.setAttribute("aria-describedby", `${t}-character-count`), n.setAttribute("aria-invalid", i ? "true" : "false"), i ? n.setAttribute("data-error", "true") : n.removeAttribute("data-error");
     };
-    return n(), t.addEventListener("input", n), t.setAttribute("maxlength", String(r)), () => {
-      t.removeEventListener("input", n), t.removeAttribute("maxlength"), t.removeAttribute("aria-describedby"), t.removeAttribute("aria-invalid"), t.removeAttribute("data-error");
+    return o(), n.addEventListener("input", o), n.setAttribute("maxlength", String(r)), () => {
+      n.removeEventListener("input", o), n.removeAttribute("maxlength"), n.removeAttribute("aria-describedby"), n.removeAttribute("aria-invalid"), n.removeAttribute("data-error");
     };
-  }, [o, r]), /* @__PURE__ */ u(
+  }, [t, r]), /* @__PURE__ */ u(
     "small",
     {
       className: v(
@@ -586,7 +599,7 @@ function P({ elementId: o, maxLength: r }) {
         e < r && "text-current"
       ),
       role: "status",
-      children: /* @__PURE__ */ C("span", { id: `${o}-character-count`, children: [
+      children: /* @__PURE__ */ y("span", { id: `${t}-character-count`, children: [
         e,
         " / ",
         r,
@@ -595,34 +608,34 @@ function P({ elementId: o, maxLength: r }) {
     }
   );
 }
-function ie({
-  variant: o = z.variant,
+function fe({
+  variant: t = z.variant,
   rounded: r,
   displayOnlyMode: e = !1,
   errorMessage: a,
-  successMessage: t,
-  hideResizeHandle: n = !1,
+  successMessage: n,
+  hideResizeHandle: o = !1,
   autoExpand: d = !1,
   characterLimit: i = 0,
   className: l,
   ...f
 }) {
   const m = $();
-  Y(m, d || e);
+  P(m, d || e);
   let s = r;
-  o === "outline" && !r && (s = "md"), s = s || z.rounded;
-  let g = n;
-  (e || o === "left-line" && !n) && (g = !0);
+  t === "outline" && !r && (s = "md"), s = s || z.rounded;
+  let g = o;
+  (e || t === "left-line" && !o) && (g = !0);
   const c = v(
     "appearance-none w-full focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed placeholder:text-muted/70 hide-number-input-arrows transition-all",
-    !e && O[o],
-    !e && M[s],
+    !e && ee[t],
+    !e && re[s],
     !e && "px-2 py-1",
     e && "pointer-events-none",
     g && "no-resize-handle",
     l
   );
-  return /* @__PURE__ */ C("div", { className: v("-space-y-1.5", e && "cursor-text"), children: [
+  return /* @__PURE__ */ y("div", { className: v("-space-y-1.5", e && "cursor-text"), children: [
     /* @__PURE__ */ u(
       "textarea",
       {
@@ -637,20 +650,21 @@ function ie({
         className: c
       }
     ),
-    i > 0 && /* @__PURE__ */ u(P, { elementId: m, maxLength: i }),
+    i > 0 && /* @__PURE__ */ u(te, { elementId: m, maxLength: i }),
     !e && /* @__PURE__ */ u(D, { elementId: m, type: "error", message: a }),
-    !e && /* @__PURE__ */ u(D, { elementId: m, type: "success", message: t })
+    !e && /* @__PURE__ */ u(D, { elementId: m, type: "success", message: n })
   ] });
 }
 export {
-  ae as Button,
-  H as ButtonLoadingDots,
-  ne as Checkbox,
-  oe as Input,
-  se as Label,
-  de as RadioGroup,
+  de as Button,
+  Q as ButtonLoadingDots,
+  ie as Checkbox,
+  ue as Input,
+  le as Label,
+  be as RadioGroup,
   I as RadioGroupItem,
-  J as RadioInput,
-  ie as Textarea
+  O as RadioInput,
+  ce as Slot,
+  fe as Textarea
 };
 //# sourceMappingURL=components.esm.js.map