@iniguezmarc/design-system 0.0.1

package/dist/index.es.js

@@ -0,0 +1,782 @@
+import se, { useState as C, useEffect as B } from "react";
+var S = { exports: {} }, y = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * 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, {
+      $$typeof: o,
+      type: s,
+      key: u,
+      ref: a !== void 0 ? a : null,
+      props: t
+    };
+  }
+  return y.Fragment = d, y.jsx = i, y.jsxs = i, y;
+}
+var N = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * 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:
+          return "Fragment";
+        case G:
+          return "Profiler";
+        case U:
+          return "StrictMode";
+        case Z:
+          return "Suspense";
+        case Q:
+          return "SuspenseList";
+        case ee:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.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:
+            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 T:
+            n = e._payload, e = e._init;
+            try {
+              return o(e(n));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function d(e) {
+      return "" + e;
+    }
+    function i(e) {
+      try {
+        d(e);
+        var n = !1;
+      } catch {
+        n = !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,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          m
+        ), d(e);
+      }
+    }
+    function s(e) {
+      if (e === k) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === T)
+        return "<...>";
+      try {
+        var n = o(e);
+        return n ? "<" + n + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function a() {
+      var e = R.A;
+      return e === null ? null : e.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;
+      }
+      return e.key !== void 0;
+    }
+    function c(e, n) {
+      function x() {
+        M || (M = !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
+        ));
+      }
+      x.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: x,
+        configurable: !0
+      });
+    }
+    function p() {
+      var e = o(this.type);
+      return D[e] || (D[e] = !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;
+    }
+    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", {
+        enumerable: !1,
+        get: p
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: _
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: O
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    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);
+          } 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) {
+          return ae !== "key";
+        });
+        m = 0 < j.length ? "{key: someKey, " + j.join(": ..., ") + ": ...}" : "{key: someKey}", W[g + m] || (j = 0 < j.length ? "{" + j.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);
+      }
+      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
+      );
+    }
+    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 v(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === h;
+    }
+    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() {
+      return null;
+    };
+    w = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    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++;
+      return l(
+        e,
+        n,
+        x,
+        !1,
+        m ? Error("react-stack-top-frame") : Y,
+        m ? A(s(e)) : I
+      );
+    }, N.jsxs = function(e, n, x) {
+      var m = 1e4 > R.recentlyCreatedOwnerStacks++;
+      return l(
+        e,
+        n,
+        x,
+        !0,
+        m ? Error("react-stack-top-frame") : Y,
+        m ? A(s(e)) : I
+      );
+    };
+  }()), N;
+}
+process.env.NODE_ENV === "production" ? S.exports = ne() : S.exports = oe();
+var r = S.exports;
+const le = ({
+  src: o,
+  alt: d = "Avatar",
+  size: i = "md",
+  imageFit: s = "cover",
+  customStyles: a = {},
+  className: t = ""
+}) => {
+  const u = {
+    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(
+    "img",
+    {
+      src: o,
+      alt: d,
+      className: `
+          w-full h-full 
+          ${c}
+          ${a.image || ""}
+        `
+    }
+  ) });
+}, H = ({
+  label: o,
+  variant: d = "primary",
+  customStyles: i = {},
+  className: s = ""
+}) => {
+  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"
+  };
+  return /* @__PURE__ */ r.jsx("span", { className: `
+      ds-badge
+      ${a} 
+      ${t[d]}
+      ${i.container || ""}
+      ${s}
+    `, children: o });
+}, $ = ({
+  label: o,
+  variant: d = "primary",
+  size: i = "medium",
+  onClick: s,
+  className: a = "",
+  href: t,
+  target: u
+}) => {
+  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 = {
+    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(
+    "a",
+    {
+      href: t,
+      className: l,
+      target: u,
+      rel: u === "_blank" ? "noopener noreferrer" : void 0,
+      onClick: s,
+      children: o
+    }
+  ) : /* @__PURE__ */ r.jsx(
+    "button",
+    {
+      type: "button",
+      className: l,
+      onClick: s,
+      children: o
+    }
+  );
+}, 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",
+    {
+      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
+    }
+  ),
+  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 = ""
+}) => {
+  const [c, p] = C(!1);
+  B(() => {
+    const h = () => {
+      const k = document.documentElement.classList.contains("dark");
+      p(k);
+    };
+    h();
+    const E = new MutationObserver(h);
+    return E.observe(document.documentElement, { attributes: !0, attributeFilter: ["class"] }), () => E.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",
+    {
+      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()
+    }
+  );
+}, ie = ({
+  title: o,
+  description: d,
+  image: i,
+  tags: s = [],
+  orientation: a = "vertical",
+  actionLabel: t = "View Project",
+  projectUrl: u,
+  linkTarget: c = "_self",
+  onViewProject: p,
+  customStyles: f = {},
+  className: l = ""
+}) => {
+  const b = a === "horizontal";
+  return /* @__PURE__ */ r.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"}
+      
+      /* 3. LIGHT MODE (Default) */
+      /* White background, gray border, black shadow on hover */
+      bg-white border-gray-100 shadow-lg hover:shadow-xl hover:-translate-y-1
+      
+      /* 4. DARK MODE (Overrides) */
+      /* Dark background and border */
+      dark:bg-gray-800 dark:border-gray-700
+      
+      /* IMPORTANT: */
+      /* 1. Remove base shadow */
+      dark:shadow-none 
+      
+      /* 2. Remove black hover shadow */
+      dark:hover:shadow-none
+      
+      /* 3. APPLY PORTABLE WHITE SHADOW (No external config) */
+      /* Syntax: shadow-[X_Y_Blur_Spread_Color] */
+      /* Use ! to force priority */
+      /* 0 (X) | 20px (Y, falls down) | 25px (Blur) | -5px (Spread) | Color */
+      dark:hover:!shadow-[0_20px_25px_-5px_rgba(255,255,255,0.30)]
+      
+      /* 5. EXTERNAL INJECTIONS */
+      ${f.container || ""} 
+      ${l}
+    `, children: [
+    /* @__PURE__ */ r.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 || ""} 
+      `, children: [
+      /* @__PURE__ */ r.jsx(
+        "img",
+        {
+          src: i,
+          alt: o,
+          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__ */ 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: `
+            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: `
+            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)) })
+      ] }),
+      /* @__PURE__ */ r.jsx("div", { className: "ds-card-actions flex justify-start mt-auto", children: /* @__PURE__ */ r.jsx(
+        $,
+        {
+          label: t,
+          onClick: p,
+          href: u,
+          target: c,
+          size: "medium",
+          variant: "primary"
+        }
+      ) })
+    ] })
+  ] });
+}, ue = ({
+  title: o = "Featured Content",
+  items: d,
+  layout: i = "grid",
+  itemButtonLabel: s = "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: `
+      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: `
+              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__ */ r.jsx("div", { className: u, children: d.map((c) => /* @__PURE__ */ r.jsx(
+      ie,
+      {
+        title: c.title,
+        description: c.description,
+        image: c.image,
+        tags: c.tags,
+        projectUrl: c.url,
+        orientation: i === "list" ? "horizontal" : "vertical",
+        actionLabel: s,
+        onViewProject: () => a == null ? void 0 : a(c.id)
+      },
+      c.id
+    )) })
+  ] }) });
+}, xe = ({
+  copyrightOwner: o,
+  copyrightText: d = `© ${(/* @__PURE__ */ new Date()).getFullYear()} All rights reserved.`,
+  socialLinks: i,
+  secondaryLinks: s = [],
+  customStyles: a = {}
+}) => /* @__PURE__ */ r.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 })
+  ] }),
+  s.length > 0 && /* @__PURE__ */ r.jsx("div", { className: "flex gap-6 flex-wrap justify-center", children: s.map((t) => /* @__PURE__ */ r.jsx(
+    "a",
+    {
+      href: t.href,
+      className: `text-gray-400 hover:text-blue-400 text-sm transition-colors ${a.link || ""}`,
+      children: t.label
+    },
+    t.label
+  )) }),
+  /* @__PURE__ */ r.jsx("div", { className: "flex space-x-6", children: i.map((t) => /* @__PURE__ */ r.jsx(
+    "a",
+    {
+      href: t.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
+    },
+    t.platform
+  )) })
+] }) }) }), fe = ({
+  greeting: o = "Hello",
+  title: d,
+  subtitle: i,
+  imageUrl: s,
+  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: `
+      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: `
+              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: `
+              text-lg sm:text-xl mb-8 leading-relaxed transition-colors
+              text-gray-500 dark:text-gray-400
+              ${!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(
+        $,
+        {
+          label: f.label,
+          variant: f.variant || "primary",
+          size: "large",
+          onClick: f.onClick,
+          className: "w-full sm:w-auto"
+        },
+        l
+      )) })
+    ] }),
+    s && /* @__PURE__ */ r.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(
+        "img",
+        {
+          src: s,
+          alt: "Hero Visual",
+          className: "w-full h-full object-cover transform transition-transform duration-700 hover:scale-105"
+        }
+      )
+    ] }) })
+  ] }) }) });
+}, me = ({
+  logo: o = "Marc.Dev",
+  isLogoImage: d = !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: `
+        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 || ""}
+      `,
+      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: `
+                  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 || ""}
+                `,
+                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" }) })
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ r.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)) })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}, ge = ({
+  title: o = "About Me",
+  avatarUrl: d,
+  bio: i,
+  skillsTitle: s = "Tech Stack",
+  skills: a = [],
+  customStyles: t = {},
+  id: u
+}) => /* @__PURE__ */ r.jsx(
+  "section",
+  {
+    id: u,
+    className: `
+        py-20 transition-colors duration-300
+        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: `
+              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__ */ 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 || ""}
+                  `, 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)) })
+          ] })
+        ] })
+      ] })
+    ] })
+  }
+);
+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
+};