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

package/dist/jsx/createComponent.js

@@ -1,455 +0,0 @@
-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 {
-  Children,
-  Fragment,
-  createElement,
-  forwardRef,
-  useCallback,
-  useContext,
-  useEffect,
-  useRef,
-  useState
-} from "react";
-import { StyleSheet, Text, View } from "react-native";
-import { stackDefaultStyles } from "./constants/constants";
-import { isTouchDevice, isWeb } from "./constants/platform";
-import { rnw } from "./constants/rnw";
-import { onConfiguredOnce } from "./createTamagui";
-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 = 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 ?? stylePropsView;
-  let defaultProps = null;
-  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>.`);
-        }
-      });
-    }
-    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 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 styles = [
-      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 });
-        }
-      }
-      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?.(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?.(e);
-          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?.(e);
-          onMouseLeave?.(e);
-        } : void 0
-      },
-      onMouseDown: attachPress ? (e) => {
-        set({
-          press: true,
-          pressIn: true
-        });
-        onPressIn?.(e);
-        onMouseDown?.(e);
-      } : onPressIn,
-      onClick: attachPress ? (e) => {
-        onPress?.(e);
-        onClick?.(e);
-        unPress();
-        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?.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);
-      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);
-        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 });
-        }
-      }
-    }
-    return <>
-      {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"] = {
-    validStyles: validStyleProps,
-    ...staticConfig
-  };
-  const res = component;
-  res["extractable"] = (Component2, conf) => {
-    Component2["staticConfig"] = extendStaticConfig(res, {
-      ...conf,
-      neverFlatten: true,
-      defaultProps: {
-        ...Component2.defaultProps,
-        ...conf?.defaultProps
-      }
-    });
-    return Component2;
-  };
-  return res;
-}
-__name(createComponent, "createComponent");
-let hasWarnedOnce = false;
-const Spacer = createComponent({
-  defaultProps: {
-    ...stackDefaultStyles,
-    size: true
-  },
-  variants: {
-    size: {
-      "...size": (size, { tokens }) => {
-        size = size == true ? "$true" : size;
-        return {
-          width: tokens.size[size] ?? size,
-          height: tokens.size[size] ?? size
-        };
-      }
-    },
-    direction: {
-      horizontal: {
-        height: 0
-      },
-      vertical: {
-        width: 0
-      }
-    }
-  }
-});
-function spacedChildren({
-  isZStack,
-  children,
-  space,
-  flexDirection
-}) {
-  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 = `${child?.["key"] ?? index}`;
-    next.push(<Fragment key={key}>{isZStack ? <Absolute>{child}</Absolute> : child}</Fragment>);
-    if (child?.["type"]?.["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 Absolute = /* @__PURE__ */ __name(({ children }) => <View style={sheet.fullscreen}>{children}</View>, "Absolute");
-const sheet = StyleSheet.create({
-  fullscreen: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
-  }
-});
-export {
-  Spacer,
-  createComponent,
-  mouseUps,
-  spacedChildren
-};

package/dist/jsx/createFont.js

@@ -1,27 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,183 +0,0 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { getStyleRules } from "@tamagui/helpers";
-import { isWeb } from "./constants/platform";
-import { Variable, createVariable } from "./createVariable";
-import { createTamaguiProvider } from "./helpers/createTamaguiProvider";
-import { configureMedia } from "./hooks/useMedia";
-let conf;
-const getHasConfigured = /* @__PURE__ */ __name(() => !!conf, "getHasConfigured");
-const getTamagui = /* @__PURE__ */ __name(() => conf, "getTamagui");
-const getTokens = /* @__PURE__ */ __name(() => conf.tokensParsed, "getTokens");
-const getThemes = /* @__PURE__ */ __name(() => conf.themes, "getThemes");
-const configListeners = new Set();
-const onConfiguredOnce = /* @__PURE__ */ __name((cb) => {
-  if (conf) {
-    cb(conf);
-  } else {
-    configListeners.add(cb);
-  }
-}, "onConfiguredOnce");
-const PREFIX = `theme--`;
-function createTamagui(config) {
-  if (config["parsed"]) {
-    return config;
-  }
-  if (conf) {
-    console.warn("Called createTamagui twice! Should never do so");
-  }
-  configureMedia({
-    queries: config.media,
-    defaultActive: config.mediaQueryDefaultActive
-  });
-  const themeConfig = (() => {
-    let cssRules = [];
-    const varsByValue = 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 : varsByValue[val]?.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: {},
-    ...config,
-    Provider: createTamaguiProvider({
-      defaultTheme: "light",
-      ...config
-    }),
-    themeConfig,
-    themeParsed,
-    tokensParsed,
-    parsed: true,
-    getCSS() {
-      return `${themeConfig.css}
-${[...getStyleRules()].join("\n")}`;
-    }
-  };
-  conf = next;
-  if (configListeners.size) {
-    configListeners.forEach((cb) => cb(next));
-    configListeners.clear();
-  }
-  return next;
-}
-__name(createTamagui, "createTamagui");
-function getThemeParentClassName(themeName) {
-  return `theme-parent ${themeName ? `${PREFIX}${themeName}` : ""}`;
-}
-__name(getThemeParentClassName, "getThemeParentClassName");
-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,
-  getHasConfigured,
-  getTamagui,
-  getThemeParentClassName,
-  getThemes,
-  getTokens,
-  onConfiguredOnce
-};

package/dist/jsx/createTheme.js

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