@tamagui/web 1.123.17 → 1.124.0

package/src/views/Theme.tsx

@@ -1,29 +1,43 @@
 import { isWeb } from '@tamagui/constants'
 import type { MutableRefObject } from 'react'
-import React, { Children, cloneElement, forwardRef, isValidElement, useRef } from 'react'
+import React, {
+  Children,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  useEffect,
+  useRef,
+} from 'react'
+import { getSetting } from '../config'
 import { variableToString } from '../createVariable'
-import { log } from '../helpers/log'
-import { ThemeManagerContext } from '../helpers/ThemeManagerContext'
-import type { ChangedThemeResponse } from '../hooks/useTheme'
-import { useChangeThemeEffect } from '../hooks/useTheme'
+import { useThemeWithState } from '../hooks/useTheme'
+import {
+  getThemeState,
+  hasThemeUpdatingProps,
+  ThemeStateContext,
+  type ThemeState,
+} from '../hooks/useThemeState'
 import type { ThemeProps } from '../types'
 import { ThemeDebug } from './ThemeDebug'
 
-export const Theme = forwardRef(function Theme({ children, ...props }: ThemeProps, ref) {
+const empty = { className: '', style: {} }
+
+export const Theme = forwardRef(function Theme(props: ThemeProps, ref) {
   // @ts-expect-error only for internal views
   if (props.disable) {
-    return children
+    return props.children
   }
 
   const isRoot = !!props['_isRoot']
-  const themeState = useChangeThemeEffect(props, isRoot)
+  const [_, themeState] = useThemeWithState(props, isRoot)
+
   const disableDirectChildTheme = props['disable-child-theme']
 
   let finalChildren = disableDirectChildTheme
-    ? Children.map(children, (child) =>
+    ? Children.map(props.children, (child) =>
         cloneElement(child, { ['data-disable-theme']: true })
       )
-    : children
+    : props.children
 
   if (ref) {
     try {
@@ -34,16 +48,6 @@ export const Theme = forwardRef(function Theme({ children, ...props }: ThemeProp
     }
   }
 
-  if (process.env.NODE_ENV === 'development') {
-    if (props.debug === 'visualize') {
-      finalChildren = (
-        <ThemeDebug themeState={themeState} themeProps={props}>
-          {finalChildren}
-        </ThemeDebug>
-      )
-    }
-  }
-
   const stateRef = useRef({
     hasEverThemed: false,
   })
@@ -54,149 +58,136 @@ export const Theme = forwardRef(function Theme({ children, ...props }: ThemeProp
 Theme['avoidForwardRef'] = true
 
 export function getThemedChildren(
-  themeState: ChangedThemeResponse,
+  themeState: ThemeState,
   children: any,
   props: ThemeProps,
   isRoot = false,
-  stateRef: MutableRefObject<{ hasEverThemed?: boolean }>
+  stateRef: MutableRefObject<{ hasEverThemed?: boolean | 'wrapped' }>
 ) {
-  const { themeManager, isNewTheme } = themeState
-
-  // its always there.. should fix type
-  if (!themeManager) {
-    return children
-    // throw new Error(
-    //   process.env.NODE_ENV === 'development'
-    //     ? `❌ No theme found, either incorrect name, potential duplicate tamagui deps, or TamaguiProvider not providing themes.`
-    //     : `❌ 005`
-    // )
-  }
-
   const { shallow, forceClassName } = props
 
   // always be true if ever themed so we avoid re-parenting
+  const state = stateRef.current
+  let hasEverThemed = state.hasEverThemed
+
   let shouldRenderChildrenWithTheme =
-    isNewTheme ||
-    isRoot ||
-    'inverse' in props ||
-    'name' in props ||
-    'reset' in props ||
-    'forceClassName' in props ||
-    stateRef.current.hasEverThemed
-
-  if (shouldRenderChildrenWithTheme) {
-    stateRef.current.hasEverThemed = true
-  }
+    hasEverThemed || themeState.isNew || isRoot || hasThemeUpdatingProps(props)
 
   if (!shouldRenderChildrenWithTheme) {
     return children
   }
 
-  if (process.env.NODE_ENV === 'development') {
-    if (shouldRenderChildrenWithTheme && props.debug === 'verbose') {
-      log(
-        `adding theme: isRoot ${isRoot}, inverse ${'inverse' in props}, isNewTheme ${isNewTheme}, hasEver ${stateRef.current.hasEverThemed}`,
-        props
-      )
-    }
-  }
-
-  let next = children
-
-  // each children of these children wont get the theme
-  if (shallow) {
-    next = Children.toArray(children).map((child) => {
-      return isValidElement(child)
-        ? cloneElement(
-            child,
-            undefined,
-            <Theme name={themeManager.state.parentName}>
-              {(child as any).props.children}
-            </Theme>
-          )
-        : child
-    })
-  }
+  // from here on out we have to be careful not to re-parent
 
-  const elementsWithContext = (
-    <ThemeManagerContext.Provider value={themeManager}>
-      {next}
-    </ThemeManagerContext.Provider>
+  children = (
+    <ThemeStateContext.Provider value={themeState.id}>
+      {children}
+    </ThemeStateContext.Provider>
   )
 
-  if (forceClassName === false) {
-    return elementsWithContext
+  const { isInverse, name } = themeState
+  const requiresExtraWrapper = isInverse || forceClassName
+
+  // it only ever progresses from false => true => 'wrapped'
+  if (!state.hasEverThemed) {
+    state.hasEverThemed = true
+  }
+  if (
+    requiresExtraWrapper ||
+    // if the theme is exactly dark or light, its likely to change between dark/light
+    // and that would require wrapping which would re-parent, so to avoid re-parenting do this
+    themeState.name === 'dark' ||
+    themeState.name === 'light'
+  ) {
+    state.hasEverThemed = 'wrapped'
   }
 
-  if (isWeb) {
-    return wrapThemeElements({
-      children: elementsWithContext,
-      themeState,
-      forceClassName,
-      isRoot,
-    })
+  // each children of these children wont get the theme
+  if (shallow) {
+    if (!themeState.parentId) {
+      // they are doing shallow but didnt change actually change a theme theme?
+    } else {
+      const parentState = getThemeState(
+        themeState.isNew ? themeState.id : themeState.parentId
+      )
+      if (!parentState) throw new Error(`‼️010`)
+      children = Children.toArray(children).map((child) => {
+        return isValidElement(child)
+          ? cloneElement(
+              child,
+              undefined,
+              <Theme name={parentState.name}>{(child as any).props.children}</Theme>
+            )
+          : child
+      })
+    }
   }
 
-  return elementsWithContext
-}
+  if (process.env.NODE_ENV === 'development') {
+    if (props.debug) {
+      console.warn(` getThemedChildren`, {
+        requiresExtraWrapper,
+        forceClassName,
+        themeState,
+        state,
+        ...getThemeClassNameAndStyle(themeState, props, isRoot),
+      })
+      children = (
+        <ThemeDebug themeState={themeState} themeProps={props}>
+          {children}
+        </ThemeDebug>
+      )
+    }
+  }
 
-function wrapThemeElements({
-  children,
-  themeState,
-  forceClassName,
-  isRoot,
-}: {
-  children?: React.ReactNode
-  themeState: ChangedThemeResponse
-  forceClassName?: boolean
-  isRoot?: boolean
-}) {
-  if (isRoot && forceClassName === false) {
+  if (forceClassName === false) {
     return children
   }
 
-  const inverse = themeState.inversed
-  const requiresExtraWrapper = typeof inverse === 'boolean' || forceClassName
-
-  const { className, style } = getThemeClassNameAndStyle(themeState, isRoot)
-
-  let themedChildren = (
-    <span className={`${className} _dsp_contents is_Theme`} style={style}>
-      {children}
-    </span>
-  )
+  if (isWeb) {
+    const { className, style } = getThemeClassNameAndStyle(themeState, props, isRoot)
 
-  // to prevent tree structure changes always render this if inverse is true or false
-  if (requiresExtraWrapper) {
-    const name = themeState.state?.name || ''
-    const inverseClassName = name.startsWith('light')
-      ? 't_light is_inversed'
-      : name.startsWith('dark')
-        ? 't_dark is_inversed'
-        : ''
-
-    themedChildren = (
-      <span className={`${inverse ? inverseClassName : ''} _dsp_contents`}>
-        {themedChildren}
+    children = (
+      <span className={`${className} _dsp_contents is_Theme`} style={style}>
+        {children}
       </span>
     )
+
+    // to prevent tree structure changes always render this if inverse is true or false
+    if (state.hasEverThemed === 'wrapped') {
+      // but still calculate if we need the classnames
+      const className = requiresExtraWrapper
+        ? `${
+            isInverse
+              ? name.startsWith('light')
+                ? 't_light is_inversed'
+                : name.startsWith('dark')
+                  ? 't_dark is_inversed'
+                  : ''
+              : ''
+          } _dsp_contents`
+        : `_dsp_contents`
+      children = <span className={className}>{children}</span>
+    }
+
+    return children
   }
 
-  return themedChildren
+  return children
 }
 
-const emptyObj = {}
-
-function getThemeClassNameAndStyle(themeState: ChangedThemeResponse, isRoot = false) {
-  if (!themeState.isNewTheme) {
-    return { className: '', style: emptyObj }
+function getThemeClassNameAndStyle(
+  themeState: ThemeState,
+  props: ThemeProps,
+  isRoot = false
+) {
+  if (!themeState.isNew && !props.forceClassName) {
+    return empty
   }
 
   // in order to provide currentColor, set color by default
   const themeColor =
-    themeState.state?.theme && themeState.isNewTheme
-      ? variableToString(themeState.state.theme.color)
-      : ''
+    themeState?.theme && themeState.isNew ? variableToString(themeState.theme.color) : ''
 
   const style = themeColor
     ? {
@@ -204,9 +195,15 @@ function getThemeClassNameAndStyle(themeState: ChangedThemeResponse, isRoot = fa
       }
     : undefined
 
-  let className = themeState.state?.className || ''
-  if (isRoot) {
-    className = className.replace('t_sub_theme', '')
-  }
+  const maxInverses = getSetting('maxDarkLightNesting') || 3
+  const themeClassName =
+    themeState.inverses >= maxInverses
+      ? themeState.name
+      : themeState.name.replace(schemePrefix, '')
+
+  const className = `${isRoot ? '' : 't_sub_theme'} t_${themeClassName}`
+
   return { style, className }
 }
+
+const schemePrefix = /^(dark|light)_/

package/src/views/ThemeDebug.native.tsx

@@ -1,4 +1,4 @@
-import type { ChangedThemeResponse } from '../hooks/useTheme'
+import type { ThemeState } from '../hooks/useThemeState'
 import type { ThemeProps } from '../types'
 
 export function ThemeDebug({
@@ -6,7 +6,7 @@ export function ThemeDebug({
   themeProps,
   children,
 }: {
-  themeState: ChangedThemeResponse
+  themeState: ThemeState
   themeProps: ThemeProps
   children: any
 }) {

package/src/views/ThemeDebug.tsx

@@ -1,9 +1,7 @@
-import React from 'react'
 import { useDidFinishSSR } from '@tamagui/use-did-finish-ssr'
-import { useForceUpdate } from '@tamagui/use-force-update'
+import { useEffect } from 'react'
 import { createPortal } from 'react-dom'
-
-import type { ChangedThemeResponse } from '../hooks/useTheme'
+import type { ThemeState } from '../hooks/useThemeState'
 import type { ThemeProps } from '../types'
 
 let node
@@ -12,12 +10,9 @@ export function ThemeDebug({
   themeState,
   themeProps,
   children,
-}: { themeState: ChangedThemeResponse; themeProps: ThemeProps; children: any }) {
+}: { themeState: ThemeState; themeProps: ThemeProps; children: any }) {
   if (process.env.NODE_ENV === 'development') {
     const isHydrated = useDidFinishSSR()
-    const [onChangeCount, setOnChangeCount] = React.useState(0)
-    const rerender = useForceUpdate()
-    const id = React.useId()
 
     if (process.env.NODE_ENV === 'development' && typeof document !== 'undefined') {
       if (!node) {
@@ -33,24 +28,11 @@ export function ThemeDebug({
         node.style.border = '1px solid #888'
         node.style.flexDirection = 'row'
         node.style.background = 'var(--background)'
-        document.body.appendChild(node)
       }
     }
 
-    React.useEffect(() => {
-      themeState.themeManager?.parentManager?.onChangeTheme((name, manager) => {
-        setOnChangeCount((p) => ++p)
-        console.warn(
-          `theme changed for ${themeState.themeManager?.id} from parent ${themeState.themeManager?.parentManager?.id} to new name`,
-          name
-        )
-      })
-    }, [themeState.themeManager])
-
-    React.useEffect(() => {
-      // to refresh _listeningIds every so often
-      const tm = setInterval(rerender, 1000)
-      return () => clearTimeout(tm as any)
+    useEffect(() => {
+      document.body.appendChild(node)
     }, [])
 
     if (themeProps['disable-child-theme'] || !isHydrated) {
@@ -68,23 +50,19 @@ export function ThemeDebug({
               padding: 5,
             }}
           >
-            <Theme {id} /> 
+            <Theme {themeState.id} /> 
             {JSON.stringify(
               {
-                propsName: themeProps.name,
-                name: themeState?.state?.name,
-                className: themeState?.state?.className,
-                inverse: themeProps.inverse,
-                forceClassName: themeProps.forceClassName,
-                parent: themeState.themeManager?.state.parentName,
-                id: themeState.themeManager?.id,
-                parentId: themeState.themeManager?.parentManager?.id,
-                isNew: themeState.isNewTheme,
-                onChangeCount,
-                listening: [...(themeState.themeManager?.['_listeningIds'] || [])].join(
-                  ','
-                ),
-                _numChangeEventsSent: themeState.themeManager?.['_numChangeEventsSent'],
+                name: themeState.name,
+                parentId: themeState.parentId,
+                inverses: themeState.inverses,
+                isNew: themeState.isNew,
+                themeProps: {
+                  name: themeProps.name,
+                  componentName: themeProps.componentName,
+                  reset: themeProps.reset,
+                  inverse: themeProps.inverse,
+                },
               },
               null,
               2
@@ -93,7 +71,7 @@ export function ThemeDebug({
           node
         )}
 
-        <div style={{ color: 'red' }}>{id}</div>
+        <div style={{ color: 'red' }}>{themeState.id}</div>
 
         {children}
       </>

package/src/views/ThemeProvider.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useId } from 'react'
 import { isClient } from '@tamagui/constants'
 
 import { THEME_CLASSNAME_PREFIX } from '../constants/constants'
@@ -42,7 +42,7 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
       // if root class disabled, force class here
       forceClassName={!disableRootThemeClass && !themeClassNameOnRoot}
       // @ts-expect-error
-      _isRoot
+      _isRoot={useId}
     >
       {props.children}
     </Theme>

package/types/Tamagui.d.ts

@@ -1,8 +1,6 @@
 import * as Helpers from '@tamagui/helpers';
 export declare const Tamagui: {
     Helpers: typeof Helpers;
-    getThemeManager: (id: number) => import("./helpers/ThemeManager").ThemeManager | undefined;
-    readonly activeThemeManagers: Set<import("./helpers/ThemeManager").ThemeManager>;
     readonly mediaState: {
         [x: string]: boolean;
         [x: number]: boolean;

package/types/Tamagui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tamagui.d.ts","sourceRoot":"","sources":["../src/Tamagui.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,kBAAkB,CAAA;AAU3C,eAAO,MAAM,OAAO;;;;;;;;;;;;;aAoChB,CAAA;AAIJ,eAAO,MAAM,sBAAsB,eAAgB,MAAM,QAExD,CAAA;AAED,eAAO,MAAM,kBAAkB,eAAgB,MAAM,SAAS,GAAG,SAEhE,CAAA"}
+{"version":3,"file":"Tamagui.d.ts","sourceRoot":"","sources":["../src/Tamagui.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,kBAAkB,CAAA;AAS3C,eAAO,MAAM,OAAO;;;;;;;;;;;aA+BhB,CAAA;AAIJ,eAAO,MAAM,sBAAsB,eAAgB,MAAM,QAExD,CAAA;AAED,eAAO,MAAM,kBAAkB,eAAgB,MAAM,SAAS,GAAG,SAEhE,CAAA"}

package/types/createComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAmBzB,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAA;AAG/E,OAAO,KAAK,EAEV,SAAS,EAGT,cAAc,EACd,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,kBAAkB,EAElB,YAAY,EAEZ,gBAAgB,EAChB,cAAc,EAMf,MAAM,SAAS,CAAA;AAahB,KAAK,iBAAiB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC,CAAA;AAEpF,eAAO,MAAM,kBAAkB,wBAA+B,CAAA;AAuF9D,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,EACnD,GAAG,SAAS,cAAc,GAAG,cAAc,EAC3C,SAAS,GAAG,KAAK,EACjB,UAAU,SAAS,MAAM,GAAG,KAAK,EACjC,YAAY,EAAE,YAAY,wEA+kC3B;AAoBD,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,OAEjD;yBAFe,QAAQ;;;AAkBxB,eAAO,MAAM,MAAM,yFA0CjB,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,cAAc,GAAG,OAAO,CAAA;IACpC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,mBAiGxD"}
+{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAmBxC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAA;AAG/E,OAAO,KAAK,EAEV,SAAS,EAGT,cAAc,EACd,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,kBAAkB,EAElB,YAAY,EAEZ,gBAAgB,EAChB,cAAc,EAMf,MAAM,SAAS,CAAA;AAYhB,KAAK,iBAAiB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC,CAAA;AAEpF,eAAO,MAAM,kBAAkB,wBAA+B,CAAA;AAuF9D,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,EACnD,GAAG,SAAS,cAAc,GAAG,cAAc,EAC3C,SAAS,GAAG,KAAK,EACjB,UAAU,SAAS,MAAM,GAAG,KAAK,EACjC,YAAY,EAAE,YAAY,wEAukC3B;AAoBD,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,OAEjD;yBAFe,QAAQ;;;AAkBxB,eAAO,MAAM,MAAM,yFA0CjB,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,cAAc,GAAG,OAAO,CAAA;IACpC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,mBAiGxD"}

package/types/helpers/createShallowSetState.d.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 import type { DebugProp } from '../types';
-export declare function createShallowSetState<State extends Object>(setter: React.Dispatch<React.SetStateAction<State>>, isDisabled?: boolean, transition?: boolean, debug?: DebugProp): (next?: Partial<State>) => void;
+export declare function createShallowSetState<State extends Object>(setter: React.Dispatch<React.SetStateAction<State>>, isDisabled?: boolean, transition?: boolean, debug?: DebugProp, callback?: (nextState: any) => void): (next?: Partial<State>) => void;
 export declare function mergeIfNotShallowEqual(prev: any, next: any, isDisabled?: boolean, debug?: DebugProp): any;
 export declare function isEqualShallow(prev: any, next: any): boolean;
 //# sourceMappingURL=createShallowSetState.d.ts.map

package/types/helpers/createShallowSetState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createShallowSetState.d.ts","sourceRoot":"","sources":["../../src/helpers/createShallowSetState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAKzC,wBAAgB,qBAAqB,CAAC,KAAK,SAAS,MAAM,EACxD,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,EACnD,UAAU,CAAC,EAAE,OAAO,EACpB,UAAU,CAAC,EAAE,OAAO,EACpB,KAAK,CAAC,EAAE,SAAS,WAEF,OAAO,CAAC,KAAK,CAAC,UAM9B;AAED,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,GAAG,EACT,IAAI,EAAE,GAAG,EACT,UAAU,CAAC,EAAE,OAAO,EACpB,KAAK,CAAC,EAAE,SAAS,OAgBlB;AAED,wBAAgB,cAAc,CAAC,IAAI,KAAA,EAAE,IAAI,KAAA,WAOxC"}
+{"version":3,"file":"createShallowSetState.d.ts","sourceRoot":"","sources":["../../src/helpers/createShallowSetState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAKzC,wBAAgB,qBAAqB,CAAC,KAAK,SAAS,MAAM,EACxD,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,EACnD,UAAU,CAAC,EAAE,OAAO,EACpB,UAAU,CAAC,EAAE,OAAO,EACpB,KAAK,CAAC,EAAE,SAAS,EACjB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,KAAK,IAAI,WAIzB,OAAO,CAAC,KAAK,CAAC,UAYzB;AAED,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,GAAG,EACT,IAAI,EAAE,GAAG,EACT,UAAU,CAAC,EAAE,OAAO,EACpB,KAAK,CAAC,EAAE,SAAS,OAgBlB;AAED,wBAAgB,cAAc,CAAC,IAAI,KAAA,EAAE,IAAI,KAAA,WAOxC"}

package/types/hooks/doesRootSchemeMatchSystem.d.ts

@@ -0,0 +1,2 @@
+export declare function doesRootSchemeMatchSystem(): boolean;
+//# sourceMappingURL=doesRootSchemeMatchSystem.d.ts.map

package/types/hooks/doesRootSchemeMatchSystem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"doesRootSchemeMatchSystem.d.ts","sourceRoot":"","sources":["../../src/hooks/doesRootSchemeMatchSystem.ts"],"names":[],"mappings":"AAAA,wBAAgB,yBAAyB,YAGxC"}

package/types/hooks/doesRootSchemeMatchSystem.native.d.ts

@@ -0,0 +1,2 @@
+export declare function doesRootSchemeMatchSystem(): boolean;
+//# sourceMappingURL=doesRootSchemeMatchSystem.native.d.ts.map

package/types/hooks/doesRootSchemeMatchSystem.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"doesRootSchemeMatchSystem.native.d.ts","sourceRoot":"","sources":["../../src/hooks/doesRootSchemeMatchSystem.native.ts"],"names":[],"mappings":"AAGA,wBAAgB,yBAAyB,YAGxC"}

package/types/hooks/getThemeProxied.d.ts

@@ -0,0 +1,25 @@
+import type { MutableRefObject } from 'react';
+import type { Variable } from '../createVariable';
+import type { ThemeParsed, Tokens, UseThemeWithStateProps, VariableVal, VariableValGeneric } from '../types';
+import type { ThemeState } from './useThemeState';
+export type ThemeProxied = {
+    [Key in keyof ThemeParsed | keyof Tokens['color']]: ThemeGettable<Key extends keyof ThemeParsed ? ThemeParsed[Key] : Variable<any>>;
+} & {
+    [Key in string & {}]?: ThemeGettable<Variable<any>>;
+};
+type ThemeGettable<Val> = Val & {
+    /**
+     * Tries to return an optimized value that avoids the need for re-rendering:
+     * On web a CSS variable, on iOS a dynamic color, on Android it doesn't
+     * optimize and returns the underyling value.
+     *
+     * See: https://reactnative.dev/docs/dynamiccolorios
+     *
+     * @param platform when "web" it will only return the dynamic value for web, avoiding the iOS dynamic value.
+     * For things like SVG, gradients, or other external components that don't support it, use this option.
+     */
+    get: (platform?: 'web') => string | (Val extends Variable<infer X> ? X extends VariableValGeneric ? any : Exclude<X, Variable> : Val extends VariableVal ? string | number : unknown);
+};
+export declare function getThemeProxied(_props: UseThemeWithStateProps, state: ThemeState | null, _keys: MutableRefObject<Set<string> | null>): ThemeProxied;
+export {};
+//# sourceMappingURL=getThemeProxied.d.ts.map

package/types/hooks/getThemeProxied.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getThemeProxied.d.ts","sourceRoot":"","sources":["../../src/hooks/getThemeProxied.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAA;AAE7C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,KAAK,EACV,WAAW,EACX,MAAM,EACN,sBAAsB,EACtB,WAAW,EACX,kBAAkB,EACnB,MAAM,UAAU,CAAA;AAEjB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAEjD,MAAM,MAAM,YAAY,GAAG;KACxB,GAAG,IAAI,MAAM,WAAW,GAAG,MAAM,MAAM,CAAC,OAAO,CAAC,GAAG,aAAa,CAC/D,GAAG,SAAS,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CACjE;CACF,GAAG;KAED,GAAG,IAAI,MAAM,GAAG,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;CACpD,CAAA;AAED,KAAK,aAAa,CAAC,GAAG,IAAI,GAAG,GAAG;IAC9B;;;;;;;;;OASG;IACH,GAAG,EAAE,CACH,QAAQ,CAAC,EAAE,KAAK,KAEd,MAAM,GACN,CAAC,GAAG,SAAS,QAAQ,CAAC,MAAM,CAAC,CAAC,GAC1B,CAAC,SAAS,kBAAkB,GAC1B,GAAG,GACH,OAAO,CAAC,CAAC,EAAE,QAAQ,CAAC,GACtB,GAAG,SAAS,WAAW,GACrB,MAAM,GAAG,MAAM,GACf,OAAO,CAAC,CAAA;CACnB,CAAA;AAWD,wBAAgB,eAAe,CAE7B,MAAM,EAAE,sBAAsB,EAC9B,KAAK,EAAE,UAAU,GAAG,IAAI,EACxB,KAAK,EAAE,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,GAC1C,YAAY,CAsGd"}

package/types/hooks/useComponentState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useComponentState.d.ts","sourceRoot":"","sources":["../../src/hooks/useComponentState.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EACV,iBAAiB,EAEjB,UAAU,EACV,YAAY,EACZ,qBAAqB,EACrB,wBAAwB,EACxB,qBAAqB,EACrB,SAAS,EAEV,MAAM,UAAU,CAAA;AAEjB,eAAO,MAAM,iBAAiB,UACrB,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,+BACtB,iBAAiB,gBAChC,YAAY,UAClB,qBAAqB;;;;;;;;;;;;;;;;;;;CA6N9B,CAAA"}
+{"version":3,"file":"useComponentState.d.ts","sourceRoot":"","sources":["../../src/hooks/useComponentState.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EACV,iBAAiB,EAEjB,UAAU,EACV,YAAY,EACZ,qBAAqB,EACrB,wBAAwB,EACxB,qBAAqB,EACrB,SAAS,EAEV,MAAM,UAAU,CAAA;AAEjB,eAAO,MAAM,iBAAiB,UACrB,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,+BACtB,iBAAiB,gBAChC,YAAY,UAClB,qBAAqB;;;;;;;;;;;;;;;;;;;CAkO9B,CAAA"}

package/types/hooks/useConfiguration.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useConfiguration.d.ts","sourceRoot":"","sources":["../../src/hooks/useConfiguration.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,gBAAgB;;;;;;;+BAU0oE,CAAC;;;;;uBAAurjB,CAAC;aAAe,CAAC;;;;aAAo+B,CAAC;YAAqB,CAAC;cAAsB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CADj4pB,CAAA"}
+{"version":3,"file":"useConfiguration.d.ts","sourceRoot":"","sources":["../../src/hooks/useConfiguration.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,gBAAgB;;;;;;;+BAU0oE,CAAC;;;;;uBAAirjB,CAAC;aAAe,CAAC;;;;aAAo+B,CAAC;YAAqB,CAAC;cAAsB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAD33pB,CAAA"}

package/types/hooks/useTheme.d.ts

@@ -1,37 +1,10 @@
-import { type MutableRefObject } from 'react';
-import type { Variable } from '../createVariable';
-import type { ThemeManagerState } from '../helpers/ThemeManager';
-import { ThemeManager } from '../helpers/ThemeManager';
-import type { ThemeParsed, ThemeProps, Tokens, UseThemeWithStateProps, VariableVal, VariableValGeneric } from '../types';
-export type ChangedThemeResponse = {
-    state?: ThemeManagerState;
-    prevState?: ThemeManagerState;
-    themeManager?: ThemeManager | null;
-    isNewTheme: boolean;
-    inversed?: null | boolean;
-    mounted?: boolean;
-};
-export type ThemeGettable<Val> = Val & {
-    /**
-     * Tries to return an optimized value that avoids the need for re-rendering:
-     * On web a CSS variable, on iOS a dynamic color, on Android it doesn't
-     * optimize and returns the underyling value.
-     *
-     * See: https://reactnative.dev/docs/dynamiccolorios
-     *
-     * @param platform when "web" it will only return the dynamic value for web, avoiding the iOS dynamic value.
-     * For things like SVG, gradients, or other external components that don't support it, use this option.
-     */
-    get: (platform?: 'web') => string | (Val extends Variable<infer X> ? X extends VariableValGeneric ? any : Exclude<X, Variable> : Val extends VariableVal ? string | number : unknown);
-};
-export type UseThemeResult = {
-    [Key in keyof ThemeParsed | keyof Tokens['color']]: ThemeGettable<Key extends keyof ThemeParsed ? ThemeParsed[Key] : Variable<any>>;
-} & {
-    [Key in string & {}]?: ThemeGettable<Variable<any>>;
-};
-export declare const useTheme: (props?: ThemeProps) => UseThemeResult;
-export declare const useThemeWithState: (props: UseThemeWithStateProps) => [ChangedThemeResponse, ThemeParsed];
-export declare const activeThemeManagers: Set<ThemeManager>;
-export declare const getThemeManager: (id: number) => ThemeManager | undefined;
-export declare const useChangeThemeEffect: (props: UseThemeWithStateProps, isRoot?: boolean, keys?: MutableRefObject<string[] | null>) => ChangedThemeResponse;
+import type { ThemeParsed, ThemeProps, UseThemeWithStateProps } from '../types';
+import { type ThemeProxied } from './getThemeProxied';
+import type { ThemeState } from './useThemeState';
+export declare const useTheme: (props?: ThemeProps) => ThemeProxied;
+export type ThemeWithState = [ThemeParsed, ThemeState];
+/**
+ * Adds a proxy around themeState that tracks update keys
+ */
+export declare const useThemeWithState: (props: UseThemeWithStateProps, isRoot?: boolean) => ThemeWithState;
 //# sourceMappingURL=useTheme.d.ts.map

package/types/hooks/useTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,gBAAgB,EACtB,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAA;AAChE,OAAO,EAAE,YAAY,EAA4B,MAAM,yBAAyB,CAAA;AAGhF,OAAO,KAAK,EACV,WAAW,EACX,UAAU,EACV,MAAM,EACN,sBAAsB,EACtB,WAAW,EACX,kBAAkB,EACnB,MAAM,UAAU,CAAA;AAGjB,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,CAAC,EAAE,iBAAiB,CAAA;IACzB,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,YAAY,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IAClC,UAAU,EAAE,OAAO,CAAA;IAGnB,QAAQ,CAAC,EAAE,IAAI,GAAG,OAAO,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAID,MAAM,MAAM,aAAa,CAAC,GAAG,IAAI,GAAG,GAAG;IACrC;;;;;;;;;OASG;IACH,GAAG,EAAE,CACH,QAAQ,CAAC,EAAE,KAAK,KAEd,MAAM,GACN,CAAC,GAAG,SAAS,QAAQ,CAAC,MAAM,CAAC,CAAC,GAC1B,CAAC,SAAS,kBAAkB,GAC1B,GAAG,GACH,OAAO,CAAC,CAAC,EAAE,QAAQ,CAAC,GACtB,GAAG,SAAS,WAAW,GACrB,MAAM,GAAG,MAAM,GACf,OAAO,CAAC,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;KAC1B,GAAG,IAAI,MAAM,WAAW,GAAG,MAAM,MAAM,CAAC,OAAO,CAAC,GAAG,aAAa,CAC/D,GAAG,SAAS,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CACjE;CACF,GAAG;KAED,GAAG,IAAI,MAAM,GAAG,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;CACpD,CAAA;AAED,eAAO,MAAM,QAAQ,WAAW,UAAU,KAG1B,cACf,CAAA;AAED,eAAO,MAAM,iBAAiB,UACrB,sBAAsB,KAC5B,CAAC,oBAAoB,EAAE,WAAW,CAoCpC,CAAA;AAmJD,eAAO,MAAM,mBAAmB,mBAA0B,CAAA;AAO1D,eAAO,MAAM,eAAe,OAAQ,MAAM,6BAEzC,CAAA;AAiDD,eAAO,MAAM,oBAAoB,UACxB,sBAAsB,2BAEtB,gBAAgB,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,KACvC,oBAqUF,CAAA"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAA;AAC/E,OAAO,EAAmB,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAA;AACtE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAGjD,eAAO,MAAM,QAAQ,WAAW,UAAU,KAG1B,YACf,CAAA;AAED,MAAM,MAAM,cAAc,GAAG,CAAC,WAAW,EAAE,UAAU,CAAC,CAAA;AAEtD;;GAEG;AACH,eAAO,MAAM,iBAAiB,UACrB,sBAAsB,uBAE5B,cAmBF,CAAA"}

package/types/hooks/useThemeName.d.ts

@@ -1,5 +1,3 @@
 import type { ThemeName } from '../types';
-export declare function useThemeName(opts?: {
-    parent?: true;
-}): ThemeName;
+export declare function useThemeName(): ThemeName;
 //# sourceMappingURL=useThemeName.d.ts.map

package/types/hooks/useThemeName.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useThemeName.d.ts","sourceRoot":"","sources":["../../src/hooks/useThemeName.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEzC,wBAAgB,YAAY,CAAC,IAAI,CAAC,EAAE;IAAE,MAAM,CAAC,EAAE,IAAI,CAAA;CAAE,GAAG,SAAS,CAgBhE"}
+{"version":3,"file":"useThemeName.d.ts","sourceRoot":"","sources":["../../src/hooks/useThemeName.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAOzC,wBAAgB,YAAY,IAAI,SAAS,CAExC"}

package/types/hooks/useThemeState.d.ts

@@ -0,0 +1,22 @@
+import { type MutableRefObject } from 'react';
+import type { ThemeParsed, ThemeProps, UseThemeWithStateProps } from '../types';
+type ID = string;
+export type ThemeState = {
+    id: ID;
+    name: string;
+    theme: ThemeParsed;
+    inverses: number;
+    parentName?: string;
+    isInverse?: boolean;
+    isNew?: boolean;
+    parentId?: ID;
+    scheme?: 'light' | 'dark';
+};
+export declare const ThemeStateContext: import("react").Context<string>;
+export declare const forceUpdateThemes: () => void;
+export declare const getThemeState: (id: ID) => ThemeState | undefined;
+export declare const getRootThemeState: () => ThemeState | null;
+export declare const useThemeState: (props: UseThemeWithStateProps, isRoot: boolean | undefined, keys: MutableRefObject<Set<string> | null>) => ThemeState;
+export declare const hasThemeUpdatingProps: (props: ThemeProps) => boolean;
+export {};
+//# sourceMappingURL=useThemeState.d.ts.map