@tamagui/web 2.0.0-rc.8 → 2.0.0

package/src/helpers/platformResolveValue.native.ts

@@ -0,0 +1,72 @@
+import type { GetStyleState, SplitStyleProps } from '../types'
+import { getTokenForKey } from './getTokenForKey'
+import { parseNativeStyle } from './parseNativeStyle'
+
+const tokenPattern = /(\$[\w.-]+)/g
+
+// keys that need native object parsing (DynamicColorIOS support)
+const nativeParseKeys: Record<string, boolean> = {
+  backgroundImage: true,
+  boxShadow: true,
+  textShadow: true,
+}
+
+function replaceTokens(
+  value: string,
+  styleProps: SplitStyleProps,
+  styleState: Partial<GetStyleState>
+): string {
+  return value.replace(tokenPattern, (t) => {
+    let r = getTokenForKey('size', t, styleProps, styleState)
+    if (r == null) {
+      r = getTokenForKey('color', t, styleProps, styleState)
+    }
+    return r != null ? String(r) : t
+  })
+}
+
+/**
+ * native: resolves embedded $tokens, with DynamicColorIOS placeholder
+ * support for boxShadow/textShadow/backgroundImage.
+ */
+export function platformResolveValue(
+  key: string,
+  value: string,
+  styleProps: SplitStyleProps,
+  styleState: Partial<GetStyleState>
+): any {
+  if (!nativeParseKeys[key]) {
+    return replaceTokens(value, styleProps, styleState)
+  }
+
+  // for backgroundImage (gradients), force 'web' resolution to avoid DynamicColorIOS
+  // gradients don't support dynamic color updates - RN resolves colors once at render time
+  // so we need plain values and must let the component re-render on scheme changes
+  const effectiveStyleProps =
+    key === 'backgroundImage'
+      ? { ...styleProps, resolveValues: 'web' as const }
+      : styleProps
+
+  // preserve DynamicColorIOS objects through parsing (for boxShadow/textShadow)
+  const tokenMap = new Map<string, any>()
+  let placeholderIdx = 0
+  const withPlaceholders = value.replace(tokenPattern, (t) => {
+    let r = getTokenForKey('size', t, effectiveStyleProps, styleState)
+    if (r == null) {
+      r = getTokenForKey('color', t, effectiveStyleProps, styleState)
+    }
+    if (r == null) return t
+    if (typeof r !== 'string' && typeof r !== 'number') {
+      const placeholder = `__tk${placeholderIdx++}__`
+      tokenMap.set(placeholder, r)
+      return placeholder
+    }
+    return String(r)
+  })
+
+  const parsed = parseNativeStyle(key, withPlaceholders, tokenMap)
+  if (parsed) return parsed
+
+  // fallback to plain string resolution
+  return replaceTokens(value, styleProps, styleState)
+}

package/src/helpers/platformResolveValue.ts

@@ -0,0 +1,22 @@
+import type { GetStyleState, SplitStyleProps } from '../types'
+import { getTokenForKey } from './getTokenForKey'
+
+const tokenPattern = /(\$[\w.-]+)/g
+
+/**
+ * web: resolves embedded $tokens in compound CSS strings via simple regex replacement.
+ */
+export function platformResolveValue(
+  _key: string,
+  value: string,
+  styleProps: SplitStyleProps,
+  styleState: Partial<GetStyleState>
+): string {
+  return value.replace(tokenPattern, (t) => {
+    let r = getTokenForKey('size', t, styleProps, styleState)
+    if (r == null) {
+      r = getTokenForKey('color', t, styleProps, styleState)
+    }
+    return r != null ? String(r) : t
+  })
+}

package/src/helpers/propMapper.ts

@@ -1,11 +1,8 @@
 import { isAndroid } from '@tamagui/constants'
-import { tokenCategories } from '@tamagui/helpers'
-import { getConfig } from '../config'
 import { getVariableValue, isVariable } from '../createVariable'
 import type {
   GetStyleState,
   PropMapper,
-  ResolveVariableAs,
   SplitStyleProps,
   StyleResolver,
   TamaguiInternalConfig,
@@ -13,21 +10,30 @@ import type {
   VariantSpreadFunction,
 } from '../types'
 import { expandStyle } from './expandStyle'
+import {
+  getLastFontFamilyToken,
+  getTokenForKey,
+  resolveVariableValue,
+  setLastFontFamilyToken,
+} from './getTokenForKey'
 import { getFontsForLanguage, getVariantExtras } from './getVariantExtras'
 import { isObj } from './isObj'
 import { normalizeStyle } from './normalizeStyle'
 import { parseNativeStyle } from './parseNativeStyle'
 import { pseudoDescriptors } from './pseudoDescriptors'
+import { resolveCompoundTokens } from './resolveCompoundTokens'
 import { isRemValue, resolveRem } from './resolveRem'
-// import { resolveSafeAreaValue } from './resolveSafeArea'
 import { skipProps } from './skipProps'
+import { styleOriginalValues } from './styleOriginalValues'
+
+export { getTokenForKey } from './getTokenForKey'
 
 export const propMapper: PropMapper = (key, value, styleState, disabled, map) => {
   if (disabled) {
     return map(key, value)
   }
 
-  lastFontFamilyToken = null
+  setLastFontFamilyToken(null)
 
   if (!(process.env.TAMAGUI_TARGET === 'native' && isAndroid)) {
     // this shouldnt be necessary and handled in the outer loop
@@ -41,7 +47,9 @@ export const propMapper: PropMapper = (key, value, styleState, disabled, map) =>
     if (variants && key in variants) {
       const variantValue = resolveVariants(key, value, styleProps, styleState, '')
       if (variantValue) {
-        variantValue.forEach(([key, value]) => map(key, value))
+        variantValue.forEach(([key, value, originalValue]) => {
+          map(key, value, originalValue)
+        })
         return
       }
     }
@@ -58,62 +66,13 @@ export const propMapper: PropMapper = (key, value, styleState, disabled, map) =>
   const originalValue = value
 
   if (value != null) {
-    if (typeof value === 'string' && value[0] === '$') {
-      value = getTokenForKey(key, value, styleProps, styleState)
-    } else if (
-      (key === 'boxShadow' ||
-        key === 'textShadow' ||
-        key === 'filter' ||
-        key === 'backgroundImage' ||
-        key === 'border' ||
-        key === 'outline') &&
-      typeof value === 'string' &&
-      value.includes('$')
-    ) {
-      // on native, backgroundImage/boxShadow/textShadow get parsed to RN objects
-      // so we resolve tokens keeping DynamicColorIOS objects intact via a token map
-      if (
-        process.env.TAMAGUI_TARGET === 'native' &&
-        (key === 'backgroundImage' || key === 'boxShadow' || key === 'textShadow')
-      ) {
-        const tokenMap = new Map<string, any>()
-        let placeholderIdx = 0
-        const withPlaceholders = value.replace(/(\$[\w.-]+)/g, (t) => {
-          let r = getTokenForKey('size', t, styleProps, styleState)
-          if (r == null) {
-            r = getTokenForKey('color', t, styleProps, styleState)
-          }
-          if (r == null) return t
-          // if resolved to a non-string (object like DynamicColorIOS), use placeholder
-          if (typeof r !== 'string' && typeof r !== 'number') {
-            const placeholder = `__tk${placeholderIdx++}__`
-            tokenMap.set(placeholder, r)
-            return placeholder
-          }
-          return String(r)
-        })
-        const parsed = parseNativeStyle(key, withPlaceholders, tokenMap)
-        if (parsed) {
-          value = parsed
-        } else {
-          // fallback: resolve all tokens to plain string values
-          value = value.replace(/(\$[\w.-]+)/g, (t) => {
-            let r = getTokenForKey('size', t, styleProps, styleState)
-            if (r == null) {
-              r = getTokenForKey('color', t, styleProps, styleState)
-            }
-            return r != null ? String(r) : t
-          })
-        }
+    if (typeof value === 'string') {
+      if (value[0] === '$') {
+        value = getTokenForKey(key, value, styleProps, styleState)
       } else {
-        // web + filter + border: resolve tokens to string values
-        value = value.replace(/(\$[\w.-]+)/g, (t) => {
-          let r = getTokenForKey('size', t, styleProps, styleState)
-          if (r == null) {
-            r = getTokenForKey('color', t, styleProps, styleState)
-          }
-          return r != null ? String(r) : t
-        })
+        const resolved = resolveCompoundTokens(key, value, styleProps, styleState)
+        value =
+          resolved !== value ? resolved : isRemValue(value) ? resolveRem(value) : value
       }
     } else if (isVariable(value)) {
       value = resolveVariableValue(key, value, styleProps.resolveValues)
@@ -144,17 +103,20 @@ export const propMapper: PropMapper = (key, value, styleState, disabled, map) =>
   }
 
   if (value != null) {
-    if (key === 'fontFamily' && lastFontFamilyToken) {
-      styleState.fontFamily = lastFontFamilyToken
+    const fontToken = getLastFontFamilyToken()
+    if (key === 'fontFamily' && fontToken) {
+      styleState.fontFamily = fontToken
     }
 
-    const expanded = styleProps.noExpand ? null : expandStyle(key, value)
+    const expanded = styleProps.noExpand
+      ? null
+      : expandStyle(key, value, conf.settings.styleCompat || 'web')
 
     if (expanded) {
       const max = expanded.length
       for (let i = 0; i < max; i++) {
-        const [nkey, nvalue] = expanded[i]
-        map(nkey, nvalue, originalValue)
+        const [nkey, nvalue, noriginalValue] = expanded[i]
+        map(nkey, nvalue, noriginalValue ?? originalValue)
       }
     } else {
       map(key, value, originalValue)
@@ -173,7 +135,7 @@ const resolveVariants: StyleResolver = (
   const { variants } = staticConfig
   if (!variants) return
 
-  let variantValue = getVariantDefinition(variants[key], value, conf)
+  let variantValue = getVariantDefinition(variants[key], value, conf, styleState)
 
   if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
     console.groupCollapsed(`♦️♦️♦️ resolve variant ${key}`)
@@ -248,13 +210,14 @@ const resolveVariants: StyleResolver = (
       console.info(`   expanding styles from `, variantValue, `to`, expanded)
     }
     const next = Object.entries(expanded)
+    const originalValues = styleOriginalValues.get(expanded)
 
     // store any changed font family (only support variables for now)
     if (fontFamilyResult && fontFamilyResult[0] === '$') {
-      lastFontFamilyToken = getVariableValue(fontFamilyResult)
+      setLastFontFamilyToken(getVariableValue(fontFamilyResult))
     }
 
-    return next
+    return next.map(([key, value]) => [key, value, originalValues?.[key]])
   }
 }
 
@@ -292,6 +255,7 @@ const resolveTokensAndVariants: StyleResolver<object> = (
   const { conf, staticConfig, debug, theme } = styleState
   const { variants } = staticConfig
   const res = {}
+  let originalValues: Record<string, any> | undefined
 
   if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
     console.info(`   - resolveTokensAndVariants`, key, value)
@@ -305,6 +269,9 @@ const resolveTokensAndVariants: StyleResolver<object> = (
       continue
     }
 
+    originalValues ||= {}
+    originalValues[subKey] = val
+
     // Track context overrides for any key that's in context props (issues #3670, #3676)
     // Store the ORIGINAL token value (like '$8') before resolution so that
     // children's functional variants can look up token values
@@ -328,20 +295,30 @@ const resolveTokensAndVariants: StyleResolver<object> = (
         // eg: { variants: { flex: { true: { flex: 2 } } } }
         if (parentVariantKey && parentVariantKey === key) {
           res[subKey] =
-            // SYNC WITH *1
             val[0] === '$' ? getTokenForKey(subKey, val, styleProps, styleState) : val
         } else {
           const variantOut = resolveVariants(subKey, val, styleProps, styleState, key)
 
           // apply, merging sub-styles
           if (variantOut) {
-            for (const [key, val] of variantOut) {
+            for (const [key, val, originalVal] of variantOut) {
               if (val == null) continue
               if (key in pseudoDescriptors) {
                 res[key] ??= {}
                 Object.assign(res[key], val)
+                const subOriginalValues = styleOriginalValues.get(val)
+                if (subOriginalValues) {
+                  styleOriginalValues.set(res[key], {
+                    ...styleOriginalValues.get(res[key]),
+                    ...subOriginalValues,
+                  })
+                }
               } else {
                 res[key] = val
+                if (originalVal !== undefined) {
+                  originalValues ||= {}
+                  originalValues[key] = originalVal
+                }
               }
             }
           }
@@ -360,15 +337,12 @@ const resolveTokensAndVariants: StyleResolver<object> = (
     }
 
     if (typeof val === 'string') {
-      // SYNC WITH *1
       const fVal =
         val[0] === '$'
           ? getTokenForKey(subKey, val, styleProps, styleState)
-          : isRemValue(val)
-            ? resolveRem(val)
-            : val
+          : resolveCompoundTokens(subKey, val, styleProps, styleState)
 
-      res[subKey] = fVal
+      res[subKey] = fVal === val && isRemValue(val) ? resolveRem(val) : fVal
       continue
     }
 
@@ -382,6 +356,13 @@ const resolveTokensAndVariants: StyleResolver<object> = (
       // sub-objects: media queries, pseudos, shadowOffset
       res[subKey] ??= {}
       Object.assign(res[subKey], subObject)
+      const subOriginalValues = styleOriginalValues.get(subObject)
+      if (subOriginalValues) {
+        styleOriginalValues.set(res[subKey], {
+          ...styleOriginalValues.get(res[subKey]),
+          ...subOriginalValues,
+        })
+      }
     } else {
       // nullish values cant be tokens, need no extra parsing
       res[subKey] = val
@@ -401,6 +382,10 @@ const resolveTokensAndVariants: StyleResolver<object> = (
     }
   }
 
+  if (originalValues) {
+    styleOriginalValues.set(res, originalValues)
+  }
+
   return res
 }
 
@@ -410,7 +395,12 @@ const tokenCats = ['size', 'color', 'radius', 'space', 'zIndex'].map((name) => (
 }))
 
 // goes through specificity finding best matching variant function
-function getVariantDefinition(variant: any, value: any, conf: TamaguiInternalConfig) {
+function getVariantDefinition(
+  variant: any,
+  value: any,
+  conf: TamaguiInternalConfig,
+  { theme }: Partial<GetStyleState>
+) {
   if (!variant) return
   if (typeof variant === 'function') {
     return variant
@@ -422,8 +412,18 @@ function getVariantDefinition(variant: any, value: any, conf: TamaguiInternalCon
   if (value != null) {
     const { tokensParsed } = conf
     for (const { name, spreadName } of tokenCats) {
-      if (spreadName in variant && name in tokensParsed && value in tokensParsed[name]) {
-        return variant[spreadName]
+      if (spreadName in variant) {
+        // check tokens first
+        if (name in tokensParsed && value in tokensParsed[name]) {
+          return variant[spreadName]
+        }
+        // or check theme (only color lives in theme, others are in tokens)
+        if (name === 'color' && theme && typeof value === 'string' && value[0] === '$') {
+          const themeKey = value.slice(1)
+          if (themeKey in theme) {
+            return variant[spreadName]
+          }
+        }
       }
     }
     const fontSizeVariant = variant['...fontSize']
@@ -434,186 +434,3 @@ function getVariantDefinition(variant: any, value: any, conf: TamaguiInternalCon
   // fallback to catch all | size
   return variant[`:${typeof value}`] || variant['...']
 }
-
-const fontShorthand = {
-  fontSize: 'size',
-  fontWeight: 'weight',
-}
-
-let lastFontFamilyToken: any = null
-let didLogMissingToken = false
-
-export const getTokenForKey = (
-  key: string,
-  value: string,
-  styleProps: SplitStyleProps,
-  styleState: Partial<GetStyleState>
-) => {
-  let resolveAs = styleProps.resolveValues || 'none'
-
-  if (resolveAs === 'none') {
-    return value
-  }
-
-  // handle safe area tokens: $safeAreaTop, $safeAreaBottom, $safeAreaLeft, $safeAreaRight
-  // const safeAreaValue = resolveSafeAreaValue(value)
-  // if (safeAreaValue !== undefined) {
-  //   return safeAreaValue
-  // }
-
-  const { theme, conf = getConfig(), context, fontFamily, staticConfig } = styleState
-
-  const themeValue = theme ? theme[value] || theme[value.slice(1)] : undefined
-
-  const tokensParsed = conf.tokensParsed
-  let valOrVar: any
-  let hasSet = false
-
-  const customTokenAccept = staticConfig?.accept?.[key]
-  if (customTokenAccept) {
-    const val = themeValue ?? tokensParsed[customTokenAccept][value]
-    if (val != null) {
-      resolveAs = 'value' // always resolve custom tokens as values
-      valOrVar = val
-      hasSet = true
-    }
-  }
-
-  if (themeValue) {
-    if (resolveAs === 'except-theme') {
-      return value
-    }
-
-    valOrVar = themeValue
-    if (process.env.NODE_ENV === 'development' && styleState.debug === 'verbose') {
-      globalThis.tamaguiAvoidTracking = true
-      console.info(
-        ` - resolving ${key} to theme value ${value} resolveAs ${resolveAs}`,
-        valOrVar
-      )
-      globalThis.tamaguiAvoidTracking = false
-    }
-    hasSet = true
-  } else {
-    if (value in conf.specificTokens) {
-      hasSet = true
-      valOrVar = conf.specificTokens[value]
-    } else {
-      switch (key) {
-        case 'fontFamily': {
-          const fontsParsed = context?.language
-            ? getFontsForLanguage(conf.fontsParsed, context.language)
-            : conf.fontsParsed
-          valOrVar = fontsParsed[value]?.family || value
-          lastFontFamilyToken = value
-          hasSet = true
-          break
-        }
-        case 'fontSize':
-        case 'lineHeight':
-        case 'letterSpacing':
-        case 'fontWeight': {
-          const fam = fontFamily || conf.defaultFontToken
-          if (fam) {
-            const fontsParsed = context?.language
-              ? getFontsForLanguage(conf.fontsParsed, context.language)
-              : conf.fontsParsed
-            const font = fontsParsed[fam] || fontsParsed[conf.defaultFontToken]
-            valOrVar = font?.[fontShorthand[key] || key]?.[value] || value
-            hasSet = true
-          }
-          break
-        }
-      }
-      for (const cat in tokenCategories) {
-        if (key in tokenCategories[cat]) {
-          const res = tokensParsed[cat]?.[value]
-
-          if (res != null) {
-            valOrVar = res
-            hasSet = true
-          } else {
-            if (process.env.NODE_ENV === 'development') {
-              if (process.env.TAMAGUI_DISABLE_MISSING_TOKEN_LOG !== '1') {
-                if (!didLogMissingToken) {
-                  didLogMissingToken = true
-                  console.groupCollapsed(
-                    `[tamagui] Warning: missing token ${key} in category ${cat} - ${value} (open for details)`
-                  )
-                  console.info(
-                    `Note: this could just be due to you not setting all the theme tokens Tamagui expects, which is harmless, but
-                    it also often can be because you have a duplicated Tamagui in your bundle, which can cause tricky bugs.`
-                  )
-                  console.info(
-                    `To see if you have duplicated dependencies, in Chrome DevTools hit CMD+P and type TamaguiProvider.
-                    If you see both a .cjs and a .mjs entry, it's duplicated.`
-                  )
-                  console.info(
-                    `You can debug that issue by opening the .mjs and .cjs files and setting a breakpoint at the top of each.`
-                  )
-                  console.info(
-                    `We only log this warning one time as it's sometimes harmless, to disable this log entirely set process.env.TAMAGUI_DISABLE_MISSING_TOKEN_LOG=1.`
-                  )
-                  console.groupEnd()
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    if (!hasSet) {
-      const spaceVar = tokensParsed.space[value]
-      if (spaceVar != null) {
-        valOrVar = spaceVar
-        hasSet = true
-      }
-    }
-  }
-
-  if (hasSet) {
-    const out = resolveVariableValue(key, valOrVar, resolveAs)
-    if (process.env.NODE_ENV === 'development' && styleState.debug === 'verbose') {
-      globalThis.tamaguiAvoidTracking = true
-      console.info(`resolved`, resolveAs, valOrVar, out)
-      globalThis.tamaguiAvoidTracking = false
-    }
-    return out
-  }
-
-  // they didn't define this token don't return anything, we could warn?
-
-  if (process.env.NODE_ENV === 'development' && styleState.debug === 'verbose') {
-    console.warn(`Warning: no token found for ${key}, omitting`)
-  }
-}
-
-function resolveVariableValue(
-  key: string,
-  valOrVar: Variable | any,
-  resolveValues?: ResolveVariableAs
-) {
-  if (resolveValues === 'none') {
-    return valOrVar
-  }
-  if (isVariable(valOrVar)) {
-    if (resolveValues === 'value') {
-      return valOrVar.val
-    }
-
-    // @ts-expect-error this is fine until we can type better
-    const get = valOrVar?.get
-
-    // shadowColor doesn't support dynamic style
-    if (process.env.TAMAGUI_TARGET !== 'native' || key !== 'shadowColor') {
-      if (typeof get === 'function') {
-        const resolveDynamicFor = resolveValues === 'web' ? 'web' : undefined
-        return get(resolveDynamicFor)
-      }
-    }
-
-    return process.env.TAMAGUI_TARGET === 'native' ? valOrVar.val : valOrVar.variable
-  }
-  return valOrVar
-}

package/src/helpers/pseudoTransitions.ts

@@ -0,0 +1,97 @@
+import type { TransitionProp, PseudoTransitions, TamaguiComponentState } from '../types'
+
+/**
+ * Pseudo state for tracking enter/exit transitions
+ */
+export type PseudoState = {
+  hover?: boolean
+  press?: boolean
+  focus?: boolean
+  // track group pseudo states: { groupName: { hover: boolean, press: boolean } }
+  groups?: Record<string, { hover?: boolean; press?: boolean; focus?: boolean }>
+}
+
+/**
+ * Resolves the effective transition based on pseudo state changes.
+ * When entering a pseudo state (e.g., hover), use that pseudo's transition.
+ * When exiting (returning to base), use the base transition.
+ *
+ * CSS-like semantics:
+ * - Enter hover: Uses hover's transition (fast snap)
+ * - Exit hover: Uses base transition (slow fade)
+ */
+export function resolveEffectivePseudoTransition(
+  prev: PseudoState | undefined,
+  next: TamaguiComponentState,
+  pseudoTransitions: PseudoTransitions | undefined | null,
+  baseTransition: TransitionProp | undefined | null
+): TransitionProp | undefined | null {
+  if (!pseudoTransitions) {
+    return baseTransition
+  }
+
+  // treat undefined prev as all-false so first interaction detects entering
+  const prevState = prev || { hover: false, press: false, focus: false, groups: {} }
+
+  // check which pseudo states are being entered (priority: press > hover > focus)
+  if (next.press && !prevState.press && pseudoTransitions.pressStyle) {
+    return pseudoTransitions.pressStyle
+  }
+  if (next.hover && !prevState.hover && pseudoTransitions.hoverStyle) {
+    return pseudoTransitions.hoverStyle
+  }
+  if (next.focus && !prevState.focus && pseudoTransitions.focusStyle) {
+    return pseudoTransitions.focusStyle
+  }
+
+  // check group pseudo transitions (e.g., $group-scenario4-hover)
+  for (const key in pseudoTransitions) {
+    if (key.startsWith('$group-')) {
+      // parse $group-{name}-{pseudo} format
+      const match = key.match(/^\$group-(.+)-(hover|press|focus)$/)
+      if (!match) continue
+
+      const groupName = match[1]
+      const pseudoType = match[2] as 'hover' | 'press' | 'focus'
+
+      // get current and previous group pseudo state
+      const nextGroupPseudo = next.group?.[groupName]?.pseudo
+      const prevGroupPseudo = prevState.groups?.[groupName]
+
+      // check if entering this group pseudo state
+      if (nextGroupPseudo?.[pseudoType] && !prevGroupPseudo?.[pseudoType]) {
+        return pseudoTransitions[key as `$group-${string}-${'hover' | 'press' | 'focus'}`]
+      }
+    }
+  }
+
+  // exiting uses base transition
+  return baseTransition
+}
+
+/**
+ * Extracts pseudo state from TamaguiComponentState for storage in prevPseudoState
+ */
+export function extractPseudoState(state: TamaguiComponentState): PseudoState {
+  const groups: PseudoState['groups'] = {}
+
+  if (state.group) {
+    for (const groupName in state.group) {
+      const pseudo = state.group[groupName]?.pseudo
+      if (pseudo) {
+        groups[groupName] = {
+          hover: pseudo.hover,
+          press: pseudo.press,
+          focus: pseudo.focus,
+        }
+      }
+    }
+  }
+
+  return {
+    hover: state.hover,
+    press: state.press,
+    focus: state.focus,
+    groups,
+  }
+}