@tamagui/core 1.0.0-beta.172 → 1.0.0-beta.189

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 CSS from 'csstype'\nimport React from 'react'\nimport {\n  GestureResponderEvent,\n  Image,\n  ImageProps,\n  TextProps as ReactTextProps,\n  Text,\n  TextInput,\n  TextInputProps,\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 { ThemeProviderProps } from './views/ThemeProvider'\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  font: { [key: GenericKey]: GenericFont }\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}\ntype GenericShorthands = {\n  // [key: string]: string\n}\n\ntype GenericMedia<K extends string = string> = {\n  // name => media shorthand name (camelCase) => value\n  [key in K]: {\n    [key: string]: number | string\n  }\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> = Partial<Pick<ThemeProviderProps, 'defaultTheme' | 'disableRootThemeClass'>> & {\n  tokens: A\n  themes: B\n  shorthands: C\n  media: D\n  animations: AnimationDriver<E>\n}\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>\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>\n// export type ThemeNameWithSubThemes = GetSubThemes<ThemeName>\nexport type ThemeKeys = keyof ThemeObject\nexport type ThemeTokens = `$${ThemeKeys}`\nexport type AnimationKeys = GetAnimationKeys<TamaguiConfig> & {}\n\ntype GetAltThemeNames<S> = (S extends `${string}_${infer Alt}` ? GetAltThemeNames<Alt> : S) | S\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> = CreateTamaguiConfig<A, B, C, D, E> & {\n  // TODO need to make it this but this breaks types, revisit\n  // animations: E //AnimationDriver<E>\n  Provider: (props: TamaguiProviderProps) => any\n  // with $ prefixes for fast lookups (one time cost at startup vs every render)\n  tokensParsed: CreateTokens<Variable>\n  themeConfig: any\n  getCSS: () => string\n  parsed: 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 StaticComponent> = A extends React.FunctionComponent<infer Props>\n  ? Props\n  : unknown\n\nexport type GenericFont = {\n  size: { [key: string | number]: number | Variable }\n  lineHeight: { [key: string | number]: number | Variable }\n  letterSpacing: { [key: string | number]: number | Variable }\n  weight: { [key: string | number]: number | string | Variable }\n  family: string | Variable\n}\n\n// media\nexport type MediaKeys = keyof Media\nexport type MediaQueryObject = { [key: string]: string | number | string }\nexport type MediaQueryState = {\n  [key in string]: boolean\n}\nexport type MediaQueryKey = keyof Media\nexport type MediaPropKeys = `$${MediaQueryKey}`\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?: MediaQueryKey[]\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//\n// base props that are accepted by createComponent (additional to react-native-web)\n//\ntype Something<A> = A extends symbol ? Something<{}> : A\n\ntype ComponentPropsBase = Something<{\n  debug?: boolean | 'break' | 'verbose'\n  disabled?: boolean\n  className?: string\n  id?: string\n  tag?: string\n  theme?: ThemeName | null\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: GestureResponderEvent) => any\n  // WEB ONLY\n  onMouseLeave?: (e: GestureResponderEvent) => any\n  space?: SpaceTokens\n}>\n\ntype GetTokenFontKeysFor<A extends 'size' | 'weight' | 'letterSpacing' | 'family' | 'lineHeight'> =\n  keyof Tokens['font'][keyof Tokens['font']][A]\n\ntype GetTokenString<A> = A extends string | number ? `$${A}` : `$${string}`\n\nexport type SizeTokens = GetTokenString<keyof Tokens['size']> | number\nexport type FontTokens = GetTokenString<keyof Tokens['font']>\nexport type FontSizeTokens = `$${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 FontLetterSpacingTokens = `$${GetTokenFontKeysFor<'letterSpacing'>}` | 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\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\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 PsuedoPropKeys = keyof PseudoProps<any>\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, psuedos...\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    animation?: AnimationKeys\n  }\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 StackStyleProps = WithThemeShorthandsPseudosMediaAnimation<StackStylePropsBase>\n\nexport type StackProps = Omit<ViewProps, 'display' | 'children'> &\n  RNWViewProps &\n  StackStyleProps &\n  ComponentPropsBase & {\n    // ref?: RefObject<View | HTMLElement> | ((node: View | HTMLElement) => any)\n    children?: any | any[]\n  }\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    userSelect?: CSS.Properties['userSelect']\n    textOverflow?: CSS.Properties['textOverflow']\n    whiteSpace?: CSS.Properties['whiteSpace']\n    wordWrap?: CSS.Properties['wordWrap']\n    cursor?: CSS.Properties['cursor']\n  }\n\nexport type TextStyleProps = WithThemeShorthandsPseudosMediaAnimation<TextStylePropsBase>\n\nexport type TextProps = ReactTextProps & RNWTextProps & TextStyleProps & ComponentPropsBase\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 StaticComponent<\n  Props = any,\n  VariantProps = any,\n  Ref = any,\n  StaticConfParsed extends StaticConfigParsed = StaticConfigParsed\n> = React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<Ref>> &\n  StaticComponentObject<StaticConfParsed, VariantProps>\n\ntype StaticComponentObject<Conf extends StaticConfigParsed, VariantProps extends any> = {\n  staticConfig: Conf\n  variantProps?: VariantProps\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?: StaticConfig) => X\n}\n\nexport type TamaguiProviderProps = Partial<Omit<ThemeProviderProps, 'children'>> & {\n  injectCSS?: boolean\n  fallback?: any\n  children?: any\n}\n\nexport type StaticConfigParsed = StaticConfig & {\n  parsed: true\n  propMapper: (\n    key: string,\n    value: any,\n    theme: ThemeObject,\n    props: any,\n    staticConfig: StaticConfig,\n    resolveVariablesAs?: ResolveVariableTypes,\n    avoidDefaultProps?: boolean\n  ) => undefined | boolean | { [key: string]: any }\n  variantsParsed?: {\n    [key: string]: {\n      [key: string]: any\n    }\n  }\n}\n\nexport type StaticConfig = {\n  Component?: React.FunctionComponent<any> & StaticComponentObject<any, any>\n\n  variants?: {\n    [key: string]: {\n      [key: string]:\n        | ((a: any, b: any) => any)\n        | {\n            [key: string]: any\n          }\n    }\n  }\n\n  /**\n   * Used for applying sub theme style\n   */\n  componentName?: string\n\n  /**\n   * 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?: any\n\n  /**\n   * If these props are encountered, bail on all optimization.\n   */\n  deoptProps?: Set<string>\n\n  /**\n   * If these props are encountered, leave them un-extracted.\n   */\n  inlineProps?: Set<string>\n\n  /**\n   * 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   * 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/**\n * --------------------------------------------\n *   variants\n * --------------------------------------------\n */\n\nexport type StylableComponent =\n  | StaticComponent\n  | React.Component\n  | React.ForwardRefExoticComponent<any>\n  | (new (props: any) => any)\n  | typeof View\n  | typeof Text\n  | typeof TextInput\n  | typeof Image\n\nexport type GetProps<A extends StylableComponent> = A extends StaticComponent<infer Props>\n  ? Props\n  : A extends React.Component<infer Props>\n  ? Omit<Props, keyof StackProps> & StackProps\n  : A extends new (props: infer Props) => any\n  ? Omit<Props, keyof StackProps> & StackProps\n  : A extends typeof View\n  ? ViewProps\n  : A extends typeof Text\n  ? TextProps\n  : A extends typeof TextInput\n  ? Partial<TextInputProps> & TextProps\n  : A extends typeof Image\n  ? Partial<ImageProps> & StackProps\n  : {}\n\nexport type VariantDefinitions<MyProps> = {\n  [propName: string]:\n    | {\n        [Key in '...fontSize']?: FontSizeVariantSpreadFunction<MyProps>\n      }\n    | {\n        [Key in '...size']?: SizeVariantSpreadFunction<MyProps>\n      }\n    | {\n        [Key in '...color']?: ColorVariantSpreadFunction<MyProps>\n      }\n    | {\n        [Key in '...lineHeight']?: FontLineHeightVariantSpreadFunction<MyProps>\n      }\n    | {\n        [Key in '...letterSpacing']?: FontLetterSpacingVariantSpreadFunction<MyProps>\n      }\n    | {\n        [Key in '...zIndex']?: ZIndexVariantSpreadFunction<MyProps>\n      }\n    | {\n        [Key in '...theme']?: ThemeVariantSpreadFunction<MyProps>\n      }\n    | {\n        [Key in string]: MyProps\n      }\n    | {\n        [Key in number]: MyProps\n      }\n}\n\nexport type GetVariantProps<Variants extends Object> = {\n  [key in keyof Variants]?: GetVariantValues<keyof Variants[key], keyof Variants[key]>\n}\n\nexport type VariantSpreadExtras<Props> = {\n  tokens: TamaguiConfig['tokens']\n  theme: Themes extends { [key: string]: infer B } ? B : unknown\n  props: Props\n}\n\nexport type VariantSpreadFunction<Props, Val = any> = (\n  val: Val,\n  config: VariantSpreadExtras<Props>\n) =>\n  | WithVariableValues<TextStylePropsBase>\n  | WithVariableValues<StackStylePropsBase>\n  | null\n  | undefined\n\ntype WithVariableValues<A extends { [key: string]: any }> = {\n  [Key in keyof A]: A[Key] | Variable\n}\n\nexport type GetVariants<Props> = void | {\n  [key: string]: {\n    [key: string]: Partial<Props> | VariantSpreadFunction<Props>\n  }\n}\n\nexport type GetVariantValues<Key, Val> = 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  : Val\n\nexport type FontSizeVariantSpreadFunction<A> = VariantSpreadFunction<A, FontSizeTokens>\nexport type SizeVariantSpreadFunction<A> = VariantSpreadFunction<A, SizeTokens>\nexport type ColorVariantSpreadFunction<A> = VariantSpreadFunction<A, ColorTokens>\nexport type FontLineHeightVariantSpreadFunction<A> = VariantSpreadFunction<A, FontLineHeightTokens>\nexport type FontLetterSpacingVariantSpreadFunction<A> = VariantSpreadFunction<\n  A,\n  FontLetterSpacingTokens\n>\nexport type ZIndexVariantSpreadFunction<A> = VariantSpreadFunction<A, ZIndexTokens>\nexport type ThemeVariantSpreadFunction<A> = VariantSpreadFunction<A, ThemeTokens>\n\n/**\n * --------------------------------------------\n *   end variants\n * --------------------------------------------\n */\n\ntype SizeKeys = 'width' | 'height' | 'minWidth' | 'minHeight' | 'maxWidth' | 'maxHeight'\n\ntype FontKeys = 'fontFamily'\n\ntype FontSizeKeys = 'fontSize'\n\ntype FontWeightKeys = 'fontWeight'\n\ntype FontLetterSpacingKeys = 'letterSpacing'\n\ntype LineHeightKeys = 'lineHeight'\n\ntype ZIndexKeys = 'zIndex'\n\ntype ColorKeys =\n  | 'color'\n  | 'backgroundColor'\n  | 'borderColor'\n  | 'borderBottomColor'\n  | 'borderTopColor'\n  | 'borderLeftColor'\n  | 'borderRightColor'\n  | 'shadowColor'\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\n// Animations:\n\ntype AnimationConfig = {\n  [key: string]: any\n}\n\nexport type AnimationDriver<A extends AnimationConfig = AnimationConfig> = {\n  avoidClasses?: boolean\n  useAnimations: UseAnimationHook\n  animations: A\n  View?: any\n  Text?: any\n}\n\nexport type UseAnimationProps = { animation: string; [key: string]: any }\nexport type UseAnimationState = {\n  style: ViewStyle | null | undefined\n  isMounted: boolean\n  exitStyle?: ViewStyle | null\n  onDidAnimate?: any\n  delay?: number\n}\n\nexport type UseAnimationHook = (\n  props: UseAnimationProps,\n  state: UseAnimationState\n) => {\n  style?: StackStylePropsBase\n}\n"],
+  "sourcesContent": ["// TODO split this into own package @tamagui/types to share with animations packages\n\nimport CSS from 'csstype'\nimport React from 'react'\nimport {\n  GestureResponderEvent,\n  Image,\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 { ThemeProviderProps } from './views/ThemeProvider'\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  font: { [key: GenericKey]: GenericFont }\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}\ntype GenericShorthands = {\n  // [key: string]: string\n}\n\ntype GenericMedia<K extends string = string> = {\n  // name => media shorthand name (camelCase) => value\n  [key in K]: {\n    [key: string]: number | string\n  }\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> = Partial<Pick<ThemeProviderProps, 'defaultTheme' | 'disableRootThemeClass'>> & {\n  tokens: A\n  themes: B\n  shorthands: C\n  media: D\n  animations: AnimationDriver<E>\n}\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>\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>\n// export type ThemeNameWithSubThemes = GetSubThemes<ThemeName>\nexport type ThemeKeys = keyof ThemeObject\nexport type ThemeTokens = `$${ThemeKeys}`\nexport type AnimationKeys = GetAnimationKeys<TamaguiConfig> & {}\n\ntype GetAltThemeNames<S> = (S extends `${string}_${infer Alt}` ? GetAltThemeNames<Alt> : S) | S\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> = CreateTamaguiConfig<A, B, C, D, E> & {\n  // TODO need to make it this but this breaks types, revisit\n  // animations: E //AnimationDriver<E>\n  Provider: (props: TamaguiProviderProps) => any\n  // with $ prefixes for fast lookups (one time cost at startup vs every render)\n  tokensParsed: CreateTokens<Variable>\n  themeConfig: any\n  getCSS: () => string\n  parsed: 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 StaticComponent> = A extends React.FunctionComponent<infer Props>\n  ? Props\n  : unknown\n\nexport type GenericFont = {\n  size: { [key: string | number]: number | Variable }\n  lineHeight: { [key: string | number]: number | Variable }\n  letterSpacing: { [key: string | number]: number | Variable }\n  weight: { [key: string | number]: number | string | Variable }\n  family: string | Variable\n}\n\n// media\nexport type MediaKeys = keyof Media\nexport type MediaQueryObject = { [key: string]: string | number | string }\nexport type MediaQueryState = {\n  [key in string]: boolean\n}\nexport type MediaQueryKey = keyof Media\nexport type MediaPropKeys = `$${MediaQueryKey}`\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?: MediaQueryKey[]\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//\n// base props that are accepted by createComponent (additional to react-native-web)\n//\ntype Something<A> = A extends symbol ? Something<{}> : A\n\ntype ComponentPropsBase = Something<{\n  debug?: boolean | 'break' | 'verbose'\n  disabled?: boolean\n  className?: string\n  id?: string\n  tag?: string\n  theme?: ThemeName | null\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: GestureResponderEvent) => any\n  // WEB ONLY\n  onMouseLeave?: (e: GestureResponderEvent) => any\n  space?: SpaceTokens\n}>\n\ntype GetTokenFontKeysFor<A extends 'size' | 'weight' | 'letterSpacing' | 'family' | 'lineHeight'> =\n  keyof Tokens['font'][keyof Tokens['font']][A]\n\ntype GetTokenString<A> = A extends string | number ? `$${A}` : `$${string}`\n\nexport type SizeTokens = GetTokenString<keyof Tokens['size']> | number\nexport type FontTokens = GetTokenString<keyof Tokens['font']>\nexport type FontSizeTokens = `$${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 FontLetterSpacingTokens = `$${GetTokenFontKeysFor<'letterSpacing'>}` | 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\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\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 PsuedoPropKeys = keyof PseudoProps<any>\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, psuedos...\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    animation?: AnimationKeys\n  }\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 StackStyleProps = WithThemeShorthandsPseudosMediaAnimation<StackStylePropsBase>\n\nexport type StackProps = Omit<ViewProps, 'display' | 'children'> &\n  RNWViewProps &\n  StackStyleProps &\n  ComponentPropsBase & {\n    // ref?: RefObject<View | HTMLElement> | ((node: View | HTMLElement) => any)\n    children?: any | any[]\n  }\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    userSelect?: CSS.Properties['userSelect']\n    textOverflow?: CSS.Properties['textOverflow']\n    whiteSpace?: CSS.Properties['whiteSpace']\n    wordWrap?: CSS.Properties['wordWrap']\n    cursor?: CSS.Properties['cursor']\n  }\n\nexport type TextStyleProps = WithThemeShorthandsPseudosMediaAnimation<TextStylePropsBase>\n\nexport type TextProps = ReactTextProps & RNWTextProps & TextStyleProps & ComponentPropsBase\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 StaticComponent<\n  Props = any,\n  VariantProps = any,\n  Ref = any,\n  StaticConfParsed extends StaticConfigParsed = StaticConfigParsed\n> = React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<Ref>> &\n  StaticComponentObject<StaticConfParsed, VariantProps>\n\ntype StaticComponentObject<Conf extends StaticConfigParsed, VariantProps extends any> = {\n  staticConfig: Conf\n  variantProps?: VariantProps\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?: StaticConfig) => X\n}\n\nexport type TamaguiProviderProps = Partial<Omit<ThemeProviderProps, 'children'>> & {\n  injectCSS?: boolean\n  fallback?: any\n  children?: any\n}\n\nexport type StaticConfigParsed = StaticConfig & {\n  parsed: true\n  propMapper: (\n    key: string,\n    value: any,\n    theme: ThemeObject,\n    props: any,\n    staticConfig: StaticConfig,\n    resolveVariablesAs?: ResolveVariableTypes,\n    avoidDefaultProps?: boolean\n  ) => undefined | boolean | { [key: string]: any }\n  variantsParsed?: {\n    [key: string]: {\n      [key: string]: any\n    }\n  }\n}\n\nexport type StaticConfig = {\n  Component?: React.FunctionComponent<any> & StaticComponentObject<any, any>\n\n  variants?: {\n    [key: string]: {\n      [key: string]:\n        | ((a: any, b: any) => any)\n        | {\n            [key: string]: any\n          }\n    }\n  }\n\n  /**\n   * Used for applying sub theme style\n   */\n  componentName?: string\n\n  /**\n   * 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?: any\n\n  /**\n   * If these props are encountered, bail on all optimization.\n   */\n  deoptProps?: Set<string>\n\n  /**\n   * If these props are encountered, leave them un-extracted.\n   */\n  inlineProps?: Set<string>\n\n  /**\n   * 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   * 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/**\n * --------------------------------------------\n *   variants\n * --------------------------------------------\n */\n\nexport type StylableComponent =\n  | StaticComponent\n  | React.Component\n  | React.ForwardRefExoticComponent<any>\n  | (new (props: any) => any)\n  | typeof View\n  | typeof Text\n  | typeof TextInput\n  | typeof Image\n\nexport type GetProps<A extends StylableComponent> = A extends StaticComponent<infer Props>\n  ? Props\n  : A extends React.Component<infer Props>\n  ? Omit<Props, keyof StackProps> & StackProps\n  : A extends new (props: infer Props) => any\n  ? Omit<Props, keyof StackProps> & StackProps\n  : {}\n\nexport type VariantDefinitions<MyProps> = {\n  [propName: string]:\n    | {\n        [Key in '...fontSize']?: FontSizeVariantSpreadFunction<MyProps>\n      }\n    | {\n        [Key in '...size']?: SizeVariantSpreadFunction<MyProps>\n      }\n    | {\n        [Key in '...color']?: ColorVariantSpreadFunction<MyProps>\n      }\n    | {\n        [Key in '...lineHeight']?: FontLineHeightVariantSpreadFunction<MyProps>\n      }\n    | {\n        [Key in '...letterSpacing']?: FontLetterSpacingVariantSpreadFunction<MyProps>\n      }\n    | {\n        [Key in '...zIndex']?: ZIndexVariantSpreadFunction<MyProps>\n      }\n    | {\n        [Key in '...theme']?: ThemeVariantSpreadFunction<MyProps>\n      }\n    | {\n        [Key in string]: MyProps | VariantSpreadFunction<MyProps, any>\n      }\n}\n\nexport type GetVariantProps<Variants extends Object> = {\n  [key in keyof Variants]?: GetVariantValues<keyof Variants[key], keyof Variants[key]>\n}\n\nexport type VariantSpreadExtras<Props> = {\n  tokens: TamaguiConfig['tokens']\n  theme: Themes extends { [key: string]: infer B } ? B : unknown\n  props: Props\n}\n\nexport type VariantSpreadFunction<Props, Val = any> = (\n  val: Val,\n  config: VariantSpreadExtras<Props>\n) =>\n  | WithVariableValues<TextStylePropsBase>\n  | WithVariableValues<StackStylePropsBase>\n  | null\n  | undefined\n\ntype WithVariableValues<A extends { [key: string]: any }> = {\n  [Key in keyof A]: A[Key] | Variable\n}\n\nexport type GetVariants<Props> = void | {\n  [key: string]: {\n    [key: string]: Partial<Props> | VariantSpreadFunction<Props>\n  }\n}\n\nexport type GetVariantValues<Key, Val> = 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  : Val\n\nexport type FontSizeVariantSpreadFunction<A> = VariantSpreadFunction<A, FontSizeTokens>\nexport type SizeVariantSpreadFunction<A> = VariantSpreadFunction<A, SizeTokens>\nexport type ColorVariantSpreadFunction<A> = VariantSpreadFunction<A, ColorTokens>\nexport type FontLineHeightVariantSpreadFunction<A> = VariantSpreadFunction<A, FontLineHeightTokens>\nexport type FontLetterSpacingVariantSpreadFunction<A> = VariantSpreadFunction<\n  A,\n  FontLetterSpacingTokens\n>\nexport type ZIndexVariantSpreadFunction<A> = VariantSpreadFunction<A, ZIndexTokens>\nexport type ThemeVariantSpreadFunction<A> = VariantSpreadFunction<A, ThemeTokens>\n\n/**\n * --------------------------------------------\n *   end variants\n * --------------------------------------------\n */\n\ntype SizeKeys = 'width' | 'height' | 'minWidth' | 'minHeight' | 'maxWidth' | 'maxHeight'\n\ntype FontKeys = 'fontFamily'\n\ntype FontSizeKeys = 'fontSize'\n\ntype FontWeightKeys = 'fontWeight'\n\ntype FontLetterSpacingKeys = 'letterSpacing'\n\ntype LineHeightKeys = 'lineHeight'\n\ntype ZIndexKeys = 'zIndex'\n\ntype ColorKeys =\n  | 'color'\n  | 'backgroundColor'\n  | 'borderColor'\n  | 'borderBottomColor'\n  | 'borderTopColor'\n  | 'borderLeftColor'\n  | 'borderRightColor'\n  | 'shadowColor'\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\n// Animations:\n\ntype AnimationConfig = {\n  [key: string]: any\n}\n\nexport type AnimationDriver<A extends AnimationConfig = AnimationConfig> = {\n  avoidClasses?: boolean\n  useAnimations: UseAnimationHook\n  animations: A\n  View?: any\n  Text?: any\n}\n\nexport type UseAnimationProps = { animation: string; [key: string]: any }\nexport type UseAnimationState = {\n  style: ViewStyle | null | undefined\n  isMounted: boolean\n  exitStyle?: ViewStyle | null\n  onDidAnimate?: any\n  delay?: number\n}\n\nexport type UseAnimationHook = (\n  props: UseAnimationProps,\n  state: UseAnimationState\n) => {\n  style?: StackStylePropsBase\n}\n"],
   "mappings": ";;;;;;;;;;;;;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/views/Theme.js

@@ -32,28 +32,16 @@ import_react.default["createElement"];
 const Theme = (0, import_react.memo)(/* @__PURE__ */ __name(function Theme2(props) {
   var _a, _b;
   const { name, theme, themeManager, themes, className } = (0, import_static.useChangeThemeEffect)(props.name, void 0, props);
-  const contents = (0, import_react.useMemo)(() => {
-    if (!name || !theme) {
-      return props.children;
-    }
-    return (0, import_wrapThemeManagerContext.wrapThemeManagerContext)(props.children, themeManager);
-  }, [props.children, themeManager]);
-  if (!themes) {
-    console.warn("Error, no themes in context", props);
-    return props.children;
-  }
-  if (!name || !theme) {
-    if (process.env.NODE_ENV === "development" && name && !theme) {
+  if (!themes || !name || !theme) {
+    if (name && !theme && process.env.NODE_ENV === "development") {
       console.warn(`No theme found by name ${name}`);
     }
     return props.children;
   }
+  const contents = (0, import_react.useMemo)(() => (0, import_wrapThemeManagerContext.wrapThemeManagerContext)(props.children, themeManager), [props.children, themeManager]);
   if (import_platform.isWeb) {
-    if (props.disableThemeClass) {
-      return contents;
-    }
     return /* @__PURE__ */ import_react.default.createElement("div", {
-      className: props.className ? `${className || ""} ${props.className || ""}` : className || "",
+      className: props.disableThemeClass ? "" : props.className ? `${className || ""} ${props.className || ""}` : className || "",
       style: {
         display: "contents",
         color: (_b = (_a = themes[name]) == null ? void 0 : _a.color) == null ? void 0 : _b.toString()

package/dist/cjs/views/Theme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
-  "sourcesContent": ["import React, { memo, useMemo } from 'react'\n\nimport { isWeb } from '../constants/platform'\nimport { wrapThemeManagerContext } from '../helpers/wrapThemeManagerContext'\nimport { useChangeThemeEffect } from '../static'\nimport { ThemeName } from '../types'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nexport type ThemeProps = {\n  className?: string\n  disableThemeClass?: boolean\n  name: Exclude<ThemeName, number> | null\n  children?: any\n  debug?: boolean\n}\n\nexport const Theme = memo(function Theme(props: ThemeProps) {\n  const { name, theme, themeManager, themes, className } = useChangeThemeEffect(\n    props.name,\n    undefined,\n    props\n  )\n\n  // memo here, changing theme without re-rendering all children is a critical optimization\n  // may require some effort of end user to memoize but without this memo they'd have no option\n  const contents = useMemo(() => {\n    if (!name || !theme) {\n      return props.children\n    }\n    return wrapThemeManagerContext(props.children, themeManager)\n  }, [props.children, themeManager])\n\n  if (!themes) {\n    console.warn('Error, no themes in context', props)\n    return props.children\n  }\n\n  if (!name || !theme) {\n    if (process.env.NODE_ENV === 'development' && name && !theme) {\n      console.warn(`No theme found by name ${name}`)\n    }\n    return props.children\n  }\n\n  if (isWeb) {\n    if (props.disableThemeClass) {\n      return contents\n    }\n    return (\n      <div\n        className={\n          props.className ? `${className || ''} ${props.className || ''}` : className || ''\n        }\n        style={{\n          display: 'contents',\n          // in order to provide currentColor, set color by default\n          color: themes[name]?.color?.toString(),\n        }}\n      >\n        {contents}\n      </div>\n    )\n  }\n\n  return contents\n})\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqC;AAErC,sBAAsB;AACtB,qCAAwC;AACxC,oBAAqC;AAIrC,qBAAM;AAUC,MAAM,QAAQ,uBAAK,uCAAe,OAAmB;AAlB5D;AAmBE,QAAM,EAAE,MAAM,OAAO,cAAc,QAAQ,cAAc,wCACvD,MAAM,MACN,QACA,KACF;AAIA,QAAM,WAAW,0BAAQ,MAAM;AAC7B,QAAI,CAAC,QAAQ,CAAC,OAAO;AACnB,aAAO,MAAM;AAAA,IACf;AACA,WAAO,4DAAwB,MAAM,UAAU,YAAY;AAAA,EAC7D,GAAG,CAAC,MAAM,UAAU,YAAY,CAAC;AAEjC,MAAI,CAAC,QAAQ;AACX,YAAQ,KAAK,+BAA+B,KAAK;AACjD,WAAO,MAAM;AAAA,EACf;AAEA,MAAI,CAAC,QAAQ,CAAC,OAAO;AACnB,QAAI,QAAQ,IAAI,aAAa,iBAAiB,QAAQ,CAAC,OAAO;AAC5D,cAAQ,KAAK,0BAA0B,MAAM;AAAA,IAC/C;AACA,WAAO,MAAM;AAAA,EACf;AAEA,MAAI,uBAAO;AACT,QAAI,MAAM,mBAAmB;AAC3B,aAAO;AAAA,IACT;AACA,WACE,mDAAC;AAAA,MACC,WACE,MAAM,YAAY,GAAG,aAAa,MAAM,MAAM,aAAa,OAAO,aAAa;AAAA,MAEjF,OAAO;AAAA,QACL,SAAS;AAAA,QAET,OAAO,mBAAO,UAAP,mBAAc,UAAd,mBAAqB;AAAA,MAC9B;AAAA,OAEC,QACH;AAAA,EAEJ;AAEA,SAAO;AACT,GAjD0B,QAiDzB;",
+  "sourcesContent": ["import React, { memo, useMemo } from 'react'\n\nimport { isWeb } from '../constants/platform'\nimport { wrapThemeManagerContext } from '../helpers/wrapThemeManagerContext'\nimport { useChangeThemeEffect } from '../static'\nimport { ThemeName } from '../types'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nexport type ThemeProps = {\n  className?: string\n  disableThemeClass?: boolean\n  name: Exclude<ThemeName, number> | null\n  children?: any\n  debug?: boolean\n}\n\nexport const Theme = memo(function Theme(props: ThemeProps) {\n  const { name, theme, themeManager, themes, className } = useChangeThemeEffect(\n    props.name,\n    undefined,\n    props\n  )\n\n  if (!themes || !name || !theme) {\n    if (name && !theme && process.env.NODE_ENV === 'development') {\n      console.warn(`No theme found by name ${name}`)\n    }\n    return props.children\n  }\n\n  // memo here, changing theme without re-rendering all children is a critical optimization\n  // may require some effort of end user to memoize but without this memo they'd have no option\n  const contents = useMemo(\n    () => wrapThemeManagerContext(props.children, themeManager),\n    [props.children, themeManager]\n  )\n\n  if (isWeb) {\n    return (\n      <div\n        className={\n          props.disableThemeClass\n            ? ''\n            : props.className\n            ? `${className || ''} ${props.className || ''}`\n            : className || ''\n        }\n        style={{\n          display: 'contents',\n          // in order to provide currentColor, set color by default\n          color: themes[name]?.color?.toString(),\n        }}\n      >\n        {contents}\n      </div>\n    )\n  }\n\n  return contents\n})\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAqC;AAErC,sBAAsB;AACtB,qCAAwC;AACxC,oBAAqC;AAIrC,qBAAM;AAUC,MAAM,QAAQ,uBAAK,uCAAe,OAAmB;AAlB5D;AAmBE,QAAM,EAAE,MAAM,OAAO,cAAc,QAAQ,cAAc,wCACvD,MAAM,MACN,QACA,KACF;AAEA,MAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO;AAC9B,QAAI,QAAQ,CAAC,SAAS,QAAQ,IAAI,aAAa,eAAe;AAC5D,cAAQ,KAAK,0BAA0B,MAAM;AAAA,IAC/C;AACA,WAAO,MAAM;AAAA,EACf;AAIA,QAAM,WAAW,0BACf,MAAM,4DAAwB,MAAM,UAAU,YAAY,GAC1D,CAAC,MAAM,UAAU,YAAY,CAC/B;AAEA,MAAI,uBAAO;AACT,WACE,mDAAC;AAAA,MACC,WACE,MAAM,oBACF,KACA,MAAM,YACN,GAAG,aAAa,MAAM,MAAM,aAAa,OACzC,aAAa;AAAA,MAEnB,OAAO;AAAA,QACL,SAAS;AAAA,QAET,OAAO,mBAAO,UAAP,mBAAc,UAAd,mBAAqB;AAAA,MAC9B;AAAA,OAEC,QACH;AAAA,EAEJ;AAEA,SAAO;AACT,GA3C0B,QA2CzB;",
   "names": []
 }

package/dist/esm/ThemeManager.js

@@ -61,7 +61,6 @@ class ThemeManager {
         return theme[key];
       }
       manager = this.parentManager;
-      console.log("go to parent", this.name, manager == null ? void 0 : manager.name);
       if (!manager) {
         return;
       }
@@ -69,7 +68,6 @@ class ThemeManager {
         return;
       }
       theme = manager.theme;
-      console.log("getting parent");
     }
   }
   update({ name, theme, className } = {}) {

package/dist/esm/ThemeManager.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ThemeManager.tsx"],
-  "sourcesContent": ["import { createContext } from 'react'\n\nimport { getThemes } from './conf'\nimport { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from './static'\nimport { ThemeObject, Themes } from './types'\n\ntype ThemeListener = (name: string | null, themeManager: ThemeManager) => void\n\nexport type SetActiveThemeProps = {\n  className?: string\n  parentManager?: ThemeManager | null\n  name?: string | null\n  theme?: any\n}\n\nexport class ThemeManager {\n  keys = new Map<any, Set<string>>()\n  listeners = new Map<any, Function>()\n  themeListeners = new Set<ThemeListener>()\n  className: string | null = null\n\n  constructor(\n    public name: string | null = null,\n    public theme: ThemeObject | null = null,\n    public parentManager: ThemeManager | null = null\n  ) {\n    // find the nearest different parentManager\n    let parent = parentManager\n    let tries = 0\n    while (true) {\n      tries++\n      if (tries > 10) {\n        throw new Error(`Nested 10 of the same theme in a row, likely error`)\n      }\n      if (!parent) break\n      if (parent.name === name) {\n        // go up if same\n        parent = parent.parentManager\n      } else {\n        this.parentManager = parent\n        break\n      }\n    }\n  }\n\n  get parentName() {\n    return this.parentManager?.name || null\n  }\n\n  get fullName(): string {\n    return this.getNextTheme().name || this.name || ''\n    // const parentName = this.parentManager?.fullName || ''\n    // const name = this.name || ''\n    // const parts = [...new Set([...`${parentName}_${name}`.split('_')])].filter(Boolean)\n    // return parts.join('_')\n  }\n\n  // gets value going up to parents\n  getValue(key: string) {\n    let theme = this.theme\n    let manager = this as ThemeManager | null\n    while (true) {\n      if (!theme) return\n      if (key in theme) {\n        return theme[key]\n      }\n      manager = this.parentManager\n      console.log('go to parent', this.name, manager?.name)\n      if (!manager) {\n        return\n      }\n      if (manager.theme === theme) {\n        return\n      }\n      theme = manager.theme\n      console.log('getting parent')\n    }\n  }\n\n  update({ name, theme, className }: SetActiveThemeProps = {}) {\n    // className compare on web, avoids light/dark re-renders\n    const sameNameOrClassName = this.className\n      ? // == instead of === (sometimes its undefined/null)\n        className == this.className\n      : name === this.name\n    if (sameNameOrClassName) {\n      return false\n    }\n    this.className = className || null\n    this.name = name || null\n    this.theme = theme\n    this.notifyListeners()\n    return true\n  }\n\n  getNextTheme(\n    opts: { themes?: Themes; name?: string | null; componentName?: string | null } = {},\n    props?: any\n  ) {\n    const { themes = getThemes(), name, componentName } = opts\n\n    if (!name) {\n      if (componentName) {\n        const name = `${this.name}_${componentName}`\n        const theme = themes[name]\n        if (theme) {\n          return { name, theme, className: this.#getClassName(name) }\n        }\n      }\n      return {\n        name: this.name,\n        theme: this.theme,\n      }\n    }\n\n    let nextName = name || this.name || ''\n    let parentName = this.fullName\n\n    while (true) {\n      if (nextName in themes) {\n        break\n      }\n      nextName = `${parentName}_${name}`\n      if (nextName in themes) {\n        break\n      }\n      if (!parentName.includes(THEME_NAME_SEPARATOR)) {\n        // not found!\n        console.warn('theme not found', name)\n        break\n      }\n      // go up one\n      parentName = parentName.slice(0, parentName.lastIndexOf(THEME_NAME_SEPARATOR))\n    }\n\n    if (componentName) {\n      const componentThemeName = `${nextName}_${componentName}`\n      if (componentThemeName in themes) {\n        nextName = componentThemeName\n      }\n    }\n\n    let theme = themes[nextName]\n    if (!theme) {\n      theme = themes[`light_${nextName}`]\n    }\n\n    if (process.env.NODE_ENV === 'development' && props && props['debug']) {\n      console.log('getNextTheme', { opts, nextName, parentName }, this)\n    }\n\n    return {\n      name: nextName,\n      theme,\n      className: this.#getClassName(nextName),\n    }\n  }\n\n  #getClassName(name: string) {\n    return `${THEME_CLASSNAME_PREFIX}${name} tui_theme`.replace('light_', '').replace('dark_', '')\n  }\n\n  track(uuid: any, keys: Set<string>) {\n    if (!this.name) return\n    this.keys.set(uuid, keys)\n  }\n\n  notifyListeners() {\n    if (!this.name) {\n      this.keys.clear()\n    }\n    for (const [uuid, keys] of this.keys.entries()) {\n      if (keys.size) {\n        this.listeners.get(uuid)?.()\n      }\n    }\n    this.themeListeners.forEach((cb) => cb(this.name, this))\n  }\n\n  onChangeTheme(cb: ThemeListener) {\n    this.themeListeners.add(cb)\n    return () => {\n      this.themeListeners.delete(cb)\n    }\n  }\n\n  onUpdate(uuid: any, cb: Function) {\n    this.listeners.set(uuid, cb)\n    return () => {\n      this.listeners.delete(uuid)\n      this.keys.delete(uuid)\n    }\n  }\n}\n\nexport const ThemeManagerContext = createContext<ThemeManager | null>(null)\nexport const emptyManager = new ThemeManager()\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { createContext } from 'react'\n\nimport { getThemes } from './conf'\nimport { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from './static'\nimport { ThemeObject, Themes } from './types'\n\ntype ThemeListener = (name: string | null, themeManager: ThemeManager) => void\n\nexport type SetActiveThemeProps = {\n  className?: string\n  parentManager?: ThemeManager | null\n  name?: string | null\n  theme?: any\n}\n\nexport class ThemeManager {\n  keys = new Map<any, Set<string>>()\n  listeners = new Map<any, Function>()\n  themeListeners = new Set<ThemeListener>()\n  className: string | null = null\n\n  constructor(\n    public name: string | null = null,\n    public theme: ThemeObject | null = null,\n    public parentManager: ThemeManager | null = null\n  ) {\n    // find the nearest different parentManager\n    let parent = parentManager\n    let tries = 0\n    while (true) {\n      tries++\n      if (tries > 10) {\n        throw new Error(`Nested 10 of the same theme in a row, likely error`)\n      }\n      if (!parent) break\n      if (parent.name === name) {\n        // go up if same\n        parent = parent.parentManager\n      } else {\n        this.parentManager = parent\n        break\n      }\n    }\n  }\n\n  get parentName() {\n    return this.parentManager?.name || null\n  }\n\n  get fullName(): string {\n    return this.getNextTheme().name || this.name || ''\n    // const parentName = this.parentManager?.fullName || ''\n    // const name = this.name || ''\n    // const parts = [...new Set([...`${parentName}_${name}`.split('_')])].filter(Boolean)\n    // return parts.join('_')\n  }\n\n  // gets value going up to parents\n  getValue(key: string) {\n    let theme = this.theme\n    let manager = this as ThemeManager | null\n    while (true) {\n      if (!theme) return\n      if (key in theme) {\n        return theme[key]\n      }\n      manager = this.parentManager\n      if (!manager) {\n        return\n      }\n      if (manager.theme === theme) {\n        return\n      }\n      theme = manager.theme\n    }\n  }\n\n  update({ name, theme, className }: SetActiveThemeProps = {}) {\n    // className compare on web, avoids light/dark re-renders\n    const sameNameOrClassName = this.className\n      ? // == instead of === (sometimes its undefined/null)\n        className == this.className\n      : name === this.name\n    if (sameNameOrClassName) {\n      return false\n    }\n    this.className = className || null\n    this.name = name || null\n    this.theme = theme\n    this.notifyListeners()\n    return true\n  }\n\n  getNextTheme(\n    opts: { themes?: Themes; name?: string | null; componentName?: string | null } = {},\n    props?: any\n  ) {\n    const { themes = getThemes(), name, componentName } = opts\n\n    if (!name) {\n      if (componentName) {\n        const name = `${this.name}_${componentName}`\n        const theme = themes[name]\n        if (theme) {\n          return { name, theme, className: this.#getClassName(name) }\n        }\n      }\n      return {\n        name: this.name,\n        theme: this.theme,\n      }\n    }\n\n    let nextName = name || this.name || ''\n    let parentName = this.fullName\n\n    while (true) {\n      if (nextName in themes) {\n        break\n      }\n      nextName = `${parentName}_${name}`\n      if (nextName in themes) {\n        break\n      }\n      if (!parentName.includes(THEME_NAME_SEPARATOR)) {\n        // not found!\n        console.warn('theme not found', name)\n        break\n      }\n      // go up one\n      parentName = parentName.slice(0, parentName.lastIndexOf(THEME_NAME_SEPARATOR))\n    }\n\n    if (componentName) {\n      const componentThemeName = `${nextName}_${componentName}`\n      if (componentThemeName in themes) {\n        nextName = componentThemeName\n      }\n    }\n\n    let theme = themes[nextName]\n    if (!theme) {\n      theme = themes[`light_${nextName}`]\n    }\n\n    if (process.env.NODE_ENV === 'development' && props && props['debug']) {\n      console.log('getNextTheme', { opts, nextName, parentName }, this)\n    }\n\n    return {\n      name: nextName,\n      theme,\n      className: this.#getClassName(nextName),\n    }\n  }\n\n  #getClassName(name: string) {\n    return `${THEME_CLASSNAME_PREFIX}${name} tui_theme`.replace('light_', '').replace('dark_', '')\n  }\n\n  track(uuid: any, keys: Set<string>) {\n    if (!this.name) return\n    this.keys.set(uuid, keys)\n  }\n\n  notifyListeners() {\n    if (!this.name) {\n      this.keys.clear()\n    }\n    for (const [uuid, keys] of this.keys.entries()) {\n      if (keys.size) {\n        this.listeners.get(uuid)?.()\n      }\n    }\n    this.themeListeners.forEach((cb) => cb(this.name, this))\n  }\n\n  onChangeTheme(cb: ThemeListener) {\n    this.themeListeners.add(cb)\n    return () => {\n      this.themeListeners.delete(cb)\n    }\n  }\n\n  onUpdate(uuid: any, cb: Function) {\n    this.listeners.set(uuid, cb)\n    return () => {\n      this.listeners.delete(uuid)\n      this.keys.delete(uuid)\n    }\n  }\n}\n\nexport const ThemeManagerContext = createContext<ThemeManager | null>(null)\nexport const emptyManager = new ThemeManager()\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/helpers/createMediaStyle.js

@@ -2,19 +2,16 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { mediaObjectToString } from "../hooks/useMedia";
 const MEDIA_SEP = "_";
-const createMediaStyle = /* @__PURE__ */ __name(({ identifier, rules }, mediaKey, mediaQueries, negate, importance = 0) => {
+const createMediaStyle = /* @__PURE__ */ __name(({ identifier, rules }, mediaKey, mediaQueries, negate, importance) => {
   const mediaKeys = Object.keys(mediaQueries);
-  const mediaKeyPrecendence = mediaKeys.reduce((acc, cur, i) => {
-    acc[cur] = new Array(importance + 1).fill(":root").join("");
-    return acc;
-  }, {});
+  const importance_ = Math.max(0, importance == void 0 ? mediaKeys.indexOf(mediaKey) : importance || 0);
+  const precendencePrefix = new Array(importance_ + 1).fill(":root").join("");
   const negKey = negate ? "0" : "";
   const ogPrefix = identifier.slice(0, identifier.indexOf("-") + 1);
   const nextIdentifier = `${identifier.replace(ogPrefix, `${ogPrefix}${MEDIA_SEP}${mediaKey}${negKey}${MEDIA_SEP}`)}`;
   const screenStr = negate ? "not all" : "screen";
   const mediaSelector = mediaObjectToString(mediaQueries[mediaKey]);
   const mediaQuery = `${screenStr} and ${mediaSelector}`;
-  const precendencePrefix = mediaKeyPrecendence[mediaKey];
   const styleInner = rules[0].replace(identifier, nextIdentifier);
   let styleRule = "";
   if (styleInner.includes("@media")) {

package/dist/esm/helpers/createMediaStyle.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/createMediaStyle.ts"],
-  "sourcesContent": ["import { StyleObject } from '@tamagui/helpers'\n\nimport { mediaObjectToString } from '../hooks/useMedia'\nimport { MediaQueries } from '../types'\n\n// TODO have this be used by extractMediaStyle in tamagui static\n\n// not synced to static/constants for now\nexport const MEDIA_SEP = '_'\n\nexport const createMediaStyle = (\n  { identifier, rules }: StyleObject,\n  mediaKey: string,\n  mediaQueries: MediaQueries,\n  negate?: boolean,\n  importance = 0\n) => {\n  const mediaKeys = Object.keys(mediaQueries)\n  const mediaKeyPrecendence = mediaKeys.reduce((acc, cur, i) => {\n    acc[cur] = new Array(importance + 1).fill(':root').join('')\n    return acc\n  }, {})\n  const negKey = negate ? '0' : ''\n  const ogPrefix = identifier.slice(0, identifier.indexOf('-') + 1)\n  const nextIdentifier = `${identifier.replace(\n    ogPrefix,\n    `${ogPrefix}${MEDIA_SEP}${mediaKey}${negKey}${MEDIA_SEP}`\n  )}`\n  const screenStr = negate ? 'not all' : 'screen'\n  const mediaSelector = mediaObjectToString(mediaQueries[mediaKey])\n  const mediaQuery = `${screenStr} and ${mediaSelector}`\n  const precendencePrefix = mediaKeyPrecendence[mediaKey]\n  const styleInner = rules[0].replace(identifier, nextIdentifier)\n  // combines media queries if they already exist\n  let styleRule = ''\n  if (styleInner.includes('@media')) {\n    // combine\n    styleRule = styleInner.replace('{', ` and ${mediaQuery} {`)\n  } else {\n    styleRule = `@media ${mediaQuery} { ${precendencePrefix} ${styleInner} }`\n  }\n  return {\n    styleRule,\n    identifier: nextIdentifier,\n  }\n}\n"],
-  "mappings": ";;AAEA;AAMO,MAAM,YAAY;AAElB,MAAM,mBAAmB,wBAC9B,EAAE,YAAY,SACd,UACA,cACA,QACA,aAAa,MACV;AACH,QAAM,YAAY,OAAO,KAAK,YAAY;AAC1C,QAAM,sBAAsB,UAAU,OAAO,CAAC,KAAK,KAAK,MAAM;AAC5D,QAAI,OAAO,IAAI,MAAM,aAAa,CAAC,EAAE,KAAK,OAAO,EAAE,KAAK,EAAE;AAC1D,WAAO;AAAA,EACT,GAAG,CAAC,CAAC;AACL,QAAM,SAAS,SAAS,MAAM;AAC9B,QAAM,WAAW,WAAW,MAAM,GAAG,WAAW,QAAQ,GAAG,IAAI,CAAC;AAChE,QAAM,iBAAiB,GAAG,WAAW,QACnC,UACA,GAAG,WAAW,YAAY,WAAW,SAAS,WAChD;AACA,QAAM,YAAY,SAAS,YAAY;AACvC,QAAM,gBAAgB,oBAAoB,aAAa,SAAS;AAChE,QAAM,aAAa,GAAG,iBAAiB;AACvC,QAAM,oBAAoB,oBAAoB;AAC9C,QAAM,aAAa,MAAM,GAAG,QAAQ,YAAY,cAAc;AAE9D,MAAI,YAAY;AAChB,MAAI,WAAW,SAAS,QAAQ,GAAG;AAEjC,gBAAY,WAAW,QAAQ,KAAK,QAAQ,cAAc;AAAA,EAC5D,OAAO;AACL,gBAAY,UAAU,gBAAgB,qBAAqB;AAAA,EAC7D;AACA,SAAO;AAAA,IACL;AAAA,IACA,YAAY;AAAA,EACd;AACF,GAnCgC;",
+  "sourcesContent": ["import { StyleObject } from '@tamagui/helpers'\n\nimport { mediaObjectToString } from '../hooks/useMedia'\nimport { MediaQueries } from '../types'\n\n// TODO have this be used by extractMediaStyle in tamagui static\n// not synced to static/constants for now\nexport const MEDIA_SEP = '_'\n\nexport const createMediaStyle = (\n  { identifier, rules }: StyleObject,\n  mediaKey: string,\n  mediaQueries: MediaQueries,\n  negate?: boolean,\n  importance?: number\n) => {\n  const mediaKeys = Object.keys(mediaQueries)\n  const importance_ = Math.max(\n    0,\n    importance == undefined ? mediaKeys.indexOf(mediaKey) : importance || 0\n  )\n  const precendencePrefix = new Array(importance_ + 1).fill(':root').join('')\n  const negKey = negate ? '0' : ''\n  const ogPrefix = identifier.slice(0, identifier.indexOf('-') + 1)\n  const nextIdentifier = `${identifier.replace(\n    ogPrefix,\n    `${ogPrefix}${MEDIA_SEP}${mediaKey}${negKey}${MEDIA_SEP}`\n  )}`\n  const screenStr = negate ? 'not all' : 'screen'\n  const mediaSelector = mediaObjectToString(mediaQueries[mediaKey])\n  const mediaQuery = `${screenStr} and ${mediaSelector}`\n  const styleInner = rules[0].replace(identifier, nextIdentifier)\n  // combines media queries if they already exist\n  let styleRule = ''\n  if (styleInner.includes('@media')) {\n    // combine\n    styleRule = styleInner.replace('{', ` and ${mediaQuery} {`)\n  } else {\n    styleRule = `@media ${mediaQuery} { ${precendencePrefix} ${styleInner} }`\n  }\n  return {\n    styleRule,\n    identifier: nextIdentifier,\n  }\n}\n"],
+  "mappings": ";;AAEA;AAKO,MAAM,YAAY;AAElB,MAAM,mBAAmB,wBAC9B,EAAE,YAAY,SACd,UACA,cACA,QACA,eACG;AACH,QAAM,YAAY,OAAO,KAAK,YAAY;AAC1C,QAAM,cAAc,KAAK,IACvB,GACA,cAAc,SAAY,UAAU,QAAQ,QAAQ,IAAI,cAAc,CACxE;AACA,QAAM,oBAAoB,IAAI,MAAM,cAAc,CAAC,EAAE,KAAK,OAAO,EAAE,KAAK,EAAE;AAC1E,QAAM,SAAS,SAAS,MAAM;AAC9B,QAAM,WAAW,WAAW,MAAM,GAAG,WAAW,QAAQ,GAAG,IAAI,CAAC;AAChE,QAAM,iBAAiB,GAAG,WAAW,QACnC,UACA,GAAG,WAAW,YAAY,WAAW,SAAS,WAChD;AACA,QAAM,YAAY,SAAS,YAAY;AACvC,QAAM,gBAAgB,oBAAoB,aAAa,SAAS;AAChE,QAAM,aAAa,GAAG,iBAAiB;AACvC,QAAM,aAAa,MAAM,GAAG,QAAQ,YAAY,cAAc;AAE9D,MAAI,YAAY;AAChB,MAAI,WAAW,SAAS,QAAQ,GAAG;AAEjC,gBAAY,WAAW,QAAQ,KAAK,QAAQ,cAAc;AAAA,EAC5D,OAAO;AACL,gBAAY,UAAU,gBAAgB,qBAAqB;AAAA,EAC7D;AACA,SAAO;AAAA,IACL;AAAA,IACA,YAAY;AAAA,EACd;AACF,GAnCgC;",
   "names": []
 }

package/dist/esm/helpers/getSplitStyles.js

@@ -34,6 +34,7 @@ function normalizeStyleObject(style) {
 }
 __name(normalizeStyleObject, "normalizeStyleObject");
 const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state, defaultClassNames) => {
+  var _a, _b, _c;
   const validStyleProps = staticConfig.isText ? stylePropsText : validStyles;
   const viewProps = {};
   const style = {};
@@ -71,9 +72,6 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
     if (isWeb && !state.noClassNames) {
       const atomic = getStylesAtomic(cur);
       for (const atomicStyle of atomic) {
-        if (atomicStyle.property === "transform" && classNames.transform) {
-          console.log("TODO figure out merging transforms..........");
-        }
         if (!state.noClassNames) {
           mergeClassName(atomicStyle.property, atomicStyle.identifier);
           insertStyleRule(atomicStyle.identifier, atomicStyle.rules[0]);
@@ -134,10 +132,11 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
         }
         pseudos[key] = pseudos[key] || {};
         pseudos[key] = getSubStyle(val, staticConfig, theme, props, state.resolveVariablesAs, true);
-        if (!state.noClassNames) {
+        if (isWeb && !state.noClassNames) {
           const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] });
-          if (props["debug"])
-            console.log("gogo", key, val, state.noClassNames, pseudoStyles);
+          if ((_b = (_a = pseudoStyles[0]) == null ? void 0 : _a.identifier) == null ? void 0 : _b.includes("undefined")) {
+            console.warn("undefined bug?", (_c = pseudoStyles[0]) == null ? void 0 : _c.identifier);
+          }
           for (const style2 of pseudoStyles) {
             mergeClassName(`${style2.property}-${key}`, style2.identifier);
             insertStyleRule(style2.identifier, style2.rules[0]);

package/dist/esm/helpers/getSplitStyles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/getSplitStyles.tsx"],
-  "sourcesContent": ["import {\n  mergeTransform,\n  stylePropsText,\n  stylePropsTransform,\n  validPseudoKeys,\n  validStyles,\n} from '@tamagui/helpers'\nimport { ViewStyle } from 'react-native'\n\nimport { isWeb } from '../constants/platform'\nimport { ComponentState } from '../defaultComponentState'\nimport { mediaQueryConfig, mediaState } from '../hooks/useMedia'\nimport {\n  MediaKeys,\n  MediaQueryKey,\n  PsuedoPropKeys,\n  StackProps,\n  StaticConfigParsed,\n  ThemeObject,\n} from '../types'\nimport { createMediaStyle } from './createMediaStyle'\nimport { ResolveVariableTypes } from './createPropMapper'\nimport { fixNativeShadow } from './fixNativeShadow'\nimport { ViewStyleWithPseudos, getStylesAtomic } from './getStylesAtomic'\nimport { insertStyleRule, insertedTransforms, updateInserted } from './insertStyleRule'\n\nexport type SplitStyles = ReturnType<typeof getSplitStyles>\n\nconst skipKeys = {\n  // could put events in here\n  animation: true,\n  animated: true,\n  children: true,\n  key: true,\n  ref: true,\n}\n\nexport type PseudoStyles = {\n  hoverStyle?: ViewStyle\n  pressStyle?: ViewStyle\n  focusStyle?: ViewStyle\n  enterStyle?: ViewStyle\n  exitStyle?: ViewStyle\n}\n\nexport type ClassNamesObject = Record<string, string>\n\nexport type SplitStyleResult = ReturnType<typeof getSplitStyles>\n\nfunction normalizeStyleObject(style: any) {\n  // fix flex to match web\n  // see spec for flex shorthand https://developer.mozilla.org/en-US/docs/Web/CSS/flex\n  if (typeof style.flex === 'number') {\n    const val = style.flex\n    delete style.flex\n    style.flexGrow = style.flexGrow ?? val\n    style.flexShrink = style.flexShrink ?? 1\n  }\n\n  if (!isWeb) {\n    fixNativeShadow(style)\n  }\n}\n\ntype TransformNamespaceKey = 'transform' | PsuedoPropKeys | MediaQueryKey\n\n// TODO can make a few of these objects lazy if profiling seems slow\n\nexport const getSplitStyles = (\n  props: { [key: string]: any },\n  staticConfig: StaticConfigParsed,\n  theme: ThemeObject,\n  state: Partial<ComponentState> & {\n    noClassNames?: boolean\n    resolveVariablesAs?: ResolveVariableTypes\n  },\n  defaultClassNames?: ClassNamesObject | null\n) => {\n  const validStyleProps = staticConfig.isText ? stylePropsText : validStyles\n  const viewProps: StackProps = {}\n  const style: ViewStyle = {}\n  const classNames: ClassNamesObject = {\n    ...defaultClassNames,\n  }\n  const pseudos: PseudoStyles = {}\n  const medias: Record<MediaKeys, ViewStyle> = {}\n  let cur: ViewStyleWithPseudos | null = null\n\n  // we need to gather these specific to each media query / pseudo\n  // value is [hash, val], so [\"-jnjad-asdnjk\", \"scaleX(1) rotate(10deg)\"]\n  let transforms: Record<TransformNamespaceKey, [string, string]> = {}\n\n  function mergeClassName(key: string, val: string) {\n    if (!val) return\n    if (val.startsWith('_transform-')) {\n      const isMediaOrPseudo = key !== 'transform'\n      const isMedia = isMediaOrPseudo && key[11] === '_'\n      const isPsuedo = isMediaOrPseudo && !isMedia\n      const namespace: TransformNamespaceKey = isMedia\n        ? key.split('_')[2]\n        : isPsuedo\n        ? key.split('-')[1]\n        : 'transform'\n      if (!insertedTransforms[val]) {\n        // HMR or loaded a new chunk\n        updateInserted()\n      }\n      const transform = insertedTransforms[val]\n      // if (!transform) {\n      //   console.error('NO TRANSFORM', key, val)\n      //   return\n      // }\n      transforms[namespace] = transforms[namespace] || ['', '']\n      transforms[namespace][0] += val.replace('_transform', '')\n      transforms[namespace][1] += transform\n    } else {\n      classNames[key] = val\n    }\n  }\n\n  function push() {\n    if (!cur) return\n    normalizeStyleObject(cur)\n    if (isWeb && !state.noClassNames) {\n      const atomic = getStylesAtomic(cur)\n      for (const atomicStyle of atomic) {\n        if (atomicStyle.property === 'transform' && classNames.transform) {\n          console.log('TODO figure out merging transforms..........')\n        }\n        if (!state.noClassNames) {\n          mergeClassName(atomicStyle.property, atomicStyle.identifier)\n          insertStyleRule(atomicStyle.identifier, atomicStyle.rules[0])\n        } else {\n          style[atomicStyle.property] = atomicStyle.value\n        }\n      }\n    } else {\n      for (const key in cur) {\n        if (key in stylePropsTransform) {\n          mergeTransform(style, key, cur[key])\n        } else {\n          style[key] = cur[key]\n        }\n      }\n    }\n    // reset it for next group of styles\n    cur = null\n  }\n\n  for (const keyInit in props) {\n    const valInit = props[keyInit]\n\n    if (skipKeys[keyInit]) {\n      viewProps[keyInit] = valInit\n      continue\n    }\n\n    if (\n      // isPropClassName\n      keyInit === 'className' ||\n      // isExtractedClassName\n      (validStyleProps[keyInit] && valInit && valInit[0] === '_')\n    ) {\n      push()\n      mergeClassName(keyInit, valInit)\n      if (cur) {\n        if (cur[keyInit]) console.warn('just want to see how used')\n        delete cur[keyInit]\n      }\n      continue\n    }\n\n    let isMedia = keyInit[0] === '$'\n    let isPseudo = validPseudoKeys[keyInit]\n\n    const out =\n      isMedia || isPseudo\n        ? true\n        : staticConfig.propMapper(\n            keyInit,\n            valInit,\n            theme,\n            props,\n            staticConfig,\n            state.resolveVariablesAs\n          )\n\n    const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out)\n\n    for (const [key, val] of expanded) {\n      if (val === undefined) {\n        continue\n      }\n\n      if (val && val[0] === '_') {\n        mergeClassName(key, val)\n        continue\n      }\n\n      isMedia = key[0] === '$'\n      isPseudo = validPseudoKeys[key]\n\n      if (\n        (staticConfig.deoptProps && staticConfig.deoptProps.has(key)) ||\n        (staticConfig.inlineProps && staticConfig.inlineProps.has(key))\n      ) {\n        viewProps[key] = val\n      }\n\n      // pseudo\n      if (isPseudo) {\n        if (!val) continue\n        if (key === 'enterStyle' && state.mounted) {\n          // once mounted we can ignore enterStyle\n          continue\n        }\n        pseudos[key] = pseudos[key] || {}\n        pseudos[key] = getSubStyle(val, staticConfig, theme, props, state.resolveVariablesAs, true)\n        if (!state.noClassNames) {\n          const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] })\n          if (props['debug']) console.log('gogo', key, val, state.noClassNames, pseudoStyles)\n          for (const style of pseudoStyles) {\n            mergeClassName(`${style.property}-${key}`, style.identifier)\n            insertStyleRule(style.identifier, style.rules[0])\n          }\n        }\n        continue\n      }\n\n      // media\n      if (isMedia) {\n        const mediaKey = key.slice(1)\n\n        if (!mediaQueryConfig[mediaKey]) {\n          // this isn't a media key, pass through\n          viewProps[key] = valInit\n          continue\n        }\n\n        // dont check if media is active, we just apply *all* media styles\n        // we combine the media props on top regular props, could proxy this\n        // TODO test proxy here instead of merge\n        // THIS USED TO PROXY BACK TO REGULAR PROPS BUT THAT IS THE WRONG BEHAVIOR\n        // we avoid passing in default props for media queries because that would confuse things like SizableText.size:\n        const mediaStyle = getSubStyle(\n          valInit,\n          staticConfig,\n          theme,\n          props,\n          state.resolveVariablesAs,\n          true\n        )\n\n        if (isWeb) {\n          const mediaStyles = getStylesAtomic(mediaStyle)\n          for (const style of mediaStyles) {\n            const out = createMediaStyle(style, mediaKey, mediaQueryConfig)\n            mergeClassName(`${out.identifier}-${mediaKey}`, out.identifier)\n            insertStyleRule(out.identifier, out.styleRule)\n          }\n          if (mediaState[mediaKey]) {\n            Object.assign(medias, mediaStyle)\n          }\n        } else {\n          if (mediaState[mediaKey]) {\n            // TODO i think media + pseudo needs handling here\n            Object.assign(style, mediaStyle)\n          }\n        }\n        continue\n      }\n\n      // TODO\n      if (key === 'style' || key.startsWith('_style')) {\n        push()\n        Object.assign(style, val)\n        continue\n      }\n\n      if (!isWeb && key === 'pointerEvents') {\n        viewProps[key] = val\n        continue\n      }\n\n      if (validStyleProps[key]) {\n        cur = cur || {}\n        cur[key] = val\n        continue\n      }\n\n      // pass to view props\n      if (!staticConfig.variants || !(key in staticConfig.variants)) {\n        if (key !== 'animation' && key !== 'debug') {\n          push()\n          viewProps[key] = val\n        }\n      }\n    }\n  }\n\n  push()\n\n  if (transforms) {\n    for (const namespace in transforms) {\n      const [hash, val] = transforms[namespace]\n      const identifier = `_transform${hash}`\n      if (!insertedTransforms[identifier]) {\n        const rule = `.${identifier} { transform: ${val}; }`\n        insertStyleRule(identifier, rule)\n      }\n      classNames[namespace] = identifier\n    }\n  }\n\n  return {\n    viewProps,\n    style,\n    medias,\n    pseudos,\n    classNames,\n  }\n}\n\nconst getSubStyle = (\n  styleIn: Object,\n  staticConfig: StaticConfigParsed,\n  theme: ThemeObject,\n  props: any,\n  resolveVariablesAs?: ResolveVariableTypes,\n  avoidDefaultProps?: boolean\n): ViewStyle => {\n  const styleOut: ViewStyle = {}\n  for (const key in styleIn) {\n    const val = styleIn[key]\n    const out = staticConfig.propMapper(\n      key,\n      val,\n      theme,\n      props,\n      staticConfig,\n      resolveVariablesAs,\n      avoidDefaultProps\n    )\n    const expanded = out === true || !out ? [[key, val]] : Object.entries(out)\n    for (const [skey, sval] of expanded) {\n      if (skey in stylePropsTransform) {\n        mergeTransform(styleOut, skey, sval)\n      } else {\n        styleOut[skey] = sval\n      }\n    }\n  }\n  normalizeStyleObject(styleOut)\n  return styleOut\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  mergeTransform,\n  stylePropsText,\n  stylePropsTransform,\n  validPseudoKeys,\n  validStyles,\n} from '@tamagui/helpers'\nimport { ViewStyle } from 'react-native'\n\nimport { isWeb } from '../constants/platform'\nimport { ComponentState } from '../defaultComponentState'\nimport { mediaQueryConfig, mediaState } from '../hooks/useMedia'\nimport {\n  MediaKeys,\n  MediaQueryKey,\n  PsuedoPropKeys,\n  StackProps,\n  StaticConfigParsed,\n  ThemeObject,\n} from '../types'\nimport { createMediaStyle } from './createMediaStyle'\nimport { ResolveVariableTypes } from './createPropMapper'\nimport { fixNativeShadow } from './fixNativeShadow'\nimport { ViewStyleWithPseudos, getStylesAtomic } from './getStylesAtomic'\nimport { insertStyleRule, insertedTransforms, updateInserted } from './insertStyleRule'\n\nexport type SplitStyles = ReturnType<typeof getSplitStyles>\n\nconst skipKeys = {\n  // could put events in here\n  animation: true,\n  animated: true,\n  children: true,\n  key: true,\n  ref: true,\n}\n\nexport type PseudoStyles = {\n  hoverStyle?: ViewStyle\n  pressStyle?: ViewStyle\n  focusStyle?: ViewStyle\n  enterStyle?: ViewStyle\n  exitStyle?: ViewStyle\n}\n\nexport type ClassNamesObject = Record<string, string>\n\nexport type SplitStyleResult = ReturnType<typeof getSplitStyles>\n\nfunction normalizeStyleObject(style: any) {\n  // fix flex to match web\n  // see spec for flex shorthand https://developer.mozilla.org/en-US/docs/Web/CSS/flex\n  if (typeof style.flex === 'number') {\n    const val = style.flex\n    delete style.flex\n    style.flexGrow = style.flexGrow ?? val\n    style.flexShrink = style.flexShrink ?? 1\n  }\n\n  if (!isWeb) {\n    fixNativeShadow(style)\n  }\n}\n\ntype TransformNamespaceKey = 'transform' | PsuedoPropKeys | MediaQueryKey\n\n// TODO can make a few of these objects lazy if profiling seems slow\n\nexport const getSplitStyles = (\n  props: { [key: string]: any },\n  staticConfig: StaticConfigParsed,\n  theme: ThemeObject,\n  state: Partial<ComponentState> & {\n    noClassNames?: boolean\n    resolveVariablesAs?: ResolveVariableTypes\n  },\n  defaultClassNames?: ClassNamesObject | null\n) => {\n  const validStyleProps = staticConfig.isText ? stylePropsText : validStyles\n  const viewProps: StackProps = {}\n  const style: ViewStyle = {}\n  const classNames: ClassNamesObject = {\n    ...defaultClassNames,\n  }\n  const pseudos: PseudoStyles = {}\n  const medias: Record<MediaKeys, ViewStyle> = {}\n  let cur: ViewStyleWithPseudos | null = null\n\n  // we need to gather these specific to each media query / pseudo\n  // value is [hash, val], so [\"-jnjad-asdnjk\", \"scaleX(1) rotate(10deg)\"]\n  let transforms: Record<TransformNamespaceKey, [string, string]> = {}\n\n  function mergeClassName(key: string, val: string) {\n    if (!val) return\n    if (val.startsWith('_transform-')) {\n      const isMediaOrPseudo = key !== 'transform'\n      const isMedia = isMediaOrPseudo && key[11] === '_'\n      const isPsuedo = isMediaOrPseudo && !isMedia\n      const namespace: TransformNamespaceKey = isMedia\n        ? key.split('_')[2]\n        : isPsuedo\n        ? key.split('-')[1]\n        : 'transform'\n      if (!insertedTransforms[val]) {\n        // HMR or loaded a new chunk\n        updateInserted()\n      }\n      const transform = insertedTransforms[val]\n      // if (!transform) {\n      //   console.error('NO TRANSFORM', key, val)\n      //   return\n      // }\n      transforms[namespace] = transforms[namespace] || ['', '']\n      transforms[namespace][0] += val.replace('_transform', '')\n      transforms[namespace][1] += transform\n    } else {\n      classNames[key] = val\n    }\n  }\n\n  function push() {\n    if (!cur) return\n    normalizeStyleObject(cur)\n    if (isWeb && !state.noClassNames) {\n      const atomic = getStylesAtomic(cur)\n      for (const atomicStyle of atomic) {\n        if (!state.noClassNames) {\n          mergeClassName(atomicStyle.property, atomicStyle.identifier)\n          insertStyleRule(atomicStyle.identifier, atomicStyle.rules[0])\n        } else {\n          style[atomicStyle.property] = atomicStyle.value\n        }\n      }\n    } else {\n      for (const key in cur) {\n        if (key in stylePropsTransform) {\n          mergeTransform(style, key, cur[key])\n        } else {\n          style[key] = cur[key]\n        }\n      }\n    }\n    // reset it for next group of styles\n    cur = null\n  }\n\n  for (const keyInit in props) {\n    const valInit = props[keyInit]\n\n    if (skipKeys[keyInit]) {\n      viewProps[keyInit] = valInit\n      continue\n    }\n\n    if (\n      // isPropClassName\n      keyInit === 'className' ||\n      // isExtractedClassName\n      (validStyleProps[keyInit] && valInit && valInit[0] === '_')\n    ) {\n      push()\n      mergeClassName(keyInit, valInit)\n      if (cur) {\n        if (cur[keyInit]) console.warn('just want to see how used')\n        delete cur[keyInit]\n      }\n      continue\n    }\n\n    let isMedia = keyInit[0] === '$'\n    let isPseudo = validPseudoKeys[keyInit]\n\n    const out =\n      isMedia || isPseudo\n        ? true\n        : staticConfig.propMapper(\n            keyInit,\n            valInit,\n            theme,\n            props,\n            staticConfig,\n            state.resolveVariablesAs\n          )\n\n    const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out)\n\n    for (const [key, val] of expanded) {\n      if (val === undefined) {\n        continue\n      }\n\n      if (val && val[0] === '_') {\n        mergeClassName(key, val)\n        continue\n      }\n\n      isMedia = key[0] === '$'\n      isPseudo = validPseudoKeys[key]\n\n      if (\n        (staticConfig.deoptProps && staticConfig.deoptProps.has(key)) ||\n        (staticConfig.inlineProps && staticConfig.inlineProps.has(key))\n      ) {\n        viewProps[key] = val\n      }\n\n      // pseudo\n      if (isPseudo) {\n        if (!val) continue\n        if (key === 'enterStyle' && state.mounted) {\n          // once mounted we can ignore enterStyle\n          continue\n        }\n        pseudos[key] = pseudos[key] || {}\n        pseudos[key] = getSubStyle(val, staticConfig, theme, props, state.resolveVariablesAs, true)\n        if (isWeb && !state.noClassNames) {\n          const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] })\n          if (pseudoStyles[0]?.identifier?.includes('undefined')) {\n            console.warn('undefined bug?', pseudoStyles[0]?.identifier)\n          }\n          for (const style of pseudoStyles) {\n            mergeClassName(`${style.property}-${key}`, style.identifier)\n            insertStyleRule(style.identifier, style.rules[0])\n          }\n        }\n        continue\n      }\n\n      // media\n      if (isMedia) {\n        const mediaKey = key.slice(1)\n\n        if (!mediaQueryConfig[mediaKey]) {\n          // this isn't a media key, pass through\n          viewProps[key] = valInit\n          continue\n        }\n\n        // dont check if media is active, we just apply *all* media styles\n        // we combine the media props on top regular props, could proxy this\n        // TODO test proxy here instead of merge\n        // THIS USED TO PROXY BACK TO REGULAR PROPS BUT THAT IS THE WRONG BEHAVIOR\n        // we avoid passing in default props for media queries because that would confuse things like SizableText.size:\n        const mediaStyle = getSubStyle(\n          valInit,\n          staticConfig,\n          theme,\n          props,\n          state.resolveVariablesAs,\n          true\n        )\n\n        if (isWeb) {\n          const mediaStyles = getStylesAtomic(mediaStyle)\n          for (const style of mediaStyles) {\n            const out = createMediaStyle(style, mediaKey, mediaQueryConfig)\n            mergeClassName(`${out.identifier}-${mediaKey}`, out.identifier)\n            insertStyleRule(out.identifier, out.styleRule)\n          }\n          if (mediaState[mediaKey]) {\n            Object.assign(medias, mediaStyle)\n          }\n        } else {\n          if (mediaState[mediaKey]) {\n            // TODO i think media + pseudo needs handling here\n            Object.assign(style, mediaStyle)\n          }\n        }\n        continue\n      }\n\n      // TODO\n      if (key === 'style' || key.startsWith('_style')) {\n        push()\n        Object.assign(style, val)\n        continue\n      }\n\n      if (!isWeb && key === 'pointerEvents') {\n        viewProps[key] = val\n        continue\n      }\n\n      if (validStyleProps[key]) {\n        cur = cur || {}\n        cur[key] = val\n        continue\n      }\n\n      // pass to view props\n      if (!staticConfig.variants || !(key in staticConfig.variants)) {\n        if (key !== 'animation' && key !== 'debug') {\n          push()\n          viewProps[key] = val\n        }\n      }\n    }\n  }\n\n  push()\n\n  if (transforms) {\n    for (const namespace in transforms) {\n      const [hash, val] = transforms[namespace]\n      const identifier = `_transform${hash}`\n      if (!insertedTransforms[identifier]) {\n        const rule = `.${identifier} { transform: ${val}; }`\n        insertStyleRule(identifier, rule)\n      }\n      classNames[namespace] = identifier\n    }\n  }\n\n  return {\n    viewProps,\n    style,\n    medias,\n    pseudos,\n    classNames,\n  }\n}\n\nconst getSubStyle = (\n  styleIn: Object,\n  staticConfig: StaticConfigParsed,\n  theme: ThemeObject,\n  props: any,\n  resolveVariablesAs?: ResolveVariableTypes,\n  avoidDefaultProps?: boolean\n): ViewStyle => {\n  const styleOut: ViewStyle = {}\n  for (const key in styleIn) {\n    const val = styleIn[key]\n    const out = staticConfig.propMapper(\n      key,\n      val,\n      theme,\n      props,\n      staticConfig,\n      resolveVariablesAs,\n      avoidDefaultProps\n    )\n    const expanded = out === true || !out ? [[key, val]] : Object.entries(out)\n    for (const [skey, sval] of expanded) {\n      if (skey in stylePropsTransform) {\n        mergeTransform(styleOut, skey, sval)\n      } else {\n        styleOut[skey] = sval\n      }\n    }\n  }\n  normalizeStyleObject(styleOut)\n  return styleOut\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/helpers/insertStyleRule.js

@@ -20,14 +20,16 @@ function addTransform(identifier, rule) {
 __name(addTransform, "addTransform");
 let hasInsertedSinceUpdate = true;
 function updateInserted() {
-  if (typeof window === "undefined") {
+  if (typeof document === "undefined") {
     return;
   }
   if (!hasInsertedSinceUpdate) {
     console.warn("hasnt inserted since");
     return;
   }
-  const sheets = window.document.styleSheets;
+  const sheets = document.styleSheets;
+  if (!sheets)
+    return;
   for (let i = 0; i < sheets.length; i++) {
     const rules = sheets[i].cssRules;
     const firstRule = rules[0];
@@ -52,7 +54,7 @@ function updateInserted() {
 }
 __name(updateInserted, "updateInserted");
 updateInserted();
-const newRulesStyleTag = typeof window !== "undefined" ? document.head.appendChild(document.createElement("style")) : null;
+const newRulesStyleTag = typeof document !== "undefined" ? document.head.appendChild(document.createElement("style")) : null;
 function insertStyleRule(identifier, rule) {
   if (allSelectors[identifier]) {
     return;

package/dist/esm/helpers/insertStyleRule.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/insertStyleRule.tsx"],
-  "sourcesContent": ["// this needs to check if its inserted already? 99% of the time it is\n// this should avoid re-inserts, but need to test the perf trade-offs\n// i tested with the site itself and the initial insert was trivial\n\nconst allSelectors = {}\nconst insertedSelectors = {}\nexport const insertedTransforms = {}\n\nexport const getAllSelectors = () => allSelectors\nexport const getInsertedRules = () => Object.values(insertedSelectors)\nexport const getAllTransforms = () => insertedTransforms\n\n// keep transforms in map for merging later\nfunction addTransform(identifier: string, rule: string) {\n  const s = rule.indexOf('transform:')\n  if (s === -1) {\n    console.error(`not a transform ${identifier} ${rule}`)\n    return\n  }\n  const startI = s + 'transform:'.length\n  const endI = rule.indexOf(';')\n  const value = rule.slice(startI, endI)\n  insertedTransforms[identifier] = value\n}\n\n// gets existing ones (client side)\n// takes ~0.1ms for a fairly large page\n// used now for three things:\n//   1. debugging at dev time\n//   2. avoid duplicate insert styles at runtime\n//   3. used now for merging transforms atomically\nlet hasInsertedSinceUpdate = true\nexport function updateInserted() {\n  if (typeof window === 'undefined') {\n    return\n  }\n  if (!hasInsertedSinceUpdate) {\n    console.warn('hasnt inserted since')\n    return\n  }\n  const sheets = window.document.styleSheets\n  for (let i = 0; i < sheets.length; i++) {\n    const rules = sheets[i].cssRules\n    const firstRule = rules[0]\n    if (!firstRule) continue\n    const firstSelector = firstRule['selectorText']\n    if (!firstSelector) continue\n    if (firstSelector === ':root' || firstSelector.startsWith('._')) {\n      for (const rule of rules as any) {\n        if (!rule.selectorText) continue\n        const identifier = rule.selectorText.slice(1)\n        allSelectors[identifier] = true\n        if (identifier.startsWith('_transform')) {\n          addTransform(identifier, rule.cssText)\n        }\n      }\n    }\n  }\n  hasInsertedSinceUpdate = false\n}\n\nupdateInserted()\n\nconst newRulesStyleTag =\n  typeof window !== 'undefined' ? document.head.appendChild(document.createElement('style')) : null\n\nexport function insertStyleRule(identifier: string, rule: string) {\n  if (allSelectors[identifier]) {\n    return\n  }\n  hasInsertedSinceUpdate = true\n  insertedSelectors[identifier] = rule\n  allSelectors[identifier] = process.env.NODE_ENV === 'development' ? rule : true\n  if (identifier.startsWith('_transform')) {\n    addTransform(identifier, rule)\n  }\n  if (!newRulesStyleTag) {\n    return\n  }\n  const sheet = newRulesStyleTag.sheet!\n  sheet.insertRule(rule, sheet.cssRules.length)\n  return identifier\n}\n"],
-  "mappings": ";;AAIA,MAAM,eAAe,CAAC;AACtB,MAAM,oBAAoB,CAAC;AACpB,MAAM,qBAAqB,CAAC;AAE5B,MAAM,kBAAkB,6BAAM,cAAN;AACxB,MAAM,mBAAmB,6BAAM,OAAO,OAAO,iBAAiB,GAArC;AACzB,MAAM,mBAAmB,6BAAM,oBAAN;AAGhC,sBAAsB,YAAoB,MAAc;AACtD,QAAM,IAAI,KAAK,QAAQ,YAAY;AACnC,MAAI,MAAM,IAAI;AACZ,YAAQ,MAAM,mBAAmB,cAAc,MAAM;AACrD;AAAA,EACF;AACA,QAAM,SAAS,IAAI,aAAa;AAChC,QAAM,OAAO,KAAK,QAAQ,GAAG;AAC7B,QAAM,QAAQ,KAAK,MAAM,QAAQ,IAAI;AACrC,qBAAmB,cAAc;AACnC;AAVS;AAkBT,IAAI,yBAAyB;AACtB,0BAA0B;AAC/B,MAAI,OAAO,WAAW,aAAa;AACjC;AAAA,EACF;AACA,MAAI,CAAC,wBAAwB;AAC3B,YAAQ,KAAK,sBAAsB;AACnC;AAAA,EACF;AACA,QAAM,SAAS,OAAO,SAAS;AAC/B,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AACtC,UAAM,QAAQ,OAAO,GAAG;AACxB,UAAM,YAAY,MAAM;AACxB,QAAI,CAAC;AAAW;AAChB,UAAM,gBAAgB,UAAU;AAChC,QAAI,CAAC;AAAe;AACpB,QAAI,kBAAkB,WAAW,cAAc,WAAW,IAAI,GAAG;AAC/D,iBAAW,QAAQ,OAAc;AAC/B,YAAI,CAAC,KAAK;AAAc;AACxB,cAAM,aAAa,KAAK,aAAa,MAAM,CAAC;AAC5C,qBAAa,cAAc;AAC3B,YAAI,WAAW,WAAW,YAAY,GAAG;AACvC,uBAAa,YAAY,KAAK,OAAO;AAAA,QACvC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,2BAAyB;AAC3B;AA3BgB;AA6BhB,eAAe;AAEf,MAAM,mBACJ,OAAO,WAAW,cAAc,SAAS,KAAK,YAAY,SAAS,cAAc,OAAO,CAAC,IAAI;AAExF,yBAAyB,YAAoB,MAAc;AAChE,MAAI,aAAa,aAAa;AAC5B;AAAA,EACF;AACA,2BAAyB;AACzB,oBAAkB,cAAc;AAChC,eAAa,cAAc,QAAQ,IAAI,aAAa,gBAAgB,OAAO;AAC3E,MAAI,WAAW,WAAW,YAAY,GAAG;AACvC,iBAAa,YAAY,IAAI;AAAA,EAC/B;AACA,MAAI,CAAC,kBAAkB;AACrB;AAAA,EACF;AACA,QAAM,QAAQ,iBAAiB;AAC/B,QAAM,WAAW,MAAM,MAAM,SAAS,MAAM;AAC5C,SAAO;AACT;AAhBgB;",
+  "sourcesContent": ["// this needs to check if its inserted already? 99% of the time it is\n// this should avoid re-inserts, but need to test the perf trade-offs\n// i tested with the site itself and the initial insert was trivial\n\nconst allSelectors = {}\nconst insertedSelectors = {}\nexport const insertedTransforms = {}\n\nexport const getAllSelectors = () => allSelectors\nexport const getInsertedRules = () => Object.values(insertedSelectors)\nexport const getAllTransforms = () => insertedTransforms\n\n// keep transforms in map for merging later\nfunction addTransform(identifier: string, rule: string) {\n  const s = rule.indexOf('transform:')\n  if (s === -1) {\n    console.error(`not a transform ${identifier} ${rule}`)\n    return\n  }\n  const startI = s + 'transform:'.length\n  const endI = rule.indexOf(';')\n  const value = rule.slice(startI, endI)\n  insertedTransforms[identifier] = value\n}\n\n// gets existing ones (client side)\n// takes ~0.1ms for a fairly large page\n// used now for three things:\n//   1. debugging at dev time\n//   2. avoid duplicate insert styles at runtime\n//   3. used now for merging transforms atomically\nlet hasInsertedSinceUpdate = true\nexport function updateInserted() {\n  if (typeof document === 'undefined') {\n    return\n  }\n  if (!hasInsertedSinceUpdate) {\n    console.warn('hasnt inserted since')\n    return\n  }\n  const sheets = document.styleSheets\n  if (!sheets) return\n  for (let i = 0; i < sheets.length; i++) {\n    const rules = sheets[i].cssRules\n    const firstRule = rules[0]\n    if (!firstRule) continue\n    const firstSelector = firstRule['selectorText']\n    if (!firstSelector) continue\n    if (firstSelector === ':root' || firstSelector.startsWith('._')) {\n      for (const rule of rules as any) {\n        if (!rule.selectorText) continue\n        const identifier = rule.selectorText.slice(1)\n        allSelectors[identifier] = true\n        if (identifier.startsWith('_transform')) {\n          addTransform(identifier, rule.cssText)\n        }\n      }\n    }\n  }\n  hasInsertedSinceUpdate = false\n}\n\nupdateInserted()\n\nconst newRulesStyleTag =\n  typeof document !== 'undefined'\n    ? document.head.appendChild(document.createElement('style'))\n    : null\n\nexport function insertStyleRule(identifier: string, rule: string) {\n  if (allSelectors[identifier]) {\n    return\n  }\n  hasInsertedSinceUpdate = true\n  insertedSelectors[identifier] = rule\n  allSelectors[identifier] = process.env.NODE_ENV === 'development' ? rule : true\n  if (identifier.startsWith('_transform')) {\n    addTransform(identifier, rule)\n  }\n  if (!newRulesStyleTag) {\n    return\n  }\n  const sheet = newRulesStyleTag.sheet!\n  sheet.insertRule(rule, sheet.cssRules.length)\n  return identifier\n}\n"],
+  "mappings": ";;AAIA,MAAM,eAAe,CAAC;AACtB,MAAM,oBAAoB,CAAC;AACpB,MAAM,qBAAqB,CAAC;AAE5B,MAAM,kBAAkB,6BAAM,cAAN;AACxB,MAAM,mBAAmB,6BAAM,OAAO,OAAO,iBAAiB,GAArC;AACzB,MAAM,mBAAmB,6BAAM,oBAAN;AAGhC,sBAAsB,YAAoB,MAAc;AACtD,QAAM,IAAI,KAAK,QAAQ,YAAY;AACnC,MAAI,MAAM,IAAI;AACZ,YAAQ,MAAM,mBAAmB,cAAc,MAAM;AACrD;AAAA,EACF;AACA,QAAM,SAAS,IAAI,aAAa;AAChC,QAAM,OAAO,KAAK,QAAQ,GAAG;AAC7B,QAAM,QAAQ,KAAK,MAAM,QAAQ,IAAI;AACrC,qBAAmB,cAAc;AACnC;AAVS;AAkBT,IAAI,yBAAyB;AACtB,0BAA0B;AAC/B,MAAI,OAAO,aAAa,aAAa;AACnC;AAAA,EACF;AACA,MAAI,CAAC,wBAAwB;AAC3B,YAAQ,KAAK,sBAAsB;AACnC;AAAA,EACF;AACA,QAAM,SAAS,SAAS;AACxB,MAAI,CAAC;AAAQ;AACb,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AACtC,UAAM,QAAQ,OAAO,GAAG;AACxB,UAAM,YAAY,MAAM;AACxB,QAAI,CAAC;AAAW;AAChB,UAAM,gBAAgB,UAAU;AAChC,QAAI,CAAC;AAAe;AACpB,QAAI,kBAAkB,WAAW,cAAc,WAAW,IAAI,GAAG;AAC/D,iBAAW,QAAQ,OAAc;AAC/B,YAAI,CAAC,KAAK;AAAc;AACxB,cAAM,aAAa,KAAK,aAAa,MAAM,CAAC;AAC5C,qBAAa,cAAc;AAC3B,YAAI,WAAW,WAAW,YAAY,GAAG;AACvC,uBAAa,YAAY,KAAK,OAAO;AAAA,QACvC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,2BAAyB;AAC3B;AA5BgB;AA8BhB,eAAe;AAEf,MAAM,mBACJ,OAAO,aAAa,cAChB,SAAS,KAAK,YAAY,SAAS,cAAc,OAAO,CAAC,IACzD;AAEC,yBAAyB,YAAoB,MAAc;AAChE,MAAI,aAAa,aAAa;AAC5B;AAAA,EACF;AACA,2BAAyB;AACzB,oBAAkB,cAAc;AAChC,eAAa,cAAc,QAAQ,IAAI,aAAa,gBAAgB,OAAO;AAC3E,MAAI,WAAW,WAAW,YAAY,GAAG;AACvC,iBAAa,YAAY,IAAI;AAAA,EAC/B;AACA,MAAI,CAAC,kBAAkB;AACrB;AAAA,EACF;AACA,QAAM,QAAQ,iBAAiB;AAC/B,QAAM,WAAW,MAAM,MAAM,SAAS,MAAM;AAC5C,SAAO;AACT;AAhBgB;",
   "names": []
 }

package/dist/esm/hooks/useMedia.js

@@ -15,36 +15,9 @@ const removeMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
   var _a;
   (_a = mediaQueryListeners[key]) == null ? void 0 : _a.delete(cb);
 }, "removeMediaQueryListener");
-let conf = null;
-const mediaQueryConfig = new Proxy({}, {
-  get(target, key) {
-    if (key === "$$typeof") {
-      return Reflect.get(target, key);
-    }
-    if (!conf) {
-      console.warn("Tamagui: accessing media query before init");
-      return null;
-    }
-    return Reflect.get(conf, key);
-  },
-  ownKeys() {
-    if (!conf) {
-      console.warn("Tamagui: accessing media query before init");
-      return [];
-    }
-    return Object.keys(conf);
-  },
-  getOwnPropertyDescriptor() {
-    return {
-      enumerable: true,
-      configurable: true
-    };
-  }
-});
+let hasConfigured = false;
+const mediaQueryConfig = {};
 const getMedia = /* @__PURE__ */ __name(() => {
-  if (!conf) {
-    throw new Error(`not configured yet`);
-  }
   return mediaState;
 }, "getMedia");
 const configureMedia = /* @__PURE__ */ __name(({
@@ -52,11 +25,12 @@ const configureMedia = /* @__PURE__ */ __name(({
   defaultActive = ["sm", "xs"]
 } = {}) => {
   var _a;
-  if (conf) {
+  if (hasConfigured) {
     console.warn(`Already configured mediaQueries once (you may have called getMedia() before configureMedia())`);
   }
   if (queries) {
-    conf = queries;
+    Object.assign(mediaQueryConfig, queries);
+    hasConfigured = true;
   }
   for (const key in queries) {
     const str = mediaObjectToString(queries[key]);

package/dist/esm/hooks/useMedia.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useMedia.tsx"],
-  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport { useRef } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n  ConfigureMediaQueryOptions,\n  MediaQueries,\n  MediaQueryObject,\n  MediaQueryState,\n} from '../types'\nimport { useConstant } from './useConstant'\n\nexport const mediaState: { [key in keyof MediaQueryState]: boolean } = {} as any\nconst mediaQueryListeners: { [key: string]: Set<Function> } = {}\n\nexport const addMediaQueryListener = (key: string, cb: any) => {\n  mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()\n  mediaQueryListeners[key].add(cb)\n}\n\nexport const removeMediaQueryListener = (key: string, cb: any) => {\n  mediaQueryListeners[key]?.delete(cb)\n}\n\nlet conf: MediaQueries | null = null\n\nexport const mediaQueryConfig = new Proxy<MediaQueries>({} as any, {\n  get(target, key) {\n    if (key === '$$typeof') {\n      return Reflect.get(target, key)\n    }\n    if (!conf) {\n      console.warn('Tamagui: accessing media query before init')\n      return null\n    }\n    return Reflect.get(conf, key)\n  },\n  ownKeys() {\n    if (!conf) {\n      console.warn('Tamagui: accessing media query before init')\n      return []\n    }\n    return Object.keys(conf)\n  },\n  getOwnPropertyDescriptor() {\n    return {\n      enumerable: true,\n      configurable: true,\n    }\n  },\n})\n\nexport const getMedia = () => {\n  if (!conf) {\n    throw new Error(`not configured yet`)\n  }\n  return mediaState\n}\n\nexport const configureMedia = ({\n  queries,\n  defaultActive = ['sm', 'xs'],\n}: ConfigureMediaQueryOptions = {}) => {\n  if (conf) {\n    console.warn(\n      `Already configured mediaQueries once (you may have called getMedia() before configureMedia())`\n    )\n  }\n\n  if (queries) {\n    conf = queries\n  }\n\n  // setup\n  for (const key in queries) {\n    const str = mediaObjectToString(queries[key])\n    try {\n      const getMatch = () => matchMedia(str)\n      const match = getMatch()\n      if (!match || typeof match.addListener !== 'function') {\n        // caught below\n        throw new Error('\u26A0\uFE0F No match (seeing this in RN sometimes)')\n      }\n      mediaState[key] = !!match.matches\n      match.addListener(() => {\n        const next = !!getMatch().matches\n        if (next === mediaState[key]) return\n        mediaState[key] = next\n        const listeners = mediaQueryListeners[key]\n        if (listeners?.size) {\n          for (const cb of [...listeners]) {\n            cb()\n          }\n        }\n      })\n    } catch (err: any) {\n      console.error('Error running media query', str, err.message, err.stack)\n      const isDefaultActive = defaultActive?.includes(key as any) ?? true\n      mediaState[key] = isDefaultActive\n    }\n  }\n}\n\ntype UseMediaState = {\n  selections: { [key: string]: boolean }\n  nextSelections: { [key: string]: boolean }\n  isRendering: boolean\n  isUnmounted: boolean\n}\n\nexport const useMedia = () => {\n  const forceUpdate = useForceUpdate()\n  const state = useRef() as React.MutableRefObject<UseMediaState>\n  if (!state.current) {\n    state.current = {\n      selections: {},\n      nextSelections: {},\n      isUnmounted: false,\n      isRendering: true,\n    }\n  }\n  state.current.isRendering = true\n\n  // track usage\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    // delete old\n    for (const key in st.selections) {\n      if (!(key in st.nextSelections)) {\n        removeMediaQueryListener(key, forceUpdate)\n      }\n    }\n    // add new\n    for (const key in st.nextSelections) {\n      if (!(key in st.selections)) {\n        addMediaQueryListener(key, forceUpdate)\n      }\n    }\n  })\n\n  // unmount\n  useIsomorphicLayoutEffect(() => {\n    return () => {\n      const st = state.current\n      st.isUnmounted = true\n      const allKeys = {\n        ...st.selections,\n        ...st.nextSelections,\n      }\n      for (const key in allKeys) {\n        removeMediaQueryListener(key, forceUpdate)\n      }\n    }\n  }, [])\n\n  return useConstant(() => {\n    const st = state.current\n    return new Proxy(mediaState, {\n      get(target, key: string) {\n        if (!(key in mediaState)) {\n          return Reflect.get(target, key)\n        }\n        if (!st.isUnmounted) {\n          if (st.isRendering) {\n            st.nextSelections[key] = true\n          }\n        }\n        if (key in mediaState) {\n          return mediaState[key]\n        }\n        return Reflect.get(mediaState, key)\n      },\n    })\n  })\n}\n\nfunction camelToHyphen(str: string) {\n  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()\n}\n\nexport function mediaObjectToString(query: string | MediaQueryObject) {\n  if (typeof query === 'string') {\n    return query\n  }\n  return Object.entries(query)\n    .map(([feature, value]) => {\n      feature = camelToHyphen(feature)\n      if (typeof value === 'string') {\n        return `(${feature}: ${value})`\n      }\n      if (typeof value === 'number' && /[height|width]$/.test(feature)) {\n        value = `${value}px`\n      }\n      return `(${feature}: ${value})`\n    })\n    .join(' and ')\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport { useRef } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n  ConfigureMediaQueryOptions,\n  MediaQueries,\n  MediaQueryObject,\n  MediaQueryState,\n} from '../types'\nimport { useConstant } from './useConstant'\n\nexport const mediaState: { [key in keyof MediaQueryState]: boolean } = {} as any\nconst mediaQueryListeners: { [key: string]: Set<Function> } = {}\n\nexport const addMediaQueryListener = (key: string, cb: any) => {\n  mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()\n  mediaQueryListeners[key].add(cb)\n}\n\nexport const removeMediaQueryListener = (key: string, cb: any) => {\n  mediaQueryListeners[key]?.delete(cb)\n}\n\nlet hasConfigured = false\nexport const mediaQueryConfig: MediaQueries = {}\n\nexport const getMedia = () => {\n  return mediaState\n}\n\nexport const configureMedia = ({\n  queries,\n  defaultActive = ['sm', 'xs'],\n}: ConfigureMediaQueryOptions = {}) => {\n  if (hasConfigured) {\n    console.warn(\n      `Already configured mediaQueries once (you may have called getMedia() before configureMedia())`\n    )\n  }\n\n  if (queries) {\n    Object.assign(mediaQueryConfig, queries)\n    hasConfigured = true\n  }\n\n  // setup\n  for (const key in queries) {\n    const str = mediaObjectToString(queries[key])\n    try {\n      const getMatch = () => matchMedia(str)\n      const match = getMatch()\n      if (!match || typeof match.addListener !== 'function') {\n        // caught below\n        throw new Error('\u26A0\uFE0F No match (seeing this in RN sometimes)')\n      }\n      mediaState[key] = !!match.matches\n      match.addListener(() => {\n        const next = !!getMatch().matches\n        if (next === mediaState[key]) return\n        mediaState[key] = next\n        const listeners = mediaQueryListeners[key]\n        if (listeners?.size) {\n          for (const cb of [...listeners]) {\n            cb()\n          }\n        }\n      })\n    } catch (err: any) {\n      console.error('Error running media query', str, err.message, err.stack)\n      const isDefaultActive = defaultActive?.includes(key as any) ?? true\n      mediaState[key] = isDefaultActive\n    }\n  }\n}\n\ntype UseMediaState = {\n  selections: { [key: string]: boolean }\n  nextSelections: { [key: string]: boolean }\n  isRendering: boolean\n  isUnmounted: boolean\n}\n\nexport const useMedia = () => {\n  const forceUpdate = useForceUpdate()\n  const state = useRef() as React.MutableRefObject<UseMediaState>\n  if (!state.current) {\n    state.current = {\n      selections: {},\n      nextSelections: {},\n      isUnmounted: false,\n      isRendering: true,\n    }\n  }\n  state.current.isRendering = true\n\n  // track usage\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    // delete old\n    for (const key in st.selections) {\n      if (!(key in st.nextSelections)) {\n        removeMediaQueryListener(key, forceUpdate)\n      }\n    }\n    // add new\n    for (const key in st.nextSelections) {\n      if (!(key in st.selections)) {\n        addMediaQueryListener(key, forceUpdate)\n      }\n    }\n  })\n\n  // unmount\n  useIsomorphicLayoutEffect(() => {\n    return () => {\n      const st = state.current\n      st.isUnmounted = true\n      const allKeys = {\n        ...st.selections,\n        ...st.nextSelections,\n      }\n      for (const key in allKeys) {\n        removeMediaQueryListener(key, forceUpdate)\n      }\n    }\n  }, [])\n\n  return useConstant(() => {\n    const st = state.current\n    return new Proxy(mediaState, {\n      get(target, key: string) {\n        if (!(key in mediaState)) {\n          return Reflect.get(target, key)\n        }\n        if (!st.isUnmounted) {\n          if (st.isRendering) {\n            st.nextSelections[key] = true\n          }\n        }\n        if (key in mediaState) {\n          return mediaState[key]\n        }\n        return Reflect.get(mediaState, key)\n      },\n    })\n  })\n}\n\nfunction camelToHyphen(str: string) {\n  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()\n}\n\nexport function mediaObjectToString(query: string | MediaQueryObject) {\n  if (typeof query === 'string') {\n    return query\n  }\n  return Object.entries(query)\n    .map(([feature, value]) => {\n      feature = camelToHyphen(feature)\n      if (typeof value === 'string') {\n        return `(${feature}: ${value})`\n      }\n      if (typeof value === 'number' && /[height|width]$/.test(feature)) {\n        value = `${value}px`\n      }\n      return `(${feature}: ${value})`\n    })\n    .join(' and ')\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/styled.js

@@ -5,9 +5,9 @@ import { Image, Text, TextInput } from "react-native";
 import { createComponent } from "./createComponent";
 import { extendStaticConfig } from "./helpers/extendStaticConfig";
 const RNComponents = /* @__PURE__ */ new WeakMap();
-for (const key in ReactNative) {
+for (const key of ["Image", "TextInput", "Text", "View"]) {
   const val = ReactNative[key];
-  if (typeof val === "object") {
+  if (val && typeof val === "object") {
     RNComponents.set(val, true);
   }
 }