shad-m 1.0.0

package/dist/providers/UISystemProvider.js

@@ -0,0 +1,197 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var DeviceSizeWatcher = require('./DeviceSizeWatcher');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var DeviceSizeWatcher__default = /*#__PURE__*/_interopDefault(DeviceSizeWatcher);
+
+var Theme = /* @__PURE__ */ ((Theme2) => {
+  Theme2["LIGHT"] = "light";
+  Theme2["DARK"] = "dark";
+  Theme2["SYSTEM"] = "system";
+  return Theme2;
+})(Theme || {});
+const defaultThemeConfig = {
+  light: {
+    background: "0 0% 100%",
+    foreground: "0 0% 0%",
+    card: "0 0% 100%",
+    "card-foreground": "0 0% 0%",
+    popover: "0 0% 100%",
+    "popover-foreground": "0 0% 0%",
+    primary: "223 93% 50%",
+    "primary-foreground": "0 0% 100%",
+    secondary: "0 0% 100%",
+    "secondary-foreground": "223 93% 50%",
+    muted: "0 0% 96%",
+    "muted-foreground": "0 0% 44%",
+    accent: "225 100% 97%",
+    // COLORS.blue['100']
+    "accent-foreground": "0 0% 0%",
+    destructive: "4 79% 52%",
+    // COLORS.red['500']
+    "destructive-foreground": "0 0% 100%",
+    success: "144 84% 43%",
+    // COLORS.green['500']
+    "success-foreground": "0 0% 100%",
+    border: "0 0% 87%",
+    input: "0 0% 87%",
+    radius: "0.5rem",
+    "chart-1": "225 100% 97%",
+    "chart-2": "224 100% 92%",
+    "chart-3": "223 100% 83%",
+    "chart-4": "223 90% 63%",
+    "chart-5": "223 93% 50%"
+  },
+  dark: {
+    background: "0 0% 100%",
+    foreground: "0 0% 0%",
+    card: "0 0% 100%",
+    "card-foreground": "0 0% 0%",
+    popover: "0 0% 100%",
+    "popover-foreground": "0 0% 0%",
+    primary: "223 93% 50%",
+    "primary-foreground": "0 0% 100%",
+    secondary: "0 0% 100%",
+    "secondary-foreground": "223 93% 50%",
+    muted: "0 0% 92%",
+    "muted-foreground": "0 0% 44%",
+    accent: "225 100% 97%",
+    // COLORS.blue['100']
+    "accent-foreground": "0 0% 0%",
+    destructive: "4 79% 52%",
+    // COLORS.red['500']
+    "destructive-foreground": "0 0% 100%",
+    success: "144 84% 43%",
+    // COLORS.green['500']
+    "success-foreground": "0 0% 100%",
+    border: "0 0% 87%",
+    input: "0 0% 87%",
+    radius: "0.5rem",
+    "chart-1": "225 100% 97%",
+    "chart-2": "224 100% 92%",
+    "chart-3": "223 100% 83%",
+    "chart-4": "223 90% 63%",
+    "chart-5": "223 93% 50%"
+  }
+};
+const UISystemContext = react.createContext(void 0);
+const useUISystemContext = () => {
+  const context = react.useContext(UISystemContext);
+  if (!context) {
+    throw new Error("useUISystemContext must be used within UISystemProvider");
+  }
+  return context;
+};
+const useTheme = () => {
+  const context = useUISystemContext();
+  return {
+    theme: context.theme,
+    setTheme: context.setTheme,
+    resolvedTheme: context.resolvedTheme,
+    systemTheme: context.systemTheme,
+    themeConfig: context.themeConfig
+  };
+};
+const getSystemTheme = () => {
+  if (typeof window === "undefined") return "light" /* LIGHT */;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" /* DARK */ : "light" /* LIGHT */;
+};
+const applyTheme = (theme, themeConfig, disableTransitions) => {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  const colors = themeConfig[theme];
+  if (disableTransitions) {
+    const css = document.createElement("style");
+    css.appendChild(
+      document.createTextNode(
+        `*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`
+      )
+    );
+    document.head.appendChild(css);
+    (() => window.getComputedStyle(document.body))();
+    setTimeout(() => {
+      document.head.removeChild(css);
+    }, 1);
+  }
+  Object.entries(colors).forEach(([key, value]) => {
+    root.style.setProperty(`--${key}`, value);
+  });
+  root.classList.remove("light", "dark");
+  root.classList.add(theme);
+};
+const UISystemProvider = ({
+  children,
+  sendTrack = () => {
+    console.warn("UISystemProvider: sendTrack function not provided");
+  },
+  defaultTheme = "light" /* LIGHT */,
+  storageKey = "ui-theme",
+  themeConfig: customThemeConfig,
+  enableSystem = true,
+  disableTransitionOnChange = false,
+  LinkComponent
+}) => {
+  const [theme, setThemeState] = react.useState(() => {
+    if (typeof window === "undefined") return defaultTheme;
+    try {
+      return localStorage.getItem(storageKey) || defaultTheme;
+    } catch {
+      return defaultTheme;
+    }
+  });
+  const [systemTheme, setSystemTheme] = react.useState(() => getSystemTheme());
+  const mergedThemeConfig = react.useMemo(
+    () => ({
+      light: { ...defaultThemeConfig.light, ...customThemeConfig?.light },
+      dark: { ...defaultThemeConfig.dark, ...customThemeConfig?.dark }
+    }),
+    [customThemeConfig]
+  );
+  const resolvedTheme = theme === "system" /* SYSTEM */ ? systemTheme : theme;
+  const setTheme = (newTheme) => {
+    setThemeState(newTheme);
+    try {
+      localStorage.setItem(storageKey, newTheme);
+    } catch {
+    }
+  };
+  react.useEffect(() => {
+    if (!enableSystem) return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (e) => {
+      setSystemTheme(e.matches ? "dark" /* DARK */ : "light" /* LIGHT */);
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [enableSystem]);
+  react.useEffect(() => {
+    applyTheme(resolvedTheme, mergedThemeConfig, disableTransitionOnChange);
+  }, [resolvedTheme, mergedThemeConfig, disableTransitionOnChange]);
+  const contextValue = react.useMemo(
+    () => ({
+      sendTrack,
+      theme,
+      setTheme,
+      resolvedTheme,
+      systemTheme,
+      themeConfig: mergedThemeConfig,
+      LinkComponent
+    }),
+    [sendTrack, theme, resolvedTheme, systemTheme, mergedThemeConfig, LinkComponent]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(UISystemContext.Provider, { value: contextValue, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DeviceSizeWatcher__default.default, {}),
+    children
+  ] });
+};
+
+exports.Theme = Theme;
+exports.UISystemProvider = UISystemProvider;
+exports.useTheme = useTheme;
+exports.useUISystemContext = useUISystemContext;
+//# sourceMappingURL=UISystemProvider.js.map
+//# sourceMappingURL=UISystemProvider.js.map

package/dist/providers/UISystemProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/providers/UISystemProvider.tsx"],"names":["Theme","createContext","useContext","useState","useMemo","useEffect","jsxs","jsx","DeviceSizeWatcher"],"mappings":"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","file":"UISystemProvider.js","sourcesContent":["'use client';\nimport React, { createContext, useContext, useEffect, useMemo, useState } from 'react';\nimport DeviceSizeWatcher from './DeviceSizeWatcher';\n\n// Theme enum\nexport enum Theme {\n  LIGHT = 'light',\n  DARK = 'dark',\n  SYSTEM = 'system',\n}\n\nexport interface ThemeColors {\n  background: string;\n  foreground: string;\n  card: string;\n  'card-foreground': string;\n  popover: string;\n  'popover-foreground': string;\n  primary: string;\n  'primary-foreground': string;\n  secondary: string;\n  'secondary-foreground': string;\n  muted: string;\n  'muted-foreground': string;\n  accent: string;\n  'accent-foreground': string;\n  destructive: string;\n  'destructive-foreground': string;\n  success: string;\n  'success-foreground': string;\n  border: string;\n  input: string;\n  radius: string;\n  'chart-1': string;\n  'chart-2': string;\n  'chart-3': string;\n  'chart-4': string;\n  'chart-5': string;\n}\n\nexport interface ThemeConfig {\n  light: ThemeColors;\n  dark: ThemeColors;\n}\n\n// Default theme configuration\nconst defaultThemeConfig: ThemeConfig = {\n  light: {\n    background: '0 0% 100%',\n    foreground: '0 0% 0%',\n    card: '0 0% 100%',\n    'card-foreground': '0 0% 0%',\n    popover: '0 0% 100%',\n    'popover-foreground': '0 0% 0%',\n    primary: '223 93% 50%',\n    'primary-foreground': '0 0% 100%',\n    secondary: '0 0% 100%',\n    'secondary-foreground': '223 93% 50%',\n    muted: '0 0% 96%',\n    'muted-foreground': '0 0% 44%',\n    accent: '225 100% 97%', // COLORS.blue['100']\n    'accent-foreground': '0 0% 0%',\n    destructive: '4 79% 52%', // COLORS.red['500']\n    'destructive-foreground': '0 0% 100%',\n    success: '144 84% 43%', // COLORS.green['500']\n    'success-foreground': '0 0% 100%',\n    border: '0 0% 87%',\n    input: '0 0% 87%',\n    radius: '0.5rem',\n    'chart-1': '225 100% 97%',\n    'chart-2': '224 100% 92%',\n    'chart-3': '223 100% 83%',\n    'chart-4': '223 90% 63%',\n    'chart-5': '223 93% 50%',\n  },\n  dark: {\n    background: '0 0% 100%',\n    foreground: '0 0% 0%',\n    card: '0 0% 100%',\n    'card-foreground': '0 0% 0%',\n    popover: '0 0% 100%',\n    'popover-foreground': '0 0% 0%',\n    primary: '223 93% 50%',\n    'primary-foreground': '0 0% 100%',\n    secondary: '0 0% 100%',\n    'secondary-foreground': '223 93% 50%',\n    muted: '0 0% 92%',\n    'muted-foreground': '0 0% 44%',\n    accent: '225 100% 97%', // COLORS.blue['100']\n    'accent-foreground': '0 0% 0%',\n    destructive: '4 79% 52%', // COLORS.red['500']\n    'destructive-foreground': '0 0% 100%',\n    success: '144 84% 43%', // COLORS.green['500']\n    'success-foreground': '0 0% 100%',\n    border: '0 0% 87%',\n    input: '0 0% 87%',\n    radius: '0.5rem',\n    'chart-1': '225 100% 97%',\n    'chart-2': '224 100% 92%',\n    'chart-3': '223 100% 83%',\n    'chart-4': '223 90% 63%',\n    'chart-5': '223 93% 50%',\n  },\n};\n\n// Define the context type\ninterface UISystemContextType {\n  sendTrack: (name: string, type: string, other?: Record<string, any>) => void;\n  theme: Theme;\n  setTheme: (theme: Theme) => void;\n  resolvedTheme: Theme.LIGHT | Theme.DARK; // Actual theme after resolving 'system'\n  themeConfig: ThemeConfig;\n  systemTheme: Theme.LIGHT | Theme.DARK; // Expose system theme for components that need it\n  LinkComponent?: React.ComponentType<any>; // Global Link component for navigation (supports Next.js Link, React Router Link, etc.)\n}\n\n// Create the context\nconst UISystemContext = createContext<UISystemContextType | undefined>(undefined);\n\n// Hook to use the context\nexport const useUISystemContext = () => {\n  const context = useContext(UISystemContext);\n  if (!context) {\n    throw new Error('useUISystemContext must be used within UISystemProvider');\n  }\n  return context;\n};\n\n// Theme hook for easier access\nexport const useTheme = () => {\n  const context = useUISystemContext();\n  return {\n    theme: context.theme,\n    setTheme: context.setTheme,\n    resolvedTheme: context.resolvedTheme,\n    systemTheme: context.systemTheme,\n    themeConfig: context.themeConfig,\n  };\n};\n\n// Provider props\ninterface UISystemProviderProps {\n  children: React.ReactNode;\n  sendTrack?: (name: string, type: string, other?: Record<string, any>) => void;\n  defaultTheme?: Theme;\n  storageKey?: string;\n  themeConfig?: Partial<ThemeConfig>;\n  enableSystem?: boolean;\n  disableTransitionOnChange?: boolean;\n  LinkComponent?: React.ComponentType<any>; // Global Link component (e.g., Next.js Link, React Router Link)\n}\n\n// Helper function to get system theme\nconst getSystemTheme = (): Theme.LIGHT | Theme.DARK => {\n  if (typeof window === 'undefined') return Theme.LIGHT;\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? Theme.DARK : Theme.LIGHT;\n};\n\n// Helper function to apply theme variables to document\nconst applyTheme = (\n  theme: 'light' | 'dark',\n  themeConfig: ThemeConfig,\n  disableTransitions?: boolean,\n) => {\n  if (typeof document === 'undefined') return;\n\n  const root = document.documentElement;\n  const colors = themeConfig[theme];\n\n  // Disable transitions temporarily if requested\n  if (disableTransitions) {\n    const css = document.createElement('style');\n    css.appendChild(\n      document.createTextNode(\n        `*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`,\n      ),\n    );\n    document.head.appendChild(css);\n\n    // Force reflow\n    (() => window.getComputedStyle(document.body))();\n\n    setTimeout(() => {\n      document.head.removeChild(css);\n    }, 1);\n  }\n\n  // Apply theme variables\n  Object.entries(colors).forEach(([key, value]) => {\n    root.style.setProperty(`--${key}`, value);\n  });\n\n  // Update class on html element\n  root.classList.remove('light', 'dark');\n  root.classList.add(theme);\n};\n\n// Provider component\nexport const UISystemProvider: React.FC<UISystemProviderProps> = ({\n  children,\n  sendTrack = () => {\n    // Default no-op function if no sendTrack is provided\n    console.warn('UISystemProvider: sendTrack function not provided');\n  },\n  defaultTheme = Theme.LIGHT,\n  storageKey = 'ui-theme',\n  themeConfig: customThemeConfig,\n  enableSystem = true,\n  disableTransitionOnChange = false,\n  LinkComponent,\n}) => {\n  const [theme, setThemeState] = useState<Theme>(() => {\n    if (typeof window === 'undefined') return defaultTheme;\n    try {\n      return (localStorage.getItem(storageKey) as Theme) || defaultTheme;\n    } catch {\n      return defaultTheme;\n    }\n  });\n\n  const [systemTheme, setSystemTheme] = useState<Theme.LIGHT | Theme.DARK>(() => getSystemTheme());\n\n  // Merge custom theme config with default\n  const mergedThemeConfig = useMemo(\n    () => ({\n      light: { ...defaultThemeConfig.light, ...customThemeConfig?.light },\n      dark: { ...defaultThemeConfig.dark, ...customThemeConfig?.dark },\n    }),\n    [customThemeConfig],\n  );\n\n  // Resolved theme (handles 'system' theme)\n  const resolvedTheme: Theme.LIGHT | Theme.DARK =\n    theme === Theme.SYSTEM ? systemTheme : (theme as Theme.LIGHT | Theme.DARK);\n\n  // Set theme function\n  const setTheme = (newTheme: Theme) => {\n    setThemeState(newTheme);\n    try {\n      localStorage.setItem(storageKey, newTheme);\n    } catch {\n      // Handle localStorage errors silently\n    }\n  };\n\n  // Listen for system theme changes\n  useEffect(() => {\n    if (!enableSystem) return;\n\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n    const handleChange = (e: MediaQueryListEvent) => {\n      setSystemTheme(e.matches ? Theme.DARK : Theme.LIGHT);\n    };\n\n    mediaQuery.addEventListener('change', handleChange);\n    return () => mediaQuery.removeEventListener('change', handleChange);\n  }, [enableSystem]);\n\n  // Apply theme when resolved theme changes\n  useEffect(() => {\n    applyTheme(resolvedTheme, mergedThemeConfig, disableTransitionOnChange);\n  }, [resolvedTheme, mergedThemeConfig, disableTransitionOnChange]);\n\n  const contextValue = useMemo(\n    () => ({\n      sendTrack,\n      theme,\n      setTheme,\n      resolvedTheme,\n      systemTheme,\n      themeConfig: mergedThemeConfig,\n      LinkComponent: LinkComponent as React.ComponentType<any> | undefined,\n    }),\n    [sendTrack, theme, resolvedTheme, systemTheme, mergedThemeConfig, LinkComponent],\n  );\n\n  return (\n    <UISystemContext.Provider value={contextValue}>\n      <DeviceSizeWatcher />\n      {children}\n    </UISystemContext.Provider>\n  );\n};\n"]}

package/dist/providers/UISystemProvider.mjs

@@ -0,0 +1,188 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useMemo, useEffect } from 'react';
+import DeviceSizeWatcher from './DeviceSizeWatcher';
+
+var Theme = /* @__PURE__ */ ((Theme2) => {
+  Theme2["LIGHT"] = "light";
+  Theme2["DARK"] = "dark";
+  Theme2["SYSTEM"] = "system";
+  return Theme2;
+})(Theme || {});
+const defaultThemeConfig = {
+  light: {
+    background: "0 0% 100%",
+    foreground: "0 0% 0%",
+    card: "0 0% 100%",
+    "card-foreground": "0 0% 0%",
+    popover: "0 0% 100%",
+    "popover-foreground": "0 0% 0%",
+    primary: "223 93% 50%",
+    "primary-foreground": "0 0% 100%",
+    secondary: "0 0% 100%",
+    "secondary-foreground": "223 93% 50%",
+    muted: "0 0% 96%",
+    "muted-foreground": "0 0% 44%",
+    accent: "225 100% 97%",
+    // COLORS.blue['100']
+    "accent-foreground": "0 0% 0%",
+    destructive: "4 79% 52%",
+    // COLORS.red['500']
+    "destructive-foreground": "0 0% 100%",
+    success: "144 84% 43%",
+    // COLORS.green['500']
+    "success-foreground": "0 0% 100%",
+    border: "0 0% 87%",
+    input: "0 0% 87%",
+    radius: "0.5rem",
+    "chart-1": "225 100% 97%",
+    "chart-2": "224 100% 92%",
+    "chart-3": "223 100% 83%",
+    "chart-4": "223 90% 63%",
+    "chart-5": "223 93% 50%"
+  },
+  dark: {
+    background: "0 0% 100%",
+    foreground: "0 0% 0%",
+    card: "0 0% 100%",
+    "card-foreground": "0 0% 0%",
+    popover: "0 0% 100%",
+    "popover-foreground": "0 0% 0%",
+    primary: "223 93% 50%",
+    "primary-foreground": "0 0% 100%",
+    secondary: "0 0% 100%",
+    "secondary-foreground": "223 93% 50%",
+    muted: "0 0% 92%",
+    "muted-foreground": "0 0% 44%",
+    accent: "225 100% 97%",
+    // COLORS.blue['100']
+    "accent-foreground": "0 0% 0%",
+    destructive: "4 79% 52%",
+    // COLORS.red['500']
+    "destructive-foreground": "0 0% 100%",
+    success: "144 84% 43%",
+    // COLORS.green['500']
+    "success-foreground": "0 0% 100%",
+    border: "0 0% 87%",
+    input: "0 0% 87%",
+    radius: "0.5rem",
+    "chart-1": "225 100% 97%",
+    "chart-2": "224 100% 92%",
+    "chart-3": "223 100% 83%",
+    "chart-4": "223 90% 63%",
+    "chart-5": "223 93% 50%"
+  }
+};
+const UISystemContext = createContext(void 0);
+const useUISystemContext = () => {
+  const context = useContext(UISystemContext);
+  if (!context) {
+    throw new Error("useUISystemContext must be used within UISystemProvider");
+  }
+  return context;
+};
+const useTheme = () => {
+  const context = useUISystemContext();
+  return {
+    theme: context.theme,
+    setTheme: context.setTheme,
+    resolvedTheme: context.resolvedTheme,
+    systemTheme: context.systemTheme,
+    themeConfig: context.themeConfig
+  };
+};
+const getSystemTheme = () => {
+  if (typeof window === "undefined") return "light" /* LIGHT */;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" /* DARK */ : "light" /* LIGHT */;
+};
+const applyTheme = (theme, themeConfig, disableTransitions) => {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  const colors = themeConfig[theme];
+  if (disableTransitions) {
+    const css = document.createElement("style");
+    css.appendChild(
+      document.createTextNode(
+        `*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`
+      )
+    );
+    document.head.appendChild(css);
+    (() => window.getComputedStyle(document.body))();
+    setTimeout(() => {
+      document.head.removeChild(css);
+    }, 1);
+  }
+  Object.entries(colors).forEach(([key, value]) => {
+    root.style.setProperty(`--${key}`, value);
+  });
+  root.classList.remove("light", "dark");
+  root.classList.add(theme);
+};
+const UISystemProvider = ({
+  children,
+  sendTrack = () => {
+    console.warn("UISystemProvider: sendTrack function not provided");
+  },
+  defaultTheme = "light" /* LIGHT */,
+  storageKey = "ui-theme",
+  themeConfig: customThemeConfig,
+  enableSystem = true,
+  disableTransitionOnChange = false,
+  LinkComponent
+}) => {
+  const [theme, setThemeState] = useState(() => {
+    if (typeof window === "undefined") return defaultTheme;
+    try {
+      return localStorage.getItem(storageKey) || defaultTheme;
+    } catch {
+      return defaultTheme;
+    }
+  });
+  const [systemTheme, setSystemTheme] = useState(() => getSystemTheme());
+  const mergedThemeConfig = useMemo(
+    () => ({
+      light: { ...defaultThemeConfig.light, ...customThemeConfig?.light },
+      dark: { ...defaultThemeConfig.dark, ...customThemeConfig?.dark }
+    }),
+    [customThemeConfig]
+  );
+  const resolvedTheme = theme === "system" /* SYSTEM */ ? systemTheme : theme;
+  const setTheme = (newTheme) => {
+    setThemeState(newTheme);
+    try {
+      localStorage.setItem(storageKey, newTheme);
+    } catch {
+    }
+  };
+  useEffect(() => {
+    if (!enableSystem) return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (e) => {
+      setSystemTheme(e.matches ? "dark" /* DARK */ : "light" /* LIGHT */);
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [enableSystem]);
+  useEffect(() => {
+    applyTheme(resolvedTheme, mergedThemeConfig, disableTransitionOnChange);
+  }, [resolvedTheme, mergedThemeConfig, disableTransitionOnChange]);
+  const contextValue = useMemo(
+    () => ({
+      sendTrack,
+      theme,
+      setTheme,
+      resolvedTheme,
+      systemTheme,
+      themeConfig: mergedThemeConfig,
+      LinkComponent
+    }),
+    [sendTrack, theme, resolvedTheme, systemTheme, mergedThemeConfig, LinkComponent]
+  );
+  return /* @__PURE__ */ jsxs(UISystemContext.Provider, { value: contextValue, children: [
+    /* @__PURE__ */ jsx(DeviceSizeWatcher, {}),
+    children
+  ] });
+};
+
+export { Theme, UISystemProvider, useTheme, useUISystemContext };
+//# sourceMappingURL=UISystemProvider.mjs.map
+//# sourceMappingURL=UISystemProvider.mjs.map

package/dist/providers/UISystemProvider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/providers/UISystemProvider.tsx"],"names":["Theme"],"mappings":"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","file":"UISystemProvider.mjs","sourcesContent":["'use client';\nimport React, { createContext, useContext, useEffect, useMemo, useState } from 'react';\nimport DeviceSizeWatcher from './DeviceSizeWatcher';\n\n// Theme enum\nexport enum Theme {\n  LIGHT = 'light',\n  DARK = 'dark',\n  SYSTEM = 'system',\n}\n\nexport interface ThemeColors {\n  background: string;\n  foreground: string;\n  card: string;\n  'card-foreground': string;\n  popover: string;\n  'popover-foreground': string;\n  primary: string;\n  'primary-foreground': string;\n  secondary: string;\n  'secondary-foreground': string;\n  muted: string;\n  'muted-foreground': string;\n  accent: string;\n  'accent-foreground': string;\n  destructive: string;\n  'destructive-foreground': string;\n  success: string;\n  'success-foreground': string;\n  border: string;\n  input: string;\n  radius: string;\n  'chart-1': string;\n  'chart-2': string;\n  'chart-3': string;\n  'chart-4': string;\n  'chart-5': string;\n}\n\nexport interface ThemeConfig {\n  light: ThemeColors;\n  dark: ThemeColors;\n}\n\n// Default theme configuration\nconst defaultThemeConfig: ThemeConfig = {\n  light: {\n    background: '0 0% 100%',\n    foreground: '0 0% 0%',\n    card: '0 0% 100%',\n    'card-foreground': '0 0% 0%',\n    popover: '0 0% 100%',\n    'popover-foreground': '0 0% 0%',\n    primary: '223 93% 50%',\n    'primary-foreground': '0 0% 100%',\n    secondary: '0 0% 100%',\n    'secondary-foreground': '223 93% 50%',\n    muted: '0 0% 96%',\n    'muted-foreground': '0 0% 44%',\n    accent: '225 100% 97%', // COLORS.blue['100']\n    'accent-foreground': '0 0% 0%',\n    destructive: '4 79% 52%', // COLORS.red['500']\n    'destructive-foreground': '0 0% 100%',\n    success: '144 84% 43%', // COLORS.green['500']\n    'success-foreground': '0 0% 100%',\n    border: '0 0% 87%',\n    input: '0 0% 87%',\n    radius: '0.5rem',\n    'chart-1': '225 100% 97%',\n    'chart-2': '224 100% 92%',\n    'chart-3': '223 100% 83%',\n    'chart-4': '223 90% 63%',\n    'chart-5': '223 93% 50%',\n  },\n  dark: {\n    background: '0 0% 100%',\n    foreground: '0 0% 0%',\n    card: '0 0% 100%',\n    'card-foreground': '0 0% 0%',\n    popover: '0 0% 100%',\n    'popover-foreground': '0 0% 0%',\n    primary: '223 93% 50%',\n    'primary-foreground': '0 0% 100%',\n    secondary: '0 0% 100%',\n    'secondary-foreground': '223 93% 50%',\n    muted: '0 0% 92%',\n    'muted-foreground': '0 0% 44%',\n    accent: '225 100% 97%', // COLORS.blue['100']\n    'accent-foreground': '0 0% 0%',\n    destructive: '4 79% 52%', // COLORS.red['500']\n    'destructive-foreground': '0 0% 100%',\n    success: '144 84% 43%', // COLORS.green['500']\n    'success-foreground': '0 0% 100%',\n    border: '0 0% 87%',\n    input: '0 0% 87%',\n    radius: '0.5rem',\n    'chart-1': '225 100% 97%',\n    'chart-2': '224 100% 92%',\n    'chart-3': '223 100% 83%',\n    'chart-4': '223 90% 63%',\n    'chart-5': '223 93% 50%',\n  },\n};\n\n// Define the context type\ninterface UISystemContextType {\n  sendTrack: (name: string, type: string, other?: Record<string, any>) => void;\n  theme: Theme;\n  setTheme: (theme: Theme) => void;\n  resolvedTheme: Theme.LIGHT | Theme.DARK; // Actual theme after resolving 'system'\n  themeConfig: ThemeConfig;\n  systemTheme: Theme.LIGHT | Theme.DARK; // Expose system theme for components that need it\n  LinkComponent?: React.ComponentType<any>; // Global Link component for navigation (supports Next.js Link, React Router Link, etc.)\n}\n\n// Create the context\nconst UISystemContext = createContext<UISystemContextType | undefined>(undefined);\n\n// Hook to use the context\nexport const useUISystemContext = () => {\n  const context = useContext(UISystemContext);\n  if (!context) {\n    throw new Error('useUISystemContext must be used within UISystemProvider');\n  }\n  return context;\n};\n\n// Theme hook for easier access\nexport const useTheme = () => {\n  const context = useUISystemContext();\n  return {\n    theme: context.theme,\n    setTheme: context.setTheme,\n    resolvedTheme: context.resolvedTheme,\n    systemTheme: context.systemTheme,\n    themeConfig: context.themeConfig,\n  };\n};\n\n// Provider props\ninterface UISystemProviderProps {\n  children: React.ReactNode;\n  sendTrack?: (name: string, type: string, other?: Record<string, any>) => void;\n  defaultTheme?: Theme;\n  storageKey?: string;\n  themeConfig?: Partial<ThemeConfig>;\n  enableSystem?: boolean;\n  disableTransitionOnChange?: boolean;\n  LinkComponent?: React.ComponentType<any>; // Global Link component (e.g., Next.js Link, React Router Link)\n}\n\n// Helper function to get system theme\nconst getSystemTheme = (): Theme.LIGHT | Theme.DARK => {\n  if (typeof window === 'undefined') return Theme.LIGHT;\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? Theme.DARK : Theme.LIGHT;\n};\n\n// Helper function to apply theme variables to document\nconst applyTheme = (\n  theme: 'light' | 'dark',\n  themeConfig: ThemeConfig,\n  disableTransitions?: boolean,\n) => {\n  if (typeof document === 'undefined') return;\n\n  const root = document.documentElement;\n  const colors = themeConfig[theme];\n\n  // Disable transitions temporarily if requested\n  if (disableTransitions) {\n    const css = document.createElement('style');\n    css.appendChild(\n      document.createTextNode(\n        `*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`,\n      ),\n    );\n    document.head.appendChild(css);\n\n    // Force reflow\n    (() => window.getComputedStyle(document.body))();\n\n    setTimeout(() => {\n      document.head.removeChild(css);\n    }, 1);\n  }\n\n  // Apply theme variables\n  Object.entries(colors).forEach(([key, value]) => {\n    root.style.setProperty(`--${key}`, value);\n  });\n\n  // Update class on html element\n  root.classList.remove('light', 'dark');\n  root.classList.add(theme);\n};\n\n// Provider component\nexport const UISystemProvider: React.FC<UISystemProviderProps> = ({\n  children,\n  sendTrack = () => {\n    // Default no-op function if no sendTrack is provided\n    console.warn('UISystemProvider: sendTrack function not provided');\n  },\n  defaultTheme = Theme.LIGHT,\n  storageKey = 'ui-theme',\n  themeConfig: customThemeConfig,\n  enableSystem = true,\n  disableTransitionOnChange = false,\n  LinkComponent,\n}) => {\n  const [theme, setThemeState] = useState<Theme>(() => {\n    if (typeof window === 'undefined') return defaultTheme;\n    try {\n      return (localStorage.getItem(storageKey) as Theme) || defaultTheme;\n    } catch {\n      return defaultTheme;\n    }\n  });\n\n  const [systemTheme, setSystemTheme] = useState<Theme.LIGHT | Theme.DARK>(() => getSystemTheme());\n\n  // Merge custom theme config with default\n  const mergedThemeConfig = useMemo(\n    () => ({\n      light: { ...defaultThemeConfig.light, ...customThemeConfig?.light },\n      dark: { ...defaultThemeConfig.dark, ...customThemeConfig?.dark },\n    }),\n    [customThemeConfig],\n  );\n\n  // Resolved theme (handles 'system' theme)\n  const resolvedTheme: Theme.LIGHT | Theme.DARK =\n    theme === Theme.SYSTEM ? systemTheme : (theme as Theme.LIGHT | Theme.DARK);\n\n  // Set theme function\n  const setTheme = (newTheme: Theme) => {\n    setThemeState(newTheme);\n    try {\n      localStorage.setItem(storageKey, newTheme);\n    } catch {\n      // Handle localStorage errors silently\n    }\n  };\n\n  // Listen for system theme changes\n  useEffect(() => {\n    if (!enableSystem) return;\n\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n    const handleChange = (e: MediaQueryListEvent) => {\n      setSystemTheme(e.matches ? Theme.DARK : Theme.LIGHT);\n    };\n\n    mediaQuery.addEventListener('change', handleChange);\n    return () => mediaQuery.removeEventListener('change', handleChange);\n  }, [enableSystem]);\n\n  // Apply theme when resolved theme changes\n  useEffect(() => {\n    applyTheme(resolvedTheme, mergedThemeConfig, disableTransitionOnChange);\n  }, [resolvedTheme, mergedThemeConfig, disableTransitionOnChange]);\n\n  const contextValue = useMemo(\n    () => ({\n      sendTrack,\n      theme,\n      setTheme,\n      resolvedTheme,\n      systemTheme,\n      themeConfig: mergedThemeConfig,\n      LinkComponent: LinkComponent as React.ComponentType<any> | undefined,\n    }),\n    [sendTrack, theme, resolvedTheme, systemTheme, mergedThemeConfig, LinkComponent],\n  );\n\n  return (\n    <UISystemContext.Provider value={contextValue}>\n      <DeviceSizeWatcher />\n      {children}\n    </UISystemContext.Provider>\n  );\n};\n"]}

package/dist/providers/index.d.ts

@@ -0,0 +1,3 @@
+export { UISystemProvider, useTheme, useUISystemContext, Theme } from './UISystemProvider';
+export type { ThemeColors, ThemeConfig } from './UISystemProvider';
+//# sourceMappingURL=index.d.ts.map

package/dist/providers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/providers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3F,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/providers/index.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var UISystemProvider = require('./UISystemProvider');
+
+
+
+Object.defineProperty(exports, "Theme", {
+  enumerable: true,
+  get: function () { return UISystemProvider.Theme; }
+});
+Object.defineProperty(exports, "UISystemProvider", {
+  enumerable: true,
+  get: function () { return UISystemProvider.UISystemProvider; }
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: function () { return UISystemProvider.useTheme; }
+});
+Object.defineProperty(exports, "useUISystemContext", {
+  enumerable: true,
+  get: function () { return UISystemProvider.useUISystemContext; }
+});
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/providers/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/dist/providers/index.mjs

@@ -0,0 +1,3 @@
+export { Theme, UISystemProvider, useTheme, useUISystemContext } from './UISystemProvider';
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/providers/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.mjs","sourcesContent":[]}

package/dist/theme.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Design System
+ * Định nghĩa các tokens cho hệ thống thiết kế
+ */
+export declare const TYPOGRAPHY: any;
+export declare const COLORS: any;
+export declare const EFFECTS: any;
+export declare const SCREENS: any;
+export declare const THEME: any;
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;;GAGG;AA4DH,eAAO,MAAM,UAAU,EAAE,GA6BxB,CAAC;AAGF,eAAO,MAAM,MAAM,EAAE,GAsHpB,CAAC;AAGF,eAAO,MAAM,OAAO,EAAE,GAMrB,CAAC;AAGF,eAAO,MAAM,OAAO,EAAE,GAuBrB,CAAC;AAGF,eAAO,MAAM,KAAK,EAAE,GAKnB,CAAC"}