@artsy/palette-mobile 23.14.0 → 24.0.0

package/dist/elements/Popover/Popover.js

@@ -1,13 +1,42 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CloseIcon } from "@artsy/icons/native";
-import RNPopover from "react-native-popover-view";
-import { Easing } from "react-native-reanimated";
-import { useColor } from "../../utils/hooks";
-import { Flex } from "../Flex";
-import { Touchable } from "../Touchable";
-export const Popover = ({ variant = "dark", children, visible, onOpenComplete, onPressOutside, onDismiss, onCloseComplete, placement = "top", title, content, noCloseIcon, ...rest }) => {
-    const color = useColor();
-    const DROP_SHADOW = {
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popover = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var native_1 = require("@artsy/icons/native");
+var react_native_popover_view_1 = __importDefault(require("react-native-popover-view"));
+var react_native_reanimated_1 = require("react-native-reanimated");
+var hooks_1 = require("../../utils/hooks");
+var Flex_1 = require("../Flex");
+var Touchable_1 = require("../Touchable");
+var Popover = function (_a) {
+    var _b = _a.variant, variant = _b === void 0 ? "dark" : _b, children = _a.children, visible = _a.visible, onOpenComplete = _a.onOpenComplete, onPressOutside = _a.onPressOutside, onDismiss = _a.onDismiss, onCloseComplete = _a.onCloseComplete, _c = _a.placement, placement = _c === void 0 ? "top" : _c, title = _a.title, content = _a.content, noCloseIcon = _a.noCloseIcon, rest = __rest(_a, ["variant", "children", "visible", "onOpenComplete", "onPressOutside", "onDismiss", "onCloseComplete", "placement", "title", "content", "noCloseIcon"]);
+    var color = (0, hooks_1.useColor)();
+    var DROP_SHADOW = {
         shadowColor: color("mono100"),
         shadowOffset: {
             width: 0,
@@ -17,7 +46,7 @@ export const Popover = ({ variant = "dark", children, visible, onOpenComplete, o
         shadowRadius: 2.62,
         elevation: 4,
     };
-    const POPOVER_VARIANTS = {
+    var POPOVER_VARIANTS = {
         light: {
             backgroundColor: color("mono0"),
             fill: "mono100",
@@ -28,9 +57,10 @@ export const Popover = ({ variant = "dark", children, visible, onOpenComplete, o
             fill: "mono0",
         },
     };
-    const style = POPOVER_VARIANTS[variant];
-    return (_jsx(RNPopover, { backgroundStyle: { opacity: 0.5, backgroundColor: color("mono100") }, popoverStyle: [{ backgroundColor: style.backgroundColor }, style.shadow], from: children, isVisible: visible, onCloseComplete: onCloseComplete, onOpenComplete: onOpenComplete, onRequestClose: onPressOutside, placement: placement, arrowSize: { height: 11, width: 22 }, animationConfig: {
+    var style = POPOVER_VARIANTS[variant];
+    return ((0, jsx_runtime_1.jsx)(react_native_popover_view_1.default, __assign({ backgroundStyle: { opacity: 0.5, backgroundColor: color("mono100") }, popoverStyle: [{ backgroundColor: style.backgroundColor }, style.shadow], from: children, isVisible: visible, onCloseComplete: onCloseComplete, onOpenComplete: onOpenComplete, onRequestClose: onPressOutside, placement: placement, arrowSize: { height: 11, width: 22 }, animationConfig: {
             duration: 400,
-            easing: Easing.out(Easing.exp),
-        }, ...rest, children: _jsxs(Flex, { backgroundColor: POPOVER_VARIANTS[variant].backgroundColor, p: 1, children: [_jsxs(Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [title ? title : _jsx(Flex, {}), !noCloseIcon && (_jsx(Touchable, { onPress: onDismiss, accessibilityRole: "button", "aria-label": "Dismiss popover", children: _jsx(Flex, { ml: 0.5, children: _jsx(CloseIcon, { width: 18, height: 18, fill: style.fill }) }) }))] }), content] }) }));
+            easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.exp),
+        } }, rest, { children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { backgroundColor: POPOVER_VARIANTS[variant].backgroundColor, p: 1, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [title ? title : (0, jsx_runtime_1.jsx)(Flex_1.Flex, {}), !noCloseIcon && ((0, jsx_runtime_1.jsx)(Touchable_1.Touchable, { onPress: onDismiss, accessibilityRole: "button", "aria-label": "Dismiss popover", children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ml: 0.5, children: (0, jsx_runtime_1.jsx)(native_1.CloseIcon, { width: 18, height: 18, fill: style.fill }) }) }))] }), content] }) })));
 };
+exports.Popover = Popover;

package/dist/elements/Popover/Popover.stories.js

@@ -1,28 +1,34 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
-import { Popover } from "./Popover";
-import { Button } from "../Button";
-import { Flex } from "../Flex";
-import { Text } from "../Text";
-export default {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EdgePositions = exports.WithTitleAndOrContent = exports.Variants = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Popover_1 = require("./Popover");
+var Button_1 = require("../Button");
+var Flex_1 = require("../Flex");
+var Text_1 = require("../Text");
+exports.default = {
     title: "Popover",
 };
-export const Variants = () => {
-    const [visible, setVisible] = useState(null);
-    return (_jsxs(Flex, { flex: 1, alignSelf: "center", mt: 12, alignItems: "center", flexWrap: "wrap", children: [_jsx(Popover, { visible: visible === "top-dark", title: _jsx(Text, { color: "mono0", variant: "xs", children: "Popover Top Dark" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("top-dark"), children: "Top Dark" }) }), _jsx(Popover, { visible: visible === "bottom-dark", placement: "bottom", title: _jsx(Text, { color: "mono0", variant: "xs", children: "Popover Bottom Dark" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("bottom-dark"), children: "Bottom Dark" }) }), _jsx(Popover, { visible: visible === "top-light", placement: "top", variant: "light", title: _jsx(Text, { variant: "xs", children: "Popover Top Light" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("top-light"), children: "Top Light" }) }), _jsx(Popover, { visible: visible === "bottom-light", placement: "bottom", variant: "light", title: _jsx(Text, { variant: "xs", children: "Popover Bottom Light" }), onPressOutside: () => setVisible(null), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("bottom-light"), children: "Bottom Light" }) })] }));
+var Variants = function () {
+    var _a = (0, react_1.useState)(null), visible = _a[0], setVisible = _a[1];
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, alignSelf: "center", mt: 12, alignItems: "center", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(Popover_1.Popover, { visible: visible === "top-dark", title: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "mono0", variant: "xs", children: "Popover Top Dark" }), onPressOutside: function () { return setVisible(null); }, onDismiss: function () { return setVisible(null); }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { onPress: function () { return setVisible("top-dark"); }, children: "Top Dark" }) }), (0, jsx_runtime_1.jsx)(Popover_1.Popover, { visible: visible === "bottom-dark", placement: "bottom", title: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "mono0", variant: "xs", children: "Popover Bottom Dark" }), onPressOutside: function () { return setVisible(null); }, onDismiss: function () { return setVisible(null); }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { onPress: function () { return setVisible("bottom-dark"); }, children: "Bottom Dark" }) }), (0, jsx_runtime_1.jsx)(Popover_1.Popover, { visible: visible === "top-light", placement: "top", variant: "light", title: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: "Popover Top Light" }), onPressOutside: function () { return setVisible(null); }, onDismiss: function () { return setVisible(null); }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { onPress: function () { return setVisible("top-light"); }, children: "Top Light" }) }), (0, jsx_runtime_1.jsx)(Popover_1.Popover, { visible: visible === "bottom-light", placement: "bottom", variant: "light", title: (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", children: "Popover Bottom Light" }), onPressOutside: function () { return setVisible(null); }, onDismiss: function () { return setVisible(null); }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { onPress: function () { return setVisible("bottom-light"); }, children: "Bottom Light" }) })] }));
 };
-export const WithTitleAndOrContent = () => {
-    const [visible, setVisible] = useState(null);
-    return (_jsxs(Flex, { flex: 1, alignSelf: "center", mt: 12, alignItems: "center", flexWrap: "wrap", children: [_jsx(Popover, { visible: visible === "title", title: _jsx(Text, { weight: "medium", color: "mono0", children: "Popover title" }), content: _jsxs(_Fragment, { children: [_jsx(Text, { color: "mono0", children: "Popover descriptive text with some not so long long long body" }), _jsx(Text, { color: "mono0", children: "And some line break" })] }), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("title"), children: "Some title and description" }) }), _jsx(Popover, { visible: visible === "buttons", placement: "bottom", variant: "light", content: _jsxs(_Fragment, { children: [_jsx(Text, { weight: "medium", mb: 1, children: "Popover title" }), _jsx(Flex, { height: 80, backgroundColor: "mono30", mb: 1 }), _jsx(Text, { mb: 1, children: "Popover descriptive text" }), _jsxs(Flex, { flexDirection: "row", justifyContent: "flex-end", children: [_jsx(Button, { size: "small", variant: "outlineGray", children: "Learn more" }), _jsx(Button, { size: "small", ml: 1, onPress: () => setVisible(null), children: "Got it" })] })] }), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("buttons"), children: "Buttons and more content" }) }), _jsx(Popover, { visible: visible === "no-close", placement: "bottom", noCloseIcon: true, variant: "light", content: _jsxs(_Fragment, { children: [_jsx(Text, { weight: "medium", mb: 1, children: "Popover title?" }), _jsx(Flex, { height: 80, backgroundColor: "mono30", mb: 1 }), _jsx(Text, { mb: 1, children: "Popover descriptive text" }), _jsx(Button, { size: "small", onPress: () => setVisible(null), children: "Got it" })] }), onDismiss: () => setVisible(null), children: _jsx(Text, { onPress: () => setVisible("no-close"), children: "Content without close icon" }) })] }));
+exports.Variants = Variants;
+var WithTitleAndOrContent = function () {
+    var _a = (0, react_1.useState)(null), visible = _a[0], setVisible = _a[1];
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, alignSelf: "center", mt: 12, alignItems: "center", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(Popover_1.Popover, { visible: visible === "title", title: (0, jsx_runtime_1.jsx)(Text_1.Text, { weight: "medium", color: "mono0", children: "Popover title" }), content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { color: "mono0", children: "Popover descriptive text with some not so long long long body" }), (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "mono0", children: "And some line break" })] }), onDismiss: function () { return setVisible(null); }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { onPress: function () { return setVisible("title"); }, children: "Some title and description" }) }), (0, jsx_runtime_1.jsx)(Popover_1.Popover, { visible: visible === "buttons", placement: "bottom", variant: "light", content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { weight: "medium", mb: 1, children: "Popover title" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { height: 80, backgroundColor: "mono30", mb: 1 }), (0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, children: "Popover descriptive text" }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", justifyContent: "flex-end", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", variant: "outlineGray", children: "Learn more" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", ml: 1, onPress: function () { return setVisible(null); }, children: "Got it" })] })] }), onDismiss: function () { return setVisible(null); }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { onPress: function () { return setVisible("buttons"); }, children: "Buttons and more content" }) }), (0, jsx_runtime_1.jsx)(Popover_1.Popover, { visible: visible === "no-close", placement: "bottom", noCloseIcon: true, variant: "light", content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { weight: "medium", mb: 1, children: "Popover title?" }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { height: 80, backgroundColor: "mono30", mb: 1 }), (0, jsx_runtime_1.jsx)(Text_1.Text, { mb: 1, children: "Popover descriptive text" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", onPress: function () { return setVisible(null); }, children: "Got it" })] }), onDismiss: function () { return setVisible(null); }, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { onPress: function () { return setVisible("no-close"); }, children: "Content without close icon" }) })] }));
 };
-WithTitleAndOrContent.story = {
+exports.WithTitleAndOrContent = WithTitleAndOrContent;
+exports.WithTitleAndOrContent.story = {
     name: "With title and/or content",
 };
-export const EdgePositions = () => {
-    const [topVisible, setTopVisible] = useState(true);
-    const [bottomVisible, setBottomVisible] = useState(false);
-    return (_jsxs(Flex, { flex: 1, backgroundColor: "mono30", justifyContent: "space-between", px: 1, children: [_jsx(Flex, { backgroundColor: "mono0", width: 80, px: 1, children: _jsx(Popover, { visible: topVisible, placement: "bottom", onDismiss: () => setTopVisible(false), onCloseComplete: () => setBottomVisible(true), title: _jsx(Text, { color: "mono0", variant: "xs", children: "Top-Left" }), children: _jsx(Text, { children: "Top-left" }) }) }), _jsx(Flex, { backgroundColor: "mono0", width: 120, mb: 6, alignSelf: "flex-end", px: 1, children: _jsx(Popover, { visible: bottomVisible, onDismiss: () => setBottomVisible(false), title: _jsx(Text, { color: "mono0", variant: "xs", children: "Bottom-Right" }), children: _jsx(Text, { children: "Bottom-right" }) }) })] }));
+var EdgePositions = function () {
+    var _a = (0, react_1.useState)(true), topVisible = _a[0], setTopVisible = _a[1];
+    var _b = (0, react_1.useState)(false), bottomVisible = _b[0], setBottomVisible = _b[1];
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flex: 1, backgroundColor: "mono30", justifyContent: "space-between", px: 1, children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "mono0", width: 80, px: 1, children: (0, jsx_runtime_1.jsx)(Popover_1.Popover, { visible: topVisible, placement: "bottom", onDismiss: function () { return setTopVisible(false); }, onCloseComplete: function () { return setBottomVisible(true); }, title: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "mono0", variant: "xs", children: "Top-Left" }), children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Top-left" }) }) }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { backgroundColor: "mono0", width: 120, mb: 6, alignSelf: "flex-end", px: 1, children: (0, jsx_runtime_1.jsx)(Popover_1.Popover, { visible: bottomVisible, onDismiss: function () { return setBottomVisible(false); }, title: (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "mono0", variant: "xs", children: "Bottom-Right" }), children: (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Bottom-right" }) }) })] }));
 };
-EdgePositions.story = {
+exports.EdgePositions = EdgePositions;
+exports.EdgePositions.story = {
     name: "Edge positions",
 };

package/dist/elements/Popover/index.js

@@ -1 +1,17 @@
-export * from "./Popover";
+"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("./Popover"), exports);

package/dist/elements/ProgressBar/ProgressBar.js

@@ -1,29 +1,74 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
-import { useSpace } from "../../utils/hooks";
-import { useColor } from "../../utils/hooks/useColor";
-import { Flex } from "../Flex";
-const clamp = (num, min, max) => Math.max(min, Math.min(num, max));
-export const ProgressBar = ({ animationDuration = 200, backgroundColor = "mono30", height = 2, onCompletion, progress: unclampedProgress, trackColor = "blue100", style, progressBarStyle, }) => {
-    const color = useColor();
-    const space = useSpace();
-    const width = useSharedValue(0);
-    const progress = clamp(unclampedProgress, 0, 100);
-    const progressAnim = useAnimatedStyle(() => {
-        return { width: `${width.get()}%` };
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressBar = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+var hooks_1 = require("../../utils/hooks");
+var useColor_1 = require("../../utils/hooks/useColor");
+var Flex_1 = require("../Flex");
+var clamp = function (num, min, max) { return Math.max(min, Math.min(num, max)); };
+var ProgressBar = function (_a) {
+    var _b = _a.animationDuration, animationDuration = _b === void 0 ? 200 : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? "mono30" : _c, _d = _a.height, height = _d === void 0 ? 2 : _d, onCompletion = _a.onCompletion, unclampedProgress = _a.progress, _e = _a.trackColor, trackColor = _e === void 0 ? "blue100" : _e, style = _a.style, progressBarStyle = _a.progressBarStyle;
+    var color = (0, useColor_1.useColor)();
+    var space = (0, hooks_1.useSpace)();
+    var width = (0, react_native_reanimated_1.useSharedValue)(0);
+    var progress = clamp(unclampedProgress, 0, 100);
+    var progressAnim = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
+        return { width: "".concat(width.get(), "%") };
     });
-    const [onCompletionCalled, setOnCompletionCalled] = useState(false);
-    useEffect(() => {
-        width.set(() => withTiming(progress, { duration: animationDuration }));
+    var _f = (0, react_1.useState)(false), onCompletionCalled = _f[0], setOnCompletionCalled = _f[1];
+    (0, react_1.useEffect)(function () {
+        width.set(function () { return (0, react_native_reanimated_1.withTiming)(progress, { duration: animationDuration }); });
         if (progress === 100 && !onCompletionCalled) {
-            onCompletion?.();
+            onCompletion === null || onCompletion === void 0 ? void 0 : onCompletion();
             setOnCompletionCalled(true);
         }
     }, [progress]);
-    return (_jsx(Flex, { width: "10%", backgroundColor: backgroundColor, style: {
-            marginVertical: space(1),
-            width: "100%",
-            ...style,
-        }, children: _jsx(Animated.View, { testID: "progress-bar-track", style: [progressAnim, { height, backgroundColor: color(trackColor) }, progressBarStyle] }) }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { width: "10%", backgroundColor: backgroundColor, style: __assign({ marginVertical: space(1), width: "100%" }, style), children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { testID: "progress-bar-track", style: [progressAnim, { height: height, backgroundColor: color(trackColor) }, progressBarStyle] }) }));
 };
+exports.ProgressBar = ProgressBar;

package/dist/elements/ProgressBar/ProgressBar.stories.js

@@ -1,11 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ProgressBar } from "./";
-import { Flex } from "../Flex";
-import { Text } from "../Text";
-export default {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports._ProgressBar = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var _1 = require("./");
+var Flex_1 = require("../Flex");
+var Text_1 = require("../Text");
+exports.default = {
     title: "Progress Indicators",
 };
-export const _ProgressBar = () => (_jsxs(Flex, { p: 2, children: [_jsx(Text, { children: "10%" }), _jsx(ProgressBar, { progress: 10 }), _jsx(Text, { children: "20%" }), _jsx(ProgressBar, { progress: 20 }), _jsx(Text, { children: "50%" }), _jsx(ProgressBar, { progress: 50 })] }));
-_ProgressBar.story = {
+var _ProgressBar = function () { return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { p: 2, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "10%" }), (0, jsx_runtime_1.jsx)(_1.ProgressBar, { progress: 10 }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "20%" }), (0, jsx_runtime_1.jsx)(_1.ProgressBar, { progress: 20 }), (0, jsx_runtime_1.jsx)(Text_1.Text, { children: "50%" }), (0, jsx_runtime_1.jsx)(_1.ProgressBar, { progress: 50 })] })); };
+exports._ProgressBar = _ProgressBar;
+exports._ProgressBar.story = {
     name: "ProgressBar",
 };

package/dist/elements/ProgressBar/ProgressBar.tests.js

@@ -1,26 +1,51 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { waitFor } from "@testing-library/react-native";
-import { ProgressBar } from "./ProgressBar";
-import { renderWithWrappers } from "../../utils/tests/renderWithWrappers";
-describe("ProgressBar", () => {
-    const getWrapper = (props) => {
-        return renderWithWrappers(_jsx(ProgressBar, { ...props }));
-    };
-    it.skip("does not display the track view when progress is zero", async () => {
-        const wrapper = getWrapper({ progress: 0 });
-        const container = wrapper.getByTestId("progress-bar");
-        const track = wrapper.getByTestId("progress-bar-track");
-        expect(container.props.width).toEqual("100%");
-        // width of 0% is invisible
-        await waitFor(() => expect(track.props.style.width).toEqual("0%"));
+"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 ProgressBar_1 = require("./ProgressBar");
+var renderWithWrappers_1 = require("../../utils/tests/renderWithWrappers");
+describe("ProgressBar", function () {
+    it("renders the progress bar track", function () {
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(ProgressBar_1.ProgressBar, { progress: 50 }));
+        expect(react_native_1.screen.getByTestId("progress-bar-track")).toBeOnTheScreen();
     });
-    it.skip("display the track view when progress is above zero", async () => {
-        const wrapper = getWrapper({ progress: 50 });
-        const container = wrapper.getByTestId("progress-bar");
-        const track = wrapper.getByTestId("progress-bar-track");
-        expect(container.props.width).toEqual("100%");
-        // width of 50% is visible
-        // wait for animations to finish running
-        await waitFor(() => expect(track.props.style.width).toEqual("50%"));
+    it("applies the given height to the track", function () {
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(ProgressBar_1.ProgressBar, { progress: 50, height: 10 }));
+        expect(react_native_1.screen.getByTestId("progress-bar-track")).toHaveStyle({ height: 10 });
+    });
+    it("applies custom progressBarStyle to the track", function () {
+        (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(ProgressBar_1.ProgressBar, { progress: 50, progressBarStyle: { borderRadius: 4 } }));
+        expect(react_native_1.screen.getByTestId("progress-bar-track")).toHaveStyle({ borderRadius: 4 });
+    });
+    describe("onCompletion", function () {
+        it("is not called when progress is below 100", function () {
+            var onCompletion = jest.fn();
+            (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(ProgressBar_1.ProgressBar, { progress: 99, onCompletion: onCompletion }));
+            expect(onCompletion).not.toHaveBeenCalled();
+        });
+        it("is called when progress reaches 100", function () {
+            var onCompletion = jest.fn();
+            (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(ProgressBar_1.ProgressBar, { progress: 100, onCompletion: onCompletion }));
+            expect(onCompletion).toHaveBeenCalledTimes(1);
+        });
+        it("is called when progress exceeds 100, since progress is clamped", function () {
+            var onCompletion = jest.fn();
+            (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(ProgressBar_1.ProgressBar, { progress: 150, onCompletion: onCompletion }));
+            expect(onCompletion).toHaveBeenCalledTimes(1);
+        });
+        it("is called when progress updates to 100", function () {
+            var onCompletion = jest.fn();
+            var rerender = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(ProgressBar_1.ProgressBar, { progress: 50, onCompletion: onCompletion })).rerender;
+            expect(onCompletion).not.toHaveBeenCalled();
+            rerender((0, jsx_runtime_1.jsx)(ProgressBar_1.ProgressBar, { progress: 100, onCompletion: onCompletion }));
+            expect(onCompletion).toHaveBeenCalledTimes(1);
+        });
+        it("is only called once even if progress changes again", function () {
+            var onCompletion = jest.fn();
+            var rerender = (0, renderWithWrappers_1.renderWithWrappers)((0, jsx_runtime_1.jsx)(ProgressBar_1.ProgressBar, { progress: 100, onCompletion: onCompletion })).rerender;
+            rerender((0, jsx_runtime_1.jsx)(ProgressBar_1.ProgressBar, { progress: 50, onCompletion: onCompletion }));
+            rerender((0, jsx_runtime_1.jsx)(ProgressBar_1.ProgressBar, { progress: 100, onCompletion: onCompletion }));
+            expect(onCompletion).toHaveBeenCalledTimes(1);
+        });
     });
 });

package/dist/elements/ProgressBar/index.js

@@ -1 +1,17 @@
-export * from "./ProgressBar";
+"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("./ProgressBar"), exports);

package/dist/elements/Radio/RadioButton.js

@@ -1,30 +1,63 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { themeGet } from "@styled-system/theme-get";
-import { PixelRatio, StyleSheet, TouchableWithoutFeedback, View, } from "react-native";
-import styled from "styled-components/native";
-import { CssTransition } from "../../animation";
-import { useTheme } from "../../utils/hooks/useTheme";
-import { Flex } from "../Flex";
-import { Text } from "../Text";
-const RADIOBUTTON_SIZE = 20;
-const DURATION = 150;
-export const RadioButton = ({ accessibilityState, accessibilityLabel, block, disabled, error, onPress, selected, subtitle, text, textVariant = "sm-display", ...restProps }) => {
-    const { color, space } = useTheme();
-    const fontScale = PixelRatio.getFontScale();
-    const radioButtonSize = RADIOBUTTON_SIZE * fontScale;
-    const defaultRadioButtonStyle = {
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisabledDot = exports.RadioDot = exports.RadioButton = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var theme_get_1 = require("@styled-system/theme-get");
+var react_native_1 = require("react-native");
+var native_1 = __importDefault(require("styled-components/native"));
+var animation_1 = require("../../animation");
+var useTheme_1 = require("../../utils/hooks/useTheme");
+var Flex_1 = require("../Flex");
+var Text_1 = require("../Text");
+var RADIOBUTTON_SIZE = 20;
+var DURATION = 150;
+var RadioButton = function (_a) {
+    var accessibilityState = _a.accessibilityState, accessibilityLabel = _a.accessibilityLabel, block = _a.block, disabled = _a.disabled, error = _a.error, onPress = _a.onPress, selected = _a.selected, subtitle = _a.subtitle, text = _a.text, _b = _a.textVariant, textVariant = _b === void 0 ? "sm-display" : _b, restProps = __rest(_a, ["accessibilityState", "accessibilityLabel", "block", "disabled", "error", "onPress", "selected", "subtitle", "text", "textVariant"]);
+    var _c = (0, useTheme_1.useTheme)(), color = _c.color, space = _c.space;
+    var fontScale = react_native_1.PixelRatio.getFontScale();
+    var radioButtonSize = RADIOBUTTON_SIZE * fontScale;
+    var defaultRadioButtonStyle = {
         backgroundColor: color("mono0"),
         borderColor: color("mono30"),
     };
-    const selectedRadioButtonStyle = {
+    var selectedRadioButtonStyle = {
         backgroundColor: color("mono100"),
         borderColor: color("mono100"),
     };
-    const disabledRadioButtonStyle = {
+    var disabledRadioButtonStyle = {
         backgroundColor: color("mono5"),
         borderColor: color("mono10"),
     };
-    const radioButtonStyles = {
+    var radioButtonStyles = {
         default: {
             notSelected: defaultRadioButtonStyle,
             selected: selectedRadioButtonStyle,
@@ -34,49 +67,52 @@ export const RadioButton = ({ accessibilityState, accessibilityLabel, block, dis
             selected: selectedRadioButtonStyle,
         },
     };
-    const radioButtonStyle = disabled
+    var radioButtonStyle = disabled
         ? disabledRadioButtonStyle
         : radioButtonStyles[error ? "error" : "default"][selected ? "selected" : "notSelected"];
-    const textColor = error ? color("red100") : disabled ? color("mono30") : color("mono100");
-    const subtitleColor = error ? color("red100") : color("mono30");
-    const AnimatedDot = (_jsx(Flex, { mt: "2px", children: _jsx(CssTransition, { style: [
+    var textColor = error ? color("red100") : disabled ? color("mono30") : color("mono100");
+    var subtitleColor = error ? color("red100") : color("mono30");
+    var AnimatedDot = ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { mt: "2px", children: (0, jsx_runtime_1.jsx)(animation_1.CssTransition, { style: [
                 styles(fontScale).container,
                 { marginRight: space(1) * fontScale },
                 radioButtonStyle,
             ], animate: ["borderColor"], duration: DURATION, children: !!selected &&
-                (!!disabled ? (_jsx(DisabledDot, { size: radioButtonSize })) : (_jsx(RadioDot, { size: radioButtonSize }))) }) }));
-    return (_jsx(TouchableWithoutFeedback, { accessibilityRole: "radio", accessibilityLabel: accessibilityLabel, accessibilityState: accessibilityState, onPress: (event) => {
+                (!!disabled ? ((0, jsx_runtime_1.jsx)(exports.DisabledDot, { size: radioButtonSize })) : ((0, jsx_runtime_1.jsx)(exports.RadioDot, { size: radioButtonSize }))) }) }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { accessibilityRole: "radio", accessibilityLabel: accessibilityLabel, accessibilityState: accessibilityState, onPress: function (event) {
             if (disabled) {
                 return;
             }
-            onPress?.(event);
-        }, children: _jsxs(Flex, { ...restProps, children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", justifyContent: block ? "space-between" : "flex-start", width: block ? "100%" : undefined, children: [!block && AnimatedDot, _jsx(Flex, { justifyContent: "center", children: !!text && (_jsx(Text, { variant: textVariant, color: textColor, children: text })) }), block && AnimatedDot] }), _jsx(Flex, { ml: block ? 0 : `${(RADIOBUTTON_SIZE + space(1)) * fontScale}px`, mt: block ? 0 : 0.5, children: !!subtitle && (_jsx(Text, { variant: "xs", color: subtitleColor, children: subtitle })) })] }) }));
+            onPress === null || onPress === void 0 ? void 0 : onPress(event);
+        }, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, __assign({}, restProps, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", alignItems: "center", justifyContent: block ? "space-between" : "flex-start", width: block ? "100%" : undefined, children: [!block && AnimatedDot, (0, jsx_runtime_1.jsx)(Flex_1.Flex, { justifyContent: "center", children: !!text && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: textVariant, color: textColor, children: text })) }), block && AnimatedDot] }), (0, jsx_runtime_1.jsx)(Flex_1.Flex, { ml: block ? 0 : "".concat((RADIOBUTTON_SIZE + space(1)) * fontScale, "px"), mt: block ? 0 : 0.5, children: !!subtitle && ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: "xs", color: subtitleColor, children: subtitle })) })] })) }));
 };
+exports.RadioButton = RadioButton;
 // styled-component does not have support for Animated.View
-const styles = (fontScale) => StyleSheet.create({
-    container: {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        borderWidth: 1,
-        borderStyle: "solid",
-        height: RADIOBUTTON_SIZE * fontScale,
-        width: RADIOBUTTON_SIZE * fontScale,
-        borderRadius: (RADIOBUTTON_SIZE * fontScale) / 2,
-    },
-});
+var styles = function (fontScale) {
+    return react_native_1.StyleSheet.create({
+        container: {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            borderWidth: 1,
+            borderStyle: "solid",
+            height: RADIOBUTTON_SIZE * fontScale,
+            width: RADIOBUTTON_SIZE * fontScale,
+            borderRadius: (RADIOBUTTON_SIZE * fontScale) / 2,
+        },
+    });
+};
 // This component represents the white ● mark in CSS. We are not using styled-system since it's easier to specify raw CSS
 // properties with styled-component.
 // Height, Width, and Border Radius calculations are used to maintain the size of the white dot when scaling
-export const RadioDot = ({ size }) => {
-    return (_jsx(View, { style: {
+var RadioDot = function (_a) {
+    var size = _a.size;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
             height: size * 0.625,
             width: size * 0.625,
             borderRadius: size * 0.3125,
             backgroundColor: "white",
         } }));
 };
-export const DisabledDot = styled(RadioDot) `
-  border-bottom-color: ${themeGet("colors.mono30")};
-  border-left-color: ${themeGet("colors.mono30")};
-`;
+exports.RadioDot = RadioDot;
+exports.DisabledDot = (0, native_1.default)(exports.RadioDot)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-bottom-color: ", ";\n  border-left-color: ", ";\n"], ["\n  border-bottom-color: ", ";\n  border-left-color: ", ";\n"])), (0, theme_get_1.themeGet)("colors.mono30"), (0, theme_get_1.themeGet)("colors.mono30"));
+var templateObject_1;

package/dist/elements/Radio/RadioButton.stories.js

@@ -1,24 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { RadioButton } from "./RadioButton";
-import { List } from "../../storybook/helpers";
-import { Flex } from "../Flex";
-export default {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var RadioButton_1 = require("./RadioButton");
+var helpers_1 = require("../../storybook/helpers");
+var Flex_1 = require("../Flex");
+exports.default = {
     title: "RadioButton",
 };
-export const Default = () => {
-    const [metric, setMetric] = useState("cm");
-    return (_jsxs(List, { contentContainerStyle: {
+var Default = function () {
+    var _a = (0, react_1.useState)("cm"), metric = _a[0], setMetric = _a[1];
+    return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { contentContainerStyle: {
             marginHorizontal: 20,
             justifyContent: "flex-start",
             alignItems: "flex-start",
-        }, children: [_jsxs(Flex, { flexDirection: "row", gap: 2, children: [_jsx(RadioButton, { onPress: () => {
+        }, children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "row", gap: 2, children: [(0, jsx_runtime_1.jsx)(RadioButton_1.RadioButton, { onPress: function () {
                             setMetric("cm");
-                        }, selected: metric === "cm", text: "centimeters" }), _jsx(RadioButton, { onPress: () => {
+                        }, selected: metric === "cm", text: "centimeters" }), (0, jsx_runtime_1.jsx)(RadioButton_1.RadioButton, { onPress: function () {
                             setMetric("in");
-                        }, selected: metric === "in", text: "inches" })] }), _jsxs(Flex, { children: [_jsx(RadioButton, { onPress: () => {
+                        }, selected: metric === "in", text: "inches" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { children: [(0, jsx_runtime_1.jsx)(RadioButton_1.RadioButton, { onPress: function () {
                             setMetric("cm");
-                        }, block: true, selected: metric === "cm", text: "Centimeters" }), _jsx(RadioButton, { onPress: () => {
+                        }, block: true, selected: metric === "cm", text: "Centimeters" }), (0, jsx_runtime_1.jsx)(RadioButton_1.RadioButton, { onPress: function () {
                             setMetric("in");
                         }, block: true, selected: metric === "in", text: "Inches" })] })] }));
 };
+exports.Default = Default;