@swan-io/shared-business 13.7.14 → 13.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/shared-business",
-  "version": "13.7.14",
+  "version": "13.9.0",
   "engines": {
     "node": ">22.12.0"
   },
@@ -25,7 +25,7 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "@swan-io/lake": "13.7.14"
+    "@swan-io/lake": "13.9.0"
   },
   "dependencies": {
     "@formatjs/intl": "^4.1.2",
@@ -50,6 +50,6 @@
     "@types/react-dom": "^19.2.3",
     "@types/react-native": "^0.72.8",
     "type-fest": "^5.4.3",
-    "@swan-io/lake": "13.7.14"
+    "@swan-io/lake": "13.9.0"
   }
 }

package/src/components/ChoicePicker.d.ts

@@ -1,3 +1,4 @@
+import { ColorVariants } from "@swan-io/lake/src/constants/design";
 import { ReactNode } from "react";
 type Props<T> = {
     items: T[];
@@ -7,7 +8,7 @@ type Props<T> = {
     getId?: (item: T) => unknown;
     onChange: (value: T) => void;
     disabled?: boolean;
-    tile?: boolean;
+    tileColor?: ColorVariants;
 };
-export declare const ChoicePicker: <T>({ tile, items, getId, large, renderItem, value, disabled, onChange, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const ChoicePicker: <T>({ tileColor, items, getId, large, renderItem, value, disabled, onChange, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/ChoicePicker.js

@@ -4,9 +4,8 @@ import { LakeRadio } from "@swan-io/lake/src/components/LakeRadio";
 import { Pressable } from "@swan-io/lake/src/components/Pressable";
 import { ScrollView } from "@swan-io/lake/src/components/ScrollView";
 import { Space } from "@swan-io/lake/src/components/Space";
-import { Tile } from "@swan-io/lake/src/components/Tile";
 import { commonStyles } from "@swan-io/lake/src/constants/commonStyles";
-import { breakpoints, negativeSpacings, spacings } from "@swan-io/lake/src/constants/design";
+import { breakpoints, colors, invariantColors, negativeSpacings, radii, shadows, spacings, } from "@swan-io/lake/src/constants/design";
 import { useResponsive } from "@swan-io/lake/src/hooks/useResponsive";
 import { clampValue } from "@swan-io/lake/src/utils/math";
 import { detectScrollAnimationEnd } from "@swan-io/lake/src/utils/viewport";
@@ -42,7 +41,6 @@ const styles = StyleSheet.create({
     item: {
         flexGrow: 0,
         flexBasis: "33.333%",
-        maxWidth: 300,
         padding: spacings[12],
     },
     itemAnimation: {
@@ -63,20 +61,29 @@ const styles = StyleSheet.create({
     },
     itemLarge: {
         flexBasis: "50%",
-        maxWidth: "none",
     },
     itemSmallViewport: {
         width: "100%",
         flexBasis: "auto",
-        maxWidth: "none",
         scrollSnapAlign: "center",
     },
-    tileContents: {
+    tile: {
+        paddingVertical: spacings[32],
+        paddingHorizontal: spacings[32],
+        borderRadius: radii[8],
+        borderWidth: 1,
+        borderColor: colors.gray[100],
+        flexGrow: 1,
+    },
+    tileHover: {
+        boxShadow: shadows.tileHover,
+    },
+    content: {
         alignItems: "center",
         alignSelf: "stretch",
         flexGrow: 1,
     },
-    tileRenderedContents: {
+    renderedContents: {
         alignItems: "center",
         alignSelf: "stretch",
         flexGrow: 1,
@@ -103,7 +110,7 @@ const styles = StyleSheet.create({
     },
 });
 const identity = (x) => x;
-export const ChoicePicker = ({ tile = true, items, getId = identity, large = false, renderItem, value, disabled = false, onChange, }) => {
+export const ChoicePicker = ({ tileColor, items, getId = identity, large = false, renderItem, value, disabled = false, onChange, }) => {
     const containerRef = useRef(null);
     const { desktop } = useResponsive(breakpoints.medium);
     const [mobilePosition, setMobilePosition] = useState("start");
@@ -206,7 +213,15 @@ export const ChoicePicker = ({ tile = true, items, getId = identity, large = fal
                             !desktop && styles.itemSmallViewport,
                             !desktop && { width: `${100 / items.length}%` },
                         ], onPress: () => onChange(item), children: ({ hovered }) => {
-                            const tileContent = (_jsxs(View, { style: styles.tileContents, children: [_jsx(View, { style: styles.tileRenderedContents, children: renderItem(item) }), desktop && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 24 }), _jsx(LakeRadio, { value: value != null && getId(item) === getId(value) })] }))] }));
-                            return tile ? (_jsx(Tile, { hovered: hovered, selected: value != null && getId(item) === getId(value), flexGrow: 1, children: tileContent })) : (tileContent);
+                            const selected = value != null && getId(item) === getId(value);
+                            const tileContent = (_jsxs(View, { style: styles.content, children: [_jsx(View, { style: styles.renderedContents, children: renderItem(item) }), tileColor == null && desktop && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 24 }), _jsx(LakeRadio, { value: selected })] }))] }));
+                            return tileColor != null ? (_jsx(View, { style: [
+                                    styles.tile,
+                                    hovered && styles.tileHover,
+                                    selected && {
+                                        backgroundColor: invariantColors.white,
+                                        borderColor: colors[tileColor][500],
+                                    },
+                                ], children: tileContent })) : (tileContent);
                         } }, String(index)))) }) }), !desktop && (_jsx(LakeButton, { icon: "chevron-left-filled", mode: "secondary", forceBackground: true, onPress: onPressPrevious, disabled: mobilePosition === "start" || disabled, style: styles.leftButton, ariaLabel: t("common.previous") })), !desktop && (_jsx(LakeButton, { icon: "chevron-right-filled", mode: "secondary", forceBackground: true, onPress: onPressNext, disabled: mobilePosition === "end" || disabled, style: styles.rightButton, ariaLabel: t("common.next") }))] }));
 };