ali-mohammadi-design-system 2.0.3 → 2.0.5

package/dist/index.cjs

@@ -1,20 +1,20 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S=require("react/jsx-runtime"),p=require("react"),u=require("prop-types"),m={neutral:{0:"#FFFFFF",50:"#FAFAFA"},primary:{50:"#e3f2fd",500:"#2196f3"}},z={Neutral:{0:"#FFFFFF",50:"#FAFAFA",100:"#F4F4F5",200:"#EAEAEB",300:"#D4D5D6",400:"#AAABAD",500:"#7F8185",600:"#55575C",700:"#2A2D33",800:"#232529",900:"#1B1D21"},Purple:{100:"#F9F2FD",200:"#E6D9EC",300:"#D9C5E2",400:"#B38CC5",500:"#9A65B2",600:"#813F9F",700:"#67327F",800:"#4D265F",900:"#341940"},Blue:{100:"#E5EDFB",200:"#CCDAF7",300:"#B2C8F3",400:"#99B5EF",500:"#6691E8",600:"#336CE0",700:"#0047D8",800:"#0039AD",900:"#002B82"},Violet:{100:"#EDECFC",200:"#DCDAFA",300:"#CAC7F7",400:"#B9B5F5",500:"#9690EF",600:"#736BEA",700:"#5046E5",800:"#4038B8",900:"#191547",950:"#110E30"},Yellow:{100:"#FEF8E9",200:"#FDF1D3",300:"#FCEABD",400:"#FBE3A7",500:"#FAD67C",600:"#F8C850",700:"#F6BA24",800:"#ECAD11",900:"#CE960A"},Red:{100:"#FFEBEB",200:"#FFD6D6",300:"#FFC2C2",400:"#FFADAD",500:"#FF8585",600:"#FF5C5C",700:"#FF3333",800:"#CE2929",900:"#9D1F1F"},Green:{100:"#EBFAF1",200:"#D7F4E4",300:"#AFE9C8",400:"#87DFAD",500:"#5FD491",600:"#5FD491",700:"#2CA15E",800:"#217947",900:"#16502F"},Orange:{100:"#FFF4EB",200:"#FFE9D6",300:"#FFDEC2",400:"#FFD3AE",500:"#FFBD85",600:"#FFA75D",700:"#FF9134",800:"#E8842F",900:"#DF771E"},Cyan:{100:"#E8F6FF",200:"#DCF2FF",300:"#C4E9FF",400:"#A0DAFF",500:"#87D1FF",600:"#56BFFF",700:"#1DA6FB",800:"#0B89D6",900:"#0467A4"},TypeScale:{Weight:{Regular:"Regular",Bold:"Bold",SemiBold:"Semibold"},FontFamily:{YekanBakh:"Yekan Bakh FaNum"},Size:{10:10,11:11,12:12,14:14,16:16,18:18,20:20,24:24,28:28,32:32,36:36,48:48,64:64},Height:{10:10,12:12,14:14,16:16,20:20,24:24,28:28,32:32,36:36,40:40,44:44,48:48,74:74}},NumberScale:{Radius:{"Radius-12":12,"Radius-8":8,"Radius-4":4,"Radius-24":24,"Radius-20":20,"Radius-16":16,"Radius-Full":1e3,"Radius-28":28},Spacing:{"spacing-4":4,"spacing-8":8,"spacing-12":12,"spacing-16":16,"spacing-20":20,"spacing-24":24,"spacing-32":32,"spacing-40":40,"spacing-48":48,"spacing-56":56,"spacing-64":64,"spacing-72":72,"spacing-80":80},StrokeWeight:{StrokeWeight1:1,StrokeWeight2:1.5,StrokeWeight4:3,StrokeWeight3:2,StrokeWeight5:4},IconSize:{IconSizesmall:16,IconSizeMedium:20,IconSizeLarge:24,IconSizeExtraLarge:32}},Peach:{100:"#FFEEE5",200:"#FFDDCC",300:"#FFCCB2",400:"#FFBB99",500:"#FF9966",600:"#FF7733",700:"#FF5500",800:"#CC4400",900:"#993300"},Buttons:104,MinWidth:64},f={brand:z};function T(){const r={colors:{},typography:{},spacing:{},radius:{},shadows:{}};if(f.brand&&Object.entries(f.brand).forEach(([n,t])=>{if(typeof t=="object"&&!Array.isArray(t)){const e=n.toLowerCase();r.colors[e]={},Object.entries(t).forEach(([s,a])=>{(typeof a=="string"||typeof a=="number")&&(r.colors[e][s]=a)})}}),f.brand?.TypeScale){const n=f.brand.TypeScale;r.typography={fontFamily:n.FontFamily?.YekanBakh,sizes:n.Size||{},lineHeights:n.Height||{},weights:n.Weight||{}}}if(f.brand?.NumberScale){const n=f.brand.NumberScale;n.Spacing&&(r.spacing={},Object.entries(n.Spacing).forEach(([t,e])=>{const s=t.replace("spacing-","");r.spacing[s]=typeof e=="number"?e:parseInt(e)})),n.Radius&&(r.radius={},Object.entries(n.Radius).forEach(([t,e])=>{const s=t.replace("Radius-","").toLowerCase();r.radius[s]=typeof e=="number"?e:parseInt(e)}))}return r}const $={colors:{primary:{50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1"},neutral:{0:"#FFFFFF",50:"#FAFAFA",100:"#F5F5F5",200:"#EEEEEE",300:"#E0E0E0",400:"#BDBDBD",500:"#9E9E9E",600:"#757575",700:"#616161",800:"#424242",900:"#212121"},success:{50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20"},error:{50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c"},warning:{50:"#fff3e0",100:"#ffe0b2",200:"#ffcc80",300:"#ffb74d",400:"#ffa726",500:"#ff9800",600:"#fb8c00",700:"#f57c00",800:"#ef6c00",900:"#e65100"},info:{50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1"}},typography:{fontFamily:"system-ui, -apple-system, sans-serif",baseSize:16,minSize:14,scaleRatio:1.25,sizes:{10:10,11:11,12:12,14:14,16:16,18:18,20:20,24:24,28:28,32:32,36:36,48:48,64:64},lineHeights:{10:10,12:12,14:14,16:16,20:20,24:24,28:28,32:32,36:36,40:40,44:44,48:48,74:74},weights:{regular:"400",semibold:"600",bold:"700"}},spacing:{unit:4,4:4,8:8,12:12,16:16,20:20,24:24,32:32,40:40,48:48,56:56,64:64,72:72,80:80},radius:{xs:4,sm:8,md:12,lg:16,xl:20,"2xl":24,"3xl":28,full:1e3},shadows:{sm:"0px 1px 2px rgba(0, 0, 0, 0.05)",md:"0px 4px 6px rgba(0, 0, 0, 0.1)",lg:"0px 10px 15px rgba(0, 0, 0, 0.1)",xl:"0px 20px 25px rgba(0, 0, 0, 0.1)"}};function y(r,n){const t={...r};return b(r)&&b(n)&&Object.keys(n).forEach(e=>{b(n[e])?e in r?t[e]=y(r[e],n[e]):Object.assign(t,{[e]:n[e]}):Object.assign(t,{[e]:n[e]})}),t}function b(r){return r&&typeof r=="object"&&!Array.isArray(r)}const j=T(),F=y($,j);function h(r={}){return y(F,r)}function E(r={}){const n=h(r),t=document.createElement("style");t.id="ds-theme";let e=`:root {
-`;Object.entries(n.colors).forEach(([o,i])=>{typeof i=="object"&&Object.entries(i).forEach(([l,d])=>{e+=`  --${o}-${l}: ${d};
-`})});const s=n.typography;if(e+=`  --font-family: ${s.fontFamily};
-`,s.baseSize&&s.minSize){const o=(s.baseSize-s.minSize)/1600,l=`${-320*o+s.minSize}px + ${o*100}vw`;e+=`  --font-size-base: clamp(${s.minSize}px, ${l}, ${s.baseSize}px);
-`}else e+=`  --font-size-base: ${s.baseSize||16}px;
-`;e+=`  --type-scale: ${s.scaleRatio||1.25};
-`,s.sizes&&Object.entries(s.sizes).forEach(([o,i])=>{e+=`  --font-size-${o}: ${i}px;
-`}),s.lineHeights&&Object.entries(s.lineHeights).forEach(([o,i])=>{e+=`  --line-height-${o}: ${i}px;
-`}),s.weights&&Object.entries(s.weights).forEach(([o,i])=>{e+=`  --font-weight-${o}: ${i};
-`});const a=n.spacing.unit||4;e+=`  --space-unit: ${a}px;
-`,Object.entries(n.spacing).forEach(([o,i])=>{o!=="unit"&&(e+=`  --space-${o}: ${i}px;
-`)}),Object.entries(n.radius).forEach(([o,i])=>{e+=`  --radius-${o}: ${i}px;
-`}),n.shadows&&Object.entries(n.shadows).forEach(([o,i])=>{e+=`  --shadow-${o}: ${i};
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const D=require("react/jsx-runtime"),g=require("react"),p=require("prop-types"),$={neutral:{0:"#FFFFFF",50:"#FAFAFA"},primary:{50:"#e3f2fd",500:"#2196f3"}},k={Neutral:{0:"#FFFFFF",50:"#FAFAFA",100:"#F4F4F5",200:"#EAEAEB",300:"#D4D5D6",400:"#AAABAD",500:"#7F8185",600:"#55575C",700:"#2A2D33",800:"#232529",900:"#1B1D21"},Purple:{100:"#F9F2FD",200:"#E6D9EC",300:"#D9C5E2",400:"#B38CC5",500:"#9A65B2",600:"#813F9F",700:"#67327F",800:"#4D265F",900:"#341940"},Blue:{100:"#E5EDFB",200:"#CCDAF7",300:"#B2C8F3",400:"#99B5EF",500:"#6691E8",600:"#336CE0",700:"#0047D8",800:"#0039AD",900:"#002B82"},Violet:{100:"#EDECFC",200:"#DCDAFA",300:"#CAC7F7",400:"#B9B5F5",500:"#9690EF",600:"#736BEA",700:"#5046E5",800:"#4038B8",900:"#191547",950:"#110E30"},Yellow:{100:"#FEF8E9",200:"#FDF1D3",300:"#FCEABD",400:"#FBE3A7",500:"#FAD67C",600:"#F8C850",700:"#F6BA24",800:"#ECAD11",900:"#CE960A"},Red:{100:"#FFEBEB",200:"#FFD6D6",300:"#FFC2C2",400:"#FFADAD",500:"#FF8585",600:"#FF5C5C",700:"#FF3333",800:"#CE2929",900:"#9D1F1F"},Green:{100:"#EBFAF1",200:"#D7F4E4",300:"#AFE9C8",400:"#87DFAD",500:"#5FD491",600:"#5FD491",700:"#2CA15E",800:"#217947",900:"#16502F"},Orange:{100:"#FFF4EB",200:"#FFE9D6",300:"#FFDEC2",400:"#FFD3AE",500:"#FFBD85",600:"#FFA75D",700:"#FF9134",800:"#E8842F",900:"#DF771E"},Cyan:{100:"#E8F6FF",200:"#DCF2FF",300:"#C4E9FF",400:"#A0DAFF",500:"#87D1FF",600:"#56BFFF",700:"#1DA6FB",800:"#0B89D6",900:"#0467A4"},TypeScale:{Weight:{Regular:"Regular",Bold:"Bold",SemiBold:"Semibold"},FontFamily:{YekanBakh:"Yekan Bakh FaNum"},Size:{10:10,11:11,12:12,14:14,16:16,18:18,20:20,24:24,28:28,32:32,36:36,48:48,64:64},Height:{10:10,12:12,14:14,16:16,20:20,24:24,28:28,32:32,36:36,40:40,44:44,48:48,74:74}},NumberScale:{Radius:{"Radius-12":12,"Radius-8":8,"Radius-4":4,"Radius-24":24,"Radius-20":20,"Radius-16":16,"Radius-Full":1e3,"Radius-28":28},Spacing:{"spacing-4":4,"spacing-8":8,"spacing-12":12,"spacing-16":16,"spacing-20":20,"spacing-24":24,"spacing-32":32,"spacing-40":40,"spacing-48":48,"spacing-56":56,"spacing-64":64,"spacing-72":72,"spacing-80":80},StrokeWeight:{StrokeWeight1:1,StrokeWeight2:1.5,StrokeWeight4:3,StrokeWeight3:2,StrokeWeight5:4},IconSize:{IconSizesmall:16,IconSizeMedium:20,IconSizeLarge:24,IconSizeExtraLarge:32}},Peach:{100:"#FFEEE5",200:"#FFDDCC",300:"#FFCCB2",400:"#FFBB99",500:"#FF9966",600:"#FF7733",700:"#FF5500",800:"#CC4400",900:"#993300"},Buttons:104,MinWidth:64},d={brand:k};function O(){const n={colors:{},typography:{},spacing:{},radius:{},shadows:{}};if(d.brand&&Object.entries(d.brand).forEach(([t,r])=>{if(typeof r=="object"&&!Array.isArray(r)){const e=t.toLowerCase();n.colors[e]={},Object.entries(r).forEach(([o,i])=>{(typeof i=="string"||typeof i=="number")&&(n.colors[e][o]=i)})}}),d.brand?.TypeScale){const t=d.brand.TypeScale;n.typography={fontFamily:t.FontFamily?.YekanBakh,sizes:t.Size||{},lineHeights:t.Height||{},weights:t.Weight||{}}}if(d.brand?.NumberScale){const t=d.brand.NumberScale;t.Spacing&&(n.spacing={},Object.entries(t.Spacing).forEach(([r,e])=>{const o=r.replace("spacing-","");n.spacing[o]=typeof e=="number"?e:parseInt(e)})),t.Radius&&(n.radius={},Object.entries(t.Radius).forEach(([r,e])=>{const o=r.replace("Radius-","").toLowerCase();n.radius[o]=typeof e=="number"?e:parseInt(e)}))}return n}const w={colors:{primary:{50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1"},neutral:{0:"#FFFFFF",50:"#FAFAFA",100:"#F5F5F5",200:"#EEEEEE",300:"#E0E0E0",400:"#BDBDBD",500:"#9E9E9E",600:"#757575",700:"#616161",800:"#424242",900:"#212121"},success:{50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20"},error:{50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c"},warning:{50:"#fff3e0",100:"#ffe0b2",200:"#ffcc80",300:"#ffb74d",400:"#ffa726",500:"#ff9800",600:"#fb8c00",700:"#f57c00",800:"#ef6c00",900:"#e65100"},info:{50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1"}},typography:{fontFamily:"system-ui, -apple-system, sans-serif",baseSize:16,minSize:14,scaleRatio:1.25,sizes:{10:10,11:11,12:12,14:14,16:16,18:18,20:20,24:24,28:28,32:32,36:36,48:48,64:64},lineHeights:{10:10,12:12,14:14,16:16,20:20,24:24,28:28,32:32,36:36,40:40,44:44,48:48,74:74},weights:{regular:"400",semibold:"600",bold:"700"}},spacing:{unit:4,4:4,8:8,12:12,16:16,20:20,24:24,32:32,40:40,48:48,56:56,64:64,72:72,80:80},radius:{xs:4,sm:8,md:12,lg:16,xl:20,"2xl":24,"3xl":28,full:1e3},shadows:{sm:"0px 1px 2px rgba(0, 0, 0, 0.05)",md:"0px 4px 6px rgba(0, 0, 0, 0.1)",lg:"0px 10px 15px rgba(0, 0, 0, 0.1)",xl:"0px 20px 25px rgba(0, 0, 0, 0.1)"}};function S(n,t){const r={...n};return E(n)&&E(t)&&Object.keys(t).forEach(e=>{E(t[e])?e in n?r[e]=S(n[e],t[e]):Object.assign(r,{[e]:t[e]}):Object.assign(r,{[e]:t[e]})}),r}function E(n){return n&&typeof n=="object"&&!Array.isArray(n)}const I=O(),b=S(w,I);function C(n={}){return S(b,n)}function x(n={}){const t=C(n),r=document.createElement("style");r.id="ds-theme";let e=`:root {
+`;Object.entries(t.colors).forEach(([s,a])=>{typeof a=="object"&&Object.entries(a).forEach(([m,y])=>{e+=`  --${s}-${m}: ${y};
+`})});const o=t.typography;if(e+=`  --font-family: ${o.fontFamily};
+`,o.baseSize&&o.minSize){const s=(o.baseSize-o.minSize)/1600,m=`${-320*s+o.minSize}px + ${s*100}vw`;e+=`  --font-size-base: clamp(${o.minSize}px, ${m}, ${o.baseSize}px);
+`}else e+=`  --font-size-base: ${o.baseSize||16}px;
+`;e+=`  --type-scale: ${o.scaleRatio||1.25};
+`,o.sizes&&Object.entries(o.sizes).forEach(([s,a])=>{e+=`  --font-size-${s}: ${a}px;
+`}),o.lineHeights&&Object.entries(o.lineHeights).forEach(([s,a])=>{e+=`  --line-height-${s}: ${a}px;
+`}),o.weights&&Object.entries(o.weights).forEach(([s,a])=>{e+=`  --font-weight-${s}: ${a};
+`});const i=t.spacing.unit||4;e+=`  --space-unit: ${i}px;
+`,Object.entries(t.spacing).forEach(([s,a])=>{s!=="unit"&&(e+=`  --space-${s}: ${a}px;
+`)}),Object.entries(t.radius).forEach(([s,a])=>{e+=`  --radius-${s}: ${a}px;
+`}),t.shadows&&Object.entries(t.shadows).forEach(([s,a])=>{e+=`  --shadow-${s}: ${a};
 `}),e+=`}
 `,e+=`html { font-size: var(--font-size-base); }
 `,e+=`body { font-family: var(--font-family); }
-`,t.textContent=e;const c=document.getElementById("ds-theme");c&&c.remove(),document.head.appendChild(t)}const x=p.createContext(null);function C({tokens:r={},children:n}){const t=p.useMemo(()=>h(r),[r]);p.useEffect(()=>{E(t)},[t]);const e=p.useMemo(()=>({tokens:t,getToken:s=>{const a=s.split(".");let c=t;for(const o of a)if(c&&typeof c=="object"&&o in c)c=c[o];else return;return c}}),[t]);return S.jsx(x.Provider,{value:e,children:n})}C.propTypes={tokens:u.object,children:u.node.isRequired};function D(){const r=p.useContext(x);return r||(console.warn("useTheme must be used within ThemeProvider. Using default tokens."),{tokens:F,getToken:n=>{const t=n.split(".");let e=F;for(const s of t)if(e&&typeof e=="object"&&s in e)e=e[s];else return;return e}})}function A(){const{tokens:r,getToken:n}=D();return{color:t=>{const e=n(`colors.${t}`);if(e)return e;const[s,a]=t.split(".");return`var(--${s}-${a}, #000)`},spacing:t=>{const e=n(`spacing.${t}`);return e?`${e}px`:`var(--space-${t}, ${t*(r.spacing?.unit||4)}px)`},radius:t=>{const e=n(`radius.${t}`);return e?`${e}px`:`var(--radius-${t}, 8px)`},typography:t=>{const e=n(`typography.${t}`);return e?typeof e=="number"?`${e}px`:e:t==="fontFamily"?"var(--font-family, system-ui, sans-serif)":`var(--font-${t}, 16px)`},shadow:t=>{const e=n(`shadows.${t}`);return e||`var(--shadow-${t}, none)`},tokens:r,getToken:n}}const B=({variant:r="primary",size:n="md",children:t,className:e="",...s})=>{const{color:a,spacing:c,radius:o,typography:i}=A(),l={primary:{backgroundColor:a("primary.500"),color:"#ffffff",border:"none"},outline:{backgroundColor:"transparent",border:`2px solid ${a("primary.500")}`,color:a("primary.500")},text:{backgroundColor:"transparent",border:"none",color:a("primary.500")},secondary:{backgroundColor:a("neutral.200"),color:a("neutral.900"),border:"none"},success:{backgroundColor:a("success.500"),color:"#ffffff",border:"none"},error:{backgroundColor:a("error.500"),color:"#ffffff",border:"none"}},d={sm:{padding:`${c(2)} ${c(4)}`,fontSize:i("sizes.14")||"14px"},md:{padding:`${c(3)} ${c(6)}`,fontSize:i("sizes.16")||"16px"},lg:{padding:`${c(4)} ${c(8)}`,fontSize:i("sizes.18")||"18px"}};return S.jsx("button",{className:`ds-button ds-button--${r} ds-button--${n} ${e}`,style:{borderRadius:o("md"),fontFamily:i("fontFamily"),fontWeight:"500",cursor:"pointer",transition:"all 0.2s ease",...l[r],...d[n],...s.style},onMouseEnter:g=>{r==="primary"&&(g.currentTarget.style.opacity="0.9")},onMouseLeave:g=>{r==="primary"&&(g.currentTarget.style.opacity="1")},...s,children:t})};B.propTypes={children:u.node.isRequired,variant:u.oneOf(["primary","outline","text","secondary","success","error"]),size:u.oneOf(["sm","md","lg"]),className:u.string};function k(r={}){E(r)}const v={};function w(r={}){let n="";Object.entries(r.colors?.primary||{}).forEach(([t,e])=>{n+=`$primary-${t}: ${e};
-`}),n+=`$font-family: "${r.typography?.fontFamily||"sans-serif"}";
-`,n+=`$font-size-base: ${r.typography?.baseSize||16}px;
-`,v.writeFileSync("custom-variables.scss",n)}const O={colors:{primary:m.primary,neutral:m.neutral},spacing:{unit:4},typography:{fontFamily:"system-ui, sans-serif",baseSize:16}};exports.Button=B;exports.ThemeProvider=C;exports.baseTokens=F;exports.createTokens=h;exports.default=C;exports.defaultColors=m;exports.defaultConfig=O;exports.defaultTokens=$;exports.generateSCSS=w;exports.generateTheme=E;exports.injectCSS=k;exports.useTheme=D;exports.useTokens=A;
+`,r.textContent=e;const c=document.getElementById("ds-theme");c&&c.remove(),document.head.appendChild(r)}const z=g.createContext(null);function A({tokens:n={},children:t}){const r=g.useMemo(()=>C(n),[n]);g.useEffect(()=>{x(r)},[r]);const e=g.useMemo(()=>({tokens:r,getToken:o=>{const i=o.split(".");let c=r;for(const s of i)if(c&&typeof c=="object"&&s in c)c=c[s];else return;return c}}),[r]);return D.jsx(z.Provider,{value:e,children:t})}A.propTypes={tokens:p.object,children:p.node.isRequired};function B(){const n=g.useContext(z);return n||(console.warn("useTheme must be used within ThemeProvider. Using default tokens."),{tokens:b,getToken:t=>{const r=t.split(".");let e=b;for(const o of r)if(e&&typeof e=="object"&&o in e)e=e[o];else return;return e}})}function T(){const{tokens:n,getToken:t}=B();return{color:r=>{const e=t(`colors.${r}`);if(e)return e;const[o,i]=r.split(".");return`var(--${o}-${i}, #000)`},spacing:r=>{const e=t(`spacing.${r}`);return e?`${e}px`:`var(--space-${r}, ${r*(n.spacing?.unit||4)}px)`},radius:r=>{const e=t(`radius.${r}`);return e?`${e}px`:`var(--radius-${r}, 8px)`},typography:r=>{const e=t(`typography.${r}`);return e?typeof e=="number"?`${e}px`:e:r==="fontFamily"?"var(--font-family, system-ui, sans-serif)":`var(--font-${r}, 16px)`},shadow:r=>{const e=t(`shadows.${r}`);return e||`var(--shadow-${r}, none)`},tokens:n,getToken:t}}const u={easeInOut:"cubic-bezier(0.4, 0, 0.2, 1)",easeOut:"cubic-bezier(0.0, 0, 0.2, 1)",easeIn:"cubic-bezier(0.4, 0, 1, 1)",sharp:"cubic-bezier(0.4, 0, 0.6, 1)"},l={shortest:150,shorter:200,short:250,standard:300,complex:375,enteringScreen:225,leavingScreen:195};function f(n="all",t={}){const{duration:r=l.standard,easing:e=u.easeInOut,delay:o=0}=t;return`${Array.isArray(n)?n.join(", "):n} ${r}ms ${e} ${o}ms`}const F={create:f,easing:u,duration:l,all:n=>f("all",n),color:n=>f(["color","background-color","border-color"],n),backgroundColor:n=>f("background-color",n),opacity:n=>f("opacity",n),transform:n=>f("transform",n),boxShadow:n=>f("box-shadow",n),standard:n=>f("all",{duration:l.standard,easing:u.easeInOut,...n}),enter:n=>f("all",{duration:l.enteringScreen,easing:u.easeOut,...n}),leave:n=>f("all",{duration:l.leavingScreen,easing:u.easeIn,...n})};function v(n="all",t={}){return f(n,t)}const M={fadeIn:{from:{opacity:0},to:{opacity:1}},fadeOut:{from:{opacity:1},to:{opacity:0}},slideUp:{from:{transform:"translateY(20px)",opacity:0},to:{transform:"translateY(0)",opacity:1}},slideDown:{from:{transform:"translateY(-20px)",opacity:0},to:{transform:"translateY(0)",opacity:1}},scaleIn:{from:{transform:"scale(0.8)",opacity:0},to:{transform:"scale(1)",opacity:1}},scaleOut:{from:{transform:"scale(1)",opacity:1},to:{transform:"scale(0.8)",opacity:0}}};function R(n,t={}){const{duration:r=l.standard,easing:e=u.easeInOut,delay:o=0,iterationCount:i=1,direction:c="normal",fillMode:s="both"}=t;return`${n} ${r}ms ${e} ${o}ms ${i} ${c} ${s}`}const j=({variant:n="primary",size:t="md",children:r,className:e="",...o})=>{const{color:i,spacing:c,radius:s,typography:a}=T(),m={primary:{backgroundColor:i("primary.500"),color:"#ffffff",border:"none"},outline:{backgroundColor:"transparent",border:`2px solid ${i("primary.500")}`,color:i("primary.500")},text:{backgroundColor:"transparent",border:"none",color:i("primary.500")},secondary:{backgroundColor:i("neutral.200"),color:i("neutral.900"),border:"none"},success:{backgroundColor:i("success.500"),color:"#ffffff",border:"none"},error:{backgroundColor:i("error.500"),color:"#ffffff",border:"none"}},y={sm:{padding:`${c(2)} ${c(4)}`,fontSize:a("sizes.14")||"14px"},md:{padding:`${c(3)} ${c(6)}`,fontSize:a("sizes.16")||"16px"},lg:{padding:`${c(4)} ${c(8)}`,fontSize:a("sizes.18")||"18px"}};return D.jsx("button",{className:`ds-button ds-button--${n} ds-button--${t} ${e}`,style:{borderRadius:s("md"),fontFamily:a("fontFamily"),fontWeight:"500",cursor:"pointer",transition:F.standard({duration:200}),...m[n],...y[t],...o.style},onMouseEnter:h=>{n==="primary"&&(h.currentTarget.style.opacity="0.9")},onMouseLeave:h=>{n==="primary"&&(h.currentTarget.style.opacity="1")},...o,children:r})};j.propTypes={children:p.node.isRequired,variant:p.oneOf(["primary","outline","text","secondary","success","error"]),size:p.oneOf(["sm","md","lg"]),className:p.string};function U(n={}){if(typeof window<"u"&&(window.MUI||window.mui))try{return{create:window.MUI?.transitions?.create||F.create,easing:window.MUI?.transitions?.easing||F.easing,duration:window.MUI?.transitions?.duration||F.duration,useMUI:!0}}catch{}return{...F,useMUI:!1}}function W(){if(typeof window<"u"&&(window.MUI||window.mui))try{return window.MUI?.theme||window.mui?.theme||null}catch{return null}return null}function N(n={}){x(n)}const P={};function Y(n={}){let t="";Object.entries(n.colors?.primary||{}).forEach(([r,e])=>{t+=`$primary-${r}: ${e};
+`}),t+=`$font-family: "${n.typography?.fontFamily||"sans-serif"}";
+`,t+=`$font-size-base: ${n.typography?.baseSize||16}px;
+`,P.writeFileSync("custom-variables.scss",t)}const H={colors:{primary:$.primary,neutral:$.neutral},spacing:{unit:4},typography:{fontFamily:"system-ui, sans-serif",baseSize:16}};exports.Button=j;exports.ThemeProvider=A;exports.baseTokens=b;exports.createAnimation=R;exports.createTokens=C;exports.createTransition=f;exports.default=A;exports.defaultColors=$;exports.defaultConfig=H;exports.defaultTokens=w;exports.duration=l;exports.easing=u;exports.generateSCSS=Y;exports.generateTheme=x;exports.injectCSS=N;exports.keyframes=M;exports.transitions=F;exports.useMUITheme=W;exports.useMUITransitions=U;exports.useTheme=B;exports.useTokens=T;exports.useTransition=v;

package/dist/index.js

@@ -1,7 +1,7 @@
-import { jsx as E } from "react/jsx-runtime";
-import { createContext as S, useMemo as b, useEffect as x, useContext as D } from "react";
-import p from "prop-types";
-const y = {
+import { jsx as S } from "react/jsx-runtime";
+import { createContext as w, useMemo as $, useEffect as z, useContext as B } from "react";
+import l from "prop-types";
+const C = {
   neutral: {
     0: "#FFFFFF",
     50: "#FAFAFA"
@@ -10,46 +10,46 @@ const y = {
     50: "#e3f2fd",
     500: "#2196f3"
   }
-}, A = { Neutral: { 0: "#FFFFFF", 50: "#FAFAFA", 100: "#F4F4F5", 200: "#EAEAEB", 300: "#D4D5D6", 400: "#AAABAD", 500: "#7F8185", 600: "#55575C", 700: "#2A2D33", 800: "#232529", 900: "#1B1D21" }, Purple: { 100: "#F9F2FD", 200: "#E6D9EC", 300: "#D9C5E2", 400: "#B38CC5", 500: "#9A65B2", 600: "#813F9F", 700: "#67327F", 800: "#4D265F", 900: "#341940" }, Blue: { 100: "#E5EDFB", 200: "#CCDAF7", 300: "#B2C8F3", 400: "#99B5EF", 500: "#6691E8", 600: "#336CE0", 700: "#0047D8", 800: "#0039AD", 900: "#002B82" }, Violet: { 100: "#EDECFC", 200: "#DCDAFA", 300: "#CAC7F7", 400: "#B9B5F5", 500: "#9690EF", 600: "#736BEA", 700: "#5046E5", 800: "#4038B8", 900: "#191547", 950: "#110E30" }, Yellow: { 100: "#FEF8E9", 200: "#FDF1D3", 300: "#FCEABD", 400: "#FBE3A7", 500: "#FAD67C", 600: "#F8C850", 700: "#F6BA24", 800: "#ECAD11", 900: "#CE960A" }, Red: { 100: "#FFEBEB", 200: "#FFD6D6", 300: "#FFC2C2", 400: "#FFADAD", 500: "#FF8585", 600: "#FF5C5C", 700: "#FF3333", 800: "#CE2929", 900: "#9D1F1F" }, Green: { 100: "#EBFAF1", 200: "#D7F4E4", 300: "#AFE9C8", 400: "#87DFAD", 500: "#5FD491", 600: "#5FD491", 700: "#2CA15E", 800: "#217947", 900: "#16502F" }, Orange: { 100: "#FFF4EB", 200: "#FFE9D6", 300: "#FFDEC2", 400: "#FFD3AE", 500: "#FFBD85", 600: "#FFA75D", 700: "#FF9134", 800: "#E8842F", 900: "#DF771E" }, Cyan: { 100: "#E8F6FF", 200: "#DCF2FF", 300: "#C4E9FF", 400: "#A0DAFF", 500: "#87D1FF", 600: "#56BFFF", 700: "#1DA6FB", 800: "#0B89D6", 900: "#0467A4" }, TypeScale: { Weight: { Regular: "Regular", Bold: "Bold", SemiBold: "Semibold" }, FontFamily: { YekanBakh: "Yekan Bakh FaNum" }, Size: { 10: 10, 11: 11, 12: 12, 14: 14, 16: 16, 18: 18, 20: 20, 24: 24, 28: 28, 32: 32, 36: 36, 48: 48, 64: 64 }, Height: { 10: 10, 12: 12, 14: 14, 16: 16, 20: 20, 24: 24, 28: 28, 32: 32, 36: 36, 40: 40, 44: 44, 48: 48, 74: 74 } }, NumberScale: { Radius: { "Radius-12": 12, "Radius-8": 8, "Radius-4": 4, "Radius-24": 24, "Radius-20": 20, "Radius-16": 16, "Radius-Full": 1e3, "Radius-28": 28 }, Spacing: { "spacing-4": 4, "spacing-8": 8, "spacing-12": 12, "spacing-16": 16, "spacing-20": 20, "spacing-24": 24, "spacing-32": 32, "spacing-40": 40, "spacing-48": 48, "spacing-56": 56, "spacing-64": 64, "spacing-72": 72, "spacing-80": 80 }, StrokeWeight: { StrokeWeight1: 1, StrokeWeight2: 1.5, StrokeWeight4: 3, StrokeWeight3: 2, StrokeWeight5: 4 }, IconSize: { IconSizesmall: 16, IconSizeMedium: 20, IconSizeLarge: 24, IconSizeExtraLarge: 32 } }, Peach: { 100: "#FFEEE5", 200: "#FFDDCC", 300: "#FFCCB2", 400: "#FFBB99", 500: "#FF9966", 600: "#FF7733", 700: "#FF5500", 800: "#CC4400", 900: "#993300" }, Buttons: 104, MinWidth: 64 }, f = {
-  brand: A
+}, O = { Neutral: { 0: "#FFFFFF", 50: "#FAFAFA", 100: "#F4F4F5", 200: "#EAEAEB", 300: "#D4D5D6", 400: "#AAABAD", 500: "#7F8185", 600: "#55575C", 700: "#2A2D33", 800: "#232529", 900: "#1B1D21" }, Purple: { 100: "#F9F2FD", 200: "#E6D9EC", 300: "#D9C5E2", 400: "#B38CC5", 500: "#9A65B2", 600: "#813F9F", 700: "#67327F", 800: "#4D265F", 900: "#341940" }, Blue: { 100: "#E5EDFB", 200: "#CCDAF7", 300: "#B2C8F3", 400: "#99B5EF", 500: "#6691E8", 600: "#336CE0", 700: "#0047D8", 800: "#0039AD", 900: "#002B82" }, Violet: { 100: "#EDECFC", 200: "#DCDAFA", 300: "#CAC7F7", 400: "#B9B5F5", 500: "#9690EF", 600: "#736BEA", 700: "#5046E5", 800: "#4038B8", 900: "#191547", 950: "#110E30" }, Yellow: { 100: "#FEF8E9", 200: "#FDF1D3", 300: "#FCEABD", 400: "#FBE3A7", 500: "#FAD67C", 600: "#F8C850", 700: "#F6BA24", 800: "#ECAD11", 900: "#CE960A" }, Red: { 100: "#FFEBEB", 200: "#FFD6D6", 300: "#FFC2C2", 400: "#FFADAD", 500: "#FF8585", 600: "#FF5C5C", 700: "#FF3333", 800: "#CE2929", 900: "#9D1F1F" }, Green: { 100: "#EBFAF1", 200: "#D7F4E4", 300: "#AFE9C8", 400: "#87DFAD", 500: "#5FD491", 600: "#5FD491", 700: "#2CA15E", 800: "#217947", 900: "#16502F" }, Orange: { 100: "#FFF4EB", 200: "#FFE9D6", 300: "#FFDEC2", 400: "#FFD3AE", 500: "#FFBD85", 600: "#FFA75D", 700: "#FF9134", 800: "#E8842F", 900: "#DF771E" }, Cyan: { 100: "#E8F6FF", 200: "#DCF2FF", 300: "#C4E9FF", 400: "#A0DAFF", 500: "#87D1FF", 600: "#56BFFF", 700: "#1DA6FB", 800: "#0B89D6", 900: "#0467A4" }, TypeScale: { Weight: { Regular: "Regular", Bold: "Bold", SemiBold: "Semibold" }, FontFamily: { YekanBakh: "Yekan Bakh FaNum" }, Size: { 10: 10, 11: 11, 12: 12, 14: 14, 16: 16, 18: 18, 20: 20, 24: 24, 28: 28, 32: 32, 36: 36, 48: 48, 64: 64 }, Height: { 10: 10, 12: 12, 14: 14, 16: 16, 20: 20, 24: 24, 28: 28, 32: 32, 36: 36, 40: 40, 44: 44, 48: 48, 74: 74 } }, NumberScale: { Radius: { "Radius-12": 12, "Radius-8": 8, "Radius-4": 4, "Radius-24": 24, "Radius-20": 20, "Radius-16": 16, "Radius-Full": 1e3, "Radius-28": 28 }, Spacing: { "spacing-4": 4, "spacing-8": 8, "spacing-12": 12, "spacing-16": 16, "spacing-20": 20, "spacing-24": 24, "spacing-32": 32, "spacing-40": 40, "spacing-48": 48, "spacing-56": 56, "spacing-64": 64, "spacing-72": 72, "spacing-80": 80 }, StrokeWeight: { StrokeWeight1: 1, StrokeWeight2: 1.5, StrokeWeight4: 3, StrokeWeight3: 2, StrokeWeight5: 4 }, IconSize: { IconSizesmall: 16, IconSizeMedium: 20, IconSizeLarge: 24, IconSizeExtraLarge: 32 } }, Peach: { 100: "#FFEEE5", 200: "#FFDDCC", 300: "#FFCCB2", 400: "#FFBB99", 500: "#FF9966", 600: "#FF7733", 700: "#FF5500", 800: "#CC4400", 900: "#993300" }, Buttons: 104, MinWidth: 64 }, u = {
+  brand: O
 };
-function z() {
-  const r = {
+function j() {
+  const n = {
     colors: {},
     typography: {},
     spacing: {},
     radius: {},
     shadows: {}
   };
-  if (f.brand && Object.entries(f.brand).forEach(([n, t]) => {
-    if (typeof t == "object" && !Array.isArray(t)) {
-      const e = n.toLowerCase();
-      r.colors[e] = {}, Object.entries(t).forEach(([o, a]) => {
-        (typeof a == "string" || typeof a == "number") && (r.colors[e][o] = a);
+  if (u.brand && Object.entries(u.brand).forEach(([t, r]) => {
+    if (typeof r == "object" && !Array.isArray(r)) {
+      const e = t.toLowerCase();
+      n.colors[e] = {}, Object.entries(r).forEach(([o, a]) => {
+        (typeof a == "string" || typeof a == "number") && (n.colors[e][o] = a);
       });
     }
-  }), f.brand?.TypeScale) {
-    const n = f.brand.TypeScale;
-    r.typography = {
-      fontFamily: n.FontFamily?.YekanBakh,
-      sizes: n.Size || {},
-      lineHeights: n.Height || {},
-      weights: n.Weight || {}
+  }), u.brand?.TypeScale) {
+    const t = u.brand.TypeScale;
+    n.typography = {
+      fontFamily: t.FontFamily?.YekanBakh,
+      sizes: t.Size || {},
+      lineHeights: t.Height || {},
+      weights: t.Weight || {}
     };
   }
-  if (f.brand?.NumberScale) {
-    const n = f.brand.NumberScale;
-    n.Spacing && (r.spacing = {}, Object.entries(n.Spacing).forEach(([t, e]) => {
-      const o = t.replace("spacing-", "");
-      r.spacing[o] = typeof e == "number" ? e : parseInt(e);
-    })), n.Radius && (r.radius = {}, Object.entries(n.Radius).forEach(([t, e]) => {
-      const o = t.replace("Radius-", "").toLowerCase();
-      r.radius[o] = typeof e == "number" ? e : parseInt(e);
+  if (u.brand?.NumberScale) {
+    const t = u.brand.NumberScale;
+    t.Spacing && (n.spacing = {}, Object.entries(t.Spacing).forEach(([r, e]) => {
+      const o = r.replace("spacing-", "");
+      n.spacing[o] = typeof e == "number" ? e : parseInt(e);
+    })), t.Radius && (n.radius = {}, Object.entries(t.Radius).forEach(([r, e]) => {
+      const o = r.replace("Radius-", "").toLowerCase();
+      n.radius[o] = typeof e == "number" ? e : parseInt(e);
     }));
   }
-  return r;
+  return n;
 }
-const B = {
+const T = {
   colors: {
     primary: {
       50: "#e3f2fd",
@@ -199,101 +199,101 @@ const B = {
     xl: "0px 20px 25px rgba(0, 0, 0, 0.1)"
   }
 };
-function m(r, n) {
-  const t = { ...r };
-  return d(r) && d(n) && Object.keys(n).forEach((e) => {
-    d(n[e]) ? e in r ? t[e] = m(r[e], n[e]) : Object.assign(t, { [e]: n[e] }) : Object.assign(t, { [e]: n[e] });
-  }), t;
+function E(n, t) {
+  const r = { ...n };
+  return b(n) && b(t) && Object.keys(t).forEach((e) => {
+    b(t[e]) ? e in n ? r[e] = E(n[e], t[e]) : Object.assign(r, { [e]: t[e] }) : Object.assign(r, { [e]: t[e] });
+  }), r;
 }
-function d(r) {
-  return r && typeof r == "object" && !Array.isArray(r);
+function b(n) {
+  return n && typeof n == "object" && !Array.isArray(n);
 }
-const j = z(), g = m(B, j);
-function h(r = {}) {
-  return m(g, r);
+const k = j(), h = E(T, k);
+function x(n = {}) {
+  return E(h, n);
 }
-function $(r = {}) {
-  const n = h(r), t = document.createElement("style");
-  t.id = "ds-theme";
+function D(n = {}) {
+  const t = x(n), r = document.createElement("style");
+  r.id = "ds-theme";
   let e = `:root {
 `;
-  Object.entries(n.colors).forEach(([s, i]) => {
-    typeof i == "object" && Object.entries(i).forEach(([F, l]) => {
-      e += `  --${s}-${F}: ${l};
+  Object.entries(t.colors).forEach(([i, s]) => {
+    typeof s == "object" && Object.entries(s).forEach(([F, g]) => {
+      e += `  --${i}-${F}: ${g};
 `;
     });
   });
-  const o = n.typography;
+  const o = t.typography;
   if (e += `  --font-family: ${o.fontFamily};
 `, o.baseSize && o.minSize) {
-    const s = (o.baseSize - o.minSize) / 1600, F = `${-320 * s + o.minSize}px + ${s * 100}vw`;
+    const i = (o.baseSize - o.minSize) / 1600, F = `${-320 * i + o.minSize}px + ${i * 100}vw`;
     e += `  --font-size-base: clamp(${o.minSize}px, ${F}, ${o.baseSize}px);
 `;
   } else
     e += `  --font-size-base: ${o.baseSize || 16}px;
 `;
   e += `  --type-scale: ${o.scaleRatio || 1.25};
-`, o.sizes && Object.entries(o.sizes).forEach(([s, i]) => {
-    e += `  --font-size-${s}: ${i}px;
+`, o.sizes && Object.entries(o.sizes).forEach(([i, s]) => {
+    e += `  --font-size-${i}: ${s}px;
 `;
-  }), o.lineHeights && Object.entries(o.lineHeights).forEach(([s, i]) => {
-    e += `  --line-height-${s}: ${i}px;
+  }), o.lineHeights && Object.entries(o.lineHeights).forEach(([i, s]) => {
+    e += `  --line-height-${i}: ${s}px;
 `;
-  }), o.weights && Object.entries(o.weights).forEach(([s, i]) => {
-    e += `  --font-weight-${s}: ${i};
+  }), o.weights && Object.entries(o.weights).forEach(([i, s]) => {
+    e += `  --font-weight-${i}: ${s};
 `;
   });
-  const a = n.spacing.unit || 4;
+  const a = t.spacing.unit || 4;
   e += `  --space-unit: ${a}px;
-`, Object.entries(n.spacing).forEach(([s, i]) => {
-    s !== "unit" && (e += `  --space-${s}: ${i}px;
+`, Object.entries(t.spacing).forEach(([i, s]) => {
+    i !== "unit" && (e += `  --space-${i}: ${s}px;
 `);
-  }), Object.entries(n.radius).forEach(([s, i]) => {
-    e += `  --radius-${s}: ${i}px;
+  }), Object.entries(t.radius).forEach(([i, s]) => {
+    e += `  --radius-${i}: ${s}px;
 `;
-  }), n.shadows && Object.entries(n.shadows).forEach(([s, i]) => {
-    e += `  --shadow-${s}: ${i};
+  }), t.shadows && Object.entries(t.shadows).forEach(([i, s]) => {
+    e += `  --shadow-${i}: ${s};
 `;
   }), e += `}
 `, e += `html { font-size: var(--font-size-base); }
 `, e += `body { font-family: var(--font-family); }
-`, t.textContent = e;
+`, r.textContent = e;
   const c = document.getElementById("ds-theme");
-  c && c.remove(), document.head.appendChild(t);
+  c && c.remove(), document.head.appendChild(r);
 }
-const C = S(null);
-function T({ tokens: r = {}, children: n }) {
-  const t = b(() => h(r), [r]);
-  x(() => {
-    $(t);
-  }, [t]);
-  const e = b(() => ({
-    tokens: t,
+const A = w(null);
+function I({ tokens: n = {}, children: t }) {
+  const r = $(() => x(n), [n]);
+  z(() => {
+    D(r);
+  }, [r]);
+  const e = $(() => ({
+    tokens: r,
     getToken: (o) => {
       const a = o.split(".");
-      let c = t;
-      for (const s of a)
-        if (c && typeof c == "object" && s in c)
-          c = c[s];
+      let c = r;
+      for (const i of a)
+        if (c && typeof c == "object" && i in c)
+          c = c[i];
         else
           return;
       return c;
     }
-  }), [t]);
-  return /* @__PURE__ */ E(C.Provider, { value: e, children: n });
+  }), [r]);
+  return /* @__PURE__ */ S(A.Provider, { value: e, children: t });
 }
-T.propTypes = {
-  tokens: p.object,
-  children: p.node.isRequired
+I.propTypes = {
+  tokens: l.object,
+  children: l.node.isRequired
 };
-function k() {
-  const r = D(C);
-  return r || (console.warn("useTheme must be used within ThemeProvider. Using default tokens."), {
-    tokens: g,
-    getToken: (n) => {
-      const t = n.split(".");
-      let e = g;
-      for (const o of t)
+function v() {
+  const n = B(A);
+  return n || (console.warn("useTheme must be used within ThemeProvider. Using default tokens."), {
+    tokens: h,
+    getToken: (t) => {
+      const r = t.split(".");
+      let e = h;
+      for (const o of r)
         if (e && typeof e == "object" && o in e)
           e = e[o];
         else
@@ -302,18 +302,18 @@ function k() {
     }
   });
 }
-function w() {
-  const { tokens: r, getToken: n } = k();
+function R() {
+  const { tokens: n, getToken: t } = v();
   return {
     /**
      * دریافت رنگ
      * @param {string} path - مسیر رنگ مثل 'primary.500' یا 'neutral.100'
      * @returns {string} مقدار رنگ
      */
-    color: (t) => {
-      const e = n(`colors.${t}`);
+    color: (r) => {
+      const e = t(`colors.${r}`);
       if (e) return e;
-      const [o, a] = t.split(".");
+      const [o, a] = r.split(".");
       return `var(--${o}-${a}, #000)`;
     },
     /**
@@ -321,49 +321,142 @@ function w() {
      * @param {string|number} key - کلید spacing مثل '4' یا 'sm'
      * @returns {string} مقدار spacing با واحد px
      */
-    spacing: (t) => {
-      const e = n(`spacing.${t}`);
-      return e ? `${e}px` : `var(--space-${t}, ${t * (r.spacing?.unit || 4)}px)`;
+    spacing: (r) => {
+      const e = t(`spacing.${r}`);
+      return e ? `${e}px` : `var(--space-${r}, ${r * (n.spacing?.unit || 4)}px)`;
     },
     /**
      * دریافت radius
      * @param {string} key - کلید radius مثل 'md' یا 'lg'
      * @returns {string} مقدار radius با واحد px
      */
-    radius: (t) => {
-      const e = n(`radius.${t}`);
-      return e ? `${e}px` : `var(--radius-${t}, 8px)`;
+    radius: (r) => {
+      const e = t(`radius.${r}`);
+      return e ? `${e}px` : `var(--radius-${r}, 8px)`;
     },
     /**
      * دریافت typography
      * @param {string} property - ویژگی typography مثل 'fontFamily', 'sizes.16'
      * @returns {string|number} مقدار typography
      */
-    typography: (t) => {
-      const e = n(`typography.${t}`);
-      return e ? typeof e == "number" ? `${e}px` : e : t === "fontFamily" ? "var(--font-family, system-ui, sans-serif)" : `var(--font-${t}, 16px)`;
+    typography: (r) => {
+      const e = t(`typography.${r}`);
+      return e ? typeof e == "number" ? `${e}px` : e : r === "fontFamily" ? "var(--font-family, system-ui, sans-serif)" : `var(--font-${r}, 16px)`;
     },
     /**
      * دریافت shadow
      * @param {string} key - کلید shadow مثل 'sm' یا 'md'
      * @returns {string} مقدار shadow
      */
-    shadow: (t) => {
-      const e = n(`shadows.${t}`);
-      return e || `var(--shadow-${t}, none)`;
+    shadow: (r) => {
+      const e = t(`shadows.${r}`);
+      return e || `var(--shadow-${r}, none)`;
     },
     /**
      * دسترسی مستقیم به توکن‌ها
      */
-    tokens: r,
+    tokens: n,
     /**
      * دریافت توکن با مسیر دلخواه
      */
-    getToken: n
+    getToken: t
   };
 }
-const O = ({ variant: r = "primary", size: n = "md", children: t, className: e = "", ...o }) => {
-  const { color: a, spacing: c, radius: s, typography: i } = w(), F = {
+const d = {
+  // MUI-compatible easing functions
+  easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
+  easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
+  easeIn: "cubic-bezier(0.4, 0, 1, 1)",
+  sharp: "cubic-bezier(0.4, 0, 0.6, 1)"
+}, p = {
+  shortest: 150,
+  shorter: 200,
+  short: 250,
+  standard: 300,
+  complex: 375,
+  enteringScreen: 225,
+  leavingScreen: 195
+};
+function f(n = "all", t = {}) {
+  const {
+    duration: r = p.standard,
+    easing: e = d.easeInOut,
+    delay: o = 0
+  } = t;
+  return `${Array.isArray(n) ? n.join(", ") : n} ${r}ms ${e} ${o}ms`;
+}
+const m = {
+  // Standard transitions
+  create: f,
+  // Common transitions
+  easing: d,
+  duration: p,
+  // Preset transitions
+  all: (n) => f("all", n),
+  color: (n) => f(["color", "background-color", "border-color"], n),
+  backgroundColor: (n) => f("background-color", n),
+  opacity: (n) => f("opacity", n),
+  transform: (n) => f("transform", n),
+  boxShadow: (n) => f("box-shadow", n),
+  // Complex transitions
+  standard: (n) => f("all", {
+    duration: p.standard,
+    easing: d.easeInOut,
+    ...n
+  }),
+  enter: (n) => f("all", {
+    duration: p.enteringScreen,
+    easing: d.easeOut,
+    ...n
+  }),
+  leave: (n) => f("all", {
+    duration: p.leavingScreen,
+    easing: d.easeIn,
+    ...n
+  })
+};
+function P(n = "all", t = {}) {
+  return f(n, t);
+}
+const H = {
+  fadeIn: {
+    from: { opacity: 0 },
+    to: { opacity: 1 }
+  },
+  fadeOut: {
+    from: { opacity: 1 },
+    to: { opacity: 0 }
+  },
+  slideUp: {
+    from: { transform: "translateY(20px)", opacity: 0 },
+    to: { transform: "translateY(0)", opacity: 1 }
+  },
+  slideDown: {
+    from: { transform: "translateY(-20px)", opacity: 0 },
+    to: { transform: "translateY(0)", opacity: 1 }
+  },
+  scaleIn: {
+    from: { transform: "scale(0.8)", opacity: 0 },
+    to: { transform: "scale(1)", opacity: 1 }
+  },
+  scaleOut: {
+    from: { transform: "scale(1)", opacity: 1 },
+    to: { transform: "scale(0.8)", opacity: 0 }
+  }
+};
+function L(n, t = {}) {
+  const {
+    duration: r = p.standard,
+    easing: e = d.easeInOut,
+    delay: o = 0,
+    iterationCount: a = 1,
+    direction: c = "normal",
+    fillMode: i = "both"
+  } = t;
+  return `${n} ${r}ms ${e} ${o}ms ${a} ${c} ${i}`;
+}
+const M = ({ variant: n = "primary", size: t = "md", children: r, className: e = "", ...o }) => {
+  const { color: a, spacing: c, radius: i, typography: s } = R(), F = {
     primary: {
       backgroundColor: a("primary.500"),
       color: "#ffffff",
@@ -394,85 +487,119 @@ const O = ({ variant: r = "primary", size: n = "md", children: t, className: e =
       color: "#ffffff",
       border: "none"
     }
-  }, l = {
+  }, g = {
     sm: {
       padding: `${c(2)} ${c(4)}`,
-      fontSize: i("sizes.14") || "14px"
+      fontSize: s("sizes.14") || "14px"
     },
     md: {
       padding: `${c(3)} ${c(6)}`,
-      fontSize: i("sizes.16") || "16px"
+      fontSize: s("sizes.16") || "16px"
     },
     lg: {
       padding: `${c(4)} ${c(8)}`,
-      fontSize: i("sizes.18") || "18px"
+      fontSize: s("sizes.18") || "18px"
     }
   };
-  return /* @__PURE__ */ E(
+  return /* @__PURE__ */ S(
     "button",
     {
-      className: `ds-button ds-button--${r} ds-button--${n} ${e}`,
+      className: `ds-button ds-button--${n} ds-button--${t} ${e}`,
       style: {
-        borderRadius: s("md"),
-        fontFamily: i("fontFamily"),
+        borderRadius: i("md"),
+        fontFamily: s("fontFamily"),
         fontWeight: "500",
         cursor: "pointer",
-        transition: "all 0.2s ease",
-        ...F[r],
-        ...l[n],
+        transition: m.standard({ duration: 200 }),
+        ...F[n],
+        ...g[t],
         ...o.style
       },
-      onMouseEnter: (u) => {
-        r === "primary" && (u.currentTarget.style.opacity = "0.9");
+      onMouseEnter: (y) => {
+        n === "primary" && (y.currentTarget.style.opacity = "0.9");
       },
-      onMouseLeave: (u) => {
-        r === "primary" && (u.currentTarget.style.opacity = "1");
+      onMouseLeave: (y) => {
+        n === "primary" && (y.currentTarget.style.opacity = "1");
       },
       ...o,
-      children: t
+      children: r
     }
   );
 };
-O.propTypes = {
-  children: p.node.isRequired,
-  variant: p.oneOf(["primary", "outline", "text", "secondary", "success", "error"]),
-  size: p.oneOf(["sm", "md", "lg"]),
-  className: p.string
+M.propTypes = {
+  children: l.node.isRequired,
+  variant: l.oneOf(["primary", "outline", "text", "secondary", "success", "error"]),
+  size: l.oneOf(["sm", "md", "lg"]),
+  className: l.string
 };
-function N(r = {}) {
-  $(r);
+function q(n = {}) {
+  if (typeof window < "u" && (window.MUI || window.mui))
+    try {
+      return {
+        create: window.MUI?.transitions?.create || m.create,
+        easing: window.MUI?.transitions?.easing || m.easing,
+        duration: window.MUI?.transitions?.duration || m.duration,
+        useMUI: !0
+      };
+    } catch {
+    }
+  return {
+    ...m,
+    useMUI: !1
+  };
+}
+function K() {
+  if (typeof window < "u" && (window.MUI || window.mui))
+    try {
+      return window.MUI?.theme || window.mui?.theme || null;
+    } catch {
+      return null;
+    }
+  return null;
 }
-const R = {};
-function P(r = {}) {
-  let n = "";
-  Object.entries(r.colors?.primary || {}).forEach(([t, e]) => {
-    n += `$primary-${t}: ${e};
+function V(n = {}) {
+  D(n);
+}
+const U = {};
+function G(n = {}) {
+  let t = "";
+  Object.entries(n.colors?.primary || {}).forEach(([r, e]) => {
+    t += `$primary-${r}: ${e};
 `;
-  }), n += `$font-family: "${r.typography?.fontFamily || "sans-serif"}";
-`, n += `$font-size-base: ${r.typography?.baseSize || 16}px;
-`, R.writeFileSync("custom-variables.scss", n);
+  }), t += `$font-family: "${n.typography?.fontFamily || "sans-serif"}";
+`, t += `$font-size-base: ${n.typography?.baseSize || 16}px;
+`, U.writeFileSync("custom-variables.scss", t);
 }
-const H = {
+const J = {
   colors: {
-    primary: y.primary,
-    neutral: y.neutral
+    primary: C.primary,
+    neutral: C.neutral
   },
   spacing: { unit: 4 },
   // 1 = 4px
   typography: { fontFamily: "system-ui, sans-serif", baseSize: 16 }
 };
 export {
-  O as Button,
-  T as ThemeProvider,
-  g as baseTokens,
-  h as createTokens,
-  T as default,
-  y as defaultColors,
-  H as defaultConfig,
-  B as defaultTokens,
-  P as generateSCSS,
-  $ as generateTheme,
-  N as injectCSS,
-  k as useTheme,
-  w as useTokens
+  M as Button,
+  I as ThemeProvider,
+  h as baseTokens,
+  L as createAnimation,
+  x as createTokens,
+  f as createTransition,
+  I as default,
+  C as defaultColors,
+  J as defaultConfig,
+  T as defaultTokens,
+  p as duration,
+  d as easing,
+  G as generateSCSS,
+  D as generateTheme,
+  V as injectCSS,
+  H as keyframes,
+  m as transitions,
+  K as useMUITheme,
+  q as useMUITransitions,
+  v as useTheme,
+  R as useTokens,
+  P as useTransition
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ali-mohammadi-design-system",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "description": "خنثی و dynamic Design System — tokens از پروژه میاد",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -30,6 +30,14 @@
     "react": ">=18 <20",
     "react-dom": ">=18 <20"
   },
+  "peerDependenciesMeta": {
+    "@mui/material": {
+      "optional": true
+    },
+    "@mui/system": {
+      "optional": true
+    }
+  },
   "exports": {
     ".": {
       "import": "./dist/index.js",

package/src/components/Button/Button.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useTokens } from '../../utils/useTokens.js';
+import { transitions } from '../../utils/animations.js';
 
 /**
  * Button Component - کامپوننت دکمه با پشتیبانی از تم
@@ -72,7 +73,7 @@ const Button = ({ variant = 'primary', size = 'md', children, className = '', ..
         fontFamily: typography('fontFamily'),
         fontWeight: '500',
         cursor: 'pointer',
-        transition: 'all 0.2s ease',
+        transition: transitions.standard({ duration: 200 }),
         ...variantStyles[variant],
         ...sizeStyles[size],
         ...props.style,

package/src/index.js

@@ -5,6 +5,10 @@ export * from './components/index.js';
 export { ThemeProvider, useTheme } from './theme/ThemeProvider.jsx';
 export { useTokens } from './utils/useTokens.js';
 
+// Export Animations و Transitions
+export { transitions, easing, duration, keyframes, createTransition, createAnimation, useTransition } from './utils/animations.js';
+export { useMUITransitions, useMUITheme } from './utils/useMUI.js';
+
 // Export توکن‌ها
 export { defaultTokens, baseTokens, createTokens, defaultColors } from './tokens/index.js';
 

package/src/utils/animations.js

@@ -0,0 +1,159 @@
+/**
+ * Utilities برای animations و transitions
+ * اگر MUI موجود باشد از آن استفاده می‌کند، وگرنه از CSS animations استفاده می‌کند
+ */
+
+// MUI به صورت optional است و در runtime بررسی می‌شود
+// در build time از CSS animations استفاده می‌کنیم
+
+/**
+ * Easing functions (مشابه MUI)
+ * این easing functions مشابه MUI هستند و بدون نیاز به MUI کار می‌کنند
+ */
+export const easing = {
+  // MUI-compatible easing functions
+  easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
+  easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
+  sharp: 'cubic-bezier(0.4, 0, 0.6, 1)',
+};
+
+/**
+ * Duration values (مشابه MUI)
+ */
+export const duration = {
+  shortest: 150,
+  shorter: 200,
+  short: 250,
+  standard: 300,
+  complex: 375,
+  enteringScreen: 225,
+  leavingScreen: 195,
+};
+
+/**
+ * ایجاد transition string برای CSS
+ * @param {string|string[]} props - ویژگی‌هایی که باید transition شوند
+ * @param {Object} options - گزینه‌های transition
+ * @returns {string} CSS transition string
+ */
+export function createTransition(props = 'all', options = {}) {
+  const {
+    duration: durationOption = duration.standard,
+    easing: easingOption = easing.easeInOut,
+    delay = 0,
+  } = options;
+
+  const properties = Array.isArray(props) ? props.join(', ') : props;
+  
+  return `${properties} ${durationOption}ms ${easingOption} ${delay}ms`;
+}
+
+/**
+ * Transition presets (مشابه MUI)
+ */
+export const transitions = {
+  // Standard transitions
+  create: createTransition,
+  
+  // Common transitions
+  easing,
+  duration,
+  
+  // Preset transitions
+  all: (options) => createTransition('all', options),
+  color: (options) => createTransition(['color', 'background-color', 'border-color'], options),
+  backgroundColor: (options) => createTransition('background-color', options),
+  opacity: (options) => createTransition('opacity', options),
+  transform: (options) => createTransition('transform', options),
+  boxShadow: (options) => createTransition('box-shadow', options),
+  
+  // Complex transitions
+  standard: (options) => createTransition('all', { 
+    duration: duration.standard, 
+    easing: easing.easeInOut,
+    ...options 
+  }),
+  
+  enter: (options) => createTransition('all', { 
+    duration: duration.enteringScreen, 
+    easing: easing.easeOut,
+    ...options 
+  }),
+  
+  leave: (options) => createTransition('all', { 
+    duration: duration.leavingScreen, 
+    easing: easing.easeIn,
+    ...options 
+  }),
+};
+
+/**
+ * Hook برای استفاده از transitions در کامپوننت‌ها
+ * @param {string|string[]} props - ویژگی‌هایی که باید transition شوند
+ * @param {Object} options - گزینه‌های transition
+ * @returns {string} CSS transition string
+ */
+export function useTransition(props = 'all', options = {}) {
+  return createTransition(props, options);
+}
+
+/**
+ * Animation keyframes (CSS-based)
+ */
+export const keyframes = {
+  fadeIn: {
+    from: { opacity: 0 },
+    to: { opacity: 1 },
+  },
+  fadeOut: {
+    from: { opacity: 1 },
+    to: { opacity: 0 },
+  },
+  slideUp: {
+    from: { transform: 'translateY(20px)', opacity: 0 },
+    to: { transform: 'translateY(0)', opacity: 1 },
+  },
+  slideDown: {
+    from: { transform: 'translateY(-20px)', opacity: 0 },
+    to: { transform: 'translateY(0)', opacity: 1 },
+  },
+  scaleIn: {
+    from: { transform: 'scale(0.8)', opacity: 0 },
+    to: { transform: 'scale(1)', opacity: 1 },
+  },
+  scaleOut: {
+    from: { transform: 'scale(1)', opacity: 1 },
+    to: { transform: 'scale(0.8)', opacity: 0 },
+  },
+};
+
+/**
+ * ایجاد animation string برای CSS
+ * @param {string} name - نام animation
+ * @param {Object} options - گزینه‌های animation
+ * @returns {string} CSS animation string
+ */
+export function createAnimation(name, options = {}) {
+  const {
+    duration: durationOption = duration.standard,
+    easing: easingOption = easing.easeInOut,
+    delay = 0,
+    iterationCount = 1,
+    direction = 'normal',
+    fillMode = 'both',
+  } = options;
+
+  return `${name} ${durationOption}ms ${easingOption} ${delay}ms ${iterationCount} ${direction} ${fillMode}`;
+}
+
+export default {
+  transitions,
+  easing,
+  duration,
+  keyframes,
+  createTransition,
+  createAnimation,
+  useTransition,
+};
+

package/src/utils/index.js

@@ -0,0 +1,4 @@
+export { useTokens } from './useTokens.js';
+export { transitions, easing, duration, keyframes, createTransition, createAnimation, useTransition } from './animations.js';
+export { useMUITransitions, useMUITheme, checkMUIAvailability } from './useMUI.js';
+

package/src/utils/useMUI.js

@@ -0,0 +1,77 @@
+/**
+ * Hook برای استفاده اختیاری از MUI
+ * اگر MUI موجود باشد از آن استفاده می‌کند، وگرنه fallback می‌کند
+ * 
+ * توجه: این hook فقط در runtime کار می‌کند و MUI باید در پروژه کاربر نصب شده باشد
+ */
+
+import { transitions } from './animations.js';
+
+/**
+ * Hook برای استفاده از MUI transitions (اگر موجود باشد)
+ * در runtime بررسی می‌کند که آیا MUI در window یا global موجود است
+ * 
+ * @param {Object} options - گزینه‌های transition
+ * @returns {Object} Transition utilities
+ */
+export function useMUITransitions(options = {}) {
+  // در runtime بررسی می‌کنیم
+  if (typeof window !== 'undefined') {
+    // اگر MUI در window موجود باشد (مثلاً از CDN)
+    if (window.MUI || window.mui) {
+      try {
+        // استفاده از MUI transitions
+        return {
+          create: window.MUI?.transitions?.create || transitions.create,
+          easing: window.MUI?.transitions?.easing || transitions.easing,
+          duration: window.MUI?.transitions?.duration || transitions.duration,
+          useMUI: true,
+        };
+      } catch {
+        // Fallback
+      }
+    }
+  }
+  
+  // Fallback به animations.js (همیشه کار می‌کند)
+  return {
+    ...transitions,
+    useMUI: false,
+  };
+}
+
+/**
+ * دریافت MUI theme (اگر موجود باشد)
+ * این hook فقط در runtime کار می‌کند
+ */
+export function useMUITheme() {
+  // در runtime بررسی می‌کنیم
+  if (typeof window !== 'undefined') {
+    // اگر MUI در window موجود باشد
+    if (window.MUI || window.mui) {
+      try {
+        // استفاده از MUI theme
+        return window.MUI?.theme || window.mui?.theme || null;
+      } catch {
+        return null;
+      }
+    }
+  }
+  
+  return null;
+}
+
+/**
+ * بررسی اینکه آیا MUI در پروژه نصب شده است (برای documentation)
+ * این فقط یک helper است و در runtime کار نمی‌کند
+ */
+export function checkMUIAvailability() {
+  return { available: false, message: 'MUI باید در پروژه کاربر نصب شود' };
+}
+
+export default {
+  useMUITransitions,
+  useMUITheme,
+  checkMUIAvailability,
+};
+