@artsy/palette-mobile 13.2.34 → 13.2.35

package/dist/elements/Radio/RadioButton.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { TextVariant } from "@artsy/palette-tokens/dist/typography/v3";
+import { Insets, TouchableWithoutFeedbackProps } from "react-native";
+import { FlexProps } from "../Flex";
+export interface RadioButtonProps extends Omit<TouchableWithoutFeedbackProps, "hitSlop">, Omit<FlexProps, "hitSlop"> {
+    hitSlop?: Insets;
+    selected?: boolean;
+    focused?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    text?: React.ReactElement | string;
+    textVariant?: TextVariant;
+    subtitle?: React.ReactElement | string;
+    accessibilityState?: {
+        checked: boolean;
+    };
+}
+export declare const RadioButton: React.FC<RadioButtonProps>;
+interface RadioDotProps {
+    size: number;
+}
+export declare const RadioDot: ({ size }: RadioDotProps) => JSX.Element;
+export declare const DisabledDot: import("styled-components").StyledComponent<({ size }: RadioDotProps) => JSX.Element, any, {}, never>;
+export {};

package/dist/elements/Radio/RadioButton.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { themeGet } from "@styled-system/theme-get";
+import { PixelRatio, StyleSheet, TouchableWithoutFeedback, View, } from "react-native";
+import styled from "styled-components/native";
+import { CssTransition } from "../../animation";
+import { useTheme } from "../../utils/hooks/useTheme";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+const RADIOBUTTON_SIZE = 20;
+const DURATION = 150;
+export const RadioButton = ({ selected, disabled, error, onPress, text, textVariant = "md", subtitle, accessibilityState, ...restProps }) => {
+    const { color, space } = useTheme();
+    const fontScale = PixelRatio.getFontScale();
+    const radioButtonSize = RADIOBUTTON_SIZE * fontScale;
+    const defaultRadioButtonStyle = {
+        backgroundColor: color("white100"),
+        borderColor: color("black60"),
+    };
+    const selectedRadioButtonStyle = {
+        backgroundColor: color("black100"),
+        borderColor: color("black100"),
+    };
+    const disabledRadioButtonStyle = {
+        backgroundColor: color("black5"),
+        borderColor: color("black10"),
+    };
+    const radioButtonStyles = {
+        default: {
+            notSelected: defaultRadioButtonStyle,
+            selected: selectedRadioButtonStyle,
+        },
+        error: {
+            notSelected: { backgroundColor: color("white100"), borderColor: color("red100") },
+            selected: selectedRadioButtonStyle,
+        },
+    };
+    const radioButtonStyle = disabled
+        ? disabledRadioButtonStyle
+        : radioButtonStyles[error ? "error" : "default"][selected ? "selected" : "notSelected"];
+    const textColor = error ? color("red100") : disabled ? color("black30") : color("black100");
+    const subtitleColor = error ? color("red100") : color("black30");
+    return (_jsx(TouchableWithoutFeedback, { accessibilityState: accessibilityState, onPress: (event) => {
+            if (disabled) {
+                return;
+            }
+            onPress?.(event);
+        }, children: _jsxs(Flex, { ...restProps, children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", children: [_jsx(Flex, { mt: "2px", children: _jsx(CssTransition, { style: [
+                                    styles(fontScale).container,
+                                    { marginRight: space(1) * fontScale },
+                                    radioButtonStyle,
+                                ], animate: ["borderColor"], duration: DURATION, children: !!selected &&
+                                    (!!disabled ? (_jsx(DisabledDot, { size: radioButtonSize })) : (_jsx(RadioDot, { size: radioButtonSize }))) }) }), _jsx(Flex, { justifyContent: "center", children: !!text && (_jsx(Text, { variant: textVariant, color: textColor, children: text })) })] }), _jsx(Flex, { ml: `${(RADIOBUTTON_SIZE + space(1)) * fontScale}px`, mt: "6px", children: !!subtitle && (_jsx(Text, { variant: "xs", color: subtitleColor, children: subtitle })) })] }) }));
+};
+// styled-component does not have support for Animated.View
+const styles = (fontScale) => StyleSheet.create({
+    container: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        borderWidth: 1,
+        borderStyle: "solid",
+        height: RADIOBUTTON_SIZE * fontScale,
+        width: RADIOBUTTON_SIZE * fontScale,
+        borderRadius: (RADIOBUTTON_SIZE * fontScale) / 2,
+    },
+});
+// This component represents the white ● mark in CSS. We are not using styled-system since it's easier to specify raw CSS
+// properties with styled-component.
+// Height, Width, and Border Radius calculations are used to maintain the size of the white dot when scaling
+export const RadioDot = ({ size }) => {
+    return (_jsx(View, { style: {
+            height: size * 0.625,
+            width: size * 0.625,
+            borderRadius: size * 0.3125,
+            backgroundColor: "white",
+        } }));
+};
+export const DisabledDot = styled(RadioDot) `
+  border-bottom-color: ${themeGet("colors.black30")};
+  border-left-color: ${themeGet("colors.black30")};
+`;

package/dist/elements/Radio/RadioButton.stories.d.ts

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

package/dist/elements/Radio/RadioButton.stories.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { storiesOf } from "@storybook/react-native";
+import { useState } from "react";
+import { RadioButton } from "./RadioButton";
+import { List } from "../../storybook/helpers";
+import { Flex } from "../Flex";
+export default {
+    title: "RadioButton",
+    component: RadioButton,
+};
+storiesOf("RadioButton", module).add("Default", () => {
+    const [metric, setMetric] = useState("cm");
+    return (_jsx(List, { contentContainerStyle: {
+            marginHorizontal: 20,
+            justifyContent: "flex-start",
+            alignItems: "flex-start",
+        }, children: _jsxs(Flex, { flexDirection: "row", gap: 20, children: [_jsx(RadioButton, { onPress: () => {
+                        setMetric("cm");
+                    }, selected: metric === "cm", text: "centimeters" }), _jsx(RadioButton, { onPress: () => {
+                        setMetric("in");
+                    }, selected: metric === "in", text: "inches" })] }) }));
+});

package/dist/elements/Radio/RadioDot.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { FlexProps } from "../Flex";
+type RadioDotMode = "default" | "disabled" | "error" | "hover";
+export declare const RADIO_DOT_MODES: Record<RadioDotMode, {
+    resting: FlexProps;
+    selected: FlexProps;
+}>;
+interface RadioDotProps {
+    disabled?: boolean;
+    error?: boolean;
+    hover?: boolean;
+    selected?: boolean;
+}
+export declare const RadioDot: (props: RadioDotProps) => JSX.Element;
+export {};

package/dist/elements/Radio/RadioDot.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex } from "../Flex";
+export const RADIO_DOT_MODES = {
+    default: {
+        resting: {
+            borderWidth: 2,
+            borderColor: "black10",
+        },
+        selected: {
+            borderWidth: 2,
+            borderColor: "black100",
+            backgroundColor: "black100",
+        },
+    },
+    disabled: {
+        resting: {
+            borderWidth: 2,
+            borderColor: "black10",
+            backgroundColor: "black10",
+        },
+        selected: {
+            borderWidth: 2,
+            borderColor: "black10",
+            backgroundColor: "black10",
+        },
+    },
+    error: {
+        resting: {
+            borderWidth: 2,
+            borderColor: "red100",
+        },
+        selected: {
+            borderWidth: 2,
+            borderColor: "black100",
+            backgroundColor: "black100",
+        },
+    },
+    hover: {
+        resting: {
+            borderWidth: 2,
+            borderColor: "black10",
+            backgroundColor: "black10",
+        },
+        selected: {
+            borderWidth: 2,
+            borderColor: "black100",
+            backgroundColor: "black100",
+        },
+    },
+};
+export const RadioDot = (props) => (_jsx(Container, { ...props, children: _jsx(Dot, { ...props }) }));
+const Container = ({ selected = false, hover = false, error = false, disabled = false, }) => {
+    const mode = (() => {
+        switch (true) {
+            case disabled:
+                return RADIO_DOT_MODES.disabled;
+            case hover:
+                return RADIO_DOT_MODES.hover;
+            case error:
+                return RADIO_DOT_MODES.error;
+            default:
+                return RADIO_DOT_MODES.default;
+        }
+    })();
+    const moreProps = selected ? mode.selected : mode.resting;
+    return (_jsx(Flex, { width: 20, height: 20, borderRadius: 50, alignItems: "center", justifyContent: "center", flexShrink: 0, ...moreProps }));
+};
+const Dot = ({ selected = false, disabled = false }) => (_jsx(Flex, { width: 10, height: 10, borderRadius: 50, alignItems: "center", justifyContent: "center", flexShrink: 0, backgroundColor: disabled && !selected ? "transparent" : "white100" }));

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

@@ -0,0 +1,2 @@
+export { RadioButton } from "./RadioButton";
+export { RadioDot } from "./RadioDot";

package/dist/elements/Radio/index.js

@@ -0,0 +1,2 @@
+export { RadioButton } from "./RadioButton";
+export { RadioDot } from "./RadioDot";

package/dist/elements/Screen/Background.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Background: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/elements/Screen/Background.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Flex } from "../Flex";
+export const Background = ({ children }) => (_jsx(Flex, { position: "absolute", top: 0, bottom: 0, left: 0, right: 0, children: children }));

package/dist/elements/Screen/Body.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { FlexProps } from "../Flex";
+export interface BodyProps extends FlexProps {
+    fullwidth?: boolean;
+    scroll?: boolean;
+    disableKeyboardAvoidance?: boolean;
+}
+export declare const Body: React.FC<BodyProps>;

package/dist/elements/Screen/Body.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { KeyboardAvoidingView, Platform, ScrollView } from "react-native";
+import { SCREEN_HORIZONTAL_PADDING } from "./constants";
+import { Flex } from "../Flex";
+export const Body = ({ children, fullwidth, scroll, disableKeyboardAvoidance = false, ...flexProps }) => {
+    const Wrapper = disableKeyboardAvoidance ? Fragment : KeyboardAvoidingView;
+    return (_jsx(Wrapper, { ...(disableKeyboardAvoidance
+            ? {}
+            : { style: { flex: 1 }, behavior: Platform.OS === "ios" ? "padding" : "height" }), children: _jsx(Flex, { flex: 1, ...flexProps, children: _jsx(Flex, { flex: 1, px: fullwidth ? undefined : SCREEN_HORIZONTAL_PADDING, children: scroll ? _jsx(ScrollView, { children: children }) : children }) }) }));
+};

package/dist/elements/Screen/BottomView.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface BottomViewProps {
+    children: React.ReactNode;
+    darkMode?: boolean;
+}
+export declare const BottomView: React.FC<BottomViewProps>;

package/dist/elements/Screen/BottomView.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import LinearGradient from "react-native-linear-gradient";
+import { SCREEN_HORIZONTAL_PADDING } from "./constants";
+import { useColor } from "../../utils/hooks/useColor";
+import { Flex } from "../Flex";
+export const BottomView = ({ children, darkMode }) => {
+    const color = useColor();
+    return (_jsxs(_Fragment, { children: [_jsx(LinearGradient, { colors: [darkMode ? "rgba(0,0,0,0)" : "rgba(255,255,255,0)", color("background")], start: { x: 0, y: 0 }, end: { x: 0, y: 1 }, style: {
+                    width: "100%",
+                    height: 20,
+                }, pointerEvents: "none" }), _jsx(Flex, { px: SCREEN_HORIZONTAL_PADDING, pt: 1, pb: 4, backgroundColor: "background", children: children })] }));
+};

package/dist/elements/Screen/FloatingHeader.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { FlexProps } from "../Flex";
+export interface FloatingHeaderProps extends FlexProps {
+    onBack?: () => void;
+    rightElements?: React.ReactNode;
+}
+export declare const FloatingHeader: React.FC<FloatingHeaderProps>;

package/dist/elements/Screen/FloatingHeader.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ZINDEX } from "./constants";
+import { BackButtonWithBackground } from "../BackButton";
+import { Flex } from "../Flex";
+import { Spacer } from "../Spacer";
+export const FloatingHeader = ({ onBack, rightElements, ...flexProps }) => {
+    const insets = useSafeAreaInsets();
+    return (_jsxs(Flex, { position: "absolute", pointerEvents: "box-none", top: insets.top, left: 0, right: 0, zIndex: ZINDEX.floatingHeader, px: 1, py: 1, flexDirection: "row", alignItems: "center", ...flexProps, children: [_jsx(BackButtonWithBackground, { onPress: onBack }), _jsx(Flex, { flex: 1 }), rightElements && (_jsxs(Flex, { flexDirection: "row", alignItems: "center", children: [_jsx(Spacer, { x: 1 }), rightElements] }))] }));
+};

package/dist/elements/Screen/FullWidthDivider.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { FlexProps } from "../Flex";
+export declare const FullWidthDivider: React.FC<FlexProps>;

package/dist/elements/Screen/FullWidthDivider.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Screen } from "../Screen";
+import { Separator } from "../Separator";
+export const FullWidthDivider = (flexProps) => {
+    return (_jsx(Screen.FullWidthItem, { children: _jsx(Separator, { my: 2, ...flexProps }) }));
+};

package/dist/elements/Screen/FullWidthItem.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { FlexProps } from "../Flex";
+export declare const FullWidthItem: React.FC<FlexProps>;

package/dist/elements/Screen/FullWidthItem.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SCREEN_HORIZONTAL_PADDING } from "./constants";
+import { Flex } from "../Flex";
+export const FullWidthItem = (props) => {
+    return _jsx(Flex, { ...props, mx: -SCREEN_HORIZONTAL_PADDING });
+};

package/dist/elements/Screen/Header.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { FlexProps } from "../Flex";
+export interface HeaderProps {
+    animated?: boolean;
+    hideLeftElements?: boolean;
+    hideRightElements?: boolean;
+    hideTitle?: boolean;
+    leftElements?: React.ReactNode;
+    onBack?: () => void;
+    rightElements?: React.ReactNode;
+    scrollY?: number;
+    scrollYOffset?: number;
+    title?: string | JSX.Element;
+    titleProps?: FlexProps;
+    titleShown?: boolean;
+}
+export declare const AnimatedHeader: React.FC<HeaderProps>;
+export declare const Header: React.FC<HeaderProps>;

package/dist/elements/Screen/Header.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { MotiView } from "moti";
+import Animated, { Easing, FadeIn, FadeOut } from "react-native-reanimated";
+import { useScreenScrollContext } from "./ScreenScrollContext";
+import { NAVBAR_HEIGHT, ZINDEX } from "./constants";
+import { DEFAULT_HIT_SLOP } from "../../constants";
+import { ArrowLeftIcon } from "../../svgs/ArrowLeftIcon";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+import { Touchable } from "../Touchable";
+export const AnimatedHeader = (props) => {
+    return _jsx(Header, { animated: true, ...props });
+};
+export const Header = ({ animated = false, hideLeftElements, hideRightElements, hideTitle, leftElements, onBack, rightElements, title, titleProps = {}, }) => {
+    return (_jsxs(Flex, { height: NAVBAR_HEIGHT, flexDirection: "row", px: 2, zIndex: ZINDEX.header, backgroundColor: "background", alignItems: "center", children: [_jsx(Flex, { flex: 1, children: _jsx(Left, { leftElements: leftElements, onBack: onBack, hideLeftElements: hideLeftElements }) }), _jsx(Flex, { ...titleProps, children: _jsx(Center, { animated: animated, title: title, hideTitle: hideTitle }) }), _jsx(Flex, { flex: 1, alignItems: "flex-end", children: _jsx(Right, { rightElements: rightElements, hideRightElements: hideRightElements }) })] }));
+};
+const Right = ({ hideRightElements, rightElements }) => {
+    return _jsx(_Fragment, { children: !hideRightElements && rightElements });
+};
+const Center = ({ animated, hideTitle, title }) => {
+    const { scrollYOffset = 0, currentScrollY = 0 } = useScreenScrollContext();
+    if (hideTitle) {
+        return null;
+    }
+    const titleTextElement = (_jsx(Text, { variant: "sm-display", numberOfLines: 1, children: title }));
+    if (!animated) {
+        return titleTextElement;
+    }
+    // Show / hide the title to avoid rerenders, which retrigger the animation
+    const display = currentScrollY < NAVBAR_HEIGHT + scrollYOffset ? "none" : "flex";
+    return (_jsx(Animated.View, { entering: FadeIn.duration(400).easing(Easing.out(Easing.exp)), exiting: FadeOut.duration(400).easing(Easing.out(Easing.exp)), style: {
+            display,
+        }, children: _jsx(MotiView, { animate: {
+                opacity: display === "flex" ? 1 : 0,
+            }, children: titleTextElement }) }));
+};
+const Left = ({ hideLeftElements, leftElements, onBack }) => {
+    if (hideLeftElements)
+        return null;
+    return (_jsx(_Fragment, { children: leftElements || (_jsx(Touchable, { onPress: onBack, underlayColor: "transparent", hitSlop: DEFAULT_HIT_SLOP, children: _jsx(ArrowLeftIcon, { fill: "onBackgroundHigh" }) })) }));
+};

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

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

package/dist/elements/Screen/Screen.stories.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { storiesOf } from "@storybook/react-native";
+import { Flex } from "../Flex";
+import { Screen } from "../Screen";
+import { Text } from "../Text";
+storiesOf("Screen", module)
+    .add("With Header and BottomView", () => (_jsxs(Screen, { children: [_jsx(Screen.Header, { title: "Title" }), _jsx(Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) }), _jsx(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "black30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] })))
+    .add("With Header and Right Element", () => (_jsxs(Screen, { children: [_jsx(Screen.Header, { title: "Title", rightElements: _jsx(Text, { variant: "xs", children: "Very long right element" }) }), _jsx(Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) })] })))
+    .add("With Header, Without Left Element and Right Element", () => (_jsxs(Screen, { children: [_jsx(Screen.Header, { title: "Title", hideLeftElements: true, rightElements: _jsx(Text, { variant: "xs", children: "Very long right element" }) }), _jsx(Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) })] })))
+    .add("With Right Element & Custom Left Element", () => (_jsxs(Screen, { children: [_jsx(Screen.Header, { title: "Title", leftElements: _jsx(Text, { variant: "xs", children: "Very long left element" }), rightElements: _jsx(Text, { variant: "xs", children: "right element" }) }), _jsx(Screen.Body, { scroll: true, children: Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i))) }), _jsx(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "black30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] })))
+    .add("ScrollView With AnimatedHeader", () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title" }), _jsx(Screen.Body, { children: _jsxs(Screen.ScrollView, { children: [_jsx(Text, { variant: "lg-display", children: "Title" }), Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i)))] }) }), _jsx(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "black30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] })))
+    .add("ScrollView With AnimatedHeader and Right Element", () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title", rightElements: _jsx(Text, { children: "Right" }) }), _jsx(Screen.Body, { children: _jsxs(Screen.ScrollView, { children: [_jsx(Text, { variant: "lg-display", children: "Title" }), Array.from({ length: 5 }).map((_, i) => (_jsx(Text, { my: 1, children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }, i)))] }) }), _jsx(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "black30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] })))
+    .add("FlatList With AnimatedHeader", () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title" }), _jsx(Screen.Body, { children: _jsx(Screen.FlatList, { ListHeaderComponent: () => _jsx(Text, { variant: "lg-display", children: "Title" }), data: Array.from({ length: 50 }).map((_, i) => "Item " + i), renderItem: ({ item, index }) => {
+                    return (_jsx(Text, { my: 1, children: item }, index));
+                } }) }), _jsx(Screen.BottomView, { children: _jsx(Flex, { backgroundColor: "black30", height: 100, width: "100%", children: _jsx(Text, { children: "Footer" }) }) })] })))
+    .add("FlatList With AnimatedHeader and StickySubHeader", () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title" }), _jsx(Screen.StickySubHeader, { title: "Title", children: _jsx(Flex, { width: "100%", height: 60, backgroundColor: "red10" }) }), _jsx(Screen.Body, { children: _jsx(Screen.FlatList, { data: Array.from({ length: 50 }).map((_, i) => "Item " + i), renderItem: ({ item, index }) => {
+                    return (_jsx(Text, { my: 1, children: item }, index));
+                } }) })] })))
+    .add("Fullwidth", () => (_jsxs(Screen, { children: [_jsx(Screen.Header, { title: "Title" }), _jsx(Screen.Body, { fullwidth: true, children: _jsx(Text, { children: "\"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\"" }) })] })));

package/dist/elements/Screen/ScreenBase.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { FlexProps } from "../Flex";
+export interface ScreenBaseProps extends FlexProps {
+    children: React.ReactNode;
+    safeArea?: boolean;
+}
+export declare const ScreenBase: React.FC<ScreenBaseProps>;

package/dist/elements/Screen/ScreenBase.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ScreenScrollContextProvider } from "./ScreenScrollContext";
+import { Flex } from "../Flex";
+export const ScreenBase = ({ children, safeArea = true, ...flexProps }) => {
+    const insets = useSafeAreaInsets();
+    return (_jsx(ScreenScrollContextProvider, { children: _jsxs(Flex, { flex: 1, backgroundColor: "background", mt: safeArea ? insets.top : 0, ...flexProps, children: [children, _jsx(SafeAreaCover, { safeArea: true })] }) }));
+};
+const SafeAreaCover = ({ safeArea }) => {
+    const insets = useSafeAreaInsets();
+    return (_jsx(Flex, { position: "absolute", left: 0, right: 0, top: safeArea ? -insets.top : 0, height: insets.top, backgroundColor: "background" }));
+};

package/dist/elements/Screen/ScreenFlatList.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { FlatList, FlatListProps } from "react-native";
+export type ScreenFlatListProps<T> = FlatListProps<T> & {
+    innerRef?: React.ForwardedRef<FlatList<T>>;
+};
+export declare function ScreenFlatList<T>(props: ScreenFlatListProps<T>): JSX.Element;

package/dist/elements/Screen/ScreenFlatList.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { flowRight } from "lodash";
+import Animated from "react-native-reanimated";
+import { useListenForScreenScroll } from "./hooks/useListenForScreenScroll";
+export function ScreenFlatList(props) {
+    const { scrollHandler } = useListenForScreenScroll();
+    let handleScroll;
+    if (props.onScroll) {
+        handleScroll = flowRight(scrollHandler, props.onScroll);
+    }
+    else {
+        handleScroll = scrollHandler;
+    }
+    return _jsx(Animated.FlatList, { ref: props.innerRef, ...props, onScroll: handleScroll });
+}

package/dist/elements/Screen/ScreenScrollContext.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export interface ScreenScrollContextProps {
+    currentScrollY: number;
+    updateCurrentScrollY: (scrollY: number) => void;
+    scrollYOffset?: number;
+    updateScrollYOffset: (offset: number) => void;
+}
+export declare const ScreenScrollContextProvider: React.FC<React.PropsWithChildren<{}>>;
+export declare const useScreenScrollContext: () => ScreenScrollContextProps;

package/dist/elements/Screen/ScreenScrollContext.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, createContext, useState } from "react";
+const ScreenScrollContext = createContext({
+    currentScrollY: 0,
+    updateCurrentScrollY: () => { },
+    scrollYOffset: undefined,
+    updateScrollYOffset: () => { },
+});
+export const ScreenScrollContextProvider = ({ children, }) => {
+    const [currentScrollY, setCurrentScrollY] = useState(0);
+    const [scrollYOffset, setScrollYOffset] = useState(undefined);
+    const providerValue = {
+        currentScrollY,
+        scrollYOffset,
+        updateCurrentScrollY: (scrollY) => {
+            setCurrentScrollY(scrollY);
+        },
+        updateScrollYOffset: (yOffset) => {
+            setScrollYOffset(yOffset);
+        },
+    };
+    return (_jsx(ScreenScrollContext.Provider, { value: providerValue, children: children }));
+};
+export const useScreenScrollContext = () => {
+    const context = useContext(ScreenScrollContext);
+    if (!context) {
+        throw new Error("useScreenScrollContext must be used within a Screen.ScreenScrollContextProvider component");
+    }
+    return context;
+};

package/dist/elements/Screen/ScreenScrollView.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ScrollViewProps } from "react-native";
+export declare const ScreenScrollView: React.FC<ScrollViewProps>;

package/dist/elements/Screen/ScreenScrollView.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { flowRight } from "lodash";
+import Animated from "react-native-reanimated";
+import { useListenForScreenScroll } from "./hooks/useListenForScreenScroll";
+export const ScreenScrollView = (props) => {
+    const { scrollHandler } = useListenForScreenScroll();
+    let handleScroll;
+    if (props.onScroll) {
+        handleScroll = flowRight(scrollHandler, props.onScroll);
+    }
+    else {
+        handleScroll = scrollHandler;
+    }
+    return _jsx(Animated.ScrollView, { ...props, onScroll: handleScroll, scrollEventThrottle: 16 });
+};

package/dist/elements/Screen/StickySubHeader.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface StickySubHeaderProps extends React.PropsWithChildren<{}> {
+    title: string;
+    separatorComponent?: React.ReactNode;
+    subTitle?: string;
+}
+export declare const StickySubHeader: React.FC<StickySubHeaderProps>;

package/dist/elements/Screen/StickySubHeader.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Animated, { useAnimatedStyle, useDerivedValue, withTiming } from "react-native-reanimated";
+import { useScreenScrollContext } from "./ScreenScrollContext";
+import { NAVBAR_HEIGHT } from "./constants";
+import { useSpace } from "../../utils/hooks";
+import { Flex } from "../Flex";
+import { Separator } from "../Separator";
+import { Text } from "../Text";
+const STICKY_BAR_HEIGHT = 42;
+const DEFAULT_SEPARATOR_COMPONENT = _jsx(Separator, { borderColor: "black5" });
+export const StickySubHeader = ({ title, separatorComponent = DEFAULT_SEPARATOR_COMPONENT, subTitle, children, }) => {
+    const { currentScrollY, scrollYOffset = 0 } = useScreenScrollContext();
+    const space = useSpace();
+    const [stickyBarHeight, setStickyHeaderHeight] = useState(null);
+    const visible = useDerivedValue(() => {
+        if (stickyBarHeight === null) {
+            return true;
+        }
+        return currentScrollY < NAVBAR_HEIGHT + scrollYOffset;
+    }, [currentScrollY, scrollYOffset, stickyBarHeight]);
+    const handleLayout = (event) => {
+        setStickyHeaderHeight(event.nativeEvent.layout.height);
+    };
+    // The styles are kept in a variable to make sure they're always in sync with the hidden text component
+    const sharedStyles = {
+        paddingHorizontal: space(2),
+    };
+    const animatedStyles = useAnimatedStyle(() => {
+        return {
+            height: withTiming(visible.value ? stickyBarHeight || STICKY_BAR_HEIGHT : 0, {
+                duration: 100,
+            }),
+            transform: [
+                {
+                    translateY: withTiming(visible.value ? 0 : -(stickyBarHeight || STICKY_BAR_HEIGHT), {
+                        duration: 100,
+                    }),
+                },
+            ],
+        };
+    });
+    return (_jsxs(Flex, { children: [stickyBarHeight === null && (_jsx(Flex, { onLayout: (event) => handleLayout(event), position: "absolute", backgroundColor: "white100", zIndex: -1000, style: sharedStyles, children: _jsxs(Flex, { mb: 1, children: [_jsx(Text, { variant: "lg-display", color: "white100", children: title }), !!subTitle && (_jsx(Text, { variant: "xs", mt: 0.5, color: "white100", children: subTitle }))] }) })), _jsx(Animated.View, { style: [sharedStyles, animatedStyles], children: _jsxs(Flex, { style: { height: stickyBarHeight }, mb: 1, children: [_jsx(Text, { variant: "lg-display", children: title }), subTitle && (_jsx(Text, { variant: "xs", mt: 0.5, children: subTitle }))] }) }), children, children !== undefined && separatorComponent] }));
+};

package/dist/elements/Screen/constants.d.ts

@@ -0,0 +1,12 @@
+import { SpacingUnitDSValueNumber } from "../../types";
+export declare const LARGE_TITLE_HEIGHT = 64;
+export declare const NAVBAR_HEIGHT = 50;
+export declare const SCREEN_HORIZONTAL_PADDING: SpacingUnitDSValueNumber;
+export declare const SCREEN_TRANSITION_TIME = 400;
+export declare const ZINDEX: {
+    artworkContent: number;
+    bottomSheetModalView: number;
+    floatingHeader: number;
+    header: number;
+    selectMode: number;
+};

package/dist/elements/Screen/constants.js

@@ -0,0 +1,11 @@
+export const LARGE_TITLE_HEIGHT = 64;
+export const NAVBAR_HEIGHT = 50;
+export const SCREEN_HORIZONTAL_PADDING = 2;
+export const SCREEN_TRANSITION_TIME = 400;
+export const ZINDEX = {
+    artworkContent: 10,
+    bottomSheetModalView: 1,
+    floatingHeader: 2,
+    header: 1,
+    selectMode: 1,
+};

package/dist/elements/Screen/hooks/useAnimatedHeaderScrolling.d.ts

@@ -0,0 +1,2 @@
+import { SharedValue } from "react-native-reanimated";
+export declare const useAnimatedHeaderScrolling: (scrollY: SharedValue<number>, scrollYOffset?: number) => number;