@artsy/palette-mobile 23.14.0 → 24.0.0

package/dist/elements/ButtonNew/Button.js

@@ -1,34 +1,98 @@
-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(() => {
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var react_native_haptic_feedback_1 = __importDefault(require("react-native-haptic-feedback"));
+var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+var colors_1 = require("./colors");
+var MeasuredView_1 = require("../../elements/MeasuredView");
+var Box_1 = require("../Box");
+var Flex_1 = require("../Flex");
+var Spacer_1 = require("../Spacer");
+var Spinner_1 = require("../Spinner");
+var Text_1 = require("../Text");
+var ANIMATION_DURATION = 150;
+var Button = function (_a) {
+    var children = _a.children, disabledProp = _a.disabled, haptic = _a.haptic, icon = _a.icon, _b = _a.iconPosition, iconPosition = _b === void 0 ? "left" : _b, loadingProp = _a.loading, block = _a.block, longestText = _a.longestText, onPress = _a.onPress, _c = _a.size, size = _c === void 0 ? "large" : _c, _d = _a.variant, variant = _d === void 0 ? "fillDark" : _d, testOnly_pressed = _a.testOnly_pressed, testID = _a.testID, hitSlop = _a.hitSlop, restProps = __rest(_a, ["children", "disabled", "haptic", "icon", "iconPosition", "loading", "block", "longestText", "onPress", "size", "variant", "testOnly_pressed", "testID", "hitSlop"]);
+    var _e = useStateWithProp(!!disabledProp), disabled = _e[0], _setDisabled = _e[1], _disabledV = _e[2];
+    var _f = useStateWithProp(!!loadingProp), loading = _f[0], _setLoading = _f[1], _loadingV = _f[2];
+    var _g = useStateWithProp(!!testOnly_pressed), _pressed = _g[0], setPressed = _g[1], pressedV = _g[2];
+    var pressAnimationProgress = (0, react_native_reanimated_1.useSharedValue)(0);
+    (0, react_native_reanimated_1.useAnimatedReaction)(function () {
         return pressedV.value;
-    }, (pressedVal) => {
-        return pressAnimationProgress.set(() => withTiming(pressedVal, {
-            duration: ANIMATION_DURATION,
-        }));
+    }, function (pressedVal) {
+        return pressAnimationProgress.set(function () {
+            return (0, react_native_reanimated_1.withTiming)(pressedVal, {
+                duration: ANIMATION_DURATION,
+            });
+        });
     });
-    const textStyle = { fontSize: useTextStyleForPalette(size === "small" ? "xs" : "sm").fontSize };
-    const [longestTextMeasurements, setLongestTextMeasurements] = useState({
+    var textStyle = { fontSize: (0, Text_1.useTextStyleForPalette)(size === "small" ? "xs" : "sm").fontSize };
+    var _h = (0, react_1.useState)({
         width: 0,
         height: 0,
-    });
-    const height = (() => {
+    }), longestTextMeasurements = _h[0], setLongestTextMeasurements = _h[1];
+    var height = (function () {
         switch (size) {
             case "small":
                 return 30;
@@ -36,8 +100,8 @@ export const Button = ({ children, disabled: disabledProp, haptic, icon, iconPos
                 return 50;
         }
     })();
-    const spinnerColor = variant === "text" ? "blue100" : "mono0";
-    const handlePress = (event) => {
+    var spinnerColor = variant === "text" ? "blue100" : "mono0";
+    var handlePress = function (event) {
         if (onPress === undefined || onPress === null) {
             return;
         }
@@ -45,13 +109,13 @@ export const Button = ({ children, disabled: disabledProp, haptic, icon, iconPos
             return;
         }
         if (haptic !== undefined) {
-            Haptic.trigger(haptic === true ? "impactLight" : haptic);
+            react_native_haptic_feedback_1.default.trigger(haptic === true ? "impactLight" : haptic);
         }
         onPress(event);
     };
-    const colorsForVariantAndState = useColorsForVariantAndState();
-    const containerColorsAnim = useAnimatedStyle(() => {
-        const colors = colorsForVariantAndState[variant];
+    var colorsForVariantAndState = (0, colors_1.useColorsForVariantAndState)();
+    var containerColorsAnim = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
+        var colors = colorsForVariantAndState[variant];
         if (disabled) {
             return {
                 backgroundColor: colors.disabled.bg,
@@ -59,42 +123,43 @@ export const Button = ({ children, disabled: disabledProp, haptic, icon, iconPos
             };
         }
         return {
-            backgroundColor: interpolateColor(pressAnimationProgress.get(), [0, 1], [colors.active.bg, colors.pressed.bg]),
-            borderColor: interpolateColor(pressAnimationProgress.get(), [0, 1], [colors.active.border, colors.pressed.border]),
+            backgroundColor: (0, react_native_reanimated_1.interpolateColor)(pressAnimationProgress.get(), [0, 1], [colors.active.bg, colors.pressed.bg]),
+            borderColor: (0, react_native_reanimated_1.interpolateColor)(pressAnimationProgress.get(), [0, 1], [colors.active.border, colors.pressed.border]),
         };
     });
-    const textAnim = useAnimatedStyle(() => {
-        const colors = colorsForVariantAndState[variant];
+    var textAnim = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
+        var colors = colorsForVariantAndState[variant];
         if (loading) {
             return { color: "rgba(0, 0, 0, 0)" };
         }
         return {
-            color: interpolateColor(pressAnimationProgress.get(), [0, 1], [colors.active.text, colors.pressed.text]),
+            color: (0, react_native_reanimated_1.interpolateColor)(pressAnimationProgress.get(), [0, 1], [colors.active.text, colors.pressed.text]),
             textDecorationLine: pressAnimationProgress.get() > 0 ? "underline" : "none",
         };
     });
-    return (_jsx(Pressable, { accessibilityLabel: restProps.accessibilityLabel, accessibilityRole: "button", accessibilityState: {
-            disabled,
-        }, disabled: disabled, onPressIn: () => {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityLabel: restProps.accessibilityLabel, accessibilityRole: "button", accessibilityState: {
+            disabled: disabled,
+        }, disabled: disabled, onPressIn: function () {
             if (loading) {
                 return;
             }
             setPressed(true);
-        }, onPressOut: () => {
+        }, onPressOut: function () {
             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] }) }) }) }) }));
+        }, onPress: handlePress, testID: testID, testOnly_pressed: testOnly_pressed, hitSlop: hitSlop, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, __assign({}, restProps, { height: height, width: block ? "100%" : undefined, borderRadius: 50, overflow: "hidden", children: (0, jsx_runtime_1.jsx)(AFlex, { borderWidth: 1, borderRadius: 50, overflow: "hidden", style: containerColorsAnim, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { height: "100%", mx: "25px", flexDirection: "row", alignItems: "center", justifyContent: "center", children: [iconPosition === "left-start" && !!icon ? ((0, jsx_runtime_1.jsxs)(Box_1.Box, { position: "absolute", left: 0, children: [icon, (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 0.5 })] })) : null, iconPosition === "left" && !!icon ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 0.5 })] })) : null, (0, jsx_runtime_1.jsx)(AText, { style: [{ width: Math.ceil(longestTextMeasurements.width) }, textStyle, textAnim], textAlign: "center", children: children }), (0, jsx_runtime_1.jsx)(MeasuredView_1.MeasuredView, { setMeasuredState: setLongestTextMeasurements, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "red", style: textStyle, children: longestText ? longestText : children }) }), iconPosition === "right" && !!icon ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { x: 0.5 }), icon] })) : null, loading ? ((0, jsx_runtime_1.jsx)(Box_1.Box, { position: "absolute", width: "100%", height: "100%", alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Spinner_1.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(() => {
+exports.Button = Button;
+var AText = react_native_reanimated_1.default.createAnimatedComponent(Text_1.Text);
+var AFlex = react_native_reanimated_1.default.createAnimatedComponent(Flex_1.Flex);
+var useStateWithProp = function (prop) {
+    var _a = (0, react_1.useState)(!!prop), state = _a[0], setState = _a[1];
+    (0, react_1.useEffect)(function () {
         setState(!!prop);
     }, [prop]);
-    const stateV = useDerivedValue(() => {
+    var stateV = (0, react_native_reanimated_1.useDerivedValue)(function () {
         if (!!state) {
             return 1;
         }

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

@@ -1,20 +1,23 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { BellStrokeIcon, LinkIcon } from "@artsy/icons/native";
-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 { 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 = [
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpacingAround = exports.Playground = exports.Miscellaneous = exports.TheLinkButton = exports.TheCTAButton = exports.TheFollowButton = exports.VariantsDisabled = exports.VariantsLoading = exports.Variants = exports.States = exports.Sizes = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var native_1 = require("@artsy/icons/native");
+var lodash_1 = require("lodash");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var Button_1 = require("./Button");
+var CTAButton_1 = require("./CTAButton");
+var FollowButton_1 = require("./FollowButton");
+var LinkButton_1 = require("./LinkButton");
+var helpers_1 = require("../../storybook/helpers");
+var Wrap_1 = require("../../utils/Wrap");
+var Box_1 = require("../Box");
+var Flex_1 = require("../Flex");
+var Spacer_1 = require("../Spacer");
+var Text_1 = require("../Text");
+var sizes = ["small", "large"];
+var variants = [
     "fillDark",
     "fillLight",
     "fillGray",
@@ -24,29 +27,52 @@ const variants = [
     "outlineLight",
     "text",
 ];
-export default {
+exports.default = {
     title: "ButtonNew",
-    component: Button,
+    component: Button_1.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" })] }));
+var Sizes = function () { return ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: sizes, renderItem: function (_a) {
+        var size = _a.item;
+        return ((0, jsx_runtime_1.jsx)(Button_1.Button, { size: size, onPress: function () { return console.log("tapped ".concat(size)); }, children: (0, lodash_1.capitalize)(size) }));
+    } })); };
+exports.Sizes = Sizes;
+var States = function () {
+    var _a = (0, react_1.useState)("fillDark"), variant = _a[0], setVariant = _a[1];
+    return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "row", flexWrap: "wrap", px: 2, children: variants.map(function (variant) { return ((0, jsx_runtime_1.jsx)(Text_1.LinkText, { color: "orange", onPress: function () { return setVariant(variant); }, mr: "2", children: variant })); }) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, onPress: function () { return console.log("tapped"); }, longestText: "Regular YEA", children: "Regular" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, onPress: function () { return console.log("tapped"); }, disabled: true, children: "Disabled" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, onPress: function () { return console.log("tapped"); }, loading: true, children: "Loading" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, onPress: function () { return 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: "mono100", 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) })] }));
+exports.States = States;
+var Variants = function () { return ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: variants, renderItem: function (_a) {
+        var variant = _a.item;
+        return ((0, jsx_runtime_1.jsx)(Wrap_1.Wrap, { if: variant === "outlineLight" || variant === "fillLight", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "pink", p: 1, children: (0, jsx_runtime_1.jsx)(Wrap_1.Wrap.Content, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, onPress: function () { return console.log("tapped ".concat(variant)); }, children: variant }) }) }) }));
+    } })); };
+exports.Variants = Variants;
+var VariantsLoading = function () { return ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: variants, renderItem: function (_a) {
+        var variant = _a.item;
+        return ((0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, loading: true, onPress: function () { return console.log("tapped ".concat(variant)); }, children: variant }));
+    } })); };
+exports.VariantsLoading = VariantsLoading;
+var VariantsDisabled = function () { return ((0, jsx_runtime_1.jsx)(helpers_1.DataList, { data: variants, renderItem: function (_a) {
+        var variant = _a.item;
+        return ((0, jsx_runtime_1.jsx)(Wrap_1.Wrap, { if: variant === "outlineLight", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "mono100", p: 1, children: (0, jsx_runtime_1.jsx)(Wrap_1.Wrap.Content, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: variant, disabled: true, onPress: function () { return console.log("tapped ".concat(variant)); }, children: variant }) }) }) }));
+    } })); };
+exports.VariantsDisabled = VariantsDisabled;
+var TheFollowButton = function () {
+    var _a = (0, react_1.useState)(true), follow = _a[0], setFollow = _a[1];
+    return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { isFollowed: follow, onPress: function () { return setFollow(function (v) { return !v; }); } }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 4, isFollowed: follow, onPress: function () { return setFollow(function (v) { return !v; }); } }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 40, isFollowed: follow, onPress: function () { return setFollow(function (v) { return !v; }); } }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 4000, isFollowed: follow, onPress: function () { return setFollow(function (v) { return !v; }); } }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 400000, isFollowed: follow, onPress: function () { return setFollow(function (v) { return !v; }); } }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 40000000, isFollowed: follow, onPress: function () { return setFollow(function (v) { return !v; }); } }), (0, jsx_runtime_1.jsx)(FollowButton_1.FollowButton, { followCount: 4000000000, isFollowed: follow, onPress: function () { return setFollow(function (v) { return !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: "mono0" }), iconPosition: "right", children: "right icon" }), _jsx(Button, { size: "small", icon: _jsx(LinkIcon, { fill: "mono0" }), iconPosition: "right", children: "Right Icon Small" }), _jsx(Button, { variant: "fillDark", size: "small", icon: _jsx(BellStrokeIcon, { fill: "mono0", 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: "mono0" }), iconPosition: "right", longestText: "this is a very long text", children: "shortest text" }), _jsx(Spacer, { y: 1 }), _jsx(Button, { size: "small", icon: _jsx(LinkIcon, { fill: "mono0" }), 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: "mono0" }), 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"] }) })] }));
+exports.TheFollowButton = TheFollowButton;
+var TheCTAButton = function () { return ((0, jsx_runtime_1.jsx)(helpers_1.List, { children: (0, jsx_runtime_1.jsx)(CTAButton_1.CTAButton, { onPress: function () { return console.log("pressed"); }, children: "cta button" }) })); };
+exports.TheCTAButton = TheCTAButton;
+var TheLinkButton = function () { return ((0, jsx_runtime_1.jsx)(helpers_1.List, { children: (0, jsx_runtime_1.jsx)(LinkButton_1.LinkButton, { onPress: function () { return console.log("pressed"); }, children: "LinkButton" }) })); };
+exports.TheLinkButton = TheLinkButton;
+var Miscellaneous = function () { return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { loading: true, disabled: true, children: "loading and disabled" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { loading: true, disabled: true, icon: (0, jsx_runtime_1.jsx)(native_1.LinkIcon, {}), children: "loading and disabled with icon" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { block: true, children: "block" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "orange", width: 400, height: 80, alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "fillLight", icon: (0, jsx_runtime_1.jsx)(native_1.LinkIcon, {}), children: "left icon" }) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { icon: (0, jsx_runtime_1.jsx)(native_1.LinkIcon, { fill: "mono0" }), iconPosition: "right", children: "right icon" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", icon: (0, jsx_runtime_1.jsx)(native_1.LinkIcon, { fill: "mono0" }), iconPosition: "right", children: "Right Icon Small" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "fillDark", size: "small", icon: (0, jsx_runtime_1.jsx)(native_1.BellStrokeIcon, { fill: "mono0", width: "16px", height: "16px" }), children: "Create Alert" }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { flexDirection: "row", children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { width: 2, height: "100%", backgroundColor: "green100" }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", icon: (0, jsx_runtime_1.jsx)(native_1.LinkIcon, { fill: "mono0" }), iconPosition: "right", longestText: "this is a very long text", children: "shortest text" }), (0, jsx_runtime_1.jsx)(Spacer_1.Spacer, { y: 1 }), (0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", icon: (0, jsx_runtime_1.jsx)(native_1.LinkIcon, { fill: "mono0" }), iconPosition: "right", longestText: "this is a very long text", children: "this is a very long text" })] }), (0, jsx_runtime_1.jsx)(Box_1.Box, { width: 2, height: "100%", backgroundColor: "green100" })] }), (0, jsx_runtime_1.jsx)(Button_1.Button, { icon: (0, jsx_runtime_1.jsx)(native_1.LinkIcon, { fill: "mono0" }), block: true, iconPosition: "left-start", children: "left-start aligned icon" })] })); };
+exports.Miscellaneous = Miscellaneous;
+var Playground = function () {
+    var _a = (0, react_1.useState)(false), loading = _a[0], setLoading = _a[1];
+    var _b = (0, react_1.useState)(true), disabled = _b[0], setDisabled = _b[1];
+    var _c = (0, react_1.useState)(false), block = _c[0], setBlock = _c[1];
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Button, { title: "loading", onPress: function () { return setLoading(function (v) { return !v; }); } }), (0, jsx_runtime_1.jsx)(react_native_1.Button, { title: "disabled", onPress: function () { return setDisabled(function (v) { return !v; }); } }), (0, jsx_runtime_1.jsx)(react_native_1.Button, { title: "block", onPress: function () { return setBlock(function (v) { return !v; }); } }), (0, jsx_runtime_1.jsx)(helpers_1.List, { children: (0, jsx_runtime_1.jsxs)(Button_1.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" })] }));
+exports.Playground = Playground;
+var SpacingAround = function () { return ((0, jsx_runtime_1.jsxs)(Box_1.Box, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { m: 2, children: "wow 1" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { children: "wow 2" })] })); };
+exports.SpacingAround = SpacingAround;

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

@@ -1,29 +1,31 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { fireEvent, screen } 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);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_1 = require("@testing-library/react-native");
+var Button_1 = require("./Button");
+var renderWithWrappers_1 = require("../../utils/tests/renderWithWrappers");
+var Spinner_1 = require("../Spinner");
+describe("Button", function () {
+    it("shows spinner if loading is true", function () {
+        var UNSAFE_queryAllByType = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Button_1.Button, { loading: true, children: "wow" })).UNSAFE_queryAllByType;
+        expect(UNSAFE_queryAllByType(Spinner_1.Spinner)).toHaveLength(1);
     });
-    it("invokes the onClick callback", () => {
-        const onPress = jest.fn();
-        renderWithWrappers(_jsx(Button, { testID: "the-button", onPress: onPress, children: "wow" }));
-        fireEvent.press(screen.getByTestId("the-button"));
+    it("invokes the onClick callback", function () {
+        var onPress = jest.fn();
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Button_1.Button, { testID: "the-button", onPress: onPress, children: "wow" }));
+        react_native_1.fireEvent.press(react_native_1.screen.getByTestId("the-button"));
         expect(onPress).toHaveBeenCalled();
     });
-    it("does not invoke the onClick callback if loading is true", () => {
-        const onPress = jest.fn();
-        renderWithWrappers(_jsx(Button, { testID: "the-button", onPress: onPress, loading: true, children: "wow" }));
-        fireEvent.press(screen.getByTestId("the-button"));
+    it("does not invoke the onClick callback if loading is true", function () {
+        var onPress = jest.fn();
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Button_1.Button, { testID: "the-button", onPress: onPress, loading: true, children: "wow" }));
+        react_native_1.fireEvent.press(react_native_1.screen.getByTestId("the-button"));
         expect(onPress).not.toHaveBeenCalled();
     });
-    it("does not invoke the onClick callback if disabled is true", () => {
-        const onPress = jest.fn();
-        renderWithWrappers(_jsx(Button, { testID: "the-button", onPress: onPress, disabled: true, children: "wow" }));
-        fireEvent.press(screen.getByTestId("the-button"));
+    it("does not invoke the onClick callback if disabled is true", function () {
+        var onPress = jest.fn();
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(Button_1.Button, { testID: "the-button", onPress: onPress, disabled: true, children: "wow" }));
+        react_native_1.fireEvent.press(react_native_1.screen.getByTestId("the-button"));
         expect(onPress).not.toHaveBeenCalled();
     });
 });

package/dist/elements/ButtonNew/CTAButton.js

@@ -1,3 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from "./Button";
-export const CTAButton = (props) => _jsx(Button, { block: true, haptic: true, ...props });
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CTAButton = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Button_1 = require("./Button");
+var CTAButton = function (props) { return (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ block: true, haptic: true }, props)); };
+exports.CTAButton = CTAButton;

package/dist/elements/ButtonNew/FollowButton.js

@@ -1,14 +1,41 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckmarkIcon } from "@artsy/icons/native";
-import { formatLargeNumber } from "../../utils/formatLargeNumber";
-import { Button } from "../Button";
-import { Text } from "../Text";
-export const FollowButton = ({ isFollowed, followCount, longestText, loading, ...restProps }) => {
-    const getLongestText = () => {
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FollowButton = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var native_1 = require("@artsy/icons/native");
+var formatLargeNumber_1 = require("../../utils/formatLargeNumber");
+var Button_1 = require("../Button");
+var Text_1 = require("../Text");
+var FollowButton = function (_a) {
+    var isFollowed = _a.isFollowed, followCount = _a.followCount, longestText = _a.longestText, loading = _a.loading, restProps = __rest(_a, ["isFollowed", "followCount", "longestText", "loading"]);
+    var getLongestText = function () {
         if (longestText) {
             return longestText;
         }
-        return `Following${!!followCount && followCount > 1 ? " " + formatLargeNumber(followCount, 1) : ""}`;
+        return "Following".concat(!!followCount && followCount > 1 ? " " + (0, formatLargeNumber_1.formatLargeNumber)(followCount, 1) : "");
     };
-    return (_jsx(Button, { variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: getLongestText(), icon: isFollowed && !loading && _jsx(CheckmarkIcon, { fill: "mono60", width: "16px", height: "16px" }), loading: loading, ...restProps, children: !loading && (_jsxs(_Fragment, { children: [_jsx(Text, { variant: "xs", children: isFollowed ? "Following" : "Follow" }), !!followCount && followCount > 1 && (_jsx(Text, { variant: "xs", color: "mono60", children: " " + formatLargeNumber(followCount, 1) }))] })) }));
+    return ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ variant: isFollowed ? "outline" : "outlineGray", size: "small", longestText: getLongestText(), icon: isFollowed && !loading && (0, jsx_runtime_1.jsx)(native_1.CheckmarkIcon, { fill: "mono60", width: "16px", height: "16px" }), loading: loading }, restProps, { children: !loading && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: isFollowed ? "Following" : "Follow" }), !!followCount && followCount > 1 && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: "mono60", children: " " + (0, formatLargeNumber_1.formatLargeNumber)(followCount, 1) }))] })) })));
 };
+exports.FollowButton = FollowButton;

package/dist/elements/ButtonNew/LinkButton.js

@@ -1,4 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Text } from "../Text";
-import { Touchable } from "../Touchable";
-export const LinkButton = (props) => (_jsx(Touchable, { accessibilityRole: "link", onPress: props.onPress, children: _jsx(Text, { underline: true, ...props }) }));
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkButton = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Text_1 = require("../Text");
+var Touchable_1 = require("../Touchable");
+var LinkButton = function (props) { return ((0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { accessibilityRole: "link", onPress: props.onPress, children: (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ underline: true }, props)) })); };
+exports.LinkButton = LinkButton;

package/dist/elements/ButtonNew/colors.js

@@ -1,6 +1,9 @@
-import { useColor } from "../../utils/hooks";
-export const useColorsForVariantAndState = () => {
-    const color = useColor();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useColorsForVariantAndState = void 0;
+var hooks_1 = require("../../utils/hooks");
+var useColorsForVariantAndState = function () {
+    var color = (0, hooks_1.useColor)();
     return {
         fillDark: {
             disabled: { bg: color("mono30"), border: color("mono30"), text: color("onPrimaryHigh") },
@@ -72,3 +75,4 @@ export const useColorsForVariantAndState = () => {
         },
     };
 };
+exports.useColorsForVariantAndState = useColorsForVariantAndState;

package/dist/elements/ButtonNew/index.js

@@ -1,4 +1,20 @@
-export * from "./Button";
-export * from "./CTAButton";
-export * from "./FollowButton";
-export * from "./LinkButton";
+"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("./Button"), exports);
+__exportStar(require("./CTAButton"), exports);
+__exportStar(require("./FollowButton"), exports);
+__exportStar(require("./LinkButton"), exports);