@tamagui/web 1.27.2 → 1.28.0

package/dist/esm/views/Text.js

@@ -1,4 +1,3 @@
-import { isWeb } from "@tamagui/constants";
 import { stylePropsTextOnly, validStyles } from "@tamagui/helpers";
 import { createComponent } from "../createComponent";
 const ellipseStyle = {
@@ -11,22 +10,20 @@ const Text = createComponent(
   {
     acceptsClassName: true,
     isText: true,
-    defaultProps: {
-      // @ts-ignore
+    defaultProps: process.env.TAMAGUI_TARGET === "web" ? {
+      color: "$color",
+      display: "inline",
+      boxSizing: "border-box",
+      wordWrap: "break-word",
+      margin: 0
+    } : {
+      color: "$color",
       display: "flex",
-      fontFamily: "System",
-      ...isWeb ? {
-        display: "inline",
-        boxSizing: "border-box",
-        wordWrap: "break-word",
-        margin: 0
-      } : {
-        suppressHighlighting: true
-      }
+      suppressHighlighting: true
     },
     inlineWhenUnflattened: /* @__PURE__ */ new Set(["fontFamily"]),
     variants: {
-      ...isWeb && {
+      ...process.env.TAMAGUI_TARGET === "web" && {
         numberOfLines: {
           1: ellipseStyle,
           ":number": (numberOfLines) => numberOfLines >= 1 ? {
@@ -52,13 +49,13 @@ const Text = createComponent(
         }
       },
       ellipse: {
-        true: isWeb ? ellipseStyle : {
+        true: process.env.TAMAGUI_TARGET === "web" ? ellipseStyle : {
           numberOfLines: 1,
           lineBreakMode: "clip"
         }
       }
     },
-    deoptProps: new Set(isWeb ? [] : ["ellipse"]),
+    deoptProps: new Set(process.env.TAMAGUI_TARGET === "web" ? [] : ["ellipse"]),
     validStyles: {
       ...validStyles,
       ...stylePropsTextOnly

package/dist/esm/views/Text.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Text.tsx"],
-  "mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,oBAAoB,mBAAmB;AAEhD,SAAS,uBAAuB;AAGhC,MAAM,eAAe;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd;AAEO,MAAM,OAAO;AAAA,EAClB;AAAA,IACE,kBAAkB;AAAA,IAClB,QAAQ;AAAA,IAER,cAAc;AAAA;AAAA,MAEZ,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,GAAI,QACA;AAAA,QACE,SAAS;AAAA,QACT,WAAW;AAAA,QACX,UAAU;AAAA,QACV,QAAQ;AAAA,MACV,IACA;AAAA,QACE,sBAAsB;AAAA,MACxB;AAAA,IACN;AAAA,IAEA,uBAAuB,oBAAI,IAAI,CAAC,YAAY,CAAC;AAAA,IAE7C,UAAU;AAAA,MACR,GAAI,SAAS;AAAA,QACX,eAAe;AAAA,UACb,GAAG;AAAA,UAEH,WAAW,CAAC,kBACV,iBAAiB,IACb;AAAA,YACE,iBAAiB;AAAA,YACjB,iBAAiB;AAAA,YACjB,SAAS;AAAA,YACT,UAAU;AAAA,UACZ,IACA;AAAA,QACR;AAAA,MACF;AAAA;AAAA,MAGA,eAAe;AAAA,QACb,OAAO,MAAM;AAAA,MACf;AAAA,MAEA,YAAY;AAAA,QACV,MAAM;AAAA,UACJ,YAAY;AAAA,UACZ,QAAQ;AAAA,QACV;AAAA,QACA,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,MAEA,SAAS;AAAA,QACP,MAAM,QACF,eACA;AAAA,UACE,eAAe;AAAA,UACf,eAAe;AAAA,QACjB;AAAA,MACN;AAAA,IACF;AAAA,IAEA,YAAY,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;AAAA,IAE5C,aAAa;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,EACF;AACF;",
+  "mappings": "AAAA,SAAS,oBAAoB,mBAAmB;AAEhD,SAAS,uBAAuB;AAGhC,MAAM,eAAe;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd;AAEO,MAAM,OAAO;AAAA,EAClB;AAAA,IACE,kBAAkB;AAAA,IAClB,QAAQ;AAAA,IAER,cACE,QAAQ,IAAI,mBAAmB,QAC3B;AAAA,MACE,OAAO;AAAA,MACP,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,MACV,QAAQ;AAAA,IACV,IACA;AAAA,MACE,OAAO;AAAA,MACP,SAAS;AAAA,MACT,sBAAsB;AAAA,IACxB;AAAA,IAEN,uBAAuB,oBAAI,IAAI,CAAC,YAAY,CAAC;AAAA,IAE7C,UAAU;AAAA,MACR,GAAI,QAAQ,IAAI,mBAAmB,SAAS;AAAA,QAC1C,eAAe;AAAA,UACb,GAAG;AAAA,UAEH,WAAW,CAAC,kBACV,iBAAiB,IACb;AAAA,YACE,iBAAiB;AAAA,YACjB,iBAAiB;AAAA,YACjB,SAAS;AAAA,YACT,UAAU;AAAA,UACZ,IACA;AAAA,QACR;AAAA,MACF;AAAA;AAAA,MAGA,eAAe;AAAA,QACb,OAAO,MAAM;AAAA,MACf;AAAA,MAEA,YAAY;AAAA,QACV,MAAM;AAAA,UACJ,YAAY;AAAA,UACZ,QAAQ;AAAA,QACV;AAAA,QACA,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,MAEA,SAAS;AAAA,QACP,MACE,QAAQ,IAAI,mBAAmB,QAC3B,eACA;AAAA,UACE,eAAe;AAAA,UACf,eAAe;AAAA,QACjB;AAAA,MACR;AAAA,IACF;AAAA,IAEA,YAAY,IAAI,IAAI,QAAQ,IAAI,mBAAmB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;AAAA,IAE3E,aAAa;AAAA,MACX,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,EACF;AACF;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.27.2",
+  "version": "1.28.0",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,19 +27,19 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "1.27.2",
-    "@tamagui/constants": "1.27.2",
-    "@tamagui/helpers": "1.27.2",
-    "@tamagui/normalize-css-color": "1.27.2",
-    "@tamagui/use-did-finish-ssr": "1.27.2",
-    "@tamagui/use-event": "1.27.2",
-    "@tamagui/use-force-update": "1.27.2"
+    "@tamagui/compose-refs": "1.28.0",
+    "@tamagui/constants": "1.28.0",
+    "@tamagui/helpers": "1.28.0",
+    "@tamagui/normalize-css-color": "1.28.0",
+    "@tamagui/use-did-finish-ssr": "1.28.0",
+    "@tamagui/use-event": "1.28.0",
+    "@tamagui/use-force-update": "1.28.0"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.27.2",
+    "@tamagui/build": "1.28.0",
     "@testing-library/react": "^13.4.0",
     "csstype": "^3.0.10",
     "react": "^18.2.0",

package/src/config.ts

@@ -35,31 +35,17 @@ export const getTokens = ({
    */
   prefixed?: boolean
 } = {}): TokensMerged => {
-  if (!conf) throw new Error(`never called createTamagui`)
-  if (prefixed === false) return conf.tokens
-  if (prefixed === true) return conf.tokensParsed
-  return (cached ??= Object.freeze({
-    size: {
-      ...conf.tokens['size'],
-      ...conf.tokensParsed['size'],
-    },
-    space: {
-      ...conf.tokens['space'],
-      ...conf.tokensParsed['space'],
-    },
-    radius: {
-      ...conf.tokens['radius'],
-      ...conf.tokensParsed['radius'],
-    },
-    zIndex: {
-      ...conf.tokens['zIndex'],
-      ...conf.tokensParsed['zIndex'],
-    },
-    color: {
-      ...conf.tokens['color'],
-      ...conf.tokensParsed['color'],
-    },
-  }) as any)
+  if (process.env.NODE_ENV === 'development') {
+    if (!conf) throw new Error(`Haven't called createTamagui yet`)
+  }
+  const { tokens, tokensParsed } = conf!
+  if (prefixed === false) return tokens
+  if (prefixed === true) return tokensParsed
+  if (cached) return cached
+  cached = Object.fromEntries(
+    Object.entries(tokens).map(([k, v]) => [k, { ...v, ...tokensParsed[k] }])
+  ) as any
+  return cached
 }
 
 /**

package/src/createComponent.tsx

@@ -6,7 +6,7 @@ import {
   isWeb,
   useIsomorphicLayoutEffect,
 } from '@tamagui/constants'
-import { stylePropsView, validPseudoKeys, validStyles } from '@tamagui/helpers'
+import { stylePropsView, validStyles } from '@tamagui/helpers'
 import React, {
   Children,
   Fragment,
@@ -19,7 +19,7 @@ import React, {
   useRef,
 } from 'react'
 
-import { onConfiguredOnce } from './config'
+import { getConfig, onConfiguredOnce } from './config'
 import { stackDefaultStyles } from './constants/constants'
 import { FontLanguageContext } from './contexts/FontLanguageContext'
 import { TextAncestorContext } from './contexts/TextAncestorContext'
@@ -121,11 +121,11 @@ export function createComponent<
   Ref = TamaguiElement,
   BaseProps = never
 >(
-  configIn: Partial<StaticConfig> | StaticConfigParsed,
+  staticConfigIn: Partial<StaticConfig> | StaticConfigParsed,
   ParentComponent?: StylableComponent
 ) {
   const staticConfig = (() => {
-    const next = extendStaticConfig(configIn, ParentComponent)
+    const next = extendStaticConfig(staticConfigIn, ParentComponent)
 
     if ('parsed' in next) {
       return next
@@ -172,6 +172,25 @@ export function createComponent<
       props = propsIn
     }
 
+    // set variants through context
+    let provided: Object | undefined
+    const { context } = staticConfig
+    if (context) {
+      const contextValue = useContext(context)
+      const { inverseShorthands } = getConfig()
+      for (const key in context.props) {
+        const propVal = props[key] || props[inverseShorthands[key]]
+        if (propVal == null) {
+          if (contextValue) {
+            props[key] = contextValue[key]
+          }
+        } else {
+          provided ||= {}
+          provided[key] = propVal
+        }
+      }
+    }
+
     const debugProp = props['debug'] as DebugProp
     const { Component, isText, isZStack } = staticConfig
     const componentName = props.componentName || staticConfig.componentName
@@ -823,6 +842,11 @@ export function createComponent<
       }
     }
 
+    if (provided) {
+      const Provider = staticConfig.context!.Provider!
+      content = <Provider {...provided}>{content}</Provider>
+    }
+
     if (process.env.NODE_ENV === 'development') {
       if (debugProp) {
         const element = typeof elementType === 'string' ? elementType : 'Component'
@@ -895,6 +919,10 @@ export function createComponent<
 
     defaultProps = restProps
 
+    if (staticConfig.isText && !defaultProps.fontFamily && conf.defaultFont) {
+      defaultProps.fontFamily = `$${conf.defaultFont}`
+    }
+
     // add debug logs
     if (process.env.NODE_ENV === 'development' && debug) {
       if (process.env.IS_STATIC !== 'is_static') {
@@ -915,7 +943,7 @@ export function createComponent<
 
   let res: ComponentType = component as any
 
-  if (configIn.memo) {
+  if (staticConfigIn.memo) {
     res = memo(res) as any
   }
 

package/src/createTamagui.ts

@@ -1,7 +1,7 @@
 import { isRSC, isWeb } from '@tamagui/constants'
 
 import { configListeners, setConfig } from './config'
-import { createVariables, tokensKeysOrdered } from './createVariables'
+import { createVariables } from './createVariables'
 import { getThemeCSSRules } from './helpers/getThemeCSSRules'
 import {
   getAllRules,
@@ -56,10 +56,17 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     })
   )
 
+  let fontSizeTokens: Set<string> | null = null
+
   const fontsParsed = (() => {
     const res = {} as typeof fontTokens
     for (const familyName in fontTokens) {
-      res[`$${familyName}`] = parseFont(fontTokens[familyName])
+      const font = fontTokens[familyName]
+      const fontParsed = parseFont(font)
+      res[`$${familyName}`] = fontParsed
+      if (!fontSizeTokens && fontParsed.size) {
+        fontSizeTokens = new Set(Object.keys(fontParsed.size))
+      }
     }
     return res!
   })()
@@ -196,7 +203,6 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
   const tokensParsed: any = Object.fromEntries(
     Object.entries(configIn.tokens).map(([k, v]) => {
       const val = Object.fromEntries(Object.entries(v).map(([k, v]) => [`$${k}`, v]))
-      tokensKeysOrdered.set(val, tokensKeysOrdered.get(v))
       return [k, val]
     })
   )
@@ -228,6 +234,9 @@ ${getAllRules().join(separator)}`
 
   const getNewCSS: GetCSS = (opts) => getCSS({ ...opts, sinceLastCall: true })
 
+  // defaults to the first font to make life easier
+  const defaultFont = configIn.defaultFont || Object.keys(configIn.fonts)[0]
+
   const config: TamaguiInternalConfig = {
     onlyAllowShorthands: false,
     fontLanguages: [],
@@ -248,6 +257,8 @@ ${getAllRules().join(separator)}`
     parsed: true,
     getNewCSS,
     getCSS,
+    defaultFont,
+    fontSizeTokens: fontSizeTokens || new Set(),
     // const tokens = [...getToken(tokens.size[0])]
     // .spacer-sm + ._dsp_contents._dsp-sm-hidden { margin-left: -var(--${}) }
   }

package/src/createVariable.ts

@@ -50,7 +50,7 @@ export function isVariable(v: Variable | any): v is Variable {
   return v && typeof v === 'object' && IS_VAR in v
 }
 
-export function getVariable(nameOrVariable: Variable | string) {
+export function getVariable(nameOrVariable: Variable | string | any) {
   setDidGetVariableValue(true)
   if (isVariable(nameOrVariable)) {
     return variableToString(nameOrVariable)

package/src/createVariables.ts

@@ -14,8 +14,6 @@ export type DeepVariableObject<A extends DeepTokenObject> = {
     : never
 }
 
-export const tokensKeysOrdered = new WeakMap()
-
 export const createVariables = <A extends DeepTokenObject>(
   tokens: A,
   parentPath = '',
@@ -46,10 +44,5 @@ export const createVariables = <A extends DeepTokenObject>(
     res[key] = isVariable(val) ? val : createVariable({ val, name, key: niceKey })
   }
 
-  // ordering for relative sizing for now just size/space
-  if (parentPath === 'size' || parentPath === 'space') {
-    tokensKeysOrdered.set(res, Object.keys(tokens))
-  }
-
   return res
 }

package/src/helpers/createPropMapper.ts

@@ -56,12 +56,12 @@ export const createPropMapper = (staticConfig: StaticConfigParsed) => {
     const returnVariablesAs = state.resolveVariablesAs === 'value' ? 'value' : 'auto'
 
     // handled here because we need to resolve this off tokens, its the only one-off like this
-    const fontFamily =
+    let fontFamily =
       props[conf.inverseShorthands.fontFamily] ||
       props.fontFamily ||
       defaultProps.fontFamily ||
       propsIn.fontFamily ||
-      '$body'
+      `$${conf.defaultFont}`
 
     if (
       process.env.NODE_ENV === 'development' &&
@@ -173,7 +173,7 @@ const resolveVariants: StyleResolver = (
   if (!variantValue) {
     // variant at key exists, but no matching variant value, return nothing
     if (process.env.NODE_ENV === 'development') {
-      if (staticConfig.validStyles?.[key]) return
+      if (staticConfig.validStyles && key in staticConfig.validStyles) return
       // don't warn on missing boolean values, common to only one of true/false
       if (typeof value === 'boolean') return
       const name = staticConfig.componentName || '[UnnamedComponent]'
@@ -411,21 +411,16 @@ function getVariantDefinition(
   }
   const { tokensParsed } = conf
   for (const { name, spreadName } of tokenCats) {
-    if (variant[spreadName] && value in tokensParsed[name]) {
+    if (spreadName in variant && value in tokensParsed[name]) {
       return variant[spreadName]
     }
   }
-  let fn: any
-  const type = typeof value
-  if (type === 'number') {
-    fn = variant[':number']
-  } else if (type === 'string') {
-    fn = variant[':string']
-  } else if (value === true || value === false) {
-    fn = variant[':boolean']
+  const fontSizeVariant = variant['...fontSize']
+  if (fontSizeVariant && conf.fontSizeTokens.has(value)) {
+    return fontSizeVariant
   }
-  // fallback to catch all or size
-  return fn || variant['...'] || variant['...size']
+  // fallback to catch all | size
+  return variant[`:${typeof value}`] || variant['...'] || variant['...size']
 }
 
 const fontShorthand = {
@@ -438,7 +433,7 @@ const getToken = (
   value: string,
   conf: TamaguiInternalConfig,
   theme: any,
-  fontFamily: string | undefined = '$body',
+  fontFamily: string | undefined,
   languageContext?: LanguageContextType,
   resolveAs?: ResolveVariableTypes,
   debug?: DebugProp
@@ -467,11 +462,14 @@ const getToken = (
       case 'lineHeight':
       case 'letterSpacing':
       case 'fontWeight': {
-        const fontsParsed = languageContext
-          ? getFontsForLanguage(conf.fontsParsed, languageContext)
-          : conf.fontsParsed
-        valOrVar = fontsParsed[fontFamily]?.[fontShorthand[key] || key]?.[value] || value
-        hasSet = true
+        if (fontFamily) {
+          const fontsParsed = languageContext
+            ? getFontsForLanguage(conf.fontsParsed, languageContext)
+            : conf.fontsParsed
+          valOrVar =
+            fontsParsed[fontFamily]?.[fontShorthand[key] || key]?.[value] || value
+          hasSet = true
+        }
         break
       }
     }

package/src/helpers/createStyledContext.tsx

@@ -0,0 +1,38 @@
+import React, { createContext, useContext, useMemo } from 'react'
+
+export type StyledContext<Props extends Object = any> = Omit<
+  React.Context<Props>,
+  'Provider'
+> & {
+  props: Object
+  Provider: React.ProviderExoticComponent<
+    Partial<Props> & {
+      children?: React.ReactNode
+    }
+  >
+}
+
+export function createStyledContext<VariantProps extends Record<string, any>>(
+  props: VariantProps
+): StyledContext<VariantProps> {
+  const OGContext = createContext<any>(null)
+  const OGProvider = OGContext.Provider
+  const Context = OGContext as any as StyledContext<VariantProps>
+
+  const Provider = ({
+    children,
+    ...values
+  }: VariantProps & { children?: React.ReactNode }) => {
+    return (
+      <OGProvider value={useMemo(() => values, [JSON.stringify(values)])}>
+        {children}
+      </OGProvider>
+    )
+  }
+
+  // @ts-ignore
+  Context.Provider = Provider
+  Context.props = props
+
+  return Context
+}

package/src/helpers/getSplitStyles.tsx

@@ -822,6 +822,10 @@ export const getSplitStyles: StyleSplitter = (
     const valInit = props[keyInit]
     processProp(keyInit, valInit)
   }
+
+  // default to default font
+  fontFamily ||= conf.defaultFont
+
   // loop the special props once again
   // this one doesn't need to be backwards since it was pushed in the backwards loop (is already reversed)
   for (let i = 0; i < specialProps.length; i++) {

package/src/helpers/getVariantExtras.tsx

@@ -1,4 +1,5 @@
 import { getConfig } from '../config'
+import { getVariableValue } from '../createVariable'
 import { GenericFonts } from '../types'
 import { LanguageContextType } from '../views/FontLanguage.types'
 import { createProxy } from './createProxy'
@@ -27,6 +28,15 @@ export function getVariantExtras(
     fonts,
     tokens: conf.tokensParsed,
     theme,
+
+    get fontFamily() {
+      return getVariableValue(props.fontFamily)
+    },
+
+    get font() {
+      return fonts[this.fontFamily]
+    },
+
     // TODO do this in splitstlye
     // we avoid passing in default props for media queries because that would confuse things like SizableText.size:
     props: avoidDefaultProps

package/src/hooks/useTheme.tsx

@@ -41,7 +41,13 @@ function getDefaultThemeProxied() {
   })
 }
 
-export const useTheme = (props: ThemeProps = emptyProps): ThemeParsed => {
+type UseThemeResult = {
+  [key in keyof ThemeParsed]: ThemeParsed[key] & {
+    get: () => string | ThemeParsed[key]['val']
+  }
+}
+
+export const useTheme = (props: ThemeProps = emptyProps): UseThemeResult => {
   return (isRSC ? null : useThemeWithState(props)?.theme) || getDefaultThemeProxied()
 }
 
@@ -96,7 +102,7 @@ export function getThemeProxied(
     theme: ThemeParsed
   },
   keys?: string[]
-) {
+): UseThemeResult {
   return createProxy(theme, {
     has(_, key) {
       if (typeof key === 'string') {
@@ -127,6 +133,9 @@ export function getThemeProxied(
           // when they touch the actual value we only track it
           // if its a variable (web), its ignored!
           get(_, subkey) {
+            if (subkey === 'get') {
+              return () => val
+            }
             if (subkey === 'val' && !keys.includes(keyString)) {
               keys.push(keyString)
             }
@@ -137,7 +146,7 @@ export function getThemeProxied(
 
       return val
     },
-  })
+  }) as UseThemeResult
 }
 
 export const activeThemeManagers = new Set<ThemeManager>()

package/src/index.ts

@@ -12,34 +12,29 @@ export * from './styled'
 export * from './types'
 export * from './setupReactNative'
 
-export {
-  getConfig,
-  getThemes,
-  getTokens,
-  onConfiguredOnce,
-  updateConfig,
-} from './config'
+export { getConfig, getThemes, getTokens, onConfiguredOnce, updateConfig } from './config'
 
 export * from './constants/constants'
 
-export * from './helpers/useShallowSetState'
-export * from './helpers/getVariantExtras'
+export * from './helpers/createStyledContext'
+export * from './helpers/expandStyles'
 export * from './helpers/getAnimationDriver'
 export * from './helpers/getExpandedShorthands'
 export * from './helpers/getSplitStyles'
 export * from './helpers/getStylesAtomic'
-export * from './helpers/pseudoDescriptors'
-export * from './helpers/mergeProps'
-export * from './helpers/expandStyles'
-export * from './helpers/isTamaguiElement'
+export * from './helpers/getThemeCSSRules'
+export * from './helpers/getVariantExtras'
 export * from './helpers/isTamaguiComponent'
+export * from './helpers/isTamaguiElement'
 export * from './helpers/matchMedia'
-export * from './helpers/themes'
-export * from './helpers/getThemeCSSRules'
+export * from './helpers/mergeProps'
+export * from './helpers/normalizeColor'
 export * from './helpers/proxyThemeVariables'
+export * from './helpers/pseudoDescriptors'
 export * from './helpers/themeable'
+export * from './helpers/themes'
+export * from './helpers/useShallowSetState'
 export * from './helpers/withStaticProperties'
-export * from './helpers/normalizeColor'
 
 export * from './contexts/ButtonNestingContext'
 

package/src/styled.tsx

@@ -1,6 +1,7 @@
 import { stylePropsAll } from '@tamagui/helpers'
 
 import { createComponent } from './createComponent'
+import { StyledContext } from './helpers/createStyledContext'
 import { mergeVariants } from './helpers/extendStaticConfig'
 import { ReactNativeStaticConfigs } from './setupReactNative'
 import type {
@@ -51,6 +52,7 @@ export function styled<
     name?: string
     variants?: Variants | undefined
     defaultVariants?: GetVariantAcceptedValues<Variants>
+    context?: StyledContext
     acceptsClassName?: boolean
   },
   staticExtractionOptions?: Partial<StaticConfig>
@@ -96,6 +98,7 @@ export function styled<
         name,
         defaultVariants,
         acceptsClassName: acceptsClassNameProp,
+        context,
         ...defaultProps
       } = options
 
@@ -144,6 +147,7 @@ export function styled<
         isReactNative,
         isText,
         acceptsClassName,
+        context,
         ...nativeConf,
       }