@swan-io/lake 2.7.25 → 2.7.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "2.7.25",
+  "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 })] }) }));