@swan-io/lake 8.5.0 → 8.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "8.5.0",
+  "version": "8.5.2",
   "engines": {
     "node": ">=20.9.0",
     "yarn": "^1.22.0"

package/src/components/SegmentedControl.d.ts

@@ -3,12 +3,13 @@ export type Item<T extends string> = {
     name: string;
     id: T;
     icon?: ReactNode;
+    activeIcon?: ReactNode;
 };
 type Props<T extends string> = {
-    mode?: "desktop" | "mobile";
     selected: T;
     items: ReadonlyArray<Item<T>>;
     onValueChange: (value: T) => void;
+    minItemWidth?: number;
 };
-export declare const SegmentedControl: <T extends string>({ mode, selected, items, onValueChange, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SegmentedControl: <T extends string>({ selected, items, onValueChange, minItemWidth, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/SegmentedControl.js

@@ -1,16 +1,22 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
 import { StyleSheet, View } from "react-native";
+import { P, match } from "ts-pattern";
 import { backgroundColor, colors, radii, spacings, texts } from "../constants/design";
 import { isNotNullish } from "../utils/nullish";
+import { BottomPanel } from "./BottomPanel";
 import { Box } from "./Box";
+import { Icon } from "./Icon";
+import { LakeButton } from "./LakeButton";
 import { LakeText } from "./LakeText";
 import { Pressable } from "./Pressable";
+import { ResponsiveContainer } from "./ResponsiveContainer";
 import { Space } from "./Space";
 const styles = StyleSheet.create({
     container: {
+        padding: spacings[4],
         backgroundColor: colors.gray[50],
         borderRadius: radii[8],
-        padding: spacings[4],
     },
     selectedItemIndicator: {
         position: "absolute",
@@ -25,15 +31,44 @@ const styles = StyleSheet.create({
         borderRadius: radii[4],
         backgroundColor: backgroundColor.accented,
     },
-    item: {
-        flexBasis: "0%",
+    itemMobile: {
+        backgroundColor: backgroundColor.accented,
+        borderRadius: radii[4],
+        padding: spacings[16],
+        flexDirection: "row",
+        height: 60,
+        alignItems: "center",
+        justifyContent: "center",
         flexGrow: 1,
-        flexShrink: 1,
+    },
+    dropdownItem: {
+        backgroundColor: backgroundColor.accented,
+        borderRadius: radii[4],
+        padding: spacings[16],
+        flexDirection: "row",
+        height: 60,
         alignItems: "center",
+        flexGrow: 1,
+    },
+    dropdownItemSelected: {
+        backgroundColor: colors.gray[50],
+        borderRadius: radii[4],
         padding: spacings[16],
-        flexDirection: "column",
+        flexDirection: "row",
+        height: 60,
+        alignItems: "center",
+        flexGrow: 1,
+    },
+    button: {
+        width: 60,
+        height: 60,
     },
     itemDesktop: {
+        flexBasis: "0%",
+        flexGrow: 1,
+        flexShrink: 1,
+        alignItems: "center",
+        padding: spacings[16],
         flexDirection: "row",
         justifyContent: "center",
     },
@@ -41,28 +76,43 @@ const styles = StyleSheet.create({
         userSelect: "none",
         lineHeight: texts.regular.fontSize,
     },
-    selectedItemMobile: {
-        right: 0,
-    },
     selectedItemDesktop: {
         bottom: 0,
     },
 });
-export const SegmentedControl = ({ mode = "desktop", selected, items, onValueChange, }) => {
+export const SegmentedControl = ({ selected, items, onValueChange, minItemWidth = 250, }) => {
     const selectedItemIndex = items.findIndex(item => item.id === selected);
-    return (_jsx(Box, { style: styles.container, children: _jsxs(Box, { direction: mode === "mobile" ? "column" : "row", children: [_jsx(View, { role: "none", style: [
+    const selectedItem = items[selectedItemIndex];
+    const [pressed, setPressed] = useState(false);
+    return (_jsx(ResponsiveContainer, { breakpoint: items.length * minItemWidth, style: styles.container, children: ({ small }) => small ? (_jsxs(Box, { direction: "row", alignItems: "center", justifyContent: "spaceBetween", children: [_jsxs(Pressable, { style: styles.itemMobile, onPress: () => {
+                        setPressed(true);
+                    }, children: [isNotNullish(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon) &&
+                            match(selectedItem)
+                                .with({ icon: P.nonNullable, activeIcon: P.nonNullable }, () => selectedItem.activeIcon)
+                                .with({ icon: P.nonNullable }, () => selectedItem.icon)
+                                .otherwise(() => null), _jsx(Space, { height: 8, width: 12 }), _jsx(LakeText, { color: colors.gray[900], numberOfLines: 1, variant: "regular", style: styles.itemText, children: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name })] }), _jsx(BottomPanel, { visible: pressed === true, onPressClose: () => {
+                        setPressed(false);
+                    }, children: items.map(item => (_jsxs(Box, { direction: "row", children: [_jsxs(Pressable, { style: (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id
+                                    ? styles.dropdownItemSelected
+                                    : styles.dropdownItem, onPress: () => {
+                                    onValueChange(item.id);
+                                    setPressed(false);
+                                }, children: [isNotNullish(item.icon) &&
+                                        match(item)
+                                            .with({ icon: P.nonNullable, activeIcon: P.nonNullable }, () => (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id ? selectedItem.activeIcon : item.icon)
+                                            .with({ icon: P.nonNullable }, () => item.icon)
+                                            .otherwise(() => null), _jsx(Space, { height: 8, width: 12 }), _jsx(LakeText, { color: colors.gray[900], numberOfLines: 1, variant: "regular", style: styles.itemText, children: item.name })] }), (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id && (_jsx(Box, { justifyContent: "center", style: { paddingHorizontal: spacings[24], backgroundColor: colors.gray[50] }, children: _jsx(Icon, { size: 16, name: "lake-check", color: colors.positive[500] }) }))] }, item.id))) }), _jsx(Space, { width: 4 }), _jsx(LakeButton, { mode: "tertiary", style: styles.button, size: "small", icon: "more-horizontal-filled", onPress: () => setPressed(true), ariaLabel: "Previous" })] })) : (_jsxs(Box, { direction: "row", children: [_jsx(View, { role: "none", style: [
                         styles.selectedItemIndicator,
-                        mode === "mobile" ? styles.selectedItemMobile : styles.selectedItemDesktop,
-                        mode === "mobile"
-                            ? {
-                                height: `${(1 / items.length) * 100}%`,
-                                transform: `translateY(${selectedItemIndex * 100}%)`,
-                            }
-                            : {
-                                width: `${(1 / items.length) * 100}%`,
-                                transform: `translateX(${selectedItemIndex * 100}%)`,
-                            },
-                    ] }), items.map(item => (_jsxs(Pressable, { style: [styles.item, mode === "desktop" && styles.itemDesktop], onPress: () => {
+                        styles.selectedItemDesktop,
+                        {
+                            width: `${(1 / items.length) * 100}%`,
+                            transform: `translateX(${selectedItemIndex * 100}%)`,
+                        },
+                    ] }), items.map(item => (_jsxs(Pressable, { style: styles.itemDesktop, onPress: () => {
                         onValueChange(item.id);
-                    }, children: [isNotNullish(item.icon) && (_jsxs(_Fragment, { children: [item.icon, _jsx(Space, { height: 8, width: 12 })] })), _jsx(LakeText, { color: colors.gray[900], numberOfLines: 1, variant: "regular", style: styles.itemText, children: item.name })] }, item.id)))] }) }));
+                    }, children: [_jsxs(_Fragment, { children: [isNotNullish(item.icon) &&
+                                    match(item)
+                                        .with({ icon: P.nonNullable, activeIcon: P.nonNullable }, () => (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id ? selectedItem.activeIcon : item.icon)
+                                        .with({ icon: P.nonNullable }, () => item.icon)
+                                        .otherwise(() => null), _jsx(Space, { height: 8, width: 12 })] }), _jsx(LakeText, { color: colors.gray[900], numberOfLines: 1, variant: "regular", style: styles.itemText, children: item.name })] }, item.id)))] })) }));
 };