cyberui-2045 1.3.0 → 1.3.1

package/dist/index.es.js

@@ -1,6 +1,6 @@
-import ve, { memo as ue, useState as T, useRef as J, useCallback as D, useEffect as se, useMemo as ae, createContext as he, useContext as je, useId as Ue } from "react";
-import { createPortal as ye } from "react-dom";
-var oe = { exports: {} }, ie = {};
+import Ue, { useCallback as w, useState as V, useEffect as J, memo as ue, useRef as B, useMemo as oe, createContext as Ie, useContext as Ce, useId as Ee } from "react";
+import { createPortal as xe } from "react-dom";
+var ie = { exports: {} }, ce = {};
 /**
  * @license React
  * react-jsx-dev-runtime.production.js
@@ -10,14 +10,14 @@ var oe = { exports: {} }, ie = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var be;
-function Ie() {
-  if (be) return ie;
-  be = 1;
-  var s = Symbol.for("react.fragment");
-  return ie.Fragment = s, ie.jsxDEV = void 0, ie;
+var fe;
+function ke() {
+  if (fe) return ce;
+  fe = 1;
+  var r = Symbol.for("react.fragment");
+  return ce.Fragment = r, ce.jsxDEV = void 0, ce;
 }
-var ce = {};
+var le = {};
 /**
  * @license React
  * react-jsx-dev-runtime.development.js
@@ -27,258 +27,258 @@ var ce = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var fe;
-function Ce() {
-  return fe || (fe = 1, process.env.NODE_ENV !== "production" && function() {
-    function s(r) {
-      if (r == null) return null;
-      if (typeof r == "function")
-        return r.$$typeof === _ ? null : r.displayName || r.name || null;
-      if (typeof r == "string") return r;
-      switch (r) {
-        case j:
+var Ne;
+function Pe() {
+  return Ne || (Ne = 1, process.env.NODE_ENV !== "production" && function() {
+    function r(t) {
+      if (t == null) return null;
+      if (typeof t == "function")
+        return t.$$typeof === z ? null : t.displayName || t.name || null;
+      if (typeof t == "string") return t;
+      switch (t) {
+        case I:
           return "Fragment";
-        case k:
+        case E:
           return "Profiler";
         case y:
           return "StrictMode";
-        case w:
+        case j:
           return "Suspense";
-        case I:
+        case S:
           return "SuspenseList";
-        case O:
+        case M:
           return "Activity";
       }
-      if (typeof r == "object")
-        switch (typeof r.tag == "number" && console.error(
+      if (typeof t == "object")
+        switch (typeof t.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), r.$$typeof) {
+        ), t.$$typeof) {
           case U:
             return "Portal";
-          case E:
-            return (r.displayName || "Context") + ".Provider";
-          case g:
-            return (r._context.displayName || "Context") + ".Consumer";
-          case A:
-            var n = r.render;
-            return r = r.displayName, r || (r = n.displayName || n.name || "", r = r !== "" ? "ForwardRef(" + r + ")" : "ForwardRef"), r;
-          case z:
-            return n = r.displayName || null, n !== null ? n : s(r.type) || "Memo";
-          case C:
-            n = r._payload, r = r._init;
+          case k:
+            return (t.displayName || "Context") + ".Provider";
+          case x:
+            return (t._context.displayName || "Context") + ".Consumer";
+          case D:
+            var n = t.render;
+            return t = t.displayName, t || (t = n.displayName || n.name || "", t = t !== "" ? "ForwardRef(" + t + ")" : "ForwardRef"), t;
+          case O:
+            return n = t.displayName || null, n !== null ? n : r(t.type) || "Memo";
+          case v:
+            n = t._payload, t = t._init;
             try {
-              return s(r(n));
+              return r(t(n));
             } catch {
             }
         }
       return null;
     }
-    function t(r) {
-      return "" + r;
+    function s(t) {
+      return "" + t;
     }
-    function m(r) {
+    function m(t) {
       try {
-        t(r);
+        s(t);
         var n = !1;
       } catch {
         n = !0;
       }
       if (n) {
         n = console;
-        var b = n.error, v = typeof Symbol == "function" && Symbol.toStringTag && r[Symbol.toStringTag] || r.constructor.name || "Object";
-        return b.call(
+        var a = n.error, C = typeof Symbol == "function" && Symbol.toStringTag && t[Symbol.toStringTag] || t.constructor.name || "Object";
+        return a.call(
           n,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          v
-        ), t(r);
+          C
+        ), s(t);
       }
     }
-    function a(r) {
-      if (r === j) return "<>";
-      if (typeof r == "object" && r !== null && r.$$typeof === C)
+    function o(t) {
+      if (t === I) return "<>";
+      if (typeof t == "object" && t !== null && t.$$typeof === v)
         return "<...>";
       try {
-        var n = s(r);
+        var n = r(t);
         return n ? "<" + n + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
     function i() {
-      var r = X.A;
-      return r === null ? null : r.getOwner();
+      var t = H.A;
+      return t === null ? null : t.getOwner();
     }
-    function f() {
+    function d() {
       return Error("react-stack-top-frame");
     }
-    function l(r) {
-      if (L.call(r, "key")) {
-        var n = Object.getOwnPropertyDescriptor(r, "key").get;
+    function u(t) {
+      if (F.call(t, "key")) {
+        var n = Object.getOwnPropertyDescriptor(t, "key").get;
         if (n && n.isReactWarning) return !1;
       }
-      return r.key !== void 0;
+      return t.key !== void 0;
     }
-    function o(r, n) {
-      function b() {
-        W || (W = !0, console.error(
+    function c(t, n) {
+      function a() {
+        Y || (Y = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
           n
         ));
       }
-      b.isReactWarning = !0, Object.defineProperty(r, "key", {
-        get: b,
+      a.isReactWarning = !0, Object.defineProperty(t, "key", {
+        get: a,
         configurable: !0
       });
     }
-    function d() {
-      var r = s(this.type);
-      return F[r] || (F[r] = !0, console.error(
+    function b() {
+      var t = r(this.type);
+      return W[t] || (W[t] = !0, console.error(
         "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."
-      )), r = this.props.ref, r !== void 0 ? r : null;
+      )), t = this.props.ref, t !== void 0 ? t : null;
     }
-    function h(r, n, b, v, p, R, S, $) {
-      return b = R.ref, r = {
-        $$typeof: x,
-        type: r,
+    function h(t, n, a, C, g, P, _, A) {
+      return a = P.ref, t = {
+        $$typeof: p,
+        type: t,
         key: n,
-        props: R,
-        _owner: p
-      }, (b !== void 0 ? b : null) !== null ? Object.defineProperty(r, "ref", {
+        props: P,
+        _owner: g
+      }, (a !== void 0 ? a : null) !== null ? Object.defineProperty(t, "ref", {
         enumerable: !1,
-        get: d
-      }) : Object.defineProperty(r, "ref", { enumerable: !1, value: null }), r._store = {}, Object.defineProperty(r._store, "validated", {
+        get: b
+      }) : Object.defineProperty(t, "ref", { enumerable: !1, value: null }), t._store = {}, Object.defineProperty(t._store, "validated", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: 0
-      }), Object.defineProperty(r, "_debugInfo", {
+      }), Object.defineProperty(t, "_debugInfo", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: null
-      }), Object.defineProperty(r, "_debugStack", {
+      }), Object.defineProperty(t, "_debugStack", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: S
-      }), Object.defineProperty(r, "_debugTask", {
+        value: _
+      }), Object.defineProperty(t, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: $
-      }), Object.freeze && (Object.freeze(r.props), Object.freeze(r)), r;
+        value: A
+      }), Object.freeze && (Object.freeze(t.props), Object.freeze(t)), t;
     }
-    function c(r, n, b, v, p, R, S, $) {
-      var P = n.children;
-      if (P !== void 0)
-        if (v)
-          if (K(P)) {
-            for (v = 0; v < P.length; v++)
-              N(P[v]);
-            Object.freeze && Object.freeze(P);
+    function l(t, n, a, C, g, P, _, A) {
+      var T = n.children;
+      if (T !== void 0)
+        if (C)
+          if (ee(T)) {
+            for (C = 0; C < T.length; C++)
+              N(T[C]);
+            Object.freeze && Object.freeze(T);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else N(P);
-      if (L.call(n, "key")) {
-        P = s(r);
-        var V = Object.keys(n).filter(function(me) {
-          return me !== "key";
+        else N(T);
+      if (F.call(n, "key")) {
+        T = r(t);
+        var L = Object.keys(n).filter(function(te) {
+          return te !== "key";
         });
-        v = 0 < V.length ? "{key: someKey, " + V.join(": ..., ") + ": ...}" : "{key: someKey}", B[P + v] || (V = 0 < V.length ? "{" + V.join(": ..., ") + ": ...}" : "{}", console.error(
+        C = 0 < L.length ? "{key: someKey, " + L.join(": ..., ") + ": ...}" : "{key: someKey}", X[T + C] || (L = 0 < L.length ? "{" + L.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          v,
-          P,
-          V,
-          P
-        ), B[P + v] = !0);
+          C,
+          T,
+          L,
+          T
+        ), X[T + C] = !0);
       }
-      if (P = null, b !== void 0 && (m(b), P = "" + b), l(n) && (m(n.key), P = "" + n.key), "key" in n) {
-        b = {};
-        for (var ee in n)
-          ee !== "key" && (b[ee] = n[ee]);
-      } else b = n;
-      return P && o(
-        b,
-        typeof r == "function" ? r.displayName || r.name || "Unknown" : r
+      if (T = null, a !== void 0 && (m(a), T = "" + a), u(n) && (m(n.key), T = "" + n.key), "key" in n) {
+        a = {};
+        for (var R in n)
+          R !== "key" && (a[R] = n[R]);
+      } else a = n;
+      return T && c(
+        a,
+        typeof t == "function" ? t.displayName || t.name || "Unknown" : t
       ), h(
-        r,
+        t,
+        T,
         P,
-        R,
-        p,
+        g,
         i(),
-        b,
-        S,
-        $
+        a,
+        _,
+        A
       );
     }
-    function N(r) {
-      typeof r == "object" && r !== null && r.$$typeof === x && r._store && (r._store.validated = 1);
+    function N(t) {
+      typeof t == "object" && t !== null && t.$$typeof === p && t._store && (t._store.validated = 1);
     }
-    var u = ve, x = Symbol.for("react.transitional.element"), U = Symbol.for("react.portal"), j = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), k = Symbol.for("react.profiler"), g = Symbol.for("react.consumer"), E = Symbol.for("react.context"), A = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), I = Symbol.for("react.suspense_list"), z = Symbol.for("react.memo"), C = Symbol.for("react.lazy"), O = Symbol.for("react.activity"), _ = Symbol.for("react.client.reference"), X = u.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, L = Object.prototype.hasOwnProperty, K = Array.isArray, Z = console.createTask ? console.createTask : function() {
+    var f = Ue, p = Symbol.for("react.transitional.element"), U = Symbol.for("react.portal"), I = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), E = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), k = Symbol.for("react.context"), D = Symbol.for("react.forward_ref"), j = Symbol.for("react.suspense"), S = Symbol.for("react.suspense_list"), O = Symbol.for("react.memo"), v = Symbol.for("react.lazy"), M = Symbol.for("react.activity"), z = Symbol.for("react.client.reference"), H = f.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, F = Object.prototype.hasOwnProperty, ee = Array.isArray, Z = console.createTask ? console.createTask : function() {
       return null;
     };
-    u = {
-      react_stack_bottom_frame: function(r) {
-        return r();
+    f = {
+      react_stack_bottom_frame: function(t) {
+        return t();
       }
     };
-    var W, F = {}, G = u.react_stack_bottom_frame.bind(
-      u,
-      f
-    )(), M = Z(a(f)), B = {};
-    ce.Fragment = j, ce.jsxDEV = function(r, n, b, v, p, R) {
-      var S = 1e4 > X.recentlyCreatedOwnerStacks++;
-      return c(
-        r,
+    var Y, W = {}, K = f.react_stack_bottom_frame.bind(
+      f,
+      d
+    )(), $ = Z(o(d)), X = {};
+    le.Fragment = I, le.jsxDEV = function(t, n, a, C, g, P) {
+      var _ = 1e4 > H.recentlyCreatedOwnerStacks++;
+      return l(
+        t,
         n,
-        b,
-        v,
-        p,
-        R,
-        S ? Error("react-stack-top-frame") : G,
-        S ? Z(a(r)) : M
+        a,
+        C,
+        g,
+        P,
+        _ ? Error("react-stack-top-frame") : K,
+        _ ? Z(o(t)) : $
       );
     };
-  }()), ce;
+  }()), le;
 }
-var Ne;
-function ke() {
-  return Ne || (Ne = 1, process.env.NODE_ENV === "production" ? oe.exports = Ie() : oe.exports = Ce()), oe.exports;
+var pe;
+function De() {
+  return pe || (pe = 1, process.env.NODE_ENV === "production" ? ie.exports = ke() : ie.exports = Pe()), ie.exports;
 }
-var e = ke();
-const Y = (s, t) => {
-  if (typeof s == "string")
-    return t[s] || "";
+var e = De();
+const be = (r) => typeof r == "object" && r !== null, q = (r, s) => {
+  if (!be(r))
+    return s[r] || "";
   const m = [];
-  if (s.base && t[s.base] && m.push(t[s.base]), s.sm && t[s.sm]) {
-    const a = t[s.sm].split(" ").map((i) => `sm:${i}`);
-    m.push(...a);
+  if (r.base && s[r.base] && m.push(s[r.base]), r.sm && s[r.sm]) {
+    const o = s[r.sm].split(" ").map((i) => `sm:${i}`);
+    m.push(...o);
   }
-  if (s.md && t[s.md]) {
-    const a = t[s.md].split(" ").map((i) => `md:${i}`);
-    m.push(...a);
+  if (r.md && s[r.md]) {
+    const o = s[r.md].split(" ").map((i) => `md:${i}`);
+    m.push(...o);
   }
-  if (s.lg && t[s.lg]) {
-    const a = t[s.lg].split(" ").map((i) => `lg:${i}`);
-    m.push(...a);
+  if (r.lg && s[r.lg]) {
+    const o = s[r.lg].split(" ").map((i) => `lg:${i}`);
+    m.push(...o);
   }
-  if (s.xl && t[s.xl]) {
-    const a = t[s.xl].split(" ").map((i) => `xl:${i}`);
-    m.push(...a);
+  if (r.xl && s[r.xl]) {
+    const o = s[r.xl].split(" ").map((i) => `xl:${i}`);
+    m.push(...o);
   }
-  if (s["2xl"] && t[s["2xl"]]) {
-    const a = t[s["2xl"]].split(" ").map((i) => `2xl:${i}`);
-    m.push(...a);
+  if (r["2xl"] && s[r["2xl"]]) {
+    const o = s[r["2xl"]].split(" ").map((i) => `2xl:${i}`);
+    m.push(...o);
   }
   return m.join(" ");
-}, He = (...s) => s.filter(Boolean).join(" "), q = {
+}, Ze = (...r) => r.filter(Boolean).join(" "), Q = {
   button: {
     sm: "py-1 px-4 text-sm",
     md: "py-2 px-6 text-lg",
@@ -331,15 +331,45 @@ const Y = (s, t) => {
     md: "h-64",
     lg: "h-80"
   }
-}, H = ({
-  variant: s = "primary",
-  size: t = "md",
+}, we = {
+  base: 0,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536
+}, Ve = (r, s, m) => {
+  if (!be(r))
+    return r ?? m;
+  let o = r.base ?? m;
+  const i = ["sm", "md", "lg", "xl", "2xl"];
+  for (const d of i) {
+    const u = we[d];
+    s >= u && r[d] !== void 0 && (o = r[d]);
+  }
+  return o;
+}, Te = (r, s) => {
+  const m = w(
+    () => typeof window > "u" ? s : Ve(r, window.innerWidth, s),
+    [s, r]
+  ), [o, i] = V(m);
+  return J(() => {
+    if (!be(r)) {
+      i(r ?? s);
+      return;
+    }
+    const d = () => i(m());
+    return d(), window.addEventListener("resize", d), () => window.removeEventListener("resize", d);
+  }, [s, m, r]), o;
+}, G = ({
+  variant: r = "primary",
+  size: s = "md",
   className: m = "",
-  disabled: a = !1,
+  disabled: o = !1,
   children: i,
-  ...f
+  ...d
 }) => {
-  const l = [
+  const u = [
     "group",
     "relative",
     "overflow-hidden",
@@ -352,8 +382,8 @@ const Y = (s, t) => {
     "ease-in-out",
     "transform",
     "focus:outline-none",
-    a ? "cursor-not-allowed" : "cursor-pointer"
-  ].join(" "), o = (N) => Y(N, q.button), d = (N, u) => ({
+    o ? "cursor-not-allowed" : "cursor-pointer"
+  ].join(" "), c = (N) => q(N, Q.button), b = (N, f) => ({
     primary: {
       enabled: "bg-linear-(--gradient-accent) text-base shadow-primary border-none hover:shadow-lg-accent hover:scale-105 focus:ring-4 focus:ring-accent active:scale-95",
       disabled: "bg-base border-2 border-accent/20 text-accent/40 shadow-none opacity-50 hover:scale-100"
@@ -370,30 +400,30 @@ const Y = (s, t) => {
       enabled: "bg-surface border-2 border-accent text-accent shadow-secondary hover:bg-accent hover:text-base hover:shadow-lg-accent hover:scale-105 focus:ring-4 focus:ring-accent active:scale-95",
       disabled: "bg-base border-2 border-accent/10 text-muted/60 shadow-none opacity-40 hover:bg-base hover:text-muted/60 hover:scale-100"
     }
-  })[N][u ? "disabled" : "enabled"], h = [
-    l,
-    o(t),
-    d(s, a),
+  })[N][f ? "disabled" : "enabled"], h = [
+    u,
+    c(s),
+    b(r, o),
     m
-  ].filter(Boolean).join(" "), c = s === "primary" && !a;
+  ].filter(Boolean).join(" "), l = r === "primary" && !o;
   return /* @__PURE__ */ e.jsxDEV(
     "button",
     {
       className: h,
-      disabled: a,
-      ...f,
+      disabled: o,
+      ...d,
       children: [
         /* @__PURE__ */ e.jsxDEV("span", { className: "relative z-10", children: i }, void 0, !1, {
           fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Button.tsx",
           lineNumber: 80,
           columnNumber: 7
         }, void 0),
-        c && /* @__PURE__ */ e.jsxDEV("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700" }, void 0, !1, {
+        l && /* @__PURE__ */ e.jsxDEV("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700" }, void 0, !1, {
           fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Button.tsx",
           lineNumber: 82,
           columnNumber: 9
         }, void 0),
-        a && /* @__PURE__ */ e.jsxDEV("div", { className: "absolute inset-0 bg-gradient-to-br from-transparent via-base/10 to-transparent pointer-events-none" }, void 0, !1, {
+        o && /* @__PURE__ */ e.jsxDEV("div", { className: "absolute inset-0 bg-gradient-to-br from-transparent via-base/10 to-transparent pointer-events-none" }, void 0, !1, {
           fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Button.tsx",
           lineNumber: 85,
           columnNumber: 9
@@ -409,7 +439,7 @@ const Y = (s, t) => {
     },
     void 0
   );
-}, We = () => /* @__PURE__ */ e.jsxDEV("div", { className: "text-center max-w-xl md:max-w-3xl lg:max-w-4xl mx-auto space-y-6 md:space-y-8", children: [
+}, Je = () => /* @__PURE__ */ e.jsxDEV("div", { className: "text-center max-w-xl md:max-w-3xl lg:max-w-4xl mx-auto space-y-6 md:space-y-8", children: [
   /* @__PURE__ */ e.jsxDEV("div", { className: "space-y-4", children: [
     /* @__PURE__ */ e.jsxDEV("h2", { className: "text-3xl md:text-4xl lg:text-5xl font-semibold text-primary tracking-tight uppercase", children: "CyberUI" }, void 0, !1, {
       fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/tabs/HomeTab.tsx",
@@ -502,7 +532,7 @@ const Y = (s, t) => {
   }, void 0),
   /* @__PURE__ */ e.jsxDEV("div", { className: "flex flex-col sm:flex-row justify-center gap-4 sm:gap-6 pt-8", children: [
     /* @__PURE__ */ e.jsxDEV(
-      H,
+      G,
       {
         variant: "primary",
         size: { base: "md", lg: "lg" },
@@ -519,7 +549,7 @@ const Y = (s, t) => {
       void 0
     ),
     /* @__PURE__ */ e.jsxDEV(
-      H,
+      G,
       {
         variant: "secondary",
         size: { base: "md", lg: "lg" },
@@ -544,19 +574,19 @@ const Y = (s, t) => {
   fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/tabs/HomeTab.tsx",
   lineNumber: 6,
   columnNumber: 5
-}, void 0), pe = ({
-  variant: s = "primary",
-  size: t = "md",
+}, void 0), ye = ({
+  variant: r = "primary",
+  size: s = "md",
   label: m,
-  helperText: a,
+  helperText: o,
   error: i,
-  leftIcon: f,
-  rightIcon: l,
-  className: o = "",
-  disabled: d = !1,
+  leftIcon: d,
+  rightIcon: u,
+  className: c = "",
+  disabled: b = !1,
   ...h
 }) => {
-  const c = [
+  const l = [
     "w-full",
     "rounded-lg",
     "bg-surface",
@@ -565,31 +595,31 @@ const Y = (s, t) => {
     "transition-all",
     "duration-300",
     "focus:outline-none",
-    d ? "cursor-not-allowed opacity-60" : "cursor-text"
-  ].join(" "), N = (k) => Y(k, q.input), u = (k) => {
-    const g = N(k);
-    return f && l ? `pl-10 pr-10 ${g}` : f ? `pl-10 pr-4 ${g}` : l ? `pl-4 pr-10 ${g}` : `px-4 ${g}`;
-  }, x = (k, g, E) => g ? "border-2 border-error shadow-error/30 hover:shadow-error focus:ring-2 focus:ring-error focus:shadow-error active:bg-base" : E ? {
+    b ? "cursor-not-allowed opacity-60" : "cursor-text"
+  ].join(" "), N = (E) => q(E, Q.input), f = (E) => {
+    const x = N(E);
+    return d && u ? `pl-10 pr-10 ${x}` : d ? `pl-10 pr-4 ${x}` : u ? `pl-4 pr-10 ${x}` : `px-4 ${x}`;
+  }, p = (E, x, k) => x ? "border-2 border-error shadow-error/30 hover:shadow-error focus:ring-2 focus:ring-error focus:shadow-error active:bg-base" : k ? {
     primary: "border-2 border-accent/20 shadow-none",
     secondary: "border-2 border-secondary/20 shadow-none",
     danger: "border-2 border-error/20 shadow-none",
     ghost: "border border-border-default shadow-none"
-  }[k] : {
+  }[E] : {
     primary: "border-2 border-accent shadow-input-accent hover:shadow-lg-accent focus:ring-2 focus:ring-accent focus:shadow-lg-accent active:bg-base",
     secondary: "border-2 border-secondary shadow-secondary/30 hover:shadow-secondary focus:ring-2 focus:ring-secondary focus:shadow-secondary active:bg-base",
     danger: "border-2 border-error shadow-error/30 hover:shadow-error focus:ring-2 focus:ring-error focus:shadow-error active:bg-base",
     ghost: "border border-border-default shadow-none hover:border-accent focus:ring-2 focus:ring-accent focus:border-accent active:bg-base"
-  }[k], U = (k) => ({
+  }[E], U = (E) => ({
     primary: "text-accent",
     secondary: "text-secondary",
     danger: "text-error",
     ghost: "text-muted"
-  })[k], j = [
-    c,
-    u(t),
-    x(s, !!i, d),
-    o
-  ].filter(Boolean).join(" "), y = U(s);
+  })[E], I = [
+    l,
+    f(s),
+    p(r, !!i, b),
+    c
+  ].filter(Boolean).join(" "), y = U(r);
   return /* @__PURE__ */ e.jsxDEV("div", { className: "space-y-2", children: [
     m && /* @__PURE__ */ e.jsxDEV("label", { className: "block text-sm font-medium text-default", children: m }, void 0, !1, {
       fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Input.tsx",
@@ -597,7 +627,7 @@ const Y = (s, t) => {
       columnNumber: 9
     }, void 0),
     /* @__PURE__ */ e.jsxDEV("div", { className: "relative", children: [
-      f && /* @__PURE__ */ e.jsxDEV("div", { className: `absolute inset-y-0 left-0 flex items-center pl-3 ${y}`, children: f }, void 0, !1, {
+      d && /* @__PURE__ */ e.jsxDEV("div", { className: `absolute inset-y-0 left-0 flex items-center pl-3 ${y}`, children: d }, void 0, !1, {
         fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Input.tsx",
         lineNumber: 112,
         columnNumber: 11
@@ -605,8 +635,8 @@ const Y = (s, t) => {
       /* @__PURE__ */ e.jsxDEV(
         "input",
         {
-          className: j,
-          disabled: d,
+          className: I,
+          disabled: b,
           ...h
         },
         void 0,
@@ -618,7 +648,7 @@ const Y = (s, t) => {
         },
         void 0
       ),
-      l && /* @__PURE__ */ e.jsxDEV("div", { className: `absolute inset-y-0 right-0 flex items-center pr-3 ${y}`, children: l }, void 0, !1, {
+      u && /* @__PURE__ */ e.jsxDEV("div", { className: `absolute inset-y-0 right-0 flex items-center pr-3 ${y}`, children: u }, void 0, !1, {
         fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Input.tsx",
         lineNumber: 126,
         columnNumber: 11
@@ -628,7 +658,7 @@ const Y = (s, t) => {
       lineNumber: 109,
       columnNumber: 7
     }, void 0),
-    (a || i) && /* @__PURE__ */ e.jsxDEV("div", { className: `text-xs font-mono ${i ? "text-error" : "text-muted"}`, children: i || a }, void 0, !1, {
+    (o || i) && /* @__PURE__ */ e.jsxDEV("div", { className: `text-xs font-mono ${i ? "text-error" : "text-muted"}`, children: i || o }, void 0, !1, {
       fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Input.tsx",
       lineNumber: 134,
       columnNumber: 9
@@ -638,25 +668,25 @@ const Y = (s, t) => {
     lineNumber: 100,
     columnNumber: 5
   }, void 0);
-}, Q = ({
-  variant: s = "default",
-  size: t = "md",
+}, se = ({
+  variant: r = "default",
+  size: s = "md",
   title: m,
-  titleBorder: a = !0,
+  titleBorder: o = !0,
   children: i,
-  className: f = "",
-  ...l
+  className: d = "",
+  ...u
 }) => {
-  const o = (c) => Y(c, q.card), d = (c) => {
-    const N = o(t);
+  const c = (l) => q(l, Q.card), b = (l) => {
+    const N = c(s);
     return {
       default: `bg-base border border-border-default rounded-xl ${N}`,
       accent: `bg-surface border-2 border-accent rounded-xl shadow-input-accent/50 hover:shadow-lg-accent transition-all duration-300 transform ${N}`,
       small: `bg-base rounded-lg border border-border-default ${N}`
-    }[c];
-  }, h = (c) => c ? "text-xl font-semibold text-secondary mb-4 border-b border-accent pb-2" : "text-xl font-semibold text-secondary mb-4";
-  return /* @__PURE__ */ e.jsxDEV("div", { className: `${d(s)} ${f}`, ...l, children: [
-    m && /* @__PURE__ */ e.jsxDEV("h3", { className: h(a), children: m }, void 0, !1, {
+    }[l];
+  }, h = (l) => l ? "text-xl font-semibold text-secondary mb-4 border-b border-accent pb-2" : "text-xl font-semibold text-secondary mb-4";
+  return /* @__PURE__ */ e.jsxDEV("div", { className: `${b(r)} ${d}`, ...u, children: [
+    m && /* @__PURE__ */ e.jsxDEV("h3", { className: h(o), children: m }, void 0, !1, {
       fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Card.tsx",
       lineNumber: 46,
       columnNumber: 9
@@ -667,70 +697,70 @@ const Y = (s, t) => {
     lineNumber: 44,
     columnNumber: 5
   }, void 0);
-}, Ee = {
+}, Se = {
   openDuration: 50,
   closeDuration: 350,
   cyberpunkEffects: !0
-}, ne = ue(
+}, ae = ue(
   ({
-    src: s,
-    alt: t,
+    src: r,
+    alt: s,
     size: m = "md",
-    preview: a = !0,
+    preview: o = !0,
     fallback: i,
-    placeholder: f,
-    className: l = "",
-    animation: o,
-    eager: d = !1,
+    placeholder: d,
+    className: u = "",
+    animation: c,
+    eager: b = !1,
     previewClassName: h = "",
-    onPreviewOpen: c,
+    onPreviewOpen: l,
     onPreviewClose: N,
-    onLoad: u,
-    onError: x,
+    onLoad: f,
+    onError: p,
     ...U
   }) => {
-    const j = { ...Ee, ...o }, [y, k] = T(!1), [g, E] = T(!1), [A, w] = T(!1), [I, z] = T(!0), [C, O] = T(!1), [_, X] = T(!1), L = J(null), K = J(null), Z = D(
-      (p) => Y(p, q.card),
+    const I = { ...Se, ...c }, [y, E] = V(!1), [x, k] = V(!1), [D, j] = V(!1), [S, O] = V(!0), [v, M] = V(!1), [z, H] = V(!1), F = B(null), ee = B(null), Z = w(
+      (g) => q(g, Q.card),
       []
-    ), W = D(
-      (p) => {
-        z(!1), O(!1), u?.(p);
+    ), Y = w(
+      (g) => {
+        O(!1), M(!1), f?.(g);
       },
-      [u]
-    ), F = D(
-      (p) => {
-        z(!1), i && !_ ? (X(!0), O(!1)) : O(!0), x?.(p);
+      [f]
+    ), W = w(
+      (g) => {
+        O(!1), i && !z ? (H(!0), M(!1)) : M(!0), p?.(g);
       },
-      [x, i, _]
-    ), G = D(() => {
-      a && !C && (w(!0), k(!0), c?.(), setTimeout(() => {
-        w(!1);
-      }, j.openDuration));
-    }, [a, C, c, j.openDuration]), M = D(() => {
-      E(!0), N?.(), setTimeout(() => {
-        k(!1), E(!1);
-      }, j.closeDuration);
-    }, [N, j.closeDuration]), B = D(
-      (p) => {
-        (p.target === L.current || p.target === p.currentTarget) && M();
+      [p, i, z]
+    ), K = w(() => {
+      o && !v && (j(!0), E(!0), l?.(), setTimeout(() => {
+        j(!1);
+      }, I.openDuration));
+    }, [o, v, l, I.openDuration]), $ = w(() => {
+      k(!0), N?.(), setTimeout(() => {
+        E(!1), k(!1);
+      }, I.closeDuration);
+    }, [N, I.closeDuration]), X = w(
+      (g) => {
+        (g.target === F.current || g.target === g.currentTarget) && $();
       },
-      [M]
-    ), r = D(
-      (p) => {
-        p.key === "Escape" && M();
+      [$]
+    ), t = w(
+      (g) => {
+        g.key === "Escape" && $();
       },
-      [M]
+      [$]
     );
-    se(() => {
+    J(() => {
       if (y) {
-        document.addEventListener("keydown", r);
-        const p = document.body.style.overflow, R = document.documentElement.style.scrollbarGutter, S = document.body.style.paddingRight, $ = window.innerWidth - document.documentElement.clientWidth;
-        return document.body.style.overflow = "hidden", document.body.style.paddingRight = `${$}px`, document.documentElement.style.scrollbarGutter = "auto", () => {
-          document.removeEventListener("keydown", r), document.body.style.overflow = p, document.body.style.paddingRight = S, document.documentElement.style.scrollbarGutter = R;
+        document.addEventListener("keydown", t);
+        const g = document.body.style.overflow, P = document.documentElement.style.scrollbarGutter, _ = document.body.style.paddingRight, A = window.innerWidth - document.documentElement.clientWidth;
+        return document.body.style.overflow = "hidden", document.body.style.paddingRight = `${A}px`, document.documentElement.style.scrollbarGutter = "auto", () => {
+          document.removeEventListener("keydown", t), document.body.style.overflow = g, document.body.style.paddingRight = _, document.documentElement.style.scrollbarGutter = P;
         };
       }
-    }, [y, r]);
-    const n = ae(
+    }, [y, t]);
+    const n = oe(
       () => [
         "relative",
         "rounded-lg",
@@ -744,37 +774,37 @@ const Y = (s, t) => {
         "flex",
         "justify-center",
         "content-center",
-        a && !C ? "cursor-pointer hover:scale-105 hover:border-accent hover:shadow-lg-accent focus:outline-none focus:ring-4 focus:ring-accent/50" : "",
+        o && !v ? "cursor-pointer hover:scale-105 hover:border-accent hover:shadow-lg-accent focus:outline-none focus:ring-4 focus:ring-accent/50" : "",
         Z(m),
-        l
+        u
       ].filter(Boolean).join(" "),
-      [a, C, Z, m, l]
-    ), b = ae(
+      [o, v, Z, m, u]
+    ), a = oe(
       () => ({
-        role: a ? "button" : "img",
-        tabIndex: a && !C ? 0 : -1,
-        "aria-label": a ? `${t}. Click to enlarge` : t,
-        "aria-expanded": a ? y : void 0,
-        onKeyDown: a && !C ? (p) => {
-          (p.key === "Enter" || p.key === " ") && (p.preventDefault(), G());
+        role: o ? "button" : "img",
+        tabIndex: o && !v ? 0 : -1,
+        "aria-label": o ? `${s}. Click to enlarge` : s,
+        "aria-expanded": o ? y : void 0,
+        onKeyDown: o && !v ? (g) => {
+          (g.key === "Enter" || g.key === " ") && (g.preventDefault(), K());
         } : void 0
       }),
-      [a, C, t, y, G]
-    ), v = ae(
+      [o, v, s, y, K]
+    ), C = oe(
       () => /* @__PURE__ */ e.jsxDEV(
         "div",
         {
           className: n,
-          onClick: G,
-          ...b,
+          onClick: K,
+          ...a,
           children: [
-            I && /* @__PURE__ */ e.jsxDEV(
+            S && /* @__PURE__ */ e.jsxDEV(
               "div",
               {
                 className: "absolute m-0 inset-0 flex items-center justify-center bg-surface border-2 border-accent/20",
                 role: "status",
                 "aria-label": "Loading image",
-                children: f || /* @__PURE__ */ e.jsxDEV("div", { className: "animate-pulse bg-gradient-to-r from-accent/20 to-secondary/20 w-full h-full flex items-center justify-center", children: /* @__PURE__ */ e.jsxDEV("div", { className: "text-muted text-sm", children: "Loading..." }, void 0, !1, {
+                children: d || /* @__PURE__ */ e.jsxDEV("div", { className: "animate-pulse bg-gradient-to-r from-accent/20 to-secondary/20 w-full h-full flex items-center justify-center", children: /* @__PURE__ */ e.jsxDEV("div", { className: "text-muted text-sm", children: "Loading..." }, void 0, !1, {
                   fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Image.tsx",
                   lineNumber: 305,
                   columnNumber: 19
@@ -793,7 +823,7 @@ const Y = (s, t) => {
               },
               void 0
             ),
-            C ? /* @__PURE__ */ e.jsxDEV(
+            v ? /* @__PURE__ */ e.jsxDEV(
               "div",
               {
                 className: "flex items-center justify-center bg-surface border-2 border-error/30 text-error p-4 rounded-lg min-h-[100px]",
@@ -824,19 +854,19 @@ const Y = (s, t) => {
                 columnNumber: 13
               },
               void 0
-            ) : _ ? /* @__PURE__ */ e.jsxDEV(
+            ) : z ? /* @__PURE__ */ e.jsxDEV(
               "img",
               {
-                ref: K,
+                ref: ee,
                 src: i,
-                alt: `${t} (fallback)`,
+                alt: `${s} (fallback)`,
                 className: "w-full h-full m-0 object-cover transition-opacity duration-300",
-                style: { opacity: I ? 0 : 1 },
-                onLoad: W,
+                style: { opacity: S ? 0 : 1 },
+                onLoad: Y,
                 onError: () => {
-                  O(!0), X(!1);
+                  M(!0), H(!1);
                 },
-                loading: d ? "eager" : "lazy",
+                loading: b ? "eager" : "lazy",
                 decoding: "async",
                 ...U
               },
@@ -851,14 +881,14 @@ const Y = (s, t) => {
             ) : /* @__PURE__ */ e.jsxDEV(
               "img",
               {
-                ref: K,
-                src: s,
-                alt: t,
+                ref: ee,
+                src: r,
+                alt: s,
                 className: "w-full h-full m-0 object-cover transition-opacity duration-300",
-                style: { opacity: I ? 0 : 1 },
-                onLoad: W,
-                onError: F,
-                loading: d ? "eager" : "lazy",
+                style: { opacity: S ? 0 : 1 },
+                onLoad: Y,
+                onError: W,
+                loading: b ? "eager" : "lazy",
                 decoding: "async",
                 ...U
               },
@@ -871,7 +901,7 @@ const Y = (s, t) => {
               },
               void 0
             ),
-            a && !I && !C && /* @__PURE__ */ e.jsxDEV(
+            o && !S && !v && /* @__PURE__ */ e.jsxDEV(
               "div",
               {
                 className: "absolute inset-0 bg-black/0 hover:bg-black/20 transition-all duration-300 flex items-center justify-center opacity-0 hover:opacity-100",
@@ -904,30 +934,30 @@ const Y = (s, t) => {
       ),
       [
         n,
-        G,
-        b,
-        I,
-        f,
-        C,
-        _,
-        i,
-        t,
-        W,
+        K,
+        a,
+        S,
         d,
-        U,
+        v,
+        z,
+        i,
         s,
-        F,
-        a
+        Y,
+        b,
+        U,
+        r,
+        W,
+        o
       ]
     );
     return /* @__PURE__ */ e.jsxDEV(e.Fragment, { children: [
-      v,
-      y && ye(
+      C,
+      y && xe(
         /* @__PURE__ */ e.jsxDEV(
           "div",
           {
-            ref: L,
-            className: `fixed z-50 flex items-center justify-center p-4 transition-all ease-out ${h} ${g ? "bg-black/0 backdrop-blur-none opacity-0 duration-300" : A ? "bg-black/80 backdrop-blur-sm opacity-100 duration-500" : "bg-black/80 backdrop-blur-sm opacity-100 duration-300"}`,
+            ref: F,
+            className: `fixed z-50 flex items-center justify-center p-4 transition-all ease-out ${h} ${x ? "bg-black/0 backdrop-blur-none opacity-0 duration-300" : D ? "bg-black/80 backdrop-blur-sm opacity-100 duration-500" : "bg-black/80 backdrop-blur-sm opacity-100 duration-300"}`,
             style: {
               top: 0,
               left: 0,
@@ -935,15 +965,15 @@ const Y = (s, t) => {
               height: "100vh",
               maxWidth: "none"
             },
-            onClick: B,
+            onClick: X,
             role: "dialog",
             "aria-modal": "true",
-            "aria-label": `Preview: ${t}`,
+            "aria-label": `Preview: ${s}`,
             children: [
-              j.cyberpunkEffects && /* @__PURE__ */ e.jsxDEV(
+              I.cyberpunkEffects && /* @__PURE__ */ e.jsxDEV(
                 "div",
                 {
-                  className: `absolute transition-opacity duration-300 ${g ? "opacity-0" : "opacity-20"}`,
+                  className: `absolute transition-opacity duration-300 ${x ? "opacity-0" : "opacity-20"}`,
                   style: {
                     top: 0,
                     left: 0,
@@ -990,13 +1020,13 @@ const Y = (s, t) => {
                 "div",
                 {
                   className: "relative w-full h-full flex items-center justify-center",
-                  onClick: B,
+                  onClick: X,
                   children: [
                     /* @__PURE__ */ e.jsxDEV(
                       "button",
                       {
-                        onClick: M,
-                        className: `absolute top-4 right-4 text-white hover:text-accent/80 transition-all duration-300 font-bold z-20 rounded-full w-10 h-10 flex items-center justify-center cursor-pointer transform ${g ? "bg-black/0 scale-50 rotate-180 opacity-0" : A ? "bg-black/50 scale-0 rotate-0 opacity-0 duration-500" : "bg-black/50 hover:bg-accent/20 scale-100 rotate-0 opacity-100 hover:scale-110"}`,
+                        onClick: $,
+                        className: `absolute top-4 right-4 text-white hover:text-accent/80 transition-all duration-300 font-bold z-20 rounded-full w-10 h-10 flex items-center justify-center cursor-pointer transform ${x ? "bg-black/0 scale-50 rotate-180 opacity-0" : D ? "bg-black/50 scale-0 rotate-0 opacity-0 duration-500" : "bg-black/50 hover:bg-accent/20 scale-100 rotate-0 opacity-100 hover:scale-110"}`,
                         style: { lineHeight: "1" },
                         children: /* @__PURE__ */ e.jsxDEV(
                           "svg",
@@ -1068,13 +1098,13 @@ const Y = (s, t) => {
                     /* @__PURE__ */ e.jsxDEV(
                       "div",
                       {
-                        className: `relative max-w-full max-h-full flex items-center justify-center transition-all ease-out ${g ? "scale-75 opacity-0 rotate-1 duration-300" : A ? "scale-95 opacity-0 rotate-0 duration-500" : "scale-100 opacity-100 rotate-0 duration-300"}`,
-                        onClick: (p) => p.stopPropagation(),
+                        className: `relative max-w-full max-h-full flex items-center justify-center transition-all ease-out ${x ? "scale-75 opacity-0 rotate-1 duration-300" : D ? "scale-95 opacity-0 rotate-0 duration-500" : "scale-100 opacity-100 rotate-0 duration-300"}`,
+                        onClick: (g) => g.stopPropagation(),
                         children: [
-                          j.cyberpunkEffects && /* @__PURE__ */ e.jsxDEV(
+                          I.cyberpunkEffects && /* @__PURE__ */ e.jsxDEV(
                             "div",
                             {
-                              className: `absolute inset-0 rounded-lg border-2 transition-all duration-300 ${g ? "border-transparent shadow-none" : "border-accent shadow-lg-accent animate-pulse"}`,
+                              className: `absolute inset-0 rounded-lg border-2 transition-all duration-300 ${x ? "border-transparent shadow-none" : "border-accent shadow-lg-accent animate-pulse"}`,
                               "aria-hidden": "true"
                             },
                             void 0,
@@ -1086,10 +1116,10 @@ const Y = (s, t) => {
                             },
                             void 0
                           ),
-                          j.cyberpunkEffects && /* @__PURE__ */ e.jsxDEV(
+                          I.cyberpunkEffects && /* @__PURE__ */ e.jsxDEV(
                             "div",
                             {
-                              className: `absolute inset-0 overflow-hidden rounded-lg transition-opacity duration-300 z-10 ${g ? "opacity-0" : "opacity-100"}`,
+                              className: `absolute inset-0 overflow-hidden rounded-lg transition-opacity duration-300 z-10 ${x ? "opacity-0" : "opacity-100"}`,
                               "aria-hidden": "true",
                               children: /* @__PURE__ */ e.jsxDEV("div", { className: "absolute top-0 left-0 w-full h-px animate-scan opacity-20", children: [
                                 /* @__PURE__ */ e.jsxDEV("div", { className: "w-full h-full bg-gradient-to-r from-transparent via-accent to-transparent shadow-lg-accent opacity-80" }, void 0, !1, {
@@ -1120,9 +1150,9 @@ const Y = (s, t) => {
                           /* @__PURE__ */ e.jsxDEV(
                             "img",
                             {
-                              src: _ ? i : s,
-                              alt: _ ? `${t} (fallback)` : t,
-                              className: `max-w-[95vw] max-h-[95vh] w-auto h-auto object-contain rounded-lg transition-all duration-300 ease-out ${g ? "filter blur-sm brightness-50" : "filter blur-0 brightness-100"}`,
+                              src: z ? i : r,
+                              alt: z ? `${s} (fallback)` : s,
+                              className: `max-w-[95vw] max-h-[95vh] w-auto h-auto object-contain rounded-lg transition-all duration-300 ease-out ${x ? "filter blur-sm brightness-50" : "filter blur-0 brightness-100"}`,
                               style: {
                                 maxWidth: "95vw",
                                 maxHeight: "95vh",
@@ -1142,10 +1172,10 @@ const Y = (s, t) => {
                           /* @__PURE__ */ e.jsxDEV(
                             "div",
                             {
-                              className: `absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-3 rounded-b-lg transition-all duration-300 ${g ? "translate-y-4 opacity-0" : "translate-y-0 opacity-100"}`,
+                              className: `absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-3 rounded-b-lg transition-all duration-300 ${x ? "translate-y-4 opacity-0" : "translate-y-0 opacity-100"}`,
                               children: /* @__PURE__ */ e.jsxDEV("p", { className: "text-white text-sm font-medium truncate relative", children: [
-                                _ ? `${t} (fallback)` : t,
-                                j.cyberpunkEffects && /* @__PURE__ */ e.jsxDEV("span", { className: "absolute inset-0 text-accent opacity-20 animate-pulse", children: _ ? `${t} (fallback)` : t }, void 0, !1, {
+                                z ? `${s} (fallback)` : s,
+                                I.cyberpunkEffects && /* @__PURE__ */ e.jsxDEV("span", { className: "absolute inset-0 text-accent opacity-20 animate-pulse", children: z ? `${s} (fallback)` : s }, void 0, !1, {
                                   fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Image.tsx",
                                   lineNumber: 552,
                                   columnNumber: 23
@@ -1165,11 +1195,11 @@ const Y = (s, t) => {
                             },
                             void 0
                           ),
-                          j.cyberpunkEffects && /* @__PURE__ */ e.jsxDEV(e.Fragment, { children: [
+                          I.cyberpunkEffects && /* @__PURE__ */ e.jsxDEV(e.Fragment, { children: [
                             /* @__PURE__ */ e.jsxDEV(
                               "div",
                               {
-                                className: `absolute top-2 left-2 w-4 h-4 border-l-2 border-t-2 border-accent transition-all duration-300 ${g ? "opacity-0 scale-0" : "opacity-60 scale-100"}`,
+                                className: `absolute top-2 left-2 w-4 h-4 border-l-2 border-t-2 border-accent transition-all duration-300 ${x ? "opacity-0 scale-0" : "opacity-60 scale-100"}`,
                                 "aria-hidden": "true"
                               },
                               void 0,
@@ -1184,7 +1214,7 @@ const Y = (s, t) => {
                             /* @__PURE__ */ e.jsxDEV(
                               "div",
                               {
-                                className: `absolute top-2 right-2 w-4 h-4 border-r-2 border-t-2 border-accent transition-all duration-300 ${g ? "opacity-0 scale-0" : "opacity-60 scale-100"}`,
+                                className: `absolute top-2 right-2 w-4 h-4 border-r-2 border-t-2 border-accent transition-all duration-300 ${x ? "opacity-0 scale-0" : "opacity-60 scale-100"}`,
                                 "aria-hidden": "true"
                               },
                               void 0,
@@ -1199,7 +1229,7 @@ const Y = (s, t) => {
                             /* @__PURE__ */ e.jsxDEV(
                               "div",
                               {
-                                className: `absolute bottom-2 left-2 w-4 h-4 border-l-2 border-b-2 border-accent transition-all duration-300 ${g ? "opacity-0 scale-0" : "opacity-60 scale-100"}`,
+                                className: `absolute bottom-2 left-2 w-4 h-4 border-l-2 border-b-2 border-accent transition-all duration-300 ${x ? "opacity-0 scale-0" : "opacity-60 scale-100"}`,
                                 "aria-hidden": "true"
                               },
                               void 0,
@@ -1214,7 +1244,7 @@ const Y = (s, t) => {
                             /* @__PURE__ */ e.jsxDEV(
                               "div",
                               {
-                                className: `absolute bottom-2 right-2 w-4 h-4 border-r-2 border-b-2 border-accent transition-all duration-300 ${g ? "opacity-0 scale-0" : "opacity-60 scale-100"}`,
+                                className: `absolute bottom-2 right-2 w-4 h-4 border-r-2 border-b-2 border-accent transition-all duration-300 ${x ? "opacity-0 scale-0" : "opacity-60 scale-100"}`,
                                 "aria-hidden": "true"
                               },
                               void 0,
@@ -1273,105 +1303,105 @@ const Y = (s, t) => {
     }, void 0);
   }
 );
-ne.displayName = "CyberUI.Image";
-const Pe = ({
-  images: s,
-  currentIndex: t,
+ae.displayName = "CyberUI.Image";
+const Re = ({
+  images: r,
+  currentIndex: s,
   onChange: m,
-  size: a = "md",
+  size: o = "md",
   autoPlay: i = !0,
-  interval: f = 3e3,
-  infinite: l = !0,
-  transition: o = "slide",
-  objectFit: d = "cover",
+  interval: d = 3e3,
+  infinite: u = !0,
+  transition: c = "slide",
+  objectFit: b = "cover",
   showArrows: h = !0,
-  showIndicators: c = !0,
+  showIndicators: l = !0,
   className: N = "",
-  disableImagePreview: u = !1,
-  glitchRate: x = 1,
+  disableImagePreview: f = !1,
+  glitchRate: p = 1,
   onBeforeChange: U,
-  onAfterChange: j
+  onAfterChange: I
 }) => {
-  const [y, k] = T(!1), [g, E] = T(i), [A, w] = T(!0), I = ae(
-    () => Y(a, q.carousel),
-    [a]
-  ), z = "w-full h-full", C = D(
-    (r) => {
-      if (r === t || y) return;
-      const n = o === "signal-glitch" && (typeof x == "boolean" ? x : Math.random() < x);
-      w(n), k(!0), U?.(t, r), setTimeout(() => {
-        m(r), k(!1), j?.(r);
-      }, o === "slide" ? 0 : o === "signal-glitch" && n ? 600 : 250);
+  const [y, E] = V(!1), [x, k] = V(i), [D, j] = V(!0), S = oe(
+    () => q(o, Q.carousel),
+    [o]
+  ), O = "w-full h-full", v = w(
+    (t) => {
+      if (t === s || y) return;
+      const n = c === "signal-glitch" && (typeof p == "boolean" ? p : Math.random() < p);
+      j(n), E(!0), U?.(s, t), setTimeout(() => {
+        m(t), E(!1), I?.(t);
+      }, c === "slide" ? 0 : c === "signal-glitch" && n ? 600 : 250);
     },
     [
-      t,
+      s,
       y,
       m,
       U,
-      j,
-      o,
-      x
+      I,
+      c,
+      p
     ]
   );
-  se(() => {
-    if (!g || s.length <= 1) return;
-    const r = setInterval(() => {
-      const n = l ? (t + 1) % s.length : Math.min(t + 1, s.length - 1);
-      if (!l && n === s.length - 1) {
-        E(!1);
+  J(() => {
+    if (!x || r.length <= 1) return;
+    const t = setInterval(() => {
+      const n = u ? (s + 1) % r.length : Math.min(s + 1, r.length - 1);
+      if (!u && n === r.length - 1) {
+        k(!1);
         return;
       }
-      C(n);
-    }, f);
-    return () => clearInterval(r);
+      v(n);
+    }, d);
+    return () => clearInterval(t);
   }, [
-    g,
-    t,
-    s.length,
-    l,
-    f,
-    C
+    x,
+    s,
+    r.length,
+    u,
+    d,
+    v
   ]);
-  const O = D(() => {
-    if (s.length <= 1) return;
-    const r = l ? (t - 1 + s.length) % s.length : Math.max(t - 1, 0);
-    E(!1), C(r);
-  }, [t, s.length, l, C]), _ = D(() => {
-    if (s.length <= 1) return;
-    const r = l ? (t + 1) % s.length : Math.min(t + 1, s.length - 1);
-    E(!1), C(r);
-  }, [t, s.length, l, C]), X = D(
-    (r) => {
-      E(!1), C(r);
+  const M = w(() => {
+    if (r.length <= 1) return;
+    const t = u ? (s - 1 + r.length) % r.length : Math.max(s - 1, 0);
+    k(!1), v(t);
+  }, [s, r.length, u, v]), z = w(() => {
+    if (r.length <= 1) return;
+    const t = u ? (s + 1) % r.length : Math.min(s + 1, r.length - 1);
+    k(!1), v(t);
+  }, [s, r.length, u, v]), H = w(
+    (t) => {
+      k(!1), v(t);
     },
-    [C]
+    [v]
   );
-  se(() => {
-    const r = (n) => {
-      n.key === "ArrowLeft" && O(), n.key === "ArrowRight" && _();
+  J(() => {
+    const t = (n) => {
+      n.key === "ArrowLeft" && M(), n.key === "ArrowRight" && z();
     };
-    return window.addEventListener("keydown", r), () => window.removeEventListener("keydown", r);
-  }, [O, _]);
-  const L = () => /* @__PURE__ */ e.jsxDEV(
+    return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
+  }, [M, z]);
+  const F = () => /* @__PURE__ */ e.jsxDEV(
     "div",
     {
       className: "flex h-full transition-transform duration-500 ease-in-out",
       style: {
-        transform: `translateX(-${t * 100}%)`,
+        transform: `translateX(-${s * 100}%)`,
         willChange: "transform"
       },
-      children: s.map((r, n) => /* @__PURE__ */ e.jsxDEV("div", { className: "w-full h-full flex-shrink-0", children: /* @__PURE__ */ e.jsxDEV(
-        ne,
+      children: r.map((t, n) => /* @__PURE__ */ e.jsxDEV("div", { className: "w-full h-full flex-shrink-0", children: /* @__PURE__ */ e.jsxDEV(
+        ae,
         {
-          src: r.src,
-          alt: r.alt,
-          fallback: r.fallbackSrc,
-          className: z,
+          src: t.src,
+          alt: t.alt,
+          fallback: t.fallbackSrc,
+          className: O,
           size: "lg",
-          preview: !u,
+          preview: !f,
           loading: n <= 1 ? "eager" : "lazy",
-          onPreviewOpen: () => E(!1),
-          onPreviewClose: () => E(i)
+          onPreviewOpen: () => k(!1),
+          onPreviewClose: () => k(i)
         },
         void 0,
         !1,
@@ -1395,40 +1425,40 @@ const Pe = ({
       columnNumber: 5
     },
     void 0
-  ), K = () => /* @__PURE__ */ e.jsxDEV(e.Fragment, { children: s.map((r, n) => {
-    const b = n === t, v = o === "fade" ? {
-      opacity: b ? 1 : 0,
+  ), ee = () => /* @__PURE__ */ e.jsxDEV(e.Fragment, { children: r.map((t, n) => {
+    const a = n === s, C = c === "fade" ? {
+      opacity: a ? 1 : 0,
       transition: "opacity 500ms ease-in-out",
       willChange: "opacity"
-    } : o === "matrix" ? {
-      opacity: b ? 1 : 0,
-      transform: b ? "scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0) skew(0deg) perspective(1000px)" : y ? "scale(0.6) rotateX(35deg) rotateY(15deg) rotateZ(-3deg) translateZ(-80px) skew(5deg, 2deg) perspective(1000px)" : "scale(0.92) rotateX(8deg) rotateY(2deg) translateZ(-20px) skew(1deg) perspective(1000px)",
-      filter: b ? "brightness(1) contrast(1) hue-rotate(0deg) saturate(1) drop-shadow(0 0 10px rgba(0, 255, 136, 0.3))" : y ? "brightness(0.1) contrast(4) hue-rotate(270deg) saturate(3) blur(2px) drop-shadow(0 0 20px rgba(255, 0, 93, 0.8)) drop-shadow(0 0 30px rgba(0, 255, 249, 0.6))" : "brightness(0.7) contrast(1.5) hue-rotate(120deg) saturate(1.4) drop-shadow(0 0 8px rgba(0, 255, 136, 0.4))",
+    } : c === "matrix" ? {
+      opacity: a ? 1 : 0,
+      transform: a ? "scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0) skew(0deg) perspective(1000px)" : y ? "scale(0.6) rotateX(35deg) rotateY(15deg) rotateZ(-3deg) translateZ(-80px) skew(5deg, 2deg) perspective(1000px)" : "scale(0.92) rotateX(8deg) rotateY(2deg) translateZ(-20px) skew(1deg) perspective(1000px)",
+      filter: a ? "brightness(1) contrast(1) hue-rotate(0deg) saturate(1) drop-shadow(0 0 10px rgba(0, 255, 136, 0.3))" : y ? "brightness(0.1) contrast(4) hue-rotate(270deg) saturate(3) blur(2px) drop-shadow(0 0 20px rgba(255, 0, 93, 0.8)) drop-shadow(0 0 30px rgba(0, 255, 249, 0.6))" : "brightness(0.7) contrast(1.5) hue-rotate(120deg) saturate(1.4) drop-shadow(0 0 8px rgba(0, 255, 136, 0.4))",
       transition: "all 1200ms cubic-bezier(0.175, 0.885, 0.32, 1.275)",
       willChange: "transform, opacity, filter",
-      boxShadow: b ? "0 0 30px rgba(0, 255, 136, 0.5), inset 0 0 30px rgba(0, 255, 136, 0.15), 0 0 60px rgba(0, 255, 136, 0.2)" : y ? "0 0 50px rgba(255, 0, 93, 1), 0 0 100px rgba(0, 255, 249, 0.8), 0 0 150px rgba(255, 251, 0, 0.6), inset 0 0 50px rgba(255, 0, 93, 0.3), inset 0 0 80px rgba(0, 255, 249, 0.2), 0 0 0 3px rgba(255, 0, 93, 0.8), 0 0 0 6px rgba(0, 255, 249, 0.6), 0 0 200px rgba(255, 251, 0, 0.3)" : "0 0 20px rgba(0, 255, 136, 0.4), inset 0 0 15px rgba(0, 255, 136, 0.1), 0 0 40px rgba(0, 255, 136, 0.2)"
+      boxShadow: a ? "0 0 30px rgba(0, 255, 136, 0.5), inset 0 0 30px rgba(0, 255, 136, 0.15), 0 0 60px rgba(0, 255, 136, 0.2)" : y ? "0 0 50px rgba(255, 0, 93, 1), 0 0 100px rgba(0, 255, 249, 0.8), 0 0 150px rgba(255, 251, 0, 0.6), inset 0 0 50px rgba(255, 0, 93, 0.3), inset 0 0 80px rgba(0, 255, 249, 0.2), 0 0 0 3px rgba(255, 0, 93, 0.8), 0 0 0 6px rgba(0, 255, 249, 0.6), 0 0 200px rgba(255, 251, 0, 0.3)" : "0 0 20px rgba(0, 255, 136, 0.4), inset 0 0 15px rgba(0, 255, 136, 0.1), 0 0 40px rgba(0, 255, 136, 0.2)"
     } : {};
     return /* @__PURE__ */ e.jsxDEV(
       "div",
       {
         className: "absolute inset-0 w-full h-full",
         style: {
-          ...v,
-          pointerEvents: b ? "auto" : "none"
+          ...C,
+          pointerEvents: a ? "auto" : "none"
         },
         children: [
           /* @__PURE__ */ e.jsxDEV(
-            ne,
+            ae,
             {
-              src: r.src,
-              alt: r.alt,
-              fallback: r.fallbackSrc,
-              className: z,
+              src: t.src,
+              alt: t.alt,
+              fallback: t.fallbackSrc,
+              className: O,
               size: "lg",
-              preview: !u,
+              preview: !f,
               loading: n <= 1 ? "eager" : "lazy",
-              onPreviewOpen: () => E(!1),
-              onPreviewClose: () => E(i)
+              onPreviewOpen: () => k(!1),
+              onPreviewClose: () => k(i)
             },
             void 0,
             !1,
@@ -1439,7 +1469,7 @@ const Pe = ({
             },
             void 0
           ),
-          o === "matrix" && W(b, y)
+          c === "matrix" && Y(a, y)
         ]
       },
       n,
@@ -1455,38 +1485,38 @@ const Pe = ({
     fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Carousel.tsx",
     lineNumber: 266,
     columnNumber: 5
-  }, void 0), Z = () => /* @__PURE__ */ e.jsxDEV(e.Fragment, { children: s.map((r, n) => {
-    const b = n === t, v = n === (t - 1 + s.length) % s.length, p = y && o === "signal-glitch" && A ? {
-      opacity: b ? 1 : v ? 0.8 : 0,
-      animation: b ? "signal-image-flicker-in 1s ease-out forwards" : v ? "signal-image-flicker-out 1s ease-out forwards" : "none",
+  }, void 0), Z = () => /* @__PURE__ */ e.jsxDEV(e.Fragment, { children: r.map((t, n) => {
+    const a = n === s, C = n === (s - 1 + r.length) % r.length, g = y && c === "signal-glitch" && D ? {
+      opacity: a ? 1 : C ? 0.8 : 0,
+      animation: a ? "signal-image-flicker-in 1s ease-out forwards" : C ? "signal-image-flicker-out 1s ease-out forwards" : "none",
       willChange: "opacity",
-      pointerEvents: y && !b ? "none" : "auto",
+      pointerEvents: y && !a ? "none" : "auto",
       transform: y ? "translateZ(0)" : "none"
       // Reduce jumping with hardware acceleration
     } : {
-      opacity: b ? 1 : 0,
+      opacity: a ? 1 : 0,
       transition: "opacity 250ms ease-in-out",
       willChange: "opacity",
-      pointerEvents: b ? "auto" : "none"
+      pointerEvents: a ? "auto" : "none"
     };
     return /* @__PURE__ */ e.jsxDEV(
       "div",
       {
         className: "absolute inset-0 w-full h-full",
-        style: p,
+        style: g,
         children: [
           /* @__PURE__ */ e.jsxDEV(
-            ne,
+            ae,
             {
-              src: r.src,
-              alt: r.alt,
-              fallback: r.fallbackSrc,
-              className: z,
+              src: t.src,
+              alt: t.alt,
+              fallback: t.fallbackSrc,
+              className: O,
               size: "lg",
-              preview: !u && !(y && o === "signal-glitch" && A),
+              preview: !f && !(y && c === "signal-glitch" && D),
               loading: n <= 1 ? "eager" : "lazy",
-              onPreviewOpen: () => E(!1),
-              onPreviewClose: () => E(i)
+              onPreviewOpen: () => k(!1),
+              onPreviewClose: () => k(i)
             },
             void 0,
             !1,
@@ -1497,7 +1527,7 @@ const Pe = ({
             },
             void 0
           ),
-          o === "signal-glitch" && y && A && F(b)
+          c === "signal-glitch" && y && D && W(a)
         ]
       },
       n,
@@ -1513,7 +1543,7 @@ const Pe = ({
     fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Carousel.tsx",
     lineNumber: 336,
     columnNumber: 5
-  }, void 0), W = (r, n) => /* @__PURE__ */ e.jsxDEV(e.Fragment, { children: n && /* @__PURE__ */ e.jsxDEV("div", { className: "absolute inset-0 overflow-hidden pointer-events-none", children: r ? (
+  }, void 0), Y = (t, n) => /* @__PURE__ */ e.jsxDEV(e.Fragment, { children: n && /* @__PURE__ */ e.jsxDEV("div", { className: "absolute inset-0 overflow-hidden pointer-events-none", children: t ? (
     // Active image gets subtle enhancement effects
     /* @__PURE__ */ e.jsxDEV("div", { className: "w-full h-full bg-gradient-to-b from-primary/5 to-transparent opacity-30" }, void 0, !1, {
       fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Carousel.tsx",
@@ -1535,11 +1565,11 @@ const Pe = ({
     fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Carousel.tsx",
     lineNumber: 411,
     columnNumber: 5
-  }, void 0), F = (r) => /* @__PURE__ */ e.jsxDEV(e.Fragment, { children: [
+  }, void 0), W = (t) => /* @__PURE__ */ e.jsxDEV(e.Fragment, { children: [
     /* @__PURE__ */ e.jsxDEV(
       "div",
       {
-        className: `absolute inset-0 pointer-events-none z-5 ${r ? "opacity-30" : "opacity-15"}`,
+        className: `absolute inset-0 pointer-events-none z-5 ${t ? "opacity-30" : "opacity-15"}`,
         children: /* @__PURE__ */ e.jsxDEV(
           "div",
           {
@@ -1782,12 +1812,12 @@ const Pe = ({
     fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Carousel.tsx",
     lineNumber: 432,
     columnNumber: 5
-  }, void 0), G = () => h && s.length > 1 && /* @__PURE__ */ e.jsxDEV(e.Fragment, { children: [
+  }, void 0), K = () => h && r.length > 1 && /* @__PURE__ */ e.jsxDEV(e.Fragment, { children: [
     /* @__PURE__ */ e.jsxDEV(
       "button",
       {
-        onClick: O,
-        disabled: !l && t === 0 || y && o === "signal-glitch" && A,
+        onClick: M,
+        disabled: !u && s === 0 || y && c === "signal-glitch" && D,
         className: "group absolute left-2 top-1/2 -translate-y-1/2 w-16 h-16 text-primary hover:text-accent cursor-pointer disabled:cursor-not-allowed disabled:opacity-30 focus:outline-none transition-all duration-300 flex items-center justify-center hover:scale-110",
         "aria-label": "Previous image",
         children: /* @__PURE__ */ e.jsxDEV(
@@ -1955,8 +1985,8 @@ const Pe = ({
     /* @__PURE__ */ e.jsxDEV(
       "button",
       {
-        onClick: _,
-        disabled: !l && t === s.length - 1 || y && o === "signal-glitch" && A,
+        onClick: z,
+        disabled: !u && s === r.length - 1 || y && c === "signal-glitch" && D,
         className: "group absolute right-2 top-1/2 -translate-y-1/2 w-16 h-16 text-primary hover:text-accent cursor-pointer disabled:cursor-not-allowed disabled:opacity-30 focus:outline-none transition-all duration-300 flex items-center justify-center hover:scale-110",
         "aria-label": "Next image",
         children: /* @__PURE__ */ e.jsxDEV(
@@ -2050,11 +2080,11 @@ const Pe = ({
     fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Carousel.tsx",
     lineNumber: 575,
     columnNumber: 7
-  }, void 0), M = () => c && s.length > 1 && /* @__PURE__ */ e.jsxDEV("div", { className: "flex justify-center mt-4 space-x-4", children: s.map((r, n) => /* @__PURE__ */ e.jsxDEV(
+  }, void 0), $ = () => l && r.length > 1 && /* @__PURE__ */ e.jsxDEV("div", { className: "flex justify-center mt-4 space-x-4", children: r.map((t, n) => /* @__PURE__ */ e.jsxDEV(
     "button",
     {
-      onClick: () => X(n),
-      disabled: y && o === "signal-glitch" && A,
+      onClick: () => H(n),
+      disabled: y && c === "signal-glitch" && D,
       className: "group relative transition-all duration-300 hover:scale-110 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:opacity-30",
       style: {
         width: "24px",
@@ -2062,7 +2092,7 @@ const Pe = ({
       },
       "aria-label": `Go to slide ${n + 1}`,
       children: [
-        n === t && /* @__PURE__ */ e.jsxDEV(
+        n === s && /* @__PURE__ */ e.jsxDEV(
           "div",
           {
             className: "absolute inset-[-1px] border-2",
@@ -2083,7 +2113,7 @@ const Pe = ({
         /* @__PURE__ */ e.jsxDEV(
           "div",
           {
-            className: `absolute inset-0 border-2 transition-all duration-300 ${n === t ? "border-primary bg-primary/30 shadow-lg-primary animate-[rgbBorder_1.5s_linear_infinite]" : "border-accent bg-surface/50 group-hover:border-primary group-hover:bg-primary/20 group-hover:shadow-primary group-hover:animate-[rgbBorder_1.5s_linear_infinite]"}`,
+            className: `absolute inset-0 border-2 transition-all duration-300 ${n === s ? "border-primary bg-primary/30 shadow-lg-primary animate-[rgbBorder_1.5s_linear_infinite]" : "border-accent bg-surface/50 group-hover:border-primary group-hover:bg-primary/20 group-hover:shadow-primary group-hover:animate-[rgbBorder_1.5s_linear_infinite]"}`,
             style: {
               clipPath: "polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)"
             }
@@ -2097,7 +2127,7 @@ const Pe = ({
           },
           void 0
         ),
-        n === t && /* @__PURE__ */ e.jsxDEV(
+        n === s && /* @__PURE__ */ e.jsxDEV(
           "div",
           {
             className: "absolute inset-2 bg-primary/60 animate-pulse",
@@ -2115,7 +2145,7 @@ const Pe = ({
           },
           void 0
         ),
-        n === t && /* @__PURE__ */ e.jsxDEV("div", { className: "absolute inset-0 opacity-80", children: [
+        n === s && /* @__PURE__ */ e.jsxDEV("div", { className: "absolute inset-0 opacity-80", children: [
           /* @__PURE__ */ e.jsxDEV(
             "div",
             {
@@ -2172,11 +2202,11 @@ const Pe = ({
     lineNumber: 710,
     columnNumber: 7
   }, void 0);
-  if (s.length === 0)
+  if (r.length === 0)
     return /* @__PURE__ */ e.jsxDEV(
       "div",
       {
-        className: `${I} w-full bg-surface border border-accent rounded-lg flex items-center justify-center ${N}`,
+        className: `${S} w-full bg-surface border border-accent rounded-lg flex items-center justify-center ${N}`,
         children: /* @__PURE__ */ e.jsxDEV("p", { className: "text-muted", children: "No images to display" }, void 0, !1, {
           fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Carousel.tsx",
           lineNumber: 801,
@@ -2192,12 +2222,12 @@ const Pe = ({
       },
       void 0
     );
-  const B = s[t];
+  const X = r[s];
   return /* @__PURE__ */ e.jsxDEV("div", { className: `relative w-full ${N}`, children: [
     /* @__PURE__ */ e.jsxDEV(
       "div",
       {
-        className: `relative w-full overflow-hidden rounded-lg border border-accent bg-surface ${I}`,
+        className: `relative w-full overflow-hidden rounded-lg border border-accent bg-surface ${S}`,
         children: [
           /* @__PURE__ */ e.jsxDEV("div", { className: "absolute inset-0 pointer-events-none", children: [
             /* @__PURE__ */ e.jsxDEV("div", { className: "absolute top-2 left-2 w-4 h-4 border-l-2 border-t-2 border-primary opacity-60" }, void 0, !1, {
@@ -2233,11 +2263,11 @@ const Pe = ({
           /* @__PURE__ */ e.jsxDEV(
             "div",
             {
-              className: `relative w-full h-full overflow-hidden carousel-${d}`,
+              className: `relative w-full h-full overflow-hidden carousel-${b}`,
               children: [
-                o === "slide" && L(),
-                (o === "fade" || o === "matrix") && K(),
-                o === "signal-glitch" && Z()
+                c === "slide" && F(),
+                (c === "fade" || c === "matrix") && ee(),
+                c === "signal-glitch" && Z()
               ]
             },
             void 0,
@@ -2249,7 +2279,7 @@ const Pe = ({
             },
             void 0
           ),
-          B.caption && /* @__PURE__ */ e.jsxDEV("div", { className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4", children: /* @__PURE__ */ e.jsxDEV("p", { className: "text-white text-sm font-medium", children: B.caption }, void 0, !1, {
+          X.caption && /* @__PURE__ */ e.jsxDEV("div", { className: "absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4", children: /* @__PURE__ */ e.jsxDEV("p", { className: "text-white text-sm font-medium", children: X.caption }, void 0, !1, {
             fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Carousel.tsx",
             lineNumber: 839,
             columnNumber: 13
@@ -2258,7 +2288,7 @@ const Pe = ({
             lineNumber: 838,
             columnNumber: 11
           }, void 0),
-          G()
+          K()
         ]
       },
       void 0,
@@ -2270,90 +2300,90 @@ const Pe = ({
       },
       void 0
     ),
-    M()
+    $()
   ] }, void 0, !0, {
     fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Carousel.tsx",
     lineNumber: 809,
     columnNumber: 5
   }, void 0);
-}, De = ue(Pe), Ve = {
+}, $e = ue(Re), Ae = {
   openDuration: 600,
   closeDuration: 400,
   crtEffects: !0
-}, we = {
+}, Le = {
   sm: "max-w-md",
   md: "max-w-lg",
   lg: "max-w-2xl",
   xl: "max-w-4xl",
   fullscreen: "max-w-none w-full h-full"
-}, te = ue(
+}, ne = ue(
   ({
-    isOpen: s,
-    onClose: t,
+    isOpen: r,
+    onClose: s,
     title: m,
-    children: a,
+    children: o,
     footer: i,
-    onCancel: f,
-    onConfirm: l,
-    cancelText: o = "Cancel",
-    confirmText: d = "Confirm",
+    onCancel: d,
+    onConfirm: u,
+    cancelText: c = "Cancel",
+    confirmText: b = "Confirm",
     confirmLoading: h = !1,
-    showCancel: c = !0,
+    showCancel: l = !0,
     showConfirm: N = !0,
-    size: u = "md",
-    closeOnOverlayClick: x = !0,
+    size: f = "md",
+    closeOnOverlayClick: p = !0,
     closeOnEscape: U = !0,
-    animation: j,
+    animation: I,
     className: y = "",
-    overlayClassName: k = "",
-    showCloseButton: g = !0,
-    onOpen: E,
-    onCRTBootComplete: A
+    overlayClassName: E = "",
+    showCloseButton: x = !0,
+    onOpen: k,
+    onCRTBootComplete: D
   }) => {
-    const w = ae(
-      () => ({ ...Ve, ...j }),
-      [j]
-    ), [I, z] = T(!1), [C, O] = T(!0), _ = J(null), X = J(null), L = D(() => {
-      z(!0), setTimeout(() => {
-        z(!1), O(!0), t();
-      }, w.closeDuration);
-    }, [t, w.closeDuration]);
-    se(() => {
-      s && !I && (O(!0), E?.(), setTimeout(() => {
-        O(!1), A?.();
-      }, w.openDuration));
+    const j = oe(
+      () => ({ ...Ae, ...I }),
+      [I]
+    ), [S, O] = V(!1), [v, M] = V(!0), z = B(null), H = B(null), F = w(() => {
+      O(!0), setTimeout(() => {
+        O(!1), M(!0), s();
+      }, j.closeDuration);
+    }, [s, j.closeDuration]);
+    J(() => {
+      r && !S && (M(!0), k?.(), setTimeout(() => {
+        M(!1), D?.();
+      }, j.openDuration));
     }, [
-      s,
-      I,
-      E,
-      A,
-      w.openDuration
+      r,
+      S,
+      k,
+      D,
+      j.openDuration
     ]);
-    const K = D(() => {
-      f?.(), L();
-    }, [f, L]), Z = D(() => {
-      l?.(), L();
-    }, [l, L]), W = D(
-      (M) => {
-        x && (M.target === _.current || M.target === M.currentTarget) && L();
+    const ee = w(() => {
+      d?.(), F();
+    }, [d, F]), Z = w(() => {
+      u?.(), F();
+    }, [u, F]), Y = w(
+      ($) => {
+        p && ($.target === z.current || $.target === $.currentTarget) && F();
       },
-      [L, x]
-    ), F = D(
-      (M) => {
-        U && M.key === "Escape" && L();
+      [F, p]
+    ), W = w(
+      ($) => {
+        U && $.key === "Escape" && F();
       },
-      [L, U]
+      [F, U]
     );
-    se(() => {
-      if (s) {
-        document.addEventListener("keydown", F);
-        const M = document.body.style.overflow, B = window.innerWidth - document.documentElement.clientWidth;
-        return document.body.style.overflow = "hidden", document.body.style.paddingRight = `${B}px`, () => {
-          document.removeEventListener("keydown", F), document.body.style.overflow = M, document.body.style.paddingRight = "";
+    J(() => {
+      if (r) {
+        document.addEventListener("keydown", W);
+        const $ = document.body.style.overflow, X = window.innerWidth - document.documentElement.clientWidth;
+        return document.body.style.overflow = "hidden", document.body.style.paddingRight = `${X}px`, () => {
+          document.removeEventListener("keydown", W), document.body.style.overflow = $, document.body.style.paddingRight = "";
         };
       }
-    }, [s, F]);
-    const G = ae(
+    }, [r, W]);
+    const K = oe(
       () => [
         "relative",
         "bg-surface",
@@ -2366,40 +2396,40 @@ const Pe = ({
         "transform",
         "transition-all",
         "duration-300",
-        we[u],
-        w.crtEffects && C ? "animate-crt-power-on border-accent shadow-lg-accent" : w.crtEffects && I ? "animate-crt-power-off border-accent shadow-lg-accent" : I ? "scale-95 opacity-0 border-accent/20" : C ? "scale-105 opacity-90 border-accent shadow-input-accent/50" : "scale-100 opacity-100 animate-rgb-glow",
+        Le[f],
+        j.crtEffects && v ? "animate-crt-power-on border-accent shadow-lg-accent" : j.crtEffects && S ? "animate-crt-power-off border-accent shadow-lg-accent" : S ? "scale-95 opacity-0 border-accent/20" : v ? "scale-105 opacity-90 border-accent shadow-input-accent/50" : "scale-100 opacity-100 animate-rgb-glow",
         y
       ].filter(Boolean).join(" "),
-      [u, w.crtEffects, I, C, y]
+      [f, j.crtEffects, S, v, y]
     );
-    return s ? ye(
+    return r ? xe(
       /* @__PURE__ */ e.jsxDEV(
         "div",
         {
-          ref: _,
-          className: `fixed z-50 flex items-center justify-center p-4 transition-all ease-out ${k} ${I ? "bg-black/0 backdrop-blur-none opacity-0 duration-800" : C ? "bg-black/30 backdrop-blur-md opacity-100 duration-500" : "bg-black/30 backdrop-blur-sm opacity-100 duration-300"}`,
+          ref: z,
+          className: `fixed z-50 flex items-center justify-center p-4 transition-all ease-out ${E} ${S ? "bg-black/0 backdrop-blur-none opacity-0 duration-800" : v ? "bg-black/30 backdrop-blur-md opacity-100 duration-500" : "bg-black/30 backdrop-blur-sm opacity-100 duration-300"}`,
           style: {
             top: 0,
             left: 0,
             width: "100vw",
             height: "100vh"
           },
-          onClick: W,
+          onClick: Y,
           role: "dialog",
           "aria-modal": "true",
           "aria-label": m ? `Modal: ${m}` : "Modal dialog",
           children: /* @__PURE__ */ e.jsxDEV(
             "div",
             {
-              ref: X,
-              className: G,
-              onClick: (M) => M.stopPropagation(),
+              ref: H,
+              className: K,
+              onClick: ($) => $.stopPropagation(),
               children: [
-                g && /* @__PURE__ */ e.jsxDEV(
+                x && /* @__PURE__ */ e.jsxDEV(
                   "button",
                   {
-                    onClick: L,
-                    className: `absolute top-4 right-4 text-muted hover:text-accent transition-all duration-300 z-20 rounded-full w-8 h-8 flex items-center justify-center cursor-pointer transform ${I ? "scale-0 rotate-180 opacity-0" : C ? "scale-0 opacity-0" : "scale-100 opacity-100 hover:scale-110 hover:bg-accent/10"}`,
+                    onClick: F,
+                    className: `absolute top-4 right-4 text-muted hover:text-accent transition-all duration-300 z-20 rounded-full w-8 h-8 flex items-center justify-center cursor-pointer transform ${S ? "scale-0 rotate-180 opacity-0" : v ? "scale-0 opacity-0" : "scale-100 opacity-100 hover:scale-110 hover:bg-accent/10"}`,
                     "aria-label": "Close modal",
                     children: /* @__PURE__ */ e.jsxDEV(
                       "svg",
@@ -2450,7 +2480,7 @@ const Pe = ({
                 m && /* @__PURE__ */ e.jsxDEV(
                   "div",
                   {
-                    className: `px-6 py-4 border-b border-accent/20 flex-shrink-0 transition-all duration-300 ${C ? "opacity-0 translate-y-2" : "opacity-100 translate-y-0"}`,
+                    className: `px-6 py-4 border-b border-accent/20 flex-shrink-0 transition-all duration-300 ${v ? "opacity-0 translate-y-2" : "opacity-100 translate-y-0"}`,
                     children: /* @__PURE__ */ e.jsxDEV("h2", { className: "text-lg font-semibold text-primary", children: m }, void 0, !1, {
                       fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Modal.tsx",
                       lineNumber: 271,
@@ -2469,8 +2499,8 @@ const Pe = ({
                 /* @__PURE__ */ e.jsxDEV(
                   "div",
                   {
-                    className: `flex-1 overflow-auto p-6 transition-all duration-500 ${C ? "opacity-0 translate-y-4" : "opacity-100 translate-y-0"}`,
-                    children: a
+                    className: `flex-1 overflow-auto p-6 transition-all duration-500 ${v ? "opacity-0 translate-y-4" : "opacity-100 translate-y-0"}`,
+                    children: o
                   },
                   void 0,
                   !1,
@@ -2481,10 +2511,10 @@ const Pe = ({
                   },
                   void 0
                 ),
-                (i || f || l) && /* @__PURE__ */ e.jsxDEV(
+                (i || d || u) && /* @__PURE__ */ e.jsxDEV(
                   "div",
                   {
-                    className: `px-6 py-4 border-t border-accent/20 flex-shrink-0 transition-all duration-300 ${C ? "opacity-0 translate-y-2" : "opacity-100 translate-y-0"}`,
+                    className: `px-6 py-4 border-t border-accent/20 flex-shrink-0 transition-all duration-300 ${v ? "opacity-0 translate-y-2" : "opacity-100 translate-y-0"}`,
                     children: i || /* @__PURE__ */ e.jsxDEV("div", { className: "flex justify-between items-center", children: [
                       /* @__PURE__ */ e.jsxDEV("span", { className: "text-muted text-sm font-mono", children: "> ESC to abort" }, void 0, !1, {
                         fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Modal.tsx",
@@ -2492,19 +2522,19 @@ const Pe = ({
                         columnNumber: 19
                       }, void 0),
                       /* @__PURE__ */ e.jsxDEV("div", { className: "flex gap-3", children: [
-                        c && f && /* @__PURE__ */ e.jsxDEV(H, { variant: "ghost", size: "sm", onClick: K, children: o }, void 0, !1, {
+                        l && d && /* @__PURE__ */ e.jsxDEV(G, { variant: "ghost", size: "sm", onClick: ee, children: c }, void 0, !1, {
                           fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Modal.tsx",
                           lineNumber: 302,
                           columnNumber: 23
                         }, void 0),
-                        N && l && /* @__PURE__ */ e.jsxDEV(
-                          H,
+                        N && u && /* @__PURE__ */ e.jsxDEV(
+                          G,
                           {
                             variant: "primary",
                             size: "sm",
                             onClick: Z,
                             disabled: h,
-                            children: d
+                            children: b
                           },
                           void 0,
                           !1,
@@ -2560,16 +2590,16 @@ const Pe = ({
     ) : null;
   }
 );
-te.displayName = "CyberUI.Modal";
-const xe = he(void 0), Te = () => {
-  const s = je(xe);
-  if (s === void 0)
+ne.displayName = "CyberUI.Modal";
+const ge = Ie(void 0), Me = () => {
+  const r = Ce(ge);
+  if (r === void 0)
     throw new Error(
       "useCyberNotifications must be used within a CyberNotificationProvider"
     );
-  return s;
-}, Ge = () => {
-  const [s, t] = T(""), [m, a] = T(0), [i, f] = T(!1), [l, o] = T(!1), [d, h] = T(!1), [c, N] = T(!1), [u, x] = T(!1), [U, j] = T(!1), { showNotification: y } = Te(), k = [
+  return r;
+}, Qe = () => {
+  const [r, s] = V(""), [m, o] = V(0), [i, d] = V(!1), [u, c] = V(!1), [b, h] = V(!1), [l, N] = V(!1), [f, p] = V(!1), [U, I] = V(!1), { showNotification: y } = Me(), E = [
     {
       src: "image_demo_1.jpg",
       alt: "Cyberpunk cityscape with neon lights",
@@ -2585,7 +2615,7 @@ const xe = he(void 0), Te = () => {
       alt: "Cyberpunk street scene",
       caption: "Underground Market"
     }
-  ], g = () => /* @__PURE__ */ e.jsxDEV("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e.jsxDEV(
+  ], x = () => /* @__PURE__ */ e.jsxDEV("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e.jsxDEV(
     "path",
     {
       fillRule: "evenodd",
@@ -2622,16 +2652,16 @@ const xe = he(void 0), Te = () => {
       lineNumber: 55,
       columnNumber: 7
     }, void 0),
-    /* @__PURE__ */ e.jsxDEV(Q, { title: "User Input", children: /* @__PURE__ */ e.jsxDEV("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", children: [
+    /* @__PURE__ */ e.jsxDEV(se, { title: "User Input", children: /* @__PURE__ */ e.jsxDEV("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", children: [
       /* @__PURE__ */ e.jsxDEV(
-        pe,
+        ye,
         {
           variant: "primary",
           label: "Neural Interface Command",
           placeholder: "Enter command sequence...",
-          value: s,
-          onChange: (E) => t(E.target.value),
-          helperText: s.length > 0 ? `Input: ${s.length} characters` : "Awaiting neural input..."
+          value: r,
+          onChange: (k) => s(k.target.value),
+          helperText: r.length > 0 ? `Input: ${r.length} characters` : "Awaiting neural input..."
         },
         void 0,
         !1,
@@ -2643,12 +2673,12 @@ const xe = he(void 0), Te = () => {
         void 0
       ),
       /* @__PURE__ */ e.jsxDEV(
-        pe,
+        ye,
         {
           variant: "secondary",
           label: "Database Query",
           placeholder: "Search corporate database...",
-          leftIcon: /* @__PURE__ */ e.jsxDEV(g, {}, void 0, !1, {
+          leftIcon: /* @__PURE__ */ e.jsxDEV(x, {}, void 0, !1, {
             fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/tabs/InteractiveTab.tsx",
             lineNumber: 83,
             columnNumber: 23
@@ -2673,24 +2703,24 @@ const xe = he(void 0), Te = () => {
       lineNumber: 64,
       columnNumber: 7
     }, void 0),
-    /* @__PURE__ */ e.jsxDEV(Q, { title: "System Actions", children: [
+    /* @__PURE__ */ e.jsxDEV(se, { title: "System Actions", children: [
       /* @__PURE__ */ e.jsxDEV("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4", children: [
-        /* @__PURE__ */ e.jsxDEV(H, { variant: "primary", onClick: () => f(!0), children: "Execute Protocol" }, void 0, !1, {
+        /* @__PURE__ */ e.jsxDEV(G, { variant: "primary", onClick: () => d(!0), children: "Execute Protocol" }, void 0, !1, {
           fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/tabs/InteractiveTab.tsx",
           lineNumber: 91,
           columnNumber: 11
         }, void 0),
-        /* @__PURE__ */ e.jsxDEV(H, { variant: "secondary", onClick: () => o(!0), children: "Scan System" }, void 0, !1, {
+        /* @__PURE__ */ e.jsxDEV(G, { variant: "secondary", onClick: () => c(!0), children: "Scan System" }, void 0, !1, {
           fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/tabs/InteractiveTab.tsx",
           lineNumber: 95,
           columnNumber: 11
         }, void 0),
-        /* @__PURE__ */ e.jsxDEV(H, { variant: "danger", onClick: () => h(!0), children: "Emergency Stop" }, void 0, !1, {
+        /* @__PURE__ */ e.jsxDEV(G, { variant: "danger", onClick: () => h(!0), children: "Emergency Stop" }, void 0, !1, {
           fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/tabs/InteractiveTab.tsx",
           lineNumber: 99,
           columnNumber: 11
         }, void 0),
-        /* @__PURE__ */ e.jsxDEV(H, { variant: "ghost", onClick: () => N(!0), children: "Run Diagnostics" }, void 0, !1, {
+        /* @__PURE__ */ e.jsxDEV(G, { variant: "ghost", onClick: () => N(!0), children: "Run Diagnostics" }, void 0, !1, {
           fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/tabs/InteractiveTab.tsx",
           lineNumber: 103,
           columnNumber: 11
@@ -2706,22 +2736,22 @@ const xe = he(void 0), Te = () => {
         columnNumber: 9
       }, void 0),
       /* @__PURE__ */ e.jsxDEV("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4", children: [
-        /* @__PURE__ */ e.jsxDEV(H, { variant: "primary", disabled: !0, children: "System Offline" }, void 0, !1, {
+        /* @__PURE__ */ e.jsxDEV(G, { variant: "primary", disabled: !0, children: "System Offline" }, void 0, !1, {
           fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/tabs/InteractiveTab.tsx",
           lineNumber: 112,
           columnNumber: 11
         }, void 0),
-        /* @__PURE__ */ e.jsxDEV(H, { variant: "secondary", disabled: !0, children: "Access Denied" }, void 0, !1, {
+        /* @__PURE__ */ e.jsxDEV(G, { variant: "secondary", disabled: !0, children: "Access Denied" }, void 0, !1, {
           fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/tabs/InteractiveTab.tsx",
           lineNumber: 115,
           columnNumber: 11
         }, void 0),
-        /* @__PURE__ */ e.jsxDEV(H, { variant: "danger", disabled: !0, children: "Critical Error" }, void 0, !1, {
+        /* @__PURE__ */ e.jsxDEV(G, { variant: "danger", disabled: !0, children: "Critical Error" }, void 0, !1, {
           fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/tabs/InteractiveTab.tsx",
           lineNumber: 118,
           columnNumber: 11
         }, void 0),
-        /* @__PURE__ */ e.jsxDEV(H, { variant: "ghost", disabled: !0, children: "Network Down" }, void 0, !1, {
+        /* @__PURE__ */ e.jsxDEV(G, { variant: "ghost", disabled: !0, children: "Network Down" }, void 0, !1, {
           fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/tabs/InteractiveTab.tsx",
           lineNumber: 121,
           columnNumber: 11
@@ -2736,32 +2766,32 @@ const xe = he(void 0), Te = () => {
       lineNumber: 89,
       columnNumber: 7
     }, void 0),
-    /* @__PURE__ */ e.jsxDEV(Q, { title: "Visual Data Stream", children: /* @__PURE__ */ e.jsxDEV("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ e.jsxDEV(se, { title: "Visual Data Stream", children: /* @__PURE__ */ e.jsxDEV("div", { className: "space-y-4", children: [
       /* @__PURE__ */ e.jsxDEV("p", { className: "text-muted text-center", children: "Navigate through archived data streams" }, void 0, !1, {
         fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/tabs/InteractiveTab.tsx",
         lineNumber: 129,
         columnNumber: 11
       }, void 0),
       /* @__PURE__ */ e.jsxDEV(
-        De,
+        $e,
         {
-          images: k,
+          images: E,
           currentIndex: m,
-          onChange: a,
+          onChange: o,
           size: "md",
           transition: "signal-glitch",
           glitchRate: 0.3,
           autoPlay: !0,
           interval: 4e3,
-          onBeforeChange: (E, A) => y(
+          onBeforeChange: (k, D) => y(
             "warning",
             "SURVEILLANCE.SYS",
-            `Switching surveillance feed ${E} → ${A}`
+            `Switching surveillance feed ${k} → ${D}`
           ),
-          onAfterChange: (E) => y(
+          onAfterChange: (k) => y(
             "success",
             "SURVEILLANCE.SYS",
-            `Now monitoring sector ${E + 1}`
+            `Now monitoring sector ${k + 1}`
           )
         },
         void 0,
@@ -2778,7 +2808,7 @@ const xe = he(void 0), Te = () => {
           "Feed ",
           m + 1,
           " of ",
-          k.length
+          E.length
         ] }, void 0, !0, {
           fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/tabs/InteractiveTab.tsx",
           lineNumber: 157,
@@ -2803,7 +2833,7 @@ const xe = he(void 0), Te = () => {
       lineNumber: 127,
       columnNumber: 7
     }, void 0),
-    /* @__PURE__ */ e.jsxDEV(Q, { title: "Interactive Demo Card", children: /* @__PURE__ */ e.jsxDEV(Q, { variant: "accent", titleBorder: !1, children: /* @__PURE__ */ e.jsxDEV("div", { className: "text-center space-y-6", children: [
+    /* @__PURE__ */ e.jsxDEV(se, { title: "Interactive Demo Card", children: /* @__PURE__ */ e.jsxDEV(se, { variant: "accent", titleBorder: !1, children: /* @__PURE__ */ e.jsxDEV("div", { className: "text-center space-y-6", children: [
       /* @__PURE__ */ e.jsxDEV("div", { className: "space-y-2", children: [
         /* @__PURE__ */ e.jsxDEV("h4", { className: "text-xl font-semibold text-default", children: "Neural Interface Status" }, void 0, !1, {
           fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/tabs/InteractiveTab.tsx",
@@ -2821,7 +2851,7 @@ const xe = he(void 0), Te = () => {
         columnNumber: 13
       }, void 0),
       /* @__PURE__ */ e.jsxDEV("div", { className: "grid grid-cols-2 gap-4 text-sm", children: [
-        /* @__PURE__ */ e.jsxDEV(Q, { variant: "small", children: [
+        /* @__PURE__ */ e.jsxDEV(se, { variant: "small", children: [
           /* @__PURE__ */ e.jsxDEV("div", { className: "text-primary font-mono font-bold", children: "ONLINE" }, void 0, !1, {
             fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/tabs/InteractiveTab.tsx",
             lineNumber: 180,
@@ -2837,7 +2867,7 @@ const xe = he(void 0), Te = () => {
           lineNumber: 179,
           columnNumber: 15
         }, void 0),
-        /* @__PURE__ */ e.jsxDEV(Q, { variant: "small", children: [
+        /* @__PURE__ */ e.jsxDEV(se, { variant: "small", children: [
           /* @__PURE__ */ e.jsxDEV("div", { className: "text-secondary font-mono font-bold", children: "87%" }, void 0, !1, {
             fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/tabs/InteractiveTab.tsx",
             lineNumber: 184,
@@ -2860,12 +2890,12 @@ const xe = he(void 0), Te = () => {
       }, void 0),
       /* @__PURE__ */ e.jsxDEV("div", { className: "flex space-x-3", children: [
         /* @__PURE__ */ e.jsxDEV(
-          H,
+          G,
           {
             variant: "primary",
             size: "sm",
             className: "flex-1",
-            onClick: () => x(!0),
+            onClick: () => p(!0),
             children: "Sync"
           },
           void 0,
@@ -2878,12 +2908,12 @@ const xe = he(void 0), Te = () => {
           void 0
         ),
         /* @__PURE__ */ e.jsxDEV(
-          H,
+          G,
           {
             variant: "secondary",
             size: "sm",
             className: "flex-1",
-            onClick: () => j(!0),
+            onClick: () => I(!0),
             children: "Monitor"
           },
           void 0,
@@ -2914,18 +2944,18 @@ const xe = he(void 0), Te = () => {
       columnNumber: 7
     }, void 0),
     /* @__PURE__ */ e.jsxDEV(
-      te,
+      ne,
       {
         isOpen: i,
-        onClose: () => f(!1),
+        onClose: () => d(!1),
         title: "Neural Link Protocol",
-        onCancel: () => f(!1),
+        onCancel: () => d(!1),
         onConfirm: () => {
           y(
             "success",
             "NEURAL.EXE",
             "Neural link protocol executed successfully"
-          ), f(!1);
+          ), d(!1);
         },
         cancelText: "Abort",
         confirmText: "Execute",
@@ -3058,18 +3088,18 @@ const xe = he(void 0), Te = () => {
       void 0
     ),
     /* @__PURE__ */ e.jsxDEV(
-      te,
+      ne,
       {
-        isOpen: l,
-        onClose: () => o(!1),
+        isOpen: u,
+        onClose: () => c(!1),
         title: "System Diagnostic Scan",
-        onCancel: () => o(!1),
+        onCancel: () => c(!1),
         onConfirm: () => {
           y(
             "success",
             "DIAGNOSTIC.SYS",
             "Deep system scan initiated successfully"
-          ), o(!1);
+          ), c(!1);
         },
         cancelText: "Cancel",
         confirmText: "Start Scan",
@@ -3206,9 +3236,9 @@ const xe = he(void 0), Te = () => {
       void 0
     ),
     /* @__PURE__ */ e.jsxDEV(
-      te,
+      ne,
       {
-        isOpen: d,
+        isOpen: b,
         onClose: () => h(!1),
         title: "⚠️ EMERGENCY SHUTDOWN",
         onCancel: () => h(!1),
@@ -3363,9 +3393,9 @@ const xe = he(void 0), Te = () => {
       void 0
     ),
     /* @__PURE__ */ e.jsxDEV(
-      te,
+      ne,
       {
-        isOpen: c,
+        isOpen: l,
         onClose: () => N(!1),
         title: "Advanced Diagnostics",
         onCancel: () => N(!1),
@@ -3500,18 +3530,18 @@ const xe = he(void 0), Te = () => {
       void 0
     ),
     /* @__PURE__ */ e.jsxDEV(
-      te,
+      ne,
       {
-        isOpen: u,
-        onClose: () => x(!1),
+        isOpen: f,
+        onClose: () => p(!1),
         title: "Neural Synchronization",
-        onCancel: () => x(!1),
+        onCancel: () => p(!1),
         onConfirm: () => {
           y(
             "success",
             "NEURAL.SYS",
             "Neural interface synchronization completed"
-          ), x(!1);
+          ), p(!1);
         },
         cancelText: "Cancel",
         confirmText: "Synchronize",
@@ -3650,18 +3680,18 @@ const xe = he(void 0), Te = () => {
       void 0
     ),
     /* @__PURE__ */ e.jsxDEV(
-      te,
+      ne,
       {
         isOpen: U,
-        onClose: () => j(!1),
+        onClose: () => I(!1),
         title: "Real-time System Monitor",
-        onCancel: () => j(!1),
+        onCancel: () => I(!1),
         onConfirm: () => {
           y(
             "success",
             "MONITOR.SYS",
             "Real-time monitoring activated successfully"
-          ), j(!1);
+          ), I(!1);
         },
         cancelText: "Close",
         confirmText: "Enable Monitoring",
@@ -3836,7 +3866,7 @@ const xe = he(void 0), Te = () => {
     lineNumber: 54,
     columnNumber: 5
   }, void 0);
-}, ge = {
+}, ve = {
   RADIUS: 20,
   SEGMENT_COUNT: 20,
   SEGMENT_ANGLE: 360 / 20,
@@ -3844,43 +3874,43 @@ const xe = he(void 0), Te = () => {
   INNER_RADIUS: 18.5,
   OUTER_RADIUS: 23.5,
   OUTER_TICK_RADIUS: 30
-}, Se = [
+}, _e = [
   "Arasaka Corporation",
   "Militech Industries",
   "Kang Tao Systems",
   "NetWatch Division"
 ], de = ({
-  variant: s = "primary",
-  size: t = "md",
+  variant: r = "primary",
+  size: s = "md",
   children: m,
-  className: a = "",
+  className: o = "",
   leftIcon: i,
-  rightIcon: f,
-  clickable: l = !1,
-  onClick: o,
-  ...d
+  rightIcon: d,
+  clickable: u = !1,
+  onClick: c,
+  ...b
 }) => {
-  const h = (u) => Y(u, q.badge), c = (u) => ({
+  const h = (f) => q(f, Q.badge), l = (f) => ({
     primary: "text-base bg-primary shadow-lg",
     secondary: "text-base bg-secondary shadow-lg",
     accent: "text-base bg-accent shadow-lg",
     success: "text-base bg-success shadow-lg",
     error: "text-base bg-error shadow-lg",
     warning: "text-base bg-warning shadow-lg"
-  })[u], N = (u, x) => !x && !o ? "transition-shadow" : {
+  })[f], N = (f, p) => !p && !c ? "transition-shadow" : {
     primary: "hover:shadow-primary transition-shadow cursor-pointer",
     secondary: "hover:shadow-secondary transition-shadow cursor-pointer",
     accent: "hover:shadow-lg-accent transition-shadow cursor-pointer",
     success: "hover:shadow-success transition-shadow cursor-pointer",
     error: "hover:shadow-error transition-shadow cursor-pointer",
     warning: "hover:shadow-warning transition-shadow cursor-pointer"
-  }[u];
+  }[f];
   return /* @__PURE__ */ e.jsxDEV(
     "span",
     {
-      className: `inline-flex items-center ${h(t)} rounded-full font-semibold ${c(s)} ${N(s, l || !!o)} ${a}`,
-      onClick: o,
-      ...d,
+      className: `inline-flex items-center ${h(s)} rounded-full font-semibold ${l(r)} ${N(r, u || !!c)} ${o}`,
+      onClick: c,
+      ...b,
       children: [
         i,
         /* @__PURE__ */ e.jsxDEV("span", { children: m }, void 0, !1, {
@@ -3888,7 +3918,7 @@ const xe = he(void 0), Te = () => {
           lineNumber: 66,
           columnNumber: 7
         }, void 0),
-        f
+        d
       ]
     },
     void 0,
@@ -3900,38 +3930,38 @@ const xe = he(void 0), Te = () => {
     },
     void 0
   );
-}, Ae = ({
-  label: s,
-  size: t = "md",
+}, Oe = ({
+  label: r,
+  size: s = "md",
   variant: m = "primary",
-  className: a = "",
+  className: o = "",
   checked: i = !1,
-  onChange: f,
-  disabled: l = !1,
-  id: o,
-  ...d
+  onChange: d,
+  disabled: u = !1,
+  id: c,
+  ...b
 }) => {
-  const h = (j) => {
-    f && f(j.target.checked);
-  }, c = (j) => Y(j, {
+  const h = (I) => {
+    d && d(I.target.checked);
+  }, l = (I) => q(I, {
     sm: "w-10 h-5 after:h-4 after:w-4",
     md: "w-14 h-7 after:h-6 after:w-6",
     lg: "w-16 h-8 after:h-7 after:w-7"
-  }), N = (j, y) => {
+  }), N = (I, y) => {
     if (y)
       return "bg-gray-600 peer-checked:bg-gray-500 opacity-50 cursor-not-allowed";
-    const k = {
+    const E = {
       primary: "bg-gray-600 peer-checked:bg-linear-(--gradient-accent) peer-focus:ring-primary",
       secondary: "bg-gray-600 peer-checked:bg-secondary peer-focus:ring-secondary",
       accent: "bg-gray-600 peer-checked:bg-accent peer-focus:ring-accent"
     };
-    return k[j] || k.primary;
-  }, u = [
+    return E[I] || E.primary;
+  }, f = [
     "relative inline-flex items-center cursor-pointer",
-    l ? "cursor-not-allowed opacity-50" : "cursor-pointer"
-  ].join(" "), x = [
-    c(t),
-    N(m, l),
+    u ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+  ].join(" "), p = [
+    l(s),
+    N(m, u),
     "peer-focus:outline-none rounded-full peer",
     "peer-checked:after:translate-x-full peer-checked:after:border-white",
     "after:content-[''] after:absolute after:top-[2px] after:left-[2px]",
@@ -3939,16 +3969,16 @@ const xe = he(void 0), Te = () => {
     "transition-colors duration-300"
   ].filter(Boolean).join(" "), U = [
     "flex items-center justify-between",
-    s ? "space-x-3" : "",
-    a
+    r ? "space-x-3" : "",
+    o
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ e.jsxDEV("div", { className: U, children: [
-    s && /* @__PURE__ */ e.jsxDEV(
+    r && /* @__PURE__ */ e.jsxDEV(
       "label",
       {
-        htmlFor: o,
-        className: `text-default font-medium ${l ? "text-muted opacity-50" : "cursor-pointer"}`,
-        children: s
+        htmlFor: c,
+        className: `text-default font-medium ${u ? "text-muted opacity-50" : "cursor-pointer"}`,
+        children: r
       },
       void 0,
       !1,
@@ -3959,7 +3989,7 @@ const xe = he(void 0), Te = () => {
       },
       void 0
     ),
-    /* @__PURE__ */ e.jsxDEV("label", { className: u, children: [
+    /* @__PURE__ */ e.jsxDEV("label", { className: f, children: [
       /* @__PURE__ */ e.jsxDEV(
         "input",
         {
@@ -3967,9 +3997,9 @@ const xe = he(void 0), Te = () => {
           className: "sr-only peer",
           checked: i,
           onChange: h,
-          disabled: l,
-          id: o,
-          ...d
+          disabled: u,
+          id: c,
+          ...b
         },
         void 0,
         !1,
@@ -3980,7 +4010,7 @@ const xe = he(void 0), Te = () => {
         },
         void 0
       ),
-      /* @__PURE__ */ e.jsxDEV("div", { className: x }, void 0, !1, {
+      /* @__PURE__ */ e.jsxDEV("div", { className: p }, void 0, !1, {
         fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Toggle.tsx",
         lineNumber: 95,
         columnNumber: 9
@@ -3995,58 +4025,58 @@ const xe = he(void 0), Te = () => {
     lineNumber: 76,
     columnNumber: 5
   }, void 0);
-}, Re = ({
-  label: s,
-  size: t = "md",
+}, ze = ({
+  label: r,
+  size: s = "md",
   variant: m = "primary",
-  options: a,
+  options: o,
   placeholder: i,
-  helperText: f,
-  error: l,
-  className: o = "",
-  disabled: d = !1,
+  helperText: d,
+  error: u,
+  className: c = "",
+  disabled: b = !1,
   id: h,
-  name: c,
+  name: l,
   ...N
 }) => {
-  const u = Ue(), x = h || u, U = c || x, j = (w) => Y(w, q.input), y = (w, I, z) => {
-    if (I)
+  const f = Ee(), p = h || f, U = l || p, I = (j) => q(j, Q.input), y = (j, S, O) => {
+    if (S)
       return "bg-base border-2 border-border-default/30 text-muted/50 cursor-not-allowed opacity-50";
-    if (z)
+    if (O)
       return "bg-surface border-2 border-error text-default focus:ring-2 focus:ring-error focus:border-error shadow-error";
-    const C = {
+    const v = {
       primary: "bg-surface border-2 border-border-default text-default focus:ring-2 focus:ring-primary focus:border-primary shadow-primary",
       secondary: "bg-surface border-2 border-secondary text-default focus:ring-2 focus:ring-secondary focus:border-secondary shadow-secondary/30",
       danger: "bg-surface border-2 border-error text-default focus:ring-2 focus:ring-error focus:border-error shadow-error/30",
       ghost: "bg-base border-2 border-accent/20 text-default focus:ring-2 focus:ring-accent focus:border-accent shadow-secondary"
     };
-    return C[w] || C.primary;
-  }, k = [
+    return v[j] || v.primary;
+  }, E = [
     "appearance-none w-full rounded-lg font-mono transition-all duration-300",
     "focus:outline-none px-4 pr-10",
-    j(t),
-    y(m, d, !!l),
-    o
-  ].filter(Boolean).join(" "), g = "relative w-full", E = [
+    I(s),
+    y(m, b, !!u),
+    c
+  ].filter(Boolean).join(" "), x = "relative w-full", k = [
     "block text-sm font-medium mb-2 transition-colors duration-200",
-    d ? "text-muted opacity-50" : l ? "text-error" : "text-default"
-  ].join(" "), A = [
+    b ? "text-muted opacity-50" : u ? "text-error" : "text-default"
+  ].join(" "), D = [
     "mt-2 text-xs transition-colors duration-200",
-    l ? "text-error" : "text-muted"
+    u ? "text-error" : "text-muted"
   ].join(" ");
   return /* @__PURE__ */ e.jsxDEV("div", { className: "w-full", children: [
-    s && /* @__PURE__ */ e.jsxDEV("label", { htmlFor: x, className: E, children: s }, void 0, !1, {
+    r && /* @__PURE__ */ e.jsxDEV("label", { htmlFor: p, className: k, children: r }, void 0, !1, {
       fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Select.tsx",
       lineNumber: 101,
       columnNumber: 9
     }, void 0),
-    /* @__PURE__ */ e.jsxDEV("div", { className: g, children: [
+    /* @__PURE__ */ e.jsxDEV("div", { className: x, children: [
       /* @__PURE__ */ e.jsxDEV(
         "select",
         {
-          className: k,
-          disabled: d,
-          id: x,
+          className: E,
+          disabled: b,
+          id: p,
           name: U,
           ...N,
           children: [
@@ -4055,15 +4085,15 @@ const xe = he(void 0), Te = () => {
               lineNumber: 115,
               columnNumber: 13
             }, void 0),
-            a.map((w) => /* @__PURE__ */ e.jsxDEV(
+            o.map((j) => /* @__PURE__ */ e.jsxDEV(
               "option",
               {
-                value: w.value,
-                disabled: w.disabled,
+                value: j.value,
+                disabled: j.disabled,
                 className: "bg-surface text-default",
-                children: w.label
+                children: j.label
               },
-              w.value,
+              j.value,
               !1,
               {
                 fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Select.tsx",
@@ -4086,7 +4116,7 @@ const xe = he(void 0), Te = () => {
       /* @__PURE__ */ e.jsxDEV(
         "div",
         {
-          className: `pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 ${d ? "text-muted/50" : l ? "text-error" : "text-accent"}`,
+          className: `pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 ${b ? "text-muted/50" : u ? "text-error" : "text-accent"}`,
           children: /* @__PURE__ */ e.jsxDEV("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e.jsxDEV(
             "path",
             {
@@ -4122,7 +4152,7 @@ const xe = he(void 0), Te = () => {
       lineNumber: 106,
       columnNumber: 7
     }, void 0),
-    (f || l) && /* @__PURE__ */ e.jsxDEV("div", { className: A, children: l || f }, void 0, !1, {
+    (d || u) && /* @__PURE__ */ e.jsxDEV("div", { className: D, children: u || d }, void 0, !1, {
       fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Select.tsx",
       lineNumber: 148,
       columnNumber: 9
@@ -4132,10 +4162,10 @@ const xe = he(void 0), Te = () => {
     lineNumber: 99,
     columnNumber: 5
   }, void 0);
-}, Ye = () => {
-  const [s, t] = T(!1), [m, a] = T(""), i = Se.map((f) => ({
-    value: f.toLowerCase().replace(/\s+/g, "_"),
-    label: f
+}, er = () => {
+  const [r, s] = V(!1), [m, o] = V(""), i = _e.map((d) => ({
+    value: d.toLowerCase().replace(/\s+/g, "_"),
+    label: d
   }));
   return /* @__PURE__ */ e.jsxDEV("div", { className: "w-full max-w-xl md:max-w-3xl lg:max-w-4xl space-y-8 md:space-y-12", children: [
     /* @__PURE__ */ e.jsxDEV("div", { className: "text-center", children: [
@@ -4154,16 +4184,16 @@ const xe = he(void 0), Te = () => {
       lineNumber: 21,
       columnNumber: 7
     }, void 0),
-    /* @__PURE__ */ e.jsxDEV(Q, { title: "Form Controls", children: /* @__PURE__ */ e.jsxDEV("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 items-center", children: [
+    /* @__PURE__ */ e.jsxDEV(se, { title: "Form Controls", children: /* @__PURE__ */ e.jsxDEV("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 items-center", children: [
       /* @__PURE__ */ e.jsxDEV("div", { children: /* @__PURE__ */ e.jsxDEV(
-        Re,
+        ze,
         {
           label: "Corporate Faction",
           variant: "primary",
           options: i,
           placeholder: "Select your faction...",
           value: m,
-          onChange: (f) => a(f.target.value)
+          onChange: (d) => o(d.target.value)
         },
         void 0,
         !1,
@@ -4185,12 +4215,12 @@ const xe = he(void 0), Te = () => {
           columnNumber: 13
         }, void 0),
         /* @__PURE__ */ e.jsxDEV("div", { className: "bg-surface border border-border-default rounded-lg p-3", children: /* @__PURE__ */ e.jsxDEV(
-          Ae,
+          Oe,
           {
             label: "Enable Ghost Mode",
             variant: "primary",
-            checked: s,
-            onChange: t
+            checked: r,
+            onChange: s
           },
           void 0,
           !1,
@@ -4219,7 +4249,7 @@ const xe = he(void 0), Te = () => {
       lineNumber: 30,
       columnNumber: 7
     }, void 0),
-    /* @__PURE__ */ e.jsxDEV(Q, { title: "Status Indicators", children: /* @__PURE__ */ e.jsxDEV("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", children: [
+    /* @__PURE__ */ e.jsxDEV(se, { title: "Status Indicators", children: /* @__PURE__ */ e.jsxDEV("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", children: [
       /* @__PURE__ */ e.jsxDEV("div", { children: [
         /* @__PURE__ */ e.jsxDEV("label", { className: "block text-sm font-medium text-default mb-3", children: "Security Clearance Levels" }, void 0, !1, {
           fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/tabs/ElementsTab.tsx",
@@ -4380,7 +4410,7 @@ const xe = he(void 0), Te = () => {
       lineNumber: 61,
       columnNumber: 7
     }, void 0),
-    /* @__PURE__ */ e.jsxDEV(Q, { title: "Media Gallery", children: /* @__PURE__ */ e.jsxDEV("div", { className: "space-y-6", children: /* @__PURE__ */ e.jsxDEV("div", { children: [
+    /* @__PURE__ */ e.jsxDEV(se, { title: "Media Gallery", children: /* @__PURE__ */ e.jsxDEV("div", { className: "space-y-6", children: /* @__PURE__ */ e.jsxDEV("div", { children: [
       /* @__PURE__ */ e.jsxDEV("label", { className: "block text-sm font-medium text-default mb-3", children: "Enhanced Visual Analysis System" }, void 0, !1, {
         fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/tabs/ElementsTab.tsx",
         lineNumber: 130,
@@ -4394,7 +4424,7 @@ const xe = he(void 0), Te = () => {
       /* @__PURE__ */ e.jsxDEV("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
         /* @__PURE__ */ e.jsxDEV("div", { className: "space-y-2", children: [
           /* @__PURE__ */ e.jsxDEV("div", { className: "h-48", children: /* @__PURE__ */ e.jsxDEV(
-            ne,
+            ae,
             {
               src: "image_demo_1.jpg",
               alt: "Cyberpunk cityscape with neon lights reflecting on wet streets",
@@ -4426,7 +4456,7 @@ const xe = he(void 0), Te = () => {
         }, void 0),
         /* @__PURE__ */ e.jsxDEV("div", { className: "space-y-2", children: [
           /* @__PURE__ */ e.jsxDEV("div", { className: "h-48", children: /* @__PURE__ */ e.jsxDEV(
-            ne,
+            ae,
             {
               src: "image_demo_3.jpg",
               alt: "Holographic display showing system diagnostics",
@@ -4458,7 +4488,7 @@ const xe = he(void 0), Te = () => {
         }, void 0),
         /* @__PURE__ */ e.jsxDEV("div", { className: "space-y-2", children: [
           /* @__PURE__ */ e.jsxDEV("div", { className: "h-48", children: /* @__PURE__ */ e.jsxDEV(
-            ne,
+            ae,
             {
               src: "noexist.jpg",
               alt: "Futuristic neural network interface with data streams",
@@ -4511,24 +4541,24 @@ const xe = he(void 0), Te = () => {
     lineNumber: 19,
     columnNumber: 5
   }, void 0);
-}, $e = (s = {}) => {
-  const { min: t = 5, max: m = 95, speed: a = 30 } = s, [i, f] = T(0), [l, o] = T(1);
-  return se(() => {
-    const d = setInterval(() => {
-      f((h) => {
-        let c = h + l;
-        return c >= m ? (c = m, o(-1)) : c <= t && (c = t, o(1)), c;
+}, Fe = (r = {}) => {
+  const { min: s = 5, max: m = 95, speed: o = 30 } = r, [i, d] = V(0), [u, c] = V(1);
+  return J(() => {
+    const b = setInterval(() => {
+      d((h) => {
+        let l = h + u;
+        return l >= m ? (l = m, c(-1)) : l <= s && (l = s, c(1)), l;
       });
-    }, a);
-    return () => clearInterval(d);
-  }, [l, t, m, a]), i;
-}, Le = ({
-  progress: s,
-  radius: t,
+    }, o);
+    return () => clearInterval(b);
+  }, [u, s, m, o]), i;
+}, Be = ({
+  progress: r,
+  radius: s,
   className: m = "",
-  children: a
+  children: o
 }) => {
-  const i = 2 * Math.PI * t, f = i / 2, l = f * (1 - s / 100), o = f * (1 - s / 100);
+  const i = 2 * Math.PI * s, d = i / 2, u = d * (1 - r / 100), c = d * (1 - r / 100);
   return /* @__PURE__ */ e.jsxDEV("div", { className: `relative ${m}`, children: [
     /* @__PURE__ */ e.jsxDEV(
       "svg",
@@ -4541,13 +4571,13 @@ const xe = he(void 0), Te = () => {
             {
               cx: "25",
               cy: "25",
-              r: t,
+              r: s,
               fill: "none",
               stroke: "var(--color-accent)",
               strokeWidth: "4",
               strokeLinecap: "butt",
-              strokeDasharray: `${f * 0.98} ${i}`,
-              strokeDashoffset: l,
+              strokeDasharray: `${d * 0.98} ${i}`,
+              strokeDashoffset: u,
               transform: "rotate(-90 25 25)",
               style: {
                 filter: "drop-shadow(0 0 8px var(--color-accent))"
@@ -4567,13 +4597,13 @@ const xe = he(void 0), Te = () => {
             {
               cx: "25",
               cy: "25",
-              r: t,
+              r: s,
               fill: "none",
               stroke: "var(--color-primary)",
               strokeWidth: "4",
               strokeLinecap: "butt",
-              strokeDasharray: `${f * 0.98} ${i}`,
-              strokeDashoffset: o,
+              strokeDasharray: `${d * 0.98} ${i}`,
+              strokeDashoffset: c,
               transform: "rotate(90 25 25)",
               style: {
                 filter: "drop-shadow(0 0 8px var(--color-primary))"
@@ -4599,7 +4629,7 @@ const xe = he(void 0), Te = () => {
       },
       void 0
     ),
-    a && /* @__PURE__ */ e.jsxDEV("div", { className: "absolute inset-0 flex items-center justify-center", children: a }, void 0, !1, {
+    o && /* @__PURE__ */ e.jsxDEV("div", { className: "absolute inset-0 flex items-center justify-center", children: o }, void 0, !1, {
       fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/CircularProgress.tsx",
       lineNumber: 61,
       columnNumber: 9
@@ -4609,20 +4639,20 @@ const xe = he(void 0), Te = () => {
     lineNumber: 22,
     columnNumber: 5
   }, void 0);
-}, Me = ({
-  progress: s,
-  className: t = "",
+}, He = ({
+  progress: r,
+  className: s = "",
   children: m
 }) => {
   const {
-    SEGMENT_COUNT: a,
+    SEGMENT_COUNT: o,
     SEGMENT_ANGLE: i,
-    GAP_ANGLE: f,
-    INNER_RADIUS: l,
-    OUTER_RADIUS: o,
-    OUTER_TICK_RADIUS: d
-  } = ge, h = i - f;
-  return /* @__PURE__ */ e.jsxDEV("div", { className: `relative ${t}`, children: [
+    GAP_ANGLE: d,
+    INNER_RADIUS: u,
+    OUTER_RADIUS: c,
+    OUTER_TICK_RADIUS: b
+  } = ve, h = i - d;
+  return /* @__PURE__ */ e.jsxDEV("div", { className: `relative ${s}`, children: [
     /* @__PURE__ */ e.jsxDEV(
       "svg",
       {
@@ -4630,16 +4660,16 @@ const xe = he(void 0), Te = () => {
         viewBox: "0 0 60 60",
         style: { overflow: "visible" },
         children: [
-          [...Array(60)].map((c, N) => {
-            const u = 6 * N, U = N % 5 === 0 ? 6 : 3, j = "var(--color-muted)", y = 30 + d * Math.cos(u * Math.PI / 180), k = 30 + d * Math.sin(u * Math.PI / 180), g = 30 + (d - U) * Math.cos(u * Math.PI / 180), E = 30 + (d - U) * Math.sin(u * Math.PI / 180);
+          [...Array(60)].map((l, N) => {
+            const f = 6 * N, U = N % 5 === 0 ? 6 : 3, I = "var(--color-muted)", y = 30 + b * Math.cos(f * Math.PI / 180), E = 30 + b * Math.sin(f * Math.PI / 180), x = 30 + (b - U) * Math.cos(f * Math.PI / 180), k = 30 + (b - U) * Math.sin(f * Math.PI / 180);
             return /* @__PURE__ */ e.jsxDEV(
               "line",
               {
                 x1: y,
-                y1: k,
-                x2: g,
-                y2: E,
-                stroke: j,
+                y1: E,
+                x2: x,
+                y2: k,
+                stroke: I,
                 strokeWidth: 1,
                 strokeLinecap: "round",
                 opacity: 0.7
@@ -4654,15 +4684,15 @@ const xe = he(void 0), Te = () => {
               void 0
             );
           }),
-          [...Array(a)].map((c, N) => {
-            const u = i * N - 90 + f / 2, x = u + h, U = (O) => O * Math.PI / 180, j = 30 + l * Math.cos(U(u)), y = 30 + l * Math.sin(U(u)), k = 30 + o * Math.cos(U(u)), g = 30 + o * Math.sin(U(u)), E = 30 + o * Math.cos(U(x)), A = 30 + o * Math.sin(U(x)), w = 30 + l * Math.cos(U(x)), I = 30 + l * Math.sin(U(x)), z = `M ${j} ${y} L ${k} ${g} L ${E} ${A} L ${w} ${I} Z`, C = N < Math.floor(s / 5);
+          [...Array(o)].map((l, N) => {
+            const f = i * N - 90 + d / 2, p = f + h, U = (M) => M * Math.PI / 180, I = 30 + u * Math.cos(U(f)), y = 30 + u * Math.sin(U(f)), E = 30 + c * Math.cos(U(f)), x = 30 + c * Math.sin(U(f)), k = 30 + c * Math.cos(U(p)), D = 30 + c * Math.sin(U(p)), j = 30 + u * Math.cos(U(p)), S = 30 + u * Math.sin(U(p)), O = `M ${I} ${y} L ${E} ${x} L ${k} ${D} L ${j} ${S} Z`, v = N < Math.floor(r / 5);
             return /* @__PURE__ */ e.jsxDEV(
               "path",
               {
-                d: z,
-                fill: C ? "var(--color-accent)" : "var(--color-border-default)",
+                d: O,
+                fill: v ? "var(--color-accent)" : "var(--color-border-default)",
                 style: {
-                  filter: C ? "drop-shadow(0 0 6px var(--color-accent))" : "none",
+                  filter: v ? "drop-shadow(0 0 6px var(--color-accent))" : "none",
                   transition: "fill 0.3s ease"
                 }
               },
@@ -4697,15 +4727,15 @@ const xe = he(void 0), Te = () => {
     lineNumber: 27,
     columnNumber: 5
   }, void 0);
-}, le = ({
-  type: s,
-  title: t,
+}, me = ({
+  type: r,
+  title: s,
   message: m,
-  size: a = "md",
+  size: o = "md",
   onClose: i
 }) => {
-  const f = (h) => Y(h, q.notification), o = (() => {
-    switch (s) {
+  const d = (h) => q(h, Q.notification), c = (() => {
+    switch (r) {
       case "success":
         return {
           container: "bg-linear-(--gradient-accent) shadow-lg-accent",
@@ -4788,20 +4818,20 @@ const xe = he(void 0), Te = () => {
           icon: null
         };
     }
-  })(), d = f(a);
-  return /* @__PURE__ */ e.jsxDEV("div", { className: `flex items-start rounded-lg ${d} ${o.container}`, children: [
-    /* @__PURE__ */ e.jsxDEV("div", { className: "flex-shrink-0", children: o.icon }, void 0, !1, {
+  })(), b = d(o);
+  return /* @__PURE__ */ e.jsxDEV("div", { className: `flex items-start rounded-lg ${b} ${c.container}`, children: [
+    /* @__PURE__ */ e.jsxDEV("div", { className: "flex-shrink-0", children: c.icon }, void 0, !1, {
       fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Notification.tsx",
       lineNumber: 82,
       columnNumber: 7
     }, void 0),
     /* @__PURE__ */ e.jsxDEV("div", { className: "flex-1", children: [
-      /* @__PURE__ */ e.jsxDEV("h4", { className: `font-bold ${o.textColor}`, children: t }, void 0, !1, {
+      /* @__PURE__ */ e.jsxDEV("h4", { className: `font-bold ${c.textColor}`, children: s }, void 0, !1, {
         fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Notification.tsx",
         lineNumber: 86,
         columnNumber: 9
       }, void 0),
-      /* @__PURE__ */ e.jsxDEV("p", { className: `${s === "success" || s === "error" ? "text-base/80" : "text-muted"} text-sm mt-1`, children: m }, void 0, !1, {
+      /* @__PURE__ */ e.jsxDEV("p", { className: `${r === "success" || r === "error" ? "text-base/80" : "text-muted"} text-sm mt-1`, children: m }, void 0, !1, {
         fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Notification.tsx",
         lineNumber: 89,
         columnNumber: 9
@@ -4814,7 +4844,7 @@ const xe = he(void 0), Te = () => {
     i && /* @__PURE__ */ e.jsxDEV(
       "button",
       {
-        className: `flex-shrink-0 ${o.textColor} hover:${o.textColor}/30 transition-colors cursor-pointer`,
+        className: `flex-shrink-0 ${c.textColor} hover:${c.textColor}/30 transition-colors cursor-pointer`,
         onClick: i,
         children: /* @__PURE__ */ e.jsxDEV("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e.jsxDEV(
           "path",
@@ -4851,18 +4881,18 @@ const xe = he(void 0), Te = () => {
     lineNumber: 81,
     columnNumber: 5
   }, void 0);
-}, _e = ({
-  progress: s,
-  size: t = "md",
+}, We = ({
+  progress: r,
+  size: s = "md",
   className: m = ""
 }) => {
-  const a = (h) => Y(h, q.linearProgress.width), i = (h) => Y(h, q.linearProgress.height), f = a(t), l = i(t), o = [
+  const o = (h) => q(h, Q.linearProgress.width), i = (h) => q(h, Q.linearProgress.height), d = o(s), u = i(s), c = [
     "bg-surface",
     "rounded-full",
     "shadow-inner",
-    l,
-    m || f
-  ].join(" "), d = [
+    u,
+    m || d
+  ].join(" "), b = [
     "bg-gradient-to-r",
     "from-accent",
     "to-primary",
@@ -4871,13 +4901,13 @@ const xe = he(void 0), Te = () => {
     "transition-all",
     "duration-500",
     "ease-out",
-    l
+    u
   ].join(" ");
-  return /* @__PURE__ */ e.jsxDEV("div", { className: o, children: /* @__PURE__ */ e.jsxDEV(
+  return /* @__PURE__ */ e.jsxDEV("div", { className: c, children: /* @__PURE__ */ e.jsxDEV(
     "div",
     {
-      className: d,
-      style: { width: `${s}%` }
+      className: b,
+      style: { width: `${r}%` }
     },
     void 0,
     !1,
@@ -4892,31 +4922,31 @@ const xe = he(void 0), Te = () => {
     lineNumber: 48,
     columnNumber: 5
   }, void 0);
-}, Oe = ({
-  variant: s = "text",
-  size: t = "md",
+}, Ge = ({
+  variant: r = "text",
+  size: s = "md",
   width: m,
-  height: a,
+  height: o,
   className: i = "",
-  lines: f = 3,
-  animate: l = !0
+  lines: d = 3,
+  animate: u = !0
 }) => {
-  const d = [
+  const b = [
     "bg-gray-600",
-    l ? "animate-pulse" : "",
-    ((c) => Y(c, q.skeleton))(t),
+    u ? "animate-pulse" : "",
+    ((l) => q(l, Q.skeleton))(s),
     i
   ].filter(Boolean).join(" "), h = () => {
-    const c = {};
-    return m && (c.width = typeof m == "number" ? `${m}px` : m), a && (c.height = typeof a == "number" ? `${a}px` : a), c;
+    const l = {};
+    return m && (l.width = typeof m == "number" ? `${m}px` : m), o && (l.height = typeof o == "number" ? `${o}px` : o), l;
   };
-  if (s === "text")
-    return /* @__PURE__ */ e.jsxDEV("div", { className: `space-y-3 ${i}`, children: Array.from({ length: f }).map((c, N) => {
-      const x = N === f - 1 ? "w-2/3" : N % 2 === 0 ? "w-full" : "w-5/6";
+  if (r === "text")
+    return /* @__PURE__ */ e.jsxDEV("div", { className: `space-y-3 ${i}`, children: Array.from({ length: d }).map((l, N) => {
+      const p = N === d - 1 ? "w-2/3" : N % 2 === 0 ? "w-full" : "w-5/6";
       return /* @__PURE__ */ e.jsxDEV(
         "div",
         {
-          className: `h-3 rounded ${d} ${x}`,
+          className: `h-3 rounded ${b} ${p}`,
           style: h()
         },
         N,
@@ -4933,12 +4963,12 @@ const xe = he(void 0), Te = () => {
       lineNumber: 59,
       columnNumber: 7
     }, void 0);
-  if (s === "circular") {
-    const c = t === "sm" ? "h-12 w-12" : t === "lg" ? "h-20 w-20" : "h-16 w-16";
+  if (r === "circular") {
+    const l = s === "sm" ? "h-12 w-12" : s === "lg" ? "h-20 w-20" : "h-16 w-16";
     return /* @__PURE__ */ e.jsxDEV(
       "div",
       {
-        className: `rounded-full ${d} ${c}`,
+        className: `rounded-full ${b} ${l}`,
         style: h()
       },
       void 0,
@@ -4951,12 +4981,12 @@ const xe = he(void 0), Te = () => {
       void 0
     );
   }
-  if (s === "rectangular") {
-    const c = t === "sm" ? "h-20" : t === "lg" ? "h-40" : "h-32";
+  if (r === "rectangular") {
+    const l = s === "sm" ? "h-20" : s === "lg" ? "h-40" : "h-32";
     return /* @__PURE__ */ e.jsxDEV(
       "div",
       {
-        className: `rounded-lg ${d} w-full ${c}`,
+        className: `rounded-lg ${b} w-full ${l}`,
         style: h()
       },
       void 0,
@@ -4969,21 +4999,21 @@ const xe = he(void 0), Te = () => {
       void 0
     );
   }
-  if (s === "avatar-text") {
-    const c = t === "sm" ? "h-12 w-12" : t === "lg" ? "h-20 w-20" : "h-16 w-16";
+  if (r === "avatar-text") {
+    const l = s === "sm" ? "h-12 w-12" : s === "lg" ? "h-20 w-20" : "h-16 w-16";
     return /* @__PURE__ */ e.jsxDEV("div", { className: `flex items-center space-x-4 ${i}`, children: [
-      /* @__PURE__ */ e.jsxDEV("div", { className: `rounded-full ${d} ${c}` }, void 0, !1, {
+      /* @__PURE__ */ e.jsxDEV("div", { className: `rounded-full ${b} ${l}` }, void 0, !1, {
         fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Skeleton.tsx",
         lineNumber: 113,
         columnNumber: 9
       }, void 0),
       /* @__PURE__ */ e.jsxDEV("div", { className: "flex-1 space-y-3", children: [
-        /* @__PURE__ */ e.jsxDEV("div", { className: `h-4 rounded w-3/4 ${d}` }, void 0, !1, {
+        /* @__PURE__ */ e.jsxDEV("div", { className: `h-4 rounded w-3/4 ${b}` }, void 0, !1, {
           fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Skeleton.tsx",
           lineNumber: 115,
           columnNumber: 11
         }, void 0),
-        /* @__PURE__ */ e.jsxDEV("div", { className: `h-3 rounded w-1/2 ${d}` }, void 0, !1, {
+        /* @__PURE__ */ e.jsxDEV("div", { className: `h-3 rounded w-1/2 ${b}` }, void 0, !1, {
           fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Skeleton.tsx",
           lineNumber: 116,
           columnNumber: 11
@@ -4999,15 +5029,15 @@ const xe = he(void 0), Te = () => {
       columnNumber: 7
     }, void 0);
   }
-  if (s === "button-group") {
-    const c = t === "sm" ? "h-8" : t === "lg" ? "h-12" : "h-10";
+  if (r === "button-group") {
+    const l = s === "sm" ? "h-8" : s === "lg" ? "h-12" : "h-10";
     return /* @__PURE__ */ e.jsxDEV("div", { className: `flex space-x-4 ${i}`, children: [
-      /* @__PURE__ */ e.jsxDEV("div", { className: `${c} rounded w-20 ${d}` }, void 0, !1, {
+      /* @__PURE__ */ e.jsxDEV("div", { className: `${l} rounded w-20 ${b}` }, void 0, !1, {
         fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Skeleton.tsx",
         lineNumber: 129,
         columnNumber: 9
       }, void 0),
-      /* @__PURE__ */ e.jsxDEV("div", { className: `${c} rounded w-24 ${d}` }, void 0, !1, {
+      /* @__PURE__ */ e.jsxDEV("div", { className: `${l} rounded w-24 ${b}` }, void 0, !1, {
         fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Skeleton.tsx",
         lineNumber: 130,
         columnNumber: 9
@@ -5018,26 +5048,26 @@ const xe = he(void 0), Te = () => {
       columnNumber: 7
     }, void 0);
   }
-  if (s === "card") {
-    const c = t === "sm" ? "p-4" : t === "lg" ? "p-8" : "p-6";
+  if (r === "card") {
+    const l = s === "sm" ? "p-4" : s === "lg" ? "p-8" : "p-6";
     return /* @__PURE__ */ e.jsxDEV(
       "div",
       {
-        className: `border border-border-default rounded-lg bg-surface ${c} space-y-4 ${i}`,
-        children: l && /* @__PURE__ */ e.jsxDEV("div", { className: "animate-pulse space-y-4", children: [
+        className: `border border-border-default rounded-lg bg-surface ${l} space-y-4 ${i}`,
+        children: u && /* @__PURE__ */ e.jsxDEV("div", { className: "animate-pulse space-y-4", children: [
           /* @__PURE__ */ e.jsxDEV("div", { className: "flex items-center space-x-4", children: [
-            /* @__PURE__ */ e.jsxDEV("div", { className: `rounded-full ${d} h-16 w-16` }, void 0, !1, {
+            /* @__PURE__ */ e.jsxDEV("div", { className: `rounded-full ${b} h-16 w-16` }, void 0, !1, {
               fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Skeleton.tsx",
               lineNumber: 147,
               columnNumber: 15
             }, void 0),
             /* @__PURE__ */ e.jsxDEV("div", { className: "flex-1 space-y-3", children: [
-              /* @__PURE__ */ e.jsxDEV("div", { className: `h-4 rounded w-3/4 ${d}` }, void 0, !1, {
+              /* @__PURE__ */ e.jsxDEV("div", { className: `h-4 rounded w-3/4 ${b}` }, void 0, !1, {
                 fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Skeleton.tsx",
                 lineNumber: 149,
                 columnNumber: 17
               }, void 0),
-              /* @__PURE__ */ e.jsxDEV("div", { className: `h-3 rounded w-1/2 ${d}` }, void 0, !1, {
+              /* @__PURE__ */ e.jsxDEV("div", { className: `h-3 rounded w-1/2 ${b}` }, void 0, !1, {
                 fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Skeleton.tsx",
                 lineNumber: 150,
                 columnNumber: 17
@@ -5053,17 +5083,17 @@ const xe = he(void 0), Te = () => {
             columnNumber: 13
           }, void 0),
           /* @__PURE__ */ e.jsxDEV("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ e.jsxDEV("div", { className: `h-3 rounded ${d}` }, void 0, !1, {
+            /* @__PURE__ */ e.jsxDEV("div", { className: `h-3 rounded ${b}` }, void 0, !1, {
               fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Skeleton.tsx",
               lineNumber: 156,
               columnNumber: 15
             }, void 0),
-            /* @__PURE__ */ e.jsxDEV("div", { className: `h-3 rounded w-5/6 ${d}` }, void 0, !1, {
+            /* @__PURE__ */ e.jsxDEV("div", { className: `h-3 rounded w-5/6 ${b}` }, void 0, !1, {
               fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Skeleton.tsx",
               lineNumber: 157,
               columnNumber: 15
             }, void 0),
-            /* @__PURE__ */ e.jsxDEV("div", { className: `h-3 rounded w-4/6 ${d}` }, void 0, !1, {
+            /* @__PURE__ */ e.jsxDEV("div", { className: `h-3 rounded w-4/6 ${b}` }, void 0, !1, {
               fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Skeleton.tsx",
               lineNumber: 158,
               columnNumber: 15
@@ -5074,12 +5104,12 @@ const xe = he(void 0), Te = () => {
             columnNumber: 13
           }, void 0),
           /* @__PURE__ */ e.jsxDEV("div", { className: "flex space-x-4 pt-4", children: [
-            /* @__PURE__ */ e.jsxDEV("div", { className: `h-8 rounded w-20 ${d}` }, void 0, !1, {
+            /* @__PURE__ */ e.jsxDEV("div", { className: `h-8 rounded w-20 ${b}` }, void 0, !1, {
               fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Skeleton.tsx",
               lineNumber: 163,
               columnNumber: 15
             }, void 0),
-            /* @__PURE__ */ e.jsxDEV("div", { className: `h-8 rounded w-24 ${d}` }, void 0, !1, {
+            /* @__PURE__ */ e.jsxDEV("div", { className: `h-8 rounded w-24 ${b}` }, void 0, !1, {
               fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/Skeleton.tsx",
               lineNumber: 164,
               columnNumber: 15
@@ -5108,7 +5138,7 @@ const xe = he(void 0), Te = () => {
   return /* @__PURE__ */ e.jsxDEV(
     "div",
     {
-      className: `h-4 rounded ${d} w-full`,
+      className: `h-4 rounded ${b} w-full`,
       style: h()
     },
     void 0,
@@ -5120,8 +5150,8 @@ const xe = he(void 0), Te = () => {
     },
     void 0
   );
-}, Xe = () => {
-  const s = $e();
+}, rr = () => {
+  const r = Fe();
   return /* @__PURE__ */ e.jsxDEV("div", { className: "w-full max-w-xl md:max-w-3xl lg:max-w-4xl space-y-8 md:space-y-12", children: [
     /* @__PURE__ */ e.jsxDEV("div", { className: "text-center", children: [
       /* @__PURE__ */ e.jsxDEV("h2", { className: "text-2xl md:text-3xl lg:text-4xl font-bold text-primary mb-2", children: "User Feedback" }, void 0, !1, {
@@ -5147,7 +5177,7 @@ const xe = he(void 0), Te = () => {
       }, void 0),
       /* @__PURE__ */ e.jsxDEV("div", { className: "space-y-4", children: [
         /* @__PURE__ */ e.jsxDEV(
-          le,
+          me,
           {
             type: "success",
             title: "Neural Link Established",
@@ -5166,7 +5196,7 @@ const xe = he(void 0), Te = () => {
           void 0
         ),
         /* @__PURE__ */ e.jsxDEV(
-          le,
+          me,
           {
             type: "warning",
             title: "Security Protocol Warning",
@@ -5185,7 +5215,7 @@ const xe = he(void 0), Te = () => {
           void 0
         ),
         /* @__PURE__ */ e.jsxDEV(
-          le,
+          me,
           {
             type: "error",
             title: "System Breach Detected",
@@ -5228,7 +5258,7 @@ const xe = he(void 0), Te = () => {
               columnNumber: 15
             }, void 0),
             /* @__PURE__ */ e.jsxDEV("span", { className: "text-accent font-mono text-sm", children: [
-              s,
+              r,
               "%"
             ] }, void 0, !0, {
               fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/tabs/FeedbackTab.tsx",
@@ -5240,7 +5270,7 @@ const xe = he(void 0), Te = () => {
             lineNumber: 62,
             columnNumber: 13
           }, void 0),
-          /* @__PURE__ */ e.jsxDEV(_e, { progress: s, className: "w-full" }, void 0, !1, {
+          /* @__PURE__ */ e.jsxDEV(We, { progress: r, className: "w-full" }, void 0, !1, {
             fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/tabs/FeedbackTab.tsx",
             lineNumber: 66,
             columnNumber: 13
@@ -5257,13 +5287,13 @@ const xe = he(void 0), Te = () => {
         }, void 0),
         /* @__PURE__ */ e.jsxDEV("div", { className: "flex flex-col items-center space-y-4", children: [
           /* @__PURE__ */ e.jsxDEV(
-            Le,
+            Be,
             {
-              progress: s,
-              radius: ge.RADIUS,
+              progress: r,
+              radius: ve.RADIUS,
               className: "w-20 h-20",
               children: /* @__PURE__ */ e.jsxDEV("span", { className: "text-accent font-mono text-sm", children: [
-                s,
+                r,
                 "%"
               ] }, void 0, !0, {
                 fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/tabs/FeedbackTab.tsx",
@@ -5302,8 +5332,8 @@ const xe = he(void 0), Te = () => {
           columnNumber: 11
         }, void 0),
         /* @__PURE__ */ e.jsxDEV("div", { className: "flex flex-col items-center space-y-4", children: [
-          /* @__PURE__ */ e.jsxDEV(Me, { progress: s, className: "w-28 h-28", children: /* @__PURE__ */ e.jsxDEV("span", { className: "text-accent font-mono text-sm", children: [
-            s,
+          /* @__PURE__ */ e.jsxDEV(He, { progress: r, className: "w-28 h-28", children: /* @__PURE__ */ e.jsxDEV("span", { className: "text-accent font-mono text-sm", children: [
+            r,
             "%"
           ] }, void 0, !0, {
             fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/tabs/FeedbackTab.tsx",
@@ -5351,7 +5381,7 @@ const xe = he(void 0), Te = () => {
         lineNumber: 103,
         columnNumber: 9
       }, void 0),
-      /* @__PURE__ */ e.jsxDEV(Oe, { variant: "card", size: "md" }, void 0, !1, {
+      /* @__PURE__ */ e.jsxDEV(Ge, { variant: "card", size: "md" }, void 0, !1, {
         fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/tabs/FeedbackTab.tsx",
         lineNumber: 106,
         columnNumber: 9
@@ -5366,34 +5396,235 @@ const xe = he(void 0), Te = () => {
     lineNumber: 14,
     columnNumber: 5
   }, void 0);
-}, Ze = ({
-  tabs: s,
-  activeTab: t,
+}, Ye = ({
+  tabs: r,
+  activeTab: s,
+  onTabChange: m,
+  sizeClasses: o,
+  containerClassName: i = "",
+  anchorClassName: d = "",
+  menuClassName: u = "",
+  menuItemClassName: c = "",
+  dropdownLabel: b,
+  anchorIcon: h,
+  showAnchorLabel: l = !0,
+  anchorAriaLabel: N,
+  closeOnSelect: f = !0
+}) => {
+  const [p, U] = V(!1), [I, y] = V(!1), [E, x] = V(!1), [k, D] = V(!1), j = B(null), S = B(null);
+  J(() => {
+    if (!p) return;
+    const v = (M) => {
+      j.current && !j.current.contains(M.target) && (x(!0), setTimeout(() => {
+        U(!1), x(!1);
+      }, 180));
+    };
+    return document.addEventListener("mousedown", v), () => document.removeEventListener("mousedown", v);
+  }, [p]), J(() => {
+    if (!p) return;
+    const v = S.current;
+    if (!v) return;
+    const M = v.getBoundingClientRect();
+    D(M.right > window.innerWidth);
+  }, [p]);
+  const O = () => {
+    p ? (x(!0), setTimeout(() => {
+      U(!1), x(!1);
+    }, 180)) : (y(!0), U(!0), setTimeout(() => y(!1), 30));
+  };
+  return /* @__PURE__ */ e.jsxDEV("div", { className: `${i}`, children: /* @__PURE__ */ e.jsxDEV("div", { ref: j, className: "relative inline-block", children: [
+    /* @__PURE__ */ e.jsxDEV(
+      "button",
+      {
+        onClick: O,
+        className: `inline-flex items-center gap-2 ${o} bg-surface text-default border-2 border-border-default rounded-lg transition-all duration-300 hover:text-secondary hover:border-secondary hover:cursor-pointer shadow-secondary/30 ${d}`,
+        "aria-haspopup": "menu",
+        "aria-expanded": p,
+        "aria-label": l ? void 0 : N ?? (typeof b == "string" ? b : "Open tabs"),
+        children: [
+          h ?? /* @__PURE__ */ e.jsxDEV("svg", { className: "w-5 h-5", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: [
+            /* @__PURE__ */ e.jsxDEV("rect", { x: "3", y: "5", width: "14", height: "2", rx: "1" }, void 0, !1, {
+              fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/TabNavigation.tsx",
+              lineNumber: 102,
+              columnNumber: 15
+            }, void 0),
+            /* @__PURE__ */ e.jsxDEV("rect", { x: "3", y: "9", width: "14", height: "2", rx: "1" }, void 0, !1, {
+              fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/TabNavigation.tsx",
+              lineNumber: 103,
+              columnNumber: 15
+            }, void 0),
+            /* @__PURE__ */ e.jsxDEV("rect", { x: "3", y: "13", width: "14", height: "2", rx: "1" }, void 0, !1, {
+              fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/TabNavigation.tsx",
+              lineNumber: 104,
+              columnNumber: 15
+            }, void 0)
+          ] }, void 0, !0, {
+            fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/TabNavigation.tsx",
+            lineNumber: 101,
+            columnNumber: 13
+          }, void 0),
+          l && /* @__PURE__ */ e.jsxDEV("span", { children: b ?? s }, void 0, !1, {
+            fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/TabNavigation.tsx",
+            lineNumber: 108,
+            columnNumber: 13
+          }, void 0)
+        ]
+      },
+      void 0,
+      !0,
+      {
+        fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/TabNavigation.tsx",
+        lineNumber: 93,
+        columnNumber: 9
+      },
+      void 0
+    ),
+    (p || E) && /* @__PURE__ */ e.jsxDEV(
+      "div",
+      {
+        ref: S,
+        "aria-hidden": !p,
+        className: `absolute ${k ? "right-0" : "left-0"} mt-2 min-w-40 z-50 bg-surface border-2 border-border-default rounded-lg shadow-secondary overflow-hidden ${u}
+              transition-transform transition-opacity duration-200 ease-[cubic-bezier(.2,0,0,1)] transform-gpu origin-top will-change-transform will-change-opacity ${I || E ? "opacity-0 scale-y-0 pointer-events-none" : "opacity-100 scale-y-100 pointer-events-auto"}`,
+        children: /* @__PURE__ */ e.jsxDEV("div", { className: "py-1", children: r.map((v) => /* @__PURE__ */ e.jsxDEV(
+          "button",
+          {
+            onClick: () => {
+              m(v), f && (x(!0), setTimeout(() => {
+                U(!1), x(!1);
+              }, 180));
+            },
+            className: `w-full flex items-center justify-between text-left px-4 py-2 font-bold transition-colors duration-200 outline-none hover:cursor-pointer ${s === v ? "text-secondary relative pl-4 before:content-[''] before:h-full before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:h-4 before:w-[3px] before:rounded before:bg-accent before:shadow-lg-accent" : "text-default hover:text-secondary hover:bg-base/70"} ${c}`,
+            children: /* @__PURE__ */ e.jsxDEV("span", { children: v }, void 0, !1, {
+              fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/TabNavigation.tsx",
+              lineNumber: 145,
+              columnNumber: 19
+            }, void 0)
+          },
+          v,
+          !1,
+          {
+            fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/TabNavigation.tsx",
+            lineNumber: 127,
+            columnNumber: 17
+          },
+          void 0
+        )) }, void 0, !1, {
+          fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/TabNavigation.tsx",
+          lineNumber: 125,
+          columnNumber: 13
+        }, void 0)
+      },
+      void 0,
+      !1,
+      {
+        fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/TabNavigation.tsx",
+        lineNumber: 113,
+        columnNumber: 11
+      },
+      void 0
+    )
+  ] }, void 0, !0, {
+    fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/TabNavigation.tsx",
+    lineNumber: 92,
+    columnNumber: 7
+  }, void 0) }, void 0, !1, {
+    fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/TabNavigation.tsx",
+    lineNumber: 91,
+    columnNumber: 5
+  }, void 0);
+}, sr = ({
+  tabs: r,
+  activeTab: s,
   onTabChange: m,
-  size: a = "md"
+  size: o = "md",
+  mode: i = "scroll",
+  containerClassName: d = "",
+  tabsClassName: u = "",
+  dropdownLabel: c,
+  anchorIcon: b,
+  showAnchorLabel: h = !0,
+  anchorAriaLabel: l,
+  closeOnSelect: N = !0,
+  anchorClassName: f = "",
+  menuClassName: p = "",
+  menuItemClassName: U = ""
 }) => {
-  const f = ((l) => Y(l, q.tabNavigation))(a);
-  return /* @__PURE__ */ e.jsxDEV("div", { className: "flex space-x-2", children: s.map((l) => /* @__PURE__ */ e.jsxDEV(
+  const y = ((D) => q(D, Q.tabNavigation))(o), E = Te(i, "scroll"), x = () => {
+    switch (E) {
+      case "scroll":
+        return "w-full overflow-x-auto overflow-y-hidden scrollbar-thin scrollbar-thumb-border-default scrollbar-track-transparent hover:scrollbar-thumb-secondary/50 py-1";
+      case "wrap":
+        return "flex flex-wrap gap-2";
+      case "dropdown":
+      case "collapsible":
+        return "flex space-x-2";
+      // Will be handled by specific implementations
+      default:
+        return "flex space-x-2";
+    }
+  }, k = /* @__PURE__ */ e.jsxDEV(e.Fragment, { children: r.map((D) => /* @__PURE__ */ e.jsxDEV(
     "button",
     {
-      onClick: () => m(l),
+      onClick: () => m(D),
       className: `
-            ${f} font-bold transition-all duration-300 rounded-t-lg cursor-pointer
-            ${t === l ? "bg-surface text-secondary border-2 border-border-default border-b-0 shadow-secondary -mb-[2px] hover:shadow-lg-accent" : "text-muted border-b-2 border-border-default hover:text-secondary hover:border-secondary"}
+            ${y} font-bold transition-colors duration-200 rounded-t-lg cursor-pointer whitespace-nowrap flex-shrink-0 relative
+            after:content-[''] after:absolute after:left-0 after:right-0 after:-bottom-[2px] after:h-[2px] after:w-full after:scale-x-0 after:origin-center after:transition-transform after:duration-300 after:ease-out
+            before:content-[''] before:absolute before:left-1/2 before:-translate-x-1/2 before:-bottom-[6px] before:w-1.5 before:h-1.5 before:bg-accent before:rotate-45 before:rounded-[2px] before:opacity-0 before:transition-opacity before:duration-200
+            ${s === D ? "text-secondary after:bg-linear-(--gradient-accent) after:shadow-lg-accent after:scale-x-100" : "text-muted hover:text-secondary hover:before:opacity-70"}
+            ${u}
           `,
-      children: l
+      children: D
     },
-    l,
+    D,
     !1,
     {
       fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/TabNavigation.tsx",
-      lineNumber: 28,
+      lineNumber: 217,
       columnNumber: 9
     },
     void 0
   )) }, void 0, !1, {
     fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/TabNavigation.tsx",
-    lineNumber: 26,
+    lineNumber: 215,
+    columnNumber: 5
+  }, void 0);
+  return E === "dropdown" ? /* @__PURE__ */ e.jsxDEV(
+    Ye,
+    {
+      tabs: r,
+      activeTab: s,
+      onTabChange: m,
+      sizeClasses: y,
+      containerClassName: d,
+      anchorClassName: f,
+      menuClassName: p,
+      menuItemClassName: U,
+      dropdownLabel: c,
+      anchorIcon: b,
+      showAnchorLabel: h,
+      anchorAriaLabel: l,
+      closeOnSelect: N
+    },
+    void 0,
+    !1,
+    {
+      fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/TabNavigation.tsx",
+      lineNumber: 240,
+      columnNumber: 7
+    },
+    void 0
+  ) : E === "scroll" ? /* @__PURE__ */ e.jsxDEV("div", { className: `${x()} ${d}`, children: /* @__PURE__ */ e.jsxDEV("div", { className: "w-max mx-auto flex space-x-2", children: k }, void 0, !1, {
+    fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/TabNavigation.tsx",
+    lineNumber: 263,
+    columnNumber: 9
+  }, void 0) }, void 0, !1, {
+    fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/TabNavigation.tsx",
+    lineNumber: 262,
+    columnNumber: 7
+  }, void 0) : /* @__PURE__ */ e.jsxDEV("div", { className: `${x()} ${d}`, children: k }, void 0, !1, {
+    fileName: "/Users/patrick.yang/Projects/CyberUI/src/components/TabNavigation.tsx",
+    lineNumber: 269,
     columnNumber: 5
   }, void 0);
 }, re = {
@@ -5404,34 +5635,34 @@ const xe = he(void 0), Te = () => {
   DISTANCE_THRESHOLD: 100,
   MAX_ANIMATION_SPEED: 5,
   MIN_GLOW_DURATION: 150
-}, qe = (s = {}) => {
+}, tr = (r = {}) => {
   const {
-    glowColor: t = "primary",
+    glowColor: s = "primary",
     sensitivity: m = 2,
-    disabled: a = !1,
+    disabled: o = !1,
     pageLevel: i,
-    variant: f = "default",
-    className: l = ""
-  } = s, o = J(null), d = J(null), h = J(Date.now()), c = J(0), N = J(void 0), u = J([]), x = J(void 0), [U, j] = T({
+    variant: d = "default",
+    className: u = ""
+  } = r, c = B(null), b = B(null), h = B(Date.now()), l = B(0), N = B(void 0), f = B([]), p = B(void 0), [U, I] = V({
     isScrolling: !1,
     direction: null,
     velocity: 0,
     position: 0,
     scrollDistance: 0
-  }), [y, k] = T(!1), [g, E] = T(() => window.innerWidth >= re.MOBILE_BREAKPOINT), [A, w] = T(0), [I, z] = T(i ?? !1);
-  se(() => {
+  }), [y, E] = V(!1), [x, k] = V(() => window.innerWidth >= re.MOBILE_BREAKPOINT), D = B(0), [j, S] = V(i ?? !1);
+  J(() => {
     if (i !== void 0)
-      z(i);
+      S(i);
     else {
-      const r = setTimeout(() => {
-        const n = o.current !== null;
-        z(!n);
+      const n = setTimeout(() => {
+        const a = c.current !== null;
+        S(!a);
       }, 0);
-      return () => clearTimeout(r);
+      return () => clearTimeout(n);
     }
   }, [i]);
-  const C = D((r) => {
-    switch (r) {
+  const O = w((n) => {
+    switch (n) {
       case "transparent":
         return {
           background: "transparent",
@@ -5455,255 +5686,260 @@ const xe = he(void 0), Te = () => {
           boxShadow: "0 0 10px rgba(255, 0, 93, 0.3), inset 0 0 10px rgba(255, 0, 93, 0.1)"
         };
     }
-  }, []), O = D(() => {
-    const r = window.innerWidth < re.MOBILE_BREAKPOINT;
+  }, []), v = w(() => {
+    const n = window.innerWidth < re.MOBILE_BREAKPOINT;
     return {
-      isMobile: r,
-      scrollbarWidth: r ? 12 : 16,
-      arrowSize: r ? 10 : 14,
-      lineSize: r ? 8 : 12,
-      arrowGap: r ? 2 : 4
+      isMobile: n,
+      scrollbarWidth: n ? 12 : 16,
+      arrowSize: n ? 10 : 14,
+      lineSize: n ? 8 : 12,
+      arrowGap: n ? 2 : 4
     };
-  }, []), _ = D((r, n, b, v) => {
-    const p = (v + b) * 2, R = b * 4, $ = (r - p - R) / 2;
-    return Math.floor($ / (n + b));
-  }, []), X = D((r) => {
-    if (I) {
+  }, []), M = w((n, a, C, g) => {
+    const P = (g + C) * 2, _ = C * 4, T = (n - P - _) / 2;
+    return Math.floor(T / (a + C));
+  }, []), z = w((n) => {
+    if (j) {
       if (!document.querySelector("#cyber-page-scrollbar-styles")) {
-        const n = document.createElement("style");
-        n.id = "cyber-page-scrollbar-styles", n.textContent = `
+        const a = document.createElement("style");
+        a.id = "cyber-page-scrollbar-styles", a.textContent = `
           html::-webkit-scrollbar { display: none; }
           html { scrollbar-width: none; -ms-overflow-style: none; }
-        `, document.head.appendChild(n);
+        `, document.head.appendChild(a);
       }
-    } else if (r) {
-      if (r.style.scrollbarWidth = "none", r.style.msOverflowStyle = "none", !document.querySelector("#cyber-scrollbar-styles")) {
-        const n = document.createElement("style");
-        n.id = "cyber-scrollbar-styles", n.textContent = `
+    } else if (n) {
+      if (n.style.scrollbarWidth = "none", n.style.msOverflowStyle = "none", !document.querySelector("#cyber-scrollbar-styles")) {
+        const a = document.createElement("style");
+        a.id = "cyber-scrollbar-styles", a.textContent = `
           .cyber-scrollbar-container::-webkit-scrollbar { display: none; }
-        `, document.head.appendChild(n);
+        `, document.head.appendChild(a);
       }
-      r.classList.add("cyber-scrollbar-container");
+      n.classList.add("cyber-scrollbar-container");
     }
-  }, [I]), L = D((r, n, b, v) => {
-    const p = document.createElement("div"), R = r === "arrow";
-    return R && n ? (p.className = `cyber-arrow cyber-arrow-${n} cyber-arrow-${b}`, p.innerHTML = n === "up" ? "▲" : "▼") : (p.className = `cyber-line cyber-line-${b}`, p.innerHTML = "="), p.style.cssText = `
-      font-size: ${R ? v.arrowSize : v.lineSize}px;
-      color: var(--color-${t});
+  }, [j]), H = w((n, a, C, g) => {
+    const P = document.createElement("div"), _ = n === "arrow";
+    _ && a ? (P.className = `cyber-arrow cyber-arrow-${a} cyber-arrow-${C}`, P.innerHTML = a === "up" ? "▲" : "▼") : (P.className = `cyber-line cyber-line-${C}`, P.innerHTML = "=");
+    const A = g.isMobile ? "none" : `drop-shadow(0 0 6px var(--color-${s}))
+         drop-shadow(0 0 12px var(--color-${s}))
+         drop-shadow(0 0 18px var(--color-${s}))`;
+    return P.style.cssText = `
+      font-size: ${_ ? g.arrowSize : g.lineSize}px;
+      color: var(--color-${s});
       opacity: 0;
       transition: all 0.2s ease;
-      filter:
-        drop-shadow(0 0 6px var(--color-${t}))
-        drop-shadow(0 0 12px var(--color-${t}))
-        drop-shadow(0 0 18px var(--color-${t}));
+      filter: ${A};
       line-height: 1;
       font-weight: bold;
-    `, p;
-  }, [t]), K = D(() => {
-    if (I)
+    `, P;
+  }, [s]), F = w(() => {
+    if (j)
       return {
         height: window.innerHeight,
         top: 0,
         right: 0
       };
     {
-      const n = o.current.getBoundingClientRect();
+      const a = c.current.getBoundingClientRect();
       return {
-        height: n.height,
-        top: n.top,
-        right: window.innerWidth - n.right
+        height: a.height,
+        top: a.top,
+        right: window.innerWidth - a.right
       };
     }
-  }, [I]), Z = D(() => {
-    if (a || !I && !o.current || (d.current && d.current.remove(), !(I ? document.body.scrollHeight > window.innerHeight : o.current.scrollHeight > o.current.clientHeight))) return;
-    const n = O(), b = K(), v = _(b.height, n.arrowSize, n.arrowGap, n.lineSize);
-    X(I ? void 0 : o.current || void 0);
-    const p = document.createElement("div");
-    p.className = `cyber-scrollbar ${l}`.trim();
-    const S = n.isMobile ? "transparent" : f, $ = C(S);
-    p.style.cssText = `
+  }, [j]), ee = w(() => {
+    if (o || !j && !c.current || (b.current && b.current.remove(), !(j ? document.body.scrollHeight > window.innerHeight : c.current.scrollHeight > c.current.clientHeight))) return;
+    const a = v(), C = F(), g = M(C.height, a.arrowSize, a.arrowGap, a.lineSize);
+    z(j ? void 0 : c.current || void 0);
+    const P = document.createElement("div");
+    P.className = `cyber-scrollbar ${u}`.trim();
+    const A = a.isMobile ? "transparent" : d, T = O(A);
+    P.style.cssText = `
       position: fixed;
-      top: ${b.top}px;
-      right: ${b.right}px;
-      width: ${n.scrollbarWidth}px;
-      height: ${b.height}px;
+      top: ${C.top}px;
+      right: ${C.right}px;
+      width: ${a.scrollbarWidth}px;
+      height: ${C.height}px;
       pointer-events: none;
       z-index: 9999;
-      display: ${g ? "flex" : "none"};
+      display: ${x ? "flex" : "none"};
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      gap: ${n.arrowGap}px;
-      background: ${$.background};
-      backdrop-filter: ${$.backdropFilter};
-      border-radius: ${I ? "4px 0 0 4px" : "4px"};
-      border: ${$.border};
-      box-shadow: ${$.boxShadow};
+      gap: ${a.arrowGap}px;
+      background: ${T.background};
+      backdrop-filter: ${T.backdropFilter};
+      border-radius: ${j ? "4px 0 0 4px" : "4px"};
+      border: ${T.border};
+      box-shadow: ${T.boxShadow};
     `;
-    for (let V = 0; V < v; V++)
-      p.appendChild(L("arrow", "up", V, n));
-    for (let V = 0; V < 2; V++)
-      p.appendChild(L("line", void 0, V, n));
-    for (let V = 0; V < v; V++)
-      p.appendChild(L("arrow", "down", V, n));
-    document.body.appendChild(p), d.current = p;
-    const P = I ? void 0 : () => {
-      const V = o.current;
-      if (V) {
-        const ee = V.getBoundingClientRect();
-        p.style.top = `${ee.top}px`, p.style.right = `${window.innerWidth - ee.right}px`, p.style.height = `${ee.height}px`;
+    for (let R = 0; R < g; R++)
+      P.appendChild(H("arrow", "up", R, a));
+    for (let R = 0; R < 2; R++)
+      P.appendChild(H("line", void 0, R, a));
+    for (let R = 0; R < g; R++)
+      P.appendChild(H("arrow", "down", R, a));
+    document.body.appendChild(P), b.current = P;
+    const L = j ? void 0 : () => {
+      const R = c.current;
+      if (R) {
+        const te = R.getBoundingClientRect();
+        P.style.top = `${te.top}px`, P.style.right = `${window.innerWidth - te.right}px`, P.style.height = `${te.height}px`;
       }
     };
-    return P && (window.addEventListener("resize", P), window.addEventListener("scroll", P)), () => {
-      p.remove(), !I && o.current && o.current.classList.remove("cyber-scrollbar-container"), P && (window.removeEventListener("resize", P), window.removeEventListener("scroll", P));
+    return L && (window.addEventListener("resize", L), window.addEventListener("scroll", L)), () => {
+      P.remove(), !j && c.current && c.current.classList.remove("cyber-scrollbar-container"), L && (window.removeEventListener("resize", L), window.removeEventListener("scroll", L));
     };
-  }, [a, I, g, X, K, L, O, _, C, f, l]), W = D((r, n) => {
-    const b = Math.max(1, Math.min(3, Math.ceil(r * 0.8))), v = Math.floor(n / re.DISTANCE_THRESHOLD);
-    return b + v;
-  }, []), F = D((r, n, b) => {
-    const v = Array.from(r).filter(
-      (R) => R.classList.contains(`cyber-arrow-${n}`)
-    ), p = Math.min(b, v.length);
-    return n === "up" ? v.slice(-p) : v.slice(0, p);
-  }, []), G = D((r, n, b) => {
-    const v = Math.min(n * m, re.MAX_ANIMATION_SPEED), p = Math.max(300 / v, re.MIN_GLOW_DURATION), R = Math.max(40, 80 / v), S = b === "up" ? [...r].reverse() : r;
-    S.forEach(($) => {
-      $.style.opacity = "0.3";
-    }), S.forEach(($, P) => {
-      const V = P * R, ee = setTimeout(() => {
-        $.style.opacity = "1";
-        const me = setTimeout(() => {
-          $.style.opacity = "0.3";
-        }, p);
-        u.current.push(me);
-      }, V);
-      u.current.push(ee);
+  }, [o, j, x, z, F, H, v, M, O, d, u]), Z = w((n, a) => {
+    const C = Math.max(1, Math.min(3, Math.ceil(n * 0.8))), g = Math.floor(a / re.DISTANCE_THRESHOLD);
+    return C + g;
+  }, []), Y = w((n, a, C) => {
+    const g = Array.from(n).filter(
+      (_) => _.classList.contains(`cyber-arrow-${a}`)
+    ), P = Math.min(C, g.length);
+    return a === "up" ? g.slice(-P) : g.slice(0, P);
+  }, []), W = w((n, a, C) => {
+    const g = Math.min(a * m, re.MAX_ANIMATION_SPEED), P = window.innerWidth < re.MOBILE_BREAKPOINT, _ = Math.max(300 / g, re.MIN_GLOW_DURATION) * (P ? 1.5 : 1), A = Math.max(40, 80 / g) * (P ? 1.25 : 1), T = C === "up" ? [...n].reverse() : n;
+    T.forEach((L) => {
+      L.style.opacity = "0.3";
+    }), T.forEach((L, R) => {
+      const te = R * A, he = setTimeout(() => {
+        L.style.opacity = "1";
+        const je = setTimeout(() => {
+          L.style.opacity = "0.3";
+        }, _);
+        f.current.push(je);
+      }, te);
+      f.current.push(he);
     });
-  }, [m]), M = D(() => {
-    if (!d.current) return;
-    const { isScrolling: r, direction: n, velocity: b, scrollDistance: v } = U, p = d.current.querySelectorAll(".cyber-arrow"), R = d.current.querySelectorAll(".cyber-line");
-    if (r && n) {
-      R.forEach(($) => {
-        $.style.opacity = "0";
+  }, [m]), K = w(() => {
+    if (!b.current) return;
+    const { isScrolling: n, direction: a, velocity: C, scrollDistance: g } = U, P = b.current.querySelectorAll(".cyber-arrow"), _ = b.current.querySelectorAll(".cyber-line");
+    if (n && a) {
+      _.forEach((T) => {
+        T.style.opacity = "0";
       });
-      const S = W(b, v);
-      if (S !== A) {
-        u.current.forEach((P) => clearTimeout(P)), u.current = [], p.forEach((P) => {
-          P.style.opacity = "0";
+      const A = Z(C, g);
+      if (A !== D.current) {
+        f.current.forEach((L) => clearTimeout(L)), f.current = [], P.forEach((L) => {
+          L.style.opacity = "0";
         });
-        const $ = F(Array.from(p), n, S);
-        G($, b, n), w(S);
+        const T = Y(Array.from(P), a, A);
+        W(T, C, a), D.current = A;
       }
     } else
-      u.current.forEach((S) => clearTimeout(S)), u.current = [], w(0), p.forEach((S) => {
-        S.style.opacity = "0";
-      }), y && R.forEach((S) => {
-        S.style.opacity = "0.6";
+      f.current.forEach((A) => clearTimeout(A)), f.current = [], D.current = 0, P.forEach((A) => {
+        A.style.opacity = "0";
+      }), y && _.forEach((A) => {
+        A.style.opacity = "0.6";
       });
-  }, [U, y, G, W, F, A]), B = D(() => {
-    if (a || !I && !o.current) return;
-    const r = Date.now(), n = I ? {
+  }, [U, y, W, Z, Y]), $ = B(null), X = w(() => {
+    if (o || !j && !c.current) return;
+    const n = Date.now(), a = j ? {
       currentScrollTop: window.scrollY,
       scrollHeight: document.body.scrollHeight,
       clientHeight: window.innerHeight
     } : {
-      currentScrollTop: o.current.scrollTop,
-      scrollHeight: o.current.scrollHeight,
-      clientHeight: o.current.clientHeight
-    }, b = r - h.current, v = n.currentScrollTop - c.current, R = Math.abs(v) / Math.max(b, 1) * re.VELOCITY_MULTIPLIER, S = v > 0 ? "down" : v < 0 ? "up" : null, $ = n.currentScrollTop / (n.scrollHeight - n.clientHeight);
-    y || k(!0);
-    const P = window.innerWidth < re.MOBILE_BREAKPOINT;
-    P && !g && E(!0), j((V) => ({
+      currentScrollTop: c.current.scrollTop,
+      scrollHeight: c.current.scrollHeight,
+      clientHeight: c.current.clientHeight
+    }, C = n - h.current, g = a.currentScrollTop - l.current, _ = Math.abs(g) / Math.max(C, 1) * re.VELOCITY_MULTIPLIER, A = g > 0 ? "down" : g < 0 ? "up" : null, T = a.currentScrollTop / (a.scrollHeight - a.clientHeight);
+    y || E(!0);
+    const L = window.innerWidth < re.MOBILE_BREAKPOINT;
+    L && !x && k(!0), I((R) => ({
       isScrolling: !0,
-      direction: S,
-      velocity: R,
-      position: $,
-      scrollDistance: V.direction !== S ? Math.abs(v) : V.scrollDistance + Math.abs(v)
-    })), N.current && clearTimeout(N.current), x.current && clearTimeout(x.current), N.current = setTimeout(() => {
-      u.current.forEach((V) => clearTimeout(V)), u.current = [], j((V) => ({
-        ...V,
+      direction: A,
+      velocity: _,
+      position: T,
+      scrollDistance: R.direction !== A ? Math.abs(g) : R.scrollDistance + Math.abs(g)
+    })), N.current && clearTimeout(N.current), p.current && clearTimeout(p.current), N.current = setTimeout(() => {
+      f.current.forEach((R) => clearTimeout(R)), f.current = [], I((R) => ({
+        ...R,
         isScrolling: !1,
         velocity: 0,
         scrollDistance: 0
-      })), P && (x.current = setTimeout(() => {
-        E(!1);
+      })), L && (p.current = setTimeout(() => {
+        k(!1);
       }, re.MOBILE_HIDE_DELAY));
-    }, re.STABLE_TIMEOUT), h.current = r, c.current = n.currentScrollTop;
-  }, [a, I, y, g]);
-  return se(() => {
-    if (a || !I && !o.current) return;
-    const r = Z(), n = I ? window : o.current;
-    return n.addEventListener("scroll", B, { passive: !0 }), () => {
-      n.removeEventListener("scroll", B), N.current && clearTimeout(N.current), x.current && clearTimeout(x.current), u.current.forEach((b) => clearTimeout(b)), r?.();
+    }, re.STABLE_TIMEOUT), h.current = n, l.current = a.currentScrollTop;
+  }, [o, j, y, x]), t = w(() => {
+    $.current === null && ($.current = requestAnimationFrame(() => {
+      $.current = null, X();
+    }));
+  }, [X]);
+  return J(() => {
+    if (o || !j && !c.current) return;
+    const n = ee(), a = j ? window : c.current;
+    return a.addEventListener("scroll", t, { passive: !0 }), () => {
+      a.removeEventListener("scroll", t), N.current && clearTimeout(N.current), p.current && clearTimeout(p.current), f.current.forEach((C) => clearTimeout(C)), $.current !== null && (cancelAnimationFrame($.current), $.current = null), n?.();
     };
-  }, [Z, B, a, I]), se(() => {
-    M();
-  }, [M]), o;
-}, Ke = ({ children: s, position: t = "top-right", defaultDuration: m = 2500 }) => {
-  const [a, i] = T([]), f = D(
-    (c, N, u, x = {}) => {
-      const U = Date.now().toString(), { autoHide: j = !0, duration: y = m } = x;
-      return i((k) => [...k, { id: U, type: c, title: N, message: u }]), j && setTimeout(() => {
+  }, [ee, t, o, j]), J(() => {
+    K();
+  }, [K]), c;
+}, nr = ({ children: r, position: s = "top-right", defaultDuration: m = 2500 }) => {
+  const [o, i] = V([]), d = w(
+    (l, N, f, p = {}) => {
+      const U = Date.now().toString(), { autoHide: I = !0, duration: y = m } = p;
+      return i((E) => [...E, { id: U, type: l, title: N, message: f }]), I && setTimeout(() => {
         i(
-          (k) => k.map((g) => g.id === U ? { ...g, isClosing: !0 } : g)
+          (E) => E.map((x) => x.id === U ? { ...x, isClosing: !0 } : x)
         ), setTimeout(() => {
-          i((k) => k.filter((g) => g.id !== U));
+          i((E) => E.filter((x) => x.id !== U));
         }, 500);
       }, y), U;
     },
     [m]
-  ), l = D((c) => {
+  ), u = w((l) => {
     i(
-      (N) => N.map((u) => u.id === c ? { ...u, isClosing: !0 } : u)
+      (N) => N.map((f) => f.id === l ? { ...f, isClosing: !0 } : f)
     ), setTimeout(() => {
-      i((N) => N.filter((u) => u.id !== c));
+      i((N) => N.filter((f) => f.id !== l));
     }, 500);
-  }, []), o = D(() => {
+  }, []), c = w(() => {
     i([]);
-  }, []), d = D((c, N) => {
+  }, []), b = w((l, N) => {
     i(
-      (u) => u.map((x) => x.id === c ? { ...x, width: N } : x)
+      (f) => f.map((p) => p.id === l ? { ...p, width: N } : p)
     );
   }, []), h = {
-    notifications: a,
-    showNotification: f,
-    hideNotification: l,
-    clearAllNotifications: o
+    notifications: o,
+    showNotification: d,
+    hideNotification: u,
+    clearAllNotifications: c
   };
-  return /* @__PURE__ */ e.jsxDEV(xe.Provider, { value: h, children: [
-    s,
-    a.length > 0 && /* @__PURE__ */ e.jsxDEV("div", { className: `fixed z-50 ${ze(t)}`, children: a.map((c, N) => /* @__PURE__ */ e.jsxDEV(
+  return /* @__PURE__ */ e.jsxDEV(ge.Provider, { value: h, children: [
+    r,
+    o.length > 0 && /* @__PURE__ */ e.jsxDEV("div", { className: `fixed z-50 ${Ke(s)}`, children: o.map((l, N) => /* @__PURE__ */ e.jsxDEV(
       "div",
       {
         className: "absolute",
         style: {
-          right: t.includes("right") ? 0 : void 0,
-          left: t.includes("left") ? 0 : void 0,
+          right: s.includes("right") ? 0 : void 0,
+          left: s.includes("left") ? 0 : void 0,
           top: `${N * 70}px`,
-          width: c.width ? `${c.width}px` : "auto"
+          width: l.width ? `${l.width}px` : "auto"
         },
         children: /* @__PURE__ */ e.jsxDEV(
           "div",
           {
-            className: `transform transition-all duration-500 ease-out scale-75 opacity-90 w-full ${t.includes("right") ? "flex justify-end" : "flex justify-start"} ${c.isClosing ? `${t.includes("right") ? "translate-x-full" : "-translate-x-full"} opacity-0` : "translate-x-0 opacity-90"}`,
+            className: `transform transition-all duration-500 ease-out scale-75 opacity-90 w-full ${s.includes("right") ? "flex justify-end" : "flex justify-start"} ${l.isClosing ? `${s.includes("right") ? "translate-x-full" : "-translate-x-full"} opacity-0` : "translate-x-0 opacity-90"}`,
             style: {
               whiteSpace: "nowrap",
-              transformOrigin: t.includes("right") ? "right center" : "left center",
-              transform: c.isClosing ? `translateX(${t.includes("right") ? "100%" : "-100%"}) scale(0.75)` : `translateX(${c.width ? "0px" : t.includes("right") ? "100%" : "-100%"}) scale(0.75)`
+              transformOrigin: s.includes("right") ? "right center" : "left center",
+              transform: l.isClosing ? `translateX(${s.includes("right") ? "100%" : "-100%"}) scale(0.75)` : `translateX(${l.width ? "0px" : s.includes("right") ? "100%" : "-100%"}) scale(0.75)`
             },
-            ref: (u) => {
-              if (u && !c.width) {
-                const x = u.scrollWidth;
-                d(c.id, x);
+            ref: (f) => {
+              if (f && !l.width) {
+                const p = f.scrollWidth;
+                b(l.id, p);
               }
             },
             children: /* @__PURE__ */ e.jsxDEV(
-              le,
+              me,
               {
-                type: c.type,
-                title: c.title,
-                message: c.message,
-                onClose: () => l(c.id),
+                type: l.type,
+                title: l.title,
+                message: l.message,
+                onClose: () => u(l.id),
                 size: "sm"
               },
               void 0,
@@ -5726,7 +5962,7 @@ const xe = he(void 0), Te = () => {
           void 0
         )
       },
-      c.id,
+      l.id,
       !1,
       {
         fileName: "/Users/patrick.yang/Projects/CyberUI/src/contexts/NotificationContext.tsx",
@@ -5744,40 +5980,40 @@ const xe = he(void 0), Te = () => {
     lineNumber: 80,
     columnNumber: 5
   }, void 0);
-}, ze = (s) => {
-  const t = {
+}, Ke = (r) => {
+  const s = {
     "top-right": "top-4 right-4",
     "top-left": "top-4 left-4",
     "bottom-right": "bottom-4 right-4",
     "bottom-left": "bottom-4 left-4"
   };
-  return t[s] || t["top-right"];
-}, Je = "1.3.0";
+  return s[r] || s["top-right"];
+}, ar = "1.3.0";
 export {
   de as Badge,
-  H as Button,
-  Q as Card,
-  De as Carousel,
-  Le as CircularProgress,
-  Ke as CyberNotificationProvider,
-  Ye as ElementsTab,
-  Xe as FeedbackTab,
-  We as HomeTab,
-  ne as Image,
-  pe as Input,
-  Ge as InteractiveTab,
-  _e as LinearProgress,
-  te as Modal,
-  le as Notification,
-  q as RESPONSIVE_SIZE_MAPS,
-  Me as SegmentedProgress,
-  Re as Select,
-  Oe as Skeleton,
-  Ze as TabNavigation,
-  Ae as Toggle,
-  He as combineResponsiveClasses,
-  Y as getResponsiveClasses,
-  Te as useCyberNotifications,
-  qe as useCyberScrollbar,
-  Je as version
+  G as Button,
+  se as Card,
+  $e as Carousel,
+  Be as CircularProgress,
+  nr as CyberNotificationProvider,
+  er as ElementsTab,
+  rr as FeedbackTab,
+  Je as HomeTab,
+  ae as Image,
+  ye as Input,
+  Qe as InteractiveTab,
+  We as LinearProgress,
+  ne as Modal,
+  me as Notification,
+  Q as RESPONSIVE_SIZE_MAPS,
+  He as SegmentedProgress,
+  ze as Select,
+  Ge as Skeleton,
+  sr as TabNavigation,
+  Oe as Toggle,
+  Ze as combineResponsiveClasses,
+  q as getResponsiveClasses,
+  Me as useCyberNotifications,
+  tr as useCyberScrollbar,
+  ar as version
 };