@neuctra/ui 0.2.4 → 0.2.5

package/dist/index.es.js

@@ -1,5 +1,5 @@
-import Ie, { forwardRef as me, createElement as be, useState as L, useEffect as te, useMemo as oe, memo as Me, useRef as ce, useId as Fe, useImperativeHandle as De, useCallback as ve } from "react";
-var ye = { exports: {} }, pe = {};
+import Ie, { forwardRef as me, createElement as ye, useState as L, useEffect as te, useMemo as oe, memo as Me, useRef as ce, useId as Fe, useImperativeHandle as De, useCallback as ve } from "react";
+var be = { exports: {} }, pe = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -150,7 +150,7 @@ function Ve() {
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), o = this.props.ref, o !== void 0 ? o : null;
     }
-    function y(o, T, B, Y, K, se) {
+    function b(o, T, B, Y, K, se) {
       var M = B.ref;
       return o = {
         $$typeof: g,
@@ -183,7 +183,7 @@ function Ve() {
         value: se
       }), Object.freeze && (Object.freeze(o.props), Object.freeze(o)), o;
     }
-    function b(o, T, B, Y, K, se) {
+    function y(o, T, B, Y, K, se) {
       var M = T.children;
       if (M !== void 0)
         if (Y)
@@ -216,13 +216,13 @@ React keys must be passed directly to JSX without using spread:
       }
       if (M = null, B !== void 0 && (n(B), M = "" + B), p(T) && (n(T.key), M = "" + T.key), "key" in T) {
         B = {};
-        for (var X in T)
-          X !== "key" && (B[X] = T[X]);
+        for (var q in T)
+          q !== "key" && (B[q] = T[q]);
       } else B = T;
       return M && u(
         B,
         typeof o == "function" ? o.displayName || o.name || "Unknown" : o
-      ), y(
+      ), b(
         o,
         M,
         B,
@@ -248,33 +248,33 @@ React keys must be passed directly to JSX without using spread:
     var S, V = {}, U = v.react_stack_bottom_frame.bind(
       v,
       l
-    )(), q = R(s(l)), ne = {};
+    )(), X = R(s(l)), ne = {};
     xe.Fragment = x, xe.jsx = function(o, T, B) {
       var Y = 1e4 > N.recentlyCreatedOwnerStacks++;
-      return b(
+      return y(
         o,
         T,
         B,
         !1,
         Y ? Error("react-stack-top-frame") : U,
-        Y ? R(s(o)) : q
+        Y ? R(s(o)) : X
       );
     }, xe.jsxs = function(o, T, B) {
       var Y = 1e4 > N.recentlyCreatedOwnerStacks++;
-      return b(
+      return y(
         o,
         T,
         B,
         !0,
         Y ? Error("react-stack-top-frame") : U,
-        Y ? R(s(o)) : q
+        Y ? R(s(o)) : X
       );
     };
   })()), xe;
 }
 var Re;
 function Ue() {
-  return Re || (Re = 1, process.env.NODE_ENV === "production" ? ye.exports = He() : ye.exports = Ve()), ye.exports;
+  return Re || (Re = 1, process.env.NODE_ENV === "production" ? be.exports = He() : be.exports = Ve()), be.exports;
 }
 var e = Ue();
 /**
@@ -283,11 +283,11 @@ var e = Ue();
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const qe = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), Xe = (t) => t.replace(
+const Xe = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), qe = (t) => t.replace(
   /^([A-Z])|[\s-_]+(\w)/g,
   (r, n, s) => s ? s.toUpperCase() : n.toLowerCase()
 ), Ee = (t) => {
-  const r = Xe(t);
+  const r = qe(t);
   return r.charAt(0).toUpperCase() + r.slice(1);
 }, Ae = (...t) => t.filter((r, n, s) => !!r && r.trim() !== "" && s.indexOf(r) === n).join(" ").trim(), Ge = (t) => {
   for (const r in t)
@@ -327,7 +327,7 @@ const Ze = me(
     children: l,
     iconNode: p,
     ...u
-  }, h) => be(
+  }, h) => ye(
     "svg",
     {
       ref: h,
@@ -341,7 +341,7 @@ const Ze = me(
       ...u
     },
     [
-      ...p.map(([y, b]) => be(y, b)),
+      ...p.map(([b, y]) => ye(b, y)),
       ...Array.isArray(l) ? l : [l]
     ]
   )
@@ -354,11 +354,11 @@ const Ze = me(
  */
 const G = (t, r) => {
   const n = me(
-    ({ className: s, ...i }, l) => be(Ze, {
+    ({ className: s, ...i }, l) => ye(Ze, {
       ref: l,
       iconNode: r,
       className: Ae(
-        `lucide-${qe(Ee(t))}`,
+        `lucide-${Xe(Ee(t))}`,
         `lucide-${t}`,
         s
       ),
@@ -530,13 +530,13 @@ const mt = [
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const yt = [
+const bt = [
   ["path", { d: "m18 14 4 4-4 4", key: "10pe0f" }],
   ["path", { d: "m18 2 4 4-4 4", key: "pucp1d" }],
   ["path", { d: "M2 18h1.973a4 4 0 0 0 3.3-1.7l5.454-8.6a4 4 0 0 1 3.3-1.7H22", key: "1ailkh" }],
   ["path", { d: "M2 6h1.972a4 4 0 0 1 3.6 2.2", key: "km57vx" }],
   ["path", { d: "M22 18h-6.041a4 4 0 0 1-3.3-1.8l-.359-.45", key: "os18l9" }]
-], bt = G("shuffle", yt);
+], yt = G("shuffle", bt);
 /**
  * @license lucide-react v0.536.0 - ISC
  *
@@ -695,8 +695,8 @@ const Rt = [
   icon: p,
   actionButton: u,
   position: h = "top-right",
-  backgroundColor: y,
-  borderColor: b,
+  backgroundColor: b,
+  borderColor: y,
   textColor: c = "#111827",
   borderRadius: d = "0.75rem",
   shadow: v = "0 4px 14px rgba(0,0,0,0.1)",
@@ -726,8 +726,8 @@ const Rt = [
       display: "flex",
       alignItems: "flex-start",
       gap: "0.75rem",
-      backgroundColor: y ?? I,
-      borderLeft: `4px solid ${b ?? D}`,
+      backgroundColor: b ?? I,
+      borderLeft: `4px solid ${y ?? D}`,
       borderRadius: d,
       color: c,
       boxShadow: v,
@@ -746,14 +746,14 @@ const Rt = [
       E,
       I,
       D,
-      b,
+      y,
       d,
       h,
       v,
       g,
       c,
       j,
-      y,
+      b,
       a,
       k,
       m,
@@ -825,8 +825,8 @@ const It = Me(
     hoverBgColor: p = "#f9fafb",
     hoverTextColor: u = "#111827",
     contentBgColor: h = "#fff",
-    contentTextColor: y = "#374151",
-    paddingY: b = "1rem",
+    contentTextColor: b = "#374151",
+    paddingY: y = "1rem",
     paddingX: c = "1rem",
     marginY: d = "0.75rem",
     borderRadius: v = "0.5rem",
@@ -879,7 +879,7 @@ const It = Me(
                   alignItems: "center",
                   backgroundColor: i,
                   color: l,
-                  padding: `${b} ${c}`,
+                  padding: `${y} ${c}`,
                   fontWeight: x,
                   fontSize: m,
                   cursor: "pointer",
@@ -916,7 +916,7 @@ const It = Me(
                     style: {
                       borderTop: `1px solid ${s}`,
                       backgroundColor: h,
-                      color: y,
+                      color: b,
                       padding: g,
                       fontSize: f,
                       fontWeight: a
@@ -994,8 +994,8 @@ const Pe = {
   className: p = "",
   style: u,
   statusClassName: h = "",
-  statusStyle: y,
-  statusPosition: b = "bottom-right",
+  statusStyle: b,
+  statusPosition: y = "bottom-right",
   fallback: c,
   ring: d = !1,
   ringColor: v = "#3b82f6",
@@ -1079,8 +1079,8 @@ const Pe = {
               backgroundColor: F,
               border: "2px solid white",
               boxShadow: "0 1px 3px rgba(0, 0, 0, 0.12)",
-              ...Lt(b),
-              ...y
+              ...Lt(y),
+              ...b
             }
           }
         )
@@ -1096,7 +1096,7 @@ const Pe = {
   spacing: l = "normal",
   direction: p = "left"
 }) => {
-  const u = n === "responsive", h = u ? 40 : Pe[n], y = u ? "clamp(10px, 2vw, 14px)" : Oe[n], b = Nt(l, h), c = t.slice(0, r), d = t.length - r;
+  const u = n === "responsive", h = u ? 40 : Pe[n], b = u ? "clamp(10px, 2vw, 14px)" : Oe[n], y = Nt(l, h), c = t.slice(0, r), d = t.length - r;
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
@@ -1117,8 +1117,8 @@ const Pe = {
             "div",
             {
               style: {
-                marginLeft: p === "left" && !m ? b : 0,
-                marginRight: p === "right" && !m ? b : 0,
+                marginLeft: p === "left" && !m ? y : 0,
+                marginRight: p === "right" && !m ? y : 0,
                 zIndex: x,
                 position: "relative",
                 transition: "transform 0.25s cubic-bezier(0.4, 0, 0.2, 1)"
@@ -1138,14 +1138,14 @@ const Pe = {
           "div",
           {
             style: {
-              marginLeft: p === "left" ? b : 0,
-              marginRight: p === "right" ? b : 0,
+              marginLeft: p === "left" ? y : 0,
+              marginRight: p === "right" ? y : 0,
               width: h,
               height: h,
               borderRadius: "50%",
               background: "linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%)",
               color: "#374151",
-              fontSize: y,
+              fontSize: b,
               fontWeight: 600,
               display: "flex",
               justifyContent: "center",
@@ -1174,8 +1174,8 @@ const Pe = {
   secondaryColor: p = "#ffffff",
   borderRadius: u = "12px",
   padding: h = "16px",
-  width: y = "100%",
-  className: b
+  width: b = "100%",
+  className: y
 }) => {
   const c = ce(null), d = ce(null), [v, g] = L(n), [m, x] = L(0), [f, a] = L(0), [j, $] = L(0.5), [k, z] = L(!1), [A, E] = L(s);
   te(() => {
@@ -1203,10 +1203,10 @@ const Pe = {
     "div",
     {
       ref: d,
-      className: b,
+      className: y,
       style: {
         position: "relative",
-        width: y,
+        width: b,
         backgroundColor: i,
         borderRadius: u,
         color: p,
@@ -1389,8 +1389,8 @@ function Zt({
   secondaryColor: p = "#1a1a2e",
   border: u = 0,
   borderColor: h,
-  maxWidth: y = 420,
-  autoplay: b = !1,
+  maxWidth: b = 420,
+  autoplay: y = !1,
   loop: c = !1
 }) {
   const [d, v] = L(
@@ -1403,7 +1403,7 @@ function Zt({
   }, [E]), te(() => {
     d === null && S.current && (S.current.pause(), m(!1), f(0), j(0));
   }, [d]);
-  const q = (C) => {
+  const X = (C) => {
     if (d === C) {
       if (!S.current) return;
       S.current.paused ? (S.current.play().catch(() => {
@@ -1430,11 +1430,11 @@ function Zt({
   }, Y = () => {
     if (d === null) return;
     let C;
-    I ? C = Math.floor(Math.random() * t.length) : C = (d + 1) % t.length, q(C);
+    I ? C = Math.floor(Math.random() * t.length) : C = (d + 1) % t.length, X(C);
   }, K = () => {
     if (d === null) return;
     let C;
-    I ? C = Math.floor(Math.random() * t.length) : C = (d - 1 + t.length) % t.length, q(C);
+    I ? C = Math.floor(Math.random() * t.length) : C = (d - 1 + t.length) % t.length, X(C);
   }, se = () => {
     k((C) => C > 0 ? 0 : 0.7);
   }, M = () => {
@@ -1445,13 +1445,13 @@ function Zt({
     if (isNaN(C)) return "0:00";
     const w = Math.floor(C / 60), _ = Math.floor(C % 60);
     return `${w}:${_ < 10 ? "0" : ""}${_}`;
-  }, X = d !== null ? t[d] : null;
+  }, q = d !== null ? t[d] : null;
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
       className: r,
       style: {
-        maxWidth: `${y}px`,
+        maxWidth: `${b}px`,
         margin: "20px auto",
         background: `linear-gradient(145deg, ${i}, ${p})`,
         color: l,
@@ -1523,7 +1523,7 @@ function Zt({
                     opacity: I ? 1 : 0.6
                   },
                   "aria-label": "Toggle Shuffle",
-                  children: /* @__PURE__ */ e.jsx(bt, { size: 18, color: I ? "white" : l })
+                  children: /* @__PURE__ */ e.jsx(yt, { size: 18, color: I ? "white" : l })
                 }
               )
             ]
@@ -1546,7 +1546,7 @@ function Zt({
               return /* @__PURE__ */ e.jsxs(
                 "div",
                 {
-                  onClick: () => q(w),
+                  onClick: () => X(w),
                   style: {
                     display: "flex",
                     alignItems: "center",
@@ -1682,7 +1682,7 @@ function Zt({
             })
           }
         ),
-        X && /* @__PURE__ */ e.jsxs(
+        q && /* @__PURE__ */ e.jsxs(
           "div",
           {
             ref: V,
@@ -1696,7 +1696,7 @@ function Zt({
               overflow: "hidden"
             },
             children: [
-              X.thumbnail && /* @__PURE__ */ e.jsx(
+              q.thumbnail && /* @__PURE__ */ e.jsx(
                 "div",
                 {
                   style: {
@@ -1705,7 +1705,7 @@ function Zt({
                     left: 0,
                     right: 0,
                     bottom: 0,
-                    backgroundImage: `url(${X.thumbnail})`,
+                    backgroundImage: `url(${q.thumbnail})`,
                     backgroundSize: "cover",
                     backgroundPosition: "center",
                     filter: "blur(60px) opacity(0.1)",
@@ -1724,10 +1724,10 @@ function Zt({
                         fontWeight: "700",
                         color: s
                       },
-                      children: X.title
+                      children: q.title
                     }
                   ),
-                  X.artist && /* @__PURE__ */ e.jsx("p", { style: { margin: 0, opacity: 0.7, fontSize: "0.9rem" }, children: X.artist })
+                  q.artist && /* @__PURE__ */ e.jsx("p", { style: { margin: 0, opacity: 0.7, fontSize: "0.9rem" }, children: q.artist })
                 ] }),
                 /* @__PURE__ */ e.jsxs(
                   "div",
@@ -1955,8 +1955,8 @@ function Zt({
                 "audio",
                 {
                   ref: S,
-                  src: X.src,
-                  autoPlay: b,
+                  src: q.src,
+                  autoPlay: y,
                   loop: E,
                   onTimeUpdate: ne,
                   onEnded: () => {
@@ -2025,8 +2025,8 @@ const Kt = Me(
     iconPosition: p = "left",
     rounded: u = !1,
     borderRadius: h,
-    fontSize: y = "13px",
-    fontWeight: b = 500,
+    fontSize: b = "13px",
+    fontWeight: y = 500,
     horizontalPadding: c = "10px",
     verticalPadding: d = "4px",
     margin: v = "0",
@@ -2048,8 +2048,8 @@ const Kt = Me(
       border: `${i} solid ${s}`,
       borderRadius: h || (u ? "9999px" : "6px"),
       padding: `${d} ${c}`,
-      fontSize: y,
-      fontWeight: b,
+      fontSize: b,
+      fontWeight: y,
       margin: v,
       boxShadow: g,
       position: "relative",
@@ -2142,8 +2142,8 @@ const Qt = ({
   style: p,
   fullWidth: u = !1,
   disabled: h = !1,
-  loading: y = !1,
-  loadingText: b = "Loading...",
+  loading: b = !1,
+  loadingText: y = "Loading...",
   darkMode: c = !1,
   baseColor: d,
   size: v = "md",
@@ -2195,12 +2195,12 @@ const Qt = ({
       type: r,
       className: l,
       style: k,
-      onClick: !h && !y ? n : void 0,
+      onClick: !h && !b ? n : void 0,
       onMouseEnter: () => f(!0),
       onMouseLeave: () => f(!1),
       disabled: h,
       children: [
-        y ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        b ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
           /* @__PURE__ */ e.jsx(
             "span",
             {
@@ -2214,7 +2214,7 @@ const Qt = ({
               }
             }
           ),
-          /* @__PURE__ */ e.jsx("span", { children: b })
+          /* @__PURE__ */ e.jsx("span", { children: y })
         ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
           s && /* @__PURE__ */ e.jsx("span", { children: s }),
           /* @__PURE__ */ e.jsx("span", { children: t }),
@@ -2238,8 +2238,8 @@ const Qt = ({
   borderRadius: p = 12,
   border: u,
   boxShadow: h,
-  hoverShadow: y,
-  padding: b = 16,
+  hoverShadow: b,
+  padding: y = 16,
   margin: c,
   width: d,
   height: v,
@@ -2265,7 +2265,7 @@ const Qt = ({
     background: i,
     color: l,
     borderRadius: p,
-    padding: b,
+    padding: y,
     margin: c,
     width: d,
     height: v,
@@ -2278,7 +2278,7 @@ const Qt = ({
   }, z = (E) => {
     Object.assign(
       E.currentTarget.style,
-      y ? { boxShadow: y } : m
+      b ? { boxShadow: b } : m
     );
   }, A = (E) => {
     Object.assign(E.currentTarget.style, {
@@ -2309,8 +2309,8 @@ const Qt = ({
   required: p = !1,
   error: u,
   className: h = "",
-  customIcon: y,
-  style: b,
+  customIcon: b,
+  style: y,
   labelStyle: c,
   iconSize: d = 20,
   iconCheckedBgColor: v = "#2563eb",
@@ -2327,7 +2327,7 @@ const Qt = ({
     "div",
     {
       className: h,
-      style: { display: "flex", flexDirection: "column", gap: 8, ...b },
+      style: { display: "flex", flexDirection: "column", gap: 8, ...y },
       role: "group",
       "aria-disabled": i,
       children: [
@@ -2361,7 +2361,7 @@ const Qt = ({
                     style: { display: "none" }
                   }
                 ),
-                y ? y(j) : /* @__PURE__ */ e.jsx(
+                b ? b(j) : /* @__PURE__ */ e.jsx(
                   "span",
                   {
                     style: {
@@ -2421,8 +2421,8 @@ const Qt = ({
   required: p = !1,
   error: u,
   className: h = "",
-  style: y,
-  labelStyle: b,
+  style: b,
+  labelStyle: y,
   iconSize: c = 20,
   iconCheckedBgColor: d = "#2563eb",
   iconUncheckedBorderColor: v = "#9ca3af",
@@ -2432,7 +2432,7 @@ const Qt = ({
   "div",
   {
     className: h,
-    style: { display: "flex", flexDirection: "column", gap: 8, ...y },
+    style: { display: "flex", flexDirection: "column", gap: 8, ...b },
     role: "radiogroup",
     "aria-disabled": i,
     children: [
@@ -2449,7 +2449,7 @@ const Qt = ({
               opacity: i ? 0.6 : 1,
               gap: 8,
               userSelect: "none",
-              ...b
+              ...y
             },
             children: [
               /* @__PURE__ */ e.jsx("span", { style: { color: g, fontSize: 14 }, children: x.label }),
@@ -2523,8 +2523,8 @@ const Qt = ({
   required: p = !1,
   error: u,
   className: h = "",
-  style: y,
-  labelStyle: b,
+  style: b,
+  labelStyle: y,
   iconSize: c = 20,
   iconCheckedBgColor: d = "#2563eb",
   switchBgColor: v = "#d1d5db",
@@ -2540,7 +2540,7 @@ const Qt = ({
     "div",
     {
       className: h,
-      style: { display: "flex", flexDirection: "column", gap: 8, ...y },
+      style: { display: "flex", flexDirection: "column", gap: 8, ...b },
       role: "group",
       "aria-disabled": i,
       children: [
@@ -2557,7 +2557,7 @@ const Qt = ({
                 opacity: i ? 0.6 : 1,
                 gap: 8,
                 userSelect: "none",
-                ...b
+                ...y
               },
               children: [
                 /* @__PURE__ */ e.jsx("span", { style: { color: g, fontSize: 14 }, children: f.label }),
@@ -2642,8 +2642,8 @@ const Qt = ({
   height: p = "auto",
   borderRadius: u = 0,
   style: h,
-  className: y = "",
-  children: b
+  className: b = "",
+  children: y
 }) => {
   const c = oe(() => {
     const d = typeof r == "number" ? `${r}px` : r, v = i && n === "0 auto" ? "0 auto" : n, g = typeof u == "number" ? `${u}px` : u;
@@ -2669,7 +2669,7 @@ const Qt = ({
     i,
     h
   ]);
-  return /* @__PURE__ */ e.jsx("div", { className: y, style: c, children: b });
+  return /* @__PURE__ */ e.jsx("div", { className: b, style: c, children: y });
 }, Dt = (t) => t < 768 ? "sm" : t < 1024 ? "md" : "lg", Q = (t, r, n) => t == null ? n : typeof t != "object" ? t : t[r] ?? n, or = ({
   direction: t = { sm: "column", md: "row", lg: "row" },
   align: r = "center",
@@ -2680,8 +2680,8 @@ const Qt = ({
   margin: p,
   backgroundColor: u = "transparent",
   width: h = "100%",
-  maxWidth: y = "100%",
-  height: b = "auto",
+  maxWidth: b = "100%",
+  height: y = "auto",
   borderRadius: c,
   border: d,
   boxShadow: v,
@@ -2708,8 +2708,8 @@ const Qt = ({
       margin: k(Q(p, a, void 0)),
       backgroundColor: Q(u, a, void 0),
       width: Q(h, a, "100%"),
-      maxWidth: Q(y, a, void 0),
-      height: Q(b, a, void 0),
+      maxWidth: Q(b, a, void 0),
+      height: Q(y, a, void 0),
       borderRadius: Q(c, a, void 0),
       border: Q(d, a, void 0),
       boxShadow: Q(v, a, void 0),
@@ -2727,8 +2727,8 @@ const Qt = ({
     p,
     u,
     h,
-    y,
     b,
+    y,
     c,
     d,
     v,
@@ -2747,8 +2747,8 @@ const Qt = ({
   margin: p,
   width: u = "100%",
   maxWidth: h,
-  height: y = "auto",
-  backgroundColor: b = "transparent",
+  height: b = "auto",
+  backgroundColor: y = "transparent",
   borderRadius: c,
   border: d,
   boxShadow: v,
@@ -2775,8 +2775,8 @@ const Qt = ({
       margin: k(ee(p, a, void 0)),
       width: ee(u, a, "100%"),
       maxWidth: ee(h, a, void 0),
-      height: ee(y, a, void 0),
-      backgroundColor: ee(b, a, void 0),
+      height: ee(b, a, void 0),
+      backgroundColor: ee(y, a, void 0),
       borderRadius: ee(c, a, void 0),
       border: ee(d, a, void 0),
       boxShadow: ee(v, a, void 0),
@@ -2794,8 +2794,8 @@ const Qt = ({
     p,
     u,
     h,
-    y,
     b,
+    y,
     c,
     d,
     v,
@@ -2814,8 +2814,8 @@ const Qt = ({
   width: p = "100%",
   maxWidth: u = "100%",
   height: h = "auto",
-  margin: y = 0,
-  style: b,
+  margin: b = 0,
+  style: y,
   className: c = "",
   children: d
 }) => {
@@ -2831,7 +2831,7 @@ const Qt = ({
       gridTemplateColumns: `repeat(${m}, 1fr)`,
       gap: typeof r == "number" ? `${r}px` : r,
       padding: typeof n == "number" ? `${n}px` : n,
-      margin: typeof y == "number" ? `${y}px` : y,
+      margin: typeof b == "number" ? `${b}px` : b,
       alignItems: s,
       justifyItems: i,
       backgroundColor: l,
@@ -2839,20 +2839,20 @@ const Qt = ({
       maxWidth: u,
       height: h,
       boxSizing: "border-box",
-      ...b
+      ...y
     }),
     [
       m,
       r,
       n,
-      y,
+      b,
       s,
       i,
       l,
       p,
       u,
       h,
-      b
+      y
     ]
   );
   return /* @__PURE__ */ e.jsx("div", { style: x, className: c, children: d });
@@ -2866,8 +2866,8 @@ const Qt = ({
   borderRadius: p = "6px",
   padding: u = "10px 16px",
   fontSize: h = "14px",
-  gap: y = "8px",
-  style: b,
+  gap: b = "8px",
+  style: y,
   className: c = ""
 }) => /* @__PURE__ */ e.jsxs(
   "button",
@@ -2883,12 +2883,12 @@ const Qt = ({
       borderRadius: p,
       padding: u,
       fontSize: h,
-      gap: y,
+      gap: b,
       cursor: "pointer",
       fontWeight: 500,
       transition: "all 0.2s ease",
       boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
-      ...b
+      ...y
     },
     className: c,
     children: [
@@ -2907,8 +2907,8 @@ const Qt = ({
   backdropColor: p = "rgba(0,0,0,0.5)",
   transitionDuration: u = 300,
   style: h,
-  className: y = "",
-  children: b,
+  className: b = "",
+  children: y,
   showCloseButton: c = !0,
   closeIconColor: d = "#000",
   closeButtonStyle: v
@@ -2974,7 +2974,7 @@ const Qt = ({
           pointerEvents: t ? "auto" : "none",
           boxShadow: "0 0 20px rgba(0,0,0,0.15)"
         },
-        className: y,
+        className: b,
         children: [
           c && /* @__PURE__ */ e.jsx(
             "button",
@@ -2994,7 +2994,7 @@ const Qt = ({
                 padding: "16px",
                 scrollbarWidth: "thin"
               },
-              children: b
+              children: y
             }
           )
         ]
@@ -3037,8 +3037,8 @@ const Qt = ({
     defaultValues: p,
     onChange: u,
     placeholder: h = "Select...",
-    disabled: y = !1,
-    searchable: b = !1,
+    disabled: b = !1,
+    searchable: y = !1,
     multiSelect: c = !1,
     clearable: d = !1,
     virtualized: v = !1,
@@ -3063,7 +3063,7 @@ const Qt = ({
     menuClassName: S,
     optionClassName: V,
     style: U,
-    controlStyle: q,
+    controlStyle: X,
     menuStyle: ne,
     optionStyle: o,
     iconPrefix: T,
@@ -3085,7 +3085,7 @@ const Qt = ({
     disabledBg: I ?? M.disabledBg,
     disabledTextColor: D ?? M.disabledTextColor,
     placeholderColor: N ?? M.placeholderColor
-  }, [X, C] = L(!1), [w, _] = L(
+  }, [q, C] = L(!1), [w, _] = L(
     p ?? (l ? [l] : [])
   );
   te(() => {
@@ -3094,7 +3094,7 @@ const Qt = ({
   const J = oe(
     () => n.filter((O) => w.includes(O.value)),
     [n, w]
-  ), Z = () => !y && C((O) => !O), le = (O) => {
+  ), Z = () => !b && C((O) => !O), le = (O) => {
     if (c) {
       const ie = w.includes(O) ? w.filter((re) => re !== O) : [...w, O];
       _(ie), u?.(ie);
@@ -3129,12 +3129,12 @@ const Qt = ({
               background: P.controlBg,
               color: P.textColor,
               padding: "0.5rem 0.75rem",
-              border: `1px solid ${X ? P.accentColor : P.borderColor}`,
+              border: `1px solid ${q ? P.accentColor : P.borderColor}`,
               borderRadius: x,
-              cursor: y ? "not-allowed" : "pointer",
-              boxShadow: X ? `0 0 0 3px ${P.accentColor}33` : void 0,
+              cursor: b ? "not-allowed" : "pointer",
+              boxShadow: q ? `0 0 0 3px ${P.accentColor}33` : void 0,
               transition: `all ${H} ease`,
-              ...q
+              ...X
             },
             children: [
               /* @__PURE__ */ e.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
@@ -3160,7 +3160,7 @@ const Qt = ({
                   "div",
                   {
                     style: {
-                      transform: X ? "rotate(180deg)" : "rotate(0deg)",
+                      transform: q ? "rotate(180deg)" : "rotate(0deg)",
                       transition: `transform ${H}`
                     },
                     children: K
@@ -3170,7 +3170,7 @@ const Qt = ({
             ]
           }
         ),
-        X && /* @__PURE__ */ e.jsx(
+        q && /* @__PURE__ */ e.jsx(
           "ul",
           {
             className: S,
@@ -3250,8 +3250,8 @@ const Qt = ({
     value: p,
     defaultValue: u,
     onChange: h,
-    disabled: y = !1,
-    readOnly: b = !1,
+    disabled: b = !1,
+    readOnly: y = !1,
     required: c = !1,
     error: d,
     success: v = !1,
@@ -3278,13 +3278,13 @@ const Qt = ({
     rows: S = 4,
     cols: V,
     maxLength: U,
-    resize: q = !0,
+    resize: X = !0,
     showCharacterCount: ne = !0,
     paddingX: o,
     paddingY: T,
     className: B,
     style: Y
-  } = t, K = ce(null), [se, M] = L(u || ""), [P, X] = L(!1);
+  } = t, K = ce(null), [se, M] = L(u || ""), [P, q] = L(!1);
   De(r, () => K.current);
   const C = (re) => {
     const fe = re.target.value;
@@ -3306,7 +3306,7 @@ const Qt = ({
     paddingRight: x || n === "password" ? "40px" : Z,
     outline: "none",
     transition: "border-color 0.25s ease, box-shadow 0.25s ease",
-    resize: n === "textarea" && !q ? "none" : void 0,
+    resize: n === "textarea" && !X ? "none" : void 0,
     boxShadow: D,
     ...Y
   }, O = {
@@ -3371,8 +3371,8 @@ const Qt = ({
               name: l,
               value: w,
               placeholder: i,
-              disabled: y,
-              readOnly: b,
+              disabled: b,
+              readOnly: y,
               rows: S,
               cols: V,
               maxLength: U,
@@ -3390,8 +3390,8 @@ const Qt = ({
               name: l,
               value: w,
               placeholder: i,
-              disabled: y,
-              readOnly: b,
+              disabled: b,
+              readOnly: y,
               autoFocus: g,
               style: { ...de, ...O },
               onChange: C,
@@ -3402,7 +3402,7 @@ const Qt = ({
             "button",
             {
               type: "button",
-              onClick: () => X(!P),
+              onClick: () => q(!P),
               style: {
                 position: "absolute",
                 right: 10,
@@ -3472,8 +3472,8 @@ const Qt = ({
   borderColor: p = "transparent",
   borderStyle: u = "solid",
   borderWidth: h = "0px",
-  shadow: y = !1,
-  boxShadow: b,
+  shadow: b = !1,
+  boxShadow: y,
   opacity: c = 1,
   objectFit: d = "cover",
   overlayText: v,
@@ -3503,7 +3503,7 @@ const Qt = ({
       border: `${h} ${u} ${p}`,
       objectFit: d,
       opacity: c,
-      boxShadow: y ? b || "0 4px 12px rgba(0,0,0,0.15)" : "none",
+      boxShadow: b ? y || "0 4px 12px rgba(0,0,0,0.15)" : "none",
       transition: `all ${E} ease`,
       display: "block"
     }),
@@ -3517,17 +3517,17 @@ const Qt = ({
       h,
       d,
       c,
-      y,
       b,
+      y,
       E
     ]
   ), S = ve(
-    (q) => {
-      q.currentTarget.style.opacity = $ !== void 0 ? $.toString() : "1", q.currentTarget.style.boxShadow = k ? "0 8px 20px rgba(0,0,0,0.3)" : R.boxShadow || "none", q.currentTarget.style.transform = `scale(${z}) rotate(${A}deg)`;
+    (X) => {
+      X.currentTarget.style.opacity = $ !== void 0 ? $.toString() : "1", X.currentTarget.style.boxShadow = k ? "0 8px 20px rgba(0,0,0,0.3)" : R.boxShadow || "none", X.currentTarget.style.transform = `scale(${z}) rotate(${A}deg)`;
     },
     [$, k, z, A, R.boxShadow]
-  ), V = ve((q) => {
-    q.currentTarget.style.opacity = R.opacity?.toString() || "1", q.currentTarget.style.boxShadow = R.boxShadow || "none", q.currentTarget.style.transform = "scale(1) rotate(0deg)";
+  ), V = ve((X) => {
+    X.currentTarget.style.opacity = R.opacity?.toString() || "1", X.currentTarget.style.boxShadow = R.boxShadow || "none", X.currentTarget.style.transform = "scale(1) rotate(0deg)";
   }, [R]), U = oe(() => {
     switch (F) {
       case "x":
@@ -3621,13 +3621,13 @@ const Qt = ({
   fontSize: p = "15px",
   fontWeight: u = 500,
   spacing: h = "12px",
-  isInline: y = !1
+  isInline: b = !1
 }) => {
-  const b = {
+  const y = {
     display: "flex",
     flexDirection: "column",
     gap: "6px",
-    marginBottom: y ? "0" : h
+    marginBottom: b ? "0" : h
   }, c = {
     display: "flex",
     alignItems: "center",
@@ -3648,7 +3648,7 @@ const Qt = ({
     paddingLeft: "20px",
     margin: 0
   };
-  return /* @__PURE__ */ e.jsxs("li", { style: b, children: [
+  return /* @__PURE__ */ e.jsxs("li", { style: y, children: [
     /* @__PURE__ */ e.jsxs(
       "div",
       {
@@ -3657,7 +3657,7 @@ const Qt = ({
         onMouseEnter: (g) => g.currentTarget.style.color = i,
         onMouseLeave: (g) => g.currentTarget.style.color = l,
         children: [
-          r ? /* @__PURE__ */ e.jsx("span", { style: { fontSize: "16px", color: l }, children: r }) : !y && /* @__PURE__ */ e.jsx("span", { style: d }),
+          r ? /* @__PURE__ */ e.jsx("span", { style: { fontSize: "16px", color: l }, children: r }) : !b && /* @__PURE__ */ e.jsx("span", { style: d }),
           /* @__PURE__ */ e.jsx("span", { children: t })
         ]
       }
@@ -3686,8 +3686,8 @@ const Qt = ({
   backgroundColor: p = "#fff",
   borderColor: u = "#e5e7eb",
   fontSize: h = "15px",
-  fontWeight: y = 500,
-  borderRadius: b = "12px",
+  fontWeight: b = 500,
+  borderRadius: y = "12px",
   padding: c = "16px",
   spacing: d = "12px",
   className: v,
@@ -3699,7 +3699,7 @@ const Qt = ({
     color: l,
     borderWidth: u ? "1px" : "0px",
     borderStyle: "solid",
-    borderRadius: b,
+    borderRadius: y,
     padding: c,
     ...g
   }, a = x ? {
@@ -3738,7 +3738,7 @@ const Qt = ({
         bulletColor: i,
         textColor: l,
         fontSize: h,
-        fontWeight: y,
+        fontWeight: b,
         spacing: d,
         isInline: x
       },
@@ -3755,8 +3755,8 @@ const Qt = ({
   modalStyle: p,
   closeButtonStyle: u,
   disableOverlayClose: h = !1,
-  transitionDuration: y = 200,
-  className: b,
+  transitionDuration: b = 200,
+  className: y,
   darkMode: c = !1
 }) => {
   const d = ce(null);
@@ -3786,7 +3786,7 @@ const Qt = ({
     alignItems: "center",
     zIndex: 1e3,
     opacity: t ? 1 : 0,
-    transition: `opacity ${y}ms ease`,
+    transition: `opacity ${b}ms ease`,
     ...l
   }, m = {
     position: "relative",
@@ -3800,7 +3800,7 @@ const Qt = ({
     padding: 24,
     boxShadow: c ? "0 10px 40px rgba(0,0,0,0.7)" : "0 10px 40px rgba(0,0,0,0.25)",
     transform: t ? "scale(1)" : "scale(0.95)",
-    transition: `transform ${y}ms ease, opacity ${y}ms ease`,
+    transition: `transform ${b}ms ease, opacity ${b}ms ease`,
     ...p
   }, x = {
     position: "absolute",
@@ -3822,7 +3822,7 @@ const Qt = ({
       "aria-label": s || i || "Modal",
       style: g,
       onClick: v,
-      className: b,
+      className: y,
       children: /* @__PURE__ */ e.jsxs(
         "div",
         {
@@ -3863,37 +3863,77 @@ const Qt = ({
     }
   );
 }, gr = ({ children: t, style: r, className: n }) => /* @__PURE__ */ e.jsx(
-  "table",
+  "div",
+  {
+    style: {
+      overflowX: "auto",
+      background: "#ffffff",
+      borderRadius: 12,
+      boxShadow: "0 2px 6px rgba(0,0,0,0.05)",
+      border: "1px solid #e5e7eb",
+      ...r
+    },
+    className: n,
+    children: /* @__PURE__ */ e.jsx(
+      "table",
+      {
+        style: {
+          width: "100%",
+          borderCollapse: "collapse",
+          borderSpacing: 0,
+          borderRadius: 12,
+          overflow: "hidden"
+        },
+        children: t
+      }
+    )
+  }
+), mr = ({
+  children: t,
+  style: r,
+  className: n
+}) => /* @__PURE__ */ e.jsx(
+  "thead",
   {
     className: n,
     style: {
-      width: "100%",
-      borderCollapse: "collapse",
-      borderSpacing: 0,
+      backgroundColor: "#f3f4f6",
+      color: "#111827",
+      fontWeight: 600,
       ...r
     },
     children: t
   }
-), mr = ({ children: t, style: r, className: n }) => /* @__PURE__ */ e.jsx(
-  "thead",
+), br = ({
+  children: t,
+  style: r,
+  className: n
+}) => /* @__PURE__ */ e.jsx(
+  "tbody",
   {
     className: n,
     style: {
-      backgroundColor: "#f9fafb",
-      borderBottom: "2px solid #e5e7eb",
+      backgroundColor: "#ffffff",
       ...r
     },
     children: t
   }
-), yr = ({ children: t, style: r, className: n }) => /* @__PURE__ */ e.jsx("tbody", { className: n, style: r, children: t }), br = ({ children: t, style: r, className: n }) => /* @__PURE__ */ e.jsx(
+), yr = ({
+  children: t,
+  style: r,
+  className: n
+}) => /* @__PURE__ */ e.jsx(
   "tr",
   {
     className: n,
     style: {
       borderBottom: "1px solid #e5e7eb",
       transition: "background 0.2s ease",
+      cursor: "default",
       ...r
     },
+    onMouseEnter: (s) => s.currentTarget.style.backgroundColor = "#f9fafb",
+    onMouseLeave: (s) => s.currentTarget.style.backgroundColor = "transparent",
     children: t
   }
 ), vr = ({ children: t, style: r, className: n }) => /* @__PURE__ */ e.jsx(
@@ -3903,9 +3943,9 @@ const Qt = ({
     style: {
       textAlign: "left",
       padding: "12px 16px",
-      fontWeight: 600,
       fontSize: "0.875rem",
       color: "#374151",
+      borderBottom: "2px solid #e5e7eb",
       ...r
     },
     children: t
@@ -3932,8 +3972,8 @@ const Qt = ({
   radius: p = 8,
   padding: u = "12px 18px",
   transitionDuration: h = 200,
-  elevation: y = 1,
-  bordered: b = !1,
+  elevation: b = 1,
+  bordered: y = !1,
   primaryColor: c = "#2563eb",
   backgroundColor: d = "transparent",
   textColor: v = "#374151",
@@ -3953,7 +3993,7 @@ const Qt = ({
   inactiveTabStyle: D,
   contentStyle: N
 }) => {
-  const [H, W] = L(r), [R, S] = L(null), [V, U] = L(!1), [q, ne] = L(!1), o = ce(null);
+  const [H, W] = L(r), [R, S] = L(null), [V, U] = L(!1), [X, ne] = L(!1), o = ce(null);
   te(() => {
     const w = () => U(window.innerWidth <= a);
     return w(), window.addEventListener("resize", w), () => window.removeEventListener("resize", w);
@@ -3982,7 +4022,7 @@ const Qt = ({
     background: s === "solid" ? c : "transparent",
     color: m,
     borderBottom: s === "underline" ? `2px solid ${c}` : void 0,
-    boxShadow: y > 0 ? `0 ${y}px ${y * 4}px ${c}33` : void 0,
+    boxShadow: b > 0 ? `0 ${b}px ${b * 4}px ${c}33` : void 0,
     ...I
   }, se = {
     ...s === "outline" ? { borderColor: x } : s === "underline" ? { borderBottomColor: "transparent" } : {},
@@ -3994,11 +4034,11 @@ const Qt = ({
     color: f,
     cursor: "not-allowed",
     opacity: 0.6
-  }, X = {
+  }, q = {
     flexGrow: 1,
-    borderTop: b && n === "top" ? `1px solid ${x}` : void 0,
-    borderLeft: b && n === "left" ? `1px solid ${x}` : void 0,
-    borderRight: b && n === "right" ? `1px solid ${x}` : void 0,
+    borderTop: y && n === "top" ? `1px solid ${x}` : void 0,
+    borderLeft: y && n === "left" ? `1px solid ${x}` : void 0,
+    borderRight: y && n === "right" ? `1px solid ${x}` : void 0,
     borderRadius: p,
     ...N
   }, C = n === "left" || n === "right";
@@ -4011,7 +4051,7 @@ const Qt = ({
         display: "flex",
         flexDirection: C ? n === "right" ? "row-reverse" : "row" : "column",
         background: d,
-        border: b ? `1px solid ${x}` : void 0,
+        border: y ? `1px solid ${x}` : void 0,
         borderRadius: p,
         overflow: "hidden",
         ...A
@@ -4030,7 +4070,7 @@ const Qt = ({
           /* @__PURE__ */ e.jsxs(
             "button",
             {
-              onClick: () => ne(!q),
+              onClick: () => ne(!X),
               style: {
                 ...Y,
                 ...K,
@@ -4044,7 +4084,7 @@ const Qt = ({
               ]
             }
           ),
-          q && /* @__PURE__ */ e.jsx(
+          X && /* @__PURE__ */ e.jsx(
             "div",
             {
               style: {
@@ -4123,7 +4163,7 @@ const Qt = ({
           "div",
           {
             className: `modern-tabs__content ${F}`,
-            style: X,
+            style: q,
             role: "tabpanel",
             children: t[H]?.content
           }
@@ -4138,7 +4178,7 @@ function ge(t, r) {
     (n) => ("0" + Math.min(255, Math.max(0, parseInt(n, 16) + r)).toString(16)).slice(-2)
   );
 }
-const qt = {
+const Xt = {
   light: {
     default: "#111",
     primary: "#2563eb",
@@ -4168,8 +4208,8 @@ function kr({
   transform: p = "none",
   italic: u = !1,
   underline: h = !1,
-  strikethrough: y = !1,
-  truncate: b = !1,
+  strikethrough: b = !1,
+  truncate: y = !1,
   selectable: c = !0,
   hoverable: d = !1,
   onClick: v,
@@ -4180,7 +4220,7 @@ function kr({
   ...a
 }) {
   const j = t || "p", $ = oe(() => {
-    if (!m) return qt[g ? "dark" : "light"];
+    if (!m) return Xt[g ? "dark" : "light"];
     const I = {
       default: "#111",
       primary: m,
@@ -4213,11 +4253,11 @@ function kr({
     textAlign: l,
     textTransform: p,
     fontStyle: u ? "italic" : "normal",
-    textDecoration: h ? "underline" : y ? "line-through" : "none",
+    textDecoration: h ? "underline" : b ? "line-through" : "none",
     userSelect: c ? "text" : "none",
-    overflow: b ? "hidden" : void 0,
-    whiteSpace: b ? "nowrap" : void 0,
-    textOverflow: b ? "ellipsis" : void 0,
+    overflow: y ? "hidden" : void 0,
+    whiteSpace: y ? "nowrap" : void 0,
+    textOverflow: y ? "ellipsis" : void 0,
     cursor: v ? "pointer" : "default",
     transition: "all 0.25s ease-in-out",
     ...f
@@ -4264,11 +4304,11 @@ export {
   rr as RadioGroup,
   We as Stack,
   nr as SwitchGroup,
-  yr as TBody,
+  br as TBody,
   jr as TD,
   vr as TH,
   mr as THead,
-  br as TRow,
+  yr as TRow,
   gr as Table,
   wr as Tabs,
   kr as Text,