@artsy/palette-mobile 13.2.33 → 13.2.34

package/dist/elements/Pill/Pill.js

@@ -1,191 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Pill = exports.PILL_VARIANT_NAMES = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const theme_get_1 = __importDefault(require("@styled-system/theme-get"));
-const interactions_1 = require("moti/interactions");
-const react_1 = require("react");
-const styled_components_1 = __importStar(require("styled-components"));
-const svgs_1 = require("../../svgs");
-const Flex_1 = require("../Flex");
-const Image_1 = require("../Image");
-const Text_1 = require("../Text");
-exports.PILL_VARIANT_NAMES = [
-    "badge",
-    "default",
-    "dotted",
-    "filter",
-    "profile",
-    "search",
-    "onboarding",
-];
-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 ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { ...rest, children: (0, jsx_runtime_1.jsxs)(Container, { variant: variant, selected: selected, disabled: disabled, onPress: onPress, animate: (0, react_1.useMemo)(() => ({ hovered, pressed }) => {
-                "worklet";
-                return {
-                    opacity: hovered || pressed ? 0.5 : 1,
-                };
-            }, []), children: [variant === "profile" && src && ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { overflow: "hidden", borderRadius: 50, height: 30, width: 30, mr: 1, children: (0, jsx_runtime_1.jsx)(Thumbnail, { src: src, height: 30, width: 30 }) })), Icon && (0, jsx_runtime_1.jsx)(Icon, { fill: color, ml: -0.5, mr: 0.5 }), (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: color, style: { marginBottom: 2 }, children: children }), showCloseIcon && (0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { fill: color, ml: 0.5, width: 15, height: 15 })] }) }));
-};
-exports.Pill = Pill;
-const Container = (0, styled_components_1.default)(interactions_1.MotiPressable) `
-  align-items: center;
-  border: 1px solid ${(0, theme_get_1.default)("colors.black15")};
-  flex-direction: row;
-  justify-content: center;
-  text-align: center;
-  padding: 20px;
-
-  ${(props) => {
-    const states = PILL_VARIANTS[props.variant];
-    return (0, styled_components_1.css) `
-      ${states.default}
-      ${props.selected && states.selected}
-      ${props.disabled && states.disabled}
-    `;
-}}
-`;
-const Thumbnail = (0, styled_components_1.default)(Image_1.Image) `
-  background-color: ${(0, theme_get_1.default)("colors.black30")};
-`;
-const PILL_STATES = {
-    default: (0, styled_components_1.css) `
-    border-radius: 15px;
-    height: 30px;
-    padding: 0 ${(0, theme_get_1.default)("space.2")};
-  `,
-    selected: (0, styled_components_1.css) `
-    border-color: ${(0, theme_get_1.default)("colors.blue100")};
-    background-color: ${(0, theme_get_1.default)("colors.blue100")};
-  `,
-    disabled: (0, styled_components_1.css) `
-    background-color: ${(0, theme_get_1.default)("colors.black5")};
-    border-color: ${(0, theme_get_1.default)("colors.black5")};
-  `,
-};
-const PILL_VARIANTS = {
-    default: PILL_STATES,
-    onboarding: {
-        ...PILL_STATES,
-        default: (0, styled_components_1.css) `
-      ${PILL_STATES.default}
-      border-radius: 20px;
-      height: 40px;
-      border-color: ${(0, theme_get_1.default)("colors.black60")};
-    `,
-    },
-    dotted: {
-        ...PILL_STATES,
-        default: (0, styled_components_1.css) `
-      ${PILL_STATES.default}
-      border-style: dashed;
-    `,
-        selected: (0, styled_components_1.css) `
-      ${PILL_STATES.selected}
-      background-color: ${(0, theme_get_1.default)("colors.black10")};
-      border-color: ${(0, theme_get_1.default)("colors.black10")};
-    `,
-    },
-    search: {
-        ...PILL_STATES,
-        default: (0, styled_components_1.css) `
-      ${PILL_STATES.default}
-    `,
-    },
-    profile: {
-        default: (0, styled_components_1.css) `
-      background-color: ${(0, theme_get_1.default)("colors.black5")};
-      border-color: ${(0, theme_get_1.default)("colors.black5")};
-      border-radius: 25px;
-      height: 50px;
-      padding: 0 ${(0, theme_get_1.default)("space.1")}};
-    `,
-        selected: (0, styled_components_1.css) `
-      border-color: ${(0, theme_get_1.default)("colors.blue100")};
-    `,
-        disabled: (0, styled_components_1.css) ``,
-    },
-    badge: {
-        default: (0, styled_components_1.css) `
-      border-radius: 15px;
-      height: 30px;
-      padding: 0 15px;
-      background-color: ${(0, theme_get_1.default)("colors.blue10")};
-      border-color: ${(0, theme_get_1.default)("colors.blue10")};
-    `,
-        selected: (0, styled_components_1.css) `
-      background-color: ${(0, theme_get_1.default)("colors.blue150")};
-      border-color: ${(0, theme_get_1.default)("colors.blue150")};
-    `,
-        disabled: (0, styled_components_1.css) `
-      background-color: ${(0, theme_get_1.default)("colors.blue10")};
-      border-color: ${(0, theme_get_1.default)("colors.blue10")};
-    `,
-    },
-    filter: {
-        ...PILL_STATES,
-        default: (0, styled_components_1.css) `
-      height: 30px;
-      padding: 0 ${(0, theme_get_1.default)("space.1")};
-    `,
-        disabled: (0, styled_components_1.css) `
-      border-color: ${(0, theme_get_1.default)("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

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

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("@storybook/react-native");
-const react_1 = require("react");
-const Pill_1 = require("./Pill");
-const helpers_1 = require("../../storybook/helpers");
-const svgs_1 = require("../../svgs");
-const Flex_1 = require("../Flex");
-exports.default = {
-    title: "Pill",
-    component: Pill_1.Pill,
-};
-(0, react_native_1.storiesOf)("Pill", module)
-    .add("Variants", () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { contentContainerStyle: {
-        marginHorizontal: 20,
-        justifyContent: "flex-start",
-        alignItems: "flex-start",
-    }, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { children: "Default" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { disabled: true, ml: 1, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "filter", children: "Filter" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "filter", selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "filter", disabled: true, ml: 1, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { Icon: svgs_1.GraphIcon, variant: "badge", children: "Badge" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { Icon: svgs_1.GraphIcon, variant: "badge", selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { Icon: svgs_1.GraphIcon, variant: "badge", disabled: true, ml: 1, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "profile", children: "Profile" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "profile", selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "profile", disabled: true, ml: 1, children: "Disabled" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", children: "Unique" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", selected: true, ml: 1, children: "Painting" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", disabled: true, ml: 1, children: "Sculpture" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", children: "Search" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "search", disabled: true, ml: 1, children: "Search" })] })] })))
-    .add("Profile with image", () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20 }, children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "profile", src: src, children: "Artist" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "profile", src: src, selected: true, ml: 1, children: "Selected" }), (0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "profile", src: src, disabled: true, ml: 1, children: "Disabled" })] })))
-    .add("Controlled state", () => {
-    const [selected, setSelected] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsx)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20 }, children: (0, jsx_runtime_1.jsx)(Pill_1.Pill, { selected: selected, onPress: () => setSelected((prev) => !prev), children: "Pill" }) }));
-})
-    .add("Onboarding", () => {
-    return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { contentContainerStyle: { marginHorizontal: 20 }, children: [(0, jsx_runtime_1.jsx)(Pill_1.Pill, { variant: "onboarding", selected: true, children: "Yes, I love collecting art" }), (0, jsx_runtime_1.jsx)(Pill_1.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

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

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

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("@testing-library/react-native");
-const Pill_1 = require("./Pill");
-const Theme_1 = require("../../Theme");
-describe("Pill", () => {
-    it("invokes the onClick callback", () => {
-        const onPress = jest.fn();
-        const { getByText } = (0, react_native_1.render)((0, jsx_runtime_1.jsx)(Theme_1.Theme, { children: (0, jsx_runtime_1.jsx)(Pill_1.Pill, { onPress: onPress, children: "wow" }) }));
-        react_native_1.fireEvent.press(getByText("wow"));
-        expect(onPress).toHaveBeenCalled();
-    });
-    it("should not be pressable if disabled is passed", () => {
-        const onPress = jest.fn();
-        const { getByText } = (0, react_native_1.render)((0, jsx_runtime_1.jsx)(Theme_1.Theme, { children: (0, jsx_runtime_1.jsx)(Pill_1.Pill, { disabled: true, onPress: onPress, children: "Press me" }) }));
-        react_native_1.fireEvent.press(getByText("Press me"));
-        expect(onPress).not.toHaveBeenCalled();
-    });
-});

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

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

package/dist/elements/Pill/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Pill"), exports);

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

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

@@ -1,45 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PopIn = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const PopIn = ({ children, xOffset, yOffset, }) => {
-    const entranceProgress = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
-    (0, react_1.useEffect)(() => {
-        react_native_1.Animated.spring(entranceProgress, {
-            toValue: 1,
-            bounciness: 12,
-            speed: 28,
-            useNativeDriver: true,
-        }).start();
-    }, []);
-    return ((0, jsx_runtime_1.jsx)(react_native_1.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 }));
-};
-exports.PopIn = PopIn;

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

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

package/dist/elements/PopIn/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./PopIn"), exports);

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

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

@@ -1,49 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.POPOVER_VARIANTS = exports.Popover = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const palette_tokens_1 = require("@artsy/palette-tokens");
-const react_native_1 = require("react-native");
-const react_native_popover_view_1 = __importDefault(require("react-native-popover-view"));
-const react_native_reanimated_1 = require("react-native-reanimated");
-const styled_components_1 = __importDefault(require("styled-components"));
-const svgs_1 = require("../../svgs");
-const Flex_1 = require("../Flex");
-const Touchable_1 = require("../Touchable");
-const Popover = ({ variant = "dark", children, visible, onPressOutside, onDismiss, onCloseComplete, placement = "top", title, content, noCloseIcon, }) => {
-    const style = exports.POPOVER_VARIANTS[variant];
-    return ((0, jsx_runtime_1.jsx)(react_native_popover_view_1.default, { backgroundStyle: { opacity: 0.5, backgroundColor: palette_tokens_1.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: react_native_1.Platform.OS === "android" ? -(react_native_1.StatusBar.currentHeight ?? 0) : 0, onCloseComplete: onCloseComplete, onRequestClose: onPressOutside, placement: placement, arrowSize: { height: 11, width: 22 }, animationConfig: {
-            duration: 400,
-            easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.exp),
-        }, children: (0, jsx_runtime_1.jsxs)(Container, { variant: variant, p: 1, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [title ? title : (0, jsx_runtime_1.jsx)(Flex_1.Flex, {}), !noCloseIcon && ((0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { onPress: onDismiss, accessibilityRole: "button", "aria-label": "Dismiss popover", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ml: 0.5, children: (0, jsx_runtime_1.jsx)(svgs_1.CloseIcon, { width: 18, height: 18, fill: style.fill }) }) }))] }), content] }) }));
-};
-exports.Popover = Popover;
-const Container = (0, styled_components_1.default)(Flex_1.Flex) `
-  background-color: ${({ variant }) => exports.POPOVER_VARIANTS[variant].backgroundColor};
-`;
-const DROP_SHADOW = {
-    shadowColor: palette_tokens_1.THEME.colors.black100,
-    shadowOffset: {
-        width: 0,
-        height: 2,
-    },
-    shadowOpacity: 0.23,
-    shadowRadius: 2.62,
-    elevation: 4,
-};
-exports.POPOVER_VARIANTS = {
-    light: {
-        backgroundColor: palette_tokens_1.THEME.colors.white100,
-        fill: "black100",
-        shadow: DROP_SHADOW,
-    },
-    dark: {
-        backgroundColor: palette_tokens_1.THEME.colors.black100,
-        fill: "white100",
-    },
-};

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

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

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

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

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

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

package/dist/elements/Popover/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Popover"), exports);

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

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

@@ -1,56 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProgressBar = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
-const hooks_1 = require("../../utils/hooks");
-const useColor_1 = require("../../utils/hooks/useColor");
-const Flex_1 = require("../Flex");
-const clamp = (num, min, max) => Math.max(min, Math.min(num, max));
-const ProgressBar = ({ animationDuration = 200, backgroundColor = "black30", height = 2, onCompletion, progress: unclampedProgress, trackColor = "blue100", style, progressBarStyle, }) => {
-    const color = (0, useColor_1.useColor)();
-    const space = (0, hooks_1.useSpace)();
-    const width = (0, react_native_reanimated_1.useSharedValue)(0);
-    const progress = clamp(unclampedProgress, 0, 100);
-    const progressAnim = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
-        return { width: `${width.value}%` };
-    });
-    const [onCompletionCalled, setOnCompletionCalled] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        width.value = (0, react_native_reanimated_1.withTiming)(progress, { duration: animationDuration });
-        if (progress === 100 && !onCompletionCalled) {
-            onCompletion?.();
-            setOnCompletionCalled(true);
-        }
-    }, [progress]);
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { width: "10%", backgroundColor: backgroundColor, style: {
-            marginVertical: space(1),
-            width: "100%",
-            ...style,
-        }, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { testID: "progress-bar-track", style: [progressAnim, { height, backgroundColor: color(trackColor) }, progressBarStyle] }) }));
-};
-exports.ProgressBar = ProgressBar;

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

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

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

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("@storybook/react-native");
-const _1 = require("./");
-const Flex_1 = require("../Flex");
-const Text_1 = require("../Text");
-(0, react_native_1.storiesOf)("Progress Indicators", module).add("ProgressBar", () => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { p: 2, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "10%" }), (0, jsx_runtime_1.jsx)(_1.ProgressBar, { progress: 10 }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "20%" }), (0, jsx_runtime_1.jsx)(_1.ProgressBar, { progress: 20 }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "50%" }), (0, jsx_runtime_1.jsx)(_1.ProgressBar, { progress: 50 })] })));

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

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

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

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("@testing-library/react-native");
-const ProgressBar_1 = require("./ProgressBar");
-const renderWithWrappers_1 = require("../../utils/tests/renderWithWrappers");
-describe("ProgressBar", () => {
-    const getWrapper = (props) => {
-        return (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(ProgressBar_1.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 (0, react_native_1.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 (0, react_native_1.waitFor)(() => expect(track.props.style.width).toEqual("50%"));
-    });
-});

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

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

package/dist/elements/ProgressBar/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./ProgressBar"), exports);