@artsy/palette-mobile 13.2.34 → 13.2.35

package/dist/elements/Banner/Banner.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Animated, Easing, TouchableOpacity } from "react-native";
+import { DEFAULT_HIT_SLOP } from "../../constants";
+import { CloseIcon } from "../../svgs";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+export const Banner = ({ text, onClose, dismissable = false, variant = "defaultLight", ...restProps }) => {
+    const [tempHeight, setTempHeight] = useState(undefined);
+    const scaleYAnim = useRef(new Animated.Value(0)).current;
+    const handleClose = () => {
+        Animated.timing(scaleYAnim, {
+            toValue: 1,
+            duration: 150,
+            easing: Easing.linear,
+            useNativeDriver: true,
+        }).start(() => {
+            setTempHeight(0);
+        });
+        onClose?.();
+    };
+    return (_jsx(Animated.View, { style: {
+            height: tempHeight,
+            transform: [
+                {
+                    scaleY: scaleYAnim.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [1, 0],
+                    }),
+                },
+            ],
+        }, children: _jsx(Flex, { backgroundColor: BANNER_VARIANTS[variant].backgroundColor, ...restProps, children: _jsxs(Flex, { px: 2, py: 1, flexDirection: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(Flex, { flex: 1, alignItems: "center", children: _jsx(Text, { textAlign: "center", variant: "xs", color: BANNER_VARIANTS[variant].color, children: text }) }), !!dismissable && (_jsx(Flex, { children: _jsx(TouchableOpacity, { testID: "banner-close-button", onPress: handleClose, hitSlop: DEFAULT_HIT_SLOP, children: _jsx(CloseIcon, { fill: BANNER_VARIANTS[variant].color }) }) }))] }) }) }));
+};
+const BANNER_VARIANTS = {
+    defaultLight: {
+        backgroundColor: "black10",
+        color: "black100",
+    },
+    defaultDark: {
+        backgroundColor: "black100",
+        color: "white100",
+    },
+    success: {
+        backgroundColor: "green100",
+        color: "white100",
+    },
+    error: {
+        backgroundColor: "red100",
+        color: "white100",
+    },
+    brand: {
+        backgroundColor: "brand",
+        color: "white100",
+    },
+};

package/dist/elements/Banner/Banner.stories.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: ({ text, onClose, dismissable, variant, ...restProps }: import("./Banner").BannerProps) => JSX.Element;
+};
+export default _default;
+export declare const States: () => JSX.Element;

package/dist/elements/Banner/Banner.stories.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Banner } from "./Banner";
+import { List } from "../../storybook/helpers";
+export default {
+    title: "Banner",
+    component: Banner,
+};
+export const States = () => {
+    return (_jsxs(List, { contentContainerStyle: { alignItems: undefined }, children: [_jsx(Banner, { text: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quae\n        natus assumenda distinctio, voluptatum magni. autem sunt." }), _jsx(Banner, { dismissable: true, text: "Default Light", variant: "defaultLight" }), _jsx(Banner, { dismissable: true, text: "Default Dark", variant: "defaultDark" }), _jsx(Banner, { dismissable: true, text: "Success", variant: "success" }), _jsx(Banner, { dismissable: true, text: "Error", variant: "error" }), _jsx(Banner, { dismissable: true, text: "Brand", variant: "brand" })] }));
+};

package/dist/elements/Banner/index.d.ts

@@ -0,0 +1 @@
+export * from "./Banner";

package/dist/elements/Banner/index.js

@@ -0,0 +1 @@
+export * from "./Banner";

package/dist/elements/BorderBox/BorderBox.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { BorderProps, SpaceProps } from "styled-system";
+import { SpacingUnitsTheme } from "../../tokens";
+import { FlexProps } from "../Flex";
+export interface BorderBoxProps extends FlexProps, BorderProps, SpaceProps<SpacingUnitsTheme> {
+    hover?: boolean;
+}
+/**
+ * A `View` or `div` (depending on the platform) that has a common border
+ * and padding set by default
+ */
+export declare const BorderBox: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("..").BoxProps & import("react").RefAttributes<import("react-native/types").View>>, any, BorderBoxProps, never>;

package/dist/elements/BorderBox/BorderBox.js

@@ -0,0 +1,15 @@
+import { themeGet } from "@styled-system/theme-get";
+import styled from "styled-components/native";
+import { border, space as styledSpace } from "styled-system";
+import { Flex } from "../Flex";
+/**
+ * A `View` or `div` (depending on the platform) that has a common border
+ * and padding set by default
+ */
+export const BorderBox = styled(Flex) `
+  border: 1px solid ${themeGet("colors.black10")};
+  border-radius: 2px;
+  padding: ${themeGet("space.2")};
+  ${border}
+  ${styledSpace}
+`;

package/dist/elements/BorderBox/index.d.ts

@@ -0,0 +1 @@
+export * from "./BorderBox";

package/dist/elements/BorderBox/index.js

@@ -0,0 +1 @@
+export * from "./BorderBox";

package/dist/elements/Box/Box.d.ts

@@ -0,0 +1,15 @@
+import { View, ViewProps, ViewStyle } from "react-native";
+import { BorderProps, ColorProps, FlexboxProps, LayoutProps, PositionProps, SpaceProps, TextAlignProps } from "styled-system";
+import { ColorsTheme, SpacingUnitsTheme } from "../../tokens";
+type GapProps = {
+    gap?: ViewStyle["gap"];
+    rowGap?: ViewStyle["rowGap"];
+    columnGap?: ViewStyle["columnGap"];
+};
+export interface BoxProps extends ViewProps, SpaceProps<SpacingUnitsTheme>, Omit<ColorProps<ColorsTheme>, "color">, FlexboxProps, LayoutProps, PositionProps, BorderProps, GapProps, TextAlignProps {
+}
+/**
+ * Box is just a `View` with common styled-system props.
+ */
+export declare const Box: import("styled-components").StyledComponent<typeof View, any, BoxProps, never>;
+export {};

package/dist/elements/Box/Box.js

@@ -0,0 +1,15 @@
+import { View } from "react-native";
+import styled from "styled-components/native";
+import { border, color, flexbox, layout, position, space, textAlign, } from "styled-system";
+/**
+ * Box is just a `View` with common styled-system props.
+ */
+export const Box = styled(View) `
+  ${space}
+  ${color}
+  ${flexbox}
+  ${layout}
+  ${position}
+  ${border}
+  ${textAlign}
+`;

package/dist/elements/Box/Box.stories.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { View } from "react-native";
+declare const _default: {
+    title: string;
+    component: import("styled-components").StyledComponent<typeof View, any, import("./Box").BoxProps, never>;
+};
+export default _default;
+export declare const Styled: () => JSX.Element;
+export declare const RegularViewProps: () => JSX.Element;
+export declare const GapProps: () => JSX.Element;

package/dist/elements/Box/Box.stories.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { List } from "../../storybook/helpers";
+import { Box } from "../Box";
+import { Flex } from "../Flex";
+import { Spacer } from "../Spacer";
+import { Text } from "../Text";
+export default {
+    title: "Box",
+    component: Box,
+};
+export const Styled = () => (_jsx(List, { style: { marginLeft: 50 }, contentContainerStyle: { alignItems: "flex-start" }, children: _jsx(Box, { px: 1, backgroundColor: "blue100", flexDirection: "row", height: 300, width: 200, top: 2, borderBottomWidth: 1, textAlign: "center" }) }));
+export const RegularViewProps = () => {
+    const r = useRef(null);
+    return (_jsx(Flex, { flex: 1, children: _jsx(Box, { px: 1, height: 200, width: 200, backgroundColor: "red100", onLayout: (e) => console.log(e.nativeEvent.layout), ref: r }) }));
+};
+const colors = ["red10", "green10", "yellow10", "devpurple", "red100", "black10"];
+export const GapProps = () => (_jsxs(List, { style: { marginHorizontal: 20 }, children: [_jsx(Text, { children: "Gap \uD83D\uDC47" }), _jsx(Box, { borderWidth: 1, borderColor: "black100", gap: 10, flexWrap: "wrap", flexDirection: "row", children: colors.map((color) => (_jsx(Box, { backgroundColor: color, width: 100, height: 100, children: _jsx(Text, { children: color }) }, `${color}-1`))) }), _jsx(Text, { children: "Row gap \uD83D\uDC47" }), _jsx(Box, { borderWidth: 1, borderColor: "black100", rowGap: 10, flexWrap: "wrap", flexDirection: "row", children: colors.map((color) => (_jsx(Box, { backgroundColor: color, width: 100, height: 100, children: _jsx(Text, { children: color }) }, `${color}-2`))) }), _jsx(Text, { children: "Column gap \uD83D\uDC47" }), _jsx(Box, { borderWidth: 1, borderColor: "black100", columnGap: 10, flexWrap: "wrap", flexDirection: "row", children: colors.map((color) => (_jsx(Box, { backgroundColor: color, width: 100, height: 100, children: _jsx(Text, { children: color }) }, `${color}-3`))) }), _jsx(Spacer, { y: 6 })] }));

package/dist/elements/Box/index.d.ts

@@ -0,0 +1 @@
+export * from "./Box";

package/dist/elements/Box/index.js

@@ -0,0 +1 @@
+export * from "./Box";

package/dist/elements/Button/Button.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import { TextVariant } from "@artsy/palette-tokens/dist/typography/v3";
+import { PressableProps } from "react-native";
+import { HapticFeedbackTypes } from "react-native-haptic-feedback";
+import { BoxProps } from "../Box";
+export interface ButtonProps extends BoxProps {
+    children: React.ReactNode;
+    size?: "small" | "large";
+    variant?: "fillDark" | "fillLight" | "fillGray" | "fillSuccess" | "outline" | "outlineGray" | "outlineLight" | "text";
+    onPress?: PressableProps["onPress"];
+    icon?: React.ReactNode;
+    iconPosition?: "left" | "left-start" | "right";
+    /**
+     * `haptic` can be used like:
+     * <Button haptic />
+     * or
+     * <Button haptic="impactHeavy" />
+     * to add haptic feedback on the button.
+     */
+    haptic?: HapticFeedbackTypes | true;
+    /** Displays a loader in the button */
+    loading?: boolean;
+    /** Disabled interactions */
+    disabled?: boolean;
+    /** Makes button full width */
+    block?: boolean;
+    /** Pass the longest text to the button for the button to keep longest text width */
+    longestText?: string;
+    /** Used only for tests and stories */
+    testOnly_state?: DisplayState;
+    textVariant?: TextVariant;
+}
+declare enum DisplayState {
+    Enabled = "enabled",
+    Disabled = "disabled",
+    Loading = "loading",
+    Pressed = "pressed"
+}
+export declare const Button: React.FC<ButtonProps>;
+export { DisplayState as _test_DisplayState };

package/dist/elements/Button/Button.js

@@ -0,0 +1,335 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Pressable } from "react-native";
+import Haptic from "react-native-haptic-feedback";
+import { config } from "react-spring";
+// @ts-ignore
+import { animated, Spring } from "react-spring/renderprops-native";
+import styled from "styled-components/native";
+import { useColor } from "../../utils/hooks";
+import { Box } from "../Box";
+import { Flex } from "../Flex/Flex";
+import { MeasuredView } from "../MeasuredView";
+import { Spacer } from "../Spacer";
+import { Spinner } from "../Spinner";
+import { Text } from "../Text/Text";
+import { useTextStyleForPalette } from "../Text/helpers";
+var DisplayState;
+(function (DisplayState) {
+    DisplayState["Enabled"] = "enabled";
+    DisplayState["Disabled"] = "disabled";
+    DisplayState["Loading"] = "loading";
+    DisplayState["Pressed"] = "pressed";
+})(DisplayState || (DisplayState = {}));
+export const Button = ({ children, disabled, haptic, icon, iconPosition = "left", loading, longestText, onPress, size = "large", variant = "fillDark", testOnly_state, testID, textVariant, hitSlop, ...rest }) => {
+    const textVariantBySize = size === "small" ? "xs" : "sm";
+    const textStyle = useTextStyleForPalette(textVariant ?? textVariantBySize);
+    const [innerDisplayState, setInnerDisplayState] = useState(DisplayState.Enabled);
+    const [longestTextMeasurements, setLongestTextMeasurements] = useState({
+        width: 0,
+        height: 0,
+    });
+    const displayState = testOnly_state ?? // if we use the test prop, use that
+        (loading // if we have loading or disabled in props, they are used
+            ? DisplayState.Loading
+            : disabled
+                ? DisplayState.Disabled
+                : innerDisplayState); // otherwise use the inner state for pressed or enabled
+    const getSize = () => {
+        switch (size) {
+            case "small":
+                return { height: 30, mx: "15px" };
+            case "large":
+                return { height: 50, mx: "30px" };
+        }
+    };
+    const handlePress = (event) => {
+        if (onPress === undefined || onPress === null) {
+            return;
+        }
+        if (displayState === DisplayState.Loading || displayState === DisplayState.Disabled) {
+            return;
+        }
+        // Did someone tap really fast? Flick the highlighted state
+        if (displayState === DisplayState.Enabled) {
+            setInnerDisplayState(DisplayState.Pressed);
+            setTimeout(() => {
+                setInnerDisplayState(DisplayState.Enabled);
+            }, 0.3);
+        }
+        else {
+            // Was already selected
+            setInnerDisplayState(DisplayState.Enabled);
+        }
+        if (haptic !== undefined) {
+            Haptic.trigger(haptic === true ? "impactLight" : haptic);
+        }
+        onPress(event);
+    };
+    const containerSize = getSize();
+    const to = useStyleForVariantAndState(variant, testOnly_state ?? displayState);
+    return (_jsx(Spring, { native: true, to: to, config: config.stiff, children: (springProps) => (_jsx(Pressable, { hitSlop: hitSlop, testOnly_pressed: testOnly_state === DisplayState.Pressed, disabled: testOnly_state === DisplayState.Disabled || disabled, onPressIn: () => {
+                if (displayState === DisplayState.Loading) {
+                    return;
+                }
+                setInnerDisplayState(DisplayState.Pressed);
+            }, onPressOut: () => {
+                if (displayState === DisplayState.Loading) {
+                    return;
+                }
+                setInnerDisplayState(DisplayState.Enabled);
+            }, onPress: handlePress, testID: testID, children: _jsx(Flex, { flexDirection: "row", children: _jsx(AnimatedContainer, { ...rest, style: {
+                        backgroundColor: springProps.backgroundColor,
+                        borderColor: springProps.borderColor,
+                        height: containerSize.height,
+                    }, children: _jsxs(Flex, { mx: containerSize.mx, children: [_jsxs(Flex, { height: "100%", flexDirection: "row", alignItems: "center", justifyContent: "center", children: [iconPosition === "left-start" && !!icon ? (_jsxs(Box, { position: "absolute", left: 0, children: [icon, _jsx(Spacer, { x: 0.5 })] })) : null, iconPosition === "left" && !!icon ? (_jsxs(_Fragment, { children: [icon, _jsx(Spacer, { x: 0.5 })] })) : null, !__TEST__ && longestText && (_jsx(MeasuredView, { setMeasuredState: setLongestTextMeasurements, children: _jsx(Text, { color: "red", style: textStyle, children: longestText ? longestText : children }) })), _jsx(AnimatedText, { style: [
+                                            {
+                                                width: longestText ? Math.ceil(longestTextMeasurements.width) : "auto",
+                                                color: springProps.textColor,
+                                                textDecorationLine: springProps.textDecorationLine,
+                                            },
+                                            textStyle,
+                                        ], textAlign: "center", children: children }), iconPosition === "right" && !!icon && (_jsxs(_Fragment, { children: [_jsx(Spacer, { x: 0.5 }), icon] }))] }), displayState === DisplayState.Loading && (_jsx(SpinnerContainer, { children: _jsx(Spinner, { size: size, color: to.loaderColor }) }))] }) }) }) })) }));
+};
+const useStyleForVariantAndState = (variant, state) => {
+    const color = useColor();
+    const retval = {
+        textDecorationLine: "none",
+    };
+    switch (variant) {
+        case "fillDark":
+            retval.textColor = color("white100");
+            switch (state) {
+                case DisplayState.Enabled:
+                    retval.backgroundColor = color("black100");
+                    retval.borderColor = color("black100");
+                    break;
+                case DisplayState.Disabled:
+                    retval.backgroundColor = color("black30");
+                    retval.borderColor = color("black30");
+                    break;
+                case DisplayState.Loading:
+                    retval.backgroundColor = color("black100");
+                    retval.borderColor = color("black100");
+                    retval.textColor = "rgba(0, 0, 0, 0)";
+                    retval.loaderColor = "white100";
+                    break;
+                case DisplayState.Pressed:
+                    retval.backgroundColor = color("blue100");
+                    retval.borderColor = color("blue100");
+                    retval.textDecorationLine = "underline";
+                    break;
+                default:
+                    null;
+            }
+            break;
+        case "fillLight":
+            switch (state) {
+                case DisplayState.Enabled:
+                    retval.backgroundColor = color("white100");
+                    retval.borderColor = color("white100");
+                    retval.textColor = color("black100");
+                    break;
+                case DisplayState.Disabled:
+                    retval.backgroundColor = color("black30");
+                    retval.borderColor = color("black30");
+                    retval.textColor = color("white100");
+                    break;
+                case DisplayState.Loading:
+                    retval.backgroundColor = color("white100");
+                    retval.borderColor = color("white100");
+                    retval.textColor = "rgba(0, 0, 0, 0)";
+                    retval.loaderColor = "black100";
+                    break;
+                case DisplayState.Pressed:
+                    retval.backgroundColor = color("blue100");
+                    retval.borderColor = color("blue100");
+                    retval.textColor = color("white100");
+                    retval.textDecorationLine = "underline";
+                    break;
+                default:
+                    null;
+            }
+            break;
+        case "fillGray":
+            switch (state) {
+                case DisplayState.Enabled:
+                    retval.backgroundColor = color("black10");
+                    retval.borderColor = color("black10");
+                    retval.textColor = color("black100");
+                    break;
+                case DisplayState.Disabled:
+                    retval.backgroundColor = color("black30");
+                    retval.borderColor = color("black30");
+                    retval.textColor = color("white100");
+                    break;
+                case DisplayState.Loading:
+                    retval.backgroundColor = color("black10");
+                    retval.borderColor = color("black10");
+                    retval.textColor = "rgba(0, 0, 0, 0)";
+                    retval.loaderColor = "black100";
+                    break;
+                case DisplayState.Pressed:
+                    retval.backgroundColor = color("blue100");
+                    retval.borderColor = color("blue100");
+                    retval.textColor = color("white100");
+                    retval.textDecorationLine = "underline";
+                    break;
+                default:
+                    null;
+            }
+            break;
+        case "fillSuccess":
+            retval.textColor = color("white100");
+            switch (state) {
+                case DisplayState.Enabled:
+                    retval.backgroundColor = color("blue100");
+                    retval.borderColor = color("blue100");
+                    break;
+                case DisplayState.Disabled:
+                    retval.backgroundColor = color("blue100");
+                    retval.borderColor = color("blue100");
+                    break;
+                case DisplayState.Loading:
+                    retval.backgroundColor = color("blue100");
+                    retval.borderColor = color("blue100");
+                    retval.textColor = "rgba(0, 0, 0, 0)";
+                    retval.loaderColor = "white100";
+                    break;
+                case DisplayState.Pressed:
+                    retval.backgroundColor = color("blue10");
+                    retval.borderColor = color("blue10");
+                    retval.textDecorationLine = "underline";
+                    break;
+                default:
+                    null;
+            }
+            break;
+        case "outline":
+            switch (state) {
+                case DisplayState.Enabled:
+                    retval.backgroundColor = color("white100");
+                    retval.borderColor = color("black60");
+                    retval.textColor = color("black100");
+                    break;
+                case DisplayState.Disabled:
+                    retval.backgroundColor = color("white100");
+                    retval.borderColor = color("black30");
+                    retval.textColor = color("black30");
+                    break;
+                case DisplayState.Loading:
+                    retval.backgroundColor = color("white100");
+                    retval.borderColor = color("black60");
+                    retval.textColor = "rgba(0, 0, 0, 0)";
+                    retval.loaderColor = "black100";
+                    break;
+                case DisplayState.Pressed:
+                    retval.backgroundColor = color("blue100");
+                    retval.borderColor = color("blue100");
+                    retval.textColor = color("white100");
+                    retval.textDecorationLine = "underline";
+                    break;
+                default:
+                    null;
+            }
+            break;
+        case "outlineGray":
+            switch (state) {
+                case DisplayState.Enabled:
+                    retval.backgroundColor = color("white100");
+                    retval.borderColor = color("black30");
+                    retval.textColor = color("black100");
+                    break;
+                case DisplayState.Disabled:
+                    retval.backgroundColor = color("white100");
+                    retval.borderColor = color("black30");
+                    retval.textColor = color("black30");
+                    break;
+                case DisplayState.Loading:
+                    retval.backgroundColor = color("white100");
+                    retval.borderColor = color("black30");
+                    retval.textColor = "rgba(0, 0, 0, 0)";
+                    retval.loaderColor = "black100";
+                    break;
+                case DisplayState.Pressed:
+                    retval.backgroundColor = color("blue100");
+                    retval.borderColor = color("blue100");
+                    retval.textColor = color("white100");
+                    retval.textDecorationLine = "underline";
+                    break;
+                default:
+                    null;
+            }
+            break;
+        case "outlineLight":
+            switch (state) {
+                case DisplayState.Enabled:
+                    retval.backgroundColor = "rgba(0, 0, 0, 0)";
+                    retval.borderColor = color("white100");
+                    retval.textColor = color("white100");
+                    break;
+                case DisplayState.Disabled:
+                    retval.backgroundColor = "rgba(0, 0, 0, 0)";
+                    retval.borderColor = color("black30");
+                    retval.textColor = color("black30");
+                    break;
+                case DisplayState.Loading:
+                    retval.backgroundColor = "rgba(0, 0, 0, 0)";
+                    retval.borderColor = color("white100");
+                    retval.textColor = "rgba(0, 0, 0, 0)";
+                    retval.loaderColor = "white100";
+                    break;
+                case DisplayState.Pressed:
+                    retval.backgroundColor = color("blue100");
+                    retval.borderColor = color("blue100");
+                    retval.textColor = "rgba(0, 0, 0, 0)";
+                    retval.textDecorationLine = "underline";
+                    break;
+                default:
+                    null;
+            }
+            break;
+        case "text":
+            retval.backgroundColor = "rgba(0, 0, 0, 0)";
+            retval.borderColor = "rgba(0, 0, 0, 0)";
+            switch (state) {
+                case DisplayState.Enabled:
+                    retval.textColor = color("black100");
+                    break;
+                case DisplayState.Disabled:
+                    retval.textColor = color("black30");
+                    break;
+                case DisplayState.Loading:
+                    retval.textColor = "rgba(0, 0, 0, 0)";
+                    retval.loaderColor = "blue100";
+                    break;
+                case DisplayState.Pressed:
+                    retval.textColor = color("blue100");
+                    retval.textDecorationLine = "underline";
+                    break;
+                default:
+                    null;
+            }
+            break;
+        default:
+            null;
+    }
+    return retval;
+};
+const Container = styled(Box) `
+  position: relative;
+  border-width: 1px;
+  border-radius: 50px;
+  width: ${(p) => (p.block ? "100%" : "auto")};
+  overflow: hidden;
+`;
+const SpinnerContainer = styled(Box) `
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+`;
+const AnimatedContainer = animated(Container);
+const AnimatedText = animated(Text);
+export { DisplayState as _test_DisplayState };

package/dist/elements/Button/Button.stories.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ButtonProps } from "./Button";
+declare const _default: {
+    title: string;
+    component: import("react").FC<ButtonProps>;
+};
+export default _default;
+export declare const Sizes: () => JSX.Element;
+export declare const States: () => JSX.Element;
+export declare const Variants: () => JSX.Element;
+export declare const VariantsLoading: () => JSX.Element;

package/dist/elements/Button/Button.stories.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { capitalize } from "lodash";
+import { useState } from "react";
+import { Button } from "./Button";
+import { DataList, List } from "../../storybook/helpers";
+import { Wrap } from "../../utils/Wrap";
+import { Flex } from "../Flex";
+import { LinkText } from "../Text";
+const sizes = ["small", "large"];
+const variants = [
+    "fillDark",
+    "fillLight",
+    "fillGray",
+    "fillSuccess",
+    "outline",
+    "outlineGray",
+    "outlineLight",
+    "text",
+];
+export default {
+    title: "Button",
+    component: Button,
+};
+export const Sizes = () => (_jsx(DataList, { data: sizes, renderItem: ({ item: size }) => (_jsx(Button, { size: size, onPress: () => console.log(`tapped ${size}`), children: capitalize(size) })) }));
+export const States = () => {
+    const [variant, setVariant] = useState("fillDark");
+    return (_jsxs(List, { children: [_jsx(Flex, { flexDirection: "row", flexWrap: "wrap", px: 2, children: variants.map((v) => (_jsx(LinkText, { color: "orange", onPress: () => setVariant(v), mr: "2", children: v }))) }), _jsx(Button, { variant: variant, onPress: () => console.log(`tapped`), longestText: "Regular YEA", children: "Regular" }), _jsx(Button, { variant: variant, onPress: () => console.log(`tapped`), disabled: true, children: "Disabled" }), _jsx(Button, { variant: variant, onPress: () => console.log(`tapped`), loading: true, children: "Loading" })] }));
+};
+export const Variants = () => (_jsx(DataList, { data: variants, renderItem: ({ item: variant }) => (_jsx(Wrap, { if: variant === "outlineLight" || variant === "fillLight", children: _jsx(Flex, { backgroundColor: "pink", p: 1, children: _jsx(Wrap.Content, { children: _jsx(Button, { variant: variant, onPress: () => console.log(`tapped ${variant}`), children: variant }) }) }) })) }));
+export const VariantsLoading = () => (_jsx(DataList, { data: variants, renderItem: ({ item: variant }) => {
+        if (variant !== "outlineLight") {
+            return (_jsx(Button, { variant: variant, loading: true, onPress: () => console.log(`tapped ${variant}`), children: variant }));
+        }
+        return (_jsx(Flex, { backgroundColor: "pink", py: 0.5, children: _jsx(Button, { variant: variant, loading: true, onPress: () => console.log(`tapped ${variant}`), children: variant }) }));
+    } }));

package/dist/elements/Button/CTAButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ButtonProps } from "./Button";
+export declare const CTAButton: (props: ButtonProps) => JSX.Element;

package/dist/elements/Button/CTAButton.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "./Button";
+export const CTAButton = (props) => _jsx(Button, { block: true, haptic: true, ...props });

package/dist/elements/Button/FollowButton.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ButtonProps } from "../Button";
+type FollowButtonProps = Omit<ButtonProps, "variant" | "size" | "longestText" | "icon" | "children"> & {
+    isFollowed: boolean;
+    followCount?: number;
+    longestText?: string;
+};
+export declare const FollowButton: ({ isFollowed, followCount, longestText, loading, ...restProps }: FollowButtonProps) => JSX.Element;
+export {};

package/dist/elements/Button/FollowButton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "../../svgs/CheckIcon";
+import { formatLargeNumber } from "../../utils/formatLargeNumber";
+import { Button } from "../Button";
+import { Text } from "../Text";
+export const FollowButton = ({ isFollowed, followCount, longestText, loading, ...restProps }) => {
+    return (_jsx(Button, { variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: longestText ? longestText : "Following", icon: isFollowed && !loading && _jsx(CheckIcon, { fill: "black60", width: "16px", height: "16px" }), loading: loading, ...restProps, children: !loading && (_jsxs(_Fragment, { children: [_jsx(Text, { variant: "xs", children: isFollowed ? "Following" : "Follow" }), !!followCount && followCount > 1 && (_jsx(_Fragment, { children: _jsx(Text, { variant: "xs", color: "black60", children: " " + formatLargeNumber(followCount, 1) }) }))] })) }));
+};

package/dist/elements/Button/LinkButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { TextProps } from "../Text";
+export declare const LinkButton: (props: TextProps) => JSX.Element;