@vkzstudio/muza-ui 1.0.23 → 1.0.26

package/dist/components/MuzaUIProvider/theme/ThemeProvider.d.ts

@@ -0,0 +1,76 @@
+import { ShadesGenerator } from './colorShades';
+import { ThemePresets } from './themePresets';
+/**
+ * Generated color shade palette. Brand shades 100-700, opacity variants at 8/12/15%,
+ * plus a white value and gray scale (50-1000).
+ */
+export type ColorShades = {
+    /** Lightest brand shade (mapped to --brand-tertiary) */
+    '100': string;
+    /** Light brand shade (mapped to --brand-disabled) */
+    '200': string;
+    /** Medium-light brand shade (mapped to --brand-secondary) */
+    '300': string;
+    /** Medium brand shade (mapped to --brand-quaternary) */
+    '400': string;
+    /** Primary brand shade (mapped to --brand-primary) */
+    '500': string;
+    /** Dark brand shade (mapped to --brand-hover) */
+    '600': string;
+    /** Darkest brand shade (mapped to --brand-focused) */
+    '700': string;
+    /** Primary shade at 8% opacity (mapped to --brand-8) */
+    '500-8': string;
+    /** Primary shade at 12% opacity (mapped to --brand-12) */
+    '500-12': string;
+    /** Primary shade at 15% opacity (mapped to --brand-15) */
+    '500-15': string;
+    /** Brand white value (mapped to --brand-white) */
+    white: string;
+    'gray-100': string;
+    'gray-1000': string;
+    'gray-200': string;
+    'gray-300': string;
+    'gray-400': string;
+    'gray-50': string;
+    'gray-500': string;
+    'gray-600': string;
+    'gray-700': string;
+    'gray-800': string;
+    'gray-900': string;
+};
+interface ThemeContextValue {
+    shades: ColorShades;
+    shadesGenerator: ShadesGenerator;
+    setShadesFromHex: (hex: string) => void;
+    setShades: (shades: ColorShades) => void;
+    setShadesFromPreset: (preset: ThemePresets) => void;
+    setShadesGenerator: (generator: ShadesGenerator) => void;
+    setActiveColor: (color: string | undefined) => void;
+}
+/** Props for the ThemeProvider component. */
+export interface ThemeProviderProps {
+    /** React children to wrap with the theme provider */
+    children: React.ReactNode;
+    /**
+     * Brand color hex string for white-label theming.
+     * Generates a full shade palette and sets --brand-* CSS variables on :root.
+     *
+     * @example
+     * <ThemeProvider color="#14645a">
+     *   <App />
+     * </ThemeProvider>
+     */
+    color?: string;
+}
+export declare const ThemeProvider: {
+    ({ children, color }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Hook to access theme context.
+ * Provides read-only shades and setter functions for dynamic theming.
+ */
+export declare const useTheme: () => ThemeContextValue;
+export {};
+//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/components/MuzaUIProvider/theme/ThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/MuzaUIProvider/theme/ThemeProvider.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAqB,KAAK,eAAe,EAAE,MAAM,eAAe,CAAA;AAEvE,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,gBAAgB,CAAA;AAGhE;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAA;IACb,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAA;IACb,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAA;IACb,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAA;IACb,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAA;IACb,wDAAwD;IACxD,OAAO,EAAE,MAAM,CAAA;IACf,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,CAAA;IAChB,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,CAAA;IAChB,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,UAAU,iBAAiB;IAEzB,MAAM,EAAE,WAAW,CAAA;IACnB,eAAe,EAAE,eAAe,CAAA;IAGhC,gBAAgB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,SAAS,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;IACxC,mBAAmB,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAA;IACnD,kBAAkB,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAA;IACxD,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;CACpD;AAID,6CAA6C;AAC7C,MAAM,WAAW,kBAAkB;IACjC,qDAAqD;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,aAAa;0BAAyB,kBAAkB;;CAiHpE,CAAA;AAID;;;GAGG;AACH,eAAO,MAAM,QAAQ,yBAMpB,CAAA"}

package/dist/components/MuzaUIProvider/theme/ThemeProvider.js

@@ -0,0 +1,82 @@
+import { jsxs as j, jsx as w } from "react/jsx-runtime";
+import { useContext as A, createContext as G, useState as i, useLayoutEffect as S, useCallback as C, useMemo as K } from "react";
+import { ThemeSetterModal as k } from "./ThemeSetterModal.js";
+import { SHADES_GENERATORS as l } from "./colorShades.js";
+import { themeVariableMapping as T, setThemeVariables as H } from "./setThemeVariables.js";
+import { themePresets as x } from "./themePresets.js";
+import { useKeyboardShortcut as N } from "./useKeyboardShortcut.js";
+const F = G(void 0), R = ({ children: n, color: b }) => {
+  const [g, O] = i(void 0), [s, P] = i("preserve500"), d = g ?? b ?? "", [m, o] = i(() => {
+    const t = x.default, e = l.preserve500, r = e(d);
+    return r || Object.entries(T).reduce(
+      (a, [h, c]) => {
+        const v = t[h];
+        return v && (a[c] = v), a;
+      },
+      {}
+    );
+  });
+  S(() => {
+    const t = l[s], e = t(d);
+    e && o(e);
+  }, [d, s]), S(() => {
+    H({ shades: m });
+  }, [m]);
+  const y = C(
+    (t) => {
+      const e = l[s], r = e(t);
+      r && o(r);
+    },
+    [s]
+  ), E = C(
+    (t) => {
+      const e = x[t], r = Object.entries(T).reduce(
+        (u, [a, h]) => {
+          const c = e[a];
+          return c && (u[h] = c), u;
+        },
+        {}
+      );
+      o(r);
+    },
+    [o]
+  ), [f, p] = i(!1), M = K(
+    () => ({ key: "l", ctrlKey: !0, shiftKey: !0 }),
+    []
+  );
+  return N(M, () => p(!0)), /* @__PURE__ */ j(
+    F.Provider,
+    {
+      value: {
+        shades: m,
+        shadesGenerator: s,
+        setShades: o,
+        setShadesFromHex: y,
+        setShadesFromPreset: E,
+        setShadesGenerator: P,
+        setActiveColor: O
+      },
+      children: [
+        n,
+        f && /* @__PURE__ */ w(
+          k,
+          {
+            isOpen: f,
+            onClose: () => p(!1)
+          }
+        )
+      ]
+    }
+  );
+};
+R.displayName = "ThemeProvider";
+const B = () => {
+  const n = A(F);
+  if (!n)
+    throw new Error("useTheme must be used within ThemeProvider");
+  return n;
+};
+export {
+  R as ThemeProvider,
+  B as useTheme
+};

package/dist/components/MuzaUIProvider/theme/ThemeSetterModal.d.ts

@@ -0,0 +1,7 @@
+interface ThemeSetterModalProps {
+    isOpen: boolean;
+    onClose?: () => void;
+}
+export declare const ThemeSetterModal: ({ isOpen, onClose, }: ThemeSetterModalProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ThemeSetterModal.d.ts.map

package/dist/components/MuzaUIProvider/theme/ThemeSetterModal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSetterModal.d.ts","sourceRoot":"","sources":["../../../../src/components/MuzaUIProvider/theme/ThemeSetterModal.tsx"],"names":[],"mappings":"AAqBA,UAAU,qBAAqB;IAC7B,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,eAAO,MAAM,gBAAgB,GAAI,sBAG9B,qBAAqB,4CAqUvB,CAAA"}

package/dist/components/MuzaUIProvider/theme/ThemeSetterModal.js

@@ -0,0 +1,303 @@
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { useState as f } from "react";
+import { useTheme as D } from "./ThemeProvider.js";
+import { themePresets as u } from "./themePresets.js";
+import { Dialog as I, DialogOverlay as M, DialogContent as H } from "../../Dialog/Dialog.js";
+import { Button as s } from "../../Button/Button.js";
+import { DropdownMenu as v, DropdownMenuTrigger as N, DropdownMenuContent as b, DropdownMenuItem as p } from "../../DropdownMenu/DropdownMenu.js";
+import { Input as R } from "../../Input/Input.js";
+const z = ({
+  isOpen: C,
+  onClose: o
+}) => {
+  const {
+    shades: t,
+    shadesGenerator: w,
+    setShadesFromHex: c,
+    setShadesFromPreset: S,
+    setShadesGenerator: k
+  } = D(), n = () => {
+    o == null || o();
+  }, [i, d] = f(t[500]), [m, y] = f(""), P = (e) => {
+    if (d(e), /^#?([A-Fa-f0-9]{6})$/.test(e)) {
+      const g = e.startsWith("#") ? e : `#${e}`;
+      c(g), y("");
+    } else e.length >= 6 && y("Invalid hex format. Use format: #RRGGBB");
+  }, $ = (e) => {
+    c(e), d(e);
+  }, G = (e) => {
+    S(e);
+    const l = u[e]["--brand-primary"];
+    l && d(l);
+  }, x = (e) => {
+    k(e), c(i);
+  }, h = {
+    tailwindStyle: "Tailwind-style",
+    preserve500: "Preserve 500"
+  };
+  return /* @__PURE__ */ r(
+    I,
+    {
+      open: C,
+      onOpenChange: (e) => {
+        e === !1 && n();
+      },
+      children: /* @__PURE__ */ r(M, { className: "bg-transparent", children: /* @__PURE__ */ a(
+        H,
+        {
+          size: "large",
+          className: "space-y-6",
+          title: "Color Shade Generator",
+          children: [
+            /* @__PURE__ */ a("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ r("label", { className: "text-sm font-medium text-gray-700", children: "Generator Algorithm" }),
+              /* @__PURE__ */ a(v, { children: [
+                /* @__PURE__ */ r(N, { asChild: !0, children: /* @__PURE__ */ r(s, { variant: "secondary", className: "w-max", children: h[w] }) }),
+                /* @__PURE__ */ a(b, { className: "w-full", children: [
+                  /* @__PURE__ */ r(
+                    p,
+                    {
+                      onClick: () => x("tailwindStyle"),
+                      children: h.tailwindStyle
+                    }
+                  ),
+                  /* @__PURE__ */ r(
+                    p,
+                    {
+                      onClick: () => x("preserve500"),
+                      children: h.preserve500
+                    }
+                  )
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ a("div", { className: "flex gap-4", children: [
+                /* @__PURE__ */ a("div", { className: "flex flex-col gap-2", children: [
+                  /* @__PURE__ */ r("label", { className: "text-sm font-medium text-gray-700", children: "Pick Color" }),
+                  /* @__PURE__ */ r(
+                    "input",
+                    {
+                      type: "color",
+                      value: i,
+                      onChange: (e) => $(e.target.value),
+                      className: "h-12 w-24 cursor-pointer rounded border border-gray-300"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ a("div", { className: "flex flex-1 flex-col gap-2", children: [
+                  /* @__PURE__ */ r("label", { className: "text-sm font-medium text-gray-700", children: "Hex Code" }),
+                  /* @__PURE__ */ r(
+                    R,
+                    {
+                      value: i,
+                      onChange: (e) => P(e.target.value),
+                      placeholder: "#3b82f6",
+                      className: "font-mono text-lg",
+                      error: !!m
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ a("div", { className: "flex flex-col gap-2", children: [
+                  /* @__PURE__ */ r("label", { className: "text-sm font-medium text-gray-700", children: "Presets" }),
+                  /* @__PURE__ */ a(v, { children: [
+                    /* @__PURE__ */ r(N, { asChild: !0, children: /* @__PURE__ */ r(s, { variant: "secondary", className: "h-12", children: "Select Preset" }) }),
+                    /* @__PURE__ */ r(b, { children: Object.keys(u).map(
+                      (e) => /* @__PURE__ */ r(
+                        p,
+                        {
+                          onClick: () => G(e),
+                          children: e.charAt(0).toUpperCase() + e.slice(1)
+                        },
+                        e
+                      )
+                    ) })
+                  ] })
+                ] })
+              ] }),
+              m && /* @__PURE__ */ r("p", { className: "text-sm text-red-600", children: m })
+            ] }),
+            /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ r("h3", { className: "text-base font-semibold", children: "Color Shades Preview" }),
+              /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+                /* @__PURE__ */ r(
+                  "h4",
+                  {
+                    className: "text-sm font-medium",
+                    style: { color: "var(--gray-700)" },
+                    children: "Brand Colors"
+                  }
+                ),
+                /* @__PURE__ */ r("div", { className: "grid grid-cols-7 gap-2", children: ["100", "200", "300", "400", "500", "600", "700"].map(
+                  (e) => {
+                    const l = t[e];
+                    return /* @__PURE__ */ a("div", { className: "flex flex-col gap-1", children: [
+                      /* @__PURE__ */ r(
+                        "div",
+                        {
+                          className: "aspect-square w-full rounded-md border shadow-sm",
+                          style: {
+                            backgroundColor: l,
+                            borderColor: "var(--gray-300)"
+                          },
+                          title: `${e}: ${l}`
+                        }
+                      ),
+                      /* @__PURE__ */ r(
+                        "p",
+                        {
+                          className: "text-center text-xs font-medium",
+                          style: { color: "var(--gray-700)" },
+                          children: e
+                        }
+                      ),
+                      /* @__PURE__ */ r(
+                        "p",
+                        {
+                          className: "text-center font-mono text-[10px]",
+                          style: { color: "var(--gray-500)" },
+                          children: l == null ? void 0 : l.slice(0, 7).toUpperCase()
+                        }
+                      )
+                    ] }, e);
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+                /* @__PURE__ */ r(
+                  "h4",
+                  {
+                    className: "text-sm font-medium",
+                    style: { color: "var(--gray-700)" },
+                    children: "Opacity Variants"
+                  }
+                ),
+                /* @__PURE__ */ r("div", { className: "grid grid-cols-3 gap-2", children: ["500-8", "500-12", "500-15"].map((e) => {
+                  const l = t[e];
+                  return /* @__PURE__ */ a(
+                    "div",
+                    {
+                      className: "flex items-center gap-2 rounded-md border p-2",
+                      style: { borderColor: "var(--gray-300)" },
+                      children: [
+                        /* @__PURE__ */ r(
+                          "div",
+                          {
+                            className: "h-10 w-10 shrink-0 rounded border shadow-sm",
+                            style: {
+                              backgroundColor: l,
+                              borderColor: "var(--gray-300)"
+                            },
+                            title: `${e}: ${l}`
+                          }
+                        ),
+                        /* @__PURE__ */ a("div", { className: "min-w-0 flex-1", children: [
+                          /* @__PURE__ */ a(
+                            "p",
+                            {
+                              className: "text-xs font-medium",
+                              style: { color: "var(--gray-700)" },
+                              children: [
+                                e.replace("500-", ""),
+                                "% opacity"
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ r(
+                            "p",
+                            {
+                              className: "truncate font-mono text-[10px]",
+                              style: { color: "var(--gray-500)" },
+                              children: l
+                            }
+                          )
+                        ] })
+                      ]
+                    },
+                    e
+                  );
+                }) })
+              ] }),
+              /* @__PURE__ */ a("div", { className: "space-y-2", children: [
+                /* @__PURE__ */ r(
+                  "h4",
+                  {
+                    className: "text-sm font-medium",
+                    style: { color: "var(--gray-700)" },
+                    children: "Gray Scale"
+                  }
+                ),
+                /* @__PURE__ */ a("div", { className: "grid grid-cols-12 gap-2", children: [
+                  /* @__PURE__ */ a("div", { className: "flex flex-col gap-1", children: [
+                    /* @__PURE__ */ r(
+                      "div",
+                      {
+                        className: "aspect-square w-full rounded-md border shadow-sm",
+                        style: {
+                          backgroundColor: t.white,
+                          borderColor: "var(--gray-300)"
+                        },
+                        title: `white: ${t.white}`
+                      }
+                    ),
+                    /* @__PURE__ */ r(
+                      "p",
+                      {
+                        className: "text-center text-[10px] font-medium",
+                        style: { color: "var(--gray-700)" },
+                        children: "White"
+                      }
+                    )
+                  ] }),
+                  [
+                    "gray-50",
+                    "gray-100",
+                    "gray-200",
+                    "gray-300",
+                    "gray-400",
+                    "gray-500",
+                    "gray-600",
+                    "gray-700",
+                    "gray-800",
+                    "gray-900",
+                    "gray-1000"
+                  ].map((e) => {
+                    const l = t[e], g = e.replace("gray-", "");
+                    return /* @__PURE__ */ a("div", { className: "flex flex-col gap-1", children: [
+                      /* @__PURE__ */ r(
+                        "div",
+                        {
+                          className: "aspect-square w-full rounded-md border shadow-sm",
+                          style: {
+                            backgroundColor: l,
+                            borderColor: "var(--gray-300)"
+                          },
+                          title: `${e}: ${l}`
+                        }
+                      ),
+                      /* @__PURE__ */ r(
+                        "p",
+                        {
+                          className: "text-center text-[12px] font-medium",
+                          style: { color: "var(--gray-700)" },
+                          children: g
+                        }
+                      )
+                    ] }, e);
+                  })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ a("div", { className: "flex justify-end gap-3", children: [
+              /* @__PURE__ */ r(s, { onClick: n, variant: "secondary", danger: !0, children: "Reset" }),
+              /* @__PURE__ */ r(s, { onClick: n, variant: "primary", children: "Accept" })
+            ] })
+          ]
+        }
+      ) })
+    }
+  );
+};
+export {
+  z as ThemeSetterModal
+};

package/dist/components/MuzaUIProvider/theme/colorShades.d.ts

@@ -0,0 +1,31 @@
+import { ColorShades } from './ThemeProvider';
+/**
+ * Generate Tailwind-style color shades from a base color
+ * Shades: 100, 200, 300, 400, 500, 600, 700, 500/8%, 500/12%, 500/15%
+ * Gray shades and white are constant values from the default preset
+ * Returns null if the input is not a valid hex color
+ */
+export declare const generateColorShades: (baseHex: string) => ColorShades | null;
+/**
+ * Same as generateColorShades, except input baseHex is used for 500 shade
+ * Gray shades and white are constant values from the default preset
+ */
+export declare const generateColorShades2: (baseHex: string) => ColorShades | null;
+/**
+ * Format color shades as a JavaScript object string
+ */
+export declare const formatShadesAsObject: (colorName: string, shades: ColorShades) => string;
+/**
+ * Shades generator type - defines available shade generation algorithms
+ */
+export type ShadesGenerator = 'tailwindStyle' | 'preserve500';
+/**
+ * Generator function type
+ */
+export type GeneratorFunction = (baseHex: string) => ColorShades | null;
+/**
+ * Registry of available shades generators
+ * Makes the system extensible for future generator functions
+ */
+export declare const SHADES_GENERATORS: Record<ShadesGenerator, GeneratorFunction>;
+//# sourceMappingURL=colorShades.d.ts.map

package/dist/components/MuzaUIProvider/theme/colorShades.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorShades.d.ts","sourceRoot":"","sources":["../../../../src/components/MuzaUIProvider/theme/colorShades.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAA;AA8KlD;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAAI,SAAS,MAAM,KAAG,WAAW,GAAG,IA6DnE,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,oBAAoB,GAAI,SAAS,MAAM,KAAG,WAAW,GAAG,IAgBpE,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,oBAAoB,GAC/B,WAAW,MAAM,EACjB,QAAQ,WAAW,WAWpB,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,eAAe,GAAG,aAAa,CAAA;AAE7D;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,EAAE,MAAM,KAAK,WAAW,GAAG,IAAI,CAAA;AAEvE;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,eAAe,EAAE,iBAAiB,CAGxE,CAAA"}

package/dist/components/MuzaUIProvider/theme/colorShades.js

@@ -0,0 +1,131 @@
+import { themePresets as t } from "./themePresets.js";
+const m = (e) => {
+  const r = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);
+  return r ? {
+    r: parseInt(r[1], 16),
+    g: parseInt(r[2], 16),
+    b: parseInt(r[3], 16)
+  } : null;
+}, S = (e) => {
+  const r = e.r / 255, n = e.g / 255, a = e.b / 255, g = Math.max(r, n, a), u = Math.min(r, n, a);
+  let o = 0, l = 0;
+  const c = (g + u) / 2;
+  if (g !== u) {
+    const s = g - u;
+    switch (l = c > 0.5 ? s / (2 - g - u) : s / (g + u), g) {
+      case r:
+        o = ((n - a) / s + (n < a ? 6 : 0)) / 6;
+        break;
+      case n:
+        o = ((a - r) / s + 2) / 6;
+        break;
+      case a:
+        o = ((r - n) / s + 4) / 6;
+        break;
+    }
+  }
+  return {
+    h: Math.round(o * 360),
+    s: Math.round(l * 100),
+    l: Math.round(c * 100)
+  };
+}, T = (e) => {
+  const r = e.h / 360, n = e.s / 100, a = e.l / 100;
+  let g, u, o;
+  if (n === 0)
+    g = u = o = a;
+  else {
+    const c = (i, d, y) => (y < 0 && (y += 1), y > 1 && (y -= 1), y < 0.16666666666666666 ? i + (d - i) * 6 * y : y < 0.5 ? d : y < 0.6666666666666666 ? i + (d - i) * (0.6666666666666666 - y) * 6 : i), s = a < 0.5 ? a * (1 + n) : a + n - a * n, f = 2 * a - s;
+    g = c(f, s, r + 1 / 3), u = c(f, s, r), o = c(f, s, r - 1 / 3);
+  }
+  const l = (c) => {
+    const s = Math.round(c * 255).toString(16);
+    return s.length === 1 ? "0" + s : s;
+  };
+  return `#${l(g)}${l(u)}${l(o)}`;
+}, h = (e, r) => `rgba(${e.r}, ${e.g}, ${e.b}, ${r / 100})`, b = {
+  white: t.muzalife["--brand-white"],
+  "gray-50": t.muzalife["--gray-50"],
+  "gray-100": t.muzalife["--gray-100"],
+  "gray-200": t.muzalife["--gray-200"],
+  "gray-300": t.muzalife["--gray-300"],
+  "gray-400": t.muzalife["--gray-400"],
+  "gray-500": t.muzalife["--gray-500"],
+  "gray-600": t.muzalife["--gray-600"],
+  "gray-700": t.muzalife["--gray-700"],
+  "gray-800": t.muzalife["--gray-800"],
+  "gray-900": t.muzalife["--gray-900"],
+  "gray-1000": t.muzalife["--gray-1000"]
+}, $ = {
+  white: t.default["--brand-white"],
+  "gray-50": t.default["--gray-50"],
+  "gray-100": t.default["--gray-100"],
+  "gray-200": t.default["--gray-200"],
+  "gray-300": t.default["--gray-300"],
+  "gray-400": t.default["--gray-400"],
+  "gray-500": t.default["--gray-500"],
+  "gray-600": t.default["--gray-600"],
+  "gray-700": t.default["--gray-700"],
+  "gray-800": t.default["--gray-800"],
+  "gray-900": t.default["--gray-900"],
+  "gray-1000": t.default["--gray-1000"]
+}, z = (e) => {
+  const r = m(e);
+  if (!r)
+    return null;
+  const n = S(r), a = {}, g = {
+    100: 95,
+    // Very light
+    200: 85,
+    300: 75,
+    400: 65,
+    500: 50,
+    // Base/middle
+    600: 40,
+    700: 30
+  }, u = {
+    100: 0.7,
+    200: 0.8,
+    300: 0.9,
+    400: 0.95,
+    500: 1,
+    600: 1,
+    700: 0.95
+  };
+  Object.entries(g).forEach(([l, c]) => {
+    const s = Math.round(n.s * u[Number(l)]);
+    a[l] = T({
+      h: n.h,
+      s,
+      l: c
+    });
+  });
+  const o = m(a[500]);
+  return o && (a["500-8"] = h(o, 8), a["500-12"] = h(o, 12), a["500-15"] = h(o, 15)), Object.assign(
+    a,
+    a[500] === "#5f1eb4" ? $ : b
+  ), a;
+}, A = (e) => {
+  const r = z(e);
+  return r ? (r[500] = e, Object.assign(
+    r,
+    e === "#5f1eb4" ? $ : b
+  ), r) : null;
+}, j = (e, r) => {
+  const n = Object.entries(r).map(([a, g]) => `    ${a.includes("-") ? `'${a}'` : a}: '${g}'`).join(`,
+`);
+  return `{
+  ${e}: {
+${n}
+  }
+}`;
+}, E = {
+  tailwindStyle: z,
+  preserve500: A
+};
+export {
+  E as SHADES_GENERATORS,
+  j as formatShadesAsObject,
+  z as generateColorShades,
+  A as generateColorShades2
+};

package/dist/components/MuzaUIProvider/theme/index.d.ts

@@ -0,0 +1,5 @@
+export { ThemeProvider, useTheme, type ColorShades, type ThemeProviderProps, } from './ThemeProvider';
+export { setThemeVariables, themeVariableMapping, type ThemeCSSVariables, } from './setThemeVariables';
+export { generateColorShades, generateColorShades2, formatShadesAsObject, SHADES_GENERATORS, type ShadesGenerator, type GeneratorFunction, } from './colorShades';
+export { themePresets, type ThemePresets } from './themePresets';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/MuzaUIProvider/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/MuzaUIProvider/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,QAAQ,EACR,KAAK,WAAW,EAChB,KAAK,kBAAkB,GACxB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EACL,iBAAiB,EACjB,oBAAoB,EACpB,KAAK,iBAAiB,GACvB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EACL,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,iBAAiB,EACjB,KAAK,eAAe,EACpB,KAAK,iBAAiB,GACvB,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAA"}