@tamagui/web 1.74.3 → 1.74.4

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

@@ -0,0 +1,85 @@
+import { isWeb } from "@tamagui/constants";
+import React, {
+  Children,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  useMemo,
+  useRef
+} from "react";
+import { variableToString } from "../createVariable";
+import { ThemeManagerContext } from "../helpers/ThemeManagerContext";
+import { useChangeThemeEffect } from "../hooks/useTheme";
+import { ThemeDebug } from "./ThemeDebug";
+import { jsx } from "react/jsx-runtime";
+const Theme = forwardRef(function(props, ref) {
+  if (props.disable)
+    return props.children;
+  const isRoot = !!props._isRoot, disableDirectChildTheme = props["disable-child-theme"], themeState = useChangeThemeEffect(props, isRoot), children = useMemo(() => {
+    let children2 = disableDirectChildTheme ? Children.map(
+      props.children,
+      (child) => cloneElement(child, { "data-disable-theme": !0 })
+    ) : props.children;
+    if (ref)
+      try {
+        React.Children.only(children2), children2 = cloneElement(children2, { ref });
+      } catch {
+      }
+    return process.env.NODE_ENV === "development" && props.debug === "visualize" && (children2 = /* @__PURE__ */ jsx(ThemeDebug, { themeState, themeProps: props, children: children2 })), children2;
+  }, [props.children, disableDirectChildTheme]);
+  return useThemedChildren(themeState, children, props, isRoot);
+});
+Theme.avoidForwardRef = !0;
+function useThemedChildren(themeState, children, props, isRoot = !1) {
+  const { themeManager, isNewTheme } = themeState, { shallow, forceClassName } = props, hasEverThemed = useRef(!1);
+  if (isNewTheme && (hasEverThemed.current = !0), !(isNewTheme || props.inverse || hasEverThemed.current || forceClassName || isRoot))
+    return children;
+  let next = children;
+  shallow && themeManager && (next = Children.toArray(children).map((child) => isValidElement(child) ? cloneElement(
+    child,
+    void 0,
+    /* @__PURE__ */ jsx(Theme, { name: themeManager.state.parentName, children: child.props.children })
+  ) : child));
+  const elementsWithContext = themeManager ? /* @__PURE__ */ jsx(ThemeManagerContext.Provider, { value: themeManager, children: next }) : next;
+  return forceClassName === !1 ? elementsWithContext : isWeb ? wrapThemeElements({
+    children: elementsWithContext,
+    themeState,
+    forceClassName,
+    isRoot
+  }) : elementsWithContext;
+}
+function wrapThemeElements({
+  children,
+  themeState,
+  forceClassName,
+  isRoot
+}) {
+  if (isRoot && forceClassName === !1)
+    return children;
+  const inverse = themeState.state?.inverse;
+  if (!themeState.isNewTheme && !inverse && !forceClassName)
+    return /* @__PURE__ */ jsx("span", { className: "_dsp_contents is_Theme", children });
+  const themeColor = themeState.state?.theme && themeState.isNewTheme ? variableToString(themeState.state.theme.color) : "", colorStyle = themeColor ? {
+    color: themeColor
+  } : void 0;
+  let className = themeState.state?.className || "";
+  isRoot && (className = className.replace("t_sub_theme", ""));
+  let themedChildren = /* @__PURE__ */ jsx("span", { className: `${className} _dsp_contents is_Theme`, style: colorStyle, children });
+  if (inverse != null || forceClassName) {
+    const name = themeState.state?.name || "";
+    themedChildren = /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `${name.startsWith("light") ? "t_light" : name.startsWith("dark") ? "t_dark" : ""} _dsp_contents ${inverse ? "is_inversed" : ""}`,
+        children: themedChildren
+      }
+    );
+  }
+  return themedChildren;
+}
+export {
+  Theme,
+  useThemedChildren,
+  wrapThemeElements
+};
+//# sourceMappingURL=Theme.js.map

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

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../src/views/Theme.tsx"],
+  "mappings": "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",
+  "names": ["children"]
+}

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

@@ -0,0 +1,11 @@
+function ThemeDebug({
+  themeState,
+  themeProps,
+  children
+}) {
+  return children;
+}
+export {
+  ThemeDebug
+};
+//# sourceMappingURL=ThemeDebug.native.js.map

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

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../src/views/ThemeDebug.native.tsx"],
+  "mappings": "AAGO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AAGD,SAAO;AACT;",
+  "names": []
+}

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

@@ -0,0 +1,26 @@
+import { isClient } from "@tamagui/constants";
+import { useLayoutEffect } from "react";
+import { THEME_CLASSNAME_PREFIX } from "../constants/constants";
+import { Theme } from "./Theme";
+import { jsx } from "react/jsx-runtime";
+const ThemeProvider = (props) => (isClient && useLayoutEffect(() => {
+  if (props.disableRootThemeClass)
+    return;
+  const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`, target = props.themeClassNameOnRoot ? document.documentElement : document.body;
+  return target.classList.add(cn), () => {
+    target.classList.remove(cn);
+  };
+}, [props.defaultTheme, props.disableRootThemeClass, props.themeClassNameOnRoot]), /* @__PURE__ */ jsx(
+  Theme,
+  {
+    className: props.className,
+    name: props.defaultTheme,
+    forceClassName: !props.disableRootThemeClass,
+    _isRoot: !0,
+    children: props.children
+  }
+));
+export {
+  ThemeProvider
+};
+//# sourceMappingURL=ThemeProvider.js.map

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

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../src/views/ThemeProvider.tsx"],
+  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAEhC,SAAS,8BAA8B;AACvC,SAAS,aAAa;AA0BlB;AAfG,MAAM,gBAAgB,CAAC,WAExB,YACF,gBAAgB,MAAM;AACpB,MAAI,MAAM;AAAuB;AACjC,QAAM,KAAK,GAAG,sBAAsB,GAAG,MAAM,YAAY,IACnD,SAAS,MAAM,uBAAuB,SAAS,kBAAkB,SAAS;AAChF,gBAAO,UAAU,IAAI,EAAE,GAChB,MAAM;AACX,WAAO,UAAU,OAAO,EAAE;AAAA,EAC5B;AACF,GAAG,CAAC,MAAM,cAAc,MAAM,uBAAuB,MAAM,oBAAoB,CAAC,GAIhF;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,MAAM;AAAA,IACjB,MAAM,MAAM;AAAA,IAEZ,gBAAgB,CAAC,MAAM;AAAA,IAEvB,SAAO;AAAA,IAEN,gBAAM;AAAA;AACT;",
+  "names": []
+}

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

@@ -0,0 +1,13 @@
+import { validStyles } from "@tamagui/helpers";
+import { createComponent } from "../createComponent";
+const View = createComponent({
+  acceptsClassName: !0,
+  defaultProps: {
+    display: "flex"
+  },
+  validStyles
+});
+export {
+  View
+};
+//# sourceMappingURL=View.js.map

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

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../../src/views/View.tsx"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAE5B,SAAS,uBAAuB;AAKzB,MAAM,OAAO,gBAAkD;AAAA,EACpE,kBAAkB;AAAA,EAClB,cAAc;AAAA,IACZ,SAAS;AAAA,EACX;AAAA,EACA;AACF,CAAC;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.74.3",
+  "version": "1.74.4",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,19 +27,19 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "1.74.3",
-    "@tamagui/constants": "1.74.3",
-    "@tamagui/helpers": "1.74.3",
-    "@tamagui/normalize-css-color": "1.74.3",
-    "@tamagui/timer": "1.74.3",
-    "@tamagui/use-did-finish-ssr": "1.74.3",
-    "@tamagui/use-force-update": "1.74.3"
+    "@tamagui/compose-refs": "1.74.4",
+    "@tamagui/constants": "1.74.4",
+    "@tamagui/helpers": "1.74.4",
+    "@tamagui/normalize-css-color": "1.74.4",
+    "@tamagui/timer": "1.74.4",
+    "@tamagui/use-did-finish-ssr": "1.74.4",
+    "@tamagui/use-force-update": "1.74.4"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.74.3",
+    "@tamagui/build": "1.74.4",
     "@testing-library/react": "^14.0.0",
     "csstype": "^3.0.10",
     "react": "^18.2.0",

package/src/helpers/propMapper.ts

@@ -1,4 +1,4 @@
-import { isAndroid, isWeb } from '@tamagui/constants'
+import { isAndroid } from '@tamagui/constants'
 import { tokenCategories } from '@tamagui/helpers'
 
 import { getConfig } from '../config'
@@ -8,7 +8,6 @@ import type {
   GetStyleState,
   PropMapper,
   ResolveVariableAs,
-  SplitStyleProps,
   StyleResolver,
   TamaguiInternalConfig,
   VariantSpreadFunction,
@@ -81,7 +80,7 @@ export const propMapper: PropMapper = (key, value, styleStateIn, subPropsIn) =>
     if (value[0] === '$') {
       value = getTokenForKey(key, value, styleProps.resolveValues, styleState)
     } else if (isVariable(value)) {
-      value = resolveVariableValue(value, styleProps.resolveValues)
+      value = resolveVariableValue(key, value, styleProps.resolveValues)
     }
   }
 
@@ -228,27 +227,27 @@ const resolveTokensAndVariants: StyleResolver<Object> = (
     console.log(`   - resolveTokensAndVariants`, key, value)
   }
 
-  for (const rKey in value) {
-    const fKey = conf.shorthands[rKey] || rKey
-    const val = value[rKey]
+  for (const _key in value) {
+    const subKey = conf.shorthands[_key] || _key
+    const val = value[_key]
 
     if (styleProps.noExpand) {
-      res[fKey] = val
+      res[subKey] = val
     } else {
-      if (variants && fKey in variants) {
+      if (variants && subKey in variants) {
         // if its a variant expanded, attach to curProps
-        styleState.curProps[fKey] = val
+        styleState.curProps[subKey] = val
 
         // avoids infinite loop if variant is matching a style prop
         // eg: { variants: { flex: { true: { flex: 2 } } } }
         if (parentVariantKey && parentVariantKey === key) {
-          res[fKey] =
+          res[subKey] =
             // SYNC WITH *1
             val[0] === '$'
-              ? getTokenForKey(fKey, val, styleProps.resolveValues, styleState)
+              ? getTokenForKey(subKey, val, styleProps.resolveValues, styleState)
               : val
         } else {
-          const variantOut = resolveVariants(fKey, val, styleProps, styleState, key)
+          const variantOut = resolveVariants(subKey, val, styleProps, styleState, key)
 
           // apply, merging sub-styles
           if (variantOut) {
@@ -268,7 +267,7 @@ const resolveTokensAndVariants: StyleResolver<Object> = (
     }
 
     if (isVariable(val)) {
-      res[fKey] = resolveVariableValue(val, styleProps.resolveValues)
+      res[subKey] = resolveVariableValue(subKey, val, styleProps.resolveValues)
       continue
     }
 
@@ -276,32 +275,38 @@ const resolveTokensAndVariants: StyleResolver<Object> = (
       const fVal =
         // SYNC WITH *1
         val[0] === '$'
-          ? getTokenForKey(fKey, val, styleProps.resolveValues, styleState)
+          ? getTokenForKey(subKey, val, styleProps.resolveValues, styleState)
           : val
-      res[fKey] = fVal
+
+      res[subKey] = fVal
       continue
     }
 
     if (isObj(val)) {
-      const subObject = resolveTokensAndVariants(fKey, val, styleProps, styleState, key)
+      const subObject = resolveTokensAndVariants(subKey, val, styleProps, styleState, key)
 
       if (process.env.NODE_ENV === 'development' && debug === 'verbose') {
         // biome-ignore lint/suspicious/noConsoleLog: <explanation>
-        console.log(`object`, fKey, subObject)
+        console.log(`object`, subKey, subObject)
       }
 
       // sub-objects: media queries, pseudos, shadowOffset
-      res[fKey] ??= {}
-      Object.assign(res[fKey], subObject)
+      res[subKey] ??= {}
+      Object.assign(res[subKey], subObject)
     } else {
       // nullish values cant be tokens, need no extra parsing
-      res[fKey] = val
+      res[subKey] = val
     }
 
     if (process.env.NODE_ENV === 'development') {
       if (debug) {
-        if (res[fKey]?.[0] === '$') {
-          console.warn(`⚠️ Missing token in theme ${theme.name}:`, fKey, res[fKey], theme)
+        if (res[subKey]?.[0] === '$') {
+          console.warn(
+            `⚠️ Missing token in theme ${theme.name}:`,
+            subKey,
+            res[subKey],
+            theme
+          )
         }
       }
     }
@@ -418,7 +423,7 @@ export const getTokenForKey = (
   }
 
   if (hasSet) {
-    const out = resolveVariableValue(valOrVar, resolveAs)
+    const out = resolveVariableValue(key, valOrVar, resolveAs)
     if (process.env.NODE_ENV === 'development' && styleState.debug === 'verbose') {
       // biome-ignore lint/suspicious/noConsoleLog: <explanation>
       console.log(`resolved`, resolveAs, valOrVar.get, out)
@@ -441,6 +446,7 @@ export const getTokenForKey = (
 }
 
 function resolveVariableValue(
+  key: string,
   valOrVar: Variable | any,
   resolveValues?: ResolveVariableAs
 ) {
@@ -451,9 +457,14 @@ function resolveVariableValue(
     }
     // @ts-expect-error this is fine until we can type better
     const get = valOrVar.get
-    if (typeof get === 'function') {
-      return get()
+
+    // shadowColor doesn't support dynamic style
+    if (process.env.TAMAGUI_TARGET !== 'native' || key !== 'shadowColor') {
+      if (typeof get === 'function') {
+        return get(resolveValues === 'web' ? 'web' : undefined)
+      }
     }
+
     return process.env.TAMAGUI_TARGET === 'native' ? valOrVar.val : valOrVar.variable
   }
   return valOrVar

package/src/hooks/useTheme.tsx

@@ -40,7 +40,19 @@ function getDefaultThemeProxied() {
 }
 
 export type ThemeGettable<Val> = Val & {
-  get: () =>
+  /**
+   * Tries to return an optimized value that avoids the need for re-rendering:
+   * On web a CSS variable, on iOS a dynamic color, on Android it doesn't
+   * optimize and returns the underyling value.
+   *
+   * See: https://reactnative.dev/docs/dynamiccolorios
+   *
+   * @param platform when "web" it will only return the dynamic value for web, avoiding the iOS dynamic value.
+   * For things like SVG, gradients, or other external components that don't support it, use this option.
+   */
+  get: (
+    platform?: 'web'
+  ) =>
     | string
     | (Val extends Variable<infer X>
         ? X extends VariableValGeneric
@@ -179,13 +191,18 @@ export function getThemeProxied(
                 // always track .val
                 track(keyString)
               } else if (subkey === 'get') {
-                return () => {
+                return (platform?: 'web') => {
                   const outVal = getVariable(val)
 
                   if (process.env.TAMAGUI_TARGET === 'native') {
                     // ios can avoid re-rendering in some cases when we are using a root light/dark
                     // disabled in cases where we have animations
-                    if (isIos && !deopt && config.settings.fastSchemeChange) {
+                    if (
+                      platform !== 'web' &&
+                      isIos &&
+                      !deopt &&
+                      config.settings.fastSchemeChange
+                    ) {
                       const isDark = name.startsWith('dark')
                       const isLight = !isDark && name.startsWith('light')
                       if (isDark || isLight) {

package/src/types.tsx

@@ -1841,7 +1841,7 @@ export type TamaguiComponentState = {
   group?: Record<string, GroupState>
 }
 
-export type ResolveVariableAs = 'auto' | 'value' | 'variable' | 'none'
+export type ResolveVariableAs = 'auto' | 'value' | 'variable' | 'none' | 'web'
 
 export type SplitStyleProps = {
   mediaState?: Record<string, boolean>

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

@@ -1 +1 @@
-{"version":3,"file":"propMapper.d.ts","sourceRoot":"","sources":["../../src/helpers/propMapper.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,aAAa,EACb,UAAU,EACV,iBAAiB,EAGjB,qBAAqB,EAEtB,MAAM,UAAU,CAAA;AAOjB,eAAO,MAAM,UAAU,EAAE,UAqExB,CAAA;AAgGD,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,qBAAqB,sBAkBtF;AAMD,eAAO,MAAM,uBAAuB,cAAe,GAAG,QAErD,CAAA;AAuID,eAAO,MAAM,cAAc,QACpB,MAAM,SACJ,MAAM,wDAED,QAAQ,aAAa,CAAC,QAyFnC,CAAA"}
+{"version":3,"file":"propMapper.d.ts","sourceRoot":"","sources":["../../src/helpers/propMapper.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,aAAa,EACb,UAAU,EACV,iBAAiB,EAEjB,qBAAqB,EAEtB,MAAM,UAAU,CAAA;AAOjB,eAAO,MAAM,UAAU,EAAE,UAqExB,CAAA;AAgGD,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,qBAAqB,sBAkBtF;AAMD,eAAO,MAAM,uBAAuB,cAAe,GAAG,QAErD,CAAA;AA6ID,eAAO,MAAM,cAAc,QACpB,MAAM,SACJ,MAAM,wDAED,QAAQ,aAAa,CAAC,QAyFnC,CAAA"}

package/types/hooks/useTheme.d.ts

@@ -8,7 +8,17 @@ export type ChangedThemeResponse = {
     mounted?: boolean;
 };
 export type ThemeGettable<Val> = Val & {
-    get: () => string | (Val extends Variable<infer X> ? X extends VariableValGeneric ? any : Exclude<X, Variable> : Val extends VariableVal ? string | number : unknown);
+    /**
+     * Tries to return an optimized value that avoids the need for re-rendering:
+     * On web a CSS variable, on iOS a dynamic color, on Android it doesn't
+     * optimize and returns the underyling value.
+     *
+     * See: https://reactnative.dev/docs/dynamiccolorios
+     *
+     * @param platform when "web" it will only return the dynamic value for web, avoiding the iOS dynamic value.
+     * For things like SVG, gradients, or other external components that don't support it, use this option.
+     */
+    get: (platform?: 'web') => string | (Val extends Variable<infer X> ? X extends VariableValGeneric ? any : Exclude<X, Variable> : Val extends VariableVal ? string | number : unknown);
 };
 export type UseThemeResult = {
     [Key in keyof ThemeParsed]: ThemeGettable<ThemeParsed[Key]>;

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

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAe,MAAM,mBAAmB,CAAA;AAEzD,OAAO,EACL,YAAY,EACZ,iBAAiB,EAElB,MAAM,yBAAyB,CAAA;AAEhC,OAAO,KAAK,EACV,SAAS,EACT,WAAW,EACX,UAAU,EACV,sBAAsB,EACtB,WAAW,EACX,kBAAkB,EACnB,MAAM,UAAU,CAAA;AAGjB,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,CAAC,EAAE,iBAAiB,CAAA;IACzB,YAAY,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IAClC,UAAU,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAcD,MAAM,MAAM,aAAa,CAAC,GAAG,IAAI,GAAG,GAAG;IACrC,GAAG,EAAE,MACD,MAAM,GACN,CAAC,GAAG,SAAS,QAAQ,CAAC,MAAM,CAAC,CAAC,GAC1B,CAAC,SAAS,kBAAkB,GAC1B,GAAG,GACH,OAAO,CAAC,CAAC,EAAE,QAAQ,CAAC,GACtB,GAAG,SAAS,WAAW,GACvB,MAAM,GAAG,MAAM,GACf,OAAO,CAAC,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;KAC1B,GAAG,IAAI,MAAM,WAAW,GAAG,aAAa,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;CAC5D,CAAA;AAED,eAAO,MAAM,QAAQ,WAAW,UAAU,mBAIzC,CAAA;AAED,eAAO,MAAM,iBAAiB,UACrB,sBAAsB,KAC5B,CAAC,oBAAoB,EAAE,WAAW,CAyDpC,CAAA;AAED,wBAAgB,eAAe,CAC7B,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,iBAAiB,EAClC,KAAK,UAAQ,EACb,YAAY,CAAC,EAAE,YAAY,EAC3B,IAAI,CAAC,EAAE,MAAM,EAAE,EACf,KAAK,CAAC,EAAE,SAAS,GAChB,cAAc,CAgGhB;AAED,eAAO,MAAM,mBAAmB,mBAA0B,CAAA;AAE1D,eAAO,MAAM,oBAAoB,UACxB,sBAAsB,2BAEtB,MAAM,EAAE,iBACA,MAAM,OAAO,GAAG,SAAS,KACvC,oBAwPF,CAAA"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,QAAQ,EAAe,MAAM,mBAAmB,CAAA;AAEzD,OAAO,EACL,YAAY,EACZ,iBAAiB,EAElB,MAAM,yBAAyB,CAAA;AAEhC,OAAO,KAAK,EACV,SAAS,EACT,WAAW,EACX,UAAU,EACV,sBAAsB,EACtB,WAAW,EACX,kBAAkB,EACnB,MAAM,UAAU,CAAA;AAGjB,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,CAAC,EAAE,iBAAiB,CAAA;IACzB,YAAY,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IAClC,UAAU,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAcD,MAAM,MAAM,aAAa,CAAC,GAAG,IAAI,GAAG,GAAG;IACrC;;;;;;;;;OASG;IACH,GAAG,EAAE,CACH,QAAQ,CAAC,EAAE,KAAK,KAEd,MAAM,GACN,CAAC,GAAG,SAAS,QAAQ,CAAC,MAAM,CAAC,CAAC,GAC1B,CAAC,SAAS,kBAAkB,GAC1B,GAAG,GACH,OAAO,CAAC,CAAC,EAAE,QAAQ,CAAC,GACtB,GAAG,SAAS,WAAW,GACvB,MAAM,GAAG,MAAM,GACf,OAAO,CAAC,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;KAC1B,GAAG,IAAI,MAAM,WAAW,GAAG,aAAa,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;CAC5D,CAAA;AAED,eAAO,MAAM,QAAQ,WAAW,UAAU,mBAIzC,CAAA;AAED,eAAO,MAAM,iBAAiB,UACrB,sBAAsB,KAC5B,CAAC,oBAAoB,EAAE,WAAW,CAyDpC,CAAA;AAED,wBAAgB,eAAe,CAC7B,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,iBAAiB,EAClC,KAAK,UAAQ,EACb,YAAY,CAAC,EAAE,YAAY,EAC3B,IAAI,CAAC,EAAE,MAAM,EAAE,EACf,KAAK,CAAC,EAAE,SAAS,GAChB,cAAc,CAqGhB;AAED,eAAO,MAAM,mBAAmB,mBAA0B,CAAA;AAE1D,eAAO,MAAM,oBAAoB,UACxB,sBAAsB,2BAEtB,MAAM,EAAE,iBACA,MAAM,OAAO,GAAG,SAAS,KACvC,oBAwPF,CAAA"}

package/types/types.d.ts

@@ -960,7 +960,7 @@ export type TamaguiComponentState = {
     };
     group?: Record<string, GroupState>;
 };
-export type ResolveVariableAs = 'auto' | 'value' | 'variable' | 'none';
+export type ResolveVariableAs = 'auto' | 'value' | 'variable' | 'none' | 'web';
 export type SplitStyleProps = {
     mediaState?: Record<string, boolean>;
     noClassNames?: boolean;