@swan-io/lake 2.7.24 → 2.7.26

package/package.json

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

package/src/components/BorderedIcon.d.ts

@@ -1,4 +1,4 @@
-import { ColorVariants } from "../constants/design";
+import { ColorVariants, Radii } from "../constants/design";
 import { IconName } from "./Icon";
 import { SpacingValue } from "./Space";
 type Props = {
@@ -6,6 +6,7 @@ type Props = {
     size?: number;
     padding?: SpacingValue | 0;
     color?: ColorVariants;
+    borderRadius?: Radii;
 };
-export declare const BorderedIcon: ({ name, size, padding, color }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const BorderedIcon: ({ name, size, padding, color, borderRadius, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/BorderedIcon.js

@@ -5,13 +5,12 @@ import { Box } from "./Box";
 import { Icon } from "./Icon";
 const styles = StyleSheet.create({
     base: {
-        borderRadius: radii[8],
         borderWidth: 1,
         borderColor: colors.current[100],
         backgroundColor: colors.current[50],
     },
 });
-export const BorderedIcon = ({ name, size = 96, padding = 0, color = "current" }) => {
+export const BorderedIcon = ({ name, size = 96, padding = 0, color = "current", borderRadius = 8, }) => {
     const iconSize = size - padding * 2;
     return (_jsx(Box, { alignItems: "center", justifyContent: "center", style: [
             styles.base,
@@ -20,6 +19,7 @@ export const BorderedIcon = ({ name, size = 96, padding = 0, color = "current" }
                 height: size,
                 borderColor: colors[color][100],
                 backgroundColor: colors[color][50],
+                borderRadius: radii[borderRadius],
             },
         ], children: _jsx(Icon, { name: name, size: iconSize, color: colors[color][500] }) }));
 };

package/src/components/Card3dPreview.d.ts

@@ -21,7 +21,7 @@ type CardParams = {
     expirationDate: string;
     cvv: string;
     color: "Silver" | "Black";
-    logo: SVGElement | null;
+    logo: SVGElement | HTMLImageElement | null;
     logoScale: number;
     assetsUrls: Card3dAssetsUrls;
     onSvgError?: (code: string) => void;

package/src/components/Card3dPreview.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Environment, OrbitControls, Text, useGLTF, useTexture } from "@react-three/drei";
 import { Canvas, useFrame } from "@react-three/fiber";
+import { Result } from "@swan-io/boxed";
 import { forwardRef, useEffect, useRef, useState } from "react";
 import * as THREE from "three";
-import { match } from "ts-pattern";
+import { P, match } from "ts-pattern";
 import { isNotNullish, isNullish } from "../utils/nullish";
 import { createSvgImage, getMonochromeSvg } from "../utils/svg";
 /*
@@ -26,6 +27,10 @@ And this texture is used as an alpha map on a plane.
 To reproduce the shiny effect on the back of the card, we inject a custom shader in rainbow_mastercard material.
 This custom shader chunk change the diffuse color depending on camera position.
 */
+// Uses alpha channel instead of green to make pixel transparent on logo plane
+const logoAlphaMapFragmentShader = `
+diffuseColor.a *= texture2D(alphaMap, vAlphaMapUv).a;
+`;
 const shinyColorFragmentShader = `
 float red = cameraPosition.x * cameraPosition.z;
 float green = cameraPosition.y * cameraPosition.z;
@@ -140,10 +145,14 @@ export const Card = forwardRef(({ ownerName, cardNumber, expirationDate, cvv, co
             setLogoData(null);
             return;
         }
-        // We transform the logo to white to be able to use it as alpha map
-        const whiteLogo = getMonochromeSvg(logo, "white");
-        // Convert to Image element to be able to use it as texture
-        const image = createSvgImage(whiteLogo);
+        const image = match(logo)
+            .with(P.instanceOf(HTMLImageElement), image => Result.Ok(image))
+            .otherwise(logo => {
+            // We transform the logo to white to be able to use it as alpha map
+            const whiteLogo = getMonochromeSvg(logo, "white");
+            // Convert to Image element to be able to use it as texture
+            return createSvgImage(whiteLogo);
+        });
         if (image.isError()) {
             handleSvgError.current?.(image.getError());
             return;
@@ -168,7 +177,14 @@ export const Card = forwardRef(({ ownerName, cardNumber, expirationDate, cvv, co
                         CARD_WIDTH / 2 - LOGO_MARGIN_RIGHT,
                         CARD_HEIGHT / 2 - LOGO_MARGIN_TOP,
                         FRONT_TEXT_POSITION,
-                    ], scale: logoScale, children: isNotNullish(logoData) && (_jsxs("mesh", { position: [-logoData.size[0] / 2, -logoData.size[1] / 2, 0], children: [_jsx("planeGeometry", { args: logoData.size }), _jsx("meshStandardMaterial", { color: match(color)
+                    ], scale: logoScale, children: isNotNullish(logoData) && (_jsxs("mesh", { position: [-logoData.size[0] / 2, -logoData.size[1] / 2, 0], children: [_jsx("planeGeometry", { args: logoData.size }), _jsx("meshStandardMaterial", { ref: material => {
+                                    if (!material) {
+                                        return;
+                                    }
+                                    material.onBeforeCompile = shader => {
+                                        shader.fragmentShader = shader.fragmentShader.replace("#include <alphamap_fragment>", logoAlphaMapFragmentShader);
+                                    };
+                                }, color: match(color)
                                     .with("Silver", () => 0x000000)
                                     .with("Black", () => 0xffffff)
                                     .exhaustive(), metalness: 0.1, roughness: 0.35, envMapIntensity: ENV_MAP_INTENSITY, transparent: true, alphaMap: logoData.alphaMap })] })) }), _jsx("mesh", { geometry: nodes.black_band.geometry, material: materials.black_band, position: [0, 1.774, BACK_TEXT_POSITION], rotation: [0, Math.PI / 2, 0] }), _jsx("mesh", { geometry: nodes.chip.geometry, material: materials.chip, position: [-2.78, 0.439, FRONT_TEXT_POSITION], rotation: [0, Math.PI / 2, 0] }), _jsx("mesh", { geometry: nodes.chip_pattern.geometry, material: materials.chip_pattern, position: [-2.778, 0.442, FRONT_TEXT_POSITION + 0.001], rotation: [0, Math.PI / 2, 0] }), _jsx("mesh", { geometry: nodes.mc_center.geometry, material: materials.mastercard_orange, position: [3.052, -1.832, FRONT_TEXT_POSITION], rotation: [Math.PI / 2, 0, 0] }), _jsx("mesh", { geometry: nodes.mc_left.geometry, material: materials.mastercard_red, position: [2.676, -1.773, FRONT_TEXT_POSITION], rotation: [Math.PI / 2, 0, 0] }), _jsx("mesh", { geometry: nodes.mc_right.geometry, material: materials.mastercard_yellow, position: [3.47, -1.773, FRONT_TEXT_POSITION], rotation: [-Math.PI / 2, 0, 0] }), _jsx("mesh", { geometry: nodes.metal_circle.geometry, material: materials.rainbow, position: [-2.33, -1.849, BACK_TEXT_POSITION], rotation: [-Math.PI / 2, Math.PI / 2, 0] }), _jsx("mesh", { geometry: nodes.metal_circle001.geometry, material: materials.rainbow_rough, position: [-2.629, -1.849, BACK_TEXT_POSITION - 0.001], rotation: [-Math.PI / 2, Math.PI / 2, 0], scale: [0.35, 1, 0.35] }), _jsx("mesh", { geometry: nodes.metal_circle002.geometry, material: materials.rainbow_rough, position: [-2.33, -1.849, BACK_TEXT_POSITION - 0.001], rotation: [-Math.PI / 2, Math.PI / 2, 0] }), _jsx("mesh", { geometry: nodes.metal_mastercard.geometry, material: materials.rainbow_mastercard, position: [0.914, -1.298, BACK_TEXT_POSITION - 0.001], rotation: [Math.PI / 2, 0, Math.PI], scale: 0.09 })] }) }));

package/src/components/LakeCombobox.d.ts

@@ -27,7 +27,7 @@ export type LakeComboboxRef = {
     close: () => void;
     open: () => void;
 };
-declare const LakeComboboxWithRef: <I>({ inputRef, value, items, itemHeight, nbItemsDisplayed, ListFooterComponent, onChange, onValueChange, onSelectItem, renderItem, keyExtractor, icon, placeholder, disabled, emptyResultText, readOnly, id, error, hideErrors, }: LakeComboboxProps<I>, externalRef: ForwardedRef<LakeComboboxRef>) => import("react/jsx-runtime").JSX.Element;
+declare const LakeComboboxWithRef: <I>({ inputRef, value, items, itemHeight, nbItemsDisplayed, ListFooterComponent, onChange, onValueChange, onSelectItem, renderItem, keyExtractor, icon, placeholder, disabled, emptyResultText, readOnly, id, error, hideErrors, }: LakeComboboxProps<I>, forwardedRef: ForwardedRef<LakeComboboxRef>) => import("react/jsx-runtime").JSX.Element;
 export declare const LakeCombobox: <I>(props: LakeComboboxProps<I> & {
     ref?: RefObject<LakeComboboxRef> | undefined;
 }) => ReturnType<typeof LakeComboboxWithRef>;

package/src/components/LakeCombobox.js

@@ -78,7 +78,7 @@ const getItemLayout = (_data, index) => ({
     offset: DEFAULT_ELEMENT_HEIGHT * index,
     index,
 });
-const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEMENT_HEIGHT, nbItemsDisplayed = DEFAULT_NB_SUGGESTION_DISPLAYED, ListFooterComponent, onChange, onValueChange, onSelectItem, renderItem, keyExtractor, icon, placeholder, disabled = false, emptyResultText, readOnly, id, error, hideErrors, }, externalRef) => {
+const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEMENT_HEIGHT, nbItemsDisplayed = DEFAULT_NB_SUGGESTION_DISPLAYED, ListFooterComponent, onChange, onValueChange, onSelectItem, renderItem, keyExtractor, icon, placeholder, disabled = false, emptyResultText, readOnly, id, error, hideErrors, }, forwardedRef) => {
     const ref = useRef(null);
     const inputTextRef = useMergeRefs(ref, inputRef);
     const listRef = useRef(null);
@@ -92,7 +92,7 @@ const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEM
     const open = useCallback(() => setState("opened"), []);
     const close = useCallback(() => setState("closed"), []);
     const dismiss = useCallback(() => setState("dismissed"), []);
-    useImperativeHandle(externalRef, () => {
+    useImperativeHandle(forwardedRef, () => {
         return {
             open,
             close,

package/src/components/LakeSelect.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement, ReactNode } from "react";
-import { StyleProp, TextStyle, ViewStyle } from "react-native";
+import { ForwardedRef, ReactElement, ReactNode } from "react";
+import { StyleProp, TextStyle, View, ViewStyle } from "react-native";
 import { ColorVariants } from "../constants/design";
 import { IconName } from "./Icon";
 export type Item<V> = {
@@ -27,4 +27,8 @@ export type SelectProps<V> = {
     readOnly?: boolean;
     style?: StyleProp<ViewStyle>;
 };
-export declare function LakeSelect<V>({ title, items, valueStyle, size, color, disabled, mode, placeholder, readOnly, id, matchReferenceWidth, value, error, hideErrors, icon, onValueChange, PopoverFooter, style, }: SelectProps<V>): import("react/jsx-runtime").JSX.Element;
+declare const LakeSelectWithRef: <V>({ title, items, valueStyle, size, color, disabled, mode, placeholder, readOnly, id, matchReferenceWidth, value, error, hideErrors, icon, onValueChange, PopoverFooter, style, }: SelectProps<V>, forwardedRef: ForwardedRef<View>) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeSelect: <I>(props: SelectProps<I> & {
+    ref?: ForwardedRef<View> | undefined;
+}) => ReturnType<typeof LakeSelectWithRef>;
+export {};

package/src/components/LakeSelect.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useRef } from "react";
+import { forwardRef, useCallback, useRef, } from "react";
 import { FlatList, StyleSheet, View, } from "react-native";
 import { commonStyles } from "../constants/commonStyles";
 import { colors, invariantColors, radii, shadows, spacings, texts, } from "../constants/design";
 import { useDisclosure } from "../hooks/useDisclosure";
+import { useMergeRefs } from "../hooks/useMergeRefs";
 import { getFocusableElements } from "../utils/a11y";
 import { isNotNullish } from "../utils/nullish";
 import { Box } from "./Box";
@@ -103,12 +104,13 @@ const styles = StyleSheet.create({
         borderColor: colors.negative[500],
     },
 });
-export function LakeSelect({ title, items, valueStyle, size, color = "current", disabled = false, mode = "normal", placeholder, readOnly = false, id, matchReferenceWidth = true, value, error, hideErrors = false, icon, onValueChange, PopoverFooter, style, }) {
+const LakeSelectWithRef = ({ title, items, valueStyle, size, color = "current", disabled = false, mode = "normal", placeholder, readOnly = false, id, matchReferenceWidth = true, value, error, hideErrors = false, icon, onValueChange, PopoverFooter, style, }, forwardedRef) => {
     const inputRef = useRef(null);
     const listRef = useRef(null);
     const typingTimeoutRef = useRef(undefined);
     const currentlyTypedRef = useRef(undefined);
     const listItemRefs = useRef(Array(items.length));
+    const mergedRef = useMergeRefs(inputRef, forwardedRef);
     const [visible, { close, open }] = useDisclosure(false);
     const hasValue = isNotNullish(value);
     const isSmall = size === "small";
@@ -141,7 +143,7 @@ export function LakeSelect({ title, items, valueStyle, size, color = "current",
         }, 300);
     }, [items, onValueChange, visible]);
     const name = itemValue?.name ?? value;
-    return (_jsxs(View, { style: commonStyles.fill, children: [_jsx(Pressable, { id: id, ref: inputRef, "aria-haspopup": "listbox", role: "button", "aria-expanded": visible, disabled: readOnly || disabled, style: ({ focused }) => [
+    return (_jsxs(View, { style: commonStyles.fill, children: [_jsx(Pressable, { id: id, ref: mergedRef, "aria-haspopup": "listbox", role: "button", "aria-expanded": visible, disabled: readOnly || disabled, style: ({ focused }) => [
                     mode === "normal" ? styles.normal : styles.borderless,
                     size === "small" && styles.small,
                     (disabled || readOnly) && styles.inputDisabled,
@@ -176,4 +178,5 @@ export function LakeSelect({ title, items, valueStyle, size, color = "current",
                                     close();
                                 }, children: [isNotNullish(item.icon) && (_jsxs(_Fragment, { children: [item.icon, _jsx(Space, { width: 12 })] })), _jsx(LakeText, { color: colors.gray[900], numberOfLines: 1, style: [styles.itemText, isSelected && styles.selected], children: item.name }), _jsx(Fill, { minWidth: 12 }), isSelected && (_jsx(Icon, { color: colors.positive[500], name: "checkmark-filled", size: 14 }))] }));
                         } }), PopoverFooter] })] }));
-}
+};
+export const LakeSelect = forwardRef(LakeSelectWithRef);