ali-mohammadi-design-system 2.0.5 → 2.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.cjs +8 -8
- package/dist/index.js +237 -298
- package/package.json +5 -10
- package/src/components/Button/Button.jsx +28 -19
- package/src/index.js +2 -3
- package/src/utils/index.js +1 -3
- package/src/utils/muiHelpers.js +88 -0
- package/src/utils/animations.js +0 -159
- package/src/utils/useMUI.js +0 -77
package/dist/index.cjs
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
2
|
-
`;Object.entries(t.colors).forEach(([s,a])=>{typeof a=="object"&&Object.entries(a).forEach(([
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const C=require("react/jsx-runtime"),p=require("react"),u=require("prop-types"),g={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},l={brand:k};function j(){const r={colors:{},typography:{},spacing:{},radius:{},shadows:{}};if(l.brand&&Object.entries(l.brand).forEach(([t,n])=>{if(typeof n=="object"&&!Array.isArray(n)){const e=t.toLowerCase();r.colors[e]={},Object.entries(n).forEach(([o,c])=>{(typeof c=="string"||typeof c=="number")&&(r.colors[e][o]=c)})}}),l.brand?.TypeScale){const t=l.brand.TypeScale;r.typography={fontFamily:t.FontFamily?.YekanBakh,sizes:t.Size||{},lineHeights:t.Height||{},weights:t.Weight||{}}}if(l.brand?.NumberScale){const t=l.brand.NumberScale;t.Spacing&&(r.spacing={},Object.entries(t.Spacing).forEach(([n,e])=>{const o=n.replace("spacing-","");r.spacing[o]=typeof e=="number"?e:parseInt(e)})),t.Radius&&(r.radius={},Object.entries(t.Radius).forEach(([n,e])=>{const o=n.replace("Radius-","").toLowerCase();r.radius[o]=typeof e=="number"?e:parseInt(e)}))}return r}const S={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 b(r,t){const n={...r};return m(r)&&m(t)&&Object.keys(t).forEach(e=>{m(t[e])?e in r?n[e]=b(r[e],t[e]):Object.assign(n,{[e]:t[e]}):Object.assign(n,{[e]:t[e]})}),n}function m(r){return r&&typeof r=="object"&&!Array.isArray(r)}const w=j(),d=b(S,w);function y(r={}){return b(d,r)}function h(r={}){const t=y(r),n=document.createElement("style");n.id="ds-theme";let e=`:root {
|
|
2
|
+
`;Object.entries(t.colors).forEach(([s,a])=>{typeof a=="object"&&Object.entries(a).forEach(([f,F])=>{e+=` --${s}-${f}: ${F};
|
|
3
3
|
`})});const o=t.typography;if(e+=` --font-family: ${o.fontFamily};
|
|
4
|
-
`,o.baseSize&&o.minSize){const s=(o.baseSize-o.minSize)/1600,
|
|
4
|
+
`,o.baseSize&&o.minSize){const s=(o.baseSize-o.minSize)/1600,f=`${-320*s+o.minSize}px + ${s*100}vw`;e+=` --font-size-base: clamp(${o.minSize}px, ${f}, ${o.baseSize}px);
|
|
5
5
|
`}else e+=` --font-size-base: ${o.baseSize||16}px;
|
|
6
6
|
`;e+=` --type-scale: ${o.scaleRatio||1.25};
|
|
7
7
|
`,o.sizes&&Object.entries(o.sizes).forEach(([s,a])=>{e+=` --font-size-${s}: ${a}px;
|
|
8
8
|
`}),o.lineHeights&&Object.entries(o.lineHeights).forEach(([s,a])=>{e+=` --line-height-${s}: ${a}px;
|
|
9
9
|
`}),o.weights&&Object.entries(o.weights).forEach(([s,a])=>{e+=` --font-weight-${s}: ${a};
|
|
10
|
-
`});const
|
|
10
|
+
`});const c=t.spacing.unit||4;e+=` --space-unit: ${c}px;
|
|
11
11
|
`,Object.entries(t.spacing).forEach(([s,a])=>{s!=="unit"&&(e+=` --space-${s}: ${a}px;
|
|
12
12
|
`)}),Object.entries(t.radius).forEach(([s,a])=>{e+=` --radius-${s}: ${a}px;
|
|
13
13
|
`}),t.shadows&&Object.entries(t.shadows).forEach(([s,a])=>{e+=` --shadow-${s}: ${a};
|
|
14
14
|
`}),e+=`}
|
|
15
15
|
`,e+=`html { font-size: var(--font-size-base); }
|
|
16
16
|
`,e+=`body { font-family: var(--font-family); }
|
|
17
|
-
`,
|
|
18
|
-
`}),t+=`$font-family: "${
|
|
19
|
-
`,t+=`$font-size-base: ${
|
|
20
|
-
`,
|
|
17
|
+
`,n.textContent=e;const i=document.getElementById("ds-theme");i&&i.remove(),document.head.appendChild(n)}const $=p.createContext(null);function E({tokens:r={},children:t}){const n=p.useMemo(()=>y(r),[r]);p.useEffect(()=>{h(n)},[n]);const e=p.useMemo(()=>({tokens:n,getToken:o=>{const c=o.split(".");let i=n;for(const s of c)if(i&&typeof i=="object"&&s in i)i=i[s];else return;return i}}),[n]);return C.jsx($.Provider,{value:e,children:t})}E.propTypes={tokens:u.object,children:u.node.isRequired};function x(){const r=p.useContext($);return r||(console.warn("useTheme must be used within ThemeProvider. Using default tokens."),{tokens:d,getToken:t=>{const n=t.split(".");let e=d;for(const o of n)if(e&&typeof e=="object"&&o in e)e=e[o];else return;return e}})}function B(){const{tokens:r,getToken:t}=x();return{color:n=>{const e=t(`colors.${n}`);if(e)return e;const[o,c]=n.split(".");return`var(--${o}-${c}, #000)`},spacing:n=>{const e=t(`spacing.${n}`);return e?`${e}px`:`var(--space-${n}, ${n*(r.spacing?.unit||4)}px)`},radius:n=>{const e=t(`radius.${n}`);return e?`${e}px`:`var(--radius-${n}, 8px)`},typography:n=>{const e=t(`typography.${n}`);return e?typeof e=="number"?`${e}px`:e:n==="fontFamily"?"var(--font-family, system-ui, sans-serif)":`var(--font-${n}, 16px)`},shadow:n=>{const e=t(`shadows.${n}`);return e||`var(--shadow-${n}, none)`},tokens:r,getToken:t}}function v(){try{const{transitions:r}=require("@mui/material/styles");return r}catch{throw new Error("@mui/material باید در پروژه نصب شود. لطفاً npm install @mui/material @emotion/react @emotion/styled را اجرا کنید.")}}function O(){try{const{useTheme:r}=require("@mui/material/styles");return r}catch{throw new Error("@mui/material باید در پروژه نصب شود. لطفاً npm install @mui/material @emotion/react @emotion/styled را اجرا کنید.")}}function R(){try{return require("@emotion/styled")}catch{throw new Error("@emotion/styled باید در پروژه نصب شود. لطفاً npm install @emotion/styled را اجرا کنید.")}}function I(){try{const{Box:r}=require("@mui/material");return r}catch{throw new Error("@mui/material باید در پروژه نصب شود. لطفاً npm install @mui/material را اجرا کنید.")}}function D(){try{const{ButtonBase:r}=require("@mui/material");return r}catch{throw new Error("@mui/material باید در پروژه نصب شود. لطفاً npm install @mui/material را اجرا کنید.")}}const A=({variant:r="primary",size:t="md",children:n,className:e="",sx:o,...c})=>{const{color:i,spacing:s,radius:a,typography:f}=B(),F=D(),z={primary:{backgroundColor:i("primary.500"),color:"#ffffff",border:"none","&:hover":{backgroundColor:i("primary.600")}},outline:{backgroundColor:"transparent",border:`2px solid ${i("primary.500")}`,color:i("primary.500"),"&:hover":{backgroundColor:i("primary.50")}},text:{backgroundColor:"transparent",border:"none",color:i("primary.500"),"&:hover":{backgroundColor:i("primary.50")}},secondary:{backgroundColor:i("neutral.200"),color:i("neutral.900"),border:"none","&:hover":{backgroundColor:i("neutral.300")}},success:{backgroundColor:i("success.500"),color:"#ffffff",border:"none","&:hover":{backgroundColor:i("success.600")}},error:{backgroundColor:i("error.500"),color:"#ffffff",border:"none","&:hover":{backgroundColor:i("error.600")}}},T={sm:{padding:`${s(2)} ${s(4)}`,fontSize:f("sizes.14")||"14px"},md:{padding:`${s(3)} ${s(6)}`,fontSize:f("sizes.16")||"16px"},lg:{padding:`${s(4)} ${s(8)}`,fontSize:f("sizes.18")||"18px"}};return C.jsx(F,{className:`ds-button ds-button--${r} ds-button--${t} ${e}`,sx:{borderRadius:a("md"),fontFamily:f("fontFamily"),fontWeight:"500",cursor:"pointer",...z[r],...T[t],...o},...c,children:n})};A.propTypes={children:u.node.isRequired,variant:u.oneOf(["primary","outline","text","secondary","success","error"]),size:u.oneOf(["sm","md","lg"]),className:u.string,sx:u.object};function M(r={}){h(r)}const U={};function q(r={}){let t="";Object.entries(r.colors?.primary||{}).forEach(([n,e])=>{t+=`$primary-${n}: ${e};
|
|
18
|
+
`}),t+=`$font-family: "${r.typography?.fontFamily||"sans-serif"}";
|
|
19
|
+
`,t+=`$font-size-base: ${r.typography?.baseSize||16}px;
|
|
20
|
+
`,U.writeFileSync("custom-variables.scss",t)}const W={colors:{primary:g.primary,neutral:g.neutral},spacing:{unit:4},typography:{fontFamily:"system-ui, sans-serif",baseSize:16}};exports.Button=A;exports.ThemeProvider=E;exports.baseTokens=d;exports.createTokens=y;exports.default=E;exports.defaultColors=g;exports.defaultConfig=W;exports.defaultTokens=S;exports.generateSCSS=q;exports.generateTheme=h;exports.getMUIBox=I;exports.getMUIButtonBase=D;exports.getMUIStyled=R;exports.getMUITheme=O;exports.getMUITransitions=v;exports.injectCSS=M;exports.useTheme=x;exports.useTokens=B;
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { createContext as
|
|
1
|
+
import { jsx as y } from "react/jsx-runtime";
|
|
2
|
+
import { createContext as S, useMemo as g, useEffect as B, useContext as D } from "react";
|
|
3
3
|
import l from "prop-types";
|
|
4
|
-
const
|
|
4
|
+
const b = {
|
|
5
5
|
neutral: {
|
|
6
6
|
0: "#FFFFFF",
|
|
7
7
|
50: "#FAFAFA"
|
|
@@ -10,46 +10,46 @@ const C = {
|
|
|
10
10
|
50: "#e3f2fd",
|
|
11
11
|
500: "#2196f3"
|
|
12
12
|
}
|
|
13
|
-
},
|
|
14
|
-
brand:
|
|
13
|
+
}, 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 }, u = {
|
|
14
|
+
brand: A
|
|
15
15
|
};
|
|
16
|
-
function
|
|
17
|
-
const
|
|
16
|
+
function z() {
|
|
17
|
+
const r = {
|
|
18
18
|
colors: {},
|
|
19
19
|
typography: {},
|
|
20
20
|
spacing: {},
|
|
21
21
|
radius: {},
|
|
22
22
|
shadows: {}
|
|
23
23
|
};
|
|
24
|
-
if (u.brand && Object.entries(u.brand).forEach(([
|
|
25
|
-
if (typeof
|
|
26
|
-
const e =
|
|
27
|
-
|
|
28
|
-
(typeof
|
|
24
|
+
if (u.brand && Object.entries(u.brand).forEach(([n, t]) => {
|
|
25
|
+
if (typeof t == "object" && !Array.isArray(t)) {
|
|
26
|
+
const e = n.toLowerCase();
|
|
27
|
+
r.colors[e] = {}, Object.entries(t).forEach(([o, c]) => {
|
|
28
|
+
(typeof c == "string" || typeof c == "number") && (r.colors[e][o] = c);
|
|
29
29
|
});
|
|
30
30
|
}
|
|
31
31
|
}), u.brand?.TypeScale) {
|
|
32
|
-
const
|
|
33
|
-
|
|
34
|
-
fontFamily:
|
|
35
|
-
sizes:
|
|
36
|
-
lineHeights:
|
|
37
|
-
weights:
|
|
32
|
+
const n = u.brand.TypeScale;
|
|
33
|
+
r.typography = {
|
|
34
|
+
fontFamily: n.FontFamily?.YekanBakh,
|
|
35
|
+
sizes: n.Size || {},
|
|
36
|
+
lineHeights: n.Height || {},
|
|
37
|
+
weights: n.Weight || {}
|
|
38
38
|
};
|
|
39
39
|
}
|
|
40
40
|
if (u.brand?.NumberScale) {
|
|
41
|
-
const
|
|
42
|
-
|
|
43
|
-
const o =
|
|
44
|
-
|
|
45
|
-
})),
|
|
46
|
-
const o =
|
|
47
|
-
|
|
41
|
+
const n = u.brand.NumberScale;
|
|
42
|
+
n.Spacing && (r.spacing = {}, Object.entries(n.Spacing).forEach(([t, e]) => {
|
|
43
|
+
const o = t.replace("spacing-", "");
|
|
44
|
+
r.spacing[o] = typeof e == "number" ? e : parseInt(e);
|
|
45
|
+
})), n.Radius && (r.radius = {}, Object.entries(n.Radius).forEach(([t, e]) => {
|
|
46
|
+
const o = t.replace("Radius-", "").toLowerCase();
|
|
47
|
+
r.radius[o] = typeof e == "number" ? e : parseInt(e);
|
|
48
48
|
}));
|
|
49
49
|
}
|
|
50
|
-
return
|
|
50
|
+
return r;
|
|
51
51
|
}
|
|
52
|
-
const
|
|
52
|
+
const w = {
|
|
53
53
|
colors: {
|
|
54
54
|
primary: {
|
|
55
55
|
50: "#e3f2fd",
|
|
@@ -199,101 +199,101 @@ const T = {
|
|
|
199
199
|
xl: "0px 20px 25px rgba(0, 0, 0, 0.1)"
|
|
200
200
|
}
|
|
201
201
|
};
|
|
202
|
-
function
|
|
203
|
-
const
|
|
204
|
-
return
|
|
205
|
-
|
|
206
|
-
}),
|
|
202
|
+
function m(r, n) {
|
|
203
|
+
const t = { ...r };
|
|
204
|
+
return F(r) && F(n) && Object.keys(n).forEach((e) => {
|
|
205
|
+
F(n[e]) ? e in r ? t[e] = m(r[e], n[e]) : Object.assign(t, { [e]: n[e] }) : Object.assign(t, { [e]: n[e] });
|
|
206
|
+
}), t;
|
|
207
207
|
}
|
|
208
|
-
function
|
|
209
|
-
return
|
|
208
|
+
function F(r) {
|
|
209
|
+
return r && typeof r == "object" && !Array.isArray(r);
|
|
210
210
|
}
|
|
211
|
-
const k =
|
|
212
|
-
function
|
|
213
|
-
return
|
|
211
|
+
const k = z(), d = m(w, k);
|
|
212
|
+
function h(r = {}) {
|
|
213
|
+
return m(d, r);
|
|
214
214
|
}
|
|
215
|
-
function
|
|
216
|
-
const
|
|
217
|
-
|
|
215
|
+
function E(r = {}) {
|
|
216
|
+
const n = h(r), t = document.createElement("style");
|
|
217
|
+
t.id = "ds-theme";
|
|
218
218
|
let e = `:root {
|
|
219
219
|
`;
|
|
220
|
-
Object.entries(
|
|
221
|
-
typeof
|
|
222
|
-
e += ` --${
|
|
220
|
+
Object.entries(n.colors).forEach(([s, a]) => {
|
|
221
|
+
typeof a == "object" && Object.entries(a).forEach(([f, p]) => {
|
|
222
|
+
e += ` --${s}-${f}: ${p};
|
|
223
223
|
`;
|
|
224
224
|
});
|
|
225
225
|
});
|
|
226
|
-
const o =
|
|
226
|
+
const o = n.typography;
|
|
227
227
|
if (e += ` --font-family: ${o.fontFamily};
|
|
228
228
|
`, o.baseSize && o.minSize) {
|
|
229
|
-
const
|
|
230
|
-
e += ` --font-size-base: clamp(${o.minSize}px, ${
|
|
229
|
+
const s = (o.baseSize - o.minSize) / 1600, f = `${-320 * s + o.minSize}px + ${s * 100}vw`;
|
|
230
|
+
e += ` --font-size-base: clamp(${o.minSize}px, ${f}, ${o.baseSize}px);
|
|
231
231
|
`;
|
|
232
232
|
} else
|
|
233
233
|
e += ` --font-size-base: ${o.baseSize || 16}px;
|
|
234
234
|
`;
|
|
235
235
|
e += ` --type-scale: ${o.scaleRatio || 1.25};
|
|
236
|
-
`, o.sizes && Object.entries(o.sizes).forEach(([
|
|
237
|
-
e += ` --font-size-${
|
|
236
|
+
`, o.sizes && Object.entries(o.sizes).forEach(([s, a]) => {
|
|
237
|
+
e += ` --font-size-${s}: ${a}px;
|
|
238
238
|
`;
|
|
239
|
-
}), o.lineHeights && Object.entries(o.lineHeights).forEach(([
|
|
240
|
-
e += ` --line-height-${
|
|
239
|
+
}), o.lineHeights && Object.entries(o.lineHeights).forEach(([s, a]) => {
|
|
240
|
+
e += ` --line-height-${s}: ${a}px;
|
|
241
241
|
`;
|
|
242
|
-
}), o.weights && Object.entries(o.weights).forEach(([
|
|
243
|
-
e += ` --font-weight-${
|
|
242
|
+
}), o.weights && Object.entries(o.weights).forEach(([s, a]) => {
|
|
243
|
+
e += ` --font-weight-${s}: ${a};
|
|
244
244
|
`;
|
|
245
245
|
});
|
|
246
|
-
const
|
|
247
|
-
e += ` --space-unit: ${
|
|
248
|
-
`, Object.entries(
|
|
249
|
-
|
|
246
|
+
const c = n.spacing.unit || 4;
|
|
247
|
+
e += ` --space-unit: ${c}px;
|
|
248
|
+
`, Object.entries(n.spacing).forEach(([s, a]) => {
|
|
249
|
+
s !== "unit" && (e += ` --space-${s}: ${a}px;
|
|
250
250
|
`);
|
|
251
|
-
}), Object.entries(
|
|
252
|
-
e += ` --radius-${
|
|
251
|
+
}), Object.entries(n.radius).forEach(([s, a]) => {
|
|
252
|
+
e += ` --radius-${s}: ${a}px;
|
|
253
253
|
`;
|
|
254
|
-
}),
|
|
255
|
-
e += ` --shadow-${
|
|
254
|
+
}), n.shadows && Object.entries(n.shadows).forEach(([s, a]) => {
|
|
255
|
+
e += ` --shadow-${s}: ${a};
|
|
256
256
|
`;
|
|
257
257
|
}), e += `}
|
|
258
258
|
`, e += `html { font-size: var(--font-size-base); }
|
|
259
259
|
`, e += `body { font-family: var(--font-family); }
|
|
260
|
-
`,
|
|
261
|
-
const
|
|
262
|
-
|
|
260
|
+
`, t.textContent = e;
|
|
261
|
+
const i = document.getElementById("ds-theme");
|
|
262
|
+
i && i.remove(), document.head.appendChild(t);
|
|
263
263
|
}
|
|
264
|
-
const
|
|
265
|
-
function
|
|
266
|
-
const
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
}, [
|
|
270
|
-
const e =
|
|
271
|
-
tokens:
|
|
264
|
+
const C = S(null);
|
|
265
|
+
function j({ tokens: r = {}, children: n }) {
|
|
266
|
+
const t = g(() => h(r), [r]);
|
|
267
|
+
B(() => {
|
|
268
|
+
E(t);
|
|
269
|
+
}, [t]);
|
|
270
|
+
const e = g(() => ({
|
|
271
|
+
tokens: t,
|
|
272
272
|
getToken: (o) => {
|
|
273
|
-
const
|
|
274
|
-
let
|
|
275
|
-
for (const
|
|
276
|
-
if (
|
|
277
|
-
|
|
273
|
+
const c = o.split(".");
|
|
274
|
+
let i = t;
|
|
275
|
+
for (const s of c)
|
|
276
|
+
if (i && typeof i == "object" && s in i)
|
|
277
|
+
i = i[s];
|
|
278
278
|
else
|
|
279
279
|
return;
|
|
280
|
-
return
|
|
280
|
+
return i;
|
|
281
281
|
}
|
|
282
|
-
}), [
|
|
283
|
-
return /* @__PURE__ */
|
|
282
|
+
}), [t]);
|
|
283
|
+
return /* @__PURE__ */ y(C.Provider, { value: e, children: n });
|
|
284
284
|
}
|
|
285
|
-
|
|
285
|
+
j.propTypes = {
|
|
286
286
|
tokens: l.object,
|
|
287
287
|
children: l.node.isRequired
|
|
288
288
|
};
|
|
289
|
-
function
|
|
290
|
-
const
|
|
291
|
-
return
|
|
292
|
-
tokens:
|
|
293
|
-
getToken: (
|
|
294
|
-
const
|
|
295
|
-
let e =
|
|
296
|
-
for (const o of
|
|
289
|
+
function T() {
|
|
290
|
+
const r = D(C);
|
|
291
|
+
return r || (console.warn("useTheme must be used within ThemeProvider. Using default tokens."), {
|
|
292
|
+
tokens: d,
|
|
293
|
+
getToken: (n) => {
|
|
294
|
+
const t = n.split(".");
|
|
295
|
+
let e = d;
|
|
296
|
+
for (const o of t)
|
|
297
297
|
if (e && typeof e == "object" && o in e)
|
|
298
298
|
e = e[o];
|
|
299
299
|
else
|
|
@@ -302,304 +302,243 @@ function v() {
|
|
|
302
302
|
}
|
|
303
303
|
});
|
|
304
304
|
}
|
|
305
|
-
function
|
|
306
|
-
const { tokens:
|
|
305
|
+
function v() {
|
|
306
|
+
const { tokens: r, getToken: n } = T();
|
|
307
307
|
return {
|
|
308
308
|
/**
|
|
309
309
|
* دریافت رنگ
|
|
310
310
|
* @param {string} path - مسیر رنگ مثل 'primary.500' یا 'neutral.100'
|
|
311
311
|
* @returns {string} مقدار رنگ
|
|
312
312
|
*/
|
|
313
|
-
color: (
|
|
314
|
-
const e =
|
|
313
|
+
color: (t) => {
|
|
314
|
+
const e = n(`colors.${t}`);
|
|
315
315
|
if (e) return e;
|
|
316
|
-
const [o,
|
|
317
|
-
return `var(--${o}-${
|
|
316
|
+
const [o, c] = t.split(".");
|
|
317
|
+
return `var(--${o}-${c}, #000)`;
|
|
318
318
|
},
|
|
319
319
|
/**
|
|
320
320
|
* دریافت spacing
|
|
321
321
|
* @param {string|number} key - کلید spacing مثل '4' یا 'sm'
|
|
322
322
|
* @returns {string} مقدار spacing با واحد px
|
|
323
323
|
*/
|
|
324
|
-
spacing: (
|
|
325
|
-
const e =
|
|
326
|
-
return e ? `${e}px` : `var(--space-${
|
|
324
|
+
spacing: (t) => {
|
|
325
|
+
const e = n(`spacing.${t}`);
|
|
326
|
+
return e ? `${e}px` : `var(--space-${t}, ${t * (r.spacing?.unit || 4)}px)`;
|
|
327
327
|
},
|
|
328
328
|
/**
|
|
329
329
|
* دریافت radius
|
|
330
330
|
* @param {string} key - کلید radius مثل 'md' یا 'lg'
|
|
331
331
|
* @returns {string} مقدار radius با واحد px
|
|
332
332
|
*/
|
|
333
|
-
radius: (
|
|
334
|
-
const e =
|
|
335
|
-
return e ? `${e}px` : `var(--radius-${
|
|
333
|
+
radius: (t) => {
|
|
334
|
+
const e = n(`radius.${t}`);
|
|
335
|
+
return e ? `${e}px` : `var(--radius-${t}, 8px)`;
|
|
336
336
|
},
|
|
337
337
|
/**
|
|
338
338
|
* دریافت typography
|
|
339
339
|
* @param {string} property - ویژگی typography مثل 'fontFamily', 'sizes.16'
|
|
340
340
|
* @returns {string|number} مقدار typography
|
|
341
341
|
*/
|
|
342
|
-
typography: (
|
|
343
|
-
const e =
|
|
344
|
-
return e ? typeof e == "number" ? `${e}px` : e :
|
|
342
|
+
typography: (t) => {
|
|
343
|
+
const e = n(`typography.${t}`);
|
|
344
|
+
return e ? typeof e == "number" ? `${e}px` : e : t === "fontFamily" ? "var(--font-family, system-ui, sans-serif)" : `var(--font-${t}, 16px)`;
|
|
345
345
|
},
|
|
346
346
|
/**
|
|
347
347
|
* دریافت shadow
|
|
348
348
|
* @param {string} key - کلید shadow مثل 'sm' یا 'md'
|
|
349
349
|
* @returns {string} مقدار shadow
|
|
350
350
|
*/
|
|
351
|
-
shadow: (
|
|
352
|
-
const e =
|
|
353
|
-
return e || `var(--shadow-${
|
|
351
|
+
shadow: (t) => {
|
|
352
|
+
const e = n(`shadows.${t}`);
|
|
353
|
+
return e || `var(--shadow-${t}, none)`;
|
|
354
354
|
},
|
|
355
355
|
/**
|
|
356
356
|
* دسترسی مستقیم به توکنها
|
|
357
357
|
*/
|
|
358
|
-
tokens:
|
|
358
|
+
tokens: r,
|
|
359
359
|
/**
|
|
360
360
|
* دریافت توکن با مسیر دلخواه
|
|
361
361
|
*/
|
|
362
|
-
getToken:
|
|
362
|
+
getToken: n
|
|
363
363
|
};
|
|
364
364
|
}
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
short: 250,
|
|
375
|
-
standard: 300,
|
|
376
|
-
complex: 375,
|
|
377
|
-
enteringScreen: 225,
|
|
378
|
-
leavingScreen: 195
|
|
379
|
-
};
|
|
380
|
-
function f(n = "all", t = {}) {
|
|
381
|
-
const {
|
|
382
|
-
duration: r = p.standard,
|
|
383
|
-
easing: e = d.easeInOut,
|
|
384
|
-
delay: o = 0
|
|
385
|
-
} = t;
|
|
386
|
-
return `${Array.isArray(n) ? n.join(", ") : n} ${r}ms ${e} ${o}ms`;
|
|
365
|
+
function q() {
|
|
366
|
+
try {
|
|
367
|
+
const { transitions: r } = require("@mui/material/styles");
|
|
368
|
+
return r;
|
|
369
|
+
} catch {
|
|
370
|
+
throw new Error(
|
|
371
|
+
"@mui/material باید در پروژه نصب شود. لطفاً npm install @mui/material @emotion/react @emotion/styled را اجرا کنید."
|
|
372
|
+
);
|
|
373
|
+
}
|
|
387
374
|
}
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
backgroundColor: (n) => f("background-color", n),
|
|
398
|
-
opacity: (n) => f("opacity", n),
|
|
399
|
-
transform: (n) => f("transform", n),
|
|
400
|
-
boxShadow: (n) => f("box-shadow", n),
|
|
401
|
-
// Complex transitions
|
|
402
|
-
standard: (n) => f("all", {
|
|
403
|
-
duration: p.standard,
|
|
404
|
-
easing: d.easeInOut,
|
|
405
|
-
...n
|
|
406
|
-
}),
|
|
407
|
-
enter: (n) => f("all", {
|
|
408
|
-
duration: p.enteringScreen,
|
|
409
|
-
easing: d.easeOut,
|
|
410
|
-
...n
|
|
411
|
-
}),
|
|
412
|
-
leave: (n) => f("all", {
|
|
413
|
-
duration: p.leavingScreen,
|
|
414
|
-
easing: d.easeIn,
|
|
415
|
-
...n
|
|
416
|
-
})
|
|
417
|
-
};
|
|
418
|
-
function P(n = "all", t = {}) {
|
|
419
|
-
return f(n, t);
|
|
375
|
+
function P() {
|
|
376
|
+
try {
|
|
377
|
+
const { useTheme: r } = require("@mui/material/styles");
|
|
378
|
+
return r;
|
|
379
|
+
} catch {
|
|
380
|
+
throw new Error(
|
|
381
|
+
"@mui/material باید در پروژه نصب شود. لطفاً npm install @mui/material @emotion/react @emotion/styled را اجرا کنید."
|
|
382
|
+
);
|
|
383
|
+
}
|
|
420
384
|
}
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
385
|
+
function U() {
|
|
386
|
+
try {
|
|
387
|
+
return require("@emotion/styled");
|
|
388
|
+
} catch {
|
|
389
|
+
throw new Error(
|
|
390
|
+
"@emotion/styled باید در پروژه نصب شود. لطفاً npm install @emotion/styled را اجرا کنید."
|
|
391
|
+
);
|
|
392
|
+
}
|
|
393
|
+
}
|
|
394
|
+
function H() {
|
|
395
|
+
try {
|
|
396
|
+
const { Box: r } = require("@mui/material");
|
|
397
|
+
return r;
|
|
398
|
+
} catch {
|
|
399
|
+
throw new Error(
|
|
400
|
+
"@mui/material باید در پروژه نصب شود. لطفاً npm install @mui/material را اجرا کنید."
|
|
401
|
+
);
|
|
402
|
+
}
|
|
403
|
+
}
|
|
404
|
+
function O() {
|
|
405
|
+
try {
|
|
406
|
+
const { ButtonBase: r } = require("@mui/material");
|
|
407
|
+
return r;
|
|
408
|
+
} catch {
|
|
409
|
+
throw new Error(
|
|
410
|
+
"@mui/material باید در پروژه نصب شود. لطفاً npm install @mui/material را اجرا کنید."
|
|
411
|
+
);
|
|
445
412
|
}
|
|
446
|
-
};
|
|
447
|
-
function L(n, t = {}) {
|
|
448
|
-
const {
|
|
449
|
-
duration: r = p.standard,
|
|
450
|
-
easing: e = d.easeInOut,
|
|
451
|
-
delay: o = 0,
|
|
452
|
-
iterationCount: a = 1,
|
|
453
|
-
direction: c = "normal",
|
|
454
|
-
fillMode: i = "both"
|
|
455
|
-
} = t;
|
|
456
|
-
return `${n} ${r}ms ${e} ${o}ms ${a} ${c} ${i}`;
|
|
457
413
|
}
|
|
458
|
-
const
|
|
459
|
-
const { color:
|
|
414
|
+
const R = ({ variant: r = "primary", size: n = "md", children: t, className: e = "", sx: o, ...c }) => {
|
|
415
|
+
const { color: i, spacing: s, radius: a, typography: f } = v(), p = O(), $ = {
|
|
460
416
|
primary: {
|
|
461
|
-
backgroundColor:
|
|
417
|
+
backgroundColor: i("primary.500"),
|
|
462
418
|
color: "#ffffff",
|
|
463
|
-
border: "none"
|
|
419
|
+
border: "none",
|
|
420
|
+
"&:hover": {
|
|
421
|
+
backgroundColor: i("primary.600")
|
|
422
|
+
}
|
|
464
423
|
},
|
|
465
424
|
outline: {
|
|
466
425
|
backgroundColor: "transparent",
|
|
467
|
-
border: `2px solid ${
|
|
468
|
-
color:
|
|
426
|
+
border: `2px solid ${i("primary.500")}`,
|
|
427
|
+
color: i("primary.500"),
|
|
428
|
+
"&:hover": {
|
|
429
|
+
backgroundColor: i("primary.50")
|
|
430
|
+
}
|
|
469
431
|
},
|
|
470
432
|
text: {
|
|
471
433
|
backgroundColor: "transparent",
|
|
472
434
|
border: "none",
|
|
473
|
-
color:
|
|
435
|
+
color: i("primary.500"),
|
|
436
|
+
"&:hover": {
|
|
437
|
+
backgroundColor: i("primary.50")
|
|
438
|
+
}
|
|
474
439
|
},
|
|
475
440
|
secondary: {
|
|
476
|
-
backgroundColor:
|
|
477
|
-
color:
|
|
478
|
-
border: "none"
|
|
441
|
+
backgroundColor: i("neutral.200"),
|
|
442
|
+
color: i("neutral.900"),
|
|
443
|
+
border: "none",
|
|
444
|
+
"&:hover": {
|
|
445
|
+
backgroundColor: i("neutral.300")
|
|
446
|
+
}
|
|
479
447
|
},
|
|
480
448
|
success: {
|
|
481
|
-
backgroundColor:
|
|
449
|
+
backgroundColor: i("success.500"),
|
|
482
450
|
color: "#ffffff",
|
|
483
|
-
border: "none"
|
|
451
|
+
border: "none",
|
|
452
|
+
"&:hover": {
|
|
453
|
+
backgroundColor: i("success.600")
|
|
454
|
+
}
|
|
484
455
|
},
|
|
485
456
|
error: {
|
|
486
|
-
backgroundColor:
|
|
457
|
+
backgroundColor: i("error.500"),
|
|
487
458
|
color: "#ffffff",
|
|
488
|
-
border: "none"
|
|
459
|
+
border: "none",
|
|
460
|
+
"&:hover": {
|
|
461
|
+
backgroundColor: i("error.600")
|
|
462
|
+
}
|
|
489
463
|
}
|
|
490
|
-
},
|
|
464
|
+
}, x = {
|
|
491
465
|
sm: {
|
|
492
|
-
padding: `${
|
|
493
|
-
fontSize:
|
|
466
|
+
padding: `${s(2)} ${s(4)}`,
|
|
467
|
+
fontSize: f("sizes.14") || "14px"
|
|
494
468
|
},
|
|
495
469
|
md: {
|
|
496
|
-
padding: `${
|
|
497
|
-
fontSize:
|
|
470
|
+
padding: `${s(3)} ${s(6)}`,
|
|
471
|
+
fontSize: f("sizes.16") || "16px"
|
|
498
472
|
},
|
|
499
473
|
lg: {
|
|
500
|
-
padding: `${
|
|
501
|
-
fontSize:
|
|
474
|
+
padding: `${s(4)} ${s(8)}`,
|
|
475
|
+
fontSize: f("sizes.18") || "18px"
|
|
502
476
|
}
|
|
503
477
|
};
|
|
504
|
-
return /* @__PURE__ */
|
|
505
|
-
|
|
478
|
+
return /* @__PURE__ */ y(
|
|
479
|
+
p,
|
|
506
480
|
{
|
|
507
|
-
className: `ds-button ds-button--${
|
|
508
|
-
|
|
509
|
-
borderRadius:
|
|
510
|
-
fontFamily:
|
|
481
|
+
className: `ds-button ds-button--${r} ds-button--${n} ${e}`,
|
|
482
|
+
sx: {
|
|
483
|
+
borderRadius: a("md"),
|
|
484
|
+
fontFamily: f("fontFamily"),
|
|
511
485
|
fontWeight: "500",
|
|
512
486
|
cursor: "pointer",
|
|
513
|
-
|
|
514
|
-
...
|
|
515
|
-
...
|
|
516
|
-
...o.style
|
|
517
|
-
},
|
|
518
|
-
onMouseEnter: (y) => {
|
|
519
|
-
n === "primary" && (y.currentTarget.style.opacity = "0.9");
|
|
487
|
+
...$[r],
|
|
488
|
+
...x[n],
|
|
489
|
+
...o
|
|
520
490
|
},
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
},
|
|
524
|
-
...o,
|
|
525
|
-
children: r
|
|
491
|
+
...c,
|
|
492
|
+
children: t
|
|
526
493
|
}
|
|
527
494
|
);
|
|
528
495
|
};
|
|
529
|
-
|
|
496
|
+
R.propTypes = {
|
|
530
497
|
children: l.node.isRequired,
|
|
531
498
|
variant: l.oneOf(["primary", "outline", "text", "secondary", "success", "error"]),
|
|
532
499
|
size: l.oneOf(["sm", "md", "lg"]),
|
|
533
|
-
className: l.string
|
|
500
|
+
className: l.string,
|
|
501
|
+
sx: l.object
|
|
534
502
|
};
|
|
535
|
-
function
|
|
536
|
-
|
|
537
|
-
try {
|
|
538
|
-
return {
|
|
539
|
-
create: window.MUI?.transitions?.create || m.create,
|
|
540
|
-
easing: window.MUI?.transitions?.easing || m.easing,
|
|
541
|
-
duration: window.MUI?.transitions?.duration || m.duration,
|
|
542
|
-
useMUI: !0
|
|
543
|
-
};
|
|
544
|
-
} catch {
|
|
545
|
-
}
|
|
546
|
-
return {
|
|
547
|
-
...m,
|
|
548
|
-
useMUI: !1
|
|
549
|
-
};
|
|
550
|
-
}
|
|
551
|
-
function K() {
|
|
552
|
-
if (typeof window < "u" && (window.MUI || window.mui))
|
|
553
|
-
try {
|
|
554
|
-
return window.MUI?.theme || window.mui?.theme || null;
|
|
555
|
-
} catch {
|
|
556
|
-
return null;
|
|
557
|
-
}
|
|
558
|
-
return null;
|
|
559
|
-
}
|
|
560
|
-
function V(n = {}) {
|
|
561
|
-
D(n);
|
|
503
|
+
function L(r = {}) {
|
|
504
|
+
E(r);
|
|
562
505
|
}
|
|
563
|
-
const
|
|
564
|
-
function
|
|
565
|
-
let
|
|
566
|
-
Object.entries(
|
|
567
|
-
|
|
506
|
+
const I = {};
|
|
507
|
+
function Y(r = {}) {
|
|
508
|
+
let n = "";
|
|
509
|
+
Object.entries(r.colors?.primary || {}).forEach(([t, e]) => {
|
|
510
|
+
n += `$primary-${t}: ${e};
|
|
568
511
|
`;
|
|
569
|
-
}),
|
|
570
|
-
`,
|
|
571
|
-
`,
|
|
512
|
+
}), n += `$font-family: "${r.typography?.fontFamily || "sans-serif"}";
|
|
513
|
+
`, n += `$font-size-base: ${r.typography?.baseSize || 16}px;
|
|
514
|
+
`, I.writeFileSync("custom-variables.scss", n);
|
|
572
515
|
}
|
|
573
|
-
const
|
|
516
|
+
const K = {
|
|
574
517
|
colors: {
|
|
575
|
-
primary:
|
|
576
|
-
neutral:
|
|
518
|
+
primary: b.primary,
|
|
519
|
+
neutral: b.neutral
|
|
577
520
|
},
|
|
578
521
|
spacing: { unit: 4 },
|
|
579
522
|
// 1 = 4px
|
|
580
523
|
typography: { fontFamily: "system-ui, sans-serif", baseSize: 16 }
|
|
581
524
|
};
|
|
582
525
|
export {
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
q as useMUITransitions,
|
|
602
|
-
v as useTheme,
|
|
603
|
-
R as useTokens,
|
|
604
|
-
P as useTransition
|
|
526
|
+
R as Button,
|
|
527
|
+
j as ThemeProvider,
|
|
528
|
+
d as baseTokens,
|
|
529
|
+
h as createTokens,
|
|
530
|
+
j as default,
|
|
531
|
+
b as defaultColors,
|
|
532
|
+
K as defaultConfig,
|
|
533
|
+
w as defaultTokens,
|
|
534
|
+
Y as generateSCSS,
|
|
535
|
+
E as generateTheme,
|
|
536
|
+
H as getMUIBox,
|
|
537
|
+
O as getMUIButtonBase,
|
|
538
|
+
U as getMUIStyled,
|
|
539
|
+
P as getMUITheme,
|
|
540
|
+
q as getMUITransitions,
|
|
541
|
+
L as injectCSS,
|
|
542
|
+
T as useTheme,
|
|
543
|
+
v as useTokens
|
|
605
544
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ali-mohammadi-design-system",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.7",
|
|
4
4
|
"description": "خنثی و dynamic Design System — tokens از پروژه میاد",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -28,15 +28,10 @@
|
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"prop-types": "^15.8.1",
|
|
30
30
|
"react": ">=18 <20",
|
|
31
|
-
"react-dom": ">=18 <20"
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
"@mui/
|
|
35
|
-
"optional": true
|
|
36
|
-
},
|
|
37
|
-
"@mui/system": {
|
|
38
|
-
"optional": true
|
|
39
|
-
}
|
|
31
|
+
"react-dom": ">=18 <20",
|
|
32
|
+
"@mui/material": ">=5 <8",
|
|
33
|
+
"@mui/system": ">=5 <8",
|
|
34
|
+
"@mui/styled-engine": ">=5 <8"
|
|
40
35
|
},
|
|
41
36
|
"exports": {
|
|
42
37
|
".": {
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import { useTokens } from '../../utils/useTokens.js';
|
|
4
|
-
import {
|
|
4
|
+
import { getMUIButtonBase } from '../../utils/muiHelpers.js';
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
|
-
* Button Component - کامپوننت دکمه
|
|
7
|
+
* Button Component - کامپوننت دکمه بر اساس MUI ButtonBase
|
|
8
8
|
*
|
|
9
9
|
* @example
|
|
10
10
|
* ```jsx
|
|
@@ -14,39 +14,58 @@ import { transitions } from '../../utils/animations.js';
|
|
|
14
14
|
* <Button variant="outline" size="lg">Outline Button</Button>
|
|
15
15
|
* ```
|
|
16
16
|
*/
|
|
17
|
-
const Button = ({ variant = 'primary', size = 'md', children, className = '', ...props }) => {
|
|
17
|
+
const Button = ({ variant = 'primary', size = 'md', children, className = '', sx, ...props }) => {
|
|
18
18
|
const { color, spacing, radius, typography } = useTokens();
|
|
19
|
+
const ButtonBase = getMUIButtonBase();
|
|
19
20
|
|
|
20
21
|
const variantStyles = {
|
|
21
22
|
primary: {
|
|
22
23
|
backgroundColor: color('primary.500'),
|
|
23
24
|
color: '#ffffff',
|
|
24
25
|
border: 'none',
|
|
26
|
+
'&:hover': {
|
|
27
|
+
backgroundColor: color('primary.600'),
|
|
28
|
+
},
|
|
25
29
|
},
|
|
26
30
|
outline: {
|
|
27
31
|
backgroundColor: 'transparent',
|
|
28
32
|
border: `2px solid ${color('primary.500')}`,
|
|
29
33
|
color: color('primary.500'),
|
|
34
|
+
'&:hover': {
|
|
35
|
+
backgroundColor: color('primary.50'),
|
|
36
|
+
},
|
|
30
37
|
},
|
|
31
38
|
text: {
|
|
32
39
|
backgroundColor: 'transparent',
|
|
33
40
|
border: 'none',
|
|
34
41
|
color: color('primary.500'),
|
|
42
|
+
'&:hover': {
|
|
43
|
+
backgroundColor: color('primary.50'),
|
|
44
|
+
},
|
|
35
45
|
},
|
|
36
46
|
secondary: {
|
|
37
47
|
backgroundColor: color('neutral.200'),
|
|
38
48
|
color: color('neutral.900'),
|
|
39
49
|
border: 'none',
|
|
50
|
+
'&:hover': {
|
|
51
|
+
backgroundColor: color('neutral.300'),
|
|
52
|
+
},
|
|
40
53
|
},
|
|
41
54
|
success: {
|
|
42
55
|
backgroundColor: color('success.500'),
|
|
43
56
|
color: '#ffffff',
|
|
44
57
|
border: 'none',
|
|
58
|
+
'&:hover': {
|
|
59
|
+
backgroundColor: color('success.600'),
|
|
60
|
+
},
|
|
45
61
|
},
|
|
46
62
|
error: {
|
|
47
63
|
backgroundColor: color('error.500'),
|
|
48
64
|
color: '#ffffff',
|
|
49
65
|
border: 'none',
|
|
66
|
+
'&:hover': {
|
|
67
|
+
backgroundColor: color('error.600'),
|
|
68
|
+
},
|
|
50
69
|
},
|
|
51
70
|
};
|
|
52
71
|
|
|
@@ -66,32 +85,21 @@ const Button = ({ variant = 'primary', size = 'md', children, className = '', ..
|
|
|
66
85
|
};
|
|
67
86
|
|
|
68
87
|
return (
|
|
69
|
-
<
|
|
88
|
+
<ButtonBase
|
|
70
89
|
className={`ds-button ds-button--${variant} ds-button--${size} ${className}`}
|
|
71
|
-
|
|
90
|
+
sx={{
|
|
72
91
|
borderRadius: radius('md'),
|
|
73
92
|
fontFamily: typography('fontFamily'),
|
|
74
93
|
fontWeight: '500',
|
|
75
94
|
cursor: 'pointer',
|
|
76
|
-
transition: transitions.standard({ duration: 200 }),
|
|
77
95
|
...variantStyles[variant],
|
|
78
96
|
...sizeStyles[size],
|
|
79
|
-
...
|
|
80
|
-
}}
|
|
81
|
-
onMouseEnter={(e) => {
|
|
82
|
-
if (variant === 'primary') {
|
|
83
|
-
e.currentTarget.style.opacity = '0.9';
|
|
84
|
-
}
|
|
85
|
-
}}
|
|
86
|
-
onMouseLeave={(e) => {
|
|
87
|
-
if (variant === 'primary') {
|
|
88
|
-
e.currentTarget.style.opacity = '1';
|
|
89
|
-
}
|
|
97
|
+
...sx,
|
|
90
98
|
}}
|
|
91
99
|
{...props}
|
|
92
100
|
>
|
|
93
101
|
{children}
|
|
94
|
-
</
|
|
102
|
+
</ButtonBase>
|
|
95
103
|
);
|
|
96
104
|
};
|
|
97
105
|
|
|
@@ -100,6 +108,7 @@ Button.propTypes = {
|
|
|
100
108
|
variant: PropTypes.oneOf(['primary', 'outline', 'text', 'secondary', 'success', 'error']),
|
|
101
109
|
size: PropTypes.oneOf(['sm', 'md', 'lg']),
|
|
102
110
|
className: PropTypes.string,
|
|
111
|
+
sx: PropTypes.object,
|
|
103
112
|
};
|
|
104
113
|
|
|
105
|
-
export default Button;
|
|
114
|
+
export default Button;
|
package/src/index.js
CHANGED
|
@@ -5,9 +5,8 @@ export * from './components/index.js';
|
|
|
5
5
|
export { ThemeProvider, useTheme } from './theme/ThemeProvider.jsx';
|
|
6
6
|
export { useTokens } from './utils/useTokens.js';
|
|
7
7
|
|
|
8
|
-
// Export
|
|
9
|
-
export {
|
|
10
|
-
export { useMUITransitions, useMUITheme } from './utils/useMUI.js';
|
|
8
|
+
// Export MUI Helpers
|
|
9
|
+
export { getMUITransitions, getMUITheme, getMUIStyled, getMUIBox, getMUIButtonBase } from './utils/muiHelpers.js';
|
|
11
10
|
|
|
12
11
|
// Export توکنها
|
|
13
12
|
export { defaultTokens, baseTokens, createTokens, defaultColors } from './tokens/index.js';
|
package/src/utils/index.js
CHANGED
|
@@ -1,4 +1,2 @@
|
|
|
1
1
|
export { useTokens } from './useTokens.js';
|
|
2
|
-
export {
|
|
3
|
-
export { useMUITransitions, useMUITheme, checkMUIAvailability } from './useMUI.js';
|
|
4
|
-
|
|
2
|
+
export { getMUITransitions, getMUITheme, getMUIStyled, getMUIBox, getMUIButtonBase } from './muiHelpers.js';
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Helper functions برای استفاده از MUI
|
|
3
|
+
* این فایل wrapper برای MUI transitions و utilities است
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* دریافت MUI transitions
|
|
8
|
+
* @returns {Object} MUI transitions object
|
|
9
|
+
*/
|
|
10
|
+
export function getMUITransitions() {
|
|
11
|
+
try {
|
|
12
|
+
const { transitions } = require('@mui/material/styles');
|
|
13
|
+
return transitions;
|
|
14
|
+
} catch (error) {
|
|
15
|
+
throw new Error(
|
|
16
|
+
'@mui/material باید در پروژه نصب شود. لطفاً npm install @mui/material @emotion/react @emotion/styled را اجرا کنید.'
|
|
17
|
+
);
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* دریافت MUI theme
|
|
23
|
+
* @returns {Object} MUI theme object
|
|
24
|
+
*/
|
|
25
|
+
export function getMUITheme() {
|
|
26
|
+
try {
|
|
27
|
+
const { useTheme } = require('@mui/material/styles');
|
|
28
|
+
return useTheme;
|
|
29
|
+
} catch (error) {
|
|
30
|
+
throw new Error(
|
|
31
|
+
'@mui/material باید در پروژه نصب شود. لطفاً npm install @mui/material @emotion/react @emotion/styled را اجرا کنید.'
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* دریافت MUI styled
|
|
38
|
+
* @returns {Function} MUI styled function
|
|
39
|
+
*/
|
|
40
|
+
export function getMUIStyled() {
|
|
41
|
+
try {
|
|
42
|
+
const styled = require('@emotion/styled');
|
|
43
|
+
return styled;
|
|
44
|
+
} catch (error) {
|
|
45
|
+
throw new Error(
|
|
46
|
+
'@emotion/styled باید در پروژه نصب شود. لطفاً npm install @emotion/styled را اجرا کنید.'
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* دریافت MUI Box
|
|
53
|
+
* @returns {Component} MUI Box component
|
|
54
|
+
*/
|
|
55
|
+
export function getMUIBox() {
|
|
56
|
+
try {
|
|
57
|
+
const { Box } = require('@mui/material');
|
|
58
|
+
return Box;
|
|
59
|
+
} catch (error) {
|
|
60
|
+
throw new Error(
|
|
61
|
+
'@mui/material باید در پروژه نصب شود. لطفاً npm install @mui/material را اجرا کنید.'
|
|
62
|
+
);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/**
|
|
67
|
+
* دریافت MUI ButtonBase
|
|
68
|
+
* @returns {Component} MUI ButtonBase component
|
|
69
|
+
*/
|
|
70
|
+
export function getMUIButtonBase() {
|
|
71
|
+
try {
|
|
72
|
+
const { ButtonBase } = require('@mui/material');
|
|
73
|
+
return ButtonBase;
|
|
74
|
+
} catch (error) {
|
|
75
|
+
throw new Error(
|
|
76
|
+
'@mui/material باید در پروژه نصب شود. لطفاً npm install @mui/material را اجرا کنید.'
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
export default {
|
|
82
|
+
getMUITransitions,
|
|
83
|
+
getMUITheme,
|
|
84
|
+
getMUIStyled,
|
|
85
|
+
getMUIBox,
|
|
86
|
+
getMUIButtonBase,
|
|
87
|
+
};
|
|
88
|
+
|
package/src/utils/animations.js
DELETED
|
@@ -1,159 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Utilities برای animations و transitions
|
|
3
|
-
* اگر MUI موجود باشد از آن استفاده میکند، وگرنه از CSS animations استفاده میکند
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
// MUI به صورت optional است و در runtime بررسی میشود
|
|
7
|
-
// در build time از CSS animations استفاده میکنیم
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* Easing functions (مشابه MUI)
|
|
11
|
-
* این easing functions مشابه MUI هستند و بدون نیاز به MUI کار میکنند
|
|
12
|
-
*/
|
|
13
|
-
export const easing = {
|
|
14
|
-
// MUI-compatible easing functions
|
|
15
|
-
easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
16
|
-
easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
|
|
17
|
-
easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
|
|
18
|
-
sharp: 'cubic-bezier(0.4, 0, 0.6, 1)',
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* Duration values (مشابه MUI)
|
|
23
|
-
*/
|
|
24
|
-
export const duration = {
|
|
25
|
-
shortest: 150,
|
|
26
|
-
shorter: 200,
|
|
27
|
-
short: 250,
|
|
28
|
-
standard: 300,
|
|
29
|
-
complex: 375,
|
|
30
|
-
enteringScreen: 225,
|
|
31
|
-
leavingScreen: 195,
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
/**
|
|
35
|
-
* ایجاد transition string برای CSS
|
|
36
|
-
* @param {string|string[]} props - ویژگیهایی که باید transition شوند
|
|
37
|
-
* @param {Object} options - گزینههای transition
|
|
38
|
-
* @returns {string} CSS transition string
|
|
39
|
-
*/
|
|
40
|
-
export function createTransition(props = 'all', options = {}) {
|
|
41
|
-
const {
|
|
42
|
-
duration: durationOption = duration.standard,
|
|
43
|
-
easing: easingOption = easing.easeInOut,
|
|
44
|
-
delay = 0,
|
|
45
|
-
} = options;
|
|
46
|
-
|
|
47
|
-
const properties = Array.isArray(props) ? props.join(', ') : props;
|
|
48
|
-
|
|
49
|
-
return `${properties} ${durationOption}ms ${easingOption} ${delay}ms`;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
/**
|
|
53
|
-
* Transition presets (مشابه MUI)
|
|
54
|
-
*/
|
|
55
|
-
export const transitions = {
|
|
56
|
-
// Standard transitions
|
|
57
|
-
create: createTransition,
|
|
58
|
-
|
|
59
|
-
// Common transitions
|
|
60
|
-
easing,
|
|
61
|
-
duration,
|
|
62
|
-
|
|
63
|
-
// Preset transitions
|
|
64
|
-
all: (options) => createTransition('all', options),
|
|
65
|
-
color: (options) => createTransition(['color', 'background-color', 'border-color'], options),
|
|
66
|
-
backgroundColor: (options) => createTransition('background-color', options),
|
|
67
|
-
opacity: (options) => createTransition('opacity', options),
|
|
68
|
-
transform: (options) => createTransition('transform', options),
|
|
69
|
-
boxShadow: (options) => createTransition('box-shadow', options),
|
|
70
|
-
|
|
71
|
-
// Complex transitions
|
|
72
|
-
standard: (options) => createTransition('all', {
|
|
73
|
-
duration: duration.standard,
|
|
74
|
-
easing: easing.easeInOut,
|
|
75
|
-
...options
|
|
76
|
-
}),
|
|
77
|
-
|
|
78
|
-
enter: (options) => createTransition('all', {
|
|
79
|
-
duration: duration.enteringScreen,
|
|
80
|
-
easing: easing.easeOut,
|
|
81
|
-
...options
|
|
82
|
-
}),
|
|
83
|
-
|
|
84
|
-
leave: (options) => createTransition('all', {
|
|
85
|
-
duration: duration.leavingScreen,
|
|
86
|
-
easing: easing.easeIn,
|
|
87
|
-
...options
|
|
88
|
-
}),
|
|
89
|
-
};
|
|
90
|
-
|
|
91
|
-
/**
|
|
92
|
-
* Hook برای استفاده از transitions در کامپوننتها
|
|
93
|
-
* @param {string|string[]} props - ویژگیهایی که باید transition شوند
|
|
94
|
-
* @param {Object} options - گزینههای transition
|
|
95
|
-
* @returns {string} CSS transition string
|
|
96
|
-
*/
|
|
97
|
-
export function useTransition(props = 'all', options = {}) {
|
|
98
|
-
return createTransition(props, options);
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
/**
|
|
102
|
-
* Animation keyframes (CSS-based)
|
|
103
|
-
*/
|
|
104
|
-
export const keyframes = {
|
|
105
|
-
fadeIn: {
|
|
106
|
-
from: { opacity: 0 },
|
|
107
|
-
to: { opacity: 1 },
|
|
108
|
-
},
|
|
109
|
-
fadeOut: {
|
|
110
|
-
from: { opacity: 1 },
|
|
111
|
-
to: { opacity: 0 },
|
|
112
|
-
},
|
|
113
|
-
slideUp: {
|
|
114
|
-
from: { transform: 'translateY(20px)', opacity: 0 },
|
|
115
|
-
to: { transform: 'translateY(0)', opacity: 1 },
|
|
116
|
-
},
|
|
117
|
-
slideDown: {
|
|
118
|
-
from: { transform: 'translateY(-20px)', opacity: 0 },
|
|
119
|
-
to: { transform: 'translateY(0)', opacity: 1 },
|
|
120
|
-
},
|
|
121
|
-
scaleIn: {
|
|
122
|
-
from: { transform: 'scale(0.8)', opacity: 0 },
|
|
123
|
-
to: { transform: 'scale(1)', opacity: 1 },
|
|
124
|
-
},
|
|
125
|
-
scaleOut: {
|
|
126
|
-
from: { transform: 'scale(1)', opacity: 1 },
|
|
127
|
-
to: { transform: 'scale(0.8)', opacity: 0 },
|
|
128
|
-
},
|
|
129
|
-
};
|
|
130
|
-
|
|
131
|
-
/**
|
|
132
|
-
* ایجاد animation string برای CSS
|
|
133
|
-
* @param {string} name - نام animation
|
|
134
|
-
* @param {Object} options - گزینههای animation
|
|
135
|
-
* @returns {string} CSS animation string
|
|
136
|
-
*/
|
|
137
|
-
export function createAnimation(name, options = {}) {
|
|
138
|
-
const {
|
|
139
|
-
duration: durationOption = duration.standard,
|
|
140
|
-
easing: easingOption = easing.easeInOut,
|
|
141
|
-
delay = 0,
|
|
142
|
-
iterationCount = 1,
|
|
143
|
-
direction = 'normal',
|
|
144
|
-
fillMode = 'both',
|
|
145
|
-
} = options;
|
|
146
|
-
|
|
147
|
-
return `${name} ${durationOption}ms ${easingOption} ${delay}ms ${iterationCount} ${direction} ${fillMode}`;
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
export default {
|
|
151
|
-
transitions,
|
|
152
|
-
easing,
|
|
153
|
-
duration,
|
|
154
|
-
keyframes,
|
|
155
|
-
createTransition,
|
|
156
|
-
createAnimation,
|
|
157
|
-
useTransition,
|
|
158
|
-
};
|
|
159
|
-
|
package/src/utils/useMUI.js
DELETED
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Hook برای استفاده اختیاری از MUI
|
|
3
|
-
* اگر MUI موجود باشد از آن استفاده میکند، وگرنه fallback میکند
|
|
4
|
-
*
|
|
5
|
-
* توجه: این hook فقط در runtime کار میکند و MUI باید در پروژه کاربر نصب شده باشد
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
import { transitions } from './animations.js';
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* Hook برای استفاده از MUI transitions (اگر موجود باشد)
|
|
12
|
-
* در runtime بررسی میکند که آیا MUI در window یا global موجود است
|
|
13
|
-
*
|
|
14
|
-
* @param {Object} options - گزینههای transition
|
|
15
|
-
* @returns {Object} Transition utilities
|
|
16
|
-
*/
|
|
17
|
-
export function useMUITransitions(options = {}) {
|
|
18
|
-
// در runtime بررسی میکنیم
|
|
19
|
-
if (typeof window !== 'undefined') {
|
|
20
|
-
// اگر MUI در window موجود باشد (مثلاً از CDN)
|
|
21
|
-
if (window.MUI || window.mui) {
|
|
22
|
-
try {
|
|
23
|
-
// استفاده از MUI transitions
|
|
24
|
-
return {
|
|
25
|
-
create: window.MUI?.transitions?.create || transitions.create,
|
|
26
|
-
easing: window.MUI?.transitions?.easing || transitions.easing,
|
|
27
|
-
duration: window.MUI?.transitions?.duration || transitions.duration,
|
|
28
|
-
useMUI: true,
|
|
29
|
-
};
|
|
30
|
-
} catch {
|
|
31
|
-
// Fallback
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
// Fallback به animations.js (همیشه کار میکند)
|
|
37
|
-
return {
|
|
38
|
-
...transitions,
|
|
39
|
-
useMUI: false,
|
|
40
|
-
};
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
* دریافت MUI theme (اگر موجود باشد)
|
|
45
|
-
* این hook فقط در runtime کار میکند
|
|
46
|
-
*/
|
|
47
|
-
export function useMUITheme() {
|
|
48
|
-
// در runtime بررسی میکنیم
|
|
49
|
-
if (typeof window !== 'undefined') {
|
|
50
|
-
// اگر MUI در window موجود باشد
|
|
51
|
-
if (window.MUI || window.mui) {
|
|
52
|
-
try {
|
|
53
|
-
// استفاده از MUI theme
|
|
54
|
-
return window.MUI?.theme || window.mui?.theme || null;
|
|
55
|
-
} catch {
|
|
56
|
-
return null;
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
return null;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
/**
|
|
65
|
-
* بررسی اینکه آیا MUI در پروژه نصب شده است (برای documentation)
|
|
66
|
-
* این فقط یک helper است و در runtime کار نمیکند
|
|
67
|
-
*/
|
|
68
|
-
export function checkMUIAvailability() {
|
|
69
|
-
return { available: false, message: 'MUI باید در پروژه کاربر نصب شود' };
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
export default {
|
|
73
|
-
useMUITransitions,
|
|
74
|
-
useMUITheme,
|
|
75
|
-
checkMUIAvailability,
|
|
76
|
-
};
|
|
77
|
-
|