@prismiq/react 0.1.0

package/dist/chunk-T6STUE7E.js

@@ -0,0 +1,321 @@
+import { createContext, useState, useMemo, useCallback, useEffect, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/theme/defaults.ts
+var lightTheme = {
+  name: "light",
+  colors: {
+    primary: "#3b82f6",
+    primaryHover: "#2563eb",
+    background: "#ffffff",
+    surface: "#f9fafb",
+    surfaceHover: "#f3f4f6",
+    text: "#111827",
+    textMuted: "#6b7280",
+    textInverse: "#ffffff",
+    border: "#e5e7eb",
+    borderFocus: "#3b82f6",
+    success: "#10b981",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#3b82f6"
+  },
+  fonts: {
+    sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    mono: '"SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace'
+  },
+  fontSizes: {
+    xs: "10px",
+    sm: "12px",
+    base: "14px",
+    lg: "16px",
+    xl: "18px",
+    "2xl": "20px"
+  },
+  spacing: {
+    xs: "4px",
+    sm: "8px",
+    md: "12px",
+    lg: "16px",
+    xl: "24px"
+  },
+  radius: {
+    none: "0",
+    sm: "2px",
+    md: "4px",
+    lg: "8px",
+    full: "9999px"
+  },
+  shadows: {
+    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
+  },
+  chart: {
+    colors: [
+      "#3b82f6",
+      // blue
+      "#10b981",
+      // emerald
+      "#f59e0b",
+      // amber
+      "#ef4444",
+      // red
+      "#8b5cf6",
+      // violet
+      "#06b6d4",
+      // cyan
+      "#f97316",
+      // orange
+      "#84cc16",
+      // lime
+      "#ec4899",
+      // pink
+      "#6366f1"
+      // indigo
+    ],
+    gridColor: "#e5e7eb",
+    axisColor: "#6b7280",
+    tooltipBackground: "#111827"
+  }
+};
+var darkTheme = {
+  name: "dark",
+  colors: {
+    primary: "#60a5fa",
+    primaryHover: "#3b82f6",
+    background: "#111827",
+    surface: "#1f2937",
+    surfaceHover: "#374151",
+    text: "#f9fafb",
+    textMuted: "#9ca3af",
+    textInverse: "#111827",
+    border: "#374151",
+    borderFocus: "#60a5fa",
+    success: "#34d399",
+    warning: "#fbbf24",
+    error: "#f87171",
+    info: "#60a5fa"
+  },
+  fonts: {
+    sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    mono: '"SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace'
+  },
+  fontSizes: {
+    xs: "10px",
+    sm: "12px",
+    base: "14px",
+    lg: "16px",
+    xl: "18px",
+    "2xl": "20px"
+  },
+  spacing: {
+    xs: "4px",
+    sm: "8px",
+    md: "12px",
+    lg: "16px",
+    xl: "24px"
+  },
+  radius: {
+    none: "0",
+    sm: "2px",
+    md: "4px",
+    lg: "8px",
+    full: "9999px"
+  },
+  shadows: {
+    sm: "0 1px 2px 0 rgba(0, 0, 0, 0.3)",
+    md: "0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3)",
+    lg: "0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3)"
+  },
+  chart: {
+    colors: [
+      "#60a5fa",
+      // blue
+      "#34d399",
+      // emerald
+      "#fbbf24",
+      // amber
+      "#f87171",
+      // red
+      "#a78bfa",
+      // violet
+      "#22d3ee",
+      // cyan
+      "#fb923c",
+      // orange
+      "#a3e635",
+      // lime
+      "#f472b6",
+      // pink
+      "#818cf8"
+      // indigo
+    ],
+    gridColor: "#374151",
+    axisColor: "#9ca3af",
+    tooltipBackground: "#1f2937"
+  }
+};
+var STORAGE_KEY = "prismiq-theme-mode";
+var CSS_VAR_PREFIX = "--prismiq";
+var ThemeContext = createContext(null);
+function deepMerge(target, source) {
+  const result = { ...target };
+  for (const key in source) {
+    const sourceValue = source[key];
+    const targetValue = target[key];
+    if (sourceValue !== void 0 && typeof sourceValue === "object" && sourceValue !== null && !Array.isArray(sourceValue) && typeof targetValue === "object" && targetValue !== null && !Array.isArray(targetValue)) {
+      result[key] = deepMerge(
+        targetValue,
+        sourceValue
+      );
+    } else if (sourceValue !== void 0) {
+      result[key] = sourceValue;
+    }
+  }
+  return result;
+}
+function themeToCSSVariables(theme) {
+  const vars = [];
+  for (const [key, value] of Object.entries(theme.colors)) {
+    vars.push(`${CSS_VAR_PREFIX}-color-${kebabCase(key)}: ${value}`);
+  }
+  vars.push(`${CSS_VAR_PREFIX}-font-sans: ${theme.fonts.sans}`);
+  vars.push(`${CSS_VAR_PREFIX}-font-mono: ${theme.fonts.mono}`);
+  for (const [key, value] of Object.entries(theme.fontSizes)) {
+    vars.push(`${CSS_VAR_PREFIX}-font-size-${key}: ${value}`);
+  }
+  for (const [key, value] of Object.entries(theme.spacing)) {
+    vars.push(`${CSS_VAR_PREFIX}-spacing-${key}: ${value}`);
+  }
+  for (const [key, value] of Object.entries(theme.radius)) {
+    vars.push(`${CSS_VAR_PREFIX}-radius-${key}: ${value}`);
+  }
+  for (const [key, value] of Object.entries(theme.shadows)) {
+    vars.push(`${CSS_VAR_PREFIX}-shadow-${key}: ${value}`);
+  }
+  theme.chart.colors.forEach((color, index) => {
+    vars.push(`${CSS_VAR_PREFIX}-chart-color-${index + 1}: ${color}`);
+  });
+  vars.push(`${CSS_VAR_PREFIX}-chart-grid: ${theme.chart.gridColor}`);
+  vars.push(`${CSS_VAR_PREFIX}-chart-axis: ${theme.chart.axisColor}`);
+  vars.push(`${CSS_VAR_PREFIX}-chart-tooltip-bg: ${theme.chart.tooltipBackground}`);
+  return vars.join(";\n") + ";";
+}
+function kebabCase(str) {
+  return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function getSystemTheme() {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function getStoredMode() {
+  if (typeof window === "undefined") return null;
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === "light" || stored === "dark" || stored === "system") {
+      return stored;
+    }
+  } catch {
+  }
+  return null;
+}
+function storeMode(mode) {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(STORAGE_KEY, mode);
+  } catch {
+  }
+}
+function ThemeProvider({
+  children,
+  defaultMode,
+  lightTheme: customLightTheme,
+  darkTheme: customDarkTheme,
+  className
+}) {
+  const [mode, setModeState] = useState(() => {
+    const stored = getStoredMode();
+    return stored ?? defaultMode ?? "system";
+  });
+  const [systemTheme, setSystemTheme] = useState(getSystemTheme);
+  const resolvedMode = mode === "system" ? systemTheme : mode;
+  const mergedLightTheme = useMemo(
+    () => customLightTheme ? deepMerge(lightTheme, customLightTheme) : lightTheme,
+    [customLightTheme]
+  );
+  const mergedDarkTheme = useMemo(
+    () => customDarkTheme ? deepMerge(darkTheme, customDarkTheme) : darkTheme,
+    [customDarkTheme]
+  );
+  const theme = resolvedMode === "dark" ? mergedDarkTheme : mergedLightTheme;
+  const setMode = useCallback((newMode) => {
+    setModeState(newMode);
+    storeMode(newMode);
+  }, []);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (e) => {
+      setSystemTheme(e.matches ? "dark" : "light");
+    };
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    }
+    mediaQuery.addListener(handleChange);
+    return () => mediaQuery.removeListener(handleChange);
+  }, []);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const styleId = "prismiq-theme-vars";
+    let styleElement = document.getElementById(styleId);
+    if (!styleElement) {
+      styleElement = document.createElement("style");
+      styleElement.id = styleId;
+      document.head.appendChild(styleElement);
+    }
+    const cssVars = themeToCSSVariables(theme);
+    styleElement.textContent = `:root {
+${cssVars}
+}`;
+    return () => {
+    };
+  }, [theme]);
+  const contextValue = useMemo(
+    () => ({
+      theme,
+      mode,
+      setMode,
+      resolvedMode
+    }),
+    [theme, mode, setMode, resolvedMode]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      "data-prismiq-theme": resolvedMode,
+      style: {
+        fontFamily: "var(--prismiq-font-sans)",
+        fontSize: "var(--prismiq-font-size-base)",
+        color: "var(--prismiq-color-text)",
+        backgroundColor: "var(--prismiq-color-background)"
+      },
+      children
+    }
+  ) });
+}
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === null) {
+    throw new Error(
+      "useTheme must be used within a ThemeProvider. Wrap your component tree with <ThemeProvider>."
+    );
+  }
+  return context;
+}
+
+export { ThemeProvider, darkTheme, lightTheme, useTheme };
+//# sourceMappingURL=chunk-T6STUE7E.js.map
+//# sourceMappingURL=chunk-T6STUE7E.js.map

package/dist/chunk-T6STUE7E.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/theme/defaults.ts","../src/theme/ThemeProvider.tsx","../src/theme/useTheme.ts"],"names":[],"mappings":"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","file":"chunk-T6STUE7E.js","sourcesContent":["/**\n * Default theme definitions for Prismiq.\n */\n\nimport type { PrismiqTheme } from './types';\n\n/**\n * Light theme - the default Prismiq theme.\n */\nexport const lightTheme: PrismiqTheme = {\n  name: 'light',\n  colors: {\n    primary: '#3b82f6',\n    primaryHover: '#2563eb',\n    background: '#ffffff',\n    surface: '#f9fafb',\n    surfaceHover: '#f3f4f6',\n    text: '#111827',\n    textMuted: '#6b7280',\n    textInverse: '#ffffff',\n    border: '#e5e7eb',\n    borderFocus: '#3b82f6',\n    success: '#10b981',\n    warning: '#f59e0b',\n    error: '#ef4444',\n    info: '#3b82f6',\n  },\n  fonts: {\n    sans: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif',\n    mono: '\"SF Mono\", \"Fira Code\", \"Fira Mono\", Menlo, Consolas, monospace',\n  },\n  fontSizes: {\n    xs: '10px',\n    sm: '12px',\n    base: '14px',\n    lg: '16px',\n    xl: '18px',\n    '2xl': '20px',\n  },\n  spacing: {\n    xs: '4px',\n    sm: '8px',\n    md: '12px',\n    lg: '16px',\n    xl: '24px',\n  },\n  radius: {\n    none: '0',\n    sm: '2px',\n    md: '4px',\n    lg: '8px',\n    full: '9999px',\n  },\n  shadows: {\n    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\n    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',\n    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',\n  },\n  chart: {\n    colors: [\n      '#3b82f6', // blue\n      '#10b981', // emerald\n      '#f59e0b', // amber\n      '#ef4444', // red\n      '#8b5cf6', // violet\n      '#06b6d4', // cyan\n      '#f97316', // orange\n      '#84cc16', // lime\n      '#ec4899', // pink\n      '#6366f1', // indigo\n    ],\n    gridColor: '#e5e7eb',\n    axisColor: '#6b7280',\n    tooltipBackground: '#111827',\n  },\n};\n\n/**\n * Dark theme for Prismiq.\n */\nexport const darkTheme: PrismiqTheme = {\n  name: 'dark',\n  colors: {\n    primary: '#60a5fa',\n    primaryHover: '#3b82f6',\n    background: '#111827',\n    surface: '#1f2937',\n    surfaceHover: '#374151',\n    text: '#f9fafb',\n    textMuted: '#9ca3af',\n    textInverse: '#111827',\n    border: '#374151',\n    borderFocus: '#60a5fa',\n    success: '#34d399',\n    warning: '#fbbf24',\n    error: '#f87171',\n    info: '#60a5fa',\n  },\n  fonts: {\n    sans: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif',\n    mono: '\"SF Mono\", \"Fira Code\", \"Fira Mono\", Menlo, Consolas, monospace',\n  },\n  fontSizes: {\n    xs: '10px',\n    sm: '12px',\n    base: '14px',\n    lg: '16px',\n    xl: '18px',\n    '2xl': '20px',\n  },\n  spacing: {\n    xs: '4px',\n    sm: '8px',\n    md: '12px',\n    lg: '16px',\n    xl: '24px',\n  },\n  radius: {\n    none: '0',\n    sm: '2px',\n    md: '4px',\n    lg: '8px',\n    full: '9999px',\n  },\n  shadows: {\n    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.3)',\n    md: '0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3)',\n    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3)',\n  },\n  chart: {\n    colors: [\n      '#60a5fa', // blue\n      '#34d399', // emerald\n      '#fbbf24', // amber\n      '#f87171', // red\n      '#a78bfa', // violet\n      '#22d3ee', // cyan\n      '#fb923c', // orange\n      '#a3e635', // lime\n      '#f472b6', // pink\n      '#818cf8', // indigo\n    ],\n    gridColor: '#374151',\n    axisColor: '#9ca3af',\n    tooltipBackground: '#1f2937',\n  },\n};\n","/**\n * Theme Provider for Prismiq.\n *\n * Provides theme context and injects CSS variables into the document.\n */\n\nimport {\n  createContext,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactNode,\n} from 'react';\n\nimport { darkTheme, lightTheme } from './defaults';\nimport type { DeepPartial, PrismiqTheme, ThemeContextValue, ThemeMode } from './types';\n\n// ============================================================================\n// Constants\n// ============================================================================\n\nconst STORAGE_KEY = 'prismiq-theme-mode';\nconst CSS_VAR_PREFIX = '--prismiq';\n\n// ============================================================================\n// Context\n// ============================================================================\n\nexport const ThemeContext = createContext<ThemeContextValue | null>(null);\n\n// ============================================================================\n// Utilities\n// ============================================================================\n\n/**\n * Deep merge two objects.\n */\nfunction deepMerge<T extends object>(target: T, source: DeepPartial<T>): T {\n  const result = { ...target };\n\n  for (const key in source) {\n    const sourceValue = source[key];\n    const targetValue = target[key];\n\n    if (\n      sourceValue !== undefined &&\n      typeof sourceValue === 'object' &&\n      sourceValue !== null &&\n      !Array.isArray(sourceValue) &&\n      typeof targetValue === 'object' &&\n      targetValue !== null &&\n      !Array.isArray(targetValue)\n    ) {\n      (result as Record<string, unknown>)[key] = deepMerge(\n        targetValue as object,\n        sourceValue as DeepPartial<object>\n      );\n    } else if (sourceValue !== undefined) {\n      (result as Record<string, unknown>)[key] = sourceValue;\n    }\n  }\n\n  return result;\n}\n\n/**\n * Convert a theme object to CSS variable declarations.\n */\nfunction themeToCSSVariables(theme: PrismiqTheme): string {\n  const vars: string[] = [];\n\n  // Colors\n  for (const [key, value] of Object.entries(theme.colors)) {\n    vars.push(`${CSS_VAR_PREFIX}-color-${kebabCase(key)}: ${value}`);\n  }\n\n  // Fonts\n  vars.push(`${CSS_VAR_PREFIX}-font-sans: ${theme.fonts.sans}`);\n  vars.push(`${CSS_VAR_PREFIX}-font-mono: ${theme.fonts.mono}`);\n\n  // Font sizes\n  for (const [key, value] of Object.entries(theme.fontSizes)) {\n    vars.push(`${CSS_VAR_PREFIX}-font-size-${key}: ${value}`);\n  }\n\n  // Spacing\n  for (const [key, value] of Object.entries(theme.spacing)) {\n    vars.push(`${CSS_VAR_PREFIX}-spacing-${key}: ${value}`);\n  }\n\n  // Radius\n  for (const [key, value] of Object.entries(theme.radius)) {\n    vars.push(`${CSS_VAR_PREFIX}-radius-${key}: ${value}`);\n  }\n\n  // Shadows\n  for (const [key, value] of Object.entries(theme.shadows)) {\n    vars.push(`${CSS_VAR_PREFIX}-shadow-${key}: ${value}`);\n  }\n\n  // Chart colors\n  theme.chart.colors.forEach((color, index) => {\n    vars.push(`${CSS_VAR_PREFIX}-chart-color-${index + 1}: ${color}`);\n  });\n  vars.push(`${CSS_VAR_PREFIX}-chart-grid: ${theme.chart.gridColor}`);\n  vars.push(`${CSS_VAR_PREFIX}-chart-axis: ${theme.chart.axisColor}`);\n  vars.push(`${CSS_VAR_PREFIX}-chart-tooltip-bg: ${theme.chart.tooltipBackground}`);\n\n  return vars.join(';\\n') + ';';\n}\n\n/**\n * Convert camelCase to kebab-case.\n */\nfunction kebabCase(str: string): string {\n  return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n}\n\n/**\n * Detect system color scheme preference.\n */\nfunction getSystemTheme(): 'light' | 'dark' {\n  if (typeof window === 'undefined') return 'light';\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n}\n\n/**\n * Get stored theme mode from localStorage.\n */\nfunction getStoredMode(): ThemeMode | null {\n  if (typeof window === 'undefined') return null;\n  try {\n    const stored = localStorage.getItem(STORAGE_KEY);\n    if (stored === 'light' || stored === 'dark' || stored === 'system') {\n      return stored;\n    }\n  } catch {\n    // Ignore localStorage errors\n  }\n  return null;\n}\n\n/**\n * Store theme mode to localStorage.\n */\nfunction storeMode(mode: ThemeMode): void {\n  if (typeof window === 'undefined') return;\n  try {\n    localStorage.setItem(STORAGE_KEY, mode);\n  } catch {\n    // Ignore localStorage errors\n  }\n}\n\n// ============================================================================\n// Provider Props\n// ============================================================================\n\nexport interface ThemeProviderProps {\n  /** Child components. */\n  children: ReactNode;\n  /** Initial theme mode. If not set, uses stored mode or system preference. */\n  defaultMode?: ThemeMode;\n  /** Custom theme overrides for light mode. */\n  lightTheme?: DeepPartial<PrismiqTheme>;\n  /** Custom theme overrides for dark mode. */\n  darkTheme?: DeepPartial<PrismiqTheme>;\n  /** Custom class name for the wrapper element. */\n  className?: string;\n}\n\n// ============================================================================\n// Provider Component\n// ============================================================================\n\n/**\n * Theme provider that manages theme mode and injects CSS variables.\n *\n * @example\n * ```tsx\n * function App() {\n *   return (\n *     <ThemeProvider defaultMode=\"system\">\n *       <Dashboard />\n *     </ThemeProvider>\n *   );\n * }\n * ```\n */\nexport function ThemeProvider({\n  children,\n  defaultMode,\n  lightTheme: customLightTheme,\n  darkTheme: customDarkTheme,\n  className,\n}: ThemeProviderProps): JSX.Element {\n  // Initialize mode from stored value, prop, or default to system\n  const [mode, setModeState] = useState<ThemeMode>(() => {\n    const stored = getStoredMode();\n    return stored ?? defaultMode ?? 'system';\n  });\n\n  // Track system theme preference\n  const [systemTheme, setSystemTheme] = useState<'light' | 'dark'>(getSystemTheme);\n\n  // Compute resolved mode\n  const resolvedMode = mode === 'system' ? systemTheme : mode;\n\n  // Build merged themes\n  const mergedLightTheme = useMemo(\n    () => (customLightTheme ? deepMerge(lightTheme, customLightTheme) : lightTheme),\n    [customLightTheme]\n  );\n\n  const mergedDarkTheme = useMemo(\n    () => (customDarkTheme ? deepMerge(darkTheme, customDarkTheme) : darkTheme),\n    [customDarkTheme]\n  );\n\n  // Get current theme based on resolved mode\n  const theme = resolvedMode === 'dark' ? mergedDarkTheme : mergedLightTheme;\n\n  // Set mode and persist to localStorage\n  const setMode = useCallback((newMode: ThemeMode) => {\n    setModeState(newMode);\n    storeMode(newMode);\n  }, []);\n\n  // Listen for system theme changes\n  useEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n\n    const handleChange = (e: MediaQueryListEvent) => {\n      setSystemTheme(e.matches ? 'dark' : 'light');\n    };\n\n    // Modern browsers\n    if (mediaQuery.addEventListener) {\n      mediaQuery.addEventListener('change', handleChange);\n      return () => mediaQuery.removeEventListener('change', handleChange);\n    }\n\n    // Legacy browsers\n    mediaQuery.addListener(handleChange);\n    return () => mediaQuery.removeListener(handleChange);\n  }, []);\n\n  // Inject CSS variables\n  useEffect(() => {\n    if (typeof document === 'undefined') return;\n\n    const styleId = 'prismiq-theme-vars';\n    let styleElement = document.getElementById(styleId) as HTMLStyleElement | null;\n\n    if (!styleElement) {\n      styleElement = document.createElement('style');\n      styleElement.id = styleId;\n      document.head.appendChild(styleElement);\n    }\n\n    const cssVars = themeToCSSVariables(theme);\n    styleElement.textContent = `:root {\\n${cssVars}\\n}`;\n\n    return () => {\n      // Don't remove on cleanup - another instance may need it\n    };\n  }, [theme]);\n\n  // Memoize context value\n  const contextValue = useMemo<ThemeContextValue>(\n    () => ({\n      theme,\n      mode,\n      setMode,\n      resolvedMode,\n    }),\n    [theme, mode, setMode, resolvedMode]\n  );\n\n  return (\n    <ThemeContext.Provider value={contextValue}>\n      <div\n        className={className}\n        data-prismiq-theme={resolvedMode}\n        style={{\n          fontFamily: 'var(--prismiq-font-sans)',\n          fontSize: 'var(--prismiq-font-size-base)',\n          color: 'var(--prismiq-color-text)',\n          backgroundColor: 'var(--prismiq-color-background)',\n        }}\n      >\n        {children}\n      </div>\n    </ThemeContext.Provider>\n  );\n}\n","/**\n * useTheme hook.\n *\n * Provides access to the current theme and mode.\n */\n\nimport { useContext } from 'react';\n\nimport { ThemeContext } from './ThemeProvider';\nimport type { ThemeContextValue } from './types';\n\n/**\n * Hook to access the theme context.\n *\n * Must be used within a ThemeProvider.\n *\n * @throws Error if used outside of ThemeProvider.\n *\n * @example\n * ```tsx\n * function ThemeToggle() {\n *   const { mode, setMode, resolvedMode } = useTheme();\n *\n *   return (\n *     <button onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}>\n *       Current: {resolvedMode}\n *     </button>\n *   );\n * }\n * ```\n */\nexport function useTheme(): ThemeContextValue {\n  const context = useContext(ThemeContext);\n\n  if (context === null) {\n    throw new Error(\n      'useTheme must be used within a ThemeProvider. ' +\n        'Wrap your component tree with <ThemeProvider>.'\n    );\n  }\n\n  return context;\n}\n"]}

package/dist/chunk-TRW7DKLP.cjs

@@ -0,0 +1,141 @@
+'use strict';
+
+var react = require('react');
+
+// src/ssr/index.ts
+function useIsClient() {
+  const [isClient, setIsClient] = react.useState(false);
+  react.useEffect(() => {
+    setIsClient(true);
+  }, []);
+  return isClient;
+}
+function ClientOnly({ children, fallback = null }) {
+  const isClient = useIsClient();
+  if (!isClient) {
+    return fallback;
+  }
+  return children;
+}
+function getWindowWidth(defaultWidth = 1200) {
+  if (typeof window === "undefined") {
+    return defaultWidth;
+  }
+  return window.innerWidth;
+}
+function getWindowHeight(defaultHeight = 800) {
+  if (typeof window === "undefined") {
+    return defaultHeight;
+  }
+  return window.innerHeight;
+}
+function isBrowser() {
+  return typeof window !== "undefined" && typeof document !== "undefined";
+}
+function isServer() {
+  return !isBrowser();
+}
+function getLocalStorage(key, defaultValue) {
+  if (typeof window === "undefined") {
+    return defaultValue;
+  }
+  try {
+    const stored = localStorage.getItem(key);
+    if (stored === null) {
+      return defaultValue;
+    }
+    return JSON.parse(stored);
+  } catch {
+    return defaultValue;
+  }
+}
+function setLocalStorage(key, value) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+  } catch {
+  }
+}
+function removeLocalStorage(key) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  try {
+    localStorage.removeItem(key);
+  } catch {
+  }
+}
+function useWindowSize(defaultSize = { width: 1200, height: 800 }) {
+  const [size, setSize] = react.useState(defaultSize);
+  react.useEffect(() => {
+    setSize({
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+    const handleResize = () => {
+      setSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  return size;
+}
+function useMediaQuery(query, defaultValue = false) {
+  const [matches, setMatches] = react.useState(defaultValue);
+  react.useEffect(() => {
+    const mediaQuery = window.matchMedia(query);
+    setMatches(mediaQuery.matches);
+    const handleChange = (event) => {
+      setMatches(event.matches);
+    };
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    }
+    mediaQuery.addListener(handleChange);
+    return () => mediaQuery.removeListener(handleChange);
+  }, [query]);
+  return matches;
+}
+var BREAKPOINTS = {
+  xs: 0,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536
+};
+function useBreakpoint(defaultBreakpoint = "lg") {
+  const { width } = useWindowSize({ width: BREAKPOINTS[defaultBreakpoint], height: 800 });
+  if (width >= BREAKPOINTS["2xl"]) return "2xl";
+  if (width >= BREAKPOINTS.xl) return "xl";
+  if (width >= BREAKPOINTS.lg) return "lg";
+  if (width >= BREAKPOINTS.md) return "md";
+  if (width >= BREAKPOINTS.sm) return "sm";
+  return "xs";
+}
+function useIsBreakpoint(breakpoint, defaultValue = true) {
+  return useMediaQuery(`(min-width: ${BREAKPOINTS[breakpoint]}px)`, defaultValue);
+}
+
+exports.BREAKPOINTS = BREAKPOINTS;
+exports.ClientOnly = ClientOnly;
+exports.getLocalStorage = getLocalStorage;
+exports.getWindowHeight = getWindowHeight;
+exports.getWindowWidth = getWindowWidth;
+exports.isBrowser = isBrowser;
+exports.isServer = isServer;
+exports.removeLocalStorage = removeLocalStorage;
+exports.setLocalStorage = setLocalStorage;
+exports.useBreakpoint = useBreakpoint;
+exports.useIsBreakpoint = useIsBreakpoint;
+exports.useIsClient = useIsClient;
+exports.useMediaQuery = useMediaQuery;
+exports.useWindowSize = useWindowSize;
+//# sourceMappingURL=chunk-TRW7DKLP.cjs.map
+//# sourceMappingURL=chunk-TRW7DKLP.cjs.map

package/dist/chunk-TRW7DKLP.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ssr/index.ts"],"names":["useState","useEffect"],"mappings":";;;;;AA4DO,SAAS,WAAA,GAAuB;AACrC,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIA,eAAS,KAAK,CAAA;AAE9C,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,WAAA,CAAY,IAAI,CAAA;AAAA,EAClB,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO,QAAA;AACT;AA4BO,SAAS,UAAA,CAAW,EAAE,QAAA,EAAU,QAAA,GAAW,MAAK,EAA+B;AACpF,EAAA,MAAM,WAAW,WAAA,EAAY;AAE7B,EAAA,IAAI,CAAC,QAAA,EAAU;AACb,IAAA,OAAO,QAAA;AAAA,EACT;AAEA,EAAA,OAAO,QAAA;AACT;AAYO,SAAS,cAAA,CAAe,eAAe,IAAA,EAAc;AAC1D,EAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AACjC,IAAA,OAAO,YAAA;AAAA,EACT;AACA,EAAA,OAAO,MAAA,CAAO,UAAA;AAChB;AAQO,SAAS,eAAA,CAAgB,gBAAgB,GAAA,EAAa;AAC3D,EAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AACjC,IAAA,OAAO,aAAA;AAAA,EACT;AACA,EAAA,OAAO,MAAA,CAAO,WAAA;AAChB;AAOO,SAAS,SAAA,GAAqB;AACnC,EAAA,OAAO,OAAO,MAAA,KAAW,WAAA,IAAe,OAAO,QAAA,KAAa,WAAA;AAC9D;AAOO,SAAS,QAAA,GAAoB;AAClC,EAAA,OAAO,CAAC,SAAA,EAAU;AACpB;AAaO,SAAS,eAAA,CAAmB,KAAa,YAAA,EAAoB;AAClE,EAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AACjC,IAAA,OAAO,YAAA;AAAA,EACT;AAEA,EAAA,IAAI;AACF,IAAA,MAAM,MAAA,GAAS,YAAA,CAAa,OAAA,CAAQ,GAAG,CAAA;AACvC,IAAA,IAAI,WAAW,IAAA,EAAM;AACnB,MAAA,OAAO,YAAA;AAAA,IACT;AACA,IAAA,OAAO,IAAA,CAAK,MAAM,MAAM,CAAA;AAAA,EAC1B,CAAA,CAAA,MAAQ;AACN,IAAA,OAAO,YAAA;AAAA,EACT;AACF;AAQO,SAAS,eAAA,CAAmB,KAAa,KAAA,EAAgB;AAC9D,EAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AACjC,IAAA;AAAA,EACF;AAEA,EAAA,IAAI;AACF,IAAA,YAAA,CAAa,OAAA,CAAQ,GAAA,EAAK,IAAA,CAAK,SAAA,CAAU,KAAK,CAAC,CAAA;AAAA,EACjD,CAAA,CAAA,MAAQ;AAAA,EAER;AACF;AAOO,SAAS,mBAAmB,GAAA,EAAmB;AACpD,EAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AACjC,IAAA;AAAA,EACF;AAEA,EAAA,IAAI;AACF,IAAA,YAAA,CAAa,WAAW,GAAG,CAAA;AAAA,EAC7B,CAAA,CAAA,MAAQ;AAAA,EAER;AACF;AA8BO,SAAS,cACd,WAAA,GAA0B,EAAE,OAAO,IAAA,EAAM,MAAA,EAAQ,KAAI,EACzC;AACZ,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAID,eAAqB,WAAW,CAAA;AAExD,EAAAC,eAAA,CAAU,MAAM;AAEd,IAAA,OAAA,CAAQ;AAAA,MACN,OAAO,MAAA,CAAO,UAAA;AAAA,MACd,QAAQ,MAAA,CAAO;AAAA,KAChB,CAAA;AAED,IAAA,MAAM,eAAe,MAAM;AACzB,MAAA,OAAA,CAAQ;AAAA,QACN,OAAO,MAAA,CAAO,UAAA;AAAA,QACd,QAAQ,MAAA,CAAO;AAAA,OAChB,CAAA;AAAA,IACH,CAAA;AAEA,IAAA,MAAA,CAAO,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAC9C,IAAA,OAAO,MAAM,MAAA,CAAO,mBAAA,CAAoB,QAAA,EAAU,YAAY,CAAA;AAAA,EAChE,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,OAAO,IAAA;AACT;AAuBO,SAAS,aAAA,CAAc,KAAA,EAAe,YAAA,GAAe,KAAA,EAAgB;AAC1E,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAID,eAAS,YAAY,CAAA;AAEnD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAA,GAAa,MAAA,CAAO,UAAA,CAAW,KAAK,CAAA;AAC1C,IAAA,UAAA,CAAW,WAAW,OAAO,CAAA;AAE7B,IAAA,MAAM,YAAA,GAAe,CAAC,KAAA,KAA+B;AACnD,MAAA,UAAA,CAAW,MAAM,OAAO,CAAA;AAAA,IAC1B,CAAA;AAGA,IAAA,IAAI,WAAW,gBAAA,EAAkB;AAC/B,MAAA,UAAA,CAAW,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAClD,MAAA,OAAO,MAAM,UAAA,CAAW,mBAAA,CAAoB,QAAA,EAAU,YAAY,CAAA;AAAA,IACpE;AAGA,IAAA,UAAA,CAAW,YAAY,YAAY,CAAA;AACnC,IAAA,OAAO,MAAM,UAAA,CAAW,cAAA,CAAe,YAAY,CAAA;AAAA,EACrD,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,OAAO,OAAA;AACT;AASO,IAAM,WAAA,GAAc;AAAA,EACzB,EAAA,EAAI,CAAA;AAAA,EACJ,EAAA,EAAI,GAAA;AAAA,EACJ,EAAA,EAAI,GAAA;AAAA,EACJ,EAAA,EAAI,IAAA;AAAA,EACJ,EAAA,EAAI,IAAA;AAAA,EACJ,KAAA,EAAO;AACT;AA4BO,SAAS,aAAA,CAAc,oBAAgC,IAAA,EAAkB;AAC9E,EAAA,MAAM,EAAE,KAAA,EAAM,GAAI,aAAA,CAAc,EAAE,KAAA,EAAO,WAAA,CAAY,iBAAiB,CAAA,EAAG,MAAA,EAAQ,GAAA,EAAK,CAAA;AAEtF,EAAA,IAAI,KAAA,IAAS,WAAA,CAAY,KAAK,CAAA,EAAG,OAAO,KAAA;AACxC,EAAA,IAAI,KAAA,IAAS,WAAA,CAAY,EAAA,EAAI,OAAO,IAAA;AACpC,EAAA,IAAI,KAAA,IAAS,WAAA,CAAY,EAAA,EAAI,OAAO,IAAA;AACpC,EAAA,IAAI,KAAA,IAAS,WAAA,CAAY,EAAA,EAAI,OAAO,IAAA;AACpC,EAAA,IAAI,KAAA,IAAS,WAAA,CAAY,EAAA,EAAI,OAAO,IAAA;AACpC,EAAA,OAAO,IAAA;AACT;AASO,SAAS,eAAA,CAAgB,UAAA,EAAwB,YAAA,GAAe,IAAA,EAAe;AACpF,EAAA,OAAO,cAAc,CAAA,YAAA,EAAe,WAAA,CAAY,UAAU,CAAC,OAAO,YAAY,CAAA;AAChF","file":"chunk-TRW7DKLP.cjs","sourcesContent":["'use client';\n\n/**\n * SSR (Server-Side Rendering) utilities for Next.js compatibility.\n *\n * These utilities help components work correctly with:\n * - Next.js App Router\n * - React Server Components\n * - Hydration\n *\n * @example\n * ```tsx\n * import { useIsClient, ClientOnly } from '@prismiq/react/ssr';\n *\n * function MyComponent() {\n *   const isClient = useIsClient();\n *\n *   if (!isClient) {\n *     return <Skeleton />;\n *   }\n *\n *   return <Chart data={data} />;\n * }\n *\n * // Or use ClientOnly wrapper\n * <ClientOnly fallback={<Skeleton />}>\n *   <Chart data={data} />\n * </ClientOnly>\n * ```\n */\n\nimport { useEffect, useState, type ReactNode } from 'react';\n\n// ============================================================================\n// useIsClient Hook\n// ============================================================================\n\n/**\n * Hook that returns true when running in the browser.\n *\n * Useful for:\n * - Conditionally rendering browser-only components\n * - Avoiding hydration mismatches\n * - Waiting for window/document access\n *\n * @returns true when running in browser, false during SSR\n *\n * @example\n * ```tsx\n * function WindowSize() {\n *   const isClient = useIsClient();\n *\n *   if (!isClient) {\n *     return <span>Loading...</span>;\n *   }\n *\n *   return <span>{window.innerWidth}px</span>;\n * }\n * ```\n */\nexport function useIsClient(): boolean {\n  const [isClient, setIsClient] = useState(false);\n\n  useEffect(() => {\n    setIsClient(true);\n  }, []);\n\n  return isClient;\n}\n\n// ============================================================================\n// ClientOnly Component\n// ============================================================================\n\nexport interface ClientOnlyProps {\n  /** Content to render on the client. */\n  children: ReactNode;\n  /** Fallback content to show during SSR. */\n  fallback?: ReactNode;\n}\n\n/**\n * Component that only renders its children on the client.\n *\n * Use this to wrap components that:\n * - Access window or document\n * - Use browser-only APIs\n * - Would cause hydration mismatches\n *\n * @example\n * ```tsx\n * <ClientOnly fallback={<SkeletonChart type=\"bar\" />}>\n *   <BarChart data={data} />\n * </ClientOnly>\n * ```\n */\nexport function ClientOnly({ children, fallback = null }: ClientOnlyProps): ReactNode {\n  const isClient = useIsClient();\n\n  if (!isClient) {\n    return fallback;\n  }\n\n  return children;\n}\n\n// ============================================================================\n// Safe Window/Document Access\n// ============================================================================\n\n/**\n * Safely get window width (returns default during SSR).\n *\n * @param defaultWidth - Default width to return during SSR\n * @returns Current window width or default\n */\nexport function getWindowWidth(defaultWidth = 1200): number {\n  if (typeof window === 'undefined') {\n    return defaultWidth;\n  }\n  return window.innerWidth;\n}\n\n/**\n * Safely get window height (returns default during SSR).\n *\n * @param defaultHeight - Default height to return during SSR\n * @returns Current window height or default\n */\nexport function getWindowHeight(defaultHeight = 800): number {\n  if (typeof window === 'undefined') {\n    return defaultHeight;\n  }\n  return window.innerHeight;\n}\n\n/**\n * Check if code is running in browser environment.\n *\n * @returns true if running in browser\n */\nexport function isBrowser(): boolean {\n  return typeof window !== 'undefined' && typeof document !== 'undefined';\n}\n\n/**\n * Check if code is running in server environment.\n *\n * @returns true if running on server\n */\nexport function isServer(): boolean {\n  return !isBrowser();\n}\n\n// ============================================================================\n// Hydration-Safe Storage\n// ============================================================================\n\n/**\n * Safely get a value from localStorage.\n *\n * @param key - Storage key\n * @param defaultValue - Default value if key doesn't exist or during SSR\n * @returns Stored value or default\n */\nexport function getLocalStorage<T>(key: string, defaultValue: T): T {\n  if (typeof window === 'undefined') {\n    return defaultValue;\n  }\n\n  try {\n    const stored = localStorage.getItem(key);\n    if (stored === null) {\n      return defaultValue;\n    }\n    return JSON.parse(stored) as T;\n  } catch {\n    return defaultValue;\n  }\n}\n\n/**\n * Safely set a value in localStorage.\n *\n * @param key - Storage key\n * @param value - Value to store\n */\nexport function setLocalStorage<T>(key: string, value: T): void {\n  if (typeof window === 'undefined') {\n    return;\n  }\n\n  try {\n    localStorage.setItem(key, JSON.stringify(value));\n  } catch {\n    // Storage might be full or disabled\n  }\n}\n\n/**\n * Safely remove a value from localStorage.\n *\n * @param key - Storage key to remove\n */\nexport function removeLocalStorage(key: string): void {\n  if (typeof window === 'undefined') {\n    return;\n  }\n\n  try {\n    localStorage.removeItem(key);\n  } catch {\n    // Storage might be disabled\n  }\n}\n\n// ============================================================================\n// useWindowSize Hook\n// ============================================================================\n\nexport interface WindowSize {\n  width: number;\n  height: number;\n}\n\n/**\n * Hook to get and track window size with SSR support.\n *\n * @param defaultSize - Default size to use during SSR\n * @returns Current window size\n *\n * @example\n * ```tsx\n * function ResponsiveComponent() {\n *   const { width } = useWindowSize();\n *\n *   if (width < 768) {\n *     return <MobileView />;\n *   }\n *\n *   return <DesktopView />;\n * }\n * ```\n */\nexport function useWindowSize(\n  defaultSize: WindowSize = { width: 1200, height: 800 }\n): WindowSize {\n  const [size, setSize] = useState<WindowSize>(defaultSize);\n\n  useEffect(() => {\n    // Update to actual window size on mount\n    setSize({\n      width: window.innerWidth,\n      height: window.innerHeight,\n    });\n\n    const handleResize = () => {\n      setSize({\n        width: window.innerWidth,\n        height: window.innerHeight,\n      });\n    };\n\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  return size;\n}\n\n// ============================================================================\n// useMediaQuery Hook\n// ============================================================================\n\n/**\n * Hook to check if a media query matches with SSR support.\n *\n * @param query - CSS media query string\n * @param defaultValue - Default value during SSR\n * @returns Whether the media query matches\n *\n * @example\n * ```tsx\n * function ResponsiveComponent() {\n *   const isMobile = useMediaQuery('(max-width: 768px)');\n *   const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');\n *\n *   return isMobile ? <MobileView /> : <DesktopView />;\n * }\n * ```\n */\nexport function useMediaQuery(query: string, defaultValue = false): boolean {\n  const [matches, setMatches] = useState(defaultValue);\n\n  useEffect(() => {\n    const mediaQuery = window.matchMedia(query);\n    setMatches(mediaQuery.matches);\n\n    const handleChange = (event: MediaQueryListEvent) => {\n      setMatches(event.matches);\n    };\n\n    // Modern browsers\n    if (mediaQuery.addEventListener) {\n      mediaQuery.addEventListener('change', handleChange);\n      return () => mediaQuery.removeEventListener('change', handleChange);\n    }\n\n    // Legacy browsers\n    mediaQuery.addListener(handleChange);\n    return () => mediaQuery.removeListener(handleChange);\n  }, [query]);\n\n  return matches;\n}\n\n// ============================================================================\n// Breakpoint Hooks\n// ============================================================================\n\n/**\n * Default breakpoints matching common design systems.\n */\nexport const BREAKPOINTS = {\n  xs: 0,\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n  '2xl': 1536,\n} as const;\n\nexport type Breakpoint = keyof typeof BREAKPOINTS;\n\n/**\n * Hook to get current breakpoint with SSR support.\n *\n * @param defaultBreakpoint - Default breakpoint during SSR\n * @returns Current breakpoint\n *\n * @example\n * ```tsx\n * function ResponsiveComponent() {\n *   const breakpoint = useBreakpoint();\n *\n *   const columns = {\n *     xs: 1,\n *     sm: 2,\n *     md: 3,\n *     lg: 4,\n *     xl: 6,\n *     '2xl': 6,\n *   }[breakpoint];\n *\n *   return <Grid columns={columns} />;\n * }\n * ```\n */\nexport function useBreakpoint(defaultBreakpoint: Breakpoint = 'lg'): Breakpoint {\n  const { width } = useWindowSize({ width: BREAKPOINTS[defaultBreakpoint], height: 800 });\n\n  if (width >= BREAKPOINTS['2xl']) return '2xl';\n  if (width >= BREAKPOINTS.xl) return 'xl';\n  if (width >= BREAKPOINTS.lg) return 'lg';\n  if (width >= BREAKPOINTS.md) return 'md';\n  if (width >= BREAKPOINTS.sm) return 'sm';\n  return 'xs';\n}\n\n/**\n * Hook to check if current width is at or above a breakpoint.\n *\n * @param breakpoint - Breakpoint to check\n * @param defaultValue - Default value during SSR\n * @returns Whether width is at or above breakpoint\n */\nexport function useIsBreakpoint(breakpoint: Breakpoint, defaultValue = true): boolean {\n  return useMediaQuery(`(min-width: ${BREAKPOINTS[breakpoint]}px)`, defaultValue);\n}\n"]}