@artsy/palette-mobile 23.14.0 → 24.0.0

package/dist/elements/Spacer/Spacer.js

@@ -1,6 +1,35 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from "../Box";
+"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.Spacer = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var Box_1 = require("../Box");
 /**
  * Used to inject space where it's needed.
  */
-export const Spacer = ({ x, y, ...props }) => _jsx(Box, { ml: x, mt: y, ...props });
+var Spacer = function (_a) {
+    var x = _a.x, y = _a.y, props = __rest(_a, ["x", "y"]);
+    return (0, jsx_runtime_1.jsx)(Box_1.Box, __assign({ ml: x, mt: y }, props));
+};
+exports.Spacer = Spacer;

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

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

package/dist/elements/Spacer/index.js

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

package/dist/elements/Spinner/Spinner.js

@@ -1,14 +1,47 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef } from "react";
-import { Animated, Easing } from "react-native";
-import styled from "styled-components/native";
-import { useColor } from "../../utils/hooks";
+"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.Spinner = exports.getSize = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var native_1 = __importDefault(require("styled-components/native"));
+var hooks_1 = require("../../utils/hooks");
 /**
  * Returns width and height of spinner based on size
  * @param props
  */
-export const getSize = (props) => {
-    const base = { width: 25, height: 6 };
+var getSize = function (props) {
+    var _a, _b;
+    var base = { width: 25, height: 6 };
     switch (props.size) {
         case "small":
             return {
@@ -27,33 +60,36 @@ export const getSize = (props) => {
             };
         default:
             return {
-                width: props.width ?? 25,
-                height: props.height ?? 6,
+                width: (_a = props.width) !== null && _a !== void 0 ? _a : 25,
+                height: (_b = props.height) !== null && _b !== void 0 ? _b : 6,
             };
     }
 };
+exports.getSize = getSize;
 /**
  * Spinner component for React Native
  */
-export const Spinner = ({ size = "medium", color: theColor = "mono100", ...rest }) => {
-    const color = useColor();
-    const rotation = useMemo(() => new Animated.Value(0), []);
-    const animationRef = useRef(null);
-    useEffect(() => {
-        animationRef.current = Animated.loop(Animated.timing(rotation, {
+var Spinner = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? "medium" : _b, _c = _a.color, theColor = _c === void 0 ? "mono100" : _c, rest = __rest(_a, ["size", "color"]);
+    var color = (0, hooks_1.useColor)();
+    var rotation = (0, react_1.useMemo)(function () { return new react_native_1.Animated.Value(0); }, []);
+    var animationRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        animationRef.current = react_native_1.Animated.loop(react_native_1.Animated.timing(rotation, {
             toValue: 1,
             duration: 1000,
-            easing: Easing.linear,
+            easing: react_native_1.Easing.linear,
             useNativeDriver: true,
         }), {
             iterations: -1,
         });
         animationRef.current.start();
-        return () => {
-            animationRef.current.stop();
+        return function () {
+            var _a;
+            (_a = animationRef.current) === null || _a === void 0 ? void 0 : _a.stop();
         };
     }, []);
-    const style = [
+    var style = [
         {
             transform: [
                 {
@@ -66,19 +102,12 @@ export const Spinner = ({ size = "medium", color: theColor = "mono100", ...rest
         },
         rest.style,
     ];
-    return _jsx(Bar, { size: size, color: color(theColor), ...rest, style: style });
+    return (0, jsx_runtime_1.jsx)(Bar, __assign({ size: size, color: color(theColor) }, rest, { style: style }));
 };
+exports.Spinner = Spinner;
 /** Generic Spinner component */
-const Bar = styled(Animated.View) `
-  background: black;
-  position: absolute;
-
-  ${(props) => {
-    const { width, height } = getSize(props);
-    return `
-      background: ${props.color};
-      width: ${width}px;
-      height: ${height}px;
-    `;
-}};
-`;
+var Bar = (0, native_1.default)(react_native_1.Animated.View)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: black;\n  position: absolute;\n\n  ", ";\n"], ["\n  background: black;\n  position: absolute;\n\n  ", ";\n"])), function (props) {
+    var _a = (0, exports.getSize)(props), width = _a.width, height = _a.height;
+    return "\n      background: ".concat(props.color, ";\n      width: ").concat(width, "px;\n      height: ").concat(height, "px;\n    ");
+});
+var templateObject_1;

package/dist/elements/Spinner/index.js

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

package/dist/elements/Switch/Switch.js

@@ -1,27 +1,60 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Platform, Switch as RNSwitch } from "react-native";
-import { useColor } from "../../utils/hooks";
-export const Switch = ({ value, 
-// Regardless of the color scheme, the thumb and track colors are always white
-// @ts-expect-error
-thumbColorActive = Platform.OS === "ios" ? "white" : "blue100", 
-// Regardless of the color scheme, the thumb and track colors are always white
-// @ts-expect-error
-thumbColorInactive = Platform.OS === "ios" ? "white" : "mono10", trackColorActive = Platform.OS === "ios" ? "blue100" : "blue10", trackColorInactive = "mono30", disabled, ...restProps }) => {
-    const color = useColor();
-    let thumbColor = value ? color(thumbColorActive) : color(thumbColorInactive);
-    let trackColor = {
+"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.Switch = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_1 = require("react-native");
+var hooks_1 = require("../../utils/hooks");
+var Switch = function (_a) {
+    var value = _a.value, 
+    // Regardless of the color scheme, the thumb and track colors are always white
+    // @ts-expect-error
+    _b = _a.thumbColorActive, 
+    // Regardless of the color scheme, the thumb and track colors are always white
+    // @ts-expect-error
+    thumbColorActive = _b === void 0 ? react_native_1.Platform.OS === "ios" ? "white" : "blue100" : _b, 
+    // Regardless of the color scheme, the thumb and track colors are always white
+    // @ts-expect-error
+    _c = _a.thumbColorInactive, 
+    // Regardless of the color scheme, the thumb and track colors are always white
+    // @ts-expect-error
+    thumbColorInactive = _c === void 0 ? react_native_1.Platform.OS === "ios" ? "white" : "mono10" : _c, _d = _a.trackColorActive, trackColorActive = _d === void 0 ? react_native_1.Platform.OS === "ios" ? "blue100" : "blue10" : _d, _e = _a.trackColorInactive, trackColorInactive = _e === void 0 ? "mono30" : _e, disabled = _a.disabled, restProps = __rest(_a, ["value", "thumbColorActive", "thumbColorInactive", "trackColorActive", "trackColorInactive", "disabled"]);
+    var color = (0, hooks_1.useColor)();
+    var thumbColor = value ? color(thumbColorActive) : color(thumbColorInactive);
+    var trackColor = {
         false: color(trackColorInactive),
         true: color(trackColorActive),
     };
-    let iosBackground = color(trackColorInactive);
+    var iosBackground = color(trackColorInactive);
     if (disabled) {
-        thumbColor = Platform.OS === "ios" ? color("mono0") : color("mono30");
+        thumbColor = react_native_1.Platform.OS === "ios" ? color("mono0") : color("mono30");
         trackColor = {
             false: color("mono10"),
-            true: Platform.OS === "ios" ? color("mono30") : color("mono10"),
+            true: react_native_1.Platform.OS === "ios" ? color("mono30") : color("mono10"),
         };
         iosBackground = color("mono10");
     }
-    return (_jsx(RNSwitch, { accessibilityRole: "switch", value: value, disabled: disabled, thumbColor: thumbColor, trackColor: trackColor, ios_backgroundColor: iosBackground, ...restProps }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Switch, __assign({ accessibilityRole: "switch", value: value, disabled: disabled, thumbColor: thumbColor, trackColor: trackColor, ios_backgroundColor: iosBackground }, restProps)));
 };
+exports.Switch = Switch;

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

@@ -1,22 +1,39 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { Switch } from "./Switch";
-import { List } from "../../storybook/helpers";
-import { Flex } from "../Flex";
-import { Text } from "../Text";
-export default {
+"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.Variants = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Switch_1 = require("./Switch");
+var helpers_1 = require("../../storybook/helpers");
+var Flex_1 = require("../Flex");
+var Text_1 = require("../Text");
+exports.default = {
     title: "Switch",
-    component: Switch,
+    component: Switch_1.Switch,
 };
-export const Variants = () => {
-    const [switches, setSwitches] = useState([
+var Variants = function () {
+    var _a = (0, react_1.useState)([
         { id: 1, label: "Default colors", value: true },
         { id: 2, label: "disabled", value: false },
         { id: 3, label: "Custom #1", value: true },
         { id: 4, label: "Custom #2", value: false },
-    ]);
-    const handleSwitchChange = (id) => {
-        setSwitches((prevSwitches) => prevSwitches.map((sw) => (sw.id === id ? { ...sw, value: !sw.value } : sw)));
+    ]), switches = _a[0], setSwitches = _a[1];
+    var handleSwitchChange = function (id) {
+        setSwitches(function (prevSwitches) {
+            return prevSwitches.map(function (sw) { return (sw.id === id ? __assign(__assign({}, sw), { value: !sw.value }) : sw); });
+        });
     };
-    return (_jsxs(List, { children: [_jsxs(Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [_jsx(Text, { children: "Default State" }), _jsx(Switch, { value: switches[0].value, onValueChange: () => handleSwitchChange(1) })] }), _jsxs(Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [_jsx(Text, { children: "Disabled" }), _jsx(Switch, { disabled: true, value: switches[1].value, onValueChange: () => handleSwitchChange(2) })] }), _jsxs(Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [_jsx(Text, { children: "Custom Colors 1" }), _jsx(Switch, { value: switches[2].value, onValueChange: () => handleSwitchChange(3), trackColorActive: "red100", trackColorInactive: "green100", thumbColorActive: "yellow100", thumbColorInactive: "orange100" })] }), _jsxs(Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [_jsx(Text, { children: "Custom Colors 2" }), _jsx(Switch, { value: switches[3].value, onValueChange: () => handleSwitchChange(4), thumbColorActive: "yellow100", trackColorActive: "blue100", thumbColorInactive: "mono0", trackColorInactive: "red100" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(helpers_1.List, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Default State" }), (0, jsx_runtime_1.jsx)(Switch_1.Switch, { value: switches[0].value, onValueChange: function () { return handleSwitchChange(1); } })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Disabled" }), (0, jsx_runtime_1.jsx)(Switch_1.Switch, { disabled: true, value: switches[1].value, onValueChange: function () { return handleSwitchChange(2); } })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Custom Colors 1" }), (0, jsx_runtime_1.jsx)(Switch_1.Switch, { value: switches[2].value, onValueChange: function () { return handleSwitchChange(3); }, trackColorActive: "red100", trackColorInactive: "green100", thumbColorActive: "yellow100", thumbColorInactive: "orange100" })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { width: 200, flexDirection: "row", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "Custom Colors 2" }), (0, jsx_runtime_1.jsx)(Switch_1.Switch, { value: switches[3].value, onValueChange: function () { return handleSwitchChange(4); }, thumbColorActive: "yellow100", trackColorActive: "blue100", thumbColorInactive: "mono0", trackColorInactive: "red100" })] })] }));
 };
+exports.Variants = Variants;

package/dist/elements/Switch/index.js

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

package/dist/elements/Tabs/SubTabBar.js

@@ -1,31 +1,39 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { MotiView } from "moti";
-import { Platform } from "react-native";
-import { useCurrentTabScrollY, useHeaderMeasurements } from "react-native-collapsible-tab-view";
-import { useAnimatedStyle } from "react-native-reanimated";
-import { useSpace } from "../../utils/hooks/useSpace";
-import { Flex } from "../Flex";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SubTabBarIOS = exports.SubTabBarAndroid = exports.SubTabBar = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var moti_1 = require("moti");
+var react_native_1 = require("react-native");
+var react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
+var react_native_reanimated_1 = require("react-native-reanimated");
+var useSpace_1 = require("../../utils/hooks/useSpace");
+var Flex_1 = require("../Flex");
 /**
  * Use to position content directly below the tab bar, and for it to stick while
  * scrolling in the subview.
  *
  * Note: On Android, it will be static and will not stick to the top of the screen.
  */
-export const SubTabBar = ({ children }) => {
-    if (Platform.OS === "android") {
-        return _jsx(SubTabBarAndroid, { children: children });
+var SubTabBar = function (_a) {
+    var children = _a.children;
+    if (react_native_1.Platform.OS === "android") {
+        return (0, jsx_runtime_1.jsx)(exports.SubTabBarAndroid, { children: children });
     }
-    return _jsx(SubTabBarIOS, { children: children });
+    return (0, jsx_runtime_1.jsx)(exports.SubTabBarIOS, { children: children });
 };
-export const SubTabBarAndroid = ({ children }) => {
-    const space = useSpace();
-    return _jsx(Flex, { style: [{ zIndex: 1, marginHorizontal: -space(2) }], children: children });
+exports.SubTabBar = SubTabBar;
+var SubTabBarAndroid = function (_a) {
+    var children = _a.children;
+    var space = (0, useSpace_1.useSpace)();
+    return (0, jsx_runtime_1.jsx)(Flex_1.Flex, { style: [{ zIndex: 1, marginHorizontal: -space(2) }], children: children });
 };
-export const SubTabBarIOS = ({ children }) => {
-    const { top } = useHeaderMeasurements();
-    const scrollY = useCurrentTabScrollY();
-    const space = useSpace();
-    const style = useAnimatedStyle(() => {
+exports.SubTabBarAndroid = SubTabBarAndroid;
+var SubTabBarIOS = function (_a) {
+    var children = _a.children;
+    var top = (0, react_native_collapsible_tab_view_1.useHeaderMeasurements)().top;
+    var scrollY = (0, react_native_collapsible_tab_view_1.useCurrentTabScrollY)();
+    var space = (0, useSpace_1.useSpace)();
+    var style = (0, react_native_reanimated_1.useAnimatedStyle)(function () {
         return {
             transform: [
                 {
@@ -34,5 +42,6 @@ export const SubTabBarIOS = ({ children }) => {
             ],
         };
     }, []);
-    return _jsx(MotiView, { style: [style, { zIndex: 1, marginHorizontal: -space(2) }], children: children });
+    return (0, jsx_runtime_1.jsx)(moti_1.MotiView, { style: [style, { zIndex: 1, marginHorizontal: -space(2) }], children: children });
 };
+exports.SubTabBarIOS = SubTabBarIOS;

package/dist/elements/Tabs/TabFlashList.js

@@ -1,13 +1,25 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Tabs } from "react-native-collapsible-tab-view";
-import { useListenForTabContentScroll } from "./hooks/useListenForTabContentScroll";
-import { useSpace } from "../../utils/hooks/useSpace";
-export function TabFlashList(props) {
-    useListenForTabContentScroll();
-    const space = useSpace();
-    const contentContainerStyle = (props.contentContainerStyle ?? {});
-    return (_jsx(Tabs.FlashList, { contentContainerStyle: {
-            paddingHorizontal: space(2),
-            ...contentContainerStyle,
-        }, ...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.TabFlashList = TabFlashList;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
+var useListenForTabContentScroll_1 = require("./hooks/useListenForTabContentScroll");
+var useSpace_1 = require("../../utils/hooks/useSpace");
+function TabFlashList(props) {
+    var _a;
+    (0, useListenForTabContentScroll_1.useListenForTabContentScroll)();
+    var space = (0, useSpace_1.useSpace)();
+    var contentContainerStyle = ((_a = props.contentContainerStyle) !== null && _a !== void 0 ? _a : {});
+    return ((0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.Tabs.FlashList, __assign({ contentContainerStyle: __assign({ paddingHorizontal: space(2) }, contentContainerStyle) }, props)));
 }

package/dist/elements/Tabs/TabFlatList.js

@@ -1,13 +1,25 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Tabs } from "react-native-collapsible-tab-view";
-import { useListenForTabContentScroll } from "./hooks/useListenForTabContentScroll";
-import { useSpace } from "../../utils/hooks/useSpace";
-export function TabFlatList(props) {
-    useListenForTabContentScroll();
-    const space = useSpace();
-    const contentContainerStyle = (props.contentContainerStyle ?? {});
-    return (_jsx(Tabs.FlatList, { contentContainerStyle: {
-            marginHorizontal: space(2),
-            ...contentContainerStyle,
-        }, ...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.TabFlatList = TabFlatList;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
+var useListenForTabContentScroll_1 = require("./hooks/useListenForTabContentScroll");
+var useSpace_1 = require("../../utils/hooks/useSpace");
+function TabFlatList(props) {
+    var _a;
+    (0, useListenForTabContentScroll_1.useListenForTabContentScroll)();
+    var space = (0, useSpace_1.useSpace)();
+    var contentContainerStyle = ((_a = props.contentContainerStyle) !== null && _a !== void 0 ? _a : {});
+    return ((0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.Tabs.FlatList, __assign({ contentContainerStyle: __assign({ marginHorizontal: space(2) }, contentContainerStyle) }, props)));
 }

package/dist/elements/Tabs/TabMasonry.js

@@ -1,13 +1,25 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Tabs } from "react-native-collapsible-tab-view";
-import { useListenForTabContentScroll } from "./hooks/useListenForTabContentScroll";
-import { useSpace } from "../../utils/hooks/useSpace";
-export function TabMasonry(props) {
-    useListenForTabContentScroll();
-    const space = useSpace();
-    const contentContainerStyle = (props.contentContainerStyle ?? {});
-    return (_jsx(Tabs.FlashList, { masonry: true, contentContainerStyle: {
-            paddingHorizontal: space(2),
-            ...contentContainerStyle,
-        }, ...props, ref: props.innerRef }));
+"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.TabMasonry = TabMasonry;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_native_collapsible_tab_view_1 = require("react-native-collapsible-tab-view");
+var useListenForTabContentScroll_1 = require("./hooks/useListenForTabContentScroll");
+var useSpace_1 = require("../../utils/hooks/useSpace");
+function TabMasonry(props) {
+    var _a;
+    (0, useListenForTabContentScroll_1.useListenForTabContentScroll)();
+    var space = (0, useSpace_1.useSpace)();
+    var contentContainerStyle = ((_a = props.contentContainerStyle) !== null && _a !== void 0 ? _a : {});
+    return ((0, jsx_runtime_1.jsx)(react_native_collapsible_tab_view_1.Tabs.FlashList, __assign({ masonry: true, contentContainerStyle: __assign({ paddingHorizontal: space(2) }, contentContainerStyle) }, props, { ref: props.innerRef })));
 }