@swan-io/lake 2.7.33 → 2.7.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "2.7.33",
+  "version": "2.7.35",
   "engines": {
     "node": ">=18.0.0",
     "yarn": "^1.22.0"

package/src/components/Toggle.d.ts

@@ -0,0 +1,10 @@
+type Props = {
+    value: boolean;
+    disabled?: boolean;
+    onToggle: (next: boolean) => void;
+    mode?: "desktop" | "mobile";
+    onLabel: string;
+    offLabel: string;
+};
+export declare const Toggle: ({ onToggle, value, disabled, mode, onLabel, offLabel, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/Toggle.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { colors } from "../constants/design";
+import { Box } from "./Box";
+import { Icon } from "./Icon";
+import { LakeText } from "./LakeText";
+import { Pressable } from "./Pressable";
+const HEIGHT = 26;
+const BORDER_WIDTH = 1;
+const styles = StyleSheet.create({
+    disabled: {
+        opacity: 0.3,
+    },
+    switch: {
+        userSelect: "none",
+        flexDirection: "row",
+        borderRadius: HEIGHT / 2,
+        transform: "translateZ(0px)",
+        width: "min-content",
+        borderColor: colors.gray[100],
+        borderWidth: BORDER_WIDTH,
+    },
+    handle: {
+        position: "absolute",
+        width: HEIGHT,
+        height: HEIGHT,
+        top: -BORDER_WIDTH,
+        borderRadius: HEIGHT / 2,
+        transitionDuration: "300ms",
+        transitionTimingFunction: "ease-in-out",
+        borderWidth: BORDER_WIDTH,
+    },
+    switchItem: {
+        paddingHorizontal: 8,
+        height: HEIGHT - BORDER_WIDTH * 2,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});
+export const Toggle = ({ onToggle, value, disabled = false, mode = "desktop", onLabel, offLabel, }) => {
+    const containerRef = useRef(null);
+    const onItemRef = useRef(null);
+    const offItemRef = useRef(null);
+    const [handleStyle, setHandleStyle] = useState();
+    const isMobile = mode === "mobile";
+    const onColor = value ? colors.positive[500] : colors.gray[500];
+    const offColor = !value ? colors.negative[500] : colors.gray[500];
+    const reajustLayout = useCallback(() => {
+        (value ? onItemRef : offItemRef).current?.measureLayout(containerRef.current, (left, _, width) => {
+            setHandleStyle(prev => ({
+                transitionProperty: prev ? "width, transform" : "none",
+                width: width + 2 * BORDER_WIDTH,
+                transform: `translateX(${value ? -BORDER_WIDTH : left - 2 * BORDER_WIDTH}px)`,
+            }));
+        }, () => { });
+    }, [value]);
+    useEffect(reajustLayout, [reajustLayout, value, isMobile, onLabel, offLabel]);
+    return (_jsxs(Pressable, { style: [styles.switch, disabled && styles.disabled], onPress: () => onToggle(!value), "aria-disabled": disabled, "aria-checked": value, disabled: disabled, ref: containerRef, role: "switch", onLayout: reajustLayout, children: [_jsx(View, { style: [
+                    styles.handle,
+                    handleStyle,
+                    {
+                        borderColor: value ? colors.positive[500] : colors.negative[500],
+                        backgroundColor: value ? colors.positive[50] : colors.negative[50],
+                    },
+                ] }), _jsx(Box, { style: styles.switchItem, ref: onItemRef, children: isMobile ? (_jsx(Icon, { size: 16, name: "checkmark-circle-regular", color: onColor })) : (_jsx(LakeText, { variant: "smallMedium", color: onColor, children: onLabel })) }), _jsx(Box, { style: styles.switchItem, ref: offItemRef, children: isMobile ? (_jsx(Icon, { size: 16, name: "subtract-circle-regular", color: offColor })) : (_jsx(LakeText, { variant: "smallMedium", color: offColor, children: offLabel })) })] }));
+};