@iniguezmarc/design-system 0.0.3 → 0.0.5

package/dist/index.es.js

@@ -1,5 +1,5 @@
-import se, { useState as C, useEffect as B } from "react";
-var S = { exports: {} }, y = {};
+import se, { forwardRef as ne, useState as I, useEffect as Q } from "react";
+var W = { exports: {} }, A = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -9,29 +9,29 @@ var S = { exports: {} }, y = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var z;
-function ne() {
-  if (z) return y;
-  z = 1;
-  var o = Symbol.for("react.transitional.element"), d = Symbol.for("react.fragment");
-  function i(s, a, t) {
+var X;
+function oe() {
+  if (X) return A;
+  X = 1;
+  var o = Symbol.for("react.transitional.element"), c = Symbol.for("react.fragment");
+  function i(n, a, t) {
     var u = null;
     if (t !== void 0 && (u = "" + t), a.key !== void 0 && (u = "" + a.key), "key" in a) {
       t = {};
-      for (var c in a)
-        c !== "key" && (t[c] = a[c]);
+      for (var s in a)
+        s !== "key" && (t[s] = a[s]);
     } else t = a;
     return a = t.ref, {
       $$typeof: o,
-      type: s,
+      type: n,
       key: u,
       ref: a !== void 0 ? a : null,
       props: t
     };
   }
-  return y.Fragment = d, y.jsx = i, y.jsxs = i, y;
+  return A.Fragment = c, A.jsx = i, A.jsxs = i, A;
 }
-var N = {};
+var O = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -41,406 +41,495 @@ var N = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var F;
-function oe() {
-  return F || (F = 1, process.env.NODE_ENV !== "production" && function() {
-    function o(e) {
-      if (e == null) return null;
-      if (typeof e == "function")
-        return e.$$typeof === re ? null : e.displayName || e.name || null;
-      if (typeof e == "string") return e;
-      switch (e) {
-        case k:
+var J;
+function le() {
+  return J || (J = 1, process.env.NODE_ENV !== "production" && function() {
+    function o(r) {
+      if (r == null) return null;
+      if (typeof r == "function")
+        return r.$$typeof === re ? null : r.displayName || r.name || null;
+      if (typeof r == "string") return r;
+      switch (r) {
+        case w:
           return "Fragment";
-        case G:
+        case N:
           return "Profiler";
-        case U:
+        case $:
           return "StrictMode";
-        case Z:
+        case R:
           return "Suspense";
-        case Q:
+        case P:
           return "SuspenseList";
         case ee:
           return "Activity";
       }
-      if (typeof e == "object")
-        switch (typeof e.tag == "number" && console.error(
+      if (typeof r == "object")
+        switch (typeof r.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), e.$$typeof) {
-          case E:
+        ), r.$$typeof) {
+          case y:
             return "Portal";
-          case q:
-            return e.displayName || "Context";
-          case X:
-            return (e._context.displayName || "Context") + ".Consumer";
-          case J:
-            var n = e.render;
-            return e = e.displayName, e || (e = n.displayName || n.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case K:
-            return n = e.displayName || null, n !== null ? n : o(e.type) || "Memo";
+          case _:
+            return r.displayName || "Context";
+          case E:
+            return (r._context.displayName || "Context") + ".Consumer";
           case T:
-            n = e._payload, e = e._init;
+            var l = r.render;
+            return r = r.displayName, r || (r = l.displayName || l.name || "", r = r !== "" ? "ForwardRef(" + r + ")" : "ForwardRef"), r;
+          case C:
+            return l = r.displayName || null, l !== null ? l : o(r.type) || "Memo";
+          case D:
+            l = r._payload, r = r._init;
             try {
-              return o(e(n));
+              return o(r(l));
             } catch {
             }
         }
       return null;
     }
-    function d(e) {
-      return "" + e;
+    function c(r) {
+      return "" + r;
     }
-    function i(e) {
+    function i(r) {
       try {
-        d(e);
-        var n = !1;
+        c(r);
+        var l = !1;
       } catch {
-        n = !0;
+        l = !0;
       }
-      if (n) {
-        n = console;
-        var x = n.error, m = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return x.call(
-          n,
+      if (l) {
+        l = console;
+        var g = l.error, b = typeof Symbol == "function" && Symbol.toStringTag && r[Symbol.toStringTag] || r.constructor.name || "Object";
+        return g.call(
+          l,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          m
-        ), d(e);
+          b
+        ), c(r);
       }
     }
-    function s(e) {
-      if (e === k) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === T)
+    function n(r) {
+      if (r === w) return "<>";
+      if (typeof r == "object" && r !== null && r.$$typeof === D)
         return "<...>";
       try {
-        var n = o(e);
-        return n ? "<" + n + ">" : "<...>";
+        var l = o(r);
+        return l ? "<" + l + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
     function a() {
-      var e = R.A;
-      return e === null ? null : e.getOwner();
+      var r = L.A;
+      return r === null ? null : r.getOwner();
     }
     function t() {
       return Error("react-stack-top-frame");
     }
-    function u(e) {
-      if (L.call(e, "key")) {
-        var n = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (n && n.isReactWarning) return !1;
+    function u(r) {
+      if (F.call(r, "key")) {
+        var l = Object.getOwnPropertyDescriptor(r, "key").get;
+        if (l && l.isReactWarning) return !1;
       }
-      return e.key !== void 0;
+      return r.key !== void 0;
     }
-    function c(e, n) {
-      function x() {
-        M || (M = !0, console.error(
+    function s(r, l) {
+      function g() {
+        V || (V = !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
+          l
         ));
       }
-      x.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: x,
+      g.isReactWarning = !0, Object.defineProperty(r, "key", {
+        get: g,
         configurable: !0
       });
     }
-    function p() {
-      var e = o(this.type);
-      return D[e] || (D[e] = !0, console.error(
+    function x() {
+      var r = o(this.type);
+      return H[r] || (H[r] = !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."
-      )), e = this.props.ref, e !== void 0 ? e : null;
+      )), r = this.props.ref, r !== void 0 ? r : null;
     }
-    function f(e, n, x, m, _, O) {
-      var g = x.ref;
-      return e = {
-        $$typeof: h,
-        type: e,
-        key: n,
-        props: x,
-        _owner: m
-      }, (g !== void 0 ? g : null) !== null ? Object.defineProperty(e, "ref", {
+    function f(r, l, g, b, S, Y) {
+      var h = g.ref;
+      return r = {
+        $$typeof: j,
+        type: r,
+        key: l,
+        props: g,
+        _owner: b
+      }, (h !== void 0 ? h : null) !== null ? Object.defineProperty(r, "ref", {
         enumerable: !1,
-        get: p
-      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        get: x
+      }) : Object.defineProperty(r, "ref", { enumerable: !1, value: null }), r._store = {}, Object.defineProperty(r._store, "validated", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: 0
-      }), Object.defineProperty(e, "_debugInfo", {
+      }), Object.defineProperty(r, "_debugInfo", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: null
-      }), Object.defineProperty(e, "_debugStack", {
+      }), Object.defineProperty(r, "_debugStack", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: _
-      }), Object.defineProperty(e, "_debugTask", {
+        value: S
+      }), Object.defineProperty(r, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: O
-      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+        value: Y
+      }), Object.freeze && (Object.freeze(r.props), Object.freeze(r)), r;
     }
-    function l(e, n, x, m, _, O) {
-      var g = n.children;
-      if (g !== void 0)
-        if (m)
-          if (te(g)) {
-            for (m = 0; m < g.length; m++)
-              b(g[m]);
-            Object.freeze && Object.freeze(g);
+    function d(r, l, g, b, S, Y) {
+      var h = l.children;
+      if (h !== void 0)
+        if (b)
+          if (te(h)) {
+            for (b = 0; b < h.length; b++)
+              m(h[b]);
+            Object.freeze && Object.freeze(h);
           } 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 b(g);
-      if (L.call(n, "key")) {
-        g = o(e);
-        var j = Object.keys(n).filter(function(ae) {
+        else m(h);
+      if (F.call(l, "key")) {
+        h = o(r);
+        var k = Object.keys(l).filter(function(ae) {
           return ae !== "key";
         });
-        m = 0 < j.length ? "{key: someKey, " + j.join(": ..., ") + ": ...}" : "{key: someKey}", W[g + m] || (j = 0 < j.length ? "{" + j.join(": ..., ") + ": ...}" : "{}", console.error(
+        b = 0 < k.length ? "{key: someKey, " + k.join(": ..., ") + ": ...}" : "{key: someKey}", q[h + b] || (k = 0 < k.length ? "{" + k.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} />`,
-          m,
-          g,
-          j,
-          g
-        ), W[g + m] = !0);
+          b,
+          h,
+          k,
+          h
+        ), q[h + b] = !0);
       }
-      if (g = null, x !== void 0 && (i(x), g = "" + x), u(n) && (i(n.key), g = "" + n.key), "key" in n) {
-        x = {};
-        for (var P in n)
-          P !== "key" && (x[P] = n[P]);
-      } else x = n;
-      return g && c(
-        x,
-        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      if (h = null, g !== void 0 && (i(g), h = "" + g), u(l) && (i(l.key), h = "" + l.key), "key" in l) {
+        g = {};
+        for (var z in l)
+          z !== "key" && (g[z] = l[z]);
+      } else g = l;
+      return h && s(
+        g,
+        typeof r == "function" ? r.displayName || r.name || "Unknown" : r
       ), f(
-        e,
+        r,
+        h,
         g,
-        x,
         a(),
-        _,
-        O
+        S,
+        Y
       );
     }
-    function b(e) {
-      v(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === T && (e._payload.status === "fulfilled" ? v(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    function m(r) {
+      p(r) ? r._store && (r._store.validated = 1) : typeof r == "object" && r !== null && r.$$typeof === D && (r._payload.status === "fulfilled" ? p(r._payload.value) && r._payload.value._store && (r._payload.value._store.validated = 1) : r._store && (r._store.validated = 1));
     }
-    function v(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === h;
+    function p(r) {
+      return typeof r == "object" && r !== null && r.$$typeof === j;
     }
-    var w = se, h = Symbol.for("react.transitional.element"), E = Symbol.for("react.portal"), k = Symbol.for("react.fragment"), U = Symbol.for("react.strict_mode"), G = Symbol.for("react.profiler"), X = Symbol.for("react.consumer"), q = Symbol.for("react.context"), J = Symbol.for("react.forward_ref"), Z = Symbol.for("react.suspense"), Q = Symbol.for("react.suspense_list"), K = Symbol.for("react.memo"), T = Symbol.for("react.lazy"), ee = Symbol.for("react.activity"), re = Symbol.for("react.client.reference"), R = w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, L = Object.prototype.hasOwnProperty, te = Array.isArray, A = console.createTask ? console.createTask : function() {
+    var v = se, j = Symbol.for("react.transitional.element"), y = Symbol.for("react.portal"), w = Symbol.for("react.fragment"), $ = Symbol.for("react.strict_mode"), N = Symbol.for("react.profiler"), E = Symbol.for("react.consumer"), _ = Symbol.for("react.context"), T = Symbol.for("react.forward_ref"), R = Symbol.for("react.suspense"), P = Symbol.for("react.suspense_list"), C = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), ee = Symbol.for("react.activity"), re = Symbol.for("react.client.reference"), L = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, F = Object.prototype.hasOwnProperty, te = Array.isArray, B = console.createTask ? console.createTask : function() {
       return null;
     };
-    w = {
-      react_stack_bottom_frame: function(e) {
-        return e();
+    v = {
+      react_stack_bottom_frame: function(r) {
+        return r();
       }
     };
-    var M, D = {}, Y = w.react_stack_bottom_frame.bind(
-      w,
+    var V, H = {}, G = v.react_stack_bottom_frame.bind(
+      v,
       t
-    )(), I = A(s(t)), W = {};
-    N.Fragment = k, N.jsx = function(e, n, x) {
-      var m = 1e4 > R.recentlyCreatedOwnerStacks++;
-      return l(
-        e,
-        n,
-        x,
+    )(), U = B(n(t)), q = {};
+    O.Fragment = w, O.jsx = function(r, l, g) {
+      var b = 1e4 > L.recentlyCreatedOwnerStacks++;
+      return d(
+        r,
+        l,
+        g,
         !1,
-        m ? Error("react-stack-top-frame") : Y,
-        m ? A(s(e)) : I
+        b ? Error("react-stack-top-frame") : G,
+        b ? B(n(r)) : U
       );
-    }, N.jsxs = function(e, n, x) {
-      var m = 1e4 > R.recentlyCreatedOwnerStacks++;
-      return l(
-        e,
-        n,
-        x,
+    }, O.jsxs = function(r, l, g) {
+      var b = 1e4 > L.recentlyCreatedOwnerStacks++;
+      return d(
+        r,
+        l,
+        g,
         !0,
-        m ? Error("react-stack-top-frame") : Y,
-        m ? A(s(e)) : I
+        b ? Error("react-stack-top-frame") : G,
+        b ? B(n(r)) : U
       );
     };
-  }()), N;
+  }()), O;
 }
-process.env.NODE_ENV === "production" ? S.exports = ne() : S.exports = oe();
-var r = S.exports;
-const le = ({
+process.env.NODE_ENV === "production" ? W.exports = oe() : W.exports = le();
+var e = W.exports;
+const ie = ({
   src: o,
-  alt: d = "Avatar",
+  alt: c = "Avatar",
   size: i = "md",
-  imageFit: s = "cover",
+  imageFit: n = "cover",
   customStyles: a = {},
-  className: t = ""
+  className: t = "",
+  borderColor: u = "border-gray-200",
+  darkBorderColor: s = "dark:border-gray-700",
+  backgroundColor: x = "bg-gray-100",
+  darkBackgroundColor: f = "dark:bg-gray-800",
+  loading: d = "lazy"
 }) => {
-  const u = {
+  const m = {
     sm: "h-8 w-8",
     md: "h-12 w-12",
     lg: "h-16 w-16",
     xl: "h-32 w-32"
-  }, c = s === "contain" ? "object-contain" : "object-cover";
-  return /* @__PURE__ */ r.jsx("div", { className: `
-      ds-avatar relative rounded-full overflow-hidden bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 flex-shrink-0
-      ${u[i]}
-      ${a.container || ""}
-      ${t}
-    `, children: /* @__PURE__ */ r.jsx(
+  }, p = n === "contain" ? "object-contain" : "object-cover", v = `border ${u} ${s}`, j = `${x} ${f}`;
+  return /* @__PURE__ */ e.jsx("div", { className: `
+            ds-avatar relative rounded-full overflow-hidden flex-shrink-0
+            ${m[i]}
+            ${j}
+            ${v}
+            ${a.container || ""}
+            ${t}
+        `, children: /* @__PURE__ */ e.jsx(
     "img",
     {
       src: o,
-      alt: d,
+      alt: c,
+      loading: d,
+      decoding: "async",
       className: `
-          w-full h-full 
-          ${c}
-          ${a.image || ""}
-        `
+                    w-full h-full 
+                    ${p}
+                    ${a.image || ""}
+                `
     }
   ) });
-}, H = ({
+}, K = ({
   label: o,
-  variant: d = "primary",
+  variant: c = "primary",
   customStyles: i = {},
-  className: s = ""
+  className: n = "",
+  endIcon: a,
+  // Default Colors
+  primaryColor: t = "bg-blue-100 text-blue-800",
+  darkPrimaryColor: u = "dark:bg-blue-900/50 dark:text-blue-200",
+  secondaryColor: s = "bg-gray-100 text-gray-800",
+  darkSecondaryColor: x = "dark:bg-gray-700 dark:text-gray-300",
+  outlineColor: f = "border border-gray-300 text-gray-600 bg-transparent",
+  darkOutlineColor: d = "dark:border-gray-600 dark:text-gray-400",
+  successColor: m = "bg-green-100 text-green-800",
+  darkSuccessColor: p = "dark:bg-green-900/50 dark:text-green-200"
 }) => {
-  const a = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium transition-colors", t = {
-    primary: "bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-200",
-    secondary: "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300",
-    outline: "border border-gray-300 text-gray-600 dark:border-gray-600 dark:text-gray-400 bg-transparent",
-    success: "bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-200"
+  const v = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium transition-colors gap-1", j = {
+    primary: `${t} ${u}`,
+    secondary: `${s} ${x}`,
+    outline: `${f} ${d}`,
+    success: `${m} ${p}`
   };
-  return /* @__PURE__ */ r.jsx("span", { className: `
-      ds-badge
-      ${a} 
-      ${t[d]}
-      ${i.container || ""}
-      ${s}
-    `, children: o });
-}, $ = ({
+  return /* @__PURE__ */ e.jsxs("span", { className: `
+            ds-badge
+            ${v} 
+            ${j[c]}
+            ${i.container || ""}
+            ${n}
+        `, children: [
+    /* @__PURE__ */ e.jsx("span", { className: i.label || "", children: o }),
+    a && /* @__PURE__ */ e.jsx("span", { className: "flex items-center", children: a })
+  ] });
+}, M = ({
   label: o,
-  variant: d = "primary",
+  variant: c = "primary",
   size: i = "medium",
-  onClick: s,
+  onClick: n,
   className: a = "",
-  href: t,
-  target: u
+  customStyles: t = {},
+  href: u,
+  target: s,
+  // Default Colors
+  primaryColor: x = "bg-blue-600",
+  primaryHoverColor: f = "hover:bg-blue-700",
+  darkPrimaryColor: d = "dark:bg-blue-600",
+  darkPrimaryHoverColor: m = "dark:hover:bg-blue-500",
+  secondaryColor: p = "bg-gray-100",
+  secondaryHoverColor: v = "hover:bg-gray-200",
+  darkSecondaryColor: j = "dark:bg-gray-800",
+  darkSecondaryHoverColor: y = "dark:hover:bg-gray-700",
+  outlineColor: w = "text-blue-600 border-blue-600",
+  outlineHoverColor: $ = "hover:bg-blue-50",
+  darkOutlineColor: N = "dark:text-blue-400 dark:border-blue-400",
+  darkOutlineHoverColor: E = "dark:hover:bg-blue-950"
 }) => {
-  const c = "inline-flex justify-center items-center font-bold rounded-lg cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 no-underline", p = {
-    primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500 border-2 border-transparent",
-    secondary: "bg-gray-100 text-gray-800 hover:bg-gray-200 focus:ring-gray-500 border-2 border-transparent",
-    danger: "bg-red-500 text-white hover:bg-red-600 focus:ring-red-500 border-2 border-transparent",
-    outline: "bg-transparent text-blue-600 border-2 border-blue-600 hover:bg-blue-50 focus:ring-blue-500"
-  }, f = {
+  const _ = "relative group inline-flex justify-center items-center font-bold rounded-lg cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 no-underline", T = {
+    primary: `${x} text-white ${f} focus:ring-blue-500 border-2 border-transparent ${d} ${m}`,
+    secondary: `${p} text-gray-800 ${v} focus:ring-gray-500 border-2 border-transparent ${j} dark:text-gray-100 ${y}`,
+    outline: `bg-transparent ${w} border-2 ${$} focus:ring-blue-500 ${N} ${E}`
+  }, R = {
     small: "px-3 py-1.5 text-sm",
     medium: "px-5 py-2.5 text-base",
     large: "px-8 py-3.5 text-lg"
-  }, l = `${c} ${p[d]} ${f[i]} ${a}`;
-  return t ? /* @__PURE__ */ r.jsx(
+  }, P = `${_} ${T[c]} ${R[i]} ${t.container || ""} ${a}`, C = /* @__PURE__ */ e.jsx("span", { className: `relative z-10 flex items-center justify-center gap-2 ${t.label || ""}`, children: o });
+  return u ? /* @__PURE__ */ e.jsx(
     "a",
     {
-      href: t,
-      className: l,
-      target: u,
-      rel: u === "_blank" ? "noopener noreferrer" : void 0,
-      onClick: s,
-      children: o
+      href: u,
+      className: P,
+      target: s,
+      rel: s === "_blank" ? "noopener noreferrer" : void 0,
+      onClick: n,
+      children: C
     }
-  ) : /* @__PURE__ */ r.jsx(
+  ) : /* @__PURE__ */ e.jsx(
     "button",
     {
       type: "button",
-      className: l,
-      onClick: s,
-      children: o
+      className: P,
+      onClick: n,
+      children: C
     }
   );
-}, de = ({ label: o, error: d, className: i, ...s }) => /* @__PURE__ */ r.jsxs("div", { className: "w-full", children: [
-  o && /* @__PURE__ */ r.jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: o }),
-  /* @__PURE__ */ r.jsx(
-    "input",
+}, ce = ne(({
+  label: o,
+  error: c,
+  className: i,
+  customStyles: n = {},
+  startIcon: a,
+  endIcon: t,
+  // Default Colors
+  labelColor: u = "text-gray-700",
+  darkLabelColor: s = "dark:text-gray-200",
+  inputBgColor: x = "bg-white",
+  darkInputBgColor: f = "dark:bg-gray-800",
+  inputBorderColor: d = "border-gray-300",
+  darkInputBorderColor: m = "dark:border-gray-600",
+  inputTextColor: p = "text-gray-900",
+  darkInputTextColor: v = "dark:text-white",
+  focusRingColor: j = "focus:ring-blue-500",
+  errorBorderColor: y = "border-red-500",
+  darkErrorBorderColor: w = "dark:border-red-500",
+  errorTextColor: $ = "text-red-500",
+  darkErrorTextColor: N = "dark:text-red-400",
+  ...E
+}, _) => {
+  const T = `
+        w-full py-2 border rounded-lg shadow-sm focus:outline-none focus:ring-2 transition-all
+        ${a ? "pl-10" : "px-3"} 
+        ${t ? "pr-10" : "px-3"}
+        ${x} ${f}
+        ${p} ${v}
+        ${j}
+    `, R = c ? `${y} focus:ring-red-500 ${w}` : `${d} ${m}`;
+  return /* @__PURE__ */ e.jsxs("div", { className: `w-full ${n.container || ""} ${i}`, children: [
+    o && /* @__PURE__ */ e.jsx("label", { className: `block text-sm font-medium ${u} ${s} mb-1 ${n.label || ""}`, children: o }),
+    /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
+      a && /* @__PURE__ */ e.jsx("div", { className: `absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none ${n.iconContainer || ""}`, children: a }),
+      /* @__PURE__ */ e.jsx(
+        "input",
+        {
+          ref: _,
+          className: `
+                        ${T}
+                        ${R}
+                        ${n.input || ""}
+                    `,
+          ...E
+        }
+      ),
+      t && /* @__PURE__ */ e.jsx("div", { className: `absolute inset-y-0 right-0 pr-3 flex items-center ${n.iconContainer || ""}`, children: t })
+    ] }),
+    c && /* @__PURE__ */ e.jsx("p", { className: `mt-1 text-xs ${$} ${N} ${n.error || ""}`, children: c })
+  ] });
+});
+ce.displayName = "BasicInput";
+const de = ({
+  isDark: o,
+  onToggle: c,
+  iconSun: i,
+  iconMoon: n,
+  sunImage: a,
+  moonImage: t,
+  imageFit: u = "contain",
+  customStyles: s = {},
+  className: x = "",
+  title: f
+}) => {
+  const d = `w-6 h-6 ${s.icon || ""}`, m = /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: d, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" }) }), p = /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: d, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) }), v = () => {
+    const j = u === "contain" ? "object-contain" : "object-cover";
+    return o ? a ? /* @__PURE__ */ e.jsx("img", { src: a, alt: "Light Mode", className: `${d} ${j}` }) : i || m : t ? /* @__PURE__ */ e.jsx("img", { src: t, alt: "Dark Mode", className: `${d} ${j}` }) : n || p;
+  };
+  return /* @__PURE__ */ e.jsx(
+    "button",
     {
+      onClick: c,
+      title: f || (o ? "Switch to light mode" : "Switch to dark mode"),
       className: `
-          w-full px-3 py-2 border rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all
-          ${d ? "border-red-500 focus:ring-red-500" : "border-gray-300"}
-          ${i}
-        `,
-      ...s
+                p-2 rounded-full transition-all duration-300 ease-in-out 
+                focus:outline-none focus:ring-2 focus:ring-blue-500 hover:rotate-12 hover:scale-110 overflow-hidden
+                ${o ? "bg-gray-700 text-yellow-300 hover:bg-gray-600" : "bg-gray-200 text-gray-600 hover:bg-gray-300"}
+                ${s.container || ""}
+                ${x}
+            `,
+      children: v()
     }
-  ),
-  d && /* @__PURE__ */ r.jsx("p", { className: "mt-1 text-xs text-red-500", children: d })
-] }), V = ({
-  iconSun: o,
-  iconMoon: d,
-  sunImage: i,
-  moonImage: s,
-  imageFit: a = "contain",
-  customStyles: t = {},
-  className: u = ""
+  );
+}, Z = ({
+  isDark: o,
+  onToggle: c,
+  ...i
 }) => {
-  const [c, p] = C(!1);
-  B(() => {
-    const h = () => {
-      const k = document.documentElement.classList.contains("dark");
-      p(k);
+  const [n, a] = I(!1);
+  Q(() => {
+    const s = () => {
+      const f = document.documentElement.classList.contains("dark");
+      a(f);
     };
-    h();
-    const E = new MutationObserver(h);
-    return E.observe(document.documentElement, { attributes: !0, attributeFilter: ["class"] }), () => E.disconnect();
+    s();
+    const x = new MutationObserver(s);
+    return x.observe(document.documentElement, { attributes: !0, attributeFilter: ["class"] }), () => x.disconnect();
   }, []);
-  const f = () => {
-    const h = document.documentElement;
-    h.classList.contains("dark") ? (h.classList.remove("dark"), localStorage.setItem("theme", "light")) : (h.classList.add("dark"), localStorage.setItem("theme", "dark"));
-  }, l = `w-6 h-6 ${t.icon || ""}`, b = /* @__PURE__ */ r.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: l, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ r.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" }) }), v = /* @__PURE__ */ r.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: l, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ r.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) }), w = () => {
-    const h = a === "contain" ? "object-contain" : "object-cover";
-    return c ? i ? /* @__PURE__ */ r.jsx("img", { src: i, alt: "Light Mode", className: `${l} ${h}` }) : o || b : s ? /* @__PURE__ */ r.jsx("img", { src: s, alt: "Dark Mode", className: `${l} ${h}` }) : d || v;
-  };
-  return /* @__PURE__ */ r.jsx(
-    "button",
+  const t = () => {
+    const s = document.documentElement;
+    s.classList.contains("dark") ? (s.classList.remove("dark"), localStorage.setItem("theme", "light")) : (s.classList.add("dark"), localStorage.setItem("theme", "dark")), c && c();
+  }, u = o !== void 0 ? o : n;
+  return /* @__PURE__ */ e.jsx(
+    de,
     {
-      onClick: f,
-      title: c ? "Switch to light mode" : "Switch to dark mode",
-      className: `
-        p-2 rounded-full transition-all duration-300 ease-in-out 
-        focus:outline-none focus:ring-2 focus:ring-blue-500 hover:rotate-12 hover:scale-110 overflow-hidden
-        
-        ${c ? "bg-gray-700 text-yellow-300 hover:bg-gray-600" : "bg-gray-200 text-gray-600 hover:bg-gray-300"}
-        
-        ${t.container || ""}
-        ${u}
-      `,
-      children: w()
+      ...i,
+      isDark: u,
+      onToggle: t
     }
   );
-}, ie = ({
+}, ue = ({
   title: o,
-  description: d,
+  description: c,
   image: i,
-  tags: s = [],
+  tags: n = [],
   orientation: a = "vertical",
   actionLabel: t = "View Project",
   projectUrl: u,
-  linkTarget: c = "_self",
-  onViewProject: p,
+  linkTarget: s = "_self",
+  onViewProject: x,
   customStyles: f = {},
-  className: l = ""
+  className: d = ""
 }) => {
-  const b = a === "horizontal";
-  return /* @__PURE__ */ r.jsxs("div", { className: `
+  const m = a === "horizontal";
+  return /* @__PURE__ */ e.jsxs("div", { className: `
       /* 1. IDENTIFIER CLASS */
       ds-card
       
       /* 2. BASE STRUCTURE */
       group w-full rounded-xl overflow-hidden border transition-all duration-300
       /* Switch layout based on orientation prop */
-      ${b ? "flex flex-col md:flex-row" : "flex flex-col"}
+      ${m ? "flex flex-col md:flex-row" : "flex flex-col"}
       
       /* 3. LIGHT MODE (Default) */
       /* White background, gray border, black shadow on hover */
@@ -465,104 +554,106 @@ const le = ({
       
       /* 5. EXTERNAL INJECTIONS */
       ${f.container || ""} 
-      ${l}
+      ${d}
     `, children: [
-    /* @__PURE__ */ r.jsxs("div", { className: `
+    /* @__PURE__ */ e.jsxs("div", { className: `
         ds-card-image overflow-hidden relative
-        ${b ? "w-full h-48 md:w-2/5 md:h-auto" : "w-full h-48"} 
+        ${m ? "w-full h-48 md:w-2/5 md:h-auto" : "w-full h-48"} 
         ${f.imageWrapper || ""} 
       `, children: [
-      /* @__PURE__ */ r.jsx(
+      /* @__PURE__ */ e.jsx(
         "img",
         {
           src: i,
           alt: o,
+          loading: "lazy",
+          decoding: "async",
           className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
         }
       ),
-      /* @__PURE__ */ r.jsx("div", { className: "absolute inset-0 bg-transparent dark:bg-black/20 transition-colors pointer-events-none" })
+      /* @__PURE__ */ e.jsx("div", { className: "absolute inset-0 bg-transparent dark:bg-black/20 transition-colors pointer-events-none" })
     ] }),
-    /* @__PURE__ */ r.jsxs("div", { className: `ds-card-content p-6 flex flex-col justify-between flex-1 ${f.content || ""}`, children: [
-      /* @__PURE__ */ r.jsxs("div", { children: [
-        /* @__PURE__ */ r.jsx("h3", { className: `
+    /* @__PURE__ */ e.jsxs("div", { className: `ds-card-content p-6 flex flex-col justify-between flex-1 ${f.content || ""}`, children: [
+      /* @__PURE__ */ e.jsxs("div", { children: [
+        /* @__PURE__ */ e.jsx("h3", { className: `
             ds-card-title text-2xl font-bold mb-3 transition-colors text-gray-900 dark:text-white
             ${f.title || ""}
           `, children: o }),
-        /* @__PURE__ */ r.jsx("p", { className: `
+        /* @__PURE__ */ e.jsx("p", { className: `
             ds-card-description mb-4 line-clamp-3 leading-relaxed transition-colors text-gray-600 dark:text-gray-300
             ${f.description || ""}
-          `, children: d }),
-        /* @__PURE__ */ r.jsx("div", { className: `ds-card-tags flex flex-wrap gap-2 mb-6 ${f.tagsContainer || ""}`, children: s.map((v) => /* @__PURE__ */ r.jsx(H, { label: v, variant: "secondary" }, v)) })
+          `, children: c }),
+        /* @__PURE__ */ e.jsx("div", { className: `ds-card-tags flex flex-wrap gap-2 mb-6 ${f.tagsContainer || ""}`, children: n.map((p) => /* @__PURE__ */ e.jsx(K, { label: p, variant: "secondary" }, p)) })
       ] }),
-      /* @__PURE__ */ r.jsx("div", { className: "ds-card-actions flex justify-start mt-auto", children: /* @__PURE__ */ r.jsx(
-        $,
+      /* @__PURE__ */ e.jsx("div", { className: "ds-card-actions flex justify-start mt-auto", children: /* @__PURE__ */ e.jsx(
+        M,
         {
           label: t,
-          onClick: p,
+          onClick: x,
           href: u,
-          target: c,
+          target: s,
           size: "medium",
           variant: "primary"
         }
       ) })
     ] })
   ] });
-}, ue = ({
+}, me = ({
   title: o = "Featured Content",
-  items: d,
+  items: c,
   layout: i = "grid",
-  itemButtonLabel: s = "View Details",
+  itemButtonLabel: n = "View Details",
   onItemClick: a,
   customStyles: t = {}
 }) => {
   const u = i === "grid" ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" : "flex flex-col gap-12 max-w-4xl mx-auto";
-  return /* @__PURE__ */ r.jsx("section", { className: `
+  return /* @__PURE__ */ e.jsx("section", { className: `
       py-16 px-4 transition-colors duration-300
       bg-gray-50 dark:bg-gray-900
       ${t.container || ""}
-    `, children: /* @__PURE__ */ r.jsxs("div", { className: "max-w-7xl mx-auto", children: [
-    o && /* @__PURE__ */ r.jsxs("div", { className: "mb-12 text-start", children: [
-      /* @__PURE__ */ r.jsx("h2", { className: `
+    `, children: /* @__PURE__ */ e.jsxs("div", { className: "max-w-7xl mx-auto", children: [
+    o && /* @__PURE__ */ e.jsxs("div", { className: "mb-12 text-start", children: [
+      /* @__PURE__ */ e.jsx("h2", { className: `
               text-4xl font-extrabold mb-4 tracking-tight transition-colors
               text-gray-900 dark:text-white
               ${t.title || ""}
             `, children: o }),
-      /* @__PURE__ */ r.jsx("div", { className: "h-1.5 w-24 bg-blue-600 mx-auto rounded-full" })
+      /* @__PURE__ */ e.jsx("div", { className: "h-1.5 w-24 bg-blue-600 mx-auto rounded-full" })
     ] }),
-    /* @__PURE__ */ r.jsx("div", { className: u, children: d.map((c) => /* @__PURE__ */ r.jsx(
-      ie,
+    /* @__PURE__ */ e.jsx("div", { className: u, children: c.map((s) => /* @__PURE__ */ e.jsx(
+      ue,
       {
-        title: c.title,
-        description: c.description,
-        image: c.image,
-        tags: c.tags,
-        projectUrl: c.url,
+        title: s.title,
+        description: s.description,
+        image: s.image,
+        tags: s.tags,
+        projectUrl: s.url,
         orientation: i === "list" ? "horizontal" : "vertical",
-        actionLabel: s,
-        onViewProject: () => a == null ? void 0 : a(c.id)
+        actionLabel: n,
+        onViewProject: () => a == null ? void 0 : a(s.id)
       },
-      c.id
+      s.id
     )) })
   ] }) });
-}, xe = ({
+}, ge = ({
   copyrightOwner: o,
-  copyrightText: d = `© ${(/* @__PURE__ */ new Date()).getFullYear()} All rights reserved.`,
+  copyrightText: c = `© ${(/* @__PURE__ */ new Date()).getFullYear()} All rights reserved.`,
   socialLinks: i,
-  secondaryLinks: s = [],
+  secondaryLinks: n = [],
   customStyles: a = {}
-}) => /* @__PURE__ */ r.jsx("footer", { className: `
+}) => /* @__PURE__ */ e.jsx("footer", { className: `
       py-12 border-t transition-colors duration-300
       /* Light: Very dark background (almost black) */
       bg-gray-900 text-white border-gray-800
       /* Dark: Pure black or very dark gray background */
       dark:bg-black dark:border-gray-800
       ${a.container || ""}
-    `, children: /* @__PURE__ */ r.jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col md:flex-row justify-between items-center gap-6", children: [
-  /* @__PURE__ */ r.jsxs("div", { className: `text-center md:text-left ${a.text || ""}`, children: [
-    /* @__PURE__ */ r.jsx("p", { className: "text-lg font-bold text-white", children: o }),
-    /* @__PURE__ */ r.jsx("p", { className: "text-gray-400 text-sm mt-1", children: d })
+    `, children: /* @__PURE__ */ e.jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col md:flex-row justify-between items-center gap-6", children: [
+  /* @__PURE__ */ e.jsxs("div", { className: `text-center md:text-left ${a.text || ""}`, children: [
+    /* @__PURE__ */ e.jsx("p", { className: "text-lg font-bold text-white", children: o }),
+    /* @__PURE__ */ e.jsx("p", { className: "text-gray-400 text-sm mt-1", children: c })
   ] }),
-  s.length > 0 && /* @__PURE__ */ r.jsx("div", { className: "flex gap-6 flex-wrap justify-center", children: s.map((t) => /* @__PURE__ */ r.jsx(
+  n.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "flex gap-6 flex-wrap justify-center", children: n.map((t) => /* @__PURE__ */ e.jsx(
     "a",
     {
       href: t.href,
@@ -571,7 +662,7 @@ const le = ({
     },
     t.label
   )) }),
-  /* @__PURE__ */ r.jsx("div", { className: "flex space-x-6", children: i.map((t) => /* @__PURE__ */ r.jsx(
+  /* @__PURE__ */ e.jsx("div", { className: "flex space-x-6", children: i.map((t) => /* @__PURE__ */ e.jsx(
     "a",
     {
       href: t.url,
@@ -582,35 +673,35 @@ const le = ({
     },
     t.platform
   )) })
-] }) }) }), fe = ({
+] }) }) }), be = ({
   greeting: o = "Hello",
-  title: d,
+  title: c,
   subtitle: i,
-  imageUrl: s,
+  imageUrl: n,
   actions: a = [],
   customStyles: t = {}
 }) => {
-  const u = s ? "flex flex-col lg:flex-row items-center gap-12 lg:gap-16" : "flex flex-col items-center text-center max-w-4xl mx-auto", c = s ? "flex-1 text-center lg:text-left" : "w-full", p = s ? "justify-center lg:justify-start" : "justify-center";
-  return /* @__PURE__ */ r.jsx("section", { className: `
+  const u = n ? "flex flex-col lg:flex-row items-center gap-12 lg:gap-16" : "flex flex-col items-center text-center max-w-4xl mx-auto", s = n ? "flex-1 text-center lg:text-left" : "w-full", x = n ? "justify-center lg:justify-start" : "justify-center";
+  return /* @__PURE__ */ e.jsx("section", { className: `
       relative pt-32 pb-16 lg:pt-40 lg:pb-24 overflow-hidden transition-colors duration-300
       bg-white dark:bg-gray-900 
       ${t.container || ""}
-    `, children: /* @__PURE__ */ r.jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ r.jsxs("div", { className: u, children: [
-    /* @__PURE__ */ r.jsxs("div", { className: `${c} ${t.content || ""}`, children: [
-      o && /* @__PURE__ */ r.jsx("p", { className: "text-blue-600 dark:text-blue-400 font-semibold tracking-wide uppercase text-sm mb-4", children: o }),
-      /* @__PURE__ */ r.jsx("h1", { className: `
+    `, children: /* @__PURE__ */ e.jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ e.jsxs("div", { className: u, children: [
+    /* @__PURE__ */ e.jsxs("div", { className: `${s} ${t.content || ""}`, children: [
+      o && /* @__PURE__ */ e.jsx("p", { className: "text-blue-600 dark:text-blue-400 font-semibold tracking-wide uppercase text-sm mb-4", children: o }),
+      /* @__PURE__ */ e.jsx("h1", { className: `
               text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6 transition-colors
               text-gray-900 dark:text-white
               ${t.title || ""}
-            `, children: d }),
-      /* @__PURE__ */ r.jsx("p", { className: `
+            `, children: c }),
+      /* @__PURE__ */ e.jsx("p", { className: `
               text-lg sm:text-xl mb-8 leading-relaxed transition-colors
               text-gray-500 dark:text-gray-400
-              ${!s && "mx-auto max-w-2xl"}
+              ${!n && "mx-auto max-w-2xl"}
               ${t.subtitle || ""}
             `, children: i }),
-      a.length > 0 && /* @__PURE__ */ r.jsx("div", { className: `flex flex-col sm:flex-row gap-4 ${p}`, children: a.map((f, l) => /* @__PURE__ */ r.jsx(
-        $,
+      a.length > 0 && /* @__PURE__ */ e.jsx("div", { className: `flex flex-col sm:flex-row gap-4 ${x}`, children: a.map((f, d) => /* @__PURE__ */ e.jsx(
+        M,
         {
           label: f.label,
           variant: f.variant || "primary",
@@ -618,123 +709,146 @@ const le = ({
           onClick: f.onClick,
           className: "w-full sm:w-auto"
         },
-        l
+        d
       )) })
     ] }),
-    s && /* @__PURE__ */ r.jsx("div", { className: `
+    n && /* @__PURE__ */ e.jsx("div", { className: `
               flex-1 w-full max-w-md lg:max-w-full relative 
               ${t.imageWrapper || ""}
-            `, children: /* @__PURE__ */ r.jsxs("div", { className: "relative rounded-2xl overflow-hidden shadow-2xl dark:shadow-none dark:border dark:border-gray-800 aspect-[4/3] group", children: [
-      /* @__PURE__ */ r.jsx("div", { className: "absolute inset-0 bg-gray-900/5 dark:bg-black/20 group-hover:bg-transparent transition-colors duration-500" }),
-      /* @__PURE__ */ r.jsx(
+            `, children: /* @__PURE__ */ e.jsxs("div", { className: "relative rounded-2xl overflow-hidden shadow-2xl dark:shadow-none dark:border dark:border-gray-800 aspect-[4/3] group", children: [
+      /* @__PURE__ */ e.jsx("div", { className: "absolute inset-0 bg-gray-900/5 dark:bg-black/20 group-hover:bg-transparent transition-colors duration-500" }),
+      /* @__PURE__ */ e.jsx(
         "img",
         {
-          src: s,
+          src: n,
           alt: "Hero Visual",
+          decoding: "async",
           className: "w-full h-full object-cover transform transition-transform duration-700 hover:scale-105"
         }
       )
     ] }) })
   ] }) }) });
-}, me = ({
+}, xe = ({
   logo: o = "Marc.Dev",
-  isLogoImage: d = !1,
+  isLogoImage: c = !1,
   links: i,
-  actions: s = [],
-  customStyles: a = {}
-}) => {
-  const [t, u] = C(!1), [c, p] = C(!1);
-  B(() => {
-    const l = () => p(window.scrollY > 20);
-    return window.addEventListener("scroll", l), () => window.removeEventListener("scroll", l);
-  }, []);
-  const f = (l, b) => {
-    l.preventDefault();
-    const v = document.querySelector(b);
-    v && (v.scrollIntoView({ behavior: "smooth" }), u(!1));
-  };
-  return /* @__PURE__ */ r.jsxs(
-    "nav",
-    {
-      className: `
+  actions: n = [],
+  customStyles: a = {},
+  isOpen: t = !1,
+  isScrolled: u = !1,
+  onToggleMenu: s,
+  onLinkClick: x,
+  onLogoClick: f
+}) => /* @__PURE__ */ e.jsxs(
+  "nav",
+  {
+    className: `
         fixed top-0 left-0 right-0 z-50 transition-all duration-300
 
-        ${c || t ? "bg-white/90 dark:bg-gray-900/90 backdrop-blur-md shadow-sm border-b border-gray-100 dark:border-gray-800" : "bg-transparent"}
+        ${u || t ? "bg-white/90 dark:bg-gray-900/90 backdrop-blur-md shadow-sm border-b border-gray-100 dark:border-gray-800" : "bg-transparent"}
         ${a.container || ""}
       `,
-      children: [
-        /* @__PURE__ */ r.jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ r.jsxs("div", { className: "flex justify-between items-center h-20", children: [
-          /* @__PURE__ */ r.jsx("div", { className: `flex-shrink-0 cursor-pointer flex items-center ${a.logo || ""}`, onClick: () => window.scrollTo({ top: 0, behavior: "smooth" }), children: d ? /* @__PURE__ */ r.jsx("img", { src: o, alt: "Logo", className: "h-8 w-auto" }) : /* @__PURE__ */ r.jsx("span", { className: "text-2xl font-bold text-gray-900 dark:text-white tracking-tighter hover:text-blue-600 dark:hover:text-blue-400 transition-colors", children: o }) }),
-          /* @__PURE__ */ r.jsxs("div", { className: "hidden md:flex space-x-8 items-center", children: [
-            i.map((l) => /* @__PURE__ */ r.jsx(
-              "a",
-              {
-                href: l.href,
-                onClick: (b) => f(b, l.href),
-                className: `
+    children: [
+      /* @__PURE__ */ e.jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-center h-20", children: [
+        /* @__PURE__ */ e.jsx("div", { className: `flex-shrink-0 cursor-pointer flex items-center ${a.logo || ""}`, onClick: f, children: c ? /* @__PURE__ */ e.jsx("img", { src: o, alt: "Logo", className: "h-8 w-auto" }) : /* @__PURE__ */ e.jsx("span", { className: "text-2xl font-bold text-gray-900 dark:text-white tracking-tighter hover:text-blue-600 dark:hover:text-blue-400 transition-colors", children: o }) }),
+        /* @__PURE__ */ e.jsxs("div", { className: "hidden md:flex space-x-8 items-center", children: [
+          i.map((d) => /* @__PURE__ */ e.jsx(
+            "a",
+            {
+              href: d.href,
+              onClick: (m) => x == null ? void 0 : x(m, d.href),
+              className: `
                   text-sm font-medium transition-colors 
                   hover:text-blue-600 dark:hover:text-blue-400
-                  ${l.active ? "text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-300"}
+                  ${d.active ? "text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-300"}
                   ${a.link || ""}
                 `,
-                children: l.label
-              },
-              l.label
-            )),
-            /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-4 pl-6 border-l border-gray-200 dark:border-gray-700", children: [
-              /* @__PURE__ */ r.jsx(V, {}),
-              s.map((l, b) => /* @__PURE__ */ r.jsx($, { ...l, size: "small" }, b))
-            ] })
-          ] }),
-          /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-4 md:hidden", children: [
-            /* @__PURE__ */ r.jsx(V, {}),
-            /* @__PURE__ */ r.jsx(
-              "button",
-              {
-                onClick: () => u(!t),
-                className: "p-2 rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors focus:outline-none",
-                children: /* @__PURE__ */ r.jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: t ? /* @__PURE__ */ r.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) : /* @__PURE__ */ r.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) })
-              }
-            )
+              children: d.label
+            },
+            d.label
+          )),
+          /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-4 pl-6 border-l border-gray-200 dark:border-gray-700", children: [
+            /* @__PURE__ */ e.jsx(Z, {}),
+            n.map((d, m) => /* @__PURE__ */ e.jsx(M, { ...d, size: "small" }, m))
           ] })
-        ] }) }),
-        /* @__PURE__ */ r.jsx(
-          "div",
-          {
-            className: `
+        ] }),
+        /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-4 md:hidden", children: [
+          /* @__PURE__ */ e.jsx(Z, {}),
+          /* @__PURE__ */ e.jsx(
+            "button",
+            {
+              onClick: s,
+              className: "p-2 rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors focus:outline-none",
+              children: /* @__PURE__ */ e.jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: t ? /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) : /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) })
+            }
+          )
+        ] })
+      ] }) }),
+      /* @__PURE__ */ e.jsx(
+        "div",
+        {
+          className: `
           md:hidden absolute top-20 left-0 w-full 
           bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800 
           shadow-xl transition-all duration-300 ease-in-out origin-top 
           ${t ? "opacity-100 scale-y-100" : "opacity-0 scale-y-0 h-0 overflow-hidden"}
           ${a.mobileMenu || ""}
         `,
-            children: /* @__PURE__ */ r.jsxs("div", { className: "px-6 py-6 space-y-4 flex flex-col items-center", children: [
-              i.map((l) => /* @__PURE__ */ r.jsx(
-                "a",
-                {
-                  href: l.href,
-                  onClick: (b) => f(b, l.href),
-                  className: "block text-lg font-medium text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-colors",
-                  children: l.label
-                },
-                l.label
-              )),
-              s.length > 0 && /* @__PURE__ */ r.jsx("div", { className: "pt-4 w-full flex flex-col gap-3", children: s.map((l, b) => /* @__PURE__ */ r.jsx($, { ...l, size: "medium", className: "w-full" }, b)) })
-            ] })
-          }
-        )
-      ]
+          children: /* @__PURE__ */ e.jsxs("div", { className: "px-6 py-6 space-y-4 flex flex-col items-center", children: [
+            i.map((d) => /* @__PURE__ */ e.jsx(
+              "a",
+              {
+                href: d.href,
+                onClick: (m) => x == null ? void 0 : x(m, d.href),
+                className: "block text-lg font-medium text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-colors",
+                children: d.label
+              },
+              d.label
+            )),
+            n.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "pt-4 w-full flex flex-col gap-3", children: n.map((d, m) => /* @__PURE__ */ e.jsx(M, { ...d, size: "medium", className: "w-full" }, m)) })
+          ] })
+        }
+      )
+    ]
+  }
+), he = (o) => {
+  const [c, i] = I(!1), [n, a] = I(!1);
+  Q(() => {
+    let s = !1;
+    const x = () => {
+      s || (window.requestAnimationFrame(() => {
+        a(window.scrollY > 20), s = !1;
+      }), s = !0);
+    };
+    return window.addEventListener("scroll", x), () => window.removeEventListener("scroll", x);
+  }, []);
+  const t = (s, x) => {
+    s.preventDefault();
+    const f = document.querySelector(x);
+    f && (f.scrollIntoView({ behavior: "smooth" }), i(!1));
+  }, u = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+  return /* @__PURE__ */ e.jsx(
+    xe,
+    {
+      ...o,
+      isOpen: c,
+      isScrolled: n,
+      onToggleMenu: () => i(!c),
+      onLinkClick: t,
+      onLogoClick: u
     }
   );
-}, ge = ({
+}, pe = ({
   title: o = "About Me",
-  avatarUrl: d,
+  avatarUrl: c,
   bio: i,
-  skillsTitle: s = "Tech Stack",
+  skillsTitle: n = "Tech Stack",
   skills: a = [],
   customStyles: t = {},
   id: u
-}) => /* @__PURE__ */ r.jsx(
+}) => /* @__PURE__ */ e.jsx(
   "section",
   {
     id: u,
@@ -743,24 +857,24 @@ const le = ({
         bg-white dark:bg-gray-900 border-y border-gray-100 dark:border-gray-800
         ${t.container || ""}
       `,
-    children: /* @__PURE__ */ r.jsxs("div", { className: `max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 ${t.contentWrapper || ""}`, children: [
-      o && /* @__PURE__ */ r.jsxs("div", { className: "text-center mb-12", children: [
-        /* @__PURE__ */ r.jsx("h2", { className: `
+    children: /* @__PURE__ */ e.jsxs("div", { className: `max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 ${t.contentWrapper || ""}`, children: [
+      o && /* @__PURE__ */ e.jsxs("div", { className: "text-center mb-12", children: [
+        /* @__PURE__ */ e.jsx("h2", { className: `
               text-3xl font-bold text-gray-900 dark:text-white transition-colors
               ${t.title || ""}
             `, children: o }),
-        /* @__PURE__ */ r.jsx("div", { className: "mt-2 h-1 w-20 bg-blue-600 mx-auto rounded" })
+        /* @__PURE__ */ e.jsx("div", { className: "mt-2 h-1 w-20 bg-blue-600 mx-auto rounded" })
       ] }),
-      /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col md:flex-row items-center gap-12", children: [
-        /* @__PURE__ */ r.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ r.jsx(le, { src: d, size: "xl" }) }),
-        /* @__PURE__ */ r.jsxs("div", { className: `text-lg text-gray-600 dark:text-gray-300 leading-relaxed ${t.textWrapper || ""}`, children: [
-          /* @__PURE__ */ r.jsx("p", { className: `mb-8 whitespace-pre-line ${t.bio || ""}`, children: i }),
-          a.length > 0 && /* @__PURE__ */ r.jsxs("div", { children: [
-            s && /* @__PURE__ */ r.jsx("h3", { className: `
+      /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col md:flex-row items-center gap-12", children: [
+        /* @__PURE__ */ e.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e.jsx(ie, { src: c, size: "xl" }) }),
+        /* @__PURE__ */ e.jsxs("div", { className: `text-lg text-gray-600 dark:text-gray-300 leading-relaxed ${t.textWrapper || ""}`, children: [
+          /* @__PURE__ */ e.jsx("p", { className: `mb-8 whitespace-pre-line ${t.bio || ""}`, children: i }),
+          a.length > 0 && /* @__PURE__ */ e.jsxs("div", { children: [
+            n && /* @__PURE__ */ e.jsx("h3", { className: `
                     text-sm font-bold text-gray-900 dark:text-white uppercase tracking-wide mb-3
                     ${t.skillsTitle || ""}
-                  `, children: s }),
-            /* @__PURE__ */ r.jsx("div", { className: "flex flex-wrap gap-2", children: a.map((c) => /* @__PURE__ */ r.jsx(H, { label: c, variant: "secondary" }, c)) })
+                  `, children: n }),
+            /* @__PURE__ */ e.jsx("div", { className: "flex flex-wrap gap-2", children: a.map((s) => /* @__PURE__ */ e.jsx(K, { label: s, variant: "secondary" }, s)) })
           ] })
         ] })
       ] })
@@ -768,15 +882,15 @@ const le = ({
   }
 );
 export {
-  le as Avatar,
-  H as Badge,
-  $ as Button,
-  ue as ContentGrid,
-  xe as Footer,
-  fe as Hero,
-  de as Input,
-  me as Navbar,
-  ge as ProfileSection,
-  ie as ProjectCard,
-  V as ThemeToggle
+  ie as Avatar,
+  K as Badge,
+  M as Button,
+  me as ContentGrid,
+  ge as Footer,
+  be as Hero,
+  ce as Input,
+  he as Navbar,
+  pe as ProfileSection,
+  ue as ProjectCard,
+  Z as ThemeToggle
 };