@revenuecat/purchases-ui-js 2.0.2 → 2.0.3

package/dist/components/icon/Icon.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  import { getColorModeContext } from "../../stores/color-mode";
+  import { getSelectedStateContext } from "../../stores/selected";
+  import type { IconProps } from "../../types/components/icon";
+  import {
+    css,
+    mapBorder,
+    mapBorderRadius,
+    mapColor,
+    mapShadow,
+    mapSize,
+    mapSpacing,
+  } from "../../utils/base-utils";
+  import { getActiveStateProps } from "../../utils/style-utils";
+
+  const props: IconProps = $props();
+  const selectedState = getSelectedStateContext();
+  const {
+    base_url,
+    formats,
+    size,
+    margin,
+    padding,
+    color,
+    icon_background: background,
+  } = $derived.by(() => {
+    return {
+      ...props,
+      ...getActiveStateProps($selectedState, props.overrides),
+    };
+  });
+
+  const getColorMode = getColorModeContext();
+  const colorMode = $derived(getColorMode());
+
+  const container = $derived(
+    css({
+      width: mapSize(size.width),
+      height: mapSize(size.height),
+      margin: mapSpacing(margin),
+      padding: mapSpacing(padding),
+      "background-color": mapColor(colorMode, background?.color),
+      border: mapBorder(colorMode, background?.border),
+      "border-radius": mapBorderRadius(background?.shape),
+      "box-shadow": mapShadow(colorMode, background?.shadow),
+      flex: "0 0 auto",
+    }),
+  );
+
+  const webpUrl = $derived(`${base_url}/${formats.webp}`);
+  const icon = $derived(
+    css({
+      width: "100%",
+      height: "100%",
+      position: "relative",
+      "z-index": 1,
+      overflow: "hidden",
+      "background-color": mapColor(colorMode, color),
+      "mask-image": `url(${webpUrl})`,
+      "webkit-mask-image": `url(${webpUrl})`,
+      "mask-size": "contain",
+      "webkit-mask-size": "contain",
+      "mask-position": "center",
+      "webkit-mask-position": "center",
+      "mask-repeat": "no-repeat",
+      "webkit-mask-repeat": "no-repeat",
+    }),
+  );
+</script>
+
+<div style={container}>
+  <div style={icon}></div>
+</div>

package/dist/components/icon/Icon.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IconProps } from "../../types/components/icon";
+declare const Icon: import("svelte").Component<IconProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/components/image/ClipPath.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import type { ImageProps } from "../../types/components/image";
+
+  interface ClipPathProps {
+    shape: ImageProps["mask_shape"];
+    width: number;
+    height: number;
+  }
+
+  const { shape, width, height }: ClipPathProps = $props();
+
+  const [topLeft, topRight, bottomRight, bottomLeft] = $derived.by(() => {
+    if (shape?.type !== "rectangle") {
+      return [0, 0, 0, 0];
+    }
+
+    const { corners } = shape;
+    return [
+      corners?.top_leading ?? 0,
+      corners?.top_trailing ?? 0,
+      corners?.bottom_trailing ?? 0,
+      corners?.bottom_leading ?? 0,
+    ];
+  });
+</script>
+
+{#if shape?.type === "circle"}
+  <circle cx={width / 2} cy={height / 2} r={Math.min(width, height) / 2} />
+{/if}
+
+{#if shape?.type === "concave"}
+  <path
+    d={`M 0 0 L ${width} 0 L ${width}  ${height} Q ${width / 2} ${height - 54} 0 ${height} Z`}
+  />
+{/if}
+{#if shape?.type === "convex"}
+  <path
+    d={`M 0 0 L ${width} 0 L ${width} ${height - 27} Q ${width / 2} ${height + 27} 0 ${height - 27} Z`}
+  />
+{/if}
+
+{#if shape?.type === "rectangle" || shape?.type === undefined}
+  <path
+    d={`M ${topLeft} 0 H ${width - topRight} A ${topRight} ${topRight} 0 0 1 ${width} ${topRight}
+        V ${height - bottomRight} A ${bottomRight} ${bottomRight} 0 0 1 ${width - bottomRight} ${height}
+        H ${bottomLeft} A ${bottomLeft} ${bottomLeft} 0 0 1 0 ${height - bottomLeft}
+        V ${topLeft} A ${topLeft} ${topLeft} 0 0 1 ${topLeft} 0 Z`}
+  />
+{/if}

package/dist/components/image/ClipPath.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { ImageProps } from "../../types/components/image";
+interface ClipPathProps {
+    shape: ImageProps["mask_shape"];
+    width: number;
+    height: number;
+}
+declare const ClipPath: import("svelte").Component<ClipPathProps, {}, "">;
+type ClipPath = ReturnType<typeof ClipPath>;
+export default ClipPath;

package/dist/components/image/Image.stories.svelte

@@ -1,86 +1,55 @@
 <script module lang="ts">
   import Image from "./Image.svelte";
+  import { componentDecorator } from "../../stories/component-decorator";
   import { defineMeta } from "@storybook/addon-svelte-csf";
 
   const { Story } = defineMeta({
     title: "Components/Image",
     component: Image,
-    tags: ["autodocs"],
-    argTypes: {
-      id: { control: "text", description: "Unique identifier for the image" },
-      color_overlay: {
-        control: "object",
-        description: "Image overlay",
-      },
+    decorators: [componentDecorator()],
+    args: {
+      type: "image",
+      id: "image",
+      name: "Image",
+      fit_mode: "fill",
       size: {
-        control: "object",
-        description: "Size configuration for the image",
-      },
-      max_height: {
-        control: "number",
-        description: "Maximum height of the image",
-      },
-      override_source_lid: {
-        control: "text",
-        description: "Override source lid",
-      },
-      fit_mode: {
-        control: { type: "select" },
-        options: ["fit", "fill"],
-        description: "Fit mode for the image",
+        width: { type: "fill" },
+        height: { type: "fill" },
+      },
+      source: {
+        dark: null,
+        light: {
+          width: 600,
+          height: 400,
+          original: "https://placehold.co/600x400",
+          heic: "https://placehold.co/600x400",
+          heic_low_res: "https://placehold.co/600x400",
+          webp: "https://placehold.co/600x400",
+          webp_low_res: "https://placehold.co/600x400",
+        },
       },
     },
   });
 </script>
 
-<!-- Rectangle story -->
 <Story
   name="Rectangle"
   args={{
-    id: "example-id",
-    fit_mode: "fit",
-    size: {
-      width: { type: "fill" },
-      height: { type: "fill" },
-    },
-    source: {
-      light: {
-        width: 600,
-        height: 400,
-        original: "https://placehold.co/600x400",
-        heic: "https://placehold.co/600x400",
-        heic_low_res: "https://placehold.co/600x400",
-        webp: "https://placehold.co/600x400",
-        webp_low_res: "https://placehold.co/600x400",
+    mask_shape: {
+      type: "rectangle",
+      corners: {
+        top_leading: 0,
+        top_trailing: 0,
+        bottom_leading: 0,
+        bottom_trailing: 0,
       },
-      dark: null,
     },
-    mask_shape: { type: "rectangle" },
   }}
 />
 
-<!-- Rounded Rectangle story -->
 <Story
   name="Rounded Rectangle"
   args={{
-    id: "example-id",
-    fit_mode: "fit",
-    size: {
-      width: { type: "fill" },
-      height: { type: "fill" },
-    },
-    source: {
-      light: {
-        width: 600,
-        height: 400,
-        original: "https://placehold.co/600x400",
-        heic: "https://placehold.co/600x400",
-        heic_low_res: "https://placehold.co/600x400",
-        webp: "https://placehold.co/600x400",
-        webp_low_res: "https://placehold.co/600x400",
-      },
-      dark: null,
-    },
     mask_shape: {
       type: "rectangle",
       corners: {
@@ -92,161 +61,63 @@
     },
   }}
 />
-<!-- Circle story -->
+
 <Story
   name="Circle"
   args={{
-    id: "example-id",
-    fit_mode: "fit",
-    size: {
-      width: { type: "fill" },
-      height: { type: "fill" },
-    },
-    source: {
-      light: {
-        width: 600,
-        height: 400,
-        original: "https://placehold.co/600x400",
-        heic: "https://placehold.co/600x400",
-        heic_low_res: "https://placehold.co/600x400",
-        webp: "https://placehold.co/600x400",
-        webp_low_res: "https://placehold.co/600x400",
-      },
-      dark: null,
-    },
     mask_shape: { type: "circle" },
   }}
 />
-<!-- Concave story -->
+
 <Story
   name="Concave"
   args={{
-    id: "example-id",
-    fit_mode: "fit",
-    size: {
-      width: { type: "fill" },
-      height: { type: "fill" },
-    },
-    source: {
-      light: {
-        width: 600,
-        height: 400,
-        original: "https://placehold.co/600x400",
-        heic: "https://placehold.co/600x400",
-        heic_low_res: "https://placehold.co/600x400",
-        webp: "https://placehold.co/600x400",
-        webp_low_res: "https://placehold.co/600x400",
-      },
-      dark: null,
-    },
     mask_shape: { type: "concave" },
   }}
 />
-<!-- Convex story -->
+
 <Story
   name="Convex"
   args={{
-    id: "example-id",
-    fit_mode: "fit",
-    size: {
-      width: { type: "fill" },
-      height: { type: "fill" },
-    },
-    source: {
-      light: {
-        width: 600,
-        height: 400,
-        original: "https://placehold.co/600x400",
-        heic: "https://placehold.co/600x400",
-        heic_low_res: "https://placehold.co/600x400",
-        webp: "https://placehold.co/600x400",
-        webp_low_res: "https://placehold.co/600x400",
-      },
-      dark: null,
-    },
     mask_shape: { type: "convex" },
   }}
 />
-<!-- Radial Gradient story -->
+
 <Story
   name="Overlay Radial Gradient"
   args={{
-    id: "example-id",
-    fit_mode: "fit",
-    size: {
-      width: { type: "fill" },
-      height: { type: "fill" },
-    },
-    source: {
-      light: {
-        width: 600,
-        height: 400,
-        original: "https://placehold.co/600x400",
-        heic: "https://placehold.co/600x400",
-        heic_low_res: "https://placehold.co/600x400",
-        webp: "https://placehold.co/600x400",
-        webp_low_res: "https://placehold.co/600x400",
-      },
-      dark: null,
-    },
     color_overlay: {
-      dark: {
-        type: "hex",
-        value: "#000000FF",
-      },
       light: {
+        type: "radial",
         points: [
           {
-            color: "#020024ff",
             percent: 0,
+            color: "#020024ff",
           },
           {
-            color: "#00d4ff00",
             percent: 100,
+            color: "#00d4ff00",
           },
         ],
-        type: "radial",
       },
     },
   }}
 />
-<!-- Linear Gradient story -->
+
 <Story
   name="Overlay Linear Gradient"
   args={{
-    id: "example-id",
-    fit_mode: "fit",
-    size: {
-      width: { type: "fill" },
-      height: { type: "fill" },
-    },
-    source: {
-      light: {
-        width: 600,
-        height: 400,
-        original: "https://placehold.co/600x400",
-        heic: "https://placehold.co/600x400",
-        heic_low_res: "https://placehold.co/600x400",
-        webp: "https://placehold.co/600x400",
-        webp_low_res: "https://placehold.co/600x400",
-      },
-      dark: null,
-    },
     color_overlay: {
-      dark: {
-        type: "hex",
-        value: "#000000FF",
-      },
       light: {
         degrees: 180,
         points: [
           {
-            color: "#020024ff",
             percent: 0,
+            color: "#020024ff",
           },
           {
-            color: "#00d4ff00",
             percent: 100,
+            color: "#00d4ff00",
           },
         ],
         type: "linear",
@@ -254,36 +125,60 @@
     },
   }}
 />
-<!-- Solid overlay -->
+
 <Story
   name="Overlay Solid"
   args={{
-    id: "example-id",
-    fit_mode: "fit",
+    color_overlay: {
+      light: {
+        type: "hex",
+        value: "#e7c00069",
+      },
+    },
+  }}
+/>
+
+<Story
+  name="Complex"
+  args={{
     size: {
-      width: { type: "fill" },
-      height: { type: "fill" },
+      width: { type: "fixed", value: 128 },
+      height: { type: "fixed", value: 128 },
     },
-    source: {
-      light: {
-        width: 600,
-        height: 400,
-        original: "https://placehold.co/600x400",
-        heic: "https://placehold.co/600x400",
-        heic_low_res: "https://placehold.co/600x400",
-        webp: "https://placehold.co/600x400",
-        webp_low_res: "https://placehold.co/600x400",
+    mask_shape: {
+      type: "rectangle",
+      corners: {
+        top_leading: 0,
+        top_trailing: 16,
+        bottom_trailing: 32,
+        bottom_leading: 64,
       },
-      dark: null,
     },
+    fit_mode: "fill",
+    padding: { top: 0, bottom: 0, leading: 0, trailing: 0 },
+    margin: { top: 0, bottom: 0, leading: 0, trailing: 0 },
     color_overlay: {
-      dark: {
-        type: "hex",
-        value: "#000000FF",
-      },
       light: {
-        type: "hex",
-        value: "#e7c00069",
+        type: "linear",
+        degrees: 180,
+        points: [
+          { percent: 0, color: "#ff000080" },
+          { percent: 100, color: "#ff00ff00" },
+        ],
+      },
+    },
+    border: {
+      width: 3,
+      color: {
+        light: { type: "hex", value: "#00ff0080" },
+      },
+    },
+    shadow: {
+      x: 0,
+      y: 0,
+      radius: 16,
+      color: {
+        light: { type: "hex", value: "#0000ff80" },
       },
     },
   }}