@revenuecat/purchases-ui-js 2.0.1 → 2.0.3

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

@@ -1,20 +1,15 @@
-import type { TextNodeProps } from "../../data/entities";
 import type { ColorMode, SizeType } from "../../types";
 import type { ColorGradientScheme, ColorScheme } from "../../types/colors";
+import type { TextNodeProps } from "../../types/components/text";
 export declare const defaultColor: ColorScheme;
-export declare const defaultBackgroundColor: ColorGradientScheme;
 /**
  * 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 style variables and the appropriate HTML tag to render
+ * @returns Object containing text inline styles and the appropriate HTML tag to render
  */
 export declare const getTextComponentStyles: (colorMode: ColorMode, props: TextNodeProps) => {
-    textStyles: Record<string, string | number>;
-    tagToRender: import("../../utils/style-utils").TextComponentTags;
-};
-export declare function getTextWrapperStyles(restProps: Partial<TextNodeProps>, size: SizeType, background_color?: ColorGradientScheme): string;
-export declare function getTextNodeStyles(colorMode: ColorMode, props: TextNodeProps): {
-    tagToRender: import("../../utils/style-utils").TextComponentTags;
     textStyles: string;
+    tagToRender: string;
 };
+export declare function getTextWrapperInlineStyles(colorMode: ColorMode, _restProps: Partial<TextNodeProps>, size: SizeType, background_color?: ColorGradientScheme | null): string;
 export declare function getHtmlFromMarkdown(text?: string): string;

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

@@ -1,132 +1,47 @@
-import { DEFAULT_BACKGROUND_COLOR, DEFAULT_TEXT_COLOR, } from "../../utils/constants";
-import { getActiveStateProps, getComponentStyles, getSizeStyle, getTextComponentTag, getTextStyles, prefixObject, stringifyStyles, } from "../../utils/style-utils";
+import { mapBackground } from "../../utils/background-utils";
+import { css, mapColor, mapSize, mapSpacing } from "../../utils/base-utils";
+import { DEFAULT_TEXT_COLOR } from "../../utils/constants";
+import { getTextStyles } from "../../utils/style-utils";
 export const defaultColor = {
     light: { type: "hex", value: DEFAULT_TEXT_COLOR },
 };
-export const defaultBackgroundColor = {
-    light: { type: "hex", value: DEFAULT_BACKGROUND_COLOR },
-};
 /**
  * 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 style variables and the appropriate HTML tag to render
+ * @returns Object containing text inline styles and the appropriate HTML tag to render
  */
 export const getTextComponentStyles = (colorMode, props) => {
-    const { font_size = "body_m", color = defaultColor, background_color = defaultBackgroundColor, padding, margin, size, } = props;
-    const styles = {
-        "--width": "unset",
-        "--height": "unset",
-        "--text-align": "initial",
-        "--font-weight": "initial",
-        "--font-size": "initial",
-        "--font-family": "sans-serif",
-        "--background-clip": "unset",
-        "--text-fill-color": "unset",
-        "--margin-block-start": "0px",
-        "--margin-inline-end": "0px",
-        "--margin-block-end": "0px",
-        "--margin-inline-start": "0px",
-        "--padding-block-start": "0px",
-        "--padding-inline-end": "0px",
-        "--padding-block-end": "0px",
-        "--padding-inline-start": "0px",
-        "--background": "transparent",
-        "--text-color": "inherit",
-        "--border": "none",
-        "--border-end-start-radius": "0px",
-        "--border-end-end-radius": "0px",
-        "--border-start-start-radius": "0px",
-        "--border-start-end-radius": "0px",
-        "--shadow": "none",
-        "--flex": "0 1 auto",
-    };
-    const activeStateProps = getActiveStateProps(props.overrides, props.componentState);
-    const tagToRender = getTextComponentTag(font_size);
-    const textStyles = getTextStyles({ ...props, ...activeStateProps });
-    const componentStyles = getComponentStyles({
-        background_color,
-        color,
-        margin,
-        padding,
-        colorMode,
-        ...activeStateProps,
+    const { color = defaultColor, background_color, padding, margin, size, } = props;
+    const textStyles = getTextStyles(props);
+    const style = css({
+        display: "block",
+        width: mapSize(size.width),
+        height: mapSize(size.height),
+        margin: mapSpacing(margin),
+        padding: mapSpacing(padding),
+        ...mapBackground(colorMode, background_color, null),
+        color: mapColor(colorMode, color),
+        "text-align": textStyles["--text-align"] || "initial",
+        "font-weight": textStyles["--font-weight"] || "initial",
+        "font-size": textStyles["--font-size"] || "initial",
+        "font-family": textStyles["--font-family"] || "sans-serif",
+        "-webkit-background-clip": textStyles["--background-clip"] || "initial",
+        "background-clip": textStyles["--background-clip"] || "initial",
+        "-webkit-text-fill-color": textStyles["--text-fill-color"] || "initial",
     });
-    const sizeStyles = getSizeStyle({ ...size, ...activeStateProps });
-    const stylesObject = {
-        ...styles,
-        ...componentStyles,
-        ...textStyles,
-        ...sizeStyles,
-    };
     return {
-        textStyles: prefixObject(stylesObject, "text"),
-        tagToRender,
+        textStyles: style,
+        tagToRender: "span",
     };
 };
-export function getTextWrapperStyles(restProps, size, background_color) {
-    const styles = {
-        "--width": "unset",
-        "--height": "unset",
-        "--flex": "0 1 auto",
-        "--margin-block-start": "0px",
-        "--margin-inline-end": "0px",
-        "--margin-block-end": "0px",
-        "--margin-inline-start": "0px",
-        "--padding-block-start": "0px",
-        "--padding-inline-end": "0px",
-        "--padding-block-end": "0px",
-        "--padding-inline-start": "0px",
-        "--background": "transparent",
-        "--text-color": "inherit",
-        "--border": "none",
-        "--border-end-start-radius": "0px",
-        "--border-end-end-radius": "0px",
-        "--border-start-start-radius": "0px",
-        "--border-start-end-radius": "0px",
-        "--shadow": "none",
-        "--position": "relative",
-        "--inset": "0",
-        "--transform": "initial",
-    };
-    Object.assign(styles, getComponentStyles({
-        background_color,
-        ...restProps,
-    }), getSizeStyle(size));
-    Object.assign(styles, restProps.zStackChildStyles);
-    const prefixedStyles = prefixObject(styles, "text");
-    return stringifyStyles(prefixedStyles);
-}
-export function getTextNodeStyles(colorMode, props) {
-    const styles = {
-        "--text-margin-block-start": "0px",
-        "--text-margin-inline-end": "0px",
-        "--text-margin-block-end": "0px",
-        "--text-margin-inline-start": "0px",
-        "--text-padding-block-start": "0px",
-        "--text-padding-inline-end": "0px",
-        "--text-padding-block-end": "0px",
-        "--text-padding-inline-start": "0px",
-        "--text-background": "transparent",
-        "--text-text-color": "inherit",
-        "--text-border": "none",
-        "--text-border-end-start-radius": "0px",
-        "--text-border-end-end-radius": "0px",
-        "--text-border-start-start-radius": "0px",
-        "--text-border-start-end-radius": "0px",
-        "--text-shadow": "none",
-        "--text-text-align": "initial",
-        "--text-font-weight": "initial",
-        "--text-font-size": "initial",
-        "--text-font-family": "sans-serif",
-        "--text-background-clip": "initial",
-        "--text-text-fill-color": "initial",
-        "--text-width": "unset",
-        "--text-height": "unset",
-        "--text-flex": "0 1 auto",
-    };
-    const { tagToRender, textStyles } = getTextComponentStyles(colorMode, props);
-    Object.assign(styles, textStyles);
-    return { tagToRender, textStyles: stringifyStyles(styles) };
+export function getTextWrapperInlineStyles(colorMode, _restProps, size, background_color) {
+    return css({
+        display: "block",
+        position: "relative",
+        width: mapSize(size.width),
+        height: mapSize(size.height),
+        ...mapBackground(colorMode, background_color, null),
+    });
 }
 export function getHtmlFromMarkdown(text) {
     if (!text)