ali-mohammadi-design-system 2.0.2 → 2.0.5

package/dist/index.js

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