@tamagui/core 1.0.1-beta.85 → 1.0.1-beta.88

package/dist/cjs/helpers/createPropMapper.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/createPropMapper.ts"],
-  "sourcesContent": ["import { getConfig } from '../conf'\nimport { isWeb } from '../constants/platform'\nimport { Variable, isVariable } from '../createVariable'\nimport {\n  DebugProp,\n  GenericVariantDefinitions,\n  PropMapper,\n  SplitStyleState,\n  StaticConfig,\n  TamaguiInternalConfig,\n  VariantSpreadFunction,\n} from '../types'\nimport { expandStyle, expandStyles } from './generateAtomicStyles'\nimport { getVariantExtras } from './getVariantExtras'\nimport { isObj } from './isObj'\n\nexport type ResolveVariableTypes = 'auto' | 'value' | 'variable' | 'both' | 'non-color-value'\n\nexport const getReturnVariablesAs = (props: any, state: Partial<SplitStyleState>) => {\n  return !!props.animation || state.resolveVariablesAs === 'value'\n    ? isWeb\n      ? 'non-color-value'\n      : 'value'\n    : 'auto'\n}\n\nexport const createPropMapper = (staticConfig: Partial<StaticConfig>) => {\n  const variants = staticConfig.variants || {}\n  const defaultProps = staticConfig.defaultProps || {}\n\n  const mapper: PropMapper = (\n    key,\n    value,\n    theme,\n    propsIn,\n    state,\n    avoidDefaultProps = false,\n    debug\n  ) => {\n    const conf = getConfig()\n    if (!conf) {\n      console.trace('no conf! err')\n      return\n    }\n\n    const props = state.fallbackProps || propsIn\n    const returnVariablesAs = getReturnVariablesAs(props, state)\n\n    // handled here because we need to resolve this off tokens, its the only one-off like this\n    const fontFamily = props.fontFamily || defaultProps.fontFamily || '$body'\n\n    const variantValue = resolveVariants(\n      key,\n      value,\n      props,\n      defaultProps,\n      theme,\n      variants,\n      fontFamily,\n      conf,\n      returnVariablesAs,\n      staticConfig,\n      '',\n      avoidDefaultProps\n    )\n    if (variantValue) {\n      return variantValue\n    }\n\n    let shouldReturn = value !== undefined && value !== null\n\n    // handle shorthands\n    if (conf.shorthands[key]) {\n      shouldReturn = true\n      key = conf.shorthands[key]\n    }\n\n    if (value) {\n      if (value[0] === '$') {\n        // prettier-ignore\n        value = getToken(key, value, conf, theme, fontFamily, returnVariablesAs, debug)\n      } else if (isVariable(value)) {\n        value = getVariableValue(key, value, returnVariablesAs)\n      }\n    }\n\n    if (shouldReturn) {\n      return expandStyle(key, value) || [[key, value]]\n    }\n  }\n\n  return mapper\n}\n\ntype StyleResolver = (\n  key: string,\n  value: any,\n  props: Record<string, any>,\n  defaultProps: any,\n  theme: any,\n  variants: GenericVariantDefinitions,\n  fontFamily: string,\n  conf: TamaguiInternalConfig,\n  returnVariablesAs: 'auto' | 'value' | 'non-color-value',\n  staticConfig: Partial<StaticConfig>,\n  parentVariantKey: string,\n  avoidDefaultProps?: boolean,\n  debug?: DebugProp\n) => any\n\nconst resolveVariants: StyleResolver = (\n  key,\n  value,\n  props,\n  defaultProps,\n  theme,\n  variants,\n  fontFamily,\n  conf,\n  returnVariablesAs,\n  staticConfig,\n  parentVariantKey,\n  avoidDefaultProps = false,\n  debug\n) => {\n  const variant = variants && variants[key]\n  if (variant && value !== undefined) {\n    let variantValue = getVariantDefinition(variant, key, value)\n\n    if (variantValue) {\n      if (typeof variantValue === 'function') {\n        const fn = variantValue as VariantSpreadFunction<any>\n        variantValue = fn(value, getVariantExtras(props, theme, defaultProps, avoidDefaultProps))\n      }\n\n      if (isObj(variantValue)) {\n        variantValue = resolveTokensAndVariants(\n          key,\n          variantValue,\n          props,\n          defaultProps,\n          theme,\n          variants,\n          fontFamily,\n          conf,\n          returnVariablesAs,\n          staticConfig,\n          parentVariantKey,\n          avoidDefaultProps,\n          debug\n        )\n      }\n\n      if (variantValue) {\n        return Object.entries(expandStyles(variantValue))\n      }\n    } else {\n      // variant at key exists, but no matching variant value, return nothing\n      if (process.env.NODE_ENV === 'development') {\n        if (staticConfig.validStyles?.[key]) {\n          return null\n        }\n        if (value === false) {\n          // don't warn on missing false values, common to only use true\n          return null\n        }\n        const name = staticConfig.componentName || '[UnnamedComponent]'\n        console.warn(\n          `No variant found: ${name} has variant \"${key}\", but no matching value \"${value}\"`\n        )\n      }\n      return null\n    }\n  }\n}\n\nconst resolveTokensAndVariants: StyleResolver = (\n  key, // we dont use key assume value is object instead\n  value,\n  props,\n  defaultProps,\n  theme,\n  variants,\n  fontFamily,\n  conf,\n  returnVariablesAs,\n  staticConfig,\n  parentVariantKey,\n  avoidDefaultProps,\n  debug\n) => {\n  let res = {}\n  for (const rKey in value) {\n    const fKey = conf.shorthands[rKey] || rKey\n    const val = value[rKey]\n    if (isVariable(val)) {\n      res[fKey] = !isWeb || returnVariablesAs === 'value' ? val.val : val.variable\n    } else if (variants[fKey]) {\n      // avoids infinite loop if variant is matching a style prop\n      // eg: { variants: { flex: { true: { flex: 2 } } } }\n      if (parentVariantKey === key) {\n        res[fKey] = val\n      } else {\n        Object.assign(\n          res,\n          Object.fromEntries(\n            resolveVariants(\n              fKey,\n              val,\n              props,\n              defaultProps,\n              theme,\n              variants,\n              fontFamily,\n              conf,\n              returnVariablesAs,\n              staticConfig,\n              key,\n              avoidDefaultProps,\n              debug\n            )\n          )\n        )\n      }\n    } else if (typeof val === 'string') {\n      const fVal =\n        val[0] === '$'\n          ? getToken(fKey, val, conf, theme, fontFamily, returnVariablesAs, debug)\n          : val\n      res[fKey] = fVal\n    } else {\n      if (isObj(val)) {\n        // sub-objects: media queries, pseudos, shadowOffset\n        res[fKey] = resolveTokensAndVariants(\n          fKey,\n          val,\n          props,\n          defaultProps,\n          theme,\n          variants,\n          fontFamily,\n          conf,\n          returnVariablesAs,\n          staticConfig,\n          key,\n          avoidDefaultProps,\n          debug\n        )\n      } else {\n        // nullish values cant be tokens, need no extra parsing\n        res[fKey] = value[fKey]\n      }\n    }\n    if (process.env.NODE_ENV === 'development') {\n      if (res[fKey]?.[0] === '$') {\n        console.warn(`\u26A0\uFE0F Missing token in theme ${theme.name}:`, fKey, res[fKey])\n      }\n    }\n  }\n  return res\n}\n\n// goes through specificity finding best matching variant function\nfunction getVariantDefinition(variant: any, key: string, value: any) {\n  if (typeof variant === 'function') {\n    return variant\n  }\n  for (const cat in tokenCategories) {\n    if (key in tokenCategories[cat]) {\n      const spreadVariant = variant[`...${cat}`]\n      if (spreadVariant) {\n        return spreadVariant\n      }\n    }\n  }\n  let fn: any\n  if (typeof value === 'number') {\n    fn = variant[':number']\n  } else if (typeof value === 'string') {\n    fn = variant[':string']\n  } else if (value === true || value === false) {\n    fn = variant[':boolean']\n  }\n  fn = fn || variant[value]\n  // fallback to size ultimately - could do token level detection\n  return fn || variant['...'] || variant['...size']\n}\n\nconst fontShorthand = {\n  fontSize: 'size',\n  fontWeight: 'weight',\n}\n\nconst getToken = (\n  key: string,\n  value: string,\n  { tokensParsed, fontsParsed }: TamaguiInternalConfig,\n  theme: any,\n  fontFamily: string | undefined = '$body',\n  resolveAs?: ResolveVariableTypes,\n  debug?: DebugProp\n) => {\n  let valOrVar: any\n  let hasSet = false\n  if (theme[value]) {\n    valOrVar = theme[value]\n    hasSet = true\n  } else {\n    switch (key) {\n      case 'fontFamily':\n        valOrVar = fontsParsed[value]?.family || value\n        hasSet = true\n        break\n      case 'fontSize':\n      case 'lineHeight':\n      case 'letterSpacing':\n      case 'fontWeight':\n        valOrVar = fontsParsed[fontFamily]?.[fontShorthand[key] || key]?.[value] || value\n        hasSet = true\n        break\n    }\n    for (const cat in tokenCategories) {\n      if (key in tokenCategories[cat]) {\n        const res = tokensParsed[cat][value]\n        if (res) {\n          valOrVar = res\n          hasSet = true\n        }\n      }\n    }\n    if (!hasSet) {\n      const spaceVar = tokensParsed.space[value]\n      if (spaceVar) {\n        valOrVar = spaceVar\n        hasSet = true\n      }\n    }\n  }\n  if (hasSet) {\n    return getVariableValue(key, valOrVar, resolveAs)\n  }\n  if (process.env.NODE_ENV === 'development') {\n    if (value && value[0] === '$') {\n      console.warn(\n        `\u26A0\uFE0F You've passed the value \"${value}\" to the style property \"${key}\", but there's no theme or token with the key \"${value}\". Using theme \"${theme.name}\".\n\nSet the debug prop to true to see more detailed debug information.`\n      )\n      if (debug) {\n        if (typeof window !== 'undefined') {\n          console.log('Looked in:')\n          console.log('Theme:', theme)\n          console.log('Tokens:', tokensParsed)\n          console.log('Fonts:', fontsParsed)\n        }\n      }\n      return null\n    }\n  }\n  return value\n}\n\nfunction getVariableValue(\n  key: string,\n  valOrVar: Variable | any,\n  resolveAs: ResolveVariableTypes = 'auto'\n) {\n  if (isVariable(valOrVar)) {\n    if (resolveAs === 'variable') {\n      return valOrVar\n    }\n    if (resolveAs === 'non-color-value') {\n      if (isWeb) {\n        if (key in tokenCategories.color) {\n          return valOrVar.variable\n        }\n      }\n      return valOrVar.val\n    }\n    if (!isWeb || resolveAs === 'value') {\n      return valOrVar.val\n    }\n    return valOrVar.variable\n  }\n  return valOrVar\n}\n\n// just specificy the least costly, all else go to `space` (most keys - we can exclude)\nconst tokenCategories = {\n  radius: {\n    borderRadius: true,\n    borderTopLeftRadius: true,\n    borderTopRightRadius: true,\n    borderBottomLeftRadius: true,\n    borderBottomRightRadius: true,\n  },\n  size: {\n    width: true,\n    height: true,\n    minWidth: true,\n    minHeight: true,\n    maxWidth: true,\n    maxHeight: true,\n  },\n  color: {\n    color: true,\n    backgroundColor: true,\n    borderColor: true,\n    borderBottomColor: true,\n    borderTopColor: true,\n    borderLeftColor: true,\n    borderRightColor: true,\n  },\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { getConfig } from '../conf'\nimport { isWeb } from '../constants/platform'\nimport { Variable, isVariable } from '../createVariable'\nimport {\n  DebugProp,\n  GenericVariantDefinitions,\n  PropMapper,\n  SplitStyleState,\n  StaticConfig,\n  TamaguiInternalConfig,\n  VariantSpreadFunction,\n} from '../types'\nimport { expandStyle, expandStyles } from './generateAtomicStyles'\nimport { getVariantExtras } from './getVariantExtras'\nimport { isObj } from './isObj'\nimport { mergeProps } from './mergeProps'\n\nexport type ResolveVariableTypes = 'auto' | 'value' | 'variable' | 'both' | 'non-color-value'\n\nexport const getReturnVariablesAs = (props: any, state: Partial<SplitStyleState>) => {\n  return !!props.animation || state.resolveVariablesAs === 'value'\n    ? isWeb\n      ? 'non-color-value'\n      : 'value'\n    : 'auto'\n}\n\nexport const createPropMapper = (staticConfig: Partial<StaticConfig>) => {\n  const variants = staticConfig.variants || {}\n\n  // temp remove classnames\n  const defaultProps = mergeProps(staticConfig.defaultProps || {}, {}, true)[0]\n\n  const mapper: PropMapper = (\n    key,\n    value,\n    theme,\n    propsIn,\n    state,\n    avoidDefaultProps = false,\n    debug\n  ) => {\n    const conf = getConfig()\n    if (!conf) {\n      console.trace('no conf! err')\n      return\n    }\n\n    const props = state.fallbackProps || propsIn\n    const returnVariablesAs = getReturnVariablesAs(props, state)\n\n    // handled here because we need to resolve this off tokens, its the only one-off like this\n    const fontFamily = props.fontFamily || defaultProps.fontFamily || '$body'\n\n    const variantValue = resolveVariants(\n      key,\n      value,\n      props,\n      defaultProps,\n      theme,\n      variants,\n      fontFamily,\n      conf,\n      returnVariablesAs,\n      staticConfig,\n      '',\n      avoidDefaultProps\n    )\n    if (variantValue) {\n      if (process.env.NODE_ENV === 'development') {\n        if (debug) console.log('propMapped', key, value, 'with', propsIn, 'to', variantValue)\n      }\n      return variantValue\n    }\n\n    let shouldReturn = value !== undefined && value !== null\n\n    // handle shorthands\n    if (conf.shorthands[key]) {\n      shouldReturn = true\n      key = conf.shorthands[key]\n    }\n\n    if (value) {\n      if (value[0] === '$') {\n        // prettier-ignore\n        value = getToken(key, value, conf, theme, fontFamily, returnVariablesAs, debug)\n      } else if (isVariable(value)) {\n        value = getVariableValue(key, value, returnVariablesAs)\n      }\n    }\n\n    if (shouldReturn) {\n      return expandStyle(key, value) || [[key, value]]\n    }\n  }\n\n  return mapper\n}\n\ntype StyleResolver = (\n  key: string,\n  value: any,\n  props: Record<string, any>,\n  defaultProps: any,\n  theme: any,\n  variants: GenericVariantDefinitions,\n  fontFamily: string,\n  conf: TamaguiInternalConfig,\n  returnVariablesAs: 'auto' | 'value' | 'non-color-value',\n  staticConfig: Partial<StaticConfig>,\n  parentVariantKey: string,\n  avoidDefaultProps?: boolean,\n  debug?: DebugProp\n) => any\n\nconst resolveVariants: StyleResolver = (\n  key,\n  value,\n  props,\n  defaultProps,\n  theme,\n  variants,\n  fontFamily,\n  conf,\n  returnVariablesAs,\n  staticConfig,\n  parentVariantKey,\n  avoidDefaultProps = false,\n  debug\n) => {\n  const variant = variants && variants[key]\n  if (variant && value !== undefined) {\n    let variantValue = getVariantDefinition(variant, key, value)\n\n    if (variantValue) {\n      if (typeof variantValue === 'function') {\n        const fn = variantValue as VariantSpreadFunction<any>\n        variantValue = fn(value, getVariantExtras(props, theme, defaultProps, avoidDefaultProps))\n      }\n\n      if (isObj(variantValue)) {\n        variantValue = resolveTokensAndVariants(\n          key,\n          variantValue,\n          props,\n          defaultProps,\n          theme,\n          variants,\n          fontFamily,\n          conf,\n          returnVariablesAs,\n          staticConfig,\n          parentVariantKey,\n          avoidDefaultProps,\n          debug\n        )\n      }\n\n      if (variantValue) {\n        return Object.entries(expandStyles(variantValue))\n      }\n    } else {\n      // variant at key exists, but no matching variant value, return nothing\n      if (process.env.NODE_ENV === 'development') {\n        if (staticConfig.validStyles?.[key]) {\n          return null\n        }\n        if (value === false) {\n          // don't warn on missing false values, common to only use true\n          return null\n        }\n        const name = staticConfig.componentName || '[UnnamedComponent]'\n        console.warn(\n          `No variant found: ${name} has variant \"${key}\", but no matching value \"${value}\"`\n        )\n      }\n      return null\n    }\n  }\n}\n\nconst resolveTokensAndVariants: StyleResolver = (\n  key, // we dont use key assume value is object instead\n  value,\n  props,\n  defaultProps,\n  theme,\n  variants,\n  fontFamily,\n  conf,\n  returnVariablesAs,\n  staticConfig,\n  parentVariantKey,\n  avoidDefaultProps,\n  debug\n) => {\n  let res = {}\n  for (const rKey in value) {\n    const fKey = conf.shorthands[rKey] || rKey\n    const val = value[rKey]\n    if (isVariable(val)) {\n      res[fKey] = !isWeb || returnVariablesAs === 'value' ? val.val : val.variable\n    } else if (variants[fKey]) {\n      // avoids infinite loop if variant is matching a style prop\n      // eg: { variants: { flex: { true: { flex: 2 } } } }\n      if (parentVariantKey === key) {\n        res[fKey] = val\n      } else {\n        Object.assign(\n          res,\n          Object.fromEntries(\n            resolveVariants(\n              fKey,\n              val,\n              props,\n              defaultProps,\n              theme,\n              variants,\n              fontFamily,\n              conf,\n              returnVariablesAs,\n              staticConfig,\n              key,\n              avoidDefaultProps,\n              debug\n            )\n          )\n        )\n      }\n    } else if (typeof val === 'string') {\n      const fVal =\n        val[0] === '$'\n          ? getToken(fKey, val, conf, theme, fontFamily, returnVariablesAs, debug)\n          : val\n      res[fKey] = fVal\n    } else {\n      if (isObj(val)) {\n        // sub-objects: media queries, pseudos, shadowOffset\n        res[fKey] = resolveTokensAndVariants(\n          fKey,\n          val,\n          props,\n          defaultProps,\n          theme,\n          variants,\n          fontFamily,\n          conf,\n          returnVariablesAs,\n          staticConfig,\n          key,\n          avoidDefaultProps,\n          debug\n        )\n      } else {\n        // nullish values cant be tokens, need no extra parsing\n        res[fKey] = value[fKey]\n      }\n    }\n    if (process.env.NODE_ENV === 'development') {\n      if (res[fKey]?.[0] === '$') {\n        console.warn(`\u26A0\uFE0F Missing token in theme ${theme.name}:`, fKey, res[fKey])\n      }\n    }\n  }\n  return res\n}\n\n// goes through specificity finding best matching variant function\nfunction getVariantDefinition(variant: any, key: string, value: any) {\n  if (typeof variant === 'function') {\n    return variant\n  }\n  for (const cat in tokenCategories) {\n    if (key in tokenCategories[cat]) {\n      const spreadVariant = variant[`...${cat}`]\n      if (spreadVariant) {\n        return spreadVariant\n      }\n    }\n  }\n  let fn: any\n  if (typeof value === 'number') {\n    fn = variant[':number']\n  } else if (typeof value === 'string') {\n    fn = variant[':string']\n  } else if (value === true || value === false) {\n    fn = variant[':boolean']\n  }\n  fn = fn || variant[value]\n  // fallback to size ultimately - could do token level detection\n  return fn || variant['...'] || variant['...size']\n}\n\nconst fontShorthand = {\n  fontSize: 'size',\n  fontWeight: 'weight',\n}\n\nconst getToken = (\n  key: string,\n  value: string,\n  { tokensParsed, fontsParsed }: TamaguiInternalConfig,\n  theme: any,\n  fontFamily: string | undefined = '$body',\n  resolveAs?: ResolveVariableTypes,\n  debug?: DebugProp\n) => {\n  let valOrVar: any\n  let hasSet = false\n  if (theme[value]) {\n    valOrVar = theme[value]\n    hasSet = true\n  } else {\n    switch (key) {\n      case 'fontFamily':\n        valOrVar = fontsParsed[value]?.family || value\n        hasSet = true\n        break\n      case 'fontSize':\n      case 'lineHeight':\n      case 'letterSpacing':\n      case 'fontWeight':\n        valOrVar = fontsParsed[fontFamily]?.[fontShorthand[key] || key]?.[value] || value\n        hasSet = true\n        break\n    }\n    for (const cat in tokenCategories) {\n      if (key in tokenCategories[cat]) {\n        const res = tokensParsed[cat][value]\n        if (res) {\n          valOrVar = res\n          hasSet = true\n        }\n      }\n    }\n    if (!hasSet) {\n      const spaceVar = tokensParsed.space[value]\n      if (spaceVar) {\n        valOrVar = spaceVar\n        hasSet = true\n      }\n    }\n  }\n  if (hasSet) {\n    return getVariableValue(key, valOrVar, resolveAs)\n  }\n  if (process.env.NODE_ENV === 'development') {\n    if (value && value[0] === '$') {\n      console.warn(\n        `\u26A0\uFE0F You've passed the value \"${value}\" to the style property \"${key}\", but there's no theme or token with the key \"${value}\". Using theme \"${theme.name}\".\n\nSet the debug prop to true to see more detailed debug information.`\n      )\n      if (debug) {\n        if (typeof window !== 'undefined') {\n          console.log('Looked in:')\n          console.log('Theme:', theme)\n          console.log('Tokens:', tokensParsed)\n          console.log('Fonts:', fontsParsed)\n        }\n      }\n      return null\n    }\n  }\n  return value\n}\n\nfunction getVariableValue(\n  key: string,\n  valOrVar: Variable | any,\n  resolveAs: ResolveVariableTypes = 'auto'\n) {\n  if (isVariable(valOrVar)) {\n    if (resolveAs === 'variable') {\n      return valOrVar\n    }\n    if (resolveAs === 'non-color-value') {\n      if (isWeb) {\n        if (key in tokenCategories.color) {\n          return valOrVar.variable\n        }\n      }\n      return valOrVar.val\n    }\n    if (!isWeb || resolveAs === 'value') {\n      return valOrVar.val\n    }\n    return valOrVar.variable\n  }\n  return valOrVar\n}\n\n// just specificy the least costly, all else go to `space` (most keys - we can exclude)\nconst tokenCategories = {\n  radius: {\n    borderRadius: true,\n    borderTopLeftRadius: true,\n    borderTopRightRadius: true,\n    borderBottomLeftRadius: true,\n    borderBottomRightRadius: true,\n  },\n  size: {\n    width: true,\n    height: true,\n    minWidth: true,\n    minHeight: true,\n    maxWidth: true,\n    maxHeight: true,\n  },\n  color: {\n    color: true,\n    backgroundColor: true,\n    borderColor: true,\n    borderBottomColor: true,\n    borderTopColor: true,\n    borderLeftColor: true,\n    borderRightColor: true,\n  },\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/helpers/extendStaticConfig.js

@@ -69,7 +69,7 @@ function extendStaticConfig(config, parent) {
     neverFlatten: config.neverFlatten || parentStaticConf.neverFlatten,
     ensureOverriddenProp: config.ensureOverriddenProp ?? parentStaticConf.ensureOverriddenProp,
     validStyles: config.validStyles ? __spreadValues(__spreadValues({}, parentStaticConf.validStyles), config.validStyles) : parentStaticConf.validStyles || import_helpers.stylePropsView,
-    defaultProps: (0, import_mergeProps.mergeProps)(__spreadValues(__spreadValues({}, parentStaticConf.defaultProps), parentStaticConf.defaultVariants), __spreadValues(__spreadValues({}, config.defaultProps), config.defaultVariants))
+    defaultProps: (0, import_mergeProps.mergeProps)(__spreadValues(__spreadValues({}, parentStaticConf.defaultProps), parentStaticConf.defaultVariants), __spreadValues(__spreadValues({}, config.defaultProps), config.defaultVariants))[0]
   }));
 }
 const parseStaticConfig = (config) => {

package/dist/cjs/helpers/extendStaticConfig.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/extendStaticConfig.ts"],
-  "sourcesContent": ["import { stylePropsView } from '@tamagui/helpers'\n\nimport { StaticConfig, StaticConfigParsed, StylableComponent } from '../types'\nimport { createPropMapper } from './createPropMapper'\nimport { mergeProps } from './mergeProps'\n\nexport function extendStaticConfig(config: Partial<StaticConfig>, parent?: StylableComponent) {\n  if (!parent || !('staticConfig' in parent)) {\n    return parseStaticConfig(config)\n  }\n\n  const parentStaticConf = parent.staticConfig as StaticConfig\n  const variants = {\n    ...parentStaticConf.variants,\n  }\n\n  // merge variants... can we type this?\n  if (config.variants) {\n    for (const key in config.variants) {\n      if (variants[key]) {\n        variants[key] = {\n          ...variants[key],\n          ...config.variants[key],\n        }\n      } else {\n        variants[key] = config.variants[key]\n      }\n    }\n  }\n\n  // include our own\n  const parentNames = [...(parentStaticConf.parentNames || [])]\n  if (parentStaticConf.componentName) {\n    parentNames.push(parentStaticConf.componentName)\n  }\n\n  return parseStaticConfig({\n    ...parentStaticConf,\n    ...config,\n    variants,\n    parentNames,\n    isZStack: config.isZStack || parentStaticConf.isZStack,\n    isText: config.isText || parentStaticConf.isText || false,\n    isInput: config.isInput || parentStaticConf.isInput || false,\n    neverFlatten: config.neverFlatten || parentStaticConf.neverFlatten,\n    ensureOverriddenProp: config.ensureOverriddenProp ?? parentStaticConf.ensureOverriddenProp,\n    validStyles: config.validStyles\n      ? {\n          ...parentStaticConf.validStyles,\n          ...config.validStyles,\n        }\n      : parentStaticConf.validStyles || stylePropsView,\n    defaultProps: mergeProps(\n      {\n        ...parentStaticConf.defaultProps,\n        ...parentStaticConf.defaultVariants,\n      },\n      {\n        ...config.defaultProps,\n        ...config.defaultVariants,\n      }\n    ),\n  })\n}\n\nexport const parseStaticConfig = (config: Partial<StaticConfig>): StaticConfigParsed => {\n  return {\n    ...config,\n    parsed: true,\n    propMapper: createPropMapper(config),\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+B;AAG/B,8BAAiC;AACjC,wBAA2B;AAEpB,4BAA4B,QAA+B,QAA4B;AAC5F,MAAI,CAAC,UAAU,CAAE,mBAAkB,SAAS;AAC1C,WAAO,kBAAkB,MAAM;AAAA,EACjC;AAEA,QAAM,mBAAmB,OAAO;AAChC,QAAM,WAAW,mBACZ,iBAAiB;AAItB,MAAI,OAAO,UAAU;AACnB,eAAW,OAAO,OAAO,UAAU;AACjC,UAAI,SAAS,MAAM;AACjB,iBAAS,OAAO,kCACX,SAAS,OACT,OAAO,SAAS;AAAA,MAEvB,OAAO;AACL,iBAAS,OAAO,OAAO,SAAS;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AAGA,QAAM,cAAc,CAAC,GAAI,iBAAiB,eAAe,CAAC,CAAE;AAC5D,MAAI,iBAAiB,eAAe;AAClC,gBAAY,KAAK,iBAAiB,aAAa;AAAA,EACjD;AAEA,SAAO,kBAAkB,gDACpB,mBACA,SAFoB;AAAA,IAGvB;AAAA,IACA;AAAA,IACA,UAAU,OAAO,YAAY,iBAAiB;AAAA,IAC9C,QAAQ,OAAO,UAAU,iBAAiB,UAAU;AAAA,IACpD,SAAS,OAAO,WAAW,iBAAiB,WAAW;AAAA,IACvD,cAAc,OAAO,gBAAgB,iBAAiB;AAAA,IACtD,sBAAsB,OAAO,wBAAwB,iBAAiB;AAAA,IACtE,aAAa,OAAO,cAChB,kCACK,iBAAiB,cACjB,OAAO,eAEZ,iBAAiB,eAAe;AAAA,IACpC,cAAc,kCACZ,kCACK,iBAAiB,eACjB,iBAAiB,kBAEtB,kCACK,OAAO,eACP,OAAO,gBAEd;AAAA,EACF,EAAC;AACH;AAEO,MAAM,oBAAoB,CAAC,WAAsD;AACtF,SAAO,iCACF,SADE;AAAA,IAEL,QAAQ;AAAA,IACR,YAAY,8CAAiB,MAAM;AAAA,EACrC;AACF;",
+  "sourcesContent": ["import { stylePropsView } from '@tamagui/helpers'\n\nimport { StaticConfig, StaticConfigParsed, StylableComponent } from '../types'\nimport { createPropMapper } from './createPropMapper'\nimport { mergeProps } from './mergeProps'\n\nexport function extendStaticConfig(config: Partial<StaticConfig>, parent?: StylableComponent) {\n  if (!parent || !('staticConfig' in parent)) {\n    return parseStaticConfig(config)\n  }\n\n  const parentStaticConf = parent.staticConfig as StaticConfig\n  const variants = {\n    ...parentStaticConf.variants,\n  }\n\n  // merge variants... can we type this?\n  if (config.variants) {\n    for (const key in config.variants) {\n      if (variants[key]) {\n        variants[key] = {\n          ...variants[key],\n          ...config.variants[key],\n        }\n      } else {\n        variants[key] = config.variants[key]\n      }\n    }\n  }\n\n  // include our own\n  const parentNames = [...(parentStaticConf.parentNames || [])]\n  if (parentStaticConf.componentName) {\n    parentNames.push(parentStaticConf.componentName)\n  }\n\n  return parseStaticConfig({\n    ...parentStaticConf,\n    ...config,\n    variants,\n    parentNames,\n    isZStack: config.isZStack || parentStaticConf.isZStack,\n    isText: config.isText || parentStaticConf.isText || false,\n    isInput: config.isInput || parentStaticConf.isInput || false,\n    neverFlatten: config.neverFlatten || parentStaticConf.neverFlatten,\n    ensureOverriddenProp: config.ensureOverriddenProp ?? parentStaticConf.ensureOverriddenProp,\n    validStyles: config.validStyles\n      ? {\n          ...parentStaticConf.validStyles,\n          ...config.validStyles,\n        }\n      : parentStaticConf.validStyles || stylePropsView,\n    defaultProps: mergeProps(\n      {\n        ...parentStaticConf.defaultProps,\n        ...parentStaticConf.defaultVariants,\n      },\n      {\n        ...config.defaultProps,\n        ...config.defaultVariants,\n      }\n    )[0],\n  })\n}\n\nexport const parseStaticConfig = (config: Partial<StaticConfig>): StaticConfigParsed => {\n  return {\n    ...config,\n    parsed: true,\n    propMapper: createPropMapper(config),\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+B;AAG/B,8BAAiC;AACjC,wBAA2B;AAEpB,4BAA4B,QAA+B,QAA4B;AAC5F,MAAI,CAAC,UAAU,CAAE,mBAAkB,SAAS;AAC1C,WAAO,kBAAkB,MAAM;AAAA,EACjC;AAEA,QAAM,mBAAmB,OAAO;AAChC,QAAM,WAAW,mBACZ,iBAAiB;AAItB,MAAI,OAAO,UAAU;AACnB,eAAW,OAAO,OAAO,UAAU;AACjC,UAAI,SAAS,MAAM;AACjB,iBAAS,OAAO,kCACX,SAAS,OACT,OAAO,SAAS;AAAA,MAEvB,OAAO;AACL,iBAAS,OAAO,OAAO,SAAS;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AAGA,QAAM,cAAc,CAAC,GAAI,iBAAiB,eAAe,CAAC,CAAE;AAC5D,MAAI,iBAAiB,eAAe;AAClC,gBAAY,KAAK,iBAAiB,aAAa;AAAA,EACjD;AAEA,SAAO,kBAAkB,gDACpB,mBACA,SAFoB;AAAA,IAGvB;AAAA,IACA;AAAA,IACA,UAAU,OAAO,YAAY,iBAAiB;AAAA,IAC9C,QAAQ,OAAO,UAAU,iBAAiB,UAAU;AAAA,IACpD,SAAS,OAAO,WAAW,iBAAiB,WAAW;AAAA,IACvD,cAAc,OAAO,gBAAgB,iBAAiB;AAAA,IACtD,sBAAsB,OAAO,wBAAwB,iBAAiB;AAAA,IACtE,aAAa,OAAO,cAChB,kCACK,iBAAiB,cACjB,OAAO,eAEZ,iBAAiB,eAAe;AAAA,IACpC,cAAc,kCACZ,kCACK,iBAAiB,eACjB,iBAAiB,kBAEtB,kCACK,OAAO,eACP,OAAO,gBAEd,EAAE;AAAA,EACJ,EAAC;AACH;AAEO,MAAM,oBAAoB,CAAC,WAAsD;AACtF,SAAO,iCACF,SADE;AAAA,IAEL,QAAQ;AAAA,IACR,YAAY,8CAAiB,MAAM;AAAA,EACrC;AACF;",
   "names": []
 }

package/dist/cjs/helpers/getSplitStyles.js

@@ -92,7 +92,7 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, de
   let transforms = null;
   let rulesToInsert = null;
   function addStyle(prop, rule) {
-    if (process.env.IS_STATIC === "is_static" || (0, import_insertStyleRule.updateInsertedCache)(prop, rule)) {
+    if (!import_platform.isClient || (0, import_insertStyleRule.updateInsertedCache)(prop, rule)) {
       rulesToInsert = rulesToInsert || [];
       rulesToInsert.push([prop, rule]);
     }
@@ -109,7 +109,7 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, de
           transform = import_insertStyleRule.insertedTransforms[val];
           if (process.env.NODE_ENV === "development") {
             if (!transform) {
-              console.warn("no transform, error", { insertedTransforms: import_insertStyleRule.insertedTransforms, val });
+              console.warn("no transform found", { insertedTransforms: import_insertStyleRule.insertedTransforms, val });
             }
           }
         }
@@ -136,9 +136,10 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, de
   const propKeys = Object.keys(props);
   const shouldDoClasses = (import_platform.isWeb || process.env.IS_STATIC === "is_static") && !state.noClassNames;
   if (process.env.NODE_ENV === "development" && debug === "verbose") {
-    console.log("propKeys", propKeys);
+    console.log("propKeys", propKeys, props);
   }
-  for (let i = propKeys.length - 1; i >= 0; i--) {
+  const len = propKeys.length;
+  for (let i = len - 1; i >= 0; i--) {
     const keyInit = propKeys[i];
     if (usedKeys.has(keyInit))
       continue;
@@ -220,7 +221,7 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, de
     const expanded = isMedia || isPseudo ? [[keyInit, valInit]] : staticConfig.propMapper(keyInit, valInit, theme, props, state, void 0, debug);
     let isMediaOrPseudo = isMedia || isPseudo;
     if (process.env.NODE_ENV === "development" && debug === "verbose") {
-      console.log("  \xBB getSplitStyles", keyInit, expanded);
+      console.log("  \xBB getSplitStyles", keyInit, valInit, expanded);
     }
     if (!expanded) {
       continue;
@@ -235,7 +236,7 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, de
         if (usedKeys.has(key))
           continue;
       }
-      if (staticConfig.deoptProps && staticConfig.deoptProps.has(key) || staticConfig.inlineProps && staticConfig.inlineProps.has(key)) {
+      if (staticConfig.deoptProps && staticConfig.deoptProps.has(key) || staticConfig.inlineProps && staticConfig.inlineProps.has(key) || staticConfig.inlineWhenUnflattened && staticConfig.inlineWhenUnflattened.has(key)) {
         usedKeys.add(key);
         viewProps[key] = val;
       }
@@ -295,7 +296,7 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, de
         }
         continue;
       }
-      if (!import_platform.isWeb && key === "pointerEvents") {
+      if (!import_platform.isWeb && key === "pointerEvents" || state.avoidFontFamily && key === "fontFamily") {
         usedKeys.add(key);
         viewProps[key] = val;
         continue;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/getSplitStyles.tsx"],
-  "sourcesContent": ["import { stylePropsText, stylePropsTransform, validPseudoKeys, validStyles } from '@tamagui/helpers'\n// @ts-ignore\nimport { useInsertionEffect } from 'react'\nimport { ViewStyle } from 'react-native'\n\nimport { getConfig } from '../conf'\nimport { isClient, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { mediaQueryConfig, mediaState } from '../hooks/useMedia'\nimport {\n  DebugProp,\n  MediaKeys,\n  MediaQueryKey,\n  PseudoPropKeys,\n  PseudoStyles,\n  SplitStyleState,\n  StackProps,\n  StaticConfigParsed,\n  TamaguiInternalConfig,\n  ThemeObject,\n} from '../types'\nimport { createMediaStyle } from './createMediaStyle'\nimport { fixNativeShadow } from './fixNativeShadow'\nimport { getAtomicStyle, getStylesAtomic } from './getStylesAtomic'\nimport {\n  insertStyleRule,\n  insertedTransforms,\n  updateInserted,\n  updateInsertedCache,\n} from './insertStyleRule'\nimport { mergeTransform } from './mergeTransform'\nimport { pseudoDescriptors } from './pseudoDescriptors'\n\nexport type SplitStyles = ReturnType<typeof getSplitStyles>\nexport type ClassNamesObject = Record<string, string>\nexport type SplitStyleResult = ReturnType<typeof getSplitStyles>\n\nconst skipProps = {\n  animation: true,\n  animateOnly: true,\n  debug: true,\n  componentName: true,\n\n  ...(!isWeb && {\n    tag: true,\n    whiteSpace: true,\n    wordWrap: true,\n    textOverflow: true,\n    textDecorationDistance: true,\n    userSelect: true,\n    selectable: true,\n    cursor: true,\n    contain: true,\n    boxSizing: true,\n    boxShadow: true,\n  }),\n}\n\ntype TransformNamespaceKey = 'transform' | PseudoPropKeys | MediaQueryKey\n\nlet conf: TamaguiInternalConfig\n\ntype StyleSplitter = (\n  props: { [key: string]: any },\n  staticConfig: StaticConfigParsed,\n  theme: ThemeObject,\n  state: SplitStyleState & {\n    keepVariantsAsProps?: boolean\n    hasTextAncestor?: boolean\n  },\n  defaultClassNames?: any,\n  debug?: DebugProp\n) => {\n  pseudos: PseudoStyles\n  medias: Record<MediaKeys, ViewStyle>\n  style: ViewStyle\n  classNames: ClassNamesObject\n  rulesToInsert: [string, string][] | null\n  viewProps: StackProps\n}\n\nexport const PROP_SPLIT = '-'\n\n// this is how compiler outputs psueodo identifier\n// TODO remove in next refactor\nexport const pseudoCNInverse = {\n  hover: 'hoverStyle',\n  focus: 'focusStyle',\n  press: 'pressStyle',\n}\n\n// loop props backwards\n//   track used keys:\n//     const keys = new Set<string>()\n//   keep classnames and styles separate:\n//     const styles = {}\n//     const classNames = {}\n\nexport const getSplitStyles: StyleSplitter = (\n  props,\n  staticConfig,\n  theme,\n  state,\n  defaultClassNames,\n  debug\n) => {\n  conf = conf || getConfig()\n  const validStyleProps = staticConfig.isText ? stylePropsText : validStyles\n  const viewProps: StackProps = {}\n  const pseudos: PseudoStyles = {}\n  const medias: Record<MediaKeys, ViewStyle> = {}\n  const usedKeys = new Set<string>()\n\n  let style: ViewStyle = {}\n  if (state.hasTextAncestor) {\n    // parity with react-native-web\n    style.display = 'inline-flex' as any\n  }\n  let classNames: ClassNamesObject = {}\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 = null as Record<TransformNamespaceKey, [string, string]> | null\n\n  let rulesToInsert: [string, string][] | null = null\n  function addStyle(prop: string, rule: string) {\n    if (process.env.IS_STATIC === 'is_static' || updateInsertedCache(prop, rule)) {\n      rulesToInsert = rulesToInsert || []\n      rulesToInsert.push([prop, rule])\n    }\n  }\n\n  function mergeClassName(key: string, val: string, isMediaOrPseudo = false) {\n    // empty classnames passed by compiler sometimes\n    if (!val) return\n    if (val.startsWith('_transform-')) {\n      const namespace: TransformNamespaceKey = isMediaOrPseudo ? key : 'transform'\n\n      let transform = insertedTransforms[val]\n      if (isClient) {\n        if (!transform) {\n          // HMR or loaded a new chunk\n          updateInserted()\n          transform = insertedTransforms[val]\n          if (process.env.NODE_ENV === 'development') {\n            if (!transform) {\n              console.warn('no transform, error', { insertedTransforms, val })\n            }\n          }\n        }\n        if (!transform) {\n          if (isWeb && val[0] !== '_') {\n            // runtime insert\n            transform = val\n          }\n        }\n        if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n          // prettier-ignore\n          console.log('  \u00BB getSplitStyles mergeClassName transform', { key, val, namespace, transform, insertedTransforms })\n        }\n        // debugger\n      }\n      transforms = transforms || {}\n      transforms[namespace] = transforms[namespace] || ['', '']\n      const identifier = val.replace('_transform', '')\n      transforms[namespace][0] += identifier\n      // ssr doesn't need to do anything just make the right classname\n      if (transform) {\n        transforms[namespace][1] += transform\n      }\n    } else {\n      classNames[key] = val\n    }\n  }\n\n  const propKeys = Object.keys(props)\n  const shouldDoClasses = (isWeb || process.env.IS_STATIC === 'is_static') && !state.noClassNames\n\n  if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n    console.log('propKeys', propKeys)\n  }\n\n  for (let i = propKeys.length - 1; i >= 0; i--) {\n    const keyInit = propKeys[i]\n    if (usedKeys.has(keyInit)) continue\n    if (skipProps[keyInit]) continue\n    if (!isWeb && keyInit.startsWith('data-')) continue\n\n    const valInit = props[keyInit]\n    if (keyInit === 'style' || keyInit.startsWith('_style')) {\n      if (!valInit) continue\n      for (const key in valInit) {\n        if (usedKeys.has(key)) continue\n        if (valInit && typeof valInit === 'object') {\n          // newer react native versions return a full object instead of ID\n          for (const skey in valInit) {\n            if (usedKeys.has(skey)) continue\n            usedKeys.add(skey)\n            style[skey] = valInit[skey]\n          }\n        } else {\n          usedKeys.add(key)\n          style[key] = valInit\n        }\n      }\n      continue\n    }\n\n    if (keyInit === 'className') {\n      let nonTamaguis = ''\n      if (!valInit) continue\n      for (const cn of valInit.split(' ')) {\n        if (cn[0] === '_') {\n          // tamagui, merge it expanded on key, eventually this will go away with better compiler\n          const [shorthand, mediaOrPseudo] = cn.slice(1).split('-')\n          const isMedia = mediaOrPseudo[0] === '_'\n          const isPseudo = mediaOrPseudo[0] === '0'\n          const isMediaOrPseudo = isMedia || isPseudo\n          let fullKey = conf.shorthands[shorthand]\n          if (isMedia) {\n            // is media\n            let mediaShortKey = mediaOrPseudo.slice(1)\n            mediaShortKey = mediaShortKey.slice(0, mediaShortKey.indexOf('_'))\n            fullKey += `${PROP_SPLIT}${mediaShortKey}`\n          } else if (isPseudo) {\n            // is pseudo\n            const pseudoShortKey = mediaOrPseudo.slice(1)\n            fullKey += `${PROP_SPLIT}${pseudoShortKey}`\n          }\n          usedKeys.add(fullKey)\n          mergeClassName(fullKey, cn, isMediaOrPseudo)\n        } else {\n          nonTamaguis += ' ' + cn\n        }\n      }\n      if (nonTamaguis) {\n        usedKeys.add(keyInit)\n        mergeClassName(keyInit, nonTamaguis)\n      }\n      continue\n    }\n\n    if (valInit && valInit[0] === '_') {\n      // if valid style key (or pseudo like color-hover):\n      // this conditional and esp the pseudo check rarely runs so not a perf issue\n      const isValidClassName = validStyles[keyInit]\n      const isMediaOrPseudo =\n        !isValidClassName &&\n        keyInit.includes(PROP_SPLIT) &&\n        validStyles[keyInit.split(PROP_SPLIT)[0]]\n      if (isValidClassName || isMediaOrPseudo) {\n        usedKeys.add(keyInit)\n        mergeClassName(keyInit, valInit, isMediaOrPseudo)\n        continue\n      }\n    }\n\n    if (\n      state.keepVariantsAsProps &&\n      staticConfig.defaultVariants &&\n      keyInit in staticConfig.defaultVariants\n    ) {\n      viewProps[keyInit] = valInit\n    }\n\n    let isMedia = keyInit[0] === '$'\n    let isPseudo = validPseudoKeys[keyInit]\n\n    if (\n      !isMedia &&\n      !isPseudo &&\n      !staticConfig.variants?.[keyInit] &&\n      !validStyleProps[keyInit] &&\n      !conf.shorthands[keyInit]\n    ) {\n      usedKeys.add(keyInit)\n      viewProps[keyInit] = valInit\n      continue\n    }\n\n    const expanded =\n      isMedia || isPseudo\n        ? [[keyInit, valInit]]\n        : staticConfig.propMapper(keyInit, valInit, theme, props, state, undefined, debug)\n\n    let isMediaOrPseudo = isMedia || isPseudo\n\n    if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n      console.log('  \u00BB getSplitStyles', keyInit, expanded)\n    }\n\n    if (!expanded) {\n      continue\n    }\n\n    for (const [key, val] of expanded) {\n      if (val === undefined) continue\n\n      isMedia = key[0] === '$'\n      isPseudo = validPseudoKeys[key]\n      isMediaOrPseudo = isMedia || isPseudo\n\n      if (!isMediaOrPseudo) {\n        if (usedKeys.has(key)) continue\n      }\n\n      if (\n        (staticConfig.deoptProps && staticConfig.deoptProps.has(key)) ||\n        (staticConfig.inlineProps && staticConfig.inlineProps.has(key))\n      ) {\n        usedKeys.add(key)\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, true)\n        if (shouldDoClasses) {\n          const pseudoStyles = getAtomicStyle(pseudos[key], pseudoDescriptors[key])\n          for (const style of pseudoStyles) {\n            const postfix = pseudoDescriptors[key]?.name || key // exitStyle/enterStyle dont have pseudoDescriptors\n            const fullKey = `${style.property}${PROP_SPLIT}${postfix}`\n            if (!usedKeys.has(fullKey)) {\n              usedKeys.add(fullKey)\n              addStyle(style.identifier, style.rules.join(';'))\n              mergeClassName(fullKey, style.identifier, isMediaOrPseudo)\n            }\n          }\n        }\n        continue\n      }\n\n      // media\n      if (isMedia) {\n        const mediaKey = key\n        const mediaKeyShort = mediaKey.slice(1)\n\n        if (!mediaQueryConfig[mediaKeyShort]) {\n          if (!usedKeys.has(key)) {\n            // this isn't a media key, pass through\n            viewProps[key] = val\n          }\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(val, staticConfig, theme, props, state)\n\n        if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n          // prettier-ignore\n          console.log('  \u00BB getSplitStyles mediaStyle', { mediaKey, mediaStyle, props, shouldDoClasses })\n        }\n\n        if (shouldDoClasses) {\n          const mediaStyles = getStylesAtomic(mediaStyle)\n          for (const style of mediaStyles) {\n            const out = createMediaStyle(style, mediaKeyShort, mediaQueryConfig)\n            // TODO handle pseudo + media, not too hard just need to set up example case\n            const fullKey = `${style.property}${PROP_SPLIT}${mediaKeyShort}`\n            if (!usedKeys.has(fullKey)) {\n              usedKeys.add(fullKey)\n              addStyle(out.identifier, out.styleRule)\n              mergeClassName(fullKey, out.identifier, true)\n            }\n          }\n        } else {\n          if (mediaState[mediaKey]) {\n            if (process.env.NODE_ENV === 'development' && debug) {\n              console.log('apply media style', mediaKey, mediaState)\n            }\n            Object.assign(shouldDoClasses ? medias : style, mediaStyle)\n          }\n        }\n        continue\n      }\n\n      if (!isWeb && key === 'pointerEvents') {\n        usedKeys.add(key)\n        viewProps[key] = val\n        continue\n      }\n\n      if (validStyleProps[key]) {\n        usedKeys.add(key)\n        if (val && val[0] === '_') {\n          classNames[key] = val\n        } else if (key in stylePropsTransform) {\n          mergeTransform(style, key, val, true)\n        } else {\n          style[key] = val\n        }\n        continue\n      }\n\n      // pass to view props\n      if (!staticConfig.variants || !(key in staticConfig.variants)) {\n        if (!skipProps[key]) {\n          viewProps[key] = val\n          usedKeys.add(key)\n        }\n      }\n    }\n  }\n\n  // add in defaults if not set:\n  if (defaultClassNames) {\n    classNames = {\n      ...defaultClassNames,\n      ...classNames,\n    }\n  }\n\n  if (shouldDoClasses) {\n    const atomic = getStylesAtomic(style)\n    for (const atomicStyle of atomic) {\n      const key = atomicStyle.property\n      if (!state.dynamicStylesInline) {\n        addStyle(atomicStyle.identifier, atomicStyle.rules.join(';'))\n        mergeClassName(key, atomicStyle.identifier)\n      } else {\n        style[key] = atomicStyle.value\n      }\n    }\n  }\n\n  if (transforms) {\n    for (const namespace in transforms) {\n      if (!transforms[namespace]) {\n        console.warn('Error no transform')\n        continue\n      }\n      const [hash, val] = transforms[namespace]\n      const identifier = `_transform${hash}`\n      if (isClient) {\n        if (!insertedTransforms[identifier]) {\n          const rule = `.${identifier} { transform: ${val}; }`\n          addStyle(identifier, rule)\n        }\n      }\n      classNames[namespace] = identifier\n    }\n  }\n\n  if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n    if (typeof document !== 'undefined') {\n      // prettier-ignore\n      console.log('  \u00BB getSplitStyles out', { style, pseudos, medias, classNames, viewProps, state })\n    }\n  }\n\n  // @ts-ignore\n  if (viewProps['direction'] === 'both') {\n    console.warn('???????', viewProps, props)\n  }\n\n  return {\n    viewProps,\n    style,\n    medias,\n    pseudos,\n    classNames,\n    rulesToInsert,\n  }\n}\n\nexport const insertSplitStyles: StyleSplitter = (...args) => {\n  const res = getSplitStyles(...args)\n  if (res.rulesToInsert) {\n    for (const [prop, rule] of res.rulesToInsert) {\n      insertStyleRule(prop, rule)\n    }\n  }\n  return res\n}\n\nconst effect = isWeb ? useInsertionEffect || useIsomorphicLayoutEffect : useIsomorphicLayoutEffect\n\nexport const useSplitStyles: StyleSplitter = (...args) => {\n  const res = getSplitStyles(...args)\n  effect(() => {\n    if (!res.rulesToInsert) return\n    for (const [prop, rule] of res.rulesToInsert) {\n      insertStyleRule(prop, rule)\n    }\n  })\n  return res\n}\n\nexport const getSubStyle = (\n  styleIn: Object,\n  staticConfig: StaticConfigParsed,\n  theme: ThemeObject,\n  props: any,\n  state: SplitStyleState,\n  avoidDefaultProps?: boolean\n): ViewStyle => {\n  const styleOut: ViewStyle = {}\n  for (const key in styleIn) {\n    const val = styleIn[key]\n    const expanded = staticConfig.propMapper(key, val, theme, props, state, avoidDefaultProps)\n    if (!expanded) continue\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  return styleOut\n}\n\nexport function normalizeStyleObject(style: any) {\n  if (!isWeb) {\n    fixNativeShadow(style)\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { stylePropsText, stylePropsTransform, validPseudoKeys, validStyles } from '@tamagui/helpers'\n// @ts-ignore\nimport { useInsertionEffect } from 'react'\nimport { ViewStyle } from 'react-native'\n\nimport { getConfig } from '../conf'\nimport { isClient, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { mediaQueryConfig, mediaState } from '../hooks/useMedia'\nimport {\n  DebugProp,\n  MediaKeys,\n  MediaQueryKey,\n  PseudoPropKeys,\n  PseudoStyles,\n  SplitStyleState,\n  StackProps,\n  StaticConfigParsed,\n  TamaguiInternalConfig,\n  ThemeObject,\n} from '../types'\nimport { createMediaStyle } from './createMediaStyle'\nimport { fixNativeShadow } from './fixNativeShadow'\nimport { getAtomicStyle, getStylesAtomic } from './getStylesAtomic'\nimport {\n  insertStyleRule,\n  insertedTransforms,\n  updateInserted,\n  updateInsertedCache,\n} from './insertStyleRule'\nimport { mergeTransform } from './mergeTransform'\nimport { pseudoDescriptors } from './pseudoDescriptors'\n\nexport type SplitStyles = ReturnType<typeof getSplitStyles>\nexport type ClassNamesObject = Record<string, string>\nexport type SplitStyleResult = ReturnType<typeof getSplitStyles>\n\nconst skipProps = {\n  animation: true,\n  animateOnly: true,\n  debug: true,\n  componentName: true,\n\n  ...(!isWeb && {\n    tag: true,\n    whiteSpace: true,\n    wordWrap: true,\n    textOverflow: true,\n    textDecorationDistance: true,\n    userSelect: true,\n    selectable: true,\n    cursor: true,\n    contain: true,\n    boxSizing: true,\n    boxShadow: true,\n  }),\n}\n\ntype TransformNamespaceKey = 'transform' | PseudoPropKeys | MediaQueryKey\n\nlet conf: TamaguiInternalConfig\n\ntype StyleSplitter = (\n  props: { [key: string]: any },\n  staticConfig: StaticConfigParsed,\n  theme: ThemeObject,\n  state: SplitStyleState,\n  defaultClassNames?: any,\n  debug?: DebugProp\n) => {\n  pseudos: PseudoStyles\n  medias: Record<MediaKeys, ViewStyle>\n  style: ViewStyle\n  classNames: ClassNamesObject\n  rulesToInsert: [string, string][] | null\n  viewProps: StackProps\n}\n\nexport const PROP_SPLIT = '-'\n\n// this is how compiler outputs psueodo identifier\n// TODO remove in next refactor\nexport const pseudoCNInverse = {\n  hover: 'hoverStyle',\n  focus: 'focusStyle',\n  press: 'pressStyle',\n}\n\n// loop props backwards\n//   track used keys:\n//     const keys = new Set<string>()\n//   keep classnames and styles separate:\n//     const styles = {}\n//     const classNames = {}\n\nexport const getSplitStyles: StyleSplitter = (\n  props,\n  staticConfig,\n  theme,\n  state,\n  defaultClassNames,\n  debug\n) => {\n  conf = conf || getConfig()\n  const validStyleProps = staticConfig.isText ? stylePropsText : validStyles\n  const viewProps: StackProps = {}\n  const pseudos: PseudoStyles = {}\n  const medias: Record<MediaKeys, ViewStyle> = {}\n  const usedKeys = new Set<string>()\n\n  let style: ViewStyle = {}\n  if (state.hasTextAncestor) {\n    // parity with react-native-web\n    style.display = 'inline-flex' as any\n  }\n  let classNames: ClassNamesObject = {}\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 = null as Record<TransformNamespaceKey, [string, string]> | null\n\n  let rulesToInsert: [string, string][] | null = null\n  function addStyle(prop: string, rule: string) {\n    if (!isClient || updateInsertedCache(prop, rule)) {\n      rulesToInsert = rulesToInsert || []\n      rulesToInsert.push([prop, rule])\n    }\n  }\n\n  function mergeClassName(key: string, val: string, isMediaOrPseudo = false) {\n    // empty classnames passed by compiler sometimes\n    if (!val) return\n    if (val.startsWith('_transform-')) {\n      const namespace: TransformNamespaceKey = isMediaOrPseudo ? key : 'transform'\n\n      let transform = insertedTransforms[val]\n      if (isClient) {\n        if (!transform) {\n          // HMR or loaded a new chunk\n          updateInserted()\n          transform = insertedTransforms[val]\n          if (process.env.NODE_ENV === 'development') {\n            if (!transform) {\n              console.warn('no transform found', { insertedTransforms, val })\n            }\n          }\n        }\n        if (!transform) {\n          if (isWeb && val[0] !== '_') {\n            // runtime insert\n            transform = val\n          }\n        }\n        if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n          // prettier-ignore\n          console.log('  \u00BB getSplitStyles mergeClassName transform', { key, val, namespace, transform, insertedTransforms })\n        }\n        // debugger\n      }\n      transforms = transforms || {}\n      transforms[namespace] = transforms[namespace] || ['', '']\n      const identifier = val.replace('_transform', '')\n      transforms[namespace][0] += identifier\n      // ssr doesn't need to do anything just make the right classname\n      if (transform) {\n        transforms[namespace][1] += transform\n      }\n    } else {\n      classNames[key] = val\n    }\n  }\n\n  const propKeys = Object.keys(props)\n  const shouldDoClasses = (isWeb || process.env.IS_STATIC === 'is_static') && !state.noClassNames\n\n  if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n    console.log('propKeys', propKeys, props)\n  }\n\n  const len = propKeys.length\n  for (let i = len - 1; i >= 0; i--) {\n    const keyInit = propKeys[i]\n    if (usedKeys.has(keyInit)) continue\n    if (skipProps[keyInit]) continue\n    if (!isWeb && keyInit.startsWith('data-')) continue\n\n    const valInit = props[keyInit]\n\n    if (keyInit === 'style' || keyInit.startsWith('_style')) {\n      if (!valInit) continue\n      for (const key in valInit) {\n        if (usedKeys.has(key)) continue\n        if (valInit && typeof valInit === 'object') {\n          // newer react native versions return a full object instead of ID\n          for (const skey in valInit) {\n            if (usedKeys.has(skey)) continue\n            usedKeys.add(skey)\n            style[skey] = valInit[skey]\n          }\n        } else {\n          usedKeys.add(key)\n          style[key] = valInit\n        }\n      }\n      continue\n    }\n\n    if (keyInit === 'className') {\n      let nonTamaguis = ''\n      if (!valInit) continue\n      for (const cn of valInit.split(' ')) {\n        if (cn[0] === '_') {\n          // tamagui, merge it expanded on key, eventually this will go away with better compiler\n          const [shorthand, mediaOrPseudo] = cn.slice(1).split('-')\n          const isMedia = mediaOrPseudo[0] === '_'\n          const isPseudo = mediaOrPseudo[0] === '0'\n          const isMediaOrPseudo = isMedia || isPseudo\n          let fullKey = conf.shorthands[shorthand]\n          if (isMedia) {\n            // is media\n            let mediaShortKey = mediaOrPseudo.slice(1)\n            mediaShortKey = mediaShortKey.slice(0, mediaShortKey.indexOf('_'))\n            fullKey += `${PROP_SPLIT}${mediaShortKey}`\n          } else if (isPseudo) {\n            // is pseudo\n            const pseudoShortKey = mediaOrPseudo.slice(1)\n            fullKey += `${PROP_SPLIT}${pseudoShortKey}`\n          }\n          usedKeys.add(fullKey)\n          mergeClassName(fullKey, cn, isMediaOrPseudo)\n        } else {\n          nonTamaguis += ' ' + cn\n        }\n      }\n      if (nonTamaguis) {\n        usedKeys.add(keyInit)\n        mergeClassName(keyInit, nonTamaguis)\n      }\n      continue\n    }\n\n    if (valInit && valInit[0] === '_') {\n      // if valid style key (or pseudo like color-hover):\n      // this conditional and esp the pseudo check rarely runs so not a perf issue\n      const isValidClassName = validStyles[keyInit]\n      const isMediaOrPseudo =\n        !isValidClassName &&\n        keyInit.includes(PROP_SPLIT) &&\n        validStyles[keyInit.split(PROP_SPLIT)[0]]\n      if (isValidClassName || isMediaOrPseudo) {\n        usedKeys.add(keyInit)\n        mergeClassName(keyInit, valInit, isMediaOrPseudo)\n        continue\n      }\n    }\n\n    if (\n      state.keepVariantsAsProps &&\n      staticConfig.defaultVariants &&\n      keyInit in staticConfig.defaultVariants\n    ) {\n      viewProps[keyInit] = valInit\n    }\n\n    let isMedia = keyInit[0] === '$'\n    let isPseudo = validPseudoKeys[keyInit]\n\n    if (\n      !isMedia &&\n      !isPseudo &&\n      !staticConfig.variants?.[keyInit] &&\n      !validStyleProps[keyInit] &&\n      !conf.shorthands[keyInit]\n    ) {\n      usedKeys.add(keyInit)\n      viewProps[keyInit] = valInit\n      continue\n    }\n\n    const expanded =\n      isMedia || isPseudo\n        ? [[keyInit, valInit]]\n        : staticConfig.propMapper(keyInit, valInit, theme, props, state, undefined, debug)\n\n    let isMediaOrPseudo = isMedia || isPseudo\n\n    if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n      console.log('  \u00BB getSplitStyles', keyInit, valInit, expanded)\n    }\n\n    if (!expanded) {\n      continue\n    }\n\n    for (const [key, val] of expanded) {\n      if (val === undefined) continue\n\n      isMedia = key[0] === '$'\n      isPseudo = validPseudoKeys[key]\n      isMediaOrPseudo = isMedia || isPseudo\n\n      if (!isMediaOrPseudo) {\n        if (usedKeys.has(key)) continue\n      }\n\n      if (\n        (staticConfig.deoptProps && staticConfig.deoptProps.has(key)) ||\n        (staticConfig.inlineProps && staticConfig.inlineProps.has(key)) ||\n        (staticConfig.inlineWhenUnflattened && staticConfig.inlineWhenUnflattened.has(key))\n      ) {\n        usedKeys.add(key)\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, true)\n        if (shouldDoClasses) {\n          const pseudoStyles = getAtomicStyle(pseudos[key], pseudoDescriptors[key])\n          for (const style of pseudoStyles) {\n            const postfix = pseudoDescriptors[key]?.name || key // exitStyle/enterStyle dont have pseudoDescriptors\n            const fullKey = `${style.property}${PROP_SPLIT}${postfix}`\n            if (!usedKeys.has(fullKey)) {\n              usedKeys.add(fullKey)\n              addStyle(style.identifier, style.rules.join(';'))\n              mergeClassName(fullKey, style.identifier, isMediaOrPseudo)\n            }\n          }\n        }\n        continue\n      }\n\n      // media\n      if (isMedia) {\n        const mediaKey = key\n        const mediaKeyShort = mediaKey.slice(1)\n\n        if (!mediaQueryConfig[mediaKeyShort]) {\n          if (!usedKeys.has(key)) {\n            // this isn't a media key, pass through\n            viewProps[key] = val\n          }\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(val, staticConfig, theme, props, state)\n\n        if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n          // prettier-ignore\n          console.log('  \u00BB getSplitStyles mediaStyle', { mediaKey, mediaStyle, props, shouldDoClasses })\n        }\n\n        if (shouldDoClasses) {\n          const mediaStyles = getStylesAtomic(mediaStyle)\n          for (const style of mediaStyles) {\n            const out = createMediaStyle(style, mediaKeyShort, mediaQueryConfig)\n            // TODO handle pseudo + media, not too hard just need to set up example case\n            const fullKey = `${style.property}${PROP_SPLIT}${mediaKeyShort}`\n            if (!usedKeys.has(fullKey)) {\n              usedKeys.add(fullKey)\n              addStyle(out.identifier, out.styleRule)\n              mergeClassName(fullKey, out.identifier, true)\n            }\n          }\n        } else {\n          if (mediaState[mediaKey]) {\n            if (process.env.NODE_ENV === 'development' && debug) {\n              console.log('apply media style', mediaKey, mediaState)\n            }\n            Object.assign(shouldDoClasses ? medias : style, mediaStyle)\n          }\n        }\n        continue\n      }\n\n      if ((!isWeb && key === 'pointerEvents') || (state.avoidFontFamily && key === 'fontFamily')) {\n        usedKeys.add(key)\n        viewProps[key] = val\n        continue\n      }\n\n      if (validStyleProps[key]) {\n        usedKeys.add(key)\n        if (val && val[0] === '_') {\n          classNames[key] = val\n        } else if (key in stylePropsTransform) {\n          mergeTransform(style, key, val, true)\n        } else {\n          style[key] = val\n        }\n        continue\n      }\n\n      // pass to view props\n      if (!staticConfig.variants || !(key in staticConfig.variants)) {\n        if (!skipProps[key]) {\n          viewProps[key] = val\n          usedKeys.add(key)\n        }\n      }\n    }\n  }\n\n  // add in defaults if not set:\n  if (defaultClassNames) {\n    classNames = {\n      ...defaultClassNames,\n      ...classNames,\n    }\n  }\n\n  if (shouldDoClasses) {\n    const atomic = getStylesAtomic(style)\n    for (const atomicStyle of atomic) {\n      const key = atomicStyle.property\n      if (!state.dynamicStylesInline) {\n        addStyle(atomicStyle.identifier, atomicStyle.rules.join(';'))\n        mergeClassName(key, atomicStyle.identifier)\n      } else {\n        style[key] = atomicStyle.value\n      }\n    }\n  }\n\n  if (transforms) {\n    for (const namespace in transforms) {\n      if (!transforms[namespace]) {\n        console.warn('Error no transform')\n        continue\n      }\n      const [hash, val] = transforms[namespace]\n      const identifier = `_transform${hash}`\n      if (isClient) {\n        if (!insertedTransforms[identifier]) {\n          const rule = `.${identifier} { transform: ${val}; }`\n          addStyle(identifier, rule)\n        }\n      }\n      classNames[namespace] = identifier\n    }\n  }\n\n  if (process.env.NODE_ENV === 'development' && debug === 'verbose') {\n    if (typeof document !== 'undefined') {\n      // prettier-ignore\n      console.log('  \u00BB getSplitStyles out', { style, pseudos, medias, classNames, viewProps, state })\n    }\n  }\n\n  // @ts-ignore\n  if (viewProps['direction'] === 'both') {\n    console.warn('???????', viewProps, props)\n  }\n\n  return {\n    viewProps,\n    style,\n    medias,\n    pseudos,\n    classNames,\n    rulesToInsert,\n  }\n}\n\nexport const insertSplitStyles: StyleSplitter = (...args) => {\n  const res = getSplitStyles(...args)\n  if (res.rulesToInsert) {\n    for (const [prop, rule] of res.rulesToInsert) {\n      insertStyleRule(prop, rule)\n    }\n  }\n  return res\n}\n\nconst effect = isWeb ? useInsertionEffect || useIsomorphicLayoutEffect : useIsomorphicLayoutEffect\n\nexport const useSplitStyles: StyleSplitter = (...args) => {\n  const res = getSplitStyles(...args)\n  effect(() => {\n    if (!res.rulesToInsert) return\n    for (const [prop, rule] of res.rulesToInsert) {\n      insertStyleRule(prop, rule)\n    }\n  })\n  return res\n}\n\nexport const getSubStyle = (\n  styleIn: Object,\n  staticConfig: StaticConfigParsed,\n  theme: ThemeObject,\n  props: any,\n  state: SplitStyleState,\n  avoidDefaultProps?: boolean\n): ViewStyle => {\n  const styleOut: ViewStyle = {}\n  for (const key in styleIn) {\n    const val = styleIn[key]\n    const expanded = staticConfig.propMapper(key, val, theme, props, state, avoidDefaultProps)\n    if (!expanded) continue\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  return styleOut\n}\n\nexport function normalizeStyleObject(style: any) {\n  if (!isWeb) {\n    fixNativeShadow(style)\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/helpers/getStylesAtomic.js

@@ -38,22 +38,21 @@ module.exports = __toCommonJS(getStylesAtomic_exports);
 var import_generateAtomicStyles = require("./generateAtomicStyles");
 var import_pseudoDescriptors = require("./pseudoDescriptors");
 const pseudosOrdered = Object.values(import_pseudoDescriptors.pseudoDescriptors);
-function getStylesAtomic(stylesIn, options) {
+function getStylesAtomic(stylesIn) {
   if (!stylesIn.hoverStyle && !stylesIn.pressStyle && !stylesIn.focusStyle) {
-    return getAtomicStyle(stylesIn, void 0, options);
+    return getAtomicStyle(stylesIn);
   }
-  console.log("go");
   const _a = stylesIn, { hoverStyle, pressStyle, focusStyle } = _a, base = __objRest(_a, ["hoverStyle", "pressStyle", "focusStyle"]);
   let res = [];
   for (const [index, style] of [hoverStyle, pressStyle, focusStyle, base].entries()) {
     if (!style)
       continue;
     const pseudo = pseudosOrdered[index];
-    res = [...res, ...getAtomicStyle(style, pseudo, options)];
+    res = [...res, ...getAtomicStyle(style, pseudo)];
   }
   return res;
 }
-function getAtomicStyle(style, pseudo, options) {
+function getAtomicStyle(style, pseudo) {
   if (process.env.NODE_ENV === "development") {
     if (!style || typeof style !== "object") {
       throw new Error(`Wrong style type: "${typeof style}": ${style}`);

package/dist/cjs/helpers/getStylesAtomic.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/getStylesAtomic.ts"],
-  "sourcesContent": ["import { StyleObject, stylePropsTransform } from '@tamagui/helpers'\nimport { ViewStyle } from 'react-native'\n\nimport { isVariable } from '../createVariable'\nimport { generateAtomicStyles } from './generateAtomicStyles'\nimport { PROP_SPLIT } from './getSplitStyles'\nimport { invertMapTransformKeys, mergeTransform } from './mergeTransform'\nimport { PseudoDescriptor, pseudoDescriptors } from './pseudoDescriptors'\n\n// refactor this file away next...\n\nexport type ViewStyleWithPseudos = ViewStyle & {\n  hoverStyle?: ViewStyle\n  pressStyle?: ViewStyle\n  focusStyle?: ViewStyle\n}\n\ntype AtomicStyleOptions = {\n  // StyleObject.propererty will be original transform key, so extractor can keep prop/spread logic\n  splitTransforms?: boolean\n}\n\nconst pseudosOrdered = Object.values(pseudoDescriptors)\n\nexport function getStylesAtomic(stylesIn: ViewStyleWithPseudos, options?: AtomicStyleOptions) {\n  // performance optimization\n  if (!stylesIn.hoverStyle && !stylesIn.pressStyle && !stylesIn.focusStyle) {\n    return getAtomicStyle(stylesIn, undefined, options)\n  }\n\n  console.log('go')\n\n  // only for pseudos\n  const { hoverStyle, pressStyle, focusStyle, ...base } = stylesIn\n  let res: StyleObject[] = []\n  // *1 order matched to *0\n  for (const [index, style] of [hoverStyle, pressStyle, focusStyle, base].entries()) {\n    if (!style) continue\n    const pseudo = pseudosOrdered[index]\n    res = [...res, ...getAtomicStyle(style, pseudo, options)]\n  }\n  return res\n}\n\nexport function getAtomicStyle(\n  style: ViewStyle,\n  pseudo?: PseudoDescriptor,\n  options?: AtomicStyleOptions\n): StyleObject[] {\n  if (process.env.NODE_ENV === 'development') {\n    if (!style || typeof style !== 'object') {\n      throw new Error(`Wrong style type: \"${typeof style}\": ${style}`)\n    }\n  } else {\n    if (!style) {\n      console.warn(`Invalid style`)\n      return []\n    }\n  }\n\n  // if (options && options.splitTransforms && style.transform) {\n  //   let atomicStyles: StyleObject[] = []\n  //   let { transform, ...rest } = style\n  //   // for (const t of transform) {\n  //   //   const tKey = Object.keys(t)[0]\n  //   //   const transformProperty = invertMapTransformKeys[tKey] || tKey\n  //   //   const out = generateAtomicStyles({ transform: [t] }, pseudo)[0]\n  //   //   atomicStyles.push({\n  //   //     ...out,\n  //   //     property: transformProperty + (out.pseudo ? `${PROP_SPLIT}${out.pseudo}` : ''),\n  //   //   })\n  //   // }\n  //   console.log('rest', rest)\n  //   return [...atomicStyles, ...generateAtomicStyles(rest, pseudo)]\n  // }\n\n  return generateAtomicStyles(style, pseudo)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,kCAAqC;AAGrC,+BAAoD;AAepD,MAAM,iBAAiB,OAAO,OAAO,0CAAiB;AAE/C,yBAAyB,UAAgC,SAA8B;AAE5F,MAAI,CAAC,SAAS,cAAc,CAAC,SAAS,cAAc,CAAC,SAAS,YAAY;AACxE,WAAO,eAAe,UAAU,QAAW,OAAO;AAAA,EACpD;AAEA,UAAQ,IAAI,IAAI;AAGhB,QAAwD,eAAhD,cAAY,YAAY,eAAwB,IAAT,iBAAS,IAAT,CAAvC,cAAY,cAAY;AAChC,MAAI,MAAqB,CAAC;AAE1B,aAAW,CAAC,OAAO,UAAU,CAAC,YAAY,YAAY,YAAY,IAAI,EAAE,QAAQ,GAAG;AACjF,QAAI,CAAC;AAAO;AACZ,UAAM,SAAS,eAAe;AAC9B,UAAM,CAAC,GAAG,KAAK,GAAG,eAAe,OAAO,QAAQ,OAAO,CAAC;AAAA,EAC1D;AACA,SAAO;AACT;AAEO,wBACL,OACA,QACA,SACe;AACf,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,CAAC,SAAS,OAAO,UAAU,UAAU;AACvC,YAAM,IAAI,MAAM,sBAAsB,OAAO,WAAW,OAAO;AAAA,IACjE;AAAA,EACF,OAAO;AACL,QAAI,CAAC,OAAO;AACV,cAAQ,KAAK,eAAe;AAC5B,aAAO,CAAC;AAAA,IACV;AAAA,EACF;AAkBA,SAAO,sDAAqB,OAAO,MAAM;AAC3C;",
+  "sourcesContent": ["import { StyleObject } from '@tamagui/helpers'\nimport { ViewStyle } from 'react-native'\n\nimport { generateAtomicStyles } from './generateAtomicStyles'\nimport { PseudoDescriptor, pseudoDescriptors } from './pseudoDescriptors'\n\n// refactor this file away next...\n\nexport type ViewStyleWithPseudos = ViewStyle & {\n  hoverStyle?: ViewStyle\n  pressStyle?: ViewStyle\n  focusStyle?: ViewStyle\n}\n\nconst pseudosOrdered = Object.values(pseudoDescriptors)\n\nexport function getStylesAtomic(stylesIn: ViewStyleWithPseudos) {\n  // performance optimization\n  if (!stylesIn.hoverStyle && !stylesIn.pressStyle && !stylesIn.focusStyle) {\n    return getAtomicStyle(stylesIn)\n  }\n\n  // only for pseudos\n  const { hoverStyle, pressStyle, focusStyle, ...base } = stylesIn\n  let res: StyleObject[] = []\n  // *1 order matched to *0\n  for (const [index, style] of [hoverStyle, pressStyle, focusStyle, base].entries()) {\n    if (!style) continue\n    const pseudo = pseudosOrdered[index]\n    res = [...res, ...getAtomicStyle(style, pseudo)]\n  }\n  return res\n}\n\nexport function getAtomicStyle(style: ViewStyle, pseudo?: PseudoDescriptor): StyleObject[] {\n  if (process.env.NODE_ENV === 'development') {\n    if (!style || typeof style !== 'object') {\n      throw new Error(`Wrong style type: \"${typeof style}\": ${style}`)\n    }\n  } else {\n    if (!style) {\n      console.warn(`Invalid style`)\n      return []\n    }\n  }\n\n  return generateAtomicStyles(style, pseudo)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kCAAqC;AACrC,+BAAoD;AAUpD,MAAM,iBAAiB,OAAO,OAAO,0CAAiB;AAE/C,yBAAyB,UAAgC;AAE9D,MAAI,CAAC,SAAS,cAAc,CAAC,SAAS,cAAc,CAAC,SAAS,YAAY;AACxE,WAAO,eAAe,QAAQ;AAAA,EAChC;AAGA,QAAwD,eAAhD,cAAY,YAAY,eAAwB,IAAT,iBAAS,IAAT,CAAvC,cAAY,cAAY;AAChC,MAAI,MAAqB,CAAC;AAE1B,aAAW,CAAC,OAAO,UAAU,CAAC,YAAY,YAAY,YAAY,IAAI,EAAE,QAAQ,GAAG;AACjF,QAAI,CAAC;AAAO;AACZ,UAAM,SAAS,eAAe;AAC9B,UAAM,CAAC,GAAG,KAAK,GAAG,eAAe,OAAO,MAAM,CAAC;AAAA,EACjD;AACA,SAAO;AACT;AAEO,wBAAwB,OAAkB,QAA0C;AACzF,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,CAAC,SAAS,OAAO,UAAU,UAAU;AACvC,YAAM,IAAI,MAAM,sBAAsB,OAAO,WAAW,OAAO;AAAA,IACjE;AAAA,EACF,OAAO;AACL,QAAI,CAAC,OAAO;AACV,cAAQ,KAAK,eAAe;AAC5B,aAAO,CAAC;AAAA,IACV;AAAA,EACF;AAEA,SAAO,sDAAqB,OAAO,MAAM;AAC3C;",
   "names": []
 }

package/dist/cjs/helpers/mergeProps.js

@@ -20,17 +20,27 @@ __export(mergeProps_exports, {
   mergeProps: () => mergeProps
 });
 module.exports = __toCommonJS(mergeProps_exports);
-const mergeProps = (a, b) => {
+const mergeProps = (a, b, leaveOutClassNames = false) => {
+  var _a, _b;
   const out = {};
+  const outCns = leaveOutClassNames ? {} : null;
   for (const key in a) {
     if (!(key in b)) {
-      out[key] = a[key];
+      if (leaveOutClassNames && ((_a = a[key]) == null ? void 0 : _a[0]) === "_") {
+        outCns[key] = a[key];
+      } else {
+        out[key] = a[key];
+      }
     }
   }
   for (const key in b) {
-    out[key] = b[key];
+    if (leaveOutClassNames && ((_b = b[key]) == null ? void 0 : _b[0]) === "_") {
+      outCns[key] = b[key];
+    } else {
+      out[key] = b[key];
+    }
   }
-  return out;
+  return [out, outCns];
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/helpers/mergeProps.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/mergeProps.ts"],
-  "sourcesContent": ["/**\n * Preserves prop ordering, so that the order most closely matches the last spread objects\n * Useful for having { ...defaultProps, ...props } that ensure props ordering is always kept\n *\n *    Given:\n *      mergeProps({ a: 1, b: 2 }, { b: 1, a: 2 })\n *    The final key order will be:\n *      b, a\n */\n\nexport const mergeProps = (a: Object, b: Object) => {\n  const out = {}\n\n  for (const key in a) {\n    if (!(key in b)) {\n      out[key] = a[key]\n    }\n  }\n\n  for (const key in b) {\n    out[key] = b[key]\n  }\n\n  return out\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUO,MAAM,aAAa,CAAC,GAAW,MAAc;AAClD,QAAM,MAAM,CAAC;AAEb,aAAW,OAAO,GAAG;AACnB,QAAI,CAAE,QAAO,IAAI;AACf,UAAI,OAAO,EAAE;AAAA,IACf;AAAA,EACF;AAEA,aAAW,OAAO,GAAG;AACnB,QAAI,OAAO,EAAE;AAAA,EACf;AAEA,SAAO;AACT;",
+  "sourcesContent": ["/**\n * Preserves prop ordering, so that the order most closely matches the last spread objects\n * Useful for having { ...defaultProps, ...props } that ensure props ordering is always kept\n *\n *    Given:\n *      mergeProps({ a: 1, b: 2 }, { b: 1, a: 2 })\n *    The final key order will be:\n *      b, a\n */\n\nexport const mergeProps = (a: Object, b: Object, leaveOutClassNames = false) => {\n  const out: Record<string, string> = {}\n  const outCns: Record<string, string> = leaveOutClassNames ? {} : (null as any)\n\n  for (const key in a) {\n    if (!(key in b)) {\n      if (leaveOutClassNames && a[key]?.[0] === '_') {\n        outCns[key] = a[key]\n      } else {\n        out[key] = a[key]\n      }\n    }\n  }\n\n  for (const key in b) {\n    if (leaveOutClassNames && b[key]?.[0] === '_') {\n      outCns[key] = b[key]\n    } else {\n      out[key] = b[key]\n    }\n  }\n\n  return [out, outCns] as const\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUO,MAAM,aAAa,CAAC,GAAW,GAAW,qBAAqB,UAAU;AAVhF;AAWE,QAAM,MAA8B,CAAC;AACrC,QAAM,SAAiC,qBAAqB,CAAC,IAAK;AAElE,aAAW,OAAO,GAAG;AACnB,QAAI,CAAE,QAAO,IAAI;AACf,UAAI,sBAAsB,SAAE,SAAF,mBAAS,QAAO,KAAK;AAC7C,eAAO,OAAO,EAAE;AAAA,MAClB,OAAO;AACL,YAAI,OAAO,EAAE;AAAA,MACf;AAAA,IACF;AAAA,EACF;AAEA,aAAW,OAAO,GAAG;AACnB,QAAI,sBAAsB,SAAE,SAAF,mBAAS,QAAO,KAAK;AAC7C,aAAO,OAAO,EAAE;AAAA,IAClB,OAAO;AACL,UAAI,OAAO,EAAE;AAAA,IACf;AAAA,EACF;AAEA,SAAO,CAAC,KAAK,MAAM;AACrB;",
   "names": []
 }

package/dist/cjs/helpers/wrapThemeManagerContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/wrapThemeManagerContext.tsx"],
-  "sourcesContent": ["import React from 'react'\n\nimport { ThemeManager, ThemeManagerContext } from '../ThemeManager'\n\nexport function wrapThemeManagerContext(children: any, themeManager?: ThemeManager | null) {\n  return themeManager ? (\n    <ThemeManagerContext.Provider value={themeManager}>{children}</ThemeManagerContext.Provider>\n  ) : (\n    children\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,0BAAkD;AAE3C,iCAAiC,UAAe,cAAoC;AACzF,SAAO,eACL,mDAAC,wCAAoB,UAApB;AAAA,IAA6B,OAAO;AAAA,KAAe,QAAS,IAE7D;AAEJ;",
+  "sourcesContent": ["import React, { useEffect } from 'react'\n\nimport { ThemeManager, ThemeManagerContext } from '../ThemeManager'\n\nexport function wrapThemeManagerContext(children: any, themeManager?: ThemeManager | null) {\n  return themeManager ? (\n    <ThemeManagerContext.Provider value={themeManager}>{children}</ThemeManagerContext.Provider>\n  ) : (\n    children\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiC;AAEjC,0BAAkD;AAE3C,iCAAiC,UAAe,cAAoC;AACzF,SAAO,eACL,mDAAC,wCAAoB,UAApB;AAAA,IAA6B,OAAO;AAAA,KAAe,QAAS,IAE7D;AAEJ;",
   "names": []
 }

package/dist/cjs/hooks/useFeatures.js

@@ -131,8 +131,10 @@ function loadAnimationFeature() {
         }
       });
       (0, import_platform.useIsomorphicLayoutEffect)(() => {
-        setStateShallow({
-          animation: res
+        (0, import_react.startTransition)(() => {
+          setStateShallow({
+            animation: res
+          });
         });
       }, [res]);
       return null;

package/dist/cjs/hooks/useFeatures.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useFeatures.tsx"],
-  "sourcesContent": ["import React, { RefObject } from 'react'\nimport { View, ViewStyle } from 'react-native'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getSubStyle } from '../helpers/getSplitStyles'\nimport {\n  PseudoStyles,\n  SplitStyleState,\n  StaticConfigParsed,\n  TamaguiComponentState,\n  UseAnimationHook,\n  UseAnimationProps,\n} from '../types'\nimport { addMediaQueryListener, mediaState, removeMediaQueryListener } from './useMedia'\n\ntype FeatureDefinition = {\n  isEnabled: (props: any) => boolean\n  Component: any\n}\n\ntype FeatureUtils = {\n  forceUpdate: Function\n  state: SplitStyleState\n  setStateShallow: (next: Partial<TamaguiComponentState>) => void\n  useAnimations?: UseAnimationHook\n  pseudos: PseudoStyles\n  style: ViewStyle | null | undefined\n  staticConfig: StaticConfigParsed\n  theme: any\n  onDidAnimate?: () => void\n  hostRef: RefObject<HTMLElement | View>\n}\n\nconst createDefinition = ({\n  Component,\n  propNames,\n}: {\n  Component: (props: { _utils: FeatureUtils; [key: string]: any }) => void\n  propNames: string[]\n}): FeatureDefinition => ({\n  isEnabled: (props: any) => propNames.some((name) => !!props[name]),\n  Component,\n})\n\nlet featureDefinitions: Record<string, FeatureDefinition> | null = null\n\ntype FeatureKeys = keyof ReturnType<typeof loadFeatures>\n\nexport const useFeatures = (props: any, utils?: FeatureUtils) => {\n  if (!featureDefinitions) {\n    featureDefinitions = loadFeatures()\n  }\n  const elements: JSX.Element[] = []\n  const enabled: { [key in FeatureKeys]?: boolean } = {}\n  for (const name in featureDefinitions) {\n    const { isEnabled, Component } = featureDefinitions[name]\n    if (isEnabled(props) && Component) {\n      enabled[name] = true\n      elements.push(<Component key={name} {...props} _utils={utils} />)\n    }\n  }\n  return {\n    elements,\n    enabled,\n  }\n}\n\nfunction loadFeatures() {\n  return {\n    // loads animations and sets state with the results\n    animation: loadAnimationFeature(),\n\n    // will update the parent whenever media query changes\n    // no need on web, media queries are inserted and run in css\n    mediaQuery: loadMediaQueryFeature(),\n  } as const\n}\n\nfunction loadAnimationFeature() {\n  return createDefinition({\n    Component: ({ _utils, ...props }) => {\n      const {\n        state,\n        useAnimations,\n        pseudos,\n        style: inStyle,\n        setStateShallow,\n        staticConfig,\n        theme,\n        onDidAnimate,\n      } = _utils\n\n      if (!useAnimations) {\n        console.error('no useAnimations hook provided')\n        return null\n      }\n\n      // we always have .animation set\n      const propsWithAnimation = props as UseAnimationProps\n\n      const res = useAnimations(propsWithAnimation, {\n        state,\n        pseudos,\n        onDidAnimate,\n        staticConfig,\n        getStyle({ isExiting, isEntering, exitVariant, enterVariant } = {}) {\n          // we have to merge such that transforms keys all exist\n          const style = inStyle || {}\n\n          const enterStyle = isEntering\n            ? enterVariant && staticConfig.variants?.[enterVariant]['true']\n              ? getSubStyle(\n                  staticConfig.variants?.[enterVariant]['true'],\n                  staticConfig,\n                  theme,\n                  props,\n                  state\n                ) || pseudos.enterStyle\n              : null || pseudos.enterStyle\n            : null\n\n          const exitStyle = isExiting\n            ? exitVariant && staticConfig.variants?.[exitVariant]['true']\n              ? getSubStyle(\n                  staticConfig.variants?.[exitVariant]['true'],\n                  staticConfig,\n                  theme,\n                  props,\n                  state\n                ) || pseudos.exitStyle\n              : null || pseudos.exitStyle\n            : null\n\n          // if you have hoverStyle={{ scale: 1.1 }} and don't have scale set on the base style\n          // no animation will run! this is really confusing. this will look at all variants,\n          // and fill in base styles if they don't exist. eg:\n          // input:\n          //   base: {}\n          //   hoverStyle: { scale: 2 }\n          //   enterStyle: { x: 100 }\n          // output:\n          //   base: { x: 0, scale: 1 }\n          ensureBaseHasDefaults(\n            style,\n            enterStyle,\n            pseudos.hoverStyle,\n            pseudos.focusStyle,\n            pseudos.pressStyle,\n            pseudos.pressStyle\n          )\n\n          enterStyle && merge(style, enterStyle)\n          state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle)\n          state.focus && pseudos.focusStyle && merge(style, pseudos.focusStyle)\n          state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle)\n          exitStyle && merge(style, exitStyle)\n\n          return style\n        },\n        //, delay\n      })\n\n      useIsomorphicLayoutEffect(() => {\n        setStateShallow({\n          animation: res,\n        })\n      }, [res])\n\n      return null\n    },\n    propNames: ['animation'],\n  })\n}\n\nconst defaults = {\n  left: 0,\n  right: 0,\n  top: 0,\n  bottom: 0,\n  opacity: 1,\n  translateX: 0,\n  translateY: 0,\n  skew: 0,\n  skewX: 0,\n  skewY: 0,\n  scale: 1,\n  rotate: '0deg',\n  rotateY: '0deg',\n  rotateX: '0deg',\n}\n\nfunction ensureBaseHasDefaults(base: ViewStyle, ...pseudos: (ViewStyle | null | undefined)[]) {\n  for (const pseudo of pseudos) {\n    if (!pseudo) continue\n    for (const key in pseudo) {\n      const val = pseudo[key]\n      if (key === 'transform') {\n        for (const t of val) {\n          const tkey = Object.keys(t)[0]\n          const defaultVal = defaults[tkey]\n          const tDefaultVal = { [tkey]: defaultVal } as any\n          if (!base.transform) {\n            base.transform = [tDefaultVal]\n          } else {\n            if (!base.transform.find((x) => x[tkey])) {\n              base.transform.push(tDefaultVal)\n            }\n          }\n        }\n      } else {\n        if (!(key in base)) {\n          base[key] = defaults[key]\n        }\n      }\n    }\n  }\n}\n\nfunction merge(base: ViewStyle, next: ViewStyle) {\n  if (!next.transform || !base.transform) {\n    Object.assign(base, next)\n    return\n  }\n  const { transform, ...rest } = next\n  Object.assign(base, rest)\n  for (const t of transform) {\n    const key = Object.keys(t)[0]\n    const existing = base.transform.find((x) => key in x)\n    if (existing) {\n      existing[key] = t[key]\n    } else {\n      base.transform.push(t)\n    }\n  }\n}\n\nfunction loadMediaQueryFeature() {\n  const mediaPropNames = Object.keys(mediaState)\n\n  return createDefinition({\n    Component: (props: any) => {\n      const mediaKeys = mediaPropNames.filter((x) => x in props)\n\n      useIsomorphicLayoutEffect(() => {\n        for (const key of mediaKeys) {\n          addMediaQueryListener(key, props._utils.forceUpdate)\n        }\n        return () => {\n          for (const key of mediaKeys) {\n            removeMediaQueryListener(key, props._utils.forceUpdate)\n          }\n        }\n      }, [mediaKeys.join(',')])\n\n      return null\n    },\n    propNames: mediaPropNames,\n  })\n}\n\n// TODO\n// measureLayout: createDefinition({\n//   Component: (props) => {\n//     console.log('measure', props)\n//     return null\n//   },\n//   propNames: ['onLayout'],\n// }),\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { RefObject, startTransition } from 'react'\nimport { View, ViewStyle } from 'react-native'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getSubStyle } from '../helpers/getSplitStyles'\nimport {\n  PseudoStyles,\n  SplitStyleState,\n  StaticConfigParsed,\n  TamaguiComponentState,\n  UseAnimationHook,\n  UseAnimationProps,\n} from '../types'\nimport { addMediaQueryListener, mediaState, removeMediaQueryListener } from './useMedia'\n\ntype FeatureDefinition = {\n  isEnabled: (props: any) => boolean\n  Component: any\n}\n\ntype FeatureUtils = {\n  forceUpdate: Function\n  state: SplitStyleState\n  setStateShallow: (next: Partial<TamaguiComponentState>) => void\n  useAnimations?: UseAnimationHook\n  pseudos: PseudoStyles\n  style: ViewStyle | null | undefined\n  staticConfig: StaticConfigParsed\n  theme: any\n  onDidAnimate?: () => void\n  hostRef: RefObject<HTMLElement | View>\n}\n\nconst createDefinition = ({\n  Component,\n  propNames,\n}: {\n  Component: (props: { _utils: FeatureUtils; [key: string]: any }) => void\n  propNames: string[]\n}): FeatureDefinition => ({\n  isEnabled: (props: any) => propNames.some((name) => !!props[name]),\n  Component,\n})\n\nlet featureDefinitions: Record<string, FeatureDefinition> | null = null\n\ntype FeatureKeys = keyof ReturnType<typeof loadFeatures>\n\nexport const useFeatures = (props: any, utils?: FeatureUtils) => {\n  if (!featureDefinitions) {\n    featureDefinitions = loadFeatures()\n  }\n  const elements: JSX.Element[] = []\n  const enabled: { [key in FeatureKeys]?: boolean } = {}\n  for (const name in featureDefinitions) {\n    const { isEnabled, Component } = featureDefinitions[name]\n    if (isEnabled(props) && Component) {\n      enabled[name] = true\n      elements.push(<Component key={name} {...props} _utils={utils} />)\n    }\n  }\n  return {\n    elements,\n    enabled,\n  }\n}\n\nfunction loadFeatures() {\n  return {\n    // loads animations and sets state with the results\n    animation: loadAnimationFeature(),\n\n    // will update the parent whenever media query changes\n    // no need on web, media queries are inserted and run in css\n    mediaQuery: loadMediaQueryFeature(),\n  } as const\n}\n\nfunction loadAnimationFeature() {\n  return createDefinition({\n    Component: ({ _utils, ...props }) => {\n      const {\n        state,\n        useAnimations,\n        pseudos,\n        style: inStyle,\n        setStateShallow,\n        staticConfig,\n        theme,\n        onDidAnimate,\n      } = _utils\n\n      if (!useAnimations) {\n        console.error('no useAnimations hook provided')\n        return null\n      }\n\n      // we always have .animation set\n      const propsWithAnimation = props as UseAnimationProps\n\n      const res = useAnimations(propsWithAnimation, {\n        state,\n        pseudos,\n        onDidAnimate,\n        staticConfig,\n        getStyle({ isExiting, isEntering, exitVariant, enterVariant } = {}) {\n          // we have to merge such that transforms keys all exist\n          const style = inStyle || {}\n\n          const enterStyle = isEntering\n            ? enterVariant && staticConfig.variants?.[enterVariant]['true']\n              ? getSubStyle(\n                  staticConfig.variants?.[enterVariant]['true'],\n                  staticConfig,\n                  theme,\n                  props,\n                  state\n                ) || pseudos.enterStyle\n              : null || pseudos.enterStyle\n            : null\n\n          const exitStyle = isExiting\n            ? exitVariant && staticConfig.variants?.[exitVariant]['true']\n              ? getSubStyle(\n                  staticConfig.variants?.[exitVariant]['true'],\n                  staticConfig,\n                  theme,\n                  props,\n                  state\n                ) || pseudos.exitStyle\n              : null || pseudos.exitStyle\n            : null\n\n          // if you have hoverStyle={{ scale: 1.1 }} and don't have scale set on the base style\n          // no animation will run! this is really confusing. this will look at all variants,\n          // and fill in base styles if they don't exist. eg:\n          // input:\n          //   base: {}\n          //   hoverStyle: { scale: 2 }\n          //   enterStyle: { x: 100 }\n          // output:\n          //   base: { x: 0, scale: 1 }\n          ensureBaseHasDefaults(\n            style,\n            enterStyle,\n            pseudos.hoverStyle,\n            pseudos.focusStyle,\n            pseudos.pressStyle,\n            pseudos.pressStyle\n          )\n\n          enterStyle && merge(style, enterStyle)\n          state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle)\n          state.focus && pseudos.focusStyle && merge(style, pseudos.focusStyle)\n          state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle)\n          exitStyle && merge(style, exitStyle)\n\n          return style\n        },\n        //, delay\n      })\n\n      useIsomorphicLayoutEffect(() => {\n        startTransition(() => {\n          setStateShallow({\n            animation: res,\n          })\n        })\n      }, [res])\n\n      return null\n    },\n    propNames: ['animation'],\n  })\n}\n\nconst defaults = {\n  left: 0,\n  right: 0,\n  top: 0,\n  bottom: 0,\n  opacity: 1,\n  translateX: 0,\n  translateY: 0,\n  skew: 0,\n  skewX: 0,\n  skewY: 0,\n  scale: 1,\n  rotate: '0deg',\n  rotateY: '0deg',\n  rotateX: '0deg',\n}\n\nfunction ensureBaseHasDefaults(base: ViewStyle, ...pseudos: (ViewStyle | null | undefined)[]) {\n  for (const pseudo of pseudos) {\n    if (!pseudo) continue\n    for (const key in pseudo) {\n      const val = pseudo[key]\n      if (key === 'transform') {\n        for (const t of val) {\n          const tkey = Object.keys(t)[0]\n          const defaultVal = defaults[tkey]\n          const tDefaultVal = { [tkey]: defaultVal } as any\n          if (!base.transform) {\n            base.transform = [tDefaultVal]\n          } else {\n            if (!base.transform.find((x) => x[tkey])) {\n              base.transform.push(tDefaultVal)\n            }\n          }\n        }\n      } else {\n        if (!(key in base)) {\n          base[key] = defaults[key]\n        }\n      }\n    }\n  }\n}\n\nfunction merge(base: ViewStyle, next: ViewStyle) {\n  if (!next.transform || !base.transform) {\n    Object.assign(base, next)\n    return\n  }\n  const { transform, ...rest } = next\n  Object.assign(base, rest)\n  for (const t of transform) {\n    const key = Object.keys(t)[0]\n    const existing = base.transform.find((x) => key in x)\n    if (existing) {\n      existing[key] = t[key]\n    } else {\n      base.transform.push(t)\n    }\n  }\n}\n\nfunction loadMediaQueryFeature() {\n  const mediaPropNames = Object.keys(mediaState)\n\n  return createDefinition({\n    Component: (props: any) => {\n      const mediaKeys = mediaPropNames.filter((x) => x in props)\n\n      useIsomorphicLayoutEffect(() => {\n        for (const key of mediaKeys) {\n          addMediaQueryListener(key, props._utils.forceUpdate)\n        }\n        return () => {\n          for (const key of mediaKeys) {\n            removeMediaQueryListener(key, props._utils.forceUpdate)\n          }\n        }\n      }, [mediaKeys.join(',')])\n\n      return null\n    },\n    propNames: mediaPropNames,\n  })\n}\n\n// TODO\n// measureLayout: createDefinition({\n//   Component: (props) => {\n//     console.log('measure', props)\n//     return null\n//   },\n//   propNames: ['onLayout'],\n// }),\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/hooks/useId.js

@@ -33,7 +33,7 @@ function genId() {
 function useId(providedId) {
   if (import_platform.isWeb) {
     if (typeof React.useId === "function") {
-      let id3 = React.useId(providedId);
+      let id3 = React.useId();
       return providedId != null ? providedId : id3;
     }
   }

package/dist/cjs/hooks/useId.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useId.tsx"],
-  "sourcesContent": ["/*\n * Welcome to @reach/auto-id!\n\n * Let's see if we can make sense of why this hook exists and its\n * implementation.\n *\n * Some background:\n *   1. Accessibility APIs rely heavily on element IDs\n *   2. Requiring developers to put IDs on every element in Reach UI is both\n *      cumbersome and error-prone\n *   3. With a component model, we can generate IDs for them!\n *\n * Solution 1: Generate random IDs.\n *\n * This works great as long as you don't server render your app. When React (in\n * the client) tries to reuse the markup from the server, the IDs won't match\n * and React will then recreate the entire DOM tree.\n *\n * Solution 2: Increment an integer\n *\n * This sounds great. Since we're rendering the exact same tree on the server\n * and client, we can increment a counter and get a deterministic result between\n * client and server. Also, JS integers can go up to nine-quadrillion. I'm\n * pretty sure the tab will be closed before an app never needs\n * 10 quadrillion IDs!\n *\n * Problem solved, right?\n *\n * Ah, but there's a catch! React's concurrent rendering makes this approach\n * non-deterministic. While the client and server will end up with the same\n * elements in the end, depending on suspense boundaries (and possibly some user\n * input during the initial render) the incrementing integers won't always match\n * up.\n *\n * Solution 3: Don't use IDs at all on the server; patch after first render.\n *\n * What we've done here is solution 2 with some tricks. With this approach, the\n * ID returned is an empty string on the first render. This way the server and\n * client have the same markup no matter how wild the concurrent rendering may\n * have gotten.\n *\n * After the render, we patch up the components with an incremented ID. This\n * causes a double render on any components with `useId`. Shouldn't be a problem\n * since the components using this hook should be small, and we're only updating\n * the ID attribute on the DOM, nothing big is happening.\n *\n * It doesn't have to be an incremented number, though--we could do generate\n * random strings instead, but incrementing a number is probably the cheapest\n * thing we can do.\n *\n * Additionally, we only do this patchup on the very first client render ever.\n * Any calls to `useId` that happen dynamically in the client will be\n * populated immediately with a value. So, we only get the double render after\n * server hydration and never again, SO BACK OFF ALRIGHT?\n */\n\nimport * as React from 'react'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\n\nlet serverHandoffComplete = false\nlet id = 0\nfunction genId() {\n  return ++id\n}\n\n/* eslint-disable react-hooks/rules-of-hooks */\n\n/**\n * useId\n *\n * Autogenerate IDs to facilitate WAI-ARIA and server rendering.\n *\n * Note: The returned ID will initially be `null` and will update after a\n * component mounts. Users may need to supply their own ID if they need\n * consistent values for SSR.\n *\n * @see Docs https://reach.tech/auto-id\n */\nfunction useId(idFromProps: string): string\nfunction useId(idFromProps: number): number\nfunction useId(idFromProps: string | number): string | number\nfunction useId(idFromProps: string | undefined | null): string | undefined\nfunction useId(idFromProps: number | undefined | null): number | undefined\nfunction useId(idFromProps: string | number | undefined | null): string | number | undefined\nfunction useId(): string | undefined\n\nfunction useId(providedId?: number | string | undefined | null) {\n  // TODO: Remove error flag when updating internal deps to React 18. None of\n  // our tricks will play well with concurrent rendering anyway.\n\n  // native doesn't support until next react-native version, need to remove eventually\n  if (isWeb) {\n    // @ts-expect-error\n    if (typeof React.useId === 'function') {\n      // @ts-expect-error\n      let id = React.useId(providedId)\n      return providedId != null ? providedId : id\n    }\n  }\n\n  // If this instance isn't part of the initial render, we don't have to do the\n  // double render/patch-up dance. We can just generate the ID and return it.\n  let initialId = providedId ?? (serverHandoffComplete ? genId() : null)\n  let [id, setId] = React.useState(initialId)\n\n  useIsomorphicLayoutEffect(() => {\n    if (id === null) {\n      // Patch the ID after render. We do this in `useLayoutEffect` to avoid any\n      // rendering flicker, though it'll make the first render slower (unlikely\n      // to matter, but you're welcome to measure your app and let us know if\n      // it's a problem).\n      setId(genId())\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  React.useEffect(() => {\n    if (serverHandoffComplete === false) {\n      // Flag all future uses of `useId` to skip the update dance. This is in\n      // `useEffect` because it goes after `useLayoutEffect`, ensuring we don't\n      // accidentally bail out of the patch-up dance prematurely.\n      serverHandoffComplete = true\n    }\n  }, [])\n\n  return providedId ?? id ?? undefined\n}\n\nexport { useId }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwDA,YAAuB;AAEvB,sBAAiD;AAEjD,IAAI,wBAAwB;AAC5B,IAAI,KAAK;AACT,iBAAiB;AACf,SAAO,EAAE;AACX;AAuBA,eAAe,YAAiD;AAK9D,MAAI,uBAAO;AAET,QAAI,OAAO,MAAM,UAAU,YAAY;AAErC,UAAI,MAAK,MAAM,MAAM,UAAU;AAC/B,aAAO,cAAc,OAAO,aAAa;AAAA,IAC3C;AAAA,EACF;AAIA,MAAI,YAAY,cAAe,yBAAwB,MAAM,IAAI;AACjE,MAAI,CAAC,KAAI,SAAS,MAAM,SAAS,SAAS;AAE1C,iDAA0B,MAAM;AAC9B,QAAI,QAAO,MAAM;AAKf,YAAM,MAAM,CAAC;AAAA,IACf;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,MAAM;AACpB,QAAI,0BAA0B,OAAO;AAInC,8BAAwB;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,cAAc,OAAM;AAC7B;",
+  "sourcesContent": ["/*\n * Welcome to @reach/auto-id!\n\n * Let's see if we can make sense of why this hook exists and its\n * implementation.\n *\n * Some background:\n *   1. Accessibility APIs rely heavily on element IDs\n *   2. Requiring developers to put IDs on every element in Reach UI is both\n *      cumbersome and error-prone\n *   3. With a component model, we can generate IDs for them!\n *\n * Solution 1: Generate random IDs.\n *\n * This works great as long as you don't server render your app. When React (in\n * the client) tries to reuse the markup from the server, the IDs won't match\n * and React will then recreate the entire DOM tree.\n *\n * Solution 2: Increment an integer\n *\n * This sounds great. Since we're rendering the exact same tree on the server\n * and client, we can increment a counter and get a deterministic result between\n * client and server. Also, JS integers can go up to nine-quadrillion. I'm\n * pretty sure the tab will be closed before an app never needs\n * 10 quadrillion IDs!\n *\n * Problem solved, right?\n *\n * Ah, but there's a catch! React's concurrent rendering makes this approach\n * non-deterministic. While the client and server will end up with the same\n * elements in the end, depending on suspense boundaries (and possibly some user\n * input during the initial render) the incrementing integers won't always match\n * up.\n *\n * Solution 3: Don't use IDs at all on the server; patch after first render.\n *\n * What we've done here is solution 2 with some tricks. With this approach, the\n * ID returned is an empty string on the first render. This way the server and\n * client have the same markup no matter how wild the concurrent rendering may\n * have gotten.\n *\n * After the render, we patch up the components with an incremented ID. This\n * causes a double render on any components with `useId`. Shouldn't be a problem\n * since the components using this hook should be small, and we're only updating\n * the ID attribute on the DOM, nothing big is happening.\n *\n * It doesn't have to be an incremented number, though--we could do generate\n * random strings instead, but incrementing a number is probably the cheapest\n * thing we can do.\n *\n * Additionally, we only do this patchup on the very first client render ever.\n * Any calls to `useId` that happen dynamically in the client will be\n * populated immediately with a value. So, we only get the double render after\n * server hydration and never again, SO BACK OFF ALRIGHT?\n */\n\nimport * as React from 'react'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\n\nlet serverHandoffComplete = false\nlet id = 0\nfunction genId() {\n  return ++id\n}\n\n/* eslint-disable react-hooks/rules-of-hooks */\n\n/**\n * useId\n *\n * Autogenerate IDs to facilitate WAI-ARIA and server rendering.\n *\n * Note: The returned ID will initially be `null` and will update after a\n * component mounts. Users may need to supply their own ID if they need\n * consistent values for SSR.\n *\n * @see Docs https://reach.tech/auto-id\n */\nfunction useId(idFromProps: string): string\nfunction useId(idFromProps: number): number\nfunction useId(idFromProps: string | number): string | number\nfunction useId(idFromProps: string | undefined | null): string | undefined\nfunction useId(idFromProps: number | undefined | null): number | undefined\nfunction useId(idFromProps: string | number | undefined | null): string | number | undefined\nfunction useId(): string | undefined\n\nfunction useId(providedId?: number | string | undefined | null) {\n  // TODO: Remove error flag when updating internal deps to React 18. None of\n  // our tricks will play well with concurrent rendering anyway.\n\n  // native doesn't support until next react-native version, need to remove eventually\n  if (isWeb) {\n    if (typeof React.useId === 'function') {\n      let id = React.useId()\n      return providedId != null ? providedId : id\n    }\n  }\n\n  // If this instance isn't part of the initial render, we don't have to do the\n  // double render/patch-up dance. We can just generate the ID and return it.\n  let initialId = providedId ?? (serverHandoffComplete ? genId() : null)\n  let [id, setId] = React.useState(initialId)\n\n  useIsomorphicLayoutEffect(() => {\n    if (id === null) {\n      // Patch the ID after render. We do this in `useLayoutEffect` to avoid any\n      // rendering flicker, though it'll make the first render slower (unlikely\n      // to matter, but you're welcome to measure your app and let us know if\n      // it's a problem).\n      setId(genId())\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  React.useEffect(() => {\n    if (serverHandoffComplete === false) {\n      // Flag all future uses of `useId` to skip the update dance. This is in\n      // `useEffect` because it goes after `useLayoutEffect`, ensuring we don't\n      // accidentally bail out of the patch-up dance prematurely.\n      serverHandoffComplete = true\n    }\n  }, [])\n\n  return providedId ?? id ?? undefined\n}\n\nexport { useId }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwDA,YAAuB;AAEvB,sBAAiD;AAEjD,IAAI,wBAAwB;AAC5B,IAAI,KAAK;AACT,iBAAiB;AACf,SAAO,EAAE;AACX;AAuBA,eAAe,YAAiD;AAK9D,MAAI,uBAAO;AACT,QAAI,OAAO,MAAM,UAAU,YAAY;AACrC,UAAI,MAAK,MAAM,MAAM;AACrB,aAAO,cAAc,OAAO,aAAa;AAAA,IAC3C;AAAA,EACF;AAIA,MAAI,YAAY,cAAe,yBAAwB,MAAM,IAAI;AACjE,MAAI,CAAC,KAAI,SAAS,MAAM,SAAS,SAAS;AAE1C,iDAA0B,MAAM;AAC9B,QAAI,QAAO,MAAM;AAKf,YAAM,MAAM,CAAC;AAAA,IACf;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,MAAM;AACpB,QAAI,0BAA0B,OAAO;AAInC,8BAAwB;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,cAAc,OAAM;AAC7B;",
   "names": []
 }