@vkzstudio/muza-ui 1.0.25 → 1.0.26

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"}

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

@@ -0,0 +1,39 @@
+import { ColorShades } from './ThemeProvider';
+import { ThemePresets } from './themePresets';
+/**
+ * Sets theme CSS variables on the root element
+ * Maps generated color shades to brand variables
+ */
+export type ThemeCSSVariables = {
+    '--brand-tertiary': string;
+    '--brand-disabled': string;
+    '--brand-secondary': string;
+    '--brand-quaternary': string;
+    '--brand-primary': string;
+    '--brand-hover': string;
+    '--brand-focused': string;
+    '--brand-8': string;
+    '--brand-12': string;
+    '--brand-15': string;
+    '--brand-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;
+};
+export declare const themeVariableMapping: Record<keyof ThemeCSSVariables, keyof ColorShades>;
+export declare const setThemeVariables: ({ shades, preset, }: {
+    shades: ColorShades;
+    preset?: undefined;
+} | {
+    shades?: undefined;
+    preset: ThemePresets;
+}) => void;
+//# sourceMappingURL=setThemeVariables.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"setThemeVariables.d.ts","sourceRoot":"","sources":["../../../../src/components/MuzaUIProvider/theme/setThemeVariables.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,gBAAgB,CAAA;AAEhE;;;GAGG;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,kBAAkB,EAAE,MAAM,CAAA;IAC1B,kBAAkB,EAAE,MAAM,CAAA;IAC1B,mBAAmB,EAAE,MAAM,CAAA;IAC3B,oBAAoB,EAAE,MAAM,CAAA;IAC5B,iBAAiB,EAAE,MAAM,CAAA;IACzB,eAAe,EAAE,MAAM,CAAA;IACvB,iBAAiB,EAAE,MAAM,CAAA;IACzB,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,eAAe,EAAE,MAAM,CAAA;IACvB,YAAY,EAAE,MAAM,CAAA;IACpB,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;IACpB,YAAY,EAAE,MAAM,CAAA;CACrB,CAAA;AAGD,eAAO,MAAM,oBAAoB,EAAE,MAAM,CACvC,MAAM,iBAAiB,EACvB,MAAM,WAAW,CAwBlB,CAAA;AAED,eAAO,MAAM,iBAAiB,GAAI,qBAI9B;IAAE,MAAM,EAAE,WAAW,CAAC;IAAC,MAAM,CAAC,EAAE,SAAS,CAAA;CAAE,GAC3C;IAAE,MAAM,CAAC,EAAE,SAAS,CAAC;IAAC,MAAM,EAAE,YAAY,CAAA;CAAE,SAmB/C,CAAA"}

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

@@ -0,0 +1,44 @@
+import { themePresets as g } from "./themePresets.js";
+const o = {
+  "--brand-tertiary": "100",
+  "--brand-disabled": "200",
+  "--brand-secondary": "300",
+  "--brand-quaternary": "400",
+  "--brand-primary": "500",
+  "--brand-hover": "600",
+  "--brand-focused": "700",
+  "--brand-8": "500-8",
+  "--brand-12": "500-12",
+  "--brand-15": "500-15",
+  "--brand-white": "white",
+  "--gray-100": "gray-100",
+  "--gray-1000": "gray-1000",
+  "--gray-200": "gray-200",
+  "--gray-300": "gray-300",
+  "--gray-400": "gray-400",
+  "--gray-50": "gray-50",
+  "--gray-500": "gray-500",
+  "--gray-600": "gray-600",
+  "--gray-700": "gray-700",
+  "--gray-800": "gray-800",
+  "--gray-900": "gray-900"
+}, d = ({
+  shades: e,
+  preset: n
+}) => {
+  const t = document.documentElement;
+  if (!e) {
+    Object.entries(g[n]).forEach(([a, r]) => {
+      r && t.style.setProperty(a, r);
+    });
+    return;
+  }
+  Object.entries(o).forEach(([a, r]) => {
+    const y = e[r];
+    y && t.style.setProperty(a, y);
+  });
+};
+export {
+  d as setThemeVariables,
+  o as themeVariableMapping
+};

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

@@ -0,0 +1,7 @@
+import { ThemeCSSVariables } from './setThemeVariables';
+export type ThemePresets = 'default' | 'muzalife' | 'vodafone';
+/**
+ * Brand CSS variable names used in the theme system
+ */
+export declare const themePresets: Record<ThemePresets, ThemeCSSVariables>;
+//# sourceMappingURL=themePresets.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"themePresets.d.ts","sourceRoot":"","sources":["../../../../src/components/MuzaUIProvider/theme/themePresets.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAE5D,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAA;AAE9D;;GAEG;AAEH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,YAAY,EAAE,iBAAiB,CAyEhE,CAAA"}

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

@@ -0,0 +1,77 @@
+const a = {
+  default: {
+    "--brand-12": "#5f1eb41f",
+    "--brand-15": "#5f1eb426",
+    "--brand-8": "#5f1eb414",
+    "--brand-disabled": "#d2b9f3",
+    "--brand-focused": "#461d7c",
+    "--brand-hover": "#521d96",
+    "--brand-primary": "#5f1eb4",
+    "--brand-quaternary": "#843fde",
+    "--brand-secondary": "#a673e7",
+    "--brand-tertiary": "#f1e9f8",
+    "--brand-white": "#f7f5ff",
+    "--gray-100": "#f6f3fe",
+    "--gray-1000": "#5a5473",
+    "--gray-200": "#eeebf7",
+    "--gray-300": "#e3e0f1",
+    "--gray-400": "#d6d1ea",
+    "--gray-50": "#f9f8fb",
+    "--gray-500": "#c6c0dc",
+    "--gray-600": "#9a92b9",
+    "--gray-700": "#867fa2",
+    "--gray-800": "#787194",
+    "--gray-900": "#645c81"
+  },
+  muzalife: {
+    "--brand-12": "#14645a1f",
+    "--brand-15": "#14645a26",
+    "--brand-8": "#14645a14",
+    "--brand-disabled": "#9bf4de",
+    "--brand-focused": "#117466",
+    "--brand-hover": "#10917e",
+    "--brand-primary": "#14645a",
+    "--brand-quaternary": "#30d1b3",
+    "--brand-secondary": "#61e7ca",
+    "--brand-tertiary": "#cdfaed",
+    "--brand-white": "#f4f4f5",
+    "--gray-100": "#f7f7f8",
+    "--gray-1000": "#5b5b6f",
+    "--gray-200": "#f2f2f3",
+    "--gray-300": "#e7e7e9",
+    "--gray-400": "#dcdce0",
+    "--gray-50": "#fafafa",
+    "--gray-500": "#ccccd1",
+    "--gray-600": "#a0a0ab",
+    "--gray-700": "#8b8b98",
+    "--gray-800": "#7d7d87",
+    "--gray-900": "#676774"
+  },
+  vodafone: {
+    "--brand-12": "#e600001f",
+    "--brand-15": "#e6000026",
+    "--brand-8": "#e6000014",
+    "--brand-disabled": "#ffc1c1",
+    "--brand-focused": "#e60000",
+    "--brand-hover": "#fc0606",
+    "--brand-primary": "#e60000",
+    "--brand-quaternary": "#ff5959",
+    "--brand-secondary": "#ff9595",
+    "--brand-tertiary": "#ffdddd",
+    "--brand-white": "#f4f4f5",
+    "--gray-100": "#f7f7f8",
+    "--gray-1000": "#5b5b6f",
+    "--gray-200": "#f2f2f3",
+    "--gray-300": "#e7e7e9",
+    "--gray-400": "#dcdce0",
+    "--gray-50": "#fafafa",
+    "--gray-500": "#ccccd1",
+    "--gray-600": "#a0a0ab",
+    "--gray-700": "#8b8b98",
+    "--gray-800": "#7d7d87",
+    "--gray-900": "#676774"
+  }
+};
+export {
+  a as themePresets
+};

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

@@ -0,0 +1,16 @@
+interface KeyboardShortcutOptions {
+    key: string;
+    ctrlKey?: boolean;
+    shiftKey?: boolean;
+    altKey?: boolean;
+    metaKey?: boolean;
+}
+/**
+ * Hook to register a keyboard shortcut
+ * @param options - Keyboard shortcut configuration
+ * @param callback - Function to call when shortcut is pressed
+ * @param enabled - Whether the shortcut is enabled (default: true)
+ */
+export declare const useKeyboardShortcut: (options: KeyboardShortcutOptions, callback: () => void, enabled?: boolean) => void;
+export {};
+//# sourceMappingURL=useKeyboardShortcut.d.ts.map