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

package/dist/esm/hooks/useComponentState.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useComponentState.js","names":[],"sources":["esm/hooks/useComponentState.js"],"sourcesContent":["import { getPlatformDriver, isServer, isWeb } from \"@tamagui/constants\";\nimport { stylePropsAll } from \"@tamagui/helpers\";\nimport {\n  canonicalClauseModifier,\n  scanFlatValue\n} 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 {\n  defaultComponentState,\n  defaultComponentStateMounted,\n  defaultComponentStateShouldEnter\n} from \"../defaultComponentState\";\nimport { isObj } from \"../helpers/isObj\";\nimport { log } from \"../helpers/log\";\nconst platformPseudoModifiers = /* @__PURE__ */ new Set([\"hover\", \"press\", \"focus\"]);\nconst enterModifier = /* @__PURE__ */ new Set([\"enter\"]);\nconst lifecycleHandler = {\n  segment(ctx, start, end, isBase, valid) {\n    const 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    const scan = ctx.flatScan;\n    scan[3] = false;\n    if (!valid) return true;\n    for (let 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  const scan = ctx.flatScan ||= [\"\", enterModifier, false, false];\n  for (const key in props) {\n    const value = props[key];\n    if (typeof value !== \"string\" || value.indexOf(\":\") === -1) continue;\n    const property = config.shorthands[key] || key;\n    if (!(property in stylePropsAll) && property !== \"transition\") continue;\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}\nconst useComponentState = (props, animationDriver, staticConfig, config) => {\n  \"use no memo\";\n  const isHydrated = useDidFinishSSR();\n  const needsHydration = !useIsClientOnly();\n  const useAnimations = animationDriver?.isStub ? void 0 : animationDriver?.useAnimations;\n  const { isHOC } = staticConfig;\n  const 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  const hasAnimationProp = Boolean(\n    !isHOC && \"transition\" in props || props.style && hasAnimatedStyleValue(props.style)\n  );\n  const inputStyle = animationDriver?.inputStyle ?? \"css\";\n  const outputStyle = animationDriver?.outputStyle ?? \"css\";\n  const curStateRef = stateRef.current;\n  if (!needsHydration && hasAnimationProp) {\n    curStateRef.hasAnimated = true;\n  }\n  const platformPseudo = Boolean(\n    !isHOC && useAnimations && animationDriver?.avoidReRenders && getPlatformDriver()?.pseudo && hasFlatModifier(\n      props,\n      config,\n      platformPseudoModifiers,\n      curStateRef\n    )\n  );\n  const willBeAnimatedClient = (() => {\n    const next = !!((hasAnimationProp || platformPseudo) && !isHOC && useAnimations);\n    return Boolean(next || curStateRef.hasAnimated);\n  })();\n  const willBeAnimated = !isServer && willBeAnimatedClient;\n  if (willBeAnimated && !curStateRef.hasAnimated) {\n    curStateRef.hasAnimated = true;\n  }\n  const { disableClassName } = props;\n  const presence = !isHOC && willBeAnimated && props[\"animatePresence\"] !== false && animationDriver?.usePresence?.() || null;\n  const presenceState = presence?.[2];\n  const isExiting = presenceState?.isPresent === false;\n  const isEntering = presenceState?.isPresent === true && presenceState.initial !== false;\n  const hasEnterStyle = hasFlatModifier(\n    props,\n    config,\n    enterModifier,\n    curStateRef\n  );\n  const hasAnimationThatNeedsHydrate = hasAnimationProp && !isHydrated && (animationDriver?.isReactNative || inputStyle !== \"css\");\n  const canImmediatelyEnter = hasEnterStyle || isEntering;\n  const 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  const 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  const disabled = isDisabled(props);\n  if (disabled != null) {\n    initialState.disabled = disabled;\n  }\n  const states = useState(initialState);\n  const state = props.forceStyle ? { ...states[0], [props.forceStyle]: true } : states[0];\n  const setState = states[1];\n  let 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((_) => ({ ...state }));\n  }\n  const groupName = props.group;\n  if (!stateRef.current.baseSetStateShallow) {\n    const r = stateRef.current;\n    r.baseSetStateShallow = (stateOrGetState) => {\n      setState((prev) => {\n        const next = typeof stateOrGetState === \"function\" ? stateOrGetState(prev) : stateOrGetState;\n        const update = mergeIfNotShallowEqual(prev, next);\n        if (process.env.NODE_ENV === \"development\") {\n          const 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  const setStateShallow = stateRef.current.baseSetStateShallow;\n  if (process.env.NODE_ENV === \"development\" && globalThis.time)\n    globalThis.time`state-useCreateShallowSetState`;\n  let outProps = props;\n  if (presenceState && isAnimated && isHydrated && staticConfig.variants) {\n    if (process.env.NODE_ENV === \"development\" && props.debug === \"verbose\") {\n      console.warn(\n        formatDiagnostic(\n          \"TAMAGUI_PRESENCE_STATE\",\n          staticConfig.Component?.displayName || staticConfig.Component?.name || \"TamaguiComponent\",\n          \"AnimatePresence supplied lifecycle state to an animated component\",\n          'Remove debug=\"verbose\" after inspecting the animation state',\n          \"presenceState\",\n          presenceState\n        )\n      );\n    }\n    const { custom } = presenceState;\n    if (isObj(custom)) {\n      outProps = { ...props, ...custom };\n    }\n  }\n  let noClass = !isWeb || !!props.forceStyle;\n  if (!isHydrated) {\n    noClass = false;\n  } else {\n    if (isWeb && isHydrated) {\n      const isAnimatedAndHydrated = isAnimated && isHydrated;\n      const isClassNameDisabled = !staticConfig.acceptsClassName && (getSetting(\"disableSSR\") || !state.unmounted);\n      const 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 (const k in style) {\n    const val = style[k];\n    if (val && typeof val === \"object\" && \"_animation\" in val) {\n      return true;\n    }\n  }\n  return false;\n}\nconst isDisabled = (props) => {\n  return props.disabled || props.passThrough || 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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"}
+{"version":3,"file":"useComponentState.js","names":[],"sources":["esm/hooks/useComponentState.js"],"sourcesContent":["import { getPlatformDriver, isServer, isWeb } from \"@tamagui/constants\";\nimport { stylePropsAll } from \"@tamagui/helpers\";\nimport {\n  canonicalClauseModifier,\n  scanFlatValue\n} 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 {\n  defaultComponentState,\n  defaultComponentStateMounted,\n  defaultComponentStateShouldEnter\n} from \"../defaultComponentState\";\nimport { isObj } from \"../helpers/isObj\";\nimport { log } from \"../helpers/log\";\nconst platformPseudoModifiers = /* @__PURE__ */ new Set([\"hover\", \"press\", \"focus\"]);\nconst enterModifier = /* @__PURE__ */ new Set([\"enter\"]);\nconst lifecycleHandler = {\n  segment(ctx, start, end, isBase, valid) {\n    const 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    const scan = ctx.flatScan;\n    scan[3] = false;\n    if (!valid) return true;\n    for (let 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  const scan = ctx.flatScan ||= [\"\", enterModifier, false, false];\n  for (const key in props) {\n    const value = props[key];\n    const isString = typeof value === \"string\";\n    if (isString ? value.indexOf(\":\") === -1 : !value || typeof value !== \"object\") {\n      continue;\n    }\n    const property = config.shorthands[key] || key;\n    if (!(property in stylePropsAll) && property !== \"transition\") continue;\n    if (!isString) {\n      if (property === \"transition\") continue;\n      for (const chain in value) {\n        if (chain === \"default\" || value[chain] == null) continue;\n        let start = 0;\n        for (let 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}\nconst useComponentState = (props, animationDriver, staticConfig, config) => {\n  \"use no memo\";\n  const isHydrated = useDidFinishSSR();\n  const needsHydration = !useIsClientOnly();\n  const useAnimations = animationDriver?.isStub ? void 0 : animationDriver?.useAnimations;\n  const { isHOC } = staticConfig;\n  const 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  const hasAnimationProp = Boolean(\n    !isHOC && \"transition\" in props || props.style && hasAnimatedStyleValue(props.style)\n  );\n  const inputStyle = animationDriver?.inputStyle ?? \"css\";\n  const outputStyle = animationDriver?.outputStyle ?? \"css\";\n  const curStateRef = stateRef.current;\n  if (!needsHydration && hasAnimationProp) {\n    curStateRef.hasAnimated = true;\n  }\n  const platformPseudo = Boolean(\n    !isHOC && useAnimations && animationDriver?.avoidReRenders && getPlatformDriver()?.pseudo && hasFlatModifier(\n      props,\n      config,\n      platformPseudoModifiers,\n      curStateRef\n    )\n  );\n  const willBeAnimatedClient = (() => {\n    const next = !!((hasAnimationProp || platformPseudo) && !isHOC && useAnimations);\n    return Boolean(next || curStateRef.hasAnimated);\n  })();\n  const willBeAnimated = !isServer && willBeAnimatedClient;\n  if (willBeAnimated && !curStateRef.hasAnimated) {\n    curStateRef.hasAnimated = true;\n  }\n  const { disableClassName } = props;\n  const presence = !isHOC && willBeAnimated && props[\"animatePresence\"] !== false && animationDriver?.usePresence?.() || null;\n  const presenceState = presence?.[2];\n  const isExiting = presenceState?.isPresent === false;\n  const isEntering = presenceState?.isPresent === true && presenceState.initial !== false;\n  const hasEnterStyle = hasFlatModifier(\n    props,\n    config,\n    enterModifier,\n    curStateRef\n  );\n  const hasAnimationThatNeedsHydrate = hasAnimationProp && !isHydrated && (animationDriver?.isReactNative || inputStyle !== \"css\");\n  const canImmediatelyEnter = hasEnterStyle || isEntering;\n  const 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  const 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  const disabled = isDisabled(props);\n  if (disabled != null) {\n    initialState.disabled = disabled;\n  }\n  const states = useState(initialState);\n  const state = props.forceStyle ? { ...states[0], [props.forceStyle]: true } : states[0];\n  const setState = states[1];\n  let 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((_) => ({ ...state }));\n  }\n  const groupName = props.group;\n  if (!stateRef.current.baseSetStateShallow) {\n    const r = stateRef.current;\n    r.baseSetStateShallow = (stateOrGetState) => {\n      setState((prev) => {\n        const next = typeof stateOrGetState === \"function\" ? stateOrGetState(prev) : stateOrGetState;\n        const update = mergeIfNotShallowEqual(prev, next);\n        if (process.env.NODE_ENV === \"development\") {\n          const 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  const setStateShallow = stateRef.current.baseSetStateShallow;\n  if (process.env.NODE_ENV === \"development\" && globalThis.time)\n    globalThis.time`state-useCreateShallowSetState`;\n  let outProps = props;\n  if (presenceState && isAnimated && isHydrated && staticConfig.variants) {\n    if (process.env.NODE_ENV === \"development\" && props.debug === \"verbose\") {\n      console.warn(\n        formatDiagnostic(\n          \"TAMAGUI_PRESENCE_STATE\",\n          staticConfig.Component?.displayName || staticConfig.Component?.name || \"TamaguiComponent\",\n          \"AnimatePresence supplied lifecycle state to an animated component\",\n          'Remove debug=\"verbose\" after inspecting the animation state',\n          \"presenceState\",\n          presenceState\n        )\n      );\n    }\n    const { custom } = presenceState;\n    if (isObj(custom)) {\n      outProps = { ...props, ...custom };\n    }\n  }\n  let noClass = !isWeb || !!props.forceStyle;\n  if (!isHydrated) {\n    noClass = false;\n  } else {\n    if (isWeb && isHydrated) {\n      const isAnimatedAndHydrated = isAnimated && isHydrated;\n      const isClassNameDisabled = !staticConfig.acceptsClassName && (getSetting(\"disableSSR\") || !state.unmounted);\n      const 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 (const k in style) {\n    const val = style[k];\n    if (val && typeof val === \"object\" && \"_animation\" in val) {\n      return true;\n    }\n  }\n  return false;\n}\nconst isDisabled = (props) => {\n  return props.disabled || props.passThrough || 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/dist/esm/hooks/useComponentState.native.js

@@ -51,9 +51,27 @@ function hasFlatModifier(props, config, modifiers, ctx) {
 	]);
 	for (var key in props) {
 		var value = props[key];
-		if (typeof value !== "string" || value.indexOf(":") === -1) continue;
+		var isString = typeof value === "string";
+		if (isString ? value.indexOf(":") === -1 : !value || (typeof value === "undefined" ? "undefined" : _type_of(value)) !== "object") {
+			continue;
+		}
 		var property = config.shorthands[key] || key;
 		if (!(property in stylePropsAll) && property !== "transition") continue;
+		if (!isString) {
+			if (property === "transition") continue;
+			for (var chain in value) {
+				if (chain === "default" || value[chain] == null) continue;
+				var start = 0;
+				for (var index = 0; index <= chain.length; index++) {
+					if (index !== chain.length && chain.charCodeAt(index) !== 58) continue;
+					if (modifiers.has(canonicalClauseModifier(chain.slice(start, index)))) {
+						return true;
+					}
+					start = index + 1;
+				}
+			}
+			continue;
+		}
 		scan[0] = value;
 		scan[1] = modifiers;
 		scan[2] = false;

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    if (typeof value !== \"string\" || value.indexOf(\":\") === -1) continue;\n    var property = config.shorthands[key] || key;\n    if (!(property in stylePropsAll) && property !== \"transition\") continue;\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":"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"}
+{"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":"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"}

package/package.json

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

package/src/helpers/directStyle.ts

@@ -252,16 +252,7 @@ const directStyleHandler: FlatValueHandler<GetStyleState> = {
       )
     }
     if ((!isWeb || !state.flatShouldDoClasses) && result & 2 && !hasBase) {
-      const value =
-        property === 'opacity'
-          ? 1
-          : property === 'scale' || property === 'scaleX' || property === 'scaleY'
-            ? 1
-            : property === 'rotate'
-              ? '0deg'
-              : property === 'x' || property === 'y'
-                ? 0
-                : null
+      const value = implicitLifecycleBase(property)
       if (value !== null) {
         emitValue(
           state,
@@ -281,6 +272,22 @@ const directStyleHandler: FlatValueHandler<GetStyleState> = {
   },
 }
 
+// enter/exit clauses with no authored base animate from the property's natural
+// resting value on the inline-style path (the class path reads it from the
+// cascade instead)
+function implicitLifecycleBase(property: string): string | number | null {
+  return property === 'opacity' ||
+    property === 'scale' ||
+    property === 'scaleX' ||
+    property === 'scaleY'
+    ? 1
+    : property === 'rotate'
+      ? '0deg'
+      : property === 'x' || property === 'y'
+        ? 0
+        : null
+}
+
 const legacyTransformParts = new Set([
   'matrix',
   'perspective',
@@ -2064,6 +2071,21 @@ export function contributeFrontendValue(
   return true
 }
 
+// a flat conditional object either names a `default` or opens with a
+// 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(
+  state: GetStyleState,
+  value: Record<string, any>
+): boolean {
+  if (Object.prototype.hasOwnProperty.call(value, 'default')) return true
+  for (const key in value) {
+    return key.length > 0 && !!resolveClauseChain(state, key, 0, key.length)
+  }
+  return false
+}
+
 export function contributeVariantClauseValue(
   state: GetStyleState,
   property: string,
@@ -2073,6 +2095,36 @@ export function contributeVariantClauseValue(
   originalValue?: any,
   contextOnly = false
 ) {
+  if (
+    value &&
+    typeof value === 'object' &&
+    !Array.isArray(value) &&
+    !isVariable(value) &&
+    isConditionalStyleObject(state, value)
+  ) {
+    // a flat conditional object inside a clause-valued variant: the outer
+    // condition prefixes every inner chain (`sm` + `hover` -> `sm:hover`)
+    for (const key in value) {
+      const payload = value[key]
+      if (payload == null) continue
+      const source = key === 'default' ? conditionSource : `${conditionSource}:${key}`
+      resolveClauseChain(
+        state,
+        source,
+        0,
+        source.length,
+        property,
+        payload,
+        merge,
+        payload,
+        contextOnly,
+        -1,
+        -1,
+        2
+      )
+    }
+    return
+  }
   resolveClauseChain(
     state,
     conditionSource,
@@ -2089,6 +2141,69 @@ export function contributeVariantClauseValue(
   )
 }
 
+function contributeStyleObject(
+  state: GetStyleState,
+  property: string,
+  value: Record<string, any>,
+  merge: MergeStyle,
+  contextOnly: boolean
+) {
+  if (!isConditionalStyleObject(state, value)) return false
+  // parity with conditional strings: shadow and legacy transform parts on web
+  // cannot carry conditions of their own — the composite property owns them
+  if (isWeb && (webShadowParts.has(property) || legacyTransformParts.has(property))) {
+    if (process.env.NODE_ENV === 'development') {
+      warnOnce(`conditional "${property}" needs its composite property; dropping it`)
+    }
+    return true
+  }
+  let hasBase = false
+  const base = value.default
+  if (base != null) {
+    emitValue(state, property, base, 0, '', undefined, '', '', merge, base, contextOnly)
+    hasBase = true
+  }
+  let conditions = 0
+  for (const key in value) {
+    if (key === 'default') continue
+    const payload = value[key]
+    if (payload == null) continue
+    conditions |= resolveClauseChain(
+      state,
+      key,
+      0,
+      key.length,
+      property,
+      payload,
+      merge,
+      payload,
+      contextOnly,
+      -1,
+      -1,
+      1
+    )
+  }
+  if ((!isWeb || !state.flatShouldDoClasses) && conditions & 12 && !hasBase) {
+    const resting = implicitLifecycleBase(property)
+    if (resting !== null) {
+      emitValue(
+        state,
+        property,
+        resting,
+        0,
+        '',
+        undefined,
+        '',
+        '',
+        merge,
+        resting,
+        contextOnly
+      )
+    }
+  }
+  return true
+}
+
 export function contributeStyleValue(
   state: GetStyleState,
   property: string,
@@ -2129,6 +2244,15 @@ export function contributeStyleValue(
       contextOnly
     )
   }
+  if (
+    value &&
+    typeof value === 'object' &&
+    !Array.isArray(value) &&
+    !isVariable(value) &&
+    contributeStyleObject(state, property, value, merge, contextOnly)
+  ) {
+    return true
+  }
   if (value != null) {
     emitValue(
       state,

package/src/hooks/useComponentState.ts

@@ -79,9 +79,32 @@ function hasFlatModifier(
   const scan = (ctx.flatScan ||= ['', enterModifier, false, false])
   for (const key in props) {
     const value = props[key]
-    if (typeof value !== 'string' || value.indexOf(':') === -1) continue
+    const isString = typeof value === 'string'
+    if (isString ? value.indexOf(':') === -1 : !value || typeof value !== 'object') {
+      continue
+    }
     const property = config.shorthands[key] || key
     if (!(property in stylePropsAll) && property !== 'transition') continue
+    if (!isString) {
+      // an object-valued transition is the driver's per-lifecycle config
+      // grammar (`{ default, enter, exit }` timings), not a flat conditional
+      // style value — its keys name when to run, not what style arrives
+      if (property === 'transition') continue
+      // flat conditional objects carry the chain as the key; a structured leaf
+      // (shadowOffset) has no modifier-named key so it never matches
+      for (const chain in value) {
+        if (chain === 'default' || value[chain] == null) continue
+        let start = 0
+        for (let index = 0; index <= chain.length; index++) {
+          if (index !== chain.length && chain.charCodeAt(index) !== 58) continue
+          if (modifiers.has(canonicalClauseModifier(chain.slice(start, index)))) {
+            return true
+          }
+          start = index + 1
+        }
+      }
+      continue
+    }
     scan[0] = value
     scan[1] = modifiers
     scan[2] = false

package/src/styled.tsx

@@ -291,10 +291,16 @@ type HTMLElementSpecificProps<T extends keyof HTMLElementTagNameMap> = T extends
               ? Omit<LabelHTMLAttributes<HTMLLabelElement>, ConflictingHTMLProps>
               : Omit<HTMLAttributes<HTMLElement>, ConflictingHTMLProps>
 
-// base style props based on element type
-// use StackStyle/TextStyle to get token support (WithThemeShorthandsPseudosMedia)
+// base style props based on element type. the BASE type feeds TamaguiComponent,
+// whose GetFinalProps applies WithThemeAndShorthands itself — passing the
+// already-wrapped TextStyle/StackStyle there wraps twice, which the flat object
+// value form turns into a type-explosion. authored options still use the
+// wrapped form so tokens and clauses typecheck in the definition
 type HTMLElementStyleBase<T extends keyof HTMLElementTagNameMap> =
-  T extends TextLikeElements ? TextStyle : StackStyle
+  T extends TextLikeElements ? TextStylePropsBase : StackStyleBase
+type HTMLElementStyle<T extends keyof HTMLElementTagNameMap> = T extends TextLikeElements
+  ? TextStyle
+  : StackStyle
 
 // runtime check for text-like elements
 const textLikeElements = new Set<string>([
@@ -344,7 +350,7 @@ export function styledHtml<
   Variants extends VariantDefinitions<any, any> | undefined = undefined,
 >(
   tag: Tag,
-  options?: Partial<HTMLElementStyleBase<Tag>> & {
+  options?: Partial<HTMLElementStyle<Tag>> & {
     displayName?: string
     variants?: Variants
     defaultVariants?: GetVariantAcceptedValues<NonNullable<Variants>>
@@ -692,7 +698,7 @@ function styledImpl<
 type StyledHtmlFactory<Tag extends keyof HTMLElementTagNameMap> = <
   Variants extends VariantDefinitions<any, any> | undefined = undefined,
 >(
-  options?: Partial<HTMLElementStyleBase<Tag>> & {
+  options?: Partial<HTMLElementStyle<Tag>> & {
     displayName?: string
     variants?: Variants
     defaultVariants?: GetVariantAcceptedValues<NonNullable<Variants>>

package/src/types.tsx

@@ -2019,8 +2019,9 @@ export type SafeAreaValueKeys =
   | 'end'
 
 /**
- * Flat values: every style prop accepts a clause-bearing string
- * (`bg="red hover:blue"`, `p="4 sm:6"`). `(string & {})` admits the broad
+ * Flat values: every style prop accepts either a clause-bearing string
+ * (`bg="red hover:blue"`, `p="4 sm:6"`) or its flat object equivalent
+ * (`bg={{ default: 'red', hover: 'blue' }}`). `(string & {})` admits the broad
  * string without collapsing the token/literal unions, so autocomplete
  * survives (design record, "Types and editor tooling"). Candidate and
  * modifier validation is the compiler's and language service's job.
@@ -2033,14 +2034,38 @@ type ClauseModifierName =
   | AllPlatforms
 
 /**
- * Keep type-provided clause completion to the first modifier prefix. Adding
- * base values, payloads, or another modifier creates large unions throughout
- * the component prop graph and makes tsserver rebuild them after every edit.
- * The language-service plugin owns completion after the first prefix.
+ * Object keys have no `(string & {})` escape hatch the way string values do,
+ * so the container (`@sm`, `@sm/card`) and named-group (`group-hover/card`)
+ * spellings need their own single-template arms.
  */
-type FlatClausePrefix = `${ClauseModifierName}:`
+type FlatClauseName =
+  | ClauseModifierName
+  | `${ClauseModifierName}:${string}`
+  | `@${string}`
+  | `group-${CoreStateModifierName}/${string}`
 
-export type FlatStyleValue<T> = T | FlatClausePrefix | (string & {})
+/**
+ * The structured twin of a flat clause string. It stays deliberately
+ * non-recursive: the condition chain is the key, and every leaf keeps the
+ * style property's value type. `(string & {})` rides along on each leaf for
+ * the same reason it does on the whole value: the string form accepts any
+ * payload text, and without it two `FlatStyleValue`s that differ only by
+ * string members ('unset', a fallback union) stop being assignable across
+ * package boundaries.
+ */
+export type FlatStyleObject<T> = { default?: T | (string & {}) } & {
+  [K in FlatClauseName]?: T | (string & {})
+}
+
+/**
+ * The string arm stays at base values only: `(string & {})` admits every
+ * clause string, and structured clause completion comes from the object
+ * form's keys (and the language-service plugin for strings). A per-prop
+ * `${modifier}:` prefix union used to ride along for first-prefix
+ * completion; it multiplied across the whole component prop graph and the
+ * object form made it redundant.
+ */
+export type FlatStyleValue<T> = T | FlatStyleObject<T> | (string & {})
 
 export type WithThemeValues<T extends object> = {
   [K in keyof T]:
@@ -2739,6 +2764,10 @@ export interface TextNonStyleProps
       // web-standard `userSelect` is the one authoring name; core maps it to
       // RN's `selectable` prop on native
       | 'selectable'
+      // the style side owns these as flat-value style props; intersecting
+      // RN's plain unions would strip the clause string and object forms
+      | 'numberOfLines'
+      | 'pointerEvents'
     >,
     ExtendBaseTextProps,
     TamaguiComponentPropsBase {

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

@@ -1 +1 @@
-{"version":3,"file":"directStyle.d.ts","sourceRoot":"","sources":["../../src/helpers/directStyle.ts"],"names":[],"mappings":"AAcA,OAAO,EAYL,KAAK,WAAW,EACjB,MAAM,gCAAgC,CAAA;AAIvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAiB7C,MAAM,MAAM,UAAU,GAAG,CACvB,KAAK,EAAE,aAAa,EACpB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,GAAG,EACV,UAAU,EAAE,MAAM,EAClB,gBAAgB,CAAC,EAAE,OAAO,EAC1B,aAAa,CAAC,EAAE,GAAG,KAChB,IAAI,CAAA;AA+TT,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAQrD;AAED,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,aAAa,EACpB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,EACX,QAAQ,CAAC,EAAE,MAAM,EACjB,GAAG,CAAC,EAAE,GAAG,EACT,KAAK,CAAC,EAAE,UAAU,EAClB,aAAa,CAAC,EAAE,GAAG,EACnB,WAAW,UAAQ,EACnB,YAAY,SAAK,EACjB,UAAU,SAAK,EACf,OAAO,SAAI,GACV,MAAM,CAmQR;AA2ND,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,OAAO,EACd,YAAY,SAAK,UAGlB;AAuKD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,UAAQ,QAapE;AAED,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,aAAa,uBAE/D;AA84BD,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,UAAU,EACjB,aAAa,CAAC,EAAE,GAAG,EACnB,WAAW,UAAQ,WA4CpB;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,WAAW,EAClB,KAAK,EAAE,UAAU,EACjB,WAAW,UAAQ,WAgCpB;AAED,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,GAAG,EACV,eAAe,EAAE,MAAM,EACvB,KAAK,EAAE,UAAU,EACjB,aAAa,CAAC,EAAE,GAAG,EACnB,WAAW,UAAQ,QAgBpB;AAED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,GAAG,EACV,KAAK,EAAE,UAAU,EACjB,aAAa,CAAC,EAAE,GAAG,EACnB,WAAW,UAAQ,WAmDpB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,QAatE"}
+{"version":3,"file":"directStyle.d.ts","sourceRoot":"","sources":["../../src/helpers/directStyle.ts"],"names":[],"mappings":"AAcA,OAAO,EAYL,KAAK,WAAW,EACjB,MAAM,gCAAgC,CAAA;AAIvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAiB7C,MAAM,MAAM,UAAU,GAAG,CACvB,KAAK,EAAE,aAAa,EACpB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,GAAG,EACV,UAAU,EAAE,MAAM,EAClB,gBAAgB,CAAC,EAAE,OAAO,EAC1B,aAAa,CAAC,EAAE,GAAG,KAChB,IAAI,CAAA;AAsUT,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAQrD;AAED,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,aAAa,EACpB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,EACX,QAAQ,CAAC,EAAE,MAAM,EACjB,GAAG,CAAC,EAAE,GAAG,EACT,KAAK,CAAC,EAAE,UAAU,EAClB,aAAa,CAAC,EAAE,GAAG,EACnB,WAAW,UAAQ,EACnB,YAAY,SAAK,EACjB,UAAU,SAAK,EACf,OAAO,SAAI,GACV,MAAM,CAmQR;AA2ND,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,OAAO,EACd,YAAY,SAAK,UAGlB;AAuKD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,UAAQ,QAapE;AAED,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,aAAa,uBAE/D;AA84BD,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,UAAU,EACjB,aAAa,CAAC,EAAE,GAAG,EACnB,WAAW,UAAQ,WA4CpB;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,WAAW,EAClB,KAAK,EAAE,UAAU,EACjB,WAAW,UAAQ,WAgCpB;AAiBD,wBAAgB,4BAA4B,CAC1C,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,GAAG,EACV,eAAe,EAAE,MAAM,EACvB,KAAK,EAAE,UAAU,EACjB,aAAa,CAAC,EAAE,GAAG,EACnB,WAAW,UAAQ,QA8CpB;AAiED,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,GAAG,EACV,KAAK,EAAE,UAAU,EACjB,aAAa,CAAC,EAAE,GAAG,EACnB,WAAW,UAAQ,WA4DpB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,QAatE"}

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

@@ -1 +1 @@
-{"version":3,"file":"useComponentState.d.ts","sourceRoot":"","sources":["../../src/hooks/useComponentState.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EACV,iBAAiB,EACjB,YAAY,EACZ,qBAAqB,EACrB,wBAAwB,EACxB,qBAAqB,EACrB,SAAS,EAEV,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAiE9C,eAAO,MAAM,iBAAiB,UACrB,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,mBACjC,iBAAiB,CAAC,iBAAiB,CAAC,gBACvC,YAAY,UAClB,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;CAiS9B,CAAA"}
+{"version":3,"file":"useComponentState.d.ts","sourceRoot":"","sources":["../../src/hooks/useComponentState.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EACV,iBAAiB,EACjB,YAAY,EACZ,qBAAqB,EACrB,wBAAwB,EACxB,qBAAqB,EACrB,SAAS,EAEV,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAwF9C,eAAO,MAAM,iBAAiB,UACrB,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,mBACjC,iBAAiB,CAAC,iBAAiB,CAAC,gBACvC,YAAY,UAClB,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;CAiS9B,CAAA"}

package/types/styled.d.ts

@@ -1,7 +1,7 @@
 import type { AnchorHTMLAttributes, ButtonHTMLAttributes, FormHTMLAttributes, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
 import type { FrontendComponent, StyleFrontend } from './helpers/styleFrontend';
 import type { GetRef } from './interfaces/GetRef';
-import type { CompoundVariantDefinition, GetBaseStyles, GetNonStyledProps, GetProps, GetStaticConfig, GetStyledVariants, InferStyleProps, InferStyledProps, StackStyle, StaticConfigPublic, StylableComponent, StyledContext, TamaDefer, TamaguiComponent, TamaguiComponentPropsBase, TextStyle, ThemeValueByCategory, VariantDefinitions, VariantResolverKey, VariantResolverValue, VariantSpreadFunction } from './types';
+import type { CompoundVariantDefinition, GetBaseStyles, GetNonStyledProps, GetProps, GetStaticConfig, GetStyledVariants, InferStyleProps, InferStyledProps, StackStyle, StackStyleBase, StaticConfigPublic, StylableComponent, StyledContext, TamaDefer, TamaguiComponent, TamaguiComponentPropsBase, TextStyle, TextStylePropsBase, ThemeValueByCategory, VariantDefinitions, VariantResolverKey, VariantResolverValue, VariantSpreadFunction } from './types';
 import type { Text } from './views/Text';
 export { createVariantResolver } from './types';
 type AreVariantsUndefined<Variants> = Required<Variants> extends {
@@ -41,7 +41,8 @@ type StyledComponentResult<ParentComponent extends StylableComponent, StyledConf
 type TextLikeElements = 'a' | 'abbr' | 'b' | 'bdi' | 'bdo' | 'cite' | 'code' | 'data' | 'del' | 'dfn' | 'em' | 'i' | 'ins' | 'kbd' | 'label' | 'mark' | 'q' | 's' | 'samp' | 'small' | 'span' | 'strong' | 'sub' | 'sup' | 'time' | 'u' | 'var';
 type ConflictingHTMLProps = 'color' | 'display' | 'height' | 'width' | 'size' | 'left' | 'right' | 'top' | 'bottom' | 'translate' | 'content';
 type HTMLElementSpecificProps<T extends keyof HTMLElementTagNameMap> = T extends 'a' ? Omit<AnchorHTMLAttributes<HTMLAnchorElement>, ConflictingHTMLProps> : T extends 'button' ? Omit<ButtonHTMLAttributes<HTMLButtonElement>, ConflictingHTMLProps> : T extends 'input' ? Omit<InputHTMLAttributes<HTMLInputElement>, ConflictingHTMLProps> : T extends 'select' ? Omit<SelectHTMLAttributes<HTMLSelectElement>, ConflictingHTMLProps> : T extends 'textarea' ? Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, ConflictingHTMLProps> : T extends 'form' ? Omit<FormHTMLAttributes<HTMLFormElement>, ConflictingHTMLProps> : T extends 'label' ? Omit<LabelHTMLAttributes<HTMLLabelElement>, ConflictingHTMLProps> : Omit<HTMLAttributes<HTMLElement>, ConflictingHTMLProps>;
-type HTMLElementStyleBase<T extends keyof HTMLElementTagNameMap> = T extends TextLikeElements ? TextStyle : StackStyle;
+type HTMLElementStyleBase<T extends keyof HTMLElementTagNameMap> = T extends TextLikeElements ? TextStylePropsBase : StackStyleBase;
+type HTMLElementStyle<T extends keyof HTMLElementTagNameMap> = T extends TextLikeElements ? TextStyle : StackStyle;
 /**
  * styledHtml() for HTML element tags like 'a', 'button', 'div', etc.
  * Automatically provides element-specific props (href for anchors, type for buttons, etc.)
@@ -54,7 +55,7 @@ type HTMLElementStyleBase<T extends keyof HTMLElementTagNameMap> = T extends Tex
  * // StyledAnchor now accepts `href` prop with proper typing
  * <StyledAnchor href="/path">Link</StyledAnchor>
  */
-export declare function styledHtml<Tag extends keyof HTMLElementTagNameMap, Variants extends VariantDefinitions<any, any> | undefined = undefined>(tag: Tag, options?: Partial<HTMLElementStyleBase<Tag>> & {
+export declare function styledHtml<Tag extends keyof HTMLElementTagNameMap, Variants extends VariantDefinitions<any, any> | undefined = undefined>(tag: Tag, options?: Partial<HTMLElementStyle<Tag>> & {
     displayName?: string;
     variants?: Variants;
     defaultVariants?: GetVariantAcceptedValues<NonNullable<Variants>>;
@@ -74,7 +75,7 @@ declare function styled<ParentComponent extends StylableComponent, StyledConfig
  * global setting.
  */
 export declare function createFrontendStyled(frontend: StyleFrontend): (ComponentIn: any, optionsOrBaseClassName?: any, configOrOptions?: any, maybeConfig?: any) => FrontendComponent;
-type StyledHtmlFactory<Tag extends keyof HTMLElementTagNameMap> = <Variants extends VariantDefinitions<any, any> | undefined = undefined>(options?: Partial<HTMLElementStyleBase<Tag>> & {
+type StyledHtmlFactory<Tag extends keyof HTMLElementTagNameMap> = <Variants extends VariantDefinitions<any, any> | undefined = undefined>(options?: Partial<HTMLElementStyle<Tag>> & {
     displayName?: string;
     variants?: Variants;
     defaultVariants?: GetVariantAcceptedValues<NonNullable<Variants>>;