@iniguezmarc/design-system 0.0.3 → 0.0.5
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/README.md +75 -75
- package/dist/index.d.ts +0 -1
- package/dist/index.es.js +541 -427
- package/dist/index.umd.js +60 -53
- package/package.json +64 -64
- package/dist/src/components/molecules/ProjectCard/ProjectCard.d.ts +0 -29
- package/dist/src/components/organisms/Navbar/Navbar.d.ts +0 -25
- package/dist/src/index.d.ts +0 -11
package/dist/index.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(p,y){typeof exports=="object"&&typeof module<"u"?y(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],y):(p=typeof globalThis<"u"?globalThis:p||self,y(p.DesignSystem={},p.React))})(this,function(p,y){"use strict";var B={exports:{}},$={};/**
|
|
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
|
|
9
|
+
*/var G;function ae(){if(G)return $;G=1;var o=Symbol.for("react.transitional.element"),c=Symbol.for("react.fragment");function i(n,a,t){var u=null;if(t!==void 0&&(u=""+t),a.key!==void 0&&(u=""+a.key),"key"in a){t={};for(var s in a)s!=="key"&&(t[s]=a[s])}else t=a;return a=t.ref,{$$typeof:o,type:n,key:u,ref:a!==void 0?a:null,props:t}}return $.Fragment=c,$.jsx=i,$.jsxs=i,$}var E={};/**
|
|
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
|
|
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 k:return"Fragment";case A:return"Profiler";case R:return"StrictMode";case S: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 T:return"Portal";case P:return r.displayName||"Context";case O:return(r._context.displayName||"Context")+".Consumer";case C:var l=r.render;return r=r.displayName,r||(r=l.displayName||l.name||"",r=r!==""?"ForwardRef("+r+")":"ForwardRef"),r;case D:return l=r.displayName||null,l!==null?l:o(r.type)||"Memo";case I:l=r._payload,r=r._init;try{return o(r(l))}catch{}}return null}function c(r){return""+r}function i(r){try{c(r);var l=!1}catch{l=!0}if(l){l=console;var g=l.error,b=typeof Symbol=="function"&&Symbol.toStringTag&&r[Symbol.toStringTag]||r.constructor.name||"Object";return g.call(l,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",b),c(r)}}function n(r){if(r===k)return"<>";if(typeof r=="object"&&r!==null&&r.$$typeof===I)return"<...>";try{var l=o(r);return l?"<"+l+">":"<...>"}catch{return"<...>"}}function a(){var r=W.A;return r===null?null:r.getOwner()}function t(){return Error("react-stack-top-frame")}function u(r){if(Z.call(r,"key")){var l=Object.getOwnPropertyDescriptor(r,"key").get;if(l&&l.isReactWarning)return!1}return r.key!==void 0}function s(r,l){function g(){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)",l))}g.isReactWarning=!0,Object.defineProperty(r,"key",{get:g,configurable:!0})}function x(){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 f(r,l,g,b,L,V){var h=g.ref;return r={$$typeof:w,type:r,key:l,props:g,_owner:b},(h!==void 0?h:null)!==null?Object.defineProperty(r,"ref",{enumerable:!1,get:x}):Object.defineProperty(r,"ref",{enumerable:!1,value:null}),r._store={},Object.defineProperty(r._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(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 d(r,l,g,b,L,V){var h=l.children;if(h!==void 0)if(b)if(me(h)){for(b=0;b<h.length;b++)m(h[b]);Object.freeze&&Object.freeze(h)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else m(h);if(Z.call(l,"key")){h=o(r);var N=Object.keys(l).filter(function(ge){return ge!=="key"});b=0<N.length?"{key: someKey, "+N.join(": ..., ")+": ...}":"{key: someKey}",te[h+b]||(N=0<N.length?"{"+N.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} />`,
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
${
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
22
|
+
<%s key={someKey} {...props} />`,b,h,N,h),te[h+b]=!0)}if(h=null,g!==void 0&&(i(g),h=""+g),u(l)&&(i(l.key),h=""+l.key),"key"in l){g={};for(var H in l)H!=="key"&&(g[H]=l[H])}else g=l;return h&&s(g,typeof r=="function"?r.displayName||r.name||"Unknown":r),f(r,h,g,a(),L,V)}function m(r){v(r)?r._store&&(r._store.validated=1):typeof r=="object"&&r!==null&&r.$$typeof===I&&(r._payload.status==="fulfilled"?v(r._payload.value)&&r._payload.value._store&&(r._payload.value._store.validated=1):r._store&&(r._store.validated=1))}function v(r){return typeof r=="object"&&r!==null&&r.$$typeof===w}var j=y,w=Symbol.for("react.transitional.element"),T=Symbol.for("react.portal"),k=Symbol.for("react.fragment"),R=Symbol.for("react.strict_mode"),A=Symbol.for("react.profiler"),O=Symbol.for("react.consumer"),P=Symbol.for("react.context"),C=Symbol.for("react.forward_ref"),S=Symbol.for("react.suspense"),M=Symbol.for("react.suspense_list"),D=Symbol.for("react.memo"),I=Symbol.for("react.lazy"),xe=Symbol.for("react.activity"),fe=Symbol.for("react.client.reference"),W=j.__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};j={react_stack_bottom_frame:function(r){return r()}};var Q,K={},ee=j.react_stack_bottom_frame.bind(j,t)(),re=F(n(t)),te={};E.Fragment=k,E.jsx=function(r,l,g){var b=1e4>W.recentlyCreatedOwnerStacks++;return d(r,l,g,!1,b?Error("react-stack-top-frame"):ee,b?F(n(r)):re)},E.jsxs=function(r,l,g){var b=1e4>W.recentlyCreatedOwnerStacks++;return d(r,l,g,!0,b?Error("react-stack-top-frame"):ee,b?F(n(r)):re)}}()),E}process.env.NODE_ENV==="production"?B.exports=ae():B.exports=se();var e=B.exports;const X=({src:o,alt:c="Avatar",size:i="md",imageFit:n="cover",customStyles:a={},className:t="",borderColor:u="border-gray-200",darkBorderColor:s="dark:border-gray-700",backgroundColor:x="bg-gray-100",darkBackgroundColor:f="dark:bg-gray-800",loading:d="lazy"})=>{const m={sm:"h-8 w-8",md:"h-12 w-12",lg:"h-16 w-16",xl:"h-32 w-32"},v=n==="contain"?"object-contain":"object-cover",j=`border ${u} ${s}`,w=`${x} ${f}`;return e.jsx("div",{className:`
|
|
23
|
+
ds-avatar relative rounded-full overflow-hidden flex-shrink-0
|
|
24
|
+
${m[i]}
|
|
25
|
+
${w}
|
|
26
|
+
${j}
|
|
27
|
+
${a.container||""}
|
|
28
|
+
${t}
|
|
29
|
+
`,children:e.jsx("img",{src:o,alt:c,loading:d,decoding:"async",className:`
|
|
30
|
+
w-full h-full
|
|
31
|
+
${v}
|
|
32
|
+
${a.image||""}
|
|
33
|
+
`})})},Y=({label:o,variant:c="primary",customStyles:i={},className:n="",endIcon:a,primaryColor:t="bg-blue-100 text-blue-800",darkPrimaryColor:u="dark:bg-blue-900/50 dark:text-blue-200",secondaryColor:s="bg-gray-100 text-gray-800",darkSecondaryColor:x="dark:bg-gray-700 dark:text-gray-300",outlineColor:f="border border-gray-300 text-gray-600 bg-transparent",darkOutlineColor:d="dark:border-gray-600 dark:text-gray-400",successColor:m="bg-green-100 text-green-800",darkSuccessColor:v="dark:bg-green-900/50 dark:text-green-200"})=>{const j="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium transition-colors gap-1",w={primary:`${t} ${u}`,secondary:`${s} ${x}`,outline:`${f} ${d}`,success:`${m} ${v}`};return e.jsxs("span",{className:`
|
|
34
|
+
ds-badge
|
|
35
|
+
${j}
|
|
36
|
+
${w[c]}
|
|
37
|
+
${i.container||""}
|
|
38
|
+
${n}
|
|
39
|
+
`,children:[e.jsx("span",{className:i.label||"",children:o}),a&&e.jsx("span",{className:"flex items-center",children:a})]})},_=({label:o,variant:c="primary",size:i="medium",onClick:n,className:a="",customStyles:t={},href:u,target:s,primaryColor:x="bg-blue-600",primaryHoverColor:f="hover:bg-blue-700",darkPrimaryColor:d="dark:bg-blue-600",darkPrimaryHoverColor:m="dark:hover:bg-blue-500",secondaryColor:v="bg-gray-100",secondaryHoverColor:j="hover:bg-gray-200",darkSecondaryColor:w="dark:bg-gray-800",darkSecondaryHoverColor:T="dark:hover:bg-gray-700",outlineColor:k="text-blue-600 border-blue-600",outlineHoverColor:R="hover:bg-blue-50",darkOutlineColor:A="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",C={primary:`${x} text-white ${f} focus:ring-blue-500 border-2 border-transparent ${d} ${m}`,secondary:`${v} text-gray-800 ${j} focus:ring-gray-500 border-2 border-transparent ${w} dark:text-gray-100 ${T}`,outline:`bg-transparent ${k} border-2 ${R} focus:ring-blue-500 ${A} ${O}`},S={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} ${C[c]} ${S[i]} ${t.container||""} ${a}`,D=e.jsx("span",{className:`relative z-10 flex items-center justify-center gap-2 ${t.label||""}`,children:o});return u?e.jsx("a",{href:u,className:M,target:s,rel:s==="_blank"?"noopener noreferrer":void 0,onClick:n,children:D}):e.jsx("button",{type:"button",className:M,onClick:n,children:D})},J=y.forwardRef(({label:o,error:c,className:i,customStyles:n={},startIcon:a,endIcon:t,labelColor:u="text-gray-700",darkLabelColor:s="dark:text-gray-200",inputBgColor:x="bg-white",darkInputBgColor:f="dark:bg-gray-800",inputBorderColor:d="border-gray-300",darkInputBorderColor:m="dark:border-gray-600",inputTextColor:v="text-gray-900",darkInputTextColor:j="dark:text-white",focusRingColor:w="focus:ring-blue-500",errorBorderColor:T="border-red-500",darkErrorBorderColor:k="dark:border-red-500",errorTextColor:R="text-red-500",darkErrorTextColor:A="dark:text-red-400",...O},P)=>{const C=`
|
|
40
|
+
w-full py-2 border rounded-lg shadow-sm focus:outline-none focus:ring-2 transition-all
|
|
41
|
+
${a?"pl-10":"px-3"}
|
|
42
|
+
${t?"pr-10":"px-3"}
|
|
43
|
+
${x} ${f}
|
|
44
|
+
${v} ${j}
|
|
45
|
+
${w}
|
|
46
|
+
`,S=c?`${T} focus:ring-red-500 ${k}`:`${d} ${m}`;return e.jsxs("div",{className:`w-full ${n.container||""} ${i}`,children:[o&&e.jsx("label",{className:`block text-sm font-medium ${u} ${s} mb-1 ${n.label||""}`,children:o}),e.jsxs("div",{className:"relative",children:[a&&e.jsx("div",{className:`absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none ${n.iconContainer||""}`,children:a}),e.jsx("input",{ref:P,className:`
|
|
47
|
+
${C}
|
|
48
|
+
${S}
|
|
49
|
+
${n.input||""}
|
|
50
|
+
`,...O}),t&&e.jsx("div",{className:`absolute inset-y-0 right-0 pr-3 flex items-center ${n.iconContainer||""}`,children:t})]}),c&&e.jsx("p",{className:`mt-1 text-xs ${R} ${A} ${n.error||""}`,children:c})]})});J.displayName="BasicInput";const ne=({isDark:o,onToggle:c,iconSun:i,iconMoon:n,sunImage:a,moonImage:t,imageFit:u="contain",customStyles:s={},className:x="",title:f})=>{const d=`w-6 h-6 ${s.icon||""}`,m=e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",className:d,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"})}),v=e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",className:d,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"})}),j=()=>{const w=u==="contain"?"object-contain":"object-cover";return o?a?e.jsx("img",{src:a,alt:"Light Mode",className:`${d} ${w}`}):i||m:t?e.jsx("img",{src:t,alt:"Dark Mode",className:`${d} ${w}`}):n||v};return e.jsx("button",{onClick:c,title:f||(o?"Switch to light mode":"Switch to dark mode"),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-700 text-yellow-300 hover:bg-gray-600":"bg-gray-200 text-gray-600 hover:bg-gray-300"}
|
|
54
|
+
${s.container||""}
|
|
55
|
+
${x}
|
|
56
|
+
`,children:j()})},z=({isDark:o,onToggle:c,...i})=>{const[n,a]=y.useState(!1);y.useEffect(()=>{const s=()=>{const f=document.documentElement.classList.contains("dark");a(f)};s();const x=new MutationObserver(s);return x.observe(document.documentElement,{attributes:!0,attributeFilter:["class"]}),()=>x.disconnect()},[]);const t=()=>{const s=document.documentElement;s.classList.contains("dark")?(s.classList.remove("dark"),localStorage.setItem("theme","light")):(s.classList.add("dark"),localStorage.setItem("theme","dark")),c&&c()},u=o!==void 0?o:n;return e.jsx(ne,{...i,isDark:u,onToggle:t})},q=({title:o,description:c,image:i,tags:n=[],orientation:a="vertical",actionLabel:t="View Project",projectUrl:u,linkTarget:s="_self",onViewProject:x,customStyles:f={},className:d=""})=>{const m=a==="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
|
-
${
|
|
63
|
+
${m?"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 */
|
|
@@ -78,72 +85,72 @@ React keys must be passed directly to JSX without using spread:
|
|
|
78
85
|
|
|
79
86
|
/* 5. EXTERNAL INJECTIONS */
|
|
80
87
|
${f.container||""}
|
|
81
|
-
${
|
|
82
|
-
`,children:[
|
|
88
|
+
${d}
|
|
89
|
+
`,children:[e.jsxs("div",{className:`
|
|
83
90
|
ds-card-image overflow-hidden relative
|
|
84
|
-
${
|
|
91
|
+
${m?"w-full h-48 md:w-2/5 md:h-auto":"w-full h-48"}
|
|
85
92
|
${f.imageWrapper||""}
|
|
86
|
-
`,children:[
|
|
93
|
+
`,children:[e.jsx("img",{src:i,alt:o,loading:"lazy",decoding:"async",className:"w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"}),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 ${f.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
95
|
${f.title||""}
|
|
89
|
-
`,children:o}),
|
|
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
98
|
${f.description||""}
|
|
92
|
-
`,children:
|
|
99
|
+
`,children:c}),e.jsx("div",{className:`ds-card-tags flex flex-wrap gap-2 mb-6 ${f.tagsContainer||""}`,children:n.map(v=>e.jsx(Y,{label:v,variant:"secondary"},v))})]}),e.jsx("div",{className:"ds-card-actions flex justify-start mt-auto",children:e.jsx(_,{label:t,onClick:x,href:u,target:s,size:"medium",variant:"primary"})})]})]})},oe=({title:o="Featured Content",items:c,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 e.jsx("section",{className:`
|
|
93
100
|
py-16 px-4 transition-colors duration-300
|
|
94
101
|
bg-gray-50 dark:bg-gray-900
|
|
95
102
|
${t.container||""}
|
|
96
|
-
`,children:
|
|
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
105
|
text-gray-900 dark:text-white
|
|
99
106
|
${t.title||""}
|
|
100
|
-
`,children:o}),
|
|
107
|
+
`,children:o}),e.jsx("div",{className:"h-1.5 w-24 bg-blue-600 mx-auto rounded-full"})]}),e.jsx("div",{className:u,children:c.map(s=>e.jsx(q,{title:s.title,description:s.description,image:s.image,tags:s.tags,projectUrl:s.url,orientation:i==="list"?"horizontal":"vertical",actionLabel:n,onViewProject:()=>a==null?void 0:a(s.id)},s.id))})]})})},le=({copyrightOwner:o,copyrightText:c=`© ${new Date().getFullYear()} All rights reserved.`,socialLinks:i,secondaryLinks:n=[],customStyles:a={}})=>e.jsx("footer",{className:`
|
|
101
108
|
py-12 border-t transition-colors duration-300
|
|
102
109
|
/* Light: Very dark background (almost black) */
|
|
103
110
|
bg-gray-900 text-white border-gray-800
|
|
104
111
|
/* Dark: Pure black or very dark gray background */
|
|
105
112
|
dark:bg-black dark:border-gray-800
|
|
106
113
|
${a.container||""}
|
|
107
|
-
`,children:
|
|
114
|
+
`,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 ${a.text||""}`,children:[e.jsx("p",{className:"text-lg font-bold text-white",children:o}),e.jsx("p",{className:"text-gray-400 text-sm mt-1",children:c})]}),n.length>0&&e.jsx("div",{className:"flex gap-6 flex-wrap justify-center",children:n.map(t=>e.jsx("a",{href:t.href,className:`text-gray-400 hover:text-blue-400 text-sm transition-colors ${a.link||""}`,children:t.label},t.label))}),e.jsx("div",{className:"flex space-x-6",children:i.map(t=>e.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))})]})})}),ie=({greeting:o="Hello",title:c,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",s=n?"flex-1 text-center lg:text-left":"w-full",x=n?"justify-center lg:justify-start":"justify-center";return e.jsx("section",{className:`
|
|
108
115
|
relative pt-32 pb-16 lg:pt-40 lg:pb-24 overflow-hidden transition-colors duration-300
|
|
109
116
|
bg-white dark:bg-gray-900
|
|
110
117
|
${t.container||""}
|
|
111
|
-
`,children:
|
|
118
|
+
`,children:e.jsx("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:e.jsxs("div",{className:u,children:[e.jsxs("div",{className:`${s} ${t.content||""}`,children:[o&&e.jsx("p",{className:"text-blue-600 dark:text-blue-400 font-semibold tracking-wide uppercase text-sm mb-4",children:o}),e.jsx("h1",{className:`
|
|
112
119
|
text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6 transition-colors
|
|
113
120
|
text-gray-900 dark:text-white
|
|
114
121
|
${t.title||""}
|
|
115
|
-
`,children:
|
|
122
|
+
`,children:c}),e.jsx("p",{className:`
|
|
116
123
|
text-lg sm:text-xl mb-8 leading-relaxed transition-colors
|
|
117
124
|
text-gray-500 dark:text-gray-400
|
|
118
125
|
${!n&&"mx-auto max-w-2xl"}
|
|
119
126
|
${t.subtitle||""}
|
|
120
|
-
`,children:i}),a.length>0&&
|
|
127
|
+
`,children:i}),a.length>0&&e.jsx("div",{className:`flex flex-col sm:flex-row gap-4 ${x}`,children:a.map((f,d)=>e.jsx(_,{label:f.label,variant:f.variant||"primary",size:"large",onClick:f.onClick,className:"w-full sm:w-auto"},d))})]}),n&&e.jsx("div",{className:`
|
|
121
128
|
flex-1 w-full max-w-md lg:max-w-full relative
|
|
122
129
|
${t.imageWrapper||""}
|
|
123
|
-
`,children:
|
|
130
|
+
`,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:n,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:c=!1,links:i,actions:n=[],customStyles:a={},isOpen:t=!1,isScrolled:u=!1,onToggleMenu:s,onLinkClick:x,onLogoClick:f})=>e.jsxs("nav",{className:`
|
|
124
131
|
fixed top-0 left-0 right-0 z-50 transition-all duration-300
|
|
125
132
|
|
|
126
|
-
${
|
|
133
|
+
${u||t?"bg-white/90 dark:bg-gray-900/90 backdrop-blur-md shadow-sm border-b border-gray-100 dark:border-gray-800":"bg-transparent"}
|
|
127
134
|
${a.container||""}
|
|
128
|
-
`,children:[
|
|
135
|
+
`,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 ${a.logo||""}`,onClick:f,children:c?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:[i.map(d=>e.jsx("a",{href:d.href,onClick:m=>x==null?void 0:x(m,d.href),className:`
|
|
129
136
|
text-sm font-medium transition-colors
|
|
130
137
|
hover:text-blue-600 dark:hover:text-blue-400
|
|
131
|
-
${
|
|
138
|
+
${d.active?"text-blue-600 dark:text-blue-400":"text-gray-600 dark:text-gray-300"}
|
|
132
139
|
${a.link||""}
|
|
133
|
-
`,children:
|
|
140
|
+
`,children:d.label},d.label)),e.jsxs("div",{className:"flex items-center gap-4 pl-6 border-l border-gray-200 dark:border-gray-700",children:[e.jsx(z,{}),n.map((d,m)=>e.jsx(_,{...d,size:"small"},m))]})]}),e.jsxs("div",{className:"flex items-center gap-4 md:hidden",children:[e.jsx(z,{}),e.jsx("button",{onClick:s,className:"p-2 rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors focus:outline-none",children:e.jsx("svg",{className:"h-6 w-6",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:t?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
141
|
md:hidden absolute top-20 left-0 w-full
|
|
135
142
|
bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800
|
|
136
143
|
shadow-xl transition-all duration-300 ease-in-out origin-top
|
|
137
144
|
${t?"opacity-100 scale-y-100":"opacity-0 scale-y-0 h-0 overflow-hidden"}
|
|
138
145
|
${a.mobileMenu||""}
|
|
139
|
-
`,children:
|
|
146
|
+
`,children:e.jsxs("div",{className:"px-6 py-6 space-y-4 flex flex-col items-center",children:[i.map(d=>e.jsx("a",{href:d.href,onClick:m=>x==null?void 0:x(m,d.href),className:"block text-lg font-medium text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-colors",children:d.label},d.label)),n.length>0&&e.jsx("div",{className:"pt-4 w-full flex flex-col gap-3",children:n.map((d,m)=>e.jsx(_,{...d,size:"medium",className:"w-full"},m))})]})})]}),de=o=>{const[c,i]=y.useState(!1),[n,a]=y.useState(!1);y.useEffect(()=>{let s=!1;const x=()=>{s||(window.requestAnimationFrame(()=>{a(window.scrollY>20),s=!1}),s=!0)};return window.addEventListener("scroll",x),()=>window.removeEventListener("scroll",x)},[]);const t=(s,x)=>{s.preventDefault();const f=document.querySelector(x);f&&(f.scrollIntoView({behavior:"smooth"}),i(!1))},u=()=>{window.scrollTo({top:0,behavior:"smooth"})};return e.jsx(ce,{...o,isOpen:c,isScrolled:n,onToggleMenu:()=>i(!c),onLinkClick:t,onLogoClick:u})},ue=({title:o="About Me",avatarUrl:c,bio:i,skillsTitle:n="Tech Stack",skills:a=[],customStyles:t={},id:u})=>e.jsx("section",{id:u,className:`
|
|
140
147
|
py-20 transition-colors duration-300
|
|
141
148
|
bg-white dark:bg-gray-900 border-y border-gray-100 dark:border-gray-800
|
|
142
149
|
${t.container||""}
|
|
143
|
-
`,children:
|
|
150
|
+
`,children:e.jsxs("div",{className:`max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 ${t.contentWrapper||""}`,children:[o&&e.jsxs("div",{className:"text-center mb-12",children:[e.jsx("h2",{className:`
|
|
144
151
|
text-3xl font-bold text-gray-900 dark:text-white transition-colors
|
|
145
152
|
${t.title||""}
|
|
146
|
-
`,children:o}),
|
|
153
|
+
`,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:c,size:"xl"})}),e.jsxs("div",{className:`text-lg text-gray-600 dark:text-gray-300 leading-relaxed ${t.textWrapper||""}`,children:[e.jsx("p",{className:`mb-8 whitespace-pre-line ${t.bio||""}`,children:i}),a.length>0&&e.jsxs("div",{children:[n&&e.jsx("h3",{className:`
|
|
147
154
|
text-sm font-bold text-gray-900 dark:text-white uppercase tracking-wide mb-3
|
|
148
155
|
${t.skillsTitle||""}
|
|
149
|
-
`,children:n}),
|
|
156
|
+
`,children:n}),e.jsx("div",{className:"flex flex-wrap gap-2",children:a.map(s=>e.jsx(Y,{label:s,variant:"secondary"},s))})]})]})]})]})});p.Avatar=X,p.Badge=Y,p.Button=_,p.ContentGrid=oe,p.Footer=le,p.Hero=ie,p.Input=J,p.Navbar=de,p.ProfileSection=ue,p.ProjectCard=q,p.ThemeToggle=z,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -1,65 +1,65 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@iniguezmarc/design-system",
|
|
3
|
-
"private": false,
|
|
4
|
-
"version": "0.0.
|
|
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.5",
|
|
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,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 {};
|
package/dist/src/index.d.ts
DELETED
|
@@ -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';
|