@artsy/palette-mobile 13.2.34 → 13.2.35

package/dist/elements/Tabs/SubTabBar.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MotiView } from "moti";
+import { useCurrentTabScrollY, useHeaderMeasurements } from "react-native-collapsible-tab-view";
+import { useAnimatedStyle } from "react-native-reanimated";
+import { useSpace } from "../../utils/hooks/useSpace";
+/**
+ * Use to position content directly below the tab bar, and for it to stick while
+ * scrolling in the subview.
+ *
+ * Useful for views where subcontent has a s
+ */
+export const SubTabBar = ({ children }) => {
+    const { top } = useHeaderMeasurements();
+    const scrollY = useCurrentTabScrollY();
+    const space = useSpace();
+    const style = useAnimatedStyle(() => {
+        return {
+            transform: [
+                {
+                    translateY: scrollY.value + top.value,
+                },
+            ],
+        };
+    }, []);
+    return _jsx(MotiView, { style: [style, { zIndex: 1, marginHorizontal: -space(2) }], children: children });
+};

package/dist/elements/Tabs/TabFlashList.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { FlashListProps } from "@shopify/flash-list";
+export declare function TabFlashList<T>(props: FlashListProps<T>): JSX.Element;

package/dist/elements/Tabs/TabFlashList.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs } from "react-native-collapsible-tab-view";
+import { useListenForTabContentScroll } from "./hooks/useListenForTabContentScroll";
+import { useSpace } from "../../utils/hooks/useSpace";
+export function TabFlashList(props) {
+    useListenForTabContentScroll();
+    const space = useSpace();
+    const contentContainerStyle = (props.contentContainerStyle ?? {});
+    return (_jsx(Tabs.FlashList, { contentContainerStyle: {
+            paddingHorizontal: space(2),
+            ...contentContainerStyle,
+        }, ...props }));
+}

package/dist/elements/Tabs/TabFlatList.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { FlatListProps } from "react-native";
+export declare function TabFlatList<T>(props: FlatListProps<T>): JSX.Element;

package/dist/elements/Tabs/TabFlatList.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs } from "react-native-collapsible-tab-view";
+import { useListenForTabContentScroll } from "./hooks/useListenForTabContentScroll";
+import { useSpace } from "../../utils/hooks/useSpace";
+export function TabFlatList(props) {
+    useListenForTabContentScroll();
+    const space = useSpace();
+    const contentContainerStyle = (props.contentContainerStyle ?? {});
+    return (_jsx(Tabs.FlatList, { contentContainerStyle: {
+            marginHorizontal: space(2),
+            ...contentContainerStyle,
+        }, ...props }));
+}

package/dist/elements/Tabs/TabMasonry.d.ts

@@ -0,0 +1,5 @@
+import { MasonryFlashListProps, MasonryFlashListRef } from "@shopify/flash-list";
+import { RefObject } from "react";
+export declare function TabMasonry<T>(props: MasonryFlashListProps<T> & {
+    innerRef?: RefObject<MasonryFlashListRef<T>> | null;
+}): JSX.Element;

package/dist/elements/Tabs/TabMasonry.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs } from "react-native-collapsible-tab-view";
+import { useListenForTabContentScroll } from "./hooks/useListenForTabContentScroll";
+import { useSpace } from "../../utils/hooks/useSpace";
+export function TabMasonry(props) {
+    useListenForTabContentScroll();
+    const space = useSpace();
+    const contentContainerStyle = (props.contentContainerStyle ?? {});
+    return (_jsx(Tabs.MasonryFlashList, { contentContainerStyle: {
+            paddingHorizontal: space(2),
+            ...contentContainerStyle,
+        }, ...props, ref: props.innerRef }));
+}

package/dist/elements/Tabs/TabScrollView.d.ts

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

package/dist/elements/Tabs/TabScrollView.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs } from "react-native-collapsible-tab-view";
+import { useListenForTabContentScroll } from "./hooks/useListenForTabContentScroll";
+import { useSpace } from "../../utils/hooks/useSpace";
+export const TabScrollView = (props) => {
+    useListenForTabContentScroll();
+    const space = useSpace();
+    const contentContainerStyle = (props.contentContainerStyle ?? {});
+    return (_jsx(Tabs.ScrollView
+    // See: https://github.com/PedroBern/react-native-collapsible-tab-view/issues/158
+    // @ts-ignore
+    , { 
+        // See: https://github.com/PedroBern/react-native-collapsible-tab-view/issues/158
+        // @ts-ignore
+        accessibilityComponentType: undefined, accessibilityTraits: undefined, contentContainerStyle: {
+            marginHorizontal: space(2),
+            ...contentContainerStyle,
+        }, ...props }));
+};

package/dist/elements/Tabs/Tabs.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { useAnimatedTabIndex, useCurrentTabScrollY, useFocusedTab, useHeaderMeasurements } from "react-native-collapsible-tab-view";
+import { TabFlashList } from "./TabFlashList";
+import { TabFlatList } from "./TabFlatList";
+import { TabMasonry } from "./TabMasonry";
+export declare const Tabs: import("react").FC<import("./TabsContainer").TabsContainerProps> & {
+    FlatList: typeof TabFlatList;
+    FlashList: typeof TabFlashList;
+    Masonry: typeof TabMasonry;
+    Lazy: import("react").FC<{
+        cancelLazyFadeIn?: boolean | undefined;
+        mountDelayMs?: number | undefined;
+        startMounted?: boolean | undefined;
+        children: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    }>;
+    ScrollView: import("react").FC<import("react-native/types").ScrollViewProps>;
+    SectionList: <T_1>(p: import("react-native/types").SectionListProps<T_1, import("react-native/types").DefaultSectionT> & {
+        ref?: import("react").Ref<import("react-native/types").SectionList<T_1, import("react-native/types").DefaultSectionT>> | undefined;
+    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    SubTabBar: import("react").FC<{
+        children?: import("react").ReactNode;
+    }>;
+    Tab: typeof import("react-native-collapsible-tab-view").Tab;
+    TabsWithHeader: import("react").FC<import("./TabsWithHeader").TabsWithHeaderProps>;
+    useAnimatedTabIndex: typeof useAnimatedTabIndex;
+    useCurrentTabScrollY: typeof useCurrentTabScrollY;
+    useListenForTabContentScroll: () => void;
+    useFocusedTab: typeof useFocusedTab;
+    useHeaderMeasurements: typeof useHeaderMeasurements;
+};

package/dist/elements/Tabs/Tabs.js

@@ -0,0 +1,26 @@
+import { Tabs as BaseTabs, useAnimatedTabIndex, useCurrentTabScrollY, useFocusedTab, useHeaderMeasurements, } from "react-native-collapsible-tab-view";
+import { SubTabBar } from "./SubTabBar";
+import { TabFlashList } from "./TabFlashList";
+import { TabFlatList } from "./TabFlatList";
+import { TabMasonry } from "./TabMasonry";
+import { TabScrollView } from "./TabScrollView";
+import { TabsContainer } from "./TabsContainer";
+import { TabsWithHeader } from "./TabsWithHeader";
+import { useListenForTabContentScroll } from "./hooks/useListenForTabContentScroll";
+export const Tabs = Object.assign(TabsContainer, {
+    FlatList: TabFlatList,
+    FlashList: TabFlashList,
+    Masonry: TabMasonry,
+    Lazy: BaseTabs.Lazy,
+    ScrollView: TabScrollView,
+    SectionList: BaseTabs.SectionList,
+    SubTabBar,
+    Tab: BaseTabs.Tab,
+    TabsWithHeader,
+    // Hooks
+    useAnimatedTabIndex,
+    useCurrentTabScrollY,
+    useListenForTabContentScroll,
+    useFocusedTab,
+    useHeaderMeasurements,
+});

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

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

package/dist/elements/Tabs/Tabs.stories.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { storiesOf } from "@storybook/react-native";
+import { Tabs } from "./Tabs";
+import { Flex } from "../Flex";
+import { Screen } from "../Screen";
+import { Text } from "../Text";
+storiesOf("Tabs", module)
+    .add("Simple Tabs", () => (_jsxs(Tabs, { children: [_jsx(Tabs.Tab, { name: "Tab 1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Tab 1 content" }) }) }), _jsx(Tabs.Tab, { name: "Tab 2", label: "Tab 2", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Tab 2 content" }) }) })] })))
+    .add("Tabs with Indicator", () => (_jsxs(Tabs, { indicators: [{ tabName: "tab1", Component: () => _jsx(Text, { textAlign: "right", children: "hi" }) }], children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Tab 1 content" }) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Tab 2 content" }) }) })] })))
+    .add("Tabs with AnimatedHeader", () => (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: "Title" }), _jsx(Screen.Body, { fullwidth: true, children: _jsxs(Tabs, { children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { 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(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Tabs.ScrollView, { 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("Tabs with header", () => (_jsxs(Tabs.TabsWithHeader, { title: "Artist Header", showLargeHeaderText: false, BelowTitleHeaderComponent: () => (_jsxs(Flex, { pointerEvents: "none", p: 2, children: [_jsx(Text, { children: "Artist" }), _jsx(Text, { children: "Description" })] })), children: [_jsx(Tabs.Tab, { name: "tab1", label: "Tab 1", children: _jsx(Tabs.ScrollView, { children: _jsx(Text, { children: "Some long text ".repeat(150) }) }) }), _jsx(Tabs.Tab, { name: "tab2", label: "Tab 2", children: _jsx(Text, { children: "Some long text ".repeat(150) }) })] })));

package/dist/elements/Tabs/TabsContainer.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { CollapsibleProps, TabItemProps } from "react-native-collapsible-tab-view";
+interface Indicator {
+    tabName: string;
+    Component: React.FC<TabItemProps<string>>;
+}
+export interface TabsContainerProps extends CollapsibleProps {
+    indicators?: Indicator[];
+    onTabPress?: (tabName: string) => void;
+    tabScrollEnabled?: boolean;
+}
+export declare const TabsContainer: React.FC<TabsContainerProps>;
+export {};

package/dist/elements/Tabs/TabsContainer.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Platform } from "react-native";
+import { Tabs as BaseTabs, MaterialTabBar, MaterialTabItem, } from "react-native-collapsible-tab-view";
+import { DEFAULT_ACTIVE_OPACITY } from "../../constants";
+import { useColor } from "../../utils/hooks/useColor";
+import { useSpace } from "../../utils/hooks/useSpace";
+import { Box } from "../Box";
+import { Flex } from "../Flex";
+const TAB_BAR_HEIGHT = 50;
+export const TabsContainer = ({ children, indicators = [], initialTabName, renderHeader, tabScrollEnabled = false, onTabPress, ...tabContainerProps }) => {
+    const space = useSpace();
+    const color = useColor();
+    const isIOS = Platform.OS === "ios";
+    return (_jsx(BaseTabs.Container, { ...tabContainerProps, renderHeader: renderHeader, headerContainerStyle: {
+            shadowOpacity: 0,
+            shadowRadius: 0,
+            elevation: 0,
+            backgroundColor: color("background"),
+        }, initialTabName: initialTabName, containerStyle: {
+            paddingTop: space(2),
+        }, renderTabBar: (tabBarProps) => {
+            return (_jsx(_Fragment, { children: _jsx(MaterialTabBar, { ...tabBarProps, scrollEnabled: tabScrollEnabled, onTabPress: (tab) => {
+                        tabBarProps.onTabPress(tab);
+                        onTabPress?.(tab);
+                    }, style: {
+                        height: TAB_BAR_HEIGHT,
+                        borderBottomWidth: 1,
+                        borderColor: color("black30"),
+                    }, TabItemComponent: (props) => {
+                        const Indicator = indicators.find((indicator) => {
+                            return indicator.tabName === props.name;
+                        });
+                        return (_jsxs(Box, { flex: 1, children: [_jsx(Flex, { position: "absolute", width: "100%", children: !!Indicator?.Component && _jsx(Indicator.Component, { ...props }) }), _jsx(MaterialTabItem, { pressOpacity: DEFAULT_ACTIVE_OPACITY, ...props })] }));
+                    }, contentContainerStyle: {}, activeColor: color("onBackground"), inactiveColor: color("onBackgroundMedium"), labelStyle: { marginHorizontal: 0 }, indicatorStyle: {
+                        backgroundColor: color("onBackground"),
+                        height: 1,
+                        // on android this line breaks the active indicator and it is not visible
+                        ...(isIOS && { bottom: -1 }),
+                    }, tabStyle: {
+                        // resets the default padding 10 from the lib
+                        // to prevent linebreaks on the tab titles
+                        paddingHorizontal: 0,
+                    } }) }));
+        }, children: children }));
+};

package/dist/elements/Tabs/TabsWithHeader.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { CollapsibleProps } from "react-native-collapsible-tab-view";
+import { TabsContainerProps } from "./TabsContainer";
+import { HeaderProps } from "../Screen/Header";
+export interface TabsWithHeaderProps extends TabsContainerProps {
+    title: string | JSX.Element;
+    BelowTitleHeaderComponent?: () => JSX.Element;
+    headerProps?: HeaderProps;
+    showLargeHeaderText?: boolean;
+    children: CollapsibleProps["children"];
+}
+export declare const TabsWithHeader: React.FC<TabsWithHeaderProps>;

package/dist/elements/Tabs/TabsWithHeader.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { TabsContainer } from "./TabsContainer";
+import { Flex } from "../Flex";
+import { Screen } from "../Screen";
+import { Text } from "../Text";
+export const TabsWithHeader = ({ children, BelowTitleHeaderComponent, headerProps = {}, showLargeHeaderText = true, title, ...rest }) => {
+    const showTitle = showLargeHeaderText && !!title;
+    return (_jsxs(Screen, { children: [_jsx(Screen.AnimatedHeader, { title: title, ...headerProps }), _jsx(Screen.Body, { fullwidth: true, children: _jsx(TabsContainer, { ...rest, renderHeader: () => {
+                        return (_jsxs(_Fragment, { children: [!!showTitle && (_jsx(Flex, { my: 1, px: 2, justifyContent: "center", pointerEvents: "none", children: _jsx(Text, { variant: "lg-display", numberOfLines: 2, children: title }) })), !!BelowTitleHeaderComponent && _jsx(BelowTitleHeaderComponent, {})] }));
+                    }, children: children }) })] }));
+};

package/dist/elements/Tabs/hooks/useListenForTabContentScroll.d.ts

@@ -0,0 +1 @@
+export declare const useListenForTabContentScroll: () => void;

package/dist/elements/Tabs/hooks/useListenForTabContentScroll.js

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+import { useCurrentTabScrollY } from "react-native-collapsible-tab-view";
+import { useScreenScrollContext } from "../../Screen/ScreenScrollContext";
+import { useAnimatedHeaderScrolling } from "../../Screen/hooks/useAnimatedHeaderScrolling";
+export const useListenForTabContentScroll = () => {
+    const { updateCurrentScrollY, scrollYOffset } = useScreenScrollContext();
+    const scrollY = useAnimatedHeaderScrolling(useCurrentTabScrollY(), scrollYOffset);
+    useEffect(() => {
+        updateCurrentScrollY(scrollY);
+    }, [scrollY, updateCurrentScrollY]);
+};

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

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

package/dist/elements/Tabs/index.js

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

package/dist/elements/Text/LinkText.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { TextProps } from "./Text";
+export declare const LinkText: ({ style, ...props }: TextProps) => JSX.Element;

package/dist/elements/Text/LinkText.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "./Text";
+export const LinkText = ({ style, ...props }) => (_jsx(Text, { ...props, style: [style, { textDecorationLine: "underline" }] }));

package/dist/elements/Text/Text.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { TextVariant } from "@artsy/palette-tokens/dist/typography/v3";
+import { Text as RNText, TextProps as RNTextProps } from "react-native";
+import { ColorProps, LineHeightProps, SpaceProps, TypographyProps } from "styled-system";
+export interface TextProps extends RNTextProps, InnerStyledTextProps {
+    children?: React.ReactNode;
+    variant?: TextVariant;
+    italic?: boolean;
+    caps?: boolean;
+    weight?: "regular" | "medium";
+    maxChars?: number;
+    underline?: boolean;
+    maxWidth?: boolean;
+    selectable?: boolean;
+}
+export declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<RNText>>;
+type LineHeight = `${number}px`;
+type LineHeightTheme = {
+    lineHeights: Record<LineHeight, any>;
+};
+type InnerStyledTextProps = ColorProps & SpaceProps & TypographyProps & LineHeightProps<LineHeightTheme>;
+export {};

package/dist/elements/Text/Text.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Text as RNText } from "react-native";
+import styled from "styled-components/native";
+import { color, space, typography, } from "styled-system";
+import { useFontFamilyFor } from "./helpers";
+import { useTheme } from "../../utils/hooks/useTheme";
+export const Text = forwardRef(({ variant = "sm", italic = false, color = "onBackgroundHigh", caps = false, weight = "regular", underline = false, maxWidth = false, selectable = true, style, children, ...restProps }, ref) => {
+    const { theme } = useTheme();
+    const fontFamily = useFontFamilyFor({ italic, weight });
+    const nativeTextStyle = [caps ? { textTransform: "uppercase" } : {}];
+    return (_jsx(InnerStyledText, { ref: ref, selectable: selectable, style: [
+            ...nativeTextStyle,
+            { textAlignVertical: "center" },
+            { textDecorationLine: !!underline ? "underline" : "none" },
+            !!maxWidth ? { width: "100%", maxWidth: 600, alignSelf: "center" } : {},
+            style, // keep last so we can override
+        ], fontFamily: fontFamily, ...fixTextTreatmentForStyledComponent(theme.textTreatments[variant]), children: children, color: color, ...restProps }));
+});
+const fixTextTreatmentForStyledComponent = (treatment) => {
+    const treatmentWithUnits = { ...treatment };
+    if (treatment.lineHeight !== undefined) {
+        treatmentWithUnits.lineHeight = `${treatment.lineHeight}px`;
+    }
+    return treatmentWithUnits;
+};
+const InnerStyledText = styled(RNText) `
+  ${color}
+  ${space}
+  ${typography}
+`;

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

@@ -0,0 +1,11 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react-native";
+import { Text } from "../Text";
+declare const TextMeta: ComponentMeta<typeof Text>;
+export default TextMeta;
+type TextStory = ComponentStory<typeof Text>;
+export declare const Variants: TextStory;
+export declare const VariantsInBoxes: TextStory;
+export declare const BasicProps: TextStory;
+export declare const Misc: TextStory;
+export declare const FontCenteringRaw: TextStory;
+export declare const FontCenteringPalette: TextStory;

package/dist/elements/Text/Text.stories.js

@@ -0,0 +1,28 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Platform, Text as RNText, View } from "react-native";
+import { DataList, List } from "../../storybook/helpers";
+import { Box } from "../Box";
+import { Flex } from "../Flex";
+import { LinkText, Text } from "../Text";
+const TextMeta = {
+    title: "Theme/Text",
+    component: Text,
+};
+export default TextMeta;
+const variants = ["xs", "sm", "md", "lg", "xl", "xxl"];
+export const Variants = () => (_jsx(DataList, { data: variants, renderItem: ({ item: variant }) => _jsxs(Text, { variant: variant, children: [variant, " ~~ This is a text."] }) }));
+export const VariantsInBoxes = () => (_jsx(DataList, { data: variants, renderItem: ({ item: variant }) => (_jsx(Box, { borderWidth: 1, borderColor: "black", width: 100, children: _jsxs(Text, { variant: variant, children: [variant, " ~~ This is a text."] }) })) }));
+export const BasicProps = () => (_jsxs(List, { children: [_jsx(Text, { children: "regular ~~ This is a text." }), _jsx(LinkText, { children: "LinkText." }), _jsx(Text, { caps: true, children: "caps ~~ This is a text." }), _jsx(Text, { italic: true, children: "italics ~~ This is a text." }), _jsx(Text, { caps: true, italic: true, children: "caps italics ~~ This is a text." }), _jsx(Text, { weight: "medium", children: "weight: medium ~~ This is a text." }), _jsx(Text, { maxWidth: true, children: "maxwidth ~~ This is a text." })] }));
+export const Misc = () => (_jsxs(List, { children: [_jsx(View, { style: { borderWidth: 1, borderColor: "black" }, children: _jsx(Text, { pl: 2, mb: 4, mr: 80, color: "red", backgroundColor: "orange", children: "Testing the other props" }) }), _jsx(View, {}), _jsx(Text, { lineHeight: "20px", fontSize: 30, children: "wow" })] }));
+// this is useful for making sure our custom fonts are rendering at the same height for ios and android
+export const FontCenteringRaw = () => {
+    const style = { borderWidth: 1, borderColor: "black", fontSize: 16, lineHeight: 16 };
+    const systemFontStyle = Platform.OS === "android" ? { textAlignVertical: "bottom" } : {}; // this we add in our Text in palette-eigen
+    const unicaFontStyle = Platform.OS === "android" ? { textAlignVertical: "center" } : {}; // this we add in our Text in palette-eigen
+    return (_jsxs(Flex, { flexDirection: "row", flex: 1, children: [_jsxs(Flex, { flex: 1, children: [_jsx(RNText, { children: "System font" }), _jsxs(List, { children: [_jsx(RNText, { style: [style, systemFontStyle], children: "regular TEXT." }), _jsx(RNText, { style: [style, systemFontStyle], children: "ALL CAPS text." })] })] }), _jsx(Flex, { width: "1px", height: "100%", borderWidth: 1, borderColor: "black" }), _jsxs(Flex, { flex: 1, children: [_jsx(RNText, { children: "Unica custom font" }), _jsxs(List, { children: [_jsx(RNText, { style: [style, { fontFamily: "Unica77LL-Regular" }, unicaFontStyle], children: "regular TEXT." }), _jsx(RNText, { style: [style, { fontFamily: "Unica77LL-Regular" }, unicaFontStyle], children: "ALL CAPS text." })] })] })] }));
+};
+// this is useful for making sure our custom fonts are rendering at the same height for ios and android
+export const FontCenteringPalette = () => {
+    const style = { borderWidth: 1, borderColor: "black", fontSize: 16, lineHeight: 16 };
+    return (_jsxs(Flex, { flex: 1, children: [_jsx(Text, { children: "System font" }), _jsxs(List, { children: [_jsx(Text, { style: style, children: "regular TEXT." }), _jsx(Text, { style: style, children: "ALL CAPS text." })] })] }));
+};

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

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

package/dist/elements/Text/Text.tests.js

@@ -0,0 +1,10 @@
+import { endash, range } from "../../utils/text";
+describe("Text", () => {
+    it("uses endash in ranges", () => {
+        const usingHelper = range("10", "20");
+        const usingEndash = `10 ${endash} 20`;
+        expect(usingHelper).toEqual(usingEndash);
+        expect(usingHelper).toEqual("10 – 20"); // endash
+        expect(usingHelper).not.toEqual("10 - 20"); // minus
+    });
+});

package/dist/elements/Text/helpers.d.ts

@@ -0,0 +1,14 @@
+import { TextStyle } from "react-native";
+import { NoUndefined } from "../../utils/types";
+import { TextProps } from "../Text";
+export declare const useFontFamilyFor: ({ italic, weight, }: {
+    italic: TextProps["italic"];
+    weight: TextProps["weight"];
+}) => string;
+/**
+ * Use this function within Palette and other "atom" components like `Button`, `Pill`, etc.
+ * This function returns a `TextStyle` that has a `fontSize` and `lineHeight` of the same number.
+ * This is to make a `Text` behave correctly when it needs to be combined with others to make a UI component.
+ * Don't use this function when some actual text needs to be displayed. Only use it when text needs to be part of a UI component.
+ */
+export declare const useTextStyleForPalette: (variant: NoUndefined<TextProps["variant"]>) => TextStyle;

package/dist/elements/Text/helpers.js

@@ -0,0 +1,29 @@
+import { useTheme } from "../../utils/hooks/useTheme";
+export const useFontFamilyFor = ({ italic, weight, }) => {
+    const { theme } = useTheme();
+    const { fonts } = theme;
+    if (italic && weight === "medium") {
+        return fonts.sans.mediumItalic;
+    }
+    if (italic) {
+        return fonts.sans.italic;
+    }
+    if (weight === "medium") {
+        return fonts.sans.medium;
+    }
+    return fonts.sans.regular;
+};
+/**
+ * Use this function within Palette and other "atom" components like `Button`, `Pill`, etc.
+ * This function returns a `TextStyle` that has a `fontSize` and `lineHeight` of the same number.
+ * This is to make a `Text` behave correctly when it needs to be combined with others to make a UI component.
+ * Don't use this function when some actual text needs to be displayed. Only use it when text needs to be part of a UI component.
+ */
+export const useTextStyleForPalette = (variant) => {
+    const { theme } = useTheme();
+    const fontSizeAndLineHeight = theme.textTreatments[variant].fontSize;
+    return {
+        fontSize: fontSizeAndLineHeight,
+        lineHeight: fontSizeAndLineHeight,
+    };
+};

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

@@ -0,0 +1,3 @@
+export * from "./helpers";
+export * from "./Text";
+export * from "./LinkText";

package/dist/elements/Text/index.js

@@ -0,0 +1,3 @@
+export * from "./helpers";
+export * from "./Text";
+export * from "./LinkText";

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

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+interface ToolTipContextValues {
+    dismissToolTip: () => void;
+    setToolTip: (toolTip: string) => void;
+}
+interface ToolTipProps {
+    children?: React.ReactNode;
+    enabled?: Boolean;
+    /** The direction the tooltip should flow. If not provided, the tooltip will flow to the left if it is near the right edge of the screen, and vice-versa */
+    flowDirection?: "LEFT" | "RIGHT";
+    initialToolTipText?: string;
+    maxWidth?: number;
+    onPress?: () => void;
+    position?: "TOP" | "BOTTOM";
+    tapToDismiss?: boolean;
+    testID?: string;
+    /** horizontal margin of tooltip */
+    xOffset?: number;
+    /** vertical margin of tooltip */
+    yOffset?: number;
+}
+export declare const ToolTipContext: import("react").Context<ToolTipContextValues>;
+/**
+ * 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 declare const ToolTip: React.FC<ToolTipProps>;
+export declare const useToolTipContext: () => ToolTipContextValues;
+export {};