@tamagui/core 1.0.1-beta.166 → 1.0.1-beta.168

package/src/helpers/isTamaguiElement.tsx

@@ -1,12 +1,10 @@
 import React, { isValidElement } from 'react'
 
-import { StaticConfig } from '../types'
+import { TamaguiComponent } from '../types'
 import { isTamaguiComponent } from './isTamaguiComponent'
 
-export type TamaguiReactElement = React.ReactElement & {
-  type: {
-    staticConfig: StaticConfig
-  }
+export type TamaguiReactElement<P = any> = React.ReactElement<P> & {
+  type: TamaguiComponent
 }
 
 export const isTamaguiElement = (child: any, name?: string): child is TamaguiReactElement => {

package/src/hooks/useIsSSR.tsx

@@ -1,18 +1,23 @@
 import { useState } from 'react'
 
-import { isSSR, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
+import { isServer, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
 import { startTransition } from '../helpers/startTransition'
 
 // because any change before first useEffect causes hydration / mismatch issues
 
-export const useIsSSR = () => {
+export const useIsSSR = (props?: { immediate?: boolean }) => {
   const [val, setVal] = useState(true)
 
   useIsomorphicLayoutEffect(() => {
-    if (isWeb && !isSSR) {
-      startTransition(() => {
+    if (isWeb && !isServer) {
+      // could also have a global tamagui `config.immediateSSRTransition`
+      if (props?.immediate) {
         setVal(false)
-      })
+      } else {
+        startTransition(() => {
+          setVal(false)
+        })
+      }
     }
   }, [])
 

package/src/hooks/useIsTouchDevice.tsx

@@ -1,13 +1,13 @@
 import { useState } from 'react'
 
-import { isSSR, isTouchable, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
+import { isServer, isTouchable, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
 
 // ssr friendly
 
 export const useIsTouchDevice = () => {
   const [touchOnly, setTouchOnly] = useState(false)
 
-  if (isWeb && !isSSR) {
+  if (isWeb && !isServer) {
     // only ever false on web SSR (env), so run effect conditionally
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useIsomorphicLayoutEffect(() => {

package/src/hooks/useMedia.tsx

@@ -1,20 +1,39 @@
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 
 import { useIsomorphicLayoutEffect } from '../constants/platform'
 import { matchMedia } from '../helpers/matchMedia'
 import {
-  ConfigureMediaQueryOptions,
   MediaQueries,
   MediaQueryKey,
   MediaQueryObject,
   MediaQueryState,
+  TamaguiInternalConfig,
 } from '../types'
 import { useSafeRef } from './useSafeRef'
 
-export const mediaState: MediaQueryState = {} as any
+export const mediaState: MediaQueryState =
+  // development time safeguard
+  process.env.NODE_ENV === 'development'
+    ? new Proxy(
+        {},
+        {
+          get(target, key) {
+            if (typeof key === 'string' && key[0] === '$') {
+              throw new Error(`Access of mediaState should never include $`)
+            }
+            return Reflect.get(target, key)
+          },
+        }
+      )
+    : ({} as any)
+
 const mediaQueryListeners: { [key: string]: Set<Function> } = {}
 
 export function addMediaQueryListener(key: MediaQueryKey, cb: any) {
+  if (process.env.NODE_ENV === 'development' && key[0] === '$') {
+    // eslint-disable-next-line no-console
+    console.warn(`Warning, listening to media queries shouldn't use the "$" prefix`)
+  }
   mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()
   mediaQueryListeners[key].add(cb)
   return () => removeMediaQueryListener(key, cb)
@@ -35,29 +54,17 @@ const dispose = new Set<Function>()
 // for SSR capture it at time of startup
 let initialMediaState: MediaQueryState | null
 
-export const configureMedia = ({
-  queries,
-  defaultActive = {},
-}: ConfigureMediaQueryOptions = {}) => {
-  if (!queries) return
-
-  // support hot reload
-  if (initialMediaState) {
-    if (process.env.NODE_ENV === 'development') {
-      if (JSON.stringify(queries) === JSON.stringify(mediaQueryConfig)) {
-        // hmr avoid update
-        return
-      }
-    }
-    setupMediaListeners()
-  }
-
-  Object.assign(mediaQueryConfig, queries)
-  // start in the initial state
-  for (const key in queries) {
-    mediaState[key] = defaultActive[key] || false
+export const configureMedia = (config: TamaguiInternalConfig) => {
+  const { media, mediaQueryDefaultActive } = config
+  if (!media) return
+  for (const key in media) {
+    mediaState[key] = mediaQueryDefaultActive?.[key] || false
   }
+  Object.assign(mediaQueryConfig, media)
   initialMediaState = { ...mediaState }
+  if (config.disableSSR) {
+    setupMediaListeners()
+  }
 }
 
 function unlisten() {
@@ -65,7 +72,20 @@ function unlisten() {
   dispose.clear()
 }
 
+/**
+ * Note: This should *not* set the state on the first render!
+ * Because to avoid hydration issues SSR must match the server
+ * *and then* re-render with the actual media query state.
+ */
+let configuredKey = ''
 function setupMediaListeners() {
+  // avoid setting up more than once per config
+  const nextKey = JSON.stringify(mediaQueryConfig)
+  if (nextKey === configuredKey) {
+    return
+  }
+  configuredKey = nextKey
+
   // hmr, undo existing before re-binding
   unlisten()
 
@@ -79,6 +99,7 @@ function setupMediaListeners() {
     // react native needs these deprecated apis for now
     match.addListener(update)
     dispose.add(() => match.removeListener(update))
+
     update()
 
     function update() {
@@ -87,16 +108,18 @@ function setupMediaListeners() {
       mediaState[key] = next
       const listeners = mediaQueryListeners[key]
       if (listeners?.size) {
-        for (const cb of [...listeners]) {
-          cb()
-        }
+        listeners.forEach((cb) => cb())
       }
     }
   }
 }
 
-export function useMediaQueryListeners() {
-  useIsomorphicLayoutEffect(() => {
+export function useMediaQueryListeners(config: TamaguiInternalConfig) {
+  if (config.disableSSR) {
+    return
+  }
+
+  useEffect(() => {
     setupMediaListeners()
     return unlisten
   }, [])
@@ -105,7 +128,7 @@ export function useMediaQueryListeners() {
 export function useMedia(): {
   [key in MediaQueryKey]: boolean
 } {
-  const [state, setState] = useState(initialMediaState!)
+  const [state, setState] = useState(initialMediaState || {})
   const keys = useSafeRef({} as Record<string, boolean>)
 
   function updateState() {
@@ -120,13 +143,12 @@ export function useMedia(): {
   }
 
   useIsomorphicLayoutEffect(() => {
-    const listeners: Function[] = []
-    for (const key in keys.current) {
-      listeners.push(addMediaQueryListener(key, updateState))
-    }
+    const disposes: Function[] = Object.keys(keys.current).map((key) =>
+      addMediaQueryListener(key, updateState)
+    )
     updateState()
     return () => {
-      listeners.forEach((cb) => cb())
+      disposes.forEach((cb) => cb())
     }
   })
 
@@ -134,8 +156,15 @@ export function useMedia(): {
     () =>
       new Proxy(state, {
         get(_, key: string) {
+          if (process.env.NODE_ENV === 'development') {
+            if (!initialMediaState) {
+              throw new Error(
+                `To use useMedia() you must pass in media configuration to createTamagui, none was found.`
+              )
+            }
+          }
           if (!keys.current[key]) {
-            keys.current = { ...keys.current, [key]: true }
+            keys.current[key] = true
           }
           return Reflect.get(state, key)
         },

package/src/hooks/useTheme.tsx

@@ -3,7 +3,7 @@ import React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'r
 
 import { getConfig } from '../config'
 import { isDevTools } from '../constants/isDevTools'
-import { isRSC, isSSR, useIsomorphicLayoutEffect } from '../constants/platform'
+import { isRSC, isServer, useIsomorphicLayoutEffect } from '../constants/platform'
 import { ThemeContext } from '../contexts/ThemeContext'
 import { areEqualSets } from '../helpers/areEqualSets'
 import {
@@ -12,7 +12,7 @@ import {
   ThemeManagerContext,
   emptyManager,
 } from '../helpers/ThemeManager'
-import { ThemeName, ThemeObject } from '../types'
+import { ThemeName, ThemeParsed } from '../types'
 import { GetThemeUnwrapped } from './getThemeUnwrapped'
 import { useConstant } from './useConstant'
 import { useServerRef } from './useServerHooks'
@@ -38,7 +38,7 @@ export const useTheme = (
   componentName?: string,
   props?: ThemeProps,
   forceUpdate?: any
-): ThemeObject => {
+): ThemeParsed => {
   // TODO this can use useChangeThemeEffect almost ready
   if (isRSC) {
     const config = getConfig()
@@ -195,10 +195,10 @@ export const useChangeThemeEffect = (
   forceUpdateProp?: any,
   uuid?: Object
 ): {
-  themes: Record<string, ThemeObject>
+  themes: Record<string, ThemeParsed>
   themeManager: ThemeManager | null
   name: string
-  theme: ThemeObject | null
+  theme: ThemeParsed | null
   className?: string
 } => {
   const { themes } = getConfig()
@@ -236,7 +236,7 @@ export const useChangeThemeEffect = (
     return new ThemeManager(next.name, next.className, next.theme, parentManager, reset)
   })
 
-  if (!isSSR) {
+  if (!isServer) {
     useLayoutEffect(() => {
       themeManager.update(next)
 

package/src/styled.tsx

@@ -1,6 +1,7 @@
 import { Image, Text, TextInput } from 'react-native'
 
 import { createComponent } from './createComponent'
+import { TamaguiReactElement, isTamaguiElement } from './helpers/isTamaguiElement'
 import { RNComponents } from './helpers/RNComponents'
 import {
   GetProps,
@@ -22,6 +23,20 @@ export type StyledOptions<ParentComponent extends StylableComponent> = GetProps<
   defaultVariants?: { [key: string]: any }
 }
 
+// can't infer from styled(<YStack />) which would be nice
+// * excessively deep type instantiation
+
+type GetBaseProps<A extends StylableComponent> =
+  // A extends TamaguiReactElement
+  //   ? GetBaseProps<A['type']> :
+  A extends TamaguiComponent<any, any, infer P> ? P : GetProps<A>
+
+type GetVariantProps<A extends StylableComponent> =
+  // A extends TamaguiReactElement
+  //   ? GetVariantProps<A['type']>
+  //   :
+  A extends TamaguiComponent<any, any, any, infer V> ? V : {}
+
 export function styled<
   ParentComponent extends StylableComponent,
   Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void
@@ -33,9 +48,18 @@ export function styled<
     variants?: Variants | undefined
     // thought i had this typed, but can't get it linked
     defaultVariants?: { [key: string]: any }
+    acceptsClassName?: boolean
   },
   staticExtractionOptions?: Partial<StaticConfig>
 ) {
+  // * excessively deep type instantiation
+  // if (isTamaguiElement(Component)) {
+  //   const props = Component.props
+  //   // @ts-ignore
+  //   Component = Component.type
+  //   options = options ? { ...props, ...options } : props
+  // }
+
   const staticConfigProps = (() => {
     const parentStaticConfig =
       'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null
@@ -50,7 +74,13 @@ export function styled<
     }
 
     if (options) {
-      const { variants, name, defaultVariants, ...defaultProps } = options
+      const {
+        variants,
+        name,
+        defaultVariants,
+        acceptsClassName: acceptsClassNameProp,
+        ...defaultProps
+      } = options
       if (defaultVariants) {
         Object.assign(defaultProps, defaultVariants)
       }
@@ -61,12 +91,7 @@ export function styled<
           RNComponents.add(Component)
           isReactNativeWeb = true
         } else {
-          if (process.env.NODE_ENV === 'development') {
-            // eslint-disable-next-line no-console
-            console.warn(
-              `Invalid styled() component: Tamagui only accepts react-native Text, View, Image, TextInput, or another styled Tamagui view`
-            )
-          }
+          // assuming some sort of non-tamagui non-rn view, will always use style={}
         }
       }
       const reactNativeWebComponent = isReactNativeWeb
@@ -84,6 +109,8 @@ export function styled<
         isInput || staticExtractionOptions?.isText || parentStaticConfig?.isText || Comp === Text
       )
 
+      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNativeWeb)
+
       const conf: Partial<StaticConfig> = {
         ...staticExtractionOptions,
         ...(!isTamagui && {
@@ -102,10 +129,12 @@ export function styled<
         isInput,
         isText,
         isImage,
+        acceptsClassName,
       }
 
       // TODO compiler doesn't have logic to include children, de-opt (see EnsureFlexed for test usage)
-      if (defaultProps.children) {
+      // bail on non className views as well
+      if (defaultProps.children || !acceptsClassName) {
         conf.neverFlatten = true
       }
 
@@ -117,10 +146,9 @@ export function styled<
   const component = createComponent(staticConfigProps, Component)
 
   // get parent props without pseudos and medias so we can rebuild both with new variants
-  type ParentPropsBase = ParentComponent extends TamaguiComponent<any, any, infer P>
-    ? P
-    : GetProps<ParentComponent>
-  type ParentVariants = ParentComponent extends TamaguiComponent<any, any, any, infer V> ? V : {}
+  // get parent props without pseudos and medias so we can rebuild both with new variants
+  type ParentPropsBase = GetBaseProps<ParentComponent>
+  type ParentVariants = GetVariantProps<ParentComponent>
 
   type OurVariants = Variants extends void
     ? {}

package/src/types.tsx

@@ -17,6 +17,7 @@ import {
 
 import { Variable } from './createVariable'
 import { ResolveVariableTypes } from './helpers/createPropMapper'
+import { TamaguiReactElement } from './static'
 import { RNWTextProps, RNWViewProps } from './types-rnw'
 import { FontLanguageProps } from './views/FontLanguage.types'
 import { ThemeProviderProps } from './views/ThemeProvider'
@@ -161,7 +162,12 @@ export type CreateTamaguiConfig<
   fonts: RemoveLanguagePostfixes<F>
   fontLanguages: GetLanguagePostfixes<F> extends never ? string[] : GetLanguagePostfixes<F>[]
   tokens: A
-  themes: B
+  // parsed
+  themes: {
+    [Name in keyof B]: {
+      [Key in keyof B[Name]]: Variable
+    }
+  }
   shorthands: C
   media: D
   animations: AnimationDriver<E>
@@ -229,13 +235,16 @@ export type GenericTamaguiConfig = CreateTamaguiConfig<
 >
 
 // since TamaguiConfig will be re-declared, these will all be typed globally
-export type ThemeObject = TamaguiConfig['themes'][keyof TamaguiConfig['themes']]
+export type ThemeDefinition = TamaguiConfig['themes'][keyof TamaguiConfig['themes']]
+export type ThemeKeys = keyof ThemeDefinition
+export type ThemeParsed = {
+  [key in ThemeKeys]: Variable
+}
 export type Tokens = TamaguiConfig['tokens']
 export type Shorthands = TamaguiConfig['shorthands']
 export type Media = TamaguiConfig['media']
 export type Themes = TamaguiConfig['themes']
 export type ThemeName = GetAltThemeNames<keyof Themes>
-export type ThemeKeys = keyof ThemeObject
 export type ThemeTokens = `$${ThemeKeys}`
 export type AnimationKeys = Omit<GetAnimationKeys<TamaguiConfig>, number>
 export type FontLanguages = ArrayIntersection<TamaguiConfig['fontLanguages']>
@@ -263,6 +272,26 @@ export type CreateTamaguiProps = {
   }
 
   defaultTheme?: string
+
+  /**
+   * *Advanced use case* For all CSS extracted views, this has no effect.
+   *
+   * For SSR compatibility on the web, Tamagui will render once with the settings
+   * from `mediaQueryDefaultActive` set for all media queries. Then, it will render
+   * again after the initial render using the proper media query values. This is so that
+   * hydration will match perfectly with the server.
+   *
+   * Setting disableSSR will avoid this second render by setting the media query state
+   * to the actual browser dimensions on initial load. This is only useful for client-only
+   * apps.
+   *
+   */
+  disableSSR?: boolean
+
+  /**
+   * Disable inserting a theme class in the DOM or context, allowing you to manually place it higher.
+   * For custom use cases like integration with next-theme.
+   */
   disableRootThemeClass?: boolean
 
   defaultProps?: Record<string, any> & {
@@ -313,9 +342,6 @@ export type TamaguiInternalConfig<
     getCSS: () => string
     parsed: boolean
     inverseShorthands: Record<string, string>
-
-    // just passed in from CreateTamaguiProps
-    themeClassNameOnRoot?: boolean
   }
 
 export type GetAnimationKeys<A extends GenericTamaguiConfig> = keyof A['animations']['animations']
@@ -351,10 +377,6 @@ export type MediaProps<A> = {
 export type MediaQueries = {
   [key in MediaQueryKey]: MediaQueryObject
 }
-export type ConfigureMediaQueryOptions = {
-  queries?: MediaQueries
-  defaultActive?: Record<MediaQueryKey, boolean>
-}
 
 export type TransformStyleProps = {
   x?: number
@@ -422,7 +444,7 @@ export type SizeTokens = GetTokenString<keyof Tokens['size']> | number
 export type SpaceTokens = GetTokenString<keyof Tokens['space']> | number | boolean
 export type ColorTokens =
   | GetTokenString<keyof Tokens['color']>
-  | GetTokenString<keyof ThemeObject>
+  | GetTokenString<keyof ThemeParsed>
   | CSSColorNames
 export type ZIndexTokens = GetTokenString<keyof Tokens['zIndex']> | number
 export type RadiusTokens = GetTokenString<keyof Tokens['radius']> | number
@@ -639,7 +661,7 @@ export type TamaguiProviderProps = Partial<Omit<ThemeProviderProps, 'children'>>
 export type PropMapper = (
   key: string,
   value: any,
-  theme: ThemeObject,
+  theme: ThemeParsed,
   props: Record<string, any>,
   state: Partial<SplitStyleState>,
   languageContext?: FontLanguageProps,
@@ -772,6 +794,13 @@ export type StaticConfig = {
    * Used insternally to attach default props to names
    */
   parentNames?: string[]
+
+  /**
+   * By default if styled() doesn't recognize a parent Tamagui compoent or specific react-native views,
+   * it will assume the passed in component only accepts style={} for react-native compatibility.
+   * Setting `acceptsClassName: true` indicates Tamagui can pass in className props.
+   */
+  acceptsClassName?: boolean
 }
 
 /**
@@ -782,6 +811,8 @@ export type StaticConfig = {
 
 export type StylableComponent =
   | TamaguiComponent
+  // * excessively deep type instantiation
+  // | TamaguiReactElement
   | React.Component
   | React.ForwardRefExoticComponent<any>
   | ReactComponentWithRef<any, any>
@@ -809,6 +840,8 @@ export type GetBaseProps<A extends StylableComponent> = A extends TamaguiCompone
   : never
 
 export type GetProps<A extends StylableComponent> = A extends TamaguiComponent<infer Props>
+  ? Props
+  : A extends TamaguiReactElement<infer Props>
   ? Props
   : A extends React.Component<infer Props>
   ? GetGenericComponentTamaguiProps<Props>

package/src/updateTheme.ts

@@ -1,8 +1,8 @@
 import { addTheme } from './addTheme'
 import { activeThemeManagers } from './hooks/useTheme'
-import { ThemeObject } from './types'
+import { ThemeDefinition } from './types'
 
-export function updateTheme({ name, theme }: { name: string; theme: ThemeObject }) {
+export function updateTheme({ name, theme }: { name: string; theme: ThemeDefinition }) {
   const next = addTheme({ name, theme, insertCSS: true, update: true })
 
   if (process.env.TAMAGUI_TARGET === 'native') {

package/src/views/TamaguiProvider.tsx

@@ -1,7 +1,6 @@
-import { useForceUpdate } from '@tamagui/use-force-update'
 import * as React from 'react'
 
-import { isClient, isRSC, isSSR } from '../constants/platform'
+import { isClient, isRSC, isServer } from '../constants/platform'
 import { ButtonInsideButtonContext } from '../contexts/ButtonInsideButtonContext'
 import { TextAncestorProvider } from '../contexts/TextAncestorContext'
 import { useMediaQueryListeners } from '../hooks/useMedia'
@@ -22,8 +21,8 @@ export function TamaguiProvider({
     )
   }
 
-  if (!isSSR) {
-    useMediaQueryListeners()
+  if (!isServer) {
+    useMediaQueryListeners(config)
   }
 
   if (isClient) {

package/types/addTheme.d.ts

@@ -1,7 +1,7 @@
-import { ThemeObject } from './types';
+import { ThemeDefinition } from './types';
 export declare function addTheme({ name: themeName, theme: themeIn, insertCSS, update, }: {
     name: string;
-    theme: ThemeObject;
+    theme: ThemeDefinition;
     insertCSS?: boolean;
     update?: boolean;
 }): {

package/types/config.d.ts

@@ -17,8 +17,24 @@ export declare const getConfig: () => TamaguiInternalConfig<import("./types").Cr
 }, import("./types").GenericFonts>;
 export declare const getTokens: () => import("./types").CreateTokens<import("./createVariable").Variable<import("./createVariable").VariableValue>>;
 export declare const getThemes: () => {
-    [key: string]: Partial<import("./types").TamaguiBaseTheme> & {
-        [key: string]: import("./types").VariableVal;
+    [x: string]: {
+        [x: string]: import("./createVariable").Variable<import("./createVariable").VariableValue>;
+        background?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        backgroundHover?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        backgroundPress?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        backgroundFocus?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        color?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        colorHover?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        colorPress?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        colorFocus?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        borderColor?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        borderColorHover?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        borderColorPress?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        borderColorFocus?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        shadowColor?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        shadowColorHover?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        shadowColorPress?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
+        shadowColorFocus?: import("./createVariable").Variable<import("./createVariable").VariableValue> | undefined;
     };
 };
 export declare const configListeners: Set<ConfigListener>;

package/types/constants/platform.d.ts

@@ -3,7 +3,7 @@ export declare const isAndroid: boolean;
 export declare const isIOS: boolean;
 export declare const isWeb: boolean;
 export declare const isWindowDefined: boolean;
-export declare const isSSR: boolean;
+export declare const isServer: boolean;
 export declare const isClient: boolean;
 export declare const isRSC: any;
 export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/types/constants/platform.native.d.ts

@@ -3,7 +3,7 @@ export declare const isAndroid: boolean;
 export declare const isIOS: boolean;
 export declare const isWeb = false;
 export declare const isWindowDefined = false;
-export declare const isSSR = false;
+export declare const isServer = false;
 export declare const isClient = false;
 export declare const isRSC = false;
 export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;

package/types/createVariable.d.ts

@@ -1,3 +1,7 @@
+/**
+ * Should rename this to Token
+ * Moving to objects for React Server Components support
+ */
 declare const IS_VAR = "__isVar__";
 export declare type VariableValue = string | number;
 declare type VariableIn<A extends VariableValue = VariableValue> = {
@@ -20,6 +24,7 @@ export declare const createVariable: <A extends string | number = any>(props: Va
 };
 export declare function variableToString(vrble?: any, getValue?: boolean): string;
 export declare function isVariable(v: Variable | any): v is Variable;
+export declare function getVariable(nameOrVariable: Variable | string): string;
 export declare function getVariableValue(v: Variable | any): any;
 export declare function getVariableName(v: Variable | any): any;
 export declare function getVariableVariable(v: Variable | any): any;