@artsy/palette-mobile 13.2.34 → 13.2.35

package/dist/elements/LegacyScreen/LegacyScreen.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from "react";
+import { getChildByType, getChildrenByType, getChildrenByTypeDeep, removeChildrenByType, } from "react-nanny";
+import { Keyboard, ScrollView } from "react-native";
+import LinearGradient from "react-native-linear-gradient";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Wrap } from "../../utils/Wrap";
+import { ArtsyKeyboardAvoidingView } from "../ArtsyKeyboardAvoidingView";
+import { BackButton, BackButtonWithBackground } from "../BackButton";
+import { Flex } from "../Flex";
+import { Spacer } from "../Spacer";
+import { Text } from "../Text";
+import { Touchable } from "../Touchable";
+const ScreenContext = createContext(null);
+function useScreenContext() {
+    const context = useContext(ScreenContext);
+    if (!context) {
+        throw new Error("useScreenContext must be used within a Screen");
+    }
+    return context;
+}
+const ScreenWrapper = ({ children }) => {
+    const [options, setStateOptions] = useState({
+        handleTopSafeArea: true,
+        bottomViewHeight: 0,
+    });
+    return (_jsx(ScreenContext.Provider, { value: {
+            options,
+            setOptions: (opts) => setStateOptions((prevOpts) => ({ ...prevOpts, ...opts })),
+        }, children: _jsx(ScreenRoot, { children: children }) }));
+};
+const ScreenRoot = ({ children }) => {
+    const header = getChildByType(children, LegacyScreen.Header);
+    const headerFloating = getChildByType(children, LegacyScreen.FloatingHeader);
+    const background = getChildByType(children, LegacyScreen.Background);
+    const bodyChildren = getChildrenByTypeDeep(children, LegacyScreen.Body);
+    return (_jsxs(Flex, { flex: 1, backgroundColor: "white100", children: [background /* fullscreen */, header, bodyChildren, headerFloating /* floating, so keep close to the bottom */] }));
+};
+const useUpdateScreenContext = ({ header }) => {
+    const { setOptions } = useScreenContext();
+    useEffect(() => void setOptions({ handleTopSafeArea: header === "none" || header === "floating" }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [header]);
+};
+const NAVBAR_HEIGHT = 44;
+export const Header = ({ onBack, title, onSkip }) => {
+    useUpdateScreenContext({ header: "regular" });
+    const insets = useSafeAreaInsets();
+    return (_jsxs(Flex, { mt: `${insets.top}px`, height: NAVBAR_HEIGHT, flexDirection: "row", alignItems: "center", justifyContent: "space-between", px: SCREEN_HORIZONTAL_PADDING, children: [_jsx(Flex, { children: !!onBack && (_jsx(BackButton, { onPress: onBack, style: { flex: 1, justifyContent: "center" }, hitSlop: { left: 20, right: 20 } })) }), !!title && _jsx(Text, { children: title }), !!onSkip && (_jsx(Touchable, { haptic: "impactLight", onPress: onSkip, children: _jsx(Flex, { height: "100%", justifyContent: "center", children: _jsx(Text, { textAlign: "right", variant: "xs", children: "Skip" }) }) }))] }));
+};
+/**
+ * @deprecated Use `Screen.Header` instead.
+ */
+export const FloatingHeader = ({ onBack }) => {
+    useUpdateScreenContext({ header: "floating" });
+    const insets = useSafeAreaInsets();
+    if (onBack) {
+        return (_jsx(Flex, { position: "absolute", top: insets.top, left: 0, right: 0, height: NAVBAR_HEIGHT, px: 1, flexDirection: "row", alignItems: "center", children: _jsx(BackButtonWithBackground, { onPress: onBack }) }));
+    }
+    return null;
+};
+const SCREEN_HORIZONTAL_PADDING = 2;
+const Body = ({ scroll = false, noTopSafe = false, noBottomSafe = false, fullwidth = false, children, ...restFlexProps }) => {
+    const childrenExceptBottomView = removeChildrenByType(children, LegacyScreen.BottomView);
+    const bottomView = getChildrenByType(children, LegacyScreen.BottomView);
+    const { options } = useScreenContext();
+    const insets = useSafeAreaInsets();
+    const withTopSafeArea = options.handleTopSafeArea && !noTopSafe;
+    const withBottomSafeArea = !noBottomSafe;
+    return (_jsx(_Fragment, { children: _jsx(Flex, { flex: 1, mt: withTopSafeArea ? `${insets.top}px` : undefined, mb: withBottomSafeArea ? `${insets.bottom}px` : undefined, ...restFlexProps, children: _jsx(Wrap, { if: scroll, children: _jsxs(ArtsyKeyboardAvoidingView, { children: [_jsx(ScrollView, { keyboardShouldPersistTaps: "handled", contentInset: { bottom: options.bottomViewHeight - insets.bottom }, children: _jsx(Wrap.Content, { children: _jsx(Flex, { flex: 1, px: fullwidth ? undefined : SCREEN_HORIZONTAL_PADDING, children: childrenExceptBottomView }) }) }), bottomView] }) }) }) }));
+};
+const Background = ({ children }) => (_jsx(Flex, { position: "absolute", top: 0, bottom: 0, left: 0, right: 0, children: children }));
+const BottomView = ({ children }) => {
+    const { setOptions } = useScreenContext();
+    const insets = useSafeAreaInsets();
+    const [keyboardShowing, setKeyboardShowing] = useState(false);
+    const [keyboardHeight, setKeyboardHeight] = useState(0);
+    useEffect(() => {
+        const listeners = [];
+        listeners.push(Keyboard.addListener("keyboardWillShow", // ios only event
+        (e) => {
+            setKeyboardHeight(e.endCoordinates.height);
+            setKeyboardShowing(true);
+        }));
+        listeners.push(Keyboard.addListener("keyboardDidShow", // android event
+        (e) => {
+            setKeyboardHeight(e.endCoordinates.height);
+            setKeyboardShowing(true);
+        }));
+        listeners.push(Keyboard.addListener("keyboardWillHide", // ios only event
+        () => setKeyboardShowing(false)));
+        listeners.push(Keyboard.addListener("keyboardDidHide", // android event
+        () => setKeyboardShowing(false)));
+        return () => {
+            listeners.map((l) => l.remove());
+        };
+    }, []);
+    return (_jsxs(Flex, { position: "absolute", bottom: keyboardShowing ? keyboardHeight - insets.bottom : 0, left: 0, right: 0, onLayout: (evt) => void setOptions({ bottomViewHeight: evt.nativeEvent.layout.height }), children: [_jsx(LinearGradient, { colors: ["rgba(255,255,255,0)", "rgba(255,255,255,1)"], start: { x: 0, y: 0 }, end: { x: 0, y: 1 }, style: {
+                    width: "100%",
+                    height: 30,
+                }, pointerEvents: "none" }), _jsx(Flex, { px: SCREEN_HORIZONTAL_PADDING, py: keyboardShowing ? 1 : undefined, backgroundColor: "white100", children: children }), keyboardShowing ? null : _jsx(SafeBottomPadding, {})] }));
+};
+/**
+ * Only use with `<Screen.Body fullwidth>`.
+ * It's basically an easy way to get the right padding when you also need the fullwidth body.
+ * One use case might be if you need to put an image background or something in the body,
+ * but you also need some content with the right padding.
+ */
+const BodyXPadding = (props) => (_jsx(Flex, { px: SCREEN_HORIZONTAL_PADDING, ...props }));
+/**
+ * If there is a bottom safe area, this will render nothing.
+ * If there is no bottom safe area, this will render a small padding.
+ *
+ * This is useful for texts/buttons that are at the bottom, and with safe area they seem like they
+ * have enough space underneath, but with no safe area they look stuck at the bottom.
+ */
+const SafeBottomPadding = () => {
+    const insets = useSafeAreaInsets();
+    if (insets.bottom > 0) {
+        return null;
+    }
+    return _jsx(Spacer, { y: 2 });
+};
+export const LegacyScreen = Object.assign(ScreenWrapper, {
+    Body,
+    Header,
+    FloatingHeader,
+    Background,
+    BottomView,
+    BodyXPadding,
+    SafeBottomPadding,
+});

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

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

package/dist/elements/LegacyScreen/index.js

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

package/dist/elements/LegacyTabs/ContentTabs.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { TabsProps } from "../LegacyTabs";
+/**
+ * Renders a  scrollable list of tabs. Tabs are not evenly spaced across screen
+ */
+export declare const ContentTabs: ({ onTabPress, activeTab, tabs }: TabsProps) => JSX.Element;

package/dist/elements/LegacyTabs/ContentTabs.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { TabBarContainer } from "./TabBarContainer";
+import { Tab } from "../LegacyTabs";
+/**
+ * Renders a  scrollable list of tabs. Tabs are not evenly spaced across screen
+ */
+export const ContentTabs = ({ onTabPress, activeTab, tabs }) => {
+    const [tabLayouts, setTabLayouts] = useState(tabs.map(() => null));
+    return (_jsx(TabBarContainer, { scrollEnabled: true, activeTabIndex: activeTab, tabLayouts: tabLayouts, children: tabs.map(({ label }, index) => {
+            return (_jsx(Tab, { label: label, active: index === activeTab, onLayout: (e) => {
+                    const layout = e.nativeEvent.layout;
+                    setTabLayouts((layouts) => {
+                        const result = layouts.slice(0);
+                        result[index] = layout;
+                        return result;
+                    });
+                }, onPress: () => {
+                    onTabPress(label, index);
+                } }, index));
+        }) }));
+};

package/dist/elements/LegacyTabs/NavigationalTabs.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { TabsProps } from "../LegacyTabs";
+/**
+ * Renders a list of tabs. Evenly-spaces them across the screen with
+ * each tab label centered on the tab
+ */
+export declare const NavigationalTabs: ({ onTabPress, activeTab, tabs }: TabsProps) => JSX.Element;

package/dist/elements/LegacyTabs/NavigationalTabs.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { TabBarContainer } from "./TabBarContainer";
+import { useScreenDimensions } from "../../utils/hooks/useScreenDimensions";
+import { Box } from "../Box";
+import { Tab } from "../LegacyTabs";
+/**
+ * Renders a list of tabs. Evenly-spaces them across the screen with
+ * each tab label centered on the tab
+ */
+export const NavigationalTabs = ({ onTabPress, activeTab, tabs }) => {
+    const [tabLayouts, setTabLayouts] = useState(tabs.map(() => null));
+    const screenWidth = useScreenDimensions().width;
+    const tabWidth = screenWidth / tabs.length;
+    return (_jsx(TabBarContainer, { scrollEnabled: true, activeTabIndex: activeTab, tabLayouts: tabLayouts, children: tabs.map(({ label, superscript }, index) => {
+            return (_jsx(Box, { minWidth: tabWidth, children: _jsx(Tab, { label: label, superscript: superscript, onPress: () => onTabPress(label, index), active: activeTab === index, onLayout: (e) => {
+                        const layout = e.nativeEvent.layout;
+                        setTabLayouts((layouts) => {
+                            const result = layouts.slice(0);
+                            result[index] = layout;
+                            return result;
+                        });
+                    } }) }, label + index));
+        }) }));
+};

package/dist/elements/LegacyTabs/StepTabs.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { TabsProps } from "../LegacyTabs";
+/**
+ * Renders a list of tabs. Evenly-spaces them across the screen with
+ * each tab label and chevron evenly spaced
+ */
+export declare const StepTabs: React.FC<TabsProps>;

package/dist/elements/LegacyTabs/StepTabs.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { TouchableOpacity } from "react-native";
+import { TabBarContainer } from "./TabBarContainer";
+import { CheckIcon, ChevronIcon } from "../../svgs";
+import { useScreenDimensions } from "../../utils/hooks/useScreenDimensions";
+import { Box } from "../Box";
+import { Tab } from "../LegacyTabs";
+/**
+ * Renders a list of tabs. Evenly-spaces them across the screen with
+ * each tab label and chevron evenly spaced
+ */
+export const StepTabs = ({ onTabPress, activeTab, tabs }) => {
+    const [tabLayouts, setTabLayouts] = useState(tabs.map(() => null));
+    const tabWidth = useScreenDimensions().width / tabs.length;
+    const onTabSelect = (label, index) => {
+        if (index > 0 && !tabs[index - 1].completed) {
+            return;
+        }
+        onTabPress(label, index);
+    };
+    return (_jsx(TabBarContainer, { scrollEnabled: false, activeTabIndex: activeTab, tabLayouts: tabLayouts, children: tabs.map(({ label, completed }, index) => {
+            return (_jsx(TouchableOpacity, { onPress: () => onTabSelect(label, index), children: _jsxs(Box, { width: tabWidth, justifyContent: "space-between", flexDirection: "row", alignItems: "center", onLayout: (e) => {
+                        const layout = e.nativeEvent.layout;
+                        setTabLayouts((layouts) => {
+                            const result = layouts.slice(0);
+                            result[index] = layout;
+                            return result;
+                        });
+                    }, children: [_jsxs(Box, { flexDirection: "row", alignItems: "center", children: [_jsx(Tab, { label: label, onPress: () => onTabSelect(label, index), active: activeTab === index, style: { paddingHorizontal: 0, paddingLeft: 8, paddingRight: 5 }, onLayout: () => {
+                                        // noop
+                                    } }), !!completed && _jsx(CheckIcon, { fill: "green100", height: 15, width: 15 })] }), _jsx(ChevronIcon, { fill: "black60", height: 10, width: 10 })] }) }, label + index));
+        }) }));
+};

package/dist/elements/LegacyTabs/Tab.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ViewProps, ViewStyle } from "react-native";
+export interface TabV3Props {
+    label: string;
+    superscript?: string;
+    active: boolean;
+    style?: ViewStyle;
+    onPress: () => void;
+    onLayout: ViewProps["onLayout"];
+}
+export declare const TabV3: ({ label, superscript, active, onLayout, onPress, style }: TabV3Props) => JSX.Element;

package/dist/elements/LegacyTabs/Tab.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable, View } from "react-native";
+import { useColor } from "../../utils/hooks";
+import { Text } from "../Text";
+export const TabV3 = ({ label, superscript, active, onLayout, onPress, style }) => {
+    const color = useColor();
+    return (_jsx(Pressable, { onPress: onPress, children: ({ pressed }) => (_jsxs(View, { onLayout: onLayout, style: {
+                alignItems: "center",
+                justifyContent: "center",
+                paddingHorizontal: 15,
+                paddingVertical: 10,
+                flexDirection: "row",
+                ...style,
+            }, children: [_jsx(Text, { fontSize: 16, color: active ? color("black100") : pressed ? color("blue100") : color("black60"), style: {
+                        textDecorationLine: pressed ? "underline" : "none",
+                    }, children: label }), !!superscript && (_jsx(Text, { fontSize: 12, color: color("blue100"), style: {
+                        textDecorationLine: pressed ? "underline" : "none",
+                        top: -3,
+                    }, children: superscript }))] })) }));
+};

package/dist/elements/LegacyTabs/TabBarContainer.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { Animated, LayoutRectangle } from "react-native";
+export declare const TAB_BAR_HEIGHT = 48;
+export interface TabBarContainerProps {
+    children: React.ReactNode;
+    activeTabIndex: number;
+    scrollEnabled: boolean;
+    tabLayouts: Array<LayoutRectangle | null>;
+}
+/**
+ * Wraps the respective tabs. Based on StickyTabPageTabBar
+ * Usage: ```
+ * <TabBarContainer>{props.tabs.map((tab) => <Tab {...tab} />)}</TabContainer>
+ * ```
+ */
+export declare const TabBarContainer: ({ children, activeTabIndex, scrollEnabled, tabLayouts, }: TabBarContainerProps) => JSX.Element;
+export declare function spring(node: Animated.Value, toValue: number): Animated.CompositeAnimation;
+/**
+ * Underlines the Active Tab. Same implementation in StickyTabPageTabBar
+ */
+export declare const ActiveTabBorder: ({ tabLayouts, activeTabIndex, }: {
+    tabLayouts: LayoutRectangle[];
+    activeTabIndex: number;
+}) => JSX.Element;

package/dist/elements/LegacyTabs/TabBarContainer.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { compact } from "lodash";
+import { useEffect, useRef } from "react";
+import { Animated, ScrollView, View } from "react-native";
+import { useColor } from "../../utils/hooks";
+import { useScreenDimensions } from "../../utils/hooks/useScreenDimensions";
+import { Box } from "../Box";
+export const TAB_BAR_HEIGHT = 48;
+/**
+ * Wraps the respective tabs. Based on StickyTabPageTabBar
+ * Usage: ```
+ * <TabBarContainer>{props.tabs.map((tab) => <Tab {...tab} />)}</TabContainer>
+ * ```
+ */
+export const TabBarContainer = ({ children, activeTabIndex, scrollEnabled, tabLayouts, }) => {
+    const color = useColor();
+    const screen = useScreenDimensions();
+    const allTabLayoutsArePresent = tabLayouts.every((l) => l);
+    const scrollViewRef = useRef(null);
+    useEffect(() => {
+        if (allTabLayoutsArePresent) {
+            // attempt to center the active tab
+            let left = 0;
+            for (let i = 0; i < activeTabIndex; i++) {
+                left += tabLayouts[i].width;
+            }
+            const center = left + tabLayouts[activeTabIndex].width / 2;
+            const scrollLeft = center - screen.width / 2;
+            scrollViewRef.current?.scrollTo({ x: scrollLeft });
+        }
+    }, [activeTabIndex]);
+    return (_jsx(Box, { children: _jsxs(ScrollView, { scrollEnabled: scrollEnabled, ref: scrollViewRef, horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: { minWidth: "100%" }, children: [_jsx(View, { style: {
+                        position: "absolute",
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
+                        borderBottomWidth: 1,
+                        borderBottomColor: color("black30"),
+                    } }), _jsxs(View, { style: {
+                        flex: 1,
+                        minWidth: "100%",
+                        height: TAB_BAR_HEIGHT,
+                        flexDirection: "row",
+                    }, children: [children, !!allTabLayoutsArePresent && (_jsx(ActiveTabBorder, { tabLayouts: compact(tabLayouts), activeTabIndex: activeTabIndex }))] })] }) }));
+};
+export function spring(node, toValue) {
+    return Animated.spring(node, { toValue, useNativeDriver: true, bounciness: -7, speed: 13 });
+}
+/**
+ * Underlines the Active Tab. Same implementation in StickyTabPageTabBar
+ */
+export const ActiveTabBorder = ({ tabLayouts, activeTabIndex, }) => {
+    const color = useColor();
+    // We resize this border using the `scaleX` transform property rather than the `width` property, to avoid running
+    // animations on the JS thread, so we need to set an initial, pre-transform span for the border.
+    const preTransformSpan = 100;
+    const span = tabLayouts[activeTabIndex].width;
+    let left = 0;
+    for (let i = 0; i < activeTabIndex; i++) {
+        left += tabLayouts[i].width;
+    }
+    const translateX = useRef(new Animated.Value(left)).current;
+    const scaleX = useRef(new Animated.Value(span / preTransformSpan)).current;
+    useEffect(() => {
+        Animated.parallel([spring(translateX, left), spring(scaleX, span / preTransformSpan)]).start();
+    }, [left, span]);
+    const scaleXOffset = Animated.divide(Animated.subtract(preTransformSpan, Animated.multiply(scaleX, preTransformSpan)), 2);
+    return (_jsx(Animated.View, { style: {
+            height: 1,
+            width: preTransformSpan,
+            backgroundColor: color("black100"),
+            position: "absolute",
+            bottom: 0,
+            transform: [
+                {
+                    translateX: Animated.subtract(translateX, scaleXOffset),
+                },
+                {
+                    scaleX,
+                },
+            ],
+        } }));
+};

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { ContentTabs } from "./ContentTabs";
+import { NavigationalTabs } from "./NavigationalTabs";
+import { StepTabs } from "./StepTabs";
+import { TabV3Props } from "./Tab";
+export { NavigationalTabs, ContentTabs, StepTabs };
+export declare const Tab: ({ ...props }: TabV3Props) => JSX.Element;
+export declare const TAB_BAR_HEIGHT = 44;
+export type TabsType = Array<{
+    label: string;
+    superscript?: string;
+    completed?: boolean;
+}>;
+export interface TabsProps {
+    onTabPress: (tablabel: string, tabIndex: number) => void;
+    activeTab: number;
+    tabs: TabsType;
+}

package/dist/elements/LegacyTabs/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ContentTabs } from "./ContentTabs";
+import { NavigationalTabs } from "./NavigationalTabs";
+import { StepTabs } from "./StepTabs";
+import { TabV3 } from "./Tab";
+export { NavigationalTabs, ContentTabs, StepTabs };
+export const Tab = ({ ...props }) => {
+    return _jsx(TabV3, { ...props });
+};
+export const TAB_BAR_HEIGHT = 44;

package/dist/elements/List/BulletedItem.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { FlexProps } from "../Flex";
+interface BulletedItemProps extends FlexProps {
+    children: React.ReactNode;
+    color?: string;
+}
+export declare const BulletedItem: ({ children, color, ...otherFlexProps }: BulletedItemProps) => JSX.Element;
+export {};

package/dist/elements/List/BulletedItem.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { bullet } from "../../utils/text";
+import { Flex } from "../Flex";
+import { Spacer } from "../Spacer";
+import { Text } from "../Text";
+export const BulletedItem = ({ children, color = "black60", ...otherFlexProps }) => {
+    return (_jsxs(Flex, { flexDirection: "row", px: 1, ...otherFlexProps, children: [_jsx(Text, { variant: "sm", color: color, children: bullet }), _jsx(Spacer, { x: 1 }), _jsx(Text, { variant: "sm", color: color, children: children })] }));
+};

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

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

package/dist/elements/List/List.stories.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { storiesOf } from "@storybook/react-native";
+import { BulletedItem } from "./BulletedItem";
+import { List } from "../../storybook/helpers";
+import { Flex } from "../Flex";
+import { Spacer } from "../Spacer";
+import { Text } from "../Text";
+storiesOf("List", module).add("Bulleted Item", () => (_jsx(List, { children: _jsxs(Flex, { children: [_jsx(BulletedItem, { children: "Bulleted Item text" }), _jsx(BulletedItem, { children: "The good thing about Bulleted Item text is that the bullet is aligned separately from the rest of the text" }), _jsx(Spacer, { y: 2 }), _jsx(Text, { variant: "sm", mx: 1, color: "black60", children: "\u2022 Simple text acting as bulleted item" }), _jsx(Text, { variant: "sm", mx: 1, color: "black60", children: "\u2022 Simple text acting as bulleted item longer text with a bullet infront of it, just like that. and that ain't so pretty, riiiight?!" })] }) })));

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

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

package/dist/elements/List/index.js

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

package/dist/elements/MeasuredView/MeasuredView.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { ViewStyle } from "react-native";
+export interface ViewMeasurements {
+    width: number;
+    height: number;
+}
+interface Props {
+    children: React.ReactNode;
+    setMeasuredState: (measuredState: ViewMeasurements) => void;
+    /** for debugging, this will render the view where it is, not offscreen. */
+    show?: boolean;
+}
+/**
+ * A view that renders off-screen, measures the width and height of the view, and reports it back.
+ * Note: it is rendering just null when in test mode.
+ */
+export declare const MeasuredView: ({ children, setMeasuredState, show }: Props) => JSX.Element | null;
+export declare const useOffscreenStyle: (notOffscreen?: boolean) => ViewStyle;
+export {};

package/dist/elements/MeasuredView/MeasuredView.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useWindowDimensions } from "react-native";
+import { Box } from "../Box";
+/**
+ * A view that renders off-screen, measures the width and height of the view, and reports it back.
+ * Note: it is rendering just null when in test mode.
+ */
+export const MeasuredView = ({ children, setMeasuredState, show }) => {
+    const offscreenStyle = useOffscreenStyle(show);
+    const onLayout = useCallback((event) => {
+        setMeasuredState(event.nativeEvent.layout);
+    }, []);
+    if (__TEST__)
+        return null;
+    return (_jsx(Box, { style: offscreenStyle, backgroundColor: "pink", onLayout: onLayout, accessibilityElementsHidden: true, children: children }));
+};
+export const useOffscreenStyle = (notOffscreen) => {
+    const { width, height } = useWindowDimensions();
+    if (notOffscreen) {
+        return {};
+    }
+    return { position: "absolute", top: width + height, left: width + height };
+};

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

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

package/dist/elements/MeasuredView/index.js

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

package/dist/elements/MenuItem/MenuItem.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface MenuItemProps {
+    disabled?: boolean;
+    title: React.ReactNode;
+    value?: React.ReactNode;
+    text?: string;
+    onPress?: () => void;
+    chevron?: React.ReactNode;
+    rightView?: React.ReactNode;
+}
+export declare const MenuItem: ({ title, text, value, onPress, disabled, chevron, }: MenuItemProps) => JSX.Element;

package/dist/elements/MenuItem/MenuItem.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronIcon } from "../../svgs";
+import { useColor } from "../../utils/hooks";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+import { Touchable } from "../Touchable";
+export const MenuItem = ({ title, text, value, onPress, disabled = false, chevron = _jsx(ChevronIcon, { direction: "right", fill: "black60" }), }) => {
+    const color = useColor();
+    return (_jsx(Touchable, { onPress: onPress, underlayColor: color("black5"), disabled: disabled, children: _jsxs(Flex, { flexDirection: "row", alignItems: "center", justifyContent: "space-between", py: 2, px: 2, pr: "15px", children: [_jsx(Flex, { flexDirection: "row", mr: 2, children: _jsx(Text, { variant: "md", color: "onBackgroundHigh", children: title }) }), !!value && (_jsx(Flex, { flex: 1, children: _jsx(Text, { variant: "md", color: "black60", numberOfLines: 1, textAlign: "right", children: value }) })), !!(onPress && chevron) && _jsx(Flex, { ml: 1, children: chevron }), !!text && (_jsx(Text, { variant: "md", color: color("black60"), children: text }))] }) }));
+};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: ({ title, text, value, onPress, disabled, chevron, }: import("./MenuItem").MenuItemProps) => JSX.Element;
+};
+export default _default;
+export declare const Variations: () => JSX.Element;

package/dist/elements/MenuItem/MenuItem.stories.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { MenuItem } from "./MenuItem";
+export default {
+    title: "Menu Item",
+    component: MenuItem,
+};
+export const Variations = () => (_jsxs(_Fragment, { children: [_jsx(MenuItem, { title: "A title" }), _jsx(MenuItem, { title: "A title", value: "The value" })] }));

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

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

package/dist/elements/MenuItem/index.js

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

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { FlexProps } from "../Flex";
+import { TextProps } from "../Text";
+type MessageVariant = "default" | "info" | "success" | "alert" | "warning" | "error";
+export interface MessageProps {
+    bodyTextStyle?: TextProps;
+    containerStyle?: FlexProps;
+    IconComponent?: React.FC<any>;
+    iconPosition?: "left" | "right";
+    onClose?: () => void;
+    showCloseButton?: boolean;
+    testID?: string;
+    text?: string;
+    title?: string;
+    titleStyle?: TextProps;
+    variant?: MessageVariant;
+}
+export declare const Message: React.FC<MessageProps>;
+export {};