@artsy/palette-mobile 13.2.34 → 13.2.35

package/dist/elements/Button/LinkButton.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "../Text";
+import { Touchable } from "../Touchable";
+export const LinkButton = (props) => (_jsx(Touchable, { onPress: props.onPress, children: _jsx(Text, { underline: true, ...props }) }));

package/dist/elements/Button/colors.d.ts

@@ -0,0 +1,9 @@
+import { ButtonProps } from "./Button";
+import { NoUndefined } from "../../utils/types";
+type State = "disabled" | "pressed" | "active";
+export declare const useColorsForVariantAndState: () => Record<NoUndefined<ButtonProps["variant"]>, Record<State, {
+    bg: string;
+    border: string;
+    text: string;
+}>>;
+export {};

package/dist/elements/Button/colors.js

@@ -0,0 +1,74 @@
+import { useColor } from "../../utils/hooks/useColor";
+export const useColorsForVariantAndState = () => {
+    const color = useColor();
+    return {
+        fillDark: {
+            disabled: { bg: color("black30"), border: color("black30"), text: color("onPrimaryHigh") },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("onPrimaryHigh") },
+            active: { bg: color("primary"), border: color("primary"), text: color("onPrimaryHigh") },
+        },
+        fillLight: {
+            disabled: { bg: color("black30"), border: color("black30"), text: color("onPrimaryHigh") },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("onPrimaryHigh") },
+            active: {
+                bg: color("white100"),
+                border: color("white100"),
+                text: color("black100"),
+            },
+        },
+        fillGray: {
+            disabled: { bg: color("black30"), border: color("black30"), text: color("white100") },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
+            active: { bg: color("black10"), border: color("black10"), text: color("black100") },
+        },
+        fillSuccess: {
+            disabled: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
+            active: { bg: color("blue10"), border: color("blue10"), text: color("white100") },
+        },
+        outline: {
+            disabled: {
+                bg: color("background"),
+                border: color("onBackgroundLow"),
+                text: color("onBackgroundLow"),
+            },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
+            active: {
+                bg: color("background"),
+                border: color("onBackgroundMedium"),
+                text: color("onBackgroundHigh"),
+            },
+        },
+        outlineGray: {
+            disabled: {
+                bg: color("white100"),
+                border: color("black30"),
+                text: color("black30"),
+            },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
+            active: {
+                bg: color("white100"),
+                border: color("black30"),
+                text: color("black100"),
+            },
+        },
+        outlineLight: {
+            disabled: {
+                bg: "rgba(0, 0, 0, 0)",
+                border: color("black30"),
+                text: color("black30"),
+            },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
+            active: {
+                bg: "rgba(0, 0, 0, 0)",
+                border: color("white100"),
+                text: color("white100"),
+            },
+        },
+        text: {
+            disabled: { bg: "rgba(0, 0, 0, 0)", border: "rgba(0, 0, 0, 0)", text: color("black30") },
+            pressed: { bg: color("black10"), border: color("black10"), text: color("blue100") },
+            active: { bg: "rgba(0, 0, 0, 0)", border: "rgba(0, 0, 0, 0)", text: color("black100") },
+        },
+    };
+};

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

@@ -0,0 +1,4 @@
+export * from "./Button";
+export * from "./CTAButton";
+export * from "./LinkButton";
+export * from "./FollowButton";

package/dist/elements/Button/index.js

@@ -0,0 +1,4 @@
+export * from "./Button";
+export * from "./CTAButton";
+export * from "./LinkButton";
+export * from "./FollowButton";

package/dist/elements/ButtonNew/Button.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { PressableProps } from "react-native";
+import { HapticFeedbackTypes } from "react-native-haptic-feedback";
+import { BoxProps } from "../Box";
+type ButtonSize = "small" | "large";
+type ButtonVariant = "fillDark" | "fillLight" | "fillGray" | "fillSuccess" | "outline" | "outlineGray" | "outlineLight" | "text";
+export interface ButtonProps extends BoxProps {
+    children: React.ReactNode;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    onPress?: PressableProps["onPress"];
+    icon?: React.ReactNode;
+    iconPosition?: "left" | "left-start" | "right";
+    /**
+     * `haptic` can be used like:
+     * <Button haptic />
+     * or
+     * <Button haptic="impactHeavy" />
+     * to add haptic feedback on the button.
+     */
+    haptic?: HapticFeedbackTypes | true;
+    /** Displays a loader in the button */
+    loading?: boolean;
+    /** Disabled interactions */
+    disabled?: boolean;
+    /** Makes button full width */
+    block?: boolean;
+    /** Pass the longest text to the button for the button to keep longest text width */
+    longestText?: string;
+    /** Used only for tests and stories */
+    testOnly_pressed?: PressableProps["testOnly_pressed"];
+}
+export declare const Button: ({ children, disabled: disabledProp, haptic, icon, iconPosition, loading: loadingProp, block, longestText, onPress, size, variant, testOnly_pressed, testID, hitSlop, ...restProps }: ButtonProps) => JSX.Element;
+export {};

package/dist/elements/ButtonNew/Button.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Pressable } from "react-native";
+import Haptic from "react-native-haptic-feedback";
+import Animated, { interpolateColor, useAnimatedReaction, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming, } from "react-native-reanimated";
+import { useColorsForVariantAndState } from "./colors";
+import { MeasuredView } from "../../elements/MeasuredView";
+import { Box } from "../Box";
+import { Flex } from "../Flex";
+import { Spacer } from "../Spacer";
+import { Spinner } from "../Spinner";
+import { Text, useTextStyleForPalette } from "../Text";
+const ANIMATION_DURATION = 150;
+export const Button = ({ children, disabled: disabledProp, haptic, icon, iconPosition = "left", loading: loadingProp, block, longestText, onPress, size = "large", variant = "fillDark", testOnly_pressed, testID, hitSlop, ...restProps }) => {
+    const [disabled, setDisabled, disabledV] = useStateWithProp(!!disabledProp);
+    const [loading, setLoading, loadingV] = useStateWithProp(!!loadingProp);
+    const [pressed, setPressed, pressedV] = useStateWithProp(!!testOnly_pressed);
+    const pressAnimationProgress = useSharedValue(0);
+    useAnimatedReaction(() => {
+        return pressedV.value;
+    }, (pressedVal) => {
+        return (pressAnimationProgress.value = withTiming(pressedVal, {
+            duration: ANIMATION_DURATION,
+        }));
+    });
+    const textStyle = useTextStyleForPalette(size === "small" ? "xs" : "sm");
+    const [longestTextMeasurements, setLongestTextMeasurements] = useState({
+        width: 0,
+        height: 0,
+    });
+    const height = (() => {
+        switch (size) {
+            case "small":
+                return 30;
+            case "large":
+                return 50;
+        }
+    })();
+    const spinnerColor = variant === "text" ? "blue100" : "white100";
+    const handlePress = (event) => {
+        if (onPress === undefined || onPress === null) {
+            return;
+        }
+        if (disabled || loading) {
+            return;
+        }
+        if (haptic !== undefined) {
+            Haptic.trigger(haptic === true ? "impactLight" : haptic);
+        }
+        onPress(event);
+    };
+    const colorsForVariantAndState = useColorsForVariantAndState();
+    const containerColorsAnim = useAnimatedStyle(() => {
+        const colors = colorsForVariantAndState[variant];
+        if (disabled) {
+            return {
+                backgroundColor: colors.disabled.bg,
+                borderColor: colors.disabled.border,
+            };
+        }
+        return {
+            backgroundColor: interpolateColor(pressAnimationProgress.value, [0, 1], [colors.active.bg, colors.pressed.bg]),
+            borderColor: interpolateColor(pressAnimationProgress.value, [0, 1], [colors.active.border, colors.pressed.border]),
+        };
+    });
+    const textAnim = useAnimatedStyle(() => {
+        const colors = colorsForVariantAndState[variant];
+        if (loading) {
+            return { color: "rgba(0, 0, 0, 0)" };
+        }
+        return {
+            color: interpolateColor(pressAnimationProgress.value, [0, 1], [colors.active.text, colors.pressed.text]),
+            textDecorationLine: pressAnimationProgress.value > 0 ? "underline" : "none",
+        };
+    });
+    return (_jsx(Pressable, { disabled: disabled, onPressIn: () => {
+            if (loading) {
+                return;
+            }
+            setPressed(true);
+        }, onPressOut: () => {
+            if (loading) {
+                return;
+            }
+            setPressed(false);
+        }, onPress: handlePress, testID: testID, testOnly_pressed: testOnly_pressed, hitSlop: hitSlop, children: _jsx(Flex, { flexDirection: "row", children: _jsx(Flex, { ...restProps, height: height, width: block ? "100%" : undefined, borderRadius: 50, overflow: "hidden", children: _jsx(AFlex, { borderWidth: 1, borderRadius: 50, overflow: "hidden", style: containerColorsAnim, children: _jsxs(Flex, { height: "100%", mx: "25px", flexDirection: "row", alignItems: "center", justifyContent: "center", children: [iconPosition === "left-start" && !!icon ? (_jsxs(Box, { position: "absolute", left: 0, children: [icon, _jsx(Spacer, { x: 0.5 })] })) : null, iconPosition === "left" && !!icon ? (_jsxs(_Fragment, { children: [icon, _jsx(Spacer, { x: 0.5 })] })) : null, _jsx(AText, { style: [{ width: Math.ceil(longestTextMeasurements.width) }, textStyle, textAnim], textAlign: "center", children: children }), _jsx(MeasuredView, { setMeasuredState: setLongestTextMeasurements, children: _jsx(Text, { color: "red", style: textStyle, children: longestText ? longestText : children }) }), iconPosition === "right" && !!icon ? (_jsxs(_Fragment, { children: [_jsx(Spacer, { x: 0.5 }), icon] })) : null, loading ? (_jsx(Box, { position: "absolute", width: "100%", height: "100%", alignItems: "center", justifyContent: "center", children: _jsx(Spinner, { size: size, color: spinnerColor }) })) : null] }) }) }) }) }));
+};
+const AText = Animated.createAnimatedComponent(Text);
+const AFlex = Animated.createAnimatedComponent(Flex);
+const useStateWithProp = (prop) => {
+    const [state, setState] = useState(!!prop);
+    useEffect(() => {
+        setState(!!prop);
+    }, [prop]);
+    const stateV = useDerivedValue(() => {
+        if (!!state) {
+            return 1;
+        }
+        return 0;
+    }, [state]);
+    return [state, setState, stateV];
+};

package/dist/elements/ButtonNew/Button.stories.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { ButtonProps } from "./Button";
+declare const _default: {
+    title: string;
+    component: ({ children, disabled: disabledProp, haptic, icon, iconPosition, loading: loadingProp, block, longestText, onPress, size, variant, testOnly_pressed, testID, hitSlop, ...restProps }: ButtonProps) => JSX.Element;
+};
+export default _default;
+export declare const Sizes: () => JSX.Element;
+export declare const States: () => JSX.Element;
+export declare const Variants: () => JSX.Element;
+export declare const VariantsLoading: () => JSX.Element;
+export declare const VariantsDisabled: () => JSX.Element;
+export declare const TheFollowButton: () => JSX.Element;
+export declare const TheCTAButton: () => JSX.Element;
+export declare const TheLinkButton: () => JSX.Element;
+export declare const Miscellaneous: () => JSX.Element;
+export declare const Playground: () => JSX.Element;
+export declare const SpacingAround: () => JSX.Element;

package/dist/elements/ButtonNew/Button.stories.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { capitalize } from "lodash";
+import { useState } from "react";
+import { Button as RNButton } from "react-native";
+import { Button } from "./Button";
+import { CTAButton } from "./CTAButton";
+import { FollowButton } from "./FollowButton";
+import { LinkButton } from "./LinkButton";
+import { DataList, List } from "../../storybook/helpers";
+import { BellIcon, LinkIcon } from "../../svgs";
+import { Wrap } from "../../utils/Wrap";
+import { Box } from "../Box";
+import { Flex } from "../Flex";
+import { Spacer } from "../Spacer";
+import { LinkText } from "../Text";
+const sizes = ["small", "large"];
+const variants = [
+    "fillDark",
+    "fillLight",
+    "fillGray",
+    "fillSuccess",
+    "outline",
+    "outlineGray",
+    "outlineLight",
+    "text",
+];
+export default {
+    title: "ButtonNew",
+    component: Button,
+};
+export const Sizes = () => (_jsx(DataList, { data: sizes, renderItem: ({ item: size }) => (_jsx(Button, { size: size, onPress: () => console.log(`tapped ${size}`), children: capitalize(size) })) }));
+export const States = () => {
+    const [variant, setVariant] = useState("fillDark");
+    return (_jsxs(List, { children: [_jsx(Flex, { flexDirection: "row", flexWrap: "wrap", px: 2, children: variants.map((variant) => (_jsx(LinkText, { color: "orange", onPress: () => setVariant(variant), mr: "2", children: variant }))) }), _jsx(Button, { variant: variant, onPress: () => console.log(`tapped`), longestText: "Regular YEA", children: "Regular" }), _jsx(Button, { variant: variant, onPress: () => console.log(`tapped`), disabled: true, children: "Disabled" }), _jsx(Button, { variant: variant, onPress: () => console.log(`tapped`), loading: true, children: "Loading" }), _jsx(Button, { variant: variant, onPress: () => console.log(`tapped`), testOnly_pressed: true, children: "Pressed" })] }));
+};
+export const Variants = () => (_jsx(DataList, { data: variants, renderItem: ({ item: variant }) => (_jsx(Wrap, { if: variant === "outlineLight" || variant === "fillLight", children: _jsx(Flex, { backgroundColor: "pink", p: 1, children: _jsx(Wrap.Content, { children: _jsx(Button, { variant: variant, onPress: () => console.log(`tapped ${variant}`), children: variant }) }) }) })) }));
+export const VariantsLoading = () => (_jsx(DataList, { data: variants, renderItem: ({ item: variant }) => (_jsx(Button, { variant: variant, loading: true, onPress: () => console.log(`tapped ${variant}`), children: variant })) }));
+export const VariantsDisabled = () => (_jsx(DataList, { data: variants, renderItem: ({ item: variant }) => (_jsx(Wrap, { if: variant === "outlineLight", children: _jsx(Flex, { backgroundColor: "black100", p: 1, children: _jsx(Wrap.Content, { children: _jsx(Button, { variant: variant, disabled: true, onPress: () => console.log(`tapped ${variant}`), children: variant }) }) }) })) }));
+export const TheFollowButton = () => {
+    const [follow, setFollow] = useState(true);
+    return (_jsxs(List, { children: [_jsx(FollowButton, { isFollowed: follow, onPress: () => setFollow((v) => !v) }), _jsx(FollowButton, { followCount: 4, isFollowed: follow, onPress: () => setFollow((v) => !v) }), _jsx(FollowButton, { followCount: 40, isFollowed: follow, onPress: () => setFollow((v) => !v) }), _jsx(FollowButton, { followCount: 4000, isFollowed: follow, onPress: () => setFollow((v) => !v) }), _jsx(FollowButton, { followCount: 400000, isFollowed: follow, onPress: () => setFollow((v) => !v) }), _jsx(FollowButton, { followCount: 40000000, isFollowed: follow, onPress: () => setFollow((v) => !v) }), _jsx(FollowButton, { followCount: 4000000000, isFollowed: follow, onPress: () => setFollow((v) => !v) })] }));
+};
+export const TheCTAButton = () => (_jsx(List, { children: _jsx(CTAButton, { onPress: () => console.log("pressed"), children: "cta button" }) }));
+export const TheLinkButton = () => (_jsx(List, { children: _jsx(LinkButton, { onPress: () => console.log("pressed"), children: "LinkButton" }) }));
+export const Miscellaneous = () => (_jsxs(List, { children: [_jsx(Button, { loading: true, disabled: true, children: "loading and disabled" }), _jsx(Button, { loading: true, disabled: true, icon: _jsx(LinkIcon, {}), children: "loading and disabled with icon" }), _jsx(Button, { block: true, children: "block" }), _jsx(Flex, { backgroundColor: "orange", width: 400, height: 80, alignItems: "center", justifyContent: "center", children: _jsx(Button, { variant: "fillLight", icon: _jsx(LinkIcon, {}), children: "left icon" }) }), _jsx(Button, { icon: _jsx(LinkIcon, { fill: "white100" }), iconPosition: "right", children: "right icon" }), _jsx(Button, { size: "small", icon: _jsx(LinkIcon, { fill: "white100" }), iconPosition: "right", children: "Right Icon Small" }), _jsx(Button, { variant: "fillDark", size: "small", icon: _jsx(BellIcon, { fill: "white100", width: "16px", height: "16px" }), children: "Create Alert" }), _jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 2, height: "100%", backgroundColor: "green100" }), _jsxs(Box, { children: [_jsx(Button, { size: "small", icon: _jsx(LinkIcon, { fill: "white100" }), iconPosition: "right", longestText: "this is a very long text", children: "shortest text" }), _jsx(Spacer, { y: 1 }), _jsx(Button, { size: "small", icon: _jsx(LinkIcon, { fill: "white100" }), iconPosition: "right", longestText: "this is a very long text", children: "this is a very long text" })] }), _jsx(Box, { width: 2, height: "100%", backgroundColor: "green100" })] }), _jsx(Button, { icon: _jsx(LinkIcon, { fill: "white100" }), block: true, iconPosition: "left-start", children: "left-start aligned icon" })] }));
+export const Playground = () => {
+    const [loading, setLoading] = useState(false);
+    const [disabled, setDisabled] = useState(true);
+    const [block, setBlock] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(RNButton, { title: "loading", onPress: () => setLoading((v) => !v) }), _jsx(RNButton, { title: "disabled", onPress: () => setDisabled((v) => !v) }), _jsx(RNButton, { title: "block", onPress: () => setBlock((v) => !v) }), _jsx(List, { children: _jsxs(Button, { loading: loading, disabled: disabled, block: block, longestText: "loading false, disabled false, block false", children: ["loading ", loading ? "true" : "false", ", disabled ", disabled ? "true" : "false", ", block", " ", block ? "true" : "false"] }) })] }));
+};
+export const SpacingAround = () => (_jsxs(Box, { children: [_jsx(Button, { m: 2, children: "wow 1" }), _jsx(Button, { children: "wow 2" })] }));

package/dist/elements/ButtonNew/Button.tests.d.ts

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

package/dist/elements/ButtonNew/Button.tests.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent } from "@testing-library/react-native";
+import { Button } from "./Button";
+import { renderWithWrappers } from "../../utils/tests/renderWithWrappers";
+import { Spinner } from "../Spinner";
+describe("Button", () => {
+    it("shows spinner if loading is true", () => {
+        const { UNSAFE_queryAllByType } = renderWithWrappers(_jsx(Button, { loading: true, children: "wow" }));
+        expect(UNSAFE_queryAllByType(Spinner)).toHaveLength(1);
+    });
+    it("invokes the onClick callback", () => {
+        const onPress = jest.fn();
+        const { getByTestId } = renderWithWrappers(_jsx(Button, { testID: "the-button", onPress: onPress, children: "wow" }));
+        fireEvent.press(getByTestId("the-button"));
+        expect(onPress).toHaveBeenCalled();
+    });
+    it("does not invoke the onClick callback if loading is true", () => {
+        const onPress = jest.fn();
+        const { getByTestId } = renderWithWrappers(_jsx(Button, { testID: "the-button", onPress: onPress, loading: true, children: "wow" }));
+        fireEvent.press(getByTestId("the-button"));
+        expect(onPress).not.toHaveBeenCalled();
+    });
+    it("does not invoke the onClick callback if disabled is true", () => {
+        const onPress = jest.fn();
+        const { getByTestId } = renderWithWrappers(_jsx(Button, { testID: "the-button", onPress: onPress, disabled: true, children: "wow" }));
+        fireEvent.press(getByTestId("the-button"));
+        expect(onPress).not.toHaveBeenCalled();
+    });
+});

package/dist/elements/ButtonNew/CTAButton.d.ts

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

package/dist/elements/ButtonNew/CTAButton.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "./Button";
+export const CTAButton = (props) => _jsx(Button, { block: true, haptic: true, ...props });

package/dist/elements/ButtonNew/FollowButton.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ButtonProps } from "../Button";
+type FollowButtonProps = Omit<ButtonProps, "variant" | "size" | "longestText" | "icon" | "children"> & {
+    isFollowed: boolean;
+    followCount?: number;
+    longestText?: string;
+};
+export declare const FollowButton: ({ isFollowed, followCount, longestText, loading, ...restProps }: FollowButtonProps) => JSX.Element;
+export {};

package/dist/elements/ButtonNew/FollowButton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon } from "../../svgs/CheckIcon";
+import { formatLargeNumber } from "../../utils/formatLargeNumber";
+import { Button } from "../Button";
+import { Text } from "../Text";
+export const FollowButton = ({ isFollowed, followCount, longestText, loading, ...restProps }) => {
+    return (_jsx(Button, { variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: longestText ? longestText : "Following", icon: isFollowed && !loading && _jsx(CheckIcon, { fill: "black60", width: "16px", height: "16px" }), loading: loading, ...restProps, children: !loading && (_jsxs(_Fragment, { children: [_jsx(Text, { variant: "xs", children: isFollowed ? "Following" : "Follow" }), !!followCount && followCount > 1 && (_jsx(_Fragment, { children: _jsx(Text, { variant: "xs", color: "black60", children: " " + formatLargeNumber(followCount, 1) }) }))] })) }));
+};

package/dist/elements/ButtonNew/LinkButton.d.ts

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

package/dist/elements/ButtonNew/LinkButton.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "../Text";
+import { Touchable } from "../Touchable";
+export const LinkButton = (props) => (_jsx(Touchable, { onPress: props.onPress, children: _jsx(Text, { underline: true, ...props }) }));

package/dist/elements/ButtonNew/colors.d.ts

@@ -0,0 +1,9 @@
+import { ButtonProps } from "./Button";
+import { NoUndefined } from "../../utils/types";
+type State = "disabled" | "pressed" | "active";
+export declare const useColorsForVariantAndState: () => Record<NoUndefined<ButtonProps["variant"]>, Record<State, {
+    bg: string;
+    border: string;
+    text: string;
+}>>;
+export {};

package/dist/elements/ButtonNew/colors.js

@@ -0,0 +1,74 @@
+import { useColor } from "../../utils/hooks";
+export const useColorsForVariantAndState = () => {
+    const color = useColor();
+    return {
+        fillDark: {
+            disabled: { bg: color("black30"), border: color("black30"), text: color("onPrimaryHigh") },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("onPrimaryHigh") },
+            active: { bg: color("primary"), border: color("primary"), text: color("onPrimaryHigh") },
+        },
+        fillLight: {
+            disabled: { bg: color("black30"), border: color("black30"), text: color("onPrimaryHigh") },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("onPrimaryHigh") },
+            active: {
+                bg: color("white100"),
+                border: color("white100"),
+                text: color("black100"),
+            },
+        },
+        fillGray: {
+            disabled: { bg: color("black30"), border: color("black30"), text: color("white100") },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
+            active: { bg: color("black10"), border: color("black10"), text: color("black100") },
+        },
+        fillSuccess: {
+            disabled: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
+            active: { bg: color("blue10"), border: color("blue10"), text: color("white100") },
+        },
+        outline: {
+            disabled: {
+                bg: color("background"),
+                border: color("onBackgroundLow"),
+                text: color("onBackgroundLow"),
+            },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
+            active: {
+                bg: color("background"),
+                border: color("onBackgroundMedium"),
+                text: color("onBackgroundHigh"),
+            },
+        },
+        outlineGray: {
+            disabled: {
+                bg: color("white100"),
+                border: color("black30"),
+                text: color("black30"),
+            },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
+            active: {
+                bg: color("white100"),
+                border: color("black30"),
+                text: color("black100"),
+            },
+        },
+        outlineLight: {
+            disabled: {
+                bg: "rgba(0, 0, 0, 0)",
+                border: color("black30"),
+                text: color("black30"),
+            },
+            pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
+            active: {
+                bg: "rgba(0, 0, 0, 0)",
+                border: color("white100"),
+                text: color("white100"),
+            },
+        },
+        text: {
+            disabled: { bg: "rgba(0, 0, 0, 0)", border: "rgba(0, 0, 0, 0)", text: color("black30") },
+            pressed: { bg: color("black10"), border: color("black10"), text: color("blue100") },
+            active: { bg: "rgba(0, 0, 0, 0)", border: "rgba(0, 0, 0, 0)", text: color("black100") },
+        },
+    };
+};

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

@@ -0,0 +1,4 @@
+export * from "./Button";
+export * from "./CTAButton";
+export * from "./FollowButton";
+export * from "./LinkButton";

package/dist/elements/ButtonNew/index.js

@@ -0,0 +1,4 @@
+export * from "./Button";
+export * from "./CTAButton";
+export * from "./FollowButton";
+export * from "./LinkButton";

package/dist/elements/Checkbox/Check.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const CHECK_SIZE = 22;
+export interface CheckProps {
+    disabled?: boolean;
+    error?: boolean;
+    hover?: boolean;
+    selected?: boolean;
+}
+/** Toggeable check mark */
+export declare const Check: React.FC<CheckProps>;

package/dist/elements/Checkbox/Check.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { themeGet } from "@styled-system/theme-get";
+import styled, { css } from "styled-components/native";
+import { CheckIcon } from "../../svgs/CheckIcon";
+import { Box } from "../Box";
+export const CHECK_SIZE = 22;
+const CHECK_MODES = {
+    default: {
+        resting: css `
+      background-color: ${themeGet("colors.white100")};
+      border-color: ${themeGet("colors.black10")};
+    `,
+        selected: css `
+      background-color: ${themeGet("colors.black100")};
+      border-color: ${themeGet("colors.black100")};
+    `,
+    },
+    disabled: {
+        resting: css `
+      background-color: ${themeGet("colors.black5")};
+      border-color: ${themeGet("colors.black10")};
+    `,
+        selected: css `
+      background-color: ${themeGet("colors.black30")};
+      border-color: ${themeGet("colors.black30")};
+    `,
+    },
+    error: {
+        resting: css `
+      background-color: ${themeGet("colors.white100")};
+      border-color: ${themeGet("colors.red100")};
+    `,
+        selected: css `
+      background-color: ${themeGet("colors.black100")};
+      border-color: ${themeGet("colors.black100")};
+    `,
+    },
+};
+/** Toggeable check mark */
+export const Check = ({ disabled, selected, ...rest }) => {
+    return (_jsx(Container, { disabled: disabled, selected: selected, ...rest, children: !!selected && _jsx(CheckIcon, { fill: "white100" }) }));
+};
+const Container = styled(Box) `
+  width: ${CHECK_SIZE}px;
+  height: ${CHECK_SIZE}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid;
+  border-radius: 1px;
+
+  ${(props) => {
+    const mode = (() => {
+        switch (true) {
+            case props.error:
+                return CHECK_MODES.error;
+            case props.disabled:
+                return CHECK_MODES.disabled;
+            default:
+                return CHECK_MODES.default;
+        }
+    })();
+    return props.selected ? mode.selected : mode.resting;
+}};
+`;

package/dist/elements/Checkbox/Checkbox.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { AccessibilityProps, Insets, TouchableWithoutFeedbackProps } from "react-native";
+import { FlexProps } from "../Flex";
+export interface CheckboxProps extends Omit<TouchableWithoutFeedbackProps, "hitSlop">, Omit<FlexProps, "hitSlop"> {
+    hitSlop?: Insets;
+    checked?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+    text?: React.ReactElement | string;
+    subtitle?: React.ReactElement | string;
+    children?: React.ReactElement | string;
+    checkboxAccessibilityProps?: AccessibilityProps;
+}
+export declare const Checkbox: React.FC<CheckboxProps>;
+interface CheckMarkProps {
+    size: number;
+}
+export declare const CheckMark: ({ size }: CheckMarkProps) => JSX.Element;
+export declare const DisabledMark: import("styled-components").StyledComponent<({ size }: CheckMarkProps) => JSX.Element, any, {}, never>;
+export {};