@tamagui/next-theme 2.0.0-rc.11 → 2.0.0-rc.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/next-theme",
-  "version": "2.0.0-rc.11",
+  "version": "2.0.0-rc.12",
   "source": "src/index.ts",
   "files": [
     "src",
@@ -31,11 +31,11 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/constants": "2.0.0-rc.11",
-    "@tamagui/use-event": "2.0.0-rc.11"
+    "@tamagui/constants": "2.0.0-rc.12",
+    "@tamagui/use-event": "2.0.0-rc.12"
   },
   "devDependencies": {
-    "@tamagui/build": "2.0.0-rc.11",
+    "@tamagui/build": "2.0.0-rc.12",
     "next": "16.1.1",
     "react": ">=19"
   },

package/types/NextTheme.d.ts.map

@@ -4,8 +4,8 @@
   "sources": [
     "src/NextTheme.tsx"
   ],
+  "version": 3,
   "sourcesContent": [
     "// https://raw.githubusercontent.com/pacocoursey/next-themes/master/index.tsx\n// forked temporarily\n\nexport * from './NextThemeProvider'\nexport * from './ThemeSettingContext'\nexport * from './UseThemeProps'\nexport * from './helpers'\nexport * from './constants'\nexport * from './useTheme'\nexport * from './types'\nexport * from './useRootTheme'\n"
-  ],
-  "version": 3
+  ]
 }

package/types/NextThemeProvider.d.ts.map

@@ -1,13 +1,11 @@
 {
-  "mappings": "AAGA,YAAY,WAAW;AAOvB,cAAc,0BAAyC;AAEvD,OAAO,cAAMA,mBAAmB,MAAM,kBAAkB",
-  "names": [
-    "NextThemeProvider: React.FunctionComponent<ThemeProviderProps>"
-  ],
+  "mappings": "AAGA,YAAY,WAAW;AAOvB,cAAc,0BAAyC;AAEvD,OAAO,cAAM,mBAAmB,MAAM,kBAAkB",
+  "names": [],
   "sources": [
     "src/NextThemeProvider.tsx"
   ],
+  "version": 3,
   "sourcesContent": [
     "import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport { useEvent } from '@tamagui/use-event'\nimport Script from 'next/script'\nimport * as React from 'react'\nimport { memo, useEffect, useMemo, useState } from 'react'\n\nimport { MEDIA, colorSchemes } from './constants'\nimport { getSystemTheme, getTheme } from './helpers'\nimport { ThemeSettingContext } from './ThemeSettingContext'\nimport type { ValueObject } from './types'\nimport type { ThemeProviderProps, UseThemeProps } from './UseThemeProps'\n\nexport const NextThemeProvider: React.FunctionComponent<ThemeProviderProps> = memo(\n  ({\n    forcedTheme,\n    disableTransitionOnChange = false,\n    enableSystem = true,\n    enableColorScheme = true,\n    storageKey = 'theme',\n    themes = colorSchemes,\n    defaultTheme = enableSystem ? 'system' : 'light',\n    attribute = 'class',\n    skipNextHead,\n    onChangeTheme,\n    value = {\n      dark: 't_dark',\n      light: 't_light',\n    },\n    children,\n  }) => {\n    const [theme, setThemeState] = useState(() => getTheme(storageKey, defaultTheme))\n    const [resolvedTheme, setResolvedTheme] = useState(() => getTheme(storageKey))\n    const attrs = !value ? themes : Object.values(value)\n\n    const handleMediaQuery = useEvent((e?) => {\n      const _ = getSystemTheme(e)\n      const update = () => setResolvedTheme(_)\n      if (disableTransitionOnChange) {\n        update()\n      } else {\n        React.startTransition(() => update())\n      }\n      if (theme === 'system' && !forcedTheme) {\n        handleChangeTheme(_, false)\n      }\n    })\n\n    const handleChangeTheme = useEvent(\n      (theme, updateStorage = true, updateDOM = true) => {\n        let name = value?.[theme] || theme\n\n        if (updateStorage) {\n          try {\n            localStorage.setItem(storageKey, theme)\n          } catch (e) {\n            // Unsupported\n          }\n        }\n\n        if (theme === 'system' && enableSystem) {\n          const resolved = getSystemTheme()\n          name = value?.[resolved] || resolved\n        }\n\n        onChangeTheme?.(name.replace('t_', ''))\n\n        if (updateDOM) {\n          const d = document.documentElement\n          if (attribute === 'class') {\n            d.classList.remove(...attrs)\n            d.classList.add(name)\n          } else {\n            d.setAttribute(attribute, name)\n          }\n        }\n      }\n    )\n\n    useIsomorphicLayoutEffect(() => {\n      // Always listen to System preference\n      const media = window.matchMedia(MEDIA)\n      // Intentionally use deprecated listener methods to support iOS & old browsers\n      media.addListener(handleMediaQuery)\n      handleMediaQuery(media)\n      return () => {\n        media.removeListener(handleMediaQuery)\n      }\n    }, [])\n\n    const set = useEvent((newTheme) => {\n      if (forcedTheme) {\n        // when forcedTheme is active, block all updates to avoid desync\n        return\n      }\n      handleChangeTheme(newTheme)\n      setThemeState(newTheme)\n    })\n\n    // localStorage event handling\n    useEffect(() => {\n      const handleStorage = (e: StorageEvent) => {\n        if (e.key !== storageKey) {\n          return\n        }\n        // If default theme set, use it if localstorage === null (happens on local storage manual deletion)\n        const theme = e.newValue || defaultTheme\n        set(theme)\n      }\n      window.addEventListener('storage', handleStorage)\n      return () => {\n        window.removeEventListener('storage', handleStorage)\n      }\n    }, [defaultTheme, set, storageKey])\n\n    // color-scheme handling\n    useIsomorphicLayoutEffect(() => {\n      if (!enableColorScheme) return\n\n      const colorScheme =\n        // If theme is forced to light or dark, use that\n        forcedTheme && colorSchemes.includes(forcedTheme as 'light' | 'dark')\n          ? forcedTheme\n          : // If regular theme is light or dark\n            theme && colorSchemes.includes(theme)\n            ? theme\n            : // If theme is system, use the resolved version\n              theme === 'system'\n              ? resolvedTheme || null\n              : null\n\n      // color-scheme tells browser how to render built-in elements like forms, scrollbars, etc.\n      // if color-scheme is null, this will remove the property\n      const userPrefers =\n        typeof window !== 'undefined' &&\n        window.matchMedia &&\n        window.matchMedia('(prefers-color-scheme: dark)').matches\n          ? 'dark'\n          : 'light'\n\n      const wePrefer = colorScheme || 'light'\n\n      // avoid running this because it causes full page reflow\n      if (userPrefers !== wePrefer) {\n        document.documentElement.style.setProperty('color-scheme', colorScheme)\n      }\n    }, [enableColorScheme, theme, resolvedTheme, forcedTheme])\n\n    const toggle = useEvent(() => {\n      const order =\n        resolvedTheme === 'dark'\n          ? ['system', 'light', 'dark']\n          : ['system', 'dark', 'light']\n      const next = order[(order.indexOf(theme) + 1) % order.length]\n      set(next)\n    })\n\n    const systemTheme = (enableSystem ? resolvedTheme : undefined) as\n      | 'light'\n      | 'dark'\n      | undefined\n\n    const contextValue = useMemo(() => {\n      const value: UseThemeProps = {\n        theme,\n        current: theme,\n        set,\n        toggle,\n        forcedTheme,\n        resolvedTheme: theme === 'system' ? resolvedTheme : theme,\n        themes: enableSystem ? [...themes, 'system'] : (themes as string[]),\n        systemTheme,\n      } as const\n      return value\n    }, [\n      theme,\n      set,\n      toggle,\n      forcedTheme,\n      resolvedTheme,\n      enableSystem,\n      themes,\n      systemTheme,\n    ])\n\n    return (\n      <ThemeSettingContext.Provider value={contextValue}>\n        <ThemeScript\n          {...{\n            forcedTheme,\n            storageKey,\n            systemTheme: resolvedTheme,\n            attribute,\n            value,\n            enableSystem,\n            defaultTheme,\n            attrs,\n            skipNextHead,\n          }}\n        />\n        {children}\n      </ThemeSettingContext.Provider>\n    )\n  }\n)\n\nconst ThemeScript = memo(\n  ({\n    forcedTheme,\n    storageKey,\n    attribute,\n    enableSystem,\n    defaultTheme,\n    value,\n    attrs,\n    skipNextHead,\n  }: {\n    forcedTheme?: string\n    storageKey: string\n    attribute?: string\n    enableSystem?: boolean\n    defaultTheme: string\n    value?: ValueObject\n    attrs: any\n    skipNextHead?: boolean\n  }) => {\n    // Code-golfing the amount of characters in the script\n    const optimization = (() => {\n      if (attribute === 'class') {\n        const removeClasses = attrs.map((t: string) => `d.remove('${t}')`).join(';')\n        return `var d=document.documentElement.classList;${removeClasses};`\n      }\n      return `var d=document.documentElement;`\n    })()\n\n    const updateDOM = (name: string, literal?: boolean) => {\n      name = value?.[name] || name\n      const val = literal ? name : `'${name}'`\n\n      if (attribute === 'class') {\n        return `d.add(${val})`\n      }\n\n      return `d.setAttribute('${attribute}', ${val})`\n    }\n\n    const defaultSystem = defaultTheme === 'system'\n\n    const scriptContent = forcedTheme\n      ? `!function(){${optimization}${updateDOM(forcedTheme)}}()`\n      : enableSystem\n        ? `!function(){try {${optimization}var e=localStorage.getItem('${storageKey}');if(\"system\"===e||(!e&&${defaultSystem})){var t=\"${MEDIA}\",m=window.matchMedia(t);m.media!==t||m.matches?${updateDOM(\n            'dark'\n          )}:${updateDOM('light')}}else if(e){${\n            value ? `var x=${JSON.stringify(value)};` : ''\n          }${updateDOM(value ? 'x[e]' : 'e', true)}}${\n            !defaultSystem ? `else{${updateDOM(defaultTheme)}}` : ''\n          }}catch(e){}}()`\n        : `!function(){try{${optimization}var e=localStorage.getItem(\"${storageKey}\");if(e){${\n            value ? `var x=${JSON.stringify(value)};` : ''\n          }${updateDOM(value ? 'x[e]' : 'e', true)}}else{${updateDOM(\n            defaultTheme\n          )};}}catch(t){}}();`\n\n    // skipNextHead returns raw script for useServerInsertedHTML usage\n    if (skipNextHead) {\n      return (\n        <script\n          key=\"next-themes-script\"\n          dangerouslySetInnerHTML={{ __html: scriptContent }}\n        />\n      )\n    }\n\n    return (\n      <Script\n        id=\"next-themes-script\"\n        strategy=\"beforeInteractive\"\n        dangerouslySetInnerHTML={{ __html: scriptContent }}\n      />\n    )\n  },\n  (prevProps, nextProps) => {\n    // Only re-render when forcedTheme changes\n    // the rest of the props should be completely stable\n    if (prevProps.forcedTheme !== nextProps.forcedTheme) return false\n    return true\n  }\n)\n"
-  ],
-  "version": 3
+  ]
 }

package/types/ThemeSettingContext.d.ts.map

@@ -1,13 +1,11 @@
 {
-  "mappings": "AAAA,cAA6B,eAAe;AAE5C,cAAc,qBAAqB;AAEnC,OAAO,cAAMA,qBAAqB,QAAQ",
-  "names": [
-    "ThemeSettingContext: Context<UseThemeProps>"
-  ],
+  "mappings": "AAAA,cAA6B,eAAe;AAE5C,cAAc,qBAAqB;AAEnC,OAAO,cAAM,qBAAqB,QAAQ",
+  "names": [],
   "sources": [
     "src/ThemeSettingContext.tsx"
   ],
+  "version": 3,
   "sourcesContent": [
     "import { createContext, type Context } from 'react'\n\nimport type { UseThemeProps } from './UseThemeProps'\n\nexport const ThemeSettingContext: Context<UseThemeProps> = createContext<UseThemeProps>({\n  toggle: () => {},\n  set: (_) => {},\n  themes: [],\n})\n"
-  ],
-  "version": 3
+  ]
 }

package/types/UseThemeProps.d.ts.map

@@ -4,8 +4,8 @@
   "sources": [
     "src/UseThemeProps.tsx"
   ],
+  "version": 3,
   "sourcesContent": [
     "import type { ValueObject } from './types'\n\nexport interface UseThemeProps {\n  /** List of all available theme names */\n  themes: string[]\n  /** Forced theme name for the current page */\n  forcedTheme?: string\n  /** Update the theme */\n  set: (theme: string) => void\n  toggle: () => void\n  /** Active theme name - will return \"system\" if not overriden, see \"resolvedTheme\" for getting resolved system value */\n  current?: string\n  /** @deprecated Use `current` instead (deprecating avoid confusion with useTheme) */\n  theme?: string\n  /** If `enableSystem` is true and the active theme is \"system\", this returns whether the system preference resolved to \"dark\" or \"light\". Otherwise, identical to `theme` */\n  resolvedTheme?: string\n  /** If enableSystem is true, returns the System theme preference (\"dark\" or \"light\"), regardless what the active theme is */\n  systemTheme?: 'dark' | 'light'\n}\n\nexport interface ThemeProviderProps {\n  children?: any\n  /** List of all available theme names */\n  themes?: string[]\n  /** Forced theme name for the current page */\n  forcedTheme?: string\n  /** Whether to switch between dark and light themes based on prefers-color-scheme */\n  enableSystem?: boolean\n  systemTheme?: string\n  /** Disable all CSS transitions when switching themes */\n  disableTransitionOnChange?: boolean\n  /** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */\n  enableColorScheme?: boolean\n  /** Key used to store theme setting in localStorage */\n  storageKey?: string\n  /** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light */\n  defaultTheme?: string\n  /** HTML attribute modified based on the active theme. Accepts `class` and `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.) */\n  attribute?: string | 'class'\n  /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */\n  value?: ValueObject\n  onChangeTheme?: (name: string) => void\n\n  // avoids warning\n  skipNextHead?: boolean\n}\n"
-  ],
-  "version": 3
+  ]
 }

package/types/constants.d.ts.map

@@ -4,8 +4,8 @@
   "sources": [
     "src/constants.tsx"
   ],
+  "version": 3,
   "sourcesContent": [
     "export const constants = {}\nexport const colorSchemes = ['light', 'dark'] as const\nexport const MEDIA = '(prefers-color-scheme: dark)'\n"
-  ],
-  "version": 3
+  ]
 }

package/types/helpers.d.ts.map

@@ -4,8 +4,8 @@
   "sources": [
     "src/helpers.tsx"
   ],
+  "version": 3,
   "sourcesContent": [
     "import { MEDIA } from './constants'\n\nexport const helpers = {}\n// Helpers\n\nexport const getTheme = (key: string, fallback?: string): any => {\n  if (typeof window === 'undefined') return undefined\n  let theme\n  try {\n    theme = localStorage.getItem(key) || undefined\n  } catch (e) {\n    // Unsupported\n  }\n  return theme || fallback\n}\n\nexport const getSystemTheme = (e?: MediaQueryList): 'dark' | 'light' => {\n  if (!e) {\n    e = window.matchMedia(MEDIA)\n  }\n\n  const isDark = e.matches\n  const systemTheme = isDark ? 'dark' : 'light'\n  return systemTheme\n}\n"
-  ],
-  "version": 3
+  ]
 }

package/types/index.d.ts.map

@@ -4,8 +4,8 @@
   "sources": [
     "src/index.ts"
   ],
+  "version": 3,
   "sourcesContent": [
     "export * from './NextTheme'\nexport * from './types'\n"
-  ],
-  "version": 3
+  ]
 }

package/types/types.d.ts.map

@@ -4,8 +4,8 @@
   "sources": [
     "src/types.tsx"
   ],
+  "version": 3,
   "sourcesContent": [
     "export type ColorScheme = 'dark' | 'light'\n\nexport interface ValueObject {\n  [themeName: string]: string\n}\n"
-  ],
-  "version": 3
+  ]
 }

package/types/useRootTheme.d.ts.map

@@ -4,8 +4,8 @@
   "sources": [
     "src/useRootTheme.tsx"
   ],
+  "version": 3,
   "sourcesContent": [
     "import { useState, type Dispatch, type SetStateAction } from 'react'\nimport { isClient } from '@tamagui/constants'\n\nimport type { ColorScheme } from './types'\n\nexport const useRootTheme = ({ fallback = 'light' }: { fallback?: ColorScheme } = {}): [\n  ColorScheme,\n  Dispatch<SetStateAction<ColorScheme>>,\n] => {\n  let initialVal = fallback\n\n  if (isClient) {\n    const classes = document.documentElement.classList\n    initialVal = classes.contains('t_dark')\n      ? 'dark'\n      : classes.contains('t_light')\n        ? 'light'\n        : fallback\n  }\n\n  return useState<ColorScheme>(initialVal)\n}\n"
-  ],
-  "version": 3
+  ]
 }

package/types/useTheme.d.ts.map

@@ -4,8 +4,8 @@
   "sources": [
     "src/useTheme.tsx"
   ],
+  "version": 3,
   "sourcesContent": [
     "import { useContext } from 'react'\n\nimport { ThemeSettingContext } from './ThemeSettingContext'\nimport type { UseThemeProps } from './UseThemeProps'\n\n/**\n * @deprecated renamed to `useThemeSetting` to avoid confusion with core `useTheme` hook\n */\n\nexport const useTheme = (): UseThemeProps => useContext(ThemeSettingContext)\n\nexport const useThemeSetting = (): UseThemeProps => useContext(ThemeSettingContext)\n"
-  ],
-  "version": 3
+  ]
 }