ali-mohammadi-design-system 1.0.0 → 2.0.1

package/README.md

@@ -0,0 +1,287 @@
+# Design System Package
+
+پکیج دیزاین سیستم با پشتیبانی از تم‌های سفارشی و توکن‌های داینامیک
+
+## نصب
+
+```bash
+npm install ali-mohammadi-design-system
+```
+
+## استفاده پایه
+
+### 1. راه‌اندازی ThemeProvider
+
+ابتدا باید `ThemeProvider` را در ریشه اپلیکیشن خود قرار دهید:
+
+```jsx
+import React from 'react';
+import { ThemeProvider } from 'ali-mohammadi-design-system';
+
+function App() {
+  return (
+    <ThemeProvider>
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+```
+
+### 2. استفاده از کامپوننت‌ها
+
+```jsx
+import { Button } from 'ali-mohammadi-design-system';
+
+function MyComponent() {
+  return (
+    <div>
+      <Button variant="primary" size="md">کلیک کنید</Button>
+      <Button variant="outline" size="lg">دکمه Outline</Button>
+      <Button variant="text" size="sm">دکمه Text</Button>
+    </div>
+  );
+}
+```
+
+## استفاده با تم سفارشی
+
+### تعریف توکن‌های سفارشی
+
+می‌توانید توکن‌های خود را به `ThemeProvider` پاس دهید:
+
+```jsx
+import { ThemeProvider } from 'ali-mohammadi-design-system';
+
+const customTokens = {
+  colors: {
+    primary: {
+      50: '#f0f9ff',
+      100: '#e0f2fe',
+      500: '#0ea5e9',
+      600: '#0284c7',
+      700: '#0369a1',
+    },
+    neutral: {
+      0: '#ffffff',
+      50: '#f9fafb',
+      100: '#f3f4f6',
+      500: '#6b7280',
+      900: '#111827',
+    },
+  },
+  spacing: {
+    unit: 4,
+    4: 4,
+    8: 8,
+    12: 12,
+    16: 16,
+  },
+  radius: {
+    sm: 4,
+    md: 8,
+    lg: 12,
+    xl: 16,
+  },
+  typography: {
+    fontFamily: 'Vazir, system-ui, sans-serif',
+    baseSize: 16,
+    minSize: 14,
+  },
+};
+
+function App() {
+  return (
+    <ThemeProvider tokens={customTokens}>
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+```
+
+### استفاده از Hook‌ها
+
+```jsx
+import { useTheme, useTokens } from 'ali-mohammadi-design-system';
+
+function MyComponent() {
+  const { tokens, getToken } = useTheme();
+  const { color, spacing, radius, typography } = useTokens();
+
+  return (
+    <div
+      style={{
+        backgroundColor: color('primary.500'),
+        padding: spacing(4),
+        borderRadius: radius('md'),
+        fontFamily: typography('fontFamily'),
+      }}
+    >
+      محتوای من
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### ThemeProvider
+
+کامپوننت Provider برای مدیریت تم در اپلیکیشن
+
+**Props:**
+- `tokens` (Object, optional): توکن‌های سفارشی که با توکن‌های پیش‌فرض merge می‌شوند
+- `children` (ReactNode, required): محتوای اپلیکیشن
+
+### useTheme
+
+Hook برای دسترسی به تم و توکن‌ها
+
+**Returns:**
+- `tokens`: آبجکت کامل توکن‌ها
+- `getToken(path)`: تابع برای دریافت توکن با مسیر (مثل `'colors.primary.500'`)
+
+### useTokens
+
+Hook برای دسترسی راحت‌تر به توکن‌ها
+
+**Returns:**
+- `color(path)`: دریافت رنگ (مثل `color('primary.500')`)
+- `spacing(key)`: دریافت spacing (مثل `spacing(4)` یا `spacing('sm')`)
+- `radius(key)`: دریافت radius (مثل `radius('md')`)
+- `typography(property)`: دریافت typography (مثل `typography('fontFamily')`)
+- `shadow(key)`: دریافت shadow (مثل `shadow('md')`)
+- `tokens`: دسترسی مستقیم به توکن‌ها
+- `getToken(path)`: دریافت توکن با مسیر دلخواه
+
+### Button
+
+کامپوننت دکمه
+
+**Props:**
+- `variant` ('primary' | 'outline' | 'text' | 'secondary' | 'success' | 'error'): نوع دکمه
+- `size` ('sm' | 'md' | 'lg'): اندازه دکمه
+- `children` (ReactNode, required): محتوای دکمه
+- `className` (string, optional): کلاس‌های اضافی
+- سایر props استاندارد button
+
+## ساختار توکن‌ها
+
+### Colors
+
+```javascript
+{
+  colors: {
+    primary: { 50, 100, 200, ..., 900 },
+    neutral: { 0, 50, 100, ..., 900 },
+    success: { 50, 100, ..., 900 },
+    error: { 50, 100, ..., 900 },
+    warning: { 50, 100, ..., 900 },
+    info: { 50, 100, ..., 900 },
+  }
+}
+```
+
+### Spacing
+
+```javascript
+{
+  spacing: {
+    unit: 4,  // واحد پایه (px)
+    4: 4,
+    8: 8,
+    12: 12,
+    // ...
+  }
+}
+```
+
+### Radius
+
+```javascript
+{
+  radius: {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 20,
+    full: 1000,
+  }
+}
+```
+
+### Typography
+
+```javascript
+{
+  typography: {
+    fontFamily: 'system-ui, sans-serif',
+    baseSize: 16,
+    minSize: 14,
+    scaleRatio: 1.25,
+    sizes: { 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 64 },
+    lineHeights: { 10, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 74 },
+    weights: { regular: '400', semibold: '600', bold: '700' },
+  }
+}
+```
+
+## مثال کامل
+
+```jsx
+import React from 'react';
+import { ThemeProvider, Button, useTokens } from 'ali-mohammadi-design-system';
+
+const customTokens = {
+  colors: {
+    primary: {
+      500: '#6366f1',
+      600: '#4f46e5',
+    },
+  },
+};
+
+function MyComponent() {
+  const { color, spacing } = useTokens();
+
+  return (
+    <div style={{ padding: spacing(4) }}>
+      <Button variant="primary">دکمه اصلی</Button>
+      <div style={{ color: color('primary.500'), marginTop: spacing(2) }}>
+        متن با رنگ سفارشی
+      </div>
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <ThemeProvider tokens={customTokens}>
+      <MyComponent />
+    </ThemeProvider>
+  );
+}
+
+export default App;
+```
+
+## نکات مهم
+
+1. **توکن‌های پیش‌فرض**: اگر توکن سفارشی تعریف نکنید، از توکن‌های پیش‌فرض استفاده می‌شود
+2. **Merge عمیق**: توکن‌های شما با توکن‌های پیش‌فرض به صورت عمیق merge می‌شوند
+3. **CSS Variables**: تمام توکن‌ها به صورت CSS variables در DOM تزریق می‌شوند
+4. **Fallback**: اگر توکنی پیدا نشد، از CSS variable یا مقدار پیش‌فرض استفاده می‌شود
+
+## توسعه
+
+برای توسعه این پکیج:
+
+```bash
+npm install
+npm run build
+```
+
+## License
+
+MIT
+

package/dist/index.cjs

@@ -0,0 +1,25 @@
+"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 V;function be(){if(V)return S;V=1;var o=Symbol.for("react.transitional.element"),n=Symbol.for("react.fragment");function t(r,a,i){var u=null;if(i!==void 0&&(u=""+i),a.key!==void 0&&(u=""+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:u,ref:a!==void 0?a:null,props:i}}return S.Fragment=n,S.jsx=t,S.jsxs=t,S}var T={};var H;function Fe(){return H||(H=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 x:return"Fragment";case oe:return"Profiler";case ne:return"StrictMode";case ce:return"Suspense";case ue: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 le:return s=e.displayName||null,s!==null?s:o(e.type)||"Memo";case C: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===x)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===C)return"<...>";try{var s=o(e);return s?"<"+s+">":"<...>"}catch{return"<...>"}}function a(){var e=_.A;return e===null?null:e.getOwner()}function i(){return Error("react-stack-top-frame")}function u(e){if(Y.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(){W||(W=!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 l(){var e=o(this.type);return M[e]||(M[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,$){var p=f.ref;return e={$$typeof:I,type:e,key:s,props:f,_owner:d},(p!==void 0?p:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:l}):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:$}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function b(e,s,f,d,A,$){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(Y.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}",U[p+d]||(E=0<E.length?"{"+E.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,d,p,E,p),U[p+d]=!0)}if(p=null,f!==void 0&&(t(f),p=""+f),u(s)&&(t(s.key),p=""+s.key),"key"in s){f={};for(var j in s)j!=="key"&&(f[j]=s[j])}else f=s;return p&&c(f,typeof e=="function"?e.displayName||e.name||"Unknown":e),m(e,p,f,a(),A,$)}function F(e){N(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===C&&(e._payload.status==="fulfilled"?N(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function N(e){return typeof e=="object"&&e!==null&&e.$$typeof===I}var R=h,I=Symbol.for("react.transitional.element"),te=Symbol.for("react.portal"),x=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"),ue=Symbol.for("react.suspense_list"),le=Symbol.for("react.memo"),C=Symbol.for("react.lazy"),fe=Symbol.for("react.activity"),de=Symbol.for("react.client.reference"),_=R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Y=Object.prototype.hasOwnProperty,pe=Array.isArray,k=console.createTask?console.createTask:function(){return null};R={react_stack_bottom_frame:function(e){return e()}};var W,M={},L=R.react_stack_bottom_frame.bind(R,i)(),q=k(r(i)),U={};T.Fragment=x,T.jsx=function(e,s,f){var d=1e4>_.recentlyCreatedOwnerStacks++;return b(e,s,f,!1,d?Error("react-stack-top-frame"):L,d?k(r(e)):q)},T.jsxs=function(e,s,f){var d=1e4>_.recentlyCreatedOwnerStacks++;return b(e,s,f,!0,d?Error("react-stack-top-frame"):L,d?k(r(e)):q)}})()),T}var J;function Ee(){return J||(J=1,process.env.NODE_ENV==="production"?v.exports=be():v.exports=Fe()),v.exports}var G=Ee();const D={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 X={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 w(o,n){const t={...o};return O(o)&&O(n)&&Object.keys(n).forEach(r=>{O(n[r])?r in o?t[r]=w(o[r],n[r]):Object.assign(t,{[r]:n[r]}):Object.assign(t,{[r]:n[r]})}),t}function O(o){return o&&typeof o=="object"&&!Array.isArray(o)}const he=ye(),Z=w(X,he);function z(o={}){return w(Z,o)}function P(o={}){const n=z(o),t=document.createElement("style");t.id="ds-theme";let r=`:root {
+`;Object.entries(n.colors).forEach(([c,l])=>{typeof l=="object"&&Object.entries(l).forEach(([m,b])=>{r+=`  --${c}-${m}: ${b};
+`})});const a=n.typography;if(r+=`  --font-family: ${a.fontFamily};
+`,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);
+`}else r+=`  --font-size-base: ${a.baseSize||16}px;
+`;r+=`  --type-scale: ${a.scaleRatio||1.25};
+`,a.sizes&&Object.entries(a.sizes).forEach(([c,l])=>{r+=`  --font-size-${c}: ${l}px;
+`}),a.lineHeights&&Object.entries(a.lineHeights).forEach(([c,l])=>{r+=`  --line-height-${c}: ${l}px;
+`}),a.weights&&Object.entries(a.weights).forEach(([c,l])=>{r+=`  --font-weight-${c}: ${l};
+`});const i=n.spacing.unit||4;r+=`  --space-unit: ${i}px;
+`,Object.entries(n.spacing).forEach(([c,l])=>{c!=="unit"&&(r+=`  --space-${c}: ${l}px;
+`)}),Object.entries(n.radius).forEach(([c,l])=>{r+=`  --radius-${c}: ${l}px;
+`}),n.shadows&&Object.entries(n.shadows).forEach(([c,l])=>{r+=`  --shadow-${c}: ${l};
+`}),r+=`}
+`,r+=`html { font-size: var(--font-size-base); }
+`,r+=`body { font-family: var(--font-family); }
+`,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};
+`}),n+=`$font-family: "${o.typography?.fontFamily||"sans-serif"}";
+`,n+=`$font-size-base: ${o.typography?.baseSize||16}px;
+`,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;