ali-mohammadi-design-system 2.0.1 → 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +64 -0
- package/dist/index.cjs +20 -25
- package/dist/index.js +173 -437
- package/package.json +1 -1
- package/src/theme/ThemeProvider.jsx +3 -5
package/README.md
CHANGED
|
@@ -4,10 +4,74 @@
|
|
|
4
4
|
|
|
5
5
|
## نصب
|
|
6
6
|
|
|
7
|
+
### نصب از npm (برای production)
|
|
8
|
+
|
|
7
9
|
```bash
|
|
8
10
|
npm install ali-mohammadi-design-system
|
|
9
11
|
```
|
|
10
12
|
|
|
13
|
+
### استفاده Local در پروژه Vite (برای development)
|
|
14
|
+
|
|
15
|
+
اگر میخواهید از پکیج به صورت local استفاده کنید:
|
|
16
|
+
|
|
17
|
+
#### روش 1: استفاده از npm link
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
# در پکیج design-system
|
|
21
|
+
cd design-system
|
|
22
|
+
npm run build
|
|
23
|
+
npm link
|
|
24
|
+
|
|
25
|
+
# در پروژه React شما
|
|
26
|
+
cd your-react-project
|
|
27
|
+
npm link ali-mohammadi-design-system
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
#### روش 2: استفاده از file: در package.json
|
|
31
|
+
|
|
32
|
+
در `package.json` پروژه React:
|
|
33
|
+
|
|
34
|
+
```json
|
|
35
|
+
{
|
|
36
|
+
"dependencies": {
|
|
37
|
+
"ali-mohammadi-design-system": "file:../design-system"
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
**⚠️ مهم: تنظیم vite.config.js**
|
|
43
|
+
|
|
44
|
+
برای رفع خطای "Outdated Optimize Dep" در Vite، فایل `vite.config.js` پروژه خود را به این صورت تنظیم کنید:
|
|
45
|
+
|
|
46
|
+
```js
|
|
47
|
+
import { defineConfig } from 'vite';
|
|
48
|
+
import react from '@vitejs/plugin-react';
|
|
49
|
+
|
|
50
|
+
export default defineConfig({
|
|
51
|
+
plugins: [react()],
|
|
52
|
+
optimizeDeps: {
|
|
53
|
+
include: ['ali-mohammadi-design-system'],
|
|
54
|
+
},
|
|
55
|
+
resolve: {
|
|
56
|
+
dedupe: ['react', 'react-dom'],
|
|
57
|
+
},
|
|
58
|
+
});
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
اگر هنوز مشکل دارید:
|
|
62
|
+
|
|
63
|
+
```bash
|
|
64
|
+
# پاک کردن cache
|
|
65
|
+
rm -rf node_modules/.vite
|
|
66
|
+
# یا در Windows:
|
|
67
|
+
Remove-Item -Recurse -Force node_modules\.vite
|
|
68
|
+
|
|
69
|
+
# Restart با force
|
|
70
|
+
npm run dev -- --force
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
برای راهنمای کاملتر، فایل `VITE_SETUP.md` را ببینید.
|
|
74
|
+
|
|
11
75
|
## استفاده پایه
|
|
12
76
|
|
|
13
77
|
### 1. راهاندازی ThemeProvider
|
package/dist/index.cjs
CHANGED
|
@@ -1,25 +1,20 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
`})
|
|
9
|
-
|
|
10
|
-
`}
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
`}),
|
|
14
|
-
`}),
|
|
15
|
-
|
|
16
|
-
`,
|
|
17
|
-
|
|
18
|
-
`}),n
|
|
19
|
-
|
|
20
|
-
`,
|
|
21
|
-
`,r+=`body { font-family: var(--font-family); }
|
|
22
|
-
`,t.textContent=r;const u=document.getElementById("ds-theme");u&&u.remove(),document.head.appendChild(t)}const Q=h.createContext(null);function B({tokens:o={},children:n}){const t=h.useMemo(()=>z(o),[o]);h.useEffect(()=>{P(t)},[t]);const r=h.useMemo(()=>({tokens:t,getToken:a=>{const i=a.split(".");let u=t;for(const c of i)if(u&&typeof u=="object"&&c in u)u=u[c];else return;return u}}),[t]);return G.jsx(Q.Provider,{value:r,children:n})}B.propTypes={tokens:y.object,children:y.node.isRequired};function K(){const o=h.useContext(Q);if(!o){console.warn("useTheme must be used within ThemeProvider. Using default tokens.");const{createTokens:n}=require("../tokens/index.js"),t=n();return{tokens:t,getToken:r=>{const a=r.split(".");let i=t;for(const u of a)if(i&&typeof i=="object"&&u in i)i=i[u];else return;return i}}}return o}function ee(){const{tokens:o,getToken:n}=K();return{color:t=>{const r=n(`colors.${t}`);if(r)return r;const[a,i]=t.split(".");return`var(--${a}-${i}, #000)`},spacing:t=>{const r=n(`spacing.${t}`);return r?`${r}px`:`var(--space-${t}, ${t*(o.spacing?.unit||4)}px)`},radius:t=>{const r=n(`radius.${t}`);return r?`${r}px`:`var(--radius-${t}, 8px)`},typography:t=>{const r=n(`typography.${t}`);return r?typeof r=="number"?`${r}px`:r:t==="fontFamily"?"var(--font-family, system-ui, sans-serif)":`var(--font-${t}, 16px)`},shadow:t=>{const r=n(`shadows.${t}`);return r||`var(--shadow-${t}, none)`},tokens:o,getToken:n}}const re=({variant:o="primary",size:n="md",children:t,className:r="",...a})=>{const{color:i,spacing:u,radius:c,typography:l}=ee(),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"}},b={sm:{padding:`${u(2)} ${u(4)}`,fontSize:l("sizes.14")||"14px"},md:{padding:`${u(3)} ${u(6)}`,fontSize:l("sizes.16")||"16px"},lg:{padding:`${u(4)} ${u(8)}`,fontSize:l("sizes.18")||"18px"}};return G.jsx("button",{className:`ds-button ds-button--${o} ds-button--${n} ${r}`,style:{borderRadius:c("md"),fontFamily:l("fontFamily"),fontWeight:"500",cursor:"pointer",transition:"all 0.2s ease",...m[o],...b[n],...a.style},onMouseEnter:F=>{o==="primary"&&(F.currentTarget.style.opacity="0.9")},onMouseLeave:F=>{o==="primary"&&(F.currentTarget.style.opacity="1")},...a,children:t})};re.propTypes={children:y.node.isRequired,variant:y.oneOf(["primary","outline","text","secondary","success","error"]),size:y.oneOf(["sm","md","lg"]),className:y.string};function Se(o={}){P(o)}const Te={};function Re(o={}){let n="";Object.entries(o.colors?.primary||{}).forEach(([t,r])=>{n+=`$primary-${t}: ${r};
|
|
23
|
-
`}),n+=`$font-family: "${o.typography?.fontFamily||"sans-serif"}";
|
|
24
|
-
`,n+=`$font-size-base: ${o.typography?.baseSize||16}px;
|
|
25
|
-
`,Te.writeFileSync("custom-variables.scss",n)}const Ae={colors:{primary:D.primary,neutral:D.neutral},spacing:{unit:4},typography:{fontFamily:"system-ui, sans-serif",baseSize:16}};exports.Button=re;exports.ThemeProvider=B;exports.baseTokens=Z;exports.createTokens=z;exports.default=B;exports.defaultColors=D;exports.defaultConfig=Ae;exports.defaultTokens=X;exports.generateSCSS=Re;exports.generateTheme=P;exports.injectCSS=Se;exports.useTheme=K;exports.useTokens=ee;
|
|
1
|
+
"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 {
|
|
2
|
+
`;Object.entries(n.colors).forEach(([o,i])=>{typeof i=="object"&&Object.entries(i).forEach(([l,d])=>{e+=` --${o}-${l}: ${d};
|
|
3
|
+
`})});const s=n.typography;if(e+=` --font-family: ${s.fontFamily};
|
|
4
|
+
`,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);
|
|
5
|
+
`}else e+=` --font-size-base: ${s.baseSize||16}px;
|
|
6
|
+
`;e+=` --type-scale: ${s.scaleRatio||1.25};
|
|
7
|
+
`,s.sizes&&Object.entries(s.sizes).forEach(([o,i])=>{e+=` --font-size-${o}: ${i}px;
|
|
8
|
+
`}),s.lineHeights&&Object.entries(s.lineHeights).forEach(([o,i])=>{e+=` --line-height-${o}: ${i}px;
|
|
9
|
+
`}),s.weights&&Object.entries(s.weights).forEach(([o,i])=>{e+=` --font-weight-${o}: ${i};
|
|
10
|
+
`});const a=n.spacing.unit||4;e+=` --space-unit: ${a}px;
|
|
11
|
+
`,Object.entries(n.spacing).forEach(([o,i])=>{o!=="unit"&&(e+=` --space-${o}: ${i}px;
|
|
12
|
+
`)}),Object.entries(n.radius).forEach(([o,i])=>{e+=` --radius-${o}: ${i}px;
|
|
13
|
+
`}),n.shadows&&Object.entries(n.shadows).forEach(([o,i])=>{e+=` --shadow-${o}: ${i};
|
|
14
|
+
`}),e+=`}
|
|
15
|
+
`,e+=`html { font-size: var(--font-size-base); }
|
|
16
|
+
`,e+=`body { font-family: var(--font-family); }
|
|
17
|
+
`,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};
|
|
18
|
+
`}),n+=`$font-family: "${r.typography?.fontFamily||"sans-serif"}";
|
|
19
|
+
`,n+=`$font-size-base: ${r.typography?.baseSize||16}px;
|
|
20
|
+
`,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;
|
package/dist/index.js
CHANGED
|
@@ -1,266 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
function pe() {
|
|
6
|
-
if (M) return h;
|
|
7
|
-
M = 1;
|
|
8
|
-
var o = /* @__PURE__ */ Symbol.for("react.transitional.element"), n = /* @__PURE__ */ Symbol.for("react.fragment");
|
|
9
|
-
function t(r, a, i) {
|
|
10
|
-
var l = null;
|
|
11
|
-
if (i !== void 0 && (l = "" + i), a.key !== void 0 && (l = "" + a.key), "key" in a) {
|
|
12
|
-
i = {};
|
|
13
|
-
for (var c in a)
|
|
14
|
-
c !== "key" && (i[c] = a[c]);
|
|
15
|
-
} else i = a;
|
|
16
|
-
return a = i.ref, {
|
|
17
|
-
$$typeof: o,
|
|
18
|
-
type: r,
|
|
19
|
-
key: l,
|
|
20
|
-
ref: a !== void 0 ? a : null,
|
|
21
|
-
props: i
|
|
22
|
-
};
|
|
23
|
-
}
|
|
24
|
-
return h.Fragment = n, h.jsx = t, h.jsxs = t, h;
|
|
25
|
-
}
|
|
26
|
-
var S = {};
|
|
27
|
-
var L;
|
|
28
|
-
function me() {
|
|
29
|
-
return L || (L = 1, process.env.NODE_ENV !== "production" && (function() {
|
|
30
|
-
function o(e) {
|
|
31
|
-
if (e == null) return null;
|
|
32
|
-
if (typeof e == "function")
|
|
33
|
-
return e.$$typeof === se ? null : e.displayName || e.name || null;
|
|
34
|
-
if (typeof e == "string") return e;
|
|
35
|
-
switch (e) {
|
|
36
|
-
case x:
|
|
37
|
-
return "Fragment";
|
|
38
|
-
case Q:
|
|
39
|
-
return "Profiler";
|
|
40
|
-
case Z:
|
|
41
|
-
return "StrictMode";
|
|
42
|
-
case te:
|
|
43
|
-
return "Suspense";
|
|
44
|
-
case ne:
|
|
45
|
-
return "SuspenseList";
|
|
46
|
-
case ae:
|
|
47
|
-
return "Activity";
|
|
48
|
-
}
|
|
49
|
-
if (typeof e == "object")
|
|
50
|
-
switch (typeof e.tag == "number" && console.error(
|
|
51
|
-
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
|
|
52
|
-
), e.$$typeof) {
|
|
53
|
-
case X:
|
|
54
|
-
return "Portal";
|
|
55
|
-
case ee:
|
|
56
|
-
return e.displayName || "Context";
|
|
57
|
-
case K:
|
|
58
|
-
return (e._context.displayName || "Context") + ".Consumer";
|
|
59
|
-
case re:
|
|
60
|
-
var s = e.render;
|
|
61
|
-
return e = e.displayName, e || (e = s.displayName || s.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
|
|
62
|
-
case oe:
|
|
63
|
-
return s = e.displayName || null, s !== null ? s : o(e.type) || "Memo";
|
|
64
|
-
case v:
|
|
65
|
-
s = e._payload, e = e._init;
|
|
66
|
-
try {
|
|
67
|
-
return o(e(s));
|
|
68
|
-
} catch {
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
return null;
|
|
72
|
-
}
|
|
73
|
-
function n(e) {
|
|
74
|
-
return "" + e;
|
|
75
|
-
}
|
|
76
|
-
function t(e) {
|
|
77
|
-
try {
|
|
78
|
-
n(e);
|
|
79
|
-
var s = !1;
|
|
80
|
-
} catch {
|
|
81
|
-
s = !0;
|
|
82
|
-
}
|
|
83
|
-
if (s) {
|
|
84
|
-
s = console;
|
|
85
|
-
var f = s.error, d = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
|
|
86
|
-
return f.call(
|
|
87
|
-
s,
|
|
88
|
-
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
|
|
89
|
-
d
|
|
90
|
-
), n(e);
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
function r(e) {
|
|
94
|
-
if (e === x) return "<>";
|
|
95
|
-
if (typeof e == "object" && e !== null && e.$$typeof === v)
|
|
96
|
-
return "<...>";
|
|
97
|
-
try {
|
|
98
|
-
var s = o(e);
|
|
99
|
-
return s ? "<" + s + ">" : "<...>";
|
|
100
|
-
} catch {
|
|
101
|
-
return "<...>";
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
function a() {
|
|
105
|
-
var e = C.A;
|
|
106
|
-
return e === null ? null : e.getOwner();
|
|
107
|
-
}
|
|
108
|
-
function i() {
|
|
109
|
-
return Error("react-stack-top-frame");
|
|
110
|
-
}
|
|
111
|
-
function l(e) {
|
|
112
|
-
if (z.call(e, "key")) {
|
|
113
|
-
var s = Object.getOwnPropertyDescriptor(e, "key").get;
|
|
114
|
-
if (s && s.isReactWarning) return !1;
|
|
115
|
-
}
|
|
116
|
-
return e.key !== void 0;
|
|
117
|
-
}
|
|
118
|
-
function c(e, s) {
|
|
119
|
-
function f() {
|
|
120
|
-
P || (P = !0, console.error(
|
|
121
|
-
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
|
|
122
|
-
s
|
|
123
|
-
));
|
|
124
|
-
}
|
|
125
|
-
f.isReactWarning = !0, Object.defineProperty(e, "key", {
|
|
126
|
-
get: f,
|
|
127
|
-
configurable: !0
|
|
128
|
-
});
|
|
129
|
-
}
|
|
130
|
-
function u() {
|
|
131
|
-
var e = o(this.type);
|
|
132
|
-
return B[e] || (B[e] = !0, console.error(
|
|
133
|
-
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
|
|
134
|
-
)), e = this.props.ref, e !== void 0 ? e : null;
|
|
135
|
-
}
|
|
136
|
-
function m(e, s, f, d, T, k) {
|
|
137
|
-
var p = f.ref;
|
|
138
|
-
return e = {
|
|
139
|
-
$$typeof: w,
|
|
140
|
-
type: e,
|
|
141
|
-
key: s,
|
|
142
|
-
props: f,
|
|
143
|
-
_owner: d
|
|
144
|
-
}, (p !== void 0 ? p : null) !== null ? Object.defineProperty(e, "ref", {
|
|
145
|
-
enumerable: !1,
|
|
146
|
-
get: u
|
|
147
|
-
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
|
|
148
|
-
configurable: !1,
|
|
149
|
-
enumerable: !1,
|
|
150
|
-
writable: !0,
|
|
151
|
-
value: 0
|
|
152
|
-
}), Object.defineProperty(e, "_debugInfo", {
|
|
153
|
-
configurable: !1,
|
|
154
|
-
enumerable: !1,
|
|
155
|
-
writable: !0,
|
|
156
|
-
value: null
|
|
157
|
-
}), Object.defineProperty(e, "_debugStack", {
|
|
158
|
-
configurable: !1,
|
|
159
|
-
enumerable: !1,
|
|
160
|
-
writable: !0,
|
|
161
|
-
value: T
|
|
162
|
-
}), Object.defineProperty(e, "_debugTask", {
|
|
163
|
-
configurable: !1,
|
|
164
|
-
enumerable: !1,
|
|
165
|
-
writable: !0,
|
|
166
|
-
value: k
|
|
167
|
-
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
|
|
168
|
-
}
|
|
169
|
-
function F(e, s, f, d, T, k) {
|
|
170
|
-
var p = s.children;
|
|
171
|
-
if (p !== void 0)
|
|
172
|
-
if (d)
|
|
173
|
-
if (ie(p)) {
|
|
174
|
-
for (d = 0; d < p.length; d++)
|
|
175
|
-
b(p[d]);
|
|
176
|
-
Object.freeze && Object.freeze(p);
|
|
177
|
-
} else
|
|
178
|
-
console.error(
|
|
179
|
-
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
|
|
180
|
-
);
|
|
181
|
-
else b(p);
|
|
182
|
-
if (z.call(s, "key")) {
|
|
183
|
-
p = o(e);
|
|
184
|
-
var E = Object.keys(s).filter(function(ce) {
|
|
185
|
-
return ce !== "key";
|
|
186
|
-
});
|
|
187
|
-
d = 0 < E.length ? "{key: someKey, " + E.join(": ..., ") + ": ...}" : "{key: someKey}", Y[p + d] || (E = 0 < E.length ? "{" + E.join(": ..., ") + ": ...}" : "{}", console.error(
|
|
188
|
-
`A props object containing a "key" prop is being spread into JSX:
|
|
189
|
-
let props = %s;
|
|
190
|
-
<%s {...props} />
|
|
191
|
-
React keys must be passed directly to JSX without using spread:
|
|
192
|
-
let props = %s;
|
|
193
|
-
<%s key={someKey} {...props} />`,
|
|
194
|
-
d,
|
|
195
|
-
p,
|
|
196
|
-
E,
|
|
197
|
-
p
|
|
198
|
-
), Y[p + d] = !0);
|
|
199
|
-
}
|
|
200
|
-
if (p = null, f !== void 0 && (t(f), p = "" + f), l(s) && (t(s.key), p = "" + s.key), "key" in s) {
|
|
201
|
-
f = {};
|
|
202
|
-
for (var $ in s)
|
|
203
|
-
$ !== "key" && (f[$] = s[$]);
|
|
204
|
-
} else f = s;
|
|
205
|
-
return p && c(
|
|
206
|
-
f,
|
|
207
|
-
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
|
|
208
|
-
), m(
|
|
209
|
-
e,
|
|
210
|
-
p,
|
|
211
|
-
f,
|
|
212
|
-
a(),
|
|
213
|
-
T,
|
|
214
|
-
k
|
|
215
|
-
);
|
|
216
|
-
}
|
|
217
|
-
function b(e) {
|
|
218
|
-
D(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === v && (e._payload.status === "fulfilled" ? D(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
|
|
219
|
-
}
|
|
220
|
-
function D(e) {
|
|
221
|
-
return typeof e == "object" && e !== null && e.$$typeof === w;
|
|
222
|
-
}
|
|
223
|
-
var R = le, w = /* @__PURE__ */ Symbol.for("react.transitional.element"), X = /* @__PURE__ */ Symbol.for("react.portal"), x = /* @__PURE__ */ Symbol.for("react.fragment"), Z = /* @__PURE__ */ Symbol.for("react.strict_mode"), Q = /* @__PURE__ */ Symbol.for("react.profiler"), K = /* @__PURE__ */ Symbol.for("react.consumer"), ee = /* @__PURE__ */ Symbol.for("react.context"), re = /* @__PURE__ */ Symbol.for("react.forward_ref"), te = /* @__PURE__ */ Symbol.for("react.suspense"), ne = /* @__PURE__ */ Symbol.for("react.suspense_list"), oe = /* @__PURE__ */ Symbol.for("react.memo"), v = /* @__PURE__ */ Symbol.for("react.lazy"), ae = /* @__PURE__ */ Symbol.for("react.activity"), se = /* @__PURE__ */ Symbol.for("react.client.reference"), C = R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, z = Object.prototype.hasOwnProperty, ie = Array.isArray, _ = console.createTask ? console.createTask : function() {
|
|
224
|
-
return null;
|
|
225
|
-
};
|
|
226
|
-
R = {
|
|
227
|
-
react_stack_bottom_frame: function(e) {
|
|
228
|
-
return e();
|
|
229
|
-
}
|
|
230
|
-
};
|
|
231
|
-
var P, B = {}, N = R.react_stack_bottom_frame.bind(
|
|
232
|
-
R,
|
|
233
|
-
i
|
|
234
|
-
)(), I = _(r(i)), Y = {};
|
|
235
|
-
S.Fragment = x, S.jsx = function(e, s, f) {
|
|
236
|
-
var d = 1e4 > C.recentlyCreatedOwnerStacks++;
|
|
237
|
-
return F(
|
|
238
|
-
e,
|
|
239
|
-
s,
|
|
240
|
-
f,
|
|
241
|
-
!1,
|
|
242
|
-
d ? Error("react-stack-top-frame") : N,
|
|
243
|
-
d ? _(r(e)) : I
|
|
244
|
-
);
|
|
245
|
-
}, S.jsxs = function(e, s, f) {
|
|
246
|
-
var d = 1e4 > C.recentlyCreatedOwnerStacks++;
|
|
247
|
-
return F(
|
|
248
|
-
e,
|
|
249
|
-
s,
|
|
250
|
-
f,
|
|
251
|
-
!0,
|
|
252
|
-
d ? Error("react-stack-top-frame") : N,
|
|
253
|
-
d ? _(r(e)) : I
|
|
254
|
-
);
|
|
255
|
-
};
|
|
256
|
-
})()), S;
|
|
257
|
-
}
|
|
258
|
-
var U;
|
|
259
|
-
function Fe() {
|
|
260
|
-
return U || (U = 1, process.env.NODE_ENV === "production" ? A.exports = pe() : A.exports = me()), A.exports;
|
|
261
|
-
}
|
|
262
|
-
var V = Fe();
|
|
263
|
-
const q = {
|
|
1
|
+
import { jsx as E } from "react/jsx-runtime";
|
|
2
|
+
import { createContext as S, useMemo as b, useEffect as x, useContext as D } from "react";
|
|
3
|
+
import p from "prop-types";
|
|
4
|
+
const y = {
|
|
264
5
|
neutral: {
|
|
265
6
|
0: "#FFFFFF",
|
|
266
7
|
50: "#FAFAFA"
|
|
@@ -269,46 +10,46 @@ const q = {
|
|
|
269
10
|
50: "#e3f2fd",
|
|
270
11
|
500: "#2196f3"
|
|
271
12
|
}
|
|
272
|
-
},
|
|
273
|
-
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 }, f = {
|
|
14
|
+
brand: A
|
|
274
15
|
};
|
|
275
|
-
function
|
|
276
|
-
const
|
|
16
|
+
function z() {
|
|
17
|
+
const r = {
|
|
277
18
|
colors: {},
|
|
278
19
|
typography: {},
|
|
279
20
|
spacing: {},
|
|
280
21
|
radius: {},
|
|
281
22
|
shadows: {}
|
|
282
23
|
};
|
|
283
|
-
if (
|
|
24
|
+
if (f.brand && Object.entries(f.brand).forEach(([n, t]) => {
|
|
284
25
|
if (typeof t == "object" && !Array.isArray(t)) {
|
|
285
|
-
const
|
|
286
|
-
|
|
287
|
-
(typeof
|
|
26
|
+
const e = n.toLowerCase();
|
|
27
|
+
r.colors[e] = {}, Object.entries(t).forEach(([o, a]) => {
|
|
28
|
+
(typeof a == "string" || typeof a == "number") && (r.colors[e][o] = a);
|
|
288
29
|
});
|
|
289
30
|
}
|
|
290
|
-
}),
|
|
291
|
-
const n =
|
|
292
|
-
|
|
31
|
+
}), f.brand?.TypeScale) {
|
|
32
|
+
const n = f.brand.TypeScale;
|
|
33
|
+
r.typography = {
|
|
293
34
|
fontFamily: n.FontFamily?.YekanBakh,
|
|
294
35
|
sizes: n.Size || {},
|
|
295
36
|
lineHeights: n.Height || {},
|
|
296
37
|
weights: n.Weight || {}
|
|
297
38
|
};
|
|
298
39
|
}
|
|
299
|
-
if (
|
|
300
|
-
const n =
|
|
301
|
-
n.Spacing && (
|
|
302
|
-
const
|
|
303
|
-
|
|
304
|
-
})), n.Radius && (
|
|
305
|
-
const
|
|
306
|
-
|
|
40
|
+
if (f.brand?.NumberScale) {
|
|
41
|
+
const n = f.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);
|
|
307
48
|
}));
|
|
308
49
|
}
|
|
309
|
-
return
|
|
50
|
+
return r;
|
|
310
51
|
}
|
|
311
|
-
const
|
|
52
|
+
const B = {
|
|
312
53
|
colors: {
|
|
313
54
|
primary: {
|
|
314
55
|
50: "#e3f2fd",
|
|
@@ -458,116 +199,111 @@ const ge = {
|
|
|
458
199
|
xl: "0px 20px 25px rgba(0, 0, 0, 0.1)"
|
|
459
200
|
}
|
|
460
201
|
};
|
|
461
|
-
function
|
|
462
|
-
const t = { ...
|
|
463
|
-
return
|
|
464
|
-
|
|
202
|
+
function m(r, n) {
|
|
203
|
+
const t = { ...r };
|
|
204
|
+
return d(r) && d(n) && Object.keys(n).forEach((e) => {
|
|
205
|
+
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] });
|
|
465
206
|
}), t;
|
|
466
207
|
}
|
|
467
|
-
function
|
|
468
|
-
return
|
|
208
|
+
function d(r) {
|
|
209
|
+
return r && typeof r == "object" && !Array.isArray(r);
|
|
469
210
|
}
|
|
470
|
-
const
|
|
471
|
-
function
|
|
472
|
-
return
|
|
211
|
+
const j = z(), g = m(B, j);
|
|
212
|
+
function h(r = {}) {
|
|
213
|
+
return m(g, r);
|
|
473
214
|
}
|
|
474
|
-
function
|
|
475
|
-
const n =
|
|
215
|
+
function $(r = {}) {
|
|
216
|
+
const n = h(r), t = document.createElement("style");
|
|
476
217
|
t.id = "ds-theme";
|
|
477
|
-
let
|
|
218
|
+
let e = `:root {
|
|
478
219
|
`;
|
|
479
|
-
Object.entries(n.colors).forEach(([
|
|
480
|
-
typeof
|
|
481
|
-
|
|
220
|
+
Object.entries(n.colors).forEach(([s, i]) => {
|
|
221
|
+
typeof i == "object" && Object.entries(i).forEach(([F, l]) => {
|
|
222
|
+
e += ` --${s}-${F}: ${l};
|
|
482
223
|
`;
|
|
483
224
|
});
|
|
484
225
|
});
|
|
485
|
-
const
|
|
486
|
-
if (
|
|
487
|
-
`,
|
|
488
|
-
const
|
|
489
|
-
|
|
226
|
+
const o = n.typography;
|
|
227
|
+
if (e += ` --font-family: ${o.fontFamily};
|
|
228
|
+
`, o.baseSize && o.minSize) {
|
|
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);
|
|
490
231
|
`;
|
|
491
232
|
} else
|
|
492
|
-
|
|
233
|
+
e += ` --font-size-base: ${o.baseSize || 16}px;
|
|
493
234
|
`;
|
|
494
|
-
|
|
495
|
-
`,
|
|
496
|
-
|
|
235
|
+
e += ` --type-scale: ${o.scaleRatio || 1.25};
|
|
236
|
+
`, o.sizes && Object.entries(o.sizes).forEach(([s, i]) => {
|
|
237
|
+
e += ` --font-size-${s}: ${i}px;
|
|
497
238
|
`;
|
|
498
|
-
}),
|
|
499
|
-
|
|
239
|
+
}), o.lineHeights && Object.entries(o.lineHeights).forEach(([s, i]) => {
|
|
240
|
+
e += ` --line-height-${s}: ${i}px;
|
|
500
241
|
`;
|
|
501
|
-
}),
|
|
502
|
-
|
|
242
|
+
}), o.weights && Object.entries(o.weights).forEach(([s, i]) => {
|
|
243
|
+
e += ` --font-weight-${s}: ${i};
|
|
503
244
|
`;
|
|
504
245
|
});
|
|
505
|
-
const
|
|
506
|
-
|
|
507
|
-
`, Object.entries(n.spacing).forEach(([
|
|
508
|
-
|
|
246
|
+
const a = n.spacing.unit || 4;
|
|
247
|
+
e += ` --space-unit: ${a}px;
|
|
248
|
+
`, Object.entries(n.spacing).forEach(([s, i]) => {
|
|
249
|
+
s !== "unit" && (e += ` --space-${s}: ${i}px;
|
|
509
250
|
`);
|
|
510
|
-
}), Object.entries(n.radius).forEach(([
|
|
511
|
-
|
|
251
|
+
}), Object.entries(n.radius).forEach(([s, i]) => {
|
|
252
|
+
e += ` --radius-${s}: ${i}px;
|
|
512
253
|
`;
|
|
513
|
-
}), n.shadows && Object.entries(n.shadows).forEach(([
|
|
514
|
-
|
|
254
|
+
}), n.shadows && Object.entries(n.shadows).forEach(([s, i]) => {
|
|
255
|
+
e += ` --shadow-${s}: ${i};
|
|
515
256
|
`;
|
|
516
|
-
}),
|
|
517
|
-
`,
|
|
518
|
-
`,
|
|
519
|
-
`, t.textContent =
|
|
520
|
-
const
|
|
521
|
-
|
|
257
|
+
}), e += `}
|
|
258
|
+
`, e += `html { font-size: var(--font-size-base); }
|
|
259
|
+
`, e += `body { font-family: var(--font-family); }
|
|
260
|
+
`, t.textContent = e;
|
|
261
|
+
const c = document.getElementById("ds-theme");
|
|
262
|
+
c && c.remove(), document.head.appendChild(t);
|
|
522
263
|
}
|
|
523
|
-
const
|
|
524
|
-
function
|
|
525
|
-
const t =
|
|
526
|
-
|
|
527
|
-
|
|
264
|
+
const C = S(null);
|
|
265
|
+
function T({ tokens: r = {}, children: n }) {
|
|
266
|
+
const t = b(() => h(r), [r]);
|
|
267
|
+
x(() => {
|
|
268
|
+
$(t);
|
|
528
269
|
}, [t]);
|
|
529
|
-
const
|
|
270
|
+
const e = b(() => ({
|
|
530
271
|
tokens: t,
|
|
531
|
-
getToken: (
|
|
532
|
-
const
|
|
533
|
-
let
|
|
534
|
-
for (const
|
|
535
|
-
if (
|
|
536
|
-
|
|
272
|
+
getToken: (o) => {
|
|
273
|
+
const a = o.split(".");
|
|
274
|
+
let c = t;
|
|
275
|
+
for (const s of a)
|
|
276
|
+
if (c && typeof c == "object" && s in c)
|
|
277
|
+
c = c[s];
|
|
537
278
|
else
|
|
538
279
|
return;
|
|
539
|
-
return
|
|
280
|
+
return c;
|
|
540
281
|
}
|
|
541
282
|
}), [t]);
|
|
542
|
-
return /* @__PURE__ */
|
|
283
|
+
return /* @__PURE__ */ E(C.Provider, { value: e, children: n });
|
|
543
284
|
}
|
|
544
|
-
|
|
545
|
-
tokens:
|
|
546
|
-
children:
|
|
285
|
+
T.propTypes = {
|
|
286
|
+
tokens: p.object,
|
|
287
|
+
children: p.node.isRequired
|
|
547
288
|
};
|
|
548
|
-
function
|
|
549
|
-
const
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
return i;
|
|
564
|
-
}
|
|
565
|
-
};
|
|
566
|
-
}
|
|
567
|
-
return o;
|
|
289
|
+
function k() {
|
|
290
|
+
const r = D(C);
|
|
291
|
+
return r || (console.warn("useTheme must be used within ThemeProvider. Using default tokens."), {
|
|
292
|
+
tokens: g,
|
|
293
|
+
getToken: (n) => {
|
|
294
|
+
const t = n.split(".");
|
|
295
|
+
let e = g;
|
|
296
|
+
for (const o of t)
|
|
297
|
+
if (e && typeof e == "object" && o in e)
|
|
298
|
+
e = e[o];
|
|
299
|
+
else
|
|
300
|
+
return;
|
|
301
|
+
return e;
|
|
302
|
+
}
|
|
303
|
+
});
|
|
568
304
|
}
|
|
569
|
-
function
|
|
570
|
-
const { tokens:
|
|
305
|
+
function w() {
|
|
306
|
+
const { tokens: r, getToken: n } = k();
|
|
571
307
|
return {
|
|
572
308
|
/**
|
|
573
309
|
* دریافت رنگ
|
|
@@ -575,10 +311,10 @@ function Te() {
|
|
|
575
311
|
* @returns {string} مقدار رنگ
|
|
576
312
|
*/
|
|
577
313
|
color: (t) => {
|
|
578
|
-
const
|
|
579
|
-
if (
|
|
580
|
-
const [
|
|
581
|
-
return `var(--${
|
|
314
|
+
const e = n(`colors.${t}`);
|
|
315
|
+
if (e) return e;
|
|
316
|
+
const [o, a] = t.split(".");
|
|
317
|
+
return `var(--${o}-${a}, #000)`;
|
|
582
318
|
},
|
|
583
319
|
/**
|
|
584
320
|
* دریافت spacing
|
|
@@ -586,8 +322,8 @@ function Te() {
|
|
|
586
322
|
* @returns {string} مقدار spacing با واحد px
|
|
587
323
|
*/
|
|
588
324
|
spacing: (t) => {
|
|
589
|
-
const
|
|
590
|
-
return
|
|
325
|
+
const e = n(`spacing.${t}`);
|
|
326
|
+
return e ? `${e}px` : `var(--space-${t}, ${t * (r.spacing?.unit || 4)}px)`;
|
|
591
327
|
},
|
|
592
328
|
/**
|
|
593
329
|
* دریافت radius
|
|
@@ -595,8 +331,8 @@ function Te() {
|
|
|
595
331
|
* @returns {string} مقدار radius با واحد px
|
|
596
332
|
*/
|
|
597
333
|
radius: (t) => {
|
|
598
|
-
const
|
|
599
|
-
return
|
|
334
|
+
const e = n(`radius.${t}`);
|
|
335
|
+
return e ? `${e}px` : `var(--radius-${t}, 8px)`;
|
|
600
336
|
},
|
|
601
337
|
/**
|
|
602
338
|
* دریافت typography
|
|
@@ -604,8 +340,8 @@ function Te() {
|
|
|
604
340
|
* @returns {string|number} مقدار typography
|
|
605
341
|
*/
|
|
606
342
|
typography: (t) => {
|
|
607
|
-
const
|
|
608
|
-
return
|
|
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)`;
|
|
609
345
|
},
|
|
610
346
|
/**
|
|
611
347
|
* دریافت shadow
|
|
@@ -613,130 +349,130 @@ function Te() {
|
|
|
613
349
|
* @returns {string} مقدار shadow
|
|
614
350
|
*/
|
|
615
351
|
shadow: (t) => {
|
|
616
|
-
const
|
|
617
|
-
return
|
|
352
|
+
const e = n(`shadows.${t}`);
|
|
353
|
+
return e || `var(--shadow-${t}, none)`;
|
|
618
354
|
},
|
|
619
355
|
/**
|
|
620
356
|
* دسترسی مستقیم به توکنها
|
|
621
357
|
*/
|
|
622
|
-
tokens:
|
|
358
|
+
tokens: r,
|
|
623
359
|
/**
|
|
624
360
|
* دریافت توکن با مسیر دلخواه
|
|
625
361
|
*/
|
|
626
362
|
getToken: n
|
|
627
363
|
};
|
|
628
364
|
}
|
|
629
|
-
const
|
|
630
|
-
const { color:
|
|
365
|
+
const O = ({ variant: r = "primary", size: n = "md", children: t, className: e = "", ...o }) => {
|
|
366
|
+
const { color: a, spacing: c, radius: s, typography: i } = w(), F = {
|
|
631
367
|
primary: {
|
|
632
|
-
backgroundColor:
|
|
368
|
+
backgroundColor: a("primary.500"),
|
|
633
369
|
color: "#ffffff",
|
|
634
370
|
border: "none"
|
|
635
371
|
},
|
|
636
372
|
outline: {
|
|
637
373
|
backgroundColor: "transparent",
|
|
638
|
-
border: `2px solid ${
|
|
639
|
-
color:
|
|
374
|
+
border: `2px solid ${a("primary.500")}`,
|
|
375
|
+
color: a("primary.500")
|
|
640
376
|
},
|
|
641
377
|
text: {
|
|
642
378
|
backgroundColor: "transparent",
|
|
643
379
|
border: "none",
|
|
644
|
-
color:
|
|
380
|
+
color: a("primary.500")
|
|
645
381
|
},
|
|
646
382
|
secondary: {
|
|
647
|
-
backgroundColor:
|
|
648
|
-
color:
|
|
383
|
+
backgroundColor: a("neutral.200"),
|
|
384
|
+
color: a("neutral.900"),
|
|
649
385
|
border: "none"
|
|
650
386
|
},
|
|
651
387
|
success: {
|
|
652
|
-
backgroundColor:
|
|
388
|
+
backgroundColor: a("success.500"),
|
|
653
389
|
color: "#ffffff",
|
|
654
390
|
border: "none"
|
|
655
391
|
},
|
|
656
392
|
error: {
|
|
657
|
-
backgroundColor:
|
|
393
|
+
backgroundColor: a("error.500"),
|
|
658
394
|
color: "#ffffff",
|
|
659
395
|
border: "none"
|
|
660
396
|
}
|
|
661
|
-
},
|
|
397
|
+
}, l = {
|
|
662
398
|
sm: {
|
|
663
|
-
padding: `${
|
|
664
|
-
fontSize:
|
|
399
|
+
padding: `${c(2)} ${c(4)}`,
|
|
400
|
+
fontSize: i("sizes.14") || "14px"
|
|
665
401
|
},
|
|
666
402
|
md: {
|
|
667
|
-
padding: `${
|
|
668
|
-
fontSize:
|
|
403
|
+
padding: `${c(3)} ${c(6)}`,
|
|
404
|
+
fontSize: i("sizes.16") || "16px"
|
|
669
405
|
},
|
|
670
406
|
lg: {
|
|
671
|
-
padding: `${
|
|
672
|
-
fontSize:
|
|
407
|
+
padding: `${c(4)} ${c(8)}`,
|
|
408
|
+
fontSize: i("sizes.18") || "18px"
|
|
673
409
|
}
|
|
674
410
|
};
|
|
675
|
-
return /* @__PURE__ */
|
|
411
|
+
return /* @__PURE__ */ E(
|
|
676
412
|
"button",
|
|
677
413
|
{
|
|
678
|
-
className: `ds-button ds-button--${
|
|
414
|
+
className: `ds-button ds-button--${r} ds-button--${n} ${e}`,
|
|
679
415
|
style: {
|
|
680
|
-
borderRadius:
|
|
681
|
-
fontFamily:
|
|
416
|
+
borderRadius: s("md"),
|
|
417
|
+
fontFamily: i("fontFamily"),
|
|
682
418
|
fontWeight: "500",
|
|
683
419
|
cursor: "pointer",
|
|
684
420
|
transition: "all 0.2s ease",
|
|
685
|
-
...
|
|
686
|
-
...
|
|
687
|
-
...
|
|
421
|
+
...F[r],
|
|
422
|
+
...l[n],
|
|
423
|
+
...o.style
|
|
688
424
|
},
|
|
689
|
-
onMouseEnter: (
|
|
690
|
-
|
|
425
|
+
onMouseEnter: (u) => {
|
|
426
|
+
r === "primary" && (u.currentTarget.style.opacity = "0.9");
|
|
691
427
|
},
|
|
692
|
-
onMouseLeave: (
|
|
693
|
-
|
|
428
|
+
onMouseLeave: (u) => {
|
|
429
|
+
r === "primary" && (u.currentTarget.style.opacity = "1");
|
|
694
430
|
},
|
|
695
|
-
...
|
|
431
|
+
...o,
|
|
696
432
|
children: t
|
|
697
433
|
}
|
|
698
434
|
);
|
|
699
435
|
};
|
|
700
|
-
|
|
701
|
-
children:
|
|
702
|
-
variant:
|
|
703
|
-
size:
|
|
704
|
-
className:
|
|
436
|
+
O.propTypes = {
|
|
437
|
+
children: p.node.isRequired,
|
|
438
|
+
variant: p.oneOf(["primary", "outline", "text", "secondary", "success", "error"]),
|
|
439
|
+
size: p.oneOf(["sm", "md", "lg"]),
|
|
440
|
+
className: p.string
|
|
705
441
|
};
|
|
706
|
-
function
|
|
707
|
-
|
|
442
|
+
function N(r = {}) {
|
|
443
|
+
$(r);
|
|
708
444
|
}
|
|
709
|
-
const
|
|
710
|
-
function
|
|
445
|
+
const R = {};
|
|
446
|
+
function P(r = {}) {
|
|
711
447
|
let n = "";
|
|
712
|
-
Object.entries(
|
|
713
|
-
n += `$primary-${t}: ${
|
|
448
|
+
Object.entries(r.colors?.primary || {}).forEach(([t, e]) => {
|
|
449
|
+
n += `$primary-${t}: ${e};
|
|
714
450
|
`;
|
|
715
|
-
}), n += `$font-family: "${
|
|
716
|
-
`, n += `$font-size-base: ${
|
|
717
|
-
`,
|
|
451
|
+
}), n += `$font-family: "${r.typography?.fontFamily || "sans-serif"}";
|
|
452
|
+
`, n += `$font-size-base: ${r.typography?.baseSize || 16}px;
|
|
453
|
+
`, R.writeFileSync("custom-variables.scss", n);
|
|
718
454
|
}
|
|
719
|
-
const
|
|
455
|
+
const H = {
|
|
720
456
|
colors: {
|
|
721
|
-
primary:
|
|
722
|
-
neutral:
|
|
457
|
+
primary: y.primary,
|
|
458
|
+
neutral: y.neutral
|
|
723
459
|
},
|
|
724
460
|
spacing: { unit: 4 },
|
|
725
461
|
// 1 = 4px
|
|
726
462
|
typography: { fontFamily: "system-ui, sans-serif", baseSize: 16 }
|
|
727
463
|
};
|
|
728
464
|
export {
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
465
|
+
O as Button,
|
|
466
|
+
T as ThemeProvider,
|
|
467
|
+
g as baseTokens,
|
|
468
|
+
h as createTokens,
|
|
469
|
+
T as default,
|
|
470
|
+
y as defaultColors,
|
|
471
|
+
H as defaultConfig,
|
|
472
|
+
B as defaultTokens,
|
|
473
|
+
P as generateSCSS,
|
|
474
|
+
$ as generateTheme,
|
|
475
|
+
N as injectCSS,
|
|
476
|
+
k as useTheme,
|
|
477
|
+
w as useTokens
|
|
742
478
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { createContext, useContext, useEffect, useMemo } from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
|
-
import { createTokens } from '../tokens/index.js';
|
|
3
|
+
import { createTokens, baseTokens } from '../tokens/index.js';
|
|
4
4
|
import { generateTheme } from './generateTheme.js';
|
|
5
5
|
|
|
6
6
|
const ThemeContext = createContext(null);
|
|
@@ -81,13 +81,11 @@ export function useTheme() {
|
|
|
81
81
|
if (!context) {
|
|
82
82
|
// اگر ThemeProvider استفاده نشده، از توکنهای پیشفرض استفاده کن
|
|
83
83
|
console.warn('useTheme must be used within ThemeProvider. Using default tokens.');
|
|
84
|
-
const { createTokens } = require('../tokens/index.js');
|
|
85
|
-
const defaultTokens = createTokens();
|
|
86
84
|
return {
|
|
87
|
-
tokens:
|
|
85
|
+
tokens: baseTokens,
|
|
88
86
|
getToken: (path) => {
|
|
89
87
|
const keys = path.split('.');
|
|
90
|
-
let value =
|
|
88
|
+
let value = baseTokens;
|
|
91
89
|
for (const key of keys) {
|
|
92
90
|
if (value && typeof value === 'object' && key in value) {
|
|
93
91
|
value = value[key];
|