@kilivi/payloadcms-theme-management 0.5.7 → 0.5.9

package/dist/utils/extendedThemeHelpers.d.ts

@@ -115,5 +115,5 @@ export declare function createUseExtendedTheme(presets: Record<string, ExtendedT
  * }
  * ```
  */
-export declare function getTailwindVarReferences(): any;
+export declare function getTailwindVarReferences(): Record<string, unknown>;
 //# sourceMappingURL=extendedThemeHelpers.d.ts.map

package/dist/utils/extendedThemeHelpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"extendedThemeHelpers.d.ts","sourceRoot":"","sources":["../../src/utils/extendedThemeHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAGpF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,mBAAmB,EAC1B,IAAI,GAAE,OAAO,GAAG,MAAgB,GAC/B,IAAI,CAaN;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,mBAAmB,GAAG,MAAM,CAU3E;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CAgBzC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,MAAM,iBAAiB,EACtE,KAAK,EAAE,mBAAmB,EAC1B,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,IAAI,EAAE,CAAC,EAAE,GACR,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAW5B;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC;;;2BAK/B,MAAM,QAAQ,OAAO,GAAG,MAAM;;EAmBjF;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,wBAAwB,IAAI,GAAG,CA2C9C"}
+{"version":3,"file":"extendedThemeHelpers.d.ts","sourceRoot":"","sources":["../../src/utils/extendedThemeHelpers.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAEpF;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,mBAAmB,EAC1B,IAAI,GAAE,OAAO,GAAG,MAAgB,GAC/B,IAAI,CAaN;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,mBAAmB,GAAG,MAAM,CAU3E;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CAqCzC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,MAAM,iBAAiB,EACtE,KAAK,EAAE,mBAAmB,EAC1B,IAAI,EAAE,OAAO,GAAG,MAAM,EACtB,IAAI,EAAE,CAAC,EAAE,GACR,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAW5B;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC;;;2BAK/B,MAAM,QAAQ,OAAO,GAAG,MAAM;;EAmBjF;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,wBAAwB,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CA2ClE"}

package/dist/utils/extendedThemeHelpers.js

@@ -2,15 +2,15 @@ import * as React from 'react';
 /**
  * Apply an extended theme client-side by setting CSS variables on document.documentElement
  * Works exactly like silicondeck/shadcn-dashboard-landing-template's useThemeManager
- * 
+ *
  * @example
  * ```tsx
  * import { extendedThemePresets, applyExtendedTheme } from '@kilivi/payloadcms-theme-management'
- * 
+ *
  * // In a client component or hook
  * function useExtendedTheme() {
  *   const isDark = document.documentElement.classList.contains('dark')
- *   
+ *
  *   useEffect(() => {
  *     applyExtendedTheme(extendedThemePresets['cool-extended'], isDark ? 'dark' : 'light')
  *   }, [isDark])
@@ -31,14 +31,14 @@ import * as React from 'react';
 /**
  * Generate CSS content for globals.css
  * Add this to your globals.css file to define base theme variables
- * 
+ *
  * @example
  * ```tsx
  * import { extendedThemePresets, generateExtendedThemeCSS } from '@kilivi/payloadcms-theme-management'
- * 
+ *
  * // Generate CSS for cool-extended theme
  * const css = generateExtendedThemeCSS(extendedThemePresets['cool-extended'])
- * 
+ *
  * // Copy this to your globals.css:
  * // :root {
  * //   --background: oklch(...);
@@ -57,11 +57,11 @@ import * as React from 'react';
 /**
  * Reset all extended theme CSS variables
  * Useful when switching between themes or resetting to defaults
- * 
+ *
  * @example
  * ```tsx
  * import { resetExtendedTheme } from '@kilivi/payloadcms-theme-management'
- * 
+ *
  * // Remove all extended theme variables
  * resetExtendedTheme()
  * ```
@@ -104,11 +104,11 @@ import * as React from 'react';
 /**
  * Extract specific color tokens from an extended theme
  * Useful when you only need a subset of theme colors
- * 
+ *
  * @example
  * ```tsx
  * import { extendedThemePresets, getExtendedThemeTokens } from '@kilivi/payloadcms-theme-management'
- * 
+ *
  * const chartColors = getExtendedThemeTokens(
  *   extendedThemePresets['cool-extended'],
  *   'light',
@@ -128,16 +128,16 @@ import * as React from 'react';
 /**
  * Create a React hook for theme management
  * Factory function to create a custom hook tied to your theme system
- * 
+ *
  * @example
  * ```tsx
  * import { extendedThemePresets, createUseExtendedTheme } from '@kilivi/payloadcms-theme-management'
- * 
+ *
  * const useExtendedTheme = createUseExtendedTheme(extendedThemePresets)
- * 
+ *
  * function MyComponent() {
  *   const { applyTheme, currentMode } = useExtendedTheme()
- *   
+ *
  *   return (
  *     <button onClick={() => applyTheme('neon-extended', 'dark')}>
  *       Apply Neon Dark
@@ -170,12 +170,12 @@ import * as React from 'react';
 /**
  * Get Tailwind CSS color references for extended themes
  * Use this in your tailwind.config.ts to enable semantic color classes
- * 
+ *
  * @example
  * ```ts
  * // tailwind.config.ts
  * import { getTailwindVarReferences } from '@kilivi/payloadcms-theme-management'
- * 
+ *
  * export default {
  *   theme: {
  *     extend: {

package/dist/utils/extendedThemeHelpers.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/extendedThemeHelpers.ts"],"sourcesContent":["import type { ExtendedThemePreset, ShadcnColorTokens } from '../extended-presets.js'\nimport * as React from 'react'\n\n/**\n * Apply an extended theme client-side by setting CSS variables on document.documentElement\n * Works exactly like silicondeck/shadcn-dashboard-landing-template's useThemeManager\n * \n * @example\n * ```tsx\n * import { extendedThemePresets, applyExtendedTheme } from '@kilivi/payloadcms-theme-management'\n * \n * // In a client component or hook\n * function useExtendedTheme() {\n *   const isDark = document.documentElement.classList.contains('dark')\n *   \n *   useEffect(() => {\n *     applyExtendedTheme(extendedThemePresets['cool-extended'], isDark ? 'dark' : 'light')\n *   }, [isDark])\n * }\n * ```\n */\nexport function applyExtendedTheme(\n  theme: ExtendedThemePreset,\n  mode: 'light' | 'dark' = 'light'\n): void {\n  if (typeof document === 'undefined') {\n    console.warn('applyExtendedTheme can only be called in browser environment')\n    return\n  }\n  \n  const tokens = theme.styles[mode]\n  const root = document.documentElement\n  \n  // Apply CSS variables to document root (same as silicondeck's approach)\n  Object.entries(tokens).forEach(([key, value]) => {\n    root.style.setProperty(`--${key}`, value)\n  })\n}\n\n/**\n * Generate CSS content for globals.css\n * Add this to your globals.css file to define base theme variables\n * \n * @example\n * ```tsx\n * import { extendedThemePresets, generateExtendedThemeCSS } from '@kilivi/payloadcms-theme-management'\n * \n * // Generate CSS for cool-extended theme\n * const css = generateExtendedThemeCSS(extendedThemePresets['cool-extended'])\n * \n * // Copy this to your globals.css:\n * // :root {\n * //   --background: oklch(...);\n * //   ...\n * // }\n * // .dark {\n * //   --background: oklch(...);\n * //   ...\n * // }\n * ```\n */\nexport function generateExtendedThemeCSS(theme: ExtendedThemePreset): string {\n  const lightVars = Object.entries(theme.styles.light)\n    .map(([key, value]) => `  --${key}: ${value};`)\n    .join('\\n')\n\n  const darkVars = Object.entries(theme.styles.dark)\n    .map(([key, value]) => `  --${key}: ${value};`)\n    .join('\\n')\n\n  return `:root {\\n${lightVars}\\n}\\n\\n.dark {\\n${darkVars}\\n}`\n}\n\n/**\n * Reset all extended theme CSS variables\n * Useful when switching between themes or resetting to defaults\n * \n * @example\n * ```tsx\n * import { resetExtendedTheme } from '@kilivi/payloadcms-theme-management'\n * \n * // Remove all extended theme variables\n * resetExtendedTheme()\n * ```\n */\nexport function resetExtendedTheme(): void {\n  if (typeof document === 'undefined') return\n\n  const root = document.documentElement\n  const allVars = [\n    'background', 'foreground', 'card', 'card-foreground', 'popover', 'popover-foreground',\n    'primary', 'primary-foreground', 'secondary', 'secondary-foreground',\n    'muted', 'muted-foreground', 'accent', 'accent-foreground',\n    'destructive', 'destructive-foreground', 'border', 'input', 'ring',\n    'chart-1', 'chart-2', 'chart-3', 'chart-4', 'chart-5',\n    'radius', 'font-sans', 'font-mono'\n  ]\n\n  allVars.forEach(varName => {\n    root.style.removeProperty(`--${varName}`)\n  })\n}\n\n/**\n * Extract specific color tokens from an extended theme\n * Useful when you only need a subset of theme colors\n * \n * @example\n * ```tsx\n * import { extendedThemePresets, getExtendedThemeTokens } from '@kilivi/payloadcms-theme-management'\n * \n * const chartColors = getExtendedThemeTokens(\n *   extendedThemePresets['cool-extended'],\n *   'light',\n *   ['chart-1', 'chart-2', 'chart-3', 'chart-4', 'chart-5']\n * )\n * ```\n */\nexport function getExtendedThemeTokens<K extends keyof ShadcnColorTokens>(\n  theme: ExtendedThemePreset,\n  mode: 'light' | 'dark',\n  keys: K[]\n): Pick<ShadcnColorTokens, K> {\n  const tokens = theme.styles[mode]\n  const result = {} as Pick<ShadcnColorTokens, K>\n  \n  keys.forEach(key => {\n    if (tokens[key]) {\n      result[key] = tokens[key]\n    }\n  })\n  \n  return result\n}\n\n/**\n * Create a React hook for theme management\n * Factory function to create a custom hook tied to your theme system\n * \n * @example\n * ```tsx\n * import { extendedThemePresets, createUseExtendedTheme } from '@kilivi/payloadcms-theme-management'\n * \n * const useExtendedTheme = createUseExtendedTheme(extendedThemePresets)\n * \n * function MyComponent() {\n *   const { applyTheme, currentMode } = useExtendedTheme()\n *   \n *   return (\n *     <button onClick={() => applyTheme('neon-extended', 'dark')}>\n *       Apply Neon Dark\n *     </button>\n *   )\n * }\n * ```\n */\nexport function createUseExtendedTheme(presets: Record<string, ExtendedThemePreset>) {\n  return function useExtendedTheme() {\n    const [currentTheme, setCurrentTheme] = React.useState<string>('default')\n    const [currentMode, setCurrentMode] = React.useState<'light' | 'dark'>('light')\n\n    const applyTheme = React.useCallback((themeKey: string, mode: 'light' | 'dark') => {\n      const theme = presets[themeKey]\n      if (!theme) {\n        console.warn(`Theme \"${themeKey}\" not found`)\n        return\n      }\n\n      applyExtendedTheme(theme, mode)\n      setCurrentTheme(themeKey)\n      setCurrentMode(mode)\n    }, [])\n\n    return {\n      currentTheme,\n      currentMode,\n      applyTheme,\n      resetTheme: resetExtendedTheme\n    }\n  }\n}\n\n/**\n * Get Tailwind CSS color references for extended themes\n * Use this in your tailwind.config.ts to enable semantic color classes\n * \n * @example\n * ```ts\n * // tailwind.config.ts\n * import { getTailwindVarReferences } from '@kilivi/payloadcms-theme-management'\n * \n * export default {\n *   theme: {\n *     extend: {\n *       colors: getTailwindVarReferences()\n *     }\n *   }\n * }\n * ```\n */\nexport function getTailwindVarReferences(): any {\n  return {\n    background: 'hsl(var(--background))',\n    foreground: 'hsl(var(--foreground))',\n    card: {\n      DEFAULT: 'hsl(var(--card))',\n      foreground: 'hsl(var(--card-foreground))',\n    },\n    popover: {\n      DEFAULT: 'hsl(var(--popover))',\n      foreground: 'hsl(var(--popover-foreground))',\n    },\n    primary: {\n      DEFAULT: 'hsl(var(--primary))',\n      foreground: 'hsl(var(--primary-foreground))',\n    },\n    secondary: {\n      DEFAULT: 'hsl(var(--secondary))',\n      foreground: 'hsl(var(--secondary-foreground))',\n    },\n    muted: {\n      DEFAULT: 'hsl(var(--muted))',\n      foreground: 'hsl(var(--muted-foreground))',\n    },\n    accent: {\n      DEFAULT: 'hsl(var(--accent))',\n      foreground: 'hsl(var(--accent-foreground))',\n    },\n    destructive: {\n      DEFAULT: 'hsl(var(--destructive))',\n      foreground: 'hsl(var(--destructive-foreground))',\n    },\n    border: 'hsl(var(--border))',\n    input: 'hsl(var(--input))',\n    ring: 'hsl(var(--ring))',\n    chart: {\n      '1': 'hsl(var(--chart-1))',\n      '2': 'hsl(var(--chart-2))',\n      '3': 'hsl(var(--chart-3))',\n      '4': 'hsl(var(--chart-4))',\n      '5': 'hsl(var(--chart-5))',\n    },\n  }\n}\n"],"names":["React","applyExtendedTheme","theme","mode","document","console","warn","tokens","styles","root","documentElement","Object","entries","forEach","key","value","style","setProperty","generateExtendedThemeCSS","lightVars","light","map","join","darkVars","dark","resetExtendedTheme","allVars","varName","removeProperty","getExtendedThemeTokens","keys","result","createUseExtendedTheme","presets","useExtendedTheme","currentTheme","setCurrentTheme","useState","currentMode","setCurrentMode","applyTheme","useCallback","themeKey","resetTheme","getTailwindVarReferences","background","foreground","card","DEFAULT","popover","primary","secondary","muted","accent","destructive","border","input","ring","chart"],"mappings":"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"}
+{"version":3,"sources":["../../src/utils/extendedThemeHelpers.ts"],"sourcesContent":["import * as React from 'react'\nimport type { ExtendedThemePreset, ShadcnColorTokens } from '../extended-presets.js'\n\n/**\n * Apply an extended theme client-side by setting CSS variables on document.documentElement\n * Works exactly like silicondeck/shadcn-dashboard-landing-template's useThemeManager\n *\n * @example\n * ```tsx\n * import { extendedThemePresets, applyExtendedTheme } from '@kilivi/payloadcms-theme-management'\n *\n * // In a client component or hook\n * function useExtendedTheme() {\n *   const isDark = document.documentElement.classList.contains('dark')\n *\n *   useEffect(() => {\n *     applyExtendedTheme(extendedThemePresets['cool-extended'], isDark ? 'dark' : 'light')\n *   }, [isDark])\n * }\n * ```\n */\nexport function applyExtendedTheme(\n  theme: ExtendedThemePreset,\n  mode: 'light' | 'dark' = 'light',\n): void {\n  if (typeof document === 'undefined') {\n    console.warn('applyExtendedTheme can only be called in browser environment')\n    return\n  }\n\n  const tokens = theme.styles[mode]\n  const root = document.documentElement\n\n  // Apply CSS variables to document root (same as silicondeck's approach)\n  Object.entries(tokens).forEach(([key, value]) => {\n    root.style.setProperty(`--${key}`, value)\n  })\n}\n\n/**\n * Generate CSS content for globals.css\n * Add this to your globals.css file to define base theme variables\n *\n * @example\n * ```tsx\n * import { extendedThemePresets, generateExtendedThemeCSS } from '@kilivi/payloadcms-theme-management'\n *\n * // Generate CSS for cool-extended theme\n * const css = generateExtendedThemeCSS(extendedThemePresets['cool-extended'])\n *\n * // Copy this to your globals.css:\n * // :root {\n * //   --background: oklch(...);\n * //   ...\n * // }\n * // .dark {\n * //   --background: oklch(...);\n * //   ...\n * // }\n * ```\n */\nexport function generateExtendedThemeCSS(theme: ExtendedThemePreset): string {\n  const lightVars = Object.entries(theme.styles.light)\n    .map(([key, value]) => `  --${key}: ${value};`)\n    .join('\\n')\n\n  const darkVars = Object.entries(theme.styles.dark)\n    .map(([key, value]) => `  --${key}: ${value};`)\n    .join('\\n')\n\n  return `:root {\\n${lightVars}\\n}\\n\\n.dark {\\n${darkVars}\\n}`\n}\n\n/**\n * Reset all extended theme CSS variables\n * Useful when switching between themes or resetting to defaults\n *\n * @example\n * ```tsx\n * import { resetExtendedTheme } from '@kilivi/payloadcms-theme-management'\n *\n * // Remove all extended theme variables\n * resetExtendedTheme()\n * ```\n */\nexport function resetExtendedTheme(): void {\n  if (typeof document === 'undefined') return\n\n  const root = document.documentElement\n  const allVars = [\n    'background',\n    'foreground',\n    'card',\n    'card-foreground',\n    'popover',\n    'popover-foreground',\n    'primary',\n    'primary-foreground',\n    'secondary',\n    'secondary-foreground',\n    'muted',\n    'muted-foreground',\n    'accent',\n    'accent-foreground',\n    'destructive',\n    'destructive-foreground',\n    'border',\n    'input',\n    'ring',\n    'chart-1',\n    'chart-2',\n    'chart-3',\n    'chart-4',\n    'chart-5',\n    'radius',\n    'font-sans',\n    'font-mono',\n  ]\n\n  allVars.forEach((varName) => {\n    root.style.removeProperty(`--${varName}`)\n  })\n}\n\n/**\n * Extract specific color tokens from an extended theme\n * Useful when you only need a subset of theme colors\n *\n * @example\n * ```tsx\n * import { extendedThemePresets, getExtendedThemeTokens } from '@kilivi/payloadcms-theme-management'\n *\n * const chartColors = getExtendedThemeTokens(\n *   extendedThemePresets['cool-extended'],\n *   'light',\n *   ['chart-1', 'chart-2', 'chart-3', 'chart-4', 'chart-5']\n * )\n * ```\n */\nexport function getExtendedThemeTokens<K extends keyof ShadcnColorTokens>(\n  theme: ExtendedThemePreset,\n  mode: 'light' | 'dark',\n  keys: K[],\n): Pick<ShadcnColorTokens, K> {\n  const tokens = theme.styles[mode]\n  const result = {} as Pick<ShadcnColorTokens, K>\n\n  keys.forEach((key) => {\n    if (tokens[key]) {\n      result[key] = tokens[key]\n    }\n  })\n\n  return result\n}\n\n/**\n * Create a React hook for theme management\n * Factory function to create a custom hook tied to your theme system\n *\n * @example\n * ```tsx\n * import { extendedThemePresets, createUseExtendedTheme } from '@kilivi/payloadcms-theme-management'\n *\n * const useExtendedTheme = createUseExtendedTheme(extendedThemePresets)\n *\n * function MyComponent() {\n *   const { applyTheme, currentMode } = useExtendedTheme()\n *\n *   return (\n *     <button onClick={() => applyTheme('neon-extended', 'dark')}>\n *       Apply Neon Dark\n *     </button>\n *   )\n * }\n * ```\n */\nexport function createUseExtendedTheme(presets: Record<string, ExtendedThemePreset>) {\n  return function useExtendedTheme() {\n    const [currentTheme, setCurrentTheme] = React.useState<string>('default')\n    const [currentMode, setCurrentMode] = React.useState<'light' | 'dark'>('light')\n\n    const applyTheme = React.useCallback((themeKey: string, mode: 'light' | 'dark') => {\n      const theme = presets[themeKey]\n      if (!theme) {\n        console.warn(`Theme \"${themeKey}\" not found`)\n        return\n      }\n\n      applyExtendedTheme(theme, mode)\n      setCurrentTheme(themeKey)\n      setCurrentMode(mode)\n    }, [])\n\n    return {\n      currentTheme,\n      currentMode,\n      applyTheme,\n      resetTheme: resetExtendedTheme,\n    }\n  }\n}\n\n/**\n * Get Tailwind CSS color references for extended themes\n * Use this in your tailwind.config.ts to enable semantic color classes\n *\n * @example\n * ```ts\n * // tailwind.config.ts\n * import { getTailwindVarReferences } from '@kilivi/payloadcms-theme-management'\n *\n * export default {\n *   theme: {\n *     extend: {\n *       colors: getTailwindVarReferences()\n *     }\n *   }\n * }\n * ```\n */\nexport function getTailwindVarReferences(): Record<string, unknown> {\n  return {\n    background: 'hsl(var(--background))',\n    foreground: 'hsl(var(--foreground))',\n    card: {\n      DEFAULT: 'hsl(var(--card))',\n      foreground: 'hsl(var(--card-foreground))',\n    },\n    popover: {\n      DEFAULT: 'hsl(var(--popover))',\n      foreground: 'hsl(var(--popover-foreground))',\n    },\n    primary: {\n      DEFAULT: 'hsl(var(--primary))',\n      foreground: 'hsl(var(--primary-foreground))',\n    },\n    secondary: {\n      DEFAULT: 'hsl(var(--secondary))',\n      foreground: 'hsl(var(--secondary-foreground))',\n    },\n    muted: {\n      DEFAULT: 'hsl(var(--muted))',\n      foreground: 'hsl(var(--muted-foreground))',\n    },\n    accent: {\n      DEFAULT: 'hsl(var(--accent))',\n      foreground: 'hsl(var(--accent-foreground))',\n    },\n    destructive: {\n      DEFAULT: 'hsl(var(--destructive))',\n      foreground: 'hsl(var(--destructive-foreground))',\n    },\n    border: 'hsl(var(--border))',\n    input: 'hsl(var(--input))',\n    ring: 'hsl(var(--ring))',\n    chart: {\n      '1': 'hsl(var(--chart-1))',\n      '2': 'hsl(var(--chart-2))',\n      '3': 'hsl(var(--chart-3))',\n      '4': 'hsl(var(--chart-4))',\n      '5': 'hsl(var(--chart-5))',\n    },\n  }\n}\n"],"names":["React","applyExtendedTheme","theme","mode","document","console","warn","tokens","styles","root","documentElement","Object","entries","forEach","key","value","style","setProperty","generateExtendedThemeCSS","lightVars","light","map","join","darkVars","dark","resetExtendedTheme","allVars","varName","removeProperty","getExtendedThemeTokens","keys","result","createUseExtendedTheme","presets","useExtendedTheme","currentTheme","setCurrentTheme","useState","currentMode","setCurrentMode","applyTheme","useCallback","themeKey","resetTheme","getTailwindVarReferences","background","foreground","card","DEFAULT","popover","primary","secondary","muted","accent","destructive","border","input","ring","chart"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kilivi/payloadcms-theme-management",
-  "version": "0.5.7",
+  "version": "0.5.9",
   "description": "Theme configuration plugin for Payload CMS v3 with 60+ professional themes",
   "type": "module",
   "main": "./dist/index.js",
@@ -55,6 +55,7 @@
   "peerDependencies": {
     "payload": "^3.0.0",
     "@payloadcms/ui": "^3.0.0",
+    "next": "^14.0.0 || ^15.0.0",
     "react": "^18.3.0 || ^19.0.0-rc",
     "react-dom": "^18.3.0 || ^19.0.0-rc"
   },
@@ -76,6 +77,7 @@
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.2.0",
     "mongodb-memory-server": "^10.2.3",
+    "next": "^15.0.0",
     "payload": "^3.58.0",
     "playwright": "^1.56.0",
     "postcss": "^8.5.0",