@tamagui/core 1.0.0-alpha.5 → 1.0.0-alpha.6

package/dist/index.cjs

@@ -56,7 +56,6 @@ var __toModule = (module2) => {
 __export(exports, {
   AnimatedStack: () => AnimatedStack,
   GET_DEFAULT_THEME: () => GET_DEFAULT_THEME,
-  SafeAreaProvider: () => SafeAreaProvider,
   Spacer: () => Spacer,
   Stack: () => Stack,
   Text: () => Text2,
@@ -83,6 +82,7 @@ __export(exports, {
   isChrome: () => isChrome,
   isObj: () => isObj,
   isSSR: () => isSSR,
+  isTamaguiElement: () => isTamaguiElement,
   isTouchDevice: () => isTouchDevice,
   isVariable: () => isVariable,
   isWeb: () => isWeb,
@@ -166,6 +166,9 @@ var Variable = class {
     this.name = name;
     this.variable = isWeb ? `var(--${name})` : this.val;
   }
+  toString() {
+    return isWeb ? this.variable : this.val;
+  }
 };
 __name(Variable, "Variable");
 var createVariable = /* @__PURE__ */ __name((props) => new Variable(props), "createVariable");
@@ -273,8 +276,12 @@ var Theme = /* @__PURE__ */ __name((props) => {
     return props.children;
   }
   const name = props.name;
-  const theme = themes[name] || themes[`${name}-${parentName}`];
+  const activeName = !name ? null : name in themes ? name : `${name}-${parentName}`;
+  const theme = activeName ? themes[activeName] : null;
   const themeManager = useConstant(() => {
+    if (!theme) {
+      return null;
+    }
     const manager = new ThemeManager();
     if (name) {
       manager.setActiveTheme(name, themes[name]);
@@ -282,15 +289,18 @@ var Theme = /* @__PURE__ */ __name((props) => {
     return manager;
   });
   useIsomorphicLayoutEffect(() => {
-    themeManager.setActiveTheme(name, theme);
+    if (!themeManager) {
+      return;
+    }
+    themeManager.setActiveTheme(activeName, theme);
     return parent.onChangeTheme((next) => {
       if (next) {
         themeManager.setActiveTheme(next, themes[next]);
         setParentName(next);
       }
     });
-  }, [themes, name]);
-  if (!name) {
+  }, [themes, activeName]);
+  if (!name || !theme) {
     return props.children;
   }
   const contents = themeManager ? /* @__PURE__ */ import_react6.default.createElement(ThemeManagerContext.Provider, {
@@ -1067,7 +1077,6 @@ var getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, isSplit
   const validStyleProps = staticConfig.isText ? import_helpers3.stylePropsText : import_helpers3.validStyles;
   const viewProps = {};
   const style = [];
-  const blacklistProps = isSplittingDefaultProps ? blacklistDefaultProps : blacklistFinalProps;
   let pseudos2 = null;
   let cur = null;
   let classNames = null;
@@ -1146,7 +1155,7 @@ var getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, isSplit
         cur[key] = val;
         continue;
       }
-      if (!blacklistProps[key]) {
+      if (!staticConfig.variants || !(key in staticConfig.variants)) {
         viewProps[key] = val;
       }
     }
@@ -1184,13 +1193,6 @@ var getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props) =
   fixNativeShadow(styleOut);
   return styleOut;
 }, "getSubStyle");
-var blacklistDefaultProps = __spreadValues(__spreadValues({}, import_helpers3.validStyles), import_helpers3.stylePropsText);
-var blacklistFinalProps = __spreadProps(__spreadValues({}, blacklistDefaultProps), {
-  tag: true,
-  debug: true,
-  space: true,
-  hitSlop: true
-});
 var mapTransformKeys = {
   x: "translateX",
   y: "translateY"
@@ -1303,8 +1305,40 @@ function createComponent(configIn) {
   let defaultsClassName = "";
   let initialTheme;
   const component = (0, import_react11.forwardRef)((props, forwardedRef) => {
-    var _a4;
+    var _b2;
+    const forceUpdate = (0, import_use_force_update2.useForceUpdate)();
+    const features = useFeatures(props, { forceUpdate });
+    const manager = (0, import_react11.useContext)(ThemeManagerContext);
+    const [state, set_] = (0, import_react11.useState)(() => ({
+      hover: false,
+      press: false,
+      pressIn: false,
+      theme: manager.name
+    }));
+    const set = /* @__PURE__ */ __name((next) => set_((prev) => {
+      for (const key in next) {
+        if (prev[key] !== next[key]) {
+          return __spreadValues(__spreadValues({}, prev), next);
+        }
+      }
+      return prev;
+    }), "set");
+    if (process.env.NODE_ENV === "development" && !isText && isWeb) {
+      import_react11.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 = isWeb ? (0, import_react11.useContext)(TextAncestorContext) : false;
+    const hostRef = (0, import_react11.useRef)(null);
     const {
+      viewProps: viewPropsIn,
+      pseudos: pseudos2,
+      style,
+      classNames
+    } = getSplitStyles(props, staticConfig, manager.theme || initialTheme);
+    const _a4 = viewPropsIn, {
       tag,
       hitSlop,
       children,
@@ -1337,34 +1371,52 @@ function createComponent(configIn) {
       onStartShouldSetResponderCapture,
       onMouseDown,
       onClick,
+      accessible,
+      accessibilityRole,
       onLayout
-    } = props;
-    const forceUpdate = (0, import_use_force_update2.useForceUpdate)();
-    const features = useFeatures(props, { forceUpdate });
-    const manager = (0, import_react11.useContext)(ThemeManagerContext);
-    const [state, set_] = (0, import_react11.useState)(() => ({
-      hover: false,
-      press: false,
-      pressIn: false,
-      theme: manager.name
-    }));
-    const set = /* @__PURE__ */ __name((next) => set_((prev) => {
-      for (const key in next) {
-        if (prev[key] !== next[key]) {
-          return __spreadValues(__spreadValues({}, prev), next);
-        }
-      }
-      return prev;
-    }), "set");
-    if (process.env.NODE_ENV === "development" && !isText && isWeb) {
-      import_react11.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>.`);
-        }
-      });
+    } = _a4, viewProps = __objRest(_a4, [
+      "tag",
+      "hitSlop",
+      "children",
+      "pointerEvents",
+      "onPress",
+      "onPressIn",
+      "onPressOut",
+      "onHoverIn",
+      "onHoverOut",
+      "space",
+      "disabled",
+      "onMouseEnter",
+      "onMouseLeave",
+      "hrefAttrs",
+      "onMoveShouldSetResponder",
+      "onMoveShouldSetResponderCapture",
+      "onResponderEnd",
+      "onResponderGrant",
+      "onResponderMove",
+      "onResponderReject",
+      "onResponderRelease",
+      "onResponderStart",
+      "onResponderTerminate",
+      "onResponderTerminationRequest",
+      "onScrollShouldSetResponder",
+      "onScrollShouldSetResponderCapture",
+      "onSelectionChangeShouldSetResponder",
+      "onSelectionChangeShouldSetResponderCapture",
+      "onStartShouldSetResponder",
+      "onStartShouldSetResponderCapture",
+      "onMouseDown",
+      "onClick",
+      "accessible",
+      "accessibilityRole",
+      "onLayout"
+    ]);
+    if (!isWeb) {
+      if (accessible)
+        viewProps.accessible = accessible;
+      if (accessibilityRole)
+        viewProps.accessibilityRole = accessibilityRole;
     }
-    const hasTextAncestor = isWeb ? (0, import_react11.useContext)(TextAncestorContext) : false;
-    const hostRef = (0, import_react11.useRef)(null);
     if (isWeb) {
       rnw.useResponderEvents(hostRef, {
         onMoveShouldSetResponder,
@@ -1386,7 +1438,6 @@ function createComponent(configIn) {
       });
     }
     const isTracking = (0, import_react11.useRef)(false);
-    const { viewProps, pseudos: pseudos2, style, classNames } = getSplitStyles(props, staticConfig, manager.theme || initialTheme);
     const internal = (0, import_react11.useRef)();
     if (!internal.current) {
       internal.current = {
@@ -1565,7 +1616,7 @@ function createComponent(configIn) {
         viewProps["debug"] = true;
         console.log("\u{1F95A} props in:", props);
         console.log("\u{1F95A} props out:", viewProps);
-        console.log((_a4 = props.onClick) == null ? void 0 : _a4.toString());
+        console.log((_b2 = props.onClick) == null ? void 0 : _b2.toString());
         console.log("\u{1F95A} etc:", { shouldAttach, ViewComponent, viewProps, styles, pseudos: pseudos2, content, childEls });
         if (isWeb) {
           console.log("\u{1F95A} component info", { staticConfig, tamaguiConfig });
@@ -1869,7 +1920,6 @@ var ThemeInverse = /* @__PURE__ */ __name((props) => {
   const themeName = useThemeName();
   const defaultTheme = useDefaultThemeName();
   const name = inversions[themeName] || inversions[defaultTheme] || null;
-  console.log("todo fixme invert", { themeName, defaultTheme, next: name });
   return /* @__PURE__ */ import_react13.default.createElement(Theme, {
     name
   }, props.children);
@@ -1895,8 +1945,15 @@ var themeable = /* @__PURE__ */ __name(function graphql(component) {
   return withTheme;
 }, "graphql");
 
-// src/views/Animated.tsx
+// src/helpers/isTamaguiElement.tsx
 var import_react15 = __toModule(require("react"));
+var isTamaguiElement = /* @__PURE__ */ __name((child) => {
+  var _a4;
+  return (0, import_react15.isValidElement)(child) && !!((_a4 = child.type["staticConfig"]) == null ? void 0 : _a4.parsed);
+}, "isTamaguiElement");
+
+// src/views/Animated.tsx
+var import_react16 = __toModule(require("react"));
 var import_react_native4 = __toModule(require("react-native"));
 
 // src/views/Stack.tsx
@@ -1939,7 +1996,7 @@ var AnimatedStack = /* @__PURE__ */ __name((_a4) => {
   const driver = useConstant(() => {
     return new import_react_native4.Animated.Value(0);
   });
-  const animatedProps = (0, import_react15.useMemo)(() => {
+  const animatedProps = (0, import_react16.useMemo)(() => {
     if (!animated) {
       return null;
     }
@@ -1972,8 +2029,8 @@ var AnimatedStack = /* @__PURE__ */ __name((_a4) => {
       toValue: animateState === "in" ? 1 : 0
     }).start();
   }, [animated, animateState]);
-  const childrenMemo = (0, import_react15.useMemo)(() => children, [children]);
-  return /* @__PURE__ */ import_react15.default.createElement(Stack, __spreadValues(__spreadValues({
+  const childrenMemo = (0, import_react16.useMemo)(() => children, [children]);
+  return /* @__PURE__ */ import_react16.default.createElement(Stack, __spreadValues(__spreadValues({
     animated
   }, props), animatedProps), childrenMemo);
 }, "AnimatedStack");
@@ -2077,27 +2134,4 @@ var Text2 = createComponent({
     cursor: true
   })
 });
-
-// src/views/SafeAreaProvider.tsx
-var import_react16 = __toModule(require("react"));
-var import_react_native5 = __toModule(require("react-native"));
-var import_react_native_safe_area_context = __toModule(require("react-native-safe-area-context"));
-var defaultMetrics = null;
-var SafeAreaProvider = /* @__PURE__ */ __name(({
-  initialWindowMetrics,
-  children
-}) => {
-  if (!initialWindowMetrics && !defaultMetrics) {
-    defaultMetrics = import_react_native5.Platform.select({
-      web: {
-        frame: { x: 0, y: 0, width: 0, height: 0 },
-        insets: { top: 0, left: 0, right: 0, bottom: 0 }
-      },
-      default: import_react_native_safe_area_context.initialWindowMetrics
-    });
-  }
-  return /* @__PURE__ */ import_react16.default.createElement(import_react_native_safe_area_context.SafeAreaProvider, {
-    initialMetrics: initialWindowMetrics ?? defaultMetrics
-  }, children);
-}, "SafeAreaProvider");
 //# sourceMappingURL=index.cjs.map