@12nil/theme-registry-package 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,291 @@
+import React from 'react';
+
+declare const RUNTIME_THEME_REGISTRY_VERSION = "0.2.0";
+interface ThemePalette {
+    primary: string;
+    secondary: string;
+    tertiary?: string;
+    background: string;
+    text: string;
+    accent: string;
+    muted: string;
+    error: string;
+    warning: string;
+    success: string;
+    info: string;
+}
+interface SemanticColorTokens {
+    primary: string;
+    secondary: string;
+    destructive: string;
+    success: string;
+    warning: string;
+    info: string;
+}
+interface SemanticSurfaceTokens {
+    page: string;
+    card: string;
+    sidebar: string;
+    modal: string;
+    popover: string;
+}
+interface SemanticTextTokens {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    disabled: string;
+}
+interface SemanticBorderTokens {
+    default: string;
+    subtle: string;
+    strong: string;
+}
+interface ThemeTokensV2 {
+    colors: SemanticColorTokens;
+    surface: SemanticSurfaceTokens;
+    text: SemanticTextTokens;
+    border: SemanticBorderTokens;
+}
+type ThemeTokenSet = ThemePalette | ThemeTokensV2;
+interface ThemeCompatibility {
+    minRegistryVersion?: string;
+}
+interface ThemeMetadata {
+    author?: string;
+    version?: string;
+    description?: string;
+    homepage?: string;
+    license?: string;
+    compatibility?: ThemeCompatibility;
+}
+interface ThemeDefinition {
+    name: string;
+    modes: Record<string, ThemeTokenSet>;
+    metadata?: ThemeMetadata;
+}
+type ThemeRegistrationConflict = 'throw' | 'replace' | 'merge';
+interface ThemeRegistrationOptions {
+    ifExists?: ThemeRegistrationConflict;
+    validate?: boolean;
+}
+interface ThemeFallbackConfig {
+    themeName?: string;
+    modeName?: string;
+}
+interface ThemeValidationIssue {
+    path: string;
+    message: string;
+}
+interface ThemeValidationResult {
+    valid: boolean;
+    issues: ThemeValidationIssue[];
+}
+interface ThemeResolutionResult {
+    themeName: string | null;
+    modeName: string | null;
+    tokens: ThemeTokenSet | null;
+}
+interface ThemePluginDefinition {
+    name: string;
+    version?: string;
+    description?: string;
+    author?: string;
+    homepage?: string;
+    license?: string;
+    minRegistryVersion?: string;
+    theme?: ThemeDefinition;
+    themes?: ThemeDefinition[];
+    icons?: Record<string, string>;
+    fonts?: Record<string, string>;
+    spacing?: Record<string, string | number>;
+    typography?: Record<string, string | number>;
+    metadata?: Record<string, unknown>;
+}
+interface ThemePluginContributions {
+    icons: Record<string, string>;
+    fonts: Record<string, string>;
+    spacing: Record<string, string | number>;
+    typography: Record<string, string | number>;
+    metadata: Record<string, unknown>;
+}
+type ThemeCompositionLayerType = 'brand' | 'appearance' | 'accessibility';
+interface ThemeCompositionLayerDefinition {
+    type: ThemeCompositionLayerType;
+    name: string;
+    tokens: ThemeTokenSet;
+    metadata?: Record<string, unknown>;
+}
+interface ThemeCompositionSelection {
+    brand?: string | null;
+    appearance?: string | null;
+    accessibility?: string | null;
+}
+interface ThemeCompositionResult {
+    selection: ThemeCompositionSelection;
+    tokens: ThemeTokenSet | null;
+    appliedLayers: ThemeCompositionLayerDefinition[];
+}
+type ThemeLoadSource = string | (() => Promise<ThemeDefinition | ThemeDefinition[]>);
+interface ThemeLoadOptions {
+    ifExists?: ThemeRegistrationConflict;
+    validate?: boolean;
+    cacheKey?: string;
+    maxAgeMs?: number;
+    forceRefresh?: boolean;
+}
+interface ThemeLoadResult {
+    loaded: number;
+    themes: string[];
+    source: string;
+    fromCache: boolean;
+}
+interface ThemeLoadCacheEntry {
+    themes: ThemeDefinition[];
+    loadedAt: number;
+    source: string;
+}
+interface ThemeDocumentAttributes {
+    'data-theme': string;
+    'data-mode': string;
+}
+type PluginRegistrationConflict = 'throw' | 'replace' | 'merge';
+interface PluginRegistrationOptions {
+    ifExists?: PluginRegistrationConflict;
+    themeIfExists?: ThemeRegistrationConflict;
+    validateThemes?: boolean;
+}
+interface ThemeRegistryEventPayloadMap {
+    registered: {
+        themeName: string;
+    };
+    replaced: {
+        themeName: string;
+    };
+    merged: {
+        themeName: string;
+    };
+    unregistered: {
+        themeName: string;
+    };
+    variantAdded: {
+        themeName: string;
+        variantName: string;
+    };
+    themeChanged: {
+        themeName: string;
+        modeName: string;
+    };
+    loaded: {
+        source: string;
+        count: number;
+        fromCache: boolean;
+    };
+    composed: {
+        appliedLayers: string[];
+    };
+    pluginRegistered: {
+        pluginName: string;
+    };
+    pluginUnregistered: {
+        pluginName: string;
+    };
+    destroyed: {
+        timestamp: string;
+    };
+}
+type ThemeRegistryEvent = keyof ThemeRegistryEventPayloadMap;
+type ThemeRegistryEventHandler<K extends ThemeRegistryEvent> = (payload: ThemeRegistryEventPayloadMap[K]) => void;
+declare function isThemeTokensV2(tokens: ThemeTokenSet): tokens is ThemeTokensV2;
+declare function validateTheme(theme: ThemeDefinition): ThemeValidationResult;
+declare class ThemeRegistry {
+    private themes;
+    private plugins;
+    private compositionLayers;
+    private loadedThemeCache;
+    private currentTheme;
+    private currentMode;
+    private fallbackConfig;
+    private listeners;
+    getVersion(): string;
+    on<K extends ThemeRegistryEvent>(event: K, handler: ThemeRegistryEventHandler<K>): () => void;
+    onRegistered(handler: ThemeRegistryEventHandler<'registered'>): () => void;
+    onThemeChanged(handler: ThemeRegistryEventHandler<'themeChanged'>): () => void;
+    onVariantAdded(handler: ThemeRegistryEventHandler<'variantAdded'>): () => void;
+    onDestroyed(handler: ThemeRegistryEventHandler<'destroyed'>): () => void;
+    onLoaded(handler: ThemeRegistryEventHandler<'loaded'>): () => void;
+    onComposed(handler: ThemeRegistryEventHandler<'composed'>): () => void;
+    private emit;
+    register(theme: ThemeDefinition, options?: ThemeRegistrationOptions): void;
+    replace(themeName: string, theme: ThemeDefinition): void;
+    merge(themeName: string, theme: ThemeDefinition): void;
+    unregister(themeName: string): boolean;
+    setFallback(config: ThemeFallbackConfig): void;
+    registerPlugin(plugin: ThemePluginDefinition, options?: PluginRegistrationOptions): void;
+    registerCompositionLayer(layer: ThemeCompositionLayerDefinition, options?: ThemeRegistrationOptions): void;
+    getCompositionLayer(type: ThemeCompositionLayerType, name: string): ThemeCompositionLayerDefinition | undefined;
+    getCompositionLayers(type?: ThemeCompositionLayerType): ThemeCompositionLayerDefinition[];
+    compose(selection: ThemeCompositionSelection): ThemeCompositionResult;
+    getInitialThemeAttributes(themeName: string | null, modeName: string | null): ThemeDocumentAttributes | null;
+    hydrateThemeOnDocument(themeName: string | null, modeName: string | null): ThemeResolutionResult;
+    load(source: ThemeLoadSource, options?: ThemeLoadOptions): Promise<ThemeLoadResult>;
+    clearLoadCache(cacheKey?: string): void;
+    unregisterPlugin(pluginName: string): boolean;
+    getPlugin(name: string): ThemePluginDefinition | undefined;
+    getPlugins(): ThemePluginDefinition[];
+    getPluginContributions(pluginName: string): ThemePluginContributions | undefined;
+    getMergedPluginContributions(): ThemePluginContributions;
+    /**
+     * Dynamically register a theme mode - useful for packages to add their own modes
+     * @param themeName - The name of the existing theme to add the mode to
+     * @param modeName - The name of the mode (e.g., 'ocean', 'forest', 'high-contrast')
+     * @param tokens - The tokens for this mode
+     */
+    registerMode(themeName: string, modeName: string, tokens: ThemeTokenSet): void;
+    /**
+     * Register multiple modes at once for a theme
+     */
+    registerModes(themeName: string, modes: Record<string, ThemeTokenSet>): void;
+    /**
+     * Create and register a new theme with specific modes
+     * Useful for packages that want to add their own themes dynamically
+     */
+    createTheme(name: string, modes: Record<string, ThemeTokenSet>): void;
+    private getFallbackThemeName;
+    private resolveModeName;
+    resolveSelection(themeName: string | null, modeName: string | null): ThemeResolutionResult;
+    get(name: string): ThemeDefinition | undefined;
+    getAll(): ThemeDefinition[];
+    getTokens(themeName: string, modeName: string): ThemeTokenSet | undefined;
+    setCurrent(themeName: string, modeName: string): void;
+    getCurrent(): {
+        theme: string | null;
+        mode: string | null;
+    };
+    has(themeName: string): boolean;
+    getModes(themeName: string): string[];
+    getVariants(themeName: string): string[];
+    destroy(): void;
+}
+declare const themeRegistry: ThemeRegistry;
+
+interface ThemeContextType {
+    currentTheme: string | null;
+    currentMode: string | null;
+    themes: ThemeDefinition[];
+    setTheme: (themeName: string, mode: string) => void;
+    setMode: (mode: string) => void;
+    availableModes: string[];
+    getThemeColors: () => ThemeTokenSet | null;
+}
+declare function ThemeProvider({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+declare function useTheme(): ThemeContextType;
+
+declare function paletteToCSSVariables(palette: ThemePalette): Record<string, string>;
+declare function tokenSetToCSSVariables(tokens: ThemeTokenSet): Record<string, string>;
+declare function generateThemeCSS(theme: ThemeDefinition): string;
+declare function generateAllThemesCSS(themes: ThemeDefinition[]): string;
+declare function applyThemeToDocument(theme: ThemeDefinition, mode: string): void;
+
+export { type ThemePalette as ColorModePalette, type PluginRegistrationConflict, type PluginRegistrationOptions, RUNTIME_THEME_REGISTRY_VERSION, type ThemeCompatibility, type ThemeCompositionLayerDefinition, type ThemeCompositionLayerType, type ThemeCompositionResult, type ThemeCompositionSelection, type ThemeDefinition, type ThemeDocumentAttributes, type ThemeFallbackConfig, type ThemeLoadCacheEntry, type ThemeLoadOptions, type ThemeLoadResult, type ThemeLoadSource, type ThemeMetadata, type ThemePalette, type ThemePluginContributions, type ThemePluginDefinition, ThemeProvider, type ThemeRegistrationConflict, type ThemeRegistrationOptions, type ThemeRegistryEvent, type ThemeRegistryEventHandler, type ThemeRegistryEventPayloadMap, type ThemeResolutionResult, type ThemeTokenSet, type ThemeTokensV2, type ThemeValidationIssue, type ThemeValidationResult, applyThemeToDocument, themeRegistry as default, generateAllThemesCSS, generateThemeCSS, isThemeTokensV2, paletteToCSSVariables, themeRegistry, tokenSetToCSSVariables, useTheme, validateTheme };

package/dist/index.js

@@ -0,0 +1,172 @@
+import {
+  RUNTIME_THEME_REGISTRY_VERSION,
+  isThemeTokensV2,
+  themeRegistry,
+  validateTheme
+} from "./chunk-GUPUN2GN.js";
+
+// theme-provider.tsx
+import { createContext, useContext, useEffect, useState, useCallback } from "react";
+
+// theme-utils.ts
+function paletteToCSSVariables(palette) {
+  return tokenSetToCSSVariables(palette);
+}
+function semanticTokensToCSSVariables(tokens) {
+  const variables = {};
+  const appendCategory = (category, categoryValues) => {
+    ;
+    Object.entries(categoryValues).forEach(([key, value]) => {
+      const keyName = String(key);
+      variables[`--theme-${category}-${keyName}`] = value;
+      if (category === "colors") {
+        variables[`--color-theme-${keyName}`] = value;
+      }
+    });
+  };
+  appendCategory("colors", tokens.colors);
+  appendCategory("surface", tokens.surface);
+  appendCategory("text", tokens.text);
+  appendCategory("border", tokens.border);
+  return variables;
+}
+function legacyTokensToCSSVariables(tokens) {
+  const variables = {};
+  Object.entries(tokens).forEach(([key, value]) => {
+    if (key === "tertiary" && !value) return;
+    if (!value) return;
+    variables[`--color-theme-${String(key)}`] = value;
+  });
+  return variables;
+}
+function tokenSetToCSSVariables(tokens) {
+  if (isThemeTokensV2(tokens)) {
+    return semanticTokensToCSSVariables(tokens);
+  }
+  return legacyTokensToCSSVariables(tokens);
+}
+function generateThemeCSS(theme) {
+  const modes = Object.entries(theme.modes);
+  let css = `/* Theme: ${theme.name} */
+`;
+  modes.forEach(([modeName, tokens]) => {
+    css += `
+[data-theme="${theme.name}"][data-mode="${modeName}"] {
+`;
+    const variables = tokenSetToCSSVariables(tokens);
+    Object.entries(variables).forEach(([name, value]) => {
+      css += `  ${name}: ${value};
+`;
+    });
+    css += `}
+`;
+  });
+  return css;
+}
+function generateAllThemesCSS(themes) {
+  return themes.map(generateThemeCSS).join("\n");
+}
+function applyThemeToDocument(theme, mode) {
+  const tokens = theme.modes[mode];
+  if (!tokens) return;
+  document.documentElement.setAttribute("data-theme", theme.name);
+  document.documentElement.setAttribute("data-mode", mode);
+  const variables = tokenSetToCSSVariables(tokens);
+  Object.entries(variables).forEach(([name, value]) => {
+    document.documentElement.style.setProperty(name, value);
+  });
+}
+
+// theme-provider.tsx
+import { jsx } from "react/jsx-runtime";
+var ThemeContext = createContext(void 0);
+function ThemeProvider({ children }) {
+  const [currentTheme, setCurrentTheme] = useState(null);
+  const [currentMode, setCurrentMode] = useState(null);
+  const [themes, setThemes] = useState([]);
+  useEffect(() => {
+    const registeredThemes = themeRegistry.getAll();
+    if (registeredThemes.length === 0) {
+      import("./app_theme-K3SQNO7I.js").then(() => {
+        setThemes(themeRegistry.getAll());
+      });
+    } else {
+      setThemes(registeredThemes);
+    }
+    if (registeredThemes.length > 0) {
+      const saved = localStorage.getItem("fnp-theme");
+      const savedMode = localStorage.getItem("fnp-mode");
+      const resolved = themeRegistry.resolveSelection(saved, savedMode);
+      if (!resolved.themeName || !resolved.modeName || !resolved.tokens) return;
+      setCurrentTheme(resolved.themeName);
+      setCurrentMode(resolved.modeName);
+      themeRegistry.setCurrent(resolved.themeName, resolved.modeName);
+      applyTheme(resolved.tokens);
+      localStorage.setItem("fnp-theme", resolved.themeName);
+      localStorage.setItem("fnp-mode", resolved.modeName);
+    }
+  }, []);
+  const applyTheme = useCallback((tokens) => {
+    const root = document.documentElement;
+    const variables = tokenSetToCSSVariables(tokens);
+    Object.entries(variables).forEach(([name, value]) => {
+      root.style.setProperty(name, value);
+    });
+  }, []);
+  const setTheme = useCallback((themeName, mode) => {
+    const resolved = themeRegistry.resolveSelection(themeName, mode);
+    if (!resolved.themeName || !resolved.modeName || !resolved.tokens) return;
+    setCurrentTheme(resolved.themeName);
+    setCurrentMode(resolved.modeName);
+    themeRegistry.setCurrent(resolved.themeName, resolved.modeName);
+    applyTheme(resolved.tokens);
+    localStorage.setItem("fnp-theme", resolved.themeName);
+    localStorage.setItem("fnp-mode", resolved.modeName);
+  }, [applyTheme]);
+  const setMode = useCallback((mode) => {
+    if (!currentTheme) return;
+    setTheme(currentTheme, mode);
+  }, [currentTheme, setTheme]);
+  const getThemeColors = useCallback(() => {
+    if (!currentTheme || !currentMode) return null;
+    return themeRegistry.getTokens(currentTheme, currentMode) ?? null;
+  }, [currentTheme, currentMode]);
+  const availableModes = currentTheme ? themeRegistry.getModes(currentTheme) : [];
+  return /* @__PURE__ */ jsx(
+    ThemeContext.Provider,
+    {
+      value: {
+        currentTheme,
+        currentMode,
+        themes,
+        setTheme,
+        setMode,
+        availableModes,
+        getThemeColors
+      },
+      children
+    }
+  );
+}
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === void 0) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+export {
+  RUNTIME_THEME_REGISTRY_VERSION,
+  ThemeProvider,
+  applyThemeToDocument,
+  themeRegistry as default,
+  generateAllThemesCSS,
+  generateThemeCSS,
+  isThemeTokensV2,
+  paletteToCSSVariables,
+  themeRegistry,
+  tokenSetToCSSVariables,
+  useTheme,
+  validateTheme
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../theme-provider.tsx","../theme-utils.ts"],"sourcesContent":["'use client'\r\n\r\nimport React, { createContext, useContext, useEffect, useState, useCallback } from 'react'\r\nimport { themeRegistry } from './theme-registry'\r\nimport type { ThemeDefinition, ThemeTokenSet } from './theme-registry'\r\nimport { tokenSetToCSSVariables } from './theme-utils'\r\nimport './app_theme'\r\n\r\ninterface ThemeContextType {\r\n  currentTheme: string | null\r\n  currentMode: string | null\r\n  themes: ThemeDefinition[]\r\n  setTheme: (themeName: string, mode: string) => void\r\n  setMode: (mode: string) => void\r\n  availableModes: string[]\r\n  getThemeColors: () => ThemeTokenSet | null\r\n}\r\n\r\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined)\r\n\r\nexport function ThemeProvider({ children }: { children: React.ReactNode }) {\r\n  const [currentTheme, setCurrentTheme] = useState<string | null>(null)\r\n  const [currentMode, setCurrentMode] = useState<string | null>(null)\r\n  const [themes, setThemes] = useState<ThemeDefinition[]>([])\r\n\r\n  useEffect(() => {\r\n    // Initialize themes from registry\r\n    const registeredThemes = themeRegistry.getAll()\r\n    \r\n    // If no themes are registered, try to dynamically import app_theme\r\n    if (registeredThemes.length === 0) {\r\n      import('./app_theme').then(() => {\r\n        setThemes(themeRegistry.getAll())\r\n      })\r\n    } else {\r\n      setThemes(registeredThemes)\r\n    }\r\n\r\n    if (registeredThemes.length > 0) {\r\n      // Try to load from localStorage\r\n      const saved = localStorage.getItem('fnp-theme') as string | null\r\n      const savedMode = localStorage.getItem('fnp-mode') as string | null\r\n\r\n      const resolved = themeRegistry.resolveSelection(saved, savedMode)\r\n      if (!resolved.themeName || !resolved.modeName || !resolved.tokens) return\r\n\r\n      setCurrentTheme(resolved.themeName)\r\n      setCurrentMode(resolved.modeName)\r\n      themeRegistry.setCurrent(resolved.themeName, resolved.modeName)\r\n      applyTheme(resolved.tokens)\r\n\r\n      localStorage.setItem('fnp-theme', resolved.themeName)\r\n      localStorage.setItem('fnp-mode', resolved.modeName)\r\n    }\r\n  }, [])\r\n\r\n  const applyTheme = useCallback((tokens: ThemeTokenSet) => {\r\n    const root = document.documentElement\r\n    const variables = tokenSetToCSSVariables(tokens)\r\n    Object.entries(variables).forEach(([name, value]) => {\r\n      root.style.setProperty(name, value)\r\n    })\r\n  }, [])\r\n\r\n  const setTheme = useCallback((themeName: string, mode: string) => {\r\n    const resolved = themeRegistry.resolveSelection(themeName, mode)\r\n    if (!resolved.themeName || !resolved.modeName || !resolved.tokens) return\r\n\r\n    setCurrentTheme(resolved.themeName)\r\n    setCurrentMode(resolved.modeName)\r\n    themeRegistry.setCurrent(resolved.themeName, resolved.modeName)\r\n    applyTheme(resolved.tokens)\r\n\r\n    localStorage.setItem('fnp-theme', resolved.themeName)\r\n    localStorage.setItem('fnp-mode', resolved.modeName)\r\n  }, [applyTheme])\r\n\r\n  const setMode = useCallback((mode: string) => {\r\n    if (!currentTheme) return\r\n    setTheme(currentTheme, mode)\r\n  }, [currentTheme, setTheme])\r\n\r\n  const getThemeColors = useCallback(() => {\r\n    if (!currentTheme || !currentMode) return null\r\n    return themeRegistry.getTokens(currentTheme, currentMode) ?? null\r\n  }, [currentTheme, currentMode])\r\n\r\n  const availableModes = currentTheme ? themeRegistry.getModes(currentTheme) : []\r\n\r\n  return (\r\n    <ThemeContext.Provider\r\n      value={{\r\n        currentTheme,\r\n        currentMode,\r\n        themes,\r\n        setTheme,\r\n        setMode,\r\n        availableModes,\r\n        getThemeColors,\r\n      }}\r\n    >\r\n      {children}\r\n    </ThemeContext.Provider>\r\n  )\r\n}\r\n\r\nexport function useTheme() {\r\n  const context = useContext(ThemeContext)\r\n  if (context === undefined) {\r\n    throw new Error('useTheme must be used within a ThemeProvider')\r\n  }\r\n  return context\r\n}","import type { ThemePalette, ThemeDefinition, ThemeTokenSet, ThemeTokensV2 } from './theme-registry'\r\nimport { isThemeTokensV2 } from './theme-registry'\r\n\r\nexport function paletteToCSSVariables(palette: ThemePalette): Record<string, string> {\r\n  return tokenSetToCSSVariables(palette)\r\n}\r\n\r\nfunction semanticTokensToCSSVariables(tokens: ThemeTokensV2): Record<string, string> {\r\n  const variables: Record<string, string> = {}\r\n\r\n  const appendCategory = <T extends { [K in keyof T]: string }>(category: string, categoryValues: T) => {\r\n    ;(Object.entries(categoryValues) as Array<[keyof T, string]>).forEach(([key, value]) => {\r\n      const keyName = String(key)\r\n      variables[`--theme-${category}-${keyName}`] = value\r\n\r\n      // Keep color alias vars for easy migration from legacy palettes.\r\n      if (category === 'colors') {\r\n        variables[`--color-theme-${keyName}`] = value\r\n      }\r\n    })\r\n  }\r\n\r\n  appendCategory('colors', tokens.colors)\r\n  appendCategory('surface', tokens.surface)\r\n  appendCategory('text', tokens.text)\r\n  appendCategory('border', tokens.border)\r\n\r\n  return variables\r\n}\r\n\r\nfunction legacyTokensToCSSVariables(tokens: ThemePalette): Record<string, string> {\r\n  const variables: Record<string, string> = {}\r\n\r\n  ;(Object.entries(tokens) as Array<[keyof ThemePalette, string | undefined]>).forEach(([key, value]) => {\r\n    if (key === 'tertiary' && !value) return\r\n    if (!value) return\r\n    variables[`--color-theme-${String(key)}`] = value\r\n  })\r\n\r\n  return variables\r\n}\r\n\r\nexport function tokenSetToCSSVariables(tokens: ThemeTokenSet): Record<string, string> {\r\n  if (isThemeTokensV2(tokens)) {\r\n    return semanticTokensToCSSVariables(tokens)\r\n  }\r\n\r\n  return legacyTokensToCSSVariables(tokens)\r\n}\r\n\r\nexport function generateThemeCSS(theme: ThemeDefinition): string {\r\n  const modes = Object.entries(theme.modes)\r\n  \r\n  let css = `/* Theme: ${theme.name} */\\n`\r\n  \r\n  modes.forEach(([modeName, tokens]) => {\r\n    css += `\\n[data-theme=\"${theme.name}\"][data-mode=\"${modeName}\"] {\\n`\r\n\r\n    const variables = tokenSetToCSSVariables(tokens)\r\n    Object.entries(variables).forEach(([name, value]) => {\r\n      css += `  ${name}: ${value};\\n`\r\n    })\r\n\r\n    css += `}\\n`\r\n  })\r\n\r\n  return css\r\n}\r\n\r\nexport function generateAllThemesCSS(themes: ThemeDefinition[]): string {\r\n  return themes.map(generateThemeCSS).join('\\n')\r\n}\r\n\r\nexport function applyThemeToDocument(theme: ThemeDefinition, mode: string) {\r\n  const tokens = theme.modes[mode]\r\n  if (!tokens) return\r\n\r\n  document.documentElement.setAttribute('data-theme', theme.name)\r\n  document.documentElement.setAttribute('data-mode', mode)\r\n\r\n  const variables = tokenSetToCSSVariables(tokens)\r\n  Object.entries(variables).forEach(([name, value]) => {\r\n    document.documentElement.style.setProperty(name, value)\r\n  })\r\n}"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@12nil/theme-registry-package",
+  "version": "0.1.0",
+  "description": "Theme registry and React provider utilities",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "./app_theme.ts"
+  ],
+  "scripts": {
+    "build": "tsup index.ts --format esm,cjs --dts --sourcemap --clean",
+    "dev": "tsup index.ts --format esm,cjs --dts --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "tsup": "^8.2.4",
+    "typescript": "^5.8.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}