@moondreamsdev/dreamer-ui 1.7.2 → 1.7.3

package/dist/components.esm.js

@@ -1,25 +1,25 @@
-import { jsxs as w, jsx as c } from "react/jsx-runtime";
+import { jsxs as w, jsx as l } from "react/jsx-runtime";
 import I, { useId as E, useState as N, createElement as B, useEffect as A, useCallback as $, useMemo as R, isValidElement as F, cloneElement as q } from "react";
 import { join as v } from "./utils.esm.js";
 import { b as K, C as G, E as H, a as T, d as Q, c as U, Q as W } from "./QuestionMarkCircled-CIc05alV.js";
-function k({
+function j({
   id: o,
   title: r,
   content: e,
-  children: a,
-  className: t = "",
+  children: t,
+  className: a = "",
   disabled: n = !1,
   isOpen: s = !1,
   onToggle: i,
-  triggerClassName: l = "",
+  triggerClassName: u = "",
   bodyClassName: g = ""
 }) {
-  const p = E(), d = o || `accordion-item-${p}`, h = `${d}-header`, b = `${d}-panel`, u = () => {
+  const p = E(), d = o || `accordion-item-${p}`, h = `${d}-header`, b = `${d}-panel`, c = () => {
     !n && i && i();
   }, x = (f) => {
-    (f.key === "Enter" || f.key === " ") && (f.preventDefault(), u());
+    (f.key === "Enter" || f.key === " ") && (f.preventDefault(), c());
   };
-  return /* @__PURE__ */ w("div", { className: v("border-b border-gray-200", n && "opacity-60 cursor-not-allowed", t), children: [
+  return /* @__PURE__ */ w("div", { className: v("border-b border-gray-200", n && "opacity-60 cursor-not-allowed", a), children: [
     /* @__PURE__ */ w(
       "button",
       {
@@ -28,16 +28,16 @@ function k({
         className: v(
           "w-full text-left py-3 px-4 flex justify-between items-center focus:outline focus:outline-secondary",
           n ? "cursor-not-allowed" : "hover:bg-gray-50/10 cursor-pointer",
-          l
+          u
         ),
         "aria-expanded": s,
         "aria-controls": b,
         disabled: n,
-        onClick: u,
+        onClick: c,
         onKeyDown: x,
         children: [
-          /* @__PURE__ */ c("span", { children: r }),
-          /* @__PURE__ */ c(
+          /* @__PURE__ */ l("span", { children: r }),
+          /* @__PURE__ */ l(
             "span",
             {
               className: v(
@@ -45,13 +45,13 @@ function k({
                 s ? "rotate-180" : "rotate-0"
               ),
               "aria-hidden": "true",
-              children: /* @__PURE__ */ c(K, { size: 18 })
+              children: /* @__PURE__ */ l(K, { size: 18 })
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ c(
+    /* @__PURE__ */ l(
       "div",
       {
         id: b,
@@ -62,7 +62,7 @@ function k({
           s ? "max-h-96 opacity-100 overflow-auto py-3" : "max-h-0 opacity-0 overflow-hidden",
           g
         ),
-        children: s && (a || e)
+        children: s && (t || e)
       }
     )
   ] });
@@ -71,24 +71,24 @@ function le({
   name: o,
   items: r = [],
   children: e,
-  className: a = "",
-  itemClassName: t = "",
+  className: t = "",
+  itemClassName: a = "",
   allowMultiple: n = !1,
   defaultOpenItems: s = [],
   triggersClassName: i = "",
-  bodiesClassName: l = ""
+  bodiesClassName: u = ""
 }) {
   const g = E(), p = o || `accordion-group-${g}`, [d, h] = N(new Set(s)), b = (f) => {
     h((y) => {
       const m = new Set(y);
       return m.has(f) ? m.delete(f) : (n || m.clear(), m.add(f)), m;
     });
-  }, u = (f) => `${g}-item-${f}`, x = (f) => d.has(f);
-  return /* @__PURE__ */ w("div", { id: p, className: a, children: [
+  }, c = (f) => `${g}-item-${f}`, x = (f) => d.has(f);
+  return /* @__PURE__ */ w("div", { id: p, className: t, children: [
     r.length > 0 && r.map((f, y) => {
-      const m = f.id || u(y);
-      return /* @__PURE__ */ c(
-        k,
+      const m = f.id || c(y);
+      return /* @__PURE__ */ l(
+        j,
         {
           id: m,
           title: f.title,
@@ -96,27 +96,27 @@ function le({
           disabled: f.disabled,
           isOpen: x(m),
           onToggle: () => b(m),
-          className: t,
+          className: a,
           triggerClassName: i,
-          bodyClassName: l
+          bodyClassName: u
         },
         m
       );
     }),
     r.length === 0 && e && I.Children.map(e, (f, y) => {
-      if (I.isValidElement(f) && f.type === k) {
-        const m = f.props.id || u(y);
+      if (I.isValidElement(f) && f.type === j) {
+        const m = f.props.id || c(y);
         return /* @__PURE__ */ B(
-          k,
+          j,
           {
             ...f.props,
             key: m,
             id: m,
-            className: v(t, f.props.className),
+            className: v(a, f.props.className),
             isOpen: x(m),
             onToggle: () => b(m),
             triggerClassName: v(i, f.props.triggerClassName),
-            bodyClassName: v(l, f.props.bodyClassName)
+            bodyClassName: v(u, f.props.bodyClassName)
           }
         );
       }
@@ -128,10 +128,10 @@ function _() {
   const [o, r] = N(0);
   return A(() => {
     const e = setInterval(() => {
-      r((a) => (a + 1) % 3);
+      r((t) => (t + 1) % 3);
     }, 500);
     return () => clearInterval(e);
-  }, []), /* @__PURE__ */ c("div", { className: "absolute inset-0 inline-flex items-center justify-center gap-x-2 align-middle", children: [0, 1, 2].map((e) => /* @__PURE__ */ c(
+  }, []), /* @__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(
@@ -164,53 +164,53 @@ const J = {
   md: "rounded-md",
   lg: "rounded-lg",
   full: "rounded-full"
-}, j = {
+}, k = {
   variant: "primary",
   size: "md",
   rounded: "md"
 };
 function ue({
-  variant: o = j.variant,
+  variant: o = k.variant,
   size: r,
-  rounded: e = j.rounded,
-  loading: a,
-  linkTo: t,
+  rounded: e = k.rounded,
+  loading: t,
+  linkTo: a,
   linkProps: n,
   type: s = "button",
   className: i,
-  ...l
+  ...u
 }) {
   let g;
-  o === "link" && !r ? g = "fitted" : g = r || j.size;
+  o === "link" && !r ? g = "fitted" : g = r || k.size;
   const d = v(
     "appearance-none focus:outline-none focus:ring not-disabled:hover:cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed transition-all",
     J[o],
     X[g],
     Y[e],
-    a && "relative pointer-events-none",
-    t && "relative",
+    t && "relative pointer-events-none",
+    a && "relative",
     i
   );
   return /* @__PURE__ */ w(
     "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"] || (n == null ? void 0 : n["aria-label"]),
+      "aria-description": u["aria-description"] || (n == null ? void 0 : n["aria-description"]),
+      "aria-disabled": u.disabled || t,
+      "aria-busy": t,
       type: s,
       className: d,
       children: [
-        a && /* @__PURE__ */ c(_, {}),
-        /* @__PURE__ */ c("span", { className: v(a && "invisible"), children: l.children }),
-        t && !l.disabled && /* @__PURE__ */ c(
+        t && /* @__PURE__ */ l(_, {}),
+        /* @__PURE__ */ l("span", { className: v(t && "invisible"), children: u.children }),
+        a && !u.disabled && /* @__PURE__ */ l(
           "a",
           {
             ...n,
             "aria-hidden": !0,
-            href: t,
+            href: a,
             target: (n == null ? void 0 : n.target) || "_blank",
             rel: (n == null ? void 0 : n.rel) || "noreferrer",
             className: "absolute inset-0"
@@ -221,8 +221,8 @@ function ue({
   );
 }
 function Z(o) {
-  const [r, e] = N(""), a = $((t) => {
-    let n = t, s = "";
+  const [r, e] = N(""), t = $((a) => {
+    let n = a, s = "";
     for (; n && !s; ) {
       const i = window.getComputedStyle(n).backgroundColor;
       i && i !== "transparent" && i !== "rgba(0, 0, 0, 0)" && (s = i), n = n.parentElement;
@@ -230,42 +230,42 @@ function Z(o) {
     return s || "transparent";
   }, []);
   return A(() => {
-    const t = document.getElementById(o);
-    if (t) {
-      const n = a(t.parentElement);
+    const a = document.getElementById(o);
+    if (a) {
+      const n = t(a.parentElement);
       e(n);
     }
-  }, [o, a]), r;
+  }, [o, t]), r;
 }
 function ce({
   ref: o,
   id: r,
   size: e = 20,
-  color: a,
-  filled: t = !1,
+  color: t,
+  filled: a = !1,
   rounded: n = !0,
   checked: s = !1,
   onCheckedChange: i,
-  disabled: l,
+  disabled: u,
   className: g = "",
   ...p
 }) {
-  const d = E(), h = R(() => r || `checkbox-${d}`, [r, d]), b = Z(h), [u, x] = N(s);
+  const d = E(), h = R(() => r || `checkbox-${d}`, [r, d]), b = Z(h), [c, x] = N(s);
   A(() => {
     x(s);
   }, [s]);
   const f = () => {
-    l || (x(!u), i == null || i(!u));
+    u || (x(!c), i == null || i(!c));
   }, y = (C) => {
     C.key === " " && (C.preventDefault(), f());
   }, m = 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",
+    u && "opacity-40 cursor-not-allowed",
+    !u && "cursor-pointer",
     g
   );
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ l(
     "button",
     {
       id: h,
@@ -274,35 +274,65 @@ function ce({
       tabIndex: 0,
       role: "checkbox",
       onClick: f,
-      "aria-checked": u,
-      "aria-disabled": l,
+      "aria-checked": c,
+      "aria-disabled": u,
       onKeyDownCapture: y,
       style: {
         width: e,
         height: e,
-        color: a,
-        backgroundColor: u && t ? "currentcolor" : "transparent"
+        color: t,
+        backgroundColor: c && a ? "currentcolor" : "transparent"
       },
       className: m,
       ...p,
-      children: u && /* @__PURE__ */ c(G, { size: e, color: t ? b : void 0 })
+      children: c && /* @__PURE__ */ l(G, { size: e, color: a ? b : void 0 })
     }
   );
 }
+function fe({
+  children: o,
+  className: r,
+  linkTo: e,
+  linkProps: t,
+  onButtonClick: a,
+  buttonProps: n,
+  ...s
+}) {
+  return e && a && console.warn('Clickable: Both "linkTo" and "onButtonClick" props are provided. Only "linkTo" will be used.'), /* @__PURE__ */ w("div", { className: v("relative w-fit", r), ...s, children: [
+    o,
+    e && /* @__PURE__ */ l(
+      "a",
+      {
+        ...t,
+        href: e,
+        className: v("absolute inset-0", t == null ? void 0 : t.className)
+      }
+    ),
+    !e && a && /* @__PURE__ */ l(
+      "button",
+      {
+        ...n,
+        type: "button",
+        onClick: a,
+        className: v("absolute inset-0 cursor-pointer", n == null ? void 0 : n.className)
+      }
+    )
+  ] });
+}
 function D({ elementId: o, type: r, message: e }) {
   return A(() => {
-    const a = document.getElementById(o);
-    if (a) {
+    const t = document.getElementById(o);
+    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", `${o}-${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__ */ w(
@@ -315,8 +345,8 @@ function D({ elementId: o, type: r, message: e }) {
       ),
       role: "status",
       children: [
-        r === "error" ? /* @__PURE__ */ c(H, {}) : /* @__PURE__ */ c(T, {}),
-        /* @__PURE__ */ c("span", { id: `${o}-${r}-message`, children: e })
+        r === "error" ? /* @__PURE__ */ l(H, {}) : /* @__PURE__ */ l(T, {}),
+        /* @__PURE__ */ l("span", { id: `${o}-${r}-message`, children: e })
       ]
     }
   ) : null;
@@ -326,7 +356,7 @@ const O = {
   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"
-}, P = {
+}, M = {
   none: "rounded-none",
   sm: "rounded-sm",
   md: "rounded-md",
@@ -336,24 +366,24 @@ const O = {
   variant: "default",
   rounded: "none"
 };
-function fe({
+function be({
   variant: o = L.variant,
   rounded: r,
   displayOnlyMode: e = !1,
-  errorMessage: a,
-  successMessage: t,
+  errorMessage: t,
+  successMessage: a,
   type: n = "text",
   className: s,
   ...i
 }) {
-  const l = E(), [g, p] = N(!1);
+  const u = E(), [g, p] = N(!1);
   let d = r;
   o === "outline" && !r && (d = "md"), d = d || L.rounded;
-  const u = v(
+  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 && O[o],
-    !e && P[d],
+    !e && M[d],
     n === "password" && "pr-10",
     !e && "px-2 py-1",
     e && "pointer-events-none",
@@ -361,110 +391,110 @@ function fe({
   );
   return /* @__PURE__ */ w("div", { className: v(e && "cursor-text"), style: { height: i.height, width: i.width }, children: [
     /* @__PURE__ */ w("div", { className: v(n === "password" && "relative"), children: [
-      /* @__PURE__ */ c(
+      /* @__PURE__ */ l(
         "input",
         {
           ...i,
-          id: l,
+          id: u,
           type: n === "password" && g ? "text" : n,
           "aria-disabled": i.disabled,
           readOnly: e,
           "aria-readonly": e || i["aria-readonly"],
-          "data-error": a ? !0 : void 0,
-          "data-success": t ? !0 : void 0,
-          className: u
+          "data-error": t ? !0 : void 0,
+          "data-success": a ? !0 : void 0,
+          className: c
         }
       ),
-      n === "password" && /* @__PURE__ */ c(
+      n === "password" && /* @__PURE__ */ l(
         "button",
         {
           onClick: () => p(!g),
           className: "absolute inset-y-0 right-0 px-2 hover:cursor-pointer",
           "aria-label": "Toggle password visibility",
           "data-state": g ? "visible" : "hidden",
-          children: g ? /* @__PURE__ */ c(Q, { size: 20 }) : /* @__PURE__ */ c(U, { size: 20 })
+          children: g ? /* @__PURE__ */ l(Q, { size: 20 }) : /* @__PURE__ */ l(U, { size: 20 })
         }
       )
     ] }),
-    !e && /* @__PURE__ */ c(D, { elementId: l, type: "error", message: a }),
-    !e && /* @__PURE__ */ c(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 be({
+function me({
   display: o = "inline",
   width: r = "fit-content",
   className: e = "",
-  required: a,
-  helpMessage: t,
+  required: t,
+  helpMessage: a,
   suffix: n,
   htmlFor: s,
   children: i,
-  ...l
+  ...u
 }) {
-  const g = E(), p = v("font-medium", o, e), d = t ? `${s ?? g}-help` : void 0;
+  const g = E(), p = v("font-medium", o, e), d = a ? `${s ?? g}-help` : void 0;
   return /* @__PURE__ */ w("div", { style: { display: o === "inline" ? "inline-flex" : "flex", width: r }, className: "relative", children: [
-    /* @__PURE__ */ w("label", { className: p, htmlFor: s, ...l, children: [
+    /* @__PURE__ */ w("label", { className: p, htmlFor: s, ...u, children: [
       i,
-      a && /* @__PURE__ */ c("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__ */ c(
+    a && /* @__PURE__ */ l(
       "span",
       {
         className: "text-gray-500 ml-1 size-fit -translate-y-1/3",
         "aria-describedby": d,
         "aria-label": "Help information",
-        title: t,
-        children: /* @__PURE__ */ c(W, {})
+        title: a,
+        children: /* @__PURE__ */ l(W, {})
       }
     ),
-    t && /* @__PURE__ */ c("div", { id: d, className: "sr-only", children: t }),
-    n && /* @__PURE__ */ c("span", { className: "ml-1", children: n })
+    a && /* @__PURE__ */ l("div", { id: d, className: "sr-only", children: a }),
+    n && /* @__PURE__ */ l("span", { className: "ml-1", children: n })
   ] });
 }
-function me({ children: o, ref: r, ...e }) {
+function ge({ children: o, ref: r, ...e }) {
   if (F(o)) {
-    let a = { ...e };
-    return o.props && (a = { ...a, ...o.props }), q(o, {
-      ...a,
-      ref: (t) => {
-        typeof r == "function" ? r(t) : r && (r.current = t);
+    let t = { ...e };
+    return o.props && (t = { ...t, ...o.props }), q(o, {
+      ...t,
+      ref: (a) => {
+        typeof r == "function" ? r(a) : r && (r.current = a);
       }
     });
   }
   return B("div", { ...e, ref: r }, o);
 }
-function M({ itemId: o, checked: r, onChange: e, name: a, disabled: t = !1, className: n = "" }) {
+function P({ itemId: o, checked: r, onChange: e, name: t, disabled: a = !1, className: n = "" }) {
   const s = "relative inline-flex items-center justify-center rounded-full", i = () => {
-    t || e();
-  }, l = v(
+    a || e();
+  }, u = v(
     s,
     !r && "hover:border-current/60",
-    !t && "border-current cursor-pointer",
-    t && "border-muted/60 cursor-not-allowed",
+    !a && "border-current cursor-pointer",
+    a && "border-muted/60 cursor-not-allowed",
     n
   );
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ l(
     "div",
     {
       id: o,
       role: "radio",
       tabIndex: -1,
       "aria-checked": r,
-      "aria-disabled": t,
-      "aria-description": `Radio button for ${a}`,
+      "aria-disabled": a,
+      "aria-description": `Radio button for ${t}`,
       "aria-labelledby": `${o}-label`,
       onClick: i,
-      className: l,
+      className: u,
       style: {
         width: "1em",
         height: "1em",
         padding: "0.1em",
         borderWidth: "0.06em"
       },
-      children: r && /* @__PURE__ */ c(
+      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")
         }
       )
     }
@@ -474,15 +504,15 @@ function z({
   value: o,
   children: r,
   className: e = "",
-  isSelected: a = !1,
-  onChange: t,
+  isSelected: t = !1,
+  onChange: a,
   disabled: n = !1,
   hideInput: s = !1,
   description: i,
-  name: l
+  name: u
 }) {
   const p = `radio-${E()}-${o}`, d = () => {
-    n || t == null || t(o);
+    n || a == null || a(o);
   };
   return /* @__PURE__ */ w(
     "div",
@@ -493,38 +523,38 @@ function z({
         e,
         // Uses text color for borders
         s && `p-2 border-2 focus-within:border-dashed focus-within:${n ? "border-current/50" : "border-current/80"}`,
-        s && !a && `border-transparent ${n ? "" : "not-focus-within:hover:border-border/60"}`,
-        s && a && "border-border",
+        s && !t && `border-transparent ${n ? "" : "not-focus-within:hover:border-border/60"}`,
+        s && t && "border-border",
         n && "opacity-60 cursor-not-allowed"
       ),
       style: {
         gap: "0.5em"
       },
       children: [
-        !s && /* @__PURE__ */ c(
-          M,
+        !s && /* @__PURE__ */ l(
+          P,
           {
             itemId: p,
-            name: l || "",
-            checked: a,
+            name: u || "",
+            checked: t,
             onChange: d,
             disabled: n,
             className: v(s && "")
           }
         ),
-        /* @__PURE__ */ c(
+        /* @__PURE__ */ l(
           "div",
           {
             id: s ? p : void 0,
             tabIndex: s ? -1 : void 0,
             role: s ? "radio" : void 0,
             onClick: s ? d : void 0,
-            "aria-checked": s ? a ? "true" : "false" : void 0,
+            "aria-checked": s ? t ? "true" : "false" : void 0,
             "aria-disabled": s ? n : void 0,
-            "aria-description": s ? i || `Radio button for ${l}` : void 0,
+            "aria-description": s ? i || `Radio button for ${u}` : void 0,
             "aria-labelledby": s ? `${p}-label` : void 0,
             className: v(s && "size-full", typeof r == "object" && "grow focus:outline-none"),
-            children: /* @__PURE__ */ c(
+            children: /* @__PURE__ */ l(
               "label",
               {
                 id: `${p}-label`,
@@ -540,52 +570,52 @@ function z({
   );
 }
 function ee(o, r) {
-  const [e, a] = N(r), [t, n] = N(-1), [s, i] = N(!1), l = $((b, u) => {
+  const [e, t] = N(r), [a, n] = N(-1), [s, i] = N(!1), u = $((b, c) => {
     var y;
-    const x = b[u];
-    x.hasAttribute("disabled") || x.getAttribute("aria-disabled") === "true" || ((y = b[u]) == null || y.click(), n(u));
+    const x = b[c];
+    x.hasAttribute("disabled") || x.getAttribute("aria-disabled") === "true" || ((y = b[c]) == null || y.click(), n(c));
   }, []), g = $(
-    (b, u) => {
+    (b, c) => {
       var f;
-      if (b.preventDefault(), s || !u.length) return;
+      if (b.preventDefault(), s || !c.length) return;
       const x = r !== -1 ? r : 0;
-      (f = u[x]) == null || f.focus(), a(x), r !== -1 && l(u, x);
+      (f = c[x]) == null || f.focus(), t(x), r !== -1 && u(c, x);
     },
-    [r, s, l]
+    [r, s, u]
   ), p = $(
     (b) => {
       var y;
       if (!b.shiftKey)
         return;
       b.preventDefault();
-      const u = Array.from(
+      const c = Array.from(
         document.querySelectorAll(
           'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
         )
-      ).filter((m) => !m.hasAttribute("disabled") && m.tabIndex >= 0), x = u.findIndex((m) => m.id === o), f = x > 0 ? x - 1 : u.length - 1;
-      (y = u[f]) == null || y.focus();
+      ).filter((m) => !m.hasAttribute("disabled") && m.tabIndex >= 0), x = c.findIndex((m) => m.id === o), f = x > 0 ? x - 1 : c.length - 1;
+      (y = c[f]) == null || y.focus();
     },
     [o]
   ), d = $(
-    (b, u) => {
+    (b, c) => {
       var C;
-      if (!u.length) return;
+      if (!c.length) return;
       const x = b.target;
-      if (!u.some((V) => V.id === x.id)) return;
+      if (!c.some((V) => V.id === x.id)) return;
       const y = e !== -1 ? e : 0;
       let m = y;
       switch (b.key) {
         case "ArrowUp":
         case "ArrowLeft":
-          b.preventDefault(), m = y > 0 ? y - 1 : u.length - 1;
+          b.preventDefault(), m = y > 0 ? y - 1 : c.length - 1;
           break;
         case "ArrowDown":
         case "ArrowRight":
-          b.preventDefault(), m = (y + 1) % u.length;
+          b.preventDefault(), m = (y + 1) % c.length;
           break;
         // Select the option when the space key is pressed
         case " ":
-          b.preventDefault(), l(u, y);
+          b.preventDefault(), u(c, y);
           return;
         case "Tab":
           p(b);
@@ -593,9 +623,9 @@ function ee(o, r) {
         default:
           return;
       }
-      (C = u[m]) == null || C.focus(), a(m), t !== -1 && l(u, m);
+      (C = c[m]) == null || C.focus(), t(m), a !== -1 && u(c, m);
     },
-    [e, t, p, l]
+    [e, a, p, u]
   ), h = $(() => {
     const b = document.querySelector(`[id="${o}"][role="radiogroup"]`);
     return b ? Array.from(b.querySelectorAll('[role="radio"]')) : [];
@@ -603,30 +633,30 @@ function ee(o, r) {
   A(() => {
     const b = document.querySelector(`[id="${o}"][role="radiogroup"]`);
     if (!b) return;
-    const u = h(), x = (C) => g(C, u), f = (C) => d(C, u), y = () => i(!0), m = () => i(!1);
+    const c = h(), x = (C) => g(C, c), f = (C) => d(C, c), y = () => i(!0), m = () => i(!1);
     return document.addEventListener("keydown", f), b.addEventListener("focus", x), b.addEventListener("mousedown", y), document.addEventListener("mouseup", m), () => {
       document.removeEventListener("keydown", f), b.removeEventListener("focus", x), b.removeEventListener("mousedown", y), document.removeEventListener("mouseup", m);
     };
   }, [o, h, g, d]);
 }
-function ge({
+function ve({
   options: o = [],
   value: r,
   onChange: e,
-  name: a,
-  children: t,
+  name: t,
+  children: a,
   className: n = "",
   childrenClassName: s = "",
   hideInputs: i = !1
 }) {
-  const l = E(), g = a || `radio-group-${l}`;
+  const u = E(), g = t || `radio-group-${u}`;
   ee(
     g,
     o.findIndex((d) => d === r)
   );
   const p = R(() => o.reduce((d, h) => (typeof h == "string" ? d.some((b) => b.value === h) || d.push({ label: h, value: h }) : d.push(h), d), []), [o]);
   return /* @__PURE__ */ w("div", { id: g, role: "radiogroup", tabIndex: 0, className: v(n, "focus:outline-none"), children: [
-    p.length > 0 && p.map((d, h) => /* @__PURE__ */ c(
+    p.length > 0 && p.map((d, h) => /* @__PURE__ */ l(
       z,
       {
         value: d.value,
@@ -641,7 +671,7 @@ function ge({
       },
       `${d.value}-${h}`
     )),
-    p.length === 0 && t && I.Children.map(t, (d) => I.isValidElement(d) && d.type === z ? /* @__PURE__ */ c(
+    p.length === 0 && a && I.Children.map(a, (d) => I.isValidElement(d) && d.type === z ? /* @__PURE__ */ l(
       z,
       {
         ...d.props,
@@ -656,21 +686,21 @@ function ge({
   ] });
 }
 function re({ elementId: o, maxLength: r }) {
-  const [e, a] = N(0);
+  const [e, t] = N(0);
   return A(() => {
-    const t = document.getElementById(o);
-    if (!t)
+    const a = document.getElementById(o);
+    if (!a)
       return;
     const n = () => {
-      const s = t.value.length;
-      a(s);
+      const s = a.value.length;
+      t(s);
       const i = s >= 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", `${o}-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 n(), a.addEventListener("input", n), a.setAttribute("maxlength", String(r)), () => {
+      a.removeEventListener("input", n), a.removeAttribute("maxlength"), a.removeAttribute("aria-describedby"), a.removeAttribute("aria-invalid"), a.removeAttribute("data-error");
     };
-  }, [o, r]), /* @__PURE__ */ c(
+  }, [o, r]), /* @__PURE__ */ l(
     "small",
     {
       className: v(
@@ -697,11 +727,11 @@ function te(o, 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]);
 }
@@ -723,12 +753,12 @@ function pe({
   variant: o = S.variant,
   rounded: r,
   displayOnlyMode: e = !1,
-  errorMessage: a,
-  successMessage: t,
+  errorMessage: t,
+  successMessage: a,
   hideResizeHandle: n = !1,
   autoExpand: s = !1,
   characterLimit: i = 0,
-  className: l,
+  className: u,
   ...g
 }) {
   const p = E();
@@ -737,17 +767,17 @@ function pe({
   o === "outline" && !r && (d = "md"), d = d || S.rounded;
   let h = n;
   (e || o === "left-line" && !n) && (h = !0);
-  const u = v(
+  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 && ae[o],
     !e && ne[d],
     !e && "px-2 py-1",
     e && "pointer-events-none",
     h && "no-resize-handle",
-    l
+    u
   );
   return /* @__PURE__ */ w("div", { className: v("-space-y-1.5", e && "cursor-text"), children: [
-    /* @__PURE__ */ c(
+    /* @__PURE__ */ l(
       "textarea",
       {
         ...g,
@@ -758,26 +788,27 @@ function pe({
         style: {
           resize: s ? "none" : void 0
         },
-        className: u
+        className: c
       }
     ),
-    i > 0 && /* @__PURE__ */ c(re, { elementId: p, maxLength: i }),
-    !e && /* @__PURE__ */ c(D, { elementId: p, type: "error", message: a }),
-    !e && /* @__PURE__ */ c(D, { elementId: p, type: "success", message: t })
+    i > 0 && /* @__PURE__ */ l(re, { elementId: p, maxLength: i }),
+    !e && /* @__PURE__ */ l(D, { elementId: p, type: "error", message: t }),
+    !e && /* @__PURE__ */ l(D, { elementId: p, type: "success", message: a })
   ] });
 }
 export {
   le as Accordion,
-  k as AccordionItem,
+  j as AccordionItem,
   ue as Button,
   _ as ButtonLoadingDots,
   ce as Checkbox,
-  fe as Input,
-  be as Label,
-  ge as RadioGroup,
+  fe as Clickable,
+  be as Input,
+  me as Label,
+  ve as RadioGroup,
   z as RadioGroupItem,
-  M as RadioInput,
-  me as Slot,
+  P as RadioInput,
+  ge as Slot,
   pe as Textarea
 };
 //# sourceMappingURL=components.esm.js.map