@tamagui/core 1.0.1-beta.149 → 1.0.1-beta.150

package/dist/cjs/types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/types.tsx"],
-  "sourcesContent": ["// TODO split this into own package @tamagui/types to share with animations packages\n\nimport { Properties } from 'csstype'\nimport React from 'react'\nimport {\n  GestureResponderEvent,\n  Image,\n  PressableProps,\n  TextProps as ReactTextProps,\n  Text,\n  TextInput,\n  TextStyle,\n  View,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\n\nimport { Variable } from './createVariable'\nimport { ResolveVariableTypes } from './helpers/createPropMapper'\nimport { RNWTextProps, RNWViewProps } from './types-rnw'\nimport { FontLanguageProps } from './views/FontLanguage.types'\nimport { ThemeProviderProps } from './views/ThemeProvider'\n\nexport type SpaceDirection = 'vertical' | 'horizontal' | 'both'\n\nexport type TamaguiElement = HTMLElement | View\n\nexport type DebugProp = boolean | 'break' | 'verbose'\n\n//\n// base props that are accepted by createComponent (additional to react-native-web)\n//\nexport type TamaguiComponentPropsBase = {\n  hitSlop?: PressableProps['hitSlop']\n  asChild?: boolean\n  space?: SpaceTokens | null\n  spaceDirection?: SpaceDirection\n  separator?: React.ReactNode\n  dangerouslySetInnerHTML?: { __html: string }\n  animation?: AnimationProp\n  animateOnly?: string[]\n  children?: any | any[]\n  debug?: DebugProp\n  disabled?: boolean\n  className?: string\n  themeShallow?: boolean\n  id?: string\n  tag?: string\n  theme?: ThemeName | null\n  componentName?: string\n  forceStyle?: 'hover' | 'press' | 'focus'\n  onHoverIn?: (e: MouseEvent) => any\n  onHoverOut?: (e: MouseEvent) => any\n  onPress?: (e: GestureResponderEvent) => any\n  onPressIn?: (e: GestureResponderEvent) => any\n  onPressOut?: (e: GestureResponderEvent) => any\n  // WEB ONLY\n  onMouseEnter?: (e: MouseEvent) => any\n  onMouseLeave?: (e: MouseEvent) => any\n  onMouseDown?: (e: MouseEvent) => any\n  // WEB STYLES\n  userSelect?: Properties['userSelect']\n  cursor?: Properties['cursor']\n}\n\nexport type ReactComponentWithRef<Props, Ref> = React.ForwardRefExoticComponent<\n  Props & React.RefAttributes<Ref>\n>\n\nexport type ConfigListener = (conf: TamaguiInternalConfig) => void\n\n// to prevent things from going circular, hoisting some types in this file\n// to generally order them as building up towards TamaguiConfig\n\nexport type VariableVal = number | string | Variable\nexport type VariableColorVal = string | Variable\n\ntype GenericKey = string | number | symbol\n\nexport interface CreateTokens<Val extends VariableVal = VariableVal> {\n  color: { [key: GenericKey]: Val }\n  space: { [key: GenericKey]: Val }\n  size: { [key: GenericKey]: Val }\n  radius: { [key: GenericKey]: Val }\n  zIndex: { [key: GenericKey]: Val }\n}\n\nexport type TamaguiBaseTheme = {\n  // defined for our tamagui kit , we could do this inside `tamagui`\n  // but maybe helpful to have some sort of universally shared things +\n  // + enforce if they want their own, redefine in their design sys\n  background: VariableColorVal\n  backgroundHover: VariableColorVal\n  backgroundPress: VariableColorVal\n  backgroundFocus: VariableColorVal\n  color: VariableColorVal\n  colorHover: VariableColorVal\n  colorPress: VariableColorVal\n  colorFocus: VariableColorVal\n  borderColor: VariableColorVal\n  borderColorHover: VariableColorVal\n  borderColorPress: VariableColorVal\n  borderColorFocus: VariableColorVal\n  shadowColor: VariableColorVal\n  shadowColorHover: VariableColorVal\n  shadowColorPress: VariableColorVal\n  shadowColorFocus: VariableColorVal\n}\n\ntype GenericTokens = CreateTokens\ntype GenericThemes = {\n  [key: string]:\n    | Partial<TamaguiBaseTheme> & {\n        [key: string]: VariableVal\n      }\n}\n\ntype GenericShorthands = {}\n\n// sm: { minWidth: 100 }\ntype GenericMedia = {\n  [key: string]: {\n    [key: string]: number | string\n  }\n}\n\nexport type GenericFonts = Record<string, GenericFont>\n\ntype GenericAnimations = {\n  [key: string]:\n    | string\n    | {\n        [key: string]: any\n      }\n}\n\n// this is the \"main\" typed object, which users re-define\n// (internal) keep all types directly on this object and reference them from elsewhere\n//\n// const config = createTamagui(...)\n// type MyConfig = typeof config\n// declare module 'tamagui' {\n//   export interface TamaguiCustomConfig extends MyConfig {}\n// }\n// now your whole app/kit should be typed correctly\n//\nexport interface TamaguiCustomConfig {}\n\nexport interface TamaguiConfig\n  extends Omit<GenericTamaguiConfig, keyof TamaguiCustomConfig>,\n    TamaguiCustomConfig {}\n\nexport type CreateTamaguiConfig<\n  A extends GenericTokens,\n  B extends GenericThemes,\n  C extends GenericShorthands = GenericShorthands,\n  D extends GenericMedia = GenericMedia,\n  E extends GenericAnimations = GenericAnimations,\n  F extends GenericFonts = GenericFonts\n> = {\n  fonts: RemoveLanguagePostfixes<F>\n  fontLanguages: GetLanguagePostfixes<F> extends never ? string[] : GetLanguagePostfixes<F>[]\n  tokens: A\n  themes: B\n  shorthands: C\n  media: D\n  animations: AnimationDriver<E>\n}\n\ntype GetLanguagePostfix<Set> = Set extends string\n  ? Set extends `${string}_${infer Postfix}`\n    ? Postfix\n    : never\n  : never\n\ntype OmitLanguagePostfix<Set> = Set extends string\n  ? Set extends `${infer Prefix}_${string}`\n    ? Prefix\n    : Set\n  : never\n\ntype RemoveLanguagePostfixes<F extends GenericFonts> = {\n  [Key in OmitLanguagePostfix<keyof F>]: F[Key]\n}\n\ntype GetLanguagePostfixes<F extends GenericFonts> = GetLanguagePostfix<keyof F>\n\n// test RemoveLanguagePostfixes\n// type x = CreateTamaguiConfig<any, any, any, any, any, {\n//   body: any,\n//   body_en: any\n// }>['fonts']\n\ntype ConfProps<\n  A extends GenericTokens,\n  B extends GenericThemes,\n  C extends GenericShorthands = GenericShorthands,\n  D extends GenericMedia = GenericMedia,\n  E extends GenericAnimations = GenericAnimations,\n  F extends GenericFonts = GenericFonts\n> = {\n  tokens: A\n  themes: B\n  shorthands?: C\n  media?: D\n  animations?: AnimationDriver<E>\n  fonts: F\n}\n\nexport type InferTamaguiConfig<Conf> = Conf extends ConfProps<\n  infer A,\n  infer B,\n  infer C,\n  infer D,\n  infer E,\n  infer F\n>\n  ? TamaguiInternalConfig<A, B, C, D, E, F>\n  : unknown\n\n// for use in creation functions so it doesnt get overwrtitten\nexport type GenericTamaguiConfig = CreateTamaguiConfig<\n  GenericTokens,\n  GenericThemes,\n  GenericShorthands,\n  GenericMedia,\n  GenericAnimations,\n  GenericFonts\n>\n\n// since TamaguiConfig will be re-declared, these will all be typed globally\nexport type ThemeObject = TamaguiConfig['themes'][keyof TamaguiConfig['themes']]\nexport type Tokens = TamaguiConfig['tokens']\nexport type Shorthands = TamaguiConfig['shorthands']\nexport type Media = TamaguiConfig['media']\nexport type Themes = TamaguiConfig['themes']\nexport type ThemeName = GetAltThemeNames<keyof Themes>\nexport type ThemeKeys = keyof ThemeObject\nexport type ThemeTokens = `$${ThemeKeys}`\nexport type AnimationKeys = Omit<GetAnimationKeys<TamaguiConfig>, number>\nexport type FontLanguages = ArrayIntersection<TamaguiConfig['fontLanguages']>\n\ntype ArrayIntersection<A extends any[]> = A[keyof A]\n\ntype GetAltThemeNames<S> = (S extends `${string}_${infer Alt}` ? GetAltThemeNames<Alt> : S) | S\n\nexport type SpacerProps = Omit<StackProps, 'flex' | 'direction' | 'size'> & {\n  size?: number | SpaceTokens | null\n  flex?: boolean | number\n  direction?: SpaceDirection\n}\n\nexport type CreateTamaguiProps = {\n  shorthands?: GenericTamaguiConfig['shorthands']\n  media?: GenericTamaguiConfig['media']\n  animations?: AnimationDriver<any>\n  fonts: GenericTamaguiConfig['fonts']\n  tokens: GenericTamaguiConfig['tokens']\n  themes: {\n    [key: string]: {\n      [key: string]: string | number | Variable\n    }\n  }\n\n  defaultTheme?: string\n  disableRootThemeClass?: boolean\n\n  defaultProps?: Record<string, any> & {\n    Stack?: StackProps\n    Text?: TextProps\n    Spacer?: SpacerProps\n  }\n\n  // for the first render, determines which media queries are true\n  // useful for SSR\n  mediaQueryDefaultActive?: Record<MediaQueryKey, boolean>\n\n  // what's between each CSS style rule, set to \"\\n\" to be easier to read\n  // defaults: \"\\n\" when NODE_ENV=development, \"\" otherwise\n  cssStyleSeparator?: string\n\n  // (Advanced)\n  // on the web, tamagui treats `dark` and `light` themes as special and\n  // generates extra CSS to avoid having to re-render the entire page.\n  // this CSS relies on specificity hacks that multiply by your sub-themes.\n  // this sets the maxiumum number of nested dark/light themes you can do\n  // defaults to 3 for a balance, but can be higher if you nest them deeply.\n  maxDarkLightNesting?: number\n\n  // adds @media(prefers-color-scheme) media queries for dark/light\n  shouldAddPrefersColorThemes?: boolean\n\n  // only if you put the theme classname on the html element we have to generate diff\n  themeClassNameOnRoot?: boolean\n}\n\n// this is the config generated via createTamagui()\nexport type TamaguiInternalConfig<\n  A extends GenericTokens = GenericTokens,\n  B extends GenericThemes = GenericThemes,\n  C extends GenericShorthands = GenericShorthands,\n  D extends GenericMedia = GenericMedia,\n  E extends GenericAnimations = GenericAnimations,\n  F extends GenericFonts = GenericFonts\n> = Omit<CreateTamaguiProps, keyof GenericTamaguiConfig> &\n  CreateTamaguiConfig<A, B, C, D, E, F> & {\n    // TODO need to make it this but this breaks types, revisit\n    // animations: E //AnimationDriver<E>\n    // with $ prefixes for fast lookups (one time cost at startup vs every render)\n    tokensParsed: CreateTokens<Variable>\n    themeConfig: any\n    fontsParsed: GenericFonts\n    getCSS: () => string\n    parsed: boolean\n    inverseShorthands: Record<string, string>\n\n    // just passed in from CreateTamaguiProps\n    themeClassNameOnRoot?: boolean\n  }\n\nexport type GetAnimationKeys<A extends GenericTamaguiConfig> = keyof A['animations']['animations']\n\n// prevents const intersections from being clobbered into string, keeping the consts\nexport type UnionableString = string & {}\nexport type UnionableNumber = number & {}\nexport type PropTypes<A extends TamaguiComponent> = A extends React.FunctionComponent<infer Props>\n  ? Props\n  : unknown\n\nexport type GenericFont<Key extends number | string = number | string> = {\n  size: { [key in Key]: number | Variable }\n  lineHeight: Partial<{ [key in Key]: number | Variable }>\n  letterSpacing: Partial<{ [key in Key]: number | Variable }>\n  weight: Partial<{ [key in Key]: number | string | Variable }>\n  family: string | Variable\n  style?: Partial<{ [key in Key]: TextStyle['fontStyle'] | Variable }>\n  transform?: Partial<{ [key in Key]: TextStyle['textTransform'] | Variable }>\n  color?: Partial<{ [key in Key]: string | Variable }>\n}\n\n// media\nexport type MediaQueryObject = { [key: string]: string | number | string }\nexport type MediaQueryKey = keyof Media\nexport type MediaPropKeys = `$${MediaQueryKey}`\nexport type MediaQueryState = { [key in MediaPropKeys]: boolean }\nexport type MediaProps<A> = {\n  [key in MediaPropKeys]?: A\n}\nexport type MediaQueries = {\n  [key in MediaQueryKey]: MediaQueryObject\n}\nexport type ConfigureMediaQueryOptions = {\n  queries?: MediaQueries\n  defaultActive?: Record<MediaQueryKey, boolean>\n}\n\nexport type TransformStyleProps = {\n  x?: number\n  y?: number\n  perspective?: number\n  scale?: number\n  scaleX?: number\n  scaleY?: number\n  skewX?: string\n  skewY?: string\n  matrix?: number[]\n  rotate?: string\n  rotateY?: string\n  rotateX?: string\n  rotateZ?: string\n}\n\n// createComponent props helpers\n\n// animation=\"bouncy\"\n// animation={['bouncy', {  }]}\n// { all: 'name' }\n\n// TODO can override for better types\nexport type AnimationConfigType = any\n\nexport type AnimationProp =\n  | AnimationKeys\n  | {\n      [key: string]:\n        | AnimationKeys\n        | {\n            type: AnimationKeys\n            [key: string]: any\n          }\n    }\n  | [\n      AnimationKeys,\n      {\n        [key: string]:\n          | AnimationKeys\n          | {\n              type?: AnimationKeys\n              [key: string]: any\n            }\n      }\n    ]\n\ntype GetTokenFontKeysFor<\n  A extends\n    | 'size'\n    | 'weight'\n    | 'letterSpacing'\n    | 'family'\n    | 'lineHeight'\n    | 'transform'\n    | 'style'\n    | 'color'\n> = keyof TamaguiConfig['fonts']['body'][A]\n\ntype GetTokenString<A> = A extends string | number ? `$${A}` : `$${string}`\n\n// base tokens\nexport type SizeTokens = GetTokenString<keyof Tokens['size']> | number\nexport type SpaceTokens = GetTokenString<keyof Tokens['space']> | number | boolean\nexport type ColorTokens =\n  | GetTokenString<keyof Tokens['color']>\n  | GetTokenString<keyof ThemeObject>\n  | CSSColorNames\nexport type ZIndexTokens = GetTokenString<keyof Tokens['zIndex']> | number\nexport type RadiusTokens = GetTokenString<keyof Tokens['radius']> | number\n\n// font tokens\nexport type FontTokens = GetTokenString<keyof TamaguiConfig['fonts']>\nexport type FontSizeTokens = GetTokenString<GetTokenFontKeysFor<'size'>> | number\nexport type FontLineHeightTokens = `$${GetTokenFontKeysFor<'lineHeight'>}` | number\nexport type FontWeightTokens =\n  | `$${GetTokenFontKeysFor<'weight'>}`\n  | `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00`\nexport type FontColorTokens = `$${GetTokenFontKeysFor<'color'>}` | number\nexport type FontLetterSpacingTokens = `$${GetTokenFontKeysFor<'letterSpacing'>}` | number\nexport type FontStyleTokens = `$${GetTokenFontKeysFor<'style'>}` | TextStyle['fontStyle']\nexport type FontTransformTokens =\n  | `$${GetTokenFontKeysFor<'transform'>}`\n  | TextStyle['textTransform']\n\n//\n// adds theme short values to relevant props\n//\n\nexport type ThemeValueByCategory<K extends string | number | symbol> = K extends 'theme'\n  ? ThemeTokens\n  : K extends 'size'\n  ? SizeTokens\n  : K extends 'font'\n  ? FontTokens\n  : K extends 'fontSize'\n  ? FontSizeTokens\n  : K extends 'space'\n  ? SpaceTokens\n  : K extends 'color'\n  ? ColorTokens\n  : K extends 'zIndex'\n  ? ZIndexTokens\n  : K extends 'lineHeight'\n  ? FontLineHeightTokens\n  : K extends 'fontWeight'\n  ? FontWeightTokens\n  : K extends 'letterSpacing'\n  ? FontLetterSpacingTokens\n  : {}\n\ntype FontKeys = 'fontFamily'\ntype FontSizeKeys = 'fontSize'\ntype FontWeightKeys = 'fontWeight'\ntype FontLetterSpacingKeys = 'letterSpacing'\ntype LineHeightKeys = 'lineHeight'\ntype ZIndexKeys = 'zIndex'\n\nexport type ThemeValueGet<K extends string | number | symbol> = K extends 'theme'\n  ? ThemeTokens\n  : K extends SizeKeys\n  ? SizeTokens\n  : K extends FontKeys\n  ? FontTokens\n  : K extends FontSizeKeys\n  ? FontSizeTokens\n  : K extends SpaceKeys\n  ? K extends 'shadowOffset'\n    ? { width: SpaceTokens; height: SpaceTokens }\n    : SpaceTokens\n  : K extends ColorKeys\n  ? ColorTokens\n  : K extends ZIndexKeys\n  ? ZIndexTokens\n  : K extends LineHeightKeys\n  ? FontLineHeightTokens\n  : K extends FontWeightKeys\n  ? FontWeightTokens\n  : K extends FontLetterSpacingKeys\n  ? FontLetterSpacingTokens\n  : never\n\nexport type ThemeValueFallback = UnionableString | Variable\n\nexport type WithThemeValues<T extends object> = {\n  [K in keyof T]: ThemeValueGet<K> extends never\n    ? T[K]\n    : ThemeValueGet<K> | Exclude<T[K], string> | ThemeValueFallback\n}\n\n// adds shorthand props\nexport type WithShorthands<StyleProps> = {\n  [Key in keyof Shorthands]?: Shorthands[Key] extends keyof StyleProps\n    ? StyleProps[Shorthands[Key]] | null\n    : undefined\n}\n\n// adds pseudo props\nexport type PseudoProps<A> = {\n  hoverStyle?: A | null\n  pressStyle?: A | null\n  focusStyle?: A | null\n  exitStyle?: A | null\n  enterStyle?: A | null\n}\n\nexport type PseudoPropKeys = keyof PseudoProps<any>\n\nexport type PseudoStyles = {\n  hoverStyle?: ViewStyle\n  pressStyle?: ViewStyle\n  focusStyle?: ViewStyle\n  enterStyle?: ViewStyle\n  exitStyle?: ViewStyle\n}\n\n//\n// add both theme and shorthands\n//\ntype WithThemeAndShorthands<A extends object> = WithThemeValues<A> &\n  WithShorthands<WithThemeValues<A>>\n\n//\n// combines all of theme, shorthands, pseudos...\n//\ntype WithThemeShorthandsAndPseudos<A extends object> =\n  | WithThemeAndShorthands<A> & PseudoProps<WithThemeAndShorthands<A>>\n\n//\n// ... media queries and animations\n//\ntype WithThemeShorthandsPseudosMediaAnimation<A extends object> = WithThemeShorthandsAndPseudos<A> &\n  MediaProps<WithThemeShorthandsAndPseudos<A>>\n\n//\n// Stack\n//\n\ntype WebOnlyStyleProps = {\n  // WEB ONLY\n  cursor?: string\n  // WEB ONLY\n  contain?: 'none' | 'strict' | 'content' | 'size' | 'layout' | 'paint' | string\n  // WEB ONLY values: inherit, inline, block, content\n  display?: 'inherit' | 'none' | 'inline' | 'block' | 'contents' | 'flex' | 'inline-flex'\n  // WEB ONLY pointerEvents can be a style prop\n  pointerEvents?: ViewProps['pointerEvents']\n}\n\nexport type StackStylePropsBase = Omit<ViewStyle, 'display' | 'backfaceVisibility' | 'elevation'> &\n  TransformStyleProps &\n  WebOnlyStyleProps\n\nexport type StackPropsBaseShared = Omit<ViewProps, 'display' | 'children'> &\n  RNWViewProps &\n  TamaguiComponentPropsBase\n\nexport type StackStyleProps = WithThemeShorthandsPseudosMediaAnimation<StackStylePropsBase>\nexport type StackPropsBase = StackPropsBaseShared & WithThemeAndShorthands<StackStylePropsBase>\nexport type StackProps = StackPropsBaseShared & StackStyleProps\n\nexport type GestureReponderEvent = Exclude<View['props']['onResponderMove'], void> extends (\n  event: infer Event\n) => void\n  ? Event\n  : never\n\n//\n// Text props\n//\n\nexport type TextStylePropsBase = Omit<TextStyle, 'display' | 'backfaceVisibility'> &\n  TransformStyleProps &\n  WebOnlyStyleProps & {\n    ellipse?: boolean\n    selectable?: boolean\n    textDecorationDistance?: number\n    textOverflow?: Properties['textOverflow']\n    whiteSpace?: Properties['whiteSpace']\n    wordWrap?: Properties['wordWrap']\n  }\n\nexport type TextPropsBaseShared = Omit<ReactTextProps, 'children'> &\n  RNWTextProps &\n  TamaguiComponentPropsBase\nexport type TextPropsBase = TextPropsBaseShared & WithThemeAndShorthands<TextStylePropsBase>\nexport type TextStyleProps = WithThemeShorthandsPseudosMediaAnimation<TextStylePropsBase>\nexport type TextProps = TextPropsBaseShared & TextStyleProps\n\n// could actually infer from parent\nexport type ViewOrTextProps = WithThemeShorthandsPseudosMediaAnimation<\n  Omit<TextStylePropsBase, keyof StackStylePropsBase> & StackStylePropsBase\n>\n\n//\n// StaticComponent\n//\n\nexport type TamaguiComponent<\n  Props = any,\n  Ref = any,\n  BaseProps = {},\n  VariantProps = {}\n> = ReactComponentWithRef<Props, Ref> & StaticComponentObject\n\ntype StaticComponentObject = {\n  staticConfig: StaticConfig\n  /*\n   * Only needed for more complex components\n   * If you create a styled frame component this is a HoC to extract\n   * styles from all parents.\n   */\n  extractable: <X>(a: X, opts?: Partial<StaticConfig>) => X\n}\n\nexport type TamaguiProviderProps = Partial<Omit<ThemeProviderProps, 'children'>> & {\n  config: TamaguiInternalConfig\n  disableInjectCSS?: boolean\n  children?: React.ReactNode\n}\n\nexport type PropMapper = (\n  key: string,\n  value: any,\n  theme: ThemeObject,\n  props: Record<string, any>,\n  state: Partial<SplitStyleState>,\n  languageContext?: FontLanguageProps,\n  avoidDefaultProps?: boolean,\n  debug?: DebugProp\n) => undefined | [string, any][]\n\nexport type StaticConfigParsed = StaticConfig & {\n  parsed: true\n  propMapper: PropMapper\n  variantsParsed?: {\n    [key: string]: {\n      [key: string]: any\n    }\n  }\n}\n\nexport type GenericVariantDefinitions = {\n  [key: string]: {\n    [key: string]:\n      | ((a: any, b: any) => any)\n      | {\n          [key: string]: any\n        }\n  }\n}\n\nexport type StaticConfig = {\n  Component?: React.FunctionComponent<any> & StaticComponentObject\n\n  variants?: GenericVariantDefinitions\n\n  /**\n   * Used for applying sub theme style\n   */\n  componentName?: string\n\n  /**\n   * (compiler) If you need to pass context or something, prevents from ever\n   * flattening. The 'jsx' option means it will never flatten. if you\n   * pass JSX as a children (if its purely string, it will still flatten).\n   */\n  neverFlatten?: boolean | 'jsx'\n\n  /**\n   * Determines ultimate output tag (Text vs View)\n   */\n  isText?: boolean\n\n  /**\n   * Attempts to attach focus styles at runtime (useful for native)\n   */\n  isInput?: boolean\n\n  /**\n   * React native web images need special handling for className support\n   */\n  isImage?: boolean\n\n  /**\n   * Which style keys are allowed to be extracted.\n   */\n  validStyles?: { [key: string]: boolean }\n\n  /**\n   * Same as React.defaultProps, be sure to sync\n   */\n  defaultProps: Record<string, any>\n\n  /**\n   * (compiler) If these props are encountered, bail on all optimization.\n   */\n  deoptProps?: Set<string>\n\n  /**\n   * (compiler) If these props are encountered, leave them un-extracted.\n   */\n  inlineProps?: Set<string>\n\n  /**\n   * (compiler) If not flattening, leave this prop as original value.\n   * Only applies to style attributes\n   */\n  inlineWhenUnflattened?: Set<string>\n\n  /**\n   * (compiler) A bit odd, only for more advanced heirarchies.\n   * Indicates that the component will set this prop so the\n   * static extraction can ensure it sets them to ={undefined}\n   * so they get overriddent. In the future, this can be smarter.\n   */\n  ensureOverriddenProp?: { [key: string]: boolean }\n\n  /**\n   * Auto-detected, but can ovverride. Wraps children to space them on top\n   */\n  isZStack?: boolean\n\n  /**\n   * Merges into defaultProps later on, used internally yonly\n   */\n  defaultVariants?: { [key: string]: any }\n\n  /**\n   * Auto-detect, but can ovverride, passes styles properly to react-native-web\n   */\n  isReactNativeWeb?: boolean\n\n  /**\n   * Used internally to keep reference to the original rnw component\n   */\n  reactNativeWebComponent?: any\n\n  /**\n   * Memoize the component\n   */\n  memo?: boolean\n\n  /**\n   * Auto-detect, but can ovverride, passes styles properly to react-native-web\n   */\n  isTamagui?: boolean\n\n  /**\n   * Used internally to handle extractable HoC separate\n   */\n  isExtractable?: boolean\n\n  /**\n   * Used insternally to attach default props to names\n   */\n  parentNames?: string[]\n}\n\n/**\n * --------------------------------------------\n *   variants\n * --------------------------------------------\n */\n\nexport type StylableComponent =\n  | TamaguiComponent\n  | React.Component\n  | React.ForwardRefExoticComponent<any>\n  | ReactComponentWithRef<any, any>\n  | (new (props: any) => any)\n  | typeof View\n  | typeof Text\n  | typeof TextInput\n  | typeof Image\n\nexport type GetStyledVariants<A extends TamaguiComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  any,\n  infer Variants\n>\n  ? Variants\n  : never\n\nexport type GetBaseProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  infer BaseProps\n>\n  ? BaseProps\n  : never\n\nexport type GetProps<A extends StylableComponent> = A extends TamaguiComponent<infer Props>\n  ? Props\n  : A extends React.Component<infer Props>\n  ? GetGenericComponentTamaguiProps<Props>\n  : A extends new (props: infer Props) => any\n  ? GetGenericComponentTamaguiProps<Props>\n  : {}\n\ntype GetGenericComponentTamaguiProps<P> = P &\n  Omit<'textAlign' extends keyof P ? TextProps : StackProps, keyof P>\n\nexport type SpreadKeys =\n  | '...fontSize'\n  | '...fontStyle'\n  | '...fontTransform'\n  | '...lineHeight'\n  | '...letterSpacing'\n  | '...size'\n  | '...space'\n  | '...color'\n  | '...zIndex'\n  | '...theme'\n  | '...radius'\n\nexport type VariantDefinitions<\n  Parent extends StylableComponent = TamaguiComponent,\n  MyProps extends Object = GetProps<Parent>,\n  Val = any\n> = VariantDefinitionFromProps<MyProps, Val>\n\nexport type VariantDefinitionFromProps<MyProps, Val> = MyProps extends Object\n  ? {\n      [propName: string]:\n        | VariantSpreadFunction<MyProps, Val>\n        | ({\n            [Key in SpreadKeys]?: Key extends '...fontSize'\n              ? FontSizeVariantSpreadFunction<MyProps>\n              : Key extends '...size'\n              ? SizeVariantSpreadFunction<MyProps>\n              : Key extends '...space'\n              ? SpaceVariantSpreadFunction<MyProps>\n              : Key extends '...color'\n              ? ColorVariantSpreadFunction<MyProps>\n              : Key extends '...lineHeight'\n              ? FontLineHeightVariantSpreadFunction<MyProps>\n              : Key extends '...fontTransform'\n              ? FontTransformVariantSpreadFunction<MyProps>\n              : Key extends '...fontStyle'\n              ? FontStyleVariantSpreadFunction<MyProps>\n              : Key extends '...letterSpacing'\n              ? FontLetterSpacingVariantSpreadFunction<MyProps>\n              : Key extends '...zIndex'\n              ? ZIndexVariantSpreadFunction<MyProps>\n              : Key extends '...radius'\n              ? RadiusVariantSpreadFunction<MyProps>\n              : Key extends '...theme'\n              ? ThemeVariantSpreadFunction<MyProps>\n              : never\n          } & {\n            [Key in string | number | 'true' | 'false']?:\n              | MyProps\n              | VariantSpreadFunction<MyProps, Val>\n          } & {\n            [Key in VariantTypeKeys]?: Key extends ':number'\n              ? VariantSpreadFunction<MyProps, number>\n              : Key extends ':boolean'\n              ? VariantSpreadFunction<MyProps, boolean>\n              : Key extends ':string'\n              ? VariantSpreadFunction<MyProps, string>\n              : never\n          })\n    }\n  : never\n\nexport type GenericStackVariants = VariantDefinitionFromProps<StackProps, any>\nexport type GenericTextVariants = VariantDefinitionFromProps<StackProps, any>\n\nexport type GetVariantProps<Variants> = {\n  [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<any, infer Val>\n    ? Val\n    : GetVariantValues<keyof Variants[Key]>\n}\n\nexport type VariantSpreadExtras<Props> = {\n  fonts: TamaguiConfig['fonts']\n  tokens: TamaguiConfig['tokens']\n  theme: Themes extends { [key: string]: infer B } ? B : unknown\n  props: Props\n}\n\ntype PropLike = { [key: string]: any }\n\nexport type VariantSpreadFunction<Props extends PropLike, Val = any> = (\n  val: Val,\n  config: VariantSpreadExtras<Props>\n) =>\n  | {\n      [Key in keyof Props]: Props[Key] | Variable\n    }\n  | null\n  | undefined\n\nexport type VariantTypeKeys = ':string' | ':boolean' | ':number'\n\nexport type GetVariantValues<Key> = Key extends `...${infer VariantSpread}`\n  ? ThemeValueByCategory<VariantSpread>\n  : Key extends 'true' | 'false'\n  ? boolean\n  : Key extends ':string'\n  ? string\n  : Key extends ':boolean'\n  ? boolean\n  : Key extends ':number'\n  ? number\n  : Key\n\nexport type FontSizeVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  FontSizeTokens\n>\nexport type SizeVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, SizeTokens>\nexport type SpaceVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, SpaceTokens>\nexport type ColorVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, ColorTokens>\nexport type FontLineHeightVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  FontLineHeightTokens\n>\nexport type FontLetterSpacingVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  FontLetterSpacingTokens\n>\nexport type FontStyleVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  FontStyleTokens\n>\nexport type FontTransformVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  FontTransformTokens\n>\nexport type ZIndexVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, ZIndexTokens>\nexport type RadiusVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, RadiusTokens>\nexport type ThemeVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, ThemeTokens>\n\n/**\n * --------------------------------------------\n *   end variants\n * --------------------------------------------\n */\n\ntype SizeKeys =\n  | 'width'\n  | 'height'\n  | 'minWidth'\n  | 'minHeight'\n  | 'maxWidth'\n  | 'maxHeight'\n  | 'shadowRadius'\n\ntype ColorKeys =\n  | 'color'\n  | 'backgroundColor'\n  | 'borderColor'\n  | 'borderBottomColor'\n  | 'borderTopColor'\n  | 'borderLeftColor'\n  | 'borderRightColor'\n  | 'shadowColor'\n  | 'textShadowColor'\n\ntype SpaceKeys =\n  | 'space'\n  | 'padding'\n  | 'paddingHorizontal'\n  | 'paddingVertical'\n  | 'paddingLeft'\n  | 'paddingTop'\n  | 'paddingBottom'\n  | 'paddingLeft'\n  | 'paddingRight'\n  | 'paddingEnd'\n  | 'paddingStart'\n  | 'margin'\n  | 'marginHorizontal'\n  | 'marginVertical'\n  | 'marginLeft'\n  | 'marginTop'\n  | 'marginBottom'\n  | 'marginLeft'\n  | 'marginRight'\n  | 'marginEnd'\n  | 'marginStart'\n  | 'x'\n  | 'y'\n  | 'scale'\n  | 'scaleX'\n  | 'scaleY'\n  | 'borderTopEndRadius'\n  | 'borderTopLeftRadius'\n  | 'borderTopRightRadius'\n  | 'borderTopStartRadius'\n  | 'borderBottomEndRadius'\n  | 'borderBottomLeftRadius'\n  | 'borderBottomRightRadius'\n  | 'borderBottomStartRadius'\n  | 'borderBottomWidth'\n  | 'borderLeftWidth'\n  | 'borderRadius'\n  | 'borderRightWidth'\n  | 'borderTopEndRadius'\n  | 'borderTopLeftRadius'\n  | 'borderTopRightRadius'\n  | 'borderEndWidth'\n  | 'borderStartWidth'\n  | 'borderTopStartRadius'\n  | 'borderTopWidth'\n  | 'borderWidth'\n  | 'left'\n  | 'top'\n  | 'right'\n  | 'bottom'\n  | 'shadowOffset'\n\ntype CSSColorNames =\n  | 'aliceblue'\n  | 'antiquewhite'\n  | 'aqua'\n  | 'aquamarine'\n  | 'azure'\n  | 'beige'\n  | 'bisque'\n  | 'black'\n  | 'blanchedalmond'\n  | 'blue'\n  | 'blueviolet'\n  | 'brown'\n  | 'burlywood'\n  | 'cadetblue'\n  | 'chartreuse'\n  | 'chocolate'\n  | 'coral'\n  | 'cornflowerblue'\n  | 'cornsilk'\n  | 'crimson'\n  | 'cyan'\n  | 'darkblue'\n  | 'darkcyan'\n  | 'darkgoldenrod'\n  | 'darkgray'\n  | 'darkgreen'\n  | 'darkkhaki'\n  | 'darkmagenta'\n  | 'darkolivegreen'\n  | 'darkorange'\n  | 'darkorchid'\n  | 'darkred'\n  | 'darksalmon'\n  | 'darkseagreen'\n  | 'darkslateblue'\n  | 'darkslategray'\n  | 'darkturquoise'\n  | 'darkviolet'\n  | 'deeppink'\n  | 'deepskyblue'\n  | 'dimgray'\n  | 'dodgerblue'\n  | 'firebrick'\n  | 'floralwhite'\n  | 'forestgreen'\n  | 'fuchsia'\n  | 'gainsboro'\n  | 'ghostwhite'\n  | 'gold'\n  | 'goldenrod'\n  | 'gray'\n  | 'green'\n  | 'greenyellow'\n  | 'honeydew'\n  | 'hotpink'\n  | 'indianred '\n  | 'indigo  '\n  | 'ivory'\n  | 'khaki'\n  | 'lavender'\n  | 'lavenderblush'\n  | 'lawngreen'\n  | 'lemonchiffon'\n  | 'lightblue'\n  | 'lightcoral'\n  | 'lightcyan'\n  | 'lightgoldenrodyellow'\n  | 'lightgrey'\n  | 'lightgreen'\n  | 'lightpink'\n  | 'lightsalmon'\n  | 'lightseagreen'\n  | 'lightskyblue'\n  | 'lightslategray'\n  | 'lightsteelblue'\n  | 'lightyellow'\n  | 'lime'\n  | 'limegreen'\n  | 'linen'\n  | 'magenta'\n  | 'maroon'\n  | 'mediumaquamarine'\n  | 'mediumblue'\n  | 'mediumorchid'\n  | 'mediumpurple'\n  | 'mediumseagreen'\n  | 'mediumslateblue'\n  | 'mediumspringgreen'\n  | 'mediumturquoise'\n  | 'mediumvioletred'\n  | 'midnightblue'\n  | 'mintcream'\n  | 'mistyrose'\n  | 'moccasin'\n  | 'navajowhite'\n  | 'navy'\n  | 'oldlace'\n  | 'olive'\n  | 'olivedrab'\n  | 'orange'\n  | 'orangered'\n  | 'orchid'\n  | 'palegoldenrod'\n  | 'palegreen'\n  | 'paleturquoise'\n  | 'palevioletred'\n  | 'papayawhip'\n  | 'peachpuff'\n  | 'peru'\n  | 'pink'\n  | 'plum'\n  | 'powderblue'\n  | 'purple'\n  | 'red'\n  | 'rosybrown'\n  | 'royalblue'\n  | 'saddlebrown'\n  | 'salmon'\n  | 'sandybrown'\n  | 'seagreen'\n  | 'seashell'\n  | 'sienna'\n  | 'silver'\n  | 'skyblue'\n  | 'slateblue'\n  | 'slategray'\n  | 'snow'\n  | 'springgreen'\n  | 'steelblue'\n  | 'tan'\n  | 'teal'\n  | 'thistle'\n  | 'tomato'\n  | 'turquoise'\n  | 'violet'\n  | 'wheat'\n  | 'white'\n  | 'whitesmoke'\n  | 'yellow'\n  | 'yellowgreen'\n\nexport type TamaguiComponentState = {\n  hover: boolean\n  press: boolean\n  pressIn: boolean\n  focus: boolean\n  mounted: boolean\n  animation?: null | {\n    style?: any\n    avoidClasses?: boolean\n  }\n}\n\nexport type SplitStyleState = TamaguiComponentState & {\n  noClassNames?: boolean\n  dynamicStylesInline?: boolean\n  resolveVariablesAs?: ResolveVariableTypes\n  fallbackProps?: Record<string, any>\n  keepVariantsAsProps?: boolean\n  hasTextAncestor?: boolean\n}\n\n// Animations:\n\ntype AnimationConfig = {\n  [key: string]: any\n}\n\n// includes a very limited adapter between various impls for number => style\n// this is useful only in limited scenarios like `Sheet`, but necessary in those cases\n\nexport type AnimatedNumberStrategy =\n  // only values shared between reanimated/react-native for now\n  | {\n      type: 'spring'\n      stiffness?: number\n      damping?: number\n      mass?: number\n      overshootClamping?: boolean\n      restSpeedThreshold?: number\n      restDisplacementThreshold?: number\n    }\n  | { type: 'timing'; duration: number }\n  | { type: 'direct' }\n\nexport type UniversalAnimatedNumber<A> = {\n  getInstance(): A\n  getValue(): number\n  setValue(next: number, config?: AnimatedNumberStrategy): void\n  stop(): void\n}\n\nexport type AnimationDriver<A extends AnimationConfig = AnimationConfig> = {\n  avoidClasses?: boolean\n  useAnimations: UseAnimationHook\n  useAnimatedNumber: (initial: number) => UniversalAnimatedNumber<any>\n  useAnimatedNumberStyle: <V extends UniversalAnimatedNumber<any>>(\n    val: V,\n    getStyle: (current: any) => any\n  ) => void\n  useAnimatedNumberReaction: (\n    val: UniversalAnimatedNumber<any>,\n    onValue: (current: number) => void\n  ) => void\n  animations: A\n  View?: any\n  Text?: any\n}\n\nexport type UseAnimationProps = TamaguiComponentPropsBase & Record<string, any>\n\nexport type UseAnimationHelpers = {\n  staticConfig: StaticConfigParsed\n  getStyle: (props?: {\n    isEntering?: boolean\n    isExiting?: boolean\n    exitVariant?: string | null\n    enterVariant?: string | null\n  }) => ViewStyle\n  state: SplitStyleState\n  pseudos: PseudoProps<ViewStyle>\n  // style: ViewStyle | null | undefined\n  // isMounted: boolean\n  // exitStyle?: ViewStyle | null\n  onDidAnimate?: any\n  delay?: number\n  // mergedStyles(props?: { isExiting?: boolean }): ViewStyle\n}\n\nexport type UseAnimationHook = (\n  props: UseAnimationProps,\n  helpers: UseAnimationHelpers\n) => {\n  style?: StackStylePropsBase | StackStylePropsBase[]\n}\n"],
+  "sourcesContent": ["// TODO split this into own package @tamagui/types to share with animations packages\n\nimport { Properties } from 'csstype'\nimport React, { RefObject } from 'react'\nimport {\n  GestureResponderEvent,\n  Image,\n  PressableProps,\n  TextProps as ReactTextProps,\n  Text,\n  TextInput,\n  TextStyle,\n  View,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\n\nimport { Variable } from './createVariable'\nimport { ResolveVariableTypes } from './helpers/createPropMapper'\nimport { RNWTextProps, RNWViewProps } from './types-rnw'\nimport { FontLanguageProps } from './views/FontLanguage.types'\nimport { ThemeProviderProps } from './views/ThemeProvider'\n\nexport type SpaceDirection = 'vertical' | 'horizontal' | 'both'\n\nexport type TamaguiElement = HTMLElement | View\n\nexport type DebugProp = boolean | 'break' | 'verbose'\n\n//\n// base props that are accepted by createComponent (additional to react-native-web)\n//\nexport type TamaguiComponentPropsBase = {\n  hitSlop?: PressableProps['hitSlop']\n  asChild?: boolean\n  space?: SpaceTokens | null\n  spaceDirection?: SpaceDirection\n  separator?: React.ReactNode\n  dangerouslySetInnerHTML?: { __html: string }\n  animation?: AnimationProp\n  animateOnly?: string[]\n  children?: any | any[]\n  debug?: DebugProp\n  disabled?: boolean\n  className?: string\n  themeShallow?: boolean\n  id?: string\n  tag?: string\n  theme?: ThemeName | null\n  componentName?: string\n  forceStyle?: 'hover' | 'press' | 'focus'\n  onHoverIn?: (e: MouseEvent) => any\n  onHoverOut?: (e: MouseEvent) => any\n  onPress?: (e: GestureResponderEvent) => any\n  onPressIn?: (e: GestureResponderEvent) => any\n  onPressOut?: (e: GestureResponderEvent) => any\n  // WEB ONLY\n  onMouseEnter?: (e: MouseEvent) => any\n  onMouseLeave?: (e: MouseEvent) => any\n  onMouseDown?: (e: MouseEvent) => any\n  // WEB STYLES\n  userSelect?: Properties['userSelect']\n  cursor?: Properties['cursor']\n}\n\nexport type ReactComponentWithRef<Props, Ref> = React.ForwardRefExoticComponent<\n  Props & React.RefAttributes<Ref>\n>\n\nexport type ConfigListener = (conf: TamaguiInternalConfig) => void\n\n// to prevent things from going circular, hoisting some types in this file\n// to generally order them as building up towards TamaguiConfig\n\nexport type VariableVal = number | string | Variable\nexport type VariableColorVal = string | Variable\n\ntype GenericKey = string | number | symbol\n\nexport interface CreateTokens<Val extends VariableVal = VariableVal> {\n  color: { [key: GenericKey]: Val }\n  space: { [key: GenericKey]: Val }\n  size: { [key: GenericKey]: Val }\n  radius: { [key: GenericKey]: Val }\n  zIndex: { [key: GenericKey]: Val }\n}\n\nexport type TamaguiBaseTheme = {\n  // defined for our tamagui kit , we could do this inside `tamagui`\n  // but maybe helpful to have some sort of universally shared things +\n  // + enforce if they want their own, redefine in their design sys\n  background: VariableColorVal\n  backgroundHover: VariableColorVal\n  backgroundPress: VariableColorVal\n  backgroundFocus: VariableColorVal\n  color: VariableColorVal\n  colorHover: VariableColorVal\n  colorPress: VariableColorVal\n  colorFocus: VariableColorVal\n  borderColor: VariableColorVal\n  borderColorHover: VariableColorVal\n  borderColorPress: VariableColorVal\n  borderColorFocus: VariableColorVal\n  shadowColor: VariableColorVal\n  shadowColorHover: VariableColorVal\n  shadowColorPress: VariableColorVal\n  shadowColorFocus: VariableColorVal\n}\n\ntype GenericTokens = CreateTokens\ntype GenericThemes = {\n  [key: string]:\n    | Partial<TamaguiBaseTheme> & {\n        [key: string]: VariableVal\n      }\n}\n\ntype GenericShorthands = {}\n\n// sm: { minWidth: 100 }\ntype GenericMedia = {\n  [key: string]: {\n    [key: string]: number | string\n  }\n}\n\nexport type GenericFonts = Record<string, GenericFont>\n\ntype GenericAnimations = {\n  [key: string]:\n    | string\n    | {\n        [key: string]: any\n      }\n}\n\n// this is the \"main\" typed object, which users re-define\n// (internal) keep all types directly on this object and reference them from elsewhere\n//\n// const config = createTamagui(...)\n// type MyConfig = typeof config\n// declare module 'tamagui' {\n//   export interface TamaguiCustomConfig extends MyConfig {}\n// }\n// now your whole app/kit should be typed correctly\n//\nexport interface TamaguiCustomConfig {}\n\nexport interface TamaguiConfig\n  extends Omit<GenericTamaguiConfig, keyof TamaguiCustomConfig>,\n    TamaguiCustomConfig {}\n\nexport type CreateTamaguiConfig<\n  A extends GenericTokens,\n  B extends GenericThemes,\n  C extends GenericShorthands = GenericShorthands,\n  D extends GenericMedia = GenericMedia,\n  E extends GenericAnimations = GenericAnimations,\n  F extends GenericFonts = GenericFonts\n> = {\n  fonts: RemoveLanguagePostfixes<F>\n  fontLanguages: GetLanguagePostfixes<F> extends never ? string[] : GetLanguagePostfixes<F>[]\n  tokens: A\n  themes: B\n  shorthands: C\n  media: D\n  animations: AnimationDriver<E>\n}\n\ntype GetLanguagePostfix<Set> = Set extends string\n  ? Set extends `${string}_${infer Postfix}`\n    ? Postfix\n    : never\n  : never\n\ntype OmitLanguagePostfix<Set> = Set extends string\n  ? Set extends `${infer Prefix}_${string}`\n    ? Prefix\n    : Set\n  : never\n\ntype RemoveLanguagePostfixes<F extends GenericFonts> = {\n  [Key in OmitLanguagePostfix<keyof F>]: F[Key]\n}\n\ntype GetLanguagePostfixes<F extends GenericFonts> = GetLanguagePostfix<keyof F>\n\n// test RemoveLanguagePostfixes\n// type x = CreateTamaguiConfig<any, any, any, any, any, {\n//   body: any,\n//   body_en: any\n// }>['fonts']\n\ntype ConfProps<\n  A extends GenericTokens,\n  B extends GenericThemes,\n  C extends GenericShorthands = GenericShorthands,\n  D extends GenericMedia = GenericMedia,\n  E extends GenericAnimations = GenericAnimations,\n  F extends GenericFonts = GenericFonts\n> = {\n  tokens: A\n  themes: B\n  shorthands?: C\n  media?: D\n  animations?: AnimationDriver<E>\n  fonts: F\n}\n\nexport type InferTamaguiConfig<Conf> = Conf extends ConfProps<\n  infer A,\n  infer B,\n  infer C,\n  infer D,\n  infer E,\n  infer F\n>\n  ? TamaguiInternalConfig<A, B, C, D, E, F>\n  : unknown\n\n// for use in creation functions so it doesnt get overwrtitten\nexport type GenericTamaguiConfig = CreateTamaguiConfig<\n  GenericTokens,\n  GenericThemes,\n  GenericShorthands,\n  GenericMedia,\n  GenericAnimations,\n  GenericFonts\n>\n\n// since TamaguiConfig will be re-declared, these will all be typed globally\nexport type ThemeObject = TamaguiConfig['themes'][keyof TamaguiConfig['themes']]\nexport type Tokens = TamaguiConfig['tokens']\nexport type Shorthands = TamaguiConfig['shorthands']\nexport type Media = TamaguiConfig['media']\nexport type Themes = TamaguiConfig['themes']\nexport type ThemeName = GetAltThemeNames<keyof Themes>\nexport type ThemeKeys = keyof ThemeObject\nexport type ThemeTokens = `$${ThemeKeys}`\nexport type AnimationKeys = Omit<GetAnimationKeys<TamaguiConfig>, number>\nexport type FontLanguages = ArrayIntersection<TamaguiConfig['fontLanguages']>\n\ntype ArrayIntersection<A extends any[]> = A[keyof A]\n\ntype GetAltThemeNames<S> = (S extends `${string}_${infer Alt}` ? GetAltThemeNames<Alt> : S) | S\n\nexport type SpacerProps = Omit<StackProps, 'flex' | 'direction' | 'size'> & {\n  size?: number | SpaceTokens | null\n  flex?: boolean | number\n  direction?: SpaceDirection\n}\n\nexport type CreateTamaguiProps = {\n  shorthands?: GenericTamaguiConfig['shorthands']\n  media?: GenericTamaguiConfig['media']\n  animations?: AnimationDriver<any>\n  fonts: GenericTamaguiConfig['fonts']\n  tokens: GenericTamaguiConfig['tokens']\n  themes: {\n    [key: string]: {\n      [key: string]: string | number | Variable\n    }\n  }\n\n  defaultTheme?: string\n  disableRootThemeClass?: boolean\n\n  defaultProps?: Record<string, any> & {\n    Stack?: StackProps\n    Text?: TextProps\n    Spacer?: SpacerProps\n  }\n\n  // for the first render, determines which media queries are true\n  // useful for SSR\n  mediaQueryDefaultActive?: Record<MediaQueryKey, boolean>\n\n  // what's between each CSS style rule, set to \"\\n\" to be easier to read\n  // defaults: \"\\n\" when NODE_ENV=development, \"\" otherwise\n  cssStyleSeparator?: string\n\n  // (Advanced)\n  // on the web, tamagui treats `dark` and `light` themes as special and\n  // generates extra CSS to avoid having to re-render the entire page.\n  // this CSS relies on specificity hacks that multiply by your sub-themes.\n  // this sets the maxiumum number of nested dark/light themes you can do\n  // defaults to 3 for a balance, but can be higher if you nest them deeply.\n  maxDarkLightNesting?: number\n\n  // adds @media(prefers-color-scheme) media queries for dark/light\n  shouldAddPrefersColorThemes?: boolean\n\n  // only if you put the theme classname on the html element we have to generate diff\n  themeClassNameOnRoot?: boolean\n}\n\n// this is the config generated via createTamagui()\nexport type TamaguiInternalConfig<\n  A extends GenericTokens = GenericTokens,\n  B extends GenericThemes = GenericThemes,\n  C extends GenericShorthands = GenericShorthands,\n  D extends GenericMedia = GenericMedia,\n  E extends GenericAnimations = GenericAnimations,\n  F extends GenericFonts = GenericFonts\n> = Omit<CreateTamaguiProps, keyof GenericTamaguiConfig> &\n  CreateTamaguiConfig<A, B, C, D, E, F> & {\n    // TODO need to make it this but this breaks types, revisit\n    // animations: E //AnimationDriver<E>\n    // with $ prefixes for fast lookups (one time cost at startup vs every render)\n    tokensParsed: CreateTokens<Variable>\n    themeConfig: any\n    fontsParsed: GenericFonts\n    getCSS: () => string\n    parsed: boolean\n    inverseShorthands: Record<string, string>\n\n    // just passed in from CreateTamaguiProps\n    themeClassNameOnRoot?: boolean\n  }\n\nexport type GetAnimationKeys<A extends GenericTamaguiConfig> = keyof A['animations']['animations']\n\n// prevents const intersections from being clobbered into string, keeping the consts\nexport type UnionableString = string & {}\nexport type UnionableNumber = number & {}\nexport type PropTypes<A extends TamaguiComponent> = A extends React.FunctionComponent<infer Props>\n  ? Props\n  : unknown\n\nexport type GenericFont<Key extends number | string = number | string> = {\n  size: { [key in Key]: number | Variable }\n  lineHeight: Partial<{ [key in Key]: number | Variable }>\n  letterSpacing: Partial<{ [key in Key]: number | Variable }>\n  weight: Partial<{ [key in Key]: number | string | Variable }>\n  family: string | Variable\n  style?: Partial<{ [key in Key]: TextStyle['fontStyle'] | Variable }>\n  transform?: Partial<{ [key in Key]: TextStyle['textTransform'] | Variable }>\n  color?: Partial<{ [key in Key]: string | Variable }>\n}\n\n// media\nexport type MediaQueryObject = { [key: string]: string | number | string }\nexport type MediaQueryKey = keyof Media\nexport type MediaPropKeys = `$${MediaQueryKey}`\nexport type MediaQueryState = { [key in MediaPropKeys]: boolean }\nexport type MediaProps<A> = {\n  [key in MediaPropKeys]?: A\n}\nexport type MediaQueries = {\n  [key in MediaQueryKey]: MediaQueryObject\n}\nexport type ConfigureMediaQueryOptions = {\n  queries?: MediaQueries\n  defaultActive?: Record<MediaQueryKey, boolean>\n}\n\nexport type TransformStyleProps = {\n  x?: number\n  y?: number\n  perspective?: number\n  scale?: number\n  scaleX?: number\n  scaleY?: number\n  skewX?: string\n  skewY?: string\n  matrix?: number[]\n  rotate?: string\n  rotateY?: string\n  rotateX?: string\n  rotateZ?: string\n}\n\n// createComponent props helpers\n\n// animation=\"bouncy\"\n// animation={['bouncy', {  }]}\n// { all: 'name' }\n\n// TODO can override for better types\nexport type AnimationConfigType = any\n\nexport type AnimationProp =\n  | AnimationKeys\n  | {\n      [key: string]:\n        | AnimationKeys\n        | {\n            type: AnimationKeys\n            [key: string]: any\n          }\n    }\n  | [\n      AnimationKeys,\n      {\n        [key: string]:\n          | AnimationKeys\n          | {\n              type?: AnimationKeys\n              [key: string]: any\n            }\n      }\n    ]\n\ntype GetTokenFontKeysFor<\n  A extends\n    | 'size'\n    | 'weight'\n    | 'letterSpacing'\n    | 'family'\n    | 'lineHeight'\n    | 'transform'\n    | 'style'\n    | 'color'\n> = keyof TamaguiConfig['fonts']['body'][A]\n\ntype GetTokenString<A> = A extends string | number ? `$${A}` : `$${string}`\n\n// base tokens\nexport type SizeTokens = GetTokenString<keyof Tokens['size']> | number\nexport type SpaceTokens = GetTokenString<keyof Tokens['space']> | number | boolean\nexport type ColorTokens =\n  | GetTokenString<keyof Tokens['color']>\n  | GetTokenString<keyof ThemeObject>\n  | CSSColorNames\nexport type ZIndexTokens = GetTokenString<keyof Tokens['zIndex']> | number\nexport type RadiusTokens = GetTokenString<keyof Tokens['radius']> | number\n\n// font tokens\nexport type FontTokens = GetTokenString<keyof TamaguiConfig['fonts']>\nexport type FontSizeTokens = GetTokenString<GetTokenFontKeysFor<'size'>> | number\nexport type FontLineHeightTokens = `$${GetTokenFontKeysFor<'lineHeight'>}` | number\nexport type FontWeightTokens =\n  | `$${GetTokenFontKeysFor<'weight'>}`\n  | `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00`\nexport type FontColorTokens = `$${GetTokenFontKeysFor<'color'>}` | number\nexport type FontLetterSpacingTokens = `$${GetTokenFontKeysFor<'letterSpacing'>}` | number\nexport type FontStyleTokens = `$${GetTokenFontKeysFor<'style'>}` | TextStyle['fontStyle']\nexport type FontTransformTokens =\n  | `$${GetTokenFontKeysFor<'transform'>}`\n  | TextStyle['textTransform']\n\n//\n// adds theme short values to relevant props\n//\n\nexport type ThemeValueByCategory<K extends string | number | symbol> = K extends 'theme'\n  ? ThemeTokens\n  : K extends 'size'\n  ? SizeTokens\n  : K extends 'font'\n  ? FontTokens\n  : K extends 'fontSize'\n  ? FontSizeTokens\n  : K extends 'space'\n  ? SpaceTokens\n  : K extends 'color'\n  ? ColorTokens\n  : K extends 'zIndex'\n  ? ZIndexTokens\n  : K extends 'lineHeight'\n  ? FontLineHeightTokens\n  : K extends 'fontWeight'\n  ? FontWeightTokens\n  : K extends 'letterSpacing'\n  ? FontLetterSpacingTokens\n  : {}\n\ntype FontKeys = 'fontFamily'\ntype FontSizeKeys = 'fontSize'\ntype FontWeightKeys = 'fontWeight'\ntype FontLetterSpacingKeys = 'letterSpacing'\ntype LineHeightKeys = 'lineHeight'\ntype ZIndexKeys = 'zIndex'\n\nexport type ThemeValueGet<K extends string | number | symbol> = K extends 'theme'\n  ? ThemeTokens\n  : K extends SizeKeys\n  ? SizeTokens\n  : K extends FontKeys\n  ? FontTokens\n  : K extends FontSizeKeys\n  ? FontSizeTokens\n  : K extends SpaceKeys\n  ? K extends 'shadowOffset'\n    ? { width: SpaceTokens; height: SpaceTokens }\n    : SpaceTokens\n  : K extends ColorKeys\n  ? ColorTokens\n  : K extends ZIndexKeys\n  ? ZIndexTokens\n  : K extends LineHeightKeys\n  ? FontLineHeightTokens\n  : K extends FontWeightKeys\n  ? FontWeightTokens\n  : K extends FontLetterSpacingKeys\n  ? FontLetterSpacingTokens\n  : never\n\nexport type ThemeValueFallback = UnionableString | Variable\n\nexport type WithThemeValues<T extends object> = {\n  [K in keyof T]: ThemeValueGet<K> extends never\n    ? T[K]\n    : ThemeValueGet<K> | Exclude<T[K], string> | ThemeValueFallback\n}\n\n// adds shorthand props\nexport type WithShorthands<StyleProps> = {\n  [Key in keyof Shorthands]?: Shorthands[Key] extends keyof StyleProps\n    ? StyleProps[Shorthands[Key]] | null\n    : undefined\n}\n\n// adds pseudo props\nexport type PseudoProps<A> = {\n  hoverStyle?: A | null\n  pressStyle?: A | null\n  focusStyle?: A | null\n  exitStyle?: A | null\n  enterStyle?: A | null\n}\n\nexport type PseudoPropKeys = keyof PseudoProps<any>\n\nexport type PseudoStyles = {\n  hoverStyle?: ViewStyle\n  pressStyle?: ViewStyle\n  focusStyle?: ViewStyle\n  enterStyle?: ViewStyle\n  exitStyle?: ViewStyle\n}\n\n//\n// add both theme and shorthands\n//\ntype WithThemeAndShorthands<A extends object> = WithThemeValues<A> &\n  WithShorthands<WithThemeValues<A>>\n\n//\n// combines all of theme, shorthands, pseudos...\n//\ntype WithThemeShorthandsAndPseudos<A extends object> =\n  | WithThemeAndShorthands<A> & PseudoProps<WithThemeAndShorthands<A>>\n\n//\n// ... media queries and animations\n//\ntype WithThemeShorthandsPseudosMediaAnimation<A extends object> = WithThemeShorthandsAndPseudos<A> &\n  MediaProps<WithThemeShorthandsAndPseudos<A>>\n\n//\n// Stack\n//\n\ntype WebOnlyStyleProps = {\n  // WEB ONLY\n  cursor?: string\n  // WEB ONLY\n  contain?: 'none' | 'strict' | 'content' | 'size' | 'layout' | 'paint' | string\n  // WEB ONLY values: inherit, inline, block, content\n  display?: 'inherit' | 'none' | 'inline' | 'block' | 'contents' | 'flex' | 'inline-flex'\n  // WEB ONLY pointerEvents can be a style prop\n  pointerEvents?: ViewProps['pointerEvents']\n}\n\nexport type StackStylePropsBase = Omit<ViewStyle, 'display' | 'backfaceVisibility' | 'elevation'> &\n  TransformStyleProps &\n  WebOnlyStyleProps\n\nexport type StackPropsBaseShared = Omit<ViewProps, 'display' | 'children'> &\n  RNWViewProps &\n  TamaguiComponentPropsBase\n\nexport type StackStyleProps = WithThemeShorthandsPseudosMediaAnimation<StackStylePropsBase>\nexport type StackPropsBase = StackPropsBaseShared & WithThemeAndShorthands<StackStylePropsBase>\nexport type StackProps = StackPropsBaseShared & StackStyleProps\n\nexport type GestureReponderEvent = Exclude<View['props']['onResponderMove'], void> extends (\n  event: infer Event\n) => void\n  ? Event\n  : never\n\n//\n// Text props\n//\n\nexport type TextStylePropsBase = Omit<TextStyle, 'display' | 'backfaceVisibility'> &\n  TransformStyleProps &\n  WebOnlyStyleProps & {\n    ellipse?: boolean\n    selectable?: boolean\n    textDecorationDistance?: number\n    textOverflow?: Properties['textOverflow']\n    whiteSpace?: Properties['whiteSpace']\n    wordWrap?: Properties['wordWrap']\n  }\n\nexport type TextPropsBaseShared = Omit<ReactTextProps, 'children'> &\n  RNWTextProps &\n  TamaguiComponentPropsBase\nexport type TextPropsBase = TextPropsBaseShared & WithThemeAndShorthands<TextStylePropsBase>\nexport type TextStyleProps = WithThemeShorthandsPseudosMediaAnimation<TextStylePropsBase>\nexport type TextProps = TextPropsBaseShared & TextStyleProps\n\n// could actually infer from parent\nexport type ViewOrTextProps = WithThemeShorthandsPseudosMediaAnimation<\n  Omit<TextStylePropsBase, keyof StackStylePropsBase> & StackStylePropsBase\n>\n\n//\n// StaticComponent\n//\n\nexport type TamaguiComponent<\n  Props = any,\n  Ref = any,\n  BaseProps = {},\n  VariantProps = {}\n> = ReactComponentWithRef<Props, Ref> & StaticComponentObject\n\ntype StaticComponentObject = {\n  staticConfig: StaticConfig\n  /*\n   * Only needed for more complex components\n   * If you create a styled frame component this is a HoC to extract\n   * styles from all parents.\n   */\n  extractable: <X>(a: X, opts?: Partial<StaticConfig>) => X\n}\n\nexport type TamaguiProviderProps = Partial<Omit<ThemeProviderProps, 'children'>> & {\n  config: TamaguiInternalConfig\n  disableInjectCSS?: boolean\n  children?: React.ReactNode\n}\n\nexport type PropMapper = (\n  key: string,\n  value: any,\n  theme: ThemeObject,\n  props: Record<string, any>,\n  state: Partial<SplitStyleState>,\n  languageContext?: FontLanguageProps,\n  avoidDefaultProps?: boolean,\n  debug?: DebugProp\n) => undefined | [string, any][]\n\nexport type StaticConfigParsed = StaticConfig & {\n  parsed: true\n  propMapper: PropMapper\n  variantsParsed?: {\n    [key: string]: {\n      [key: string]: any\n    }\n  }\n}\n\nexport type GenericVariantDefinitions = {\n  [key: string]: {\n    [key: string]:\n      | ((a: any, b: any) => any)\n      | {\n          [key: string]: any\n        }\n  }\n}\n\nexport type StaticConfig = {\n  Component?: React.FunctionComponent<any> & StaticComponentObject\n\n  variants?: GenericVariantDefinitions\n\n  /**\n   * Used for applying sub theme style\n   */\n  componentName?: string\n\n  /**\n   * (compiler) If you need to pass context or something, prevents from ever\n   * flattening. The 'jsx' option means it will never flatten. if you\n   * pass JSX as a children (if its purely string, it will still flatten).\n   */\n  neverFlatten?: boolean | 'jsx'\n\n  /**\n   * Determines ultimate output tag (Text vs View)\n   */\n  isText?: boolean\n\n  /**\n   * Attempts to attach focus styles at runtime (useful for native)\n   */\n  isInput?: boolean\n\n  /**\n   * React native web images need special handling for className support\n   */\n  isImage?: boolean\n\n  /**\n   * Which style keys are allowed to be extracted.\n   */\n  validStyles?: { [key: string]: boolean }\n\n  /**\n   * Same as React.defaultProps, be sure to sync\n   */\n  defaultProps: Record<string, any>\n\n  /**\n   * (compiler) If these props are encountered, bail on all optimization.\n   */\n  deoptProps?: Set<string>\n\n  /**\n   * (compiler) If these props are encountered, leave them un-extracted.\n   */\n  inlineProps?: Set<string>\n\n  /**\n   * (compiler) If not flattening, leave this prop as original value.\n   * Only applies to style attributes\n   */\n  inlineWhenUnflattened?: Set<string>\n\n  /**\n   * (compiler) A bit odd, only for more advanced heirarchies.\n   * Indicates that the component will set this prop so the\n   * static extraction can ensure it sets them to ={undefined}\n   * so they get overriddent. In the future, this can be smarter.\n   */\n  ensureOverriddenProp?: { [key: string]: boolean }\n\n  /**\n   * Auto-detected, but can ovverride. Wraps children to space them on top\n   */\n  isZStack?: boolean\n\n  /**\n   * Merges into defaultProps later on, used internally yonly\n   */\n  defaultVariants?: { [key: string]: any }\n\n  /**\n   * Auto-detect, but can ovverride, passes styles properly to react-native-web\n   */\n  isReactNativeWeb?: boolean\n\n  /**\n   * Used internally to keep reference to the original rnw component\n   */\n  reactNativeWebComponent?: any\n\n  /**\n   * Memoize the component\n   */\n  memo?: boolean\n\n  /**\n   * Auto-detect, but can ovverride, passes styles properly to react-native-web\n   */\n  isTamagui?: boolean\n\n  /**\n   * Used internally to handle extractable HoC separate\n   */\n  isExtractable?: boolean\n\n  /**\n   * Used insternally to attach default props to names\n   */\n  parentNames?: string[]\n}\n\n/**\n * --------------------------------------------\n *   variants\n * --------------------------------------------\n */\n\nexport type StylableComponent =\n  | TamaguiComponent\n  | React.Component\n  | React.ForwardRefExoticComponent<any>\n  | ReactComponentWithRef<any, any>\n  | (new (props: any) => any)\n  | typeof View\n  | typeof Text\n  | typeof TextInput\n  | typeof Image\n\nexport type GetStyledVariants<A extends TamaguiComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  any,\n  infer Variants\n>\n  ? Variants\n  : never\n\nexport type GetBaseProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  infer BaseProps\n>\n  ? BaseProps\n  : never\n\nexport type GetProps<A extends StylableComponent> = A extends TamaguiComponent<infer Props>\n  ? Props\n  : A extends React.Component<infer Props>\n  ? GetGenericComponentTamaguiProps<Props>\n  : A extends new (props: infer Props) => any\n  ? GetGenericComponentTamaguiProps<Props>\n  : {}\n\ntype GetGenericComponentTamaguiProps<P> = P &\n  Omit<'textAlign' extends keyof P ? TextProps : StackProps, keyof P>\n\nexport type SpreadKeys =\n  | '...fontSize'\n  | '...fontStyle'\n  | '...fontTransform'\n  | '...lineHeight'\n  | '...letterSpacing'\n  | '...size'\n  | '...space'\n  | '...color'\n  | '...zIndex'\n  | '...theme'\n  | '...radius'\n\nexport type VariantDefinitions<\n  Parent extends StylableComponent = TamaguiComponent,\n  MyProps extends Object = GetProps<Parent>,\n  Val = any\n> = VariantDefinitionFromProps<MyProps, Val>\n\nexport type VariantDefinitionFromProps<MyProps, Val> = MyProps extends Object\n  ? {\n      [propName: string]:\n        | VariantSpreadFunction<MyProps, Val>\n        | ({\n            [Key in SpreadKeys]?: Key extends '...fontSize'\n              ? FontSizeVariantSpreadFunction<MyProps>\n              : Key extends '...size'\n              ? SizeVariantSpreadFunction<MyProps>\n              : Key extends '...space'\n              ? SpaceVariantSpreadFunction<MyProps>\n              : Key extends '...color'\n              ? ColorVariantSpreadFunction<MyProps>\n              : Key extends '...lineHeight'\n              ? FontLineHeightVariantSpreadFunction<MyProps>\n              : Key extends '...fontTransform'\n              ? FontTransformVariantSpreadFunction<MyProps>\n              : Key extends '...fontStyle'\n              ? FontStyleVariantSpreadFunction<MyProps>\n              : Key extends '...letterSpacing'\n              ? FontLetterSpacingVariantSpreadFunction<MyProps>\n              : Key extends '...zIndex'\n              ? ZIndexVariantSpreadFunction<MyProps>\n              : Key extends '...radius'\n              ? RadiusVariantSpreadFunction<MyProps>\n              : Key extends '...theme'\n              ? ThemeVariantSpreadFunction<MyProps>\n              : never\n          } & {\n            [Key in string | number | 'true' | 'false']?:\n              | MyProps\n              | VariantSpreadFunction<MyProps, Val>\n          } & {\n            [Key in VariantTypeKeys]?: Key extends ':number'\n              ? VariantSpreadFunction<MyProps, number>\n              : Key extends ':boolean'\n              ? VariantSpreadFunction<MyProps, boolean>\n              : Key extends ':string'\n              ? VariantSpreadFunction<MyProps, string>\n              : never\n          })\n    }\n  : never\n\nexport type GenericStackVariants = VariantDefinitionFromProps<StackProps, any>\nexport type GenericTextVariants = VariantDefinitionFromProps<StackProps, any>\n\nexport type GetVariantProps<Variants> = {\n  [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<any, infer Val>\n    ? Val\n    : GetVariantValues<keyof Variants[Key]>\n}\n\nexport type VariantSpreadExtras<Props> = {\n  fonts: TamaguiConfig['fonts']\n  tokens: TamaguiConfig['tokens']\n  theme: Themes extends { [key: string]: infer B } ? B : unknown\n  props: Props\n}\n\ntype PropLike = { [key: string]: any }\n\nexport type VariantSpreadFunction<Props extends PropLike, Val = any> = (\n  val: Val,\n  config: VariantSpreadExtras<Props>\n) =>\n  | {\n      [Key in keyof Props]: Props[Key] | Variable\n    }\n  | null\n  | undefined\n\nexport type VariantTypeKeys = ':string' | ':boolean' | ':number'\n\nexport type GetVariantValues<Key> = Key extends `...${infer VariantSpread}`\n  ? ThemeValueByCategory<VariantSpread>\n  : Key extends 'true' | 'false'\n  ? boolean\n  : Key extends ':string'\n  ? string\n  : Key extends ':boolean'\n  ? boolean\n  : Key extends ':number'\n  ? number\n  : Key\n\nexport type FontSizeVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  FontSizeTokens\n>\nexport type SizeVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, SizeTokens>\nexport type SpaceVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, SpaceTokens>\nexport type ColorVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, ColorTokens>\nexport type FontLineHeightVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  FontLineHeightTokens\n>\nexport type FontLetterSpacingVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  FontLetterSpacingTokens\n>\nexport type FontStyleVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  FontStyleTokens\n>\nexport type FontTransformVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  FontTransformTokens\n>\nexport type ZIndexVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, ZIndexTokens>\nexport type RadiusVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, RadiusTokens>\nexport type ThemeVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, ThemeTokens>\n\n/**\n * --------------------------------------------\n *   end variants\n * --------------------------------------------\n */\n\ntype SizeKeys =\n  | 'width'\n  | 'height'\n  | 'minWidth'\n  | 'minHeight'\n  | 'maxWidth'\n  | 'maxHeight'\n  | 'shadowRadius'\n\ntype ColorKeys =\n  | 'color'\n  | 'backgroundColor'\n  | 'borderColor'\n  | 'borderBottomColor'\n  | 'borderTopColor'\n  | 'borderLeftColor'\n  | 'borderRightColor'\n  | 'shadowColor'\n  | 'textShadowColor'\n\ntype SpaceKeys =\n  | 'space'\n  | 'padding'\n  | 'paddingHorizontal'\n  | 'paddingVertical'\n  | 'paddingLeft'\n  | 'paddingTop'\n  | 'paddingBottom'\n  | 'paddingLeft'\n  | 'paddingRight'\n  | 'paddingEnd'\n  | 'paddingStart'\n  | 'margin'\n  | 'marginHorizontal'\n  | 'marginVertical'\n  | 'marginLeft'\n  | 'marginTop'\n  | 'marginBottom'\n  | 'marginLeft'\n  | 'marginRight'\n  | 'marginEnd'\n  | 'marginStart'\n  | 'x'\n  | 'y'\n  | 'scale'\n  | 'scaleX'\n  | 'scaleY'\n  | 'borderTopEndRadius'\n  | 'borderTopLeftRadius'\n  | 'borderTopRightRadius'\n  | 'borderTopStartRadius'\n  | 'borderBottomEndRadius'\n  | 'borderBottomLeftRadius'\n  | 'borderBottomRightRadius'\n  | 'borderBottomStartRadius'\n  | 'borderBottomWidth'\n  | 'borderLeftWidth'\n  | 'borderRadius'\n  | 'borderRightWidth'\n  | 'borderTopEndRadius'\n  | 'borderTopLeftRadius'\n  | 'borderTopRightRadius'\n  | 'borderEndWidth'\n  | 'borderStartWidth'\n  | 'borderTopStartRadius'\n  | 'borderTopWidth'\n  | 'borderWidth'\n  | 'left'\n  | 'top'\n  | 'right'\n  | 'bottom'\n  | 'shadowOffset'\n\ntype CSSColorNames =\n  | 'aliceblue'\n  | 'antiquewhite'\n  | 'aqua'\n  | 'aquamarine'\n  | 'azure'\n  | 'beige'\n  | 'bisque'\n  | 'black'\n  | 'blanchedalmond'\n  | 'blue'\n  | 'blueviolet'\n  | 'brown'\n  | 'burlywood'\n  | 'cadetblue'\n  | 'chartreuse'\n  | 'chocolate'\n  | 'coral'\n  | 'cornflowerblue'\n  | 'cornsilk'\n  | 'crimson'\n  | 'cyan'\n  | 'darkblue'\n  | 'darkcyan'\n  | 'darkgoldenrod'\n  | 'darkgray'\n  | 'darkgreen'\n  | 'darkkhaki'\n  | 'darkmagenta'\n  | 'darkolivegreen'\n  | 'darkorange'\n  | 'darkorchid'\n  | 'darkred'\n  | 'darksalmon'\n  | 'darkseagreen'\n  | 'darkslateblue'\n  | 'darkslategray'\n  | 'darkturquoise'\n  | 'darkviolet'\n  | 'deeppink'\n  | 'deepskyblue'\n  | 'dimgray'\n  | 'dodgerblue'\n  | 'firebrick'\n  | 'floralwhite'\n  | 'forestgreen'\n  | 'fuchsia'\n  | 'gainsboro'\n  | 'ghostwhite'\n  | 'gold'\n  | 'goldenrod'\n  | 'gray'\n  | 'green'\n  | 'greenyellow'\n  | 'honeydew'\n  | 'hotpink'\n  | 'indianred '\n  | 'indigo  '\n  | 'ivory'\n  | 'khaki'\n  | 'lavender'\n  | 'lavenderblush'\n  | 'lawngreen'\n  | 'lemonchiffon'\n  | 'lightblue'\n  | 'lightcoral'\n  | 'lightcyan'\n  | 'lightgoldenrodyellow'\n  | 'lightgrey'\n  | 'lightgreen'\n  | 'lightpink'\n  | 'lightsalmon'\n  | 'lightseagreen'\n  | 'lightskyblue'\n  | 'lightslategray'\n  | 'lightsteelblue'\n  | 'lightyellow'\n  | 'lime'\n  | 'limegreen'\n  | 'linen'\n  | 'magenta'\n  | 'maroon'\n  | 'mediumaquamarine'\n  | 'mediumblue'\n  | 'mediumorchid'\n  | 'mediumpurple'\n  | 'mediumseagreen'\n  | 'mediumslateblue'\n  | 'mediumspringgreen'\n  | 'mediumturquoise'\n  | 'mediumvioletred'\n  | 'midnightblue'\n  | 'mintcream'\n  | 'mistyrose'\n  | 'moccasin'\n  | 'navajowhite'\n  | 'navy'\n  | 'oldlace'\n  | 'olive'\n  | 'olivedrab'\n  | 'orange'\n  | 'orangered'\n  | 'orchid'\n  | 'palegoldenrod'\n  | 'palegreen'\n  | 'paleturquoise'\n  | 'palevioletred'\n  | 'papayawhip'\n  | 'peachpuff'\n  | 'peru'\n  | 'pink'\n  | 'plum'\n  | 'powderblue'\n  | 'purple'\n  | 'red'\n  | 'rosybrown'\n  | 'royalblue'\n  | 'saddlebrown'\n  | 'salmon'\n  | 'sandybrown'\n  | 'seagreen'\n  | 'seashell'\n  | 'sienna'\n  | 'silver'\n  | 'skyblue'\n  | 'slateblue'\n  | 'slategray'\n  | 'snow'\n  | 'springgreen'\n  | 'steelblue'\n  | 'tan'\n  | 'teal'\n  | 'thistle'\n  | 'tomato'\n  | 'turquoise'\n  | 'violet'\n  | 'wheat'\n  | 'white'\n  | 'whitesmoke'\n  | 'yellow'\n  | 'yellowgreen'\n\nexport type TamaguiComponentState = {\n  hover: boolean\n  press: boolean\n  pressIn: boolean\n  focus: boolean\n  mounted: boolean\n  animation?: null | {\n    style?: any\n    avoidClasses?: boolean\n  }\n}\n\nexport type SplitStyleState = TamaguiComponentState & {\n  noClassNames?: boolean\n  dynamicStylesInline?: boolean\n  resolveVariablesAs?: ResolveVariableTypes\n  fallbackProps?: Record<string, any>\n  keepVariantsAsProps?: boolean\n  hasTextAncestor?: boolean\n}\n\n// Animations:\n\ntype AnimationConfig = {\n  [key: string]: any\n}\n\n// includes a very limited adapter between various impls for number => style\n// this is useful only in limited scenarios like `Sheet`, but necessary in those cases\n\nexport type AnimatedNumberStrategy =\n  // only values shared between reanimated/react-native for now\n  | {\n      type: 'spring'\n      stiffness?: number\n      damping?: number\n      mass?: number\n      overshootClamping?: boolean\n      restSpeedThreshold?: number\n      restDisplacementThreshold?: number\n    }\n  | { type: 'timing'; duration: number }\n  | { type: 'direct' }\n\nexport type UniversalAnimatedNumber<A> = {\n  getInstance(): A\n  getValue(): number\n  setValue(next: number, config?: AnimatedNumberStrategy): void\n  stop(): void\n}\n\nexport type AnimationDriver<A extends AnimationConfig = AnimationConfig> = {\n  avoidClasses?: boolean\n  useAnimations: UseAnimationHook\n  useAnimatedNumber: (initial: number) => UniversalAnimatedNumber<any>\n  useAnimatedNumberStyle: <V extends UniversalAnimatedNumber<any>>(\n    val: V,\n    getStyle: (current: any) => any\n  ) => void\n  useAnimatedNumberReaction: (\n    val: UniversalAnimatedNumber<any>,\n    onValue: (current: number) => void\n  ) => void\n  animations: A\n  View?: any\n  Text?: any\n}\n\nexport type UseAnimationProps = TamaguiComponentPropsBase & Record<string, any>\n\nexport type UseAnimationHelpers = {\n  hostRef: RefObject<HTMLElement | View>\n  staticConfig: StaticConfigParsed\n  getStyle: (props?: {\n    isEntering?: boolean\n    isExiting?: boolean\n    exitVariant?: string | null\n    enterVariant?: string | null\n  }) => ViewStyle\n  state: SplitStyleState\n  pseudos: PseudoProps<ViewStyle>\n  // style: ViewStyle | null | undefined\n  // isMounted: boolean\n  // exitStyle?: ViewStyle | null\n  onDidAnimate?: any\n  delay?: number\n  // mergedStyles(props?: { isExiting?: boolean }): ViewStyle\n}\n\nexport type UseAnimationHook = (\n  props: UseAnimationProps,\n  helpers: UseAnimationHelpers\n) => null | {\n  style?: StackStylePropsBase | StackStylePropsBase[]\n}\n"],
   "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/constants/platform.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/constants/platform.ts"],
-  "sourcesContent": ["import { useEffect, useLayoutEffect } from 'react'\nimport { Platform } from 'react-native'\n\nexport const isAndroid = Platform?.OS === 'android'\nexport const isIOS = Platform?.OS === 'ios'\nexport const isWeb = process.env.TAMAGUI_TARGET === 'web'\nexport const isWindowDefined = typeof window !== 'undefined'\nexport const isSSR = isWeb && !isWindowDefined\nexport const isClient = isWeb && isWindowDefined\n\nexport const isRSC = process.env.ENABLE_RSC\n  ? // note this is statically analyzed so no funny business, just access it without optional chaining\n    // @ts-ignore\n    import.meta.env\n    ? // @ts-ignore\n      import.meta.env.SSR\n    : false\n  : false\n\nconst idFn = () => {}\nexport const useIsomorphicLayoutEffect = isRSC ? idFn : isSSR ? useEffect : useLayoutEffect\nexport const isChrome = typeof navigator !== 'undefined' && /Chrome/.test(navigator.userAgent || '')\nexport const isWebTouchable = isClient && 'ontouchstart' in window\nexport const isTouchable = !isWeb || isWebTouchable\n"],
-  "mappings": "AAAA;AAAA;AACA;AAEO,MAAM,YAAY,uCAAU,QAAO;AACnC,MAAM,QAAQ,uCAAU,QAAO;AAC/B,MAAM,QAAQ,QAAQ,IAAI,mBAAmB;AAC7C,MAAM,kBAAkB,OAAO,WAAW;AAC1C,MAAM,QAAQ,SAAS,CAAC;AACxB,MAAM,WAAW,SAAS;AAE1B,MAAM,QAAQ,QAAQ,IAAI,aAG7B,YAAY,MAEV,YAAY,IAAI,MAChB,QACF;AAEJ,MAAM,OAAO,MAAM;AAAC;AACb,MAAM,4BAA4B,QAAQ,OAAO,QAAQ,YAAY;AACrE,MAAM,WAAW,OAAO,cAAc,eAAe,SAAS,KAAK,UAAU,aAAa,EAAE;AAC5F,MAAM,iBAAiB,YAAY,kBAAkB;AACrD,MAAM,cAAc,CAAC,SAAS;",
+  "sourcesContent": ["import { useEffect, useLayoutEffect } from 'react'\nimport { Platform } from 'react-native'\n\nexport const isAndroid = Platform?.OS === 'android'\nexport const isIOS = Platform?.OS === 'ios'\nexport const isWeb = process.env.TAMAGUI_TARGET === 'web'\nexport const isWindowDefined = typeof window !== 'undefined'\nexport const isSSR = isWeb && !isWindowDefined\nexport const isClient = isWeb && isWindowDefined\n\n// may want to move to VITE_RSC_BUILD\nexport const isRSC = process.env.ENABLE_RSC\n  ? // note this is statically analyzed so no funny business, just access it without optional chaining\n    // @ts-ignore\n    import.meta.env\n    ? // @ts-ignore\n      import.meta.env.SSR\n    : false\n  : false\n\nconst idFn = () => {}\nexport const useIsomorphicLayoutEffect = isRSC ? idFn : isSSR ? useEffect : useLayoutEffect\nexport const isChrome = typeof navigator !== 'undefined' && /Chrome/.test(navigator.userAgent || '')\nexport const isWebTouchable = isClient && 'ontouchstart' in window\nexport const isTouchable = !isWeb || isWebTouchable\n"],
+  "mappings": "AAAA;AAAA;AACA;AAEO,MAAM,YAAY,uCAAU,QAAO;AACnC,MAAM,QAAQ,uCAAU,QAAO;AAC/B,MAAM,QAAQ,QAAQ,IAAI,mBAAmB;AAC7C,MAAM,kBAAkB,OAAO,WAAW;AAC1C,MAAM,QAAQ,SAAS,CAAC;AACxB,MAAM,WAAW,SAAS;AAG1B,MAAM,QAAQ,QAAQ,IAAI,aAG7B,YAAY,MAEV,YAAY,IAAI,MAChB,QACF;AAEJ,MAAM,OAAO,MAAM;AAAC;AACb,MAAM,4BAA4B,QAAQ,OAAO,QAAQ,YAAY;AACrE,MAAM,WAAW,OAAO,cAAc,eAAe,SAAS,KAAK,UAAU,aAAa,EAAE;AAC5F,MAAM,iBAAiB,YAAY,kBAAkB;AACrD,MAAM,cAAc,CAAC,SAAS;",
   "names": []
 }

package/dist/esm/createComponent.js

@@ -18,7 +18,8 @@ import React, {
   forwardRef,
   memo,
   useCallback,
-  useContext
+  useContext,
+  useEffect
 } from "react";
 import { StyleSheet, Text, View } from "react-native";
 import { getConfig, onConfiguredOnce } from "./config";
@@ -30,12 +31,15 @@ import { assignNativePropsToWeb } from "./helpers/assignNativePropsToWeb";
 import { getReturnVariablesAs } from "./helpers/createPropMapper";
 import { createShallowUpdate } from "./helpers/createShallowUpdate";
 import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig";
-import { insertSplitStyles, useSplitStyles } from "./helpers/getSplitStyles";
+import {
+  getSubStyle,
+  insertSplitStyles,
+  useSplitStyles
+} from "./helpers/getSplitStyles";
 import { getAllSelectors } from "./helpers/insertStyleRule";
 import { mergeProps } from "./helpers/mergeProps";
 import { proxyThemeVariables } from "./helpers/proxyThemeVariables";
-import { useFeatures } from "./hooks/useFeatures";
-import { mediaState } from "./hooks/useMedia";
+import { addMediaQueryListener, mediaState, removeMediaQueryListener } from "./hooks/useMedia";
 import { usePressable } from "./hooks/usePressable";
 import { useServerRef, useServerState } from "./hooks/useServerHooks";
 import { getThemeManager, useTheme } from "./hooks/useTheme";
@@ -68,6 +72,7 @@ function mergeShorthands({ defaultProps }, { shorthands }) {
 }
 let initialTheme;
 let config;
+let mediaPropNames = [];
 function createComponent(configIn, ParentComponent) {
   const staticConfig = (() => {
     const next = extendStaticConfig(configIn, ParentComponent);
@@ -136,23 +141,54 @@ function createComponent(configIn, ParentComponent) {
         }
       }
     }
-    const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitStyles;
+    const { viewProps: viewPropsIn, pseudos, medias, style, classNames, mediaKeys } = splitStyles;
+    useIsomorphicLayoutEffect(() => {
+      for (const key of mediaKeys) {
+        addMediaQueryListener(key, forceUpdate);
+      }
+      return () => {
+        for (const key of mediaKeys) {
+          removeMediaQueryListener(key, forceUpdate);
+        }
+      };
+    }, [mediaKeys.join(",")]);
     const useAnimations = (_a = tamaguiConfig == null ? void 0 : tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
     const isAnimated = !!(useAnimations && props.animation);
     const hasEnterStyle = !!props.enterStyle;
     const animationFeatureStylesIn = props.animation ? { ...defaultNativeStyle, ...style } : null;
-    const features = useFeatures(props, {
-      forceUpdate,
-      setStateShallow,
-      useAnimations,
-      state,
-      style: animationFeatureStylesIn,
-      pseudos,
-      staticConfig,
-      theme,
-      hostRef,
-      onDidAnimate: props.onDidAnimate
-    });
+    const propsWithAnimation = props;
+    if (!isRSC && isAnimated) {
+      const animationState = useAnimations(propsWithAnimation, {
+        state,
+        pseudos,
+        onDidAnimate: props.onDidAnimate,
+        hostRef,
+        staticConfig,
+        getStyle({ isExiting, isEntering, exitVariant, enterVariant } = {}) {
+          var _a2, _b2, _c2, _d2;
+          const style2 = animationFeatureStylesIn;
+          const enterStyle = isEntering ? enterVariant && ((_a2 = staticConfig.variants) == null ? void 0 : _a2[enterVariant]["true"]) ? getSubStyle("", (_b2 = staticConfig.variants) == null ? void 0 : _b2[enterVariant]["true"], staticConfig, theme, props, state, tamaguiConfig) || pseudos.enterStyle : pseudos.enterStyle : null;
+          const exitStyle = isExiting ? exitVariant && ((_c2 = staticConfig.variants) == null ? void 0 : _c2[exitVariant]["true"]) ? getSubStyle("", (_d2 = staticConfig.variants) == null ? void 0 : _d2[exitVariant]["true"], staticConfig, theme, props, state, tamaguiConfig) || pseudos.exitStyle : pseudos.exitStyle : null;
+          ensureBaseHasDefaults(style2, pseudos.hoverStyle, pseudos.focusStyle, pseudos.pressStyle, pseudos.pressStyle);
+          enterStyle && isEntering && merge(style2, enterStyle);
+          state.hover && pseudos.hoverStyle && merge(style2, pseudos.hoverStyle);
+          state.focus && pseudos.focusStyle && merge(style2, pseudos.focusStyle);
+          state.press && pseudos.pressStyle && merge(style2, pseudos.pressStyle);
+          exitStyle && isExiting && merge(style2, exitStyle);
+          if (process.env.NODE_ENV === "development") {
+            if (props["debug"]) {
+              console.log("animation style", style2);
+            }
+          }
+          return style2;
+        }
+      });
+      if (animationState !== state.animation) {
+        setStateShallow({
+          animation: animationState
+        });
+      }
+    }
     const {
       tag,
       hitSlop,
@@ -284,7 +320,14 @@ function createComponent(configIn, ParentComponent) {
           onStartShouldSetResponderCapture
         });
         const platformMethodsRef = usePlatformMethods(viewProps);
-        const setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef);
+        const shouldSetMounted = Boolean(isClient && (hasEnterStyle || props.animation) && !state.mounted);
+        const setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef, shouldSetMounted ? () => {
+          setTimeout(() => {
+            setStateShallow({
+              mounted: true
+            });
+          }, 10);
+        } : void 0);
         viewProps.ref = setRef;
       }
       if (props.href != void 0 && hrefAttrs != void 0) {
@@ -329,26 +372,13 @@ function createComponent(configIn, ParentComponent) {
         }
       });
     }
-    const internal = useServerRef();
-    if (!internal.current) {
-      internal.current = {
-        isMounted: true
-      };
+    if (!isRSC) {
+      useEffect(() => {
+        return () => {
+          mouseUps.delete(unPress);
+        };
+      }, []);
     }
-    useIsomorphicLayoutEffect(() => {
-      if (isClient && (hasEnterStyle || props.animation) && !state.mounted) {
-        setStateShallow({
-          mounted: true
-        });
-      }
-      internal.current.isMounted = true;
-      return () => {
-        var _a2;
-        mouseUps.delete(unPress);
-        internal.current.isMounted = false;
-        (_a2 = internal.current.unmountEffects) == null ? void 0 : _a2.forEach((cb) => cb());
-      };
-    }, [hasEnterStyle, props.animation]);
     let styles;
     const animationStyles = state.animation ? state.animation.style : null;
     if (isStringElement && shouldAvoidClasses && !shouldForcePseudo) {
@@ -365,11 +395,10 @@ function createComponent(configIn, ParentComponent) {
       ];
       if (!animationStyles && initialSplitStyles) {
         const initPseudos = initialSplitStyles.pseudos;
-        const force = shouldForcePseudo;
         !state.mounted && addPseudoToStyles(styles, initPseudos, pseudos, "enterStyle");
-        state.hover && addPseudoToStyles(styles, initPseudos, pseudos, "hoverStyle", force);
-        state.focus && addPseudoToStyles(styles, initPseudos, pseudos, "focusStyle", force);
-        state.press && addPseudoToStyles(styles, initPseudos, pseudos, "pressStyle", force);
+        state.hover && addPseudoToStyles(styles, initPseudos, pseudos, "hoverStyle", shouldForcePseudo);
+        state.focus && addPseudoToStyles(styles, initPseudos, pseudos, "focusStyle", shouldForcePseudo);
+        state.press && addPseudoToStyles(styles, initPseudos, pseudos, "pressStyle", shouldForcePseudo);
       }
       if (shouldForcePseudo) {
         const next = {};
@@ -426,8 +455,6 @@ function createComponent(configIn, ParentComponent) {
     const pressOutKey = handlesPressEvents ? "onPressOut" : "onMouseUp";
     const shouldAttach = !asChild && (attachPress || attachHover || "pressStyle" in props || "onPress" in props || "onPressIn" in props || "onPressOut" in props || isWeb && ("hoverStyle" in props || "onHoverIn" in props || "onHoverOut" in props || "onMouseEnter" in props || "onMouseLeave" in props));
     const unPress = useCallback(() => {
-      if (!internal.current.isMounted)
-        return;
       setStateShallow({
         press: false,
         pressIn: false
@@ -500,7 +527,7 @@ function createComponent(configIn, ParentComponent) {
       }
     } : null;
     let space = spaceProp;
-    if (features.enabled.mediaQuery) {
+    if (mediaKeys.length) {
       for (const key in mediaState) {
         if (!mediaState[key])
           continue;
@@ -577,7 +604,7 @@ function createComponent(configIn, ParentComponent) {
     content = createElement(elementType, viewProps, childEls);
     if (process.env.TAMAGUI_TARGET === "web") {
       const isAnimatedRNWView = isAnimated && typeof elementType !== "string";
-      const shouldWrapWithComponentTheme = isAnimatedRNWView && getReturnVariablesAs(props, splitStyleState) === "non-color-value";
+      const shouldWrapWithComponentTheme = !!theme.className && isAnimatedRNWView && getReturnVariablesAs(props, splitStyleState) === "non-color-value";
       const shouldWrapWithHover = Boolean(events || isRSC) && attachHover;
       if (shouldWrapWithHover || shouldWrapWithComponentTheme) {
         const themeClassName = shouldWrapWithComponentTheme ? `${theme.className}` : "";
@@ -609,7 +636,7 @@ function createComponent(configIn, ParentComponent) {
         console.groupEnd();
       }
     }
-    return !isRSC && features.elements.length ? /* @__PURE__ */ React.createElement(React.Fragment, null, features.elements, content) : content;
+    return content;
   });
   if (staticConfig.componentName) {
     component.displayName = staticConfig.componentName;
@@ -645,7 +672,7 @@ function createComponent(configIn, ParentComponent) {
       resolveVariablesAs: "both",
       keepVariantsAsProps: true
     }, void 0, void 0, debug);
-    const [defaults, defaultsClassnames] = mergeProps(component.defaultProps, initialSplitStyles.viewProps, true);
+    const [defaults2, defaultsClassnames] = mergeProps(component.defaultProps, initialSplitStyles.viewProps, true);
     initialSplitStyles.classNames = {
       ...parentClassNames,
       ...defaultsClassnames,
@@ -659,7 +686,7 @@ function createComponent(configIn, ParentComponent) {
         if (validPseudoKeys[key])
           continue;
         if (typeof val === "string" && val[0] === "$" || !validStyles2[key]) {
-          defaults[key] = val;
+          defaults2[key] = val;
         } else {
           defaultNativeStyle[key] = val;
         }
@@ -668,8 +695,8 @@ function createComponent(configIn, ParentComponent) {
     defaultNativeStyleSheet = StyleSheet.create({
       base: defaultNativeStyle
     });
-    if (Object.keys(defaults).length) {
-      tamaguiDefaultProps = defaults;
+    if (Object.keys(defaults2).length) {
+      tamaguiDefaultProps = defaults2;
     }
     if (process.env.NODE_ENV === "development" && debug) {
       if (process.env.IS_STATIC !== "is_static") {
@@ -678,7 +705,7 @@ function createComponent(configIn, ParentComponent) {
           initialSplitStyles,
           tamaguiDefaultProps,
           defaultNativeStyle,
-          defaults,
+          defaults: defaults2,
           defaultPropsIn
         });
       }
@@ -893,6 +920,69 @@ function mergeConfigDefaultProps(name, props, configDefaults, parentNames, conf)
   }
   return props;
 }
+const defaults = {
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  opacity: 1,
+  translateX: 0,
+  translateY: 0,
+  skew: 0,
+  skewX: 0,
+  skewY: 0,
+  scale: 1,
+  rotate: "0deg",
+  rotateY: "0deg",
+  rotateX: "0deg"
+};
+function ensureBaseHasDefaults(base, ...pseudos) {
+  for (const pseudo of pseudos) {
+    if (!pseudo)
+      continue;
+    for (const key in pseudo) {
+      const val = pseudo[key];
+      if (key === "transform") {
+        if (typeof val === "string") {
+          continue;
+        }
+        for (const t of val) {
+          const tkey = Object.keys(t)[0];
+          const defaultVal = defaults[tkey];
+          const tDefaultVal = { [tkey]: defaultVal };
+          if (!base.transform) {
+            base.transform = [tDefaultVal];
+          } else {
+            if (!base.transform.find((x) => x[tkey])) {
+              base.transform.push(tDefaultVal);
+            }
+          }
+        }
+      } else {
+        if (!(key in base)) {
+          base[key] = defaults[key];
+        }
+      }
+    }
+  }
+}
+function merge(base, next) {
+  if (!next.transform || !base.transform) {
+    Object.assign(base, next);
+    return;
+  }
+  const { transform, ...rest } = next;
+  Object.assign(base, rest);
+  for (const t of transform) {
+    const key = Object.keys(t)[0];
+    const existing = base.transform.find((x) => key in x);
+    if (existing) {
+      existing[key] = t[key];
+    } else {
+      base.transform.push(t);
+    }
+  }
+}
 export {
   Spacer,
   Unspaced,