@iniguezmarc/design-system 0.0.5 → 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.es.js +460 -404
- package/dist/index.umd.js +94 -81
- package/dist/llms.txt +42 -0
- package/package.json +1 -1
- package/dist/src/components/atoms/ThemeToggle/ThemeToggle.d.ts +0 -15
package/dist/index.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
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 G;function ae(){if(G)return
|
|
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,53 +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 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
|
|
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} />`,
|
|
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
23
|
ds-avatar relative rounded-full overflow-hidden flex-shrink-0
|
|
24
|
-
${
|
|
25
|
-
${
|
|
26
|
-
${
|
|
27
|
-
${
|
|
28
|
-
${
|
|
29
|
-
`,children:e.jsx("img",{src:o,alt:
|
|
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
30
|
w-full h-full
|
|
31
|
-
${
|
|
32
|
-
${
|
|
33
|
-
`})})},Y=({label:o,variant:
|
|
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
34
|
ds-badge
|
|
35
|
-
${
|
|
36
|
-
${
|
|
37
|
-
${
|
|
38
|
-
${
|
|
39
|
-
`,children:[e.jsx("span",{className:
|
|
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
40
|
w-full py-2 border rounded-lg shadow-sm focus:outline-none focus:ring-2 transition-all
|
|
41
|
-
${
|
|
42
|
-
${
|
|
43
|
-
${
|
|
44
|
-
${
|
|
45
|
-
${
|
|
46
|
-
`,
|
|
47
|
-
${C}
|
|
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:`
|
|
48
47
|
${S}
|
|
49
|
-
${
|
|
50
|
-
|
|
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
51
|
p-2 rounded-full transition-all duration-300 ease-in-out
|
|
52
52
|
focus:outline-none focus:ring-2 focus:ring-blue-500 hover:rotate-12 hover:scale-110 overflow-hidden
|
|
53
|
-
${o?"bg-gray-
|
|
54
|
-
${
|
|
55
|
-
${
|
|
56
|
-
`,children:
|
|
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:`
|
|
57
57
|
/* 1. IDENTIFIER CLASS */
|
|
58
58
|
ds-card
|
|
59
59
|
|
|
60
60
|
/* 2. BASE STRUCTURE */
|
|
61
61
|
group w-full rounded-xl overflow-hidden border transition-all duration-300
|
|
62
62
|
/* Switch layout based on orientation prop */
|
|
63
|
-
${
|
|
63
|
+
${n?"flex flex-col md:flex-row":"flex flex-col"}
|
|
64
64
|
|
|
65
65
|
/* 3. LIGHT MODE (Default) */
|
|
66
66
|
/* White background, gray border, black shadow on hover */
|
|
@@ -84,73 +84,86 @@ React keys must be passed directly to JSX without using spread:
|
|
|
84
84
|
dark:hover:!shadow-[0_20px_25px_-5px_rgba(255,255,255,0.30)]
|
|
85
85
|
|
|
86
86
|
/* 5. EXTERNAL INJECTIONS */
|
|
87
|
-
${
|
|
88
|
-
${
|
|
87
|
+
${m.container||""}
|
|
88
|
+
${l}
|
|
89
89
|
`,children:[e.jsxs("div",{className:`
|
|
90
90
|
ds-card-image overflow-hidden relative
|
|
91
|
-
${
|
|
92
|
-
${
|
|
93
|
-
`,children:[e.jsx("img",{src:
|
|
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:`
|
|
94
94
|
ds-card-title text-2xl font-bold mb-3 transition-colors text-gray-900 dark:text-white
|
|
95
|
-
${
|
|
95
|
+
${m.title||""}
|
|
96
96
|
`,children:o}),e.jsx("p",{className:`
|
|
97
97
|
ds-card-description mb-4 line-clamp-3 leading-relaxed transition-colors text-gray-600 dark:text-gray-300
|
|
98
|
-
${
|
|
99
|
-
`,children:
|
|
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:`
|
|
100
100
|
py-16 px-4 transition-colors duration-300
|
|
101
|
-
|
|
102
|
-
${
|
|
101
|
+
${f} ${i}
|
|
102
|
+
${a.container||""}
|
|
103
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:`
|
|
104
104
|
text-4xl font-extrabold mb-4 tracking-tight transition-colors
|
|
105
|
-
|
|
106
|
-
${
|
|
107
|
-
`,children:o}),e.jsx("div",{className:"h-1.5 w-24 bg-blue-600 mx-auto rounded-full"})]}),e.jsx("div",{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:`
|
|
108
108
|
py-12 border-t transition-colors duration-300
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
/* Dark: Pure black or very dark gray background */
|
|
112
|
-
dark:bg-black dark:border-gray-800
|
|
113
|
-
${a.container||""}
|
|
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:`
|
|
115
|
-
relative pt-32 pb-16 lg:pt-40 lg:pb-24 overflow-hidden transition-colors duration-300
|
|
116
|
-
bg-white dark:bg-gray-900
|
|
109
|
+
${a} ${f}
|
|
110
|
+
${i} ${u}
|
|
117
111
|
${t.container||""}
|
|
118
|
-
`,children:e.jsx("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:e.jsxs("div",{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:`
|
|
119
128
|
text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6 transition-colors
|
|
120
|
-
|
|
121
|
-
${
|
|
122
|
-
`,children:
|
|
129
|
+
${l} ${n}
|
|
130
|
+
${a.title||""}
|
|
131
|
+
`,children:x}),e.jsx("p",{className:`
|
|
123
132
|
text-lg sm:text-xl mb-8 leading-relaxed transition-colors
|
|
124
|
-
|
|
125
|
-
${!
|
|
126
|
-
${
|
|
127
|
-
`,children:
|
|
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:`
|
|
128
137
|
flex-1 w-full max-w-md lg:max-w-full relative
|
|
129
|
-
${
|
|
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:
|
|
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:`
|
|
131
140
|
fixed top-0 left-0 right-0 z-50 transition-all duration-300
|
|
132
141
|
|
|
133
|
-
${
|
|
134
|
-
${
|
|
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 ${
|
|
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:`
|
|
136
145
|
text-sm font-medium transition-colors
|
|
137
146
|
hover:text-blue-600 dark:hover:text-blue-400
|
|
138
|
-
${
|
|
139
|
-
${
|
|
140
|
-
`,children:
|
|
147
|
+
${l.active?"text-blue-600 dark:text-blue-400":"text-gray-600 dark:text-gray-300"}
|
|
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:`
|
|
141
150
|
md:hidden absolute top-20 left-0 w-full
|
|
142
151
|
bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800
|
|
143
152
|
shadow-xl transition-all duration-300 ease-in-out origin-top
|
|
144
|
-
${
|
|
145
|
-
${
|
|
146
|
-
`,children:e.jsxs("div",{className:"px-6 py-6 space-y-4 flex flex-col items-center",children:[
|
|
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:`
|
|
147
156
|
py-20 transition-colors duration-300
|
|
148
|
-
|
|
149
|
-
${
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
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,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;
|