tamagui 0.18.3 → 1.0.0-alpha.11

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Nate Wienert
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/_jsx/helpers/normalizeColor.js

@@ -32,4 +32,3 @@ const processColor = /* @__PURE__ */ __name((color) => {
 export {
   normalizeColor
 };
-//# sourceMappingURL=normalizeColor.js.map

package/_jsx/helpers/prevent.js

@@ -4,4 +4,3 @@ const prevent = /* @__PURE__ */ __name((e) => [e.preventDefault(), e.stopPropaga
 export {
   prevent
 };
-//# sourceMappingURL=prevent.js.map

package/_jsx/hooks/useControllableState.js

@@ -26,4 +26,3 @@ export {
   useControllableProp,
   useControllableState
 };
-//# sourceMappingURL=useControllableState.js.map

package/_jsx/hooks/useDebounce.js

@@ -32,8 +32,7 @@ function useDebounce(fn, wait, options = defaultOpts, mountArgs = []) {
   const dbEffect = useRef(null);
   useEffect(() => {
     return () => {
-      var _a;
-      (_a = dbEffect.current) == null ? void 0 : _a.cancel();
+      dbEffect.current?.cancel();
     };
   }, []);
   return useMemo(() => {
@@ -64,4 +63,3 @@ export {
   useDebounce,
   useDebounceValue
 };
-//# sourceMappingURL=useDebounce.js.map

package/_jsx/hooks/useKeyboardDismissable.js

@@ -1,8 +1,8 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { isWeb } from "@tamagui/core";
 import { useEffect } from "react";
 import { BackHandler } from "react-native";
-import { isWeb } from "../platform";
 let keyboardDismissHandlers = [];
 const keyboardDismissHandlerManager = {
   push: (handler) => {
@@ -69,4 +69,3 @@ export {
   useBackHandler,
   useKeyboardDismissable
 };
-//# sourceMappingURL=useKeyboardDismissable.js.map

package/_jsx/hooks/useLayout.js

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/core";
 import { useRef, useState } from "react";
-import { isWeb, useIsomorphicLayoutEffect } from "../platform";
 const useLayout = /* @__PURE__ */ __name((props = {}) => {
   const [layout, setLayout] = useState(null);
   if (!isWeb) {
@@ -17,7 +17,6 @@ const useLayout = /* @__PURE__ */ __name((props = {}) => {
       return;
     let last = null;
     const getNextAndCallback = /* @__PURE__ */ __name((rect) => {
-      var _a;
       let next;
       const width = Math.max(1, Math.round(rect.width));
       const height = Math.max(1, Math.round(rect.height));
@@ -25,7 +24,7 @@ const useLayout = /* @__PURE__ */ __name((props = {}) => {
         next = { width, height };
       }
       if (next) {
-        (_a = props.onLayout) == null ? void 0 : _a.call(props, { nativeEvent: { layout: next } });
+        props.onLayout?.({ nativeEvent: { layout: next } });
         last = next;
         return next;
       }
@@ -54,4 +53,3 @@ const useLayout = /* @__PURE__ */ __name((props = {}) => {
 export {
   useLayout
 };
-//# sourceMappingURL=useLayout.js.map

package/_jsx/hooks/useSafeAreaInsets.js

@@ -2,4 +2,3 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 export {
   useSafeAreaInsets
 };
-//# sourceMappingURL=useSafeAreaInsets.js.map

package/_jsx/index.js

@@ -1,72 +1,39 @@
-import * as React from "react";
-globalThis["React"] = React;
-export * from "./StackProps";
-export * from "./views/SizableTextProps";
-export * from "./themeTypes";
-export * from "./platform";
-import { defaultMediaQueries } from "./constants";
-export * from "./defaultThemes";
-export * from "./createComponent";
-export * from "./hooks/useDebounce";
-export * from "./hooks/useConstant";
-export * from "./hooks/useDebounceEffect";
-export * from "./hooks/useForceUpdate";
-export * from "./hooks/useGet";
-export * from "./hooks/useLazyRef";
-export * from "./hooks/useMedia";
-export * from "./hooks/useNode";
-export * from "./hooks/useOnMount";
-export * from "./hooks/useOnUnmount";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+export * from "@tamagui/helpers";
+export * from "@tamagui/core";
+export * from "./viewTypes";
+export * from "@tamagui/use-debounce";
+export * from "@tamagui/use-force-update";
 export * from "./hooks/useLayout";
-export * from "./hooks/useScrollPosition";
-export * from "./hooks/useTheme";
-export * from "./hooks/useLazyEffect";
-export * from "./hooks/useWindowSize";
-export * from "./hooks/useSafeAreaInsets";
-export * from "./views/AnimatedStack";
+export * from "./hooks/useKeyboardDismissable";
 export * from "./views/BlurView";
 export * from "./views/Box";
 export * from "./views/Button";
 export * from "./views/Circle";
-export * from "./views/Divider";
+export * from "./views/Separator";
 export * from "./views/Form";
 export * from "./views/Grid";
 export * from "./views/Hoverable";
 export * from "./views/HoverablePopover";
-export * from "./views/Input";
 export * from "./views/InteractiveContainer";
 export * from "./views/Layouts";
 export * from "./views/LinearGradient";
-export * from "./views/LoadingItems";
 export * from "./views/Modal";
 export * from "./views/Paragraph";
+export * from "./views/SizableText";
 export * from "./views/Popover/Popover";
-export * from "./views/Size";
-export * from "./views/SnackUIProvider";
-export * from "./views/Spacer";
+export * from "./views/Popover/PopoverProvider";
 export * from "./views/Stacks";
 export * from "./views/Table";
-export * from "./views/Text";
-export * from "./views/TextArea";
-export * from "./views/ThemeInverse";
 export * from "./views/Headings";
 export * from "./views/Toast";
+export * from "./views/EnsureFlexed";
 export * from "./views/Tooltip";
 export * from "./views/TouchableOpacity";
 export * from "./views/Transitions";
-export * from "./views/UnorderedList";
-import { matchMedia } from "./helpers/matchMedia";
-export * from "./helpers/getNode";
-export * from "./helpers/themeable";
-export * from "./helpers/weakKey";
+export * from "./views/VisuallyHidden";
+export * from "./views/SafeAreaProvider";
 export * from "./helpers/prevent";
-export * from "./helpers/isStringChild";
-export * from "./helpers/combineRefs";
-export * from "./helpers/extendStaticConfig";
-export * from "./helpers/StaticConfig";
-export * from "@snackui/helpers";
 export {
-  defaultMediaQueries,
-  matchMedia
+  useSafeAreaInsets
 };
-//# sourceMappingURL=index.js.map

package/_jsx/views/BlurView.js

@@ -1,14 +1,16 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { VStack } from "./Stacks";
+import { YStack } from "./Stacks";
 function BlurView({
   children,
   borderRadius,
   fallbackBackgroundColor,
   blurRadius = 20,
+  blurType,
+  downsampleFactor,
   ...props
 }) {
-  return <VStack position="relative" borderRadius={borderRadius} {...props}>
+  return <YStack position="relative" borderRadius={borderRadius} {...props}>
     <div className="backdrop-filter" style={{
       position: "absolute",
       width: "100%",
@@ -19,10 +21,9 @@ function BlurView({
       pointerEvents: "none"
     }} />
     {children}
-  </VStack>;
+  </YStack>;
 }
 __name(BlurView, "BlurView");
 export {
   BlurView
 };
-//# sourceMappingURL=BlurView.js.map

package/_jsx/views/BlurView.native.js

@@ -1,29 +1,14 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { BlurView as NativeBlurView } from "@react-native-community/blur";
-import { StyleSheet } from "react-native";
-import { VStack } from "./Stacks";
-function BlurView({
-  blurType = "light",
-  blurAmount = 10,
-  fallbackBackgroundColor,
-  downsampleFactor,
-  children,
-  borderRadius,
-  ...props
-}) {
-  return <VStack borderRadius={borderRadius} {...props}>
-    <NativeBlurView style={[StyleSheet.absoluteFill, { borderRadius: +(borderRadius || 0), zIndex: -1 }]} {...{
-      blurType,
-      blurAmount,
-      reducedTransparencyFallbackColor: fallbackBackgroundColor,
-      downsampleFactor
-    }} />
-    {children}
-  </VStack>;
-}
-__name(BlurView, "BlurView");
+import { styled } from "@tamagui/core";
+const BlurView = styled(NativeBlurView, {
+  blurType: "light",
+  blurAmount: 10,
+  position: "absolute",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+});
 export {
   BlurView
 };
-//# sourceMappingURL=BlurView.native.js.map

package/_jsx/views/Box.js

@@ -1,19 +1,9 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { extendStaticConfig } from "../helpers/extendStaticConfig";
-import { useTheme } from "../hooks/useTheme";
-import { VStack } from "./Stacks";
-function Box(props) {
-  const theme = useTheme();
-  return <VStack backgroundColor={theme.cardBg} shadowColor={theme.shadowColorLighter} shadowRadius={14} shadowOffset={{ width: 0, height: 3 }} {...props} />;
-}
-__name(Box, "Box");
-if (process.env.IS_STATIC) {
-  Box.staticConfig = extendStaticConfig(VStack, {
-    neverFlatten: true
-  });
-}
+import { styled } from "@tamagui/core";
+import { YStack } from "./Stacks";
+const Box = styled(YStack, {
+  backgroundColor: "$bg2",
+  elevation: "$1"
+});
 export {
   Box
 };
-//# sourceMappingURL=Box.js.map

package/_jsx/views/Button.js

@@ -1,77 +1,47 @@
-import React, { forwardRef } from "react";
-import { extendStaticConfig } from "../helpers/extendStaticConfig";
-import { spacedChildren } from "../helpers/spacedChildren";
-import { themeable } from "../helpers/themeable";
-import { useTheme } from "../hooks/useTheme";
-import { isWeb } from "../platform";
-import { HStack } from "./Stacks";
-import { Text } from "./Text";
-const defaultStyle = {
-  justifyContent: "center",
-  alignItems: "center",
-  cursor: "pointer",
-  paddingVertical: 10,
-  flexWrap: "nowrap",
-  paddingHorizontal: 14,
-  flexDirection: "row",
-  borderRadius: 8,
-  flexShrink: 1
-};
-const Button = themeable(forwardRef(({
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { getTokens, themeable, useTheme } from "@tamagui/core";
+import React, { forwardRef, isValidElement } from "react";
+import { InteractiveFrame } from "./InteractiveFrame";
+import { SizableText } from "./SizableText";
+React["createElement"];
+const Button = InteractiveFrame.extractable(themeable(forwardRef(({
   children,
   icon,
   iconAfter,
-  spacing = "sm",
+  space,
   textProps,
   noTextWrap,
   elevation,
-  active,
-  disabled,
-  chromeless,
-  transparent,
   theme: themeName,
+  size,
+  themeIcon,
   ...props
 }, ref) => {
-  const theme = useTheme();
-  const childrens = noTextWrap ? children : !children ? null : textProps ? <Text color={theme.color2} fontSize={15} flexGrow={0} flexShrink={1} ellipse {...textProps}>{children}</Text> : <Text color={theme.color2} fontSize={15} flexGrow={0} flexShrink={1} ellipse>{children}</Text>;
-  return <HStack ref={ref} hitSlop={isWeb ? void 0 : defaultHitSlop} {...defaultStyle} backgroundColor={theme.bg2} shadowColor={elevation ? theme.shadowColor : void 0} hoverStyle={disabled ? null : {
-    backgroundColor: theme.bg3
-  }} pressStyle={disabled ? null : {
-    backgroundColor: theme.bg4
-  }} {...active && {
-    backgroundColor: theme.bg3
-  }} {...disabled && {
-    pointerEvents: "none",
-    opacity: 0.5
-  }} {...chromeless && {
-    backgroundColor: "transparent",
-    borderColor: "transparent",
-    shadowColor: "transparent"
-  }} {...transparent && {
-    backgroundColor: "transparent"
-  }} {...props}>{spacedChildren({
-    children: !!(icon || iconAfter) && childrens ? [
-      icon ? <React.Fragment key={0}>{icon}</React.Fragment> : null,
-      <React.Fragment key={1}>{childrens}</React.Fragment>,
-      iconAfter ? <React.Fragment key={2}>{iconAfter}</React.Fragment> : null
-    ] : icon != null ? icon : childrens,
-    spacing,
-    flexDirection: props.flexDirection || "row"
-  })}</HStack>;
-}));
-const defaultHitSlop = {
-  top: 5,
-  left: 5,
-  right: 5,
-  bottom: 5
-};
-if (process.env.IS_STATIC) {
-  Button.staticConfig = extendStaticConfig(HStack, {
-    neverFlatten: true,
-    defaultProps: defaultStyle
-  });
-}
+  const theme = themeIcon ? useTheme() : null;
+  const addTheme = /* @__PURE__ */ __name((el) => isValidElement(el) ? el : !!el ? React.createElement(el, theme ? { color: theme.color2, size: getIconSize(size, -1) } : {}) : null, "addTheme");
+  const themedIcon = icon ? addTheme(icon) : null;
+  const themedIconAfter = iconAfter ? addTheme(iconAfter) : null;
+  return <InteractiveFrame size={size} space={space ?? (() => {
+    const sizes = getTokens().size;
+    const sizeNames = Object.keys(sizes);
+    const sizeDown = sizes[sizeNames[Math.max(0, sizeNames.indexOf(size || "$4") - 3)]] || "$4";
+    return sizeDown;
+  })()} ref={ref} {...props}>
+    {themedIcon}
+    {noTextWrap ? children : !children ? null : textProps ? <SizableText color="$color2" flexGrow={0} flexShrink={1} ellipse size={size} {...textProps}>{children}</SizableText> : <SizableText size={size} color="$color2" flexGrow={0} flexShrink={1} ellipse>{children}</SizableText>}
+    {themedIconAfter}
+  </InteractiveFrame>;
+})));
+const getIconSize = /* @__PURE__ */ __name((size = "$4", sizeUpDown = 0) => {
+  const tokens = getTokens();
+  const fonts = Object.keys(tokens.font);
+  const fontSize = (tokens.font.body || tokens.font[fonts[0]]).size;
+  const fontSizeNames = Object.keys(fontSize);
+  const nameIndex = Math.max(1, fontSizeNames.indexOf(size) + sizeUpDown);
+  const sizedName = fontSizeNames[nameIndex];
+  return (sizeUpDown === 0 ? fontSize[size] : fontSize[sizedName]) ?? 16;
+}, "getIconSize");
 export {
   Button
 };
-//# sourceMappingURL=Button.js.map

package/_jsx/views/Circle.js

@@ -1,28 +1,20 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { extendStaticConfig } from "../helpers/extendStaticConfig";
-import { VStack } from "./Stacks";
-const defaultProps = {
+import { Stack, styled } from "@tamagui/core";
+const Circle = styled(Stack, {
   alignItems: "center",
   justifyContent: "center",
-  borderRadius: 1e9,
-  overflow: "hidden"
-};
-const getCircleSize = /* @__PURE__ */ __name(({ size }) => ({
-  width: size,
-  height: size
-}), "getCircleSize");
-const Circle = /* @__PURE__ */ __name((props) => {
-  const { size, ...rest } = props;
-  return <VStack {...defaultProps} {...getCircleSize(props)} {...rest} />;
-}, "Circle");
-if (process.env.IS_STATIC) {
-  Circle.staticConfig = extendStaticConfig(VStack, {
-    defaultProps,
-    preProcessProps: getCircleSize
-  });
-}
+  borderRadius: 1e8,
+  overflow: "hidden",
+  variants: {
+    size: {
+      "...size": (size, { tokens }) => {
+        return {
+          width: tokens.size[size] ?? size,
+          height: tokens.size[size] ?? size
+        };
+      }
+    }
+  }
+});
 export {
   Circle
 };
-//# sourceMappingURL=Circle.js.map

package/_jsx/views/EnsureFlexed.js

@@ -0,0 +1,13 @@
+import { Text, styled } from "@tamagui/core";
+const EnsureFlexed = styled(Text, {
+  opacity: 0,
+  lineHeight: 0,
+  height: 0,
+  display: "flex",
+  fontSize: 200,
+  children: `wwwwwwwwwwwwwwwwwww`,
+  pointerEvents: "none"
+});
+export {
+  EnsureFlexed
+};

package/_jsx/views/ExitAnimationContext.js

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+const ExitAnimationContext = createContext({
+  exited: true,
+  setExited: (_exited) => {
+  }
+});
+export {
+  ExitAnimationContext
+};

package/_jsx/views/Form.js

@@ -1,14 +1,22 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { isWeb } from "../platform";
-function Form(props) {
-  if (isWeb) {
-    return <form action="/login" method="post" {...props} />;
-  }
-  return <>{props.children}</>;
-}
-__name(Form, "Form");
+import { Stack, styled } from "@tamagui/core";
+import { TextInput } from "react-native";
+const Form = styled(Stack, {
+  tag: "form"
+});
+const Input = styled(TextInput, {
+  paddingVertical: "$2",
+  paddingHorizontal: "$4",
+  fontSize: "$4"
+});
+const TextArea = styled(TextInput, {
+  multiline: true,
+  numberOfLines: 4,
+  paddingVertical: "$2",
+  paddingHorizontal: "$4",
+  fontSize: "$4"
+});
 export {
-  Form
+  Form,
+  Input,
+  TextArea
 };
-//# sourceMappingURL=Form.js.map

package/_jsx/views/Grid.js

@@ -1,8 +1,8 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { isWeb } from "@tamagui/core";
 import React from "react";
-import { isWeb } from "../platform";
-import { HStack } from "./Stacks";
+import { XStack } from "./Stacks";
 function Grid({ children, columns, itemMinWidth = 200, gap }) {
   if (isWeb) {
     return <div style={{
@@ -13,15 +13,14 @@ function Grid({ children, columns, itemMinWidth = 200, gap }) {
     }}>{children}</div>;
   }
   const childrenList = React.Children.toArray(children);
-  return <HStack alignItems="center" justifyContent="center" flexWrap="wrap">{childrenList.map((child, i) => {
+  return <XStack alignItems="center" justifyContent="center" flexWrap="wrap">{childrenList.map((child, i) => {
     if (!child) {
       return null;
     }
-    return <HStack key={i} flex={1} minWidth={itemMinWidth} marginRight={gap} marginBottom={gap}>{child}</HStack>;
-  })}</HStack>;
+    return <XStack key={i} flex={1} minWidth={itemMinWidth} marginRight={gap} marginBottom={gap}>{child}</XStack>;
+  })}</XStack>;
 }
 __name(Grid, "Grid");
 export {
   Grid
 };
-//# sourceMappingURL=Grid.js.map

package/_jsx/views/Headings.js

@@ -1,42 +1,45 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { forwardRef } from "react";
-import { extendStaticConfig } from "../helpers/extendStaticConfig";
-import { combinePropMappers } from "../helpers/PropMapper";
-import { useTheme } from "../hooks/useTheme";
-import { Paragraph, createSizedTextPropMapper } from "./Paragraph";
-import { textPropMapper } from "./Text";
-const titleDefaultProps = {
-  sizeLineHeight: 1,
-  fontWeight: "800"
-};
-const titlePropMapper = combinePropMappers(createSizedTextPropMapper(1.5), textPropMapper);
-const Title = forwardRef((props, ref) => {
-  return <Paragraph {...titleDefaultProps} ref={ref} propMapper={titlePropMapper} {...props} />;
+import { styled } from "@tamagui/core";
+import { Paragraph } from "./Paragraph";
+const Title = styled(Paragraph, {
+  fontFamily: "$title",
+  fontWeight: "700",
+  size: "$8"
+});
+const H1 = styled(Title, {
+  fontFamily: "$title",
+  accessibilityRole: "header",
+  size: "$10"
+});
+const H2 = styled(Title, {
+  fontFamily: "$title",
+  accessibilityRole: "header",
+  size: "$9"
+});
+const H3 = styled(Title, {
+  fontFamily: "$title",
+  accessibilityRole: "header",
+  size: "$8",
+  fontWeight: "700"
+});
+const H4 = styled(Title, {
+  fontFamily: "$title",
+  accessibilityRole: "header",
+  size: "$6"
+});
+const H5 = styled(Title, {
+  fontFamily: "$title",
+  accessibilityRole: "header",
+  size: "$5",
+  color: "$color2",
+  fontWeight: "600"
+});
+const H6 = styled(Title, {
+  fontFamily: "$title",
+  accessibilityRole: "header",
+  size: "$4",
+  color: "$color3",
+  fontWeight: "600"
 });
-if (process.env.IS_STATIC) {
-  Title["staticConfig"] = extendStaticConfig(Paragraph, {
-    defaultProps: titleDefaultProps,
-    propMapper: titlePropMapper
-  });
-}
-const Heading = Title;
-const H1 = /* @__PURE__ */ __name((props) => <Title accessibilityRole="header" size="xxl" {...props} />, "H1");
-const H2 = /* @__PURE__ */ __name((props) => <Title accessibilityRole="header" size="lg" {...props} />, "H2");
-const H3 = /* @__PURE__ */ __name((props) => {
-  return <Title accessibilityRole="header" size="md" {...props} />;
-}, "H3");
-const H4 = /* @__PURE__ */ __name((props) => {
-  return <Title accessibilityRole="header" size="sm" {...props} />;
-}, "H4");
-const H5 = /* @__PURE__ */ __name((props) => {
-  const theme = useTheme();
-  return <Title accessibilityRole="header" size="xs" color={theme.color3} {...props} />;
-}, "H5");
-const H6 = /* @__PURE__ */ __name((props) => {
-  const theme = useTheme();
-  return <Title accessibilityRole="header" size="xxs" color={theme.color3} {...props} />;
-}, "H6");
 export {
   H1,
   H2,
@@ -44,7 +47,5 @@ export {
   H4,
   H5,
   H6,
-  Heading,
   Title
 };
-//# sourceMappingURL=Headings.js.map