@tamagui/core 1.0.1-beta.48 → 1.0.1-beta.49

package/dist/esm/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx"],
-  "sourcesContent": ["import { Image, Text, TextInput } from 'react-native'\n\nimport { createComponent } from './createComponent'\nimport { RNComponents } from './helpers/RNComponents'\nimport {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types'\nimport { Stack } from './views/Stack'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> = GetProps<ParentComponent> & {\n  name?: string\n  variants?: VariantDefinitions<ParentComponent> | undefined\n  defaultVariants?: { [key: string]: any }\n}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\n>(\n  Component: ParentComponent,\n  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n  options?: GetProps<ParentComponent> & {\n    name?: string\n    variants?: Variants | undefined\n    // thought i had this typed, but can't get it linked\n    defaultVariants?: { [key: string]: any }\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  const staticConfigProps = (() => {\n    if (options) {\n      const { variants, name, defaultVariants, ...defaultProps } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n      const isReactNativeWeb =\n        'staticConfig' in Component\n          ? Component.staticConfig.isReactNativeWeb\n          : RNComponents.has(Component)\n      const reactNativeWebComponent = isReactNativeWeb\n        ? Component['staticConfig']?.reactNativeWebComponent || Component\n        : null\n      const isTamagui = !isReactNativeWeb && 'staticConfig' in Component\n      const Comp = reactNativeWebComponent || (Component as any)\n      const isImage = !!(defaultProps.isImage || (!isTamagui ? Comp === Image : false))\n      const isInput = !!(defaultProps.isInput || (!isTamagui ? Comp === TextInput : false))\n      const isText = !!(defaultProps.isText || (!isTamagui ? isInput || Comp === Text : false))\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isTamagui && {\n          Component: Comp,\n        }),\n        isTamagui,\n        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n        // take away the Partial<> and it's fine\n        variants,\n        defaultProps,\n        defaultVariants,\n        componentName: name,\n        isReactNativeWeb,\n        // for nesting multiple levels of rnw styled() need keep use the OG component\n        reactNativeWebComponent,\n        isInput,\n        isText,\n        isImage,\n      }\n\n      return conf\n    }\n    return {}\n  })()\n\n  const component = createComponent(staticConfigProps, Component)\n\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = ParentComponent extends TamaguiComponent<any, any, infer P>\n    ? P\n    : GetProps<ParentComponent>\n  type ParentVariants = ParentComponent extends TamaguiComponent<any, any, any, infer V> ? V : {}\n\n  type OurVariants = Variants extends void\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<any, infer Val>\n          ? Val\n          : GetVariantValues<keyof Variants[Key]>\n      }\n\n  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n  type OurPropsBase = ParentPropsBase & VariantProps\n\n  type Props = Variants extends void\n    ? GetProps<ParentComponent>\n    : // start with base props\n      OurPropsBase &\n        // add in media (+ pseudos nested)\n        MediaProps<Partial<OurPropsBase>> &\n        // add in pseudos\n        PseudoProps<Partial<OurPropsBase>>\n\n  return component as TamaguiComponent<\n    Props,\n    // TODO infer ref\n    any,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n}\n\n// breaking...\n// TODO see core/types.ts bug\n\n// export const XStack = styled(Stack, {\n//   variants: {\n//     horizontal: {\n//       true: {\n//         // flexDirection: 'row',\n//         width: 0,\n//       },\n//     },\n//   },\n// })\n\n// const Separator = styled(Stack, {\n//   variants: {\n//     vertical: {\n//       true: {\n//         flexDirection: 'row',\n//       },\n//     },\n//   },\n//            <--- have to add as const to get working???\n// })\n\n// type props = GetProps<typeof XStack>\n// type variants = typeof XStack extends TamaguiComponent<any, infer Variants> ? Variants : never\n// type variants2 = typeof Separator extends TamaguiComponent<any, infer Variants> ? Variants : never\n\n// const x = <XStack horizontal />\n// const x2 = <Separator vertical />\n"],
-  "mappings": ";;AAAA;AAEA;AACA;AAqBO,gBAIL,WAEA,SAMA,yBACA;AACA,QAAM,oBAAqB,OAAM;AAtCnC;AAuCI,QAAI,SAAS;AACX,YAAM,EAAE,UAAU,MAAM,oBAAoB,iBAAiB;AAC7D,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AACA,YAAM,mBACJ,kBAAkB,YACd,UAAU,aAAa,mBACvB,aAAa,IAAI,SAAS;AAChC,YAAM,0BAA0B,mBAC5B,iBAAU,oBAAV,mBAA2B,4BAA2B,YACtD;AACJ,YAAM,YAAY,CAAC,oBAAoB,kBAAkB;AACzD,YAAM,OAAO,2BAA4B;AACzC,YAAM,UAAU,CAAC,CAAE,cAAa,WAAY,EAAC,YAAY,SAAS,QAAQ;AAC1E,YAAM,UAAU,CAAC,CAAE,cAAa,WAAY,EAAC,YAAY,SAAS,YAAY;AAC9E,YAAM,SAAS,CAAC,CAAE,cAAa,UAAW,EAAC,YAAY,WAAW,SAAS,OAAO;AAElF,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA,QACA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AACA,WAAO,CAAC;AAAA,EACV,GAAG;AAEH,QAAM,YAAY,gBAAgB,mBAAmB,SAAS;AA4B9D,SAAO;AAOT;AA7FgB;",
+  "sourcesContent": ["import { Image, Text, TextInput } from 'react-native'\n\nimport { createComponent } from './createComponent'\nimport { RNComponents } from './helpers/RNComponents'\nimport {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> = GetProps<ParentComponent> & {\n  name?: string\n  variants?: VariantDefinitions<ParentComponent> | undefined\n  defaultVariants?: { [key: string]: any }\n}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\n>(\n  Component: ParentComponent,\n  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n  options?: GetProps<ParentComponent> & {\n    name?: string\n    variants?: Variants | undefined\n    // thought i had this typed, but can't get it linked\n    defaultVariants?: { [key: string]: any }\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  // for now wrapping a styled() around an extractable() HOC (like Button) isn't allowed\n  if (process.env.NODE_ENV === 'development') {\n    if (Component['staticConfig'] && Component['staticConfig'].isExtractable) {\n      console.warn(\n        `Warning: Wrapping styled() around an extractable HOC component isn't allowed yet. Support for this is on the roadmap, see: https://github.com/tamagui/tamagui/issues/88.`\n      )\n      // return (props) => {\n      //   // @ts-ignore\n      //   return <Component {...options} {...props} />\n      // }\n    }\n  }\n\n  const staticConfigProps = (() => {\n    if (options) {\n      const { variants, name, defaultVariants, ...defaultProps } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n      const isReactNativeWeb =\n        'staticConfig' in Component\n          ? Component.staticConfig.isReactNativeWeb\n          : RNComponents.has(Component)\n      const reactNativeWebComponent = isReactNativeWeb\n        ? Component['staticConfig']?.reactNativeWebComponent || Component\n        : null\n      const isTamagui = !isReactNativeWeb && 'staticConfig' in Component\n      const Comp = reactNativeWebComponent || (Component as any)\n      const isImage = !!(defaultProps.isImage || (!isTamagui ? Comp === Image : false))\n      const isInput = !!(defaultProps.isInput || (!isTamagui ? Comp === TextInput : false))\n      const isText = !!(defaultProps.isText || (!isTamagui ? isInput || Comp === Text : false))\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isTamagui && {\n          Component: Comp,\n        }),\n        isTamagui,\n        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n        // take away the Partial<> and it's fine\n        variants,\n        defaultProps,\n        defaultVariants,\n        componentName: name,\n        isReactNativeWeb,\n        // for nesting multiple levels of rnw styled() need keep use the OG component\n        reactNativeWebComponent,\n        isInput,\n        isText,\n        isImage,\n      }\n\n      return conf\n    }\n    return {}\n  })()\n\n  const component = createComponent(staticConfigProps, Component)\n\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = ParentComponent extends TamaguiComponent<any, any, infer P>\n    ? P\n    : GetProps<ParentComponent>\n  type ParentVariants = ParentComponent extends TamaguiComponent<any, any, any, infer V> ? V : {}\n\n  type OurVariants = Variants extends void\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<any, infer Val>\n          ? Val\n          : GetVariantValues<keyof Variants[Key]>\n      }\n\n  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n  type OurPropsBase = ParentPropsBase & VariantProps\n\n  type Props = Variants extends void\n    ? GetProps<ParentComponent>\n    : // start with base props\n      OurPropsBase &\n        // add in media (+ pseudos nested)\n        MediaProps<Partial<OurPropsBase>> &\n        // add in pseudos\n        PseudoProps<Partial<OurPropsBase>>\n\n  return component as TamaguiComponent<\n    Props,\n    // TODO infer ref\n    any,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n}\n\n// breaking...\n// TODO see core/types.ts bug\n\n// export const XStack = styled(Stack, {\n//   variants: {\n//     horizontal: {\n//       true: {\n//         // flexDirection: 'row',\n//         width: 0,\n//       },\n//     },\n//   },\n// })\n\n// const Separator = styled(Stack, {\n//   variants: {\n//     vertical: {\n//       true: {\n//         flexDirection: 'row',\n//       },\n//     },\n//   },\n//            <--- have to add as const to get working???\n// })\n\n// type props = GetProps<typeof XStack>\n// type variants = typeof XStack extends TamaguiComponent<any, infer Variants> ? Variants : never\n// type variants2 = typeof Separator extends TamaguiComponent<any, infer Variants> ? Variants : never\n\n// const x = <XStack horizontal />\n// const x2 = <Separator vertical />\n"],
+  "mappings": ";;AAAA;AAEA;AACA;AAoBO,gBAIL,WAEA,SAMA,yBACA;AAEA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,UAAU,mBAAmB,UAAU,gBAAgB,eAAe;AACxE,cAAQ,KACN,0KACF;AAAA,IAKF;AAAA,EACF;AAEA,QAAM,oBAAqB,OAAM;AAlDnC;AAmDI,QAAI,SAAS;AACX,YAAM,EAAE,UAAU,MAAM,oBAAoB,iBAAiB;AAC7D,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AACA,YAAM,mBACJ,kBAAkB,YACd,UAAU,aAAa,mBACvB,aAAa,IAAI,SAAS;AAChC,YAAM,0BAA0B,mBAC5B,iBAAU,oBAAV,mBAA2B,4BAA2B,YACtD;AACJ,YAAM,YAAY,CAAC,oBAAoB,kBAAkB;AACzD,YAAM,OAAO,2BAA4B;AACzC,YAAM,UAAU,CAAC,CAAE,cAAa,WAAY,EAAC,YAAY,SAAS,QAAQ;AAC1E,YAAM,UAAU,CAAC,CAAE,cAAa,WAAY,EAAC,YAAY,SAAS,YAAY;AAC9E,YAAM,SAAS,CAAC,CAAE,cAAa,UAAW,EAAC,YAAY,WAAW,SAAS,OAAO;AAElF,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA,QACA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AACA,WAAO,CAAC;AAAA,EACV,GAAG;AAEH,QAAM,YAAY,gBAAgB,mBAAmB,SAAS;AA4B9D,SAAO;AAOT;AA1GgB;",
   "names": []
 }

package/dist/esm/views/Theme.js

@@ -8,13 +8,14 @@ React["createElement"];
 const Theme = memo(/* @__PURE__ */ __name(function Theme2(props) {
   var _a, _b;
   const { name, theme, themeManager, themes, className } = useChangeThemeEffect(props.name, props.componentName, props);
-  if (!themes || !name || !theme) {
+  const missingTheme = !themes || !name || !theme;
+  const contents = useMemo(() => missingTheme ? null : wrapThemeManagerContext(props.children, themeManager), [props.children, themeManager]);
+  if (missingTheme) {
     if (name && !theme && process.env.NODE_ENV === "development") {
       console.warn(`No theme found by name ${name}`);
     }
     return props.children;
   }
-  const contents = useMemo(() => wrapThemeManagerContext(props.children, themeManager), [props.children, themeManager]);
   if (isWeb) {
     return /* @__PURE__ */ React.createElement("span", {
       className: [

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
-  "sourcesContent": ["import React, { memo, useMemo } from 'react'\n\nimport { isWeb } from '../constants/platform'\nimport { wrapThemeManagerContext } from '../helpers/wrapThemeManagerContext'\nimport { useChangeThemeEffect } from '../hooks/useTheme'\nimport { ThemeProps } from '../hooks/useTheme'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nexport const Theme = memo(function Theme(props: ThemeProps) {\n  const { name, theme, themeManager, themes, className } = useChangeThemeEffect(\n    props.name,\n    props.componentName,\n    props\n  )\n\n  if (!themes || !name || !theme) {\n    if (name && !theme && process.env.NODE_ENV === 'development') {\n      console.warn(`No theme found by name ${name}`)\n    }\n    return props.children\n  }\n\n  // memo here, changing theme without re-rendering all children is a critical optimization\n  // may require some effort of end user to memoize but without this memo they'd have no option\n  const contents = useMemo(\n    () => wrapThemeManagerContext(props.children, themeManager),\n    [props.children, themeManager]\n  )\n\n  if (isWeb) {\n    return (\n      <span\n        className={[\n          `tui_Theme`,\n          ...(!props.disableThemeClass ? [props.className, className].filter(Boolean) : []),\n        ].join(' ')}\n        style={{\n          display: 'contents',\n          // in order to provide currentColor, set color by default\n          color: themes[name]?.color?.toString(),\n        }}\n      >\n        {contents}\n      </span>\n    )\n  }\n\n  return contents\n})\n"],
-  "mappings": ";;AAAA;AAEA;AACA;AACA;AAIA,MAAM;AAEC,MAAM,QAAQ,KAAK,uCAAe,OAAmB;AAV5D;AAWE,QAAM,EAAE,MAAM,OAAO,cAAc,QAAQ,cAAc,qBACvD,MAAM,MACN,MAAM,eACN,KACF;AAEA,MAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO;AAC9B,QAAI,QAAQ,CAAC,SAAS,QAAQ,IAAI,aAAa,eAAe;AAC5D,cAAQ,KAAK,0BAA0B,MAAM;AAAA,IAC/C;AACA,WAAO,MAAM;AAAA,EACf;AAIA,QAAM,WAAW,QACf,MAAM,wBAAwB,MAAM,UAAU,YAAY,GAC1D,CAAC,MAAM,UAAU,YAAY,CAC/B;AAEA,MAAI,OAAO;AACT,WACE,oCAAC;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,GAAI,CAAC,MAAM,oBAAoB,CAAC,MAAM,WAAW,SAAS,EAAE,OAAO,OAAO,IAAI,CAAC;AAAA,MACjF,EAAE,KAAK,GAAG;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,QAET,OAAO,mBAAO,UAAP,mBAAc,UAAd,mBAAqB;AAAA,MAC9B;AAAA,OAEC,QACH;AAAA,EAEJ;AAEA,SAAO;AACT,GAxC0B,QAwCzB;",
+  "sourcesContent": ["import React, { memo, useMemo } from 'react'\n\nimport { isWeb } from '../constants/platform'\nimport { wrapThemeManagerContext } from '../helpers/wrapThemeManagerContext'\nimport { useChangeThemeEffect } from '../hooks/useTheme'\nimport { ThemeProps } from '../hooks/useTheme'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nexport const Theme = memo(function Theme(props: ThemeProps) {\n  const { name, theme, themeManager, themes, className } = useChangeThemeEffect(\n    props.name,\n    props.componentName,\n    props\n  )\n\n  const missingTheme = !themes || !name || !theme\n\n  // memo here, changing theme without re-rendering all children is a critical optimization\n  // may require some effort of end user to memoize but without this memo they'd have no option\n  const contents = useMemo(\n    () => (missingTheme ? null : wrapThemeManagerContext(props.children, themeManager)),\n    [props.children, themeManager]\n  )\n\n  if (missingTheme) {\n    if (name && !theme && process.env.NODE_ENV === 'development') {\n      console.warn(`No theme found by name ${name}`)\n    }\n    return props.children\n  }\n\n  if (isWeb) {\n    return (\n      <span\n        className={[\n          `tui_Theme`,\n          ...(!props.disableThemeClass ? [props.className, className].filter(Boolean) : []),\n        ].join(' ')}\n        style={{\n          display: 'contents',\n          // in order to provide currentColor, set color by default\n          color: themes[name]?.color?.toString(),\n        }}\n      >\n        {contents}\n      </span>\n    )\n  }\n\n  return contents\n})\n"],
+  "mappings": ";;AAAA;AAEA;AACA;AACA;AAIA,MAAM;AAEC,MAAM,QAAQ,KAAK,uCAAe,OAAmB;AAV5D;AAWE,QAAM,EAAE,MAAM,OAAO,cAAc,QAAQ,cAAc,qBACvD,MAAM,MACN,MAAM,eACN,KACF;AAEA,QAAM,eAAe,CAAC,UAAU,CAAC,QAAQ,CAAC;AAI1C,QAAM,WAAW,QACf,MAAO,eAAe,OAAO,wBAAwB,MAAM,UAAU,YAAY,GACjF,CAAC,MAAM,UAAU,YAAY,CAC/B;AAEA,MAAI,cAAc;AAChB,QAAI,QAAQ,CAAC,SAAS,QAAQ,IAAI,aAAa,eAAe;AAC5D,cAAQ,KAAK,0BAA0B,MAAM;AAAA,IAC/C;AACA,WAAO,MAAM;AAAA,EACf;AAEA,MAAI,OAAO;AACT,WACE,oCAAC;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,GAAI,CAAC,MAAM,oBAAoB,CAAC,MAAM,WAAW,SAAS,EAAE,OAAO,OAAO,IAAI,CAAC;AAAA,MACjF,EAAE,KAAK,GAAG;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,QAET,OAAO,mBAAO,UAAP,mBAAc,UAAd,mBAAqB;AAAA,MAC9B;AAAA,OAEC,QACH;AAAA,EAEJ;AAEA,SAAO;AACT,GA1C0B,QA0CzB;",
   "names": []
 }

package/dist/jsx/Tamagui.js

@@ -34,6 +34,9 @@ const getValueFromIdentifier = /* @__PURE__ */ __name((identifier) => {
 const setIdentifierValue = /* @__PURE__ */ __name((identifier, value) => {
   identifierToValue.set(identifier, value);
 }, "setIdentifierValue");
+if (!globalThis["Tamagui"]) {
+  globalThis["Tamagui"] = Tamagui;
+}
 export {
   Tamagui,
   getValueFromIdentifier,

package/dist/jsx/conf.js

@@ -1,6 +1,5 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { Tamagui } from "./Tamagui";
 let conf;
 const setConfig = /* @__PURE__ */ __name((next) => {
   conf = next;
@@ -20,9 +19,6 @@ const onConfiguredOnce = /* @__PURE__ */ __name((cb) => {
   } else {
     configListeners.add(cb);
   }
-  if (!globalThis["Tamagui"]) {
-    globalThis["Tamagui"] = Tamagui;
-  }
 }, "onConfiguredOnce");
 export {
   configListeners,

package/dist/jsx/createComponent.js

@@ -1,6 +1,6 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { stylePropsView } from "@tamagui/helpers";
+import { stylePropsView, validStyles } from "@tamagui/helpers";
 import { useForceUpdate } from "@tamagui/use-force-update";
 import React, {
   Children,
@@ -244,164 +244,7 @@ function createComponent(configIn, ParentComponent) {
         ...webProps
       } = nonTamaguiProps;
       viewProps = webProps;
-      if (!viewProps.role && accessibilityRole) {
-        if (accessibilityRole === "none") {
-          viewProps.role = "presentation";
-        } else {
-          const webRole = accessibilityRoleToWebRole[accessibilityRole];
-          if (webRole != null) {
-            viewProps.role = webRole || accessibilityRole;
-          }
-        }
-      }
-      const role = viewProps.role;
-      if (accessibilityActiveDescendant != null) {
-        viewProps["aria-activedescendant"] = accessibilityActiveDescendant;
-      }
-      if (accessibilityAtomic != null) {
-        viewProps["aria-atomic"] = accessibilityAtomic;
-      }
-      if (accessibilityAutoComplete != null) {
-        viewProps["aria-autocomplete"] = accessibilityAutoComplete;
-      }
-      if (accessibilityBusy != null) {
-        viewProps["aria-busy"] = accessibilityBusy;
-      }
-      if (accessibilityChecked != null) {
-        viewProps["aria-checked"] = accessibilityChecked;
-      }
-      if (accessibilityColumnCount != null) {
-        viewProps["aria-colcount"] = accessibilityColumnCount;
-      }
-      if (accessibilityColumnIndex != null) {
-        viewProps["aria-colindex"] = accessibilityColumnIndex;
-      }
-      if (accessibilityColumnSpan != null) {
-        viewProps["aria-colspan"] = accessibilityColumnSpan;
-      }
-      if (accessibilityControls != null) {
-        viewProps["aria-controls"] = processIDRefList(accessibilityControls);
-      }
-      if (accessibilityCurrent != null) {
-        viewProps["aria-current"] = accessibilityCurrent;
-      }
-      if (accessibilityDescribedBy != null) {
-        viewProps["aria-describedby"] = processIDRefList(accessibilityDescribedBy);
-      }
-      if (accessibilityDetails != null) {
-        viewProps["aria-details"] = accessibilityDetails;
-      }
-      if (disabled === true) {
-        viewProps["aria-disabled"] = true;
-        if (elementType === "button" || elementType === "form" || elementType === "input" || elementType === "select" || elementType === "textarea") {
-          viewProps.disabled = true;
-        }
-      }
-      if (accessibilityErrorMessage != null) {
-        viewProps["aria-errormessage"] = accessibilityErrorMessage;
-      }
-      if (accessibilityExpanded != null) {
-        viewProps["aria-expanded"] = accessibilityExpanded;
-      }
-      if (accessibilityFlowTo != null) {
-        viewProps["aria-flowto"] = processIDRefList(accessibilityFlowTo);
-      }
-      if (accessibilityHasPopup != null) {
-        viewProps["aria-haspopup"] = accessibilityHasPopup;
-      }
-      if (accessibilityHidden === true) {
-        viewProps["aria-hidden"] = accessibilityHidden;
-      }
-      if (accessibilityInvalid != null) {
-        viewProps["aria-invalid"] = accessibilityInvalid;
-      }
-      if (accessibilityKeyShortcuts != null && Array.isArray(accessibilityKeyShortcuts)) {
-        viewProps["aria-keyshortcuts"] = accessibilityKeyShortcuts.join(" ");
-      }
-      if (accessibilityLabel != null) {
-        viewProps["aria-label"] = accessibilityLabel;
-      }
-      if (accessibilityLabelledBy != null) {
-        viewProps["aria-labelledby"] = processIDRefList(accessibilityLabelledBy);
-      }
-      if (accessibilityLevel != null) {
-        viewProps["aria-level"] = accessibilityLevel;
-      }
-      if (accessibilityLiveRegion != null) {
-        viewProps["aria-live"] = accessibilityLiveRegion === "none" ? "off" : accessibilityLiveRegion;
-      }
-      if (accessibilityModal != null) {
-        viewProps["aria-modal"] = accessibilityModal;
-      }
-      if (accessibilityMultiline != null) {
-        viewProps["aria-multiline"] = accessibilityMultiline;
-      }
-      if (accessibilityMultiSelectable != null) {
-        viewProps["aria-multiselectable"] = accessibilityMultiSelectable;
-      }
-      if (accessibilityOrientation != null) {
-        viewProps["aria-orientation"] = accessibilityOrientation;
-      }
-      if (accessibilityOwns != null) {
-        viewProps["aria-owns"] = processIDRefList(accessibilityOwns);
-      }
-      if (accessibilityPlaceholder != null) {
-        viewProps["aria-placeholder"] = accessibilityPlaceholder;
-      }
-      if (accessibilityPosInSet != null) {
-        viewProps["aria-posinset"] = accessibilityPosInSet;
-      }
-      if (accessibilityPressed != null) {
-        viewProps["aria-pressed"] = accessibilityPressed;
-      }
-      if (accessibilityReadOnly != null) {
-        viewProps["aria-readonly"] = accessibilityReadOnly;
-        if (elementType === "input" || elementType === "select" || elementType === "textarea") {
-          viewProps.readOnly = true;
-        }
-      }
-      if (accessibilityRequired != null) {
-        viewProps["aria-required"] = accessibilityRequired;
-        if (elementType === "input" || elementType === "select" || elementType === "textarea") {
-          viewProps.required = true;
-        }
-      }
-      if (accessibilityRoleDescription != null) {
-        viewProps["aria-roledescription"] = accessibilityRoleDescription;
-      }
-      if (accessibilityRowCount != null) {
-        viewProps["aria-rowcount"] = accessibilityRowCount;
-      }
-      if (accessibilityRowIndex != null) {
-        viewProps["aria-rowindex"] = accessibilityRowIndex;
-      }
-      if (accessibilityRowSpan != null) {
-        viewProps["aria-rowspan"] = accessibilityRowSpan;
-      }
-      if (accessibilitySelected != null) {
-        viewProps["aria-selected"] = accessibilitySelected;
-      }
-      if (accessibilitySetSize != null) {
-        viewProps["aria-setsize"] = accessibilitySetSize;
-      }
-      if (accessibilitySort != null) {
-        viewProps["aria-sort"] = accessibilitySort;
-      }
-      if (accessibilityValueMax != null) {
-        viewProps["aria-valuemax"] = accessibilityValueMax;
-      }
-      if (accessibilityValueMin != null) {
-        viewProps["aria-valuemin"] = accessibilityValueMin;
-      }
-      if (accessibilityValueNow != null) {
-        viewProps["aria-valuenow"] = accessibilityValueNow;
-      }
-      if (accessibilityValueText != null) {
-        viewProps["aria-valuetext"] = accessibilityValueText;
-      }
-      if (nativeID) {
-        viewProps.id = nativeID;
-      }
+      assignNativePropsToWeb(elementType, viewProps, nonTamaguiProps);
       if (!asChild) {
         rnw.useElementLayout(hostRef, onLayout);
         rnw.useResponderEvents(hostRef, {
@@ -444,6 +287,7 @@ function createComponent(configIn, ParentComponent) {
           viewProps.target = target.charAt(0) !== "_" ? "_" + target : target;
         }
       }
+      const role = viewProps.role;
       const _focusable = focusable != null ? focusable : accessible;
       if (_focusable === false) {
         viewProps.tabIndex = "-1";
@@ -717,10 +561,10 @@ function createComponent(configIn, ParentComponent) {
       ...initialSplitStyles.viewProps
     };
     defaultNativeStyle = {};
-    const validStyles = staticConfig.validStyles || stylePropsView;
+    const validStyles2 = staticConfig.validStyles || stylePropsView;
     for (const key in staticConfig.defaultProps) {
       const val = staticConfig.defaultProps[key];
-      if (typeof val === "string" && val[0] === "$" || !validStyles[key]) {
+      if (typeof val === "string" && val[0] === "$" || !validStyles2[key]) {
         defaults[key] = val;
       } else {
         defaultNativeStyle[key] = val;
@@ -748,18 +592,16 @@ function createComponent(configIn, ParentComponent) {
   if (configIn.memo) {
     res = memo(res);
   }
-  res["staticConfig"] = {
+  res.staticConfig = {
     validStyles: staticConfig.validStyles || stylePropsView,
     ...staticConfig
   };
-  if (process.env.NODE_ENV === "development") {
-    res["whyDidYouRender"] = true;
-  }
-  res["extractable"] = (Component, conf) => {
-    Component["staticConfig"] = extendStaticConfig({
+  res.extractable = (Component, conf) => {
+    Component.staticConfig = extendStaticConfig({
       Component,
       ...conf,
       neverFlatten: true,
+      isExtractable: true,
       defaultProps: {
         ...Component.defaultProps,
         ...conf == null ? void 0 : conf.defaultProps
@@ -777,6 +619,7 @@ Unspaced["isUnspaced"] = true;
 const Spacer = createComponent({
   memo: true,
   componentName: "Spacer",
+  validStyles,
   defaultProps: {
     ...stackDefaultStyles,
     size: true
@@ -797,9 +640,8 @@ const Spacer = createComponent({
     },
     flex: {
       true: {
-        flex: 1
-      },
-      ":number": (flex) => ({ flex })
+        flexGrow: 1
+      }
     },
     direction: {
       horizontal: {
@@ -913,10 +755,171 @@ const accessibilityRoleToWebRole = {
   summary: "region",
   text: null
 };
+function assignNativePropsToWeb(elementType, viewProps, nativeProps) {
+  if (!viewProps.role && nativeProps.accessibilityRole) {
+    if (nativeProps.accessibilityRole === "none") {
+      viewProps.role = "presentation";
+    } else {
+      const webRole = accessibilityRoleToWebRole[nativeProps.accessibilityRole];
+      if (webRole != null) {
+        viewProps.role = webRole || nativeProps.accessibilityRole;
+      }
+    }
+  }
+  if (nativeProps.accessibilityActiveDescendant != null) {
+    viewProps["aria-activedescendant"] = nativeProps.accessibilityActiveDescendant;
+  }
+  if (nativeProps.accessibilityAtomic != null) {
+    viewProps["aria-atomic"] = nativeProps.accessibilityAtomic;
+  }
+  if (nativeProps.accessibilityAutoComplete != null) {
+    viewProps["aria-autocomplete"] = nativeProps.accessibilityAutoComplete;
+  }
+  if (nativeProps.accessibilityBusy != null) {
+    viewProps["aria-busy"] = nativeProps.accessibilityBusy;
+  }
+  if (nativeProps.accessibilityChecked != null) {
+    viewProps["aria-checked"] = nativeProps.accessibilityChecked;
+  }
+  if (nativeProps.accessibilityColumnCount != null) {
+    viewProps["aria-colcount"] = nativeProps.accessibilityColumnCount;
+  }
+  if (nativeProps.accessibilityColumnIndex != null) {
+    viewProps["aria-colindex"] = nativeProps.accessibilityColumnIndex;
+  }
+  if (nativeProps.accessibilityColumnSpan != null) {
+    viewProps["aria-colspan"] = nativeProps.accessibilityColumnSpan;
+  }
+  if (nativeProps.accessibilityControls != null) {
+    viewProps["aria-controls"] = processIDRefList(nativeProps.accessibilityControls);
+  }
+  if (nativeProps.accessibilityCurrent != null) {
+    viewProps["aria-current"] = nativeProps.accessibilityCurrent;
+  }
+  if (nativeProps.accessibilityDescribedBy != null) {
+    viewProps["aria-describedby"] = processIDRefList(nativeProps.accessibilityDescribedBy);
+  }
+  if (nativeProps.accessibilityDetails != null) {
+    viewProps["aria-details"] = nativeProps.accessibilityDetails;
+  }
+  if (nativeProps.disabled === true) {
+    viewProps["aria-disabled"] = true;
+    if (elementType === "button" || elementType === "form" || elementType === "input" || elementType === "select" || elementType === "textarea") {
+      viewProps.disabled = true;
+    }
+  }
+  if (nativeProps.accessibilityErrorMessage != null) {
+    viewProps["aria-errormessage"] = nativeProps.accessibilityErrorMessage;
+  }
+  if (nativeProps.accessibilityExpanded != null) {
+    viewProps["aria-expanded"] = nativeProps.accessibilityExpanded;
+  }
+  if (nativeProps.accessibilityFlowTo != null) {
+    viewProps["aria-flowto"] = processIDRefList(nativeProps.accessibilityFlowTo);
+  }
+  if (nativeProps.accessibilityHasPopup != null) {
+    viewProps["aria-haspopup"] = nativeProps.accessibilityHasPopup;
+  }
+  if (nativeProps.accessibilityHidden === true) {
+    viewProps["aria-hidden"] = nativeProps.accessibilityHidden;
+  }
+  if (nativeProps.accessibilityInvalid != null) {
+    viewProps["aria-invalid"] = nativeProps.accessibilityInvalid;
+  }
+  if (nativeProps.accessibilityKeyShortcuts != null && Array.isArray(nativeProps.accessibilityKeyShortcuts)) {
+    viewProps["aria-keyshortcuts"] = nativeProps.accessibilityKeyShortcuts.join(" ");
+  }
+  if (nativeProps.accessibilityLabel != null) {
+    viewProps["aria-label"] = nativeProps.accessibilityLabel;
+  }
+  if (nativeProps.accessibilityLabelledBy != null) {
+    viewProps["aria-labelledby"] = processIDRefList(nativeProps.accessibilityLabelledBy);
+  }
+  if (nativeProps.accessibilityLevel != null) {
+    viewProps["aria-level"] = nativeProps.accessibilityLevel;
+  }
+  if (nativeProps.accessibilityLiveRegion != null) {
+    viewProps["aria-live"] = nativeProps.accessibilityLiveRegion === "none" ? "off" : nativeProps.accessibilityLiveRegion;
+  }
+  if (nativeProps.accessibilityModal != null) {
+    viewProps["aria-modal"] = nativeProps.accessibilityModal;
+  }
+  if (nativeProps.accessibilityMultiline != null) {
+    viewProps["aria-multiline"] = nativeProps.accessibilityMultiline;
+  }
+  if (nativeProps.accessibilityMultiSelectable != null) {
+    viewProps["aria-multiselectable"] = nativeProps.accessibilityMultiSelectable;
+  }
+  if (nativeProps.accessibilityOrientation != null) {
+    viewProps["aria-orientation"] = nativeProps.accessibilityOrientation;
+  }
+  if (nativeProps.accessibilityOwns != null) {
+    viewProps["aria-owns"] = processIDRefList(nativeProps.accessibilityOwns);
+  }
+  if (nativeProps.accessibilityPlaceholder != null) {
+    viewProps["aria-placeholder"] = nativeProps.accessibilityPlaceholder;
+  }
+  if (nativeProps.accessibilityPosInSet != null) {
+    viewProps["aria-posinset"] = nativeProps.accessibilityPosInSet;
+  }
+  if (nativeProps.accessibilityPressed != null) {
+    viewProps["aria-pressed"] = nativeProps.accessibilityPressed;
+  }
+  if (nativeProps.accessibilityReadOnly != null) {
+    viewProps["aria-readonly"] = nativeProps.accessibilityReadOnly;
+    if (elementType === "input" || elementType === "select" || elementType === "textarea") {
+      viewProps.readOnly = true;
+    }
+  }
+  if (nativeProps.accessibilityRequired != null) {
+    viewProps["aria-required"] = nativeProps.accessibilityRequired;
+    if (elementType === "input" || elementType === "select" || elementType === "textarea") {
+      viewProps.required = true;
+    }
+  }
+  if (nativeProps.accessibilityRoleDescription != null) {
+    viewProps["aria-roledescription"] = nativeProps.accessibilityRoleDescription;
+  }
+  if (nativeProps.accessibilityRowCount != null) {
+    viewProps["aria-rowcount"] = nativeProps.accessibilityRowCount;
+  }
+  if (nativeProps.accessibilityRowIndex != null) {
+    viewProps["aria-rowindex"] = nativeProps.accessibilityRowIndex;
+  }
+  if (nativeProps.accessibilityRowSpan != null) {
+    viewProps["aria-rowspan"] = nativeProps.accessibilityRowSpan;
+  }
+  if (nativeProps.accessibilitySelected != null) {
+    viewProps["aria-selected"] = nativeProps.accessibilitySelected;
+  }
+  if (nativeProps.accessibilitySetSize != null) {
+    viewProps["aria-setsize"] = nativeProps.accessibilitySetSize;
+  }
+  if (nativeProps.accessibilitySort != null) {
+    viewProps["aria-sort"] = nativeProps.accessibilitySort;
+  }
+  if (nativeProps.accessibilityValueMax != null) {
+    viewProps["aria-valuemax"] = nativeProps.accessibilityValueMax;
+  }
+  if (nativeProps.accessibilityValueMin != null) {
+    viewProps["aria-valuemin"] = nativeProps.accessibilityValueMin;
+  }
+  if (nativeProps.accessibilityValueNow != null) {
+    viewProps["aria-valuenow"] = nativeProps.accessibilityValueNow;
+  }
+  if (nativeProps.accessibilityValueText != null) {
+    viewProps["aria-valuetext"] = nativeProps.accessibilityValueText;
+  }
+  if (nativeProps.nativeID) {
+    viewProps.id = nativeProps.nativeID;
+  }
+}
+__name(assignNativePropsToWeb, "assignNativePropsToWeb");
 export {
   AbsoluteFill,
   Spacer,
   Unspaced,
+  assignNativePropsToWeb,
   createComponent,
   mouseUps,
   spacedChildren

package/dist/jsx/createTamagui.js

@@ -3,7 +3,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import { configListeners, getHasConfigured, setConfig } from "./conf";
 import { THEME_CLASSNAME_PREFIX } from "./constants/constants";
 import { isWeb } from "./constants/platform";
-import { Variable, createCSSVariable, createVariable, isVariable } from "./createVariable";
+import { createCSSVariable, createVariable, isVariable } from "./createVariable";
 import { createTamaguiProvider } from "./helpers/createTamaguiProvider";
 import { getInsertedRules } from "./helpers/insertStyleRule";
 import { configureMedia } from "./hooks/useMedia";
@@ -29,6 +29,7 @@ function createTamagui(config) {
   });
   const themeConfig = (() => {
     var _a, _b, _c;
+    const themes = { ...config.themes };
     let cssRules = [];
     const varsByValue = /* @__PURE__ */ new Map();
     if (isWeb) {
@@ -61,39 +62,74 @@ function createTamagui(config) {
     }
     const hasDarkLight = "light" in config.themes && "dark" in config.themes;
     const CNP = `.${THEME_CLASSNAME_PREFIX}`;
-    for (const themeName in config.themes) {
+    const existing = /* @__PURE__ */ new WeakMap();
+    const dedupedThemes = {};
+    for (const themeName in themes) {
+      const rawTheme = themes[themeName];
+      if (existing.has(rawTheme)) {
+        const e = existing.get(rawTheme);
+        e.names.push(themeName);
+        continue;
+      }
       const theme = { ...config.themes[themeName] };
-      config.themes[themeName] = theme;
+      for (const key in theme) {
+        ensureThemeVariable(theme, key);
+      }
+      themes[themeName] = theme;
+      dedupedThemes[themeName] = {
+        names: [themeName],
+        theme
+      };
+      existing.set(theme, dedupedThemes[themeName]);
+    }
+    for (const themeName in dedupedThemes) {
+      const { theme, names } = dedupedThemes[themeName];
       let vars = "";
       for (const themeKey in theme) {
         if (isWeb) {
           const val = theme[themeKey];
-          const varName = val instanceof Variable ? val.name : (_a = varsByValue[val]) == null ? void 0 : _a.name;
-          vars += `--${themeKey}:${varName ? createCSSVariable(varName) : `${val}`};`;
+          let varName;
+          let varVal;
+          if (isVariable(val)) {
+            varName = val.key;
+            varVal = val.isFloating ? val.val : createCSSVariable(varName);
+          } else {
+            varName = (_a = varsByValue[val]) == null ? void 0 : _a.key;
+            varVal = varName ? createCSSVariable(varName) : `${val}`;
+          }
+          if (process.env.NODE_ENV === "development") {
+            if (!varName) {
+              console.warn("no var name in theme", themeName, themeKey);
+              continue;
+            }
+          }
+          vars += `--${themeKey}:${varVal};`;
         }
-        ensureThemeVariable(theme, themeKey);
       }
       if (isWeb) {
         const isDarkOrLightBase = themeName === "dark" || themeName === "light";
         const isDark = themeName.startsWith("dark");
-        const selector = `${CNP}${themeName}`;
-        const selectors = [selector];
+        const selectors = names.map((name) => {
+          return `${CNP}${name}`;
+        });
         if (hasDarkLight) {
-          const childSelector = `${CNP}${themeName.replace("dark_", "").replace("light_", "")}`;
-          const order = isDark ? ["dark", "light"] : ["light", "dark"];
-          if (isDarkOrLightBase) {
-            order.reverse();
-          }
-          const [stronger, weaker] = order;
-          const max = (_b = config.maxDarkLightNesting) != null ? _b : 3;
-          new Array(max * 2).fill(void 0).forEach((_, pi) => {
-            if (pi % 2 === 1)
-              return;
-            const parents = new Array(pi + 1).fill(void 0).map((_2, psi) => {
-              return `${CNP}${psi % 2 === 0 ? stronger : weaker}`;
+          for (const subName of names) {
+            const childSelector = `${CNP}${subName.replace("dark_", "").replace("light_", "")}`;
+            const order = isDark ? ["dark", "light"] : ["light", "dark"];
+            if (isDarkOrLightBase) {
+              order.reverse();
+            }
+            const [stronger, weaker] = order;
+            const max = (_b = config.maxDarkLightNesting) != null ? _b : 3;
+            new Array(max * 2).fill(void 0).forEach((_, pi) => {
+              if (pi % 2 === 1)
+                return;
+              const parents = new Array(pi + 1).fill(void 0).map((_2, psi) => {
+                return `${CNP}${psi % 2 === 0 ? stronger : weaker}`;
+              });
+              selectors.push(`${(parents.length > 1 ? parents.slice(1) : parents).join(" ")} ${childSelector}`);
             });
-            selectors.push(`${(parents.length > 1 ? parents.slice(1) : parents).join(" ")} ${childSelector}`);
-          });
+          }
         }
         const rootSep = config.themeClassNameOnRoot ? "" : " ";
         cssRules.push(`${selectors.map((x) => `:root${rootSep}${x}`).join(", ")} {${vars}}`);
@@ -111,6 +147,7 @@ function createTamagui(config) {
     Object.freeze(cssRules);
     const css = cssRules.join("\n");
     return {
+      themes,
       cssRules,
       css
     };
@@ -154,10 +191,12 @@ ${getInsertedRules().join("\n")}`;
     shorthands: {},
     media: {},
     ...config,
+    themes: themeConfig.themes,
     Provider: createTamaguiProvider({
       getCSS,
       defaultTheme: "light",
-      ...config
+      ...config,
+      themes: themeConfig.themes
     }),
     fontsParsed,
     themeConfig,
@@ -187,17 +226,19 @@ const parseTokens = /* @__PURE__ */ __name((tokens) => {
 }, "parseTokens");
 function ensureThemeVariable(theme, key) {
   const val = theme[key];
+  const themeKey = key;
   if (!isVariable(val)) {
     theme[key] = createVariable({
-      key,
-      name: key,
-      val
+      key: themeKey,
+      name: themeKey,
+      val,
+      isFloating: true
     });
   } else {
-    if (val.name !== key) {
+    if (val.name !== themeKey) {
       theme[key] = createVariable({
-        key,
-        name: key,
+        key: val.name,
+        name: themeKey,
         val: val.val
       });
     }