@tamagui/core 1.0.0-alpha.1 → 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,
@@ -104,7 +104,6 @@ __export(exports, {
   themeable: () => themeable,
   useConstant: () => useConstant,
   useDefaultThemeName: () => useDefaultThemeName,
-  useForceUpdate: () => useForceUpdate,
   useIsomorphicLayoutEffect: () => useIsomorphicLayoutEffect,
   useMedia: () => useMedia,
   useTheme: () => useTheme,
@@ -113,7 +112,8 @@ __export(exports, {
 
 // src/createComponent.tsx
 var import_helpers4 = __toModule(require("@tamagui/helpers"));
-var import_react12 = __toModule(require("react"));
+var import_use_force_update2 = __toModule(require("@tamagui/use-force-update"));
+var import_react11 = __toModule(require("react"));
 var import_react_native3 = __toModule(require("react-native"));
 
 // src/constants/platform.ts
@@ -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, {
@@ -364,7 +374,8 @@ function createTamaguiProvider(themeProps) {
 __name(createTamaguiProvider, "createTamaguiProvider");
 
 // src/hooks/useMedia.tsx
-var import_react9 = __toModule(require("react"));
+var import_use_force_update = __toModule(require("@tamagui/use-force-update"));
+var import_react8 = __toModule(require("react"));
 
 // src/helpers/matchMedia.ts
 var matchMedia = typeof window !== "undefined" && window.matchMedia || /* @__PURE__ */ __name(function matchMediaFallback(query) {
@@ -377,30 +388,6 @@ var matchMedia = typeof window !== "undefined" && window.matchMedia || /* @__PUR
   };
 }, "matchMediaFallback");
 
-// src/hooks/useForceUpdate.tsx
-var import_react8 = __toModule(require("react"));
-function useForceUpdate() {
-  const setState = (0, import_react8.useState)(0)[1];
-  const internal = (0, import_react8.useRef)();
-  if (!internal.current) {
-    internal.current = {
-      isMounted: true,
-      update: () => {
-        if (internal.current.isMounted) {
-          setState(Math.random());
-        }
-      }
-    };
-  }
-  (0, import_react8.useEffect)(() => {
-    return () => {
-      internal.current.isMounted = false;
-    };
-  }, []);
-  return internal.current.update;
-}
-__name(useForceUpdate, "useForceUpdate");
-
 // src/hooks/useMedia.tsx
 var mediaState = {};
 var mediaQueryListeners = {};
@@ -477,8 +464,8 @@ var configureMedia = /* @__PURE__ */ __name(({
   }
 }, "configureMedia");
 var useMedia = /* @__PURE__ */ __name(() => {
-  const forceUpdate = useForceUpdate();
-  const state = (0, import_react9.useRef)();
+  const forceUpdate = (0, import_use_force_update.useForceUpdate)();
+  const state = (0, import_react8.useRef)();
   if (!state.current) {
     state.current = {
       selections: {},
@@ -700,7 +687,7 @@ var parseTokens = /* @__PURE__ */ __name((tokens) => {
 }, "parseTokens");
 
 // src/helpers/addStylesUsingClassname.tsx
-var import_react10 = __toModule(require("react"));
+var import_react9 = __toModule(require("react"));
 
 // src/helpers/getStylesAtomic.ts
 var import_helpers2 = __toModule(require("@tamagui/helpers"));
@@ -817,7 +804,7 @@ __name(insertStyleRule, "insertStyleRule");
 // src/helpers/addStylesUsingClassname.tsx
 var added = new Set();
 function useStylesAsClassname(styles) {
-  if (!import_react10.useInsertionEffect) {
+  if (!import_react9.useInsertionEffect) {
     return addStylesUsingClassname(styles);
   } else {
     const insertions = [];
@@ -826,7 +813,7 @@ function useStylesAsClassname(styles) {
         insertions.push(rule);
       }
     });
-    (0, import_react10.useInsertionEffect)(() => {
+    (0, import_react9.useInsertionEffect)(() => {
       for (const ruleset of insertions) {
         insertStyleRule(ruleset);
       }
@@ -1090,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;
@@ -1169,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;
       }
     }
@@ -1207,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"
@@ -1225,7 +1204,7 @@ var mergeTransform = /* @__PURE__ */ __name((obj, key, val) => {
 }, "mergeTransform");
 
 // src/hooks/useFeatures.tsx
-var import_react11 = __toModule(require("react"));
+var import_react10 = __toModule(require("react"));
 var createDefinition = /* @__PURE__ */ __name(({ Component, propNames }) => ({
   isEnabled: (props) => propNames.some((name) => !!props[name]),
   Component
@@ -1283,7 +1262,7 @@ var useFeatures = /* @__PURE__ */ __name((props, utils) => {
     const name = featureNames[i];
     const { isEnabled, Component } = featureDefinitions[name];
     if (isEnabled(props) && Component) {
-      features.push(/* @__PURE__ */ import_react11.default.createElement(Component, __spreadProps(__spreadValues({
+      features.push(/* @__PURE__ */ import_react10.default.createElement(Component, __spreadProps(__spreadValues({
         key: name
       }, props), {
         _utils: utils
@@ -1325,9 +1304,41 @@ function createComponent(configIn) {
   let defaultsStyle;
   let defaultsClassName = "";
   let initialTheme;
-  const component = (0, import_react12.forwardRef)((props, forwardedRef) => {
-    var _a4;
+  const component = (0, import_react11.forwardRef)((props, forwardedRef) => {
+    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,
@@ -1360,34 +1371,52 @@ function createComponent(configIn) {
       onStartShouldSetResponderCapture,
       onMouseDown,
       onClick,
+      accessible,
+      accessibilityRole,
       onLayout
-    } = props;
-    const forceUpdate = useForceUpdate();
-    const features = useFeatures(props, { forceUpdate });
-    const manager = (0, import_react12.useContext)(ThemeManagerContext);
-    const [state, set_] = (0, import_react12.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_react12.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_react12.useContext)(TextAncestorContext) : false;
-    const hostRef = (0, import_react12.useRef)(null);
     if (isWeb) {
       rnw.useResponderEvents(hostRef, {
         onMoveShouldSetResponder,
@@ -1408,15 +1437,14 @@ function createComponent(configIn) {
         onStartShouldSetResponderCapture
       });
     }
-    const isTracking = (0, import_react12.useRef)(false);
-    const { viewProps, pseudos: pseudos2, style, classNames } = getSplitStyles(props, staticConfig, manager.theme || initialTheme);
-    const internal = (0, import_react12.useRef)();
+    const isTracking = (0, import_react11.useRef)(false);
+    const internal = (0, import_react11.useRef)();
     if (!internal.current) {
       internal.current = {
         isMounted: true
       };
     }
-    (0, import_react12.useEffect)(() => {
+    (0, import_react11.useEffect)(() => {
       internal.current.isMounted = true;
       const dispose = manager == null ? void 0 : manager.onChangeTheme((name) => {
         if (isTracking.current) {
@@ -1489,7 +1517,7 @@ function createComponent(configIn) {
     if (shouldAttach) {
       internal.current.hasEverHadEvents = true;
     }
-    const unPress = (0, import_react12.useCallback)(() => {
+    const unPress = (0, import_react11.useCallback)(() => {
       if (!internal.current.isMounted)
         return;
       set({
@@ -1575,27 +1603,27 @@ function createComponent(configIn) {
       const className = domProps.className && domProps.className !== viewProps.className ? `${domProps.className} ${viewProps.className}` : viewProps.className;
       Object.assign(viewProps, domProps);
       viewProps.className = className;
-      content = (0, import_react12.createElement)(ViewComponent, viewProps, childEls);
+      content = (0, import_react11.createElement)(ViewComponent, viewProps, childEls);
     } else {
-      content = (0, import_react12.createElement)(ViewComponent, viewProps, childEls);
+      content = (0, import_react11.createElement)(ViewComponent, viewProps, childEls);
     }
     const shouldWrapTextAncestor = isWeb && isText && !hasTextAncestor;
     if (shouldWrapTextAncestor) {
-      content = (0, import_react12.createElement)(TextAncestorContext.Provider, { value: true }, content);
+      content = (0, import_react11.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((_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 });
         }
       }
     }
-    return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, features, content);
+    return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, features, content);
   });
   onConfiguredOnce((conf3) => {
     var _a4;
@@ -1669,7 +1697,7 @@ function spacedChildren({
   if (!space && !isZStack) {
     return children;
   }
-  const childrenList = import_react12.Children.toArray(children);
+  const childrenList = import_react11.Children.toArray(children);
   const len = childrenList.length;
   if (len === 1) {
     return children;
@@ -1680,15 +1708,15 @@ function spacedChildren({
       continue;
     }
     const key = `${(child == null ? void 0 : child["key"]) ?? index}`;
-    next.push(/* @__PURE__ */ import_react12.default.createElement(import_react12.Fragment, {
+    next.push(/* @__PURE__ */ import_react11.default.createElement(import_react11.Fragment, {
       key
-    }, isZStack ? /* @__PURE__ */ import_react12.default.createElement(Absolute, null, child) : child));
+    }, isZStack ? /* @__PURE__ */ import_react11.default.createElement(Absolute, null, child) : child));
     if ((_a4 = child == null ? void 0 : child["type"]) == null ? void 0 : _a4["isVisuallyHidden"]) {
       continue;
     }
     if (index !== len - 1) {
       if (space) {
-        next.push(/* @__PURE__ */ import_react12.default.createElement(Spacer, {
+        next.push(/* @__PURE__ */ import_react11.default.createElement(Spacer, {
           key: `${key}_spacer`,
           direction: flexDirection === "row" || flexDirection === "row-reverse" ? "horizontal" : "vertical",
           size: space
@@ -1699,7 +1727,7 @@ function spacedChildren({
   return next;
 }
 __name(spacedChildren, "spacedChildren");
-var Absolute = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ import_react12.default.createElement(import_react_native3.View, {
+var Absolute = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ import_react11.default.createElement(import_react_native3.View, {
   style: sheet.fullscreen
 }, children), "Absolute");
 var sheet = import_react_native3.StyleSheet.create({
@@ -1792,13 +1820,14 @@ function styled(Component, options, staticExtractionOptions) {
 __name(styled, "styled");
 
 // src/helpers/themeable.tsx
-var import_react15 = __toModule(require("react"));
+var import_react14 = __toModule(require("react"));
 
 // src/views/ThemeInverse.tsx
-var import_react14 = __toModule(require("react"));
+var import_react13 = __toModule(require("react"));
 
 // src/hooks/useTheme.tsx
-var import_react13 = __toModule(require("react"));
+var import_use_force_update3 = __toModule(require("@tamagui/use-force-update"));
+var import_react12 = __toModule(require("react"));
 var areEqualSets = /* @__PURE__ */ __name((a, b) => {
   if (a.size !== b.size)
     return false;
@@ -1810,9 +1839,9 @@ var areEqualSets = /* @__PURE__ */ __name((a, b) => {
   return true;
 }, "areEqualSets");
 var useThemeName = /* @__PURE__ */ __name(() => {
-  const parent = (0, import_react13.useContext)(ThemeManagerContext);
-  const [name, setName] = (0, import_react13.useState)(parent.name);
-  (0, import_react13.useEffect)(() => {
+  const parent = (0, import_react12.useContext)(ThemeManagerContext);
+  const [name, setName] = (0, import_react12.useState)(parent.name);
+  (0, import_react12.useEffect)(() => {
     return parent.onChangeTheme((next) => {
       setName((prev) => {
         if (prev === next)
@@ -1824,13 +1853,13 @@ var useThemeName = /* @__PURE__ */ __name(() => {
   return name || "light";
 }, "useThemeName");
 var useDefaultThemeName = /* @__PURE__ */ __name(() => {
-  return (0, import_react13.useContext)(ThemeContext)[GET_DEFAULT_THEME];
+  return (0, import_react12.useContext)(ThemeContext)[GET_DEFAULT_THEME];
 }, "useDefaultThemeName");
 var useTheme = /* @__PURE__ */ __name(() => {
-  const forceUpdate = useForceUpdate();
-  const manager = (0, import_react13.useContext)(ThemeManagerContext);
-  const themes = (0, import_react13.useContext)(ThemeContext);
-  const state = (0, import_react13.useRef)();
+  const forceUpdate = (0, import_use_force_update3.useForceUpdate)();
+  const manager = (0, import_react12.useContext)(ThemeManagerContext);
+  const themes = (0, import_react12.useContext)(ThemeContext);
+  const state = (0, import_react12.useRef)();
   if (!state.current) {
     state.current = {
       uuid: {},
@@ -1847,11 +1876,11 @@ var useTheme = /* @__PURE__ */ __name(() => {
       manager.track(st.uuid, st.keys);
     }
   });
-  (0, import_react13.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     return manager.onUpdate(state.current.uuid, forceUpdate);
   }, []);
   const theme = (manager.name ? themes[manager.name] : themes.light) ?? themes.light;
-  return (0, import_react13.useMemo)(() => {
+  return (0, import_react12.useMemo)(() => {
     return new Proxy(theme, {
       get(_, key) {
         const name = manager.name;
@@ -1891,22 +1920,21 @@ 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_react14.default.createElement(Theme, {
+  return /* @__PURE__ */ import_react13.default.createElement(Theme, {
     name
   }, props.children);
 }, "ThemeInverse");
 
 // src/helpers/themeable.tsx
 var themeable = /* @__PURE__ */ __name(function graphql(component) {
-  const withThemeComponent = (0, import_react15.forwardRef)(/* @__PURE__ */ __name(function WithTheme(_a4, ref) {
+  const withThemeComponent = (0, import_react14.forwardRef)(/* @__PURE__ */ __name(function WithTheme(_a4, ref) {
     var _b2 = _a4, { themeInverse } = _b2, rest = __objRest(_b2, ["themeInverse"]);
-    const el = import_react15.default.createElement(component, __spreadProps(__spreadValues({}, rest), { ref }));
+    const el = import_react14.default.createElement(component, __spreadProps(__spreadValues({}, rest), { ref }));
     if (themeInverse) {
-      return /* @__PURE__ */ import_react15.default.createElement(ThemeInverse, null, el);
+      return /* @__PURE__ */ import_react14.default.createElement(ThemeInverse, null, el);
     }
     if (rest.theme) {
-      return /* @__PURE__ */ import_react15.default.createElement(Theme, {
+      return /* @__PURE__ */ import_react14.default.createElement(Theme, {
         name: rest.theme || null
       }, el);
     }
@@ -1917,6 +1945,13 @@ var themeable = /* @__PURE__ */ __name(function graphql(component) {
   return withTheme;
 }, "graphql");
 
+// 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"));
@@ -2099,27 +2134,4 @@ var Text2 = createComponent({
     cursor: true
   })
 });
-
-// src/views/SafeAreaProvider.tsx
-var import_react17 = __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_react17.default.createElement(import_react_native_safe_area_context.SafeAreaProvider, {
-    initialMetrics: initialWindowMetrics ?? defaultMetrics
-  }, children);
-}, "SafeAreaProvider");
 //# sourceMappingURL=index.cjs.map