@tamagui/next-theme 1.1.2 → 1.1.4

package/src/ThemeSettingContext.tsx

@@ -0,0 +1,9 @@
+import { createContext } from 'react'
+
+import { UseThemeProps } from './UseThemeProps'
+
+export const ThemeSettingContext = createContext<UseThemeProps>({
+  toggle: () => {},
+  set: (_) => {},
+  themes: [],
+})

package/src/UseThemeProps.tsx

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

package/src/constants.tsx

@@ -0,0 +1,3 @@
+export const constants = {}
+export const colorSchemes = ['light', 'dark']
+export const MEDIA = '(prefers-color-scheme: dark)'

package/src/helpers.tsx

@@ -0,0 +1,25 @@
+import { MEDIA } from './constants'
+
+export const helpers = {}
+// Helpers
+
+export const getTheme = (key: string, fallback?: string) => {
+  if (typeof window === 'undefined') return undefined
+  let theme
+  try {
+    theme = localStorage.getItem(key) || undefined
+  } catch (e) {
+    // Unsupported
+  }
+  return theme || fallback
+}
+
+export const getSystemTheme = (e?: MediaQueryList) => {
+  if (!e) {
+    e = window.matchMedia(MEDIA)
+  }
+
+  const isDark = e.matches
+  const systemTheme = isDark ? 'dark' : 'light'
+  return systemTheme
+}

package/src/types.tsx

@@ -0,0 +1,5 @@
+export type types = {}
+
+export interface ValueObject {
+  [themeName: string]: string
+}

package/src/useIsomorphicLayoutEffect.tsx

@@ -0,0 +1,4 @@
+import { useEffect, useLayoutEffect } from 'react'
+
+export const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect

package/src/useRootTheme.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { useLayoutEffect, useState } from 'react'
+
+// note this only works for light being default for now...
+
+export const useRootTheme = () => {
+  const [val, setVal] = useState('light')
+
+  if (typeof document !== 'undefined') {
+    useLayoutEffect(() => {
+      // @ts-ignore
+      const classes = [...document.documentElement.classList]
+      const isDark = classes.includes('t_dark')
+      React.startTransition(() => {
+        setVal(isDark ? 'dark' : 'light')
+      })
+    }, [])
+  }
+
+  return [val, setVal] as const
+}

package/src/useTheme.tsx

@@ -0,0 +1,11 @@
+import { useContext } from 'react'
+
+import { ThemeSettingContext } from './ThemeSettingContext'
+
+/**
+ * @deprecated renamed to `useThemeSetting` to avoid confusion with core `useTheme` hook
+ */
+
+export const useTheme = () => useContext(ThemeSettingContext)
+
+export const useThemeSetting = () => useContext(ThemeSettingContext)

package/types/NextTheme.d.ts

@@ -1,54 +1,9 @@
-import * as React from 'react';
-export interface UseThemeProps {
-    /** List of all available theme names */
-    themes: string[];
-    /** Forced theme name for the current page */
-    forcedTheme?: string;
-    /** Update the theme */
-    set: (theme: string) => void;
-    toggle: () => void;
-    /** Active theme name - will return "system" if not overriden, see "resolvedTheme" for getting resolved system value */
-    current?: string;
-    /** @deprecated Use `current` instead (deprecating avoid confusion with useTheme) */
-    theme?: string;
-    /** 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` */
-    resolvedTheme?: string;
-    /** If enableSystem is true, returns the System theme preference ("dark" or "light"), regardless what the active theme is */
-    systemTheme?: 'dark' | 'light';
-}
-export interface ThemeProviderProps {
-    children?: any;
-    /** List of all available theme names */
-    themes?: string[];
-    /** Forced theme name for the current page */
-    forcedTheme?: string;
-    /** Whether to switch between dark and light themes based on prefers-color-scheme */
-    enableSystem?: boolean;
-    systemTheme?: string;
-    /** Disable all CSS transitions when switching themes */
-    disableTransitionOnChange?: boolean;
-    /** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */
-    enableColorScheme?: boolean;
-    /** Key used to store theme setting in localStorage */
-    storageKey?: string;
-    /** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light */
-    defaultTheme?: string;
-    /** HTML attribute modified based on the active theme. Accepts `class` and `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.) */
-    attribute?: string | 'class';
-    /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */
-    value?: ValueObject;
-    onChangeTheme?: (name: string) => void;
-    skipNextHead?: boolean;
-}
-/**
- * @deprecated renamed to `useThemeSetting` to avoid confusion with core `useTheme` hook
- */
-export declare const useTheme: () => UseThemeProps;
-export declare const useThemeSetting: () => UseThemeProps;
-interface ValueObject {
-    [themeName: string]: string;
-}
-export declare const useRootTheme: () => readonly [string, React.Dispatch<React.SetStateAction<string>>];
-export declare const NextThemeProvider: React.FC<ThemeProviderProps>;
-export {};
+export * from './NextThemeProvider';
+export * from './ThemeSettingContext';
+export * from './UseThemeProps';
+export * from './helpers';
+export * from './constants';
+export * from './useTheme';
+export * from './types';
+export * from './useRootTheme';
 //# sourceMappingURL=NextTheme.d.ts.map

package/types/NextThemeProvider.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { ThemeProviderProps } from './UseThemeProps';
+export declare const NextThemeProvider: React.FC<ThemeProviderProps>;
+//# sourceMappingURL=NextThemeProvider.d.ts.map

package/types/ThemeSettingContext.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { UseThemeProps } from './UseThemeProps';
+export declare const ThemeSettingContext: import("react").Context<UseThemeProps>;
+//# sourceMappingURL=ThemeSettingContext.d.ts.map

package/types/UseThemeProps.d.ts

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

package/types/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const constants: {};
+export declare const colorSchemes: string[];
+export declare const MEDIA = "(prefers-color-scheme: dark)";
+//# sourceMappingURL=constants.d.ts.map

package/types/helpers.d.ts

@@ -0,0 +1,4 @@
+export declare const helpers: {};
+export declare const getTheme: (key: string, fallback?: string) => any;
+export declare const getSystemTheme: (e?: MediaQueryList) => "light" | "dark";
+//# sourceMappingURL=helpers.d.ts.map

package/types/types.d.ts

@@ -0,0 +1,5 @@
+export type types = {};
+export interface ValueObject {
+    [themeName: string]: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/types/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,3 @@
+import { useLayoutEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+//# sourceMappingURL=useIsomorphicLayoutEffect.d.ts.map

package/types/useRootTheme.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const useRootTheme: () => readonly [string, React.Dispatch<React.SetStateAction<string>>];
+//# sourceMappingURL=useRootTheme.d.ts.map

package/types/useTheme.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @deprecated renamed to `useThemeSetting` to avoid confusion with core `useTheme` hook
+ */
+export declare const useTheme: () => import("./UseThemeProps").UseThemeProps;
+export declare const useThemeSetting: () => import("./UseThemeProps").UseThemeProps;
+//# sourceMappingURL=useTheme.d.ts.map