@tamagui/web 1.74.13 → 1.74.14

package/src/createComponent.tsx

@@ -49,6 +49,7 @@ import {
   SpacerProps,
   StackProps,
   StaticConfig,
+  StyleableOptions,
   TamaguiComponent,
   TamaguiComponentEvents,
   TamaguiComponentState,
@@ -62,7 +63,7 @@ import {
   WebOnlyPressEvents,
 } from './types'
 import { Slot } from './views/Slot'
-import { useThemedChildren } from './views/Theme'
+import { getThemeCNStyle, useThemedChildren } from './views/Theme'
 import { ThemeDebug } from './views/ThemeDebug'
 
 // this appears to fix expo / babel not picking this up sometimes? really odd
@@ -725,6 +726,8 @@ export function createComponent<
       onMouseDown,
       onMouseEnter,
       onMouseLeave,
+      onFocus,
+      onBlur,
       separator,
       // ignore from here on out
       forceStyle: _forceStyle,
@@ -897,12 +900,20 @@ export function createComponent<
     let className: string | undefined
 
     if (process.env.TAMAGUI_TARGET === 'web') {
-      const classList = [
-        componentName ? componentClassName : '',
-        fontFamilyClassName,
-        classNames ? Object.values(classNames).join(' ') : '',
-        groupClassName,
-      ]
+      // TODO this could be moved into getSplitStyles right?
+      // const fromTheme = getThemeCNStyle(themeState)
+
+      let classList: string[] = []
+      if (componentName) classList.push(componentClassName)
+      if (fontFamilyClassName) classList.push(fontFamilyClassName)
+      if (classNames) classList.push(Object.values(classNames).join(' '))
+      if (groupClassName) classList.push(groupClassName)
+
+      // if (fromTheme) {
+      //   classList.push(fromTheme.className)
+      //   style.color ??= fromTheme.style?.color
+      // }
+
       className = classList.join(' ')
 
       if (isAnimatedReactNativeWeb && !avoidAnimationStyle) {
@@ -939,6 +950,7 @@ export function createComponent<
     // if its a group its gotta listen for pseudos to emit them to children
 
     const runtimePressStyle = !disabled && noClassNames && pseudos?.pressStyle
+    const runtimeFocusStyle = !disabled && noClassNames && pseudos?.focusStyle
     const attachPress = Boolean(
       groupName ||
         runtimePressStyle ||
@@ -958,7 +970,11 @@ export function createComponent<
     // check presence rather than value to prevent reparenting bugs
     // allows for onPress={x ? function : undefined} without re-ordering dom
     const shouldAttach = Boolean(
-      attachPress || isHoverable || runtimePressStyle || runtimeHoverStyle
+      attachPress ||
+        isHoverable ||
+        runtimePressStyle ||
+        runtimeHoverStyle ||
+        runtimeFocusStyle
     )
 
     if (process.env.NODE_ENV === 'development' && time) time`events-setup`
@@ -1031,15 +1047,29 @@ export function createComponent<
                   }
                 }
               : undefined,
-            ...(process.env.TAMAGUI_TARGET === 'native' && {
-              onLongPress:
-                attachPress && onLongPress
-                  ? (e) => {
-                      unPress()
-                      onLongPress?.(e)
-                    }
-                  : undefined,
-            }),
+            ...(process.env.TAMAGUI_TARGET === 'native' &&
+              attachPress &&
+              onLongPress && {
+                onLongPress: (e) => {
+                  unPress()
+                  onLongPress?.(e)
+                },
+              }),
+            ...(process.env.TAMAGUI_TARGET === 'web' &&
+              runtimeFocusStyle && {
+                onFocus: (e) => {
+                  setStateShallow({
+                    focus: true,
+                  })
+                  onFocus?.(e)
+                },
+                onBlur: (e) => {
+                  setStateShallow({
+                    focus: false,
+                  })
+                  onBlur?.(e)
+                },
+              }),
           }
         : null
 
@@ -1057,6 +1087,10 @@ export function createComponent<
       })
     }
 
+    if (process.env.TAMAGUI_TARGET === 'web' && events && !isReactNative) {
+      Object.assign(viewProps, getWebEvents(events))
+    }
+
     if (process.env.NODE_ENV === 'development' && time) time`events`
 
     if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {
@@ -1175,7 +1209,7 @@ export function createComponent<
     // disable theme prop is deterministic so conditional hook ok here
     content = disableThemeProp
       ? content
-      : useThemedChildren(themeState, content, themeStateProps)
+      : useThemedChildren(themeState, content, themeStateProps, false)
 
     if (process.env.NODE_ENV === 'development' && time) time`themed-children`
 
@@ -1188,7 +1222,7 @@ export function createComponent<
     }
 
     if (process.env.TAMAGUI_TARGET === 'web') {
-      if (events || isAnimatedReactNativeWeb) {
+      if (isReactNative) {
         content = (
           <span
             className={`${isAnimatedReactNativeWeb ? className : ''} _dsp_contents`}
@@ -1317,15 +1351,16 @@ export function createComponent<
     return Component
   }
 
-  function styleable(Component: any, extended?: Partial<StaticConfig>) {
+  function styleable(Component: any, options?: StyleableOptions) {
     const isForwardedRefAlready = Component.render?.length === 2
     const ComponentForwardedRef = isForwardedRefAlready
       ? (Component as any)
       : // memo because theme changes otherwise would always re-render
         memo(forwardRef(Component as any))
-
-    const extendedConfig = extendStyledConfig(extended)
-    const out = themeable(ComponentForwardedRef, extendedConfig) as any
+    const extendedConfig = extendStyledConfig(options?.staticConfig)
+    const out = options?.disableTheme
+      ? ComponentForwardedRef
+      : (themeable(ComponentForwardedRef, extendedConfig) as any)
     out.staticConfig = extendedConfig
     out.styleable = styleable
     return out
@@ -1351,6 +1386,8 @@ function getWebEvents<E extends EventLikeObject>(events: E, webStyle = true) {
     onMouseUp: events.onPressOut,
     onTouchStart: events.onPressIn,
     onTouchEnd: events.onPressOut,
+    onFocus: events.onFocus,
+    onBlur: events.onBlur,
   }
 }
 

package/src/helpers/createMediaStyle.ts

@@ -1,6 +1,6 @@
 import { getConfig } from '../config'
 import { mediaObjectToString } from '../hooks/useMedia'
-import type { MediaQueries, MediaStyleObject, StyleObject } from '../types'
+import type { IsMediaType, MediaQueries, MediaStyleObject, StyleObject } from '../types'
 import { getGroupPropParts } from './getGroupPropParts'
 
 // TODO have this be used by extractMediaStyle in tamagui static
@@ -18,16 +18,17 @@ export const createMediaStyle = (
   styleObject: StyleObject,
   mediaKeyIn: string,
   mediaQueries: MediaQueries,
+  type: IsMediaType,
   negate?: boolean,
   priority?: number
 ): MediaStyleObject => {
   const { property, identifier, rules } = styleObject
   const conf = getConfig()
   const enableMediaPropOrder = conf.settings.mediaPropOrder
-  const isThemeMedia = mediaKeyIn.startsWith('theme-')
-  const isPlatformMedia = !isThemeMedia && mediaKeyIn.startsWith('platform-')
-  const isGroup = !isThemeMedia && !isPlatformMedia && mediaKeyIn.startsWith('group-')
-  const isNonWindowMedia = isThemeMedia || isPlatformMedia || isGroup
+  const isTheme = type === 'theme'
+  const isPlatform = type === 'platform'
+  const isGroup = type === 'group'
+  const isNonWindowMedia = isTheme || isPlatform || isGroup
   const negKey = negate ? '0' : ''
   const ogPrefix = identifier.slice(0, identifier.indexOf('-') + 1)
   const id = `${ogPrefix}${MEDIA_SEP}${mediaKeyIn.replace('-', '')}${negKey}${MEDIA_SEP}`
@@ -43,7 +44,7 @@ export const createMediaStyle = (
       .fill(':root')
       .join('')
 
-    if (isThemeMedia || isGroup) {
+    if (isTheme || isGroup) {
       const groupInfo = getGroupPropParts(mediaKeyIn)
       const mediaName = groupInfo?.name
       groupMediaKey = groupInfo?.media

package/src/helpers/getSplitStyles.tsx

@@ -38,6 +38,7 @@ import type {
   DebugProp,
   GetStyleResult,
   GetStyleState,
+  IsMediaType,
   MediaQueryKey,
   PseudoPropKeys,
   PseudoStyles,
@@ -513,8 +514,8 @@ export const getSplitStyles: StyleSplitter = (
     const isStyleLikeKey = isShorthand || isValidStyleKeyInit || isVariant
 
     let isPseudo = keyInit in validPseudoKeys
-    let isMedia = !isStyleLikeKey && !isPseudo && isMediaKey(keyInit)
-    let isMediaOrPseudo = isMedia || isPseudo
+    let isMedia: IsMediaType = !isStyleLikeKey && !isPseudo && isMediaKey(keyInit)
+    let isMediaOrPseudo = Boolean(isMedia || isPseudo)
 
     const isStyleProp =
       isMediaOrPseudo ||
@@ -669,7 +670,7 @@ export const getSplitStyles: StyleSplitter = (
 
       isPseudo = key in validPseudoKeys
       isMedia = !isPseudo && !isValidStyleKeyInit && isMediaKey(key)
-      isMediaOrPseudo = isMedia || isPseudo
+      isMediaOrPseudo = Boolean(isMedia || isPseudo)
       isVariant = variants && key in variants
 
       if (inlineProps?.has(key) || (IS_STATIC && inlineWhenUnflattened?.has(key))) {
@@ -844,8 +845,7 @@ export const getSplitStyles: StyleSplitter = (
       else if (isMedia) {
         if (!val) continue
 
-        const isPlatformMedia = key.startsWith('$platform-')
-        if (isPlatformMedia) {
+        if (isMedia === 'platform') {
           const platform = key.slice(10)
           if (
             // supports web, ios, android
@@ -925,6 +925,7 @@ export const getSplitStyles: StyleSplitter = (
               style,
               mediaKeyShort,
               mediaQueryConfig,
+              isMedia,
               false,
               priority
             )
@@ -934,9 +935,9 @@ export const getSplitStyles: StyleSplitter = (
             mergeClassName(transforms, classNames, fullKey, out.identifier, true, true)
           }
         } else {
-          const isThemeMedia = !isPlatformMedia && mediaKeyShort.startsWith('theme-')
-          const isGroupMedia =
-            !isPlatformMedia && !isThemeMedia && mediaKeyShort.startsWith('group-')
+          const isThemeMedia = isMedia === 'theme'
+          const isGroupMedia = isMedia === 'group'
+          const isPlatformMedia = isMedia === 'platform'
 
           if (!isThemeMedia && !isPlatformMedia && !isGroupMedia) {
             if (!mediaState[mediaKeyShort]) {

package/src/helpers/themeable.tsx

@@ -3,18 +3,15 @@ import React, { forwardRef } from 'react'
 import { StaticConfig, ThemeableProps } from '../types'
 import { Theme } from '../views/Theme'
 
-export function themeable<Component extends (props: any) => any>(
-  component: Component,
+export function themeable<ComponentType extends (props: any) => any>(
+  Component: ComponentType,
   staticConfig?: Partial<StaticConfig>
 ) {
   const withThemeComponent = forwardRef(function WithTheme(props: ThemeableProps, ref) {
     const { themeInverse, theme, componentName, themeReset, ...rest } = props
 
-    const element = React.createElement(component, {
-      ...rest,
-      ref,
-      'data-disable-theme': true,
-    } as any)
+    // @ts-expect-error its ok
+    const element = <Component ref={ref} {...rest} data-disable-theme />
 
     let contents = (
       <Theme
@@ -34,10 +31,10 @@ export function themeable<Component extends (props: any) => any>(
 
   const withTheme: any = withThemeComponent
   withTheme.displayName = `Themed(${
-    (component as any)?.displayName || (component as any)?.name || 'Anonymous'
+    (Component as any)?.displayName || (Component as any)?.name || 'Anonymous'
   })`
 
-  return withTheme as Component extends (props: infer P) => infer R
+  return withTheme as ComponentType extends (props: infer P) => infer R
     ? (props: Omit<P, 'theme' | 'themeInverse'> & ThemeableProps) => R
     : unknown
 }

package/src/hooks/useMedia.tsx

@@ -1,13 +1,13 @@
 import { useIsomorphicLayoutEffect } from '@tamagui/constants'
-import { useContext, useRef, useSyncExternalStore } from 'react'
+import { useRef, useSyncExternalStore } from 'react'
 
 import { getConfig } from '../config'
-import { ComponentContext } from '../contexts/ComponentContext'
 import { createProxy } from '../helpers/createProxy'
 import { matchMedia } from '../helpers/matchMedia'
 import { pseudoDescriptors } from '../helpers/pseudoDescriptors'
 import type {
   ComponentContextI,
+  IsMediaType,
   MediaQueries,
   MediaQueryKey,
   MediaQueryObject,
@@ -15,7 +15,6 @@ import type {
   TamaguiInternalConfig,
   UseMediaState,
 } from '../types'
-import { useConfiguration } from './useConfiguration'
 import { getDisableSSR, useDisableSSR } from './useDisableSSR'
 
 export let mediaState: MediaQueryState =
@@ -45,12 +44,15 @@ export const getMedia = () => mediaState
 
 export const mediaKeys = new Set<string>() // with $ prefix
 
-export const isMediaKey = (key: string) =>
-  mediaKeys.has(key) ||
-  (key[0] === '$' &&
-    (key.startsWith('$platform-') ||
-      key.startsWith('$theme-') ||
-      key.startsWith('$group-')))
+export const isMediaKey = (key: string): IsMediaType => {
+  if (mediaKeys.has(key)) return true
+  if (key[0] === '$') {
+    if (key.startsWith('$platform-')) return 'platform'
+    if (key.startsWith('$theme-')) return 'theme'
+    if (key.startsWith('$group-')) return 'group'
+  }
+  return false
+}
 
 // for SSR capture it at time of startup
 let initState: MediaQueryState

package/src/hooks/useProps.tsx

@@ -83,6 +83,7 @@ export function usePropsAndStyle<A extends Object>(
       mediaState: media,
       noSkip: true,
       noClassNames: true,
+      resolveValues: 'auto',
       ...opts,
     },
     null,

package/src/types.tsx

@@ -29,6 +29,8 @@ import type { ThemeProviderProps } from './views/ThemeProvider'
 
 export type { MediaStyleObject, StyleObject } from '@tamagui/helpers'
 
+export type IsMediaType = boolean | 'platform' | 'theme' | 'group'
+
 export type SpaceDirection = 'vertical' | 'horizontal' | 'both'
 
 export type TamaguiElement = HTMLElement | View
@@ -147,6 +149,8 @@ export type WebOnlyPressEvents = {
   onMouseLeave?: DivAttributes['onMouseLeave']
   onMouseDown?: DivAttributes['onMouseDown']
   onMouseUp?: DivAttributes['onMouseUp']
+  onFocus?: DivAttributes['onFocus']
+  onBlur?: DivAttributes['onBlur']
 }
 
 /**
@@ -1343,6 +1347,11 @@ export interface ThemeableProps {
   debug?: DebugProp
 }
 
+export type StyleableOptions = {
+  disableTheme?: boolean
+  staticConfig?: Partial<StaticConfig>
+}
+
 export type Styleable<Props, Ref> = <
   CustomProps extends Object,
   X extends FunctionComponent<any> = FunctionComponent<
@@ -1350,7 +1359,7 @@ export type Styleable<Props, Ref> = <
   >
 >(
   a: X,
-  staticConfig?: Partial<StaticConfig>
+  options?: StyleableOptions
 ) => ReactComponentWithRef<
   CustomProps & Omit<Props & ThemeableProps, keyof CustomProps>,
   Ref

package/src/views/Theme.tsx

@@ -63,7 +63,8 @@ export function useThemedChildren(
   themeState: ChangedThemeResponse,
   children: any,
   props: ThemeProps,
-  isRoot = false
+  isRoot = false,
+  avoidWrap = false
 ) {
   const { themeManager, isNewTheme } = themeState
   const { shallow, forceClassName } = props
@@ -108,7 +109,7 @@ export function useThemedChildren(
     return elementsWithContext
   }
 
-  if (isWeb) {
+  if (isWeb && !avoidWrap) {
     return wrapThemeElements({
       children: elementsWithContext,
       themeState,
@@ -120,6 +121,25 @@ export function useThemedChildren(
   return elementsWithContext
 }
 
+export function getThemeCNStyle(themeState: ChangedThemeResponse, isRoot = false) {
+  if (!themeState.isNewTheme) return
+  // in order to provide currentColor, set color by default
+  const themeColor =
+    themeState.state?.theme && themeState.isNewTheme
+      ? variableToString(themeState.state.theme.color)
+      : ''
+  const style = themeColor
+    ? {
+        color: themeColor,
+      }
+    : undefined
+  let className = themeState.state?.className || ''
+  if (isRoot) {
+    className = className.replace('t_sub_theme', '')
+  }
+  return { style, className }
+}
+
 export function wrapThemeElements({
   children,
   themeState,
@@ -141,25 +161,9 @@ export function wrapThemeElements({
     return <span className="_dsp_contents is_Theme">{children}</span>
   }
 
-  // in order to provide currentColor, set color by default
-  const themeColor =
-    themeState.state?.theme && themeState.isNewTheme
-      ? variableToString(themeState.state.theme.color)
-      : ''
-  const colorStyle = themeColor
-    ? {
-        color: themeColor,
-      }
-    : undefined
-
-  let className = themeState.state?.className || ''
-
-  if (isRoot) {
-    className = className.replace('t_sub_theme', '')
-  }
-
+  const { className, style } = getThemeCNStyle(themeState, isRoot)!
   let themedChildren = (
-    <span className={`${className} _dsp_contents is_Theme`} style={colorStyle}>
+    <span className={`${className} _dsp_contents is_Theme`} style={style}>
       {children}
     </span>
   )

package/types/createComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAaN,MAAM,OAAO,CAAA;AAsBd,OAAO,EAEL,SAAS,EAKT,cAAc,EACd,UAAU,EACV,WAAW,EACX,UAAU,EACV,YAAY,EACZ,gBAAgB,EAGhB,cAAc,EAEd,SAAS,EAMV,MAAM,SAAS,CAAA;AAoBhB,eAAO,MAAM,QAAQ,eAAsB,CAAA;AA6D3C,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,UAAU,GAAG,SAAS,GAAG,EAAE,EACtD,GAAG,GAAG,cAAc,EACpB,SAAS,GAAG,KAAK,EACjB,YAAY,EAAE,YAAY,4DAsqC3B;AAoBD,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,OAEjD;AAiBD,eAAO,MAAM,MAAM,0DAqCjB,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,mBAiGxD"}
+{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAaN,MAAM,OAAO,CAAA;AAsBd,OAAO,EAEL,SAAS,EAKT,cAAc,EACd,UAAU,EACV,WAAW,EACX,UAAU,EACV,YAAY,EAEZ,gBAAgB,EAGhB,cAAc,EAEd,SAAS,EAMV,MAAM,SAAS,CAAA;AAoBhB,eAAO,MAAM,QAAQ,eAAsB,CAAA;AA6D3C,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,UAAU,GAAG,SAAS,GAAG,EAAE,EACtD,GAAG,GAAG,cAAc,EACpB,SAAS,GAAG,KAAK,EACjB,YAAY,EAAE,YAAY,4DAwsC3B;AAsBD,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,OAEjD;AAiBD,eAAO,MAAM,MAAM,0DAqCjB,CAAA;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAA;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,mBAiGxD"}

package/types/helpers/createMediaStyle.d.ts

@@ -1,4 +1,4 @@
-import type { MediaQueries, MediaStyleObject, StyleObject } from '../types';
+import type { IsMediaType, MediaQueries, MediaStyleObject, StyleObject } from '../types';
 export declare const MEDIA_SEP = "_";
-export declare const createMediaStyle: (styleObject: StyleObject, mediaKeyIn: string, mediaQueries: MediaQueries, negate?: boolean, priority?: number) => MediaStyleObject;
+export declare const createMediaStyle: (styleObject: StyleObject, mediaKeyIn: string, mediaQueries: MediaQueries, type: IsMediaType, negate?: boolean, priority?: number) => MediaStyleObject;
 //# sourceMappingURL=createMediaStyle.d.ts.map

package/types/helpers/createMediaStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createMediaStyle.d.ts","sourceRoot":"","sources":["../../src/helpers/createMediaStyle.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAK3E,eAAO,MAAM,SAAS,MAAM,CAAA;AAS5B,eAAO,MAAM,gBAAgB,gBACd,WAAW,cACZ,MAAM,gBACJ,YAAY,WACjB,OAAO,aACL,MAAM,KAChB,gBAqGF,CAAA"}
+{"version":3,"file":"createMediaStyle.d.ts","sourceRoot":"","sources":["../../src/helpers/createMediaStyle.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAKxF,eAAO,MAAM,SAAS,MAAM,CAAA;AAS5B,eAAO,MAAM,gBAAgB,gBACd,WAAW,cACZ,MAAM,gBACJ,YAAY,QACpB,WAAW,WACR,OAAO,aACL,MAAM,KAChB,gBAqGF,CAAA"}

package/types/helpers/getSplitStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAEV,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,aAAa,EAMb,eAAe,EACf,YAAY,EAEZ,qBAAqB,EAErB,cAAc,EACd,WAAW,EAEZ,MAAM,UAAU,CAAA;AA6BjB,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAMhE,KAAK,aAAa,GAAG,CACnB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,qBAAqB,EACrC,UAAU,EAAE,eAAe,EAC3B,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,EACzC,OAAO,CAAC,EAAE,iBAAiB,EAE3B,WAAW,CAAC,EAAE,MAAM,EACpB,KAAK,CAAC,EAAE,SAAS,KACd,cAAc,CAAA;AAEnB,eAAO,MAAM,UAAU,MAAM,CAAA;AAuB7B,eAAO,MAAM,cAAc,EAAE,aAiqC5B,CAAA;AAsDD,eAAO,MAAM,WAAW,eACV,aAAa,UACjB,MAAM,WACL,MAAM,wBACO,OAAO,KAC5B,cA2BF,CAAA;AA0BD,eAAO,MAAM,cAAc,EAAE,aAQ5B,CAAA"}
+{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAEV,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,aAAa,EAOb,eAAe,EACf,YAAY,EAEZ,qBAAqB,EAErB,cAAc,EACd,WAAW,EAEZ,MAAM,UAAU,CAAA;AA6BjB,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAMhE,KAAK,aAAa,GAAG,CACnB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,WAAW,EAClB,SAAS,EAAE,MAAM,EACjB,cAAc,EAAE,qBAAqB,EACrC,UAAU,EAAE,eAAe,EAC3B,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,EACzC,OAAO,CAAC,EAAE,iBAAiB,EAE3B,WAAW,CAAC,EAAE,MAAM,EACpB,KAAK,CAAC,EAAE,SAAS,KACd,cAAc,CAAA;AAEnB,eAAO,MAAM,UAAU,MAAM,CAAA;AAuB7B,eAAO,MAAM,cAAc,EAAE,aAiqC5B,CAAA;AAsDD,eAAO,MAAM,WAAW,eACV,aAAa,UACjB,MAAM,WACL,MAAM,wBACO,OAAO,KAC5B,cA2BF,CAAA;AA0BD,eAAO,MAAM,cAAc,EAAE,aAQ5B,CAAA"}

package/types/helpers/themeable.d.ts

@@ -1,3 +1,3 @@
 import { StaticConfig, ThemeableProps } from '../types';
-export declare function themeable<Component extends (props: any) => any>(component: Component, staticConfig?: Partial<StaticConfig>): Component extends (props: infer P) => infer R ? (props: Omit<P, "theme" | "themeInverse"> & ThemeableProps) => R : unknown;
+export declare function themeable<ComponentType extends (props: any) => any>(Component: ComponentType, staticConfig?: Partial<StaticConfig>): ComponentType extends (props: infer P) => infer R ? (props: Omit<P, "theme" | "themeInverse"> & ThemeableProps) => R : unknown;
 //# sourceMappingURL=themeable.d.ts.map

package/types/helpers/themeable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themeable.d.ts","sourceRoot":"","sources":["../../src/helpers/themeable.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAGvD,wBAAgB,SAAS,CAAC,SAAS,SAAS,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,EAC7D,SAAS,EAAE,SAAS,EACpB,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,8HAmCrC"}
+{"version":3,"file":"themeable.d.ts","sourceRoot":"","sources":["../../src/helpers/themeable.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAGvD,wBAAgB,SAAS,CAAC,aAAa,SAAS,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,EACjE,SAAS,EAAE,aAAa,EACxB,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,kIAgCrC"}

package/types/hooks/useMedia.d.ts

@@ -1,9 +1,9 @@
-import type { ComponentContextI, MediaQueries, MediaQueryKey, MediaQueryObject, MediaQueryState, TamaguiInternalConfig, UseMediaState } from '../types';
+import type { ComponentContextI, IsMediaType, MediaQueries, MediaQueryKey, MediaQueryObject, MediaQueryState, TamaguiInternalConfig, UseMediaState } from '../types';
 export declare let mediaState: MediaQueryState;
 export declare const mediaQueryConfig: MediaQueries;
 export declare const getMedia: () => MediaQueryState;
 export declare const mediaKeys: Set<string>;
-export declare const isMediaKey: (key: string) => boolean;
+export declare const isMediaKey: (key: string) => IsMediaType;
 export declare const getMediaKeyImportance: (key: string) => number;
 export declare const configureMedia: (config: TamaguiInternalConfig) => void;
 export declare function setupMediaListeners(): void;

package/types/hooks/useMedia.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useMedia.d.ts","sourceRoot":"","sources":["../../src/hooks/useMedia.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,qBAAqB,EACrB,aAAa,EACd,MAAM,UAAU,CAAA;AAIjB,eAAO,IAAI,UAAU,EAAE,eAmBN,CAAA;AAEjB,eAAO,MAAM,gBAAgB,EAAE,YAAiB,CAAA;AAEhD,eAAO,MAAM,QAAQ,uBAAmB,CAAA;AAExC,eAAO,MAAM,SAAS,aAAoB,CAAA;AAE1C,eAAO,MAAM,UAAU,QAAS,MAAM,YAKL,CAAA;AAUjC,eAAO,MAAM,qBAAqB,QAAS,MAAM,WAchD,CAAA;AAMD,eAAO,MAAM,cAAc,WAAY,qBAAqB,SAiB3D,CAAA;AAaD,wBAAgB,mBAAmB,SA+BlC;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,qBAAqB,QAM9D;AAsBD,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,OAAO,CAAA;IAChB,IAAI,EAAE,aAAa,EAAE,CAAA;CACtB,CAAA;AAID,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,6BAEhE;AAYD,wBAAgB,QAAQ,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,gBAAgB,CAAC,EAAE,iBAAiB,GAAG,aAAa,CAgDvF;AAED,eAAO,MAAM,iCAAiC,aAClC,MAAM,OACX,MAAM,mBACM,OAAO,MAAM,EAAE,MAAM,CAAC,eAC1B,OAAO,kBAQrB,CAAA;AAED,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACzB,QAAQ,EAAE,MAAM,EAChB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,GAAG,EACV,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACvC,WAAW,EAAE,OAAO,EACpB,cAAc,CAAC,EAAE,MAAM,WAiBxB;AASD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,gBAAgB,EAAE,GAAG,CAAC,EAAE,MAAM,UAwBjF;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,UAE1C;AAED,wBAAgB,aAAa,CAC3B,GAAG,EAAE,MAAM,EACX,UAAU,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,WAY9C"}
+{"version":3,"file":"useMedia.d.ts","sourceRoot":"","sources":["../../src/hooks/useMedia.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EACV,iBAAiB,EACjB,WAAW,EACX,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,qBAAqB,EACrB,aAAa,EACd,MAAM,UAAU,CAAA;AAGjB,eAAO,IAAI,UAAU,EAAE,eAmBN,CAAA;AAEjB,eAAO,MAAM,gBAAgB,EAAE,YAAiB,CAAA;AAEhD,eAAO,MAAM,QAAQ,uBAAmB,CAAA;AAExC,eAAO,MAAM,SAAS,aAAoB,CAAA;AAE1C,eAAO,MAAM,UAAU,QAAS,MAAM,KAAG,WAQxC,CAAA;AAUD,eAAO,MAAM,qBAAqB,QAAS,MAAM,WAchD,CAAA;AAMD,eAAO,MAAM,cAAc,WAAY,qBAAqB,SAiB3D,CAAA;AAaD,wBAAgB,mBAAmB,SA+BlC;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,qBAAqB,QAM9D;AAsBD,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,OAAO,CAAA;IAChB,IAAI,EAAE,aAAa,EAAE,CAAA;CACtB,CAAA;AAID,wBAAgB,oBAAoB,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,6BAEhE;AAYD,wBAAgB,QAAQ,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,gBAAgB,CAAC,EAAE,iBAAiB,GAAG,aAAa,CAgDvF;AAED,eAAO,MAAM,iCAAiC,aAClC,MAAM,OACX,MAAM,mBACM,OAAO,MAAM,EAAE,MAAM,CAAC,eAC1B,OAAO,kBAQrB,CAAA;AAED,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACzB,QAAQ,EAAE,MAAM,EAChB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,GAAG,EACV,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACvC,WAAW,EAAE,OAAO,EACpB,cAAc,CAAC,EAAE,MAAM,WAiBxB;AASD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,gBAAgB,EAAE,GAAG,CAAC,EAAE,MAAM,UAwBjF;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,UAE1C;AAED,wBAAgB,aAAa,CAC3B,GAAG,EAAE,MAAM,EACX,UAAU,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,WAY9C"}

package/types/hooks/useProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useProps.d.ts","sourceRoot":"","sources":["../../src/hooks/useProps.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAKpF,KAAK,eAAe,GAAG,IAAI,CACzB,eAAe,EACf,UAAU,GAAG,aAAa,GAAG,cAAc,GAAG,eAAe,CAC9D,GAAG;IACF,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,YAAY,CAAC,EAAE;QAAE,YAAY,EAAE,YAAY,CAAA;KAAE,CAAA;CAC9C,CAAA;AAED,KAAK,cAAc,CAAC,CAAC,IAAI;KAEtB,GAAG,IAAI,MAAM,CAAC,SAAS,IAAI,MAAM,EAAE,GAAG,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC;CACjE,CAAA;AAED;;;;;KAKK;AACL,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EACvC,KAAK,EAAE,CAAC,EACR,IAAI,CAAC,EAAE,eAAe,GACrB,cAAc,CAAC,CAAC,CAAC,CAWnB;AAED;;;;;KAKK;AACL,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EACvC,KAAK,EAAE,CAAC,EACR,IAAI,CAAC,EAAE,eAAe,GACrB,cAAc,CAAC,CAAC,CAAC,CAEnB;AAED;;;;;KAKK;AACL,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,EAC/C,KAAK,EAAE,CAAC,EACR,IAAI,CAAC,EAAE,eAAe,GACrB,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,aAAa,CAAC,CAwBpE"}
+{"version":3,"file":"useProps.d.ts","sourceRoot":"","sources":["../../src/hooks/useProps.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAKpF,KAAK,eAAe,GAAG,IAAI,CACzB,eAAe,EACf,UAAU,GAAG,aAAa,GAAG,cAAc,GAAG,eAAe,CAC9D,GAAG;IACF,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,YAAY,CAAC,EAAE;QAAE,YAAY,EAAE,YAAY,CAAA;KAAE,CAAA;CAC9C,CAAA;AAED,KAAK,cAAc,CAAC,CAAC,IAAI;KAEtB,GAAG,IAAI,MAAM,CAAC,SAAS,IAAI,MAAM,EAAE,GAAG,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC;CACjE,CAAA;AAED;;;;;KAKK;AACL,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EACvC,KAAK,EAAE,CAAC,EACR,IAAI,CAAC,EAAE,eAAe,GACrB,cAAc,CAAC,CAAC,CAAC,CAWnB;AAED;;;;;KAKK;AACL,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EACvC,KAAK,EAAE,CAAC,EACR,IAAI,CAAC,EAAE,eAAe,GACrB,cAAc,CAAC,CAAC,CAAC,CAEnB;AAED;;;;;KAKK;AACL,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,EAC/C,KAAK,EAAE,CAAC,EACR,IAAI,CAAC,EAAE,eAAe,GACrB,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,aAAa,CAAC,CAyBpE"}

package/types/types.d.ts

@@ -9,6 +9,7 @@ import { Role } from './interfaces/Role';
 import type { LanguageContextType } from './views/FontLanguage.types';
 import type { ThemeProviderProps } from './views/ThemeProvider';
 export type { MediaStyleObject, StyleObject } from '@tamagui/helpers';
+export type IsMediaType = boolean | 'platform' | 'theme' | 'group';
 export type SpaceDirection = 'vertical' | 'horizontal' | 'both';
 export type TamaguiElement = HTMLElement | View;
 export type TamaguiTextElement = HTMLElement | RNText;
@@ -104,6 +105,8 @@ export type WebOnlyPressEvents = {
     onMouseLeave?: DivAttributes['onMouseLeave'];
     onMouseDown?: DivAttributes['onMouseDown'];
     onMouseUp?: DivAttributes['onMouseUp'];
+    onFocus?: DivAttributes['onFocus'];
+    onBlur?: DivAttributes['onBlur'];
 };
 /**
  * For static / studio
@@ -746,7 +749,11 @@ export interface ThemeableProps {
     componentName?: string;
     debug?: DebugProp;
 }
-export type Styleable<Props, Ref> = <CustomProps extends Object, X extends FunctionComponent<any> = FunctionComponent<ThemeableProps & Props & CustomProps>>(a: X, staticConfig?: Partial<StaticConfig>) => ReactComponentWithRef<CustomProps & Omit<Props & ThemeableProps, keyof CustomProps>, Ref> & {
+export type StyleableOptions = {
+    disableTheme?: boolean;
+    staticConfig?: Partial<StaticConfig>;
+};
+export type Styleable<Props, Ref> = <CustomProps extends Object, X extends FunctionComponent<any> = FunctionComponent<ThemeableProps & Props & CustomProps>>(a: X, options?: StyleableOptions) => ReactComponentWithRef<CustomProps & Omit<Props & ThemeableProps, keyof CustomProps>, Ref> & {
     staticConfig: StaticConfig;
     styleable: Styleable<Props, Ref>;
 };