@tamagui/core 1.0.1-beta.141 → 1.0.1-beta.142

package/src/injectStyles.ts

@@ -0,0 +1,20 @@
+// for vite dev mode
+
+const stylesheets: Record<string, HTMLElement> = {}
+
+interface InjectStylesOptions {
+  filePath: string
+  css: string
+}
+
+export const injectStyles = ({ filePath, css }: InjectStylesOptions) => {
+  let stylesheet = stylesheets[filePath]
+  if (!stylesheet) {
+    const styleEl = document.createElement('style')
+    styleEl.setAttribute('data-file', filePath)
+    styleEl.setAttribute('type', 'text/css')
+    stylesheet = stylesheets[filePath] = styleEl
+    document.head.appendChild(styleEl)
+  }
+  stylesheet.innerHTML = css
+}

package/src/insertFont.ts

@@ -1,4 +1,4 @@
-import { setConfigFont } from './conf'
+import { setConfigFont } from './config'
 import { createFont } from './createFont'
 import { Variable } from './createVariable'
 import { DeepVariableObject, createVariables } from './createVariables'

package/src/styled.tsx

@@ -43,7 +43,21 @@ export function styled<
       if (defaultVariants) {
         Object.assign(defaultProps, defaultVariants)
       }
-      const isReactNativeWeb = parentStaticConfig?.isReactNativeWeb || RNComponents.has(Component)
+      let isReactNativeWeb = parentStaticConfig?.isReactNativeWeb || RNComponents.has(Component)
+      // this can happen due to smart-ness in fake-react-native, rough heuristic here to ensure we match (could be better..)
+      if (!('staticConfig' in Component) && !isReactNativeWeb) {
+        if (RNComponents.has(Component['displayName'])) {
+          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`
+            )
+          }
+        }
+      }
       const reactNativeWebComponent = isReactNativeWeb
         ? parentStaticConfig?.reactNativeWebComponent || Component
         : null

package/src/types.tsx

@@ -1198,9 +1198,42 @@ type AnimationConfig = {
   [key: string]: any
 }
 
+// includes a very limited adapter between various impls for number => style
+// this is useful only in limited scenarios like `Sheet`, but necessary in those cases
+
+export type AnimatedNumberStrategy =
+  // only values shared between reanimated/react-native for now
+  | {
+      type: 'spring'
+      stiffness?: number
+      damping?: number
+      mass?: number
+      overshootClamping?: boolean
+      restSpeedThreshold?: number
+      restDisplacementThreshold?: number
+    }
+  | { type: 'timing'; duration: number }
+  | { type: 'direct' }
+
+export type UniversalAnimatedNumber<A> = {
+  getInstance(): A
+  getValue(): number
+  setValue(next: number, config?: AnimatedNumberStrategy): void
+  stop(): void
+}
+
 export type AnimationDriver<A extends AnimationConfig = AnimationConfig> = {
   avoidClasses?: boolean
   useAnimations: UseAnimationHook
+  useAnimatedNumber: (initial: number) => UniversalAnimatedNumber<any>
+  useAnimatedNumberStyle: <V extends UniversalAnimatedNumber<any>>(
+    val: V,
+    getStyle: (current: any) => any
+  ) => void
+  useAnimatedNumberReaction: (
+    val: UniversalAnimatedNumber<any>,
+    onValue: (current: number) => void
+  ) => void
   animations: A
   View?: any
   Text?: any

package/src/views/TamaguiProvider.tsx

@@ -1,11 +1,11 @@
+import { useForceUpdate } from '@tamagui/use-force-update'
 import * as React from 'react'
 
-import { getConfig } from '../conf'
-import { isClient, isSSR } from '../constants/platform'
+import { isClient, isRSC, isSSR } from '../constants/platform'
 import { ButtonInsideButtonContext } from '../contexts/ButtonInsideButtonContext'
 import { TextAncestorProvider } from '../contexts/TextAncestorContext'
 import { useMediaQueryListeners } from '../hooks/useMedia'
-import { TamaguiProviderProps } from '../types'
+import type { TamaguiProviderProps } from '../types'
 import { ThemeProvider } from './ThemeProvider'
 
 export function TamaguiProvider({
@@ -14,6 +14,14 @@ export function TamaguiProvider({
   config,
   ...themePropsProvider
 }: TamaguiProviderProps) {
+  if (isRSC) {
+    return (
+      <span style={{ display: 'contents' }} className={`t_${config.defaultTheme || 'light'}`}>
+        {children}
+      </span>
+    )
+  }
+
   if (!isSSR) {
     useMediaQueryListeners()
   }
@@ -36,7 +44,6 @@ export function TamaguiProvider({
     <ButtonInsideButtonContext.Provider value={false}>
       <TextAncestorProvider>
         <ThemeProvider
-          themes={config.themes}
           defaultTheme={config.defaultTheme || 'light'}
           themeClassNameOnRoot={config.themeClassNameOnRoot}
           disableRootThemeClass={config.disableRootThemeClass}

package/src/views/ThemeProvider.tsx

@@ -1,6 +1,6 @@
 import React, { useLayoutEffect, useMemo } from 'react'
 
-import { getHasConfigured } from '../conf'
+import { getConfig, getHasConfigured } from '../config'
 import { THEME_CLASSNAME_PREFIX } from '../constants/constants'
 import { ThemeContext } from '../contexts/ThemeContext'
 import { Theme } from './Theme'
@@ -10,7 +10,6 @@ React['createElement']
 
 export type ThemeProviderProps = {
   className?: string
-  themes: any
   defaultTheme: string
   disableRootThemeClass?: boolean
   themeClassNameOnRoot?: boolean
@@ -19,8 +18,10 @@ export type ThemeProviderProps = {
 }
 
 export const ThemeProvider = (props: ThemeProviderProps) => {
-  if (!getHasConfigured()) {
-    throw new Error(`Missing configureThemes() call, add to your root file`)
+  if (process.env.NODE_ENV === 'development') {
+    if (!getHasConfigured()) {
+      throw new Error(`Missing configureThemes() call, add to your root file`)
+    }
   }
 
   // ensure theme is attached to root body node as well to work with modals by default
@@ -40,10 +41,12 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
 
   const themeContext = useMemo(() => {
     return {
-      themes: props.themes,
+      get themes() {
+        return getConfig().themes
+      },
       defaultTheme: props.defaultTheme,
     }
-  }, [props.defaultTheme, props.themes])
+  }, [props.defaultTheme])
 
   return (
     <ThemeContext.Provider value={themeContext}>

package/types/config.d.ts

@@ -0,0 +1,27 @@
+import { ConfigListener, TamaguiInternalConfig } from './types';
+export declare const setConfig: (next: TamaguiInternalConfig) => void;
+export declare const setConfigFont: (name: string, font: any, fontParsed: any) => void;
+export declare const getHasConfigured: () => boolean;
+export declare const getConfig: () => TamaguiInternalConfig<import("./types").CreateTokens<import("./types").VariableVal>, {
+    [key: string]: Partial<import("./types").TamaguiBaseTheme> & {
+        [key: string]: import("./types").VariableVal;
+    };
+}, {}, {
+    [key: string]: {
+        [key: string]: string | number;
+    };
+}, {
+    [key: string]: string | {
+        [key: string]: any;
+    };
+}, 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;
+    };
+};
+export declare const configListeners: Set<ConfigListener>;
+export declare const onConfiguredOnce: (cb: ConfigListener) => void;
+export declare const updateConfig: (key: string, value: any) => void;
+//# sourceMappingURL=config.d.ts.map

package/types/constants/platform.d.ts

@@ -5,6 +5,7 @@ export declare const isWeb: boolean;
 export declare const isWindowDefined: boolean;
 export declare const isSSR: boolean;
 export declare const isClient: boolean;
+export declare const isRSC: any;
 export declare const useIsomorphicLayoutEffect: typeof useEffect;
 export declare const isChrome: boolean;
 export declare const isWebTouchable: boolean;

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

@@ -0,0 +1,13 @@
+import { useLayoutEffect } from 'react';
+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 isClient = false;
+export declare const isRSC = false;
+export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+export declare const isChrome = false;
+export declare const isWebTouchable = false;
+export declare const isTouchable = true;
+//# sourceMappingURL=platform.native.d.ts.map

package/types/createComponent.server.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { SpaceDirection, SpaceTokens, SpacerProps, StaticConfig, StaticConfigParsed, StylableComponent, TamaguiComponent, TamaguiElement } from './types';
+export declare const mouseUps: Set<Function>;
+export declare function createComponent<ComponentPropTypes extends Object = {}, Ref = TamaguiElement, BaseProps = never>(configIn: Partial<StaticConfig> | StaticConfigParsed, ParentComponent?: StylableComponent): TamaguiComponent<ComponentPropTypes, Ref, BaseProps, {}>;
+export declare const Unspaced: {
+    (props: {
+        children?: any;
+    }): any;
+    isUnspaced: boolean;
+};
+export declare const Spacer: TamaguiComponent<SpacerProps, TamaguiElement, never, {}>;
+export declare type SpacedChildrenProps = {
+    isZStack?: boolean;
+    children?: React.ReactNode;
+    space?: SpaceTokens | number | null;
+    spaceFlex?: boolean | number;
+    direction?: SpaceDirection;
+    separator?: React.ReactNode;
+};
+export declare function spacedChildren({ isZStack, children, space, direction, spaceFlex, separator, }: SpacedChildrenProps): React.ReactNode;
+export declare function processIDRefList(idRefList: string | Array<string>): string;
+export declare const accessibilityRoleToWebRole: {
+    adjustable: string;
+    button: string;
+    header: string;
+    image: string;
+    imagebutton: null;
+    keyboardkey: null;
+    label: null;
+    link: string;
+    none: string;
+    search: string;
+    summary: string;
+    text: null;
+};
+//# sourceMappingURL=createComponent.server.d.ts.map

package/types/createVariable.d.ts

@@ -1,4 +1,3 @@
-import { VariableColorVal } from './types';
 declare const IS_VAR = "__isVar__";
 export declare type VariableValue = string | number;
 declare type VariableIn<A extends VariableValue = VariableValue> = {
@@ -19,7 +18,7 @@ export declare const createVariable: <A extends string | number = any>(props: Va
     isFloating?: boolean | undefined;
     __isVar__: boolean;
 };
-export declare function variableToString(vrble?: Variable | VariableColorVal): string;
+export declare function variableToString(vrble?: any): string;
 export declare function isVariable(v: Variable | any): v is Variable;
 export declare function getVariableValue(v: Variable | any): any;
 export declare function getVariableName(v: Variable | any): any;

package/types/helpers/RNComponents.d.ts

@@ -1,2 +1,2 @@
-export declare const RNComponents: WeakMap<object, any>;
+export declare const RNComponents: Set<any>;
 //# sourceMappingURL=RNComponents.d.ts.map

package/types/helpers/ThemeManager.d.ts

@@ -30,14 +30,8 @@ export declare class ThemeManager {
     update({ name, theme, className }?: SetActiveThemeProps, force?: boolean): boolean;
     getNextTheme(props?: GetNextThemeProps, debug?: any): {
         name: string;
-        theme: (Partial<import("../types").TamaguiBaseTheme> & {
-            [key: string]: import("../types").VariableVal;
-        }) | null;
-        className?: undefined;
-    } | {
-        name: string;
-        theme: any;
-        className: string;
+        theme: ThemeObject | null;
+        className: string | undefined;
     };
     getClassName(name: string): string;
     track(uuid: any, keys: Set<string>): void;

package/types/helpers/getAnimationDriver.d.ts

@@ -0,0 +1,6 @@
+export declare function getAnimationDriver(): import("..").AnimationDriver<{
+    [key: string]: string | {
+        [key: string]: any;
+    };
+}>;
+//# sourceMappingURL=getAnimationDriver.d.ts.map

package/types/helpers/useAnimationDriver.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=useAnimationDriver.d.ts.map

package/types/hooks/useAnimationDriver.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=useAnimationDriver.d.ts.map

package/types/hooks/useServerContext.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=useServerContext.d.ts.map

package/types/hooks/useServerHooks.d.ts

@@ -0,0 +1,4 @@
+import { useRef, useState } from 'react';
+export declare const useServerState: typeof useState;
+export declare const useServerRef: typeof useRef;
+//# sourceMappingURL=useServerHooks.d.ts.map

package/types/hooks/useTheme.d.ts

@@ -1,6 +1,6 @@
 import { ThemeManager } from '../helpers/ThemeManager';
 import { ThemeName, ThemeObject } from '../types';
-export declare type ThemeProps = {
+export interface ThemeProps {
     className?: string;
     disableThemeClass?: boolean;
     name: Exclude<ThemeName, number> | null;
@@ -8,7 +8,7 @@ export declare type ThemeProps = {
     children?: any;
     reset?: boolean;
     debug?: boolean | 'verbose';
-};
+}
 export declare const useTheme: (themeName?: string | null, componentName?: string, props?: ThemeProps, forceUpdate?: any) => ThemeObject;
 export declare const getThemeManager: (theme: any) => ThemeManager | undefined;
 export declare const useThemeName: (opts?: {
@@ -17,26 +17,10 @@ export declare const useThemeName: (opts?: {
 export declare const useDefaultThemeName: () => ThemeName | undefined;
 export declare const activeThemeManagers: Set<ThemeManager>;
 export declare const useChangeThemeEffect: (name?: string | null, componentName?: string, props?: ThemeProps, forceUpdateProp?: any) => {
-    themes: {
-        [key: string]: Partial<import("../types").TamaguiBaseTheme> & {
-            [key: string]: import("../types").VariableVal;
-        };
-    };
-    themeManager: ThemeManager | null;
-    name: string;
-    theme: (Partial<import("../types").TamaguiBaseTheme> & {
-        [key: string]: import("../types").VariableVal;
-    }) | null;
-    className?: undefined;
-} | {
-    themes: {
-        [key: string]: Partial<import("../types").TamaguiBaseTheme> & {
-            [key: string]: import("../types").VariableVal;
-        };
-    };
+    themes: Record<string, ThemeObject>;
     themeManager: ThemeManager | null;
     name: string;
-    theme: any;
-    className: string;
+    theme: ThemeObject | null;
+    className?: string | undefined;
 };
 //# sourceMappingURL=useTheme.d.ts.map

package/types/index.d.ts

@@ -13,7 +13,7 @@ export * from './updateTheme';
 export * from './styled';
 export * from './types';
 export type { RNWTextProps, RNWViewProps } from './types-rnw';
-export { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './conf';
+export { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './config';
 export * from './constants/constants';
 export * from './constants/platform';
 export { createDOMProps } from '@tamagui/rnw';
@@ -21,6 +21,7 @@ export * from './helpers/calc';
 export * from './helpers/createShallowUpdate';
 export * from './helpers/getStackSize';
 export * from './helpers/getVariantExtras';
+export * from './helpers/getAnimationDriver';
 export * from './helpers/getExpandedShorthands';
 export * from './helpers/getSize';
 export * from './helpers/getSplitStyles';

package/types/injectStyles.d.ts

@@ -0,0 +1,7 @@
+interface InjectStylesOptions {
+    filePath: string;
+    css: string;
+}
+export declare const injectStyles: ({ filePath, css }: InjectStylesOptions) => void;
+export {};
+//# sourceMappingURL=injectStyles.d.ts.map

package/types/types.d.ts

@@ -460,9 +460,32 @@ export declare type SplitStyleState = TamaguiComponentState & {
 declare type AnimationConfig = {
     [key: string]: any;
 };
+export declare type AnimatedNumberStrategy = {
+    type: 'spring';
+    stiffness?: number;
+    damping?: number;
+    mass?: number;
+    overshootClamping?: boolean;
+    restSpeedThreshold?: number;
+    restDisplacementThreshold?: number;
+} | {
+    type: 'timing';
+    duration: number;
+} | {
+    type: 'direct';
+};
+export declare type UniversalAnimatedNumber<A> = {
+    getInstance(): A;
+    getValue(): number;
+    setValue(next: number, config?: AnimatedNumberStrategy): void;
+    stop(): void;
+};
 export declare type AnimationDriver<A extends AnimationConfig = AnimationConfig> = {
     avoidClasses?: boolean;
     useAnimations: UseAnimationHook;
+    useAnimatedNumber: (initial: number) => UniversalAnimatedNumber<any>;
+    useAnimatedNumberStyle: <V extends UniversalAnimatedNumber<any>>(val: V, getStyle: (current: any) => any) => void;
+    useAnimatedNumberReaction: (val: UniversalAnimatedNumber<any>, onValue: (current: number) => void) => void;
     animations: A;
     View?: any;
     Text?: any;

package/types/views/TamaguiProvider.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { TamaguiProviderProps } from '../types';
+import type { TamaguiProviderProps } from '../types';
 export declare function TamaguiProvider({ children, disableInjectCSS, config, ...themePropsProvider }: TamaguiProviderProps): JSX.Element;
 //# sourceMappingURL=TamaguiProvider.d.ts.map

package/types/views/ThemeProvider.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 export declare type ThemeProviderProps = {
     className?: string;
-    themes: any;
     defaultTheme: string;
     disableRootThemeClass?: boolean;
     themeClassNameOnRoot?: boolean;