@moondreamsdev/dreamer-ui 1.7.4-test.1 → 1.7.4-test.2

package/dist/components.esm.js

@@ -1,122 +1,123 @@
-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 j({
-  id: o,
+import { jsxs as w, jsx as d, Fragment as G } from "react/jsx-runtime";
+import I, { useId as A, useState as C, createElement as V, useEffect as E, useCallback as $, useMemo as F, useRef as Q, isValidElement as U, cloneElement as W } from "react";
+import { join as p } from "./utils.esm.js";
+import { b as X, C as _, E as J, a as Y, d as Z, c as M, Q as O, X as P } from "./QuestionMarkCircled-JRFAPLtT.js";
+import { createPortal as ee } from "react-dom";
+function L({
+  id: n,
   title: r,
   content: e,
   children: t,
   className: a = "",
-  disabled: n = !1,
+  disabled: o = !1,
   isOpen: s = !1,
-  onToggle: i,
+  onToggle: l,
   triggerClassName: u = "",
-  bodyClassName: g = ""
+  bodyClassName: b = ""
 }) {
-  const p = E(), d = o || `accordion-item-${p}`, h = `${d}-header`, b = `${d}-panel`, c = () => {
-    !n && i && i();
-  }, x = (f) => {
+  const v = A(), i = n || `accordion-item-${v}`, x = `${i}-header`, m = `${i}-panel`, c = () => {
+    !o && l && l();
+  }, y = (f) => {
     (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", a), children: [
+  return /* @__PURE__ */ w("div", { className: p("border-b border-gray-200", o && "opacity-60 cursor-not-allowed", a), children: [
     /* @__PURE__ */ w(
       "button",
       {
-        id: h,
+        id: x,
         type: "button",
-        className: v(
+        className: p(
           "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",
+          o ? "cursor-not-allowed" : "hover:bg-gray-50/10 cursor-pointer",
           u
         ),
         "aria-expanded": s,
-        "aria-controls": b,
-        disabled: n,
+        "aria-controls": m,
+        disabled: o,
         onClick: c,
-        onKeyDown: x,
+        onKeyDown: y,
         children: [
-          /* @__PURE__ */ l("span", { children: r }),
-          /* @__PURE__ */ l(
+          /* @__PURE__ */ d("span", { children: r }),
+          /* @__PURE__ */ d(
             "span",
             {
-              className: v(
+              className: p(
                 "transform transition-transform duration-300 ease-linear",
                 s ? "rotate-180" : "rotate-0"
               ),
               "aria-hidden": "true",
-              children: /* @__PURE__ */ l(K, { size: 18 })
+              children: /* @__PURE__ */ d(X, { size: 18 })
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ d(
       "div",
       {
-        id: b,
+        id: m,
         role: "region",
-        "aria-labelledby": h,
-        className: v(
+        "aria-labelledby": x,
+        className: p(
           "transition-all duration-300 ease-linear px-4",
           s ? "max-h-96 opacity-100 overflow-auto py-3" : "max-h-0 opacity-0 overflow-hidden",
-          g
+          b
         ),
         children: s && (t || e)
       }
     )
   ] });
 }
-function le({
-  name: o,
+function Ce({
+  name: n,
   items: r = [],
   children: e,
   className: t = "",
   itemClassName: a = "",
-  allowMultiple: n = !1,
+  allowMultiple: o = !1,
   defaultOpenItems: s = [],
-  triggersClassName: i = "",
+  triggersClassName: 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;
+  const b = A(), v = n || `accordion-group-${b}`, [i, x] = C(new Set(s)), m = (f) => {
+    x((h) => {
+      const g = new Set(h);
+      return g.has(f) ? g.delete(f) : (o || g.clear(), g.add(f)), g;
     });
-  }, 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 || c(y);
-      return /* @__PURE__ */ l(
-        j,
+  }, c = (f) => `${b}-item-${f}`, y = (f) => i.has(f);
+  return /* @__PURE__ */ w("div", { id: v, className: t, children: [
+    r.length > 0 && r.map((f, h) => {
+      const g = f.id || c(h);
+      return /* @__PURE__ */ d(
+        L,
         {
-          id: m,
+          id: g,
           title: f.title,
           content: f.content,
           disabled: f.disabled,
-          isOpen: x(m),
-          onToggle: () => b(m),
+          isOpen: y(g),
+          onToggle: () => m(g),
           className: a,
-          triggerClassName: i,
+          triggerClassName: l,
           bodyClassName: u
         },
-        m
+        g
       );
     }),
-    r.length === 0 && e && I.Children.map(e, (f, y) => {
-      if (I.isValidElement(f) && f.type === j) {
-        const m = f.props.id || c(y);
-        return /* @__PURE__ */ B(
-          j,
+    r.length === 0 && e && I.Children.map(e, (f, h) => {
+      if (I.isValidElement(f) && f.type === L) {
+        const g = f.props.id || c(h);
+        return /* @__PURE__ */ V(
+          L,
           {
             ...f.props,
-            key: m,
-            id: m,
-            className: v(a, f.props.className),
-            isOpen: x(m),
-            onToggle: () => b(m),
-            triggerClassName: v(i, f.props.triggerClassName),
-            bodyClassName: v(u, f.props.bodyClassName)
+            key: g,
+            id: g,
+            className: p(a, f.props.className),
+            isOpen: y(g),
+            onToggle: () => m(g),
+            triggerClassName: p(l, f.props.triggerClassName),
+            bodyClassName: p(u, f.props.bodyClassName)
           }
         );
       }
@@ -124,25 +125,25 @@ function le({
     })
   ] });
 }
-function _() {
-  const [o, r] = N(0);
-  return A(() => {
+function re() {
+  const [n, r] = C(0);
+  return E(() => {
     const e = setInterval(() => {
       r((t) => (t + 1) % 3);
     }, 500);
     return () => clearInterval(e);
-  }, []), /* @__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(
+  }, []), /* @__PURE__ */ d("div", { className: "absolute inset-0 inline-flex items-center justify-center gap-x-2 align-middle", children: [0, 1, 2].map((e) => /* @__PURE__ */ d(
     "div",
     {
-      className: v(
+      className: p(
         "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 J = {
+const te = {
   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",
@@ -150,7 +151,7 @@ const J = {
   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"
-}, X = {
+}, ne = {
   stripped: "",
   fitted: "size-fit",
   sm: "px-2 py-1 text-sm",
@@ -158,61 +159,61 @@ const J = {
   lg: "px-6 py-3 text-lg",
   icon: "p-1 w-fit aspect-square",
   full: "p-2 w-full"
-}, Y = {
+}, ae = {
   none: "rounded-none",
   sm: "rounded-sm",
   md: "rounded-md",
   lg: "rounded-lg",
   full: "rounded-full"
-}, k = {
+}, j = {
   variant: "primary",
   size: "md",
   rounded: "md"
 };
-function ue({
-  variant: o = k.variant,
+function oe({
+  variant: n = j.variant,
   size: r,
-  rounded: e = k.rounded,
+  rounded: e = j.rounded,
   loading: t,
   linkTo: a,
-  linkProps: n,
+  linkProps: o,
   type: s = "button",
-  className: i,
+  className: l,
   ...u
 }) {
-  let g;
-  o === "link" && !r ? g = "fitted" : g = r || k.size;
-  const d = v(
+  let b;
+  n === "link" && !r ? b = "fitted" : b = r || j.size;
+  const i = p(
     "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],
+    te[n],
+    ne[b],
+    ae[e],
     t && "relative pointer-events-none",
     a && "relative",
-    i
+    l
   );
   return /* @__PURE__ */ w(
     "button",
     {
       ...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-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: s,
-      className: d,
+      className: i,
       children: [
-        t && /* @__PURE__ */ l(_, {}),
-        /* @__PURE__ */ l("span", { className: v(t && "invisible"), children: u.children }),
-        a && !u.disabled && /* @__PURE__ */ l(
+        t && /* @__PURE__ */ d(re, {}),
+        /* @__PURE__ */ d("span", { className: p(t && "invisible"), children: u.children }),
+        a && !u.disabled && /* @__PURE__ */ d(
           "a",
           {
-            ...n,
+            ...o,
             "aria-hidden": !0,
             href: a,
-            target: (n == null ? void 0 : n.target) || "_blank",
-            rel: (n == null ? void 0 : n.rel) || "noreferrer",
+            target: (o == null ? void 0 : o.target) || "_blank",
+            rel: (o == null ? void 0 : o.rel) || "noreferrer",
             className: "absolute inset-0"
           }
         )
@@ -220,108 +221,108 @@ function ue({
     }
   );
 }
-function Z(o) {
-  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;
+function se(n) {
+  const [r, e] = C(""), t = $((a) => {
+    let o = a, s = "";
+    for (; o && !s; ) {
+      const l = window.getComputedStyle(o).backgroundColor;
+      l && l !== "transparent" && l !== "rgba(0, 0, 0, 0)" && (s = l), o = o.parentElement;
     }
     return s || "transparent";
   }, []);
-  return A(() => {
-    const a = document.getElementById(o);
+  return E(() => {
+    const a = document.getElementById(n);
     if (a) {
-      const n = t(a.parentElement);
-      e(n);
+      const o = t(a.parentElement);
+      e(o);
     }
-  }, [o, t]), r;
+  }, [n, t]), r;
 }
-function ce({
-  ref: o,
+function Ee({
+  ref: n,
   id: r,
   size: e = 20,
   color: t,
   filled: a = !1,
-  rounded: n = !0,
+  rounded: o = !0,
   checked: s = !1,
-  onCheckedChange: i,
+  onCheckedChange: l,
   disabled: u,
-  className: g = "",
-  ...p
+  className: b = "",
+  ...v
 }) {
-  const d = E(), h = R(() => r || `checkbox-${d}`, [r, d]), b = Z(h), [c, x] = N(s);
-  A(() => {
-    x(s);
+  const i = A(), x = F(() => r || `checkbox-${i}`, [r, i]), m = se(x), [c, y] = C(s);
+  E(() => {
+    y(s);
   }, [s]);
   const f = () => {
-    u || (x(!c), i == null || i(!c));
-  }, y = (C) => {
-    C.key === " " && (C.preventDefault(), f());
-  }, m = v(
+    u || (y(!c), l == null || l(!c));
+  }, h = (N) => {
+    N.key === " " && (N.preventDefault(), f());
+  }, g = p(
     "flex items-center justify-center border outline outline-transparent focus:outline-current focus:outline-offset-2",
-    n && "rounded",
+    o && "rounded",
     u && "opacity-40 cursor-not-allowed",
     !u && "cursor-pointer",
-    g
+    b
   );
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ d(
     "button",
     {
-      id: h,
+      id: x,
       type: "button",
-      ref: o,
+      ref: n,
       tabIndex: 0,
       role: "checkbox",
       onClick: f,
       "aria-checked": c,
       "aria-disabled": u,
-      onKeyDownCapture: y,
+      onKeyDownCapture: h,
       style: {
         width: e,
         height: e,
         color: t,
         backgroundColor: c && a ? "currentcolor" : "transparent"
       },
-      className: m,
-      ...p,
-      children: c && /* @__PURE__ */ l(G, { size: e, color: a ? b : void 0 })
+      className: g,
+      ...v,
+      children: c && /* @__PURE__ */ d(_, { size: e, color: a ? m : void 0 })
     }
   );
 }
-function fe({
-  children: o,
+function Ae({
+  children: n,
   className: r,
   linkTo: e,
   linkProps: t,
   onButtonClick: a,
-  buttonProps: n,
+  buttonProps: o,
   ...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(
+  return e && a && console.warn('Clickable: Both "linkTo" and "onButtonClick" props are provided. Only "linkTo" will be used.'), /* @__PURE__ */ w("div", { className: p("relative w-fit", r), ...s, children: [
+    n,
+    e && /* @__PURE__ */ d(
       "a",
       {
         ...t,
         href: e,
-        className: v("absolute inset-0", t == null ? void 0 : t.className)
+        className: p("absolute inset-0", t == null ? void 0 : t.className)
       }
     ),
-    !e && a && /* @__PURE__ */ l(
+    !e && a && /* @__PURE__ */ d(
       "button",
       {
-        ...n,
+        ...o,
         type: "button",
         onClick: a,
-        className: v("absolute inset-0 cursor-pointer", n == null ? void 0 : n.className)
+        className: p("absolute inset-0 cursor-pointer", o == null ? void 0 : o.className)
       }
     )
   ] });
 }
-function D({ elementId: o, type: r, message: e }) {
-  return A(() => {
-    const t = document.getElementById(o);
+function D({ elementId: n, type: r, message: e }) {
+  return E(() => {
+    const t = document.getElementById(n);
     if (t) {
       if (!e && r === "error") {
         t.removeAttribute("data-error");
@@ -331,159 +332,278 @@ function D({ elementId: o, type: r, message: e }) {
         t.removeAttribute("data-success");
         return;
       }
-      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"), () => {
+      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__ */ w(
+  }, [n, r, e]), e ? /* @__PURE__ */ w(
     "small",
     {
-      className: v(
+      className: p(
         "mt-0.5 text-sm inline-flex items-center gap-1 w-full justify-start",
         r === "error" && "text-danger",
         r === "success" && "text-success"
       ),
       role: "status",
       children: [
-        r === "error" ? /* @__PURE__ */ l(H, {}) : /* @__PURE__ */ l(T, {}),
-        /* @__PURE__ */ l("span", { id: `${o}-${r}-message`, children: e })
+        r === "error" ? /* @__PURE__ */ d(J, {}) : /* @__PURE__ */ d(Y, {}),
+        /* @__PURE__ */ d("span", { id: `${n}-${r}-message`, children: e })
       ]
     }
   ) : null;
 }
-const O = {
+const ie = {
   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"
-}, M = {
+}, de = {
   none: "rounded-none",
   sm: "rounded-sm",
   md: "rounded-md",
   lg: "rounded-lg",
   full: "px-3 rounded-full"
-}, L = {
+}, B = {
   variant: "default",
   rounded: "none"
 };
-function be({
-  variant: o = L.variant,
+function $e({
+  variant: n = B.variant,
   rounded: r,
   displayOnlyMode: e = !1,
   errorMessage: t,
   successMessage: a,
-  type: n = "text",
+  type: o = "text",
   className: s,
-  ...i
+  ...l
 }) {
-  const u = E(), [g, p] = N(!1);
-  let d = r;
-  o === "outline" && !r && (d = "md"), d = d || L.rounded;
-  const c = v(
+  const u = A(), [b, v] = C(!1);
+  let i = r;
+  n === "outline" && !r && (i = "md"), i = i || B.rounded;
+  const c = p(
     "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 && M[d],
-    n === "password" && "pr-10",
+    !e && ie[n],
+    !e && de[i],
+    o === "password" && "pr-10",
     !e && "px-2 py-1",
     e && "pointer-events-none",
     s
   );
-  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__ */ l(
+  return /* @__PURE__ */ w("div", { className: p(e && "cursor-text"), style: { height: l.height, width: l.width }, children: [
+    /* @__PURE__ */ w("div", { className: p(o === "password" && "relative"), children: [
+      /* @__PURE__ */ d(
         "input",
         {
-          ...i,
+          ...l,
           id: u,
-          type: n === "password" && g ? "text" : n,
-          "aria-disabled": i.disabled,
+          type: o === "password" && b ? "text" : o,
+          "aria-disabled": l.disabled,
           readOnly: e,
-          "aria-readonly": e || i["aria-readonly"],
+          "aria-readonly": e || l["aria-readonly"],
           "data-error": t ? !0 : void 0,
           "data-success": a ? !0 : void 0,
           className: c
         }
       ),
-      n === "password" && /* @__PURE__ */ l(
+      o === "password" && /* @__PURE__ */ d(
         "button",
         {
-          onClick: () => p(!g),
+          onClick: () => v(!b),
           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__ */ l(Q, { size: 20 }) : /* @__PURE__ */ l(U, { size: 20 })
+          "data-state": b ? "visible" : "hidden",
+          children: b ? /* @__PURE__ */ d(Z, { size: 20 }) : /* @__PURE__ */ d(M, { size: 20 })
         }
       )
     ] }),
-    !e && /* @__PURE__ */ l(D, { elementId: u, type: "error", message: t }),
-    !e && /* @__PURE__ */ l(D, { elementId: u, type: "success", message: a })
+    !e && /* @__PURE__ */ d(D, { elementId: u, type: "error", message: t }),
+    !e && /* @__PURE__ */ d(D, { elementId: u, type: "success", message: a })
   ] });
 }
-function me({
-  display: o = "inline",
+function Ie({
+  display: n = "inline",
   width: r = "fit-content",
   className: e = "",
   required: t,
   helpMessage: a,
-  suffix: n,
+  suffix: o,
   htmlFor: s,
-  children: i,
+  children: l,
   ...u
 }) {
-  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, ...u, children: [
-      i,
-      t && /* @__PURE__ */ l("span", { className: "text-red-500 font-medium ml-1", "aria-label": "required", children: "*" })
+  const b = A(), v = p("font-medium", n, e), i = a ? `${s ?? b}-help` : void 0;
+  return /* @__PURE__ */ w("div", { style: { display: n === "inline" ? "inline-flex" : "flex", width: r }, className: "relative", children: [
+    /* @__PURE__ */ w("label", { className: v, htmlFor: s, ...u, children: [
+      l,
+      t && /* @__PURE__ */ d("span", { className: "text-red-500 font-medium ml-1", "aria-label": "required", children: "*" })
     ] }),
-    a && /* @__PURE__ */ l(
+    a && /* @__PURE__ */ d(
       "span",
       {
         className: "text-gray-500 ml-1 size-fit -translate-y-1/3",
-        "aria-describedby": d,
+        "aria-describedby": i,
         "aria-label": "Help information",
         title: a,
-        children: /* @__PURE__ */ l(W, {})
+        children: /* @__PURE__ */ d(O, {})
       }
     ),
-    a && /* @__PURE__ */ l("div", { id: d, className: "sr-only", children: a }),
-    n && /* @__PURE__ */ l("span", { className: "ml-1", children: n })
+    a && /* @__PURE__ */ d("div", { id: i, className: "sr-only", children: a }),
+    o && /* @__PURE__ */ d("span", { className: "ml-1", children: o })
   ] });
 }
-function ge({ children: o, ref: r, ...e }) {
-  if (F(o)) {
+function z(...n) {
+  return n.filter((r) => typeof r == "string" && r).join(" ").trim() || void 0;
+}
+function le({ isOpen: n }) {
+  const [r, e] = C(!1), [t, a] = C(!1);
+  return E(() => {
+    n ? (a(!0), setTimeout(() => e(!0), 10)) : (e(!1), setTimeout(() => a(!1), 150));
+  }, [n]), { show: r, shouldRender: t };
+}
+function ue({ isOpen: n, onClose: r }) {
+  E(() => {
+    const e = (t) => {
+      t.key === "Escape" && n && r();
+    };
+    return document.addEventListener("keydown", e), n && (document.body.style.overflow = "hidden"), () => {
+      document.removeEventListener("keydown", e), document.body.style.overflow = "auto";
+    };
+  }, [n, r]);
+}
+function ce({ modalId: n, isOpen: r }) {
+  const e = Q(null), t = $(() => {
+    const a = document.getElementById(n);
+    if (!a) return;
+    const o = a.querySelectorAll('[data-modal-action="true"]');
+    if (o.length > 0) {
+      o[0].focus();
+      return;
+    }
+    const s = a.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    if (s.length > 0) {
+      const l = Array.from(s).filter((u) => !(u instanceof HTMLButtonElement && u.getAttribute("data-modal-close-button") === "true"));
+      if (l.length > 0) {
+        l[0].focus();
+        return;
+      }
+      s[0].focus();
+      return;
+    }
+    a.focus();
+  }, [n]);
+  E(() => (r && (e.current = document.activeElement, t()), () => {
+    document.body.style.overflow = "auto", e.current instanceof HTMLElement && e.current.focus();
+  }), [r, t]);
+}
+function De({
+  id: n,
+  isOpen: r,
+  onClose: e,
+  title: t,
+  children: a,
+  contentOnly: o = !1,
+  className: s,
+  overlayClassName: l,
+  hideCloseButton: u = !1,
+  actions: b = [],
+  disableCloseOnOverlayClick: v = !1,
+  ariaLabelledBy: i,
+  ariaDescribedBy: x
+}) {
+  const m = A(), c = n || `modal-${m}`, y = n ? `${n}-title` : `modal-title-${m}`, { show: f, shouldRender: h } = le({ isOpen: r });
+  if (ce({ modalId: c, isOpen: h }), ue({ isOpen: h, onClose: e }), !h) return null;
+  const g = () => t ? I.isValidElement(t) ? /* @__PURE__ */ d("div", { className: "mb-4", children: t }) : /* @__PURE__ */ d("h2", { className: "mb-4 text-xl font-semibold", id: y, children: t }) : null, N = () => b.length === 0 ? null : /* @__PURE__ */ d("div", { className: "mt-6 not-sm:grid gap-y-2 sm:flex sm:justify-start sm:flex-row-reverse sm:gap-x-3", children: b.map((k, q) => {
+    const { label: T, className: H, ...K } = k;
+    return /* @__PURE__ */ d(oe, { className: H, type: "button", ...K, "data-modal-action": "true", children: T }, q);
+  }) });
+  return /* @__PURE__ */ d(G, { children: ee(
+    /* @__PURE__ */ d(
+      "div",
+      {
+        "aria-labelledby": i ?? t ? y : void 0,
+        "aria-describedby": x,
+        role: "dialog",
+        "aria-modal": "true",
+        className: "fixed inset-0 z-[100] overflow-y-auto",
+        children: /* @__PURE__ */ w("div", { className: "flex min-h-screen items-center justify-center p-4", children: [
+          /* @__PURE__ */ d(
+            "div",
+            {
+              className: z("fixed inset-0 bg-black/20 transition-all", l),
+              onClick: () => {
+                v || e();
+              }
+            }
+          ),
+          o && /* @__PURE__ */ d("div", { className: z("relative w-fit", s), children: a }),
+          !o && /* @__PURE__ */ w(
+            "div",
+            {
+              id: c,
+              tabIndex: -1,
+              className: z(
+                "relative w-full max-w-xl transform rounded-lg shadow-xl transition-all p-6 bg-inherit focus:border ease-in duration-75",
+                f ? "opacity-100 scale-100" : "opacity-0 scale-90",
+                s
+              ),
+              children: [
+                !u && /* @__PURE__ */ d(
+                  "button",
+                  {
+                    onClick: e,
+                    "data-modal-close-button": "true",
+                    className: "rounded-md p-0.5 top-2.5 right-2.5 absolute opacity-80 hover:opacity-100 transition-opacity focus:outline-none focus:ring-2 focus:ring-gray-500 leading-0",
+                    children: /* @__PURE__ */ d(P, { size: 18 })
+                  }
+                ),
+                g(),
+                a,
+                N()
+              ]
+            }
+          )
+        ] })
+      }
+    ),
+    document.body
+  ) });
+}
+function ke({ children: n, ref: r, ...e }) {
+  if (U(n)) {
     let t = { ...e };
-    return o.props && (t = { ...t, ...o.props }), q(o, {
+    return n.props && (t = { ...t, ...n.props }), W(n, {
       ...t,
       ref: (a) => {
         typeof r == "function" ? r(a) : r && (r.current = a);
       }
     });
   }
-  return B("div", { ...e, ref: r }, o);
+  return V("div", { ...e, ref: r }, 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 = () => {
+function fe({ itemId: n, checked: r, onChange: e, name: t, disabled: a = !1, className: o = "" }) {
+  const s = "relative inline-flex items-center justify-center rounded-full", l = () => {
     a || e();
-  }, u = v(
+  }, u = p(
     s,
     !r && "hover:border-current/60",
     !a && "border-current cursor-pointer",
     a && "border-muted/60 cursor-not-allowed",
-    n
+    o
   );
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ d(
     "div",
     {
-      id: o,
+      id: n,
       role: "radio",
       tabIndex: -1,
       "aria-checked": r,
       "aria-disabled": a,
       "aria-description": `Radio button for ${t}`,
-      "aria-labelledby": `${o}-label`,
-      onClick: i,
+      "aria-labelledby": `${n}-label`,
+      onClick: l,
       className: u,
       style: {
         width: "1em",
@@ -491,75 +611,75 @@ function P({ itemId: o, checked: r, onChange: e, name: t, disabled: a = !1, clas
         padding: "0.1em",
         borderWidth: "0.06em"
       },
-      children: r && /* @__PURE__ */ l(
+      children: r && /* @__PURE__ */ d(
         "div",
         {
-          className: v("size-full aspect-square rounded-full", a && "bg-muted/60", !a && "bg-current")
+          className: p("size-full aspect-square rounded-full", a && "bg-muted/60", !a && "bg-current")
         }
       )
     }
   );
 }
-function z({
-  value: o,
+function S({
+  value: n,
   children: r,
   className: e = "",
   isSelected: t = !1,
   onChange: a,
-  disabled: n = !1,
+  disabled: o = !1,
   hideInput: s = !1,
-  description: i,
+  description: l,
   name: u
 }) {
-  const p = `radio-${E()}-${o}`, d = () => {
-    n || a == null || a(o);
+  const v = `radio-${A()}-${n}`, i = () => {
+    o || a == null || a(n);
   };
   return /* @__PURE__ */ w(
     "div",
     {
-      title: i,
-      className: v(
+      title: l,
+      className: p(
         "relative flex items-center",
         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 && !t && `border-transparent ${n ? "" : "not-focus-within:hover:border-border/60"}`,
+        s && `p-2 border-2 focus-within:border-dashed focus-within:${o ? "border-current/50" : "border-current/80"}`,
+        s && !t && `border-transparent ${o ? "" : "not-focus-within:hover:border-border/60"}`,
         s && t && "border-border",
-        n && "opacity-60 cursor-not-allowed"
+        o && "opacity-60 cursor-not-allowed"
       ),
       style: {
         gap: "0.5em"
       },
       children: [
-        !s && /* @__PURE__ */ l(
-          P,
+        !s && /* @__PURE__ */ d(
+          fe,
           {
-            itemId: p,
+            itemId: v,
             name: u || "",
             checked: t,
-            onChange: d,
-            disabled: n,
-            className: v(s && "")
+            onChange: i,
+            disabled: o,
+            className: p(s && "")
           }
         ),
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ d(
           "div",
           {
-            id: s ? p : void 0,
+            id: s ? v : void 0,
             tabIndex: s ? -1 : void 0,
             role: s ? "radio" : void 0,
-            onClick: s ? d : void 0,
+            onClick: s ? i : void 0,
             "aria-checked": s ? t ? "true" : "false" : void 0,
-            "aria-disabled": s ? n : 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__ */ l(
+            "aria-disabled": s ? o : void 0,
+            "aria-description": s ? l || `Radio button for ${u}` : void 0,
+            "aria-labelledby": s ? `${v}-label` : void 0,
+            className: p(s && "size-full", typeof r == "object" && "grow focus:outline-none"),
+            children: /* @__PURE__ */ d(
               "label",
               {
-                id: `${p}-label`,
-                onClick: s ? void 0 : d,
-                className: v(n && "cursor-not-allowed", !n && "cursor-pointer"),
+                id: `${v}-label`,
+                onClick: s ? void 0 : i,
+                className: p(o && "cursor-not-allowed", !o && "cursor-pointer"),
                 children: r
               }
             )
@@ -569,147 +689,147 @@ function z({
     }
   );
 }
-function ee(o, r) {
-  const [e, t] = N(r), [a, n] = N(-1), [s, i] = N(!1), u = $((b, c) => {
-    var y;
-    const x = b[c];
-    x.hasAttribute("disabled") || x.getAttribute("aria-disabled") === "true" || ((y = b[c]) == null || y.click(), n(c));
-  }, []), g = $(
-    (b, c) => {
+function me(n, r) {
+  const [e, t] = C(r), [a, o] = C(-1), [s, l] = C(!1), u = $((m, c) => {
+    var h;
+    const y = m[c];
+    y.hasAttribute("disabled") || y.getAttribute("aria-disabled") === "true" || ((h = m[c]) == null || h.click(), o(c));
+  }, []), b = $(
+    (m, c) => {
       var f;
-      if (b.preventDefault(), s || !c.length) return;
-      const x = r !== -1 ? r : 0;
-      (f = c[x]) == null || f.focus(), t(x), r !== -1 && u(c, x);
+      if (m.preventDefault(), s || !c.length) return;
+      const y = r !== -1 ? r : 0;
+      (f = c[y]) == null || f.focus(), t(y), r !== -1 && u(c, y);
     },
     [r, s, u]
-  ), p = $(
-    (b) => {
-      var y;
-      if (!b.shiftKey)
+  ), v = $(
+    (m) => {
+      var h;
+      if (!m.shiftKey)
         return;
-      b.preventDefault();
+      m.preventDefault();
       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 = c.findIndex((m) => m.id === o), f = x > 0 ? x - 1 : c.length - 1;
-      (y = c[f]) == null || y.focus();
+      ).filter((g) => !g.hasAttribute("disabled") && g.tabIndex >= 0), y = c.findIndex((g) => g.id === n), f = y > 0 ? y - 1 : c.length - 1;
+      (h = c[f]) == null || h.focus();
     },
-    [o]
-  ), d = $(
-    (b, c) => {
-      var C;
+    [n]
+  ), i = $(
+    (m, c) => {
+      var N;
       if (!c.length) return;
-      const x = b.target;
-      if (!c.some((V) => V.id === x.id)) return;
-      const y = e !== -1 ? e : 0;
-      let m = y;
-      switch (b.key) {
+      const y = m.target;
+      if (!c.some((k) => k.id === y.id)) return;
+      const h = e !== -1 ? e : 0;
+      let g = h;
+      switch (m.key) {
         case "ArrowUp":
         case "ArrowLeft":
-          b.preventDefault(), m = y > 0 ? y - 1 : c.length - 1;
+          m.preventDefault(), g = h > 0 ? h - 1 : c.length - 1;
           break;
         case "ArrowDown":
         case "ArrowRight":
-          b.preventDefault(), m = (y + 1) % c.length;
+          m.preventDefault(), g = (h + 1) % c.length;
           break;
         // Select the option when the space key is pressed
         case " ":
-          b.preventDefault(), u(c, y);
+          m.preventDefault(), u(c, h);
           return;
         case "Tab":
-          p(b);
+          v(m);
           return;
         default:
           return;
       }
-      (C = c[m]) == null || C.focus(), t(m), a !== -1 && u(c, m);
+      (N = c[g]) == null || N.focus(), t(g), a !== -1 && u(c, g);
     },
-    [e, a, p, u]
-  ), h = $(() => {
-    const b = document.querySelector(`[id="${o}"][role="radiogroup"]`);
-    return b ? Array.from(b.querySelectorAll('[role="radio"]')) : [];
-  }, [o]);
-  A(() => {
-    const b = document.querySelector(`[id="${o}"][role="radiogroup"]`);
-    if (!b) return;
-    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);
+    [e, a, v, u]
+  ), x = $(() => {
+    const m = document.querySelector(`[id="${n}"][role="radiogroup"]`);
+    return m ? Array.from(m.querySelectorAll('[role="radio"]')) : [];
+  }, [n]);
+  E(() => {
+    const m = document.querySelector(`[id="${n}"][role="radiogroup"]`);
+    if (!m) return;
+    const c = x(), y = (N) => b(N, c), f = (N) => i(N, c), h = () => l(!0), g = () => l(!1);
+    return document.addEventListener("keydown", f), m.addEventListener("focus", y), m.addEventListener("mousedown", h), document.addEventListener("mouseup", g), () => {
+      document.removeEventListener("keydown", f), m.removeEventListener("focus", y), m.removeEventListener("mousedown", h), document.removeEventListener("mouseup", g);
     };
-  }, [o, h, g, d]);
+  }, [n, x, b, i]);
 }
-function ve({
-  options: o = [],
+function Le({
+  options: n = [],
   value: r,
   onChange: e,
   name: t,
   children: a,
-  className: n = "",
+  className: o = "",
   childrenClassName: s = "",
-  hideInputs: i = !1
+  hideInputs: l = !1
 }) {
-  const u = E(), g = t || `radio-group-${u}`;
-  ee(
-    g,
-    o.findIndex((d) => d === r)
+  const u = A(), b = t || `radio-group-${u}`;
+  me(
+    b,
+    n.findIndex((i) => i === 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__ */ l(
-      z,
+  const v = F(() => n.reduce((i, x) => (typeof x == "string" ? i.some((m) => m.value === x) || i.push({ label: x, value: x }) : i.push(x), i), []), [n]);
+  return /* @__PURE__ */ w("div", { id: b, role: "radiogroup", tabIndex: 0, className: p(o, "focus:outline-none"), children: [
+    v.length > 0 && v.map((i, x) => /* @__PURE__ */ d(
+      S,
       {
-        value: d.value,
-        isSelected: r === d.value,
+        value: i.value,
+        isSelected: r === i.value,
         onChange: e,
-        name: g,
-        disabled: d.disabled,
-        description: d.description,
-        hideInput: i,
+        name: b,
+        disabled: i.disabled,
+        description: i.description,
+        hideInput: l,
         className: s,
-        children: d.label
+        children: i.label
       },
-      `${d.value}-${h}`
+      `${i.value}-${x}`
     )),
-    p.length === 0 && a && I.Children.map(a, (d) => I.isValidElement(d) && d.type === z ? /* @__PURE__ */ l(
-      z,
+    v.length === 0 && a && I.Children.map(a, (i) => I.isValidElement(i) && i.type === S ? /* @__PURE__ */ d(
+      S,
       {
-        ...d.props,
-        className: v(s, d.props.className),
-        hideInput: d.props.hideInput || i,
-        isSelected: r === d.props.value,
+        ...i.props,
+        className: p(s, i.props.className),
+        hideInput: i.props.hideInput || l,
+        isSelected: r === i.props.value,
         onChange: e,
-        name: g,
-        children: d.props.children
+        name: b,
+        children: i.props.children
       }
     ) : null)
   ] });
 }
-function re({ elementId: o, maxLength: r }) {
-  const [e, t] = N(0);
-  return A(() => {
-    const a = document.getElementById(o);
+function be({ elementId: n, maxLength: r }) {
+  const [e, t] = C(0);
+  return E(() => {
+    const a = document.getElementById(n);
     if (!a)
       return;
-    const n = () => {
+    const o = () => {
       const s = a.value.length;
       t(s);
-      const i = s >= r;
-      a.setAttribute("aria-describedby", `${o}-character-count`), a.setAttribute("aria-invalid", i ? "true" : "false"), i ? a.setAttribute("data-error", "true") : a.removeAttribute("data-error");
+      const l = s >= r;
+      a.setAttribute("aria-describedby", `${n}-character-count`), a.setAttribute("aria-invalid", l ? "true" : "false"), l ? a.setAttribute("data-error", "true") : a.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");
+    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__ */ l(
+  }, [n, r]), /* @__PURE__ */ d(
     "small",
     {
-      className: v(
+      className: p(
         "mt-0.5 text-sm inline-flex items-center gap-1 w-full justify-end",
         e >= r && "text-danger",
         e < r && "text-current"
       ),
       role: "status",
-      children: /* @__PURE__ */ w("span", { id: `${o}-character-count`, children: [
+      children: /* @__PURE__ */ w("span", { id: `${n}-character-count`, children: [
         e,
         " / ",
         r,
@@ -718,9 +838,9 @@ function re({ elementId: o, maxLength: r }) {
     }
   );
 }
-function te(o, r) {
-  A(() => {
-    const e = document.getElementById(o);
+function ge(n, r) {
+  E(() => {
+    const e = document.getElementById(n);
     if (!e)
       return;
     if (!r) {
@@ -733,82 +853,83 @@ function te(o, r) {
     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 ae = {
+const ve = {
   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"
-}, ne = {
+}, pe = {
   none: "rounded-none",
   sm: "rounded-sm",
   md: "rounded-md",
   lg: "rounded-lg",
   full: "px-3 rounded-full"
-}, S = {
+}, R = {
   variant: "outline",
   rounded: "none"
 };
-function pe({
-  variant: o = S.variant,
+function je({
+  variant: n = R.variant,
   rounded: r,
   displayOnlyMode: e = !1,
   errorMessage: t,
   successMessage: a,
-  hideResizeHandle: n = !1,
+  hideResizeHandle: o = !1,
   autoExpand: s = !1,
-  characterLimit: i = 0,
+  characterLimit: l = 0,
   className: u,
-  ...g
+  ...b
 }) {
-  const p = E();
-  te(p, s || e);
-  let d = r;
-  o === "outline" && !r && (d = "md"), d = d || S.rounded;
-  let h = n;
-  (e || o === "left-line" && !n) && (h = !0);
-  const c = v(
+  const v = A();
+  ge(v, s || e);
+  let i = r;
+  n === "outline" && !r && (i = "md"), i = i || R.rounded;
+  let x = o;
+  (e || n === "left-line" && !o) && (x = !0);
+  const c = p(
     "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 && ve[n],
+    !e && pe[i],
     !e && "px-2 py-1",
     e && "pointer-events-none",
-    h && "no-resize-handle",
+    x && "no-resize-handle",
     u
   );
-  return /* @__PURE__ */ w("div", { className: v("-space-y-1.5", e && "cursor-text"), children: [
-    /* @__PURE__ */ l(
+  return /* @__PURE__ */ w("div", { className: p("-space-y-1.5", e && "cursor-text"), children: [
+    /* @__PURE__ */ d(
       "textarea",
       {
-        ...g,
-        id: p,
-        "aria-disabled": g.disabled,
+        ...b,
+        id: v,
+        "aria-disabled": b.disabled,
         readOnly: e,
-        "aria-readonly": e || g["aria-readonly"],
+        "aria-readonly": e || b["aria-readonly"],
         style: {
           resize: s ? "none" : void 0
         },
         className: c
       }
     ),
-    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 })
+    l > 0 && /* @__PURE__ */ d(be, { elementId: v, maxLength: l }),
+    !e && /* @__PURE__ */ d(D, { elementId: v, type: "error", message: t }),
+    !e && /* @__PURE__ */ d(D, { elementId: v, type: "success", message: a })
   ] });
 }
 export {
-  le as Accordion,
-  j as AccordionItem,
-  ue as Button,
-  _ as ButtonLoadingDots,
-  ce as Checkbox,
-  fe as Clickable,
-  be as Input,
-  me as Label,
-  ve as RadioGroup,
-  z as RadioGroupItem,
-  P as RadioInput,
-  ge as Slot,
-  pe as Textarea
+  Ce as Accordion,
+  L as AccordionItem,
+  oe as Button,
+  re as ButtonLoadingDots,
+  Ee as Checkbox,
+  Ae as Clickable,
+  $e as Input,
+  Ie as Label,
+  De as Modal,
+  Le as RadioGroup,
+  S as RadioGroupItem,
+  fe as RadioInput,
+  ke as Slot,
+  je as Textarea
 };
 //# sourceMappingURL=components.esm.js.map