@tamagui/helpers 2.7.7 → 3.0.0-beta.1097.1

package/dist/esm/withStaticProperties.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["Decorated","Symbol","withStaticProperties","component","staticProps","out","Object","assign","bind"],"sources":["../../src/withStaticProperties.tsx"],"sourcesContent":[null],"mappings":"AAAA,IAAAA,SAAM,kBAAYC,MAAA;AAIX,IAAAC,oBAAM,YAAAA,CACXC,SACA,EAAAC,WACmB;EACnB,IAAAC,GAAM,eAAa;IACjB,IAAKF,SAAA,CAAkBH,SAAS,GAAG;MAMjC,OAAO,OAAOG,SAAA,KAAc,aACxBG,MAAA,CAAOC,MAAA,CAAOJ,SAAA,CAAUK,IAAA,CAAK,IAAI,GAAGL,SAAS,IAC7C;QACN,GAAAA;MACA;IACF;IAEA,OAAOA,SAAO;EACd,GAAI;EAEJG,MAAA,CAAOC,MAAA,CAAAF,GAAA,EAAAD,WAAA;EACTC,GAAA,CAAAL,SAAA","ignoreList":[]}
+{"version":3,"file":"withStaticProperties.native.js","names":[],"sources":["esm/withStaticProperties.native.js"],"sourcesContent":["var Decorated = /* @__PURE__ */ Symbol();\nvar withStaticProperties = function(component, staticProps) {\n  var out = (function() {\n    if (component[Decorated]) {\n      return typeof component === \"function\" ? Object.assign(component.bind(null), component) : {\n        ...component\n      };\n    }\n    return component;\n  })();\n  Object.assign(out, staticProps);\n  out[Decorated] = true;\n  return out;\n};\nexport {\n  withStaticProperties\n};\n//# sourceMappingURL=withStaticProperties.js.map\n"],"mappings":";AAAA,IAAI,YAA4B,uBAAO;AACvC,IAAI,uBAAuB,SAAS,WAAW,aAAa;CAC1D,IAAI,OAAO,WAAW;EACpB,IAAI,UAAU,YAAY;GACxB,OAAO,OAAO,cAAc,aAAa,OAAO,OAAO,UAAU,KAAK,IAAI,GAAG,SAAS,IAAI,EACxF,GAAG,UACL;EACF;EACA,OAAO;CACT,EAAC,CAAE;CACH,OAAO,OAAO,KAAK,WAAW;CAC9B,IAAI,aAAa;CACjB,OAAO;AACT"}

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@tamagui/helpers",
-  "version": "2.7.7",
+  "version": "3.0.0-beta.1097.1",
+  "license": "MIT",
   "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14",
   "source": "src/index.ts",
   "files": [
@@ -15,6 +16,15 @@
   "types": "./types/index.d.ts",
   "exports": {
     "./package.json": "./package.json",
+    "./tokenCategories": {
+      "types": "./types/tokenCategories.d.ts",
+      "react-native": "./dist/esm/tokenCategories.mjs",
+      "browser": "./dist/esm/tokenCategories.mjs",
+      "module": "./dist/esm/tokenCategories.mjs",
+      "import": "./dist/esm/tokenCategories.mjs",
+      "require": "./dist/cjs/tokenCategories.cjs",
+      "default": "./dist/esm/tokenCategories.mjs"
+    },
     ".": {
       "types": "./types/index.d.ts",
       "react-native": "./dist/esm/index.native.js",
@@ -35,12 +45,13 @@
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/constants": "2.7.7",
-    "@tamagui/simple-hash": "2.7.7"
+    "@tamagui/constants": "3.0.0-beta.1097.1",
+    "@tamagui/simple-hash": "3.0.0-beta.1097.1",
+    "@tamagui/style-grammar": "3.0.0-beta.1097.1"
   },
   "devDependencies": {
-    "@tamagui/build": "2.7.7",
-    "react": ">=19"
+    "@tamagui/build": "3.0.0-beta.1097.1",
+    "react": "19.2.3"
   },
   "peerDependencies": {
     "react": ">=19"

package/src/composeEventHandlers.ts

@@ -12,16 +12,12 @@ export function composeEventHandlers<E extends Events>(
   }
   return (event: E) => {
     og?.(event)
-    if (
-      !event ||
-      !(
-        checkDefaultPrevented &&
-        typeof event === 'object' &&
-        'defaultPrevented' in event
-      ) ||
-      // @ts-ignore
-      ('defaultPrevented' in event && !event.defaultPrevented)
-    ) {
+    const isPrevented =
+      !!event &&
+      typeof event === 'object' &&
+      (('defaultPrevented' in event && Boolean(event.defaultPrevented)) ||
+        ('isCanceled' in event && Boolean(event.isCanceled)))
+    if (!event || !checkDefaultPrevented || !isPrevented) {
       return next?.(event)
     }
   }

package/src/index.ts

@@ -1,8 +1,11 @@
 export * from '@tamagui/simple-hash'
 export * from './clamp'
+export * from './reservedThemeProps'
+export * from './themeClassNames'
 export * from './composeEventHandlers'
 export * from './types'
 export * from './shouldRenderNativePlatform'
+export * from './tokenCategories'
 export * from './validStyleProps'
 export * from './withStaticProperties'
 export * from './webOnlyStyleProps'

package/src/reservedThemeProps.ts

@@ -0,0 +1,26 @@
+/**
+ * The props `<Theme>` owns. Inline theme values live on `<ThemeUpdate>`, so an
+ * unknown `<Theme>` prop is always invalid.
+ *
+ * It lives here, in a side-effect-free package, because the compiler classifies
+ * static `<Theme>` props with the same table the runtime uses. One table, so a
+ * new reserved prop can never mean one thing at build time and another at
+ * runtime.
+ */
+export const reservedThemeProps: Record<string, true> = {
+  _isRoot: true,
+  children: true,
+  className: true,
+  contain: true,
+  debug: true,
+  deopt: true,
+  disable: true,
+  'disable-child-theme': true,
+  forceClassName: true,
+  _themeUpdate: true,
+  name: true,
+  nativeUpdate: true,
+  needsUpdate: true,
+  passThrough: true,
+  shallow: true,
+}

package/src/themeClassNames.ts

@@ -0,0 +1,26 @@
+// read a complete scheme segment so names such as "lightsaber" stay distinct.
+const schemePrefix = /^(light|dark)(?=_|$)/
+export function getThemeScheme(name: string): 'light' | 'dark' | undefined {
+  return schemePrefix.exec(name)?.[0] as 'light' | 'dark' | undefined
+}
+
+// runtime and zero output share this hierarchy. inherited schemes follow the
+// document class; only authored schemes emit the more specific full-name class.
+export function getThemeClassNames(
+  name: string,
+  isRoot?: boolean,
+  schemeAuthored?: boolean
+): string {
+  const scheme = getThemeScheme(name)
+  const relativeName = scheme ? name.slice(scheme.length + 1) : name
+  let classes = isRoot ? '' : 't_sub_theme'
+  if (relativeName) {
+    let prefix = 't'
+    for (const part of relativeName.split('_')) {
+      prefix += `_${part}`
+      classes += ` ${prefix}`
+    }
+  }
+  if (schemeAuthored && scheme) classes += ` t_${name}`
+  return classes
+}

package/src/toStylePropsObject.ts

@@ -0,0 +1,29 @@
+type StylePropSource = string | Readonly<Record<string, boolean>> | undefined
+type StylePropWords<Value extends string> =
+  Value extends `${infer A} ${infer B} ${infer C} ${infer D} ${infer E} ${infer F} ${infer G} ${infer H} ${infer Tail}`
+    ? A | B | C | D | E | F | G | H | StylePropWords<Tail>
+    : Value extends `${infer Head} ${infer Tail}`
+      ? Head | StylePropWords<Tail>
+      : Value
+type StylePropKeys<Source> = Source extends string
+  ? StylePropWords<Source>
+  : Source extends Readonly<Record<string, boolean>>
+    ? keyof Source
+    : never
+
+export const toStylePropsObject = <const Sources extends readonly StylePropSource[]>(
+  ...sources: Sources
+): { [Key in Exclude<Extract<StylePropKeys<Sources[number]>, string>, ''>]: true } => {
+  const out: Record<string, boolean> = {}
+  for (const source of sources) {
+    if (!source) continue
+    for (const key of typeof source === 'string'
+      ? source.split(' ')
+      : Object.keys(source)) {
+      if (key) out[key] = true
+    }
+  }
+  return out as {
+    [Key in Exclude<Extract<StylePropKeys<Sources[number]>, string>, ''>]: true
+  }
+}

package/src/tokenCategories.ts

@@ -0,0 +1,29 @@
+export * from '@tamagui/style-grammar/token-categories'
+
+import {
+  propToTokenCategoryCode,
+  tokenCategoryNames,
+} from '@tamagui/style-grammar/token-categories'
+
+type TokenCategories = Record<
+  'radius' | 'size' | 'zIndex' | 'color',
+  Record<string, true>
+>
+
+// public compatibility view. each category materializes only when a caller reads it
+export const tokenCategories = {} as TokenCategories
+for (const category of ['radius', 'size', 'zIndex', 'color'] as const) {
+  let view: Record<string, true> | undefined
+  Object.defineProperty(tokenCategories, category, {
+    enumerable: true,
+    get() {
+      if (view) return view
+      view = {}
+      const code = tokenCategoryNames.indexOf(category)
+      for (const property in propToTokenCategoryCode) {
+        if (propToTokenCategoryCode[property] === code) view[property] = true
+      }
+      return view
+    },
+  })
+}

package/src/validStyleProps.ts

@@ -5,354 +5,94 @@ import {
   webOnlyStylePropsText,
   webOnlyStylePropsView,
 } from './webOnlyStyleProps'
-
-// generally organizing this so we don't duplicate things so its a bit weird
-
-// longhands of CSS shorthands - used for specificity boosting on web
-// so that e.g. borderWidth always beats border in the cascade
-export const cssShorthandLonghands = {
-  // border longhands
-  borderWidth: true,
-  borderStyle: true,
-  borderColor: true,
-  borderTopWidth: true,
-  borderTopStyle: true,
-  borderTopColor: true,
-  borderRightWidth: true,
-  borderRightStyle: true,
-  borderRightColor: true,
-  borderBottomWidth: true,
-  borderBottomStyle: true,
-  borderBottomColor: true,
-  borderLeftWidth: true,
-  borderLeftStyle: true,
-  borderLeftColor: true,
-  // outline longhands
-  outlineWidth: true,
-  outlineStyle: true,
-  outlineColor: true,
-  outlineOffset: true,
-}
-
-const textColors = {
-  color: true,
-  textDecorationColor: true,
-  textShadowColor: true,
-}
-
-// used for propMapping to find the right token category
-// just specificy the least costly, all else go to `space` (most keys - we can exclude)
-export const tokenCategories = {
-  radius: {
-    borderRadius: true,
-    borderTopLeftRadius: true,
-    borderTopRightRadius: true,
-    borderBottomLeftRadius: true,
-    borderBottomRightRadius: true,
-
-    // logical
-    borderStartStartRadius: true,
-    borderStartEndRadius: true,
-    borderEndStartRadius: true,
-    borderEndEndRadius: true,
-  },
-  size: {
-    width: true,
-    height: true,
-    minWidth: true,
-    minHeight: true,
-    maxWidth: true,
-    maxHeight: true,
-    blockSize: true,
-    minBlockSize: true,
-    maxBlockSize: true,
-    inlineSize: true,
-    minInlineSize: true,
-    maxInlineSize: true,
-  },
-  zIndex: {
-    zIndex: true,
-  },
-  color: {
-    backgroundColor: true,
-    borderColor: true,
-    borderBlockStartColor: true,
-    borderBlockEndColor: true,
-    borderBlockColor: true,
-    borderBottomColor: true,
-    borderInlineColor: true,
-    borderInlineStartColor: true,
-    borderInlineEndColor: true,
-    borderTopColor: true,
-    borderLeftColor: true,
-    borderRightColor: true,
-    borderEndColor: true,
-    borderStartColor: true,
-    shadowColor: true,
-    ...textColors,
-    // outlineColor is supported on RN 0.77+ (New Architecture)
-    outlineColor: true,
-    // caretColor is web-only
-    ...(process.env.TAMAGUI_TARGET === 'web' && {
-      caretColor: true,
-    }),
-  },
-}
-
-// discrete (non-animatable) view style properties - keyword-based, no interpolation
-// defined above stylePropsView so it can be spread in without duplication
-const nonAnimatableViewProps = {
-  alignContent: true,
-  alignItems: true,
-  alignSelf: true,
-  backfaceVisibility: true,
-  borderCurve: true,
-  borderStyle: true,
-  borderBlockStyle: true,
-  borderBlockEndStyle: true,
-  borderBlockStartStyle: true,
-  borderInlineStyle: true,
-  borderInlineEndStyle: true,
-  borderInlineStartStyle: true,
-  boxSizing: true,
-  cursor: true,
-  direction: true,
-  display: true,
-  flexDirection: true,
-  flexWrap: true,
-  isolation: true,
-  justifyContent: true,
-  mixBlendMode: true,
-  outlineStyle: true,
-  overflow: true,
-  position: true,
-}
-
-// discrete (non-animatable) font properties
-const nonAnimatableFontProps = {
-  fontFamily: true,
-  fontStyle: true,
-  fontVariant: true,
-  textTransform: true,
-}
-
-// discrete (non-animatable) text-only properties
-const nonAnimatableTextOnlyProps = {
-  textAlign: true,
-  textDecorationLine: true,
-  textDecorationStyle: true,
-  userSelect: true,
-}
-
-// discrete (non-animatable) unitless properties
-const nonAnimatableUnitlessProps = {
-  WebkitLineClamp: true,
-  lineClamp: true,
-  gridTemplateColumns: true,
-  gridTemplateAreas: true,
-}
-
-// all non-animatable style props combined, used by getSplitStyles to keep
-// these as atomic CSS classNames even for components with animation drivers
-export const nonAnimatableStyleProps = {
-  ...nonAnimatableViewProps,
-  ...nonAnimatableFontProps,
-  ...nonAnimatableTextOnlyProps,
-  ...nonAnimatableUnitlessProps,
-  // web-only discrete properties (defined in webOnlyStyleProps.ts)
-  ...(process.env.TAMAGUI_TARGET === 'web' && {
-    ...nonAnimatableWebViewProps,
-    ...nonAnimatableWebTextProps,
-  }),
-}
-
-export const stylePropsUnitless = {
-  ...nonAnimatableUnitlessProps,
-  animationIterationCount: true,
-  aspectRatio: true,
-  borderImageOutset: true,
-  borderImageSlice: true,
-  borderImageWidth: true,
-  columnCount: true,
-  flex: true,
-  flexGrow: true,
-  flexOrder: true,
-  flexPositive: true,
-  flexShrink: true,
-  flexNegative: true,
-  fontWeight: true,
-  gridRow: true,
-  gridRowEnd: true,
-  gridRowGap: true,
-  gridRowStart: true,
-  gridColumn: true,
-  gridColumnEnd: true,
-  gridColumnGap: true,
-  gridColumnStart: true,
-  opacity: true,
-  order: true,
-  orphans: true,
-  tabSize: true,
-  widows: true,
-  zIndex: true,
-  zoom: true,
-  scale: true,
-  scaleX: true,
-  scaleY: true,
-  scaleZ: true,
-  shadowOpacity: true,
-}
-
-export const stylePropsTransform = {
-  x: true,
-  y: true,
-  scale: true,
-  perspective: true,
-  scaleX: true,
-  scaleY: true,
-  skewX: true,
-  skewY: true,
-  matrix: true,
-  rotate: true,
-  rotateY: true,
-  rotateX: true,
-  rotateZ: true,
-}
-
-export const stylePropsView = {
-  ...nonAnimatableViewProps,
-  borderBottomEndRadius: true,
-  borderBottomStartRadius: true,
-  borderBottomWidth: true,
-  borderLeftWidth: true,
-  borderRightWidth: true,
-  borderBlockWidth: true,
-  borderBlockEndWidth: true,
-  borderBlockStartWidth: true,
-  borderInlineWidth: true,
-  borderInlineEndWidth: true,
-  borderInlineStartWidth: true,
-  borderTopEndRadius: true,
-  borderTopStartRadius: true,
-  borderTopWidth: true,
-  borderWidth: true,
-  transform: true,
-  transformOrigin: true,
-  borderEndWidth: true,
-  borderStartWidth: true,
-  bottom: true,
-  end: true,
-  flexBasis: true,
-  gap: true,
-  columnGap: true,
-  rowGap: true,
-  left: true,
-  margin: true,
-  marginBlock: true,
-  marginBlockEnd: true,
-  marginBlockStart: true,
-  marginInline: true,
-  marginInlineStart: true,
-  marginInlineEnd: true,
-  marginBottom: true,
-  marginEnd: true,
-  marginHorizontal: true,
-  marginLeft: true,
-  marginRight: true,
-  marginStart: true,
-  marginTop: true,
-  marginVertical: true,
-  padding: true,
-  paddingBottom: true,
-  paddingInline: true,
-  paddingBlock: true,
-  paddingBlockStart: true,
-  paddingInlineEnd: true,
-  paddingInlineStart: true,
-  paddingEnd: true,
-  paddingHorizontal: true,
-  paddingLeft: true,
-  paddingRight: true,
-  paddingStart: true,
-  paddingTop: true,
-  paddingVertical: true,
-  right: true,
-  start: true,
-  top: true,
-  inset: true,
-  insetBlock: true,
-  insetBlockEnd: true,
-  insetBlockStart: true,
-  insetInline: true,
-  insetInlineEnd: true,
-  insetInlineStart: true,
-  shadowOffset: true,
-  shadowRadius: true,
-  ...tokenCategories.color,
-  ...tokenCategories.radius,
-  ...tokenCategories.size,
-  ...stylePropsTransform,
-  ...stylePropsUnitless,
-  ...(isAndroid ? { elevationAndroid: true } : {}),
-
-  boxShadow: true,
-  border: true,
-  filter: true,
-  // RN 0.76+ supports linear-gradient via backgroundImage
-  backgroundImage: true,
-  // the actual RN 0.76+ prop name (backgroundImage expands to this on native)
-  experimental_backgroundImage: true,
-  // RN 0.76/0.77+ style props (New Architecture)
-  outline: true,
-  outlineColor: true,
-  outlineOffset: true,
-  outlineWidth: true,
-
-  // web-only for convenience - tree-shaken on native
-  ...(process.env.TAMAGUI_TARGET === 'web' ? webOnlyStylePropsView : {}),
-}
-
-const stylePropsFont = {
-  ...nonAnimatableFontProps,
-  fontSize: true,
-  fontWeight: true,
-  letterSpacing: true,
-  lineHeight: true,
-}
-
-export const stylePropsTextOnly = {
-  ...stylePropsFont,
-  ...nonAnimatableTextOnlyProps,
-  ...textColors,
-  textShadow: true,
-  textShadowOffset: true,
-  textShadowRadius: true,
-  verticalAlign: true,
-
-  // web-only text props - tree-shaken on native
-  ...(process.env.TAMAGUI_TARGET === 'web' ? webOnlyStylePropsText : {}),
-}
-
-export const stylePropsText = {
-  ...stylePropsView,
-  ...stylePropsTextOnly,
-}
-
-export const stylePropsAll = stylePropsText
-
-export const validPseudoKeys = {
-  enterStyle: true,
-  exitStyle: true,
-  hoverStyle: true,
-  pressStyle: true,
-  focusStyle: true,
-  disabledStyle: true,
-  focusWithinStyle: true,
-
-  // allow some web only ones
-  ...(process.env.TAMAGUI_TARGET === 'web' && {
-    focusVisibleStyle: true,
-  }),
-}
+import { toStylePropsObject as toObj } from './toStylePropsObject'
+export { tokenCategories } from './tokenCategories'
+
+export const cssShorthandLonghands = toObj(
+  'borderWidth borderStyle borderColor borderTopWidth borderTopStyle borderTopColor borderRightWidth borderRightStyle borderRightColor borderBottomWidth borderBottomStyle borderBottomColor borderLeftWidth borderLeftStyle borderLeftColor outlineWidth outlineStyle outlineColor outlineOffset'
+)
+
+const textColors = toObj('color textDecorationColor textShadowColor')
+
+const inputColors = toObj(
+  'placeholderTextColor selectionColor cursorColor selectionHandleColor'
+)
+
+const nonAnimatableViewProps = toObj(
+  'alignContent alignItems alignSelf backfaceVisibility borderCurve borderStyle borderBlockStyle borderBlockEndStyle borderBlockStartStyle borderInlineStyle borderInlineEndStyle borderInlineStartStyle boxSizing cursor direction display flexDirection flexWrap isolation justifyContent mixBlendMode outlineStyle overflow pointerEvents position visibility'
+)
+
+const nonAnimatableFontProps = toObj('fontFamily fontStyle fontVariant textTransform')
+
+const nonAnimatableTextOnlyProps = toObj(
+  'textAlign textDecorationLine textDecorationStyle userSelect writingDirection'
+)
+
+const nonAnimatableUnitlessProps = toObj('WebkitLineClamp lineClamp')
+
+/**
+ * CSS Grid layout props. Web-only by default — Yoga (React Native's layout
+ * engine) has no stable CSS Grid support (see facebook/yoga#1865).
+ *
+ * To enable on native with an experimental Yoga build, set the
+ * `TAMAGUI_CSS_GRID` environment variable to `"1"`.
+ */
+const cssGridProps = toObj(
+  'gridTemplateColumns gridTemplateAreas gridRow gridRowEnd gridRowGap gridRowStart gridColumn gridColumnEnd gridColumnGap gridColumnStart'
+)
+
+const enableCSSGrid =
+  process.env.TAMAGUI_TARGET === 'web' || process.env.TAMAGUI_CSS_GRID === '1'
+
+export const nonAnimatableStyleProps = toObj(
+  nonAnimatableViewProps,
+  nonAnimatableFontProps,
+  nonAnimatableTextOnlyProps,
+  nonAnimatableUnitlessProps,
+  enableCSSGrid ? cssGridProps : undefined,
+  process.env.TAMAGUI_TARGET === 'web' ? nonAnimatableWebViewProps : undefined,
+  process.env.TAMAGUI_TARGET === 'web' ? nonAnimatableWebTextProps : undefined
+)
+
+export const stylePropsUnitless = toObj(
+  nonAnimatableUnitlessProps,
+  enableCSSGrid ? cssGridProps : undefined,
+  'animationIterationCount aspectRatio borderImageOutset borderImageSlice borderImageWidth columnCount flex flexGrow flexOrder flexPositive flexShrink flexNegative fontWeight opacity order orphans tabSize widows zIndex zoom scale scaleX scaleY scaleZ shadowOpacity'
+)
+
+export const stylePropsTransform = toObj(
+  'x y scale perspective scaleX scaleY skewX skewY matrix rotate rotateY rotateX rotateZ'
+)
+
+export const stylePropsView = toObj(
+  nonAnimatableViewProps,
+  'borderBottomWidth borderLeftWidth borderRightWidth borderBlockWidth borderBlockEndWidth borderBlockStartWidth borderInlineWidth borderInlineEndWidth borderInlineStartWidth borderTopWidth borderWidth transform transformOrigin borderEndWidth borderStartWidth bottom end flexBasis gap columnGap rowGap left margin marginBlock marginBlockEnd marginBlockStart marginInline marginInlineStart marginInlineEnd marginBottom marginEnd marginHorizontal marginLeft marginRight marginStart marginTop marginVertical padding paddingBottom paddingInline paddingBlock paddingBlockEnd paddingBlockStart paddingInlineEnd paddingInlineStart paddingEnd paddingHorizontal paddingLeft paddingRight paddingStart paddingTop paddingVertical right start top inset insetBlock insetBlockEnd insetBlockStart insetInline insetInlineEnd insetInlineStart shadowOffset backgroundColor borderColor borderBlockStartColor borderBlockEndColor borderBlockColor borderBottomColor borderInlineColor borderInlineStartColor borderInlineEndColor borderTopColor borderLeftColor borderRightColor borderEndColor borderStartColor shadowColor outlineColor',
+  process.env.TAMAGUI_TARGET === 'web' ? 'caretColor' : undefined,
+  'borderRadius borderTopLeftRadius borderTopRightRadius borderBottomLeftRadius borderBottomRightRadius borderTopStartRadius borderTopEndRadius borderBottomStartRadius borderBottomEndRadius borderStartStartRadius borderStartEndRadius borderEndStartRadius borderEndEndRadius width height minWidth minHeight maxWidth maxHeight blockSize minBlockSize maxBlockSize inlineSize minInlineSize maxInlineSize shadowRadius',
+  stylePropsTransform,
+  stylePropsUnitless,
+  isAndroid ? { elevationAndroid: true } : undefined,
+  'boxShadow border borderBlock borderInline filter background backgroundImage experimental_backgroundImage outline outlineOffset outlineWidth',
+  process.env.TAMAGUI_TARGET === 'web' ? webOnlyStylePropsView : undefined
+)
+
+const stylePropsFont = toObj(
+  nonAnimatableFontProps,
+  'fontSize fontWeight letterSpacing lineHeight'
+)
+
+export const stylePropsTextOnly = toObj(
+  stylePropsFont,
+  nonAnimatableTextOnlyProps,
+  textColors,
+  'textShadow textShadowOffset textShadowRadius textDecoration font verticalAlign',
+  process.env.TAMAGUI_TARGET === 'web' ? webOnlyStylePropsText : undefined
+)
+
+export const stylePropsText = toObj(stylePropsView, stylePropsTextOnly)
+
+export const stylePropsInput = toObj(stylePropsText, inputColors)
+
+export const stylePropsAll = stylePropsInput
 
 export const validStyles = stylePropsView