@artsy/palette-mobile 13.1.13 → 13.1.14

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

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { Color } from "@artsy/palette-tokens";
+import { SwitchProps as RNSwitchProps } from "react-native";
+type CustomSwitchProps = Omit<RNSwitchProps, "onValueChange" | "onChange" | "trackColor" | "thumbColor" | "ios_backgroundColor" | "thumbTintColor" | "tintColor" | "onTintColor">;
+export interface SwitchProps extends CustomSwitchProps {
+    onChange: (value: boolean) => void | Promise<void>;
+    /**
+     * The circular thumb's color on the 'ON' switch.
+     */
+    thumbColorActive?: Color;
+    /**
+     * The circular thumb's color on the 'OFF' switch.
+     */
+    thumbColorInactive?: Color;
+    /**
+     * The background's color on the 'ON' switch.
+     */
+    trackColorActive?: Color;
+    /**
+     * The background's color on the 'OFF' switch.
+     */
+    trackColorInactive?: Color;
+}
+export declare const Switch: ({ value, onChange, thumbColorActive, thumbColorInactive, trackColorActive, trackColorInactive, disabled, ...restProps }: SwitchProps) => JSX.Element;
+export {};

package/dist/elements/Switch/Switch.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const hooks_1 = require("../../utils/hooks");
+const Switch = ({ value, onChange, thumbColorActive = react_native_1.Platform.OS === "ios" ? "white100" : "blue100", thumbColorInactive = react_native_1.Platform.OS === "ios" ? "white100" : "black10", trackColorActive = react_native_1.Platform.OS === "ios" ? "blue100" : "blue10", trackColorInactive = "black30", disabled, ...restProps }) => {
+    const color = (0, hooks_1.useColor)();
+    let thumbColor = value ? color(thumbColorActive) : color(thumbColorInactive);
+    let trackColor = {
+        false: color(trackColorInactive),
+        true: color(trackColorActive),
+    };
+    let iosBackground = color(trackColorInactive);
+    if (disabled) {
+        thumbColor = react_native_1.Platform.OS === "ios" ? color("white100") : color("black30");
+        trackColor = {
+            false: color("black10"),
+            true: color("black10"),
+        };
+        iosBackground = color("black10");
+    }
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Switch, { accessibilityRole: "switch", value: value, disabled: disabled, onValueChange: onChange, thumbColor: thumbColor, trackColor: trackColor, ios_backgroundColor: iosBackground, ...restProps }));
+};
+exports.Switch = Switch;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+    component: ({ value, onChange, thumbColorActive, thumbColorInactive, trackColorActive, trackColorInactive, disabled, ...restProps }: import("./Switch").SwitchProps) => JSX.Element;
+};
+export default _default;
+export declare const Variants: () => JSX.Element;

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Variants = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Switch_1 = require("./Switch");
+const helpers_1 = require("../../storybook/helpers");
+const Flex_1 = require("../Flex");
+const Text_1 = require("../Text");
+exports.default = {
+    title: "Switch",
+    component: Switch_1.Switch,
+};
+const Variants = () => {
+    const [switches, setSwitches] = (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)));
+    };
+    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, onChange: () => 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, onChange: () => 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, onChange: () => 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, onChange: () => handleSwitchChange(4), thumbColorActive: "yellow100", trackColorActive: "blue100", thumbColorInactive: "white100", trackColorInactive: "red100" })] })] }));
+};
+exports.Variants = Variants;

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

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

package/dist/elements/Switch/index.js

@@ -0,0 +1,17 @@
+"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette-mobile",
-  "version": "13.1.13",
+  "version": "13.1.14",
   "description": "Artsy's design system for React Native",
   "scripts": {
     "android": "RCT_METRO_PORT=8082 react-native run-android --port 8082",