@tamagui/web 2.1.0 → 2.2.0-1781071309197

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

@@ -1 +1 @@
-{"version":3,"names":["stylePropsTextOnly","validStyles","createComponent","ellipsisStyle","maxWidth","overflow","textOverflow","whiteSpace","Text","componentName","acceptsClassName","isText","defaultProps","inlineWhenUnflattened","Set","inlineProps","variants","numberOfLines","WebkitLineClamp","WebkitBoxOrient","display","ellipsis","true"],"sources":["../../../src/views/Text.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,kBAAA,EAAoBC,WAAA,QAAmB;AAEhD,SAASC,eAAA,QAAuB;AAUhC,MAAMC,aAAA,GACJ;EACIC,QACE,QAAU;EAAAC,QACV,UAAU;EAAAC,YACV,YAAc;EAAAC,UACd;AACF;AACA,MACEC,IAAA,GAAAN,eAAe;EAAAO,aACf,QAAe;EACjBC,gBAAA;EAECC,MAAM,MAAO;EAKlBC,YACA,OAAe;EAAAC,qBACG,qBAAAC,GAAA;EAAAC,WACV,qBAAAD,GAAA;EAAAE,QAER;IAGMC,aACE;MACF,GAAAd,aAAA;MAEN,WAAAc,aAAuB,IAAAA,aAAI,IAAK;QAChCb,QAAA,QAAa;QAEbc,eAAU,EAAAD,aAAA;QACRE,eAAgB;QAA4BC,OAC1C,eAAe;QAAAf,QACV;MAAA;IAIG;IACYgB,QACV;MAAAC,IAAA,EAAAnB;IAAiB;EAAA;EACAF,WACjB;IAAS,GAAAA,WACT;IAAU,GAAAD;EAEZ;AACR;AACF,SAEAQ,IAAA","ignoreList":[]}
+{"version":3,"names":["stylePropsTextOnly","validStyles","createComponent","ellipsisStyle","maxWidth","overflow","textOverflow","whiteSpace","Text","componentName","acceptsClassName","isText","defaultProps","inlineWhenUnflattened","Set","inlineProps","variants","numberOfLines","WebkitLineClamp","WebkitBoxOrient","display","ellipsis","true"],"sources":["Text.mjs"],"sourcesContent":["import { stylePropsTextOnly, validStyles } from \"@tamagui/helpers\";\nimport { createComponent } from \"../createComponent\";\n\nconst ellipsisStyle = {\n\tmaxWidth: \"100%\",\n\toverflow: \"hidden\",\n\ttextOverflow: \"ellipsis\",\n\twhiteSpace: \"nowrap\"\n};\nconst Text = createComponent({\n\tcomponentName: \"Text\",\n\tacceptsClassName: true,\n\tisText: true,\n\tdefaultProps: void 0,\n\tinlineWhenUnflattened: /* @__PURE__ */ new Set([\"fontFamily\"]),\n\tinlineProps: /* @__PURE__ */ new Set([\"maxFontSizeMultiplier\"]),\n\tvariants: {\n\t\tnumberOfLines: {\n\t\t\t1: ellipsisStyle,\n\t\t\t\":number\": (numberOfLines) => numberOfLines >= 1 ? {\n\t\t\t\tmaxWidth: \"100%\",\n\t\t\t\tWebkitLineClamp: numberOfLines,\n\t\t\t\tWebkitBoxOrient: \"vertical\",\n\t\t\t\tdisplay: \"-webkit-box\",\n\t\t\t\toverflow: \"hidden\"\n\t\t\t} : null\n\t\t},\n\t\tellipsis: { true: ellipsisStyle }\n\t},\n\tvalidStyles: {\n\t\t...validStyles,\n\t\t...stylePropsTextOnly\n\t}\n});\n\nexport { Text };"],"mappings":"AAAA,SAASA,kBAAkB,EAAEC,WAAW,QAAQ,kBAAkB;AAClE,SAASC,eAAe,QAAQ,wBAAoB;AAEpD,MAAMC,aAAa,GAAG;EACrBC,QAAQ,EAAE,MAAM;EAChBC,QAAQ,EAAE,QAAQ;EAClBC,YAAY,EAAE,UAAU;EACxBC,UAAU,EAAE;AACb,CAAC;AACD,MAAMC,IAAI,GAAGN,eAAe,CAAC;EAC5BO,aAAa,EAAE,MAAM;EACrBC,gBAAgB,EAAE,IAAI;EACtBC,MAAM,EAAE,IAAI;EACZC,YAAY,EAAE,KAAK,CAAC;EACpBC,qBAAqB,EAAE,eAAgB,IAAIC,GAAG,CAAC,CAAC,YAAY,CAAC,CAAC;EAC9DC,WAAW,EAAE,eAAgB,IAAID,GAAG,CAAC,CAAC,uBAAuB,CAAC,CAAC;EAC/DE,QAAQ,EAAE;IACTC,aAAa,EAAE;MACd,CAAC,EAAEd,aAAa;MAChB,SAAS,EAAGc,aAAa,IAAKA,aAAa,IAAI,CAAC,GAAG;QAClDb,QAAQ,EAAE,MAAM;QAChBc,eAAe,EAAED,aAAa;QAC9BE,eAAe,EAAE,UAAU;QAC3BC,OAAO,EAAE,aAAa;QACtBf,QAAQ,EAAE;MACX,CAAC,GAAG;IACL,CAAC;IACDgB,QAAQ,EAAE;MAAEC,IAAI,EAAEnB;IAAc;EACjC,CAAC;EACDF,WAAW,EAAE;IACZ,GAAGA,WAAW;IACd,GAAGD;EACJ;AACD,CAAC,CAAC;AAEF,SAASQ,IAAI","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"names":["stylePropsTextOnly","validStyles","createComponent","Text","componentName","acceptsClassName","isText","defaultProps","suppressHighlighting","inlineWhenUnflattened","Set","inlineProps","variants","ellipsis","true","numberOfLines","lineBreakMode"],"sources":["../../../src/views/Text.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,kBAAA,EAAoBC,WAAA,QAAmB;AAEhD,SAASC,eAAA,QAAuB;AAUhC,IAAAC,IAAM,GAAAD,eACJ;EACIE,aACY;EAAAC,gBACA;EAAAC,MACV;EAAcC,YACd,EAAY;IAAAC,oBAAA;EAAA;EACdC,qBACA,qBAAAC,GAAA;EAAAC,WACE,iBAAe,IAAAD,GAAA;EAAAE,QACf;IAAAC,QAAe;MAAAC,IAAA;QACjBC,aAAA;QAECC,aAAa;MAKlB;IACA;EAAA;EAAef,WACf;IACA,GAAAA,WAAQ;IAER,GAAAD;EAGM;AACwB,EACxB;AAAA,SAENG,IAAA","ignoreList":[]}
+{"version":3,"names":["stylePropsTextOnly","validStyles","createComponent","Text","componentName","acceptsClassName","isText","defaultProps","suppressHighlighting","inlineWhenUnflattened","Set","inlineProps","variants","ellipsis","true","numberOfLines","lineBreakMode"],"sources":["Text.native.js"],"sourcesContent":["import { stylePropsTextOnly, validStyles } from \"@tamagui/helpers\";\nimport { createComponent } from \"../createComponent\";\n\nvar Text = createComponent({\n\tcomponentName: \"Text\",\n\tacceptsClassName: true,\n\tisText: true,\n\tdefaultProps: { suppressHighlighting: true },\n\tinlineWhenUnflattened: /* @__PURE__ */ new Set([\"fontFamily\"]),\n\tinlineProps: /* @__PURE__ */ new Set([\"maxFontSizeMultiplier\"]),\n\tvariants: { ellipsis: { true: {\n\t\tnumberOfLines: 1,\n\t\tlineBreakMode: \"clip\"\n\t} } },\n\tvalidStyles: {\n\t\t...validStyles,\n\t\t...stylePropsTextOnly\n\t}\n});\n\nexport { Text };"],"mappings":"AAAA,SAASA,kBAAkB,EAAEC,WAAW,QAAQ,kBAAkB;AAClE,SAASC,eAAe,QAAQ,8BAAoB;AAEpD,IAAIC,IAAI,GAAGD,eAAe,CAAC;EAC1BE,aAAa,EAAE,MAAM;EACrBC,gBAAgB,EAAE,IAAI;EACtBC,MAAM,EAAE,IAAI;EACZC,YAAY,EAAE;IAAEC,oBAAoB,EAAE;EAAK,CAAC;EAC5CC,qBAAqB,EAAE,eAAgB,IAAIC,GAAG,CAAC,CAAC,YAAY,CAAC,CAAC;EAC9DC,WAAW,EAAE,eAAgB,IAAID,GAAG,CAAC,CAAC,uBAAuB,CAAC,CAAC;EAC/DE,QAAQ,EAAE;IAAEC,QAAQ,EAAE;MAAEC,IAAI,EAAE;QAC7BC,aAAa,EAAE,CAAC;QAChBC,aAAa,EAAE;MAChB;IAAE;EAAE,CAAC;EACLf,WAAW,EAAE;IACZ,GAAGA,WAAW;IACd,GAAGD;EACJ;AACD,CAAC,CAAC;AAEF,SAASG,IAAI","ignoreList":[]}

package/dist/esm/views/ThemeProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"names":["useIsomorphicLayoutEffect","useId","getSetting","THEME_CLASSNAME_PREFIX","Theme","jsx","ThemeProvider","props","addThemeClassName","cn","defaultTheme","target","document","documentElement","body","classList","add","remove","forceClassName","className","name","_isRoot","children"],"sources":["../../../src/views/ThemeProvider.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,yBAAA,QAAiC;AAC1C,SAASC,KAAA,QAAa;AACtB,SAASC,UAAA,QAAkB;AAC3B,SAASC,sBAAA,QAA8B;AAEvC,SAASC,KAAA,QAAa;AA6BlB,SAAAC,GAAA;AA3BG,MAAMC,aAAA,GAAiBC,KAAA,IAA8B;EAC1D;;EAEA,MAAAC,iBAAM,GAAAN,UAAoB,oBAAW,CAAmB;EAGxDF,yBAAgB;IACd,IAAAQ,iBAAA,UAA0B;IACxB,MAAAC,EAAI,MAAAN,sBAA6B,GAAAI,KAAA,CAAAG,YAAA;IACjC,MAAAC,MAAM,GAAKT,UAAG,oBAAyB,MAAM,SAAAU,QAAY,CAAAC,eAAA,GAAAD,QAAA,CAAAE,IAAA;IACzDH,MAAA,CAAAI,SAAM,CAAAC,GACJ,CAAAP,EAAA;IAGF,aAAO;MACPE,MAAA,CAAAI,SAAa,CAAAE,MAAA,CAAAR,EAAA;IACX;EAA0B,IAAAF,KAC5B,CAAAG,YAAA,EAAAF,iBAAA;EAAA,MACCU,cAAO,GAAAV,iBAAc,KAAkB;EAAA,OAC5C,eAAAH,GAAA,CAAAD,KAAA;IAKAe,SAAM,EAAAZ,KAAA,CAAAY,SAAiB;IAEvBC,IAAA,EAAAb,KACE,CAAAG,YAAA;IAAAQ,cAAC;IAAAG,OAAA,EAAApB,KAAA;IAAAqB,QACC,EAAAf,KAAW,CAAAe;EAAM;AACL;AACZ,SAEAhB,aAAS","ignoreList":[]}
+{"version":3,"names":["useIsomorphicLayoutEffect","useId","getSetting","THEME_CLASSNAME_PREFIX","Theme","jsx","ThemeProvider","props","addThemeClassName","cn","defaultTheme","target","document","documentElement","body","classList","add","remove","forceClassName","className","name","_isRoot","children"],"sources":["ThemeProvider.mjs"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@tamagui/constants\";\nimport { useId } from \"react\";\nimport { getSetting } from \"../config\";\nimport { THEME_CLASSNAME_PREFIX } from \"../constants/constants\";\nimport { Theme } from \"./Theme\";\nimport { jsx } from \"react/jsx-runtime\";\n\nconst ThemeProvider = (props) => {\n\t\"use no memo\";\n\tconst addThemeClassName = getSetting(\"addThemeClassName\");\n\tuseIsomorphicLayoutEffect(() => {\n\t\tif (addThemeClassName === false) return;\n\t\tconst cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`;\n\t\tconst target = getSetting(\"addThemeClassName\") === \"html\" ? document.documentElement : document.body;\n\t\ttarget.classList.add(cn);\n\t\treturn () => {\n\t\t\ttarget.classList.remove(cn);\n\t\t};\n\t}, [props.defaultTheme, addThemeClassName]);\n\tconst forceClassName = addThemeClassName === void 0;\n\treturn /* @__PURE__ */ jsx(Theme, {\n\t\tclassName: props.className,\n\t\tname: props.defaultTheme,\n\t\tforceClassName,\n\t\t_isRoot: useId,\n\t\tchildren: props.children\n\t});\n};\n\nexport { ThemeProvider };"],"mappings":"AAAA,SAASA,yBAAyB,QAAQ,oBAAoB;AAC9D,SAASC,KAAK,QAAQ,OAAO;AAC7B,SAASC,UAAU,QAAQ,eAAW;AACtC,SAASC,sBAAsB,QAAQ,4BAAwB;AAC/D,SAASC,KAAK,QAAQ,aAAS;AAC/B,SAASC,GAAG,QAAQ,mBAAmB;AAEvC,MAAMC,aAAa,GAAIC,KAAK,IAAK;EAChC,aAAa;;EACb,MAAMC,iBAAiB,GAAGN,UAAU,CAAC,mBAAmB,CAAC;EACzDF,yBAAyB,CAAC,MAAM;IAC/B,IAAIQ,iBAAiB,KAAK,KAAK,EAAE;IACjC,MAAMC,EAAE,GAAG,GAAGN,sBAAsB,GAAGI,KAAK,CAACG,YAAY,EAAE;IAC3D,MAAMC,MAAM,GAAGT,UAAU,CAAC,mBAAmB,CAAC,KAAK,MAAM,GAAGU,QAAQ,CAACC,eAAe,GAAGD,QAAQ,CAACE,IAAI;IACpGH,MAAM,CAACI,SAAS,CAACC,GAAG,CAACP,EAAE,CAAC;IACxB,OAAO,MAAM;MACZE,MAAM,CAACI,SAAS,CAACE,MAAM,CAACR,EAAE,CAAC;IAC5B,CAAC;EACF,CAAC,EAAE,CAACF,KAAK,CAACG,YAAY,EAAEF,iBAAiB,CAAC,CAAC;EAC3C,MAAMU,cAAc,GAAGV,iBAAiB,KAAK,KAAK,CAAC;EACnD,OAAO,eAAgBH,GAAG,CAACD,KAAK,EAAE;IACjCe,SAAS,EAAEZ,KAAK,CAACY,SAAS;IAC1BC,IAAI,EAAEb,KAAK,CAACG,YAAY;IACxBQ,cAAc;IACdG,OAAO,EAAEpB,KAAK;IACdqB,QAAQ,EAAEf,KAAK,CAACe;EACjB,CAAC,CAAC;AACH,CAAC;AAED,SAAShB,aAAa","ignoreList":[]}

package/dist/esm/views/ThemeProvider.native.js

@@ -1,14 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useIsomorphicLayoutEffect } from "@tamagui/constants";
+import { jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import { getSetting } from "../config.native.js";
-import { THEME_CLASSNAME_PREFIX } from "../constants/constants.native.js";
 import { Theme } from "./Theme.native.js";
 var ThemeProvider = function (props) {
   "use no memo";
 
   var forceClassName = getSetting("addThemeClassName") === void 0;
-  return /* @__PURE__ */_jsx(Theme, {
+  return /* @__PURE__ */jsx(Theme, {
     className: props.className,
     name: props.defaultTheme,
     forceClassName,

package/dist/esm/views/ThemeProvider.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["jsx","_jsx","useIsomorphicLayoutEffect","useId","getSetting","THEME_CLASSNAME_PREFIX","Theme","ThemeProvider","props","forceClassName","className","name","defaultTheme","_isRoot","children"],"sources":["../../../src/views/ThemeProvider.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,2BAAiC;AAC1C,SAASC,yBAAa;AACtB,SAASC,KAAA,eAAkB;AAC3B,SAASC,UAAA;AAET,SAASC,sBAAa;AA6BlB,SAAAC,KAAA;AA3BG,IAAAC,aAAM,YAAAA,CAAiBC,KAA8B;EAC1D;;EAEA,IAAAC,cAAM,GAAAL,UAAoB,oBAAW,MAAmB;EAGxD,OAAI,eAAYH,IAAA,CAAAK,KAAA;IACdI,SAAA,EAAAF,KAAA,CAAAE,SAAA;IACEC,IAAA,EAAAH,KAAI,CAAAI,YAAA;IACJH,cAAM;IACNI,OAAA,EAAAV,KAAM;IAINW,QAAA,EAAAN,KAAO,CAAAM;EACP;AACE;AAA0B,SAC5BP,aAAA","ignoreList":[]}
+{"version":3,"names":["jsx","useId","getSetting","Theme","ThemeProvider","props","forceClassName","className","name","defaultTheme","_isRoot","children"],"sources":["ThemeProvider.native.js"],"sourcesContent":["import { jsx } from \"react/jsx-runtime\";\nimport { useId } from \"react\";\nimport { getSetting } from \"../config\";\nimport { Theme } from \"./Theme\";\n\nvar ThemeProvider = function(props) {\n\t\"use no memo\";\n\tvar forceClassName = getSetting(\"addThemeClassName\") === void 0;\n\treturn /* @__PURE__ */ jsx(Theme, {\n\t\tclassName: props.className,\n\t\tname: props.defaultTheme,\n\t\tforceClassName,\n\t\t_isRoot: useId,\n\t\tchildren: props.children\n\t});\n};\n\nexport { ThemeProvider };"],"mappings":"AAAA,SAASA,GAAG,QAAQ,mBAAmB;AACvC,SAASC,KAAK,QAAQ,OAAO;AAC7B,SAASC,UAAU,QAAQ,qBAAW;AACtC,SAASC,KAAK,QAAQ,mBAAS;AAE/B,IAAIC,aAAa,GAAG,SAAAA,CAASC,KAAK,EAAE;EACnC,aAAa;;EACb,IAAIC,cAAc,GAAGJ,UAAU,CAAC,mBAAmB,CAAC,KAAK,KAAK,CAAC;EAC/D,OAAO,eAAgBF,GAAG,CAACG,KAAK,EAAE;IACjCI,SAAS,EAAEF,KAAK,CAACE,SAAS;IAC1BC,IAAI,EAAEH,KAAK,CAACI,YAAY;IACxBH,cAAc;IACdI,OAAO,EAAET,KAAK;IACdU,QAAQ,EAAEN,KAAK,CAACM;EACjB,CAAC,CAAC;AACH,CAAC;AAED,SAASP,aAAa","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "2.1.0",
+  "version": "2.2.0-1781071309197",
   "license": "MIT",
   "author": {
     "name": "Nate Wienert"
@@ -51,20 +51,20 @@
     "test:web": "vitest --typecheck --run"
   },
   "dependencies": {
-    "@tamagui/compose-refs": "2.1.0",
-    "@tamagui/constants": "2.1.0",
-    "@tamagui/helpers": "2.1.0",
-    "@tamagui/is-equal-shallow": "2.1.0",
-    "@tamagui/native": "2.1.0",
-    "@tamagui/normalize-css-color": "2.1.0",
-    "@tamagui/timer": "2.1.0",
-    "@tamagui/types": "2.1.0",
-    "@tamagui/use-did-finish-ssr": "2.1.0",
-    "@tamagui/use-event": "2.1.0",
-    "@tamagui/use-force-update": "2.1.0"
+    "@tamagui/compose-refs": "2.2.0-1781071309197",
+    "@tamagui/constants": "2.2.0-1781071309197",
+    "@tamagui/helpers": "2.2.0-1781071309197",
+    "@tamagui/is-equal-shallow": "2.2.0-1781071309197",
+    "@tamagui/native": "2.2.0-1781071309197",
+    "@tamagui/normalize-css-color": "2.2.0-1781071309197",
+    "@tamagui/timer": "2.2.0-1781071309197",
+    "@tamagui/types": "2.2.0-1781071309197",
+    "@tamagui/use-did-finish-ssr": "2.2.0-1781071309197",
+    "@tamagui/use-event": "2.2.0-1781071309197",
+    "@tamagui/use-force-update": "2.2.0-1781071309197"
   },
   "devDependencies": {
-    "@tamagui/build": "2.1.0",
+    "@tamagui/build": "2.2.0-1781071309197",
     "@testing-library/react": "^16.1.0",
     "csstype": "^3.0.10",
     "react": ">=19",

package/src/createComponent.tsx

@@ -1,5 +1,11 @@
 import { composeRefs } from '@tamagui/compose-refs'
-import { isClient, isServer, isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
+import {
+  isClient,
+  isNativeDesktop,
+  isServer,
+  isWeb,
+  useIsomorphicLayoutEffect,
+} from '@tamagui/constants'
 import { NativeMenuContext } from '@tamagui/native'
 import { composeEventHandlers } from '@tamagui/helpers'
 import { isEqualShallow } from '@tamagui/is-equal-shallow'
@@ -790,7 +796,23 @@ export function createComponent<
         // update prev state for next comparison (includes group states)
         stateRef.current.prevPseudoState = extractPseudoState(updatedState)
 
-        useStyleListener((nextStyles?.style || {}) as any, effectiveTransition)
+        // a self pseudo being active means the emitted style is a transient hover/press/focus
+        // override (it's not in React state under avoidReRenders), so the worklet must keep it
+        // latched across incidental re-renders; when none is active this is the base and renders
+        // own it again.
+        const hasActivePseudo = Boolean(
+          updatedState.hover ||
+          updatedState.press ||
+          updatedState.pressIn ||
+          updatedState.focus ||
+          updatedState.focusWithin
+        )
+
+        useStyleListener(
+          (nextStyles?.style || {}) as any,
+          effectiveTransition,
+          hasActivePseudo
+        )
       }
 
       function updateGroupListeners() {
@@ -1250,7 +1272,7 @@ export function createComponent<
     const runtimeHoverStyle = !disabled && noClass && pseudos?.hoverStyle
     const needsHoverState = Boolean(hasDynamicGroupChildren || runtimeHoverStyle)
     const attachHover =
-      isWeb &&
+      (isWeb || isNativeDesktop) &&
       !!(hasDynamicGroupChildren || needsHoverState || onMouseEnter || onMouseLeave)
 
     // check presence rather than value to prevent reparenting bugs

package/src/eventHandling.native.ts

@@ -31,6 +31,14 @@ const getIsAndroid = () => {
   return isAndroidCache
 }
 
+let isNativeDesktopCache: boolean | undefined
+const getIsNativeDesktop = () => {
+  if (isNativeDesktopCache === undefined) {
+    isNativeDesktopCache = Platform?.OS === 'macos' || Platform?.OS === 'windows'
+  }
+  return isNativeDesktopCache
+}
+
 const responderClaim = () => true
 const responderWrapperStyle = { display: 'contents' } as const
 
@@ -57,6 +65,14 @@ export function useEvents(
     if (events.onBlur) {
       viewProps['onBlur'] = events.onBlur
     }
+    if (getIsNativeDesktop()) {
+      if (events.onMouseEnter) {
+        viewProps['onMouseEnter'] = events.onMouseEnter
+      }
+      if (events.onMouseLeave) {
+        viewProps['onMouseLeave'] = events.onMouseLeave
+      }
+    }
   }
 
   // hasPressEvents includes events.onPress synthesized just for pressStyle

package/src/helpers/getSplitStyles.tsx

@@ -1,8 +1,8 @@
 import {
   isAndroid,
   isClient,
-  isIos,
   isWeb,
+  supportsDynamicColorIOS,
   useIsomorphicLayoutEffect,
 } from '@tamagui/constants'
 import {
@@ -875,7 +875,7 @@ export const getSplitStyles: StyleSplitter = (
           if (isThemeMedia) {
             if (
               process.env.TAMAGUI_TARGET === 'native' &&
-              isIos &&
+              supportsDynamicColorIOS &&
               getSetting('fastSchemeChange')
             ) {
               // iOS will use https://reactnative.dev/docs/dynamiccolorios

package/src/helpers/platformResolveValue.native.ts

@@ -2,7 +2,10 @@ import type { GetStyleState, SplitStyleProps } from '../types'
 import { getTokenForKey } from './getTokenForKey'
 import { parseNativeStyle } from './parseNativeStyle'
 
-const tokenPattern = /(\$[\w.-]+)/g
+// includes the optional `/NN` opacity-modifier suffix ($color9/50) so
+// getTokenForKey receives it and can apply the alpha — without it the token
+// resolves but the bare `/50` is left behind in the parsed gradient string
+const tokenPattern = /(\$[\w.-]+(?:\/[\d.]+)?)/g
 
 // keys that need native object parsing (DynamicColorIOS support)
 const nativeParseKeys: Record<string, boolean> = {

package/src/helpers/platformResolveValue.ts

@@ -1,7 +1,11 @@
 import type { GetStyleState, SplitStyleProps } from '../types'
 import { getTokenForKey } from './getTokenForKey'
 
-const tokenPattern = /(\$[\w.-]+)/g
+// includes the optional `/NN` opacity-modifier suffix ($color9/50) so
+// getTokenForKey receives it and can apply the alpha — without it the token
+// resolves but the bare `/50` is left behind in the CSS string, which makes
+// the whole declaration invalid
+const tokenPattern = /(\$[\w.-]+(?:\/[\d.]+)?)/g
 
 /**
  * web: resolves embedded $tokens in compound CSS strings via simple regex replacement.

package/src/hooks/getThemeProxied.ts

@@ -1,4 +1,4 @@
-import { isIos } from '@tamagui/constants'
+import { supportsDynamicColorIOS } from '@tamagui/constants'
 import type { MutableRefObject } from 'react'
 import { getConfig, getSetting } from '../config'
 import { getVariable } from '../createVariable'
@@ -133,7 +133,7 @@ export function getThemeProxied(
             const shouldOptimize =
               scheme &&
               platform !== 'web' &&
-              isIos &&
+              supportsDynamicColorIOS &&
               !curProps.deopt &&
               !curState.isInverse &&
               fastSchemeChange &&
@@ -142,7 +142,7 @@ export function getThemeProxied(
             if (process.env.NODE_ENV === 'development' && curProps.debug === 'verbose') {
               console.info(
                 ` 🎨 useTheme().get(${key}) theme=${name} scheme=${scheme}`,
-                `\n   shouldOptimize=${shouldOptimize} (iOS=${isIos} deopt=${curProps.deopt} isInverse=${curState.isInverse} fastScheme=${fastSchemeChange} rootMatch=${rootMatchesSystem})`
+                `\n   shouldOptimize=${shouldOptimize} (dynamicColorIOS=${supportsDynamicColorIOS} deopt=${curProps.deopt} isInverse=${curState.isInverse} fastScheme=${fastSchemeChange} rootMatch=${rootMatchesSystem})`
               )
             }
 
@@ -177,7 +177,7 @@ export function getThemeProxied(
             if (process.env.NODE_ENV === 'development' && curProps.debug) {
               console.info(
                 ` 🎨 useTheme().get(${key}) tracking key (not optimizing)`,
-                `\n   platform=${platform} isIOS=${isIos} deopt=${curProps.deopt} fastScheme=${fastSchemeChange}`
+                `\n   platform=${platform} dynamicColorIOS=${supportsDynamicColorIOS} deopt=${curProps.deopt} fastScheme=${fastSchemeChange}`
               )
             }
 

package/src/hooks/useThemeState.ts

@@ -1,5 +1,4 @@
-import { isIos } from '@tamagui/constants'
-import { useIsomorphicLayoutEffect } from '@tamagui/constants'
+import { supportsDynamicColorIOS, useIsomorphicLayoutEffect } from '@tamagui/constants'
 import {
   createContext,
   useCallback,
@@ -127,7 +126,7 @@ Looked for theme${props.name ? ` "${props.name}"` : ''}${props.componentName ? `
     // check if this is a scheme-only change (light↔dark) where DynamicColorIOS handles it
     const isSchemeOnlyChange =
       process.env.TAMAGUI_TARGET === 'native' &&
-      isIos &&
+      supportsDynamicColorIOS &&
       getSetting('fastSchemeChange') &&
       local &&
       parentState &&

package/src/opacityModifier.test-d.ts

@@ -0,0 +1,61 @@
+/**
+ * Type tests for the opacity modifier syntax (e.g., $color/50)
+ *
+ * The runtime already supports this syntax in getTokenForKey, but the types
+ * were not accepting it. These tests verify that color tokens with opacity
+ * modifiers are now type-safe.
+ */
+
+import { expectTypeOf, describe, test } from 'vitest'
+import type { ColorTokens, FontColorTokens } from './types'
+
+describe('opacity modifier types', () => {
+  test('ColorTokens accepts opacity modifier syntax', () => {
+    // Should accept token with opacity modifier
+    const colorWithOpacity: ColorTokens = '$color/50'
+    const colorWithFullOpacity: ColorTokens = '$color/100'
+    const colorWithLowOpacity: ColorTokens = '$color/10'
+
+    // Should still accept regular tokens
+    const regularToken: ColorTokens = '$color'
+    const colorName: ColorTokens = 'red'
+
+    // These should all be valid
+    expectTypeOf(colorWithOpacity).toMatchTypeOf<ColorTokens>()
+    expectTypeOf(colorWithFullOpacity).toMatchTypeOf<ColorTokens>()
+    expectTypeOf(colorWithLowOpacity).toMatchTypeOf<ColorTokens>()
+    expectTypeOf(regularToken).toMatchTypeOf<ColorTokens>()
+    expectTypeOf(colorName).toMatchTypeOf<ColorTokens>()
+  })
+
+  test('FontColorTokens accepts opacity modifier syntax', () => {
+    // Should accept font color token with opacity modifier
+    const fontColorWithOpacity: FontColorTokens = '$fontColor/50'
+    const fontColorWithFullOpacity: FontColorTokens = '$fontColor/100'
+
+    // Should still accept regular tokens and numbers
+    const regularFontToken: FontColorTokens = '$fontColor'
+    const fontColorNumber: FontColorTokens = 42
+
+    // These should all be valid
+    expectTypeOf(fontColorWithOpacity).toMatchTypeOf<FontColorTokens>()
+    expectTypeOf(fontColorWithFullOpacity).toMatchTypeOf<FontColorTokens>()
+    expectTypeOf(regularFontToken).toMatchTypeOf<FontColorTokens>()
+    expectTypeOf(fontColorNumber).toMatchTypeOf<FontColorTokens>()
+  })
+
+  test('opacity modifier rejects invalid formats', () => {
+    // These should NOT be valid (but TypeScript will still accept them as strings)
+    // The runtime parsing handles validation
+
+    // Valid opacity numbers (0-100)
+    const validOpacity: ColorTokens = '$color/75'
+    expectTypeOf(validOpacity).toMatchTypeOf<ColorTokens>()
+
+    // Note: TypeScript template literal types are permissive with numbers
+    // The runtime validation in getTokenForKey handles edge cases like:
+    // - Negative numbers
+    // - Numbers > 100
+    // - Non-numeric strings after /
+  })
+})

package/src/types.tsx

@@ -1699,11 +1699,17 @@ export type SpaceTokens =
   | GetTokenString<keyof Tokens['space']>
   | ThemeValueFallbackSpace
 
-export type ColorTokens =
+// base color token strings (before opacity modifier)
+type ColorTokenBase =
   | SpecificTokensSpecial
   | GetTokenString<keyof Tokens['color']>
   | GetTokenString<keyof ThemeParsed>
+
+export type ColorTokens =
+  | ColorTokenBase
   | CSSColorNames
+  // opacity modifier: $token/50 → parsed at runtime in getTokenForKey
+  | `${ColorTokenBase & string}/${number}`
 
 export type ZIndexTokens =
   | SpecificTokensSpecial
@@ -1769,7 +1775,12 @@ export type FontWeightValues =
   | 'bold'
   | 'normal'
 export type FontWeightTokens = `$${GetTokenFontKeysFor<'weight'>}` | FontWeightValues
-export type FontColorTokens = `$${GetTokenFontKeysFor<'color'>}` | number
+// font color tokens also support the opacity modifier
+type FontColorTokenBase = `$${GetTokenFontKeysFor<'color'>}`
+export type FontColorTokens =
+  | FontColorTokenBase
+  | number
+  | `${FontColorTokenBase}/${number}`
 export type FontLetterSpacingTokens =
   | `$${GetTokenFontKeysFor<'letterSpacing'>}`
   | number
@@ -2693,7 +2704,14 @@ export type GetNonStyledProps<A extends StylableComponent> = A extends {
 export type GetBaseStyles<A, B> = A extends {
   __tama: [any, any, any, infer C, any, any]
 }
-  ? C
+  ? // when extending an existing tamagui component (e.g. styled(View, ...)), it
+    // contributes its base styles. but isText/isInput in the config still means
+    // "this accepts text styles" (it drives runtime validStyles too), so merge
+    // text style props in, otherwise text-only props and their shorthands (e.g.
+    // the `text` shorthand for `textAlign`) get dropped from the type.
+    B extends { isText: true } | { isInput: true }
+    ? C & TextStylePropsBase
+    : C
   : B extends { isText: true }
     ? TextStylePropsBase
     : B extends { isInput: true }
@@ -3246,7 +3264,11 @@ export type UseAnimationProps = TamaguiComponentPropsBase & Record<string, any>
 
 type UseStyleListener = (
   nextStyle: Record<string, unknown>,
-  effectiveTransition?: TransitionProp | null
+  effectiveTransition?: TransitionProp | null,
+  // true while a self pseudo (hover/press/focus) is active. lets avoidReRenders drivers know
+  // the emitted style is a transient pseudo override that a real re-render must not be allowed
+  // to reconcile away, vs the no-pseudo base which renders own again.
+  pseudoActive?: boolean
 ) => void
 export type UseStyleEmitter = (cb: UseStyleListener) => void
 

package/types/createComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA2C,MAAM,OAAO,CAAA;AA6B/D,OAAO,KAAK,EAQV,YAAY,EAEZ,gBAAgB,EAChB,qBAAqB,EACrB,cAAc,EAOf,MAAM,SAAS,CAAA;AAahB,KAAK,iBAAiB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC,CAAA;AAEpF,eAAO,MAAM,kBAAkB,wBAA+B,CAAA;AA8J9D,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,EACnD,GAAG,SAAS,cAAc,GAAG,cAAc,EAC3C,SAAS,GAAG,KAAK,EACjB,UAAU,SAAS,MAAM,GAAG,KAAK,EACjC,YAAY,EAAE,YAAY,wEAkiD3B"}
+{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAWA,OAAO,KAA2C,MAAM,OAAO,CAAA;AA6B/D,OAAO,KAAK,EAQV,YAAY,EAEZ,gBAAgB,EAChB,qBAAqB,EACrB,cAAc,EAOf,MAAM,SAAS,CAAA;AAahB,KAAK,iBAAiB,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC,CAAA;AAEpF,eAAO,MAAM,kBAAkB,wBAA+B,CAAA;AA8J9D,wBAAgB,eAAe,CAC7B,kBAAkB,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,EAAE,EACnD,GAAG,SAAS,cAAc,GAAG,cAAc,EAC3C,SAAS,GAAG,KAAK,EACjB,UAAU,SAAS,MAAM,GAAG,KAAK,EACjC,YAAY,EAAE,YAAY,wEAkjD3B"}

package/types/eventHandling.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"eventHandling.native.d.ts","sourceRoot":"","sources":["../src/eventHandling.native.ts"],"names":[],"mappings":"AAAA;;GAEG;AAOH,OAAO,KAAK,EAAE,YAAY,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AA4BrE,wBAAgB,YAAY,OAE3B;AAED,wBAAgB,SAAS,CACvB,MAAM,EAAE,GAAG,EACX,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE;IAAE,OAAO,EAAE,wBAAwB,CAAA;CAAE,EAC/C,YAAY,EAAE,YAAY,EAC1B,KAAK,CAAC,EAAE,OAAO,EACf,kBAAkB,CAAC,EAAE,OAAO,EAC5B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,EACzB,kBAAkB,CAAC,EAAE,OAAO,OAqL7B;AAED,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,GAAG,EACZ,OAAO,EAAE,GAAG,EACZ,QAAQ,EAAE;IAAE,OAAO,EAAE,wBAAwB,CAAA;CAAE,EAC/C,KAAK,CAAC,EAAE,OAAO,EACf,oBAAoB,CAAC,EAAE,OAAO,OA4E/B"}
+{"version":3,"file":"eventHandling.native.d.ts","sourceRoot":"","sources":["../src/eventHandling.native.ts"],"names":[],"mappings":"AAAA;;GAEG;AAOH,OAAO,KAAK,EAAE,YAAY,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAoCrE,wBAAgB,YAAY,OAE3B;AAED,wBAAgB,SAAS,CACvB,MAAM,EAAE,GAAG,EACX,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE;IAAE,OAAO,EAAE,wBAAwB,CAAA;CAAE,EAC/C,YAAY,EAAE,YAAY,EAC1B,KAAK,CAAC,EAAE,OAAO,EACf,kBAAkB,CAAC,EAAE,OAAO,EAC5B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,EACzB,kBAAkB,CAAC,EAAE,OAAO,OA6L7B;AAED,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,GAAG,EACZ,OAAO,EAAE,GAAG,EACZ,QAAQ,EAAE;IAAE,OAAO,EAAE,wBAAwB,CAAA;CAAE,EAC/C,KAAK,CAAC,EAAE,OAAO,EACf,oBAAoB,CAAC,EAAE,OAAO,OA4E/B"}

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

@@ -1 +1 @@
-{"version":3,"file":"platformResolveValue.d.ts","sourceRoot":"","sources":["../../src/helpers/platformResolveValue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAK9D;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,eAAe,EAC3B,UAAU,EAAE,OAAO,CAAC,aAAa,CAAC,GACjC,MAAM,CAQR"}
+{"version":3,"file":"platformResolveValue.d.ts","sourceRoot":"","sources":["../../src/helpers/platformResolveValue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAS9D;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,eAAe,EAC3B,UAAU,EAAE,OAAO,CAAC,aAAa,CAAC,GACjC,MAAM,CAQR"}

package/types/helpers/platformResolveValue.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"platformResolveValue.native.d.ts","sourceRoot":"","sources":["../../src/helpers/platformResolveValue.native.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AA2B9D;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,eAAe,EAC3B,UAAU,EAAE,OAAO,CAAC,aAAa,CAAC,GACjC,GAAG,CAmCL"}
+{"version":3,"file":"platformResolveValue.native.d.ts","sourceRoot":"","sources":["../../src/helpers/platformResolveValue.native.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AA8B9D;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,EACb,UAAU,EAAE,eAAe,EAC3B,UAAU,EAAE,OAAO,CAAC,aAAa,CAAC,GACjC,GAAG,CAmCL"}

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

@@ -1 +1 @@
-{"version":3,"file":"useThemeState.d.ts","sourceRoot":"","sources":["../../src/hooks/useThemeState.ts"],"names":[],"mappings":"AAEA,OAAO,EAML,KAAK,gBAAgB,EACtB,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAEV,UAAU,EACV,UAAU,EACV,sBAAsB,EACvB,MAAM,UAAU,CAAA;AAEjB,KAAK,EAAE,GAAG,MAAM,CAAA;AAEhB,eAAO,MAAM,iBAAiB,iCAAwB,CAAA;AAatD,eAAO,MAAM,iBAAiB,YAK7B,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,IAAI,EAAE,2BAAmB,CAAA;AAWvD,eAAO,MAAM,iBAAiB,yBAAuB,CAAA;AAKrD,eAAO,MAAM,aAAa,GACxB,OAAO,sBAAsB,EAC7B,2BAAc,EACd,MAAM,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,EAC1C,aAAa,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,KAChD,UAyKF,CAAA;AAsUD,eAAO,MAAM,qBAAqB,GAAI,OAAO,UAAU,YACW,CAAA"}
+{"version":3,"file":"useThemeState.d.ts","sourceRoot":"","sources":["../../src/hooks/useThemeState.ts"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,gBAAgB,EACtB,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAEV,UAAU,EACV,UAAU,EACV,sBAAsB,EACvB,MAAM,UAAU,CAAA;AAEjB,KAAK,EAAE,GAAG,MAAM,CAAA;AAEhB,eAAO,MAAM,iBAAiB,iCAAwB,CAAA;AAatD,eAAO,MAAM,iBAAiB,YAK7B,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,IAAI,EAAE,2BAAmB,CAAA;AAWvD,eAAO,MAAM,iBAAiB,yBAAuB,CAAA;AAKrD,eAAO,MAAM,aAAa,GACxB,OAAO,sBAAsB,EAC7B,2BAAc,EACd,MAAM,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,EAC1C,aAAa,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,KAChD,UAyKF,CAAA;AAsUD,eAAO,MAAM,qBAAqB,GAAI,OAAO,UAAU,YACW,CAAA"}

package/types/types.d.ts

@@ -983,7 +983,8 @@ export type SpecificTokensSpecial = TamaguiSettings extends {
 } ? Val extends 'except-special' | undefined ? never : SpecificTokens : SpecificTokens;
 export type SizeTokens = SpecificTokensSpecial | ThemeValueFallbackSize | GetTokenString<keyof Tokens['size']>;
 export type SpaceTokens = SpecificTokensSpecial | GetTokenString<keyof Tokens['space']> | ThemeValueFallbackSpace;
-export type ColorTokens = SpecificTokensSpecial | GetTokenString<keyof Tokens['color']> | GetTokenString<keyof ThemeParsed> | CSSColorNames;
+type ColorTokenBase = SpecificTokensSpecial | GetTokenString<keyof Tokens['color']> | GetTokenString<keyof ThemeParsed>;
+export type ColorTokens = ColorTokenBase | CSSColorNames | `${ColorTokenBase & string}/${number}`;
 export type ZIndexTokens = SpecificTokensSpecial | GetTokenString<keyof Tokens['zIndex']> | ThemeValueFallbackZIndex | number;
 export type RadiusTokens = SpecificTokensSpecial | GetTokenString<keyof Tokens['radius']> | ThemeValueFallbackRadius | number | RemString;
 export type NonSpecificTokens = GetTokenString<keyof Tokens['radius']> | GetTokenString<keyof Tokens['zIndex']> | GetTokenString<keyof Tokens['color']> | GetTokenString<keyof Tokens['space']> | GetTokenString<keyof Tokens['size']>;
@@ -1001,7 +1002,8 @@ export type FontSizeTokens = GetTokenString<GetTokenFontKeysFor<'size'>> | numbe
 export type FontLineHeightTokens = `$${GetTokenFontKeysFor<'lineHeight'>}` | number | RemString;
 export type FontWeightValues = `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00` | 'bold' | 'normal';
 export type FontWeightTokens = `$${GetTokenFontKeysFor<'weight'>}` | FontWeightValues;
-export type FontColorTokens = `$${GetTokenFontKeysFor<'color'>}` | number;
+type FontColorTokenBase = `$${GetTokenFontKeysFor<'color'>}`;
+export type FontColorTokens = FontColorTokenBase | number | `${FontColorTokenBase}/${number}`;
 export type FontLetterSpacingTokens = `$${GetTokenFontKeysFor<'letterSpacing'>}` | number | RemString;
 export type FontStyleTokens = `$${GetTokenFontKeysFor<'style'>}` | RNTextStyle['fontStyle'];
 export type FontTransformTokens = `$${GetTokenFontKeysFor<'transform'>}` | RNTextStyle['textTransform'];
@@ -1539,7 +1541,11 @@ export type GetNonStyledProps<A extends StylableComponent> = A extends {
 } ? B : TamaguiComponentPropsBaseBase & GetProps<A>;
 export type GetBaseStyles<A, B> = A extends {
     __tama: [any, any, any, infer C, any, any];
-} ? C : B extends {
+} ? B extends {
+    isText: true;
+} | {
+    isInput: true;
+} ? C & TextStylePropsBase : C : B extends {
     isText: true;
 } ? TextStylePropsBase : B extends {
     isInput: true;
@@ -1846,7 +1852,7 @@ export type AnimationDriver<A extends AnimationConfig = AnimationConfig> = {
     Text?: any;
 };
 export type UseAnimationProps = TamaguiComponentPropsBase & Record<string, any>;
-type UseStyleListener = (nextStyle: Record<string, unknown>, effectiveTransition?: TransitionProp | null) => void;
+type UseStyleListener = (nextStyle: Record<string, unknown>, effectiveTransition?: TransitionProp | null, pseudoActive?: boolean) => void;
 export type UseStyleEmitter = (cb: UseStyleListener) => void;
 export type UseAnimationHook = (props: {
     style: Record<string, any>;