@revenuecat/purchases-ui-js 0.0.12 → 0.0.14

package/dist/components/text/{Text.stories.svelte.d.ts → TextNode.stories.svelte.d.ts}

@@ -1,4 +1,4 @@
-import Text from "./Text.svelte";
+import TextNode from "./TextNode.svelte";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,8 +12,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Text: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const TextNode: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type Text = InstanceType<typeof Text>;
-export default Text;
+type TextNode = InstanceType<typeof TextNode>;
+export default TextNode;

package/dist/components/text/TextNode.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { getTextComponentStyles } from "./text-utils";
+  import Text from "./Text.svelte";
+  import type { TextNodeProps } from "../../data/entities";
+  import { getLabelById, stringifyStyles } from "../../utils/style-utils";
+  import { replaceVariables } from "../../utils/variable-utils";
+
+  const {
+    id,
+    labels,
+    text_lid,
+    purchaseState,
+    variableDictionary,
+    ...restProps
+  }: TextNodeProps = $props();
+
+  const { tagToRender, textStyles } = $derived(
+    getTextComponentStyles({
+      id,
+      labels,
+      text_lid,
+      purchaseState,
+      ...restProps,
+    }),
+  );
+  const styles = $derived(stringifyStyles(textStyles));
+
+  const label = $derived(
+    getLabelById(
+      text_lid,
+      purchaseState.locale,
+      purchaseState.defaultLocale,
+      labels,
+    ),
+  );
+  const parsedLabel = $derived(
+    replaceVariables({
+      value: label,
+      variableDictionary,
+    }),
+  );
+</script>
+
+<Text styleVariables={styles} component={tagToRender} {id}>
+  {parsedLabel}
+</Text>

package/dist/components/text/TextNode.svelte.d.ts

@@ -0,0 +1,3 @@
+import type { TextNodeProps } from "../../data/entities";
+declare const TextNode: import("svelte").Component<TextNodeProps, {}, "">;
+export default TextNode;

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

@@ -1,5 +1,5 @@
-import { type TextComponentTags } from "../../utils";
-import type { TextProps } from "../../data/entities";
+import { type TextComponentTags } from "../../utils/style-utils";
+import type { TextNodeProps } from "../../data/entities";
 type TextStyleVariables = {
     "--width": string;
     "--height": string;
@@ -13,7 +13,7 @@ type TextStyleVariables = {
  * @param props - Text component properties including font, color, background, spacing etc.
  * @returns Object containing text style variables and the appropriate HTML tag to render
  */
-export declare const getTextComponentStyles: (props: TextProps) => {
+export declare const getTextComponentStyles: (props: TextNodeProps) => {
     textStyles: TextStyleVariables;
     tagToRender: TextComponentTags;
 };

package/dist/components/text/text-utils.js

@@ -1,5 +1,5 @@
-import { getSizeStyle, getTextComponentTag, getTextStyles, } from "../../utils";
-import { getComponentStyles } from "../../utils";
+import { getSizeStyle, getTextComponentTag, getTextStyles, } from "../../utils/style-utils";
+import { getComponentStyles } from "../../utils/style-utils";
 /**
  * Generates comprehensive styles for text components by combining text, component and size styles
  * @param props - Text component properties including font, color, background, spacing etc.

package/dist/data/entities.d.ts

@@ -1,5 +1,6 @@
 import type { BorderType, ColorMode, ColorType, CornerRadiusType, DimensionType, FitTypes, FontSizeTags, FontWeights, ShadowType, ShapeType, SizeType, Spacing, TextAlignment } from "../types";
 import type { PurchaseState } from "./state";
+import type { VariableDictionary } from "../utils/variable-utils";
 export interface Extra {
     [key: string]: any;
 }
@@ -47,6 +48,7 @@ interface SharedComponentProps extends PaywallComponent, ActionsProps, PurchaseS
     id: string;
     colorMode: ColorMode;
     name: string;
+    variableDictionary?: VariableDictionary;
 }
 interface Action {
     type: "restore_purchases" | "navigate_to" | "navigate_back" | "purchase" | "select_package";
@@ -104,7 +106,7 @@ export interface StackProps extends SharedComponentProps {
     spacing?: number;
     type: "stack";
 }
-export interface TextProps extends SharedComponentProps {
+export interface TextNodeProps extends SharedComponentProps {
     background_color?: ColorType;
     color: ColorType;
     components: PaywallComponent[];
@@ -117,6 +119,7 @@ export interface TextProps extends SharedComponentProps {
     text_lid: string;
     type: "text";
     size: SizeType;
+    variableDictionary?: VariableDictionary;
 }
 type ImageSourceDictionaryType = Record<"original" | "heic" | "heic_low_res" | "webp" | "webp_low_res", string>;
 type ImageSourceType = {

package/dist/data/state.d.ts

@@ -1,5 +1,7 @@
+import type { VariableDictionary } from "../utils/variable-utils";
 export interface PurchaseState {
     selectedPackageId?: string;
     locale: string;
     defaultLocale: string;
+    variablesPerPackage?: Record<string, VariableDictionary>;
 }

package/dist/index.d.ts

@@ -8,3 +8,4 @@ export { default as Image } from "./components/image/Image.svelte";
 export { default as PurchaseButton } from "./components/purchase-button/PurchaseButton.svelte";
 export { default as Package } from "./components/package/Package.svelte";
 export { default as Footer } from "./components/footer/Footer.svelte";
+export { type VariableDictionary } from "./utils/variable-utils";

package/dist/index.js

@@ -9,3 +9,4 @@ export { default as Image } from "./components/image/Image.svelte";
 export { default as PurchaseButton } from "./components/purchase-button/PurchaseButton.svelte";
 export { default as Package } from "./components/package/Package.svelte";
 export { default as Footer } from "./components/footer/Footer.svelte";
+export {} from "./utils/variable-utils";

package/dist/stories/fixtures.d.ts

@@ -3,6 +3,9 @@ export declare const paywallData: PaywallData;
 export declare const alignmentPaywallData: PaywallData;
 export declare const fontsPaywallData: PaywallData;
 export declare const pastaPaywallData: PaywallData;
+export declare const variablesPastaPaywallData: PaywallData;
+export declare const gradientPaywallData: PaywallData;
+export declare const calmPaywallData: PaywallData;
 export declare const labelsData: {
     en_US: {
         id1: string;