@iniguezmarc/design-system 0.0.1

package/dist/index.umd.js

@@ -0,0 +1,149 @@
+(function(b,j){typeof exports=="object"&&typeof module<"u"?j(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],j):(b=typeof globalThis<"u"?globalThis:b||self,j(b.DesignSystem={},b.React))})(this,function(b,j){"use strict";var A={exports:{}},N={};/**
+ * @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 Y;function X(){if(Y)return N;Y=1;var o=Symbol.for("react.transitional.element"),d=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])}else t=a;return a=t.ref,{$$typeof:o,type:n,key:u,ref:a!==void 0?a:null,props:t}}return N.Fragment=d,N.jsx=i,N.jsxs=i,N}var E={};/**
+ * @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 I;function J(){return I||(I=1,process.env.NODE_ENV!=="production"&&function(){function o(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ue?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case T:return"Fragment";case ae:return"Profiler";case te:return"StrictMode";case le:return"Suspense";case ie:return"SuspenseList";case de: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 R:return"Portal";case se:return e.displayName||"Context";case ne:return(e._context.displayName||"Context")+".Consumer";case oe:var s=e.render;return e=e.displayName,e||(e=s.displayName||s.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ce:return s=e.displayName||null,s!==null?s:o(e.type)||"Memo";case C:s=e._payload,e=e._init;try{return o(e(s))}catch{}}return null}function d(e){return""+e}function i(e){try{d(e);var s=!1}catch{s=!0}if(s){s=console;var x=s.error,m=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return x.call(s,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",m),d(e)}}function n(e){if(e===T)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===C)return"<...>";try{var s=o(e);return s?"<"+s+">":"<...>"}catch{return"<...>"}}function a(){var e=S.A;return e===null?null:e.getOwner()}function t(){return Error("react-stack-top-frame")}function u(e){if(F.call(e,"key")){var s=Object.getOwnPropertyDescriptor(e,"key").get;if(s&&s.isReactWarning)return!1}return e.key!==void 0}function c(e,s){function x(){B||(B=!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)",s))}x.isReactWarning=!0,Object.defineProperty(e,"key",{get:x,configurable:!0})}function v(){var e=o(this.type);return V[e]||(V[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,s,x,m,$,M){var g=x.ref;return e={$$typeof:p,type:e,key:s,props:x,_owner:m},(g!==void 0?g:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:v}):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:M}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function l(e,s,x,m,$,M){var g=s.children;if(g!==void 0)if(m)if(xe(g)){for(m=0;m<g.length;m++)h(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 h(g);if(F.call(s,"key")){g=o(e);var y=Object.keys(s).filter(function(fe){return fe!=="key"});m=0<y.length?"{key: someKey, "+y.join(": ..., ")+": ...}":"{key: someKey}",U[g+m]||(y=0<y.length?"{"+y.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,y,g),U[g+m]=!0)}if(g=null,x!==void 0&&(i(x),g=""+x),u(s)&&(i(s.key),g=""+s.key),"key"in s){x={};for(var D in s)D!=="key"&&(x[D]=s[D])}else x=s;return g&&c(x,typeof e=="function"?e.displayName||e.name||"Unknown":e),f(e,g,x,a(),$,M)}function h(e){w(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===C&&(e._payload.status==="fulfilled"?w(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function w(e){return typeof e=="object"&&e!==null&&e.$$typeof===p}var k=j,p=Symbol.for("react.transitional.element"),R=Symbol.for("react.portal"),T=Symbol.for("react.fragment"),te=Symbol.for("react.strict_mode"),ae=Symbol.for("react.profiler"),ne=Symbol.for("react.consumer"),se=Symbol.for("react.context"),oe=Symbol.for("react.forward_ref"),le=Symbol.for("react.suspense"),ie=Symbol.for("react.suspense_list"),ce=Symbol.for("react.memo"),C=Symbol.for("react.lazy"),de=Symbol.for("react.activity"),ue=Symbol.for("react.client.reference"),S=k.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,F=Object.prototype.hasOwnProperty,xe=Array.isArray,L=console.createTask?console.createTask:function(){return null};k={react_stack_bottom_frame:function(e){return e()}};var B,V={},H=k.react_stack_bottom_frame.bind(k,t)(),G=L(n(t)),U={};E.Fragment=T,E.jsx=function(e,s,x){var m=1e4>S.recentlyCreatedOwnerStacks++;return l(e,s,x,!1,m?Error("react-stack-top-frame"):H,m?L(n(e)):G)},E.jsxs=function(e,s,x){var m=1e4>S.recentlyCreatedOwnerStacks++;return l(e,s,x,!0,m?Error("react-stack-top-frame"):H,m?L(n(e)):G)}}()),E}process.env.NODE_ENV==="production"?A.exports=X():A.exports=J();var r=A.exports;const W=({src:o,alt:d="Avatar",size:i="md",imageFit:n="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=n==="contain"?"object-contain":"object-cover";return 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:r.jsx("img",{src:o,alt:d,className:`
+          w-full h-full 
+          ${c}
+          ${a.image||""}
+        `})})},O=({label:o,variant:d="primary",customStyles:i={},className:n=""})=>{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 r.jsx("span",{className:`
+      ds-badge
+      ${a} 
+      ${t[d]}
+      ${i.container||""}
+      ${n}
+    `,children:o})},_=({label:o,variant:d="primary",size:i="medium",onClick:n,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",v={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} ${v[d]} ${f[i]} ${a}`;return t?r.jsx("a",{href:t,className:l,target:u,rel:u==="_blank"?"noopener noreferrer":void 0,onClick:n,children:o}):r.jsx("button",{type:"button",className:l,onClick:n,children:o})},q=({label:o,error:d,className:i,...n})=>r.jsxs("div",{className:"w-full",children:[o&&r.jsx("label",{className:"block text-sm font-medium text-gray-700 mb-1",children:o}),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}
+        `,...n}),d&&r.jsx("p",{className:"mt-1 text-xs text-red-500",children:d})]}),P=({iconSun:o,iconMoon:d,sunImage:i,moonImage:n,imageFit:a="contain",customStyles:t={},className:u=""})=>{const[c,v]=j.useState(!1);j.useEffect(()=>{const p=()=>{const T=document.documentElement.classList.contains("dark");v(T)};p();const R=new MutationObserver(p);return R.observe(document.documentElement,{attributes:!0,attributeFilter:["class"]}),()=>R.disconnect()},[]);const f=()=>{const p=document.documentElement;p.classList.contains("dark")?(p.classList.remove("dark"),localStorage.setItem("theme","light")):(p.classList.add("dark"),localStorage.setItem("theme","dark"))},l=`w-6 h-6 ${t.icon||""}`,h=r.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",className:l,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children: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"})}),w=r.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",className:l,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children: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"})}),k=()=>{const p=a==="contain"?"object-contain":"object-cover";return c?i?r.jsx("img",{src:i,alt:"Light Mode",className:`${l} ${p}`}):o||h:n?r.jsx("img",{src:n,alt:"Dark Mode",className:`${l} ${p}`}):d||w};return 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:k()})},z=({title:o,description:d,image:i,tags:n=[],orientation:a="vertical",actionLabel:t="View Project",projectUrl:u,linkTarget:c="_self",onViewProject:v,customStyles:f={},className:l=""})=>{const h=a==="horizontal";return 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 */
+      ${h?"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:[r.jsxs("div",{className:`
+        ds-card-image overflow-hidden relative
+        ${h?"w-full h-48 md:w-2/5 md:h-auto":"w-full h-48"} 
+        ${f.imageWrapper||""} 
+      `,children:[r.jsx("img",{src:i,alt:o,className:"w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"}),r.jsx("div",{className:"absolute inset-0 bg-transparent dark:bg-black/20 transition-colors pointer-events-none"})]}),r.jsxs("div",{className:`ds-card-content p-6 flex flex-col justify-between flex-1 ${f.content||""}`,children:[r.jsxs("div",{children:[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}),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}),r.jsx("div",{className:`ds-card-tags flex flex-wrap gap-2 mb-6 ${f.tagsContainer||""}`,children:n.map(w=>r.jsx(O,{label:w,variant:"secondary"},w))})]}),r.jsx("div",{className:"ds-card-actions flex justify-start mt-auto",children:r.jsx(_,{label:t,onClick:v,href:u,target:c,size:"medium",variant:"primary"})})]})]})},Z=({title:o="Featured Content",items:d,layout:i="grid",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 r.jsx("section",{className:`
+      py-16 px-4 transition-colors duration-300
+      bg-gray-50 dark:bg-gray-900
+      ${t.container||""}
+    `,children:r.jsxs("div",{className:"max-w-7xl mx-auto",children:[o&&r.jsxs("div",{className:"mb-12 text-start",children:[r.jsx("h2",{className:`
+              text-4xl font-extrabold mb-4 tracking-tight transition-colors
+              text-gray-900 dark:text-white
+              ${t.title||""}
+            `,children:o}),r.jsx("div",{className:"h-1.5 w-24 bg-blue-600 mx-auto rounded-full"})]}),r.jsx("div",{className:u,children:d.map(c=>r.jsx(z,{title:c.title,description:c.description,image:c.image,tags:c.tags,projectUrl:c.url,orientation:i==="list"?"horizontal":"vertical",actionLabel:n,onViewProject:()=>a==null?void 0:a(c.id)},c.id))})]})})},Q=({copyrightOwner:o,copyrightText:d=`© ${new Date().getFullYear()} All rights reserved.`,socialLinks:i,secondaryLinks:n=[],customStyles:a={}})=>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:r.jsx("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:r.jsxs("div",{className:"flex flex-col md:flex-row justify-between items-center gap-6",children:[r.jsxs("div",{className:`text-center md:text-left ${a.text||""}`,children:[r.jsx("p",{className:"text-lg font-bold text-white",children:o}),r.jsx("p",{className:"text-gray-400 text-sm mt-1",children:d})]}),n.length>0&&r.jsx("div",{className:"flex gap-6 flex-wrap justify-center",children:n.map(t=>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))}),r.jsx("div",{className:"flex space-x-6",children:i.map(t=>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))})]})})}),K=({greeting:o="Hello",title:d,subtitle:i,imageUrl:n,actions:a=[],customStyles:t={}})=>{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",c=n?"flex-1 text-center lg:text-left":"w-full",v=n?"justify-center lg:justify-start":"justify-center";return 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:r.jsx("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:r.jsxs("div",{className:u,children:[r.jsxs("div",{className:`${c} ${t.content||""}`,children:[o&&r.jsx("p",{className:"text-blue-600 dark:text-blue-400 font-semibold tracking-wide uppercase text-sm mb-4",children:o}),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}),r.jsx("p",{className:`
+              text-lg sm:text-xl mb-8 leading-relaxed transition-colors
+              text-gray-500 dark:text-gray-400
+              ${!n&&"mx-auto max-w-2xl"}
+              ${t.subtitle||""}
+            `,children:i}),a.length>0&&r.jsx("div",{className:`flex flex-col sm:flex-row gap-4 ${v}`,children:a.map((f,l)=>r.jsx(_,{label:f.label,variant:f.variant||"primary",size:"large",onClick:f.onClick,className:"w-full sm:w-auto"},l))})]}),n&&r.jsx("div",{className:`
+              flex-1 w-full max-w-md lg:max-w-full relative 
+              ${t.imageWrapper||""}
+            `,children: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:[r.jsx("div",{className:"absolute inset-0 bg-gray-900/5 dark:bg-black/20 group-hover:bg-transparent transition-colors duration-500"}),r.jsx("img",{src:n,alt:"Hero Visual",className:"w-full h-full object-cover transform transition-transform duration-700 hover:scale-105"})]})})]})})})},ee=({logo:o="Marc.Dev",isLogoImage:d=!1,links:i,actions:n=[],customStyles:a={}})=>{const[t,u]=j.useState(!1),[c,v]=j.useState(!1);j.useEffect(()=>{const l=()=>v(window.scrollY>20);return window.addEventListener("scroll",l),()=>window.removeEventListener("scroll",l)},[]);const f=(l,h)=>{l.preventDefault();const w=document.querySelector(h);w&&(w.scrollIntoView({behavior:"smooth"}),u(!1))};return 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:[r.jsx("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:r.jsxs("div",{className:"flex justify-between items-center h-20",children:[r.jsx("div",{className:`flex-shrink-0 cursor-pointer flex items-center ${a.logo||""}`,onClick:()=>window.scrollTo({top:0,behavior:"smooth"}),children:d?r.jsx("img",{src:o,alt:"Logo",className:"h-8 w-auto"}):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})}),r.jsxs("div",{className:"hidden md:flex space-x-8 items-center",children:[i.map(l=>r.jsx("a",{href:l.href,onClick:h=>f(h,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)),r.jsxs("div",{className:"flex items-center gap-4 pl-6 border-l border-gray-200 dark:border-gray-700",children:[r.jsx(P,{}),n.map((l,h)=>r.jsx(_,{...l,size:"small"},h))]})]}),r.jsxs("div",{className:"flex items-center gap-4 md:hidden",children:[r.jsx(P,{}),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:r.jsx("svg",{className:"h-6 w-6",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:t?r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"}):r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M4 6h16M4 12h16M4 18h16"})})})]})]})}),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:r.jsxs("div",{className:"px-6 py-6 space-y-4 flex flex-col items-center",children:[i.map(l=>r.jsx("a",{href:l.href,onClick:h=>f(h,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)),n.length>0&&r.jsx("div",{className:"pt-4 w-full flex flex-col gap-3",children:n.map((l,h)=>r.jsx(_,{...l,size:"medium",className:"w-full"},h))})]})})]})},re=({title:o="About Me",avatarUrl:d,bio:i,skillsTitle:n="Tech Stack",skills:a=[],customStyles:t={},id:u})=>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:r.jsxs("div",{className:`max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 ${t.contentWrapper||""}`,children:[o&&r.jsxs("div",{className:"text-center mb-12",children:[r.jsx("h2",{className:`
+              text-3xl font-bold text-gray-900 dark:text-white transition-colors
+              ${t.title||""}
+            `,children:o}),r.jsx("div",{className:"mt-2 h-1 w-20 bg-blue-600 mx-auto rounded"})]}),r.jsxs("div",{className:"flex flex-col md:flex-row items-center gap-12",children:[r.jsx("div",{className:"flex-shrink-0",children:r.jsx(W,{src:d,size:"xl"})}),r.jsxs("div",{className:`text-lg text-gray-600 dark:text-gray-300 leading-relaxed ${t.textWrapper||""}`,children:[r.jsx("p",{className:`mb-8 whitespace-pre-line ${t.bio||""}`,children:i}),a.length>0&&r.jsxs("div",{children:[n&&r.jsx("h3",{className:`
+                    text-sm font-bold text-gray-900 dark:text-white uppercase tracking-wide mb-3
+                    ${t.skillsTitle||""}
+                  `,children:n}),r.jsx("div",{className:"flex flex-wrap gap-2",children:a.map(c=>r.jsx(O,{label:c,variant:"secondary"},c))})]})]})]})]})});b.Avatar=W,b.Badge=O,b.Button=_,b.ContentGrid=Z,b.Footer=Q,b.Hero=K,b.Input=q,b.Navbar=ee,b.ProfileSection=re,b.ProjectCard=z,b.ThemeToggle=P,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})});

package/dist/src/components/atoms/Avatar/Avatar.d.ts

@@ -0,0 +1,14 @@
+export interface AvatarSlots {
+    container?: string;
+    image?: string;
+}
+interface AvatarProps {
+    src: string;
+    alt?: string;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    imageFit?: 'cover' | 'contain';
+    customStyles?: AvatarSlots;
+    className?: string;
+}
+export declare const Avatar: ({ src, alt, size, imageFit, customStyles, className }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/atoms/Badge/Badge.d.ts

@@ -0,0 +1,11 @@
+export interface BadgeSlots {
+    container?: string;
+}
+interface BadgeProps {
+    label: string;
+    variant?: 'primary' | 'secondary' | 'outline' | 'success';
+    customStyles?: BadgeSlots;
+    className?: string;
+}
+export declare const Badge: ({ label, variant, customStyles, className }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/atoms/Button/Button.d.ts

@@ -0,0 +1,11 @@
+interface ButtonProps {
+    label: string;
+    variant?: 'primary' | 'secondary' | 'danger' | 'outline';
+    size?: 'small' | 'medium' | 'large';
+    onClick?: () => void;
+    className?: string;
+    href?: string;
+    target?: string;
+}
+export declare const Button: ({ label, variant, size, onClick, className, href, target }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/atoms/Input/Input.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    error?: string;
+}
+export declare const Input: ({ label, error, className, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/atoms/ThemeToggle/ThemeToggle.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+export interface ThemeToggleSlots {
+    container?: string;
+    icon?: string;
+}
+export interface ThemeToggleProps {
+    iconSun?: React.ReactNode;
+    iconMoon?: React.ReactNode;
+    sunImage?: string;
+    moonImage?: string;
+    imageFit?: 'cover' | 'contain';
+    customStyles?: ThemeToggleSlots;
+    className?: string;
+}
+export declare const ThemeToggle: ({ iconSun, iconMoon, sunImage, moonImage, imageFit, customStyles, className }: ThemeToggleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/molecules/ProjectCard/ProjectCard.d.ts

@@ -0,0 +1,29 @@
+export interface ProjectCardSlots {
+    container?: string;
+    imageWrapper?: string;
+    content?: string;
+    title?: string;
+    description?: string;
+    tagsContainer?: string;
+    /** URL the button links to */
+    projectUrl?: string;
+    linkTarget?: '_self' | '_blank';
+    /** Optional callback (if you prefer onClick) */
+    onViewProject?: () => void;
+}
+interface ProjectCardProps {
+    title: string;
+    description: string;
+    image: string;
+    tags?: string[];
+    projectUrl?: string;
+    linkTarget?: '_self' | '_blank';
+    orientation?: 'vertical' | 'horizontal';
+    actionLabel?: string;
+    onViewProject?: () => void;
+    /** Hooks to customize internal style parts */
+    customStyles?: ProjectCardSlots;
+    className?: string;
+}
+export declare const ProjectCard: ({ title, description, image, tags, orientation, actionLabel, projectUrl, linkTarget, onViewProject, customStyles, className }: ProjectCardProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/organisms/ContentGrid/ContentGrid.d.ts

@@ -0,0 +1,22 @@
+export interface GridItem {
+    id: string;
+    title: string;
+    description: string;
+    image: string;
+    tags: string[];
+    url: string;
+}
+export interface ContentGridSlots {
+    container?: string;
+    title?: string;
+}
+interface ContentGridProps {
+    title?: string;
+    items: GridItem[];
+    layout?: 'grid' | 'list';
+    itemButtonLabel?: string;
+    onItemClick?: (id: string) => void;
+    customStyles?: ContentGridSlots;
+}
+export declare const ContentGrid: ({ title, items, layout, itemButtonLabel, onItemClick, customStyles }: ContentGridProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/organisms/Footer/Footer.d.ts

@@ -0,0 +1,22 @@
+interface SocialLink {
+    platform: string;
+    url: string;
+}
+interface FooterLink {
+    label: string;
+    href: string;
+}
+export interface FooterSlots {
+    container?: string;
+    text?: string;
+    link?: string;
+}
+interface FooterProps {
+    copyrightOwner: string;
+    socialLinks: SocialLink[];
+    copyrightText?: string;
+    secondaryLinks?: FooterLink[];
+    customStyles?: FooterSlots;
+}
+export declare const Footer: ({ copyrightOwner, copyrightText, socialLinks, secondaryLinks, customStyles }: FooterProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/organisms/Hero/Hero.d.ts

@@ -0,0 +1,22 @@
+export interface HeroAction {
+    label: string;
+    onClick: () => void;
+    variant?: 'primary' | 'secondary' | 'outline';
+}
+export interface HeroSlots {
+    container?: string;
+    content?: string;
+    title?: string;
+    subtitle?: string;
+    imageWrapper?: string;
+}
+interface HeroProps {
+    greeting?: string;
+    title: string;
+    subtitle: string;
+    imageUrl?: string;
+    actions?: HeroAction[];
+    customStyles?: HeroSlots;
+}
+export declare const Hero: ({ greeting, title, subtitle, imageUrl, actions, customStyles }: HeroProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/organisms/Navbar/Navbar.d.ts

@@ -0,0 +1,25 @@
+export interface NavbarLink {
+    label: string;
+    href: string;
+    active?: boolean;
+}
+export interface NavbarAction {
+    label: string;
+    onClick: () => void;
+    variant?: 'primary' | 'secondary' | 'outline';
+}
+export interface NavbarSlots {
+    container?: string;
+    logo?: string;
+    link?: string;
+    mobileMenu?: string;
+}
+interface NavbarProps {
+    logo?: string;
+    isLogoImage?: boolean;
+    links: NavbarLink[];
+    actions?: NavbarAction[];
+    customStyles?: NavbarSlots;
+}
+export declare const Navbar: ({ logo, isLogoImage, links, actions, customStyles }: NavbarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/organisms/ProfileSection/ProfileSection.d.ts

@@ -0,0 +1,25 @@
+export interface ProfileSectionSlots {
+    container?: string;
+    contentWrapper?: string;
+    textWrapper?: string;
+    title?: string;
+    bio?: string;
+    skillsTitle?: string;
+}
+interface ProfileSectionProps {
+    /** Section title (ex: About Me) */
+    title?: string;
+    /** Profile photo URL */
+    avatarUrl: string;
+    /** Main biography text (accepts line breaks) */
+    bio: string;
+    /** Title for the skills list */
+    skillsTitle?: string;
+    /** List of technologies to show as Badges */
+    skills?: string[];
+    /** Style hooks */
+    customStyles?: ProfileSectionSlots;
+    id?: string;
+}
+export declare const ProfileSection: ({ title, avatarUrl, bio, skillsTitle, skills, customStyles, id }: ProfileSectionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/index.d.ts

@@ -0,0 +1,11 @@
+export * from './components/atoms/Avatar/Avatar';
+export * from './components/atoms/Badge/Badge';
+export * from './components/atoms/Button/Button';
+export * from './components/atoms/Input/Input';
+export * from './components/atoms/ThemeToggle/ThemeToggle';
+export * from './components/molecules/ProjectCard/ProjectCard';
+export * from './components/organisms/ContentGrid/ContentGrid';
+export * from './components/organisms/Footer/Footer';
+export * from './components/organisms/Hero/Hero';
+export * from './components/organisms/Navbar/Navbar';
+export * from './components/organisms/ProfileSection/ProfileSection';

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@iniguezmarc/design-system",
+  "private": false,
+  "version": "0.0.1",
+  "type": "module",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "type-check": "tsc -b",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "deploy-storybook": "gh-pages -d storybook-static"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.2",
+    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/manager-api": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@storybook/test": "^8.4.7",
+    "@storybook/theming": "^8.4.7",
+    "@types/node": "^24.10.1",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^9.9.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "gh-pages": "^6.1.1",
+    "globals": "^15.9.0",
+    "postcss": "^8.4.38",
+    "storybook": "^8.4.7",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.1",
+    "vite": "^5.4.1",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}