@tamagui/web 2.7.7 → 3.0.0-beta.643.1

package/src/eventDetails.ts

@@ -0,0 +1,85 @@
+export type TamaguiChangeReason =
+  | 'trigger-press'
+  | 'trigger-hover'
+  | 'trigger-focus'
+  | 'context-menu'
+  | 'long-press'
+  | 'item-press'
+  | 'item-hover'
+  | 'sibling-open'
+  | 'close-press'
+  | 'backdrop-press'
+  | 'outside-press'
+  | 'focus-out'
+  | 'escape-key'
+  | 'keyboard'
+  | 'input-change'
+  | 'native-change'
+  | 'list-navigation'
+  | 'drag'
+  | 'track-press'
+  | 'pointer'
+  | 'sheet-drag'
+  | 'sheet-snap'
+  | 'swipe'
+  | 'timeout'
+  | 'scroll'
+  | 'submit'
+  | 'image-load'
+  | 'image-error'
+  | 'animation-finish'
+  | 'native-dismiss'
+  | 'native-back'
+  | 'adapt-morph'
+  | 'imperative-action'
+  | 'initial'
+
+export type TamaguiEventDetails<
+  Reason extends TamaguiChangeReason = TamaguiChangeReason,
+  NativeEvent = unknown,
+  Extra extends object = {},
+> = {
+  reason: Reason
+  event: NativeEvent | undefined
+  trigger: unknown | undefined
+} & Extra
+
+export type TamaguiChangeEventDetails<
+  Reason extends TamaguiChangeReason = TamaguiChangeReason,
+  NativeEvent = unknown,
+  Extra extends object = {},
+> = TamaguiEventDetails<Reason, NativeEvent, Extra> & {
+  cancel(): void
+  readonly isCanceled: boolean
+}
+
+export function createChangeEventDetails<
+  Reason extends TamaguiChangeReason,
+  NativeEvent = unknown,
+  Extra extends object = {},
+>(
+  reason: Reason,
+  event?: NativeEvent,
+  trigger?: unknown,
+  extra?: Extra
+): TamaguiChangeEventDetails<Reason, NativeEvent, Extra> {
+  let isCanceled = false
+
+  return {
+    ...extra,
+    reason,
+    event,
+    trigger,
+    // cancel vetoes the Tamagui state change only. it never touches the native
+    // event: a details object is often created from a shared document-level
+    // event (outside pointerdown), where preventDefault would break unrelated
+    // interactions (e.g. the trigger press that opens a Select). callers that
+    // also want the native default canceled call details.event.preventDefault()
+    cancel() {
+      isCanceled = true
+    },
+    get isCanceled() {
+      return isCanceled
+    },
+  } as TamaguiChangeEventDetails<Reason, NativeEvent, Extra>
+}

package/src/eventHandling.native.ts

@@ -11,13 +11,13 @@ import type { StaticConfig, TamaguiComponentStateRef } from './types'
 
 const isFabric = !!(globalThis as any).nativeFabricUIManager
 
-// Android (new arch + RNGH 2.30) freezes the JS thread when many pressStyle
+// Android (new arch + RNGH 2.30) freezes the JS thread when many press clauses
 // components each attach a Gesture.Manual()...onTouchesDown observer (e.g. a
 // sheet with several buttons / inputs). Each handler opts into RNGH's
 // pointer-data pipeline (needsPointerData), and the combined coordination
 // cost recreates the same setJSResponder freeze c345b5fc28 was supposed to
 // have killed. iOS Fabric absorbs the cost; Android Fabric doesn't.
-// Skip the observer + wrap on Android — pressStyle visuals fall through to
+// Skip the observer + wrap on Android — press-clause visuals fall through to
 // the standard responder path via the synthesized event handlers.
 // computed lazily: the native core bundle is also loaded by the compiler for
 // static extraction, where Platform's init runs after this module's. A
@@ -75,9 +75,9 @@ export function useEvents(
     }
   }
 
-  // hasPressEvents includes events.onPress synthesized just for pressStyle
+  // hasPressEvents includes events.onPress synthesized just for press clauses
   // visuals; hasRealPressEvents is true only when the caller passed a real
-  // handler. the distinction matters for arbitration: pressStyle-only gestures
+  // handler. the distinction matters for arbitration: press-clause-only gestures
   // must not steal ownership from a real-handler ancestor (e.g. Link asChild's
   // navigate handler merged onto a child View by Slot).
   const hasPressEvents = events?.onPress
@@ -124,9 +124,9 @@ export function useEvents(
   // component handles gesture detection at its own level.
   //
   // Composite component special case - when styled() wraps a non-Tamagui component
-  // (e.g. React.forwardRef), the elementType becomes that composite component.
+  // (e.g. component wrappers), the elementType becomes that composite component.
   // GestureDetector/responder wrapping around a composite component breaks during
-  // re-renders triggered by pressStyle state changes (the gesture/responder loses
+  // re-renders triggered by press-clause state changes (the gesture/responder loses
   // attachment to the native view through the composite layers). Pass events as props
   // so they flow through to the inner native View.
   const isCompositeComponent =
@@ -159,7 +159,7 @@ export function useEvents(
     // claims responder but never finalizes. The responder path is the source of
     // truth RN already uses for innermost press ownership.
     //
-    // Android pressStyle-only fallback: wire synthesized press handlers to the
+    // Android press-clause-only fallback: wire synthesized press handlers to the
     // responder system on viewProps instead of an RNGH Manual observer (which
     // freezes Android — see top-of-file isAndroid comment). Hook is called
     // unconditionally here for stable hooks order; useMainThreadPressEvents
@@ -182,7 +182,7 @@ export function useEvents(
 
       if (hasRealPressEvents && !isInsideNativeMenu) {
         // Real handlers are delivered by useMainThreadPressEvents above. Clear
-        // any cached pressStyle observer from an earlier render so it cannot
+        // any cached press-clause observer from an earlier render so it cannot
         // double-fire after onPress appears dynamically.
         gestureRef.current = null
         return null
@@ -211,17 +211,17 @@ export function useEvents(
             })
           gestureRef.current = manual
         } else if (!getIsAndroid()) {
-          // pressStyle-only (events.onPress was synthesized to drive pressStyle
+          // press-clause-only (events.onPress was synthesized to drive press state
           // visuals, no user handler): use Manual + manualActivation. Touch
-          // observation runs on the UI thread for fast pressStyle feedback,
+          // observation runs on the UI thread for fast press-clause feedback,
           // but the gesture never activates → never claims responder/ownership,
           // so a real-handler ancestor still wins arbitration. This is the fix
           // for nested press scenarios like <Link asChild><View><Button/></View></Link>
           // where the View carries the merged navigate onPress and the inner
-          // pressStyled Button must not steal the press.
+          // press-styled Button must not steal the press.
           //
           // Android: skipped — see isAndroid comment at top. Synthesized
-          // pressStyle handlers fall through to viewProps responder events.
+          // press-clause handlers fall through to viewProps responder events.
           gestureRef.current = Gesture.Manual()
             .runOnJS(true)
             .manualActivation(true)
@@ -270,12 +270,12 @@ export function wrapWithGestureDetector(
     return content
   }
 
-  // pressStyle-only observers (Manual + manualActivation gesture) must never
-  // claim the responder — otherwise a nested pressStyle Tamagui child would
+  // press-clause-only observers (Manual + manualActivation gesture) must never
+  // claim the responder — otherwise a nested press-styled Tamagui child would
   // preempt a real-handler ancestor (e.g. <Link asChild><View><Button/></View></Link>
   // where the View carries the merged navigate handler and the inner Button
-  // has only pressStyle). The Manual gesture observes touches on the UI thread
-  // for fast pressStyle visuals without participating in arbitration.
+  // has only press clauses). The Manual gesture observes touches on the UI thread
+  // for fast press-clause visuals without participating in arbitration.
   if (!hasRealPressEvents) {
     return React.createElement(GestureDetector, { gesture }, content)
   }

package/src/helpers/componentDisplayName.ts

@@ -0,0 +1,14 @@
+export const componentDisplayName = /* @__PURE__ */ Symbol.for(
+  'tamagui.componentDisplayName'
+)
+
+export function setComponentDisplayName<T extends { displayName?: string }>(
+  component: T,
+  displayName?: string
+) {
+  if (displayName) {
+    component.displayName = displayName
+    ;(component as any)[componentDisplayName] = displayName
+  }
+  return component
+}

package/src/helpers/createDesignSystem.ts

@@ -1,47 +1,20 @@
 import { isWeb } from '@tamagui/constants'
 import type { CreateTamaguiProps, Variable } from '../types'
-import { getVariableVariable, isVariable } from '../createVariable'
-import { autoVariables, registerCSSVariable, variableToCSS } from './registerCSSVariable'
+import {
+  getAutoVariableCSS,
+  getVariableGeneration,
+  registerCSSVariable,
+  variableToCSS,
+} from './registerCSSVariable'
+import { getConfigMaybe } from '../config'
 import { getThemeCSSRules } from './getThemeCSSRules'
-import { getAllRules } from './insertStyleRule'
+import { getAllRules, wrapStyleRules } from './insertStyleRule'
 
 type ThemeConfig = {
   cssRuleSets: string[]
   getThemeRulesSets: () => string[]
 }
 
-// helper to get font property CSS declarations
-function getFontPropertyDeclarations(
-  fontParsed: any,
-  tokenKey: string = '$true'
-): string[] {
-  const props: string[] = ['font-family: var(--f-family)']
-
-  const getVarRef = (obj: any) => {
-    const val = obj?.[tokenKey]
-    if (isVariable(val)) {
-      return getVariableVariable(val)
-    }
-    return undefined
-  }
-
-  const letterSpacing = getVarRef(fontParsed.letterSpacing)
-  if (letterSpacing) props.push(`letter-spacing: ${letterSpacing}`)
-
-  const lineHeight = getVarRef(fontParsed.lineHeight)
-  if (lineHeight) props.push(`line-height: ${lineHeight}`)
-
-  const fontStyle = getVarRef(fontParsed.style)
-  if (fontStyle) props.push(`font-style: ${fontStyle}`)
-
-  const fontWeight = getVarRef(fontParsed.weight)
-  if (fontWeight) props.push(`font-weight: ${fontWeight}`)
-
-  return props
-}
-
-export { getFontPropertyDeclarations }
-
 /**
  * Generates CSS for tokens - registers CSS variables and builds declaration strings
  */
@@ -97,7 +70,7 @@ export function createFontCSS(
       const [name, language] = key.includes('_') ? key.split('_') : [key]
       const fontVars = registerFontVariables(fontParsed)
       fontDeclarations[key] = {
-        name: name.slice(1),
+        name,
         declarations: fontVars,
         language,
         fontParsed,
@@ -118,7 +91,7 @@ export function buildCSSRuleSets(
     string,
     { name: string; declarations: string[]; language?: string; fontParsed: any }
   >,
-  defaultFontToken: string = '$true'
+  defaultFontToken = ''
 ): string[] {
   if (!process.env.TAMAGUI_DID_OUTPUT_CSS) {
     const cssRuleSets: string[] = []
@@ -148,16 +121,15 @@ export function buildCSSRuleSets(
     }
 
     // shared rule: all font_* classes + is_View apply font properties
-    // this resets fonts on Views like React Native does
+    // this resets fonts on Views like React Native does; the declarations must
+    // follow settings.defaultFont, never the sorted selector order
     if (fontSelectors.length) {
-      const firstFont = fontDeclarations[sortedFontDeclarationKeys[0]]
-      if (firstFont?.fontParsed) {
-        const fontProps = getFontPropertyDeclarations(
-          firstFont.fontParsed,
-          defaultFontToken
-        )
-        const sharedSelectors = [...fontSelectors, '.is_View'].join(', ')
-        cssRuleSets.push(`${sharedSelectors} {${fontProps.join('; ')}}`)
+      const defaultFont = fontDeclarations[defaultFontToken]
+      if (defaultFont?.fontParsed) {
+        // These are defaults, so an atomic style prop must be able to override
+        // them regardless of stylesheet insertion order.
+        const sharedSelectors = `:where(${[...fontSelectors, '.is_View'].join(', ')})`
+        cssRuleSets.push(`${sharedSelectors} {font-family: var(--f-family)}`)
       }
     }
 
@@ -194,59 +166,81 @@ export function createThemeCSS(
 }
 
 /**
- * Gets all generated CSS - design system + runtime styles
+ * Everything `getCSS` emits ahead of the runtime rules. It is a pure function of
+ * the config, so a per-config slot holds it across calls and SSR stops
+ * regenerating every theme's variable block per request. It is NOT hoisted to
+ * `createTamagui` time: generating theme rules is what mints auto variables, so
+ * doing it eagerly would renumber them whenever a process builds more than one
+ * config, and the point of this cache is that nothing about the output moves.
  */
-export function getCSS(
-  themeConfig: ThemeConfig,
-  opts: {
-    separator?: string
-    sinceLastCall?: boolean
-    exclude?: 'themes' | 'design-system' | string | null
-  } = {},
-  lastIndex: { value: number }
-): string {
-  if (!process.env.TAMAGUI_DID_OUTPUT_CSS && process.env.TAMAGUI_TARGET === 'web') {
-    const { separator = '\n', sinceLastCall, exclude } = opts
+type StaticCSS = {
+  /** the variable generation these were built against */
+  generation: number
+  /** the config whose settings `getThemeCSSRules` read while building them */
+  config: unknown
+  /** keyed by separator and whether the theme rules are in the string */
+  byKey: Map<string, string>
+}
 
-    if (sinceLastCall && lastIndex.value >= 0) {
-      const rules = getAllRules()
-      const newRules = rules.slice(lastIndex.value)
-      lastIndex.value = rules.length
-      return newRules.join(separator)
-    }
+export type GetCSSState = {
+  /** index into the sorted rule list that `sinceLastCall` slices from */
+  lastIndex: number
+  static: StaticCSS | null
+}
 
-    lastIndex.value = 0
+// a request only ever asks for one or two shapes; anything past that is a caller
+// passing separators it makes up, and dropping the lot just costs a rebuild
+const MAX_STATIC_SHAPES = 8
 
-    const runtimeStyles = getAllRules().join(separator)
+const getStaticCSS = (
+  themeConfig: ThemeConfig,
+  separator: string,
+  withThemes: boolean,
+  state: GetCSSState
+): string => {
+  const key = withThemes ? separator : `\u0000${separator}`
+  const config = getConfigMaybe()
+  let cached = state.static
+
+  if (
+    !cached ||
+    cached.generation !== getVariableGeneration() ||
+    cached.config !== config
+  ) {
+    cached = { generation: getVariableGeneration(), config, byKey: new Map() }
+    state.static = cached
+  }
 
-    if (exclude === 'design-system') {
-      return runtimeStyles
-    }
+  const hit = cached.byKey.get(key)
+  if (hit !== undefined) {
+    return hit
+  }
 
-    const themeRules = exclude ? '' : themeConfig.getThemeRulesSets().join(separator)
+  // must run before getAutoVariableCSS: generating theme rules is what creates
+  // the auto variables that block declares
+  const themeRules = withThemes ? themeConfig.getThemeRulesSets().join(separator) : ''
 
-    // auto-generated vars from theme values not in tokens
-    const autoVarCSS = autoVariables.length
-      ? `:root{${autoVariables.map((v) => `--${v.name}:${v.val}`).join(';')}}`
-      : ''
+  // auto-generated vars from theme values not in tokens
+  const autoVariableCSS = getAutoVariableCSS()
+  const autoVarCSS = autoVariableCSS ? `:root{${autoVariableCSS}}` : ''
 
-    // notes:
-    // @scope (.is_Text) to (.is_View) - inherit text styles in nested Text without View boundary
-    // display: inline breaks css transform styles
+  // notes:
+  // @scope (.is_Text) to (.is_View) - inherit text styles in nested Text without View boundary
+  // display: inline breaks css transform styles
 
-    // !important or else random css easily overrides, the prop is absolute (local-first styling)
-    const hideScrollBarsCSS = `._hsb-x::-webkit-scrollbar:horizontal { display: none !important; }
+  // !important or else random css easily overrides, the prop is absolute (local-first styling)
+  const hideScrollBarsCSS = `._hsb-x::-webkit-scrollbar:horizontal { display: none !important; }
 ._hsb-y::-webkit-scrollbar:vertical { display: none !important; }
 ._hsb-x { scrollbar-width: none !important; }
 ._hsb-y { scrollbar-width: none !important; }`
-    const pointerEventsCSS = `:root ._pe-boxonly>* {pointer-events:none;}
+  const pointerEventsCSS = `:root ._pe-boxonly>* {pointer-events:none;}
 :root ._pe-boxnone>* {pointer-events:auto;}`
 
-    const designSystem = `._ovs-contain {overscroll-behavior:contain;}
+  const designSystem = `._ovs-contain {overscroll-behavior:contain;}
 .t_unmounted .is_View, .t_unmounted .is_Text { transition: none !important; }
-.is_View { display: flex; align-items: stretch; flex-direction: column; flex-basis: auto; box-sizing: border-box; min-height: 0; min-width: 0; flex-shrink: 0; }
-.is_Text { display: inline; box-sizing: border-box; word-wrap: break-word; white-space: pre-wrap; margin: 0; }
-@scope (.is_Text) to (.is_View) { .is_Text { white-space: inherit; word-wrap: inherit; } }
+:where(.is_View) { display: flex; align-items: stretch; flex-direction: column; flex-basis: auto; box-sizing: border-box; min-height: 0; min-width: 0; flex-shrink: 0; }
+:where(.is_Text) { display: inline; box-sizing: border-box; word-wrap: break-word; white-space: pre-wrap; margin: 0; }
+@scope (.is_Text) to (.is_View) { :where(.is_Text) { white-space: inherit; word-wrap: inherit; } }
 ._dsp_contents {display:contents;}
 ._no_backdrop::backdrop {display: none;}
 .is_Input::selection, .is_TextArea::selection {background-color: var(--t_selectionColor);}
@@ -256,9 +250,55 @@ ${hideScrollBarsCSS}
 ${autoVarCSS}
 ${themeConfig.cssRuleSets.join(separator)}`
 
-    return `${designSystem}
-${themeRules}
-${runtimeStyles}`
+  const css = `${designSystem}\n${themeRules}\n`
+
+  // generating theme rules is what mints auto variables, so the generation this
+  // was built against is the one standing now, not the one read on the way in
+  if (cached.generation !== getVariableGeneration()) {
+    cached = { generation: getVariableGeneration(), config, byKey: new Map() }
+    state.static = cached
+  }
+  if (cached.byKey.size >= MAX_STATIC_SHAPES) {
+    cached.byKey.clear()
+  }
+  cached.byKey.set(key, css)
+
+  return css
+}
+
+/**
+ * Gets all generated CSS - design system + runtime styles
+ */
+export function getCSS(
+  themeConfig: ThemeConfig,
+  opts: {
+    separator?: string
+    sinceLastCall?: boolean
+    exclude?: 'themes' | 'design-system' | string | null
+  } = {},
+  state: GetCSSState
+): string {
+  if (!process.env.TAMAGUI_DID_OUTPUT_CSS && process.env.TAMAGUI_TARGET === 'web') {
+    const { separator = '\n', sinceLastCall, exclude } = opts
+
+    if (sinceLastCall && state.lastIndex >= 0) {
+      const rules = getAllRules()
+      const newRules = rules.slice(state.lastIndex)
+      state.lastIndex = rules.length
+      return wrapStyleRules(newRules.join(separator))
+    }
+
+    state.lastIndex = 0
+
+    const runtimeStyles = getAllRules().join(separator)
+
+    if (exclude === 'design-system') {
+      return wrapStyleRules(runtimeStyles)
+    }
+
+    return wrapStyleRules(
+      `${getStaticCSS(themeConfig, separator, !exclude, state)}${runtimeStyles}`
+    )
   }
   return ''
 }

package/src/helpers/createStyledContext.tsx

@@ -1,16 +1,78 @@
 import type { Context, ReactNode } from 'react'
 import React from 'react'
-import type { StyledContext } from '../types'
+import type { StyledContext, StyledContextOptions } from '../types'
+import { isPlainObject } from './isObj'
 import { mergeProps } from './mergeProps'
 import { objectIdentityKey } from './objectIdentityKey'
 
+type EmptyDefault = Record<PropertyKey, never>
+
+type EmptyDefaultOptions =
+  | string
+  | {
+      namespace?: string
+      keys?: never
+    }
+
+type StyledContextKey<Props> = Extract<keyof Props, string>
+
+type OptionalStyledContextKeys<Props extends Record<string, any>> = {
+  [Key in keyof Props]-?: {} extends Pick<Props, Key> ? Key : never
+}[keyof Props]
+
+type RequiredStyledContextKeys<Props extends Record<string, any>> = Exclude<
+  keyof Props,
+  OptionalStyledContextKeys<Props>
+>
+
+type FullDefaultValues<Props extends Record<string, any>> = {
+  [Key in RequiredStyledContextKeys<Props>]: Props[Key]
+} & {
+  [Key in OptionalStyledContextKeys<Props>]: Props[Key] | undefined
+}
+
+type StyledContextFactory = {
+  <
+    VariantProps extends Record<string, any>,
+    ConsumedKeys extends StyledContextKey<VariantProps>,
+  >(
+    defaultValues: VariantProps,
+    namespaceOrOptions: StyledContextOptions<VariantProps, ConsumedKeys> & {
+      keys: readonly ConsumedKeys[]
+    }
+  ): StyledContext<VariantProps, ConsumedKeys>;
+  <VariantProps extends Record<string, any>>(
+    defaultValues: EmptyDefault,
+    namespaceOrOptions?: EmptyDefaultOptions
+  ): StyledContext<VariantProps, never>;
+  <VariantProps extends Record<string, any>>(
+    defaultValues: VariantProps & FullDefaultValues<VariantProps>,
+    namespaceOrOptions?: EmptyDefaultOptions
+  ): StyledContext<VariantProps, StyledContextKey<VariantProps>>;
+  <
+    VariantProps extends Record<string, any>,
+    ConsumedKeys extends StyledContextKey<VariantProps>,
+  >(
+    defaultValues: undefined,
+    namespaceOrOptions: StyledContextOptions<VariantProps, ConsumedKeys> & {
+      keys: readonly ConsumedKeys[]
+    }
+  ): StyledContext<VariantProps, ConsumedKeys>;
+  <VariantProps extends Record<string, any> = Record<string, any>>(
+    defaultValues?: undefined,
+    namespaceOrOptions?: string
+  ): StyledContext<VariantProps, never>
+}
+
 // use const (not function declaration) to prevent esbuild from hoisting
 // above __esm lazy init - function declarations get hoisted before
 // import_react is initialized, causing undefined.default errors in SSR
-export const createStyledContext = <VariantProps extends Record<string, any>>(
+export const createStyledContext = (<VariantProps extends Record<string, any>>(
   defaultValues?: VariantProps,
-  namespace = ''
-): StyledContext<VariantProps> => {
+  namespaceOrOptions:
+    | string
+    | StyledContextOptions<VariantProps, StyledContextKey<VariantProps>> = ''
+): StyledContext<VariantProps, StyledContextKey<VariantProps>> => {
   // avoid react compiler - we aren't breaking its rules but it mis-interprets
   // how we change the context value
   'use no memo'
@@ -29,9 +91,26 @@ export const createStyledContext = <VariantProps extends Record<string, any>>(
     Math.random() ? 'useContext' : 'useContext'
   ] as typeof React.useContext
 
+  const namespace =
+    typeof namespaceOrOptions === 'string'
+      ? namespaceOrOptions
+      : namespaceOrOptions.namespace || ''
+  const propKeys =
+    typeof namespaceOrOptions === 'string'
+      ? isPlainObject(defaultValues)
+        ? (Object.keys(defaultValues) as StyledContextKey<VariantProps>[])
+        : undefined
+      : namespaceOrOptions.keys ||
+        (isPlainObject(defaultValues)
+          ? (Object.keys(defaultValues) as StyledContextKey<VariantProps>[])
+          : undefined)
+
   const OGContext = createReactContext<VariantProps | undefined>(defaultValues)
   const OGProvider = OGContext.Provider
-  const Context = OGContext as any as StyledContext<VariantProps>
+  const Context = OGContext as any as StyledContext<
+    VariantProps,
+    StyledContextKey<VariantProps>
+  >
   const scopedContexts = new Map<string, Context<VariantProps | undefined>>()
   const LastScopeInNamespace = createReactContext<string>(namespace)
 
@@ -61,7 +140,7 @@ export const createStyledContext = <VariantProps extends Record<string, any>>(
         // we already merged and want to keep ordering
         return values
       }
-      return mergeProps(defaultValues!, values)
+      return mergeProps(defaultValues || {}, values)
     }, [objectIdentityKey(values)])
 
     let ScopedProvider = OGProvider
@@ -91,8 +170,9 @@ export const createStyledContext = <VariantProps extends Record<string, any>>(
   // @ts-expect-error we are overriding default provider
   Context.Provider = Provider
   Context.props = defaultValues
+  Context.propKeys = propKeys
   Context.context = OGContext as Context<VariantProps>
   Context.useStyledContext = useStyledContext
 
   return Context
-}
+}) as StyledContextFactory