@iniguezmarc/design-system 0.0.3 → 0.0.7

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 z, 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 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]);
-    } else t = a;
-    return a = t.ref, {
+var X;
+function oe() {
+  if (X) return A;
+  X = 1;
+  var o = Symbol.for("react.transitional.element"), x = Symbol.for("react.fragment");
+  function d(s, t, a) {
+    var f = null;
+    if (a !== void 0 && (f = "" + a), t.key !== void 0 && (f = "" + t.key), "key" in t) {
+      a = {};
+      for (var i in t)
+        i !== "key" && (a[i] = t[i]);
+    } else a = t;
+    return t = a.ref, {
       $$typeof: o,
       type: s,
-      key: u,
-      ref: a !== void 0 ? a : null,
-      props: t
+      key: f,
+      ref: t !== void 0 ? t : null,
+      props: a
     };
   }
-  return y.Fragment = d, y.jsx = i, y.jsxs = i, y;
+  return A.Fragment = x, A.jsx = d, A.jsxs = d, A;
 }
-var N = {};
+var O = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -41,406 +41,506 @@ 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 k:
           return "Profiler";
-        case U:
+        case y:
           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 j:
             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 c = r.render;
+            return r = r.displayName, r || (r = c.displayName || c.name || "", r = r !== "" ? "ForwardRef(" + r + ")" : "ForwardRef"), r;
+          case C:
+            return c = r.displayName || null, c !== null ? c : o(r.type) || "Memo";
+          case D:
+            c = r._payload, r = r._init;
             try {
-              return o(e(n));
+              return o(r(c));
             } catch {
             }
         }
       return null;
     }
-    function d(e) {
-      return "" + e;
+    function x(r) {
+      return "" + r;
     }
-    function i(e) {
+    function d(r) {
       try {
-        d(e);
-        var n = !1;
+        x(r);
+        var c = !1;
       } catch {
-        n = !0;
+        c = !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 (c) {
+        c = console;
+        var h = c.error, p = typeof Symbol == "function" && Symbol.toStringTag && r[Symbol.toStringTag] || r.constructor.name || "Object";
+        return h.call(
+          c,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          m
-        ), d(e);
+          p
+        ), x(r);
       }
     }
-    function s(e) {
-      if (e === k) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === T)
+    function s(r) {
+      if (r === w) return "<>";
+      if (typeof r == "object" && r !== null && r.$$typeof === D)
         return "<...>";
       try {
-        var n = o(e);
-        return n ? "<" + n + ">" : "<...>";
+        var c = o(r);
+        return c ? "<" + c + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function a() {
-      var e = R.A;
-      return e === null ? null : e.getOwner();
-    }
     function t() {
+      var r = L.A;
+      return r === null ? null : r.getOwner();
+    }
+    function a() {
       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 f(r) {
+      if (F.call(r, "key")) {
+        var c = Object.getOwnPropertyDescriptor(r, "key").get;
+        if (c && c.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 i(r, c) {
+      function h() {
+        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
+          c
         ));
       }
-      x.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: x,
+      h.isReactWarning = !0, Object.defineProperty(r, "key", {
+        get: h,
         configurable: !0
       });
     }
-    function p() {
-      var e = o(this.type);
-      return D[e] || (D[e] = !0, console.error(
+    function u() {
+      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 m(r, c, h, p, S, Y) {
+      var v = h.ref;
+      return r = {
+        $$typeof: $,
+        type: r,
+        key: c,
+        props: h,
+        _owner: p
+      }, (v !== void 0 ? v : 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: u
+      }) : 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 l(r, c, h, p, S, Y) {
+      var v = c.children;
+      if (v !== void 0)
+        if (p)
+          if (te(v)) {
+            for (p = 0; p < v.length; p++)
+              n(v[p]);
+            Object.freeze && Object.freeze(v);
           } 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 n(v);
+      if (F.call(c, "key")) {
+        v = o(r);
+        var N = Object.keys(c).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(
+        p = 0 < N.length ? "{key: someKey, " + N.join(": ..., ") + ": ...}" : "{key: someKey}", q[v + p] || (N = 0 < N.length ? "{" + N.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);
+          p,
+          v,
+          N,
+          v
+        ), q[v + p] = !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
-      ), f(
-        e,
-        g,
-        x,
-        a(),
-        _,
-        O
+      if (v = null, h !== void 0 && (d(h), v = "" + h), f(c) && (d(c.key), v = "" + c.key), "key" in c) {
+        h = {};
+        for (var I in c)
+          I !== "key" && (h[I] = c[I]);
+      } else h = c;
+      return v && i(
+        h,
+        typeof r == "function" ? r.displayName || r.name || "Unknown" : r
+      ), m(
+        r,
+        v,
+        h,
+        t(),
+        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 n(r) {
+      g(r) ? r._store && (r._store.validated = 1) : typeof r == "object" && r !== null && r.$$typeof === D && (r._payload.status === "fulfilled" ? g(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 g(r) {
+      return typeof r == "object" && r !== null && r.$$typeof === $;
     }
-    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 b = se, $ = Symbol.for("react.transitional.element"), j = Symbol.for("react.portal"), w = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), k = 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 = b.__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();
+    b = {
+      react_stack_bottom_frame: function(r) {
+        return r();
       }
     };
-    var M, D = {}, Y = w.react_stack_bottom_frame.bind(
-      w,
-      t
-    )(), I = A(s(t)), W = {};
-    N.Fragment = k, N.jsx = function(e, n, x) {
-      var m = 1e4 > R.recentlyCreatedOwnerStacks++;
+    var V, H = {}, G = b.react_stack_bottom_frame.bind(
+      b,
+      a
+    )(), U = B(s(a)), q = {};
+    O.Fragment = w, O.jsx = function(r, c, h) {
+      var p = 1e4 > L.recentlyCreatedOwnerStacks++;
       return l(
-        e,
-        n,
-        x,
+        r,
+        c,
+        h,
         !1,
-        m ? Error("react-stack-top-frame") : Y,
-        m ? A(s(e)) : I
+        p ? Error("react-stack-top-frame") : G,
+        p ? B(s(r)) : U
       );
-    }, N.jsxs = function(e, n, x) {
-      var m = 1e4 > R.recentlyCreatedOwnerStacks++;
+    }, O.jsxs = function(r, c, h) {
+      var p = 1e4 > L.recentlyCreatedOwnerStacks++;
       return l(
-        e,
-        n,
-        x,
+        r,
+        c,
+        h,
         !0,
-        m ? Error("react-stack-top-frame") : Y,
-        m ? A(s(e)) : I
+        p ? Error("react-stack-top-frame") : G,
+        p ? B(s(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",
-  size: i = "md",
+  alt: x = "Avatar",
+  size: d = "md",
   imageFit: s = "cover",
-  customStyles: a = {},
-  className: t = ""
+  customStyles: t = {},
+  className: a = "",
+  borderColor: f = "border-gray-200",
+  darkBorderColor: i = "dark:border-gray-700",
+  backgroundColor: u = "bg-gray-100",
+  darkBackgroundColor: m = "dark:bg-gray-800",
+  loading: l = "lazy"
 }) => {
-  const u = {
+  const n = {
     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(
+  }, g = s === "contain" ? "object-contain" : "object-cover", b = `border ${f} ${i}`, $ = `${u} ${m}`;
+  return /* @__PURE__ */ e.jsx("div", { className: `
+            ds-avatar relative rounded-full overflow-hidden flex-shrink-0
+            ${n[d]}
+            ${$}
+            ${b}
+            ${t.container || ""}
+            ${a}
+        `, children: /* @__PURE__ */ e.jsx(
     "img",
     {
       src: o,
-      alt: d,
+      alt: x,
+      loading: l,
+      decoding: "async",
       className: `
-          w-full h-full 
-          ${c}
-          ${a.image || ""}
-        `
+                    w-full h-full 
+                    ${g}
+                    ${t.image || ""}
+                `
     }
   ) });
-}, H = ({
+}, K = ({
   label: o,
-  variant: d = "primary",
-  customStyles: i = {},
-  className: s = ""
+  variant: x = "primary",
+  customStyles: d = {},
+  className: s = "",
+  endIcon: t,
+  // Default Colors
+  primaryColor: a = "bg-blue-100 text-blue-800",
+  darkPrimaryColor: f = "dark:bg-blue-900/50 dark:text-blue-200",
+  secondaryColor: i = "bg-gray-100 text-gray-800",
+  darkSecondaryColor: u = "dark:bg-gray-700 dark:text-gray-300",
+  outlineColor: m = "border border-gray-300 text-gray-600 bg-transparent",
+  darkOutlineColor: l = "dark:border-gray-600 dark:text-gray-400",
+  successColor: n = "bg-green-100 text-green-800",
+  darkSuccessColor: g = "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 b = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium transition-colors gap-1", $ = {
+    primary: `${a} ${f}`,
+    secondary: `${i} ${u}`,
+    outline: `${m} ${l}`,
+    success: `${n} ${g}`
   };
-  return /* @__PURE__ */ r.jsx("span", { className: `
-      ds-badge
-      ${a} 
-      ${t[d]}
-      ${i.container || ""}
-      ${s}
-    `, children: o });
-}, $ = ({
+  return /* @__PURE__ */ e.jsxs("span", { className: `
+            ds-badge
+            ${b} 
+            ${$[x]}
+            ${d.container || ""}
+            ${s}
+        `, children: [
+    /* @__PURE__ */ e.jsx("span", { className: d.label || "", children: o }),
+    t && /* @__PURE__ */ e.jsx("span", { className: "flex items-center", children: t })
+  ] });
+}, M = ({
   label: o,
-  variant: d = "primary",
-  size: i = "medium",
+  variant: x = "primary",
+  size: d = "medium",
   onClick: s,
-  className: a = "",
-  href: t,
-  target: u
+  className: t = "",
+  customStyles: a = {},
+  href: f,
+  target: i,
+  // Default Colors
+  primaryColor: u = "bg-blue-600",
+  primaryHoverColor: m = "hover:bg-blue-700",
+  darkPrimaryColor: l = "dark:bg-blue-600",
+  darkPrimaryHoverColor: n = "dark:hover:bg-blue-500",
+  secondaryColor: g = "bg-gray-100",
+  secondaryHoverColor: b = "hover:bg-gray-200",
+  darkSecondaryColor: $ = "dark:bg-gray-800",
+  darkSecondaryHoverColor: j = "dark:hover:bg-gray-700",
+  outlineColor: w = "text-blue-600 border-blue-600",
+  outlineHoverColor: y = "hover:bg-blue-50",
+  darkOutlineColor: k = "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: `${u} text-white ${m} focus:ring-blue-500 border-2 border-transparent ${l} ${n}`,
+    secondary: `${g} text-gray-800 ${b} focus:ring-gray-500 border-2 border-transparent ${$} dark:text-gray-100 ${j}`,
+    outline: `bg-transparent ${w} border-2 ${y} focus:ring-blue-500 ${k} ${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[x]} ${R[d]} ${a.container || ""} ${t}`, C = /* @__PURE__ */ e.jsx("span", { className: `relative z-10 flex items-center justify-center gap-2 ${a.label || ""}`, children: o });
+  return f ? /* @__PURE__ */ e.jsx(
     "a",
     {
-      href: t,
-      className: l,
-      target: u,
-      rel: u === "_blank" ? "noopener noreferrer" : void 0,
+      href: f,
+      className: P,
+      target: i,
+      rel: i === "_blank" ? "noopener noreferrer" : void 0,
       onClick: s,
-      children: o
+      children: C
     }
-  ) : /* @__PURE__ */ r.jsx(
+  ) : /* @__PURE__ */ e.jsx(
     "button",
     {
       type: "button",
-      className: l,
+      className: P,
       onClick: s,
-      children: o
+      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: x,
+  className: d,
+  customStyles: s = {},
+  startIcon: t,
+  endIcon: a,
+  // Default Colors
+  labelColor: f = "text-gray-700",
+  darkLabelColor: i = "dark:text-gray-200",
+  inputBgColor: u = "bg-white",
+  darkInputBgColor: m = "dark:bg-gray-800",
+  inputBorderColor: l = "border-gray-300",
+  darkInputBorderColor: n = "dark:border-gray-600",
+  inputTextColor: g = "text-gray-900",
+  darkInputTextColor: b = "dark:text-white",
+  focusRingColor: $ = "focus:ring-blue-500",
+  errorBorderColor: j = "border-red-500",
+  darkErrorBorderColor: w = "dark:border-red-500",
+  errorTextColor: y = "text-red-500",
+  darkErrorTextColor: k = "dark:text-red-400",
+  ...E
+}, _) => {
+  const T = `
+        w-full py-2 border rounded-lg shadow-sm focus:outline-none focus:ring-2 transition-all
+        ${t ? "pl-10" : "px-3"} 
+        ${a ? "pr-10" : "px-3"}
+        ${u} ${m}
+        ${g} ${b}
+        ${$}
+    `, R = x ? `${j} focus:ring-red-500 ${w}` : `${l} ${n}`;
+  return /* @__PURE__ */ e.jsxs("div", { className: `w-full ${s.container || ""} ${d}`, children: [
+    o && /* @__PURE__ */ e.jsx("label", { className: `block text-sm font-medium ${f} ${i} mb-1 ${s.label || ""}`, children: o }),
+    /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
+      t && /* @__PURE__ */ e.jsx("div", { className: `absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none ${s.iconContainer || ""}`, children: t }),
+      /* @__PURE__ */ e.jsx(
+        "input",
+        {
+          ref: _,
+          className: `
+                        ${T}
+                        ${R}
+                        ${s.input || ""}
+                    `,
+          ...E
+        }
+      ),
+      a && /* @__PURE__ */ e.jsx("div", { className: `absolute inset-y-0 right-0 pr-3 flex items-center ${s.iconContainer || ""}`, children: a })
+    ] }),
+    x && /* @__PURE__ */ e.jsx("p", { className: `mt-1 text-xs ${y} ${k} ${s.error || ""}`, children: x })
+  ] });
+});
+ce.displayName = "BasicInput";
+const de = ({
+  isToggled: o,
+  onToggle: x,
+  iconOn: d,
+  iconOff: s,
+  imageOn: t,
+  imageOff: a,
+  imageFit: f = "contain",
+  customStyles: i = {},
+  className: u = "",
+  title: m
+}) => {
+  const l = `w-6 h-6 ${i.icon || ""}`, n = () => {
+    const g = f === "contain" ? "object-contain" : "object-cover";
+    return o ? t ? /* @__PURE__ */ e.jsx("img", { src: t, alt: "Toggled On", className: `${l} ${g}` }) : d : a ? /* @__PURE__ */ e.jsx("img", { src: a, alt: "Toggled Off", className: `${l} ${g}` }) : s;
+  };
+  return /* @__PURE__ */ e.jsx(
+    "button",
     {
+      onClick: x,
+      title: m,
       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-800 text-white hover:bg-gray-700" : "bg-gray-200 text-gray-800 hover:bg-gray-300"}
+                ${i.container || ""}
+                ${u}
+            `,
+      children: n()
     }
-  ),
-  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: x,
+  iconSun: d,
+  iconMoon: s,
+  sunImage: t,
+  moonImage: a,
+  customStyles: f = {},
+  ...i
 }) => {
-  const [c, p] = C(!1);
-  B(() => {
-    const h = () => {
-      const k = document.documentElement.classList.contains("dark");
-      p(k);
+  const [u, m] = z(!1);
+  Q(() => {
+    const j = () => {
+      const y = document.documentElement.classList.contains("dark");
+      m(y);
     };
-    h();
-    const E = new MutationObserver(h);
-    return E.observe(document.documentElement, { attributes: !0, attributeFilter: ["class"] }), () => E.disconnect();
+    j();
+    const w = new MutationObserver(j);
+    return w.observe(document.documentElement, { attributes: !0, attributeFilter: ["class"] }), () => w.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 l = () => {
+    const j = document.documentElement;
+    j.classList.contains("dark") ? (j.classList.remove("dark"), localStorage.setItem("theme", "light")) : (j.classList.add("dark"), localStorage.setItem("theme", "dark")), x && x();
+  }, n = o !== void 0 ? o : u, g = `w-6 h-6 ${f.icon || ""}`, b = /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: g, 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" }) }), $ = /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: g, 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" }) });
+  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,
+      isToggled: n,
+      onToggle: l,
+      iconOn: d || b,
+      iconOff: s || $,
+      imageOn: t,
+      imageOff: a,
+      customStyles: f,
+      title: i.title || (n ? "Switch to light mode" : "Switch to dark mode")
     }
   );
-}, ie = ({
+}, ue = ({
   title: o,
-  description: d,
-  image: i,
+  description: x,
+  image: d,
   tags: s = [],
-  orientation: a = "vertical",
-  actionLabel: t = "View Project",
-  projectUrl: u,
-  linkTarget: c = "_self",
-  onViewProject: p,
-  customStyles: f = {},
+  orientation: t = "vertical",
+  actionLabel: a = "View Project",
+  projectUrl: f,
+  linkTarget: i = "_self",
+  onViewProject: u,
+  customStyles: m = {},
   className: l = ""
 }) => {
-  const b = a === "horizontal";
-  return /* @__PURE__ */ r.jsxs("div", { className: `
+  const n = t === "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"}
+      ${n ? "flex flex-col md:flex-row" : "flex flex-col"}
       
       /* 3. LIGHT MODE (Default) */
       /* White background, gray border, black shadow on hover */
@@ -464,303 +564,373 @@ const le = ({
       dark:hover:!shadow-[0_20px_25px_-5px_rgba(255,255,255,0.30)]
       
       /* 5. EXTERNAL INJECTIONS */
-      ${f.container || ""} 
+      ${m.container || ""} 
       ${l}
     `, 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"} 
-        ${f.imageWrapper || ""} 
+        ${n ? "w-full h-48 md:w-2/5 md:h-auto" : "w-full h-48"} 
+        ${m.imageWrapper || ""} 
       `, children: [
-      /* @__PURE__ */ r.jsx(
+      /* @__PURE__ */ e.jsx(
         "img",
         {
-          src: i,
+          src: d,
           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 ${m.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 || ""}
+            ${m.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)) })
+            ${m.description || ""}
+          `, children: x }),
+        /* @__PURE__ */ e.jsx("div", { className: `ds-card-tags flex flex-wrap gap-2 mb-6 ${m.tagsContainer || ""}`, children: s.map((g) => /* @__PURE__ */ e.jsx(K, { label: g, variant: "secondary" }, g)) })
       ] }),
-      /* @__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,
-          href: u,
-          target: c,
+          label: a,
+          onClick: u,
+          href: f,
+          target: i,
           size: "medium",
           variant: "primary"
         }
       ) })
     ] })
   ] });
-}, ue = ({
+}, me = ({
   title: o = "Featured Content",
-  items: d,
-  layout: i = "grid",
+  items: x,
+  layout: d = "grid",
   itemButtonLabel: s = "View Details",
-  onItemClick: a,
-  customStyles: t = {}
+  onItemClick: t,
+  customStyles: a = {},
+  // Default Colors
+  backgroundColor: f = "bg-gray-50",
+  darkBackgroundColor: i = "dark:bg-gray-900",
+  titleColor: u = "text-gray-900",
+  darkTitleColor: m = "dark:text-white"
 }) => {
-  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: `
+  const l = d === "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__ */ 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: `
+      ${f} ${i}
+      ${a.container || ""}
+    `, 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 || ""}
+              ${u} ${m}
+              ${a.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: l, children: x.map((n) => /* @__PURE__ */ e.jsx(
+      ue,
       {
-        title: c.title,
-        description: c.description,
-        image: c.image,
-        tags: c.tags,
-        projectUrl: c.url,
-        orientation: i === "list" ? "horizontal" : "vertical",
+        title: n.title,
+        description: n.description,
+        image: n.image,
+        tags: n.tags,
+        projectUrl: n.url,
+        orientation: d === "list" ? "horizontal" : "vertical",
         actionLabel: s,
-        onViewProject: () => a == null ? void 0 : a(c.id)
+        onViewProject: () => t == null ? void 0 : t(n.id)
       },
-      c.id
+      n.id
     )) })
   ] }) });
-}, xe = ({
+}, ge = ({
   copyrightOwner: o,
-  copyrightText: d = `© ${(/* @__PURE__ */ new Date()).getFullYear()} All rights reserved.`,
-  socialLinks: i,
+  copyrightText: x = `© ${(/* @__PURE__ */ new Date()).getFullYear()} All rights reserved.`,
+  socialLinks: d,
   secondaryLinks: s = [],
-  customStyles: a = {}
-}) => /* @__PURE__ */ r.jsx("footer", { className: `
+  customStyles: t = {},
+  // Default Colors
+  backgroundColor: a = "bg-gray-900",
+  darkBackgroundColor: f = "dark:bg-black",
+  borderColor: i = "border-gray-800",
+  darkBorderColor: u = "dark:border-gray-800",
+  textColor: m = "text-white",
+  darkTextColor: l = "dark:text-white",
+  linksColor: n = "text-gray-400",
+  linksHoverColor: g = "hover:text-white"
+}) => /* @__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 })
+      ${a} ${f}
+      ${i} ${u}
+      ${t.container || ""}
+    `, 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 ${t.text || ""}`, children: [
+    /* @__PURE__ */ e.jsx("p", { className: `text-lg font-bold ${m} ${l}`, children: o }),
+    /* @__PURE__ */ e.jsx("p", { className: `text-sm mt-1 ${n} opacity-80`, children: x })
   ] }),
-  s.length > 0 && /* @__PURE__ */ r.jsx("div", { className: "flex gap-6 flex-wrap justify-center", children: s.map((t) => /* @__PURE__ */ r.jsx(
+  s.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "flex gap-6 flex-wrap justify-center", children: s.map((b) => /* @__PURE__ */ e.jsx(
     "a",
     {
-      href: t.href,
-      className: `text-gray-400 hover:text-blue-400 text-sm transition-colors ${a.link || ""}`,
-      children: t.label
+      href: b.href,
+      className: `
+                                        text-sm transition-colors 
+                                        ${n} ${g}
+                                        ${t.link || ""}
+                                    `,
+      children: b.label
     },
-    t.label
+    b.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: d.map((b) => /* @__PURE__ */ e.jsx(
     "a",
     {
-      href: t.url,
+      href: b.url,
       target: "_blank",
       rel: "noopener noreferrer",
-      className: `text-gray-400 hover:text-white transition-colors text-sm font-medium uppercase tracking-wider ${a.link || ""}`,
-      children: t.platform
+      className: `
+                                    transition-colors text-sm font-medium uppercase tracking-wider 
+                                    ${n} ${g}
+                                    ${t.link || ""}
+                                `,
+      children: b.platform
     },
-    t.platform
+    b.platform
   )) })
-] }) }) }), fe = ({
+] }) }) }), be = ({
   greeting: o = "Hello",
-  title: d,
-  subtitle: i,
+  title: x,
+  subtitle: d,
   imageUrl: s,
-  actions: a = [],
-  customStyles: t = {}
+  actions: t = [],
+  customStyles: a = {},
+  // Default Colors
+  backgroundColor: f = "bg-white",
+  darkBackgroundColor: i = "dark:bg-gray-900",
+  greetingColor: u = "text-blue-600",
+  darkGreetingColor: m = "dark:text-blue-400",
+  titleColor: l = "text-gray-900",
+  darkTitleColor: n = "dark:text-white",
+  subtitleColor: g = "text-gray-500",
+  darkSubtitleColor: b = "dark:text-gray-400"
 }) => {
-  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 $ = 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", j = s ? "flex-1 text-center lg:text-left" : "w-full", w = s ? "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: `
+      ${f} ${i}
+      ${a.container || ""}
+    `, 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: $, children: [
+    /* @__PURE__ */ e.jsxs("div", { className: `${j} ${a.content || ""}`, children: [
+      o && /* @__PURE__ */ e.jsx("p", { className: `
+                                font-semibold tracking-wide uppercase text-sm mb-4
+                                ${u} ${m}
+                            `, 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: `
+              ${l} ${n}
+              ${a.title || ""}
+            `, children: x }),
+      /* @__PURE__ */ e.jsx("p", { className: `
               text-lg sm:text-xl mb-8 leading-relaxed transition-colors
-              text-gray-500 dark:text-gray-400
+              ${g} ${b}
               ${!s && "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.subtitle || ""}
+            `, children: d }),
+      t.length > 0 && /* @__PURE__ */ e.jsx("div", { className: `flex flex-col sm:flex-row gap-4 ${w}`, children: t.map((y, k) => /* @__PURE__ */ e.jsx(
+        M,
         {
-          label: f.label,
-          variant: f.variant || "primary",
+          label: y.label,
+          variant: y.variant || "primary",
           size: "large",
-          onClick: f.onClick,
+          onClick: y.onClick,
           className: "w-full sm:w-auto"
         },
-        l
+        k
       )) })
     ] }),
-    s && /* @__PURE__ */ r.jsx("div", { className: `
+    s && /* @__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(
+              ${a.imageWrapper || ""}
+            `, 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,
           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,
-  links: i,
+  isLogoImage: x = !1,
+  links: d,
   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: `
+  customStyles: t = {},
+  isOpen: a = !1,
+  isScrolled: f = !1,
+  onToggleMenu: i,
+  onLinkClick: u,
+  onLogoClick: m
+}) => /* @__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"}
-        ${a.container || ""}
+        ${f || a ? "bg-white/90 dark:bg-gray-900/90 backdrop-blur-md shadow-sm border-b border-gray-100 dark:border-gray-800" : "bg-transparent"}
+        ${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: "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 ${t.logo || ""}`, onClick: m, children: x ? /* @__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: [
+          d.map((l) => /* @__PURE__ */ e.jsx(
+            "a",
+            {
+              href: l.href,
+              onClick: (n) => u == null ? void 0 : u(n, l.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"}
-                  ${a.link || ""}
+                  ${t.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: l.label
+            },
+            l.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, {}),
+            s.map((l, n) => /* @__PURE__ */ e.jsx(M, { ...l, size: "small" }, n))
           ] })
-        ] }) }),
-        /* @__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: i,
+              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: a ? /* @__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 || ""}
+          ${a ? "opacity-100 scale-y-100" : "opacity-0 scale-y-0 h-0 overflow-hidden"}
+          ${t.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: [
+            d.map((l) => /* @__PURE__ */ e.jsx(
+              "a",
+              {
+                href: l.href,
+                onClick: (n) => u == null ? void 0 : u(n, 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__ */ e.jsx("div", { className: "pt-4 w-full flex flex-col gap-3", children: s.map((l, n) => /* @__PURE__ */ e.jsx(M, { ...l, size: "medium", className: "w-full" }, n)) })
+          ] })
+        }
+      )
+    ]
+  }
+), he = (o) => {
+  const [x, d] = z(!1), [s, t] = z(!1);
+  Q(() => {
+    let i = !1;
+    const u = () => {
+      i || (window.requestAnimationFrame(() => {
+        t(window.scrollY > 20), i = !1;
+      }), i = !0);
+    };
+    return window.addEventListener("scroll", u), () => window.removeEventListener("scroll", u);
+  }, []);
+  const a = (i, u) => {
+    i.preventDefault();
+    const m = document.querySelector(u);
+    m && (m.scrollIntoView({ behavior: "smooth" }), d(!1));
+  }, f = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+  return /* @__PURE__ */ e.jsx(
+    xe,
+    {
+      ...o,
+      isOpen: x,
+      isScrolled: s,
+      onToggleMenu: () => d(!x),
+      onLinkClick: a,
+      onLogoClick: f
     }
   );
-}, ge = ({
+}, pe = ({
   title: o = "About Me",
-  avatarUrl: d,
-  bio: i,
+  avatarUrl: x,
+  bio: d,
   skillsTitle: s = "Tech Stack",
-  skills: a = [],
-  customStyles: t = {},
-  id: u
-}) => /* @__PURE__ */ r.jsx(
+  skills: t = [],
+  customStyles: a = {},
+  id: f,
+  // Default Colors
+  backgroundColor: i = "bg-white",
+  darkBackgroundColor: u = "dark:bg-gray-900",
+  borderColor: m = "border-gray-100",
+  darkBorderColor: l = "dark:border-gray-800",
+  titleColor: n = "text-gray-900",
+  darkTitleColor: g = "dark:text-white",
+  textColor: b = "text-gray-600",
+  darkTextColor: $ = "dark:text-gray-300"
+}) => /* @__PURE__ */ e.jsx(
   "section",
   {
-    id: u,
+    id: f,
     className: `
         py-20 transition-colors duration-300
-        bg-white dark:bg-gray-900 border-y border-gray-100 dark:border-gray-800
-        ${t.container || ""}
+        border-y 
+        ${i} ${u}
+        ${m} ${l}
+        ${a.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: `
-              text-3xl font-bold text-gray-900 dark:text-white transition-colors
-              ${t.title || ""}
+    children: /* @__PURE__ */ e.jsxs("div", { className: `max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 ${a.contentWrapper || ""}`, children: [
+      o && /* @__PURE__ */ e.jsxs("div", { className: "text-center mb-12", children: [
+        /* @__PURE__ */ e.jsx("h2", { className: `
+              text-3xl font-bold transition-colors
+              ${n} ${g}
+              ${a.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: `
-                    text-sm font-bold text-gray-900 dark:text-white uppercase tracking-wide mb-3
-                    ${t.skillsTitle || ""}
+      /* @__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: x, size: "xl" }) }),
+        /* @__PURE__ */ e.jsxs("div", { className: `text-lg leading-relaxed ${b} ${$} ${a.textWrapper || ""}`, children: [
+          /* @__PURE__ */ e.jsx("p", { className: `mb-8 whitespace-pre-line ${a.bio || ""}`, children: d }),
+          t.length > 0 && /* @__PURE__ */ e.jsxs("div", { children: [
+            s && /* @__PURE__ */ e.jsx("h3", { className: `
+                    text-sm font-bold uppercase tracking-wide mb-3
+                    ${n} ${g}
+                    ${a.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)) })
+            /* @__PURE__ */ e.jsx("div", { className: "flex flex-wrap gap-2", children: t.map((j) => /* @__PURE__ */ e.jsx(K, { label: j, variant: "secondary" }, j)) })
           ] })
         ] })
       ] })
@@ -768,15 +938,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
 };