@artsy/palette-mobile 13.2.34 → 13.2.35

package/dist/elements/Screen/hooks/useAnimatedHeaderScrolling.js

@@ -0,0 +1,38 @@
+import { useEffect, useMemo, useState } from "react";
+import { runOnJS, useAnimatedReaction, useSharedValue } from "react-native-reanimated";
+import { NAVBAR_HEIGHT } from "../constants";
+export const useAnimatedHeaderScrolling = (scrollY, scrollYOffset = 0) => {
+    const listenForScroll = useSharedValue(true);
+    const [currScrollY, setCurrScrollY] = useState(scrollY.value);
+    const HEADER_HEIGHT = useMemo(() => NAVBAR_HEIGHT + scrollYOffset, [scrollYOffset]);
+    // Needed to run on JS thread
+    const update = (y) => {
+        setCurrScrollY(y);
+    };
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            listenForScroll.value = false;
+        }, 1000);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [listenForScroll]);
+    useAnimatedReaction(() => {
+        return [scrollY.value, listenForScroll.value];
+    }, ([animatedScrollY, isListeningForScroll], previousScroll) => {
+        const [prevScrollY] = previousScroll ?? [0, false];
+        // Hacky way to avoid some weird header behavior.
+        // look at HACKS.md for more info.
+        const suddenlyScrolled = Math.abs(animatedScrollY - prevScrollY) > HEADER_HEIGHT;
+        if (isListeningForScroll && suddenlyScrolled) {
+            return;
+        }
+        const prevTitleShown = prevScrollY >= HEADER_HEIGHT;
+        const currTitleShown = animatedScrollY >= HEADER_HEIGHT;
+        if (prevTitleShown === currTitleShown) {
+            return;
+        }
+        runOnJS(update)(Math.floor(animatedScrollY));
+    }, [scrollY, HEADER_HEIGHT]);
+    return currScrollY;
+};

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

@@ -0,0 +1,3 @@
+export declare const useListenForScreenScroll: () => {
+    scrollHandler: import("react-native-reanimated").ScrollHandlerProcessed<Record<string, unknown>>;
+};

package/dist/elements/Screen/hooks/useListenForScreenScroll.js

@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+import { useAnimatedScrollHandler, useSharedValue } from "react-native-reanimated";
+import { useAnimatedHeaderScrolling } from "./useAnimatedHeaderScrolling";
+import { useScreenScrollContext } from "../ScreenScrollContext";
+export const useListenForScreenScroll = () => {
+    const { updateCurrentScrollY, scrollYOffset } = useScreenScrollContext();
+    const animatedScrollY = useSharedValue(0);
+    const scrollY = useAnimatedHeaderScrolling(animatedScrollY, scrollYOffset);
+    const scrollHandler = useAnimatedScrollHandler({
+        onScroll: (event) => {
+            animatedScrollY.value = event.contentOffset.y;
+        },
+    });
+    useEffect(() => {
+        updateCurrentScrollY(scrollY);
+    }, [scrollY, updateCurrentScrollY]);
+    return {
+        scrollHandler,
+    };
+};

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

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { ScreenFlatList } from "./ScreenFlatList";
+export * from "./constants";
+export declare const Screen: import("react").FC<import("./ScreenBase").ScreenBaseProps> & {
+    AnimatedHeader: import("react").FC<import("./Header").HeaderProps>;
+    Background: import("react").FC<{
+        children: import("react").ReactNode;
+    }>;
+    Body: import("react").FC<import("./Body").BodyProps>;
+    BottomView: import("react").FC<import("./BottomView").BottomViewProps>;
+    FlatList: typeof ScreenFlatList;
+    FloatingHeader: import("react").FC<import("./FloatingHeader").FloatingHeaderProps>;
+    FullWidthDivider: import("react").FC<import("..").BoxProps>;
+    FullWidthItem: import("react").FC<import("..").BoxProps>;
+    Header: import("react").FC<import("./Header").HeaderProps>;
+    ScreenScrollContextProvider: import("react").FC<{
+        children?: import("react").ReactNode;
+    }>;
+    ScrollView: import("react").FC<import("react-native/types").ScrollViewProps>;
+    StickySubHeader: import("react").FC<import("./StickySubHeader").StickySubHeaderProps>;
+    useListenForScreenScroll: () => {
+        scrollHandler: import("react-native-reanimated").ScrollHandlerProcessed<Record<string, unknown>>;
+    };
+    useScreenScrollContext: () => import("./ScreenScrollContext").ScreenScrollContextProps;
+};

package/dist/elements/Screen/index.js

@@ -0,0 +1,31 @@
+import { Background } from "./Background";
+import { Body } from "./Body";
+import { BottomView } from "./BottomView";
+import { FloatingHeader } from "./FloatingHeader";
+import { FullWidthDivider } from "./FullWidthDivider";
+import { FullWidthItem } from "./FullWidthItem";
+import { AnimatedHeader, Header } from "./Header";
+import { ScreenBase } from "./ScreenBase";
+import { ScreenFlatList } from "./ScreenFlatList";
+import { ScreenScrollContextProvider, useScreenScrollContext } from "./ScreenScrollContext";
+import { ScreenScrollView } from "./ScreenScrollView";
+import { StickySubHeader } from "./StickySubHeader";
+import { useListenForScreenScroll } from "./hooks/useListenForScreenScroll";
+export * from "./constants";
+export const Screen = Object.assign(ScreenBase, {
+    AnimatedHeader,
+    Background,
+    Body,
+    BottomView,
+    FlatList: ScreenFlatList,
+    FloatingHeader,
+    FullWidthDivider,
+    FullWidthItem,
+    Header,
+    ScreenScrollContextProvider,
+    ScrollView: ScreenScrollView,
+    StickySubHeader: StickySubHeader,
+    // Hooks
+    useListenForScreenScroll,
+    useScreenScrollContext,
+});

package/dist/elements/SearchInput/SearchInput.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { InputProps } from "../Input";
+export interface SearchInputProps extends InputProps {
+    enableCancelButton?: boolean;
+}
+export declare const SearchInput: ({ enableCancelButton, onChangeText, onClear, ...props }: SearchInputProps) => JSX.Element;

package/dist/elements/SearchInput/SearchInput.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MagnifyingGlassIcon } from "../../svgs";
+import { Flex } from "../Flex";
+import { Input } from "../Input";
+export const SearchInput = ({ enableCancelButton = true, onChangeText, onClear, ...props }) => {
+    return (_jsx(Flex, { flexDirection: "row", justifyContent: "center", children: _jsx(Input, { icon: _jsx(MagnifyingGlassIcon, { width: 18, height: 18, fill: "onBackgroundHigh" }), autoCorrect: false, enableClearButton: enableCancelButton, returnKeyType: "search", onClear: () => {
+                onClear?.();
+            }, onChangeText: onChangeText, ...props, onFocus: (e) => {
+                props.onFocus?.(e);
+            }, onBlur: (e) => {
+                props.onBlur?.(e);
+            } }) }));
+};

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

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

package/dist/elements/SearchInput/index.js

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

package/dist/elements/Separator/Separator.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="styled-components-react-native" />
+import { BorderProps, SpaceProps, WidthProps } from "styled-system";
+export interface SeparatorProps extends SpaceProps, WidthProps, BorderProps {
+}
+/**
+ * A horizontal divider whose width and spacing can be adjusted
+ */
+export declare const Separator: import("styled-components").StyledComponent<typeof import("react-native/types").View, import("styled-components").DefaultTheme, SeparatorProps, never>;

package/dist/elements/Separator/Separator.js

@@ -0,0 +1,16 @@
+import { themeGet } from "@styled-system/theme-get";
+import styled from "styled-components/native";
+import { border, space, width } from "styled-system";
+/**
+ * A horizontal divider whose width and spacing can be adjusted
+ */
+export const Separator = styled.View `
+  border: 1px solid ${themeGet("colors.onBackgroundLow")};
+  border-bottom-width: 0;
+  ${space};
+  ${width};
+  ${border};
+`;
+Separator.defaultProps = {
+    width: "100%",
+};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: import("styled-components").StyledComponent<typeof import("react-native/types").View, import("styled-components").DefaultTheme, import("./Separator").SeparatorProps, never>;
+};
+export default _default;
+export declare const Styled: () => JSX.Element;

package/dist/elements/Separator/Separator.stories.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Separator } from "./Separator";
+import { Spacer } from "../Spacer";
+export default {
+    title: "Separator",
+    component: Separator,
+};
+export const Styled = () => (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx(Spacer, { y: 2 }), _jsx(Separator, { borderColor: "red" })] }));

package/dist/elements/Separator/ShadowSeparator.d.ts

@@ -0,0 +1 @@
+export declare const ShadowSeparator: import("styled-components").StyledComponent<typeof import("react-native/types").View, any, import("./Separator").SeparatorProps, never>;

package/dist/elements/Separator/ShadowSeparator.js

@@ -0,0 +1,7 @@
+import styled from "styled-components/native";
+import { Separator } from "./Separator";
+export const ShadowSeparator = styled(Separator) `
+  box-shadow: 0 -1px 1px rgba(50, 50, 50, 0.1);
+  width: 100%;
+  height: 0;
+`;

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

@@ -0,0 +1,2 @@
+export * from "./Separator";
+export * from "./ShadowSeparator";

package/dist/elements/Separator/index.js

@@ -0,0 +1,2 @@
+export * from "./Separator";
+export * from "./ShadowSeparator";

package/dist/elements/SimpleMessage/SimpleMessage.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { FlexProps } from "../Flex";
+import { TextProps } from "../Text";
+interface SimpleMessageProps extends FlexProps {
+    children: React.ReactNode | null;
+    textVariant?: TextProps["variant"];
+}
+/**
+ * A generic message window for displaying ZeroStates, notices, errors, etc.
+ */
+export declare const SimpleMessage: React.FC<SimpleMessageProps>;
+export {};

package/dist/elements/SimpleMessage/SimpleMessage.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { themeGet } from "@styled-system/theme-get";
+import styled from "styled-components/native";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+const StyledFlex = styled(Flex) `
+  background-color: ${themeGet("colors.black5")};
+  border-radius: 2px;
+`;
+/**
+ * A generic message window for displaying ZeroStates, notices, errors, etc.
+ */
+export const SimpleMessage = ({ children, textVariant = "sm", ...restProps }) => {
+    return (_jsx(StyledFlex, { p: 2, ...restProps, children: _jsx(Text, { color: "black60", variant: textVariant, children: children }) }));
+};

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

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

package/dist/elements/SimpleMessage/index.js

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

package/dist/elements/Skeleton/Skeleton.d.ts

@@ -0,0 +1,18 @@
+import { FC, ReactNode } from "react";
+import { FlexProps } from "../Flex";
+import { TextProps } from "../Text";
+/**
+ * Creates a skeleton animation for a component.
+ *
+ * @example
+ *
+ * <Skeleton>
+ *   <SkeletonText>Foo</SkeletonText>
+ *   <SkeletonBox width={100} height={100} />
+ * </Skeleton>
+ */
+export declare const Skeleton: FC<{
+    children: ReactNode;
+}>;
+export declare const SkeletonText: FC<TextProps>;
+export declare const SkeletonBox: FC<FlexProps>;

package/dist/elements/Skeleton/Skeleton.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming, } from "react-native-reanimated";
+import { useColor } from "../../utils/hooks";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+/**
+ * Creates a skeleton animation for a component.
+ *
+ * @example
+ *
+ * <Skeleton>
+ *   <SkeletonText>Foo</SkeletonText>
+ *   <SkeletonBox width={100} height={100} />
+ * </Skeleton>
+ */
+export const Skeleton = ({ children }) => {
+    const opacity = useSharedValue(0.5);
+    opacity.value = withRepeat(withTiming(1, { duration: 1000, easing: Easing.ease }), -1, true);
+    const fadeLoopAnim = useAnimatedStyle(() => {
+        return { opacity: opacity.value };
+    }, []);
+    return _jsx(Animated.View, { style: fadeLoopAnim, children: children });
+};
+export const SkeletonText = ({ children, ...rest }) => {
+    const color = useColor();
+    return (_jsx(Flex, { alignSelf: "flex-start", children: _jsx(Text, { ...rest, bg: color("black10"), color: color("black10"), children: children }) }));
+};
+export const SkeletonBox = ({ children, ...rest }) => {
+    const color = useColor();
+    return (_jsx(Flex, { ...rest, bg: color("black10"), children: children }));
+};

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

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

package/dist/elements/Skeleton/Skeleton.stories.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { range } from "lodash";
+import { Skeleton, SkeletonBox, SkeletonText } from "./Skeleton";
+import { List } from "../../storybook/helpers";
+import { Flex } from "../Flex";
+import { Join } from "../Join";
+import { Spacer } from "../Spacer";
+export default {
+    title: "Skeleton",
+    component: Skeleton,
+};
+export const SkeletonLoaders = () => (_jsx(List, { style: { marginLeft: 50 }, contentContainerStyle: { alignItems: "flex-start" }, children: _jsxs(Skeleton, { children: [_jsxs(Join, { separator: _jsx(Spacer, { y: 1 }), children: [_jsx(SkeletonText, { variant: "lg", children: "Hi i am loading" }), _jsx(SkeletonText, { variant: "md", children: "Me too" }), _jsx(SkeletonText, { variant: "sm", children: "Also loading" }), _jsx(SkeletonText, { variant: "xs", children: "Also loading" })] }), _jsx(Spacer, { y: 2 }), _jsx(Flex, { flexDirection: "row", flexWrap: "wrap", children: range(1, 100).map((index) => (_jsx(SkeletonBox, { mr: 1, mb: 1, width: 20, height: 20 }, index))) })] }) }));

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

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

package/dist/elements/Skeleton/index.js

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

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { SpacingUnit } from "../../types";
+export interface SpacerProps {
+    x?: SpacingUnit;
+    y?: SpacingUnit;
+}
+/**
+ * Used to inject space where it's needed.
+ */
+export declare const Spacer: ({ x, y, ...props }: SpacerProps) => JSX.Element;

package/dist/elements/Spacer/Spacer.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "../Box";
+/**
+ * Used to inject space where it's needed.
+ */
+export const Spacer = ({ x, y, ...props }) => _jsx(Box, { ml: x, mt: y, ...props });

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

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Spacer } from "./Spacer";
+import { Text } from "../../elements";
+import { List } from "../../storybook/helpers";
+import { useSpace } from "../../utils/hooks";
+import { bullet } from "../../utils/text";
+import { Box } from "../Box";
+export default {
+    title: "Spacer",
+    component: Spacer,
+};
+const SpacerRow = (props) => {
+    const space = useSpace();
+    const size = props.x;
+    return (_jsxs(Box, { children: [_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 20, height: 20, backgroundColor: "onBackground" }), _jsx(Spacer, { ...props }), _jsx(Box, { width: 20, height: 20, backgroundColor: "onBackground" })] }), _jsx(Text, { color: "onBackground", children: typeof size === "string" ? `${size}` : `${size} ${bullet} ${space(size)}px` })] }));
+};
+export const Horizontal = () => (_jsxs(List, { style: { marginLeft: 50 }, contentContainerStyle: { alignItems: "flex-start" }, children: [_jsx(Text, { weight: "medium", children: "Defined (units)" }), _jsx(SpacerRow, { x: 0.5 }), _jsx(SpacerRow, { x: 1 }), _jsx(SpacerRow, { x: 2 }), _jsx(SpacerRow, { x: 4 }), _jsx(SpacerRow, { x: 6 }), _jsx(SpacerRow, { x: 12 }), _jsx(Text, { weight: "medium", children: "Custom (pixels)" }), _jsx(SpacerRow, { x: "15px" }), _jsx(SpacerRow, { x: "50px" })] }));
+const SpacerCol = (props) => {
+    const space = useSpace();
+    const size = props.y;
+    return (_jsxs(Box, { children: [_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { width: 20, height: 20, backgroundColor: "black" }), _jsx(Spacer, { ...props }), _jsx(Box, { width: 20, height: 20, backgroundColor: "black" })] }), _jsx(Text, { color: "black", children: typeof size === "string" ? `${size}` : `${size} ${bullet} ${space(size)}px` })] }));
+};
+export const Vertical = () => (_jsxs(_Fragment, { children: [_jsx(Text, { weight: "medium", children: "Defined (units)" }), _jsxs(List, { horizontal: true, style: { marginTop: 50 }, contentContainerStyle: { alignItems: "flex-start", paddingHorizontal: 10 }, children: [_jsx(SpacerCol, { y: 0.5 }), _jsx(SpacerCol, { y: 1 }), _jsx(SpacerCol, { y: 2 }), _jsx(SpacerCol, { y: 4 }), _jsx(SpacerCol, { y: 6 }), _jsx(SpacerCol, { y: 12 })] }), _jsx(Text, { weight: "medium", children: "Custom (pixels)" }), _jsxs(List, { horizontal: true, style: { marginTop: 50 }, contentContainerStyle: { alignItems: "flex-start", paddingHorizontal: 10 }, children: [_jsx(SpacerCol, { y: "15px" }), _jsx(SpacerCol, { y: "50px" })] })] }));

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

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

package/dist/elements/Spacer/index.js

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

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

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

@@ -0,0 +1,86 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo } from "react";
+import { Animated, Easing } from "react-native";
+import styled from "styled-components/native";
+import { useColor } from "../../utils/hooks";
+/**
+ * Returns width and height of spinner based on size
+ * @param props
+ */
+export 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,
+            };
+    }
+};
+/**
+ * Spinner component for React Native
+ */
+export const Spinner = ({ size = "medium", color: theColor = "black100", ...rest }) => {
+    const color = useColor();
+    const rotation = useMemo(() => new Animated.Value(0), []);
+    const startRotation = () => {
+        Animated.loop(Animated.timing(rotation, {
+            toValue: 1,
+            duration: 1000,
+            easing: Easing.linear,
+            useNativeDriver: true,
+        }), {
+            iterations: -1,
+        }).start();
+    };
+    useEffect(() => {
+        startRotation();
+    }, []);
+    const style = [
+        {
+            transform: [
+                {
+                    rotate: rotation.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: ["0deg", "360deg"],
+                    }),
+                },
+            ],
+        },
+        rest.style,
+    ];
+    return _jsx(Bar, { size: size, color: color(theColor), ...rest, style: style });
+};
+/** Generic Spinner component */
+const Bar = styled(Animated.View) `
+  background: black;
+  position: absolute;
+
+  ${(props) => {
+    const { width, height } = 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

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

package/dist/elements/Spinner/index.js

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

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

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Platform, Switch as RNSwitch } from "react-native";
+import { useColor } from "../../utils/hooks";
+export const Switch = ({ value, thumbColorActive = Platform.OS === "ios" ? "white100" : "blue100", thumbColorInactive = Platform.OS === "ios" ? "white100" : "black10", trackColorActive = Platform.OS === "ios" ? "blue100" : "blue10", trackColorInactive = "black30", disabled, ...restProps }) => {
+    const color = useColor();
+    let thumbColor = value ? color(thumbColorActive) : color(thumbColorInactive);
+    let trackColor = {
+        false: color(trackColorInactive),
+        true: color(trackColorActive),
+    };
+    let iosBackground = color(trackColorInactive);
+    if (disabled) {
+        thumbColor = Platform.OS === "ios" ? color("white100") : color("black30");
+        trackColor = {
+            false: color("black10"),
+            true: Platform.OS === "ios" ? color("black30") : color("black10"),
+        };
+        iosBackground = color("black10");
+    }
+    return (_jsx(RNSwitch, { accessibilityRole: "switch", value: value, disabled: disabled, thumbColor: thumbColor, trackColor: trackColor, ios_backgroundColor: iosBackground, ...restProps }));
+};

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

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Switch } from "./Switch";
+import { List } from "../../storybook/helpers";
+import { Flex } from "../Flex";
+import { Text } from "../Text";
+export default {
+    title: "Switch",
+    component: Switch,
+};
+export const Variants = () => {
+    const [switches, setSwitches] = 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 (_jsxs(List, { children: [_jsxs(Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [_jsx(Text, { children: "Default State" }), _jsx(Switch, { value: switches[0].value, onValueChange: () => handleSwitchChange(1) })] }), _jsxs(Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [_jsx(Text, { children: "Disabled" }), _jsx(Switch, { disabled: true, value: switches[1].value, onValueChange: () => handleSwitchChange(2) })] }), _jsxs(Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [_jsx(Text, { children: "Custom Colors 1" }), _jsx(Switch, { value: switches[2].value, onValueChange: () => handleSwitchChange(3), trackColorActive: "red100", trackColorInactive: "green100", thumbColorActive: "yellow100", thumbColorInactive: "orange100" })] }), _jsxs(Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [_jsx(Text, { children: "Custom Colors 2" }), _jsx(Switch, { value: switches[3].value, onValueChange: () => handleSwitchChange(4), thumbColorActive: "yellow100", trackColorActive: "blue100", thumbColorInactive: "white100", trackColorInactive: "red100" })] })] }));
+};

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

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

package/dist/elements/Switch/index.js

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

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

@@ -0,0 +1,8 @@
+/// <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<{}>>;