@noxickon/onyx 0.0.3 → 0.0.4-dev.3

package/dist/onyx.es.js

@@ -1,73 +1,74 @@
 import { j as e } from "./chunks/jsx-runtime--oOP9f8K.js";
-import _, { useState as S, useEffect as H, useId as J, useRef as ee, useCallback as ne, createContext as le, useContext as ae } from "react";
-import { t as b, b as $, a as T, O as oe } from "./chunks/Button-BV4_pmoH.js";
-import { c as te, d as se, b as re } from "./chunks/Input-BraK4lDE.js";
-import { O as pt, a as gt } from "./chunks/Input-BraK4lDE.js";
-import { createPortal as ie } from "react-dom";
+import U, { useState as S, useEffect as V, useId as G, useRef as ee, useCallback as oe, createContext as ae, useContext as ie } from "react";
+import { t as b, b as $, a as B, O as le } from "./chunks/Button-bARrxYyo.js";
+import { c as te, d as se, b as re } from "./chunks/Input-dfvmdIHi.js";
+import { O as wt, a as jt } from "./chunks/Input-dfvmdIHi.js";
+import { createPortal as ce } from "react-dom";
 import { M as pe } from "./chunks/constants-CDXq37n6.js";
-import { u as ce } from "./chunks/useAuth-CR3bAGqp.js";
-import './index.css';const Re = ({ children: t, className: s }) => /* @__PURE__ */ e.jsx("div", { className: b("flex items-center gap-3", s), children: t }), X = {
+import { f as ge } from "./chunks/formatTimestamp-CMxOnPo1.js";
+import { u as de } from "./chunks/useAuth-DDRXztKj.js";
+import './index.css';const tt = ({ children: t, className: s }) => /* @__PURE__ */ e.jsx("div", { className: b("flex items-center gap-3", s), children: t }), Q = {
   rounded: "rounded-full",
   square: "rounded-lg"
-}, Z = {
+}, X = {
   sm: "h-6 w-6",
   md: "h-8 w-8",
   lg: "h-10 w-10",
   xl: "h-12 w-12",
   "2xl": "h-16 w-16"
-}, ge = {
+}, ve = {
   sm: "h-2 w-2",
   md: "h-2.5 w-2.5",
   lg: "h-3 w-3",
   xl: "h-3.5 w-3.5",
   "2xl": "h-4 w-4"
-}, ve = {
+}, we = {
   online: "bg-green-500",
   offline: "bg-neutral-500",
   away: "bg-yellow-500",
   busy: "bg-red-500"
-}, we = {
+}, je = {
   sm: "text-xs",
   md: "text-sm",
   lg: "text-base",
   xl: "text-base",
   "2xl": "text-lg"
-}, je = ({
+}, ye = ({
   alt: t,
   className: s,
   fallback: n,
   showStatus: o = !1,
   size: r = "md",
   skeleton: i = !1,
-  src: l,
-  status: a,
+  src: a,
+  status: l,
   type: u = "square"
 }) => {
-  const [v, x] = S(!1), [m, h] = S(!1), [f, p] = S(!0);
-  H(() => {
-    if (!l) {
-      x(!1), h(!0), p(!1);
+  const [h, d] = S(!1), [m, p] = S(!1), [f, g] = S(!0);
+  V(() => {
+    if (!a) {
+      d(!1), p(!0), g(!1);
       return;
     }
-    p(!0);
+    g(!0);
     const y = new Image();
-    y.src = l;
+    y.src = a;
     const k = () => {
-      x(!0), h(!1), p(!1);
+      d(!0), p(!1), g(!1);
     }, c = () => {
-      x(!1), h(!0), p(!1);
+      d(!1), p(!0), g(!1);
     };
     return y.addEventListener("load", k), y.addEventListener("error", c), () => {
       y.removeEventListener("load", k), y.removeEventListener("error", c);
     };
-  }, [l]);
-  const j = () => f && i ? /* @__PURE__ */ e.jsx("div", { className: $("animate-pulse bg-zinc-800", X[u], Z[r]) }) : v && !m ? /* @__PURE__ */ e.jsx(
+  }, [a]);
+  const j = () => f && i ? /* @__PURE__ */ e.jsx("div", { className: $("animate-pulse bg-zinc-800", Q[u], X[r]) }) : h && !m ? /* @__PURE__ */ e.jsx(
     "img",
     {
       alt: t,
-      className: b(X[u], Z[r], "object-cover", s),
+      className: b(Q[u], X[r], "object-cover", s),
       loading: "lazy",
-      src: l
+      src: a
     }
   ) : /* @__PURE__ */ e.jsx(
     "div",
@@ -75,9 +76,9 @@ import './index.css';const Re = ({ children: t, className: s }) => /* @__PURE__
       "aria-label": t,
       className: b(
         "flex items-center justify-center bg-zinc-800 font-medium text-white",
-        X[u],
-        Z[r],
-        we[r],
+        Q[u],
+        X[r],
+        je[r],
         s
       ),
       role: "img",
@@ -86,20 +87,20 @@ import './index.css';const Re = ({ children: t, className: s }) => /* @__PURE__
   );
   return /* @__PURE__ */ e.jsxs("div", { className: "relative shrink-0", children: [
     j(),
-    o && a && /* @__PURE__ */ e.jsx(
+    o && l && /* @__PURE__ */ e.jsx(
       "span",
       {
-        "aria-label": `Status: ${a}`,
+        "aria-label": `Status: ${l}`,
         className: $(
           "absolute right-0 bottom-0 rounded-full border-2 border-zinc-900",
-          ge[r],
-          ve[a]
+          ve[r],
+          we[l]
         ),
         role: "status"
       }
     )
   ] });
-}, et = ({
+}, st = ({
   className: t,
   size: s = "md",
   subtext: n,
@@ -122,11 +123,11 @@ import './index.css';const Re = ({ children: t, className: s }) => /* @__PURE__
     /* @__PURE__ */ e.jsx("span", { className: $("block truncate font-medium text-white", r[s]), children: o }),
     n && /* @__PURE__ */ e.jsx("span", { className: $("block truncate text-neutral-400", i[s]), children: n })
   ] });
-}, ye = {
+}, Ne = {
   sm: "px-1 py-0.5 text-xs",
   md: "px-1.5 py-0.5 text-sm",
   lg: "px-2 py-1 text-base"
-}, Ne = {
+}, ke = {
   purple: "bg-purple-500/25 text-purple-400",
   lime: "bg-lime-400/10 text-lime-300",
   red: "bg-red-500/25 text-red-400",
@@ -144,13 +145,13 @@ import './index.css';const Re = ({ children: t, className: s }) => /* @__PURE__
   fuchsia: "bg-fuchsia-500/25 text-fuchsia-400",
   gray: "bg-gray-500/25 text-gray-400"
 };
-function ke(t) {
+function Ce(t) {
   const s = t.startsWith("#") ? t.substring(1) : t;
   if (!/^[0-9A-Fa-f]{3,6}$/.test(s)) return "#FFFFFF";
   const o = parseInt(s.length === 3 ? s[0] + s[0] : s.substr(0, 2), 16), r = parseInt(s.length === 3 ? s[1] + s[1] : s.substr(2, 2), 16), i = parseInt(s.length === 3 ? s[2] + s[2] : s.substr(4, 2), 16);
   return (0.299 * o + 0.587 * r + 0.114 * i) / 255 > 0.5 ? "#000000" : "#FFFFFF";
 }
-const G = ({
+const q = ({
   bgColor: t,
   children: s,
   className: n,
@@ -158,30 +159,30 @@ const G = ({
   size: r = "md",
   textColor: i
 }) => {
-  const l = !t && !i ? Ne[o] : "", a = {};
-  return t && (a.backgroundColor = t, i || (a.color = ke(t))), i && (a.color = i), /* @__PURE__ */ e.jsx(
+  const a = !t && !i ? ke[o] : "", l = {};
+  return t && (l.backgroundColor = t, i || (l.color = Ce(t))), i && (l.color = i), /* @__PURE__ */ e.jsx(
     "span",
     {
       className: b(
         "inline-flex items-center rounded-md font-medium",
-        ye[r],
-        l,
+        Ne[r],
+        a,
         n
       ),
-      style: Object.keys(a).length ? a : void 0,
+      style: Object.keys(l).length ? l : void 0,
       children: s
     }
   );
-}, Ce = {
+}, Oe = {
   default: "bg-zinc-900/90 border border-zinc-800",
   outline: "bg-transparent border border-zinc-700",
   gradient: "bg-gradient-to-br from-zinc-900 via-purple-900/20 to-zinc-900 border border-purple-800/30"
-}, Oe = {
+}, ze = {
   none: "p-0",
   sm: "p-3",
   md: "p-4",
   lg: "p-6"
-}, ze = {
+}, Ee = {
   none: "",
   lift: "hover:scale-[1.01] hover:-translate-y-1",
   glow: "hover:shadow-lg hover:shadow-purple-500/10",
@@ -195,7 +196,7 @@ const G = ({
   amber: "hover:border-amber-500/50",
   cyan: "hover:border-cyan-500/50",
   indigo: "hover:border-indigo-500/50"
-}, Ee = {
+}, Le = {
   purple: "from-purple-500/5 to-pink-500/5",
   blue: "from-blue-500/5 to-cyan-500/5",
   emerald: "from-emerald-500/5 to-teal-500/5",
@@ -204,41 +205,41 @@ const G = ({
   amber: "from-amber-500/5 to-orange-500/5",
   cyan: "from-cyan-500/5 to-blue-500/5",
   indigo: "from-indigo-500/5 to-purple-500/5"
-}, tt = ({
+}, rt = ({
   backdropBlur: t = !1,
   children: s,
   className: n,
   color: o = "purple",
   equalHeight: r = !1,
   hoverVariant: i = "lift",
-  hoverable: l = !1,
-  padding: a = "md",
+  hoverable: a = !1,
+  padding: l = "md",
   variant: u = "default",
-  ...v
+  ...h
 }) => {
-  const x = l ? i : "none", m = l && x !== "none";
+  const d = a ? i : "none", m = a && d !== "none";
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
       className: b(
         "relative overflow-hidden rounded-lg transition-all duration-300",
-        Ce[u],
-        Oe[a],
+        Oe[u],
+        ze[l],
         r && "flex flex-col",
         t && "backdrop-blur-sm",
-        m && ze[x],
+        m && Ee[d],
         m && "group hover:bg-white/5",
         m && Ie[o],
         n
       ),
-      ...v,
+      ...h,
       children: [
         m && /* @__PURE__ */ e.jsx(
           "div",
           {
             className: b(
               "absolute inset-0 bg-gradient-to-br opacity-0 transition-opacity duration-300 group-hover:opacity-100",
-              Ee[o]
+              Le[o]
             )
           }
         ),
@@ -246,7 +247,7 @@ const G = ({
       ]
     }
   );
-}, Le = {
+}, Fe = {
   purple: {
     border: "border-purple-500/20",
     bg: "bg-purple-500/10",
@@ -287,36 +288,36 @@ const G = ({
     bg: "bg-indigo-500/10",
     text: "text-indigo-400"
   }
-}, st = ({
+}, nt = ({
   action: t,
   children: s,
   className: n,
   color: o = "purple",
   icon: r,
   iconColor: i,
-  subtitle: l,
-  title: a,
+  subtitle: a,
+  title: l,
   ...u
 }) => {
   if (s)
     return /* @__PURE__ */ e.jsx("div", { className: b("mb-4", n), ...u, children: s });
-  const x = Le[i || o];
+  const d = Fe[i || o];
   return /* @__PURE__ */ e.jsxs("div", { className: b("mb-4 flex items-start justify-between gap-3", n), ...u, children: [
     /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-3", children: [
-      r && /* @__PURE__ */ e.jsx("div", { className: b("rounded-lg border p-2", x.border, x.bg), children: /* @__PURE__ */ e.jsx(T, { className: x.text, icon: r }) }),
+      r && /* @__PURE__ */ e.jsx("div", { className: b("rounded-lg border p-2", d.border, d.bg), children: /* @__PURE__ */ e.jsx(B, { className: d.text, icon: r }) }),
       /* @__PURE__ */ e.jsxs("div", { children: [
-        a && /* @__PURE__ */ e.jsx("h3", { className: "text-base font-semibold text-white", children: a }),
-        l && /* @__PURE__ */ e.jsx("p", { className: "text-sm text-neutral-400", children: l })
+        l && /* @__PURE__ */ e.jsx("h3", { className: "text-base font-semibold text-white", children: l }),
+        a && /* @__PURE__ */ e.jsx("p", { className: "text-sm text-neutral-400", children: a })
       ] })
     ] }),
     t && /* @__PURE__ */ e.jsx("div", { children: t })
   ] });
-}, rt = ({
+}, ot = ({
   children: t,
   className: s,
   flexGrow: n = !0,
   ...o
-}) => /* @__PURE__ */ e.jsx("div", { className: b("py-2", n && "flex-grow", s), ...o, children: t }), nt = ({ children: t, className: s, ...n }) => /* @__PURE__ */ e.jsx(
+}) => /* @__PURE__ */ e.jsx("div", { className: b("py-2", n && "flex-grow", s), ...o, children: t }), lt = ({ children: t, className: s, ...n }) => /* @__PURE__ */ e.jsx(
   "div",
   {
     className: b(
@@ -326,37 +327,37 @@ const G = ({
     ...n,
     children: t
   }
-), Fe = {
+), Se = {
   sm: "h-4 w-4",
   md: "h-5 w-5",
   lg: "h-6 w-6"
-}, Se = {
+}, $e = {
   sm: 0.5,
   md: 0.7,
   lg: 0.9
-}, ot = ({
+}, at = ({
   checked: t,
   className: s,
   defaultChecked: n,
   description: o,
   disabled: r = !1,
   error: i = !1,
-  errorMessage: l,
-  id: a,
+  errorMessage: a,
+  id: l,
   label: u,
-  name: v,
-  onChange: x,
+  name: h,
+  onChange: d,
   required: m = !1,
-  size: h = "md",
+  size: p = "md",
   value: f,
-  ...p
+  ...g
 }) => {
-  const j = J(), y = a || j, k = `${y}-checkbox`, c = `${y}-description`, w = `${y}-error`, N = i && l, E = /* @__PURE__ */ e.jsxs("div", { className: "relative inline-flex shrink-0", children: [
+  const j = G(), y = l || j, k = `${y}-checkbox`, c = `${y}-description`, v = `${y}-error`, N = i && a, E = /* @__PURE__ */ e.jsxs("div", { className: "relative inline-flex shrink-0", children: [
     /* @__PURE__ */ e.jsx(
       "input",
       {
         id: k,
-        "aria-describedby": [o ? c : "", N ? w : ""].filter(Boolean).join(" ") || void 0,
+        "aria-describedby": [o ? c : "", N ? v : ""].filter(Boolean).join(" ") || void 0,
         "aria-invalid": i,
         "aria-required": m,
         checked: t,
@@ -366,24 +367,24 @@ const G = ({
           "default-outset-focus",
           "disabled:cursor-not-allowed disabled:opacity-50",
           i ? "default-error-border" : "default-border",
-          Fe[h],
+          Se[p],
           s
         ),
         defaultChecked: n,
         disabled: r,
-        name: v,
+        name: h,
         type: "checkbox",
         value: f,
-        onChange: x,
-        ...p
+        onChange: d,
+        ...g
       }
     ),
     /* @__PURE__ */ e.jsx(
-      T,
+      B,
       {
         className: "pointer-events-none absolute inset-0 m-auto opacity-0 peer-checked:opacity-80",
         icon: "mdiCheck",
-        size: Se[h] || 0.7
+        size: $e[p] || 0.7
       }
     )
   ] });
@@ -395,108 +396,108 @@ const G = ({
         o ? /* @__PURE__ */ e.jsx(se, { id: c, disabled: r, children: o }) : null
       ] })
     ] }),
-    N ? /* @__PURE__ */ e.jsx(re, { id: w, children: l }) : null
+    N ? /* @__PURE__ */ e.jsx(re, { id: v, children: a }) : null
   ] });
-}, de = ({
+}, ne = ({
   align: t = "center",
   ariaHaspopup: s,
   children: n,
   className: o,
   content: r,
   contentClassName: i,
-  contentRole: l,
-  contentStyle: a,
+  contentRole: a,
+  contentStyle: l,
   disabled: u = !1,
-  id: v,
-  offset: x = 8,
+  id: h,
+  offset: d = 8,
   onOpenChange: m,
-  open: h,
+  open: p,
   portal: f = !0,
-  position: p = "top",
+  position: g = "top",
   trigger: j = "hover",
   useAriaControls: y = !1
 }) => {
-  const k = J(), [c, w] = S(!1), N = ee(null), E = ee(null), F = h !== void 0, C = u ? !1 : F ? h : c, D = v || k, L = ne(
-    (d) => {
-      u || (m == null || m(d), F || w(d));
+  const k = G(), [c, v] = S(!1), N = ee(null), E = ee(null), F = p !== void 0, C = u ? !1 : F ? p : c, D = h || k, I = oe(
+    (x) => {
+      u || (m?.(x), F || v(x));
     },
     [u, F, m]
-  ), W = ne(() => {
+  ), W = oe(() => {
     if (!N.current || !E.current || !C) return;
-    const d = N.current.getBoundingClientRect(), g = E.current.getBoundingClientRect(), O = {
+    const x = N.current.getBoundingClientRect(), w = E.current.getBoundingClientRect(), z = {
       width: window.innerWidth,
       height: window.innerHeight
     };
-    let z = p;
-    p === "top" && d.top < g.height + x ? z = "bottom" : p === "bottom" && d.bottom + g.height + x > O.height ? z = "top" : p === "left" && d.left < g.width + x ? z = "right" : p === "right" && d.right + g.width + x > O.width && (z = "left");
-    const I = P(d, g, z, t, x);
-    E.current && (E.current.style.left = `${I.x}px`, E.current.style.top = `${I.y}px`);
-  }, [C, p, t, x]);
-  H(() => {
+    let L = g;
+    g === "top" && x.top < w.height + d ? L = "bottom" : g === "bottom" && x.bottom + w.height + d > z.height ? L = "top" : g === "left" && x.left < w.width + d ? L = "right" : g === "right" && x.right + w.width + d > z.width && (L = "left");
+    const M = H(x, w, L, t, d);
+    E.current && (E.current.style.left = `${M.x}px`, E.current.style.top = `${M.y}px`);
+  }, [C, g, t, d]);
+  V(() => {
     if (!C || j !== "click") return;
-    const d = (g) => {
-      N.current && !N.current.contains(g.target) && E.current && !E.current.contains(g.target) && L(!1);
+    const x = (w) => {
+      N.current && !N.current.contains(w.target) && E.current && !E.current.contains(w.target) && I(!1);
     };
-    return document.addEventListener("mousedown", d), () => document.removeEventListener("mousedown", d);
-  }, [C, L, j]), H(() => {
+    return document.addEventListener("mousedown", x), () => document.removeEventListener("mousedown", x);
+  }, [C, I, j]), V(() => {
     if (C) {
       W();
-      const d = () => W(), g = () => W();
-      return window.addEventListener("resize", d), window.addEventListener("scroll", g, !0), () => {
-        window.removeEventListener("resize", d), window.removeEventListener("scroll", g, !0);
+      const x = () => W(), w = () => W();
+      return window.addEventListener("resize", x), window.addEventListener("scroll", w, !0), () => {
+        window.removeEventListener("resize", x), window.removeEventListener("scroll", w, !0);
       };
     }
-  }, [C, p, t, x, W]);
-  const P = (d, g, O, z, I) => {
-    let B = 0, M = 0;
-    switch (O) {
+  }, [C, g, t, d, W]);
+  const H = (x, w, z, L, M) => {
+    let P = 0, T = 0;
+    switch (z) {
       case "top":
-        B = d.left, M = d.top - g.height - I;
+        P = x.left, T = x.top - w.height - M;
         break;
       case "bottom":
-        B = d.left, M = d.bottom + I;
+        P = x.left, T = x.bottom + M;
         break;
       case "left":
-        B = d.left - g.width - I, M = d.top;
+        P = x.left - w.width - M, T = x.top;
         break;
       case "right":
-        B = d.right + I, M = d.top;
+        P = x.right + M, T = x.top;
         break;
     }
-    if (O === "top" || O === "bottom")
-      switch (z) {
+    if (z === "top" || z === "bottom")
+      switch (L) {
         case "start":
           break;
         case "center":
-          B = d.left + (d.width - g.width) / 2;
+          P = x.left + (x.width - w.width) / 2;
           break;
         case "end":
-          B = d.right - g.width;
+          P = x.right - w.width;
           break;
       }
-    else if (O === "left" || O === "right")
-      switch (z) {
+    else if (z === "left" || z === "right")
+      switch (L) {
         case "start":
           break;
         case "center":
-          M = d.top + (d.height - g.height) / 2;
+          T = x.top + (x.height - w.height) / 2;
           break;
         case "end":
-          M = d.bottom - g.height;
+          T = x.bottom - w.height;
           break;
       }
-    return { x: B, y: M };
-  }, V = () => {
-    j === "hover" && L(!0);
-  }, Y = () => {
-    j === "hover" && L(!1);
+    return { x: P, y: T };
+  }, A = () => {
+    j === "hover" && I(!0);
+  }, J = () => {
+    j === "hover" && I(!1);
   }, K = () => {
-    j === "click" && L(!C);
-  }, q = () => {
-    j === "focus" && L(!0);
-  }, Q = () => {
-    j === "focus" && L(!1);
-  }, U = C ? /* @__PURE__ */ e.jsx(
+    j === "click" && I(!C);
+  }, _ = () => {
+    j === "focus" && I(!0);
+  }, Y = () => {
+    j === "focus" && I(!1);
+  }, O = C ? /* @__PURE__ */ e.jsx(
     "div",
     {
       id: D,
@@ -507,8 +508,8 @@ const G = ({
         i
       ),
       ref: E,
-      role: l,
-      style: { left: -9999, top: -9999, ...a },
+      role: a,
+      style: { left: -9999, top: -9999, ...l },
       children: /* @__PURE__ */ e.jsx("div", { className: "relative", children: r })
     }
   ) : null;
@@ -522,17 +523,17 @@ const G = ({
         "aria-haspopup": s,
         className: b("w-full", o),
         ref: N,
-        onBlur: Q,
+        onBlur: Y,
         onClick: K,
-        onFocus: q,
-        onMouseEnter: V,
-        onMouseLeave: Y,
+        onFocus: _,
+        onMouseEnter: A,
+        onMouseLeave: J,
         children: n
       }
     ),
-    f && typeof document < "u" ? ie(U, document.body) : U
+    f && typeof document < "u" ? ce(O, document.body) : O
   ] });
-}, ue = ({ children: t }) => /* @__PURE__ */ e.jsx(e.Fragment, { children: t }), $e = ({ children: t }) => /* @__PURE__ */ e.jsx(e.Fragment, { children: t }), xe = ({ children: t, className: s }) => /* @__PURE__ */ e.jsx(
+}, ue = ({ children: t }) => /* @__PURE__ */ e.jsx(e.Fragment, { children: t }), De = ({ children: t }) => /* @__PURE__ */ e.jsx(e.Fragment, { children: t }), xe = ({ children: t, className: s }) => /* @__PURE__ */ e.jsx(
   "div",
   {
     className: b(
@@ -541,14 +542,14 @@ const G = ({
     ),
     children: t
   }
-), me = le({
+), me = ae({
   open: !1,
   setOpen: () => {
   },
   disabled: !1
 });
 function fe() {
-  const t = ae(me);
+  const t = ie(me);
   if (t === void 0)
     throw new Error("useDropdownContext must be used within a DropdownProvider");
   return t;
@@ -560,17 +561,17 @@ const be = ({
   disabled: o = !1,
   icon: r,
   outline: i = !1,
-  unstyled: l = !1,
-  ...a
+  unstyled: a = !1,
+  ...l
 }) => {
-  const { disabled: u, open: v } = fe(), x = o || u;
+  const { disabled: u, open: h } = fe(), d = o || u;
   return /* @__PURE__ */ e.jsxs(
     "button",
     {
-      "aria-expanded": v,
+      "aria-expanded": h,
       "aria-haspopup": "menu",
       className: b(
-        !l && [
+        !a && [
           "flex h-10 items-center justify-between rounded-lg px-3 py-2 text-sm enabled:cursor-pointer enabled:text-white enabled:hover:bg-white/6",
           "default-outset-focus",
           i ? "default-border" : "bg-transparent",
@@ -578,18 +579,18 @@ const be = ({
         ],
         n
       ),
-      disabled: x,
+      disabled: d,
       type: "button",
-      ...a,
+      ...l,
       children: [
-        l ? s : /* @__PURE__ */ e.jsx("span", { className: "flex items-center gap-2", children: s }),
+        a ? s : /* @__PURE__ */ e.jsx("span", { className: "flex items-center gap-2", children: s }),
         r && /* @__PURE__ */ e.jsx(
-          T,
+          B,
           {
             className: $(
-              !l && "ml-2",
-              x && "text-neutral-500",
-              t && ["transition-transform duration-200", v && "rotate-180"]
+              !a && "ml-2",
+              d && "text-neutral-500",
+              t && ["transition-transform duration-200", h && "rotate-180"]
             ),
             icon: r,
             size: 0.8
@@ -598,7 +599,7 @@ const be = ({
       ]
     }
   );
-}, De = ({
+}, We = ({
   children: t,
   className: s,
   defaultOpen: n = !1,
@@ -606,11 +607,11 @@ const be = ({
   onOpenChange: r,
   open: i
 }) => {
-  const [l, a] = S(n), u = i !== void 0, v = u ? i : l, x = (c) => {
-    o || (u || a(c), r == null || r(c));
-  }, m = { open: v, setOpen: x, disabled: o };
-  let h = null, f = null;
-  const p = {
+  const [a, l] = S(n), u = i !== void 0, h = u ? i : a, d = (c) => {
+    o || (u || l(c), r?.(c));
+  }, m = { open: h, setOpen: d, disabled: o };
+  let p = null, f = null;
+  const g = {
     children: null,
     className: ""
   }, j = {
@@ -622,22 +623,22 @@ const be = ({
     align: "start",
     className: ""
   };
-  _.Children.forEach(t, (c) => {
-    if (_.isValidElement(c)) {
+  U.Children.forEach(t, (c) => {
+    if (U.isValidElement(c)) {
       if (c.type === be)
-        h = c;
+        p = c;
       else if (c.type === xe) {
-        const w = c.props;
-        p.className = w.className, p.children = w.children;
-      } else if (c.type === $e) {
-        const w = c.props;
-        j.className = w.className, j.children = w.children;
+        const v = c.props;
+        g.className = v.className, g.children = v.children;
+      } else if (c.type === De) {
+        const v = c.props;
+        j.className = v.className, j.children = v.children;
       } else if (c.type === ue) {
-        const w = c.props;
-        f = w.children, y = {
-          side: w.side || "bottom",
-          align: w.align || "start",
-          className: w.className || ""
+        const v = c.props;
+        f = v.children, y = {
+          side: v.side || "bottom",
+          align: v.align || "start",
+          className: v.className || ""
         };
       }
     }
@@ -652,14 +653,14 @@ const be = ({
         y.className
       ),
       children: [
-        p.children ? /* @__PURE__ */ e.jsx(
+        g.children ? /* @__PURE__ */ e.jsx(
           "div",
           {
             className: b(
               "flex-shrink-0 border-b border-neutral-700 bg-zinc-1000/95 px-3 py-2 backdrop-blur-sm",
-              p.className
+              g.className
             ),
-            children: p.children
+            children: g.children
           }
         ) : null,
         /* @__PURE__ */ e.jsx("ul", { className: b("min-h-0 flex-1 overflow-y-auto"), children: f }),
@@ -677,21 +678,21 @@ const be = ({
     }
   );
   return /* @__PURE__ */ e.jsx(me.Provider, { value: m, children: /* @__PURE__ */ e.jsx("div", { className: b("inline-block", s), children: /* @__PURE__ */ e.jsx(
-    de,
+    ne,
     {
       align: y.align,
       content: k,
       contentRole: "menu",
       disabled: o,
-      open: v,
+      open: h,
       portal: !0,
       position: y.side,
       trigger: "click",
-      onOpenChange: x,
-      children: h
+      onOpenChange: d,
+      children: p
     }
   ) }) });
-}, We = ({
+}, Be = ({
   children: t,
   className: s,
   disabled: n = !1,
@@ -699,8 +700,8 @@ const be = ({
   onClick: r,
   unstyled: i = !1
 }) => {
-  const { setOpen: l } = fe(), a = (u) => {
-    n || (r && r(u), l(!1));
+  const { setOpen: a } = fe(), l = (u) => {
+    n || (r && r(u), a(!1));
   };
   return /* @__PURE__ */ e.jsx("li", { children: /* @__PURE__ */ e.jsxs(
     "button",
@@ -716,10 +717,10 @@ const be = ({
       ),
       disabled: n,
       role: "menuitem",
-      onClick: a,
+      onClick: l,
       children: [
         o && /* @__PURE__ */ e.jsx(
-          T,
+          B,
           {
             className: $("mr-2", n && "text-neutral-500"),
             icon: o,
@@ -730,22 +731,14 @@ const be = ({
       ]
     }
   ) });
-}, lt = ({ className: t }) => /* @__PURE__ */ e.jsx("li", { className: "px-1 py-1", children: /* @__PURE__ */ e.jsx("hr", { className: b("border-t-neutral-700", t) }) }), at = ({ children: t, className: s }) => /* @__PURE__ */ e.jsx(
+}, it = ({ className: t }) => /* @__PURE__ */ e.jsx("li", { className: "px-1 py-1", children: /* @__PURE__ */ e.jsx("hr", { className: b("border-t-neutral-700", t) }) }), ct = ({ children: t, className: s }) => /* @__PURE__ */ e.jsx(
   "span",
   {
     className: b("ml-auto text-xs tracking-widest text-neutral-500", s),
     "data-part": "dropdown-shortcut",
     children: t
   }
-), Te = (t) => {
-  const n = Math.floor(((/* @__PURE__ */ new Date()).getTime() - t.getTime()) / (1e3 * 60));
-  if (n < 1) return "just now";
-  if (n < 60) return `${n}m ago`;
-  const o = Math.floor(n / 60);
-  if (o < 24) return `${o}h ago`;
-  const r = Math.floor(o / 24);
-  return r < 7 ? `${r}d ago` : t.toLocaleDateString();
-}, Be = {
+), Me = {
   error: {
     background: "bg-rose-500/20",
     iconClass: "text-rose-400",
@@ -771,39 +764,39 @@ const be = ({
     iconClass: "text-neutral-400",
     icon: "mdiBellOutline"
   }
-}, it = ({
+}, dt = ({
   className: t,
   disabled: s = !1,
   emptyMessage: n = "No notifications",
   maxHeight: o = "max-h-96",
   notifications: r,
   onMarkAllRead: i,
-  onNotificationClick: l,
-  unreadCount: a = 0
+  onNotificationClick: a,
+  unreadCount: l = 0
 }) => {
-  const [u, v] = S(!1), [x, m] = S(!1), h = a > 99 ? "99+" : a.toString(), f = a > 0, p = r.length > 0;
-  H(() => {
+  const [u, h] = S(!1), [d, m] = S(!1), p = l > 99 ? "99+" : l.toString(), f = l > 0, g = r.length > 0;
+  V(() => {
     const c = () => {
-      const w = window.innerWidth < pe;
-      m(w), w && u ? document.body.classList.add("overflow-hidden") : document.body.classList.remove("overflow-hidden");
+      const v = window.innerWidth < pe;
+      m(v), v && u ? document.body.classList.add("overflow-hidden") : document.body.classList.remove("overflow-hidden");
     };
     return c(), window.addEventListener("resize", c), () => {
       document.body.classList.remove("overflow-hidden"), window.removeEventListener("resize", c);
     };
   }, [u]);
   const j = (c) => {
-    l == null || l(c), x && v(!1);
+    a?.(c), d && h(!1);
   }, y = () => {
-    i == null || i(), x && v(!1);
-  }, k = () => /* @__PURE__ */ e.jsx(e.Fragment, { children: p ? /* @__PURE__ */ e.jsx("div", { className: "divide-y divide-neutral-800/50", children: r.map((c, w) => {
-    const N = Be[c.type || "default"];
+    i?.(), d && h(!1);
+  }, k = () => /* @__PURE__ */ e.jsx(e.Fragment, { children: g ? /* @__PURE__ */ e.jsx("div", { className: "divide-y divide-neutral-800/50", children: r.map((c, v) => {
+    const N = Me[c.type || "default"];
     return /* @__PURE__ */ e.jsxs(
-      We,
+      Be,
       {
         className: b(
           "secondary-inset-focus flex w-full items-start gap-3 px-3 py-3 text-left hover:bg-white/6",
           !c.read && "bg-white/3",
-          w === r.length - 1 && "pb-4"
+          v === r.length - 1 && "pb-4"
         ),
         unstyled: !0,
         onClick: () => j(c),
@@ -816,7 +809,7 @@ const be = ({
                 N.background
               ),
               children: c.img ? /* @__PURE__ */ e.jsx(
-                je,
+                ye,
                 {
                   alt: "User avatar",
                   fallback: "NA",
@@ -824,7 +817,7 @@ const be = ({
                   src: c.img
                 }
               ) : /* @__PURE__ */ e.jsx(
-                T,
+                B,
                 {
                   className: N.iconClass,
                   icon: c.icon ?? N.icon,
@@ -836,7 +829,7 @@ const be = ({
           /* @__PURE__ */ e.jsxs("div", { className: "min-w-0 flex-1", children: [
             /* @__PURE__ */ e.jsx("p", { className: "mb-1 text-sm leading-5 text-white", children: c.title }),
             c.message && /* @__PURE__ */ e.jsx("p", { className: "mb-1 text-xs leading-4 text-neutral-400", children: c.message }),
-            /* @__PURE__ */ e.jsx("p", { className: "text-xs text-neutral-500", children: Te(c.timestamp) })
+            /* @__PURE__ */ e.jsx("p", { className: "text-xs text-neutral-500", children: ge(c.timestamp) })
           ] }),
           !c.read && /* @__PURE__ */ e.jsx("div", { className: "mt-1.5 h-2 w-2 flex-shrink-0 rounded-full bg-rose-500" })
         ]
@@ -850,27 +843,27 @@ const be = ({
       className: "px-3 py-8 text-center",
       role: "status",
       children: [
-        /* @__PURE__ */ e.jsx(T, { className: "mx-auto mb-2 text-neutral-500", icon: "mdiBellOffOutline", size: 2 }),
+        /* @__PURE__ */ e.jsx(B, { className: "mx-auto mb-2 text-neutral-500", icon: "mdiBellOffOutline", size: 2 }),
         /* @__PURE__ */ e.jsx("p", { className: "text-sm text-neutral-400", children: n })
       ]
     }
   ) });
-  return /* @__PURE__ */ e.jsx(e.Fragment, { children: x ? /* @__PURE__ */ e.jsxs("div", { children: [
+  return /* @__PURE__ */ e.jsx(e.Fragment, { children: d ? /* @__PURE__ */ e.jsxs("div", { children: [
     /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ e.jsx(
-        oe,
+        le,
         {
           "aria-expanded": u,
-          "aria-label": `Notifications${f ? ` (${a} unread)` : ""}`,
+          "aria-label": `Notifications${f ? ` (${l} unread)` : ""}`,
           disabled: s,
           icon: "mdiBellOutline",
           variant: "ghost",
-          onClick: () => v(!u)
+          onClick: () => h(!u)
         }
       ),
-      f ? /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsx("div", { className: "absolute -top-2 -right-2", children: /* @__PURE__ */ e.jsx(G, { className: "min-w-[1.25rem] justify-center px-1", color: "violet", size: "sm", children: h }) }) }) : null
+      f ? /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsx("div", { className: "absolute -top-2 -right-2", children: /* @__PURE__ */ e.jsx(q, { className: "min-w-[1.25rem] justify-center px-1", color: "violet", size: "sm", children: p }) }) }) : null
     ] }),
-    ie(
+    ce(
       /* @__PURE__ */ e.jsxs(
         "div",
         {
@@ -883,13 +876,13 @@ const be = ({
           role: "dialog",
           children: [
             /* @__PURE__ */ e.jsxs("div", { className: "flex h-15 items-center justify-between border-b border-neutral-800 px-4", children: [
-              x ? /* @__PURE__ */ e.jsx(
-                oe,
+              d ? /* @__PURE__ */ e.jsx(
+                le,
                 {
                   "aria-label": "Close sidebar",
                   icon: "mdiClose",
                   variant: "ghost",
-                  onClick: () => v(!1)
+                  onClick: () => h(!1)
                 }
               ) : null,
               /* @__PURE__ */ e.jsx("h3", { id: "notifications-title-mobile", className: "text-sm font-semibold text-white", children: "Notifications" }),
@@ -908,11 +901,11 @@ const be = ({
       ),
       document.body
     )
-  ] }) : /* @__PURE__ */ e.jsxs(De, { className: t, disabled: s, children: [
+  ] }) : /* @__PURE__ */ e.jsxs(We, { className: t, disabled: s, children: [
     /* @__PURE__ */ e.jsx(
       be,
       {
-        "aria-label": `Notifications${f ? ` (${a} unread)` : ""}`,
+        "aria-label": `Notifications${f ? ` (${l} unread)` : ""}`,
         className: $(
           "relative flex h-10 w-10 items-center justify-center px-2 text-sm",
           "secondary-outset-focus group rounded-lg border border-transparent bg-transparent text-white enabled:cursor-pointer enabled:hover:bg-white/6"
@@ -920,7 +913,7 @@ const be = ({
         disabled: s,
         icon: "mdiBellOutline",
         unstyled: !0,
-        children: f ? /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsx("div", { className: "absolute -top-2 -right-2", children: /* @__PURE__ */ e.jsx(G, { className: "min-w-[1.25rem] justify-center px-1", color: "violet", size: "sm", children: h }) }) }) : null
+        children: f ? /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsx("div", { className: "absolute -top-2 -right-2", children: /* @__PURE__ */ e.jsx(q, { className: "min-w-[1.25rem] justify-center px-1", color: "violet", size: "sm", children: p }) }) }) : null
       }
     ),
     /* @__PURE__ */ e.jsx(xe, { children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between", children: [
@@ -945,112 +938,110 @@ const be = ({
       }
     )
   ] }) });
-}, he = le(void 0), Me = () => {
-  const t = ae(he);
+}, he = ae(void 0), Pe = () => {
+  const t = ie(he);
   if (!t)
     throw new Error("Select components must be used within an OxSelect");
   return t;
-}, Pe = ({
+}, Te = ({
   children: t,
   className: s,
   disabled: n = !1,
   id: o,
   value: r
 }) => {
-  const { closeDropdown: i, onSelect: l, selectedValue: a } = Me(), u = () => {
-    l({ value: r, label: t });
-  }, v = (m) => {
-    (m.key === "Enter" || m.key === " ") && (m.preventDefault(), l({ value: r, label: t })), m.key === "Escape" && i();
-  }, x = a.includes(r);
+  const { closeDropdown: i, onSelect: a, selectedValue: l } = Pe(), u = () => {
+    a({ value: r, label: t });
+  }, h = (m) => {
+    (m.key === "Enter" || m.key === " ") && (m.preventDefault(), a({ value: r, label: t })), m.key === "Escape" && i();
+  }, d = l.includes(r);
   return /* @__PURE__ */ e.jsx("li", { role: "none", children: /* @__PURE__ */ e.jsxs(
     "button",
     {
       id: o,
-      "aria-selected": x,
+      "aria-selected": d,
       className: b(
         "group flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-left text-sm enabled:text-white",
         "enabled:cursor-pointer enabled:hover:bg-white/6",
         "default-inset-focus",
         "default-disabled",
-        x && "bg-white/5",
+        d && "bg-white/5",
         s
       ),
       disabled: n,
       role: "option",
       tabIndex: n ? -1 : 0,
       onClick: u,
-      onKeyDown: v,
+      onKeyDown: h,
       children: [
         t,
-        x && !n && /* @__PURE__ */ e.jsx(T, { className: "text-violet-700", icon: "mdiCheck", size: 0.8 })
+        d && !n && /* @__PURE__ */ e.jsx(B, { className: "text-violet-700", icon: "mdiCheck", size: 0.8 })
       ]
     }
   ) });
 };
-let A = null, R = null;
-const He = () => (A || (A = document.createElement("canvas"), R = A.getContext("2d"), R.font = "0.875rem system-ui, sans-serif"), R), Ve = (t, s, n) => {
+let Z = null, R = null;
+const He = () => (Z || (Z = document.createElement("canvas"), R = Z.getContext("2d"), R.font = "0.875rem system-ui, sans-serif"), R), Ve = (t, s, n) => {
   if (t.length === 0) return [];
   if (!s.current) return t.slice(0, 1);
-  const o = s.current.offsetWidth || 0, r = 12, i = 32, l = 32;
-  let a = o - r - i;
-  t.length > 1 && (a -= l);
+  const o = s.current.offsetWidth || 0, r = 12, i = 32, a = 32;
+  let l = o - r - i;
+  t.length > 1 && (l -= a);
   const u = He();
   if (!u) return t.slice(0, 2);
-  const v = n ? 4 : 8, x = n ? 12 : 0;
-  let m = 0, h = 0;
+  const h = n ? 4 : 8, d = n ? 12 : 0;
+  let m = 0, p = 0;
   for (let f = 0; f < t.length; f++) {
-    const p = t[f], j = String(p.label), k = u.measureText(j).width + (n ? x : 0), c = f > 0 ? m + k + v : m + k;
-    if (c <= a)
-      m = c, h++;
+    const g = t[f], j = String(g.label), k = u.measureText(j).width + (n ? d : 0), c = f > 0 ? m + k + h : m + k;
+    if (c <= l)
+      m = c, p++;
     else
       break;
   }
-  return h = Math.max(1, h), t.slice(0, h);
-}, Ke = (t) => t == null ? [] : Array.isArray(t) ? t : [t], ct = ({
+  return p = Math.max(1, p), t.slice(0, p);
+}, Ae = (t) => t == null ? [] : Array.isArray(t) ? t : [t], ut = ({
   badgeColor: t = "purple",
   children: s,
   className: n,
   defaultValue: o = null,
   description: r,
   disabled: i = !1,
-  displayAsBadges: l = !1,
-  error: a = !1,
+  displayAsBadges: a = !1,
+  error: l = !1,
   errorMessage: u,
-  id: v,
-  label: x,
+  id: h,
+  label: d,
   multiple: m = !1,
-  name: h,
+  name: p,
   onChange: f,
-  placeholder: p = "Select an option",
+  placeholder: g = "Select an option",
   required: j = !1
 }) => {
-  var U;
-  const y = J(), k = ee(null), [c, w] = S(!1), [N, E] = S([]), F = v || y, C = `${F}-select`, D = `${F}-description`, L = `${F}-error`, W = a && u, P = (d, g) => {
-    let O = null;
-    return _.Children.forEach(d, (z) => {
-      if (_.isValidElement(z) && z.type === Pe) {
-        const I = z.props;
-        I.value === g && (O = { value: I.value, label: I.children });
+  const y = G(), k = ee(null), [c, v] = S(!1), [N, E] = S([]), F = h || y, C = `${F}-select`, D = `${F}-description`, I = `${F}-error`, W = l && u, H = (O, x) => {
+    let w = null;
+    return U.Children.forEach(O, (z) => {
+      if (U.isValidElement(z) && z.type === Te) {
+        const L = z.props;
+        L.value === x && (w = { value: L.value, label: L.children });
       }
-    }), O;
-  }, V = (d) => {
-    var O;
-    let g;
-    if (m ? N.some((I) => I.value === d.value) ? g = N.filter((I) => I.value !== d.value) : g = [...N, d] : (g = [d], w(!1)), E(g), f) {
-      const z = m ? g.map((I) => I.value) : ((O = g[0]) == null ? void 0 : O.value) ?? null;
-      f(z);
+    }), w;
+  }, A = (O) => {
+    let x;
+    if (m ? N.some((z) => z.value === O.value) ? x = N.filter((z) => z.value !== O.value) : x = [...N, O] : (x = [O], v(!1)), E(x), f) {
+      const w = m ? x.map((z) => z.value) : x[0]?.value ?? null;
+      f(w);
     }
   };
-  H(() => {
+  V(() => {
     if (o !== void 0) {
-      const d = Ke(o), g = [];
-      d.forEach((O) => {
-        const z = P(s, O);
-        z && g.push(z);
-      }), E(m ? g : g.slice(0, 1));
+      const O = Ae(o), x = [];
+      O.forEach((w) => {
+        const z = H(s, w);
+        z && x.push(z);
+      }), E(m ? x : x.slice(0, 1));
     }
   }, [o, s, m]);
-  const Y = /* @__PURE__ */ e.jsx(
+  const J = /* @__PURE__ */ e.jsx(
     "ul",
     {
       id: `${C}-listbox`,
@@ -1059,45 +1050,45 @@ const He = () => (A || (A = document.createElement("canvas"), R = A.getContext("
       role: "listbox",
       children: s
     }
-  ), K = Ve(N, k, l), q = N.length - K.length, Q = q > 0;
+  ), K = Ve(N, k, a), _ = N.length - K.length, Y = _ > 0;
   return /* @__PURE__ */ e.jsx(
     he.Provider,
     {
       value: {
-        selectedValue: N.map((d) => d.value),
+        selectedValue: N.map((O) => O.value),
         multiple: m,
-        onSelect: V,
-        closeDropdown: () => w(!1)
+        onSelect: A,
+        closeDropdown: () => v(!1)
       },
       children: /* @__PURE__ */ e.jsxs("div", { className: b("flex w-full flex-col gap-1", n), children: [
-        x && /* @__PURE__ */ e.jsx(te, { htmlFor: C, required: j, children: x }),
+        d && /* @__PURE__ */ e.jsx(te, { htmlFor: C, required: j, children: d }),
         /* @__PURE__ */ e.jsx(
-          de,
+          ne,
           {
             align: "start",
-            content: Y,
+            content: J,
             contentClassName: "default-border bg-zinc-1000/70 rounded-lg p-1 backdrop-blur-xl animate-dropdown-in-bottom",
-            contentStyle: { minWidth: `${((U = k.current) == null ? void 0 : U.offsetWidth) || 200}px` },
+            contentStyle: { minWidth: `${k.current?.offsetWidth || 200}px` },
             disabled: i,
             open: c,
             position: "bottom",
             trigger: "click",
-            onOpenChange: w,
+            onOpenChange: v,
             children: /* @__PURE__ */ e.jsxs(
               "button",
               {
                 id: C,
                 "aria-controls": `${C}-listbox`,
-                "aria-describedby": [r ? D : "", W ? L : ""].filter(Boolean).join(" ") || void 0,
+                "aria-describedby": [r ? D : "", W ? I : ""].filter(Boolean).join(" ") || void 0,
                 "aria-disabled": i,
                 "aria-expanded": c,
                 "aria-haspopup": "listbox",
-                "aria-invalid": a,
+                "aria-invalid": l,
                 "aria-required": j,
                 className: $(
                   "relative flex h-10 w-full gap-x-2 rounded-lg py-2 ps-3 pe-8 text-start text-sm enabled:cursor-pointer enabled:text-white",
                   "default-outset-focus default-disabled",
-                  a ? "default-error-border" : "default-border",
+                  l ? "default-error-border" : "default-border",
                   c && "default-active-border"
                 ),
                 disabled: i,
@@ -1110,26 +1101,26 @@ const He = () => (A || (A = document.createElement("canvas"), R = A.getContext("
                     {
                       className: $(
                         "w-full overflow-hidden text-ellipsis",
-                        l ? m && "flex flex-wrap gap-1" : "whitespace-nowrap",
-                        i && l && "opacity-50"
+                        a ? m && "flex flex-wrap gap-1" : "whitespace-nowrap",
+                        i && a && "opacity-50"
                       ),
                       children: N.length > 0 ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-                        l && m ? K.map((d) => /* @__PURE__ */ e.jsx(G, { color: t, size: "sm", children: d.label }, String(d.value))) : K.map((d, g, O) => /* @__PURE__ */ e.jsxs(_.Fragment, { children: [
-                          d.label,
-                          g < O.length - 1 && ", "
-                        ] }, String(d.value))),
-                        Q && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-                          !(l && m) && " ",
-                          /* @__PURE__ */ e.jsxs(G, { color: t, size: "sm", children: [
+                        a && m ? K.map((O) => /* @__PURE__ */ e.jsx(q, { color: t, size: "sm", children: O.label }, String(O.value))) : K.map((O, x, w) => /* @__PURE__ */ e.jsxs(U.Fragment, { children: [
+                          O.label,
+                          x < w.length - 1 && ", "
+                        ] }, String(O.value))),
+                        Y && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+                          !(a && m) && " ",
+                          /* @__PURE__ */ e.jsxs(q, { color: t, size: "sm", children: [
                             "+",
-                            q
+                            _
                           ] })
                         ] })
-                      ] }) : p
+                      ] }) : g
                     }
                   ),
                   /* @__PURE__ */ e.jsx("div", { className: "absolute end-3 top-1/2 -translate-y-1/2", children: /* @__PURE__ */ e.jsx(
-                    T,
+                    B,
                     {
                       className: $(
                         "transition-transform duration-300 ease-in-out",
@@ -1145,40 +1136,40 @@ const He = () => (A || (A = document.createElement("canvas"), R = A.getContext("
             )
           }
         ),
-        h && /* @__PURE__ */ e.jsx(
+        p && /* @__PURE__ */ e.jsx(
           "input",
           {
-            name: h,
+            name: p,
             type: "hidden",
-            value: N.map((d) => d.value).join(",")
+            value: N.map((O) => O.value).join(",")
           }
         ),
         r && /* @__PURE__ */ e.jsx(se, { id: D, disabled: i, children: r }),
-        W && /* @__PURE__ */ e.jsx(re, { id: L, children: u })
+        W && /* @__PURE__ */ e.jsx(re, { id: I, children: u })
       ] })
     }
   );
-}, dt = ({ children: t, className: s }) => /* @__PURE__ */ e.jsx("div", { className: b("px-2 py-1 text-xs font-medium text-neutral-400", s), children: t }), Ue = {
+}, xt = ({ children: t, className: s }) => /* @__PURE__ */ e.jsx("div", { className: b("px-2 py-1 text-xs font-medium text-neutral-400", s), children: t }), Ke = {
   default: "bg-zinc-800/80",
   purple: "bg-purple-950/50",
   blue: "bg-blue-950/50",
   gray: "bg-gray-800/50"
-}, _e = {
+}, Ue = {
   rectangle: "rounded-md",
   circle: "rounded-full"
-}, qe = ({
+}, _e = ({
   animate: t = !0,
   className: s,
   color: n = "default",
   fullWidth: o = !1,
   height: r,
   shape: i = "rectangle",
-  width: l,
-  ...a
+  width: a,
+  ...l
 }) => {
   const u = {
     height: typeof r == "number" ? `${r}px` : r,
-    width: typeof l == "number" ? `${l}px` : l
+    width: typeof a == "number" ? `${a}px` : a
   };
   return /* @__PURE__ */ e.jsx(
     "div",
@@ -1187,40 +1178,40 @@ const He = () => (A || (A = document.createElement("canvas"), R = A.getContext("
       "aria-label": "Loading...",
       className: b(
         "relative overflow-hidden",
-        Ue[n],
-        _e[i],
+        Ke[n],
+        Ue[i],
         t && "animate-pulse",
         o && "w-full",
         s
       ),
       role: "status",
       style: u,
-      ...a
+      ...l
     }
   );
-}, ut = ({
+}, mt = ({
   animate: t = !0,
   className: s,
   color: n = "default",
   fullWidth: o = !1,
   gap: r = 8,
   height: i = 20,
-  lines: l = 1,
-  width: a,
+  lines: a = 1,
+  width: l,
   ...u
 }) => {
-  const v = (h) => h <= 1 ? `${h * 100}%` : `${h}px`, x = (h) => {
+  const h = (p) => p <= 1 ? `${p * 100}%` : `${p}px`, d = (p) => {
     if (!o) {
-      if (Array.isArray(a)) {
-        const f = a[h % a.length];
-        return f == null ? void 0 : typeof f == "number" ? v(f) : f;
+      if (Array.isArray(l)) {
+        const f = l[p % l.length];
+        return f == null ? void 0 : typeof f == "number" ? h(f) : f;
       }
-      if (typeof a == "number") {
-        if (l > 1 && h === l - 1) {
-          const f = a <= 1 ? a * 0.6 : Math.max(100, a * 0.6);
-          return v(f);
+      if (typeof l == "number") {
+        if (a > 1 && p === a - 1) {
+          const f = l <= 1 ? l * 0.6 : Math.max(100, l * 0.6);
+          return h(f);
         }
-        return v(a);
+        return h(l);
       }
       return "200px";
     }
@@ -1231,44 +1222,44 @@ const He = () => (A || (A = document.createElement("canvas"), R = A.getContext("
     16: "space-y-4",
     20: "space-y-5"
   }[r] || "space-y-2";
-  return /* @__PURE__ */ e.jsx("div", { className: b("flex flex-col", m, s), ...u, children: Array.from({ length: l }).map((h, f) => /* @__PURE__ */ e.jsx(
-    qe,
+  return /* @__PURE__ */ e.jsx("div", { className: b("flex flex-col", m, s), ...u, children: Array.from({ length: a }).map((p, f) => /* @__PURE__ */ e.jsx(
+    _e,
     {
       animate: t,
       color: n,
       fullWidth: o,
       height: i,
-      width: x(f)
+      width: d(f)
     },
     f
   )) });
-}, xt = ({
+}, ft = ({
   className: t,
   description: s,
   disabled: n = !1,
   error: o = !1,
   errorMessage: r,
   id: i,
-  label: l,
-  name: a,
+  label: a,
+  name: l,
   onChange: u,
-  placeholder: v = "Enter text...",
-  readOnly: x = !1,
+  placeholder: h = "Enter text...",
+  readOnly: d = !1,
   required: m = !1,
-  rows: h = 3,
+  rows: p = 3,
   showMaxLength: f = !1,
-  value: p,
+  value: g,
   ...j
 }) => {
-  const y = J(), [k, c] = S(
-    typeof p == "string" ? p.length : 0
-  ), w = i || y, N = `${w}-textarea`, E = `${w}-description`, F = `${w}-error`, C = j.maxLength, D = o && r;
-  H(() => {
-    typeof p == "string" && c(p.length);
-  }, [p]);
-  const L = (P) => {
-    const V = P.target.value.length;
-    c(V), u == null || u(P);
+  const y = G(), [k, c] = S(
+    typeof g == "string" ? g.length : 0
+  ), v = i || y, N = `${v}-textarea`, E = `${v}-description`, F = `${v}-error`, C = j.maxLength, D = o && r;
+  V(() => {
+    typeof g == "string" && c(g.length);
+  }, [g]);
+  const I = (H) => {
+    const A = H.target.value.length;
+    c(A), u?.(H);
   }, W = /* @__PURE__ */ e.jsx(
     "textarea",
     {
@@ -1285,17 +1276,17 @@ const He = () => (A || (A = document.createElement("canvas"), R = A.getContext("
         t
       ),
       disabled: n,
-      name: a,
-      placeholder: v,
-      readOnly: x,
-      rows: h,
-      value: p,
-      onChange: L,
+      name: l,
+      placeholder: h,
+      readOnly: d,
+      rows: p,
+      value: g,
+      onChange: I,
       ...j
     }
   );
   return /* @__PURE__ */ e.jsxs("div", { className: "flex w-full flex-col gap-1", children: [
-    l ? /* @__PURE__ */ e.jsx(te, { htmlFor: N, required: m, children: l }) : null,
+    a ? /* @__PURE__ */ e.jsx(te, { htmlFor: N, required: m, children: a }) : null,
     W,
     f && typeof C == "number" ? /* @__PURE__ */ e.jsxs("div", { className: "pointer-events-none mt-1 text-right text-xs text-neutral-400", children: [
       k,
@@ -1305,53 +1296,101 @@ const He = () => (A || (A = document.createElement("canvas"), R = A.getContext("
     s ? /* @__PURE__ */ e.jsx(se, { id: E, disabled: n, children: s }) : null,
     D ? /* @__PURE__ */ e.jsx(re, { id: F, children: r }) : null
   ] });
-}, mt = ({
+}, qe = {
+  default: "default-border backdrop-blur-xl text-white bg-zinc-1000/70",
+  error: "bg-red-900/70 text-red-200 border-red-700",
+  warning: "bg-amber-900/70 text-amber-200 border-amber-700",
+  info: "bg-blue-900/70 text-blue-200 border-blue-700",
+  success: "bg-green-900/70 text-green-200 border-green-700"
+}, bt = ({
+  align: t = "center",
+  children: s,
+  className: n,
+  content: o,
+  disabled: r = !1,
+  id: i,
+  onOpenChange: a,
+  open: l,
+  position: u = "top",
+  trigger: h = "hover",
+  variant: d = "default"
+}) => {
+  const m = /* @__PURE__ */ e.jsx(
+    "div",
+    {
+      className: b(
+        "max-w-xs rounded-md border px-2 py-1 text-xs break-words backdrop-blur-sm",
+        qe[d],
+        n
+      ),
+      children: o
+    }
+  );
+  return /* @__PURE__ */ e.jsx(
+    ne,
+    {
+      id: i,
+      align: t,
+      content: m,
+      contentRole: "tooltip",
+      disabled: r,
+      offset: 8,
+      open: l,
+      position: u,
+      trigger: h,
+      useAriaControls: !1,
+      onOpenChange: a,
+      children: s
+    }
+  );
+}, ht = ({
   children: t,
   onAuthenticated: s = null,
   onLoading: n = null
 }) => {
-  const { isLoggedIn: o, loading: r } = ce();
+  const { isLoggedIn: o, loading: r } = de();
   return r ? n : o ? s : t;
-}, ft = ({
+}, pt = ({
   children: t,
   onLoading: s = null,
   onUnauthenticated: n = null
 }) => {
-  const { isLoggedIn: o, loading: r } = ce();
+  const { isLoggedIn: o, loading: r } = de();
   return r ? s : o ? t : n;
 };
 export {
-  Re as OxAvatar,
-  je as OxAvatarImage,
-  et as OxAvatarText,
-  G as OxBadge,
-  oe as OxButton,
-  tt as OxCard,
-  rt as OxCardContent,
-  nt as OxCardFooter,
-  st as OxCardHeader,
-  ot as OxCheckbox,
+  tt as OxAvatar,
+  ye as OxAvatarImage,
+  st as OxAvatarText,
+  q as OxBadge,
+  le as OxButton,
+  rt as OxCard,
+  ot as OxCardContent,
+  lt as OxCardFooter,
+  nt as OxCardHeader,
+  at as OxCheckbox,
   se as OxDescription,
-  De as OxDropdown,
+  We as OxDropdown,
   ue as OxDropdownContent,
-  $e as OxDropdownFooter,
+  De as OxDropdownFooter,
   xe as OxDropdownHeader,
-  We as OxDropdownItem,
-  lt as OxDropdownSeparator,
-  at as OxDropdownShortcut,
+  Be as OxDropdownItem,
+  it as OxDropdownSeparator,
+  ct as OxDropdownShortcut,
   be as OxDropdownTrigger,
   re as OxErrorMessage,
-  pt as OxForm,
-  mt as OxGuestRoute,
-  T as OxIcon,
-  gt as OxInput,
+  wt as OxForm,
+  ht as OxGuestRoute,
+  B as OxIcon,
+  jt as OxInput,
   te as OxLabel,
-  it as OxNotificationDropdown,
-  ft as OxProtectedRoute,
-  ct as OxSelect,
-  dt as OxSelectLabel,
-  Pe as OxSelectOption,
-  qe as OxSkeleton,
-  ut as OxSkeletonText,
-  xt as OxTextarea
+  dt as OxNotificationDropdown,
+  pt as OxProtectedRoute,
+  ut as OxSelect,
+  xt as OxSelectLabel,
+  Te as OxSelectOption,
+  _e as OxSkeleton,
+  mt as OxSkeletonText,
+  ft as OxTextarea,
+  bt as OxTooltip
 };