@revenuecat/purchases-ui-js 2.0.5 → 2.1.0

package/dist/components/tabs/Tabs.stories.svelte

@@ -927,3 +927,442 @@
     type: "tabs",
   }}
 />
+
+<Story
+  name="Toggle"
+  decorators={[
+    componentDecorator(),
+    localizationDecorator({
+      defaultLocale,
+      localizations: {
+        [defaultLocale]: {
+          "9snr-lp9lS": "Show family plans",
+          izPmeYOm4j: "Show family plans",
+        },
+      },
+    }),
+  ]}
+  args={{
+    background: null,
+    control: {
+      stack: {
+        background: null,
+        background_color: null,
+        badge: null,
+        border: null,
+        components: [
+          {
+            default_value: true,
+            id: "gVAl7ORI44",
+            name: "",
+            thumb_color_off: {
+              light: {
+                type: "hex",
+                value: "#FFFFFF",
+              },
+            },
+            thumb_color_on: {
+              light: {
+                type: "hex",
+                value: "#FFFFFF",
+              },
+            },
+            track_color_off: {
+              light: {
+                type: "hex",
+                value: "#e1e1e5ff",
+              },
+            },
+            track_color_on: {
+              light: {
+                type: "hex",
+                value: "#576CDBff",
+              },
+            },
+            type: "tab_control_toggle",
+          },
+        ],
+        dimension: {
+          alignment: "leading",
+          distribution: "start",
+          type: "vertical",
+        },
+        id: "hIpAw5JTtG",
+        margin: {
+          bottom: 0,
+          leading: 0,
+          top: 0,
+          trailing: 0,
+        },
+        name: "",
+        padding: {
+          bottom: 0,
+          leading: 0,
+          top: 0,
+          trailing: 0,
+        },
+        shadow: null,
+        shape: {
+          corners: {
+            bottom_leading: 0,
+            bottom_trailing: 0,
+            top_leading: 0,
+            top_trailing: 0,
+          },
+          type: "rectangle",
+        },
+        size: {
+          height: {
+            type: "fit",
+            value: null,
+          },
+          width: {
+            type: "fit",
+            value: null,
+          },
+        },
+        spacing: 0,
+        type: "stack",
+      },
+      type: "toggle",
+    },
+    default_tab_id: "gi3qRZrSKa",
+    id: "zRnUSrsOhj",
+    margin: {
+      bottom: 0,
+      leading: 0,
+      top: 0,
+      trailing: 0,
+    },
+    name: "",
+    padding: {
+      bottom: 16,
+      leading: 16,
+      top: 16,
+      trailing: 16,
+    },
+    shape: {
+      corners: {
+        bottom_leading: 0,
+        bottom_trailing: 0,
+        top_leading: 0,
+        top_trailing: 0,
+      },
+      type: "rectangle",
+    },
+    size: {
+      height: {
+        type: "fit",
+        value: null,
+      },
+      width: {
+        type: "fill",
+        value: null,
+      },
+    },
+    tabs: [
+      {
+        id: "MEOs13s6G8",
+        name: "OFF",
+        stack: {
+          background: null,
+          background_color: null,
+          badge: null,
+          border: null,
+          components: [
+            {
+              background: {
+                type: "color",
+                value: {
+                  light: {
+                    type: "hex",
+                    value: "#f7f7faff",
+                  },
+                },
+              },
+              background_color: null,
+              badge: null,
+              border: null,
+              components: [
+                {
+                  background_color: null,
+                  color: {
+                    light: {
+                      type: "hex",
+                      value: "#000000e6",
+                    },
+                  },
+                  font_name: null,
+                  font_size: 14,
+                  font_weight: "regular",
+                  font_weight_int: 400,
+                  horizontal_alignment: "leading",
+                  id: "By5e8IBSbf",
+                  margin: {
+                    bottom: 0,
+                    leading: 0,
+                    top: 0,
+                    trailing: 0,
+                  },
+                  name: "",
+                  padding: {
+                    bottom: 0,
+                    leading: 0,
+                    top: 0,
+                    trailing: 0,
+                  },
+                  size: {
+                    height: {
+                      type: "fit",
+                      value: null,
+                    },
+                    width: {
+                      type: "fit",
+                      value: null,
+                    },
+                  },
+                  text_lid: "9snr-lp9lS",
+                  type: "text",
+                },
+                {
+                  id: "ZRerJx5wLi",
+                  name: "",
+                  type: "tab_control",
+                },
+              ],
+              dimension: {
+                alignment: "center",
+                distribution: "space_between",
+                type: "horizontal",
+              },
+              id: "ATrU9MBBJx",
+              margin: {
+                bottom: 0,
+                leading: 16,
+                top: 0,
+                trailing: 16,
+              },
+              name: "Switch stack",
+              padding: {
+                bottom: 8,
+                leading: 24,
+                top: 8,
+                trailing: 8,
+              },
+              shadow: null,
+              shape: {
+                corners: null,
+                type: "pill",
+              },
+              size: {
+                height: {
+                  type: "fit",
+                  value: null,
+                },
+                width: {
+                  type: "fit",
+                  value: null,
+                },
+              },
+              spacing: 24,
+              type: "stack",
+            },
+          ],
+          dimension: {
+            alignment: "center",
+            distribution: "center",
+            type: "vertical",
+          },
+          id: "tj1QOsrpFb",
+          margin: {
+            bottom: 0,
+            leading: 0,
+            top: 0,
+            trailing: 0,
+          },
+          name: "Tab",
+          padding: {
+            bottom: 0,
+            leading: 0,
+            top: 0,
+            trailing: 0,
+          },
+          shadow: null,
+          shape: {
+            corners: {
+              bottom_leading: 0,
+              bottom_trailing: 0,
+              top_leading: 0,
+              top_trailing: 0,
+            },
+            type: "rectangle",
+          },
+          size: {
+            height: {
+              type: "fit",
+              value: null,
+            },
+            width: {
+              type: "fill",
+              value: null,
+            },
+          },
+          spacing: 16,
+          type: "stack",
+        },
+        type: "tab",
+      },
+      {
+        id: "gi3qRZrSKa",
+        name: "ON",
+        stack: {
+          background: null,
+          background_color: null,
+          border: null,
+          components: [
+            {
+              background: {
+                type: "color",
+                value: {
+                  light: {
+                    type: "hex",
+                    value: "#f7f7faff",
+                  },
+                },
+              },
+              background_color: null,
+              badge: null,
+              border: null,
+              components: [
+                {
+                  background_color: null,
+                  color: {
+                    light: {
+                      type: "hex",
+                      value: "#000000e6",
+                    },
+                  },
+                  font_name: null,
+                  font_size: 14,
+                  font_weight: "regular",
+                  font_weight_int: 400,
+                  horizontal_alignment: "leading",
+                  id: "xs9GkrXsl9",
+                  margin: {
+                    bottom: 0,
+                    leading: 0,
+                    top: 0,
+                    trailing: 0,
+                  },
+                  name: "",
+                  padding: {
+                    bottom: 0,
+                    leading: 0,
+                    top: 0,
+                    trailing: 0,
+                  },
+                  size: {
+                    height: {
+                      type: "fit",
+                      value: null,
+                    },
+                    width: {
+                      type: "fit",
+                      value: null,
+                    },
+                  },
+                  text_lid: "izPmeYOm4j",
+                  type: "text",
+                },
+                {
+                  id: "XMUc_WOeWO",
+                  name: "",
+                  type: "tab_control",
+                },
+              ],
+              dimension: {
+                alignment: "center",
+                distribution: "space_between",
+                type: "horizontal",
+              },
+              id: "PNnFNzZU4M",
+              margin: {
+                bottom: 0,
+                leading: 16,
+                top: 0,
+                trailing: 16,
+              },
+              name: "Switch stack",
+              padding: {
+                bottom: 8,
+                leading: 24,
+                top: 8,
+                trailing: 8,
+              },
+              shadow: null,
+              shape: {
+                corners: null,
+                type: "pill",
+              },
+              size: {
+                height: {
+                  type: "fit",
+                  value: null,
+                },
+                width: {
+                  type: "fit",
+                  value: null,
+                },
+              },
+              spacing: 24,
+              type: "stack",
+            },
+          ],
+          dimension: {
+            alignment: "center",
+            distribution: "center",
+            type: "vertical",
+          },
+          id: "Q6oIOhxGOB",
+          margin: {
+            bottom: 0,
+            leading: 0,
+            top: 0,
+            trailing: 0,
+          },
+          name: "Tab",
+          padding: {
+            bottom: 0,
+            leading: 0,
+            top: 0,
+            trailing: 0,
+          },
+          shadow: null,
+          shape: {
+            corners: {
+              bottom_leading: 0,
+              bottom_trailing: 0,
+              top_leading: 0,
+              top_trailing: 0,
+            },
+            type: "rectangle",
+          },
+          size: {
+            height: {
+              type: "fit",
+              value: null,
+            },
+            width: {
+              type: "fill",
+              value: null,
+            },
+          },
+          spacing: 16,
+          type: "stack",
+        },
+        type: "tab",
+      },
+    ],
+    type: "tabs",
+  }}
+/>

package/dist/components/tabs/Tabs.svelte

@@ -44,14 +44,20 @@
     }),
   );
 
-  const tab = writable(
-    tabs.find((tab) => tab.id === default_tab_id) ?? tabs.at(0),
+  const selectedTabIndex = writable(
+    Math.max(
+      0,
+      tabs.findIndex((tab) => tab.id === default_tab_id),
+    ),
   );
 
+  const tab = derived(selectedTabIndex, (value) => tabs[value]);
+
   const selectTab: SelectTab = (tabId, tabIndex) => {
-    const nextTab = tabs.find((tab) => tab.id === tabId) ?? tabs.at(tabIndex);
-    if (nextTab !== undefined) {
-      tab.set(nextTab);
+    const foundIndex = tabs.findIndex((tab) => tab.id === tabId);
+    const nextIndex = foundIndex !== -1 ? foundIndex : tabIndex;
+    if (nextIndex >= 0 && nextIndex < tabs.length) {
+      selectedTabIndex.set(tabIndex);
     }
   };
 
@@ -59,6 +65,7 @@
     control: readable(control),
     selectedTabId: derived(tab, (tab) => tab.id),
     selectTab,
+    isActive: derived(selectedTabIndex, (value) => value === 1),
   });
 </script>
 

package/dist/components/tabs/tabs-context.d.ts

@@ -5,6 +5,7 @@ interface TabsContext {
     control: Readable<TabControl>;
     selectedTabId: Readable<TabProps["id"]>;
     selectTab: SelectTab;
+    isActive: Readable<boolean>;
 }
 export declare function setTabsContext(context: TabsContext): void;
 export declare function getTabsContext(): TabsContext;

package/dist/components/text/TextNode.stories.svelte

@@ -6,6 +6,7 @@
   import type { VariableDictionary } from "../../types/variables";
   import { defineMeta } from "@storybook/addon-svelte-csf";
   import { VARIABLES } from "../paywall/fixtures/variables";
+  import { DEFAULT_SPACING } from "../../utils/constants";
 
   /*
    * Documentation for this component can be found in https://www.notion.so/revenuecat/Text-e257cb046e104351861f8364ede617be?pvs=4
@@ -32,6 +33,8 @@
         width: { type: "fill" },
         height: { type: "fill" },
       },
+      padding: DEFAULT_SPACING,
+      margin: DEFAULT_SPACING,
     },
     parameters: {
       localizations: {
@@ -88,6 +91,109 @@
   }}
 />
 
+<Story
+  name="Linear gradeint"
+  decorators={[
+    localizationDecorator({
+      defaultLocale,
+      localizations: { [defaultLocale]: { [text_lid]: "Linear gradient" } },
+    }),
+  ]}
+  args={{
+    color: {
+      light: {
+        degrees: 90,
+        points: [
+          {
+            color: "#e81c0fFF",
+            percent: 0,
+          },
+          {
+            color: "#0029ffff",
+            percent: 100,
+          },
+        ],
+        type: "linear",
+      },
+    },
+    background_color: {
+      light: {
+        degrees: 90,
+        points: [
+          {
+            color: "#ffffffff",
+            percent: 0,
+          },
+          {
+            color: "#000000ff",
+            percent: 100,
+          },
+        ],
+        type: "linear",
+      },
+    },
+    font_size: 48,
+    font_weight: "regular",
+    font_weight_int: 400,
+    horizontal_alignment: "leading",
+    size: {
+      width: { type: "fit" },
+      height: { type: "fit" },
+    },
+  }}
+/>
+
+<Story
+  name="Radial gradient"
+  decorators={[
+    localizationDecorator({
+      defaultLocale,
+      localizations: { [defaultLocale]: { [text_lid]: "Radial gradient" } },
+    }),
+  ]}
+  args={{
+    color: {
+      light: {
+        points: [
+          {
+            color: "#3bf60cff",
+            percent: 23,
+          },
+          {
+            color: "#e40fe8ff",
+            percent: 100,
+          },
+        ],
+        type: "radial",
+      },
+    },
+    background_color: {
+      light: {
+        degrees: 90,
+        points: [
+          {
+            color: "#ffffffff",
+            percent: 0,
+          },
+          {
+            color: "#000000ff",
+            percent: 100,
+          },
+        ],
+        type: "linear",
+      },
+    },
+    font_size: 48,
+    font_weight: "regular",
+    font_weight_int: 400,
+    horizontal_alignment: "leading",
+    size: {
+      width: { type: "fit" },
+      height: { type: "fit" },
+    },
+  }}
+/>
+
 <Story
   name="With Spacing"
   args={{

package/dist/components/text/TextNode.svelte

@@ -7,6 +7,7 @@
   import Text from "./Text.svelte";
   import { getColorModeContext } from "../../stores/color-mode";
   import { getLocalizationContext } from "../../stores/localization";
+  import { getPaywallContext } from "../../stores/paywall";
   import { getSelectedStateContext } from "../../stores/selected";
   import { getVariablesContext } from "../../stores/variables";
   import type { TextNodeProps } from "../../types/components/text";
@@ -26,8 +27,9 @@
   const getColorMode = getColorModeContext();
   const colorMode = $derived(getColorMode());
 
-  const { tagToRender, textStyles } = $derived(
-    getTextComponentStyles(colorMode, actualProps),
+  const { uiConfig } = getPaywallContext();
+  let textStyles = $derived(
+    getTextComponentStyles(colorMode, actualProps, uiConfig.app.fonts),
   );
 
   const wrapperStyles = $derived(
@@ -49,7 +51,7 @@
 </script>
 
 <span style={wrapperStyles}>
-  <Text style={textStyles} component={tagToRender}>
+  <Text style={textStyles} component="span">
     {@html markdownParsed}
   </Text>
 </span>

package/dist/components/text/text-utils.d.ts

@@ -1,15 +1,15 @@
-import type { ColorMode, SizeType } from "../../types";
+import { type ColorMode, type SizeType } from "../../types";
 import type { ColorGradientScheme, ColorScheme } from "../../types/colors";
 import type { TextNodeProps } from "../../types/components/text";
+import type { AppFontsConfig } from "../../types/ui-config";
+import { type CSS } from "../../utils/base-utils";
 export declare const defaultColor: ColorScheme;
+export declare function mapTextColor(colorMode: ColorMode, scheme: ColorGradientScheme): CSS;
 /**
  * Generates comprehensive styles for text components by combining text, component and size styles
  * @param props - Text component properties including font, color, background, spacing etc.
  * @returns Object containing text inline styles and the appropriate HTML tag to render
  */
-export declare const getTextComponentStyles: (colorMode: ColorMode, props: TextNodeProps) => {
-    textStyles: string;
-    tagToRender: string;
-};
+export declare const getTextComponentStyles: (colorMode: ColorMode, props: TextNodeProps, fonts: AppFontsConfig) => string;
 export declare function getTextWrapperInlineStyles(colorMode: ColorMode, _restProps: Partial<TextNodeProps>, size: SizeType, background_color?: ColorGradientScheme | null): string;
 export declare function getHtmlFromMarkdown(text?: string): string;