@tamagui/core 1.0.1-beta.60 → 1.0.1-beta.63

package/dist/esm/helpers/themeable.js

@@ -4,7 +4,8 @@ import React, { forwardRef } from "react";
 import { Theme } from "../views/Theme";
 import { ThemeInverse } from "../views/ThemeInverse";
 function themeable(component, opts) {
-  const withThemeComponent = forwardRef(/* @__PURE__ */ __name(function WithTheme({ themeInverse, theme, ...rest }, ref) {
+  const withThemeComponent = forwardRef(/* @__PURE__ */ __name(function WithTheme(props, ref) {
+    const { themeInverse, theme, ...rest } = props;
     const element = React.createElement(component, { ...rest, ref });
     if (themeInverse) {
       return /* @__PURE__ */ React.createElement(ThemeInverse, null, element);

package/dist/esm/helpers/themeable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/themeable.tsx"],
-  "sourcesContent": ["import React, { forwardRef } from 'react'\n\nimport { ThemeName } from '../types'\nimport { Theme } from '../views/Theme'\nimport { ThemeInverse } from '../views/ThemeInverse'\n\nexport type ThemeableProps = {\n  theme?: ThemeName | string | null\n  themeInverse?: boolean\n}\n\nexport function themeable<Component extends (props: any) => any>(\n  component: Component,\n  opts?: { componentName?: string }\n) {\n  const withThemeComponent = forwardRef(function WithTheme(\n    { themeInverse, theme, ...rest }: any,\n    ref\n  ) {\n    const element = React.createElement(component, { ...rest, ref } as any)\n    if (themeInverse) {\n      return <ThemeInverse>{element}</ThemeInverse>\n    }\n    if (theme || opts) {\n      return (\n        <Theme componentName={opts?.componentName} name={(theme as any) || null}>\n          {element}\n        </Theme>\n      )\n    }\n    return element\n  })\n\n  const withTheme: any = withThemeComponent\n  withTheme.displayName = `Themed(${\n    (component as any)?.displayName || (component as any)?.name || 'Anonymous'\n  })`\n\n  return withTheme as Component extends (props: infer P) => infer R\n    ? (\n        props: Omit<P, 'theme' | 'themeInverse'> & {\n          theme?: ThemeName | null\n          themeInverse?: boolean\n        }\n      ) => R\n    : unknown\n}\n"],
-  "mappings": ";;AAAA;AAGA;AACA;AAOO,mBACL,WACA,MACA;AACA,QAAM,qBAAqB,WAAW,0CACpC,EAAE,cAAc,UAAU,QAC1B,KACA;AACA,UAAM,UAAU,MAAM,cAAc,WAAW,EAAE,GAAG,MAAM,IAAI,CAAQ;AACtE,QAAI,cAAc;AAChB,aAAO,oCAAC,oBAAc,OAAQ;AAAA,IAChC;AACA,QAAI,SAAS,MAAM;AACjB,aACE,oCAAC;AAAA,QAAM,eAAe,6BAAM;AAAA,QAAe,MAAO,SAAiB;AAAA,SAChE,OACH;AAAA,IAEJ;AACA,WAAO;AAAA,EACT,GAhBsC,YAgBrC;AAED,QAAM,YAAiB;AACvB,YAAU,cAAc,UACrB,wCAAmB,gBAAgB,wCAAmB,SAAQ;AAGjE,SAAO;AAQT;AAnCgB;",
+  "sourcesContent": ["import React, { forwardRef } from 'react'\n\nimport { ThemeName } from '../types'\nimport { Theme } from '../views/Theme'\nimport { ThemeInverse } from '../views/ThemeInverse'\n\nexport type ThemeableProps = {\n  theme?: ThemeName | string | null\n  themeInverse?: boolean\n}\n\nexport function themeable<Component extends (props: any) => any>(\n  component: Component,\n  opts?: { componentName?: string }\n) {\n  const withThemeComponent = forwardRef(function WithTheme(props: any, ref) {\n    const { themeInverse, theme, ...rest } = props\n    const element = React.createElement(component, { ...rest, ref } as any)\n    if (themeInverse) {\n      return <ThemeInverse>{element}</ThemeInverse>\n    }\n    if (theme || opts) {\n      return (\n        <Theme componentName={opts?.componentName} name={(theme as any) || null}>\n          {element}\n        </Theme>\n      )\n    }\n    return element\n  })\n\n  const withTheme: any = withThemeComponent\n  withTheme.displayName = `Themed(${\n    (component as any)?.displayName || (component as any)?.name || 'Anonymous'\n  })`\n\n  return withTheme as Component extends (props: infer P) => infer R\n    ? (\n        props: Omit<P, 'theme' | 'themeInverse'> & {\n          theme?: ThemeName | null\n          themeInverse?: boolean\n        }\n      ) => R\n    : unknown\n}\n"],
+  "mappings": ";;AAAA;AAGA;AACA;AAOO,mBACL,WACA,MACA;AACA,QAAM,qBAAqB,WAAW,0CAAmB,OAAY,KAAK;AACxE,UAAM,EAAE,cAAc,UAAU,SAAS;AACzC,UAAM,UAAU,MAAM,cAAc,WAAW,EAAE,GAAG,MAAM,IAAI,CAAQ;AACtE,QAAI,cAAc;AAChB,aAAO,oCAAC,oBAAc,OAAQ;AAAA,IAChC;AACA,QAAI,SAAS,MAAM;AACjB,aACE,oCAAC;AAAA,QAAM,eAAe,6BAAM;AAAA,QAAe,MAAO,SAAiB;AAAA,SAChE,OACH;AAAA,IAEJ;AACA,WAAO;AAAA,EACT,GAdsC,YAcrC;AAED,QAAM,YAAiB;AACvB,YAAU,cAAc,UACrB,wCAAmB,gBAAgB,wCAAmB,SAAQ;AAGjE,SAAO;AAQT;AAjCgB;",
   "names": []
 }

package/dist/esm/index.js

@@ -23,6 +23,9 @@ export * from "./helpers/getExpandedShorthands";
 export * from "./helpers/getSize";
 export * from "./helpers/getSplitStyles";
 export * from "./helpers/getStylesAtomic";
+export * from "./helpers/pseudos";
+export * from "./helpers/mergeProps";
+import { expandStyles } from "./helpers/generateAtomicStyles";
 export * from "./helpers/getTextSize";
 export * from "./helpers/isObj";
 export * from "./helpers/isTamaguiElement";
@@ -52,6 +55,7 @@ export * from "@tamagui/helpers";
 export {
   RNWTextProps,
   RNWViewProps,
+  expandStyles,
   getConfig,
   getHasConfigured,
   getThemes,

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export * from './Tamagui'\nexport * from './createComponent'\nexport * from './createShorthands'\nexport * from './createTheme'\nexport * from './createTamagui'\nexport * from './createFont'\nexport * from './createTokens'\nexport * from './createVariable'\nexport * from './createVariables'\nexport * from './insertFont'\nexport * from './styled'\nexport * from './types'\n// for type portability\nexport { RNWTextProps, RNWViewProps } from './types-rnw'\nexport { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './conf'\n\nexport * from './constants/constants'\nexport * from './constants/platform'\nexport * from './constants/rnw'\n\nexport * from './helpers/calc'\nexport * from './helpers/createShallowUpdate'\nexport * from './helpers/getStackSize'\nexport * from './helpers/getVariantExtras'\nexport * from './helpers/getExpandedShorthands'\nexport * from './helpers/getSize'\nexport * from './helpers/getSplitStyles'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/getTextSize'\nexport * from './helpers/isObj'\nexport * from './helpers/isTamaguiElement'\nexport * from './helpers/isTamaguiComponent'\nexport * from './helpers/matchMedia'\nexport * from './helpers/themeable'\nexport * from './helpers/withStaticProperties'\n\nexport * from './contexts/ButtonInsideButtonContext'\n\nexport * from './hooks/useConstant'\nexport * from './hooks/useId'\nexport * from './hooks/useIsMounted'\nexport * from './hooks/useIsTouchDevice'\nexport * from './hooks/useMedia'\nexport * from './hooks/usePressable'\nexport * from './hooks/useTheme'\nexport * from './hooks/useUnmountEffect'\n\nexport * from './views/Slot'\nexport * from './views/Stack'\nexport * from './views/Text'\nexport * from './views/TextAncestorContext'\nexport * from './views/Theme'\nexport * from './views/ThemeInverse'\nexport * from './views/ThemeProvider'\nexport * from './views/ThemeReset'\n\nexport * from '@tamagui/use-force-update'\nexport * from '@tamagui/helpers'\n"],
-  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;",
+  "sourcesContent": ["export * from './Tamagui'\nexport * from './createComponent'\nexport * from './createShorthands'\nexport * from './createTheme'\nexport * from './createTamagui'\nexport * from './createFont'\nexport * from './createTokens'\nexport * from './createVariable'\nexport * from './createVariables'\nexport * from './insertFont'\nexport * from './styled'\nexport * from './types'\n// for type portability\nexport { RNWTextProps, RNWViewProps } from './types-rnw'\nexport { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './conf'\n\nexport * from './constants/constants'\nexport * from './constants/platform'\nexport * from './constants/rnw'\n\nexport * from './helpers/calc'\nexport * from './helpers/createShallowUpdate'\nexport * from './helpers/getStackSize'\nexport * from './helpers/getVariantExtras'\nexport * from './helpers/getExpandedShorthands'\nexport * from './helpers/getSize'\nexport * from './helpers/getSplitStyles'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/pseudos'\nexport * from './helpers/mergeProps'\nexport { expandStyles } from './helpers/generateAtomicStyles'\nexport * from './helpers/getTextSize'\nexport * from './helpers/isObj'\nexport * from './helpers/isTamaguiElement'\nexport * from './helpers/isTamaguiComponent'\nexport * from './helpers/matchMedia'\nexport * from './helpers/themeable'\nexport * from './helpers/withStaticProperties'\n\nexport * from './contexts/ButtonInsideButtonContext'\n\nexport * from './hooks/useConstant'\nexport * from './hooks/useId'\nexport * from './hooks/useIsMounted'\nexport * from './hooks/useIsTouchDevice'\nexport * from './hooks/useMedia'\nexport * from './hooks/usePressable'\nexport * from './hooks/useTheme'\nexport * from './hooks/useUnmountEffect'\n\nexport * from './views/Slot'\nexport * from './views/Stack'\nexport * from './views/Text'\nexport * from './views/TextAncestorContext'\nexport * from './views/Theme'\nexport * from './views/ThemeInverse'\nexport * from './views/ThemeProvider'\nexport * from './views/ThemeReset'\n\nexport * from '@tamagui/use-force-update'\nexport * from '@tamagui/helpers'\n"],
+  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;",
   "names": []
 }

package/dist/esm/static.js

@@ -9,6 +9,8 @@ export * from "./hooks/useMedia";
 export * from "./hooks/useTheme";
 export * from "./helpers/isObj";
 export * from "./helpers/getStylesAtomic";
+export * from "./helpers/generateAtomicStyles";
+export * from "./helpers/pseudos";
 export * from "./helpers/proxyThemeVariables";
 export * from "./helpers/getSplitStyles";
 export * from "@tamagui/helpers";

package/dist/esm/static.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/static.ts"],
-  "sourcesContent": ["// only stuff that gets extracted or needed by tamagui-static\n\nexport * from './styled'\nexport * from './createComponent'\nexport * from './createFont'\nexport * from './createTokens'\nexport * from './createTamagui'\nexport * from './createVariable'\nexport * from './constants/constants'\n\nexport * from './hooks/useMedia'\nexport * from './hooks/useTheme'\n\nexport * from './helpers/isObj'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/proxyThemeVariables'\nexport * from './helpers/getSplitStyles'\nexport * from '@tamagui/helpers'\n\nexport * from './constants/rnw'\n\nexport * from './types'\n"],
-  "mappings": "AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AAEA;",
+  "sourcesContent": ["// only stuff that gets extracted or needed by tamagui-static\n\nexport * from './styled'\nexport * from './createComponent'\nexport * from './createFont'\nexport * from './createTokens'\nexport * from './createTamagui'\nexport * from './createVariable'\nexport * from './constants/constants'\n\nexport * from './hooks/useMedia'\nexport * from './hooks/useTheme'\n\nexport * from './helpers/isObj'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/generateAtomicStyles'\nexport * from './helpers/pseudos'\nexport * from './helpers/proxyThemeVariables'\nexport * from './helpers/getSplitStyles'\nexport * from '@tamagui/helpers'\n\nexport * from './constants/rnw'\n\nexport * from './types'\n"],
+  "mappings": "AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;",
   "names": []
 }

package/dist/jsx/createComponent.js

@@ -23,6 +23,7 @@ import { createShallowUpdate } from "./helpers/createShallowUpdate";
 import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig";
 import { insertSplitStyles, useSplitStyles } from "./helpers/getSplitStyles";
 import { getAllSelectors } from "./helpers/insertStyleRule";
+import { mergeProps } from "./helpers/mergeProps";
 import { proxyThemeVariables } from "./helpers/proxyThemeVariables";
 import { wrapThemeManagerContext } from "./helpers/wrapThemeManagerContext";
 import { useFeatures } from "./hooks/useFeatures";
@@ -96,14 +97,23 @@ function createComponent(configIn, ParentComponent) {
   __name(addPseudoToStyles, "addPseudoToStyles");
   const component = forwardRef((propsIn, forwardedRef) => {
     var _a, _b, _c, _d, _e;
-    const props = tamaguiDefaultProps && !propsIn.asChild ? { ...tamaguiDefaultProps, ...propsIn } : propsIn;
+    let props;
+    if (tamaguiDefaultProps && !propsIn.asChild) {
+      props = mergeProps(tamaguiDefaultProps, propsIn);
+    } else {
+      props = propsIn;
+    }
     const { Component, isText, isZStack } = staticConfig;
     const componentName = props.componentName || staticConfig.componentName;
     const componentClassName = props.asChild ? "" : props.componentName ? `is_${props.componentName}` : defaultComponentClassName;
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
         console.log("\u26A0\uFE0F", componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", "debug on");
-        console.log("props in:", { propsIn, props, ordered: Object.keys(props) });
+        console.log("props in:", {
+          propsIn,
+          props,
+          ordered: Object.keys(props)
+        });
         if (props["debug"] === "break")
           debugger;
       }
@@ -121,7 +131,7 @@ function createComponent(configIn, ParentComponent) {
       noClassNames: true,
       dynamicStylesInline: true,
       resolveVariablesAs: "value"
-    }, shouldAvoidClasses || props.asChild ? null : initialSplitStyles.classNames);
+    }, shouldAvoidClasses || props.asChild ? null : initialSplitStyles.classNames, props["debug"]);
     const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitStyles;
     const useAnimations = (_a = tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
     const isAnimated = !!(useAnimations && props.animation);
@@ -597,11 +607,8 @@ function createComponent(configIn, ParentComponent) {
       focus: false,
       resolveVariablesAs: "both",
       keepVariantsAsProps: true
-    });
-    const defaults = {
-      ...component.defaultProps,
-      ...initialSplitStyles.viewProps
-    };
+    }, void 0, staticConfig.defaultProps["debug"]);
+    const defaults = mergeProps(component.defaultProps, initialSplitStyles.viewProps);
     defaultNativeStyle = {};
     const validStyles2 = staticConfig.validStyles || stylePropsView;
     for (const key in staticConfig.defaultProps) {

package/dist/jsx/helpers/createMediaStyle.js

@@ -12,7 +12,7 @@ const createMediaStyle = /* @__PURE__ */ __name(({ identifier, rules }, mediaKey
   const screenStr = negate ? "not all" : "screen";
   const mediaSelector = mediaObjectToString(mediaQueries[mediaKey]);
   const mediaQuery = `${screenStr} and ${mediaSelector}`;
-  const styleInner = rules[0].replace(identifier, nextIdentifier);
+  const styleInner = rules.map((rule) => rule.replace(identifier, nextIdentifier)).join(";");
   let styleRule = "";
   if (styleInner.includes("@media")) {
     styleRule = styleInner.replace("{", ` and ${mediaQuery} {`);

package/dist/jsx/helpers/createPropMapper.js

@@ -9,14 +9,14 @@ import { isObj } from "./isObj";
 const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
   const variants = staticConfig.variants || {};
   const defaultProps = staticConfig.defaultProps || {};
-  const mapper = /* @__PURE__ */ __name((key, value, theme, propsIn, state, avoidDefaultProps = false) => {
+  const mapper = /* @__PURE__ */ __name((key, value, theme, propsIn, state, avoidDefaultProps = false, debug) => {
     const conf = getConfig();
     if (!conf) {
       console.trace("no conf! err");
       return;
     }
     const props = state.fallbackProps || propsIn;
-    const returnVariablesAs = state.resolveVariablesAs === "value" || !!props.animation ? "value" : "auto";
+    const returnVariablesAs = state.resolveVariablesAs === "value" || !!props.animation ? "non-color-value" : "auto";
     const fontFamily = props.fontFamily || defaultProps.fontFamily || "$body";
     const variantValue = resolveVariants(key, value, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, "", avoidDefaultProps);
     if (variantValue) {
@@ -29,9 +29,9 @@ const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
     }
     if (value) {
       if (value[0] === "$") {
-        value = getToken(key, value, conf, theme, fontFamily, returnVariablesAs);
+        value = getToken(key, value, conf, theme, fontFamily, returnVariablesAs, debug);
       } else if (isVariable(value)) {
-        value = getVariableValue(value, returnVariablesAs);
+        value = getVariableValue(key, value, returnVariablesAs);
       }
     }
     if (shouldReturn) {
@@ -40,7 +40,7 @@ const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
   }, "mapper");
   return mapper;
 }, "createPropMapper");
-const resolveVariants = /* @__PURE__ */ __name((key, value, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, parentVariantKey, avoidDefaultProps = false) => {
+const resolveVariants = /* @__PURE__ */ __name((key, value, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, parentVariantKey, avoidDefaultProps = false, debug) => {
   var _a;
   const variant = variants && variants[key];
   if (variant && value !== void 0) {
@@ -51,7 +51,7 @@ const resolveVariants = /* @__PURE__ */ __name((key, value, props, defaultProps,
         variantValue = fn(value, getVariantExtras(props, theme, defaultProps, avoidDefaultProps));
       }
       if (isObj(variantValue)) {
-        variantValue = resolveTokensAndVariants(key, variantValue, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, parentVariantKey, avoidDefaultProps);
+        variantValue = resolveTokensAndVariants(key, variantValue, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, parentVariantKey, avoidDefaultProps, debug);
       }
       return Object.entries(expandStyles(variantValue));
     } else {
@@ -59,13 +59,14 @@ const resolveVariants = /* @__PURE__ */ __name((key, value, props, defaultProps,
         if ((_a = staticConfig.validStyles) == null ? void 0 : _a[key]) {
           return null;
         }
-        console.warn(`No variant found: ${staticConfig.componentName || "[UnnamedComponent]"} has variant "${key}", but no matching value "${value}"`);
+        const name = staticConfig.componentName || "[UnnamedComponent]";
+        console.warn(`No variant found: ${name} has variant "${key}", but no matching value "${value}"`);
       }
       return null;
     }
   }
 }, "resolveVariants");
-const resolveTokensAndVariants = /* @__PURE__ */ __name((key, value, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, parentVariantKey, avoidDefaultProps) => {
+const resolveTokensAndVariants = /* @__PURE__ */ __name((key, value, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, parentVariantKey, avoidDefaultProps, debug) => {
   var _a;
   let res = {};
   for (const rKey in value) {
@@ -79,15 +80,15 @@ const resolveTokensAndVariants = /* @__PURE__ */ __name((key, value, props, defa
       } else {
         res = {
           ...res,
-          ...Object.fromEntries(resolveVariants(fKey, val, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, key, avoidDefaultProps))
+          ...Object.fromEntries(resolveVariants(fKey, val, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, key, avoidDefaultProps, debug))
         };
       }
     } else if (typeof val === "string") {
-      const fVal = val[0] === "$" ? getToken(fKey, val, conf, theme, fontFamily, returnVariablesAs) : val;
+      const fVal = val[0] === "$" ? getToken(fKey, val, conf, theme, fontFamily, returnVariablesAs, debug) : val;
       res[fKey] = fVal;
     } else {
       if (isObj(val)) {
-        res[fKey] = resolveTokensAndVariants(fKey, val, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, key, avoidDefaultProps);
+        res[fKey] = resolveTokensAndVariants(fKey, val, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, key, avoidDefaultProps, debug);
       } else {
         res[fKey] = value[fKey];
       }
@@ -128,7 +129,7 @@ const fontShorthand = {
   fontSize: "size",
   fontWeight: "weight"
 };
-const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed, fontsParsed }, theme, fontFamily = "$body", resolveAs) => {
+const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed, fontsParsed }, theme, fontFamily = "$body", resolveAs, debug) => {
   var _a, _b, _c;
   let valOrVar;
   let hasSet = false;
@@ -167,21 +168,39 @@ const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed, fontsParsed
     }
   }
   if (hasSet) {
-    return getVariableValue(valOrVar, resolveAs);
+    return getVariableValue(key, valOrVar, resolveAs);
   }
   if (process.env.NODE_ENV === "development") {
     if (value && value[0] === "$") {
-      console.warn(`\u26A0\uFE0F Missing token:`, key, value, fontFamily, theme, fontsParsed);
+      console.warn(`\u26A0\uFE0F You've passed the value "${value}" to the style property "${key}", but there's no theme or token with the key "${value}". Using theme "${theme.name}".
+
+Set the debug prop to true to see more detailed debug information.`);
+      if (debug) {
+        if (typeof window !== "undefined") {
+          console.log("Looked in:");
+          console.log("Theme:", theme);
+          console.log("Tokens:", tokensParsed);
+          console.log("Fonts:", fontsParsed);
+        }
+      }
       return null;
     }
   }
   return value;
 }, "getToken");
-function getVariableValue(valOrVar, resolveAs = "auto") {
+function getVariableValue(key, valOrVar, resolveAs = "auto") {
   if (isVariable(valOrVar)) {
     if (resolveAs === "variable") {
       return valOrVar;
     }
+    if (resolveAs === "non-color-value") {
+      if (isWeb) {
+        if (key in tokenCategories.color) {
+          return valOrVar.variable;
+        }
+      }
+      return valOrVar.val;
+    }
     if (!isWeb || resolveAs === "value") {
       return valOrVar.val;
     }

package/dist/jsx/helpers/createTamaguiProvider.js

@@ -9,13 +9,13 @@ function createTamaguiProvider({
   ...themeProps
 }) {
   return /* @__PURE__ */ __name(function TamaguiProvider({
-    injectCSS,
+    disableInjectCSS,
     children,
     ...themePropsProvider
   }) {
     if (typeof document !== "undefined") {
       React.useLayoutEffect(() => {
-        if (!injectCSS)
+        if (disableInjectCSS)
           return;
         const style = document.createElement("style");
         style.appendChild(document.createTextNode(getCSS()));

package/dist/jsx/helpers/extendStaticConfig.js

@@ -2,6 +2,7 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { stylePropsView } from "@tamagui/helpers";
 import { createPropMapper } from "./createPropMapper";
+import { mergeProps } from "./mergeProps";
 function extendStaticConfig(config, parent) {
   var _a;
   if (!parent || !("staticConfig" in parent)) {
@@ -35,12 +36,13 @@ function extendStaticConfig(config, parent) {
       ...parent.staticConfig.validStyles,
       ...config.validStyles
     } : parent.staticConfig.validStyles || stylePropsView,
-    defaultProps: {
+    defaultProps: mergeProps({
       ...parent.staticConfig.defaultProps,
-      ...parent.staticConfig.defaultVariants,
+      ...parent.staticConfig.defaultVariants
+    }, {
       ...config.defaultProps,
       ...config.defaultVariants
-    }
+    })
   });
 }
 __name(extendStaticConfig, "extendStaticConfig");

package/dist/jsx/helpers/generateAtomicStyles.js

@@ -4,55 +4,44 @@ import { simpleHash } from "@tamagui/helpers";
 import hyphenateStyleName from "hyphenate-style-name";
 import normalizeCSSColor from "normalize-css-color";
 import { isWeb } from "../constants/platform";
-import { prefixInlineStyles, prefixStyles } from "./prefixStyles";
+import { pseudos } from "./pseudos";
+const reducedStyleKeys = {
+  shadowColor: true,
+  shadowOffset: true,
+  shadowOpacity: true,
+  shadowRadius: true,
+  textShadowColor: true,
+  textShadowOffset: true,
+  textShadowRadius: true
+};
 function expandStyles(style) {
   const res = {};
+  boxShadowReducer(res, style);
+  textShadowReducer(res, style);
   for (const key in style) {
-    updateReactDOMStyle(res, key, style[key]);
+    if (reducedStyleKeys[key])
+      continue;
+    if (key in pseudos) {
+      res[key] = expandStyles(style[key]);
+    } else {
+      updateReactDOMStyle(res, key, style[key]);
+    }
   }
   return res;
 }
 __name(expandStyles, "expandStyles");
-function inline(style) {
-  return prefixInlineStyles(expandStyles(style));
-}
-__name(inline, "inline");
-const STYLE_SHORT_FORM_EXPANSIONS = {
-  borderColor: ["borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor"],
-  borderRadius: [
-    "borderTopLeftRadius",
-    "borderTopRightRadius",
-    "borderBottomRightRadius",
-    "borderBottomLeftRadius"
-  ],
-  borderStyle: ["borderTopStyle", "borderRightStyle", "borderBottomStyle", "borderLeftStyle"],
-  borderWidth: ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"],
-  margin: ["marginTop", "marginRight", "marginBottom", "marginLeft"],
-  marginHorizontal: ["marginRight", "marginLeft"],
-  marginVertical: ["marginTop", "marginBottom"],
-  overscrollBehavior: ["overscrollBehaviorX", "overscrollBehaviorY"],
-  padding: ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"],
-  paddingHorizontal: ["paddingRight", "paddingLeft"],
-  paddingVertical: ["paddingTop", "paddingBottom"],
-  ...isWeb && {
-    overflow: ["overflowX", "overflowY"]
+function updateReactDOMStyle(style, key, value) {
+  value = normalizeValueWithProperty(value, key);
+  const out = expandStyle(key, value);
+  if (out) {
+    Object.assign(style, Object.fromEntries(out));
+  } else {
+    style[key] = value;
   }
-};
+}
+__name(updateReactDOMStyle, "updateReactDOMStyle");
 const generateAtomicStyles = /* @__PURE__ */ __name((style) => {
   const res = expandStyles(style);
-  if (style.shadowColor != null || style.shadowOffset != null || style.shadowOpacity != null || style.shadowRadius != null) {
-    boxShadowReducer(res, style);
-    delete res["shadowColor"];
-    delete res["shadowOffset"];
-    delete res["shadowOpacity"];
-    delete res["shadowRadius"];
-  }
-  if (style.textShadowColor != null || style.textShadowOffset != null || style.textShadowRadius != null) {
-    textShadowReducer(res, style);
-    delete res["textShadowColor"];
-    delete res["textShadowOffset"];
-    delete res["textShadowRadius"];
-  }
   const out = {};
   for (const key in res) {
     const value = res[key];
@@ -63,11 +52,11 @@ const generateAtomicStyles = /* @__PURE__ */ __name((style) => {
         const { identifier } = cachedResult;
         out[identifier] = cachedResult;
       } else {
-        const identifier = createIdentifier("r", key, value);
-        const rules = createAtomicRules(identifier, key, value);
+        const identifier = simpleHash(key + valueString);
+        const rules = createAtomicRules(identifier, key, valueString);
         const cachedResult2 = cache.set(key, valueString, {
           property: key,
-          value: stringifyValueWithProperty(value, key),
+          value: valueString,
           identifier,
           rules
         });
@@ -77,16 +66,6 @@ const generateAtomicStyles = /* @__PURE__ */ __name((style) => {
   }
   return out;
 }, "generateAtomicStyles");
-function updateReactDOMStyle(style, key, value) {
-  value = normalizeValueWithProperty(value, key);
-  const out = expandStyle(key, value);
-  if (out) {
-    Object.assign(style, Object.fromEntries(out));
-  } else {
-    style[key] = value;
-  }
-}
-__name(updateReactDOMStyle, "updateReactDOMStyle");
 function expandStyle(key, value) {
   if (key === "flex") {
     if (value <= -1) {
@@ -155,15 +134,9 @@ function createAtomicRules(identifier, property, value) {
   const rules = [];
   const selector = `.${identifier}`;
   switch (property) {
-    case "animationKeyframes": {
-      const { animationNames, rules: keyframesRules } = processKeyframesValue(value);
-      const block = createDeclarationBlock({ animationName: animationNames.join(",") });
-      rules.push(`${selector}${block}`, ...keyframesRules);
-      break;
-    }
     case "placeholderTextColor": {
       const block = createDeclarationBlock({ color: value, opacity: 1 });
-      rules.push(`${selector}::-webkit-input-placeholder${block}`, `${selector}::-moz-placeholder${block}`, `${selector}:-ms-input-placeholder${block}`, `${selector}::placeholder${block}`);
+      rules.push(`${selector}::placeholder${block}`);
       break;
     }
     case "pointerEvents": {
@@ -202,58 +175,16 @@ function createAtomicRules(identifier, property, value) {
   return rules;
 }
 __name(createAtomicRules, "createAtomicRules");
-function processKeyframesValue(keyframesValue) {
-  if (typeof keyframesValue === "number") {
-    throw new Error(`Invalid CSS keyframes type: ${typeof keyframesValue}`);
-  }
-  const animationNames = [];
-  const rules = [];
-  const value = Array.isArray(keyframesValue) ? keyframesValue : [keyframesValue];
-  for (const keyframes of value) {
-    if (typeof keyframes === "string") {
-      animationNames.push(keyframes);
-    } else {
-      const { identifier, rules: keyframesRules } = createKeyframes(keyframes);
-      animationNames.push(identifier);
-      rules.push(...keyframesRules);
-    }
-  }
-  return { animationNames, rules };
-}
-__name(processKeyframesValue, "processKeyframesValue");
-function createKeyframes(keyframes) {
-  const prefixes2 = ["-webkit-", ""];
-  const identifier = createIdentifier("r", "animation", keyframes);
-  const steps = "{" + Object.keys(keyframes).map((stepName) => {
-    const rule = keyframes[stepName];
-    const block = createDeclarationBlock(rule);
-    return `${stepName}${block}`;
-  }).join("") + "}";
-  const rules = prefixes2.map((prefix) => {
-    return `@${prefix}keyframes ${identifier}${steps}`;
-  });
-  return { identifier, rules };
-}
-__name(createKeyframes, "createKeyframes");
 function createDeclarationBlock(style) {
-  const domStyle = prefixStyles(expandStyles(style));
+  const domStyle = expandStyles(style);
   const declarationsString = Object.keys(domStyle).map((property) => {
     const value = domStyle[property];
     const prop = hyphenateStyleName(property);
-    if (Array.isArray(value)) {
-      return value.map((v) => `${prop}:${v}`).join(";");
-    } else {
-      return `${prop}:${value}`;
-    }
+    return `${prop}:${value}`;
   }).sort().join(";");
   return `{${declarationsString};}`;
 }
 __name(createDeclarationBlock, "createDeclarationBlock");
-function createIdentifier(prefix, name, value) {
-  const hashedString = simpleHash(name + stringifyValueWithProperty(value, name));
-  return `${prefix}-${hashedString}`;
-}
-__name(createIdentifier, "createIdentifier");
 const cache = {
   get(property, value) {
     if (cache[property] != null && cache[property].hasOwnProperty(value) && cache[property][value] != null) {
@@ -268,8 +199,7 @@ const cache = {
   }
 };
 function stringifyValueWithProperty(value, property) {
-  const normalizedValue = normalizeValueWithProperty(value, property);
-  return typeof normalizedValue !== "string" ? JSON.stringify(normalizedValue || "") : normalizedValue;
+  return normalizeValueWithProperty(value, property);
 }
 __name(stringifyValueWithProperty, "stringifyValueWithProperty");
 const mapTransform = /* @__PURE__ */ __name((transform) => {
@@ -296,7 +226,8 @@ const colorProps = {
 };
 function normalizeValueWithProperty(value, property) {
   if (process.env.TAMAGUI_TARGET === "web") {
-    if ((property === void 0 || property === null || !unitlessNumbers[property]) && typeof value === "number") {
+    const shouldCoerceToPx = typeof value === "number" && (property === void 0 || property === null || !unitlessNumbers[property]);
+    if (shouldCoerceToPx) {
       return `${value}px`;
     }
   }
@@ -324,6 +255,7 @@ const normalizeColor = /* @__PURE__ */ __name((color, opacity = 1) => {
     const alpha = (a * opacity).toFixed(2);
     return `rgba(${r},${g},${b},${alpha})`;
   }
+  return `${color}`;
 }, "normalizeColor");
 const isWebColor = /* @__PURE__ */ __name((color) => color === "currentcolor" || color === "currentColor" || color === "inherit" || color.indexOf("var(") === 0, "isWebColor");
 const processColor = /* @__PURE__ */ __name((color) => {
@@ -383,25 +315,17 @@ const unitlessNumbers = {
   scaleZ: true,
   shadowOpacity: true
 };
-const prefixes = ["ms", "Moz", "O", "Webkit"];
-const prefixKey = /* @__PURE__ */ __name((prefix, key) => {
-  return prefix + key.charAt(0).toUpperCase() + key.substring(1);
-}, "prefixKey");
-Object.keys(unitlessNumbers).forEach((prop) => {
-  prefixes.forEach((prefix) => {
-    unitlessNumbers[prefixKey(prefix, prop)] = unitlessNumbers[prop];
-  });
-});
 const resolveShadowValue = /* @__PURE__ */ __name((style) => {
   const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style;
+  if (shadowRadius === void 0) {
+    return;
+  }
   const { height, width } = shadowOffset || defaultOffset;
   const offsetX = normalizeValueWithProperty(width);
   const offsetY = normalizeValueWithProperty(height);
   const blurRadius = normalizeValueWithProperty(shadowRadius || 0);
-  const color = normalizeColor(shadowColor || "black", shadowOpacity);
-  if (color != null && offsetX != null && offsetY != null && blurRadius != null) {
-    return `${offsetX} ${offsetY} ${blurRadius} ${color}`;
-  }
+  const color = normalizeColor(String(shadowColor || "black"), shadowOpacity);
+  return `${offsetX} ${offsetY} ${blurRadius} ${color}`;
 }, "resolveShadowValue");
 function boxShadowReducer(resolvedStyle, style) {
   const { boxShadow } = style;
@@ -425,9 +349,29 @@ function textShadowReducer(resolvedStyle, style) {
   }
 }
 __name(textShadowReducer, "textShadowReducer");
+const STYLE_SHORT_FORM_EXPANSIONS = {
+  borderColor: ["borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor"],
+  borderRadius: [
+    "borderTopLeftRadius",
+    "borderTopRightRadius",
+    "borderBottomRightRadius",
+    "borderBottomLeftRadius"
+  ],
+  borderStyle: ["borderTopStyle", "borderRightStyle", "borderBottomStyle", "borderLeftStyle"],
+  borderWidth: ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"],
+  margin: ["marginTop", "marginRight", "marginBottom", "marginLeft"],
+  marginHorizontal: ["marginRight", "marginLeft"],
+  marginVertical: ["marginTop", "marginBottom"],
+  overscrollBehavior: ["overscrollBehaviorX", "overscrollBehaviorY"],
+  padding: ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"],
+  paddingHorizontal: ["paddingRight", "paddingLeft"],
+  paddingVertical: ["paddingTop", "paddingBottom"],
+  ...isWeb && {
+    overflow: ["overflowX", "overflowY"]
+  }
+};
 export {
   expandStyle,
   expandStyles,
-  generateAtomicStyles,
-  inline
+  generateAtomicStyles
 };