@tamagui/core 1.0.0-alpha.31 → 1.0.0-alpha.38

package/dist/constants/constants.js

@@ -0,0 +1,32 @@
+import { stylePropsTextOnly, validStyles } from "@tamagui/helpers";
+import { isWeb } from "./platform";
+const webOnlySpecificStyleKeys = {
+  userSelect: true,
+  textOverflow: true,
+  whiteSpace: true,
+  wordWrap: true,
+  selectable: true,
+  cursor: true
+};
+const validStylesText = {
+  ...validStyles,
+  ...stylePropsTextOnly,
+  ...isWeb && {
+    ...webOnlySpecificStyleKeys
+  }
+};
+const stackDefaultStyles = {
+  alignItems: "stretch",
+  flexShrink: 0,
+  ...isWeb && {
+    display: "flex",
+    flexBasis: "auto",
+    boxSizing: "border-box"
+  }
+};
+export {
+  stackDefaultStyles,
+  validStylesText,
+  webOnlySpecificStyleKeys
+};
+//# sourceMappingURL=constants.js.map

package/dist/constants/constants.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/constants/constants.ts"],
+  "sourcesContent": ["import { stylePropsTextOnly, validStyles } from '@tamagui/helpers'\n\nimport { isWeb } from './platform'\n\nexport const webOnlySpecificStyleKeys = {\n  userSelect: true,\n  textOverflow: true,\n  whiteSpace: true,\n  wordWrap: true,\n  selectable: true,\n  cursor: true,\n}\n\nexport const validStylesText = {\n  ...validStyles,\n  ...stylePropsTextOnly,\n  ...(isWeb && {\n    ...webOnlySpecificStyleKeys,\n  }),\n}\n\nexport const stackDefaultStyles = {\n  alignItems: 'stretch',\n  flexShrink: 0,\n  // more accurately match react-native defaults on web\n  ...(isWeb && {\n    display: 'flex',\n    flexBasis: 'auto',\n    boxSizing: 'border-box',\n  }),\n}\n"],
+  "mappings": "AAAA;AAEA;AAEO,MAAM,2BAA2B;AAAA,EACtC,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,QAAQ;AAAA;AAGH,MAAM,kBAAkB;AAAA,KAC1B;AAAA,KACA;AAAA,KACC,SAAS;AAAA,OACR;AAAA;AAAA;AAIA,MAAM,qBAAqB;AAAA,EAChC,YAAY;AAAA,EACZ,YAAY;AAAA,KAER,SAAS;AAAA,IACX,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA;AAAA;",
+  "names": []
+}

package/dist/{esm/constants → constants}/platform.js

@@ -1,12 +1,12 @@
 import { useEffect, useLayoutEffect } from "react";
 import { Platform } from "react-native";
-const isWeb = process.env.TAMAGUI_TARGET === "web" ? true : Platform?.OS === "web";
+const isWeb = process.env.TARGET !== "native" || Platform.OS === "web";
 const isSSR = isWeb && typeof window === "undefined";
 const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect;
+const isWebIOS = isWeb && typeof window !== "undefined" && (/iPad|iPhone|iPod/.test(navigator.platform) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1) && !window["MSStream"];
 const isChrome = typeof navigator !== "undefined" && /Chrome/.test(navigator.userAgent || "");
 const supportsTouchWeb = typeof window !== "undefined" && "ontouchstart" in window;
 const isTouchDevice = !isWeb || supportsTouchWeb;
-const isWebIOS = isWeb && typeof navigator !== "undefined" && (/iPad|iPhone|iPod/.test(navigator.platform) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1) && !window["MSStream"];
 export {
   isChrome,
   isSSR,

package/dist/constants/platform.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/constants/platform.ts"],
+  "sourcesContent": ["// dont import things (why?)\n\nimport { useEffect, useLayoutEffect } from 'react'\nimport { Platform } from 'react-native'\n\nexport const isWeb = process.env.TARGET !== 'native' || Platform.OS === 'web'\nexport const isSSR = isWeb && typeof window === 'undefined'\n\nexport const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect\n\nexport const isWebIOS =\n  isWeb &&\n  typeof window !== 'undefined' &&\n  (/iPad|iPhone|iPod/.test(navigator.platform) ||\n    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&\n  !window['MSStream']\n\nexport const isChrome = typeof navigator !== 'undefined' && /Chrome/.test(navigator.userAgent || '')\n\nexport const supportsTouchWeb = typeof window !== 'undefined' && 'ontouchstart' in window\nexport const isTouchDevice = !isWeb || supportsTouchWeb\n"],
+  "mappings": "AAEA;AACA;AAEO,MAAM,QAAQ,QAAQ,IAAI,WAAW,YAAY,SAAS,OAAO;AACjE,MAAM,QAAQ,SAAS,OAAO,WAAW;AAEzC,MAAM,4BAA4B,QAAQ,YAAY;AAEtD,MAAM,WACX,SACA,OAAO,WAAW,eACjB,oBAAmB,KAAK,UAAU,aAChC,UAAU,aAAa,cAAc,UAAU,iBAAiB,MACnE,CAAC,OAAO;AAEH,MAAM,WAAW,OAAO,cAAc,eAAe,SAAS,KAAK,UAAU,aAAa;AAE1F,MAAM,mBAAmB,OAAO,WAAW,eAAe,kBAAkB;AAC5E,MAAM,gBAAgB,CAAC,SAAS;",
+  "names": []
+}

package/dist/constants/rnw.js

@@ -0,0 +1,10 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { isWeb } from "./platform";
+const loadRNW = process.env.IS_STATIC !== "is_static" && isWeb;
+const interopRequire = /* @__PURE__ */ __name((src) => "default" in src ? src.default : src, "interopRequire");
+const rnw = loadRNW ? interopRequire(require("react-native-web").TamaguiExports) : null;
+export {
+  rnw
+};
+//# sourceMappingURL=rnw.js.map

package/dist/constants/rnw.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/constants/rnw.tsx"],
+  "sourcesContent": ["import { isWeb } from './platform'\n\nconst loadRNW = process.env.IS_STATIC !== 'is_static' && isWeb\n\nconst interopRequire = (src: any) => ('default' in src ? src.default : src)\n\nexport const rnw: any | null = loadRNW ? interopRequire(require('react-native-web').TamaguiExports) : null\n"],
+  "mappings": ";;AAAA;AAEA,MAAM,UAAU,QAAQ,IAAI,cAAc,eAAe;AAEzD,MAAM,iBAAiB,wBAAC,QAAc,aAAa,MAAM,IAAI,UAAU,KAAhD;AAEhB,MAAM,MAAkB,UAAU,eAAe,QAAQ,oBAAoB,kBAAkB;",
+  "names": []
+}

package/dist/constants/styleConstants.js

@@ -0,0 +1,59 @@
+import { StyleSheet } from "react-native";
+import { isWeb } from "./platform";
+import { rnw } from "./rnw";
+const cssTextStyles = {
+  text: {
+    display: isWeb ? "inline" : "flex",
+    boxSizing: "border-box",
+    fontFamily: "System",
+    whiteSpace: "pre-wrap",
+    wordWrap: "break-word"
+  },
+  textHasAncestor: {
+    color: "inherit",
+    font: "inherit",
+    whiteSpace: "inherit"
+  },
+  textOneLine: {
+    maxWidth: "100%",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  textMultiLine: {
+    display: "-webkit-box",
+    maxWidth: "100%",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    WebkitBoxOrient: "vertical"
+  }
+};
+const cssText = isWeb ? rnw?.css.create(cssTextStyles) : {};
+const disabledStyle = {
+  pointerEvents: "none",
+  userSelect: "none"
+};
+const viewStyles = StyleSheet.create({
+  inline: isWeb ? {
+    display: "inline-flex"
+  } : {}
+});
+const textStyles = isWeb ? StyleSheet.create({
+  notSelectable: {
+    userSelect: "none"
+  },
+  selectable: {
+    userSelect: "text"
+  },
+  pressable: {
+    cursor: "pointer"
+  }
+}) : {};
+export {
+  cssText,
+  cssTextStyles,
+  disabledStyle,
+  textStyles,
+  viewStyles
+};
+//# sourceMappingURL=styleConstants.js.map

package/dist/constants/styleConstants.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/constants/styleConstants.tsx"],
+  "sourcesContent": ["import { StyleSheet } from 'react-native'\n\nimport { isWeb } from './platform'\nimport { rnw } from './rnw'\n\nexport const cssTextStyles = {\n  text: {\n    display: isWeb ? 'inline' : 'flex',\n    boxSizing: 'border-box',\n    fontFamily: 'System',\n    whiteSpace: 'pre-wrap',\n    wordWrap: 'break-word',\n  },\n  textHasAncestor: {\n    color: 'inherit',\n    font: 'inherit',\n    whiteSpace: 'inherit',\n  },\n  textOneLine: {\n    maxWidth: '100%',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  textMultiLine: {\n    display: '-webkit-box',\n    maxWidth: '100%',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    WebkitBoxOrient: 'vertical',\n  },\n}\n\nexport const cssText = isWeb ? rnw?.css.create(cssTextStyles) : {}\n\nexport const disabledStyle = {\n  pointerEvents: 'none',\n  userSelect: 'none',\n} as const\n\nexport const viewStyles = StyleSheet.create({\n  inline: isWeb\n    ? {\n        display: 'inline-flex' as any,\n      }\n    : {},\n})\n\nexport const textStyles = isWeb\n  ? StyleSheet.create({\n      notSelectable: {\n        // @ts-ignore\n        userSelect: 'none',\n      },\n      selectable: {\n        // @ts-ignore\n        userSelect: 'text',\n      },\n      pressable: {\n        // @ts-ignore\n        cursor: 'pointer',\n      },\n    })\n  : {}\n"],
+  "mappings": "AAAA;AAEA;AACA;AAEO,MAAM,gBAAgB;AAAA,EAC3B,MAAM;AAAA,IACJ,SAAS,QAAQ,WAAW;AAAA,IAC5B,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,UAAU;AAAA;AAAA,EAEZ,iBAAiB;AAAA,IACf,OAAO;AAAA,IACP,MAAM;AAAA,IACN,YAAY;AAAA;AAAA,EAEd,aAAa;AAAA,IACX,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA;AAAA,EAEd,eAAe;AAAA,IACb,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc;AAAA,IACd,iBAAiB;AAAA;AAAA;AAId,MAAM,UAAU,QAAQ,KAAK,IAAI,OAAO,iBAAiB;AAEzD,MAAM,gBAAgB;AAAA,EAC3B,eAAe;AAAA,EACf,YAAY;AAAA;AAGP,MAAM,aAAa,WAAW,OAAO;AAAA,EAC1C,QAAQ,QACJ;AAAA,IACE,SAAS;AAAA,MAEX;AAAA;AAGC,MAAM,aAAa,QACtB,WAAW,OAAO;AAAA,EAChB,eAAe;AAAA,IAEb,YAAY;AAAA;AAAA,EAEd,YAAY;AAAA,IAEV,YAAY;AAAA;AAAA,EAEd,WAAW;AAAA,IAET,QAAQ;AAAA;AAAA,KAGZ;",
+  "names": []
+}

package/dist/{esm/createComponent.js → createComponent.js}

@@ -1,7 +1,6 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { concatClassName, stylePropsView } from "@tamagui/helpers";
-import { useForceUpdate } from "@tamagui/use-force-update";
 import React, {
   Children,
   Fragment,
@@ -13,18 +12,21 @@ import React, {
   useRef,
   useState
 } from "react";
-import { StyleSheet, Text, View } from "react-native";
+import { View } from "react-native";
 import { stackDefaultStyles } from "./constants/constants";
 import { isTouchDevice, isWeb } from "./constants/platform";
 import { rnw } from "./constants/rnw";
+import { cssText, disabledStyle, textStyles, viewStyles } from "./constants/styleConstants";
 import { onConfiguredOnce } from "./createTamagui";
-import { addStylesUsingClassname, useStylesAsClassname } from "./helpers/addStylesUsingClassname";
-import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig";
+import { addStylesUsingClassname } from "./helpers/addStylesUsingClassname";
+import { parseStaticConfig } from "./helpers/extendStaticConfig";
 import { getSplitStyles } from "./helpers/getSplitStyles";
+import { setIfChanged } from "./helpers/setIfChanged";
 import { useFeatures } from "./hooks/useFeatures";
+import { useForceUpdate } from "./hooks/useForceUpdate";
 import { usePressable } from "./hooks/usePressable";
-import { useTheme } from "./hooks/useTheme";
 import { TextAncestorContext } from "./views/TextAncestorContext";
+import { ThemeManagerContext } from "./views/ThemeManagerContext";
 const mouseUps = new Set();
 if (typeof document !== "undefined") {
   document.addEventListener("mouseup", () => {
@@ -32,24 +34,6 @@ if (typeof document !== "undefined") {
     mouseUps.clear();
   });
 }
-const defaultComponentState = {
-  hover: false,
-  press: false,
-  pressIn: false
-};
-function createShallowUpdate(setter) {
-  return (next) => {
-    setter((prev) => {
-      for (const key in next) {
-        if (prev[key] !== next[key]) {
-          return { ...prev, ...next };
-        }
-      }
-      return prev;
-    });
-  };
-}
-__name(createShallowUpdate, "createShallowUpdate");
 function createComponent(configIn) {
   let staticConfig;
   if ("parsed" in configIn) {
@@ -57,34 +41,22 @@ function createComponent(configIn) {
   } else {
     staticConfig = parseStaticConfig(configIn);
   }
-  const { Component, validStyles, isText, isZStack } = staticConfig;
+  const { defaultProps, Component, validStyles, isText } = staticConfig;
   const validStyleProps = validStyles ?? stylePropsView;
-  let defaultProps = null;
+  let splitDefaults;
   let tamaguiConfig;
-  let defaultsStyle;
   let defaultsClassName = "";
-  let initialTheme;
-  const component = forwardRef((props, forwardedRef) => {
-    const forceUpdate = useForceUpdate();
-    const features = useFeatures(props, { forceUpdate });
-    const theme = useTheme();
-    const [state, set_] = useState(defaultComponentState);
-    const set = createShallowUpdate(set_);
-    if (process.env.NODE_ENV === "development" && !isText && isWeb) {
-      Children.toArray(props.children).forEach((item) => {
-        if (typeof item === "string") {
-          console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`);
-        }
-      });
+  onConfiguredOnce((conf) => {
+    tamaguiConfig = conf;
+    splitDefaults = getSplitStyles(defaultProps, staticConfig, conf);
+    if (splitDefaults.classNames) {
+      defaultsClassName += splitDefaults.classNames + " ";
     }
-    const hasTextAncestor = isWeb ? useContext(TextAncestorContext) : false;
-    const hostRef = useRef(null);
-    const {
-      viewProps: viewPropsIn,
-      pseudos,
-      style,
-      classNames
-    } = getSplitStyles(props, staticConfig, theme);
+    if (splitDefaults.style) {
+      defaultsClassName += addStylesUsingClassname([splitDefaults.style]);
+    }
+  });
+  const component = forwardRef((props, forwardedRef) => {
     const {
       tag,
       hitSlop,
@@ -95,7 +67,7 @@ function createComponent(configIn) {
       onPressOut,
       onHoverIn,
       onHoverOut,
-      space,
+      spacing,
       disabled,
       onMouseEnter,
       onMouseLeave,
@@ -118,17 +90,27 @@ function createComponent(configIn) {
       onStartShouldSetResponderCapture,
       onMouseDown,
       onClick,
-      accessible,
-      accessibilityRole,
-      onLayout,
-      ...viewProps
-    } = viewPropsIn;
-    if (!isWeb) {
-      if (accessible)
-        viewProps.accessible = accessible;
-      if (accessibilityRole)
-        viewProps.accessibilityRole = accessibilityRole;
+      onLayout
+    } = props;
+    const forceUpdate = useForceUpdate();
+    const features = useFeatures(props, { forceUpdate });
+    const manager = useContext(ThemeManagerContext);
+    const [state, set_] = useState(() => ({
+      hover: false,
+      press: false,
+      pressIn: false,
+      theme: manager.name
+    }));
+    const set = setIfChanged.bind(null, set_);
+    if (process.env.NODE_ENV !== "production" && !isText && isWeb) {
+      Children.toArray(props.children).forEach((item) => {
+        if (typeof item === "string") {
+          console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`);
+        }
+      });
     }
+    const hasTextAncestor = useContext(TextAncestorContext);
+    const hostRef = useRef(null);
     if (isWeb) {
       rnw.useResponderEvents(hostRef, {
         onMoveShouldSetResponder,
@@ -149,6 +131,8 @@ function createComponent(configIn) {
         onStartShouldSetResponderCapture
       });
     }
+    const isTracking = useRef(false);
+    const { viewProps, psuedos, style, classNames } = getSplitStyles(props, staticConfig, tamaguiConfig);
     const internal = useRef();
     if (!internal.current) {
       internal.current = {
@@ -157,67 +141,88 @@ function createComponent(configIn) {
     }
     useEffect(() => {
       internal.current.isMounted = true;
+      const dispose = manager?.onChangeTheme((name) => {
+        if (isTracking.current) {
+          set({ theme: name });
+        }
+      });
       return () => {
+        dispose();
         mouseUps.delete(unPress);
+        isTracking.current = false;
         internal.current.isMounted = false;
       };
-    }, []);
+    }, [manager]);
     const element = isWeb ? !Component || typeof Component === "string" ? tag || Component : Component : Component;
     const ReactView = !isWeb ? View : element || (hasTextAncestor ? "span" : "div");
     const ReactText = !isWeb ? Text : element || "span";
     const ViewComponent = isText ? ReactText : ReactView;
-    const isHovering = !isTouchDevice && !disabled && pseudos && state.hover;
-    const isPressing = !disabled && pseudos && state.press;
+    const numberOfLines = props["numberOfLines"];
+    const selectable = props["selectable"];
     const styles = [
+      hasTextAncestor ? viewStyles.inline : null,
+      ...isWeb && isText ? [
+        numberOfLines != null && numberOfLines > 1 && { WebkitLineClamp: numberOfLines },
+        selectable === true && textStyles.selectable,
+        selectable === false && textStyles.notSelectable,
+        onPress && textStyles.pressable
+      ] : [],
       style,
-      isHovering ? pseudos.hoverStyle || null : null,
-      isPressing ? pseudos.pressStyle || null : null
+      !isTouchDevice && !disabled && psuedos && state.hover ? psuedos.hoverStyle || null : null,
+      !disabled && psuedos && state.press ? psuedos.pressStyle || null : null,
+      disabled ? disabledStyle : null
     ];
+    const stylesClassNames = addStylesUsingClassname(styles);
+    const classList = staticConfig.isText ? [
+      defaultsClassName,
+      hasTextAncestor === true && cssText.textHasAncestor,
+      numberOfLines === 1 && cssText.textOneLine,
+      numberOfLines != null && numberOfLines > 1 && cssText.textMultiLine,
+      props.className,
+      classNames,
+      stylesClassNames
+    ] : [defaultsClassName, props.className, classNames, stylesClassNames];
+    const supportedProps = viewProps;
     if (isWeb) {
-      const stylesClassNames = useStylesAsClassname(styles);
-      const classList = isText ? [
-        defaultsClassName,
-        classNames,
-        stylesClassNames,
-        props.className
-      ] : [defaultsClassName, props.className, classNames, stylesClassNames];
-      const className = concatClassName(...classList);
+      const classListFlat = classList.flat().filter(Boolean).join(" ");
+      const className = concatClassName(classListFlat);
       if (process.env.NODE_ENV === "development") {
         if (props["debug"]) {
-          console.log("\u{1F95A} className", { style, styles, classList, stylesClassNames, className });
+          console.log("className", { styles, stylesClassNames, classList, classListFlat, className });
         }
       }
-      viewProps.className = className;
+      supportedProps.className = className;
     } else {
-      viewProps.style = styles;
+      supportedProps.style = classList;
     }
     if (pointerEvents) {
-      viewProps.pointerEvents = pointerEvents;
+      supportedProps.pointerEvents = pointerEvents;
     }
     if (isWeb) {
-      const platformMethodsRef = rnw.usePlatformMethods(viewProps);
+      const platformMethodsRef = rnw.usePlatformMethods(supportedProps);
       const setRef = rnw.useMergeRefs(hostRef, platformMethodsRef, forwardedRef);
-      viewProps.ref = setRef;
+      supportedProps.ref = setRef;
       if (props.href != null && hrefAttrs != null) {
         const { download, rel, target } = hrefAttrs;
         if (download != null) {
-          viewProps.download = download;
+          supportedProps.download = download;
         }
         if (rel != null) {
-          viewProps.rel = rel;
+          supportedProps.rel = rel;
         }
         if (typeof target === "string") {
-          viewProps.target = target.charAt(0) !== "_" ? "_" + target : target;
+          supportedProps.target = target.charAt(0) !== "_" ? "_" + target : target;
         }
       }
     } else {
       if (forwardedRef) {
-        viewProps.ref = forwardedRef;
+        supportedProps.ref = forwardedRef;
       }
     }
-    const attachPress = !!(pseudos && pseudos.pressStyle || onPress || onPressOut || onPressIn || onClick);
-    const attachHover = isWeb && !isTouchDevice && !!(pseudos && pseudos.hoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
-    const shouldAttach = internal.current.hasEverHadEvents || attachPress || attachHover || "pressStyle" in props || "onPress" in props || "onPressIn" in props || "onPressOut" in props || isWeb && ("hoverStyle" in props || "onClick" in props || "onHoverIn" in props || "onHoverOut" in props || "onMouseEnter" in props || "onMouseLeave" in props);
+    const createEl = createElement;
+    const attachPress = !!(psuedos && psuedos.pressStyle || onPress || onPressOut || onPressIn);
+    const attachHover = isWeb && !isTouchDevice && !!(psuedos && psuedos.hoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
+    const shouldAttach = internal.current.hasEverHadEvents || attachPress || attachHover || "pressStyle" in props || "onPress" in props || "onPressIn" in props || "onPressOut" in props || isWeb && ("hoverStyle" in props || "onHoverIn" in props || "onHoverOut" in props || "onMouseEnter" in props || "onMouseLeave" in props);
     if (shouldAttach) {
       internal.current.hasEverHadEvents = true;
     }
@@ -277,10 +282,11 @@ function createComponent(configIn) {
         onMouseDown?.(e);
       } : onPressIn,
       onClick: attachPress ? (e) => {
-        onPress?.(e);
-        onClick?.(e);
+        e.preventDefault();
         unPress();
         onPressOut?.(e);
+        onPress?.(e);
+        onClick?.(e);
       } : onPressOut
     } : null;
     if (events) {
@@ -290,101 +296,51 @@ function createComponent(configIn) {
           hitSlop,
           onPressIn: events.onMouseDown,
           onPressOut: events.onPressOut,
-          onPress: events.onClick
+          onPress
         });
-        Object.assign(viewProps, pressProps);
+        Object.assign(supportedProps, pressProps);
       } else {
-        Object.assign(viewProps, events);
+        Object.assign(supportedProps, events);
       }
     }
-    const childEls = spacedChildren({
+    const spacedChildrenEl = spacedChildren({
       children,
-      space,
-      flexDirection: props.flexDirection || defaultProps?.flexDirection,
-      isZStack
+      spacing,
+      flexDirection: props.flexDirection || defaultProps?.flexDirection
     });
-    let content;
-    if (isWeb && rnw) {
-      const domProps = rnw.createDOMProps(viewProps);
-      const className = domProps.className && domProps.className !== viewProps.className ? `${domProps.className} ${viewProps.className}` : viewProps.className;
-      Object.assign(viewProps, domProps);
-      viewProps.className = className;
-      content = createElement(ViewComponent, viewProps, childEls);
-    } else {
-      content = createElement(ViewComponent, viewProps, childEls);
-    }
-    const shouldWrapTextAncestor = isWeb && isText && !hasTextAncestor;
+    let content = createEl(ViewComponent, supportedProps, spacedChildrenEl);
+    const shouldWrapTextAncestor = isWeb && staticConfig.isText && !hasTextAncestor;
     if (shouldWrapTextAncestor) {
       content = createElement(TextAncestorContext.Provider, { value: true }, content);
     }
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
-        viewProps["debug"] = true;
-        console.log("\u{1F95A} props in:", props);
-        console.log("\u{1F95A} props out:", viewProps);
-        console.log(props.onClick?.toString());
-        console.log("\u{1F95A} etc:", { shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls });
-        if (isWeb) {
-          console.log("\u{1F95A} component info", { staticConfig, tamaguiConfig });
-        }
+        supportedProps["debug"] = true;
+        console.log(" \u{1F351}  props in: ", props);
+        console.log(" \u{1F351} props out: ", supportedProps);
+        console.log(" \u{1F351}     other: ", { ViewComponent, viewProps, styles, psuedos, createEl, content, spacedChildrenEl, staticConfig, splitDefaults, tamaguiConfig });
       }
     }
     return /* @__PURE__ */ React.createElement(React.Fragment, null, features, content);
   });
-  onConfiguredOnce((conf) => {
-    tamaguiConfig = conf;
-    initialTheme = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]];
-    const next = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, true);
-    if (isWeb) {
-      if (next.classNames) {
-        defaultsClassName += next.classNames + " ";
-      }
-      defaultsClassName += addStylesUsingClassname([next.style, next.pseudos]);
-    } else {
-      if (!hasWarnedOnce) {
-        hasWarnedOnce = true;
-        console.log("\u26A0\uFE0F TODO account for default styles for media queries");
-      }
-    }
-    component.defaultProps = {
-      ...next.viewProps,
-      ...component.defaultProps
-    };
-    if (process.env.NODE_ENV === "development") {
-      if (staticConfig.defaultProps?.debug) {
-        console.log("tamagui debug component:", next, defaultsClassName, component.defaultProps);
-      }
-    }
-  });
-  component["staticConfig"] = {
+  const config = {
     validStyles: validStyleProps,
-    ...staticConfig
-  };
-  const res = component;
-  res["extractable"] = (Component2, conf) => {
-    Component2["staticConfig"] = extendStaticConfig(res, {
-      ...conf,
-      neverFlatten: true,
-      defaultProps: {
-        ...Component2.defaultProps,
-        ...conf?.defaultProps
-      }
-    });
-    return Component2;
+    ...staticConfig,
+    validPropsExtra: {
+      ...staticConfig.validPropsExtra,
+      disabled: true,
+      fullscreen: true
+    }
   };
-  return res;
+  component["staticConfig"] = config;
+  return component;
 }
 __name(createComponent, "createComponent");
-let hasWarnedOnce = false;
 const Spacer = createComponent({
-  defaultProps: {
-    ...stackDefaultStyles,
-    size: true
-  },
+  defaultProps: stackDefaultStyles,
   variants: {
     size: {
       "...size": (size, { tokens }) => {
-        size = size == true ? "$true" : size;
         return {
           width: tokens.size[size] ?? size,
           height: tokens.size[size] ?? size
@@ -402,56 +358,34 @@ const Spacer = createComponent({
   }
 });
 function spacedChildren({
-  isZStack,
   children,
-  space,
+  spacing,
   flexDirection
 }) {
-  if (!space && !isZStack) {
+  if (!spacing) {
     return children;
   }
+  const next = [];
   const childrenList = Children.toArray(children);
   const len = childrenList.length;
   if (len === 1) {
     return children;
   }
-  const next = [];
+  const spacer = /* @__PURE__ */ React.createElement(Spacer, {
+    direction: flexDirection === "row" || flexDirection === "row-reverse" ? "horizontal" : "vertical",
+    size: spacing
+  });
   for (const [index, child] of childrenList.entries()) {
-    if (child === null || child === void 0) {
-      continue;
+    next.push(child);
+    if (index === len - 1) {
+      break;
     }
     const key = `${child?.["key"] ?? index}`;
-    next.push(/* @__PURE__ */ React.createElement(Fragment, {
-      key
-    }, isZStack ? /* @__PURE__ */ React.createElement(Absolute, null, child) : child));
-    if (child?.["type"]?.["isVisuallyHidden"]) {
-      continue;
-    }
-    if (index !== len - 1) {
-      if (space) {
-        next.push(/* @__PURE__ */ React.createElement(Spacer, {
-          key: `${key}_spacer`,
-          direction: flexDirection === "row" || flexDirection === "row-reverse" ? "horizontal" : "vertical",
-          size: space
-        }));
-      }
-    }
+    next.push(createElement(Fragment, { key: key + "_spacer" }, spacer));
   }
   return next;
 }
 __name(spacedChildren, "spacedChildren");
-const Absolute = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ React.createElement(View, {
-  style: sheet.fullscreen
-}, children), "Absolute");
-const sheet = StyleSheet.create({
-  fullscreen: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
-  }
-});
 export {
   Spacer,
   createComponent,