@artsy/palette-mobile 13.2.33 → 13.2.34

package/dist/elements/Spacer/Spacer.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Spacer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Box_1 = require("../Box");
-/**
- * Used to inject space where it's needed.
- */
-const Spacer = ({ x, y, ...props }) => (0, jsx_runtime_1.jsx)(Box_1.Box, { ml: x, mt: y, ...props });
-exports.Spacer = Spacer;

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

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { SpacerProps } from "./Spacer";
-declare const _default: {
-    title: string;
-    component: ({ x, y, ...props }: SpacerProps) => JSX.Element;
-};
-export default _default;
-export declare const Horizontal: () => JSX.Element;
-export declare const Vertical: () => JSX.Element;

package/dist/elements/Spacer/Spacer.stories.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Vertical = exports.Horizontal = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Spacer_1 = require("./Spacer");
-const elements_1 = require("../../elements");
-const helpers_1 = require("../../storybook/helpers");
-const hooks_1 = require("../../utils/hooks");
-const text_1 = require("../../utils/text");
-const Box_1 = require("../Box");
-exports.default = {
-    title: "Spacer",
-    component: Spacer_1.Spacer,
-};
-const SpacerRow = (props) => {
-    const space = (0, hooks_1.useSpace)();
-    const size = props.x;
-    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsxs)(Box_1.Box, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { width: 20, height: 20, backgroundColor: "onBackground" }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { ...props }), (0, jsx_runtime_1.jsx)(Box_1.Box, { width: 20, height: 20, backgroundColor: "onBackground" })] }), (0, jsx_runtime_1.jsx)(elements_1.Text, { color: "onBackground", children: typeof size === "string" ? `${size}` : `${size} ${text_1.bullet} ${space(size)}px` })] }));
-};
-const Horizontal = () => ((0, jsx_runtime_1.jsxs)(helpers_1.List, { style: { marginLeft: 50 }, contentContainerStyle: { alignItems: "flex-start" }, children: [(0, jsx_runtime_1.jsx)(elements_1.Text, { weight: "medium", children: "Defined (units)" }), (0, jsx_runtime_1.jsx)(SpacerRow, { x: 0.5 }), (0, jsx_runtime_1.jsx)(SpacerRow, { x: 1 }), (0, jsx_runtime_1.jsx)(SpacerRow, { x: 2 }), (0, jsx_runtime_1.jsx)(SpacerRow, { x: 4 }), (0, jsx_runtime_1.jsx)(SpacerRow, { x: 6 }), (0, jsx_runtime_1.jsx)(SpacerRow, { x: 12 }), (0, jsx_runtime_1.jsx)(elements_1.Text, { weight: "medium", children: "Custom (pixels)" }), (0, jsx_runtime_1.jsx)(SpacerRow, { x: "15px" }), (0, jsx_runtime_1.jsx)(SpacerRow, { x: "50px" })] }));
-exports.Horizontal = Horizontal;
-const SpacerCol = (props) => {
-    const space = (0, hooks_1.useSpace)();
-    const size = props.y;
-    return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsxs)(Box_1.Box, { flexDirection: "column", children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { width: 20, height: 20, backgroundColor: "black" }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { ...props }), (0, jsx_runtime_1.jsx)(Box_1.Box, { width: 20, height: 20, backgroundColor: "black" })] }), (0, jsx_runtime_1.jsx)(elements_1.Text, { color: "black", children: typeof size === "string" ? `${size}` : `${size} ${text_1.bullet} ${space(size)}px` })] }));
-};
-const Vertical = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(elements_1.Text, { weight: "medium", children: "Defined (units)" }), (0, jsx_runtime_1.jsxs)(helpers_1.List, { horizontal: true, style: { marginTop: 50 }, contentContainerStyle: { alignItems: "flex-start", paddingHorizontal: 10 }, children: [(0, jsx_runtime_1.jsx)(SpacerCol, { y: 0.5 }), (0, jsx_runtime_1.jsx)(SpacerCol, { y: 1 }), (0, jsx_runtime_1.jsx)(SpacerCol, { y: 2 }), (0, jsx_runtime_1.jsx)(SpacerCol, { y: 4 }), (0, jsx_runtime_1.jsx)(SpacerCol, { y: 6 }), (0, jsx_runtime_1.jsx)(SpacerCol, { y: 12 })] }), (0, jsx_runtime_1.jsx)(elements_1.Text, { weight: "medium", children: "Custom (pixels)" }), (0, jsx_runtime_1.jsxs)(helpers_1.List, { horizontal: true, style: { marginTop: 50 }, contentContainerStyle: { alignItems: "flex-start", paddingHorizontal: 10 }, children: [(0, jsx_runtime_1.jsx)(SpacerCol, { y: "15px" }), (0, jsx_runtime_1.jsx)(SpacerCol, { y: "50px" })] })] }));
-exports.Vertical = Vertical;

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

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

package/dist/elements/Spacer/index.js

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

package/dist/elements/Spinner/Spinner.d.ts

@@ -1,31 +0,0 @@
-/// <reference types="react" />
-import { ViewProps } from "react-native";
-import { Color } from "../../types";
-export interface SpinnerProps extends ViewProps {
-    /** Delay before spinner appears */
-    delay?: number;
-    /** Width of the spinner */
-    width?: number;
-    /** Height of the spinner */
-    height?: number;
-    /** Size of the spinner */
-    size?: "small" | "medium" | "large";
-    /** Color of the spinner */
-    color?: Color;
-}
-/**
- * Returns width and height of spinner based on size
- * @param props
- */
-export declare const getSize: (props: SpinnerProps | BarProps) => {
-    width: number | undefined;
-    height: number | undefined;
-};
-/**
- * Spinner component for React Native
- */
-export declare const Spinner: React.FC<SpinnerProps>;
-type BarProps = Omit<SpinnerProps, "color"> & {
-    color?: string;
-};
-export {};

package/dist/elements/Spinner/Spinner.js

@@ -1,94 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Spinner = exports.getSize = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const native_1 = __importDefault(require("styled-components/native"));
-const hooks_1 = require("../../utils/hooks");
-/**
- * Returns width and height of spinner based on size
- * @param props
- */
-const getSize = (props) => {
-    const base = { width: 25, height: 6 };
-    switch (props.size) {
-        case "small":
-            return {
-                width: base.width * 0.5,
-                height: base.height * 0.5,
-            };
-        case "medium":
-            return {
-                width: base.width * 0.8,
-                height: base.height * 0.8,
-            };
-        case "large":
-            return {
-                width: base.width,
-                height: base.height,
-            };
-        default:
-            return {
-                width: props.width,
-                height: props.height,
-            };
-    }
-};
-exports.getSize = getSize;
-/**
- * Spinner component for React Native
- */
-const Spinner = ({ size = "medium", color: theColor = "black100", ...rest }) => {
-    const color = (0, hooks_1.useColor)();
-    const rotation = (0, react_1.useMemo)(() => new react_native_1.Animated.Value(0), []);
-    const startRotation = () => {
-        react_native_1.Animated.loop(react_native_1.Animated.timing(rotation, {
-            toValue: 1,
-            duration: 1000,
-            easing: react_native_1.Easing.linear,
-            useNativeDriver: true,
-        }), {
-            iterations: -1,
-        }).start();
-    };
-    (0, react_1.useEffect)(() => {
-        startRotation();
-    }, []);
-    const style = [
-        {
-            transform: [
-                {
-                    rotate: rotation.interpolate({
-                        inputRange: [0, 1],
-                        outputRange: ["0deg", "360deg"],
-                    }),
-                },
-            ],
-        },
-        rest.style,
-    ];
-    return (0, jsx_runtime_1.jsx)(Bar, { size: size, color: color(theColor), ...rest, style: style });
-};
-exports.Spinner = Spinner;
-/** Generic Spinner component */
-const Bar = (0, native_1.default)(react_native_1.Animated.View) `
-  background: black;
-  position: absolute;
-
-  ${(props) => {
-    const { width, height } = (0, exports.getSize)(props);
-    return `
-      background: ${props.color};
-      width: ${width}px;
-      height: ${height}px;
-    `;
-}};
-`;
-Bar.defaultProps = {
-    width: 25,
-    height: 6,
-};

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

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

package/dist/elements/Spinner/index.js

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

package/dist/elements/Switch/Switch.d.ts

@@ -1,24 +0,0 @@
-/// <reference types="react" />
-import { Color } from "@artsy/palette-tokens";
-import { SwitchProps as RNSwitchProps } from "react-native";
-type CustomSwitchProps = Omit<RNSwitchProps, "trackColor" | "thumbColor" | "ios_backgroundColor" | "thumbTintColor" | "tintColor" | "onTintColor">;
-export interface SwitchProps extends CustomSwitchProps {
-    /**
-     * The circular thumb's color on the 'ON' switch.
-     */
-    thumbColorActive?: Color;
-    /**
-     * The circular thumb's color on the 'OFF' switch.
-     */
-    thumbColorInactive?: Color;
-    /**
-     * The background's color on the 'ON' switch.
-     */
-    trackColorActive?: Color;
-    /**
-     * The background's color on the 'OFF' switch.
-     */
-    trackColorInactive?: Color;
-}
-export declare const Switch: ({ value, thumbColorActive, thumbColorInactive, trackColorActive, trackColorInactive, disabled, ...restProps }: SwitchProps) => JSX.Element;
-export {};

package/dist/elements/Switch/Switch.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Switch = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("react-native");
-const hooks_1 = require("../../utils/hooks");
-const Switch = ({ value, thumbColorActive = react_native_1.Platform.OS === "ios" ? "white100" : "blue100", thumbColorInactive = react_native_1.Platform.OS === "ios" ? "white100" : "black10", trackColorActive = react_native_1.Platform.OS === "ios" ? "blue100" : "blue10", trackColorInactive = "black30", disabled, ...restProps }) => {
-    const color = (0, hooks_1.useColor)();
-    let thumbColor = value ? color(thumbColorActive) : color(thumbColorInactive);
-    let trackColor = {
-        false: color(trackColorInactive),
-        true: color(trackColorActive),
-    };
-    let iosBackground = color(trackColorInactive);
-    if (disabled) {
-        thumbColor = react_native_1.Platform.OS === "ios" ? color("white100") : color("black30");
-        trackColor = {
-            false: color("black10"),
-            true: react_native_1.Platform.OS === "ios" ? color("black30") : color("black10"),
-        };
-        iosBackground = color("black10");
-    }
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Switch, { accessibilityRole: "switch", value: value, disabled: disabled, thumbColor: thumbColor, trackColor: trackColor, ios_backgroundColor: iosBackground, ...restProps }));
-};
-exports.Switch = Switch;

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

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-declare const _default: {
-    title: string;
-    component: ({ value, thumbColorActive, thumbColorInactive, trackColorActive, trackColorInactive, disabled, ...restProps }: import("./Switch").SwitchProps) => JSX.Element;
-};
-export default _default;
-export declare const Variants: () => JSX.Element;

package/dist/elements/Switch/Switch.stories.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Variants = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Switch_1 = require("./Switch");
-const helpers_1 = require("../../storybook/helpers");
-const Flex_1 = require("../Flex");
-const Text_1 = require("../Text");
-exports.default = {
-    title: "Switch",
-    component: Switch_1.Switch,
-};
-const Variants = () => {
-    const [switches, setSwitches] = (0, react_1.useState)([
-        { id: 1, label: "Default colors", value: true },
-        { id: 2, label: "disabled", value: false },
-        { id: 3, label: "Custom #1", value: true },
-        { id: 4, label: "Custom #2", value: false },
-    ]);
-    const handleSwitchChange = (id) => {
-        setSwitches((prevSwitches) => prevSwitches.map((sw) => (sw.id === id ? { ...sw, value: !sw.value } : sw)));
-    };
-    return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Default State" }), (0, jsx_runtime_1.jsx)(Switch_1.Switch, { value: switches[0].value, onValueChange: () => handleSwitchChange(1) })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Disabled" }), (0, jsx_runtime_1.jsx)(Switch_1.Switch, { disabled: true, value: switches[1].value, onValueChange: () => handleSwitchChange(2) })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Custom Colors 1" }), (0, jsx_runtime_1.jsx)(Switch_1.Switch, { value: switches[2].value, onValueChange: () => handleSwitchChange(3), trackColorActive: "red100", trackColorInactive: "green100", thumbColorActive: "yellow100", thumbColorInactive: "orange100" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Custom Colors 2" }), (0, jsx_runtime_1.jsx)(Switch_1.Switch, { value: switches[3].value, onValueChange: () => handleSwitchChange(4), thumbColorActive: "yellow100", trackColorActive: "blue100", thumbColorInactive: "white100", trackColorInactive: "red100" })] })] }));
-};
-exports.Variants = Variants;

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

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

package/dist/elements/Switch/index.js

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

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

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-/**
- * 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 declare const SubTabBar: React.FC<React.PropsWithChildren<{}>>;

package/dist/elements/Tabs/SubTabBar.js

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SubTabBar = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const moti_1 = require("moti");
-const react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
-const react_native_reanimated_1 = require("react-native-reanimated");
-const useSpace_1 = require("../../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
- */
-const SubTabBar = ({ children }) => {
-    const { top } = (0, react_native_collapsible_tab_view_1.useHeaderMeasurements)();
-    const scrollY = (0, react_native_collapsible_tab_view_1.useCurrentTabScrollY)();
-    const space = (0, useSpace_1.useSpace)();
-    const style = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
-        return {
-            transform: [
-                {
-                    translateY: scrollY.value + top.value,
-                },
-            ],
-        };
-    }, []);
-    return (0, jsx_runtime_1.jsx)(moti_1.MotiView, { style: [style, { zIndex: 1, marginHorizontal: -space(2) }], children: children });
-};
-exports.SubTabBar = SubTabBar;

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

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

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabFlashList = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
-const useListenForTabContentScroll_1 = require("./hooks/useListenForTabContentScroll");
-const useSpace_1 = require("../../utils/hooks/useSpace");
-function TabFlashList(props) {
-    (0, useListenForTabContentScroll_1.useListenForTabContentScroll)();
-    const space = (0, useSpace_1.useSpace)();
-    const contentContainerStyle = (props.contentContainerStyle ?? {});
-    return ((0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.Tabs.FlashList, { contentContainerStyle: {
-            paddingHorizontal: space(2),
-            ...contentContainerStyle,
-        }, ...props }));
-}
-exports.TabFlashList = TabFlashList;

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

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

package/dist/elements/Tabs/TabFlatList.js

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabFlatList = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
-const useListenForTabContentScroll_1 = require("./hooks/useListenForTabContentScroll");
-const useSpace_1 = require("../../utils/hooks/useSpace");
-function TabFlatList(props) {
-    (0, useListenForTabContentScroll_1.useListenForTabContentScroll)();
-    const space = (0, useSpace_1.useSpace)();
-    const contentContainerStyle = (props.contentContainerStyle ?? {});
-    return ((0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.Tabs.FlatList, { contentContainerStyle: {
-            marginHorizontal: space(2),
-            ...contentContainerStyle,
-        }, ...props }));
-}
-exports.TabFlatList = TabFlatList;

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

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

@@ -1,17 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabMasonry = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
-const useListenForTabContentScroll_1 = require("./hooks/useListenForTabContentScroll");
-const useSpace_1 = require("../../utils/hooks/useSpace");
-function TabMasonry(props) {
-    (0, useListenForTabContentScroll_1.useListenForTabContentScroll)();
-    const space = (0, useSpace_1.useSpace)();
-    const contentContainerStyle = (props.contentContainerStyle ?? {});
-    return ((0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.Tabs.MasonryFlashList, { contentContainerStyle: {
-            paddingHorizontal: space(2),
-            ...contentContainerStyle,
-        }, ...props, ref: props.innerRef }));
-}
-exports.TabMasonry = TabMasonry;

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

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

package/dist/elements/Tabs/TabScrollView.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabScrollView = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
-const useListenForTabContentScroll_1 = require("./hooks/useListenForTabContentScroll");
-const useSpace_1 = require("../../utils/hooks/useSpace");
-const TabScrollView = (props) => {
-    (0, useListenForTabContentScroll_1.useListenForTabContentScroll)();
-    const space = (0, useSpace_1.useSpace)();
-    const contentContainerStyle = (props.contentContainerStyle ?? {});
-    return ((0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.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 }));
-};
-exports.TabScrollView = TabScrollView;

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

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

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tabs = void 0;
-const react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
-const SubTabBar_1 = require("./SubTabBar");
-const TabFlashList_1 = require("./TabFlashList");
-const TabFlatList_1 = require("./TabFlatList");
-const TabMasonry_1 = require("./TabMasonry");
-const TabScrollView_1 = require("./TabScrollView");
-const TabsContainer_1 = require("./TabsContainer");
-const TabsWithHeader_1 = require("./TabsWithHeader");
-const useListenForTabContentScroll_1 = require("./hooks/useListenForTabContentScroll");
-exports.Tabs = Object.assign(TabsContainer_1.TabsContainer, {
-    FlatList: TabFlatList_1.TabFlatList,
-    FlashList: TabFlashList_1.TabFlashList,
-    Masonry: TabMasonry_1.TabMasonry,
-    Lazy: react_native_collapsible_tab_view_1.Tabs.Lazy,
-    ScrollView: TabScrollView_1.TabScrollView,
-    SectionList: react_native_collapsible_tab_view_1.Tabs.SectionList,
-    SubTabBar: SubTabBar_1.SubTabBar,
-    Tab: react_native_collapsible_tab_view_1.Tabs.Tab,
-    TabsWithHeader: TabsWithHeader_1.TabsWithHeader,
-    // Hooks
-    useAnimatedTabIndex: react_native_collapsible_tab_view_1.useAnimatedTabIndex,
-    useCurrentTabScrollY: react_native_collapsible_tab_view_1.useCurrentTabScrollY,
-    useListenForTabContentScroll: useListenForTabContentScroll_1.useListenForTabContentScroll,
-    useFocusedTab: react_native_collapsible_tab_view_1.useFocusedTab,
-    useHeaderMeasurements: react_native_collapsible_tab_view_1.useHeaderMeasurements,
-});

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

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

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

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("@storybook/react-native");
-const Tabs_1 = require("./Tabs");
-const Flex_1 = require("../Flex");
-const Screen_1 = require("../Screen");
-const Text_1 = require("../Text");
-(0, react_native_1.storiesOf)("Tabs", module)
-    .add("Simple Tabs", () => ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "Tab 1", label: "Tab 1", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 1 content" }) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "Tab 2", label: "Tab 2", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 2 content" }) }) })] })))
-    .add("Tabs with Indicator", () => ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { indicators: [{ tabName: "tab1", Component: () => (0, jsx_runtime_1.jsx)(Text_1.Text, { textAlign: "right", children: "hi" }) }], children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab1", label: "Tab 1", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 1 content" }) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab2", label: "Tab 2", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Tab 2 content" }) }) })] })))
-    .add("Tabs with AnimatedHeader", () => ((0, jsx_runtime_1.jsxs)(Screen_1.Screen, { children: [(0, jsx_runtime_1.jsx)(Screen_1.Screen.AnimatedHeader, { title: "Title" }), (0, jsx_runtime_1.jsx)(Screen_1.Screen.Body, { fullwidth: true, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab1", label: "Tab 1", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: Array.from({ length: 5 }).map((_, i) => ((0, jsx_runtime_1.jsx)(Text_1.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))) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab2", label: "Tab 2", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: Array.from({ length: 5 }).map((_, i) => ((0, jsx_runtime_1.jsx)(Text_1.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", () => ((0, jsx_runtime_1.jsxs)(Tabs_1.Tabs.TabsWithHeader, { title: "Artist Header", showLargeHeaderText: false, BelowTitleHeaderComponent: () => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { pointerEvents: "none", p: 2, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Artist" }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Description" })] })), children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab1", label: "Tab 1", children: (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.ScrollView, { children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Some long text ".repeat(150) }) }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { name: "tab2", label: "Tab 2", children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Some long text ".repeat(150) }) })] })));

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

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

@@ -1,49 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabsContainer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("react-native");
-const react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
-const constants_1 = require("../../constants");
-const useColor_1 = require("../../utils/hooks/useColor");
-const useSpace_1 = require("../../utils/hooks/useSpace");
-const Box_1 = require("../Box");
-const Flex_1 = require("../Flex");
-const TAB_BAR_HEIGHT = 50;
-const TabsContainer = ({ children, indicators = [], initialTabName, renderHeader, tabScrollEnabled = false, onTabPress, ...tabContainerProps }) => {
-    const space = (0, useSpace_1.useSpace)();
-    const color = (0, useColor_1.useColor)();
-    const isIOS = react_native_1.Platform.OS === "ios";
-    return ((0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.Tabs.Container, { ...tabContainerProps, renderHeader: renderHeader, headerContainerStyle: {
-            shadowOpacity: 0,
-            shadowRadius: 0,
-            elevation: 0,
-            backgroundColor: color("background"),
-        }, initialTabName: initialTabName, containerStyle: {
-            paddingTop: space(2),
-        }, renderTabBar: (tabBarProps) => {
-            return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.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 ((0, jsx_runtime_1.jsxs)(Box_1.Box, { flex: 1, children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { position: "absolute", width: "100%", children: !!Indicator?.Component && (0, jsx_runtime_1.jsx)(Indicator.Component, { ...props }) }), (0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.MaterialTabItem, { pressOpacity: constants_1.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 }));
-};
-exports.TabsContainer = TabsContainer;