@artsy/palette-mobile 13.2.34 → 13.2.35

package/dist/elements/ToolTip/ToolTip.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { noop } from "lodash";
+import { createContext, useContext, useRef, useState } from "react";
+import { View } from "react-native";
+import { ToolTipFlyout, ToolTipTextContainer } from "./ToolTipFlyout";
+import { TriangleDown } from "../../svgs/TriangleDown";
+import { useScreenDimensions } from "../../utils/hooks/useScreenDimensions";
+import { useTheme } from "../../utils/hooks/useTheme";
+export const ToolTipContext = createContext({
+    dismissToolTip: () => noop,
+    setToolTip: () => noop,
+});
+/**
+ * A ToolTip Component
+ * @example
+ * <ToolTip initialToolTipText="A tool tip text">
+ *   <View />
+ * </ToolTip>
+ *
+ * @example
+ * <ToolTip initialToolTipText="A tool tip text">
+ *   <ToolTipContext.Consumer>
+ *     {({ setToolTip, dismissToolTip }) => (
+ *       <Component
+ *         changeToolTipText={setToolTip}
+ *         hideToolTip={dismissToolTip}
+ *       />
+ *     )}
+ *   </ToolTipContext.Consumer>
+ * </ToolTip>
+ *
+ */
+export const ToolTip = ({ children, enabled = true, flowDirection, initialToolTipText, maxWidth, onPress, position = "TOP", tapToDismiss = false, testID, xOffset = 0, yOffset = 5, }) => {
+    const { space } = useTheme();
+    const mWidth = useScreenDimensions().width - space(2) * 2; // 40 accounting for padding 20 on each side of the screen
+    const MAX_TOOLTIP_WIDTH = maxWidth ?? mWidth;
+    const [toolTipText, setToolTip] = useState(initialToolTipText);
+    const [childrenDimensions, setChildrenDimensions] = useState({ height: 0, width: 0, x: 0 });
+    const [singleTextDimension, setSingleTextDimension] = useState({ height: 0, width: 0 });
+    const dismissToolTip = () => setToolTip(undefined);
+    const [pageX, setPageX] = useState(0);
+    const childrenRef = useRef(null);
+    const totalTextWidth = singleTextDimension.width * (toolTipText?.length ?? 0);
+    const finalToolTipWidth = Math.min(totalTextWidth, MAX_TOOLTIP_WIDTH);
+    const numOfLines = getNumberOfLines(finalToolTipWidth, totalTextWidth);
+    const finalToolTipHeight = numOfLines * singleTextDimension.height;
+    const triangleXDisplacement = childrenDimensions.x + childrenDimensions.width / 2;
+    // Calculate the direction of flow of the tooltip. So a tooltip near the right edge of the screen
+    // should flow to the left so it remains in the viewport, and vice-versa. Without this, tooltip
+    // around the edges can flow off screen
+    const nearLeftEdge = pageX < mWidth / 4 || flowDirection === "RIGHT";
+    const nearRightEdge = pageX > mWidth - mWidth / 4 || flowDirection === "LEFT";
+    const extraStyle = nearLeftEdge ? { left: 0 } : nearRightEdge ? { right: 0 } : undefined;
+    return (_jsxs(ToolTipContext.Provider, { value: {
+            dismissToolTip,
+            setToolTip,
+        }, children: [!!enabled && position === "TOP" && (_jsxs(_Fragment, { children: [_jsx(ToolTipFlyout, { containerStyle: {
+                            bottom: childrenDimensions.height + yOffset,
+                            left: xOffset,
+                            ...extraStyle,
+                        }, tapToDismiss: tapToDismiss, height: finalToolTipHeight, width: finalToolTipWidth, onClose: dismissToolTip, onToolTipPress: onPress, position: position, testID: testID, text: toolTipText }), !!enabled && position === "TOP" && !!toolTipText && (_jsx(TriangleDown, { style: {
+                            left: triangleXDisplacement + xOffset,
+                            position: "absolute",
+                            bottom: childrenDimensions.height + yOffset - 5, // where 5 is the triangle icon size
+                        } }))] })), _jsx(View, { ref: childrenRef, onLayout: (event) => {
+                    setChildrenDimensions({
+                        height: event.nativeEvent.layout.height,
+                        width: event.nativeEvent.layout.width,
+                        x: event.nativeEvent.layout.x,
+                    });
+                    childrenRef.current?.measure((_fx, _fy, _width, _height, px, _py) => {
+                        setPageX(px);
+                    });
+                }, children: children }), !!enabled && position === "BOTTOM" && (_jsxs(_Fragment, { children: [_jsx(ToolTipFlyout, { containerStyle: {
+                            top: childrenDimensions.height + yOffset,
+                            ...extraStyle,
+                        }, tapToDismiss: tapToDismiss, height: finalToolTipHeight, width: finalToolTipWidth, onClose: dismissToolTip, onToolTipPress: onPress, position: position, testID: testID, text: toolTipText }), !!enabled && position === "BOTTOM" && !!toolTipText && (_jsx(TriangleDown, { style: {
+                            transform: [{ rotate: "180deg" }],
+                            left: triangleXDisplacement + xOffset,
+                            position: "absolute",
+                            top: childrenDimensions.height + yOffset - 5, // where 5 is the triangle icon size,
+                        } }))] })), !!enabled && !!toolTipText && (_jsx(View, { style: { position: "absolute", opacity: 0 }, onLayout: ({ nativeEvent }) => {
+                    setSingleTextDimension({
+                        height: nativeEvent.layout.height,
+                        width: nativeEvent.layout.width,
+                    });
+                }, children: _jsx(ToolTipTextContainer, { text: "x" }) }))] }));
+};
+export const useToolTipContext = () => {
+    const context = useContext(ToolTipContext);
+    if (!context) {
+        throw new Error("Attempted to use useToolTipContext outside of ToolTip Provider. Please wrap your component with <ToolTip>");
+    }
+    return context;
+};
+/** Given a maximum width and a total width, how many of the maximum widths can we get from the total width?
+ * The answer gotten will let us know how many lines of text the tool tip text will need.
+ *  Note: We add one for whatever spill over remains i.e text that does not fill an entire line.
+ */
+const getNumberOfLines = (maxWidth, totalWidth, numLines = 0) => {
+    if (maxWidth >= totalWidth) {
+        return numLines + 1;
+    }
+    const remainder = totalWidth - maxWidth;
+    if (remainder > -1) {
+        numLines = numLines += 1;
+    }
+    return getNumberOfLines(maxWidth, remainder, numLines);
+};

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

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

package/dist/elements/ToolTip/ToolTip.stories.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { storiesOf } from "@storybook/react-native";
+import { ToolTip, ToolTipContext } from "./ToolTip";
+import { Button } from "../Button";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+storiesOf("ToolTip", module)
+    .add("Simple ToolTip", () => (_jsx(Flex, { alignSelf: "center", mt: "200px", alignItems: "center", flexWrap: "wrap", children: _jsx(ToolTip, { initialToolTipText: "Tap to dismiss me", position: "TOP", tapToDismiss: true, children: _jsx(Text, { weight: "medium", children: "I am a Text" }) }) })))
+    .add("Bottom ToolTip", () => (_jsx(Flex, { alignSelf: "center", mt: "200px", flexWrap: "wrap", children: _jsx(ToolTip, { initialToolTipText: "Bottom tooltip", position: "BOTTOM", tapToDismiss: true, children: _jsx(Text, { weight: "medium", children: "I am a Text" }) }) })))
+    .add("Change ToolTip", () => (_jsx(Flex, { alignSelf: "center", mt: "200px", children: _jsx(ToolTip, { initialToolTipText: "I can be changed", position: "TOP", tapToDismiss: true, children: _jsx(ToolTipContext.Consumer, { children: ({ setToolTip }) => {
+                return (_jsx(Button, { size: "small", onPress: () => setToolTip("I'm the new tooltip"), children: "Press To Change ToolTip" }));
+            } }) }) })));

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

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

package/dist/elements/ToolTip/ToolTip.tests.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ToolTip } from "./ToolTip";
+import { ScreenDimensionsProvider } from "../../utils/hooks";
+import { renderWithWrappers } from "../../utils/tests/renderWithWrappers";
+import { Text } from "../Text";
+describe("ToolTip", () => {
+    it("shows the flyout when enabled", () => {
+        const { queryByTestId } = renderWithWrappers(_jsx(ScreenDimensionsProvider, { children: _jsx(ToolTip, { enabled: true, testID: "flyout", initialToolTipText: "Words", children: _jsx(Text, { children: "Text" }) }) }));
+        expect(queryByTestId("flyout")).not.toBeNull();
+    });
+    it("Does not show the flyout when disabled", () => {
+        const { queryByTestId } = renderWithWrappers(_jsx(ScreenDimensionsProvider, { children: _jsx(ToolTip, { enabled: false, testID: "flyout", initialToolTipText: "Words", children: _jsx(Text, { children: "Text" }) }) }));
+        expect(queryByTestId("flyout")).toBeNull();
+    });
+});

package/dist/elements/ToolTip/ToolTipFlyout.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { ViewStyle } from "react-native";
+interface Props {
+    containerStyle?: ViewStyle;
+    tapToDismiss?: boolean;
+    height: number;
+    width: number;
+    onToolTipPress?: () => void;
+    onClose: () => void;
+    position?: "TOP" | "BOTTOM";
+    testID?: string;
+    text?: string;
+}
+export declare const ToolTipFlyout: React.FC<Props>;
+/** Please be careful with applying any styling here. This forms the basis with which we measure
+ * in advance by how large we can inflate a tooltip.
+ */
+export declare const ToolTipTextContainer: React.FC<{
+    text?: string;
+}>;
+export {};

package/dist/elements/ToolTip/ToolTipFlyout.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { TouchableWithoutFeedback } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { useColor } from "../../utils/hooks/useColor";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+export const ToolTipFlyout = ({ containerStyle, tapToDismiss, height, width, onClose, onToolTipPress, testID, text, }) => {
+    const initialBoxDimensions = { height: 0, width: 0 };
+    const boxDimensions = useSharedValue(initialBoxDimensions);
+    const animationStyle = useAnimatedStyle(() => {
+        return {
+            height: withTiming(boxDimensions.value.height, {
+                duration: 500,
+            }),
+            width: withTiming(boxDimensions.value.width, {
+                duration: 500,
+            }),
+        };
+    });
+    useEffect(() => {
+        if (text) {
+            boxDimensions.value = {
+                height,
+                width,
+            };
+        }
+        else {
+            boxDimensions.value = initialBoxDimensions;
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [text, height, width]);
+    const color = useColor();
+    const handleClose = () => {
+        onClose();
+    };
+    const onPress = () => {
+        onToolTipPress?.();
+        if (tapToDismiss) {
+            handleClose();
+        }
+    };
+    return (_jsx(TouchableWithoutFeedback, { onPress: onPress, testID: testID, children: _jsx(Animated.View, { style: [
+                {
+                    backgroundColor: color("black100"),
+                    position: "absolute",
+                    alignSelf: "center",
+                    zIndex: 1000,
+                },
+                containerStyle,
+                animationStyle,
+            ], children: _jsx(Flex, { justifyContent: "center", alignItems: "center", bg: "black100", children: _jsx(ToolTipTextContainer, { text: text }) }) }) }));
+};
+/** Please be careful with applying any styling here. This forms the basis with which we measure
+ * in advance by how large we can inflate a tooltip.
+ */
+export const ToolTipTextContainer = ({ text }) => {
+    const color = useColor();
+    return (_jsx(Text, { variant: "xs", color: color("white100"), pb: 0.5, children: text }));
+};

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

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

package/dist/elements/ToolTip/index.js

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

package/dist/elements/Touchable/Touchable.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { TouchableHighlightProps } from "react-native";
+import { HapticFeedbackTypes } from "react-native-haptic-feedback";
+import { Color } from "../../types";
+interface ExtraTouchableProps {
+    flex?: number;
+    haptic?: HapticFeedbackTypes | true;
+    noFeedback?: boolean;
+    underlayColor?: Color;
+}
+export type TouchableProps = TouchableHighlightProps & ExtraTouchableProps;
+/**
+ * `haptic` can be used like:
+ * <Touchable haptic />
+ * or
+ * <Touchable haptic="impactHeavy" />
+ */
+export declare const Touchable: React.FC<TouchableProps>;
+export {};

package/dist/elements/Touchable/Touchable.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { TouchableHighlight, TouchableWithoutFeedback, } from "react-native";
+import Haptic from "react-native-haptic-feedback";
+import { DEFAULT_ACTIVE_OPACITY } from "../../constants";
+import { useColor } from "../../utils/hooks/useColor";
+import { Flex } from "../Flex";
+/**
+ * `haptic` can be used like:
+ * <Touchable haptic />
+ * or
+ * <Touchable haptic="impactHeavy" />
+ */
+export const Touchable = ({ children, flex, haptic, noFeedback, onPress, underlayColor, ...props }) => {
+    const color = useColor();
+    const inner = React.Children.count(children) === 1 ? children : _jsx(Flex, { flex: flex, children: children });
+    const onPressWrapped = (evt) => {
+        if (onPress === undefined) {
+            return;
+        }
+        if (haptic !== undefined) {
+            Haptic.trigger(haptic === true ? "impactLight" : haptic);
+        }
+        onPress(evt);
+    };
+    return noFeedback ? (_jsx(TouchableWithoutFeedback, { ...props, onPress: onPressWrapped, children: inner })) : (_jsx(TouchableHighlight, { underlayColor: underlayColor ?? "transparent", activeOpacity: DEFAULT_ACTIVE_OPACITY, ...props, onPress: onPressWrapped, children: inner }));
+};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("./Touchable").TouchableProps>;
+};
+export default _default;
+export declare const Examples: () => JSX.Element;

package/dist/elements/Touchable/Touchable.stories.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Touchable } from "./Touchable";
+import { List } from "../../storybook/helpers";
+import { TrashIcon } from "../../svgs";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+export default {
+    title: "Touchable",
+    component: Touchable,
+};
+export const Examples = () => (_jsxs(List, { children: [_jsx(Touchable, { children: _jsx(Text, { children: "This is a text wrapped in a `Touchable`." }) }), _jsx(Touchable, { children: _jsxs(Flex, { width: 200, alignItems: "center", borderColor: "red", borderWidth: 1, children: [_jsx(TrashIcon, {}), _jsx(Text, { children: "This is a cell with an icon and a text, wrapped in a `Touchable`." })] }) })] }));

package/dist/elements/Touchable/TouchableHighlightColor.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { TouchableProps } from "./Touchable";
+import { Color } from "../../types";
+interface TouchableHighlightState {
+    color: Color;
+    highlighted: boolean;
+}
+interface TouchableHighlightColorProps extends TouchableProps {
+    activeColor?: Color;
+    normalColor?: Color;
+    render: (state: TouchableHighlightState) => React.ReactNode;
+}
+export declare const TouchableHighlightColor: (props: TouchableHighlightColorProps) => JSX.Element;
+export {};

package/dist/elements/Touchable/TouchableHighlightColor.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Touchable } from "./Touchable";
+export const TouchableHighlightColor = (props) => {
+    const { activeOpacity = 1, activeColor = "blue100", normalColor = "black100", onPressIn, onPressOut, render, ...restProps } = props;
+    const [highlighted, setHighlighted] = useState(false);
+    const color = highlighted ? activeColor : normalColor;
+    return (_jsx(Touchable, { noFeedback: true, activeOpacity: activeOpacity, onPressIn: (event) => {
+            setHighlighted(true);
+            onPressIn?.(event);
+        }, onPressOut: (event) => {
+            setHighlighted(false);
+            onPressOut?.(event);
+        }, ...restProps, children: render({ color, highlighted }) }));
+};

package/dist/elements/Touchable/TouchableWithScale.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { TouchableWithoutFeedbackProps } from "react-native";
+export interface TouchableWithScaleProps extends TouchableWithoutFeedbackProps {
+    defaultScale?: number;
+    activeScale?: number;
+}
+export declare const TouchableWithScale: ({ defaultScale, activeScale, onPressIn, onPressOut, style, children, ...restProps }: TouchableWithScaleProps) => JSX.Element;

package/dist/elements/Touchable/TouchableWithScale.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Animated, TouchableWithoutFeedback, } from "react-native";
+const ANIMATION_DEFAULTS = {
+    stiffness: 600,
+    damping: 120,
+    useNativeDriver: true,
+};
+const NOOP = () => { };
+export const TouchableWithScale = ({ defaultScale = 1, activeScale = 0.95, onPressIn = NOOP, onPressOut = NOOP, style, children, ...restProps }) => {
+    const scaleAnimation = new Animated.Value(defaultScale);
+    const handlePressIn = (event) => {
+        Animated.spring(scaleAnimation, { ...ANIMATION_DEFAULTS, toValue: activeScale }).start();
+        onPressIn(event);
+    };
+    const handlePressOut = (event) => {
+        Animated.spring(scaleAnimation, { ...ANIMATION_DEFAULTS, toValue: defaultScale }).start();
+        onPressOut(event);
+    };
+    return (_jsx(TouchableWithoutFeedback, { onPressIn: handlePressIn, onPressOut: handlePressOut, ...restProps, children: _jsx(Animated.View, { style: [style, { transform: [{ scale: scaleAnimation }] }], children: children }) }));
+};

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

@@ -0,0 +1,3 @@
+export * from "./Touchable";
+export * from "./TouchableWithScale";
+export * from "./TouchableHighlightColor";

package/dist/elements/Touchable/index.js

@@ -0,0 +1,3 @@
+export * from "./Touchable";
+export * from "./TouchableWithScale";
+export * from "./TouchableHighlightColor";

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

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

package/dist/elements/VisualClue/VisualClue.stories.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { storiesOf } from "@storybook/react-native";
+import { VisualClueDot, VisualClueText } from "./";
+import { List } from "../../storybook/helpers";
+import { Text } from "../Text";
+storiesOf("Theme/Text", module).add("Visual Clue", () => (_jsxs(List, { children: [_jsx(VisualClueDot, {}), _jsxs(_Fragment, { children: [_jsx(Text, { children: "A Feature" }), _jsx(VisualClueText, { style: { top: 14, right: -24 } })] })] })));

package/dist/elements/VisualClue/VisualClueDot.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { StyleProp, ViewStyle } from "react-native";
+interface VisualClueDotProps {
+    diameter?: number;
+    style?: StyleProp<ViewStyle>;
+}
+export declare const VisualClueDot: React.FC<VisualClueDotProps>;
+export {};

package/dist/elements/VisualClue/VisualClueDot.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useColor } from "../../utils/hooks/useColor";
+import { Flex } from "../Flex";
+const DOT_DIAMETER = 6;
+export const VisualClueDot = ({ diameter = DOT_DIAMETER, style }) => {
+    const color = useColor();
+    return (_jsx(Flex, { style: {
+            height: diameter,
+            minWidth: diameter,
+            borderRadius: diameter / 2,
+            backgroundColor: color("blue100"),
+            ...style,
+        } }));
+};

package/dist/elements/VisualClue/VisualClueText.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { StyleProp, ViewStyle } from "react-native";
+export declare const VisualClueText: React.FC<{
+    style?: StyleProp<ViewStyle>;
+}>;

package/dist/elements/VisualClue/VisualClueText.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useColor } from "../../utils/hooks/useColor";
+import { Flex } from "../Flex";
+import { PopIn } from "../PopIn";
+import { Text } from "../Text";
+const WRAPPER_WIDTH = 56;
+const WRAPPER_HEIGHT = 46;
+export const VisualClueText = ({ style = {} }) => {
+    const colors = useColor();
+    return (_jsx(Flex, { width: 0, overflow: "visible", children: _jsx(Flex, { width: 55, justifyContent: "center", children: _jsx(Flex, { style: {
+                    width: WRAPPER_WIDTH,
+                    height: WRAPPER_HEIGHT,
+                    ...style,
+                    position: "absolute",
+                }, children: _jsx(PopIn, { children: _jsx(Text, { style: { fontSize: 12, color: colors("blue100") }, children: "New" }) }) }) }) }));
+};

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

@@ -0,0 +1,2 @@
+export * from "./VisualClueText";
+export * from "./VisualClueDot";

package/dist/elements/VisualClue/index.js

@@ -0,0 +1,2 @@
+export * from "./VisualClueText";
+export * from "./VisualClueDot";

package/dist/elements/index.d.ts

@@ -0,0 +1,45 @@
+export * from "./ArtsyKeyboardAvoidingView";
+export * from "./Autocomplete";
+export * from "./Avatar";
+export * from "./BackButton";
+export * from "./Banner";
+export * from "./BorderBox";
+export * from "./Box";
+export * from "./Button";
+export * from "./Checkbox";
+export * from "./ClassTheme";
+export * from "./Collapse";
+export * from "./CollapsibleMenuItem";
+export * from "./Dialog";
+export * from "./EntityHeader";
+export * from "./Flex";
+export * from "./Header";
+export * from "./Histogram";
+export * from "./Image";
+export * from "./Input";
+export * from "./Join";
+export * from "./LazyFlatlist";
+export * from "./LegacyScreen";
+export * from "./LegacyTabs";
+export * from "./List";
+export * from "./MeasuredView";
+export * from "./MenuItem";
+export * from "./Message";
+export * from "./Pill";
+export * from "./PopIn";
+export * from "./Popover";
+export * from "./ProgressBar";
+export * from "./Radio";
+export * from "./Screen";
+export * from "./SearchInput";
+export * from "./Separator";
+export * from "./SimpleMessage";
+export * from "./Skeleton";
+export * from "./Spacer";
+export * from "./Spinner";
+export * from "./Switch";
+export * from "./Tabs";
+export * from "./Text";
+export * from "./ToolTip";
+export * from "./Touchable";
+export * from "./VisualClue";

package/dist/elements/index.js

@@ -0,0 +1,45 @@
+export * from "./ArtsyKeyboardAvoidingView";
+export * from "./Autocomplete";
+export * from "./Avatar";
+export * from "./BackButton";
+export * from "./Banner";
+export * from "./BorderBox";
+export * from "./Box";
+export * from "./Button";
+export * from "./Checkbox";
+export * from "./ClassTheme";
+export * from "./Collapse";
+export * from "./CollapsibleMenuItem";
+export * from "./Dialog";
+export * from "./EntityHeader";
+export * from "./Flex";
+export * from "./Header";
+export * from "./Histogram";
+export * from "./Image";
+export * from "./Input";
+export * from "./Join";
+export * from "./LazyFlatlist";
+export * from "./LegacyScreen";
+export * from "./LegacyTabs";
+export * from "./List";
+export * from "./MeasuredView";
+export * from "./MenuItem";
+export * from "./Message";
+export * from "./Pill";
+export * from "./PopIn";
+export * from "./Popover";
+export * from "./ProgressBar";
+export * from "./Radio";
+export * from "./Screen";
+export * from "./SearchInput";
+export * from "./Separator";
+export * from "./SimpleMessage";
+export * from "./Skeleton";
+export * from "./Spacer";
+export * from "./Spinner";
+export * from "./Switch";
+export * from "./Tabs";
+export * from "./Text";
+export * from "./ToolTip";
+export * from "./Touchable";
+export * from "./VisualClue";

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./animation";
+export * from "./constants";
+export * from "./elements";
+export * from "./utils/hooks";
+export * from "./utils/text";
+export * from "./svgs";
+export * from "./svgs/Icon";
+export * from "./Theme";
+export * from "./tokens";
+export * from "./types";

package/dist/index.js

@@ -0,0 +1,10 @@
+export * from "./animation";
+export * from "./constants";
+export * from "./elements";
+export * from "./utils/hooks";
+export * from "./utils/text";
+export * from "./svgs";
+export * from "./svgs/Icon";
+export * from "./Theme";
+export * from "./tokens";
+export * from "./types";

package/dist/setupJest.d.ts

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

package/dist/setupJest.js

@@ -0,0 +1,10 @@
+// @ts-expect-error
+global.__TEST__ = true;
+// @ts-expect-error
+import mockSafeAreaContext from "react-native-safe-area-context/jest/mock";
+jest.mock("react-native-safe-area-context", () => mockSafeAreaContext);
+jest.mock("react-native/Libraries/Animated/NativeAnimatedHelper");
+require("react-native-reanimated/src/reanimated2/jestUtils").setUpTests();
+// @ts-expect-error
+global.__reanimatedWorkletInit = () => { };
+jest.mock("react-native-reanimated", () => require("react-native-reanimated/mock"));

package/dist/storybook/decorators.d.ts

@@ -0,0 +1,4 @@
+import { DecoratorFunction } from "@storybook/addons";
+import { ReactNode } from "react";
+export declare const withTheme: DecoratorFunction<ReactNode>;
+export declare const useDarkModeSwitcher: DecoratorFunction<ReactNode>;

package/dist/storybook/decorators.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { useAtom } from "jotai";
+import { atomWithStorage, createJSONStorage } from "jotai/utils";
+import { useEffect, useState } from "react";
+import { Appearance } from "react-native";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { Theme } from "../Theme";
+import { Flex } from "../elements/Flex";
+import { LinkText, Text } from "../elements/Text";
+import { ScreenDimensionsProvider } from "../utils/hooks";
+export const withTheme = (story) => (_jsxs(Theme, { theme: "v3light", children: [_jsx(Text, { color: "red", children: "aaww" }), story()] }));
+const atomStorage = createJSONStorage(() => AsyncStorage);
+const atomWithAsyncStorage = (key, initialValue) => atomWithStorage(key, initialValue, {
+    ...atomStorage,
+    delayInit: true,
+});
+const modeAtom = atomWithAsyncStorage("dark-mode-mode", "system");
+export const useDarkModeSwitcher = (story) => {
+    const [mode, setMode] = useAtom(modeAtom);
+    const [systemMode, setSystemMode] = useState(Appearance.getColorScheme() ?? "light");
+    useEffect(() => {
+        const subscription = Appearance.addChangeListener(({ colorScheme }) => void setSystemMode(colorScheme ?? "light"));
+        return () => subscription.remove();
+    }, []);
+    const isDarkMode = mode === "dark" || (mode === "system" && systemMode === "dark");
+    const theme = isDarkMode ? "v3dark" : "v3light";
+    return (_jsx(ScreenDimensionsProvider, { children: _jsx(SafeAreaProvider, { children: _jsx(Theme, { theme: theme, children: _jsxs(Flex, { flex: 1, backgroundColor: "background", children: [_jsxs(Flex, { flexDirection: "row", justifyContent: "space-around", children: [_jsxs(Text, { color: "orange", children: ["Dark mode: ", mode, " ", mode === "system" && "(" + systemMode + ")"] }), _jsx(LinkText, { color: "orange", onPress: () => setMode("light"), children: "light" }), _jsx(LinkText, { color: "orange", onPress: () => setMode("dark"), children: "dark" }), _jsx(LinkText, { color: "orange", onPress: () => setMode("system"), children: "system" })] }), story()] }) }) }) }));
+};

package/dist/storybook/helpers.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { StyleProp, ViewStyle } from "react-native";
+export declare const DataList: <ItemT>({ data, keyExtractor, renderItem, contentContainerStyle, }: {
+    data: ItemT[];
+    keyExtractor?: ((item: ItemT, index: number) => string) | undefined;
+    renderItem: (info: {
+        item: ItemT;
+        index: number;
+    }) => React.ReactElement | null;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+}) => JSX.Element;
+export declare const List: ({ children, contentContainerStyle, style, horizontal, }: {
+    children: React.ReactElement[] | React.ReactElement;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    style?: StyleProp<ViewStyle>;
+    horizontal?: boolean | undefined;
+}) => JSX.Element;
+export declare const Row: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;