@iniguezmarc/design-system 0.0.3 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.umd.js CHANGED
@@ -1,4 +1,4 @@
1
- (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={};/**
1
+ (function(j,k){typeof exports=="object"&&typeof module<"u"?k(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],k):(j=typeof globalThis<"u"?globalThis:j||self,k(j.DesignSystem={},j.React))})(this,function(j,k){"use strict";var B={exports:{}},T={};/**
2
2
  * @license React
3
3
  * react-jsx-runtime.production.js
4
4
  *
@@ -6,7 +6,7 @@
6
6
  *
7
7
  * This source code is licensed under the MIT license found in the
8
8
  * LICENSE file in the root directory of this source tree.
9
- */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={};/**
9
+ */var G;function ae(){if(G)return T;G=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:f,ref:t!==void 0?t:null,props:a}}return T.Fragment=x,T.jsx=d,T.jsxs=d,T}var R={};/**
10
10
  * @license React
11
11
  * react-jsx-runtime.development.js
12
12
  *
@@ -14,46 +14,53 @@
14
14
  *
15
15
  * This source code is licensed under the MIT license found in the
16
16
  * LICENSE file in the root directory of this source tree.
17
- */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:
17
+ */var U;function se(){return U||(U=1,process.env.NODE_ENV!=="production"&&function(){function o(r){if(r==null)return null;if(typeof r=="function")return r.$$typeof===fe?null:r.displayName||r.name||null;if(typeof r=="string")return r;switch(r){case y:return"Fragment";case E:return"Profiler";case N:return"StrictMode";case C:return"Suspense";case M:return"SuspenseList";case xe:return"Activity"}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."),r.$$typeof){case w:return"Portal";case P:return r.displayName||"Context";case O:return(r._context.displayName||"Context")+".Consumer";case S:var c=r.render;return r=r.displayName,r||(r=c.displayName||c.name||"",r=r!==""?"ForwardRef("+r+")":"ForwardRef"),r;case D:return c=r.displayName||null,c!==null?c:o(r.type)||"Memo";case z:c=r._payload,r=r._init;try{return o(r(c))}catch{}}return null}function x(r){return""+r}function d(r){try{x(r);var c=!1}catch{c=!0}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.",p),x(r)}}function s(r){if(r===y)return"<>";if(typeof r=="object"&&r!==null&&r.$$typeof===z)return"<...>";try{var c=o(r);return c?"<"+c+">":"<...>"}catch{return"<...>"}}function t(){var r=W.A;return r===null?null:r.getOwner()}function a(){return Error("react-stack-top-frame")}function f(r){if(Z.call(r,"key")){var c=Object.getOwnPropertyDescriptor(r,"key").get;if(c&&c.isReactWarning)return!1}return r.key!==void 0}function i(r,c){function h(){Q||(Q=!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)",c))}h.isReactWarning=!0,Object.defineProperty(r,"key",{get:h,configurable:!0})}function u(){var r=o(this.type);return K[r]||(K[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.")),r=this.props.ref,r!==void 0?r:null}function m(r,c,h,p,L,V){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: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(r,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(r,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:L}),Object.defineProperty(r,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:V}),Object.freeze&&(Object.freeze(r.props),Object.freeze(r)),r}function l(r,c,h,p,L,V){var v=c.children;if(v!==void 0)if(p)if(me(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 n(v);if(Z.call(c,"key")){v=o(r);var _=Object.keys(c).filter(function(ge){return ge!=="key"});p=0<_.length?"{key: someKey, "+_.join(": ..., ")+": ...}":"{key: someKey}",te[v+p]||(_=0<_.length?"{"+_.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
18
18
  let props = %s;
19
19
  <%s {...props} />
20
20
  React keys must be passed directly to JSX without using spread:
21
21
  let props = %s;
22
- <%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:`
23
- 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
24
- ${u[i]}
25
- ${a.container||""}
26
- ${t}
27
- `,children:r.jsx("img",{src:o,alt:d,className:`
28
- w-full h-full
29
- ${c}
30
- ${a.image||""}
31
- `})})},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:`
32
- ds-badge
33
- ${a}
34
- ${t[d]}
35
- ${i.container||""}
36
- ${n}
37
- `,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:`
38
- w-full px-3 py-2 border rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all
39
- ${d?"border-red-500 focus:ring-red-500":"border-gray-300"}
40
- ${i}
41
- `,...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:`
42
- p-2 rounded-full transition-all duration-300 ease-in-out
43
- focus:outline-none focus:ring-2 focus:ring-blue-500 hover:rotate-12 hover:scale-110 overflow-hidden
44
-
45
- ${c?"bg-gray-700 text-yellow-300 hover:bg-gray-600":"bg-gray-200 text-gray-600 hover:bg-gray-300"}
46
-
47
- ${t.container||""}
48
- ${u}
49
- `,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:`
22
+ <%s key={someKey} {...props} />`,p,v,_,v),te[v+p]=!0)}if(v=null,h!==void 0&&(d(h),v=""+h),f(c)&&(d(c.key),v=""+c.key),"key"in c){h={};for(var H in c)H!=="key"&&(h[H]=c[H])}else h=c;return v&&i(h,typeof r=="function"?r.displayName||r.name||"Unknown":r),m(r,v,h,t(),L,V)}function n(r){g(r)?r._store&&(r._store.validated=1):typeof r=="object"&&r!==null&&r.$$typeof===z&&(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 g(r){return typeof r=="object"&&r!==null&&r.$$typeof===$}var b=k,$=Symbol.for("react.transitional.element"),w=Symbol.for("react.portal"),y=Symbol.for("react.fragment"),N=Symbol.for("react.strict_mode"),E=Symbol.for("react.profiler"),O=Symbol.for("react.consumer"),P=Symbol.for("react.context"),S=Symbol.for("react.forward_ref"),C=Symbol.for("react.suspense"),M=Symbol.for("react.suspense_list"),D=Symbol.for("react.memo"),z=Symbol.for("react.lazy"),xe=Symbol.for("react.activity"),fe=Symbol.for("react.client.reference"),W=b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Z=Object.prototype.hasOwnProperty,me=Array.isArray,F=console.createTask?console.createTask:function(){return null};b={react_stack_bottom_frame:function(r){return r()}};var Q,K={},ee=b.react_stack_bottom_frame.bind(b,a)(),re=F(s(a)),te={};R.Fragment=y,R.jsx=function(r,c,h){var p=1e4>W.recentlyCreatedOwnerStacks++;return l(r,c,h,!1,p?Error("react-stack-top-frame"):ee,p?F(s(r)):re)},R.jsxs=function(r,c,h){var p=1e4>W.recentlyCreatedOwnerStacks++;return l(r,c,h,!0,p?Error("react-stack-top-frame"):ee,p?F(s(r)):re)}}()),R}process.env.NODE_ENV==="production"?B.exports=ae():B.exports=se();var e=B.exports;const X=({src:o,alt:x="Avatar",size:d="md",imageFit:s="cover",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 n={sm:"h-8 w-8",md:"h-12 w-12",lg:"h-16 w-16",xl:"h-32 w-32"},g=s==="contain"?"object-contain":"object-cover",b=`border ${f} ${i}`,$=`${u} ${m}`;return e.jsx("div",{className:`
23
+ ds-avatar relative rounded-full overflow-hidden flex-shrink-0
24
+ ${n[d]}
25
+ ${$}
26
+ ${b}
27
+ ${t.container||""}
28
+ ${a}
29
+ `,children:e.jsx("img",{src:o,alt:x,loading:l,decoding:"async",className:`
30
+ w-full h-full
31
+ ${g}
32
+ ${t.image||""}
33
+ `})})},Y=({label:o,variant:x="primary",customStyles:d={},className:s="",endIcon:t,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 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 e.jsxs("span",{className:`
34
+ ds-badge
35
+ ${b}
36
+ ${$[x]}
37
+ ${d.container||""}
38
+ ${s}
39
+ `,children:[e.jsx("span",{className:d.label||"",children:o}),t&&e.jsx("span",{className:"flex items-center",children:t})]})},A=({label:o,variant:x="primary",size:d="medium",onClick:s,className:t="",customStyles:a={},href:f,target:i,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:w="dark:hover:bg-gray-700",outlineColor:y="text-blue-600 border-blue-600",outlineHoverColor:N="hover:bg-blue-50",darkOutlineColor:E="dark:text-blue-400 dark:border-blue-400",darkOutlineHoverColor:O="dark:hover:bg-blue-950"})=>{const P="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",S={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 ${w}`,outline:`bg-transparent ${y} border-2 ${N} focus:ring-blue-500 ${E} ${O}`},C={small:"px-3 py-1.5 text-sm",medium:"px-5 py-2.5 text-base",large:"px-8 py-3.5 text-lg"},M=`${P} ${S[x]} ${C[d]} ${a.container||""} ${t}`,D=e.jsx("span",{className:`relative z-10 flex items-center justify-center gap-2 ${a.label||""}`,children:o});return f?e.jsx("a",{href:f,className:M,target:i,rel:i==="_blank"?"noopener noreferrer":void 0,onClick:s,children:D}):e.jsx("button",{type:"button",className:M,onClick:s,children:D})},J=k.forwardRef(({label:o,error:x,className:d,customStyles:s={},startIcon:t,endIcon:a,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:w="border-red-500",darkErrorBorderColor:y="dark:border-red-500",errorTextColor:N="text-red-500",darkErrorTextColor:E="dark:text-red-400",...O},P)=>{const S=`
40
+ w-full py-2 border rounded-lg shadow-sm focus:outline-none focus:ring-2 transition-all
41
+ ${t?"pl-10":"px-3"}
42
+ ${a?"pr-10":"px-3"}
43
+ ${u} ${m}
44
+ ${g} ${b}
45
+ ${$}
46
+ `,C=x?`${w} focus:ring-red-500 ${y}`:`${l} ${n}`;return e.jsxs("div",{className:`w-full ${s.container||""} ${d}`,children:[o&&e.jsx("label",{className:`block text-sm font-medium ${f} ${i} mb-1 ${s.label||""}`,children:o}),e.jsxs("div",{className:"relative",children:[t&&e.jsx("div",{className:`absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none ${s.iconContainer||""}`,children:t}),e.jsx("input",{ref:P,className:`
47
+ ${S}
48
+ ${C}
49
+ ${s.input||""}
50
+ `,...O}),a&&e.jsx("div",{className:`absolute inset-y-0 right-0 pr-3 flex items-center ${s.iconContainer||""}`,children:a})]}),x&&e.jsx("p",{className:`mt-1 text-xs ${N} ${E} ${s.error||""}`,children:x})]})});J.displayName="BasicInput";const ne=({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?e.jsx("img",{src:t,alt:"Toggled On",className:`${l} ${g}`}):d:a?e.jsx("img",{src:a,alt:"Toggled Off",className:`${l} ${g}`}):s};return e.jsx("button",{onClick:x,title:m,className:`
51
+ p-2 rounded-full transition-all duration-300 ease-in-out
52
+ focus:outline-none focus:ring-2 focus:ring-blue-500 hover:rotate-12 hover:scale-110 overflow-hidden
53
+ ${o?"bg-gray-800 text-white hover:bg-gray-700":"bg-gray-200 text-gray-800 hover:bg-gray-300"}
54
+ ${i.container||""}
55
+ ${u}
56
+ `,children:n()})},I=({isDark:o,onToggle:x,iconSun:d,iconMoon:s,sunImage:t,moonImage:a,customStyles:f={},...i})=>{const[u,m]=k.useState(!1);k.useEffect(()=>{const w=()=>{const N=document.documentElement.classList.contains("dark");m(N)};w();const y=new MutationObserver(w);return y.observe(document.documentElement,{attributes:!0,attributeFilter:["class"]}),()=>y.disconnect()},[]);const l=()=>{const w=document.documentElement;w.classList.contains("dark")?(w.classList.remove("dark"),localStorage.setItem("theme","light")):(w.classList.add("dark"),localStorage.setItem("theme","dark")),x&&x()},n=o!==void 0?o:u,g=`w-6 h-6 ${f.icon||""}`,b=e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",className:g,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children: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"})}),$=e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",className:g,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children: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 e.jsx(ne,{...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")})},q=({title:o,description:x,image:d,tags:s=[],orientation:t="vertical",actionLabel:a="View Project",projectUrl:f,linkTarget:i="_self",onViewProject:u,customStyles:m={},className:l=""})=>{const n=t==="horizontal";return e.jsxs("div",{className:`
50
57
  /* 1. IDENTIFIER CLASS */
51
58
  ds-card
52
59
 
53
60
  /* 2. BASE STRUCTURE */
54
61
  group w-full rounded-xl overflow-hidden border transition-all duration-300
55
62
  /* Switch layout based on orientation prop */
56
- ${h?"flex flex-col md:flex-row":"flex flex-col"}
63
+ ${n?"flex flex-col md:flex-row":"flex flex-col"}
57
64
 
58
65
  /* 3. LIGHT MODE (Default) */
59
66
  /* White background, gray border, black shadow on hover */
@@ -77,73 +84,86 @@ React keys must be passed directly to JSX without using spread:
77
84
  dark:hover:!shadow-[0_20px_25px_-5px_rgba(255,255,255,0.30)]
78
85
 
79
86
  /* 5. EXTERNAL INJECTIONS */
80
- ${f.container||""}
87
+ ${m.container||""}
81
88
  ${l}
82
- `,children:[r.jsxs("div",{className:`
89
+ `,children:[e.jsxs("div",{className:`
83
90
  ds-card-image overflow-hidden relative
84
- ${h?"w-full h-48 md:w-2/5 md:h-auto":"w-full h-48"}
85
- ${f.imageWrapper||""}
86
- `,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:`
91
+ ${n?"w-full h-48 md:w-2/5 md:h-auto":"w-full h-48"}
92
+ ${m.imageWrapper||""}
93
+ `,children:[e.jsx("img",{src:d,alt:o,loading:"lazy",decoding:"async",className:"w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"}),e.jsx("div",{className:"absolute inset-0 bg-transparent dark:bg-black/20 transition-colors pointer-events-none"})]}),e.jsxs("div",{className:`ds-card-content p-6 flex flex-col justify-between flex-1 ${m.content||""}`,children:[e.jsxs("div",{children:[e.jsx("h3",{className:`
87
94
  ds-card-title text-2xl font-bold mb-3 transition-colors text-gray-900 dark:text-white
88
- ${f.title||""}
89
- `,children:o}),r.jsx("p",{className:`
95
+ ${m.title||""}
96
+ `,children:o}),e.jsx("p",{className:`
90
97
  ds-card-description mb-4 line-clamp-3 leading-relaxed transition-colors text-gray-600 dark:text-gray-300
91
- ${f.description||""}
92
- `,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:`
98
+ ${m.description||""}
99
+ `,children:x}),e.jsx("div",{className:`ds-card-tags flex flex-wrap gap-2 mb-6 ${m.tagsContainer||""}`,children:s.map(g=>e.jsx(Y,{label:g,variant:"secondary"},g))})]}),e.jsx("div",{className:"ds-card-actions flex justify-start mt-auto",children:e.jsx(A,{label:a,onClick:u,href:f,target:i,size:"medium",variant:"primary"})})]})]})},oe=({title:o="Featured Content",items:x,layout:d="grid",itemButtonLabel:s="View Details",onItemClick:t,customStyles:a={},backgroundColor:f="bg-gray-50",darkBackgroundColor:i="dark:bg-gray-900",titleColor:u="text-gray-900",darkTitleColor:m="dark:text-white"})=>{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 e.jsx("section",{className:`
93
100
  py-16 px-4 transition-colors duration-300
94
- bg-gray-50 dark:bg-gray-900
95
- ${t.container||""}
96
- `,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:`
101
+ ${f} ${i}
102
+ ${a.container||""}
103
+ `,children:e.jsxs("div",{className:"max-w-7xl mx-auto",children:[o&&e.jsxs("div",{className:"mb-12 text-start",children:[e.jsx("h2",{className:`
97
104
  text-4xl font-extrabold mb-4 tracking-tight transition-colors
98
- text-gray-900 dark:text-white
99
- ${t.title||""}
100
- `,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:`
105
+ ${u} ${m}
106
+ ${a.title||""}
107
+ `,children:o}),e.jsx("div",{className:"h-1.5 w-24 bg-blue-600 mx-auto rounded-full"})]}),e.jsx("div",{className:l,children:x.map(n=>e.jsx(q,{title:n.title,description:n.description,image:n.image,tags:n.tags,projectUrl:n.url,orientation:d==="list"?"horizontal":"vertical",actionLabel:s,onViewProject:()=>t==null?void 0:t(n.id)},n.id))})]})})},le=({copyrightOwner:o,copyrightText:x=`© ${new Date().getFullYear()} All rights reserved.`,socialLinks:d,secondaryLinks:s=[],customStyles:t={},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"})=>e.jsx("footer",{className:`
101
108
  py-12 border-t transition-colors duration-300
102
- /* Light: Very dark background (almost black) */
103
- bg-gray-900 text-white border-gray-800
104
- /* Dark: Pure black or very dark gray background */
105
- dark:bg-black dark:border-gray-800
106
- ${a.container||""}
107
- `,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:`
108
- relative pt-32 pb-16 lg:pt-40 lg:pb-24 overflow-hidden transition-colors duration-300
109
- bg-white dark:bg-gray-900
109
+ ${a} ${f}
110
+ ${i} ${u}
110
111
  ${t.container||""}
111
- `,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:`
112
+ `,children:e.jsx("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:e.jsxs("div",{className:"flex flex-col md:flex-row justify-between items-center gap-6",children:[e.jsxs("div",{className:`text-center md:text-left ${t.text||""}`,children:[e.jsx("p",{className:`text-lg font-bold ${m} ${l}`,children:o}),e.jsx("p",{className:`text-sm mt-1 ${n} opacity-80`,children:x})]}),s.length>0&&e.jsx("div",{className:"flex gap-6 flex-wrap justify-center",children:s.map(b=>e.jsx("a",{href:b.href,className:`
113
+ text-sm transition-colors
114
+ ${n} ${g}
115
+ ${t.link||""}
116
+ `,children:b.label},b.label))}),e.jsx("div",{className:"flex space-x-6",children:d.map(b=>e.jsx("a",{href:b.url,target:"_blank",rel:"noopener noreferrer",className:`
117
+ transition-colors text-sm font-medium uppercase tracking-wider
118
+ ${n} ${g}
119
+ ${t.link||""}
120
+ `,children:b.platform},b.platform))})]})})}),ie=({greeting:o="Hello",title:x,subtitle:d,imageUrl:s,actions:t=[],customStyles:a={},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 $=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",w=s?"flex-1 text-center lg:text-left":"w-full",y=s?"justify-center lg:justify-start":"justify-center";return e.jsx("section",{className:`
121
+ relative pt-32 pb-16 lg:pt-40 lg:pb-24 overflow-hidden transition-colors duration-300
122
+ ${f} ${i}
123
+ ${a.container||""}
124
+ `,children:e.jsx("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:e.jsxs("div",{className:$,children:[e.jsxs("div",{className:`${w} ${a.content||""}`,children:[o&&e.jsx("p",{className:`
125
+ font-semibold tracking-wide uppercase text-sm mb-4
126
+ ${u} ${m}
127
+ `,children:o}),e.jsx("h1",{className:`
112
128
  text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6 transition-colors
113
- text-gray-900 dark:text-white
114
- ${t.title||""}
115
- `,children:d}),r.jsx("p",{className:`
129
+ ${l} ${n}
130
+ ${a.title||""}
131
+ `,children:x}),e.jsx("p",{className:`
116
132
  text-lg sm:text-xl mb-8 leading-relaxed transition-colors
117
- text-gray-500 dark:text-gray-400
118
- ${!n&&"mx-auto max-w-2xl"}
119
- ${t.subtitle||""}
120
- `,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:`
133
+ ${g} ${b}
134
+ ${!s&&"mx-auto max-w-2xl"}
135
+ ${a.subtitle||""}
136
+ `,children:d}),t.length>0&&e.jsx("div",{className:`flex flex-col sm:flex-row gap-4 ${y}`,children:t.map((N,E)=>e.jsx(A,{label:N.label,variant:N.variant||"primary",size:"large",onClick:N.onClick,className:"w-full sm:w-auto"},E))})]}),s&&e.jsx("div",{className:`
121
137
  flex-1 w-full max-w-md lg:max-w-full relative
122
- ${t.imageWrapper||""}
123
- `,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:`
138
+ ${a.imageWrapper||""}
139
+ `,children: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:[e.jsx("div",{className:"absolute inset-0 bg-gray-900/5 dark:bg-black/20 group-hover:bg-transparent transition-colors duration-500"}),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"})]})})]})})})},ce=({logo:o="Marc.Dev",isLogoImage:x=!1,links:d,actions:s=[],customStyles:t={},isOpen:a=!1,isScrolled:f=!1,onToggleMenu:i,onLinkClick:u,onLogoClick:m})=>e.jsxs("nav",{className:`
124
140
  fixed top-0 left-0 right-0 z-50 transition-all duration-300
125
141
 
126
- ${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"}
127
- ${a.container||""}
128
- `,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:`
142
+ ${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"}
143
+ ${t.container||""}
144
+ `,children:[e.jsx("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:e.jsxs("div",{className:"flex justify-between items-center h-20",children:[e.jsx("div",{className:`flex-shrink-0 cursor-pointer flex items-center ${t.logo||""}`,onClick:m,children:x?e.jsx("img",{src:o,alt:"Logo",className:"h-8 w-auto"}):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})}),e.jsxs("div",{className:"hidden md:flex space-x-8 items-center",children:[d.map(l=>e.jsx("a",{href:l.href,onClick:n=>u==null?void 0:u(n,l.href),className:`
129
145
  text-sm font-medium transition-colors
130
146
  hover:text-blue-600 dark:hover:text-blue-400
131
147
  ${l.active?"text-blue-600 dark:text-blue-400":"text-gray-600 dark:text-gray-300"}
132
- ${a.link||""}
133
- `,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:`
148
+ ${t.link||""}
149
+ `,children:l.label},l.label)),e.jsxs("div",{className:"flex items-center gap-4 pl-6 border-l border-gray-200 dark:border-gray-700",children:[e.jsx(I,{}),s.map((l,n)=>e.jsx(A,{...l,size:"small"},n))]})]}),e.jsxs("div",{className:"flex items-center gap-4 md:hidden",children:[e.jsx(I,{}),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:e.jsx("svg",{className:"h-6 w-6",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:a?e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M6 18L18 6M6 6l12 12"}):e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M4 6h16M4 12h16M4 18h16"})})})]})]})}),e.jsx("div",{className:`
134
150
  md:hidden absolute top-20 left-0 w-full
135
151
  bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800
136
152
  shadow-xl transition-all duration-300 ease-in-out origin-top
137
- ${t?"opacity-100 scale-y-100":"opacity-0 scale-y-0 h-0 overflow-hidden"}
138
- ${a.mobileMenu||""}
139
- `,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:`
153
+ ${a?"opacity-100 scale-y-100":"opacity-0 scale-y-0 h-0 overflow-hidden"}
154
+ ${t.mobileMenu||""}
155
+ `,children:e.jsxs("div",{className:"px-6 py-6 space-y-4 flex flex-col items-center",children:[d.map(l=>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&&e.jsx("div",{className:"pt-4 w-full flex flex-col gap-3",children:s.map((l,n)=>e.jsx(A,{...l,size:"medium",className:"w-full"},n))})]})})]}),de=o=>{const[x,d]=k.useState(!1),[s,t]=k.useState(!1);k.useEffect(()=>{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 e.jsx(ce,{...o,isOpen:x,isScrolled:s,onToggleMenu:()=>d(!x),onLinkClick:a,onLogoClick:f})},ue=({title:o="About Me",avatarUrl:x,bio:d,skillsTitle:s="Tech Stack",skills:t=[],customStyles:a={},id:f,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"})=>e.jsx("section",{id:f,className:`
140
156
  py-20 transition-colors duration-300
141
- bg-white dark:bg-gray-900 border-y border-gray-100 dark:border-gray-800
142
- ${t.container||""}
143
- `,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:`
144
- text-3xl font-bold text-gray-900 dark:text-white transition-colors
145
- ${t.title||""}
146
- `,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:`
147
- text-sm font-bold text-gray-900 dark:text-white uppercase tracking-wide mb-3
148
- ${t.skillsTitle||""}
149
- `,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"})});
157
+ border-y
158
+ ${i} ${u}
159
+ ${m} ${l}
160
+ ${a.container||""}
161
+ `,children:e.jsxs("div",{className:`max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 ${a.contentWrapper||""}`,children:[o&&e.jsxs("div",{className:"text-center mb-12",children:[e.jsx("h2",{className:`
162
+ text-3xl font-bold transition-colors
163
+ ${n} ${g}
164
+ ${a.title||""}
165
+ `,children:o}),e.jsx("div",{className:"mt-2 h-1 w-20 bg-blue-600 mx-auto rounded"})]}),e.jsxs("div",{className:"flex flex-col md:flex-row items-center gap-12",children:[e.jsx("div",{className:"flex-shrink-0",children:e.jsx(X,{src:x,size:"xl"})}),e.jsxs("div",{className:`text-lg leading-relaxed ${b} ${$} ${a.textWrapper||""}`,children:[e.jsx("p",{className:`mb-8 whitespace-pre-line ${a.bio||""}`,children:d}),t.length>0&&e.jsxs("div",{children:[s&&e.jsx("h3",{className:`
166
+ text-sm font-bold uppercase tracking-wide mb-3
167
+ ${n} ${g}
168
+ ${a.skillsTitle||""}
169
+ `,children:s}),e.jsx("div",{className:"flex flex-wrap gap-2",children:t.map(w=>e.jsx(Y,{label:w,variant:"secondary"},w))})]})]})]})]})});j.Avatar=X,j.Badge=Y,j.Button=A,j.ContentGrid=oe,j.Footer=le,j.Hero=ie,j.Input=J,j.Navbar=de,j.ProfileSection=ue,j.ProjectCard=q,j.ThemeToggle=I,Object.defineProperty(j,Symbol.toStringTag,{value:"Module"})});
package/dist/llms.txt ADDED
@@ -0,0 +1,42 @@
1
+ # @iniguezmarc/design-system
2
+
3
+ A modern, accessible, and type-safe React component library built with Atomic Design.
4
+
5
+ ## Tech Stack
6
+ - **Framework**: React 18+ (TypeScript)
7
+ - **Styling**: Tailwind CSS (Utility-first styling)
8
+ - **Documentation**: Storybook 8
9
+ - **Build**: Vite
10
+
11
+ ## Architecture
12
+ - **Methodology**: Atomic Design (Atoms, Molecules, Organisms).
13
+ - **Structure**: "Basic + Variation" pattern.
14
+ - `Basic[Component].tsx`: Core logic and styling (The "Super Component").
15
+ - `[Component].tsx`: Main export wrapper.
16
+ - `Basic[Component].stories.tsx`: Storybook configuration.
17
+
18
+ ## Component Standards
19
+ 1. **Slots**: All components accept a `customStyles` prop for granular overrides (e.g., `{ container, text }`).
20
+ 2. **Color Props**: NO hardcoded colors. Components accept generic color props with default values covering both Light and Dark modes.
21
+ - Example Props: `backgroundColor`, `textColor`, `borderColor`, `activeLinkColor`.
22
+ - Example Default: `backgroundColor="bg-white" darkBackgroundColor="dark:bg-gray-900"`.
23
+ 3. **Dark Mode**: Fully supported via Tailwind's `dark:` modifier in defaults and user overrides.
24
+
25
+ ## Documentation Standards
26
+ - **Source**: Dynamic source code enabled.
27
+ - **Stories**: Single primary story named `Playground`.
28
+ - **Docs**: `autodocs` tag enabled for all components.
29
+
30
+ ## Component Library
31
+ ### Atoms
32
+ - **Button, Input, Badge, Avatar, Title, Toggle**
33
+
34
+ ### Molecules
35
+ - **ProjectCard**
36
+
37
+ ### Organisms
38
+ - **Navbar**: Responsive, supports generic links and actions.
39
+ - **Hero**: Flexible layout (image/no-image).
40
+ - **Footer**: configurable links and social icons.
41
+ - **ContentGrid**: Grid/List view for items.
42
+ - **ProfileSection**: About Me section with avatar and skills.
package/package.json CHANGED
@@ -1,65 +1,65 @@
1
- {
2
- "name": "@iniguezmarc/design-system",
3
- "private": false,
4
- "version": "0.0.3",
5
- "type": "module",
6
- "main": "./dist/index.umd.js",
7
- "module": "./dist/index.es.js",
8
- "types": "./dist/index.d.ts",
9
- "files": [
10
- "dist"
11
- ],
12
- "exports": {
13
- ".": {
14
- "import": "./dist/index.es.js",
15
- "require": "./dist/index.umd.js",
16
- "types": "./dist/index.d.ts"
17
- }
18
- },
19
- "scripts": {
20
- "dev": "vite",
21
- "build": "vite build",
22
- "type-check": "tsc -b",
23
- "lint": "eslint .",
24
- "preview": "vite preview",
25
- "storybook": "storybook dev -p 6006",
26
- "build-storybook": "storybook build",
27
- "deploy-storybook": "gh-pages -d storybook-static"
28
- },
29
- "peerDependencies": {
30
- "react": "^19.2.0",
31
- "react-dom": "^19.2.0"
32
- },
33
- "devDependencies": {
34
- "@chromatic-com/storybook": "^3.2.2",
35
- "@storybook/addon-a11y": "^8.4.7",
36
- "@storybook/addon-essentials": "^8.4.7",
37
- "@storybook/addon-interactions": "^8.4.7",
38
- "@storybook/addon-links": "^8.4.7",
39
- "@storybook/addon-onboarding": "^8.4.7",
40
- "@storybook/addon-storysource": "^8.6.14",
41
- "@storybook/blocks": "^8.4.7",
42
- "@storybook/manager-api": "^8.4.7",
43
- "@storybook/react": "^8.4.7",
44
- "@storybook/react-vite": "^8.4.7",
45
- "@storybook/test": "^8.4.7",
46
- "@storybook/theming": "^8.4.7",
47
- "@types/node": "^24.10.1",
48
- "@types/react": "^18.3.3",
49
- "@types/react-dom": "^18.3.0",
50
- "@vitejs/plugin-react": "^4.3.1",
51
- "autoprefixer": "^10.4.19",
52
- "eslint": "^9.9.0",
53
- "eslint-plugin-react-hooks": "^5.1.0-rc.0",
54
- "eslint-plugin-react-refresh": "^0.4.9",
55
- "gh-pages": "^6.1.1",
56
- "globals": "^15.9.0",
57
- "postcss": "^8.4.38",
58
- "storybook": "^8.4.7",
59
- "tailwindcss": "^3.4.4",
60
- "typescript": "^5.5.3",
61
- "typescript-eslint": "^8.0.1",
62
- "vite": "^5.4.1",
63
- "vite-plugin-dts": "^4.5.4"
64
- }
1
+ {
2
+ "name": "@iniguezmarc/design-system",
3
+ "private": false,
4
+ "version": "0.0.7",
5
+ "type": "module",
6
+ "main": "./dist/index.umd.js",
7
+ "module": "./dist/index.es.js",
8
+ "types": "./dist/index.d.ts",
9
+ "files": [
10
+ "dist"
11
+ ],
12
+ "exports": {
13
+ ".": {
14
+ "import": "./dist/index.es.js",
15
+ "require": "./dist/index.umd.js",
16
+ "types": "./dist/index.d.ts"
17
+ }
18
+ },
19
+ "scripts": {
20
+ "dev": "vite",
21
+ "build": "vite build",
22
+ "type-check": "tsc -b",
23
+ "lint": "eslint .",
24
+ "preview": "vite preview",
25
+ "storybook": "storybook dev -p 6006",
26
+ "build-storybook": "storybook build",
27
+ "deploy-storybook": "gh-pages -d storybook-static"
28
+ },
29
+ "peerDependencies": {
30
+ "react": "^19.2.0",
31
+ "react-dom": "^19.2.0"
32
+ },
33
+ "devDependencies": {
34
+ "@chromatic-com/storybook": "^3.2.2",
35
+ "@storybook/addon-a11y": "^8.4.7",
36
+ "@storybook/addon-essentials": "^8.4.7",
37
+ "@storybook/addon-interactions": "^8.4.7",
38
+ "@storybook/addon-links": "^8.4.7",
39
+ "@storybook/addon-onboarding": "^8.4.7",
40
+ "@storybook/addon-storysource": "^8.6.14",
41
+ "@storybook/blocks": "^8.4.7",
42
+ "@storybook/manager-api": "^8.4.7",
43
+ "@storybook/react": "^8.4.7",
44
+ "@storybook/react-vite": "^8.4.7",
45
+ "@storybook/test": "^8.4.7",
46
+ "@storybook/theming": "^8.4.7",
47
+ "@types/node": "^24.10.1",
48
+ "@types/react": "^18.3.3",
49
+ "@types/react-dom": "^18.3.0",
50
+ "@vitejs/plugin-react": "^4.3.1",
51
+ "autoprefixer": "^10.4.19",
52
+ "eslint": "^9.9.0",
53
+ "eslint-plugin-react-hooks": "^5.1.0-rc.0",
54
+ "eslint-plugin-react-refresh": "^0.4.9",
55
+ "gh-pages": "^6.1.1",
56
+ "globals": "^15.9.0",
57
+ "postcss": "^8.4.38",
58
+ "storybook": "^8.4.7",
59
+ "tailwindcss": "^3.4.4",
60
+ "typescript": "^5.5.3",
61
+ "typescript-eslint": "^8.0.1",
62
+ "vite": "^5.4.1",
63
+ "vite-plugin-dts": "^4.5.4"
64
+ }
65
65
  }
@@ -1,15 +0,0 @@
1
- import { default as React } from 'react';
2
- export interface ThemeToggleSlots {
3
- container?: string;
4
- icon?: string;
5
- }
6
- export interface ThemeToggleProps {
7
- iconSun?: React.ReactNode;
8
- iconMoon?: React.ReactNode;
9
- sunImage?: string;
10
- moonImage?: string;
11
- imageFit?: 'cover' | 'contain';
12
- customStyles?: ThemeToggleSlots;
13
- className?: string;
14
- }
15
- export declare const ThemeToggle: ({ iconSun, iconMoon, sunImage, moonImage, imageFit, customStyles, className }: ThemeToggleProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,29 +0,0 @@
1
- export interface ProjectCardSlots {
2
- container?: string;
3
- imageWrapper?: string;
4
- content?: string;
5
- title?: string;
6
- description?: string;
7
- tagsContainer?: string;
8
- /** URL the button links to */
9
- projectUrl?: string;
10
- linkTarget?: '_self' | '_blank';
11
- /** Optional callback (if you prefer onClick) */
12
- onViewProject?: () => void;
13
- }
14
- interface ProjectCardProps {
15
- title: string;
16
- description: string;
17
- image: string;
18
- tags?: string[];
19
- projectUrl?: string;
20
- linkTarget?: '_self' | '_blank';
21
- orientation?: 'vertical' | 'horizontal';
22
- actionLabel?: string;
23
- onViewProject?: () => void;
24
- /** Hooks to customize internal style parts */
25
- customStyles?: ProjectCardSlots;
26
- className?: string;
27
- }
28
- export declare const ProjectCard: ({ title, description, image, tags, orientation, actionLabel, projectUrl, linkTarget, onViewProject, customStyles, className }: ProjectCardProps) => import("react/jsx-runtime").JSX.Element;
29
- export {};
@@ -1,25 +0,0 @@
1
- export interface NavbarLink {
2
- label: string;
3
- href: string;
4
- active?: boolean;
5
- }
6
- export interface NavbarAction {
7
- label: string;
8
- onClick: () => void;
9
- variant?: 'primary' | 'secondary' | 'outline';
10
- }
11
- export interface NavbarSlots {
12
- container?: string;
13
- logo?: string;
14
- link?: string;
15
- mobileMenu?: string;
16
- }
17
- interface NavbarProps {
18
- logo?: string;
19
- isLogoImage?: boolean;
20
- links: NavbarLink[];
21
- actions?: NavbarAction[];
22
- customStyles?: NavbarSlots;
23
- }
24
- export declare const Navbar: ({ logo, isLogoImage, links, actions, customStyles }: NavbarProps) => import("react/jsx-runtime").JSX.Element;
25
- export {};
@@ -1,11 +0,0 @@
1
- export * from './components/atoms/Avatar/Avatar';
2
- export * from './components/atoms/Badge/Badge';
3
- export * from './components/atoms/Button/Button';
4
- export * from './components/atoms/Input/Input';
5
- export * from './components/atoms/ThemeToggle/ThemeToggle';
6
- export * from './components/molecules/ProjectCard/ProjectCard';
7
- export * from './components/organisms/ContentGrid/ContentGrid';
8
- export * from './components/organisms/Footer/Footer';
9
- export * from './components/organisms/Hero/Hero';
10
- export * from './components/organisms/Navbar/Navbar';
11
- export * from './components/organisms/ProfileSection/ProfileSection';