ali-mohammadi-design-system 2.0.0 → 2.0.2
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 +11 -11
- package/dist/index.js +108 -113
- package/package.json +3 -3
- 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,25 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("react"),y=require("prop-types");var v={exports:{}},S={};var
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("react"),y=require("prop-types");var v={exports:{}},S={};var H;function be(){if(H)return S;H=1;var o=Symbol.for("react.transitional.element"),n=Symbol.for("react.fragment");function t(r,a,i){var l=null;if(i!==void 0&&(l=""+i),a.key!==void 0&&(l=""+a.key),"key"in a){i={};for(var c in a)c!=="key"&&(i[c]=a[c])}else i=a;return a=i.ref,{$$typeof:o,type:r,key:l,ref:a!==void 0?a:null,props:i}}return S.Fragment=n,S.jsx=t,S.jsxs=t,S}var T={};var J;function Fe(){return J||(J=1,process.env.NODE_ENV!=="production"&&(function(){function o(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===de?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case C:return"Fragment";case oe:return"Profiler";case ne:return"StrictMode";case ce:return"Suspense";case le:return"SuspenseList";case fe:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case te:return"Portal";case se:return e.displayName||"Context";case ae:return(e._context.displayName||"Context")+".Consumer";case ie:var s=e.render;return e=e.displayName,e||(e=s.displayName||s.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ue:return s=e.displayName||null,s!==null?s:o(e.type)||"Memo";case _:s=e._payload,e=e._init;try{return o(e(s))}catch{}}return null}function n(e){return""+e}function t(e){try{n(e);var s=!1}catch{s=!0}if(s){s=console;var f=s.error,d=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return f.call(s,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",d),n(e)}}function r(e){if(e===C)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===_)return"<...>";try{var s=o(e);return s?"<"+s+">":"<...>"}catch{return"<...>"}}function a(){var e=k.A;return e===null?null:e.getOwner()}function i(){return Error("react-stack-top-frame")}function l(e){if(W.call(e,"key")){var s=Object.getOwnPropertyDescriptor(e,"key").get;if(s&&s.isReactWarning)return!1}return e.key!==void 0}function c(e,s){function f(){M||(M=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",s))}f.isReactWarning=!0,Object.defineProperty(e,"key",{get:f,configurable:!0})}function u(){var e=o(this.type);return L[e]||(L[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function m(e,s,f,d,A,j){var p=f.ref;return e={$$typeof:Y,type:e,key:s,props:f,_owner:d},(p!==void 0?p:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:u}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:A}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:j}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function b(e,s,f,d,A,j){var p=s.children;if(p!==void 0)if(d)if(pe(p)){for(d=0;d<p.length;d++)F(p[d]);Object.freeze&&Object.freeze(p)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else F(p);if(W.call(s,"key")){p=o(e);var E=Object.keys(s).filter(function(me){return me!=="key"});d=0<E.length?"{key: someKey, "+E.join(": ..., ")+": ...}":"{key: someKey}",V[p+d]||(E=0<E.length?"{"+E.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
2
2
|
let props = %s;
|
|
3
3
|
<%s {...props} />
|
|
4
4
|
React keys must be passed directly to JSX without using spread:
|
|
5
5
|
let props = %s;
|
|
6
|
-
<%s key={someKey} {...props} />`,d,p,E,p),
|
|
7
|
-
`;Object.entries(n.colors).forEach(([c,
|
|
6
|
+
<%s key={someKey} {...props} />`,d,p,E,p),V[p+d]=!0)}if(p=null,f!==void 0&&(t(f),p=""+f),l(s)&&(t(s.key),p=""+s.key),"key"in s){f={};for(var O in s)O!=="key"&&(f[O]=s[O])}else f=s;return p&&c(f,typeof e=="function"?e.displayName||e.name||"Unknown":e),m(e,p,f,a(),A,j)}function F(e){I(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===_&&(e._payload.status==="fulfilled"?I(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function I(e){return typeof e=="object"&&e!==null&&e.$$typeof===Y}var R=h,Y=Symbol.for("react.transitional.element"),te=Symbol.for("react.portal"),C=Symbol.for("react.fragment"),ne=Symbol.for("react.strict_mode"),oe=Symbol.for("react.profiler"),ae=Symbol.for("react.consumer"),se=Symbol.for("react.context"),ie=Symbol.for("react.forward_ref"),ce=Symbol.for("react.suspense"),le=Symbol.for("react.suspense_list"),ue=Symbol.for("react.memo"),_=Symbol.for("react.lazy"),fe=Symbol.for("react.activity"),de=Symbol.for("react.client.reference"),k=R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,W=Object.prototype.hasOwnProperty,pe=Array.isArray,$=console.createTask?console.createTask:function(){return null};R={react_stack_bottom_frame:function(e){return e()}};var M,L={},q=R.react_stack_bottom_frame.bind(R,i)(),U=$(r(i)),V={};T.Fragment=C,T.jsx=function(e,s,f){var d=1e4>k.recentlyCreatedOwnerStacks++;return b(e,s,f,!1,d?Error("react-stack-top-frame"):q,d?$(r(e)):U)},T.jsxs=function(e,s,f){var d=1e4>k.recentlyCreatedOwnerStacks++;return b(e,s,f,!0,d?Error("react-stack-top-frame"):q,d?$(r(e)):U)}})()),T}var G;function Ee(){return G||(G=1,process.env.NODE_ENV==="production"?v.exports=be():v.exports=Fe()),v.exports}var X=Ee();const w={neutral:{0:"#FFFFFF",50:"#FAFAFA"},primary:{50:"#e3f2fd",500:"#2196f3"}},ge={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},g={brand:ge};function ye(){const o={colors:{},typography:{},spacing:{},radius:{},shadows:{}};if(g.brand&&Object.entries(g.brand).forEach(([n,t])=>{if(typeof t=="object"&&!Array.isArray(t)){const r=n.toLowerCase();o.colors[r]={},Object.entries(t).forEach(([a,i])=>{(typeof i=="string"||typeof i=="number")&&(o.colors[r][a]=i)})}}),g.brand?.TypeScale){const n=g.brand.TypeScale;o.typography={fontFamily:n.FontFamily?.YekanBakh,sizes:n.Size||{},lineHeights:n.Height||{},weights:n.Weight||{}}}if(g.brand?.NumberScale){const n=g.brand.NumberScale;n.Spacing&&(o.spacing={},Object.entries(n.Spacing).forEach(([t,r])=>{const a=t.replace("spacing-","");o.spacing[a]=typeof r=="number"?r:parseInt(r)})),n.Radius&&(o.radius={},Object.entries(n.Radius).forEach(([t,r])=>{const a=t.replace("Radius-","").toLowerCase();o.radius[a]=typeof r=="number"?r:parseInt(r)}))}return o}const Z={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 z(o,n){const t={...o};return D(o)&&D(n)&&Object.keys(n).forEach(r=>{D(n[r])?r in o?t[r]=z(o[r],n[r]):Object.assign(t,{[r]:n[r]}):Object.assign(t,{[r]:n[r]})}),t}function D(o){return o&&typeof o=="object"&&!Array.isArray(o)}const he=ye(),x=z(Z,he);function P(o={}){return z(x,o)}function B(o={}){const n=P(o),t=document.createElement("style");t.id="ds-theme";let r=`:root {
|
|
7
|
+
`;Object.entries(n.colors).forEach(([c,u])=>{typeof u=="object"&&Object.entries(u).forEach(([m,b])=>{r+=` --${c}-${m}: ${b};
|
|
8
8
|
`})});const a=n.typography;if(r+=` --font-family: ${a.fontFamily};
|
|
9
9
|
`,a.baseSize&&a.minSize){const c=(a.baseSize-a.minSize)/1600,m=`${-320*c+a.minSize}px + ${c*100}vw`;r+=` --font-size-base: clamp(${a.minSize}px, ${m}, ${a.baseSize}px);
|
|
10
10
|
`}else r+=` --font-size-base: ${a.baseSize||16}px;
|
|
11
11
|
`;r+=` --type-scale: ${a.scaleRatio||1.25};
|
|
12
|
-
`,a.sizes&&Object.entries(a.sizes).forEach(([c,
|
|
13
|
-
`}),a.lineHeights&&Object.entries(a.lineHeights).forEach(([c,
|
|
14
|
-
`}),a.weights&&Object.entries(a.weights).forEach(([c,
|
|
12
|
+
`,a.sizes&&Object.entries(a.sizes).forEach(([c,u])=>{r+=` --font-size-${c}: ${u}px;
|
|
13
|
+
`}),a.lineHeights&&Object.entries(a.lineHeights).forEach(([c,u])=>{r+=` --line-height-${c}: ${u}px;
|
|
14
|
+
`}),a.weights&&Object.entries(a.weights).forEach(([c,u])=>{r+=` --font-weight-${c}: ${u};
|
|
15
15
|
`});const i=n.spacing.unit||4;r+=` --space-unit: ${i}px;
|
|
16
|
-
`,Object.entries(n.spacing).forEach(([c,
|
|
17
|
-
`)}),Object.entries(n.radius).forEach(([c,
|
|
18
|
-
`}),n.shadows&&Object.entries(n.shadows).forEach(([c,
|
|
16
|
+
`,Object.entries(n.spacing).forEach(([c,u])=>{c!=="unit"&&(r+=` --space-${c}: ${u}px;
|
|
17
|
+
`)}),Object.entries(n.radius).forEach(([c,u])=>{r+=` --radius-${c}: ${u}px;
|
|
18
|
+
`}),n.shadows&&Object.entries(n.shadows).forEach(([c,u])=>{r+=` --shadow-${c}: ${u};
|
|
19
19
|
`}),r+=`}
|
|
20
20
|
`,r+=`html { font-size: var(--font-size-base); }
|
|
21
21
|
`,r+=`body { font-family: var(--font-family); }
|
|
22
|
-
`,t.textContent=r;const
|
|
22
|
+
`,t.textContent=r;const l=document.getElementById("ds-theme");l&&l.remove(),document.head.appendChild(t)}const Q=h.createContext(null);function N({tokens:o={},children:n}){const t=h.useMemo(()=>P(o),[o]);h.useEffect(()=>{B(t)},[t]);const r=h.useMemo(()=>({tokens:t,getToken:a=>{const i=a.split(".");let l=t;for(const c of i)if(l&&typeof l=="object"&&c in l)l=l[c];else return;return l}}),[t]);return X.jsx(Q.Provider,{value:r,children:n})}N.propTypes={tokens:y.object,children:y.node.isRequired};function K(){const o=h.useContext(Q);return o||(console.warn("useTheme must be used within ThemeProvider. Using default tokens."),{tokens:x,getToken:n=>{const t=n.split(".");let r=x;for(const a of t)if(r&&typeof r=="object"&&a in r)r=r[a];else return;return r}})}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:l,radius:c,typography:u}=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:`${l(2)} ${l(4)}`,fontSize:u("sizes.14")||"14px"},md:{padding:`${l(3)} ${l(6)}`,fontSize:u("sizes.16")||"16px"},lg:{padding:`${l(4)} ${l(8)}`,fontSize:u("sizes.18")||"18px"}};return X.jsx("button",{className:`ds-button ds-button--${o} ds-button--${n} ${r}`,style:{borderRadius:c("md"),fontFamily:u("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={}){B(o)}const Te={};function Re(o={}){let n="";Object.entries(o.colors?.primary||{}).forEach(([t,r])=>{n+=`$primary-${t}: ${r};
|
|
23
23
|
`}),n+=`$font-family: "${o.typography?.fontFamily||"sans-serif"}";
|
|
24
24
|
`,n+=`$font-size-base: ${o.typography?.baseSize||16}px;
|
|
25
|
-
`,Te.writeFileSync("custom-variables.scss",n)}const Ae={colors:{primary:
|
|
25
|
+
`,Te.writeFileSync("custom-variables.scss",n)}const Ae={colors:{primary:w.primary,neutral:w.neutral},spacing:{unit:4},typography:{fontFamily:"system-ui, sans-serif",baseSize:16}};exports.Button=re;exports.ThemeProvider=N;exports.baseTokens=x;exports.createTokens=P;exports.default=N;exports.defaultColors=w;exports.defaultConfig=Ae;exports.defaultTokens=Z;exports.generateSCSS=Re;exports.generateTheme=B;exports.injectCSS=Se;exports.useTheme=K;exports.useTokens=ee;
|
package/dist/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import
|
|
1
|
+
import ue, { createContext as fe, useMemo as M, useEffect as de, useContext as pe } from "react";
|
|
2
2
|
import y from "prop-types";
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
function
|
|
6
|
-
if (
|
|
7
|
-
|
|
3
|
+
var x = { exports: {} }, h = {};
|
|
4
|
+
var L;
|
|
5
|
+
function me() {
|
|
6
|
+
if (L) return h;
|
|
7
|
+
L = 1;
|
|
8
8
|
var o = /* @__PURE__ */ Symbol.for("react.transitional.element"), n = /* @__PURE__ */ Symbol.for("react.fragment");
|
|
9
9
|
function t(r, a, i) {
|
|
10
10
|
var l = null;
|
|
@@ -24,42 +24,42 @@ function pe() {
|
|
|
24
24
|
return h.Fragment = n, h.jsx = t, h.jsxs = t, h;
|
|
25
25
|
}
|
|
26
26
|
var S = {};
|
|
27
|
-
var
|
|
28
|
-
function
|
|
29
|
-
return
|
|
27
|
+
var U;
|
|
28
|
+
function Fe() {
|
|
29
|
+
return U || (U = 1, process.env.NODE_ENV !== "production" && (function() {
|
|
30
30
|
function o(e) {
|
|
31
31
|
if (e == null) return null;
|
|
32
32
|
if (typeof e == "function")
|
|
33
|
-
return e.$$typeof ===
|
|
33
|
+
return e.$$typeof === ie ? null : e.displayName || e.name || null;
|
|
34
34
|
if (typeof e == "string") return e;
|
|
35
35
|
switch (e) {
|
|
36
|
-
case
|
|
36
|
+
case T:
|
|
37
37
|
return "Fragment";
|
|
38
|
-
case
|
|
38
|
+
case K:
|
|
39
39
|
return "Profiler";
|
|
40
|
-
case
|
|
40
|
+
case Q:
|
|
41
41
|
return "StrictMode";
|
|
42
|
-
case te:
|
|
43
|
-
return "Suspense";
|
|
44
42
|
case ne:
|
|
43
|
+
return "Suspense";
|
|
44
|
+
case oe:
|
|
45
45
|
return "SuspenseList";
|
|
46
|
-
case
|
|
46
|
+
case se:
|
|
47
47
|
return "Activity";
|
|
48
48
|
}
|
|
49
49
|
if (typeof e == "object")
|
|
50
50
|
switch (typeof e.tag == "number" && console.error(
|
|
51
51
|
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
|
|
52
52
|
), e.$$typeof) {
|
|
53
|
-
case
|
|
53
|
+
case Z:
|
|
54
54
|
return "Portal";
|
|
55
|
-
case
|
|
55
|
+
case re:
|
|
56
56
|
return e.displayName || "Context";
|
|
57
|
-
case
|
|
57
|
+
case ee:
|
|
58
58
|
return (e._context.displayName || "Context") + ".Consumer";
|
|
59
|
-
case
|
|
59
|
+
case te:
|
|
60
60
|
var s = e.render;
|
|
61
61
|
return e = e.displayName, e || (e = s.displayName || s.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
|
|
62
|
-
case
|
|
62
|
+
case ae:
|
|
63
63
|
return s = e.displayName || null, s !== null ? s : o(e.type) || "Memo";
|
|
64
64
|
case v:
|
|
65
65
|
s = e._payload, e = e._init;
|
|
@@ -91,7 +91,7 @@ function me() {
|
|
|
91
91
|
}
|
|
92
92
|
}
|
|
93
93
|
function r(e) {
|
|
94
|
-
if (e ===
|
|
94
|
+
if (e === T) return "<>";
|
|
95
95
|
if (typeof e == "object" && e !== null && e.$$typeof === v)
|
|
96
96
|
return "<...>";
|
|
97
97
|
try {
|
|
@@ -109,7 +109,7 @@ function me() {
|
|
|
109
109
|
return Error("react-stack-top-frame");
|
|
110
110
|
}
|
|
111
111
|
function l(e) {
|
|
112
|
-
if (
|
|
112
|
+
if (P.call(e, "key")) {
|
|
113
113
|
var s = Object.getOwnPropertyDescriptor(e, "key").get;
|
|
114
114
|
if (s && s.isReactWarning) return !1;
|
|
115
115
|
}
|
|
@@ -117,7 +117,7 @@ function me() {
|
|
|
117
117
|
}
|
|
118
118
|
function c(e, s) {
|
|
119
119
|
function f() {
|
|
120
|
-
|
|
120
|
+
B || (B = !0, console.error(
|
|
121
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
122
|
s
|
|
123
123
|
));
|
|
@@ -129,14 +129,14 @@ function me() {
|
|
|
129
129
|
}
|
|
130
130
|
function u() {
|
|
131
131
|
var e = o(this.type);
|
|
132
|
-
return
|
|
132
|
+
return N[e] || (N[e] = !0, console.error(
|
|
133
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
134
|
)), e = this.props.ref, e !== void 0 ? e : null;
|
|
135
135
|
}
|
|
136
|
-
function m(e, s, f, d,
|
|
136
|
+
function m(e, s, f, d, A, $) {
|
|
137
137
|
var p = f.ref;
|
|
138
138
|
return e = {
|
|
139
|
-
$$typeof:
|
|
139
|
+
$$typeof: z,
|
|
140
140
|
type: e,
|
|
141
141
|
key: s,
|
|
142
142
|
props: f,
|
|
@@ -158,19 +158,19 @@ function me() {
|
|
|
158
158
|
configurable: !1,
|
|
159
159
|
enumerable: !1,
|
|
160
160
|
writable: !0,
|
|
161
|
-
value:
|
|
161
|
+
value: A
|
|
162
162
|
}), Object.defineProperty(e, "_debugTask", {
|
|
163
163
|
configurable: !1,
|
|
164
164
|
enumerable: !1,
|
|
165
165
|
writable: !0,
|
|
166
|
-
value:
|
|
166
|
+
value: $
|
|
167
167
|
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
|
|
168
168
|
}
|
|
169
|
-
function F(e, s, f, d,
|
|
169
|
+
function F(e, s, f, d, A, $) {
|
|
170
170
|
var p = s.children;
|
|
171
171
|
if (p !== void 0)
|
|
172
172
|
if (d)
|
|
173
|
-
if (
|
|
173
|
+
if (ce(p)) {
|
|
174
174
|
for (d = 0; d < p.length; d++)
|
|
175
175
|
b(p[d]);
|
|
176
176
|
Object.freeze && Object.freeze(p);
|
|
@@ -179,12 +179,12 @@ function me() {
|
|
|
179
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
180
|
);
|
|
181
181
|
else b(p);
|
|
182
|
-
if (
|
|
182
|
+
if (P.call(s, "key")) {
|
|
183
183
|
p = o(e);
|
|
184
|
-
var E = Object.keys(s).filter(function(
|
|
185
|
-
return
|
|
184
|
+
var E = Object.keys(s).filter(function(le) {
|
|
185
|
+
return le !== "key";
|
|
186
186
|
});
|
|
187
|
-
d = 0 < E.length ? "{key: someKey, " + E.join(": ..., ") + ": ...}" : "{key: someKey}",
|
|
187
|
+
d = 0 < E.length ? "{key: someKey, " + E.join(": ..., ") + ": ...}" : "{key: someKey}", W[p + d] || (E = 0 < E.length ? "{" + E.join(": ..., ") + ": ...}" : "{}", console.error(
|
|
188
188
|
`A props object containing a "key" prop is being spread into JSX:
|
|
189
189
|
let props = %s;
|
|
190
190
|
<%s {...props} />
|
|
@@ -195,12 +195,12 @@ React keys must be passed directly to JSX without using spread:
|
|
|
195
195
|
p,
|
|
196
196
|
E,
|
|
197
197
|
p
|
|
198
|
-
),
|
|
198
|
+
), W[p + d] = !0);
|
|
199
199
|
}
|
|
200
200
|
if (p = null, f !== void 0 && (t(f), p = "" + f), l(s) && (t(s.key), p = "" + s.key), "key" in s) {
|
|
201
201
|
f = {};
|
|
202
|
-
for (var
|
|
203
|
-
|
|
202
|
+
for (var k in s)
|
|
203
|
+
k !== "key" && (f[k] = s[k]);
|
|
204
204
|
} else f = s;
|
|
205
205
|
return p && c(
|
|
206
206
|
f,
|
|
@@ -210,17 +210,17 @@ React keys must be passed directly to JSX without using spread:
|
|
|
210
210
|
p,
|
|
211
211
|
f,
|
|
212
212
|
a(),
|
|
213
|
-
|
|
214
|
-
|
|
213
|
+
A,
|
|
214
|
+
$
|
|
215
215
|
);
|
|
216
216
|
}
|
|
217
217
|
function b(e) {
|
|
218
|
-
|
|
218
|
+
w(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === v && (e._payload.status === "fulfilled" ? w(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
|
|
219
219
|
}
|
|
220
|
-
function
|
|
221
|
-
return typeof e == "object" && e !== null && e.$$typeof ===
|
|
220
|
+
function w(e) {
|
|
221
|
+
return typeof e == "object" && e !== null && e.$$typeof === z;
|
|
222
222
|
}
|
|
223
|
-
var R =
|
|
223
|
+
var R = ue, z = /* @__PURE__ */ Symbol.for("react.transitional.element"), Z = /* @__PURE__ */ Symbol.for("react.portal"), T = /* @__PURE__ */ Symbol.for("react.fragment"), Q = /* @__PURE__ */ Symbol.for("react.strict_mode"), K = /* @__PURE__ */ Symbol.for("react.profiler"), ee = /* @__PURE__ */ Symbol.for("react.consumer"), re = /* @__PURE__ */ Symbol.for("react.context"), te = /* @__PURE__ */ Symbol.for("react.forward_ref"), ne = /* @__PURE__ */ Symbol.for("react.suspense"), oe = /* @__PURE__ */ Symbol.for("react.suspense_list"), ae = /* @__PURE__ */ Symbol.for("react.memo"), v = /* @__PURE__ */ Symbol.for("react.lazy"), se = /* @__PURE__ */ Symbol.for("react.activity"), ie = /* @__PURE__ */ Symbol.for("react.client.reference"), C = R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, P = Object.prototype.hasOwnProperty, ce = Array.isArray, _ = console.createTask ? console.createTask : function() {
|
|
224
224
|
return null;
|
|
225
225
|
};
|
|
226
226
|
R = {
|
|
@@ -228,19 +228,19 @@ React keys must be passed directly to JSX without using spread:
|
|
|
228
228
|
return e();
|
|
229
229
|
}
|
|
230
230
|
};
|
|
231
|
-
var
|
|
231
|
+
var B, N = {}, I = R.react_stack_bottom_frame.bind(
|
|
232
232
|
R,
|
|
233
233
|
i
|
|
234
|
-
)(),
|
|
235
|
-
S.Fragment =
|
|
234
|
+
)(), Y = _(r(i)), W = {};
|
|
235
|
+
S.Fragment = T, S.jsx = function(e, s, f) {
|
|
236
236
|
var d = 1e4 > C.recentlyCreatedOwnerStacks++;
|
|
237
237
|
return F(
|
|
238
238
|
e,
|
|
239
239
|
s,
|
|
240
240
|
f,
|
|
241
241
|
!1,
|
|
242
|
-
d ? Error("react-stack-top-frame") :
|
|
243
|
-
d ? _(r(e)) :
|
|
242
|
+
d ? Error("react-stack-top-frame") : I,
|
|
243
|
+
d ? _(r(e)) : Y
|
|
244
244
|
);
|
|
245
245
|
}, S.jsxs = function(e, s, f) {
|
|
246
246
|
var d = 1e4 > C.recentlyCreatedOwnerStacks++;
|
|
@@ -249,18 +249,18 @@ React keys must be passed directly to JSX without using spread:
|
|
|
249
249
|
s,
|
|
250
250
|
f,
|
|
251
251
|
!0,
|
|
252
|
-
d ? Error("react-stack-top-frame") :
|
|
253
|
-
d ? _(r(e)) :
|
|
252
|
+
d ? Error("react-stack-top-frame") : I,
|
|
253
|
+
d ? _(r(e)) : Y
|
|
254
254
|
);
|
|
255
255
|
};
|
|
256
256
|
})()), S;
|
|
257
257
|
}
|
|
258
|
-
var
|
|
259
|
-
function
|
|
260
|
-
return
|
|
258
|
+
var q;
|
|
259
|
+
function be() {
|
|
260
|
+
return q || (q = 1, process.env.NODE_ENV === "production" ? x.exports = me() : x.exports = Fe()), x.exports;
|
|
261
261
|
}
|
|
262
|
-
var
|
|
263
|
-
const
|
|
262
|
+
var H = be();
|
|
263
|
+
const V = {
|
|
264
264
|
neutral: {
|
|
265
265
|
0: "#FFFFFF",
|
|
266
266
|
50: "#FAFAFA"
|
|
@@ -269,10 +269,10 @@ const q = {
|
|
|
269
269
|
50: "#e3f2fd",
|
|
270
270
|
500: "#2196f3"
|
|
271
271
|
}
|
|
272
|
-
},
|
|
273
|
-
brand:
|
|
272
|
+
}, Ee = { 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 }, g = {
|
|
273
|
+
brand: Ee
|
|
274
274
|
};
|
|
275
|
-
function
|
|
275
|
+
function ge() {
|
|
276
276
|
const o = {
|
|
277
277
|
colors: {},
|
|
278
278
|
typography: {},
|
|
@@ -308,7 +308,7 @@ function Ee() {
|
|
|
308
308
|
}
|
|
309
309
|
return o;
|
|
310
310
|
}
|
|
311
|
-
const
|
|
311
|
+
const ye = {
|
|
312
312
|
colors: {
|
|
313
313
|
primary: {
|
|
314
314
|
50: "#e3f2fd",
|
|
@@ -458,21 +458,21 @@ const ge = {
|
|
|
458
458
|
xl: "0px 20px 25px rgba(0, 0, 0, 0.1)"
|
|
459
459
|
}
|
|
460
460
|
};
|
|
461
|
-
function
|
|
461
|
+
function D(o, n) {
|
|
462
462
|
const t = { ...o };
|
|
463
463
|
return j(o) && j(n) && Object.keys(n).forEach((r) => {
|
|
464
|
-
j(n[r]) ? r in o ? t[r] =
|
|
464
|
+
j(n[r]) ? r in o ? t[r] = D(o[r], n[r]) : Object.assign(t, { [r]: n[r] }) : Object.assign(t, { [r]: n[r] });
|
|
465
465
|
}), t;
|
|
466
466
|
}
|
|
467
467
|
function j(o) {
|
|
468
468
|
return o && typeof o == "object" && !Array.isArray(o);
|
|
469
469
|
}
|
|
470
|
-
const
|
|
471
|
-
function H(o = {}) {
|
|
472
|
-
return O(he, o);
|
|
473
|
-
}
|
|
470
|
+
const he = ge(), O = D(ye, he);
|
|
474
471
|
function J(o = {}) {
|
|
475
|
-
|
|
472
|
+
return D(O, o);
|
|
473
|
+
}
|
|
474
|
+
function G(o = {}) {
|
|
475
|
+
const n = J(o), t = document.createElement("style");
|
|
476
476
|
t.id = "ds-theme";
|
|
477
477
|
let r = `:root {
|
|
478
478
|
`;
|
|
@@ -520,13 +520,13 @@ function J(o = {}) {
|
|
|
520
520
|
const l = document.getElementById("ds-theme");
|
|
521
521
|
l && l.remove(), document.head.appendChild(t);
|
|
522
522
|
}
|
|
523
|
-
const
|
|
523
|
+
const X = fe(null);
|
|
524
524
|
function Se({ tokens: o = {}, children: n }) {
|
|
525
|
-
const t =
|
|
526
|
-
|
|
527
|
-
|
|
525
|
+
const t = M(() => J(o), [o]);
|
|
526
|
+
de(() => {
|
|
527
|
+
G(t);
|
|
528
528
|
}, [t]);
|
|
529
|
-
const r =
|
|
529
|
+
const r = M(() => ({
|
|
530
530
|
tokens: t,
|
|
531
531
|
getToken: (a) => {
|
|
532
532
|
const i = a.split(".");
|
|
@@ -539,34 +539,29 @@ function Se({ tokens: o = {}, children: n }) {
|
|
|
539
539
|
return l;
|
|
540
540
|
}
|
|
541
541
|
}), [t]);
|
|
542
|
-
return /* @__PURE__ */
|
|
542
|
+
return /* @__PURE__ */ H.jsx(X.Provider, { value: r, children: n });
|
|
543
543
|
}
|
|
544
544
|
Se.propTypes = {
|
|
545
545
|
tokens: y.object,
|
|
546
546
|
children: y.node.isRequired
|
|
547
547
|
};
|
|
548
548
|
function Re() {
|
|
549
|
-
const o =
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
return i;
|
|
564
|
-
}
|
|
565
|
-
};
|
|
566
|
-
}
|
|
567
|
-
return o;
|
|
549
|
+
const o = pe(X);
|
|
550
|
+
return o || (console.warn("useTheme must be used within ThemeProvider. Using default tokens."), {
|
|
551
|
+
tokens: O,
|
|
552
|
+
getToken: (n) => {
|
|
553
|
+
const t = n.split(".");
|
|
554
|
+
let r = O;
|
|
555
|
+
for (const a of t)
|
|
556
|
+
if (r && typeof r == "object" && a in r)
|
|
557
|
+
r = r[a];
|
|
558
|
+
else
|
|
559
|
+
return;
|
|
560
|
+
return r;
|
|
561
|
+
}
|
|
562
|
+
});
|
|
568
563
|
}
|
|
569
|
-
function
|
|
564
|
+
function Ae() {
|
|
570
565
|
const { tokens: o, getToken: n } = Re();
|
|
571
566
|
return {
|
|
572
567
|
/**
|
|
@@ -626,8 +621,8 @@ function Te() {
|
|
|
626
621
|
getToken: n
|
|
627
622
|
};
|
|
628
623
|
}
|
|
629
|
-
const
|
|
630
|
-
const { color: i, spacing: l, radius: c, typography: u } =
|
|
624
|
+
const xe = ({ variant: o = "primary", size: n = "md", children: t, className: r = "", ...a }) => {
|
|
625
|
+
const { color: i, spacing: l, radius: c, typography: u } = Ae(), m = {
|
|
631
626
|
primary: {
|
|
632
627
|
backgroundColor: i("primary.500"),
|
|
633
628
|
color: "#ffffff",
|
|
@@ -672,7 +667,7 @@ const Ae = ({ variant: o = "primary", size: n = "md", children: t, className: r
|
|
|
672
667
|
fontSize: u("sizes.18") || "18px"
|
|
673
668
|
}
|
|
674
669
|
};
|
|
675
|
-
return /* @__PURE__ */
|
|
670
|
+
return /* @__PURE__ */ H.jsx(
|
|
676
671
|
"button",
|
|
677
672
|
{
|
|
678
673
|
className: `ds-button ds-button--${o} ds-button--${n} ${r}`,
|
|
@@ -697,46 +692,46 @@ const Ae = ({ variant: o = "primary", size: n = "md", children: t, className: r
|
|
|
697
692
|
}
|
|
698
693
|
);
|
|
699
694
|
};
|
|
700
|
-
|
|
695
|
+
xe.propTypes = {
|
|
701
696
|
children: y.node.isRequired,
|
|
702
697
|
variant: y.oneOf(["primary", "outline", "text", "secondary", "success", "error"]),
|
|
703
698
|
size: y.oneOf(["sm", "md", "lg"]),
|
|
704
699
|
className: y.string
|
|
705
700
|
};
|
|
706
701
|
function _e(o = {}) {
|
|
707
|
-
|
|
702
|
+
G(o);
|
|
708
703
|
}
|
|
709
|
-
const
|
|
710
|
-
function
|
|
704
|
+
const Te = {};
|
|
705
|
+
function $e(o = {}) {
|
|
711
706
|
let n = "";
|
|
712
707
|
Object.entries(o.colors?.primary || {}).forEach(([t, r]) => {
|
|
713
708
|
n += `$primary-${t}: ${r};
|
|
714
709
|
`;
|
|
715
710
|
}), n += `$font-family: "${o.typography?.fontFamily || "sans-serif"}";
|
|
716
711
|
`, n += `$font-size-base: ${o.typography?.baseSize || 16}px;
|
|
717
|
-
`,
|
|
712
|
+
`, Te.writeFileSync("custom-variables.scss", n);
|
|
718
713
|
}
|
|
719
|
-
const
|
|
714
|
+
const ke = {
|
|
720
715
|
colors: {
|
|
721
|
-
primary:
|
|
722
|
-
neutral:
|
|
716
|
+
primary: V.primary,
|
|
717
|
+
neutral: V.neutral
|
|
723
718
|
},
|
|
724
719
|
spacing: { unit: 4 },
|
|
725
720
|
// 1 = 4px
|
|
726
721
|
typography: { fontFamily: "system-ui, sans-serif", baseSize: 16 }
|
|
727
722
|
};
|
|
728
723
|
export {
|
|
729
|
-
|
|
724
|
+
xe as Button,
|
|
730
725
|
Se as ThemeProvider,
|
|
731
|
-
|
|
732
|
-
|
|
726
|
+
O as baseTokens,
|
|
727
|
+
J as createTokens,
|
|
733
728
|
Se as default,
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
729
|
+
V as defaultColors,
|
|
730
|
+
ke as defaultConfig,
|
|
731
|
+
ye as defaultTokens,
|
|
732
|
+
$e as generateSCSS,
|
|
733
|
+
G as generateTheme,
|
|
739
734
|
_e as injectCSS,
|
|
740
735
|
Re as useTheme,
|
|
741
|
-
|
|
736
|
+
Ae as useTokens
|
|
742
737
|
};
|
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.2",
|
|
4
4
|
"description": "خنثی و dynamic Design System — tokens از پروژه میاد",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"prop-types": "^15.8.1",
|
|
30
|
-
"react": ">=18
|
|
31
|
-
"react-dom": ">=18
|
|
30
|
+
"react": ">=18 <20",
|
|
31
|
+
"react-dom": ">=18 <20"
|
|
32
32
|
},
|
|
33
33
|
"exports": {
|
|
34
34
|
".": {
|
|
@@ -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];
|