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

package/dist/jsx/createComponent.js

@@ -0,0 +1,466 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import "./tamagui-base.css";
+import { concatClassName, stylePropsView } from "@tamagui/helpers";
+import { useForceUpdate } from "@tamagui/use-force-update";
+import {
+  Children,
+  Fragment,
+  createElement,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { onConfiguredOnce } from "./conf";
+import { stackDefaultStyles } from "./constants/constants";
+import { isTouchDevice, isWeb } from "./constants/platform";
+import { rnw } from "./constants/rnw";
+import { addStylesUsingClassname, useStylesAsClassname } from "./helpers/addStylesUsingClassname";
+import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig";
+import { getSplitStyles } from "./helpers/getSplitStyles";
+import { useFeatures } from "./hooks/useFeatures";
+import { usePressable } from "./hooks/usePressable";
+import { useTheme } from "./hooks/useTheme";
+import { TextAncestorContext } from "./views/TextAncestorContext";
+const mouseUps = /* @__PURE__ */ new Set();
+if (typeof document !== "undefined") {
+  document.addEventListener("mouseup", () => {
+    mouseUps.forEach((x) => x());
+    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) {
+    staticConfig = configIn;
+  } else {
+    staticConfig = parseStaticConfig(configIn);
+  }
+  const { Component, validStyles, isText, isZStack } = staticConfig;
+  const validStyleProps = validStyles != null ? validStyles : stylePropsView;
+  let defaultProps = null;
+  let tamaguiConfig;
+  let defaultNativeStyle = null;
+  let defaultsClassName = "";
+  let initialTheme;
+  const component = forwardRef((props, forwardedRef) => {
+    var _a;
+    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>.`);
+        }
+      });
+    }
+    const hasTextAncestor = isWeb ? useContext(TextAncestorContext) : false;
+    const hostRef = useRef(null);
+    const {
+      viewProps: viewPropsIn,
+      pseudos,
+      style,
+      classNames
+    } = getSplitStyles(props, staticConfig, theme);
+    const {
+      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,
+      ...viewProps
+    } = viewPropsIn;
+    if (!isWeb) {
+      if (accessible)
+        viewProps.accessible = accessible;
+      if (accessibilityRole)
+        viewProps.accessibilityRole = accessibilityRole;
+    }
+    if (isWeb) {
+      rnw.useResponderEvents(hostRef, {
+        onMoveShouldSetResponder,
+        onMoveShouldSetResponderCapture,
+        onResponderEnd,
+        onResponderGrant,
+        onResponderMove,
+        onResponderReject,
+        onResponderRelease,
+        onResponderStart,
+        onResponderTerminate,
+        onResponderTerminationRequest,
+        onScrollShouldSetResponder,
+        onScrollShouldSetResponderCapture,
+        onSelectionChangeShouldSetResponder,
+        onSelectionChangeShouldSetResponderCapture,
+        onStartShouldSetResponder,
+        onStartShouldSetResponderCapture
+      });
+    }
+    const internal = useRef();
+    if (!internal.current) {
+      internal.current = {
+        isMounted: true
+      };
+    }
+    useEffect(() => {
+      internal.current.isMounted = true;
+      return () => {
+        mouseUps.delete(unPress);
+        internal.current.isMounted = false;
+      };
+    }, []);
+    const isInternalComponent = !Component || typeof Component === "string";
+    const element = isWeb ? isInternalComponent ? 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 styles = [
+      defaultNativeStyle ? defaultNativeStyle.base : null,
+      style,
+      isHovering ? pseudos.hoverStyle || null : null,
+      isPressing ? pseudos.pressStyle || null : null
+    ];
+    if (isWeb) {
+      const stylesClassNames = useStylesAsClassname(styles);
+      const classList = isText ? [
+        defaultsClassName,
+        classNames,
+        stylesClassNames,
+        props.className
+      ] : [defaultsClassName, props.className, classNames, stylesClassNames];
+      const className = concatClassName(...classList);
+      if (process.env.NODE_ENV === "development") {
+        if (props["debug"]) {
+          console.log("\u{1F95A} className", { style, styles, classList, stylesClassNames, className: className.trim().split(" ") });
+        }
+      }
+      viewProps.className = className;
+    } else {
+      viewProps.style = styles;
+    }
+    if (pointerEvents) {
+      viewProps.pointerEvents = pointerEvents;
+    }
+    if (isWeb) {
+      const platformMethodsRef = rnw.usePlatformMethods(viewProps);
+      const setRef = rnw.useMergeRefs(hostRef, platformMethodsRef, forwardedRef);
+      viewProps.ref = setRef;
+      if (props.href != null && hrefAttrs != null) {
+        const { download, rel, target } = hrefAttrs;
+        if (download != null) {
+          viewProps.download = download;
+        }
+        if (rel != null) {
+          viewProps.rel = rel;
+        }
+        if (typeof target === "string") {
+          viewProps.target = target.charAt(0) !== "_" ? "_" + target : target;
+        }
+      }
+    } else {
+      if (forwardedRef) {
+        viewProps.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);
+    if (shouldAttach) {
+      internal.current.hasEverHadEvents = true;
+    }
+    const unPress = useCallback(() => {
+      if (!internal.current.isMounted)
+        return;
+      set({
+        press: false,
+        pressIn: false
+      });
+    }, []);
+    const events = shouldAttach ? {
+      ...!isWeb && {
+        onPressOut: (e) => {
+          unPress();
+          onPressOut == null ? void 0 : onPressOut(e);
+        }
+      },
+      ...isWeb && !isTouchDevice && {
+        onMouseEnter: attachHover || attachPress ? (e) => {
+          let next = {};
+          if (attachHover) {
+            next.hover = true;
+          }
+          if (state.pressIn) {
+            next.press = true;
+          }
+          if (Object.keys(next).length) {
+            set(next);
+          }
+          onHoverIn == null ? void 0 : onHoverIn(e);
+          onMouseEnter == null ? void 0 : onMouseEnter(e);
+        } : void 0,
+        onMouseLeave: attachHover || attachPress ? (e) => {
+          let next = {};
+          mouseUps.add(unPress);
+          if (attachHover) {
+            next.hover = false;
+          }
+          if (state.pressIn) {
+            next.press = false;
+            next.pressIn = false;
+          }
+          if (Object.keys(next).length) {
+            set(next);
+          }
+          onHoverOut == null ? void 0 : onHoverOut(e);
+          onMouseLeave == null ? void 0 : onMouseLeave(e);
+        } : void 0
+      },
+      onMouseDown: attachPress ? (e) => {
+        set({
+          press: true,
+          pressIn: true
+        });
+        onPressIn == null ? void 0 : onPressIn(e);
+        onMouseDown == null ? void 0 : onMouseDown(e);
+      } : onPressIn,
+      onClick: attachPress ? (e) => {
+        onPress == null ? void 0 : onPress(e);
+        onClick == null ? void 0 : onClick(e);
+        unPress();
+        onPressOut == null ? void 0 : onPressOut(e);
+      } : onPressOut
+    } : null;
+    if (events) {
+      if (typeof ViewComponent !== "string") {
+        const [pressProps] = usePressable({
+          disabled,
+          hitSlop,
+          onPressIn: events.onMouseDown,
+          onPressOut: events.onPressOut,
+          onPress: events.onClick
+        });
+        Object.assign(viewProps, pressProps);
+      } else {
+        Object.assign(viewProps, events);
+      }
+    }
+    const childEls = spacedChildren({
+      children,
+      space,
+      flexDirection: props.flexDirection || (defaultProps == null ? void 0 : defaultProps.flexDirection),
+      isZStack
+    });
+    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);
+      if (staticConfig.isReactNativeWeb) {
+        viewProps.dataSet = viewProps.dataSet || {};
+        Object.assign(viewProps.dataSet, { __className: className });
+      } else {
+        viewProps.className = className;
+      }
+      content = createElement(ViewComponent, viewProps, childEls);
+    } else {
+      content = createElement(ViewComponent, viewProps, childEls);
+    }
+    const shouldWrapTextAncestor = isWeb && 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, (_a = viewProps.className) == null ? void 0 : _a.split(" "));
+        console.log("\u{1F95A} etc:", { shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls });
+        if (typeof window !== "undefined") {
+          console.log("\u{1F95A} component info", { staticConfig, tamaguiConfig });
+        }
+      }
+    }
+    if (features.length) {
+      return <>
+        {features}
+        {content}
+      </>;
+    }
+    return content;
+  });
+  onConfiguredOnce((conf) => {
+    var _a;
+    const shouldDebug = (_a = staticConfig.defaultProps) == null ? void 0 : _a.debug;
+    tamaguiConfig = conf;
+    initialTheme = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]];
+    const { classNames, pseudos, style, viewProps } = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, true);
+    if (isWeb) {
+      if (classNames) {
+        defaultsClassName += classNames + " ";
+      }
+      defaultsClassName += addStylesUsingClassname([style, pseudos]);
+      if (process.env.NODE_ENV === "development" && shouldDebug) {
+        console.log("tamagui \u{1F41B}:", { defaultsClassName: defaultsClassName.split(" ") });
+      }
+    } else {
+      const sheetStyles = {};
+      for (const styleObj of style) {
+        Object.assign(sheetStyles, styleObj);
+      }
+      defaultNativeStyle = StyleSheet.create({
+        base: sheetStyles
+      });
+    }
+    component.defaultProps = {
+      ...viewProps,
+      ...component.defaultProps
+    };
+    if (process.env.NODE_ENV === "development" && shouldDebug) {
+      console.log("tamagui \u{1F41B}:", { initialTheme, classNames, pseudos, style, viewProps, defaultsClassName, component });
+    }
+  });
+  component["staticConfig"] = {
+    validStyles: validStyleProps,
+    ...staticConfig
+  };
+  const res = component;
+  res["extractable"] = (Component2, conf) => {
+    Component2["staticConfig"] = extendStaticConfig(res, {
+      ...conf,
+      neverFlatten: true,
+      defaultProps: {
+        ...Component2.defaultProps,
+        ...conf == null ? void 0 : conf.defaultProps
+      }
+    });
+    return Component2;
+  };
+  return res;
+}
+__name(createComponent, "createComponent");
+let hasWarnedOnce = false;
+const Spacer = createComponent({
+  defaultProps: {
+    ...stackDefaultStyles,
+    size: true
+  },
+  variants: {
+    size: {
+      "...size": (size, { tokens }) => {
+        var _a, _b;
+        size = size == true ? "$true" : size;
+        return {
+          width: (_a = tokens.size[size]) != null ? _a : size,
+          height: (_b = tokens.size[size]) != null ? _b : size
+        };
+      }
+    },
+    direction: {
+      horizontal: {
+        height: 0
+      },
+      vertical: {
+        width: 0
+      }
+    }
+  }
+});
+function spacedChildren({
+  isZStack,
+  children,
+  space,
+  flexDirection
+}) {
+  var _a, _b;
+  if (!space && !isZStack) {
+    return children;
+  }
+  const childrenList = Children.toArray(children);
+  const len = childrenList.length;
+  if (len === 1) {
+    return children;
+  }
+  const next = [];
+  for (const [index, child] of childrenList.entries()) {
+    if (child === null || child === void 0) {
+      continue;
+    }
+    const key = `${(_a = child == null ? void 0 : child["key"]) != null ? _a : index}`;
+    next.push(<Fragment key={key}>{isZStack ? <AbsoluteFill>{child}</AbsoluteFill> : child}</Fragment>);
+    if ((_b = child == null ? void 0 : child["type"]) == null ? void 0 : _b["isVisuallyHidden"]) {
+      continue;
+    }
+    if (index !== len - 1) {
+      if (space) {
+        next.push(<Spacer key={`${key}_spacer`} direction={flexDirection === "row" || flexDirection === "row-reverse" ? "horizontal" : "vertical"} size={space} />);
+      }
+    }
+  }
+  return next;
+}
+__name(spacedChildren, "spacedChildren");
+const AbsoluteFill = /* @__PURE__ */ __name((props) => isWeb ? <div className="tamagui-absolute-fill">{props.children}</div> : <View style={StyleSheet.absoluteFill}>{props.child}</View>, "AbsoluteFill");
+export {
+  AbsoluteFill,
+  Spacer,
+  createComponent,
+  mouseUps,
+  spacedChildren
+};

package/dist/jsx/createFont.js

@@ -0,0 +1,27 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { validateFont } from "./helpers/validate";
+const createFont = /* @__PURE__ */ __name((font) => {
+  if (process.env.NODE_ENV === "development") {
+    validateFont(font);
+  }
+  const sizeKeys = Object.keys(font.size);
+  for (const key in font) {
+    if (key === "size" || key === "family")
+      continue;
+    const section = font[key];
+    const keys = Object.keys(section);
+    let fillVal = section[keys[0]];
+    for (const sKey of sizeKeys) {
+      if (!(sKey in section)) {
+        section[sKey] = fillVal;
+      } else {
+        fillVal = section[sKey];
+      }
+    }
+  }
+  return Object.freeze(font);
+}, "createFont");
+export {
+  createFont
+};

package/dist/jsx/createShorthands.js

@@ -0,0 +1,9 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function createShorthands(shorthands) {
+  return Object.freeze(shorthands);
+}
+__name(createShorthands, "createShorthands");
+export {
+  createShorthands
+};

package/dist/jsx/createTamagui.js

@@ -0,0 +1,165 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { getStyleRules } from "@tamagui/helpers";
+import { configListeners, getHasConfigured, setConfig } from "./conf";
+import { PREFIX } from "./constants/constants";
+import { isWeb } from "./constants/platform";
+import { Variable, createVariable } from "./createVariable";
+import { createTamaguiProvider } from "./helpers/createTamaguiProvider";
+import { configureMedia } from "./hooks/useMedia";
+const createdConfigs = /* @__PURE__ */ new WeakMap();
+function createTamagui(config) {
+  if (createdConfigs.has(config)) {
+    return config;
+  }
+  if (getHasConfigured()) {
+    console.warn("Called createTamagui twice! Should never do so");
+  }
+  configureMedia({
+    queries: config.media,
+    defaultActive: config.mediaQueryDefaultActive
+  });
+  const themeConfig = (() => {
+    var _a;
+    let cssRules = [];
+    const varsByValue = /* @__PURE__ */ new Map();
+    if (isWeb) {
+      let tokenRule = `:root {`;
+      const addVar = /* @__PURE__ */ __name((v) => {
+        varsByValue[v.val] = v;
+        const rule = `--${v.name}:${typeof v.val === "number" ? `${v.val}px` : v.val};`;
+        tokenRule += rule;
+      }, "addVar");
+      for (const key in config.tokens) {
+        for (const skey in config.tokens[key]) {
+          const val = config.tokens[key][skey];
+          if (key === "font") {
+            for (const fkey in val) {
+              if (fkey === "family") {
+                addVar(val[fkey]);
+              } else {
+                for (const fskey in val[fkey]) {
+                  addVar(val[fkey][fskey]);
+                }
+              }
+            }
+          } else {
+            addVar(val);
+          }
+        }
+      }
+      cssRules.push(`${tokenRule}
+}`);
+    }
+    for (const themeName in config.themes) {
+      const theme = { ...config.themes[themeName] };
+      config.themes[themeName] = theme;
+      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 ? `var(--${varName});` : `${val}`};`;
+        }
+        ensureThemeVariable(theme, themeKey);
+      }
+      if (isWeb) {
+        const [themeClassName, parentName] = themeName.includes("-") ? themeName.split("-") : [themeName, ""];
+        const oppositeName = parentName === "dark" ? "light" : "dark";
+        const cssParentSel = parentName ? `.${PREFIX}${parentName}` : "";
+        const cssChildSel = `.${PREFIX}${themeClassName}`;
+        const cssSel = `${cssParentSel} ${cssChildSel}`;
+        const cssRule = `${cssSel}, .${PREFIX}${oppositeName} ${cssSel} {
+${vars}
+}`;
+        cssRules.push(cssRule);
+      }
+    }
+    varsByValue.clear();
+    Object.freeze(cssRules);
+    return {
+      cssRules,
+      css: cssRules.join("\n")
+    };
+  })();
+  const tokensParsed = parseTokens(config.tokens);
+  const themeParsed = {};
+  const firstKey = Object.keys(config.themes)[0];
+  for (const key in config.themes[firstKey]) {
+    const val = config.themes[firstKey][key].val;
+    themeParsed[`$${key}`] = new Variable({ val, name: key });
+  }
+  const next = {
+    shorthands: {},
+    media: {},
+    ...config,
+    Provider: createTamaguiProvider({
+      defaultTheme: "light",
+      ...config
+    }),
+    themeConfig,
+    themeParsed,
+    tokensParsed,
+    parsed: true,
+    getCSS() {
+      return `${themeConfig.css}
+${[...getStyleRules()].join("\n")}`;
+    }
+  };
+  setConfig(next);
+  if (configListeners.size) {
+    configListeners.forEach((cb) => cb(next));
+    configListeners.clear();
+  }
+  createdConfigs.set(next, true);
+  return next;
+}
+__name(createTamagui, "createTamagui");
+const parseTokens = /* @__PURE__ */ __name((tokens) => {
+  const res = {};
+  for (const key in tokens) {
+    res[key] = {};
+    if (key === "font") {
+      for (const family in tokens.font) {
+        const obj = {};
+        res.font[`$${family}`] = obj;
+        for (const attrKey in tokens.font[family]) {
+          const attr = tokens.font[family][attrKey];
+          if (attrKey === "family") {
+            obj[attrKey] = attr;
+            continue;
+          }
+          obj[attrKey] = Object.keys(attr).reduce((acc, cur) => {
+            acc[`$${cur}`] = attr[cur];
+            return acc;
+          }, {});
+        }
+      }
+      continue;
+    }
+    for (const skey in tokens[key]) {
+      res[key][`$${skey}`] = tokens[key][skey];
+    }
+  }
+  return res;
+}, "parseTokens");
+function ensureThemeVariable(theme, key) {
+  const val = theme[key];
+  if (!(val instanceof Variable)) {
+    theme[key] = createVariable({
+      name: key,
+      val
+    });
+  } else {
+    if (val.name !== key) {
+      theme[key] = createVariable({
+        name: key,
+        val: val.val
+      });
+    }
+  }
+}
+__name(ensureThemeVariable, "ensureThemeVariable");
+export {
+  createTamagui
+};

package/dist/jsx/createTheme.js

@@ -0,0 +1,6 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+const createTheme = /* @__PURE__ */ __name((theme) => theme, "createTheme");
+export {
+  createTheme
+};

package/dist/jsx/createTokens.js

@@ -0,0 +1,32 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createVariable } from "./createVariable";
+import { validateTokens } from "./helpers/validate";
+function createTokens(tokens) {
+  if (process.env.NODE_ENV === "development") {
+    validateTokens(tokens);
+  }
+  return setupTokens(tokens);
+}
+__name(createTokens, "createTokens");
+function setupTokens(tokens) {
+  return mapTokensToVariables(tokens);
+}
+__name(setupTokens, "setupTokens");
+const mapTokensToVariables = /* @__PURE__ */ __name((tokens, parentPath = "") => {
+  const res = {};
+  for (const key in tokens) {
+    const val = tokens[key];
+    const name = parentPath ? `${parentPath}-${key}` : key;
+    if (val && typeof val === "object") {
+      res[key] = mapTokensToVariables(tokens[key], name);
+    } else {
+      res[key] = createVariable({ val, name });
+    }
+  }
+  return res;
+}, "mapTokensToVariables");
+export {
+  createTokens,
+  mapTokensToVariables
+};