@tamagui/web 3.0.0-beta.924.1 → 3.0.0

package/types/types.d.ts

@@ -1,9 +1,12 @@
 import type { StyleObject } from '@tamagui/helpers';
 import type { CoreStateModifierName, TransformAccumulator } from '@tamagui/style-grammar/runtime';
 import type { Properties } from 'csstype';
+import type { UnprefixedCSSProperties } from './dom/styleTypes';
 import type { CSSProperties, ComponentType, Context, Dispatch, FunctionComponent, HTMLAttributes, ProviderExoticComponent, Ref as ReactRef, ReactNode, RefObject, SetStateAction } from 'react';
-import type { PressableProps, Text as RNText, TextStyle as RNTextStyle, TextProps as ReactTextProps, View, ViewProps, ViewStyle } from 'react-native';
+import type { FontVariant, PressableProps, TextInstance as RNText, TextStyle as RNTextStyle, TextProps as ReactTextProps, ViewInstance as View, ViewProps, ViewStyle } from '@tamagui/react-native-types';
 import type { NativeStyleEngineLinkHandle } from './helpers/nativeStyleEngine';
+import type { AnimatedTextChannel, NativeTextContext, NativeTextMetrics } from './helpers/nativeTextMetrics';
+export type { AnimatedTextChannel, NativeTextMetrics } from './helpers/nativeTextMetrics';
 import type { StyleFrontend } from './helpers/styleFrontend';
 import type { CSSColorNames } from './interfaces/CSSColorNames';
 import type { RNOnlyProps } from './interfaces/RNExclusiveTypes';
@@ -221,6 +224,7 @@ export type ThemeState = {
     isNew?: boolean;
     parentId?: string;
     scheme?: 'light' | 'dark';
+    schemeAuthored?: boolean;
 };
 export interface Variable<A = any> {
     isVar: true;
@@ -298,14 +302,12 @@ export type ReactComponentWithRef<Props, Ref> = ComponentType<Props & {
 }>;
 export type ComponentSetStateShallow = React.Dispatch<React.SetStateAction<Partial<TamaguiComponentState>>>;
 export type ComponentSetState = Dispatch<SetStateAction<TamaguiComponentState>>;
-export type ComponentContextI = {
+export type ComponentContextI = NativeTextContext & {
     disableSSR?: boolean;
     inText: boolean;
     language: LanguageContextType | null;
     animationDriver: AnimationDriver | null;
     setParentFocusState: ComponentSetStateShallow | null;
-    mediaEmit?: (state: UseMediaState) => void;
-    mediaEmitListeners?: Set<(state: UseMediaState) => void>;
     insets?: {
         top: number;
         right: number;
@@ -318,6 +320,8 @@ export type TamaguiComponentStateRef = {
     optimizeForFirstRender?: boolean;
     host?: TamaguiElement;
     composedRef?: (x: TamaguiElement) => void;
+    composedForwardedRef?: React.Ref<TamaguiElement>;
+    attachedForwardedRef?: React.Ref<TamaguiElement>;
     willHydrate?: boolean;
     hasMeasured?: boolean;
     hasAnimated?: boolean;
@@ -329,6 +333,7 @@ export type TamaguiComponentStateRef = {
     hasEverResetPresence?: boolean;
     hasHadEvents?: boolean;
     hasRealPressEvents?: boolean;
+    hadAttachPress?: boolean;
     isListeningToTheme?: boolean;
     unPress?: Function;
     setStateShallow?: ComponentSetStateShallow;
@@ -341,7 +346,8 @@ export type TamaguiComponentStateRef = {
     nextState?: TamaguiComponentState;
     nextMedia?: UseMediaState;
     avoidReRenders?: boolean;
-    mediaEmitCleanup?: () => void;
+    mediaEmit?: (state: UseMediaState) => void;
+    mediaEmitQueued?: boolean;
     prevPseudoState?: {
         hover?: boolean;
         press?: boolean;
@@ -361,6 +367,7 @@ export type TamaguiComponentStateRef = {
     nativeMediaQueued?: boolean;
     nativeThemeState?: ThemeState;
     nativePushedKeys?: Set<string>;
+    prevStyle?: Record<string, any> | null;
 };
 export type ComponentGroupEmitter = {
     listeners: Set<GroupStateListener>;
@@ -374,6 +381,7 @@ export type WidthHeight = {
 export type ChildGroupState = {
     pseudo?: PseudoGroupState;
     media?: Record<MediaQueryKey extends number ? never : MediaQueryKey, boolean>;
+    layout?: WidthHeight;
 };
 export type ComponentGroupState = {
     pseudo?: PseudoGroupState;
@@ -510,7 +518,7 @@ export type OnlyAllowShorthandsSetting = TamaguiConfig['settings'] extends {
 export type OnlyShorthandStylePropsSetting = TamaguiConfig['settings'] extends {
     onlyShorthandStyleProps: infer X;
 } ? X : false;
-export type CreateTamaguiConfig<A extends GenericTokens, B extends GenericThemes, C extends GenericShorthands = GenericShorthands, D extends GenericMedia = GenericMedia, E extends GenericAnimations = GenericAnimations, F extends GenericFonts = GenericFonts, H extends GenericTamaguiSettings = GenericTamaguiSettings, AnimDriverKeys extends string = string> = {
+export type CreateTamaguiConfig<A extends GenericTokens, B extends GenericThemes, C extends GenericShorthands = GenericShorthands, D extends GenericMedia = GenericMedia, E extends GenericAnimations = GenericAnimations, F extends GenericFonts = GenericFonts, H extends GenericTamaguiSettings = GenericTamaguiSettings, S extends GenericSizing = GenericSizing, AnimDriverKeys extends string = string> = {
     fonts: RemoveLanguagePostfixes<F>;
     fontLanguages: GetLanguagePostfixes<F> extends never ? string[] : GetLanguagePostfixes<F>[];
     tokens: A;
@@ -524,6 +532,7 @@ export type CreateTamaguiConfig<A extends GenericTokens, B extends GenericThemes
     animations: AnimationDriverLike<E> | AnimationsConfigObject;
     animationDriverKeys?: AnimDriverKeys;
     settings: H;
+    sizing: S;
 };
 type GetLanguagePostfix<Set> = Set extends string ? Set extends `${string}_${infer Postfix}` ? Postfix : never : never;
 type OmitLanguagePostfix<Set> = Set extends string ? Set extends `${infer Prefix}_${string}` ? Prefix : Set : never;
@@ -531,7 +540,7 @@ type RemoveLanguagePostfixes<F extends GenericFonts> = {
     [Key in OmitLanguagePostfix<keyof F>]: F[Key];
 };
 type GetLanguagePostfixes<F extends GenericFonts> = GetLanguagePostfix<keyof F>;
-type ConfProps<A, B, C, D, E, F, I, V = undefined> = {
+type ConfProps<A, B, C, D, E, F, I, S, V = undefined> = {
     tokens?: A;
     themes?: B;
     shorthands?: C;
@@ -539,6 +548,7 @@ type ConfProps<A, B, C, D, E, F, I, V = undefined> = {
     animations?: E;
     fonts?: F;
     settings?: I;
+    sizing?: S;
     variables?: V;
 };
 type VariableValInScheme<V> = V extends {
@@ -570,7 +580,7 @@ type ExtractAnimationConfig<E> = E extends AnimationDriverLike<infer Config> ? C
 type ExtractAnimationDriverKeys<E> = E extends AnimationDriverLike<any> ? 'default' : E extends {
     default: AnimationDriverLike<any>;
 } ? Extract<keyof E, string> : 'default';
-export type InferTamaguiConfig<Conf> = Conf extends ConfProps<infer A, infer B, infer C, infer D, infer E, infer F, infer H, infer V> ? TamaguiInternalConfig<A extends GenericTokens ? A : EmptyTokens, B extends GenericThemes ? ThemesWithVariables<B, V> : EmptyThemes, C extends GenericShorthands ? C : EmptyShorthands, D extends GenericMedia ? D : EmptyMedia, ExtractAnimationConfig<E>, F extends GenericFonts ? F : EmptyFonts, H extends GenericTamaguiSettings ? H : EmptyTamaguiSettings, ExtractAnimationDriverKeys<E>> : unknown;
+export type InferTamaguiConfig<Conf> = Conf extends ConfProps<infer A, infer B, infer C, infer D, infer E, infer F, infer H, infer S, infer V> ? TamaguiInternalConfig<A extends GenericTokens ? A : EmptyTokens, B extends GenericThemes ? ThemesWithVariables<B, V> : EmptyThemes, C extends GenericShorthands ? C : EmptyShorthands, D extends GenericMedia ? D : EmptyMedia, ExtractAnimationConfig<E>, F extends GenericFonts ? F : EmptyFonts, H extends GenericTamaguiSettings ? H : EmptyTamaguiSettings, S extends GenericSizing ? S : GenericSizing, ExtractAnimationDriverKeys<E>> : unknown;
 export type GenericTamaguiConfig = CreateTamaguiConfig<GenericTokens, GenericThemes, GenericShorthands, GenericMedia, GenericAnimations, GenericFonts>;
 export type RootThemeName<TK extends keyof Themes = keyof Themes> = TK extends string ? string extends TK ? never : TK extends `${string}_${string}` ? never : TK : never;
 type BaseThemeDefinitions = TamaguiConfig['themes'][RootThemeName];
@@ -649,8 +659,9 @@ export interface GenericTamaguiSettings {
      * controls style semantics where React Native/Yoga and CSS differ.
      *
      * - "legacy": preserves Tamagui v1 flex expansion.
-     * - "react-native": follows React Native/Yoga flex and raw numeric lineHeight semantics.
-     * - "web": follows CSS flex and unitless numeric lineHeight semantics.
+     * - "react-native": follows React Native/Yoga flex expansion.
+     * - "web": follows CSS flex expansion.
+     * numeric Tamagui lineHeight values are ratios in every mode.
      *
      * @default "web"
      */
@@ -736,6 +747,17 @@ export interface GenericTamaguiSettings {
      * two ways to style the same property.
      */
     onlyAllowShorthands?: boolean | undefined;
+    /**
+     * Restrict conditional style values to one syntax. Flat values accept both
+     * the string form (`bg="red hover:blue"`) and the object form
+     * (`bg={{ base: 'red', hover: 'blue' }}`); set this to keep one of them,
+     * which narrows the types, makes the runtime warn on the other in
+     * development, and tells `tamagui generate-prompt` and the skills to only
+     * show that form.
+     *
+     * @default undefined - both forms are allowed
+     */
+    styleValueSyntax?: 'string' | 'object' | undefined;
     /**
      * Define a default font, for better types and default font on Text
      */
@@ -811,6 +833,45 @@ export interface GenericTamaguiSettings {
      */
     onlyShorthandStyleProps?: boolean;
 }
+/** one rung of the control ladder: token keys, plus optional pinned geometry */
+export type SizeRecipe = {
+    fontSize: string;
+    /**
+     * the type-scale key the square controls (checkbox, radio, switch) size
+     * from. Usually the rung's own name, but text deliberately steps down at
+     * `md`/`lg` so buttons are not chunky while the squares stay on-scale.
+     */
+    controlFontSize: string;
+    paddingInline: string;
+    paddingBlock: string;
+    gap: string;
+    radius: string;
+    /**
+     * explicit rung geometry, skipping derivation. For scales whose keys
+     * cannot derive the ladder (v5's numeric scales pin the frozen heights
+     * here so v5 apps never resize).
+     */
+    px?: {
+        height: number;
+        icon: number;
+        square: number;
+    };
+};
+/**
+ * the user-configurable control ladder. Rung names become the accepted
+ * `size` values (see ComponentSize); the px derivations in resolveSizing are
+ * fixed formulas over the rung's tokens.
+ */
+export type GenericSizing = {
+    default: string;
+    sizes: Record<string, SizeRecipe>;
+};
+/**
+ * the config's control size names: the default ladder plus any custom rungs
+ * from `sizing.sizes`. Stays the five literals (never `string`) when no
+ * custom config is registered.
+ */
+export type ComponentSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | (string extends keyof TamaguiConfig['sizing']['sizes'] ? never : Extract<keyof TamaguiConfig['sizing']['sizes'], string>);
 export type TamaguiSettings = TamaguiConfig['settings'];
 export type BaseStyleProps = {
     [Key in keyof TextStylePropsBase]?: TextStyle[Key] | GetThemeValueForKey<Key>;
@@ -857,19 +918,18 @@ export type CreateTamaguiProps = {
     variables?: GenericVariables;
     settings?: Partial<GenericTamaguiSettings>;
     /**
-     * Web-only: define text-selection CSS
+     * the control size ladder: rung names become the accepted `size` values.
+     * Spread `defaultSizing` and override `sizes` to add or retune rungs; the
+     * px derivations are fixed formulas over each rung's tokens.
      */
-    selectionStyles?: (theme: Record<string, string>) => null | {
-        backgroundColor?: any;
-        color?: any;
-    };
+    sizing?: GenericSizing;
 };
 export type GetCSS = (opts?: {
     separator?: string;
     exclude?: 'themes' | 'design-system' | null;
     sinceLastCall?: boolean;
 }) => string;
-export type TamaguiInternalConfig<A extends GenericTokens = GenericTokens, B extends GenericThemes = GenericThemes, C extends GenericShorthands = GenericShorthands, D extends GenericMedia = GenericMedia, E extends GenericAnimations = GenericAnimations, F extends GenericFonts = GenericFonts, G extends GenericTamaguiSettings = GenericTamaguiSettings, AnimDriverKeys extends string = string> = Omit<CreateTamaguiProps, keyof GenericTamaguiConfig> & Omit<CreateTamaguiConfig<A, B, C, D, E, F, G, AnimDriverKeys>, 'tokens'> & {
+export type TamaguiInternalConfig<A extends GenericTokens = GenericTokens, B extends GenericThemes = GenericThemes, C extends GenericShorthands = GenericShorthands, D extends GenericMedia = GenericMedia, E extends GenericAnimations = GenericAnimations, F extends GenericFonts = GenericFonts, G extends GenericTamaguiSettings = GenericTamaguiSettings, S extends GenericSizing = GenericSizing, AnimDriverKeys extends string = string> = Omit<CreateTamaguiProps, keyof GenericTamaguiConfig> & Omit<CreateTamaguiConfig<A, B, C, D, E, F, G, S, AnimDriverKeys>, 'tokens'> & {
     tokens: Tokenify<A>;
     tokensParsed: Tokenify<A>;
     themeConfig: any;
@@ -882,6 +942,7 @@ export type TamaguiInternalConfig<A extends GenericTokens = GenericTokens, B ext
     reactNative?: any;
     fontSizeTokens: Set<string>;
     settings: Omit<GenericTamaguiSettings, keyof G> & G;
+    sizing: Omit<GenericSizing, keyof S> & S;
     defaultFont?: string;
     defaultFontToken: `${string}`;
     animationDrivers?: Record<string, AnimationDriverLike | null>;
@@ -896,7 +957,7 @@ export type GenericFont<Key extends GenericFontKey = GenericFontKey> = {
     };
     family?: string | Variable;
     lineHeight?: Partial<{
-        [key in Key]: number | Variable;
+        [key in Key]: number | Px | `${number}` | Variable;
     }> | undefined;
     letterSpacing?: Partial<{
         [key in Key]: number | Variable;
@@ -953,52 +1014,81 @@ export interface MediaQueryList {
 export type MatchMedia = (query: string) => MediaQueryList;
 export type AnimationConfigType = any;
 /**
- * Spring configuration parameters that can override preset defaults.
- * Use with array syntax: transition={['bouncy', { stiffness: 1000, damping: 70 }]}
+ * Low-level spring physics. A projection of `duration` + `bounce`, not a second
+ * way to configure a spring: whichever you author, the other is derived, and
+ * every driver ends up with the same motion.
+ *
+ * Reach for this only when you are porting a config you already tuned.
  */
 export type TransitionSpringConfig = {
     stiffness?: number;
     damping?: number;
     mass?: number;
-    tension?: number;
-    friction?: number;
     velocity?: number;
     overshootClamping?: boolean;
-    duration?: number;
-    bounciness?: number;
-    speed?: number;
+    restDisplacementThreshold?: number;
+    restSpeedThreshold?: number;
 };
 /**
- * A transition value: the name of a configured driver animation, or a raw CSS
- * transition string such as `200ms` or `200ms hover:400ms`. The runtime accepts
- * both — a name that is not a configured preset is treated as CSS — so the type
- * must too. `(string & {})` keeps the preset names in autocomplete instead of
- * collapsing the union to plain `string`.
+ * A transition value: the name of a configured driver animation, or a CSS
+ * transition string such as `200ms`, `200ms ease-out`, or
+ * `opacity 150ms, transform 300ms`.
+ *
+ * Springs get a CSS-shaped function of their own: `spring(300ms, 0.4)` is a
+ * 300ms spring with a bounce of 0.4. It works everywhere a timing function
+ * does, including on the web, where it compiles to a `linear()` easing.
+ *
+ * A bare string that exactly matches a configured animation name is that
+ * preset; everything else is CSS. `(string & {})` keeps preset names in
+ * autocomplete instead of collapsing the union to plain `string`.
  */
 export type TransitionValue = TransitionKeys | (string & {});
-export type TransitionProp = TransitionValue | ({
-    default?: TransitionValue;
-    enter?: TransitionValue;
-    exit?: TransitionValue;
-    delay?: number;
-} & TransitionSpringConfig & {
-    [key: string]: TransitionValue | {
-        type: TransitionValue;
-        [key: string]: any;
-    } | number | boolean | undefined;
-}) | [
-    TransitionValue,
-    {
-        delay?: number;
-        enter?: TransitionValue;
-        exit?: TransitionValue;
-    } & TransitionSpringConfig & {
-        [key: string]: TransitionValue | {
-            type?: TransitionValue;
-            [key: string]: any;
-        } | number | boolean | undefined;
-    }
-];
+/**
+ * The settings half of a transition object. Anything else in the object is a
+ * style property name carrying its own transition.
+ */
+export type TransitionConfig = {
+    /** a configured animation to start from */
+    preset?: TransitionKeys;
+    /** milliseconds, or a CSS time like `'200ms'` */
+    duration?: number | string;
+    /**
+     * Makes it a spring. `0` is critically damped (no overshoot), approaching
+     * `1` is loose and oscillating, negative is sluggish. `duration` stays the
+     * perceptual "how fast does this feel" number either way.
+     */
+    bounce?: number;
+    /** any CSS timing function. Mutually exclusive with `bounce`. */
+    easing?: string;
+    /** milliseconds, or a CSS time */
+    delay?: number | string;
+    behavior?: 'normal' | 'allow-discrete';
+    /** the CSS `transition-property` list these settings apply to */
+    properties?: string;
+    spring?: TransitionSpringConfig;
+    /** the transition to use while mounting, if it differs */
+    enter?: TransitionProp;
+    /** the transition to use while unmounting, if it differs */
+    exit?: TransitionProp;
+};
+/**
+ * `transition` accepts a string or an object, and nothing else.
+ *
+ * ```tsx
+ * transition="bouncy"                                  // a configured preset
+ * transition="200ms ease-out"                          // css
+ * transition="opacity 150ms, transform spring(300ms, 0.4)"
+ * transition={{ duration: 200, bounce: 0.15 }}
+ * transition={{ preset: 'bouncy', opacity: '150ms' }}  // per-property override
+ * ```
+ *
+ * Per-property keys are later CSS entries, so they win for that property and
+ * inherit nothing from the base, exactly as
+ * `transition: all 200ms, opacity 150ms` behaves in a stylesheet.
+ */
+export type TransitionProp = TransitionValue | (TransitionConfig & {
+    [property: string]: TransitionValue | TransitionConfig | unknown;
+});
 /**
  * Emitted by the animation driver at the start and end of a transition.
  *
@@ -1022,8 +1112,30 @@ type SomewhatSpecificSizeValue = 'auto' | PercentString | RemString | UnionableN
 type SomewhatSpecificSpaceValue = 'auto' | PercentString | RemString | UnionableNumber;
 type VariableString = `var(${string})`;
 export type SomewhatSpecificColorValue = CSSColorNames | 'transparent' | (`rgba(${string})` & {}) | (`rgb(${string})` & {}) | (`hsl(${string})` & {}) | (`hsla(${string})` & {}) | (`#${string}` & {});
-type WebOnlySizeValue = `${number}vw` | `${number}dvw` | `${number}lvw` | `${number}svw` | `${number}vh` | `${number}dvh` | `${number}lvh` | `${number}svh` | `calc(${string})` | `min(${string})` | `max(${string})` | 'max-content' | 'min-content';
+type WebOnlySizeValue = `${number}px` | `${number}em` | `${number}ch` | `${number}vmin` | `${number}vmax` | `${number}vw` | `${number}dvw` | `${number}lvw` | `${number}svw` | `${number}vh` | `${number}dvh` | `${number}lvh` | `${number}svh` | `calc(${string})` | `min(${string})` | `max(${string})` | `clamp(${string})` | 'max-content' | 'min-content';
 type UserAllowedStyleValuesSetting = Exclude<TamaguiSettings['allowedStyleValues'], undefined>;
+/**
+ * A flat value string that carries a clause (`red hover:blue`, `dark:red`)
+ * or a multi-token payload (`1px solid red`). Its grammar is validated by the
+ * language service and the runtime, not by the type system. With
+ * `styleValueSyntax: 'object'` the `:` arm is dropped, so a clause-only
+ * string like `hover:red` is a type error (a clause after a space still
+ * passes through the multi-token arm).
+ */
+export type FlatClauseString = `${string} ${string}` | (StyleValueSyntaxSetting extends 'object' ? never : `${string}:${string}`);
+type StyleValueSyntaxSetting = TamaguiSettings extends {
+    styleValueSyntax: infer S;
+} ? S : undefined;
+/**
+ * The open string arm every style value carries. With no `allowedStyleValues`
+ * setting (or a boolean one) it is `string & {}`, so any string is accepted.
+ * With a strictness setting, a single-token string (no space, no `:`) has to
+ * be a token, theme value, or a value the setting allows, so a typo like
+ * `bg="backgroun"` is a type error; only clause strings stay open.
+ */
+export type OpenStyleString = TamaguiSettings extends {
+    allowedStyleValues: infer Setting;
+} ? Setting extends boolean ? UnionableString : FlatClauseString : UnionableString;
 export type GetThemeValueSettingForCategory<Cat extends keyof AllowedStyleValuesSettingPerCategory> = UserAllowedStyleValuesSetting extends AllowedValueSettingBase | undefined ? UserAllowedStyleValuesSetting : UserAllowedStyleValuesSetting extends AllowedStyleValuesSettingPerCategory ? UserAllowedStyleValuesSetting[Cat] : true;
 export type GetThemeValueFallbackFor<Setting, StrictValue, SomewhatStrictValue, LooseValue, WebOnlyValue> = Setting extends 'strict' ? StrictValue : Setting extends 'strict-web' ? StrictValue | WebOnlyValue : Setting extends 'somewhat-strict' ? SomewhatStrictValue : Setting extends 'somewhat-strict-web' ? SomewhatStrictValue | WebOnlyValue : LooseValue;
 export type ThemeValueFallback = (TamaguiSettings extends {
@@ -1042,13 +1154,13 @@ export type ThemeValueFallbackColor = ThemeValueFallback | GetThemeValueFallback
 export type ThemeValueFallbackRadius = ThemeValueFallback | GetThemeValueFallbackFor<AllowedValueSettingRadius, never, UnionableNumber, UnionableNumber, WebStyleValueUniversal>;
 export type ThemeValueFallbackZIndex = ThemeValueFallback | GetThemeValueFallbackFor<AllowedValueSettingZIndex, never, UnionableNumber, UnionableNumber, WebStyleValueUniversal>;
 export type GetTokenString<A> = A extends string | number ? `${A}` : string;
-export type Size = ThemeValueFallbackSize | GetTokenString<keyof Tokens['size']> | (string & {}) | true;
+export type Size = ThemeValueFallbackSize | GetTokenString<keyof Tokens['size']> | OpenStyleString | true;
 export type SizeTokens = Size;
 export type Space = GetTokenString<keyof Tokens['space']> | ThemeValueFallbackSpace | true;
 export type SpaceTokens = Space;
 type ColorTokenBase = GetTokenString<keyof Tokens['color']> | GetTokenString<keyof ThemeParsed>;
 type TokenWithOpacity = `${string}/${number}`;
-export type Color = ColorTokenBase | CSSColorNames | TokenWithOpacity | (string & {});
+export type Color = ColorTokenBase | CSSColorNames | TokenWithOpacity | OpenStyleString;
 export type ColorTokens = Color;
 export type ZIndex = GetTokenString<keyof Tokens['zIndex']> | ThemeValueFallbackZIndex | number | true;
 export type ZIndexTokens = ZIndex;
@@ -1064,7 +1176,7 @@ export type FontTokens = GetTokenString<keyof TamaguiConfig['fonts']>;
 export type FontFamilyTokens = FontTokens;
 export type FontSize = GetTokenString<GetTokenFontKeysFor<'size'>> | number | RemString | true;
 export type FontSizeTokens = FontSize;
-export type FontLineHeightTokens = GetTokenString<GetTokenFontKeysFor<'lineHeight'>> | number | RemString;
+export type FontLineHeightTokens = GetTokenString<GetTokenFontKeysFor<'lineHeight'>> | number | Px | `${number}` | RemString;
 export type FontWeightValues = `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00` | 'bold' | 'normal';
 export type FontWeightTokens = GetTokenString<GetTokenFontKeysFor<'weight'>> | FontWeightValues;
 type FontColorTokenBase = GetTokenString<GetTokenFontKeysFor<'color'>>;
@@ -1092,10 +1204,11 @@ export type FontLetterSpacingKeys = 'letterSpacing';
 export type LineHeightKeys = 'lineHeight';
 export type ZIndexKeys = 'zIndex';
 export type OpacityKeys = 'opacity';
-export type ThemeValueGet<K extends string | number | symbol> = K extends 'theme' ? ThemeTokens : K extends SizeKeys ? SizeTokens : K extends FontKeys ? FontTokens : K extends FontSizeKeys ? FontSizeTokens : K extends `${`border${string | ''}Radius`}` ? RadiusTokens : K extends SpaceKeys ? K extends 'shadowOffset' ? {
+type FontStyleValueFallback = GetThemeValueFallbackFor<AllowedValueSettingSize, never, never, never, WebStyleValueUniversal | `${number}%`>;
+export type ThemeValueGet<K extends string | number | symbol> = K extends 'theme' ? ThemeTokens : K extends SizeKeys ? SizeTokens : K extends FontKeys ? FontTokens : K extends FontSizeKeys ? FontSizeTokens | FontStyleValueFallback : K extends `${`border${string | ''}Radius`}` ? RadiusTokens : K extends SpaceKeys ? K extends 'shadowOffset' ? {
     width: SpaceTokens;
     height: SpaceTokens;
-} : SpaceTokens : K extends ColorKeys ? ColorTokens | ThemeValueFallbackColor : K extends ZIndexKeys ? ZIndexTokens : K extends LineHeightKeys ? FontLineHeightTokens : K extends FontWeightKeys ? FontWeightTokens : K extends FontLetterSpacingKeys ? FontLetterSpacingTokens : K extends OpacityKeys ? ThemeValueFallback : never;
+} : SpaceTokens : K extends ColorKeys ? ColorTokens | ThemeValueFallbackColor : K extends ZIndexKeys ? ZIndexTokens : K extends LineHeightKeys ? FontLineHeightTokens | FontStyleValueFallback : K extends FontWeightKeys ? FontWeightTokens : K extends FontLetterSpacingKeys ? FontLetterSpacingTokens : K extends OpacityKeys ? ThemeValueFallback : never;
 export type GetThemeValueForKey<K extends string | symbol | number> = ThemeValueGet<K> | ThemeValueFallback;
 export type SafeAreaValueKeys = 'padding' | 'paddingTop' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'paddingHorizontal' | 'paddingVertical' | 'paddingStart' | 'paddingEnd' | 'paddingBlock' | 'paddingInline' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInlineStart' | 'paddingInlineEnd' | 'margin' | 'marginTop' | 'marginBottom' | 'marginLeft' | 'marginRight' | 'marginHorizontal' | 'marginVertical' | 'marginStart' | 'marginEnd' | 'marginBlock' | 'marginInline' | 'marginBlockStart' | 'marginBlockEnd' | 'marginInlineStart' | 'marginInlineEnd' | 'inset' | 'top' | 'bottom' | 'left' | 'right' | 'start' | 'end';
 /**
@@ -1123,21 +1236,21 @@ type FlatClauseName = ClauseModifierName | `${ClauseModifierName}:${string}` | `
  * package boundaries.
  */
 export type FlatStyleObject<T> = {
-    default?: T | (string & {});
+    default?: T | OpenStyleString;
 } & {
-    [K in FlatClauseName]?: T | (string & {});
+    [K in FlatClauseName]?: T | OpenStyleString;
 };
 /**
- * The string arm stays at base values only: `(string & {})` admits every
+ * The string arm stays at base values only: `OpenStyleString` admits every
  * clause string, and structured clause completion comes from the object
  * form's keys (and the language-service plugin for strings). A per-prop
  * `${modifier}:` prefix union used to ride along for first-prefix
  * completion; it multiplied across the whole component prop graph and the
  * object form made it redundant.
  */
-export type FlatStyleValue<T> = T | FlatStyleObject<T> | (string & {});
+export type FlatStyleValue<T> = T | (StyleValueSyntaxSetting extends 'string' ? never : FlatStyleObject<T>) | OpenStyleString;
 export type WithThemeValues<T extends object> = {
-    [K in keyof T]: (ThemeValueGet<K> extends never ? K extends keyof ExtraBaseProps ? T[K] : FlatStyleValue<T[K] | 'unset'> : FlatStyleValue<GetThemeValueForKey<K> | Exclude<T[K], string> | 'unset'>) | (K extends SafeAreaValueKeys ? 'safe' : never);
+    -readonly [K in keyof T]: (ThemeValueGet<K> extends never ? K extends keyof ExtraBaseProps ? T[K] : FlatStyleValue<T[K] | 'unset'> : FlatStyleValue<GetThemeValueForKey<K> | Exclude<T[K], string> | 'unset'>) | (K extends SafeAreaValueKeys ? 'safe' : never);
 };
 export type NarrowShorthands = Narrow<Shorthands>;
 export type Longhands = NarrowShorthands[keyof NarrowShorthands];
@@ -1152,7 +1265,7 @@ type MaybeOmitLonghands<A> = OnlyShorthandStyleProps extends true ? Omit<A, Shor
 export type WithFlatVariantValues<Variants> = {
     [Key in keyof Variants]?: FlatStyleValue<NonNullable<Variants[Key]>>;
 };
-export type WithThemeAndShorthands<A extends object, Variants = {}> = OnlyAllowShorthands extends true ? WithThemeValues<MaybeOmitLonghands<Omit<A, Longhands>>> & WithFlatVariantValues<Variants> & WithShorthands<WithThemeValues<A>> : WithThemeValues<MaybeOmitLonghands<A>> & WithFlatVariantValues<Variants> & WithShorthands<WithThemeValues<A>>;
+export type WithThemeAndShorthands<A extends object, Variants = {}> = OnlyAllowShorthands extends true ? WithThemeValues<MaybeOmitLonghands<Omit<A, Longhands | keyof Variants>>> & WithFlatVariantValues<Variants> & WithShorthands<WithThemeValues<A>> : WithThemeValues<MaybeOmitLonghands<Omit<A, keyof Variants>>> & WithFlatVariantValues<Variants> & WithShorthands<WithThemeValues<A>>;
 /**
  * Base style-only props (no media, pseudo):
  */
@@ -1161,13 +1274,13 @@ type PxOrPct = Px | `${string | number}%`;
 type TwoValueTransformOrigin = `${PxOrPct | 'left' | 'center' | 'right'} ${PxOrPct | 'top' | 'center' | 'bottom'}`;
 export interface TransformStyleProps {
     /**
-     * Maps to translateX
+     * Maps to translateX. A percent string is relative to the element's own width.
      */
-    x?: number;
+    x?: number | `${number}%`;
     /**
-     * Maps to translateY
+     * Maps to translateY. A percent string is relative to the element's own height.
      */
-    y?: number;
+    y?: number | `${number}%`;
     perspective?: number;
     scale?: number;
     scaleX?: number;
@@ -1244,15 +1357,18 @@ interface ExtraStyleProps {
      * backgroundColor and drops url()/gradient/multi-part values it can't express.
      *
      * The v6 shorthands map `bg` here rather than to `backgroundColor`, because
-     * the background family splits a value like `url(x.png) color1` across
+     * the background family splits a value like `url(x.png) color-1` across
      * backgroundImage and backgroundColor. Color tokens lead the union so `bg`
-     * completes them; `Properties['background']` keeps the CSS shorthand
-     * keywords. Adding this key to `ColorKeys` instead would erase that second
-     * arm, since that path runs the value type through `Exclude<T[K], string>`.
+     * completes them; the CSS keywords and the function forms (`url()`,
+     * gradients) keep the CSS shorthand, and multi-part values reach
+     * `OpenStyleString` through their spaces. Adding this key to `ColorKeys`
+     * instead would erase the CSS arm, since that path runs the value type
+     * through `Exclude<T[K], string>`.
      */
-    background?: ColorTokens | Properties['background'];
+    background?: ColorTokens | Exclude<ThemeValueFallbackColor, number> | 'none' | 'inherit' | 'initial' | 'unset' | 'revert' | `${string}(${string})` | OpenStyleString;
     /**
-     * Web-only style property. Will be omitted on native.
+     * css background image. native maps supported linear gradients to
+     * experimental_backgroundImage and drops values it cannot represent.
      */
     backgroundImage?: Properties['backgroundImage'];
     /**
@@ -1306,6 +1422,8 @@ interface ExtraStyleProps {
      * Web-only style property. Will be omitted on native.
      */
     resize?: Properties['resize'];
+    /** react-native stops at visible/hidden/scroll; web also accepts auto and clip */
+    overflow?: 'visible' | 'hidden' | 'scroll' | 'auto' | 'clip';
     /**
      * Web-only style property. Will be omitted on native.
      */
@@ -1544,6 +1662,7 @@ interface ExtraStyleProps {
     borderInlineWidth?: SpaceTokens | number;
     borderInlineStartWidth?: SpaceTokens | number;
     borderInlineEndWidth?: SpaceTokens | number;
+    borderStyle?: ViewStyle['borderStyle'] | 'none' | 'hidden';
     borderBlockStyle?: ViewStyle['borderStyle'];
     borderBlockStartStyle?: ViewStyle['borderStyle'];
     borderBlockEndStyle?: ViewStyle['borderStyle'];
@@ -1582,11 +1701,6 @@ interface ExtraBaseProps {
      * See: https://tamagui.dev/docs/core/animations
      */
     transition?: TransitionProp | null;
-    /**
-     * Pass an array of strings containing the long style property names
-     * which will be exclusively transitioned.
-     */
-    animateOnly?: string[];
     /**
      * If you'd like this component to not attach to the nearest parent AnimatePresence,
      * set this to `false` and it will pass through to the next animated child.
@@ -1604,12 +1718,20 @@ interface ExtraBaseProps {
     passThrough?: boolean;
 }
 interface ExtendedBaseProps extends TransformStyleProps, ExtendBaseTextProps, ExtendBaseStackProps, ExtraStyleProps, ExtraBaseProps {
-    display?: 'inherit' | 'none' | 'inline' | 'block' | 'contents' | 'flex' | 'inline-flex';
+    display?: 'inherit' | 'none' | 'inline' | 'block' | 'inline-block' | 'contents' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid';
     position?: 'absolute' | 'relative' | 'fixed' | 'static' | 'sticky';
 }
-export interface StackStyleBase extends Omit<ViewStyle, keyof ExtendedBaseProps | 'elevation'>, ExtendedBaseProps {
+export interface StackStyleBase extends Omit<ViewStyle, keyof ExtendedBaseProps | 'elevation'>, ExtendedBaseProps, Omit<UnprefixedCSSProperties, keyof ViewStyle | keyof ExtendedBaseProps | keyof TamaguiComponentPropsBaseBase> {
 }
-export interface TextStylePropsBase extends Omit<RNTextStyle, keyof ExtendedBaseProps>, ExtendedBaseProps {
+export interface TextStylePropsBase extends Omit<RNTextStyle, keyof ExtendedBaseProps | 'fontVariant' | 'lineHeight' | 'includeFontPadding'>, ExtendedBaseProps, Omit<UnprefixedCSSProperties, keyof RNTextStyle | keyof ExtendedBaseProps | keyof TamaguiComponentPropsBaseBase | 'textShadow' | 'textDecoration' | 'font'> {
+    lineHeight?: number | Px | `${number}`;
+    /**
+     * react-native types this as a mutable `FontVariant[]`, which an `as const` variant
+     * definition can't satisfy — and a variants object that misses its constraint is
+     * silently discarded whole, taking every variant on the component with it (#2787).
+     * react-native types `transform` as readonly for the same reason.
+     */
+    fontVariant?: readonly FontVariant[];
     ellipsis?: boolean;
     numberOfLines?: number;
     textDecorationDistance?: number;
@@ -1627,17 +1749,16 @@ export interface TextStylePropsBase extends Omit<RNTextStyle, keyof ExtendedBase
      */
     textDecoration?: string;
     /**
-     * CSS font shorthand string ("italic bold 16px/1.5 Inter").
-     * Splits by the CSS micro-syntax; ambiguous forms stay unparsed.
+     * css font shorthand string, browser-only and dropped on native.
      */
     font?: string;
 }
 type LooseCombinedObjects<A extends object, B extends object> = A | B | (A & B);
-export interface StackNonStyleProps extends Omit<ViewProps, 'hitSlop' | 'pointerEvents' | 'display' | 'children' | keyof TamaguiComponentPropsBaseBase | RNOnlyProps | keyof ExtendBaseStackProps | 'style' | 'onFocus' | 'onBlur' | 'onPointerCancel' | 'onPointerDown' | 'onPointerMove' | 'onPointerUp'>, ExtendBaseStackProps, TamaguiComponentPropsBase {
+export interface StackNonStyleProps extends Omit<ViewProps, 'hitSlop' | 'pointerEvents' | 'display' | 'children' | keyof TamaguiComponentPropsBase | RNOnlyProps | keyof ExtendBaseStackProps | 'style' | 'onFocus' | 'onBlur' | 'onPointerCancel' | 'onPointerDown' | 'onPointerMove' | 'onPointerUp'>, ExtendBaseStackProps, TamaguiComponentPropsBase {
     style?: StyleProp<LooseCombinedObjects<React.CSSProperties, ViewStyle>>;
 }
 export type StackStyle = WithThemeAndShorthands<StackStyleBase>;
-export interface TextNonStyleProps extends Omit<ReactTextProps, 'children' | keyof WebOnlyPressEvents | RNOnlyProps | keyof ExtendBaseTextProps | 'style' | 'selectable' | 'numberOfLines' | 'pointerEvents'>, ExtendBaseTextProps, TamaguiComponentPropsBase {
+export interface TextNonStyleProps extends Omit<ReactTextProps, 'children' | keyof TamaguiComponentPropsBase | RNOnlyProps | keyof ExtendBaseTextProps | 'style' | 'selectable' | 'numberOfLines' | 'pointerEvents'>, ExtendBaseTextProps, TamaguiComponentPropsBase {
     style?: StyleProp<LooseCombinedObjects<React.CSSProperties, RNTextStyle>>;
 }
 export type TextStyle = WithThemeAndShorthands<TextStylePropsBase>;
@@ -1652,7 +1773,7 @@ export type StyledHOCOptions = {
     staticConfig?: Partial<StaticConfig>;
 };
 export type StyledHOCMergedProps<Props, CustomProps> = keyof CustomProps extends never ? Props : Omit<Props, keyof CustomProps> & CustomProps;
-export type GetFinalProps<NonStyleProps, StylePropsBase, Variants> = Omit<NonStyleProps, keyof StylePropsBase | keyof Variants> & (StylePropsBase extends object ? WithThemeAndShorthands<StylePropsBase, Variants> : {});
+export type GetFinalProps<NonStyleProps, StylePropsBase, Variants> = Omit<NonStyleProps, keyof Variants> & (StylePropsBase extends object ? Omit<WithThemeAndShorthands<StylePropsBase, Variants>, Exclude<keyof NonStyleProps, keyof Variants>> : {});
 export type TamaguiComponent<Props = any, Ref = any, NonStyledProps = {}, BaseStyles extends object = {}, Variants = {}, ParentStaticProperties = {}> = FunctionComponent<(Props extends TamaDefer ? GetFinalProps<NonStyledProps, BaseStyles, Variants> : Props) & {
     ref?: ReactRef<Ref>;
 }> & StaticComponentObject<Props, Ref, NonStyledProps, BaseStyles, Variants, ParentStaticProperties> & Omit<ParentStaticProperties, 'staticConfig'> & {
@@ -1729,6 +1850,7 @@ export type GetStyleState = {
     conf: TamaguiInternalConfig;
     avoidMergeTransform?: boolean;
     fontFamily?: string;
+    nativeLineHeight?: unknown;
     debug?: DebugProp;
     transformAccumulator?: TransformAccumulator;
     flatRulesToInsert?: RulesToInsert;
@@ -1813,6 +1935,7 @@ export type StaticConfigPublic = {
     contextProps?: readonly string[];
 };
 type StaticConfigBase = StaticConfigPublic & {
+    isDOM?: boolean;
     Component?: FunctionComponent<any> & StaticComponentObject<any, any, any, any, any, any>;
     displayName?: string;
     baseStyle?: Record<string, any>;
@@ -1895,6 +2018,7 @@ export type StyledDynamicEnv = {
     theme: Themes extends {
         [key: string]: infer B;
     } ? B : unknown;
+    sizing: GenericSizing;
     fontFamily?: FontFamilyTokens;
     font?: Font;
 };
@@ -1918,20 +2042,32 @@ export type StyledDynamic<Val = any, Output extends object = Record<string, any>
 export type StyledResolver<Props = Record<string, any>, Output extends object = Record<string, any>> = (props: Props, env: StyledDynamicEnv) => Partial<Output> | null | undefined;
 export type VariantDefinitions<Parent extends StylableComponent = TamaguiComponent, StaticConfig extends StaticConfigPublic = Parent extends {
     __tama: [any, any, any, any, any, infer S];
-} ? S : {}, MyProps extends object = Partial<GetVariantProps<Parent, StaticConfig['isText'] extends true ? true : StaticConfig['isInput'] extends true ? true : false>>, Val = any> = VariantDefinitionFromProps<MyProps, Val> & {
+} ? S : {}, MyProps extends object = VariantStyleProps<Parent, StaticConfig>, Val = any> = VariantDefinitionFromProps<MyProps, Val> & {
     _isEmpty?: 1;
 };
+export type InputColorStyleProps = {
+    placeholderTextColor?: ColorStyleProp;
+    selectionColor?: ColorStyleProp;
+    cursorColor?: ColorStyleProp;
+    selectionHandleColor?: ColorStyleProp;
+};
+export type VariantStyleProps<Parent extends StylableComponent, StaticConfig extends StaticConfigPublic> = Partial<GetVariantProps<Parent, StaticConfig['isText'] extends true ? true : StaticConfig['isInput'] extends true ? true : false>> & (GetStaticConfig<Parent, StaticConfig>['isInput'] extends true ? InputColorStyleProps : {});
+/**
+ * the exact-key check styled() runs on the variants it infers: a key that is
+ * not a style, shorthand, aria/data attribute, or variant of the component is
+ * `never`, since inference alone never flags extra keys.
+ */
+export type StyleOnlyVariants<Variants, AllowedKeys extends PropertyKey> = {
+    [Name in keyof Variants]: Variants[Name] extends StyledDynamic<any, any> ? Variants[Name] : {
+        [Value in keyof Variants[Name]]: Variants[Name][Value] extends object ? {
+            [Key in keyof Variants[Name][Value]]: Key extends AllowedKeys | keyof Variants | `aria-${string}` | `data-${string}` ? Variants[Name][Value][Key] : never;
+        } : Variants[Name][Value];
+    };
+};
 export type StaticStyleInput = string;
 export type GetVariantProps<A extends StylableComponent, IsText extends boolean | undefined> = A extends {
-    __tama: [
-        infer Props,
-        any,
-        infer NonStyledProps,
-        infer BaseStyles,
-        infer VariantProps,
-        any
-    ];
-} ? Props extends TamaDefer ? GetFinalProps<NonStyledProps, BaseStyles, VariantProps> : Props : WithThemeAndShorthands<IsText extends true ? TextStylePropsBase : StackStyleBase>;
+    __tama: [any, any, any, infer BaseStyles, infer VariantProps, any];
+} ? BaseStyles extends object ? WithThemeAndShorthands<BaseStyles, VariantProps> : {} : WithThemeAndShorthands<IsText extends true ? TextStylePropsBase : StackStyleBase>;
 export type VariantDefinitionFromProps<MyProps, Val> = MyProps extends object ? {
     [propName: string]: StyledDynamic<any, MyProps> | {
         [Key in string | number | 'true' | 'false']?: MyProps | StaticStyleInput;
@@ -1965,6 +2101,7 @@ export type SplitStyleProps = {
     canPlatformPseudo?: boolean;
     isAnimated: boolean;
     isExiting?: boolean;
+    prevStyle?: Record<string, any> | null;
 };
 export interface PresenceContextProps {
     id: string;
@@ -2023,6 +2160,18 @@ type AnimationDriverBase<A extends AnimationConfig = AnimationConfig> = {
     animations: A;
     View?: any;
     Text?: any;
+    useTextMetrics?: (input: {
+        inheritedText?: AnimatedTextChannel | null;
+        lineHeight?: NativeTextMetrics['lineHeight'];
+    }) => {
+        textChannel: AnimatedTextChannel | null;
+    } & ({
+        style: null;
+    } | {
+        style: Record<string, unknown>;
+        Text: ComponentType<any>;
+        TextInput: ComponentType<any>;
+    });
 };
 export type AnimationDriver<A extends AnimationConfig = AnimationConfig> = AnimationDriverBase<A> & {
     /** When true, this is a stub driver with no real animation support */
@@ -2045,9 +2194,10 @@ export type AnimationDriverStub<A extends AnimationConfig = AnimationConfig> = A
 };
 export type AnimationDriverLike<A extends AnimationConfig = AnimationConfig> = AnimationDriver<A> | AnimationDriverStub<A>;
 export type UseAnimationProps = TamaguiComponentPropsBase & Record<string, any>;
-type UseStyleListener = (nextStyle: Record<string, unknown>, effectiveTransition?: TransitionProp | null, pseudoActive?: boolean) => void;
+type UseStyleListener = (nextStyle: Record<string, unknown>, effectiveTransition?: TransitionProp | null, pseudoActive?: boolean, nativeTextMetrics?: NativeTextMetrics) => void;
 export type UseStyleEmitter = (cb: UseStyleListener) => void;
 export type UseAnimationHook = (props: {
+    inheritedText?: AnimatedTextChannel | null;
     style: Record<string, any>;
     props: Record<string, any>;
     styleState?: GetStyleResult | null;
@@ -2064,18 +2214,24 @@ export type UseAnimationHook = (props: {
     onTransition?: OnTransition;
     delay?: number;
 }) => null | {
+    textChannel?: AnimatedTextChannel | null;
     style?: unknown;
     className?: string;
     ref?: any;
 };
-export type GestureReponderEvent = Exclude<View['props']['onResponderMove'], void> extends (event: infer Event) => void ? Event : never;
+export type GestureReponderEvent = Exclude<ViewProps['onResponderMove'], void> extends (event: infer Event) => void ? Event : never;
 export type RulesToInsert = Record<string, StyleObject>;
 export type GetStyleResult = {
-    style: ViewStyle | null;
+    style: {
+        -readonly [K in keyof ViewStyle]: ViewStyle[K];
+    } | null;
     classNames: ClassNamesObject;
     rulesToInsert: RulesToInsert;
-    viewProps: (StackNonStyleProps & StackStyle) & Record<string, any>;
+    viewProps: {
+        -readonly [K in keyof (StackNonStyleProps & StackStyle)]: (StackNonStyleProps & StackStyle)[K];
+    } & Record<string, any>;
     fontFamily: string | undefined;
+    nativeTextMetrics?: NativeTextMetrics;
     space?: any;
     hasMedia: boolean | Set<string>;
     pseudoGroups?: Set<string>;
@@ -2118,7 +2274,7 @@ export interface RecursiveArray<T> extends Array<T | ReadonlyArray<T> | Recursiv
 export type RegisteredStyle<T> = number & {
     __registeredStyleBrand: T;
 };
-export type StyleProp<T> = T | StylePiece | RegisteredStyle<T> | RecursiveArray<T | StylePiece | RegisteredStyle<T> | Falsy> | Falsy;
+export type StyleProp<T> = T | StylePiece | RegisteredStyle<T> | ReadonlyArray<StyleProp<T>> | Falsy | void;
 export type FillInFont<A extends GenericFont, DefaultKeys extends string | number> = {
     family: string;
     lineHeight: FillInFontValues<A, 'lineHeight', DefaultKeys>;