@tamagui/core 1.0.0-beta.1 → 1.0.0-beta.12

package/dist/jsx/createComponent.js

@@ -16,21 +16,19 @@ import React, {
 import { StyleSheet, Text, View } from "react-native";
 import { onConfiguredOnce } from "./conf";
 import { stackDefaultStyles } from "./constants/constants";
-import { isAndroid, isTouchDevice, isWeb, useIsomorphicLayoutEffect } from "./constants/platform";
+import { isAndroid, isWeb, useIsomorphicLayoutEffect } from "./constants/platform";
 import { rnw } from "./constants/rnw";
-import { isVariable } from "./createVariable";
 import { createShallowUpdate } from "./helpers/createShallowUpdate";
 import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig";
-import {
-  insertSplitStyles,
-  useSplitStyles
-} from "./helpers/getSplitStyles";
+import { insertSplitStyles, useSplitStyles } from "./helpers/getSplitStyles";
 import { getAllSelectors } from "./helpers/insertStyleRule";
 import { proxyThemeVariables } from "./helpers/proxyThemeVariables";
 import { wrapThemeManagerContext } from "./helpers/wrapThemeManagerContext";
 import { useFeatures } from "./hooks/useFeatures";
+import { useIsTouchDevice } from "./hooks/useIsTouchDevice";
 import { usePressable } from "./hooks/usePressable";
 import { getThemeManagerIfChanged, useTheme } from "./hooks/useTheme";
+import { Slot } from "./views/Slot";
 import { TextAncestorContext } from "./views/TextAncestorContext";
 React["keep"];
 const defaultComponentState = {
@@ -47,6 +45,14 @@ if (typeof document !== "undefined") {
     mouseUps.forEach((x) => x());
     mouseUps.clear();
   });
+  document.addEventListener("touchend", () => {
+    mouseUps.forEach((x) => x());
+    mouseUps.clear();
+  });
+  document.addEventListener("touchcancel", () => {
+    mouseUps.forEach((x) => x());
+    mouseUps.clear();
+  });
 }
 function mergeShorthands({ defaultProps }, { shorthands }) {
   for (const key in defaultProps) {
@@ -71,6 +77,7 @@ function createComponent(configIn, ParentComponent) {
   let avoidClasses = true;
   let defaultNativeStyle;
   let defaultNativeStyleSheet;
+  let tamaguiDefaultProps;
   let initialSplitStyles;
   function addPseudoToStyles(styles, name, pseudos) {
     const pseudoStyle = pseudos[name];
@@ -86,11 +93,12 @@ function createComponent(configIn, ParentComponent) {
   __name(addPseudoToStyles, "addPseudoToStyles");
   const component = forwardRef((props, forwardedRef) => {
     var _a, _b, _c, _d;
+    props = tamaguiDefaultProps && !props.asChild ? { ...tamaguiDefaultProps, ...props } : props;
     const { Component, componentName, isText, isZStack } = staticConfig;
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
-        console.warn(staticConfig.componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", "debug on");
-        console.log("props in:", props);
+        console.log("\u26A0\uFE0F", staticConfig.componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", "debug on");
+        console.log("props in:", props, Object.keys(props));
         if (props["debug"] === "break")
           debugger;
       }
@@ -100,7 +108,7 @@ function createComponent(configIn, ParentComponent) {
     const [state, set_] = useState(defaultComponentState);
     const setStateShallow = createShallowUpdate(set_);
     const shouldAvoidClasses = !!(props.animation && avoidClasses);
-    const splitStyles = useSplitStyles(props, staticConfig, theme, shouldAvoidClasses ? { ...state, noClassNames: true, resolveVariablesAs: "value" } : state, shouldAvoidClasses ? null : initialSplitStyles.classNames);
+    const splitStyles = useSplitStyles(props, staticConfig, theme, shouldAvoidClasses ? { ...state, noClassNames: true, resolveVariablesAs: "value" } : state, shouldAvoidClasses || props.asChild ? null : initialSplitStyles.classNames);
     const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitStyles;
     const useAnimations = (_a = tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
     const isAnimated = !!(useAnimations && props.animation);
@@ -119,6 +127,7 @@ function createComponent(configIn, ParentComponent) {
     const {
       tag,
       hitSlop,
+      asChild,
       children,
       pointerEvents,
       onPress,
@@ -202,7 +211,7 @@ function createComponent(configIn, ParentComponent) {
       if (accessibilityRole)
         viewProps.accessibilityRole = accessibilityRole;
     }
-    if (isWeb) {
+    if (isWeb && !asChild) {
       rnw.useResponderEvents(hostRef, {
         onMoveShouldSetResponder,
         onMoveShouldSetResponderCapture,
@@ -306,10 +315,11 @@ function createComponent(configIn, ParentComponent) {
     }
     const initialPseudos = initialSplitStyles.pseudos;
     const attachPress = !!(pseudos && pseudos.pressStyle || initialPseudos && initialPseudos.pressStyle || onPress || onPressOut || onPressIn || onClick);
-    const isHoverable = isWeb && !isTouchDevice;
+    const isTouch = useIsTouchDevice();
+    const isHoverable = isWeb && !isTouch;
     const attachHover = isHoverable && !!(pseudos && pseudos.hoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
     const pressEventKey = isStringElement ? "onClick" : "onPress";
-    const shouldAttach = 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);
+    const shouldAttach = !asChild && (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));
     const unPress = useCallback(() => {
       if (!internal.current.isMounted)
         return;
@@ -364,15 +374,18 @@ function createComponent(configIn, ParentComponent) {
         });
         onPressIn == null ? void 0 : onPressIn(e);
         onMouseDown == null ? void 0 : onMouseDown(e);
+        if (isWeb) {
+          mouseUps.add(unPress);
+        }
       } : null,
       [pressEventKey]: attachPress ? (e) => {
+        onClick == null ? void 0 : onClick(e);
         onPress == null ? void 0 : onPress(e);
         unPress();
         onPressOut == null ? void 0 : onPressOut(e);
-        onClick == null ? void 0 : onClick(e);
       } : null
     } : null;
-    let childEls = !children ? children : wrapThemeManagerContext(spacedChildren({
+    const childEls = !children || asChild ? children : wrapThemeManagerContext(spacedChildren({
       children,
       space,
       flexDirection: props.flexDirection || ((_b = staticConfig.defaultProps) == null ? void 0 : _b.flexDirection),
@@ -412,6 +425,11 @@ function createComponent(configIn, ParentComponent) {
         Object.assign(viewProps, events);
       }
     }
+    if (asChild) {
+      ViewComponent = Slot;
+      const onlyChild = React.Children.only(children);
+      Object.assign(viewProps, onlyChild.props);
+    }
     content = createElement(ViewComponent, viewProps, childEls);
     if (isWeb && events && attachHover) {
       content = <span className="tui_Hoverable" style={{
@@ -453,24 +471,33 @@ function createComponent(configIn, ParentComponent) {
       resolveVariablesAs: "both",
       keepVariantsAsProps: true
     });
-    const { style, viewProps } = initialSplitStyles;
+    const defaults = {
+      ...component.defaultProps,
+      ...initialSplitStyles.viewProps
+    };
     defaultNativeStyle = {};
-    for (const key in style) {
-      const v = style[key];
-      defaultNativeStyle[key] = isVariable(v) ? v.val : v;
+    for (const key in staticConfig.defaultProps) {
+      const val = staticConfig.defaultProps[key];
+      if (typeof val === "string" && val[0] === "$") {
+        defaults[key] = val;
+      } else {
+        defaultNativeStyle[key] = val;
+      }
     }
     defaultNativeStyleSheet = StyleSheet.create({
       base: defaultNativeStyle
     });
-    component.defaultProps = {
-      ...viewProps,
-      ...component.defaultProps
-    };
+    if (Object.keys(defaults).length) {
+      tamaguiDefaultProps = defaults;
+    }
     if (process.env.NODE_ENV === "development" && ((_d = staticConfig.defaultProps) == null ? void 0 : _d.debug)) {
       if (process.env.IS_STATIC !== "is_static") {
         console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, {
           staticConfig,
-          initialSplitStyles
+          initialSplitStyles,
+          tamaguiDefaultProps,
+          defaultNativeStyle,
+          defaults
         });
       }
     }

package/dist/jsx/helpers/addStylesUsingClassname.js

@@ -1,24 +1,29 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { useInsertionEffect, useLayoutEffect } from "react";
+import { useInsertionEffect } from "react";
 import { getStylesAtomic } from "./getStylesAtomic";
 import { insertStyleRule, updateInsertedCache } from "./insertStyleRule";
 let added = /* @__PURE__ */ new Set();
-const effect = useInsertionEffect || useLayoutEffect;
 function useStylesAsClassname(styles, disable = false, debug = false) {
-  const insertions = [];
-  const className = addStylesUsingClassname(disable ? [] : styles, debug, (identifier, rules) => {
-    for (const rule of rules) {
-      insertions.push({ identifier, rule });
-      updateInsertedCache(identifier, rule);
-    }
-  });
-  effect(() => {
+  if (!useInsertionEffect) {
+    return addStylesUsingClassname(disable ? styles : [], debug);
+  } else {
+    const insertions = [];
+    const className = addStylesUsingClassname(disable ? [] : styles, debug, (identifier, rules) => {
+      for (const rule of rules) {
+        insertions.push({ identifier, rule });
+      }
+    });
     for (const { identifier, rule } of insertions) {
-      insertStyleRule(identifier, rule);
+      updateInsertedCache(identifier, rule);
     }
-  }, [className]);
-  return className;
+    useInsertionEffect(() => {
+      for (const { identifier, rule } of insertions) {
+        insertStyleRule(identifier, rule);
+      }
+    });
+    return className;
+  }
 }
 __name(useStylesAsClassname, "useStylesAsClassname");
 function addStylesUsingClassname(styles, debug = false, onAdd) {

package/dist/jsx/helpers/createPropMapper.js

@@ -63,7 +63,7 @@ const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
         if (isObj(variantValue)) {
           variantValue = resolveTokens(variantValue, conf, theme, fontFamily, returnVariablesAs);
         }
-        return variantValue;
+        return expansions(variantValue);
       }
     }
     let shouldReturn = false;
@@ -80,9 +80,9 @@ const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
       }
     }
     if (shouldReturn) {
-      return {
+      return expansions({
         [key]: value
-      };
+      });
     }
   };
 }, "createPropMapper");
@@ -200,6 +200,38 @@ const tokenCategories = {
     borderRightColor: true
   }
 };
+const sidesX = ["Left", "Right"];
+const sidesY = ["Top", "Bottom"];
+const sidesXY = [...sidesX, ...sidesY];
+const expand = {
+  padding: sidesXY.map((x) => `padding${x}`),
+  paddingHorizontal: sidesX.map((x) => `padding${x}`),
+  paddingVertical: sidesY.map((x) => `padding${x}`),
+  margin: sidesXY.map((x) => `margin${x}`),
+  marginHorizontal: sidesX.map((x) => `margin${x}`),
+  marginVertical: sidesY.map((x) => `margin${x}`),
+  borderWidth: sidesXY.map((x) => `border${x}Width`)
+};
+function expansions(styleObj) {
+  var _a, _b;
+  for (const key in expand) {
+    if (key in styleObj) {
+      for (const expandKey of expand[key]) {
+        styleObj[expandKey] = styleObj[key];
+      }
+      delete styleObj[key];
+    }
+  }
+  if ("flex" in styleObj) {
+    if (typeof styleObj.flex === "number") {
+      styleObj.flexGrow = (_a = styleObj.flexGrow) != null ? _a : styleObj.flex;
+      styleObj.flexShrink = (_b = styleObj.flexShrink) != null ? _b : 1;
+      delete styleObj.flex;
+    }
+  }
+  return styleObj;
+}
+__name(expansions, "expansions");
 export {
   createPropMapper
 };

package/dist/jsx/helpers/fixNativeShadow.native.js

@@ -2,7 +2,8 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 const matchRgbaHsla = /(rgba|hsla)\(\s*([\d\.]{1,}%?)\s*,\s*([\d\.]{1,}%?)\s*,\s*([\d\.]{1,}%?)\s*,\s*([\d\.]{1,})\s*\)$/;
 function fixNativeShadow(props) {
-  if (!props.shadowColor) {
+  var _a, _b;
+  if (!props.shadowColor || props.shadowColor === "transparent") {
     return;
   }
   if (!props.shadowOffset) {
@@ -11,10 +12,7 @@ function fixNativeShadow(props) {
       height: 0
     };
   }
-  if ("shadowOpacity" in props) {
-    return;
-  }
-  const c = `${props.shadowColor}`;
+  const c = String(props.shadowColor);
   if ((c[0] === "r" || c[0] === "h") && c[3] === "a") {
     const [_, type, _1, _2, _3, a] = c.match(matchRgbaHsla) || [];
     if (typeof a !== "string") {
@@ -22,9 +20,9 @@ function fixNativeShadow(props) {
       throw new Error(`invalid style`);
     }
     props.shadowColor = `${type.replace("a", "")}(${_1},${_2},${_3})`;
-    props.shadowOpacity = +a;
+    props.shadowOpacity = (_a = props.shadowOpacity) != null ? _a : +a;
   } else {
-    props.shadowOpacity = 1;
+    props.shadowOpacity = (_b = props.shadowOpacity) != null ? _b : 1;
   }
 }
 __name(fixNativeShadow, "fixNativeShadow");

package/dist/jsx/helpers/getButtonSize.js

@@ -0,0 +1,23 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { getVariableValue, isVariable } from "@tamagui/core";
+const getButtonSize = /* @__PURE__ */ __name((sizeX = 0.9, sizeY = 0.333) => (val, { tokens, props, fonts }) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const size = (_c = (_b = (_a = tokens.size[val]) != null ? _a : tokens.size["$4"]) != null ? _b : val) != null ? _c : 14;
+  const radius = (_e = (_d = tokens.radius[val]) != null ? _d : tokens.radius["$4"]) != null ? _e : size;
+  const px = Math.round(+(isVariable(size) ? size.val : size) * sizeX);
+  const py = Math.round(+(isVariable(size) ? size.val : size) * sizeY);
+  const font = fonts[props.fontFamily] || fonts["$body"];
+  const lineHeights = font.lineHeight;
+  const lineHeight = (_f = lineHeights[val]) != null ? _f : lineHeights["$4"];
+  const minHeight = Math.round(getVariableValue(lineHeight) + py * 2);
+  return {
+    minHeight,
+    paddingHorizontal: props.circular ? 0 : px,
+    paddingVertical: props.circular ? 0 : py,
+    borderRadius: props.circular ? 1e5 : (_g = props.borderRadius) != null ? _g : radius
+  };
+}, "getButtonSize");
+export {
+  getButtonSize
+};

package/dist/jsx/helpers/getSplitStyles.js

@@ -288,13 +288,6 @@ const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props,
   return styleOut;
 }, "getSubStyle");
 function normalizeStyleObject(style) {
-  var _a, _b;
-  if (typeof style.flex === "number") {
-    const val = style.flex;
-    delete style.flex;
-    style.flexGrow = (_a = style.flexGrow) != null ? _a : val;
-    style.flexShrink = (_b = style.flexShrink) != null ? _b : 1;
-  }
   if (!isWeb) {
     fixNativeShadow(style);
   }

package/dist/jsx/helpers/getTextSize.js

@@ -0,0 +1,33 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { getVariableValue } from "../createVariable";
+const getTextSize = /* @__PURE__ */ __name((val = "$4", { fonts, theme, props }) => {
+  var _a, _b, _c;
+  const family = getVariableValue(props.fontFamily) || "$body";
+  const font = fonts[family] || fonts["$body"];
+  if (!font) {
+    console.warn("\u26A0\uFE0F no font found", { family, fontTokens: Object.keys(fonts), val });
+    return;
+  }
+  const fontFamily = font.family;
+  const fontSize = props.fontSize || font.size[val];
+  const lineHeight = props.lineHeight || font.lineHeight[val];
+  const fontWeight = props.fontWeight || font.weight[val];
+  const letterSpacing = props.letterSpacing || font.letterSpacing[val];
+  const fontStyle = props.fontStyle || ((_a = font.style) == null ? void 0 : _a[val]);
+  const textTransform = props.textTransform || ((_b = font.transform) == null ? void 0 : _b[val]);
+  const color = props.color || ((_c = font.color) == null ? void 0 : _c[val]) || theme.color;
+  return {
+    color,
+    fontStyle,
+    textTransform,
+    fontFamily,
+    fontWeight,
+    letterSpacing,
+    fontSize,
+    lineHeight
+  };
+}, "getTextSize");
+export {
+  getTextSize
+};

package/dist/jsx/helpers/insertStyleRule.js

@@ -79,6 +79,7 @@ function insertStyleRule(identifier, rule) {
     return;
   hasInsertedSinceUpdate = true;
   updateInsertedCache(identifier, rule);
+  allSelectors[identifier] = process.env.NODE_ENV === "development" ? rule : true;
   sheet == null ? void 0 : sheet.insertRule(rule, sheet.cssRules.length);
 }
 __name(insertStyleRule, "insertStyleRule");

package/dist/jsx/hooks/useId.js

@@ -0,0 +1,34 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import * as React from "react";
+import { useIsomorphicLayoutEffect } from "../constants/platform";
+let serverHandoffComplete = false;
+let id = 0;
+function genId() {
+  return ++id;
+}
+__name(genId, "genId");
+function useId(providedId) {
+  var _a;
+  if (typeof React.useId === "function") {
+    let id3 = React.useId(providedId);
+    return providedId != null ? providedId : id3;
+  }
+  let initialId = providedId != null ? providedId : serverHandoffComplete ? genId() : null;
+  let [id2, setId] = React.useState(initialId);
+  useIsomorphicLayoutEffect(() => {
+    if (id2 === null) {
+      setId(genId());
+    }
+  }, []);
+  React.useEffect(() => {
+    if (serverHandoffComplete === false) {
+      serverHandoffComplete = true;
+    }
+  }, []);
+  return (_a = providedId != null ? providedId : id2) != null ? _a : void 0;
+}
+__name(useId, "useId");
+export {
+  useId
+};

package/dist/jsx/hooks/useIsTouchDevice.js

@@ -1,14 +1,14 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { useEffect, useState } from "react";
-import { isTouchDevice } from "../constants/platform";
+import { useState } from "react";
+import { isTouchDevice, useIsomorphicLayoutEffect } from "../constants/platform";
 const useIsTouchDevice = /* @__PURE__ */ __name(() => {
   const [touchOnly, setTouchOnly] = useState(false);
-  if (isTouchDevice) {
-    useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
+    if (isTouchDevice) {
       setTouchOnly(true);
-    }, []);
-  }
+    }
+  }, []);
   return touchOnly;
 }, "useIsTouchDevice");
 export {

package/dist/jsx/hooks/useMedia.js

@@ -86,7 +86,6 @@ const useMedia = /* @__PURE__ */ __name(() => {
     }
     for (const key in st.nextSelections) {
       if (!(key in st.selections)) {
-        console.log("lsiten", key);
         addMediaQueryListener(key, forceUpdate);
       }
     }

package/dist/jsx/index.js

@@ -13,31 +13,34 @@ import { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } f
 export * from "./constants/constants";
 export * from "./constants/platform";
 export * from "./constants/rnw";
+export * from "./helpers/getButtonSize";
 export * from "./helpers/getExpandedShorthands";
 export * from "./helpers/getSize";
 export * from "./helpers/getSplitStyles";
 export * from "./helpers/getStylesAtomic";
+export * from "./helpers/getTextSize";
 export * from "./helpers/isObj";
 export * from "./helpers/isTamaguiElement";
 export * from "./helpers/matchMedia";
 export * from "./helpers/themeable";
 export * from "./helpers/withStaticProperties";
 export * from "./contexts/ButtonInsideButtonContext";
-export * from "./hooks/useIsTouchDevice";
 export * from "./hooks/useConstant";
-export * from "./hooks/usePressable";
+export * from "./hooks/useId";
+export * from "./hooks/useIsMounted";
+export * from "./hooks/useIsTouchDevice";
 export * from "./hooks/useMedia";
+export * from "./hooks/usePressable";
 export * from "./hooks/useTheme";
-export * from "./hooks/useIsMounted";
 export * from "./hooks/useUnmountEffect";
-export * from "@tamagui/use-force-update";
 export * from "./views/Stack";
 export * from "./views/Text";
+export * from "./views/TextAncestorContext";
 export * from "./views/Theme";
-export * from "./views/ThemeReset";
 export * from "./views/ThemeInverse";
 export * from "./views/ThemeProvider";
-export * from "./views/TextAncestorContext";
+export * from "./views/ThemeReset";
+export * from "@tamagui/use-force-update";
 export * from "@tamagui/helpers";
 export {
   RNWTextProps,

package/dist/jsx/styled.js

@@ -5,14 +5,16 @@ import { createComponent } from "./createComponent";
 import { RNComponents } from "./helpers/RNComponents";
 function styled(Component, options, staticExtractionOptions) {
   const staticConfigProps = (() => {
+    var _a;
     if (options) {
       const { variants, name, defaultVariants, ...defaultProps } = options;
       if (defaultVariants) {
         Object.assign(defaultProps, defaultVariants);
       }
       const isReactNativeWeb = "staticConfig" in Component ? Component.staticConfig.isReactNativeWeb : RNComponents.has(Component);
+      const reactNativeWebComponent = isReactNativeWeb ? ((_a = Component["staticConfig"]) == null ? void 0 : _a.reactNativeWebComponent) || Component : null;
       const isTamagui = !isReactNativeWeb && "staticConfig" in Component;
-      const Comp = Component;
+      const Comp = reactNativeWebComponent || Component;
       const isImage = !!(defaultProps.isImage || (!isTamagui ? Comp === Image : false));
       const isInput = !!(defaultProps.isInput || (!isTamagui ? Comp === TextInput : false));
       const isText = !!(defaultProps.isText || (!isTamagui ? isInput || Comp === Text : false));
@@ -27,6 +29,7 @@ function styled(Component, options, staticExtractionOptions) {
         defaultVariants,
         componentName: name,
         isReactNativeWeb,
+        reactNativeWebComponent,
         isInput,
         isText,
         isImage