@tamagui/core 1.0.0-beta.8 → 1.0.1-beta.100

package/dist/jsx/createComponent.js

@@ -1,617 +0,0 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { stylePropsView } from "@tamagui/helpers";
-import { useForceUpdate } from "@tamagui/use-force-update";
-import React, {
-  Children,
-  Fragment,
-  createElement,
-  forwardRef,
-  memo,
-  useCallback,
-  useContext,
-  useRef,
-  useState
-} from "react";
-import { StyleSheet, Text, View } from "react-native";
-import { onConfiguredOnce } from "./conf";
-import { stackDefaultStyles } from "./constants/constants";
-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 { 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 = {
-  hover: false,
-  press: false,
-  pressIn: false,
-  focus: false,
-  mounted: false,
-  animation: null
-};
-const mouseUps = /* @__PURE__ */ new Set();
-if (typeof document !== "undefined") {
-  document.addEventListener("mouseup", () => {
-    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) {
-    defaultProps[shorthands[key] || key] = defaultProps[key];
-  }
-}
-__name(mergeShorthands, "mergeShorthands");
-let initialTheme;
-function createComponent(configIn, ParentComponent) {
-  const staticConfig = (() => {
-    const config = extendStaticConfig(configIn, ParentComponent);
-    if ("parsed" in config) {
-      return config;
-    } else {
-      return parseStaticConfig(config);
-    }
-  })();
-  const componentClassName = `is_${staticConfig.componentName}`;
-  let tamaguiConfig;
-  let AnimatedText;
-  let AnimatedView;
-  let avoidClasses = true;
-  let defaultNativeStyle;
-  let defaultNativeStyleSheet;
-  let tamaguiDefaultProps;
-  let initialSplitStyles;
-  function addPseudoToStyles(styles, name, pseudos) {
-    const pseudoStyle = pseudos[name];
-    const shouldNestObject = isWeb && name !== "enterStyle" && name !== "exitStyle";
-    if (pseudoStyle) {
-      styles.push(shouldNestObject ? { [name]: pseudoStyle } : pseudoStyle);
-    }
-    const defaultPseudoStyle = initialSplitStyles.pseudos[name];
-    if (defaultPseudoStyle) {
-      styles.push(shouldNestObject ? { [name]: defaultPseudoStyle } : defaultPseudoStyle);
-    }
-  }
-  __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, Object.keys(props));
-        if (props["debug"] === "break")
-          debugger;
-      }
-    }
-    const forceUpdate = useForceUpdate();
-    const theme = useTheme(props.theme, staticConfig.componentName, props, forceUpdate);
-    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 || 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);
-    const hasEnterStyle = !!props.enterStyle;
-    const features = useFeatures(props, {
-      forceUpdate,
-      setStateShallow,
-      useAnimations,
-      state,
-      style: props.animation ? { ...defaultNativeStyle, ...style } : null,
-      pseudos,
-      staticConfig,
-      theme,
-      onDidAnimate: props.onDidAnimate
-    });
-    const {
-      tag,
-      hitSlop,
-      asChild,
-      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,
-      nativeID,
-      accessible,
-      accessibilityRole,
-      collapsable,
-      focusable,
-      onClick,
-      theme: _themeProp,
-      defaultVariants,
-      onLayout,
-      ...viewPropsRest
-    } = viewPropsIn;
-    let viewProps = viewPropsRest;
-    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 internal = useRef();
-    if (!internal.current) {
-      internal.current = {
-        isMounted: true
-      };
-    }
-    useIsomorphicLayoutEffect(() => {
-      if (typeof window !== "undefined" && (hasEnterStyle || props.animation)) {
-        setStateShallow({
-          mounted: true
-        });
-      }
-      internal.current.isMounted = true;
-      return () => {
-        mouseUps.delete(unPress);
-        internal.current.isMounted = false;
-      };
-    }, [hasEnterStyle, props.animation]);
-    if (nativeID) {
-      viewProps.id = nativeID;
-    }
-    if (isAndroid) {
-      if (collapsable)
-        viewProps.collapsable = collapsable;
-      if (focusable)
-        viewProps.focusable = focusable;
-    }
-    if (!isWeb) {
-      if (accessible)
-        viewProps.accessible = accessible;
-      if (accessibilityRole)
-        viewProps.accessibilityRole = accessibilityRole;
-    }
-    if (isWeb && !asChild) {
-      rnw.useResponderEvents(hostRef, {
-        onMoveShouldSetResponder,
-        onMoveShouldSetResponderCapture,
-        onResponderEnd,
-        onResponderGrant,
-        onResponderMove,
-        onResponderReject,
-        onResponderRelease,
-        onResponderStart,
-        onResponderTerminate,
-        onResponderTerminationRequest,
-        onScrollShouldSetResponder,
-        onScrollShouldSetResponderCapture,
-        onSelectionChangeShouldSetResponder,
-        onSelectionChangeShouldSetResponderCapture,
-        onStartShouldSetResponder,
-        onStartShouldSetResponderCapture
-      });
-    }
-    const isTaggable = !Component || typeof Component === "string";
-    const element = isWeb ? isTaggable ? tag || Component : Component : Component;
-    const BaseTextComponent = !isWeb ? Text : element || "span";
-    const BaseViewComponent = !isWeb ? View : element || (hasTextAncestor ? "span" : "div");
-    let ViewComponent = isText ? (isAnimated ? AnimatedText || Text : null) || BaseTextComponent : (isAnimated ? AnimatedView || View : null) || BaseViewComponent;
-    ViewComponent = Component || ViewComponent;
-    let styles;
-    const isStringElement = typeof ViewComponent === "string";
-    const animationStyles = state.animation ? state.animation.style : null;
-    if (isStringElement && shouldAvoidClasses) {
-      styles = {
-        ...defaultNativeStyle,
-        ...animationStyles,
-        ...medias
-      };
-    } else {
-      styles = [
-        isWeb ? null : defaultNativeStyleSheet ? defaultNativeStyleSheet.base : null,
-        animationStyles ? animationStyles : style,
-        medias
-      ];
-      if (!animationStyles) {
-        !state.mounted && addPseudoToStyles(styles, "enterStyle", pseudos);
-        state.hover && addPseudoToStyles(styles, "hoverStyle", pseudos);
-        state.focus && addPseudoToStyles(styles, "focusStyle", pseudos);
-        state.press && addPseudoToStyles(styles, "pressStyle", pseudos);
-      }
-    }
-    if (isWeb) {
-      if (!shouldAvoidClasses) {
-        const fontFamilyName = isText ? props.fontFamily || staticConfig.defaultProps.fontFamily : null;
-        const fontFamily = fontFamilyName && fontFamilyName[0] === "$" ? fontFamilyName.slice(1) : null;
-        const classList = [
-          componentName ? componentClassName : "",
-          fontFamily ? `font_${fontFamily}` : "",
-          theme.className,
-          classNames ? Object.values(classNames).join(" ") : ""
-        ];
-        const className = classList.join(" ");
-        if (process.env.NODE_ENV === "development") {
-          if (props["debug"]) {
-            console.log("  \xBB className", { isStringElement, pseudos, state, classNames, propsClassName: props.className, style, classList, className: className.trim().split(" "), themeClassName: theme.className, values: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) });
-          }
-        }
-        viewProps.className = className;
-        viewProps.style = animationStyles;
-      } else {
-        viewProps.style = styles;
-      }
-    } else {
-      viewProps.style = styles;
-    }
-    if (pointerEvents) {
-      viewProps.pointerEvents = pointerEvents;
-    }
-    if (isWeb) {
-      const platformMethodsRef = rnw.usePlatformMethods(viewProps);
-      const setRef = rnw.useMergeRefs(hostRef, platformMethodsRef, forwardedRef);
-      if (!isAnimated) {
-        viewProps.ref = setRef;
-      } else {
-        if (forwardedRef) {
-          viewProps.ref = forwardedRef;
-        }
-      }
-      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 initialPseudos = initialSplitStyles.pseudos;
-    const attachPress = !!(pseudos && pseudos.pressStyle || initialPseudos && initialPseudos.pressStyle || onPress || onPressOut || onPressIn || onClick);
-    const isTouch = useIsTouchDevice();
-    const isHoverable = isWeb && !isTouch;
-    const attachHover = isHoverable && !!(pseudos && pseudos.hoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
-    const pressEventKey = isStringElement ? "onClick" : "onPress";
-    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;
-      setStateShallow({
-        press: false,
-        pressIn: false
-      });
-    }, []);
-    const events = shouldAttach ? {
-      ...!isWeb && {
-        onPressOut: (e) => {
-          unPress();
-          onPressOut == null ? void 0 : onPressOut(e);
-        }
-      },
-      ...isHoverable && {
-        onMouseEnter: attachHover ? (e) => {
-          let next = {};
-          if (attachHover) {
-            next.hover = true;
-          }
-          if (state.pressIn) {
-            next.press = true;
-          }
-          if (Object.keys(next).length) {
-            setStateShallow(next);
-          }
-          onHoverIn == null ? void 0 : onHoverIn(e);
-          onMouseEnter == null ? void 0 : onMouseEnter(e);
-        } : void 0,
-        onMouseLeave: attachHover ? (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) {
-            setStateShallow(next);
-          }
-          onHoverOut == null ? void 0 : onHoverOut(e);
-          onMouseLeave == null ? void 0 : onMouseLeave(e);
-        } : void 0
-      },
-      onMouseDown: attachPress ? (e) => {
-        setStateShallow({
-          press: true,
-          pressIn: true
-        });
-        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);
-      } : null
-    } : null;
-    const childEls = !children || asChild ? children : wrapThemeManagerContext(spacedChildren({
-      children,
-      space,
-      flexDirection: props.flexDirection || ((_b = staticConfig.defaultProps) == null ? void 0 : _b.flexDirection),
-      isZStack
-    }), getThemeManagerIfChanged(theme));
-    const [pressProps] = usePressable(events ? {
-      disabled,
-      ...hitSlop && {
-        hitSlop
-      },
-      onPressIn: events.onMouseDown,
-      onPressOut: events.onPressOut,
-      onPress: events[pressEventKey]
-    } : {
-      disabled: true
-    });
-    let content;
-    if (isWeb) {
-      if (staticConfig.isReactNativeWeb) {
-        viewProps.dataSet = {
-          ...viewProps.dataSet,
-          className: viewProps.className
-        };
-      } else {
-        const rnProps = rnw.createDOMProps(viewProps);
-        const className = rnProps.className && rnProps.className !== viewProps.className ? `${rnProps.className} ${viewProps.className}` : viewProps.className;
-        Object.assign(viewProps, rnProps);
-        if (className) {
-          viewProps.className = className;
-        }
-      }
-    }
-    if (events) {
-      if (!isStringElement) {
-        Object.assign(viewProps, pressProps);
-      } else {
-        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={{
-        display: "contents"
-      }} onMouseEnter={events.onMouseEnter} onMouseLeave={events.onMouseLeave}>{content}</span>;
-    }
-    if (process.env.NODE_ENV === "development") {
-      if (props["debug"]) {
-        viewProps["debug"] = true;
-        console.log("  \xBB ", { propsIn: { ...props }, propsOut: { ...viewProps }, state, splitStyles, animationStyles, isStringElement, classNamesIn: (_c = props.className) == null ? void 0 : _c.split(" "), classNamesOut: (_d = viewProps.className) == null ? void 0 : _d.split(" "), pressProps, events, shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, initialSplitStyles, ...typeof window !== "undefined" ? { theme, themeState: theme.__state, themeClassName: theme.className, staticConfig, tamaguiConfig } : null });
-      }
-    }
-    if (features.length) {
-      return <>
-        {features}
-        {content}
-      </>;
-    }
-    return content;
-  });
-  component.displayName = staticConfig.componentName;
-  onConfiguredOnce((conf) => {
-    var _a, _b, _c, _d;
-    if (process.env.IS_STATIC === "is_static") {
-      return;
-    }
-    tamaguiConfig = conf;
-    mergeShorthands(staticConfig, tamaguiConfig);
-    avoidClasses = !!((_a = tamaguiConfig.animations) == null ? void 0 : _a.avoidClasses);
-    AnimatedText = (_b = tamaguiConfig.animations) == null ? void 0 : _b.Text;
-    AnimatedView = (_c = tamaguiConfig == null ? void 0 : tamaguiConfig.animations) == null ? void 0 : _c.View;
-    initialTheme = initialTheme || proxyThemeVariables(conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]]);
-    initialSplitStyles = insertSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, {
-      mounted: true,
-      hover: false,
-      press: false,
-      pressIn: false,
-      focus: false,
-      resolveVariablesAs: "both",
-      keepVariantsAsProps: true
-    });
-    const { style, viewProps } = initialSplitStyles;
-    defaultNativeStyle = {};
-    for (const key in style) {
-      const v = style[key];
-      defaultNativeStyle[key] = isVariable(v) ? v.val : v;
-    }
-    defaultNativeStyleSheet = StyleSheet.create({
-      base: defaultNativeStyle
-    });
-    const defaults = {
-      ...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
-        });
-      }
-    }
-  });
-  let res = component;
-  if (configIn.memo) {
-    res = memo(res);
-  }
-  res["staticConfig"] = {
-    validStyles: staticConfig.validStyles || stylePropsView,
-    ...staticConfig
-  };
-  if (process.env.NODE_ENV === "development") {
-    res["whyDidYouRender"] = true;
-  }
-  res["extractable"] = (Component, conf) => {
-    Component["staticConfig"] = extendStaticConfig({
-      Component,
-      ...conf,
-      neverFlatten: true,
-      defaultProps: {
-        ...Component.defaultProps,
-        ...conf == null ? void 0 : conf.defaultProps
-      }
-    }, res);
-    return Component;
-  };
-  return res;
-}
-__name(createComponent, "createComponent");
-const Spacer = createComponent({
-  memo: true,
-  componentName: "Spacer",
-  defaultProps: {
-    ...stackDefaultStyles,
-    size: true
-  },
-  variants: {
-    size: {
-      "...size": (size, { tokens }) => {
-        var _a;
-        size = size == true ? "$true" : size;
-        const sizePx = (_a = tokens.size[size]) != null ? _a : size;
-        return {
-          width: sizePx,
-          height: sizePx,
-          minWidth: sizePx,
-          minHeight: sizePx
-        };
-      }
-    },
-    flex: {
-      true: {
-        flex: 1
-      }
-    },
-    direction: {
-      horizontal: {
-        height: 0,
-        minHeight: 0
-      },
-      vertical: {
-        width: 0,
-        minWidth: 0
-      }
-    }
-  }
-});
-function spacedChildren({
-  isZStack,
-  children,
-  space,
-  flexDirection,
-  spaceFlex
-}) {
-  var _a;
-  const childrenList = Children.toArray(children);
-  const len = childrenList.length;
-  if (len === 1) {
-    return childrenList;
-  }
-  const next = [];
-  for (const [index, child] of childrenList.entries()) {
-    if (child === null || child === void 0) {
-      continue;
-    }
-    if (!child || child["key"] && !isZStack) {
-      next.push(child);
-    } else {
-      next.push(<Fragment key={index}>{isZStack ? <AbsoluteFill>{child}</AbsoluteFill> : child}</Fragment>);
-    }
-    if ((_a = child["type"]) == null ? void 0 : _a["isVisuallyHidden"]) {
-      continue;
-    }
-    if (index !== len - 1) {
-      if (space) {
-        next.push(<Spacer key={`_${index}_spacer`} direction={flexDirection === "row" || flexDirection === "row-reverse" ? "horizontal" : "vertical"} size={space} {...spaceFlex && {
-          flex: spaceFlex
-        }} />);
-      }
-    }
-  }
-  return next;
-}
-__name(spacedChildren, "spacedChildren");
-function AbsoluteFill(props) {
-  return isWeb ? <div style={{
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
-  }}>{props.children}</div> : <View style={StyleSheet.absoluteFill}>{props.child}</View>;
-}
-__name(AbsoluteFill, "AbsoluteFill");
-export {
-  AbsoluteFill,
-  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
-};