@moondreamsdev/dreamer-ui 1.6.0 → 1.6.2

package/dist/components.esm.js

@@ -1,25 +1,26 @@
-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);
+import { jsx as l, jsxs as y } from "react/jsx-runtime";
+import { join as v } from "./utils.esm.js";
+import j, { useState as E, useEffect as A, useCallback as N, useId as $, useMemo as B, isValidElement as S, cloneElement as V, createElement as F } from "react";
+import { C as q, E as G, a as H, c as K, b as T, Q } from "./QuestionMarkCircled-DAnSYjJu.js";
+function U() {
+  const [n, r] = E(0);
   return A(() => {
     const e = setInterval(() => {
-      r((a) => (a + 1) % 3);
+      r((t) => (t + 1) % 3);
     }, 500);
     return () => clearInterval(e);
-  }, []), /* @__PURE__ */ u("div", { className: "absolute inset-0 inline-flex items-center justify-center gap-x-2 align-middle", children: [0, 1, 2].map((e) => /* @__PURE__ */ u(
+  }, []), /* @__PURE__ */ l("div", { className: "absolute inset-0 inline-flex items-center justify-center gap-x-2 align-middle", children: [0, 1, 2].map((e) => /* @__PURE__ */ l(
     "div",
     {
       className: v(
         "rounded-full transition-all duration-500 ease-in-out size-[0.35em] bg-current",
-        o === e && "transform -translate-y-1"
+        n === e && "transform -translate-y-1"
       )
     },
     e
   )) });
 }
-const K = {
+const W = {
   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 = {
+}, _ = {
   stripped: "",
   fitted: "size-fit",
   sm: "px-2 py-1 text-sm",
@@ -35,61 +36,61 @@ const K = {
   lg: "px-6 py-3 text-lg",
   icon: "p-1 w-fit aspect-square",
   full: "p-2 w-full"
-}, Q = {
+}, J = {
   none: "rounded-none",
   sm: "rounded-sm",
   md: "rounded-md",
   lg: "rounded-lg",
   full: "rounded-full"
-}, L = {
+}, I = {
   variant: "primary",
   size: "md",
   rounded: "md"
 };
-function ae({
-  variant: o = L.variant,
+function de({
+  variant: n = I.variant,
   size: r,
-  rounded: e = L.rounded,
-  loading: a,
-  linkTo: t,
-  linkProps: n,
+  rounded: e = I.rounded,
+  loading: t,
+  linkTo: a,
+  linkProps: o,
   type: d = "button",
   className: i,
-  ...l
+  ...u
 }) {
   let f;
-  o === "link" && !r ? f = "fitted" : f = r || L.size;
+  n === "link" && !r ? f = "fitted" : f = r || I.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],
-    a && "relative pointer-events-none",
-    t && "relative",
+    W[n],
+    _[f],
+    J[e],
+    t && "relative pointer-events-none",
+    a && "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"]),
-      "aria-disabled": l.disabled || a,
-      "aria-busy": a,
+      ...u,
+      role: a ? "link" : u.role,
+      "aria-label": u["aria-label"] || (o == null ? void 0 : o["aria-label"]),
+      "aria-description": u["aria-description"] || (o == null ? void 0 : o["aria-description"]),
+      "aria-disabled": u.disabled || t,
+      "aria-busy": t,
       type: d,
       className: s,
       children: [
-        a && /* @__PURE__ */ u(H, {}),
-        /* @__PURE__ */ u("span", { className: v(a && "invisible"), children: l.children }),
-        t && !l.disabled && /* @__PURE__ */ u(
+        t && /* @__PURE__ */ l(U, {}),
+        /* @__PURE__ */ l("span", { className: v(t && "invisible"), children: u.children }),
+        a && !u.disabled && /* @__PURE__ */ l(
           "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: a,
+            target: (o == null ? void 0 : o.target) || "_blank",
+            rel: (o == null ? void 0 : o.rel) || "noreferrer",
             className: "absolute inset-0"
           }
         )
@@ -97,92 +98,81 @@ 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(
-    "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",
-      fill: r,
-      fillRule: "evenodd",
-      clipRule: "evenodd"
-    }
-  ) });
-}
-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 X(n) {
+  const [r, e] = E(""), t = N((a) => {
+    let o = a, 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);
+    const a = document.getElementById(n);
+    if (a) {
+      const o = t(a.parentElement);
+      e(o);
     }
-  }, [o, a]), r;
+  }, [n, t]), r;
 }
-function ne({
-  ref: o,
+function ie({
+  ref: n,
   id: r,
   size: e = 20,
-  color: a,
-  filled: t = !1,
-  rounded: n = !0,
+  color: t,
+  filled: a = !1,
+  rounded: o = !0,
   checked: d = !1,
   onCheckedChange: i,
-  disabled: l,
+  disabled: u,
   className: f = "",
   ...m
 }) {
-  const s = $(), g = R(() => r || `checkbox-${s}`, [r, s]), b = W(g), [c, h] = N(d);
+  const s = $(), g = B(() => r || `checkbox-${s}`, [r, s]), b = X(g), [c, p] = E(d);
   A(() => {
-    h(d);
+    p(d);
   }, [d]);
   const w = () => {
-    l || (h(!c), i == null || i(!c));
-  }, p = (y) => {
-    y.key === " " && (y.preventDefault(), w());
+    u || (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",
-    l && "opacity-40 cursor-not-allowed",
-    !l && "cursor-pointer",
+    o && "rounded",
+    u && "opacity-40 cursor-not-allowed",
+    !u && "cursor-pointer",
     f
   );
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ l(
     "button",
     {
       id: g,
       type: "button",
-      ref: o,
+      ref: n,
       tabIndex: 0,
       role: "checkbox",
       onClick: w,
       "aria-checked": c,
-      "aria-disabled": l,
-      onKeyDownCapture: p,
+      "aria-disabled": u,
+      onKeyDownCapture: h,
       style: {
         width: e,
         height: e,
-        color: a,
-        backgroundColor: c && t ? "currentcolor" : "transparent"
+        color: t,
+        backgroundColor: c && a ? "currentcolor" : "transparent"
       },
       className: x,
       ...m,
-      children: c && /* @__PURE__ */ u(U, { size: e, color: t ? b : void 0 })
+      children: c && /* @__PURE__ */ l(q, { size: e, color: a ? b : void 0 })
     }
   );
 }
-const Z = {
+const Y = {
   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"
-}, _ = {
+}, Z = {
   none: "rounded-none",
   sm: "rounded-sm",
   md: "rounded-md",
@@ -192,23 +182,23 @@ const Z = {
   variant: "default",
   rounded: "none"
 };
-function D({ elementId: o, type: r, message: e }) {
+function D({ elementId: n, type: r, message: e }) {
   return A(() => {
-    const a = document.getElementById(o);
-    if (a) {
+    const t = document.getElementById(n);
+    if (t) {
       if (!e && r === "error") {
-        a.removeAttribute("data-error");
+        t.removeAttribute("data-error");
         return;
       }
       if (!e && r === "success") {
-        a.removeAttribute("data-success");
+        t.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"), () => {
-        a.removeAttribute("aria-describedby"), a.removeAttribute("aria-invalid"), a.removeAttribute("data-error"), a.removeAttribute("data-success");
+      return t.setAttribute("aria-describedby", `${n}-${r}-message`), t.setAttribute("aria-invalid", r === "error" ? "true" : "false"), r === "error" && t.setAttribute("data-error", "true"), r === "success" && t.setAttribute("data-success", "true"), () => {
+        t.removeAttribute("aria-describedby"), t.removeAttribute("aria-invalid"), t.removeAttribute("data-error"), t.removeAttribute("data-success");
       };
     }
-  }, [o, r, e]), e ? /* @__PURE__ */ C(
+  }, [n, r, e]), e ? /* @__PURE__ */ y(
     "small",
     {
       className: v(
@@ -218,149 +208,161 @@ 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__ */ l(G, {}) : /* @__PURE__ */ l(H, {}),
+        /* @__PURE__ */ l("span", { id: `${n}-${r}-message`, children: e })
       ]
     }
   ) : null;
 }
-function oe({
-  variant: o = k.variant,
+function ue({
+  variant: n = k.variant,
   rounded: r,
   displayOnlyMode: e = !1,
-  errorMessage: a,
-  successMessage: t,
-  type: n = "text",
+  errorMessage: t,
+  successMessage: a,
+  type: o = "text",
   className: d,
   ...i
 }) {
-  const l = $(), [f, m] = N(!1);
+  const u = $(), [f, m] = E(!1);
   let s = r;
-  o === "outline" && !r && (s = "md"), s = s || k.rounded;
+  n === "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 && Y[n],
+    !e && Z[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: [
-      /* @__PURE__ */ u(
+  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__ */ l(
         "input",
         {
           ...i,
-          id: l,
-          type: n === "password" && f ? "text" : n,
+          id: u,
+          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-error": t ? !0 : void 0,
+          "data-success": a ? !0 : void 0,
           className: c
         }
       ),
-      n === "password" && /* @__PURE__ */ u(
+      o === "password" && /* @__PURE__ */ l(
         "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__ */ l(K, { size: 20 }) : /* @__PURE__ */ l(T, { size: 20 })
         }
       )
     ] }),
-    !e && /* @__PURE__ */ u(D, { elementId: l, type: "error", message: a }),
-    !e && /* @__PURE__ */ u(D, { elementId: l, type: "success", message: t })
+    !e && /* @__PURE__ */ l(D, { elementId: u, type: "error", message: t }),
+    !e && /* @__PURE__ */ l(D, { elementId: u, type: "success", message: a })
   ] });
 }
-function se({
-  display: o = "inline",
+function le({
+  display: n = "inline",
   width: r = "fit-content",
   className: e = "",
-  required: a,
-  helpMessage: t,
-  suffix: n,
+  required: t,
+  helpMessage: a,
+  suffix: o,
   htmlFor: d,
   children: i,
-  ...l
+  ...u
 }) {
-  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", n, e), s = a ? `${d ?? f}-help` : void 0;
+  return /* @__PURE__ */ y("div", { style: { display: n === "inline" ? "inline-flex" : "flex", width: r }, className: "relative", children: [
+    /* @__PURE__ */ y("label", { className: m, htmlFor: d, ...u, children: [
       i,
-      a && /* @__PURE__ */ u("span", { className: "text-red-500 font-medium ml-1", "aria-label": "required", children: "*" })
+      t && /* @__PURE__ */ l("span", { className: "text-red-500 font-medium ml-1", "aria-label": "required", children: "*" })
     ] }),
-    t && /* @__PURE__ */ u(
+    a && /* @__PURE__ */ l(
       "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: a,
+        children: /* @__PURE__ */ l(Q, {})
       }
     ),
-    t && /* @__PURE__ */ u("div", { id: s, className: "sr-only", children: t }),
-    n && /* @__PURE__ */ u("span", { className: "ml-1", children: n })
+    a && /* @__PURE__ */ l("div", { id: s, className: "sr-only", children: a }),
+    o && /* @__PURE__ */ l("span", { className: "ml-1", children: o })
   ] });
 }
-function J({ itemId: o, checked: r, onChange: e, name: a, disabled: t = !1, className: n = "" }) {
+function ce({ children: n, ref: r, ...e }) {
+  if (S(n)) {
+    let t = { ...e };
+    return n.props && (t = { ...t, ...n.props }), V(n, {
+      ...t,
+      ref: (a) => {
+        typeof r == "function" ? r(a) : r && (r.current = a);
+      }
+    });
+  }
+  return F("div", { ...e, ref: r }, n);
+}
+function O({ itemId: n, checked: r, onChange: e, name: t, disabled: a = !1, className: o = "" }) {
   const d = "relative inline-flex items-center justify-center rounded-full", i = () => {
-    t || e();
-  }, l = v(
+    a || e();
+  }, u = v(
     d,
     !r && "hover:border-current/60",
-    !t && "border-current cursor-pointer",
-    t && "border-muted/60 cursor-not-allowed",
-    n
+    !a && "border-current cursor-pointer",
+    a && "border-muted/60 cursor-not-allowed",
+    o
   );
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ l(
     "div",
     {
-      id: o,
+      id: n,
       role: "radio",
       tabIndex: -1,
       "aria-checked": r,
-      "aria-disabled": t,
-      "aria-description": `Radio button for ${a}`,
-      "aria-labelledby": `${o}-label`,
+      "aria-disabled": a,
+      "aria-description": `Radio button for ${t}`,
+      "aria-labelledby": `${n}-label`,
       onClick: i,
-      className: l,
+      className: u,
       style: {
         width: "1em",
         height: "1em",
         padding: "0.1em",
         borderWidth: "0.06em"
       },
-      children: r && /* @__PURE__ */ u(
+      children: r && /* @__PURE__ */ l(
         "div",
         {
-          className: v("size-full aspect-square rounded-full", t && "bg-muted/60", !t && "bg-current")
+          className: v("size-full aspect-square rounded-full", a && "bg-muted/60", !a && "bg-current")
         }
       )
     }
   );
 }
-function I({
-  value: o,
+function L({
+  value: n,
   children: r,
   className: e = "",
-  isSelected: a = !1,
-  onChange: t,
-  disabled: n = !1,
+  isSelected: t = !1,
+  onChange: a,
+  disabled: o = !1,
   hideInput: d = !1,
   description: i,
-  name: l
+  name: u
 }) {
-  const m = `radio-${$()}-${o}`, s = () => {
-    n || t == null || t(o);
+  const m = `radio-${$()}-${n}`, s = () => {
+    o || a == null || a(n);
   };
-  return /* @__PURE__ */ C(
+  return /* @__PURE__ */ y(
     "div",
     {
       title: i,
@@ -368,44 +370,44 @@ 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 && a && "border-border",
-        n && "opacity-60 cursor-not-allowed"
+        d && `p-2 border-2 focus-within:border-dashed focus-within:${o ? "border-current/50" : "border-current/80"}`,
+        d && !t && `border-transparent ${o ? "" : "not-focus-within:hover:border-border/60"}`,
+        d && t && "border-border",
+        o && "opacity-60 cursor-not-allowed"
       ),
       style: {
         gap: "0.5em"
       },
       children: [
-        !d && /* @__PURE__ */ u(
-          J,
+        !d && /* @__PURE__ */ l(
+          O,
           {
             itemId: m,
-            name: l || "",
-            checked: a,
+            name: u || "",
+            checked: t,
             onChange: s,
-            disabled: n,
+            disabled: o,
             className: v(d && "")
           }
         ),
-        /* @__PURE__ */ u(
+        /* @__PURE__ */ l(
           "div",
           {
             id: d ? m : void 0,
             tabIndex: d ? -1 : void 0,
             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-description": d ? i || `Radio button for ${l}` : void 0,
+            "aria-checked": d ? t ? "true" : "false" : void 0,
+            "aria-disabled": d ? o : void 0,
+            "aria-description": d ? i || `Radio button for ${u}` : void 0,
             "aria-labelledby": d ? `${m}-label` : void 0,
             className: v(d && "size-full", typeof r == "object" && "grow focus:outline-none"),
-            children: /* @__PURE__ */ u(
+            children: /* @__PURE__ */ l(
               "label",
               {
                 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 +417,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 P(n, r) {
+  const [e, t] = E(r), [a, o] = E(-1), [d, i] = E(!1), u = N((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 = N(
     (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(), t(p), r !== -1 && u(c, p);
     },
-    [r, d, l]
-  ), m = E(
+    [r, d, u]
+  ), m = N(
     (b) => {
-      var p;
+      var h;
       if (!b.shiftKey)
         return;
       b.preventDefault();
@@ -438,30 +440,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 === n), w = p > 0 ? p - 1 : c.length - 1;
+      (h = c[w]) == null || h.focus();
     },
-    [o]
-  ), s = E(
+    [n]
+  ), s = N(
     (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((R) => R.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(), u(c, h);
           return;
         case "Tab":
           m(b);
@@ -469,41 +471,41 @@ 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(), t(x), a !== -1 && u(c, x);
     },
-    [e, t, m, l]
-  ), g = E(() => {
-    const b = document.querySelector(`[id="${o}"][role="radiogroup"]`);
+    [e, a, m, u]
+  ), g = N(() => {
+    const b = document.querySelector(`[id="${n}"][role="radiogroup"]`);
     return b ? Array.from(b.querySelectorAll('[role="radio"]')) : [];
-  }, [o]);
+  }, [n]);
   A(() => {
-    const b = document.querySelector(`[id="${o}"][role="radiogroup"]`);
+    const b = document.querySelector(`[id="${n}"][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]);
+  }, [n, g, f, s]);
 }
-function de({
-  options: o = [],
+function be({
+  options: n = [],
   value: r,
   onChange: e,
-  name: a,
-  children: t,
-  className: n = "",
+  name: t,
+  children: a,
+  className: o = "",
   childrenClassName: d = "",
   hideInputs: i = !1
 }) {
-  const l = $(), f = a || `radio-group-${l}`;
-  X(
+  const u = $(), f = t || `radio-group-${u}`;
+  P(
     f,
-    o.findIndex((s) => s === r)
+    n.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: [
-    m.length > 0 && m.map((s, g) => /* @__PURE__ */ u(
-      I,
+  const m = B(() => n.reduce((s, g) => (typeof g == "string" ? s.some((b) => b.value === g) || s.push({ label: g, value: g }) : s.push(g), s), []), [n]);
+  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__ */ l(
+      L,
       {
         value: s.value,
         isSelected: r === s.value,
@@ -517,8 +519,8 @@ function de({
       },
       `${s.value}-${g}`
     )),
-    m.length === 0 && t && j.Children.map(t, (s) => j.isValidElement(s) && s.type === I ? /* @__PURE__ */ u(
-      I,
+    m.length === 0 && a && j.Children.map(a, (s) => j.isValidElement(s) && s.type === L ? /* @__PURE__ */ l(
+      L,
       {
         ...s.props,
         className: v(d, s.props.className),
@@ -531,28 +533,28 @@ function de({
     ) : null)
   ] });
 }
-function Y(o, r) {
+function M(n, r) {
   A(() => {
-    const e = document.getElementById(o);
+    const e = document.getElementById(n);
     if (!e)
       return;
     if (!r) {
       e.style.height = "auto";
       return;
     }
-    const a = () => {
+    const t = () => {
       e.style.height = "auto", e.style.height = `${e.scrollHeight}px`;
     };
-    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);
+    return t(), e.addEventListener("input", t), e.addEventListener("resize", t), window.addEventListener("resize", t), () => {
+      e.removeEventListener("input", t), e.removeEventListener("resize", t), window.removeEventListener("resize", t);
     };
-  }, [o, r]);
+  }, [n, 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 +564,22 @@ const O = {
   variant: "outline",
   rounded: "none"
 };
-function P({ elementId: o, maxLength: r }) {
-  const [e, a] = N(0);
+function te({ elementId: n, maxLength: r }) {
+  const [e, t] = E(0);
   return A(() => {
-    const t = document.getElementById(o);
-    if (!t)
+    const a = document.getElementById(n);
+    if (!a)
       return;
-    const n = () => {
-      const d = t.value.length;
-      a(d);
+    const o = () => {
+      const d = a.value.length;
+      t(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");
+      a.setAttribute("aria-describedby", `${n}-character-count`), a.setAttribute("aria-invalid", i ? "true" : "false"), i ? a.setAttribute("data-error", "true") : a.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(), a.addEventListener("input", o), a.setAttribute("maxlength", String(r)), () => {
+      a.removeEventListener("input", o), a.removeAttribute("maxlength"), a.removeAttribute("aria-describedby"), a.removeAttribute("aria-invalid"), a.removeAttribute("data-error");
     };
-  }, [o, r]), /* @__PURE__ */ u(
+  }, [n, r]), /* @__PURE__ */ l(
     "small",
     {
       className: v(
@@ -586,7 +588,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: `${n}-character-count`, children: [
         e,
         " / ",
         r,
@@ -595,35 +597,35 @@ function P({ elementId: o, maxLength: r }) {
     }
   );
 }
-function ie({
-  variant: o = z.variant,
+function fe({
+  variant: n = z.variant,
   rounded: r,
   displayOnlyMode: e = !1,
-  errorMessage: a,
-  successMessage: t,
-  hideResizeHandle: n = !1,
+  errorMessage: t,
+  successMessage: a,
+  hideResizeHandle: o = !1,
   autoExpand: d = !1,
   characterLimit: i = 0,
-  className: l,
+  className: u,
   ...f
 }) {
   const m = $();
-  Y(m, d || e);
+  M(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);
+  n === "outline" && !r && (s = "md"), s = s || z.rounded;
+  let g = o;
+  (e || n === "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[n],
+    !e && re[s],
     !e && "px-2 py-1",
     e && "pointer-events-none",
     g && "no-resize-handle",
-    l
+    u
   );
-  return /* @__PURE__ */ C("div", { className: v("-space-y-1.5", e && "cursor-text"), children: [
-    /* @__PURE__ */ u(
+  return /* @__PURE__ */ y("div", { className: v("-space-y-1.5", e && "cursor-text"), children: [
+    /* @__PURE__ */ l(
       "textarea",
       {
         ...f,
@@ -637,20 +639,21 @@ function ie({
         className: c
       }
     ),
-    i > 0 && /* @__PURE__ */ u(P, { elementId: m, maxLength: i }),
-    !e && /* @__PURE__ */ u(D, { elementId: m, type: "error", message: a }),
-    !e && /* @__PURE__ */ u(D, { elementId: m, type: "success", message: t })
+    i > 0 && /* @__PURE__ */ l(te, { elementId: m, maxLength: i }),
+    !e && /* @__PURE__ */ l(D, { elementId: m, type: "error", message: t }),
+    !e && /* @__PURE__ */ l(D, { elementId: m, type: "success", message: a })
   ] });
 }
 export {
-  ae as Button,
-  H as ButtonLoadingDots,
-  ne as Checkbox,
-  oe as Input,
-  se as Label,
-  de as RadioGroup,
-  I as RadioGroupItem,
-  J as RadioInput,
-  ie as Textarea
+  de as Button,
+  U as ButtonLoadingDots,
+  ie as Checkbox,
+  ue as Input,
+  le as Label,
+  be as RadioGroup,
+  L as RadioGroupItem,
+  O as RadioInput,
+  ce as Slot,
+  fe as Textarea
 };
 //# sourceMappingURL=components.esm.js.map