@artsy/palette-mobile 13.2.34 → 13.2.35

package/dist/elements/Message/Message.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Animated, Easing, TouchableOpacity } from "react-native";
+import { CloseIcon } from "../../svgs";
+import { useColor } from "../../utils/hooks/useColor";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+export const Message = ({ bodyTextStyle, children, containerStyle, IconComponent, iconPosition = "left", onClose, showCloseButton = false, testID, text, title, titleStyle, variant = "default", }) => {
+    const color = useColor();
+    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, { testID: testID, style: {
+            height: tempHeight,
+            transform: [
+                {
+                    scaleY: scaleYAnim.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [1, 0],
+                    }),
+                },
+            ],
+        }, children: _jsx(Flex, { backgroundColor: color(colors[variant].background), ...containerStyle, children: _jsxs(Flex, { px: 2, py: 1, flexDirection: "row", justifyContent: "space-between", children: [_jsxs(Flex, { flex: 1, children: [_jsxs(Flex, { flexDirection: "row", children: [!!IconComponent && iconPosition === "left" && (_jsx(Flex, { mr: 1, children: _jsx(IconComponent, {}) })), !!title && (_jsx(Text, { pr: 2, variant: "xs", color: color(colors[variant].title), ...titleStyle, children: title }))] }), !!text && (_jsx(Text, { variant: "xs", color: color(colors[variant].text), ...bodyTextStyle, children: text })), children] }), !!IconComponent && iconPosition === "right" && (_jsx(Flex, { mr: showCloseButton ? 1 : 0, justifyContent: "center", children: _jsx(IconComponent, {}) })), !!showCloseButton && (_jsx(Flex, { style: { marginTop: 2 }, children: _jsx(TouchableOpacity, { testID: "Message-close-button", onPress: handleClose, hitSlop: { bottom: 10, right: 10, left: 10, top: 10 }, children: _jsx(CloseIcon, { fill: color("black100") }) }) }))] }) }) }));
+};
+const colors = {
+    default: {
+        background: "black5",
+        title: "black100",
+        text: "black60",
+    },
+    info: {
+        background: "blue10",
+        title: "blue100",
+        text: "black100",
+    },
+    success: {
+        background: "green10",
+        title: "green150",
+        text: "black100",
+    },
+    alert: {
+        background: "orange10",
+        title: "orange150",
+        text: "black100",
+    },
+    warning: {
+        background: "yellow10",
+        title: "yellow150",
+        text: "black100",
+    },
+    error: {
+        background: "red10",
+        title: "red100",
+        text: "black100",
+    },
+};

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

@@ -0,0 +1 @@
+export {};

package/dist/elements/Message/Message.stories.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { storiesOf } from "@storybook/react-native";
+import { Text } from "react-native";
+import { Message } from "./Message";
+import { withTheme } from "../../storybook/decorators";
+import { List } from "../../storybook/helpers";
+storiesOf("Message", module)
+    .addDecorator(withTheme)
+    .add("Variants", () => (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: [_jsx(Message, { variant: "default", title: "Without Close Button", text: "Text" }), _jsx(Message, { variant: "default", title: "Without Close Button", children: _jsx(Text, { children: "Text" }) }), _jsx(Message, { variant: "default", text: "Without title" }), _jsx(Message, { variant: "default", showCloseButton: true, title: "Title", text: "Text" }), _jsx(Message, { variant: "default", showCloseButton: true, title: "Title", text: "Very very very very very very very very very very very very very very long text" }), _jsx(Message, { variant: "default", showCloseButton: true, title: "Very very very very very very very very very very very very very very long title", text: "Text" }), _jsx(Message, { variant: "default", showCloseButton: true, title: "Very very very very very very very very very very very very very very long title", text: "Very very very very very very very very very very very very very very long text" })] })))
+    .add("Color Variants", () => (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20, alignItems: "stretch" }, children: [_jsx(Message, { variant: "default", showCloseButton: true, title: "Default", text: "Text" }), _jsx(Message, { variant: "info", showCloseButton: true, title: "Info", text: "Text" }), _jsx(Message, { variant: "success", showCloseButton: true, title: "Success", text: "Text" }), _jsx(Message, { variant: "warning", showCloseButton: true, title: "Warning", text: "Text" }), _jsx(Message, { variant: "error", showCloseButton: true, title: "Error", text: "Text" })] })));

package/dist/elements/Message/Message.tests.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/elements/Message/Message.tests.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent } from "@testing-library/react-native";
+import { Message } from "./Message";
+import { renderWithWrappers } from "../../utils/tests/renderWithWrappers";
+describe("Message", () => {
+    it("it renders", () => {
+        const MessageComponent = renderWithWrappers(_jsx(Message, { variant: "default", title: "title", text: "text" }));
+        expect(MessageComponent).toBeTruthy();
+        expect(MessageComponent.getByText("title")).toBeDefined();
+        expect(MessageComponent.getByText("text")).toBeDefined();
+    });
+    it("does not show close button when !showCloseButton", () => {
+        const { getByTestId } = renderWithWrappers(_jsx(Message, { variant: "default", title: "title", text: "text" }));
+        expect(() => getByTestId("Message-close-button")).toThrow("Unable to find an element with testID: Message-close-button");
+    });
+    it("shows close button when showCloseButton", () => {
+        const { getByTestId } = renderWithWrappers(_jsx(Message, { variant: "default", title: "title", text: "text", showCloseButton: true }));
+        expect(getByTestId("Message-close-button")).toBeDefined();
+    });
+    it("fires onClose press event", () => {
+        const onClose = jest.fn();
+        const { getByTestId } = renderWithWrappers(_jsx(Message, { variant: "default", onClose: onClose, title: "title", text: "text", showCloseButton: true }));
+        fireEvent.press(getByTestId("Message-close-button"));
+        expect(onClose).toHaveBeenCalled();
+    });
+});

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

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

package/dist/elements/Message/index.js

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

package/dist/elements/Pill/Pill.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { MotiPressableProps } from "moti/interactions";
+import { IconProps } from "../../svgs/Icon";
+import { FlexProps } from "../Flex";
+export declare const PILL_VARIANT_NAMES: readonly ["badge", "default", "dotted", "filter", "profile", "search", "onboarding"];
+export type PillState = "default" | "selected" | "disabled";
+export type PillVariant = typeof PILL_VARIANT_NAMES[number];
+export type PillProps = (FlexProps & {
+    selected?: boolean;
+    disabled?: boolean;
+    Icon?: React.FC<IconProps>;
+    onPress?: MotiPressableProps["onPress"];
+}) & ({
+    variant?: Extract<PillVariant, "default" | "filter" | "badge" | "search" | "dotted" | "onboarding">;
+    src?: never;
+} | {
+    variant: Extract<PillVariant, "profile">;
+    src?: string;
+});
+export declare const Pill: React.FC<PillProps>;

package/dist/elements/Pill/Pill.js

@@ -0,0 +1,161 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import themeGet from "@styled-system/theme-get";
+import { MotiPressable } from "moti/interactions";
+import { useMemo } from "react";
+import styled, { css } from "styled-components";
+import { CloseIcon } from "../../svgs";
+import { Flex } from "../Flex";
+import { Image } from "../Image";
+import { Text } from "../Text";
+export const PILL_VARIANT_NAMES = [
+    "badge",
+    "default",
+    "dotted",
+    "filter",
+    "profile",
+    "search",
+    "onboarding",
+];
+export const Pill = ({ variant = "default", src, selected, disabled, Icon, children, onPress, ...rest }) => {
+    const stateString = selected ? "selected" : disabled ? "disabled" : "default";
+    const color = TEXT_COLOR[variant][stateString];
+    const showCloseIcon = (variant === "filter" && !disabled) || (["profile"].includes(variant) && selected);
+    return (_jsx(Flex, { ...rest, children: _jsxs(Container, { variant: variant, selected: selected, disabled: disabled, onPress: onPress, animate: useMemo(() => ({ hovered, pressed }) => {
+                "worklet";
+                return {
+                    opacity: hovered || pressed ? 0.5 : 1,
+                };
+            }, []), children: [variant === "profile" && src && (_jsx(Flex, { overflow: "hidden", borderRadius: 50, height: 30, width: 30, mr: 1, children: _jsx(Thumbnail, { src: src, height: 30, width: 30 }) })), Icon && _jsx(Icon, { fill: color, ml: -0.5, mr: 0.5 }), _jsx(Text, { variant: "xs", color: color, style: { marginBottom: 2 }, children: children }), showCloseIcon && _jsx(CloseIcon, { fill: color, ml: 0.5, width: 15, height: 15 })] }) }));
+};
+const Container = styled(MotiPressable) `
+  align-items: center;
+  border: 1px solid ${themeGet("colors.black15")};
+  flex-direction: row;
+  justify-content: center;
+  text-align: center;
+  padding: 20px;
+
+  ${(props) => {
+    const states = PILL_VARIANTS[props.variant];
+    return css `
+      ${states.default}
+      ${props.selected && states.selected}
+      ${props.disabled && states.disabled}
+    `;
+}}
+`;
+const Thumbnail = styled(Image) `
+  background-color: ${themeGet("colors.black30")};
+`;
+const PILL_STATES = {
+    default: css `
+    border-radius: 15px;
+    height: 30px;
+    padding: 0 ${themeGet("space.2")};
+  `,
+    selected: css `
+    border-color: ${themeGet("colors.blue100")};
+    background-color: ${themeGet("colors.blue100")};
+  `,
+    disabled: css `
+    background-color: ${themeGet("colors.black5")};
+    border-color: ${themeGet("colors.black5")};
+  `,
+};
+const PILL_VARIANTS = {
+    default: PILL_STATES,
+    onboarding: {
+        ...PILL_STATES,
+        default: css `
+      ${PILL_STATES.default}
+      border-radius: 20px;
+      height: 40px;
+      border-color: ${themeGet("colors.black60")};
+    `,
+    },
+    dotted: {
+        ...PILL_STATES,
+        default: css `
+      ${PILL_STATES.default}
+      border-style: dashed;
+    `,
+        selected: css `
+      ${PILL_STATES.selected}
+      background-color: ${themeGet("colors.black10")};
+      border-color: ${themeGet("colors.black10")};
+    `,
+    },
+    search: {
+        ...PILL_STATES,
+        default: css `
+      ${PILL_STATES.default}
+    `,
+    },
+    profile: {
+        default: css `
+      background-color: ${themeGet("colors.black5")};
+      border-color: ${themeGet("colors.black5")};
+      border-radius: 25px;
+      height: 50px;
+      padding: 0 ${themeGet("space.1")}};
+    `,
+        selected: css `
+      border-color: ${themeGet("colors.blue100")};
+    `,
+        disabled: css ``,
+    },
+    badge: {
+        default: css `
+      border-radius: 15px;
+      height: 30px;
+      padding: 0 15px;
+      background-color: ${themeGet("colors.blue10")};
+      border-color: ${themeGet("colors.blue10")};
+    `,
+        selected: css `
+      background-color: ${themeGet("colors.blue150")};
+      border-color: ${themeGet("colors.blue150")};
+    `,
+        disabled: css `
+      background-color: ${themeGet("colors.blue10")};
+      border-color: ${themeGet("colors.blue10")};
+    `,
+    },
+    filter: {
+        ...PILL_STATES,
+        default: css `
+      height: 30px;
+      padding: 0 ${themeGet("space.1")};
+    `,
+        disabled: css `
+      border-color: ${themeGet("colors.black60")};
+    `,
+    },
+};
+const defaultColors = {
+    default: "black100",
+    selected: "white100",
+    disabled: "black60",
+};
+const TEXT_COLOR = {
+    default: defaultColors,
+    onboarding: defaultColors,
+    dotted: {
+        ...defaultColors,
+        selected: "black100",
+    },
+    search: defaultColors,
+    profile: {
+        ...defaultColors,
+        selected: "black100",
+    },
+    badge: {
+        default: "blue100",
+        selected: "white100",
+        disabled: "blue100",
+    },
+    filter: {
+        ...defaultColors,
+        disabled: "black100",
+    },
+};

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./Pill").PillProps>;
+};
+export default _default;

package/dist/elements/Pill/Pill.stories.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { storiesOf } from "@storybook/react-native";
+import { useState } from "react";
+import { Pill } from "./Pill";
+import { List } from "../../storybook/helpers";
+import { GraphIcon } from "../../svgs";
+import { Flex } from "../Flex";
+export default {
+    title: "Pill",
+    component: Pill,
+};
+storiesOf("Pill", module)
+    .add("Variants", () => (_jsxs(List, { contentContainerStyle: {
+        marginHorizontal: 20,
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+    }, children: [_jsxs(Flex, { flexDirection: "row", children: [_jsx(Pill, { children: "Default" }), _jsx(Pill, { selected: true, ml: 1, children: "Selected" }), _jsx(Pill, { disabled: true, ml: 1, children: "Disabled" })] }), _jsxs(Flex, { flexDirection: "row", children: [_jsx(Pill, { variant: "filter", children: "Filter" }), _jsx(Pill, { variant: "filter", selected: true, ml: 1, children: "Selected" }), _jsx(Pill, { variant: "filter", disabled: true, ml: 1, children: "Disabled" })] }), _jsxs(Flex, { flexDirection: "row", children: [_jsx(Pill, { Icon: GraphIcon, variant: "badge", children: "Badge" }), _jsx(Pill, { Icon: GraphIcon, variant: "badge", selected: true, ml: 1, children: "Selected" }), _jsx(Pill, { Icon: GraphIcon, variant: "badge", disabled: true, ml: 1, children: "Disabled" })] }), _jsxs(Flex, { flexDirection: "row", children: [_jsx(Pill, { variant: "profile", children: "Profile" }), _jsx(Pill, { variant: "profile", selected: true, ml: 1, children: "Selected" }), _jsx(Pill, { variant: "profile", disabled: true, ml: 1, children: "Disabled" })] }), _jsxs(Flex, { flexDirection: "row", children: [_jsx(Pill, { variant: "search", children: "Unique" }), _jsx(Pill, { variant: "search", selected: true, ml: 1, children: "Painting" }), _jsx(Pill, { variant: "search", disabled: true, ml: 1, children: "Sculpture" })] }), _jsxs(Flex, { flexDirection: "row", children: [_jsx(Pill, { variant: "search", children: "Search" }), _jsx(Pill, { variant: "search", selected: true, ml: 1, children: "Selected" }), _jsx(Pill, { variant: "search", disabled: true, ml: 1, children: "Search" })] })] })))
+    .add("Profile with image", () => (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20 }, children: [_jsx(Pill, { variant: "profile", src: src, children: "Artist" }), _jsx(Pill, { variant: "profile", src: src, selected: true, ml: 1, children: "Selected" }), _jsx(Pill, { variant: "profile", src: src, disabled: true, ml: 1, children: "Disabled" })] })))
+    .add("Controlled state", () => {
+    const [selected, setSelected] = useState(false);
+    return (_jsx(List, { contentContainerStyle: { marginHorizontal: 20 }, children: _jsx(Pill, { selected: selected, onPress: () => setSelected((prev) => !prev), children: "Pill" }) }));
+})
+    .add("Onboarding", () => {
+    return (_jsxs(List, { contentContainerStyle: { marginHorizontal: 20 }, children: [_jsx(Pill, { variant: "onboarding", selected: true, children: "Yes, I love collecting art" }), _jsx(Pill, { variant: "onboarding", ml: 1, children: "No, I'm just starting out" })] }));
+});
+const src = "https://d32dm0rphc51dk.cloudfront.net/A983VUIZusVBKy420xP3ow/normalized.jpg";

package/dist/elements/Pill/Pill.tests.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/elements/Pill/Pill.tests.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render } from "@testing-library/react-native";
+import { Pill } from "./Pill";
+import { Theme } from "../../Theme";
+describe("Pill", () => {
+    it("invokes the onClick callback", () => {
+        const onPress = jest.fn();
+        const { getByText } = render(_jsx(Theme, { children: _jsx(Pill, { onPress: onPress, children: "wow" }) }));
+        fireEvent.press(getByText("wow"));
+        expect(onPress).toHaveBeenCalled();
+    });
+    it("should not be pressable if disabled is passed", () => {
+        const onPress = jest.fn();
+        const { getByText } = render(_jsx(Theme, { children: _jsx(Pill, { disabled: true, onPress: onPress, children: "Press me" }) }));
+        fireEvent.press(getByText("Press me"));
+        expect(onPress).not.toHaveBeenCalled();
+    });
+});

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

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

package/dist/elements/Pill/index.js

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

package/dist/elements/PopIn/PopIn.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const PopIn: ({ children, xOffset, yOffset, }: {
+    children: React.ReactNode;
+    xOffset?: number | undefined;
+    yOffset?: number | undefined;
+}) => JSX.Element;

package/dist/elements/PopIn/PopIn.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { Animated } from "react-native";
+export const PopIn = ({ children, xOffset, yOffset, }) => {
+    const entranceProgress = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        Animated.spring(entranceProgress, {
+            toValue: 1,
+            bounciness: 12,
+            speed: 28,
+            useNativeDriver: true,
+        }).start();
+    }, []);
+    return (_jsx(Animated.View, { style: {
+            opacity: entranceProgress,
+            transform: [
+                {
+                    scale: entranceProgress.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: [0.5, 1],
+                    }),
+                },
+                {
+                    translateY: yOffset != null
+                        ? entranceProgress.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [yOffset, 0],
+                        })
+                        : 0,
+                },
+                {
+                    translateX: xOffset != null
+                        ? entranceProgress.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [xOffset, 0],
+                        })
+                        : 0,
+                },
+            ],
+        }, children: children }));
+};

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

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

package/dist/elements/PopIn/index.js

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

package/dist/elements/Popover/Popover.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { Color } from "@artsy/palette-tokens";
+import { ViewStyle } from "react-native";
+import RNPopover from "react-native-popover-view";
+interface PopoverProps {
+    children?: React.ReactElement;
+    variant?: PopoverVariant;
+    title?: React.ReactElement;
+    content?: React.ReactElement;
+    onPressOutside?: () => void;
+    onDismiss?: () => void;
+    onCloseComplete?: RNPopover["props"]["onCloseComplete"];
+    placement?: "top" | "bottom" | "left" | "right";
+    noCloseIcon?: boolean;
+    visible?: boolean;
+}
+export declare const Popover: ({ variant, children, visible, onPressOutside, onDismiss, onCloseComplete, placement, title, content, noCloseIcon, }: PopoverProps) => JSX.Element;
+export declare const POPOVER_VARIANTS: Record<"light" | "dark", {
+    backgroundColor: string;
+    fill: Color;
+    shadow?: ViewStyle;
+}>;
+export type PopoverVariant = keyof typeof POPOVER_VARIANTS;
+export {};

package/dist/elements/Popover/Popover.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { THEME } from "@artsy/palette-tokens";
+import { Platform, StatusBar } from "react-native";
+import RNPopover from "react-native-popover-view";
+import { Easing } from "react-native-reanimated";
+import styled from "styled-components";
+import { CloseIcon } from "../../svgs";
+import { Flex } from "../Flex";
+import { Touchable } from "../Touchable";
+export const Popover = ({ variant = "dark", children, visible, onPressOutside, onDismiss, onCloseComplete, placement = "top", title, content, noCloseIcon, }) => {
+    const style = POPOVER_VARIANTS[variant];
+    return (_jsx(RNPopover, { backgroundStyle: { opacity: 0.5, backgroundColor: THEME.colors.black100 }, popoverStyle: [{ backgroundColor: style.backgroundColor }, style.shadow], from: children, isVisible: visible, 
+        // this is required to make sure that the popover is positioned correctly on android
+        verticalOffset: Platform.OS === "android" ? -(StatusBar.currentHeight ?? 0) : 0, onCloseComplete: onCloseComplete, onRequestClose: onPressOutside, placement: placement, arrowSize: { height: 11, width: 22 }, animationConfig: {
+            duration: 400,
+            easing: Easing.out(Easing.exp),
+        }, children: _jsxs(Container, { variant: variant, p: 1, children: [_jsxs(Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [title ? title : _jsx(Flex, {}), !noCloseIcon && (_jsx(Touchable, { onPress: onDismiss, accessibilityRole: "button", "aria-label": "Dismiss popover", children: _jsx(Flex, { ml: 0.5, children: _jsx(CloseIcon, { width: 18, height: 18, fill: style.fill }) }) }))] }), content] }) }));
+};
+const Container = styled(Flex) `
+  background-color: ${({ variant }) => POPOVER_VARIANTS[variant].backgroundColor};
+`;
+const DROP_SHADOW = {
+    shadowColor: THEME.colors.black100,
+    shadowOffset: {
+        width: 0,
+        height: 2,
+    },
+    shadowOpacity: 0.23,
+    shadowRadius: 2.62,
+    elevation: 4,
+};
+export const POPOVER_VARIANTS = {
+    light: {
+        backgroundColor: THEME.colors.white100,
+        fill: "black100",
+        shadow: DROP_SHADOW,
+    },
+    dark: {
+        backgroundColor: THEME.colors.black100,
+        fill: "white100",
+    },
+};

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

@@ -0,0 +1 @@
+export {};

package/dist/elements/Popover/Popover.stories.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { storiesOf } from "@storybook/react-native";
+import { useState } from "react";
+import { Popover } from "./Popover";
+import { Button } from "../Button";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+storiesOf("Popover", module)
+    .add("Variants", () => {
+    const [visible, setVisible] = useState(null);
+    return (_jsxs(Flex, { flex: 1, alignSelf: "center", mt: 12, alignItems: "center", flexWrap: "wrap", children: [_jsx(Popover, { visible: visible === "top-dark", title: _jsx(Text, { color: "white100", variant: "xs", children: "Popover Top Dark" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("top-dark"), children: "Top Dark" }) }), _jsx(Popover, { visible: visible === "bottom-dark", placement: "bottom", title: _jsx(Text, { color: "white100", variant: "xs", children: "Popover Bottom Dark" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("bottom-dark"), children: "Bottom Dark" }) }), _jsx(Popover, { visible: visible === "top-light", placement: "top", variant: "light", title: _jsx(Text, { variant: "xs", children: "Popover Top Light" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("top-light"), children: "Top Light" }) }), _jsx(Popover, { visible: visible === "bottom-light", placement: "bottom", variant: "light", title: _jsx(Text, { variant: "xs", children: "Popover Bottom Light" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("bottom-light"), children: "Bottom Light" }) })] }));
+})
+    .add("With title and/or content", () => {
+    const [visible, setVisible] = useState(null);
+    return (_jsxs(Flex, { flex: 1, alignSelf: "center", mt: 12, alignItems: "center", flexWrap: "wrap", children: [_jsx(Popover, { visible: visible === "title", title: _jsx(Text, { weight: "medium", color: "white100", children: "Popover title" }), content: _jsxs(_Fragment, { children: [_jsx(Text, { color: "white100", children: "Popover descriptive text with some not so long long long body" }), _jsx(Text, { color: "white100", children: "And some line break" })] }), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("title"), children: "Some title and description" }) }), _jsx(Popover, { visible: visible === "buttons", placement: "bottom", variant: "light", content: _jsxs(_Fragment, { children: [_jsx(Text, { weight: "medium", mb: 1, children: "Popover title" }), _jsx(Flex, { height: 80, backgroundColor: "black30", mb: 1 }), _jsx(Text, { mb: 1, children: "Popover descriptive text" }), _jsxs(Flex, { flexDirection: "row", justifyContent: "flex-end", children: [_jsx(Button, { size: "small", variant: "outlineGray", children: "Learn more" }), _jsx(Button, { size: "small", ml: 1, onPress: () => setVisible(null), children: "Got it" })] })] }), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("buttons"), children: "Buttons and more content" }) }), _jsx(Popover, { visible: visible === "no-close", placement: "bottom", noCloseIcon: true, variant: "light", content: _jsxs(_Fragment, { children: [_jsx(Text, { weight: "medium", mb: 1, children: "Popover title?" }), _jsx(Flex, { height: 80, backgroundColor: "black30", mb: 1 }), _jsx(Text, { mb: 1, children: "Popover descriptive text" }), _jsx(Button, { size: "small", onPress: () => setVisible(null), children: "Got it" })] }), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("no-close"), children: "Content without close icon" }) })] }));
+})
+    .add("Edge positions", () => {
+    const [topVisible, setTopVisible] = useState(true);
+    const [bottomVisible, setBottomVisible] = useState(false);
+    return (_jsxs(Flex, { flex: 1, backgroundColor: "black30", justifyContent: "space-between", px: 1, children: [_jsx(Flex, { backgroundColor: "white100", width: 80, px: 1, children: _jsx(Popover, { visible: topVisible, placement: "bottom", onDismiss: () => setTopVisible(false), onCloseComplete: () => setBottomVisible(true), title: _jsx(Text, { color: "white100", variant: "xs", children: "Top-Left" }), children: _jsx(Text, { children: "Top-left" }) }) }), _jsx(Flex, { backgroundColor: "white100", width: 120, mb: 6, alignSelf: "flex-end", px: 1, children: _jsx(Popover, { visible: bottomVisible, onDismiss: () => setBottomVisible(false), title: _jsx(Text, { color: "white100", variant: "xs", children: "Bottom-Right" }), children: _jsx(Text, { children: "Bottom-right" }) }) })] }));
+});

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

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

package/dist/elements/Popover/index.js

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

package/dist/elements/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { ViewStyle } from "react-native";
+import { Color } from "../../types";
+export interface ProgressBarProps {
+    animationDuration?: number;
+    backgroundColor?: Color;
+    height?: number;
+    onCompletion?: () => void;
+    progress: number;
+    trackColor?: Color;
+    style?: ViewStyle;
+    progressBarStyle?: ViewStyle;
+}
+export declare const ProgressBar: ({ animationDuration, backgroundColor, height, onCompletion, progress: unclampedProgress, trackColor, style, progressBarStyle, }: ProgressBarProps) => JSX.Element;

package/dist/elements/ProgressBar/ProgressBar.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { useSpace } from "../../utils/hooks";
+import { useColor } from "../../utils/hooks/useColor";
+import { Flex } from "../Flex";
+const clamp = (num, min, max) => Math.max(min, Math.min(num, max));
+export const ProgressBar = ({ animationDuration = 200, backgroundColor = "black30", height = 2, onCompletion, progress: unclampedProgress, trackColor = "blue100", style, progressBarStyle, }) => {
+    const color = useColor();
+    const space = useSpace();
+    const width = useSharedValue(0);
+    const progress = clamp(unclampedProgress, 0, 100);
+    const progressAnim = useAnimatedStyle(() => {
+        return { width: `${width.value}%` };
+    });
+    const [onCompletionCalled, setOnCompletionCalled] = useState(false);
+    useEffect(() => {
+        width.value = withTiming(progress, { duration: animationDuration });
+        if (progress === 100 && !onCompletionCalled) {
+            onCompletion?.();
+            setOnCompletionCalled(true);
+        }
+    }, [progress]);
+    return (_jsx(Flex, { width: "10%", backgroundColor: backgroundColor, style: {
+            marginVertical: space(1),
+            width: "100%",
+            ...style,
+        }, children: _jsx(Animated.View, { testID: "progress-bar-track", style: [progressAnim, { height, backgroundColor: color(trackColor) }, progressBarStyle] }) }));
+};

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

@@ -0,0 +1 @@
+export {};

package/dist/elements/ProgressBar/ProgressBar.stories.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { storiesOf } from "@storybook/react-native";
+import { ProgressBar } from "./";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+storiesOf("Progress Indicators", module).add("ProgressBar", () => (_jsxs(Flex, { p: 2, children: [_jsx(Text, { children: "10%" }), _jsx(ProgressBar, { progress: 10 }), _jsx(Text, { children: "20%" }), _jsx(ProgressBar, { progress: 20 }), _jsx(Text, { children: "50%" }), _jsx(ProgressBar, { progress: 50 })] })));

package/dist/elements/ProgressBar/ProgressBar.tests.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/elements/ProgressBar/ProgressBar.tests.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { waitFor } from "@testing-library/react-native";
+import { ProgressBar } from "./ProgressBar";
+import { renderWithWrappers } from "../../utils/tests/renderWithWrappers";
+describe("ProgressBar", () => {
+    const getWrapper = (props) => {
+        return renderWithWrappers(_jsx(ProgressBar, { ...props }));
+    };
+    it.skip("does not display the track view when progress is zero", async () => {
+        const wrapper = getWrapper({ progress: 0 });
+        const container = wrapper.getByTestId("progress-bar");
+        const track = wrapper.getByTestId("progress-bar-track");
+        expect(container.props.width).toEqual("100%");
+        // width of 0% is invisible
+        await waitFor(() => expect(track.props.style.width).toEqual("0%"));
+    });
+    it.skip("display the track view when progress is above zero", async () => {
+        const wrapper = getWrapper({ progress: 50 });
+        const container = wrapper.getByTestId("progress-bar");
+        const track = wrapper.getByTestId("progress-bar-track");
+        expect(container.props.width).toEqual("100%");
+        // width of 50% is visible
+        // wait for animations to finish running
+        await waitFor(() => expect(track.props.style.width).toEqual("50%"));
+    });
+});

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

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

package/dist/elements/ProgressBar/index.js

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