@tamagui/web 3.0.0-beta.745.1 → 3.0.0-beta.752.1

package/dist/esm/hooks/useComponentState.native.js

@@ -41,7 +41,7 @@ var lifecycleHandler = {
 		return true;
 	}
 };
-function hasFlatModifier(props, config, modifiers, ctx) {
+function hasFlatModifier(props, config, modifiers, ctx, variants) {
 	var _ctx;
 	var scan = (_ctx = ctx).flatScan || (_ctx.flatScan = [
 		"",
@@ -56,7 +56,9 @@ function hasFlatModifier(props, config, modifiers, ctx) {
 			continue;
 		}
 		var property = config.shorthands[key] || key;
-		if (!(property in stylePropsAll) && property !== "transition") continue;
+		if (!(property in stylePropsAll) && property !== "transition" && !(variants && key in variants)) {
+			continue;
+		}
 		if (!isString) {
 			if (property === "transition") continue;
 			for (var chain in value) {
@@ -104,7 +106,7 @@ var useComponentState = function(props, animationDriver, staticConfig, config) {
 	if (!needsHydration && hasAnimationProp) {
 		curStateRef.hasAnimated = true;
 	}
-	var platformPseudo = Boolean(!isHOC && useAnimations && (animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.avoidReRenders) && ((_getPlatformDriver = getPlatformDriver()) === null || _getPlatformDriver === void 0 ? void 0 : _getPlatformDriver.pseudo) && hasFlatModifier(props, config, platformPseudoModifiers, curStateRef));
+	var platformPseudo = Boolean(!isHOC && useAnimations && (animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.avoidReRenders) && ((_getPlatformDriver = getPlatformDriver()) === null || _getPlatformDriver === void 0 ? void 0 : _getPlatformDriver.pseudo) && hasFlatModifier(props, config, platformPseudoModifiers, curStateRef, staticConfig.variants));
 	var willBeAnimatedClient = (function() {
 		var next = !!((hasAnimationProp || platformPseudo) && !isHOC && useAnimations);
 		return Boolean(next || curStateRef.hasAnimated);
@@ -118,7 +120,7 @@ var useComponentState = function(props, animationDriver, staticConfig, config) {
 	var presenceState = presence === null || presence === void 0 ? void 0 : presence[2];
 	var isExiting = (presenceState === null || presenceState === void 0 ? void 0 : presenceState.isPresent) === false;
 	var isEntering = (presenceState === null || presenceState === void 0 ? void 0 : presenceState.isPresent) === true && presenceState.initial !== false;
-	var hasEnterStyle = hasFlatModifier(props, config, enterModifier, curStateRef);
+	var hasEnterStyle = hasFlatModifier(props, config, enterModifier, curStateRef, staticConfig.variants);
 	var hasAnimationThatNeedsHydrate = hasAnimationProp && !isHydrated && ((animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.isReactNative) || inputStyle !== "css");
 	var canImmediatelyEnter = hasEnterStyle || isEntering;
 	var shouldEnter = !isHOC && (hasEnterStyle || isEntering || hasAnimationThatNeedsHydrate || disableClassName);

package/dist/esm/hooks/useComponentState.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"useComponentState.native.js","names":[],"sources":["esm/hooks/useComponentState.native.js"],"sourcesContent":["import { getPlatformDriver, isServer, isWeb } from \"@tamagui/constants\";\nimport { stylePropsAll } from \"@tamagui/helpers\";\nimport { canonicalClauseModifier, scanFlatValue } from \"@tamagui/style-grammar/runtime\";\nimport { mergeIfNotShallowEqual } from \"@tamagui/is-equal-shallow\";\nimport { useDidFinishSSR, useIsClientOnly } from \"@tamagui/use-did-finish-ssr\";\nimport { useRef, useState } from \"react\";\nimport { getSetting } from \"../config\";\nimport { formatDiagnostic } from \"../helpers/formatDiagnostic\";\nimport { isOptimizedForFirstRender } from \"./isOptimizedForFirstRender\";\nimport { defaultComponentState, defaultComponentStateMounted, defaultComponentStateShouldEnter } from \"../defaultComponentState\";\nimport { isObj } from \"../helpers/isObj\";\nimport { log } from \"../helpers/log\";\nfunction _type_of(obj) {\n  \"@swc/helpers - typeof\";\n  return obj && typeof Symbol !== \"undefined\" && obj.constructor === Symbol ? \"symbol\" : typeof obj;\n}\nvar platformPseudoModifiers = /* @__PURE__ */ new Set([\n  \"hover\",\n  \"press\",\n  \"focus\"\n]);\nvar enterModifier = /* @__PURE__ */ new Set([\n  \"enter\"\n]);\nvar lifecycleHandler = {\n  segment(ctx, start, end, isBase, valid) {\n    var scan = ctx.flatScan;\n    if (!isBase && valid && start < end && scan[3]) scan[2] = true;\n    scan[3] = false;\n  },\n  chain(ctx, start, end, valid) {\n    var scan = ctx.flatScan;\n    scan[3] = false;\n    if (!valid) return true;\n    for (var index = start; index <= end; index++) {\n      if (index !== end && scan[0].charCodeAt(index) !== 58) continue;\n      if (scan[1].has(canonicalClauseModifier(scan[0].slice(start, index)))) {\n        scan[3] = true;\n      }\n      start = index + 1;\n    }\n    return true;\n  }\n};\nfunction hasFlatModifier(props, config, modifiers, ctx) {\n  var _ctx;\n  var scan = (_ctx = ctx).flatScan || (_ctx.flatScan = [\n    \"\",\n    enterModifier,\n    false,\n    false\n  ]);\n  for (var key in props) {\n    var value = props[key];\n    var isString = typeof value === \"string\";\n    if (isString ? value.indexOf(\":\") === -1 : !value || (typeof value === \"undefined\" ? \"undefined\" : _type_of(value)) !== \"object\") {\n      continue;\n    }\n    var property = config.shorthands[key] || key;\n    if (!(property in stylePropsAll) && property !== \"transition\") continue;\n    if (!isString) {\n      if (property === \"transition\") continue;\n      for (var chain in value) {\n        if (chain === \"default\" || value[chain] == null) continue;\n        var start = 0;\n        for (var index = 0; index <= chain.length; index++) {\n          if (index !== chain.length && chain.charCodeAt(index) !== 58) continue;\n          if (modifiers.has(canonicalClauseModifier(chain.slice(start, index)))) {\n            return true;\n          }\n          start = index + 1;\n        }\n      }\n      continue;\n    }\n    scan[0] = value;\n    scan[1] = modifiers;\n    scan[2] = false;\n    scan[3] = false;\n    scanFlatValue(value, lifecycleHandler, ctx);\n    if (scan[2]) return true;\n  }\n  return false;\n}\nvar useComponentState = function(props, animationDriver, staticConfig, config) {\n  \"use no memo\";\n  var _getPlatformDriver, _animationDriver_usePresence;\n  var isHydrated = useDidFinishSSR();\n  var needsHydration = !useIsClientOnly();\n  var useAnimations = (animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.isStub) ? void 0 : animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.useAnimations;\n  var { isHOC } = staticConfig;\n  var stateRef = useRef(\n    // performance: avoid creating object every render\n    void 0\n  );\n  if (!stateRef.current) {\n    stateRef.current = {\n      startedUnhydrated: needsHydration && !isHydrated,\n      optimizeForFirstRender: isOptimizedForFirstRender()\n    };\n  }\n  var hasAnimationProp = Boolean(!isHOC && \"transition\" in props || props.style && hasAnimatedStyleValue(props.style));\n  var _animationDriver_inputStyle;\n  var inputStyle = (_animationDriver_inputStyle = animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.inputStyle) !== null && _animationDriver_inputStyle !== void 0 ? _animationDriver_inputStyle : \"css\";\n  var _animationDriver_outputStyle;\n  var outputStyle = (_animationDriver_outputStyle = animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.outputStyle) !== null && _animationDriver_outputStyle !== void 0 ? _animationDriver_outputStyle : \"css\";\n  var curStateRef = stateRef.current;\n  if (!needsHydration && hasAnimationProp) {\n    curStateRef.hasAnimated = true;\n  }\n  var platformPseudo = Boolean(!isHOC && useAnimations && (animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.avoidReRenders) && ((_getPlatformDriver = getPlatformDriver()) === null || _getPlatformDriver === void 0 ? void 0 : _getPlatformDriver.pseudo) && hasFlatModifier(props, config, platformPseudoModifiers, curStateRef));\n  var willBeAnimatedClient = (function() {\n    var next = !!((hasAnimationProp || platformPseudo) && !isHOC && useAnimations);\n    return Boolean(next || curStateRef.hasAnimated);\n  })();\n  var willBeAnimated = !isServer && willBeAnimatedClient;\n  if (willBeAnimated && !curStateRef.hasAnimated) {\n    curStateRef.hasAnimated = true;\n  }\n  var { disableClassName } = props;\n  var presence = !isHOC && willBeAnimated && props[\"animatePresence\"] !== false && (animationDriver === null || animationDriver === void 0 ? void 0 : (_animationDriver_usePresence = animationDriver.usePresence) === null || _animationDriver_usePresence === void 0 ? void 0 : _animationDriver_usePresence.call(animationDriver)) || null;\n  var presenceState = presence === null || presence === void 0 ? void 0 : presence[2];\n  var isExiting = (presenceState === null || presenceState === void 0 ? void 0 : presenceState.isPresent) === false;\n  var isEntering = (presenceState === null || presenceState === void 0 ? void 0 : presenceState.isPresent) === true && presenceState.initial !== false;\n  var hasEnterStyle = hasFlatModifier(props, config, enterModifier, curStateRef);\n  var hasAnimationThatNeedsHydrate = hasAnimationProp && !isHydrated && ((animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.isReactNative) || inputStyle !== \"css\");\n  var canImmediatelyEnter = hasEnterStyle || isEntering;\n  var shouldEnter = !isHOC && (hasEnterStyle || isEntering || hasAnimationThatNeedsHydrate || // disableClassName doesnt work server side, only client, so needs hydrate\n  // this is just for a better ux, supports css variables for light/dark, media queries, etc\n  disableClassName);\n  var initialState = shouldEnter ? (\n    // on the very first render we switch all spring animation drivers to css rendering\n    // this is because we need to use css variables, which they don't support to do proper SSR\n    // without flickers of the wrong colors.\n    // but once we do that initial hydration and we are in client side rendering mode,\n    // we can avoid the extra re-render on mount\n    canImmediatelyEnter ? defaultComponentStateShouldEnter : defaultComponentState\n  ) : defaultComponentStateMounted;\n  var disabled = isDisabled(props);\n  if (disabled != null) {\n    initialState.disabled = disabled;\n  }\n  var states = useState(initialState);\n  var state = props.forceStyle ? {\n    ...states[0],\n    [props.forceStyle]: true\n  } : states[0];\n  var setState = states[1];\n  var isAnimated = willBeAnimated;\n  if (isWeb && hasAnimationThatNeedsHydrate && !staticConfig.isHOC && !isHydrated) {\n    isAnimated = false;\n    curStateRef.willHydrate = true;\n  }\n  if (disabled !== state.disabled) {\n    if (disabled) {\n      Object.assign(state, defaultComponentStateMounted);\n    }\n    state.disabled = disabled;\n    setState(function(_) {\n      return {\n        ...state\n      };\n    });\n  }\n  var groupName = props.group;\n  if (!stateRef.current.baseSetStateShallow) {\n    var r = stateRef.current;\n    r.baseSetStateShallow = function(stateOrGetState) {\n      setState(function(prev) {\n        var next = typeof stateOrGetState === \"function\" ? stateOrGetState(prev) : stateOrGetState;\n        var update = mergeIfNotShallowEqual(prev, next);\n        if (process.env.NODE_ENV === \"development\") {\n          var dbg = r.__debug;\n          if (dbg && update !== prev) {\n            console.groupCollapsed(`setStateShallow CHANGE`, \"=>\", update);\n            console.info(`previously`, prev);\n            console.trace();\n            console.groupEnd();\n          }\n        }\n        return update;\n      });\n    };\n  }\n  if (process.env.NODE_ENV === \"development\") {\n    ;\n    stateRef.current.__debug = props.debug;\n  }\n  var setStateShallow = stateRef.current.baseSetStateShallow;\n  if (process.env.NODE_ENV === \"development\" && globalThis.time) globalThis.time`state-useCreateShallowSetState`;\n  var outProps = props;\n  if (presenceState && isAnimated && isHydrated && staticConfig.variants) {\n    if (process.env.NODE_ENV === \"development\" && props.debug === \"verbose\") {\n      var _staticConfig_Component, _staticConfig_Component1;\n      console.warn(formatDiagnostic(\"TAMAGUI_PRESENCE_STATE\", ((_staticConfig_Component = staticConfig.Component) === null || _staticConfig_Component === void 0 ? void 0 : _staticConfig_Component.displayName) || ((_staticConfig_Component1 = staticConfig.Component) === null || _staticConfig_Component1 === void 0 ? void 0 : _staticConfig_Component1.name) || \"TamaguiComponent\", \"AnimatePresence supplied lifecycle state to an animated component\", 'Remove debug=\"verbose\" after inspecting the animation state', \"presenceState\", presenceState));\n    }\n    var { custom } = presenceState;\n    if (isObj(custom)) {\n      outProps = {\n        ...props,\n        ...custom\n      };\n    }\n  }\n  var noClass = !isWeb || !!props.forceStyle;\n  if (!isHydrated) {\n    noClass = false;\n  } else {\n    if (isWeb && isHydrated) {\n      var isAnimatedAndHydrated = isAnimated && isHydrated;\n      var isClassNameDisabled = !staticConfig.acceptsClassName && (getSetting(\"disableSSR\") || !state.unmounted);\n      var isDisabledManually = disableClassName && !state.unmounted;\n      if (\n        // Only disable className for animation drivers that output inline styles (not css)\n        isAnimatedAndHydrated && outputStyle !== \"css\" || isDisabledManually || isClassNameDisabled\n      ) {\n        noClass = true;\n        if (process.env.NODE_ENV === \"development\" && props.debug === \"verbose\") {\n          log(`avoiding className`, {\n            isAnimatedAndHydrated,\n            isDisabledManually,\n            isClassNameDisabled\n          });\n        }\n      }\n    }\n  }\n  return {\n    props: outProps,\n    startedUnhydrated: curStateRef.startedUnhydrated,\n    curStateRef,\n    disabled,\n    groupName,\n    hasAnimationProp,\n    hasEnterStyle,\n    isAnimated,\n    isExiting,\n    isHydrated,\n    presence,\n    presenceState,\n    setState,\n    setStateShallow,\n    noClass,\n    state,\n    stateRef,\n    inputStyle,\n    outputStyle,\n    willBeAnimated,\n    willBeAnimatedClient,\n    platformPseudo\n  };\n};\nfunction hasAnimatedStyleValue(style) {\n  for (var k in style) {\n    var val = style[k];\n    if (val && (typeof val === \"undefined\" ? \"undefined\" : _type_of(val)) === \"object\" && \"_animation\" in val) {\n      return true;\n    }\n  }\n  return false;\n}\nvar isDisabled = function(props) {\n  var _props_accessibilityState;\n  return props.disabled || props.passThrough || ((_props_accessibilityState = props.accessibilityState) === null || _props_accessibilityState === void 0 ? void 0 : _props_accessibilityState.disabled) || props[\"aria-disabled\"] || props.accessibilityDisabled || false;\n};\nexport {\n  useComponentState\n};\n//# sourceMappingURL=useComponentState.js.map\n"],"mappings":";;;;;;;;;;;;;;AAYA,SAAS,SAAS,KAAK;CACrB;CACA,OAAO,OAAO,OAAO,WAAW,eAAe,IAAI,gBAAgB,SAAS,WAAW,OAAO;AAChG;AACA,IAAI,0CAA0C,IAAI,IAAI;CACpD;CACA;CACA;AACF,CAAC;AACD,IAAI,gCAAgC,IAAI,IAAI,CAC1C,OACF,CAAC;AACD,IAAI,mBAAmB;CACrB,QAAQ,KAAK,OAAO,KAAK,QAAQ,OAAO;EACtC,IAAI,OAAO,IAAI;EACf,IAAI,CAAC,UAAU,SAAS,QAAQ,OAAO,KAAK,IAAI,KAAK,KAAK;EAC1D,KAAK,KAAK;CACZ;CACA,MAAM,KAAK,OAAO,KAAK,OAAO;EAC5B,IAAI,OAAO,IAAI;EACf,KAAK,KAAK;EACV,IAAI,CAAC,OAAO,OAAO;EACnB,KAAK,IAAI,QAAQ,OAAO,SAAS,KAAK,SAAS;GAC7C,IAAI,UAAU,OAAO,KAAK,EAAE,CAAC,WAAW,KAAK,MAAM,IAAI;GACvD,IAAI,KAAK,EAAE,CAAC,IAAI,wBAAwB,KAAK,EAAE,CAAC,MAAM,OAAO,KAAK,CAAC,CAAC,GAAG;IACrE,KAAK,KAAK;GACZ;GACA,QAAQ,QAAQ;EAClB;EACA,OAAO;CACT;AACF;AACA,SAAS,gBAAgB,OAAO,QAAQ,WAAW,KAAK;CACtD,IAAI;CACJ,IAAI,QAAQ,OAAO,IAAG,CAAE,aAAa,KAAK,WAAW;EACnD;EACA;EACA;EACA;CACF;CACA,KAAK,IAAI,OAAO,OAAO;EACrB,IAAI,QAAQ,MAAM;EAClB,IAAI,WAAW,OAAO,UAAU;EAChC,IAAI,WAAW,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,OAAO,UAAU,cAAc,cAAc,SAAS,KAAK,OAAO,UAAU;GAChI;EACF;EACA,IAAI,WAAW,OAAO,WAAW,QAAQ;EACzC,IAAI,EAAE,YAAY,kBAAkB,aAAa,cAAc;EAC/D,IAAI,CAAC,UAAU;GACb,IAAI,aAAa,cAAc;GAC/B,KAAK,IAAI,SAAS,OAAO;IACvB,IAAI,UAAU,aAAa,MAAM,UAAU,MAAM;IACjD,IAAI,QAAQ;IACZ,KAAK,IAAI,QAAQ,GAAG,SAAS,MAAM,QAAQ,SAAS;KAClD,IAAI,UAAU,MAAM,UAAU,MAAM,WAAW,KAAK,MAAM,IAAI;KAC9D,IAAI,UAAU,IAAI,wBAAwB,MAAM,MAAM,OAAO,KAAK,CAAC,CAAC,GAAG;MACrE,OAAO;KACT;KACA,QAAQ,QAAQ;IAClB;GACF;GACA;EACF;EACA,KAAK,KAAK;EACV,KAAK,KAAK;EACV,KAAK,KAAK;EACV,KAAK,KAAK;EACV,cAAc,OAAO,kBAAkB,GAAG;EAC1C,IAAI,KAAK,IAAI,OAAO;CACtB;CACA,OAAO;AACT;AACA,IAAI,oBAAoB,SAAS,OAAO,iBAAiB,cAAc,QAAQ;CAC7E;CACA,IAAI,oBAAoB;CACxB,IAAI,aAAa,gBAAgB;CACjC,IAAI,iBAAiB,CAAC,gBAAgB;CACtC,IAAI,iBAAiB,oBAAoB,QAAQ,oBAAoB,KAAK,IAAI,KAAK,IAAI,gBAAgB,UAAU,KAAK,IAAI,oBAAoB,QAAQ,oBAAoB,KAAK,IAAI,KAAK,IAAI,gBAAgB;CAC5M,IAAI,EAAE,UAAU;CAChB,IAAI,WAAW,OAEb,KAAK,CACP;CACA,IAAI,CAAC,SAAS,SAAS;EACrB,SAAS,UAAU;GACjB,mBAAmB,kBAAkB,CAAC;GACtC,wBAAwB,0BAA0B;EACpD;CACF;CACA,IAAI,mBAAmB,QAAQ,CAAC,SAAS,gBAAgB,SAAS,MAAM,SAAS,sBAAsB,MAAM,KAAK,CAAC;CACnH,IAAI;CACJ,IAAI,cAAc,8BAA8B,oBAAoB,QAAQ,oBAAoB,KAAK,IAAI,KAAK,IAAI,gBAAgB,gBAAgB,QAAQ,gCAAgC,KAAK,IAAI,8BAA8B;CACjO,IAAI;CACJ,IAAI,eAAe,+BAA+B,oBAAoB,QAAQ,oBAAoB,KAAK,IAAI,KAAK,IAAI,gBAAgB,iBAAiB,QAAQ,iCAAiC,KAAK,IAAI,+BAA+B;CACtO,IAAI,cAAc,SAAS;CAC3B,IAAI,CAAC,kBAAkB,kBAAkB;EACvC,YAAY,cAAc;CAC5B;CACA,IAAI,iBAAiB,QAAQ,CAAC,SAAS,kBAAkB,oBAAoB,QAAQ,oBAAoB,KAAK,IAAI,KAAK,IAAI,gBAAgB,qBAAqB,qBAAqB,kBAAkB,OAAO,QAAQ,uBAAuB,KAAK,IAAI,KAAK,IAAI,mBAAmB,WAAW,gBAAgB,OAAO,QAAQ,yBAAyB,WAAW,CAAC;CACjW,IAAI,wBAAwB,WAAW;EACrC,IAAI,OAAO,CAAC,GAAG,oBAAoB,mBAAmB,CAAC,SAAS;EAChE,OAAO,QAAQ,QAAQ,YAAY,WAAW;CAChD,EAAC,CAAE;CACH,IAAI,iBAAiB,CAAC,YAAY;CAClC,IAAI,kBAAkB,CAAC,YAAY,aAAa;EAC9C,YAAY,cAAc;CAC5B;CACA,IAAI,EAAE,qBAAqB;CAC3B,IAAI,WAAW,CAAC,SAAS,kBAAkB,MAAM,uBAAuB,UAAU,oBAAoB,QAAQ,oBAAoB,KAAK,IAAI,KAAK,KAAK,+BAA+B,gBAAgB,iBAAiB,QAAQ,iCAAiC,KAAK,IAAI,KAAK,IAAI,6BAA6B,KAAK,eAAe,MAAM;CACvU,IAAI,gBAAgB,aAAa,QAAQ,aAAa,KAAK,IAAI,KAAK,IAAI,SAAS;CACjF,IAAI,aAAa,kBAAkB,QAAQ,kBAAkB,KAAK,IAAI,KAAK,IAAI,cAAc,eAAe;CAC5G,IAAI,cAAc,kBAAkB,QAAQ,kBAAkB,KAAK,IAAI,KAAK,IAAI,cAAc,eAAe,QAAQ,cAAc,YAAY;CAC/I,IAAI,gBAAgB,gBAAgB,OAAO,QAAQ,eAAe,WAAW;CAC7E,IAAI,+BAA+B,oBAAoB,CAAC,gBAAgB,oBAAoB,QAAQ,oBAAoB,KAAK,IAAI,KAAK,IAAI,gBAAgB,kBAAkB,eAAe;CAC3L,IAAI,sBAAsB,iBAAiB;CAC3C,IAAI,cAAc,CAAC,UAAU,iBAAiB,cAAc,gCAE5D;CACA,IAAI,eAAe,cAMjB,sBAAsB,mCAAmC,wBACvD;CACJ,IAAI,WAAW,WAAW,KAAK;CAC/B,IAAI,YAAY,MAAM;EACpB,aAAa,WAAW;CAC1B;CACA,IAAI,SAAS,SAAS,YAAY;CAClC,IAAI,QAAQ,MAAM,aAAa;EAC7B,GAAG,OAAO;GACT,MAAM,aAAa;CACtB,IAAI,OAAO;CACX,IAAI,WAAW,OAAO;CACtB,IAAI,aAAa;CACjB,IAAI,SAAS,gCAAgC,CAAC,aAAa,SAAS,CAAC,YAAY;EAC/E,aAAa;EACb,YAAY,cAAc;CAC5B;CACA,IAAI,aAAa,MAAM,UAAU;EAC/B,IAAI,UAAU;GACZ,OAAO,OAAO,OAAO,4BAA4B;EACnD;EACA,MAAM,WAAW;EACjB,SAAS,SAAS,GAAG;GACnB,OAAO,EACL,GAAG,MACL;EACF,CAAC;CACH;CACA,IAAI,YAAY,MAAM;CACtB,IAAI,CAAC,SAAS,QAAQ,qBAAqB;EACzC,IAAI,IAAI,SAAS;EACjB,EAAE,sBAAsB,SAAS,iBAAiB;GAChD,SAAS,SAAS,MAAM;IACtB,IAAI,OAAO,OAAO,oBAAoB,aAAa,gBAAgB,IAAI,IAAI;IAC3E,IAAI,SAAS,uBAAuB,MAAM,IAAI;IAC9C,IAAI,QAAQ,IAAI,aAAa,eAAe;KAC1C,IAAI,MAAM,EAAE;KACZ,IAAI,OAAO,WAAW,MAAM;MAC1B,QAAQ,eAAe,0BAA0B,MAAM,MAAM;MAC7D,QAAQ,KAAK,cAAc,IAAI;MAC/B,QAAQ,MAAM;MACd,QAAQ,SAAS;KACnB;IACF;IACA,OAAO;GACT,CAAC;EACH;CACF;CACA,IAAI,QAAQ,IAAI,aAAa,eAAe;EAC1C;EACA,SAAS,QAAQ,UAAU,MAAM;CACnC;CACA,IAAI,kBAAkB,SAAS,QAAQ;CACvC,IAAI,QAAQ,IAAI,aAAa,iBAAiB,WAAW,MAAM,WAAW,IAAI;CAC9E,IAAI,WAAW;CACf,IAAI,iBAAiB,cAAc,cAAc,aAAa,UAAU;EACtE,IAAI,QAAQ,IAAI,aAAa,iBAAiB,MAAM,UAAU,WAAW;GACvE,IAAI,yBAAyB;GAC7B,QAAQ,KAAK,iBAAiB,4BAA4B,0BAA0B,aAAa,eAAe,QAAQ,4BAA4B,KAAK,IAAI,KAAK,IAAI,wBAAwB,kBAAkB,2BAA2B,aAAa,eAAe,QAAQ,6BAA6B,KAAK,IAAI,KAAK,IAAI,yBAAyB,SAAS,oBAAoB,qEAAqE,iEAA+D,iBAAiB,aAAa,CAAC;EACzhB;EACA,IAAI,EAAE,WAAW;EACjB,IAAI,MAAM,MAAM,GAAG;GACjB,WAAW;IACT,GAAG;IACH,GAAG;GACL;EACF;CACF;CACA,IAAI,UAAU,CAAC,SAAS,CAAC,CAAC,MAAM;CAChC,IAAI,CAAC,YAAY;EACf,UAAU;CACZ,OAAO;EACL,IAAI,SAAS,YAAY;GACvB,IAAI,wBAAwB,cAAc;GAC1C,IAAI,sBAAsB,CAAC,aAAa,qBAAqB,WAAW,YAAY,KAAK,CAAC,MAAM;GAChG,IAAI,qBAAqB,oBAAoB,CAAC,MAAM;GACpD,IAEE,yBAAyB,gBAAgB,SAAS,sBAAsB,qBACxE;IACA,UAAU;IACV,IAAI,QAAQ,IAAI,aAAa,iBAAiB,MAAM,UAAU,WAAW;KACvE,IAAI,sBAAsB;MACxB;MACA;MACA;KACF,CAAC;IACH;GACF;EACF;CACF;CACA,OAAO;EACL,OAAO;EACP,mBAAmB,YAAY;EAC/B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF;AACA,SAAS,sBAAsB,OAAO;CACpC,KAAK,IAAI,KAAK,OAAO;EACnB,IAAI,MAAM,MAAM;EAChB,IAAI,QAAQ,OAAO,QAAQ,cAAc,cAAc,SAAS,GAAG,OAAO,YAAY,gBAAgB,KAAK;GACzG,OAAO;EACT;CACF;CACA,OAAO;AACT;AACA,IAAI,aAAa,SAAS,OAAO;CAC/B,IAAI;CACJ,OAAO,MAAM,YAAY,MAAM,iBAAiB,4BAA4B,MAAM,wBAAwB,QAAQ,8BAA8B,KAAK,IAAI,KAAK,IAAI,0BAA0B,aAAa,MAAM,oBAAoB,MAAM,yBAAyB;AACpQ"}
+{"version":3,"file":"useComponentState.native.js","names":[],"sources":["esm/hooks/useComponentState.native.js"],"sourcesContent":["import { getPlatformDriver, isServer, isWeb } from \"@tamagui/constants\";\nimport { stylePropsAll } from \"@tamagui/helpers\";\nimport { canonicalClauseModifier, scanFlatValue } from \"@tamagui/style-grammar/runtime\";\nimport { mergeIfNotShallowEqual } from \"@tamagui/is-equal-shallow\";\nimport { useDidFinishSSR, useIsClientOnly } from \"@tamagui/use-did-finish-ssr\";\nimport { useRef, useState } from \"react\";\nimport { getSetting } from \"../config\";\nimport { formatDiagnostic } from \"../helpers/formatDiagnostic\";\nimport { isOptimizedForFirstRender } from \"./isOptimizedForFirstRender\";\nimport { defaultComponentState, defaultComponentStateMounted, defaultComponentStateShouldEnter } from \"../defaultComponentState\";\nimport { isObj } from \"../helpers/isObj\";\nimport { log } from \"../helpers/log\";\nfunction _type_of(obj) {\n  \"@swc/helpers - typeof\";\n  return obj && typeof Symbol !== \"undefined\" && obj.constructor === Symbol ? \"symbol\" : typeof obj;\n}\nvar platformPseudoModifiers = /* @__PURE__ */ new Set([\n  \"hover\",\n  \"press\",\n  \"focus\"\n]);\nvar enterModifier = /* @__PURE__ */ new Set([\n  \"enter\"\n]);\nvar lifecycleHandler = {\n  segment(ctx, start, end, isBase, valid) {\n    var scan = ctx.flatScan;\n    if (!isBase && valid && start < end && scan[3]) scan[2] = true;\n    scan[3] = false;\n  },\n  chain(ctx, start, end, valid) {\n    var scan = ctx.flatScan;\n    scan[3] = false;\n    if (!valid) return true;\n    for (var index = start; index <= end; index++) {\n      if (index !== end && scan[0].charCodeAt(index) !== 58) continue;\n      if (scan[1].has(canonicalClauseModifier(scan[0].slice(start, index)))) {\n        scan[3] = true;\n      }\n      start = index + 1;\n    }\n    return true;\n  }\n};\nfunction hasFlatModifier(props, config, modifiers, ctx, variants) {\n  var _ctx;\n  var scan = (_ctx = ctx).flatScan || (_ctx.flatScan = [\n    \"\",\n    enterModifier,\n    false,\n    false\n  ]);\n  for (var key in props) {\n    var value = props[key];\n    var isString = typeof value === \"string\";\n    if (isString ? value.indexOf(\":\") === -1 : !value || (typeof value === \"undefined\" ? \"undefined\" : _type_of(value)) !== \"object\") {\n      continue;\n    }\n    var property = config.shorthands[key] || key;\n    if (!(property in stylePropsAll) && property !== \"transition\" && // conditional variant props resolve style branches too, so their\n    // lifecycle clauses drive the same decision\n    !(variants && key in variants)) {\n      continue;\n    }\n    if (!isString) {\n      if (property === \"transition\") continue;\n      for (var chain in value) {\n        if (chain === \"default\" || value[chain] == null) continue;\n        var start = 0;\n        for (var index = 0; index <= chain.length; index++) {\n          if (index !== chain.length && chain.charCodeAt(index) !== 58) continue;\n          if (modifiers.has(canonicalClauseModifier(chain.slice(start, index)))) {\n            return true;\n          }\n          start = index + 1;\n        }\n      }\n      continue;\n    }\n    scan[0] = value;\n    scan[1] = modifiers;\n    scan[2] = false;\n    scan[3] = false;\n    scanFlatValue(value, lifecycleHandler, ctx);\n    if (scan[2]) return true;\n  }\n  return false;\n}\nvar useComponentState = function(props, animationDriver, staticConfig, config) {\n  \"use no memo\";\n  var _getPlatformDriver, _animationDriver_usePresence;\n  var isHydrated = useDidFinishSSR();\n  var needsHydration = !useIsClientOnly();\n  var useAnimations = (animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.isStub) ? void 0 : animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.useAnimations;\n  var { isHOC } = staticConfig;\n  var stateRef = useRef(\n    // performance: avoid creating object every render\n    void 0\n  );\n  if (!stateRef.current) {\n    stateRef.current = {\n      startedUnhydrated: needsHydration && !isHydrated,\n      optimizeForFirstRender: isOptimizedForFirstRender()\n    };\n  }\n  var hasAnimationProp = Boolean(!isHOC && \"transition\" in props || props.style && hasAnimatedStyleValue(props.style));\n  var _animationDriver_inputStyle;\n  var inputStyle = (_animationDriver_inputStyle = animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.inputStyle) !== null && _animationDriver_inputStyle !== void 0 ? _animationDriver_inputStyle : \"css\";\n  var _animationDriver_outputStyle;\n  var outputStyle = (_animationDriver_outputStyle = animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.outputStyle) !== null && _animationDriver_outputStyle !== void 0 ? _animationDriver_outputStyle : \"css\";\n  var curStateRef = stateRef.current;\n  if (!needsHydration && hasAnimationProp) {\n    curStateRef.hasAnimated = true;\n  }\n  var platformPseudo = Boolean(!isHOC && useAnimations && (animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.avoidReRenders) && ((_getPlatformDriver = getPlatformDriver()) === null || _getPlatformDriver === void 0 ? void 0 : _getPlatformDriver.pseudo) && hasFlatModifier(props, config, platformPseudoModifiers, curStateRef, staticConfig.variants));\n  var willBeAnimatedClient = (function() {\n    var next = !!((hasAnimationProp || platformPseudo) && !isHOC && useAnimations);\n    return Boolean(next || curStateRef.hasAnimated);\n  })();\n  var willBeAnimated = !isServer && willBeAnimatedClient;\n  if (willBeAnimated && !curStateRef.hasAnimated) {\n    curStateRef.hasAnimated = true;\n  }\n  var { disableClassName } = props;\n  var presence = !isHOC && willBeAnimated && props[\"animatePresence\"] !== false && (animationDriver === null || animationDriver === void 0 ? void 0 : (_animationDriver_usePresence = animationDriver.usePresence) === null || _animationDriver_usePresence === void 0 ? void 0 : _animationDriver_usePresence.call(animationDriver)) || null;\n  var presenceState = presence === null || presence === void 0 ? void 0 : presence[2];\n  var isExiting = (presenceState === null || presenceState === void 0 ? void 0 : presenceState.isPresent) === false;\n  var isEntering = (presenceState === null || presenceState === void 0 ? void 0 : presenceState.isPresent) === true && presenceState.initial !== false;\n  var hasEnterStyle = hasFlatModifier(props, config, enterModifier, curStateRef, staticConfig.variants);\n  var hasAnimationThatNeedsHydrate = hasAnimationProp && !isHydrated && ((animationDriver === null || animationDriver === void 0 ? void 0 : animationDriver.isReactNative) || inputStyle !== \"css\");\n  var canImmediatelyEnter = hasEnterStyle || isEntering;\n  var shouldEnter = !isHOC && (hasEnterStyle || isEntering || hasAnimationThatNeedsHydrate || // disableClassName doesnt work server side, only client, so needs hydrate\n  // this is just for a better ux, supports css variables for light/dark, media queries, etc\n  disableClassName);\n  var initialState = shouldEnter ? (\n    // on the very first render we switch all spring animation drivers to css rendering\n    // this is because we need to use css variables, which they don't support to do proper SSR\n    // without flickers of the wrong colors.\n    // but once we do that initial hydration and we are in client side rendering mode,\n    // we can avoid the extra re-render on mount\n    canImmediatelyEnter ? defaultComponentStateShouldEnter : defaultComponentState\n  ) : defaultComponentStateMounted;\n  var disabled = isDisabled(props);\n  if (disabled != null) {\n    initialState.disabled = disabled;\n  }\n  var states = useState(initialState);\n  var state = props.forceStyle ? {\n    ...states[0],\n    [props.forceStyle]: true\n  } : states[0];\n  var setState = states[1];\n  var isAnimated = willBeAnimated;\n  if (isWeb && hasAnimationThatNeedsHydrate && !staticConfig.isHOC && !isHydrated) {\n    isAnimated = false;\n    curStateRef.willHydrate = true;\n  }\n  if (disabled !== state.disabled) {\n    if (disabled) {\n      Object.assign(state, defaultComponentStateMounted);\n    }\n    state.disabled = disabled;\n    setState(function(_) {\n      return {\n        ...state\n      };\n    });\n  }\n  var groupName = props.group;\n  if (!stateRef.current.baseSetStateShallow) {\n    var r = stateRef.current;\n    r.baseSetStateShallow = function(stateOrGetState) {\n      setState(function(prev) {\n        var next = typeof stateOrGetState === \"function\" ? stateOrGetState(prev) : stateOrGetState;\n        var update = mergeIfNotShallowEqual(prev, next);\n        if (process.env.NODE_ENV === \"development\") {\n          var dbg = r.__debug;\n          if (dbg && update !== prev) {\n            console.groupCollapsed(`setStateShallow CHANGE`, \"=>\", update);\n            console.info(`previously`, prev);\n            console.trace();\n            console.groupEnd();\n          }\n        }\n        return update;\n      });\n    };\n  }\n  if (process.env.NODE_ENV === \"development\") {\n    ;\n    stateRef.current.__debug = props.debug;\n  }\n  var setStateShallow = stateRef.current.baseSetStateShallow;\n  if (process.env.NODE_ENV === \"development\" && globalThis.time) globalThis.time`state-useCreateShallowSetState`;\n  var outProps = props;\n  if (presenceState && isAnimated && isHydrated && staticConfig.variants) {\n    if (process.env.NODE_ENV === \"development\" && props.debug === \"verbose\") {\n      var _staticConfig_Component, _staticConfig_Component1;\n      console.warn(formatDiagnostic(\"TAMAGUI_PRESENCE_STATE\", ((_staticConfig_Component = staticConfig.Component) === null || _staticConfig_Component === void 0 ? void 0 : _staticConfig_Component.displayName) || ((_staticConfig_Component1 = staticConfig.Component) === null || _staticConfig_Component1 === void 0 ? void 0 : _staticConfig_Component1.name) || \"TamaguiComponent\", \"AnimatePresence supplied lifecycle state to an animated component\", 'Remove debug=\"verbose\" after inspecting the animation state', \"presenceState\", presenceState));\n    }\n    var { custom } = presenceState;\n    if (isObj(custom)) {\n      outProps = {\n        ...props,\n        ...custom\n      };\n    }\n  }\n  var noClass = !isWeb || !!props.forceStyle;\n  if (!isHydrated) {\n    noClass = false;\n  } else {\n    if (isWeb && isHydrated) {\n      var isAnimatedAndHydrated = isAnimated && isHydrated;\n      var isClassNameDisabled = !staticConfig.acceptsClassName && (getSetting(\"disableSSR\") || !state.unmounted);\n      var isDisabledManually = disableClassName && !state.unmounted;\n      if (\n        // Only disable className for animation drivers that output inline styles (not css)\n        isAnimatedAndHydrated && outputStyle !== \"css\" || isDisabledManually || isClassNameDisabled\n      ) {\n        noClass = true;\n        if (process.env.NODE_ENV === \"development\" && props.debug === \"verbose\") {\n          log(`avoiding className`, {\n            isAnimatedAndHydrated,\n            isDisabledManually,\n            isClassNameDisabled\n          });\n        }\n      }\n    }\n  }\n  return {\n    props: outProps,\n    startedUnhydrated: curStateRef.startedUnhydrated,\n    curStateRef,\n    disabled,\n    groupName,\n    hasAnimationProp,\n    hasEnterStyle,\n    isAnimated,\n    isExiting,\n    isHydrated,\n    presence,\n    presenceState,\n    setState,\n    setStateShallow,\n    noClass,\n    state,\n    stateRef,\n    inputStyle,\n    outputStyle,\n    willBeAnimated,\n    willBeAnimatedClient,\n    platformPseudo\n  };\n};\nfunction hasAnimatedStyleValue(style) {\n  for (var k in style) {\n    var val = style[k];\n    if (val && (typeof val === \"undefined\" ? \"undefined\" : _type_of(val)) === \"object\" && \"_animation\" in val) {\n      return true;\n    }\n  }\n  return false;\n}\nvar isDisabled = function(props) {\n  var _props_accessibilityState;\n  return props.disabled || props.passThrough || ((_props_accessibilityState = props.accessibilityState) === null || _props_accessibilityState === void 0 ? void 0 : _props_accessibilityState.disabled) || props[\"aria-disabled\"] || props.accessibilityDisabled || false;\n};\nexport {\n  useComponentState\n};\n//# sourceMappingURL=useComponentState.js.map\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "3.0.0-beta.745.1",
+  "version": "3.0.0-beta.752.1",
   "license": "MIT",
   "author": {
     "name": "Nate Wienert"
@@ -90,22 +90,22 @@
     "test:web": "vitest --typecheck --run"
   },
   "dependencies": {
-    "@tamagui/compose-refs": "3.0.0-beta.745.1",
-    "@tamagui/constants": "3.0.0-beta.745.1",
-    "@tamagui/dom": "3.0.0-beta.745.1",
-    "@tamagui/helpers": "3.0.0-beta.745.1",
-    "@tamagui/is-equal-shallow": "3.0.0-beta.745.1",
-    "@tamagui/native": "3.0.0-beta.745.1",
-    "@tamagui/normalize-css-color": "3.0.0-beta.745.1",
-    "@tamagui/style-grammar": "3.0.0-beta.745.1",
-    "@tamagui/timer": "3.0.0-beta.745.1",
-    "@tamagui/types": "3.0.0-beta.745.1",
-    "@tamagui/use-did-finish-ssr": "3.0.0-beta.745.1",
-    "@tamagui/use-event": "3.0.0-beta.745.1",
-    "@tamagui/use-force-update": "3.0.0-beta.745.1"
+    "@tamagui/compose-refs": "3.0.0-beta.752.1",
+    "@tamagui/constants": "3.0.0-beta.752.1",
+    "@tamagui/dom": "3.0.0-beta.752.1",
+    "@tamagui/helpers": "3.0.0-beta.752.1",
+    "@tamagui/is-equal-shallow": "3.0.0-beta.752.1",
+    "@tamagui/native": "3.0.0-beta.752.1",
+    "@tamagui/normalize-css-color": "3.0.0-beta.752.1",
+    "@tamagui/style-grammar": "3.0.0-beta.752.1",
+    "@tamagui/timer": "3.0.0-beta.752.1",
+    "@tamagui/types": "3.0.0-beta.752.1",
+    "@tamagui/use-did-finish-ssr": "3.0.0-beta.752.1",
+    "@tamagui/use-event": "3.0.0-beta.752.1",
+    "@tamagui/use-force-update": "3.0.0-beta.752.1"
   },
   "devDependencies": {
-    "@tamagui/build": "3.0.0-beta.745.1",
+    "@tamagui/build": "3.0.0-beta.752.1",
     "@testing-library/react": "^16.1.0",
     "csstype": "^3.0.10",
     "react": "19.2.3",

package/src/helpers/directStyle.ts

@@ -909,7 +909,7 @@ function directAtomic(
     conditionSelector,
     conditionWrappers,
     signature,
-    true,
+    2 as any,
     atomicKey,
     condition
       ? 1 +
@@ -947,7 +947,10 @@ function directAtomic(
     atomics[atomicKey] = atomic
   } else {
     const previousIdentifier = existing.styleObject[StyleObjectIdentifier]
-    const rules = existing.styleObject[StyleObjectRules]
+    // cached rules stay immutable until a same-property contribution needs to
+    // splice or rewrite them.
+    const rules = existing.styleObject[StyleObjectRules].slice()
+    existing.styleObject[StyleObjectRules] = rules
     if (!condition && !isDefault && existing.conditions) {
       for (const key in existing.conditions) {
         const entry = existing.conditions[key]
@@ -1061,7 +1064,10 @@ export function flushDirectStyles(state: GetStyleState, clear = false) {
     const styleObject = atomics[property].styleObject
     const identifier = styleObject[StyleObjectIdentifier]
     if (shouldInsertStyleRules(identifier)) {
-      updateRules(identifier, styleObject[StyleObjectRules])
+      // rulesToInsert owns its array; never expose the cache's borrowed copy.
+      const rules = styleObject[StyleObjectRules].slice()
+      styleObject[StyleObjectRules] = rules
+      updateRules(identifier, rules)
       state.flatRulesToInsert![identifier] = styleObject
     }
   }
@@ -2075,7 +2081,7 @@ export function contributeFrontendValue(
 // resolvable modifier chain; anything else is a structured leaf value
 // (shadowOffset) and stays whole. only the first key is probed, the same way
 // the string scanner commits at its first clause
-function isConditionalStyleObject(
+export function isConditionalStyleObject(
   state: GetStyleState,
   value: Record<string, any>
 ): boolean {

package/src/helpers/getCSSStylesAtomic.ts

@@ -21,7 +21,7 @@ export function getCSSStylesAtomic(style: ViewStyleObject) {
   for (const key in style) {
     if (key === '$$css') continue
     const val = style[key]
-    const so = getStyleObject(style, key)
+    const so = getStyleObject(val, key)
     if (so) {
       out.push(so)
     }
@@ -40,7 +40,7 @@ export function getCSSStyleAtomic(
   classRepetitions = 1
 ): StyleObject | undefined {
   return getStyleObject(
-    { [key]: val } as ViewStyleObject,
+    val,
     key,
     condition,
     wrappers,
@@ -56,7 +56,7 @@ let confRevision = 0
 
 // the direct path rebuilds the same identifier and the same rule strings on
 // every render of every component, and insertStyleRules only ever inserts the
-// FIRST set it sees for an identifier and discards the rest. the accumulated
+// first set it sees for an identifier and discards the rest. the accumulated
 // identity is the whole input to both, so one lookup replaces the hash, the
 // identifier build and every rule string. two levels so a lookup allocates
 // nothing. bounded and cleared the same way simpleHash's cache is.
@@ -66,19 +66,18 @@ let directIdentitiesSize = 0
 type DirectIdentity = { identifier: string; rules: string[] }
 
 const getStyleObject = (
-  style: ViewStyleObject,
+  val: any,
   key: string,
   condition = '',
   wrappers?: readonly string[],
   identity?: string,
-  direct = false,
+  direct: boolean | 2 = false,
   identityKey = key,
   classRepetitions = 1
 ): StyleObject | undefined => {
-  let val = style[key]
   if (val == null) return
   // transform
-  if (key === 'transform' && Array.isArray(style.transform)) {
+  if (key === 'transform' && Array.isArray(val)) {
     val = transformsToString(val)
   }
   const value = normalizeValueWithProperty(val, key)
@@ -99,7 +98,14 @@ const getStyleObject = (
     byKey = directIdentities.get(identityKey)
     const known = byKey?.get(identity)
     if (known) {
-      return [key, value, known.identifier, undefined, known.rules.slice()]
+      // directStyle takes ownership before mutation or public exposure.
+      return [
+        key,
+        value,
+        known.identifier,
+        undefined,
+        direct === 2 ? known.rules : known.rules.slice(),
+      ]
     }
   }
   const rawValue = typeof value === 'string' ? value : `${value}`
@@ -148,7 +154,7 @@ const getStyleObject = (
       byKey = new Map()
       directIdentities.set(identityKey, byKey)
     }
-    byKey.set(identity, { identifier, rules: rules.slice() })
+    byKey.set(identity, { identifier, rules: direct === 2 ? rules : rules.slice() })
     directIdentitiesSize++
   }
   return [
@@ -233,7 +239,7 @@ function createAtomicRules(
   value: any,
   condition = '',
   wrappers?: readonly string[],
-  direct = false,
+  direct: boolean | 2 = false,
   classRepetitions = 1
 ): string[] {
   // longhands get .cls.cls for higher specificity over shorthands

package/src/helpers/getSplitStyles.tsx

@@ -14,6 +14,7 @@ import {
   STYLE_FRONTEND_PREPROCESSED,
 } from './styleFrontend'
 import { getConfig, getFont } from '../config'
+import { isVariable } from '../createVariable'
 import { isDevTools } from '../constants/isDevTools'
 import { mediaState as globalMediaState } from './mediaState'
 import type {
@@ -38,6 +39,7 @@ import type {
   TransitionProp,
   ViewStyleObject,
 } from '../types'
+import { scanFlatValue, type FlatValueHandler } from '@tamagui/style-grammar/runtime'
 import { fixStyles } from './expandStyles'
 import { styleToCSS } from './getCSSStylesAtomic'
 import { getDefaultProps } from './getDefaultProps'
@@ -53,6 +55,7 @@ import {
   contributeVariantClauseValue,
   flushDirectStyles,
   getDirectDynamicThemeAccess,
+  resolveClauseChain,
 } from './directStyle'
 import { contributeFrontendProgram, isFrontendProgram } from './frontendProgram'
 import { skipProps } from './skipProps'
@@ -112,17 +115,128 @@ function compoundMatcherMatches(expected: any, actual: any) {
   return Object.is(expected, actual)
 }
 
-function compoundVariantMatches(
+// clause-string payloads arrive as slices, so booleans and numbers in the
+// matcher compare by their string spelling
+function compoundMatcherMatchesPayload(expected: any, payload: string) {
+  if (Array.isArray(expected)) {
+    return expected.some((value) => compoundMatcherMatchesPayload(value, payload))
+  }
+  return typeof expected === 'string'
+    ? expected === payload
+    : String(expected) === payload
+}
+
+// [source, expected, isChain, chains, matchedBase]
+type CompoundScanContext = [string, any, (chain: string) => boolean, string[], boolean]
+
+const compoundScanHandler: FlatValueHandler<CompoundScanContext> = {
+  segment(ctx, start, end, isBase, valid, source, chainStart, chainEnd, chainValid) {
+    if (!valid || start >= end) return
+    if (!compoundMatcherMatchesPayload(ctx[1], source.slice(start, end))) return
+    if (isBase) {
+      ctx[4] = true
+      return
+    }
+    if (!chainValid) return
+    const chain = source.slice(chainStart, chainEnd)
+    if (ctx[2](chain)) ctx[3].push(chain)
+  },
+  chain() {
+    return true
+  },
+  error() {},
+}
+
+/**
+ * Which condition chains a compound matcher key matches on a prop value.
+ * `['']` means unconditional: an exact value, or a conditional value whose
+ * base/default branch matches (the clause system has no negative conditions,
+ * so a matching base applies the compound in every state, exactly like an
+ * exact value). `null` means no branch matches. Non-empty chains mean the
+ * compound's style applies only under those conditions; the caller rewrites
+ * it into the flat object form so the ordinary pipeline carries it.
+ */
+function matcherChains(
+  expected: any,
+  actual: any,
+  isChain: (chain: string) => boolean
+): string[] | null {
+  if (typeof actual === 'string' && actual.indexOf(':') !== -1) {
+    const scan: CompoundScanContext = [actual, expected, isChain, [], false]
+    scanFlatValue(actual, compoundScanHandler, scan)
+    if (scan[4]) return ['']
+    return scan[3].length ? scan[3] : null
+  }
+  if (
+    actual &&
+    typeof actual === 'object' &&
+    !Array.isArray(actual) &&
+    !isVariable(actual)
+  ) {
+    let conditional = Object.prototype.hasOwnProperty.call(actual, 'default')
+    if (!conditional) {
+      for (const key in actual) {
+        conditional = key.length > 0 && isChain(key)
+        break
+      }
+    }
+    if (conditional) {
+      const chains: string[] = []
+      for (const key in actual) {
+        const payload = actual[key]
+        if (payload == null || !compoundMatcherMatches(expected, payload)) continue
+        if (key === 'default') return ['']
+        if (isChain(key)) chains.push(key)
+      }
+      return chains.length ? chains : null
+    }
+  }
+  return compoundMatcherMatches(expected, actual) ? [''] : null
+}
+
+// the runtime discrimination rule, phrased over an isChain callback: a
+// conditional object names a `default` or opens with a resolvable chain
+function isConditionalObjectValue(
+  value: Record<string, any>,
+  isChain: (chain: string) => boolean
+): boolean {
+  if (Object.prototype.hasOwnProperty.call(value, 'default')) return true
+  for (const key in value) {
+    return key.length > 0 && isChain(key)
+  }
+  return false
+}
+
+const joinChains = (a: string, b: string): string => {
+  if (!a) return b
+  if (!b) return a
+  const segments = a.split(':')
+  for (const segment of b.split(':')) {
+    if (!segments.includes(segment)) segments.push(segment)
+  }
+  return segments.join(':')
+}
+
+function compoundVariantMatchChains(
   compoundVariant: GenericCompoundVariant,
-  props: Record<string, any>
-) {
+  props: Record<string, any>,
+  isChain: (chain: string) => boolean
+): string[] | null {
+  let chains: string[] = ['']
   for (const key in compoundVariant) {
     if (key === 'style') continue
-    if (!compoundMatcherMatches(compoundVariant[key], props[key])) {
-      return false
+    const keyChains = matcherChains(compoundVariant[key], props[key], isChain)
+    if (!keyChains) return null
+    const next: string[] = []
+    for (const a of chains) {
+      for (const b of keyChains) {
+        const joined = joinChains(a, b)
+        if (!next.includes(joined)) next.push(joined)
+      }
     }
+    chains = next
   }
-  return true
+  return chains
 }
 
 type OrderedPropEntry = readonly [string, any]
@@ -149,6 +263,11 @@ function getStyledDefaults(staticConfig: StaticConfig): OrderedPropEntry[] | nul
   return entries
 }
 
+const maybeStyleProgram = (value: any): boolean =>
+  typeof value === 'string'
+    ? value.includes(':')
+    : !!value && typeof value === 'object' && !Array.isArray(value) && !isVariable(value)
+
 function contributeDisplacedStyledDefaults(
   styledDefaults: OrderedPropEntry[] | null,
   processedProps: Record<string, any>,
@@ -164,12 +283,14 @@ function contributeDisplacedStyledDefaults(
     // equal means the default flowed through the merge untouched and will be
     // processed as an ordinary prop entry; different means a call-site value
     // displaced it. Re-injection is only needed when either contribution is a
-    // program; ordinary values retain the prop-level fast path.
+    // program; ordinary values retain the prop-level fast path. an object is
+    // potentially a conditional program (its clause slots must survive a
+    // caller base); re-injecting a displaced structured leaf is a harmless
+    // whole-value overwrite by the later prop entry.
     if (
       propValue !== undefined &&
       propValue !== styledValue &&
-      ((typeof styledValue === 'string' && styledValue.includes(':')) ||
-        (typeof propValue === 'string' && propValue.includes(':')))
+      (maybeStyleProgram(styledValue) || maybeStyleProgram(propValue))
     ) {
       contribute(key, styledValue)
     }
@@ -193,7 +314,8 @@ function forEachPropInForwardOrder(
   processedProps: Record<string, any>,
   staticConfig: StaticConfig,
   shorthands: Record<string, string>,
-  contribute: (key: string, value: any) => void
+  contribute: (key: string, value: any) => void,
+  isChain: (chain: string) => boolean
 ) {
   const processedBaseStyle = staticConfig.baseStyle
   const compoundVariants = staticConfig.compoundVariants
@@ -228,7 +350,8 @@ function forEachPropInForwardOrder(
   // compounds, or caller values into precedence tiers.
   const compoundsByAnchor = new Map<number, OrderedPropEntry[]>()
   for (const compoundVariant of compoundVariants) {
-    if (!compoundVariantMatches(compoundVariant, processedProps)) {
+    const chains = compoundVariantMatchChains(compoundVariant, processedProps, isChain)
+    if (!chains) {
       continue
     }
     const { style } = compoundVariant
@@ -249,7 +372,38 @@ function forEachPropInForwardOrder(
 
     const entries = compoundsByAnchor.get(anchor) || []
     for (const key in style) {
-      entries.push([key, style[key]])
+      const value = style[key]
+      for (const chain of chains) {
+        if (!chain) {
+          entries.push([key, value])
+          continue
+        }
+        // a conditional match rewrites the compound's style into the flat
+        // object form so the ordinary pipeline scopes it to the chain
+        if (
+          value &&
+          typeof value === 'object' &&
+          !Array.isArray(value) &&
+          !isVariable(value) &&
+          isConditionalObjectValue(value, isChain)
+        ) {
+          const composed: Record<string, any> = {}
+          for (const inner in value) {
+            composed[inner === 'default' ? chain : `${chain}:${inner}`] = value[inner]
+          }
+          entries.push([key, composed])
+          continue
+        }
+        if (typeof value === 'string' && value.includes(':')) {
+          if (process.env.NODE_ENV === 'development') {
+            console.warn(
+              `[tamagui] compound variant "${key}" carries a clause string and matched conditionally; dropping it. use the object form in the compound style`
+            )
+          }
+          continue
+        }
+        entries.push([key, { [chain]: value }])
+      }
     }
     compoundsByAnchor.set(anchor, entries)
   }
@@ -934,14 +1088,20 @@ export const getSplitStyles: StyleSplitter = (
               !isHostStyleKey
             )
           } else if (isHOC) {
-            // reduce the clause back to flat-value string form so the wrapped
-            // component's own string parser applies the condition
-            const appended = appendFlatClause(viewProps[key], conditionSource, val)
+            // reduce the clause back to a flat value (string, or the object
+            // form for structured payloads) so the wrapped component's own
+            // parser applies the condition
+            const appended = appendFlatClause(
+              styleState,
+              viewProps[key],
+              conditionSource,
+              val
+            )
             if (appended !== undefined) {
               viewProps[key] = appended
             } else if (process.env.NODE_ENV === 'development') {
               console.warn(
-                `[tamagui] conditional variant value for "${key}" is not string-representable; dropping the clause`
+                `[tamagui] conditional variant value for "${key}" cannot join the existing clause string; dropping the clause`
               )
             }
           } else if (process.env.NODE_ENV === 'development') {
@@ -1020,7 +1180,13 @@ export const getSplitStyles: StyleSplitter = (
     }
   } // end prop contribution
 
-  forEachPropInForwardOrder(processedProps, staticConfig, shorthands, contributeProp)
+  forEachPropInForwardOrder(
+    processedProps,
+    staticConfig,
+    shorthands,
+    contributeProp,
+    (chain) => !!resolveClauseChain(styleState, chain, 0, chain.length)
+  )
 
   if (
     process.env.NODE_ENV === 'development' &&