mcr-design-systems 1.0.0

package/dist/tokens/tailwind-config.d.ts

@@ -0,0 +1,327 @@
+export declare const generateTailwindConfig: () => {
+    content: string[];
+    darkMode: string[];
+    theme: {
+        extend: {
+            screens: {
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+                '2xl': string;
+                '3xl': string;
+            };
+            spacing: {
+                readonly none: "0rem";
+                readonly 'xs-4': "0.125rem";
+                readonly 'xs-3': "0.25rem";
+                readonly 'xs-2': "0.375rem";
+                readonly xs: "0.5rem";
+                readonly 'sm-2': "0.75rem";
+                readonly sm: "1rem";
+                readonly md: "1.5rem";
+                readonly lg: "2rem";
+                readonly xl: "2.5rem";
+                readonly 'xl-2': "3rem";
+                readonly 'xl-3': "3.5rem";
+                readonly 'xl-4': "4rem";
+                readonly 'xl-5': "5rem";
+                readonly 'xl-6': "6rem";
+                readonly 'xl-7': "8rem";
+            };
+            width: {
+                readonly none: "0rem";
+                readonly 'xs-4': "0.125rem";
+                readonly 'xs-3': "0.25rem";
+                readonly 'xs-2': "0.375rem";
+                readonly xs: "0.5rem";
+                readonly 'sm-2': "0.75rem";
+                readonly sm: "1rem";
+                readonly md: "1.5rem";
+                readonly lg: "2rem";
+                readonly xl: "2.5rem";
+                readonly 'xl-2': "3rem";
+                readonly 'xl-3': "3.5rem";
+                readonly 'xl-4': "4rem";
+                readonly 'xl-5': "5rem";
+                readonly 'xl-6': "6rem";
+                readonly 'xl-7': "8rem";
+            };
+            height: {
+                readonly none: "0rem";
+                readonly 'xs-4': "0.125rem";
+                readonly 'xs-3': "0.25rem";
+                readonly 'xs-2': "0.375rem";
+                readonly xs: "0.5rem";
+                readonly 'sm-2': "0.75rem";
+                readonly sm: "1rem";
+                readonly md: "1.5rem";
+                readonly lg: "2rem";
+                readonly xl: "2.5rem";
+                readonly 'xl-2': "3rem";
+                readonly 'xl-3': "3.5rem";
+                readonly 'xl-4': "4rem";
+                readonly 'xl-5': "5rem";
+                readonly 'xl-6': "6rem";
+                readonly 'xl-7': "8rem";
+            };
+            fontSize: {
+                readonly 'base-xs': "0.625rem";
+                readonly 'base-sm': "0.75rem";
+                readonly 'base-md': "0.875rem";
+                readonly 'base-lg': "1rem";
+                readonly 'heading-xs': "1.125rem";
+                readonly 'heading-sm': "1.25rem";
+                readonly 'heading-md': "1.5rem";
+                readonly 'heading-lg': "1.65rem";
+                readonly 'heading-xl': "2rem";
+                readonly 'heading-2xl': "2.5rem";
+                readonly 'display-lg': "6rem";
+                readonly 'display-xl': "4rem";
+                readonly 'display-2xl': "3rem";
+            };
+            lineHeight: {
+                readonly 'base-xs': "1rem";
+                readonly 'base-sm': "1rem";
+                readonly 'base-md': "1.25rem";
+                readonly 'base-lg': "1.5rem";
+                readonly 'heading-2xl': "3.75rem";
+                readonly 'heading-xl': "3rem";
+                readonly 'heading-lg': "2.625rem";
+                readonly 'heading-md': "2.25rem";
+                readonly 'heading-sm': "1.875rem";
+                readonly 'heading-xs': "1.625rem";
+                readonly 'display-2xl': "9rem";
+                readonly 'display-xl': "5rem";
+                readonly 'display-lg': "4.5rem";
+            };
+            letterSpacing: {
+                readonly tight: "-0.025em";
+                readonly normal: "0";
+                readonly wide: "0.025em";
+            };
+            fontFamily: {
+                readonly primary: readonly ["\"Open Sans\"", "sans-serif"];
+                readonly secondary: readonly ["\"Open Sans\"", "sans-serif"];
+            };
+            colors: Record<string, string | Record<string, string>>;
+            borderColor: Record<string, string>;
+            borderRadius: {
+                readonly none: "0rem";
+                readonly xs: "0.125rem";
+                readonly sm: "0.25rem";
+                readonly md: "0.375rem";
+                readonly lg: "0.5rem";
+                readonly xl: "0.75rem";
+                readonly 'xl-2': "1rem";
+                readonly 'xl-3': "1.5rem";
+                readonly full: "9999px";
+            };
+            boxShadow: {
+                readonly '50': "0px 1px 2px 0px rgba(0, 0, 0, 0.04)";
+                readonly '100': "0px 3px 4px 0px rgba(0, 0, 0, 0.04)";
+                readonly '200': "0px 3px 8px 0px rgba(0, 0, 0, 0.08)";
+                readonly '300': "0px 5px 12px 0px rgba(0, 0, 0, 0.12)";
+                readonly '400': "0px 5px 16px 0px rgba(0, 0, 0, 0.16)";
+                readonly '500': "0px 6px 24px 0px rgba(0, 0, 0, 0.16)";
+                readonly '600': "0px 6px 32px 0px rgba(0, 0, 0, 0.16)";
+                readonly popover: "0px 4px 20px rgba(9, 9, 11, 0.1)";
+                readonly 'left-side-panel': "6px 0px 20px rgba(9, 9, 11, 0.1)";
+                readonly 'right-side-panel': "-6px 0px 20px rgba(9, 9, 11, 0.1)";
+                readonly 'hover-stage': "0px 0px 0px 3px rgb(228, 228, 231)";
+                readonly 'hover-error': "0px 0px 0px 3px rgba(239, 68, 68, 0.2)";
+                readonly 'focus-ring': "0px 0px 0px 2px rgba(59, 130, 246, 0.5)";
+                readonly none: "none";
+                readonly inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)";
+            };
+            zIndex: {
+                readonly hide: -1;
+                readonly auto: "auto";
+                readonly base: 0;
+                readonly docked: 10;
+                readonly dropdown: 1000;
+                readonly sticky: 1020;
+                readonly banner: 1030;
+                readonly overlay: 1040;
+                readonly modal: 1050;
+                readonly popover: 1060;
+                readonly skipLink: 1070;
+                readonly toast: 1080;
+                readonly tooltip: 1090;
+            };
+            transitionTimingFunction: {
+                'bounce-gentle': string;
+            };
+            transitionDuration: {
+                '50': string;
+                '250': string;
+                '350': string;
+            };
+        };
+    };
+    plugins: never[];
+};
+declare const _default: {
+    content: string[];
+    darkMode: string[];
+    theme: {
+        extend: {
+            screens: {
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+                '2xl': string;
+                '3xl': string;
+            };
+            spacing: {
+                readonly none: "0rem";
+                readonly 'xs-4': "0.125rem";
+                readonly 'xs-3': "0.25rem";
+                readonly 'xs-2': "0.375rem";
+                readonly xs: "0.5rem";
+                readonly 'sm-2': "0.75rem";
+                readonly sm: "1rem";
+                readonly md: "1.5rem";
+                readonly lg: "2rem";
+                readonly xl: "2.5rem";
+                readonly 'xl-2': "3rem";
+                readonly 'xl-3': "3.5rem";
+                readonly 'xl-4': "4rem";
+                readonly 'xl-5': "5rem";
+                readonly 'xl-6': "6rem";
+                readonly 'xl-7': "8rem";
+            };
+            width: {
+                readonly none: "0rem";
+                readonly 'xs-4': "0.125rem";
+                readonly 'xs-3': "0.25rem";
+                readonly 'xs-2': "0.375rem";
+                readonly xs: "0.5rem";
+                readonly 'sm-2': "0.75rem";
+                readonly sm: "1rem";
+                readonly md: "1.5rem";
+                readonly lg: "2rem";
+                readonly xl: "2.5rem";
+                readonly 'xl-2': "3rem";
+                readonly 'xl-3': "3.5rem";
+                readonly 'xl-4': "4rem";
+                readonly 'xl-5': "5rem";
+                readonly 'xl-6': "6rem";
+                readonly 'xl-7': "8rem";
+            };
+            height: {
+                readonly none: "0rem";
+                readonly 'xs-4': "0.125rem";
+                readonly 'xs-3': "0.25rem";
+                readonly 'xs-2': "0.375rem";
+                readonly xs: "0.5rem";
+                readonly 'sm-2': "0.75rem";
+                readonly sm: "1rem";
+                readonly md: "1.5rem";
+                readonly lg: "2rem";
+                readonly xl: "2.5rem";
+                readonly 'xl-2': "3rem";
+                readonly 'xl-3': "3.5rem";
+                readonly 'xl-4': "4rem";
+                readonly 'xl-5': "5rem";
+                readonly 'xl-6': "6rem";
+                readonly 'xl-7': "8rem";
+            };
+            fontSize: {
+                readonly 'base-xs': "0.625rem";
+                readonly 'base-sm': "0.75rem";
+                readonly 'base-md': "0.875rem";
+                readonly 'base-lg': "1rem";
+                readonly 'heading-xs': "1.125rem";
+                readonly 'heading-sm': "1.25rem";
+                readonly 'heading-md': "1.5rem";
+                readonly 'heading-lg': "1.65rem";
+                readonly 'heading-xl': "2rem";
+                readonly 'heading-2xl': "2.5rem";
+                readonly 'display-lg': "6rem";
+                readonly 'display-xl': "4rem";
+                readonly 'display-2xl': "3rem";
+            };
+            lineHeight: {
+                readonly 'base-xs': "1rem";
+                readonly 'base-sm': "1rem";
+                readonly 'base-md': "1.25rem";
+                readonly 'base-lg': "1.5rem";
+                readonly 'heading-2xl': "3.75rem";
+                readonly 'heading-xl': "3rem";
+                readonly 'heading-lg': "2.625rem";
+                readonly 'heading-md': "2.25rem";
+                readonly 'heading-sm': "1.875rem";
+                readonly 'heading-xs': "1.625rem";
+                readonly 'display-2xl': "9rem";
+                readonly 'display-xl': "5rem";
+                readonly 'display-lg': "4.5rem";
+            };
+            letterSpacing: {
+                readonly tight: "-0.025em";
+                readonly normal: "0";
+                readonly wide: "0.025em";
+            };
+            fontFamily: {
+                readonly primary: readonly ["\"Open Sans\"", "sans-serif"];
+                readonly secondary: readonly ["\"Open Sans\"", "sans-serif"];
+            };
+            colors: Record<string, string | Record<string, string>>;
+            borderColor: Record<string, string>;
+            borderRadius: {
+                readonly none: "0rem";
+                readonly xs: "0.125rem";
+                readonly sm: "0.25rem";
+                readonly md: "0.375rem";
+                readonly lg: "0.5rem";
+                readonly xl: "0.75rem";
+                readonly 'xl-2': "1rem";
+                readonly 'xl-3': "1.5rem";
+                readonly full: "9999px";
+            };
+            boxShadow: {
+                readonly '50': "0px 1px 2px 0px rgba(0, 0, 0, 0.04)";
+                readonly '100': "0px 3px 4px 0px rgba(0, 0, 0, 0.04)";
+                readonly '200': "0px 3px 8px 0px rgba(0, 0, 0, 0.08)";
+                readonly '300': "0px 5px 12px 0px rgba(0, 0, 0, 0.12)";
+                readonly '400': "0px 5px 16px 0px rgba(0, 0, 0, 0.16)";
+                readonly '500': "0px 6px 24px 0px rgba(0, 0, 0, 0.16)";
+                readonly '600': "0px 6px 32px 0px rgba(0, 0, 0, 0.16)";
+                readonly popover: "0px 4px 20px rgba(9, 9, 11, 0.1)";
+                readonly 'left-side-panel': "6px 0px 20px rgba(9, 9, 11, 0.1)";
+                readonly 'right-side-panel': "-6px 0px 20px rgba(9, 9, 11, 0.1)";
+                readonly 'hover-stage': "0px 0px 0px 3px rgb(228, 228, 231)";
+                readonly 'hover-error': "0px 0px 0px 3px rgba(239, 68, 68, 0.2)";
+                readonly 'focus-ring': "0px 0px 0px 2px rgba(59, 130, 246, 0.5)";
+                readonly none: "none";
+                readonly inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)";
+            };
+            zIndex: {
+                readonly hide: -1;
+                readonly auto: "auto";
+                readonly base: 0;
+                readonly docked: 10;
+                readonly dropdown: 1000;
+                readonly sticky: 1020;
+                readonly banner: 1030;
+                readonly overlay: 1040;
+                readonly modal: 1050;
+                readonly popover: 1060;
+                readonly skipLink: 1070;
+                readonly toast: 1080;
+                readonly tooltip: 1090;
+            };
+            transitionTimingFunction: {
+                'bounce-gentle': string;
+            };
+            transitionDuration: {
+                '50': string;
+                '250': string;
+                '350': string;
+            };
+        };
+    };
+    plugins: never[];
+};
+export default _default;

package/dist/tokens/tailwind-config.js

@@ -0,0 +1,93 @@
+import { alphaColors as a, colorScales as m, baseColors as d } from "./primitives/colors.js";
+import { typography as t } from "./primitives/typography.js";
+import { zIndex as g, shadows as h, borderRadius as p, spacing as n } from "./primitives/layout.js";
+import { semanticTokens as x } from "./semantic.js";
+const i = /* @__PURE__ */ new Map(), f = () => ({
+  // Base colors
+  ...d,
+  // Color scales
+  ...m,
+  // Alpha colors
+  "white-alpha": a.white,
+  "black-alpha": a.black,
+  // Semantic color tokens (cached)
+  bg: c("bg"),
+  fg: c("fg")
+}), c = (e) => {
+  const o = `semantic-${e}`;
+  if (i.has(o))
+    return i.get(o);
+  const r = u(e);
+  return i.set(o, r), r;
+}, u = (e) => {
+  const o = {};
+  try {
+    const r = x.light[e];
+    if (!r)
+      return console.warn(`No tokens found for category: ${e}`), o;
+    Object.keys(r).forEach((s) => {
+      const l = e === "border" ? `--color-border-${s}` : `--color-${e}-${s}`;
+      o[s] = `var(${l})`;
+    });
+  } catch (r) {
+    console.error(`Error generating semantic colors for ${e}:`, r);
+  }
+  return o;
+}, b = () => c("border"), C = () => ({
+  sm: "640px",
+  // Small devices
+  md: "768px",
+  // Medium devices
+  lg: "1024px",
+  // Large devices
+  xl: "1280px",
+  // Extra large devices
+  "2xl": "1440px",
+  // 2x Extra large devices
+  "3xl": "1536px"
+  // 3x Extra large devices
+}), w = () => ({
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    // TODO: update name
+    "node_modules/mcr-design-systems/dist/**/*.{js,ts,jsx,tsx}"
+    // Add additional content paths if needed
+  ],
+  darkMode: ["selector", '[data-theme="dark"]'],
+  theme: {
+    extend: {
+      // Layout & Spacing
+      screens: C(),
+      spacing: n,
+      width: n,
+      height: n,
+      // Typography
+      fontSize: t.fontSizes,
+      lineHeight: t.lineHeights,
+      letterSpacing: t.letterSpacing,
+      fontFamily: t.fontFamilies,
+      // Colors (optimized with caching)
+      colors: f(),
+      borderColor: b(),
+      // Visual Effects
+      borderRadius: p,
+      boxShadow: h,
+      zIndex: g,
+      // Animation & Transitions
+      transitionTimingFunction: {
+        "bounce-gentle": "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
+      },
+      transitionDuration: {
+        50: "50ms",
+        250: "250ms",
+        350: "350ms"
+      }
+    }
+  },
+  plugins: []
+});
+w();
+export {
+  w as generateTailwindConfig
+};

package/dist/tokens/theme-types.d.ts

@@ -0,0 +1,64 @@
+export type SemanticTheme = {
+    font?: {
+        familyPrimary?: string;
+        familySecondary?: string;
+    };
+    bg?: {
+        brandRest?: string;
+        brandHover?: string;
+        brandPressed?: string;
+        brandDisabled?: string;
+        brandSubtleRest?: string;
+        brandSubtleHover?: string;
+        brandSubtlePressed?: string;
+        brandSubtleDisabled?: string;
+        selectedRest?: string;
+        selectedHover?: string;
+        selectedPressed?: string;
+        selectedDisabled?: string;
+        selectedBolderRest?: string;
+        selectedBoldestRest?: string;
+        selectedBoldestHover?: string;
+        selectedBoldestPressed?: string;
+        selectedBoldestDisabled?: string;
+    };
+    fg?: {
+        btnPrimary?: string;
+        btnPrimaryDisabled?: string;
+        checkbox?: string;
+        checkboxDisabled?: string;
+        brandRest?: string;
+        brandRestStrong?: string;
+        brandHover?: string;
+        brandPressed?: string;
+        brandPressedStrong?: string;
+        brandDisabled?: string;
+        brandDisabledStrong?: string;
+        selectedRest?: string;
+        selectedHover?: string;
+        selectedPressed?: string;
+        selectedStrong?: string;
+        selectedDisabled?: string;
+        selectedDisabledStrong?: string;
+        selectedSubtle?: string;
+        selectedBold?: string;
+    };
+    border?: {
+        indicator?: string;
+        indicatorDisabled?: string;
+        inputActive?: string;
+        selectedSecondary?: string;
+        selectedSecondaryDisabled?: string;
+        active?: string;
+        activeStrong?: string;
+        activeLight?: string;
+    };
+    focusRing?: {
+        onLight?: string;
+        onDark?: string;
+    };
+};
+export type Theme = {
+    dark?: SemanticTheme;
+    light?: SemanticTheme;
+};

package/dist/tokens/theme.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { ThemeName } from './utils';
+import { Theme } from './theme-types';
+/**
+ * Dynamic Theme Provider Component
+ *
+ * @example
+ * // Basic usage
+ * <ThemeProvider>
+ *   <App />
+ * </ThemeProvider>
+ *
+ * @example
+ * // With custom storage persister
+ * <ThemeProvider enableCustomPersister={true}>
+ *   <App />
+ * </ThemeProvider>
+ * // When enableCustomPersister is true, you need to handle theme persistence manually
+ * // using the theme context's setTheme method and your own storage solution
+ */
+interface ThemeProviderProps {
+    children: ReactNode;
+    defaultTheme?: ThemeName;
+    storageKey?: string;
+    enableSystem?: boolean;
+    customTheme?: Theme;
+    /**
+     * When enabled, the theme provider will not automatically persist theme changes to localStorage.
+     * You will need to handle theme persistence manually using your own storage solution.
+     * @default false
+     */
+    enableCustomPersister?: boolean;
+}
+export declare function ThemeProvider({ children, defaultTheme, enableSystem, customTheme, enableCustomPersister, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/tokens/theme.js

@@ -0,0 +1,42 @@
+import { jsx as s } from "react/jsx-runtime";
+import { useState as p, useLayoutEffect as a } from "react";
+import { getStoredTheme as v, getSystemTheme as x, applyTheme as m } from "./utils.js";
+import { ThemeContext as E } from "./context.js";
+function Q({
+  children: y,
+  defaultTheme: c = "light",
+  enableSystem: n = !0,
+  customTheme: h,
+  enableCustomPersister: t = !1
+}) {
+  const [d, i] = p(c), [w, f] = p("light");
+  a(() => {
+    const e = v(t), o = x();
+    f(o);
+    const r = e || (n ? o : c);
+    i(r), m(r, h, t);
+  }, [c, n, h, t]), a(() => {
+    if (!n) return;
+    const e = window.matchMedia("(prefers-color-scheme: dark)"), o = (r) => {
+      const g = r.matches ? "dark" : "light";
+      f(g), v(t) || (i(g), m(g, h, t));
+    };
+    return e.addEventListener("change", o), () => e.removeEventListener("change", o);
+  }, [n, h, t]);
+  const T = (e) => {
+    i(e), m(e, h, t);
+  }, k = {
+    theme: d,
+    setTheme: T,
+    toggleTheme: () => {
+      T(d === "light" ? "dark" : "light");
+    },
+    systemTheme: w,
+    customTheme: h,
+    enableCustomPersister: t
+  };
+  return /* @__PURE__ */ s(E.Provider, { value: k, children: y });
+}
+export {
+  Q as ThemeProvider
+};

package/dist/tokens/utils.d.ts

@@ -0,0 +1,22 @@
+import { semanticTokens } from './semantic';
+import { Theme, SemanticTheme } from './theme-types';
+/**
+ * Theme Utilities
+ * Core theme functions and utilities
+ */
+export type ThemeName = 'light' | 'dark';
+export declare const getSystemTheme: () => ThemeName;
+export declare const getStoredTheme: (enableCustomPersister?: boolean) => ThemeName | null;
+export declare const generateCSSVariables: (theme: ThemeName) => string;
+export declare const generateCustomThemeCSSVariables: (themeData: SemanticTheme) => string;
+export declare const applyTheme: (theme: ThemeName, customTheme?: Theme, enableCustomPersister?: boolean) => void;
+export declare const themeUtils: {
+    getSystemTheme: () => ThemeName;
+    getStoredTheme: (enableCustomPersister?: boolean) => ThemeName | null;
+    generateCSSVariables: (theme: ThemeName) => string;
+    generateCustomThemeCSSVariables: (themeData: SemanticTheme) => string;
+    applyTheme: (theme: ThemeName, customTheme?: Theme, enableCustomPersister?: boolean) => void;
+    getToken: (category: keyof typeof semanticTokens.light, token: string, theme?: ThemeName) => "orange-700" | "orange-100" | "orange-300" | "orange-900";
+    getCustomToken: (customTheme: Theme, category: keyof SemanticTheme, token: string, theme?: ThemeName) => undefined;
+    getCSSVar: (category: string, token: string) => string;
+};

package/dist/tokens/utils.js

@@ -0,0 +1,93 @@
+import { baseColors as g, alphaColors as l, colorScales as $ } from "./primitives/colors.js";
+import { semanticTokens as a } from "./semantic.js";
+import "react/jsx-runtime";
+import "react";
+import "./context.js";
+import "./tailwind-config.js";
+const d = () => typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light", u = (e = !1) => typeof window > "u" || e ? null : localStorage.getItem("mcr-theme") || null, i = (e) => {
+  const c = a[e];
+  let o = "";
+  return Object.entries(g).forEach(([r, t]) => {
+    o += `--color-${r}: ${t};
+`;
+  }), Object.entries(l.white).forEach(([r, t]) => {
+    o += `--color-white-alpha-${r.replace(/[/.]/g, "-")}: ${t};
+`;
+  }), Object.entries(l.black).forEach(([r, t]) => {
+    o += `--color-black-alpha-${r.replace(/[/.]/g, "-")}: ${t};
+`;
+  }), Object.entries($).forEach(([r, t]) => {
+    Object.entries(t).forEach(([n, s]) => {
+      o += `--color-${r}-${n}: ${s};
+`;
+    });
+  }), Object.entries(c.bg).forEach(([r, t]) => {
+    o += `--color-bg-${r}: var(--color-${t});
+`;
+  }), Object.entries(c.fg).forEach(([r, t]) => {
+    o += `--color-fg-${r}: var(--color-${t});
+`;
+  }), Object.entries(c.border).forEach(([r, t]) => {
+    o += `--color-border-${r}: var(--color-${t});
+`;
+  }), o;
+}, f = (e) => {
+  let c = "";
+  return e.font && Object.entries(e.font).forEach(([o, r]) => {
+    c += `--font-${o}: ${r};
+`;
+  }), e.bg && Object.entries(e.bg).forEach(([o, r]) => {
+    const t = o.replace(/([A-Z])/g, "-$1").toLowerCase();
+    c += `--color-bg-${t}: ${r};
+`;
+  }), e.fg && Object.entries(e.fg).forEach(([o, r]) => {
+    const t = o.replace(/([A-Z])/g, "-$1").toLowerCase();
+    c += `--color-fg-${t}: ${r};
+`;
+  }), e.border && Object.entries(e.border).forEach(([o, r]) => {
+    const t = o.replace(/([A-Z])/g, "-$1").toLowerCase();
+    c += `--color-border-${t}: ${r};
+`;
+  }), e.focusRing && Object.entries(e.focusRing).forEach(([o, r]) => {
+    const t = o.replace(/([A-Z])/g, "-$1").toLowerCase();
+    c += `--color-focus-ring-${t}: ${r};
+`;
+  }), c;
+}, m = (e, c, o = !1) => {
+  if (typeof document > "u") return;
+  document.documentElement.setAttribute("data-theme", e);
+  let r = i(e);
+  if (c && c[e]) {
+    const s = c[e], b = f(s);
+    r += b;
+  }
+  const t = document.getElementById("mcr-theme-variables");
+  t && t.remove();
+  const n = document.createElement("style");
+  n.id = "mcr-theme-variables", n.textContent = `
+    [data-theme="${e}"] {
+      color-scheme: ${e};
+      ${r}
+    }
+  `, document.head.appendChild(n), o || localStorage.setItem("mcr-theme", e);
+}, O = {
+  getSystemTheme: d,
+  getStoredTheme: u,
+  generateCSSVariables: i,
+  generateCustomThemeCSSVariables: f,
+  applyTheme: m,
+  // Get token value for current theme
+  getToken: (e, c, o = "light") => a[o][e]?.[c],
+  // Get token value from custom theme
+  getCustomToken: (e, c, o, r = "light") => e[r]?.[c]?.[o],
+  // Generate CSS custom property name
+  getCSSVar: (e, c) => `var(--color-${e}-${c})`
+};
+export {
+  m as applyTheme,
+  i as generateCSSVariables,
+  f as generateCustomThemeCSSVariables,
+  u as getStoredTheme,
+  d as getSystemTheme,
+  O as themeUtils
+};

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>