@wlloyalty/wll-react-sdk 1.0.61 → 1.0.63

package/dist/types/components/atoms/BaseTile/base-tile-body.d.ts

@@ -4,5 +4,11 @@ type BaseTileBodyProps = Omit<TextProps, 'style'> & {
     isSurface?: boolean;
     style?: TextStyle;
 };
+/**
+ * Renders the body text of a BaseTile component.
+ *
+ * @param {BaseTileBodyProps} props - Component props including text styling options
+ * @returns {JSX.Element|null} The rendered body text or null if conditions for display are not met
+ */
 export declare const BaseTileBody: (props: BaseTileBodyProps) => JSX.Element | null;
 export {};

package/dist/types/components/atoms/BaseTile/base-tile-content.d.ts

@@ -1,4 +1,11 @@
-import { ReactNode } from 'react';
-export declare const BaseTileContent: ({ children, }: {
-    children: ReactNode;
-}) => JSX.Element | null;
+import { WithChildren } from '../../../types/helpers';
+type BaseTileContentProps = WithChildren;
+/**
+ * Renders the content section of a BaseTile component.
+ *
+ * @param {BaseTileContentProps} props - Component props
+ * @param {ReactNode} props.children - Child elements to render within the content area
+ * @returns {JSX.Element|null} The rendered content or null if conditions for display are not met
+ */
+export declare const BaseTileContent: ({ children, }: BaseTileContentProps) => JSX.Element | null;
+export {};

package/dist/types/components/atoms/BaseTile/base-tile-header.d.ts

@@ -1,4 +1,11 @@
-import { ReactNode } from 'react';
-export declare const BaseTileHeader: ({ children, }: {
-    children: ReactNode;
-}) => JSX.Element | null;
+import { WithChildren } from '../../../types/helpers';
+type BaseTileHeaderProps = WithChildren;
+/**
+ * Renders the header section of a BaseTile component.
+ *
+ * @param {BaseTileHeaderProps} props - Component props
+ * @param {ReactNode} props.children - Child elements to render within the header
+ * @returns {JSX.Element|null} The rendered header or null if conditions for display are not met
+ */
+export declare const BaseTileHeader: ({ children, }: BaseTileHeaderProps) => JSX.Element | null;
+export {};

package/dist/types/components/atoms/BaseTile/base-tile-media.d.ts

@@ -1,2 +1,8 @@
 import { ImagePropsNoSource } from '../../../types/common';
+/**
+ * Renders the media (image) for a BaseTile component.
+ *
+ * @param {ImagePropsNoSource} props - The image props excluding source
+ * @returns {JSX.Element|null} The rendered image or null if no artwork URL is present
+ */
 export declare const BaseTileMedia: (props: ImagePropsNoSource) => JSX.Element | null;

package/dist/types/components/atoms/BaseTile/base-tile-title.d.ts

@@ -1 +1,6 @@
+/**
+ * Renders the title of a BaseTile component.
+ *
+ * @returns {JSX.Element|null} The rendered title or null if conditions for display are not met
+ */
 export declare const BaseTileTitle: () => JSX.Element | null;

package/dist/types/components/atoms/BaseTile/index.d.ts

@@ -1,30 +1,31 @@
-import React, { ReactNode } from 'react';
 import { ViewStyle } from 'react-native';
 import { Tile } from '../../../types/tile';
+import { WithChildren } from '../../../types/helpers';
 /**
  * Custom hook to access the TileContext.
+ *
+ * @returns {Tile} The current tile from context
+ * @throws {Error} If used outside of a BaseTile
  */
 export declare const useTileContext: () => Tile;
-type BaseTileProps = {
+type BaseTileProps = WithChildren & {
     tile: Tile;
-    children: ReactNode;
     style?: ViewStyle;
 };
-type BaseTileRootProps = {
-    children: ReactNode;
+type BaseTileRootProps = WithChildren & {
     style?: ViewStyle;
 };
 /**
  * BaseTile component with subcomponents attached.
  */
-export declare const BaseTile: (({ tile, children }: BaseTileProps) => JSX.Element) & {
+export declare const BaseTile: (({ tile, children, style, }: BaseTileProps) => JSX.Element | null) & {
     Container: ({ children, style, }: BaseTileRootProps) => JSX.Element;
     Media: (props: import("../../..").ImagePropsNoSource) => JSX.Element | null;
     Content: ({ children, }: {
-        children: React.ReactNode;
+        children?: React.ReactNode;
     }) => JSX.Element | null;
     Header: ({ children, }: {
-        children: React.ReactNode;
+        children?: React.ReactNode;
     }) => JSX.Element | null;
     Title: () => JSX.Element | null;
     Body: (props: Omit<import("react-native").TextProps, "style"> & {

package/dist/types/components/atoms/BaseTile/styles.d.ts

@@ -13,7 +13,34 @@ export declare const baseStyles: {
         objectFit: "cover";
     };
 };
+/**
+ * Custom hook that returns the styles for the BaseTile component.
+ * Applies responsive styling based on the current device.
+ *
+ * @returns StyleSheet styles for the BaseTile component
+ */
 export declare const useBaseTileStyles: () => {
+    container: {
+        width: "100%";
+        height: "100%";
+        overflow: "hidden";
+        position: "relative";
+    };
+    content: {
+        display: "flex";
+    };
+    header: {
+        marginBottom: number;
+        marginTop: number;
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "space-between";
+    };
+    media: {
+        width: "100%";
+        objectFit: "cover";
+    };
+} | {
     container: {
         backgroundColor: string;
         aspectRatio: number;

package/dist/types/components/atoms/Skeleton/index.d.ts

@@ -1,10 +1,10 @@
 import { ViewStyle } from 'react-native';
-interface SkeletonProps {
+type SkeletonProps = {
     width?: number | `${number}%`;
     height?: number | `${number}%`;
     borderRadius?: number;
     style?: ViewStyle;
     numberOfSquares?: number;
-}
+};
 declare const Skeleton: ({ style, numberOfSquares, }: SkeletonProps) => JSX.Element;
 export default Skeleton;

package/dist/types/components/atoms/SkeletonTile/index.d.ts

@@ -1,6 +1,6 @@
 import { ViewStyle } from 'react-native';
-interface SkeletonTileProps {
+type SkeletonTileProps = {
     style?: ViewStyle;
-}
+};
 declare const SkeletonTile: ({ style }: SkeletonTileProps) => JSX.Element;
 export default SkeletonTile;

package/dist/types/components/organisms/BadgeTile/badge-tile-date-earned.d.ts

@@ -1 +1,6 @@
+/**
+ * Renders the date earned for a Badge Tile.
+ *
+ * @returns JSX.Element or null if badge is not earned or badgeNotEarnedMessage exists
+ */
 export declare const BadgeTileDateEarned: () => JSX.Element | null;

package/dist/types/components/organisms/BadgeTile/badge-tile-description.d.ts

@@ -1 +1,6 @@
+/**
+ * Renders the description for a Badge Tile.
+ *
+ * @returns JSX.Element or null if description is not present
+ */
 export declare const BadgeTileDescription: () => JSX.Element | null;

package/dist/types/components/organisms/BadgeTile/badge-tile-media.d.ts

@@ -4,4 +4,9 @@ export type BadgeTileMediaProps = {
     children?: React.ReactNode;
     alt?: string;
 } & Omit<React.ComponentProps<typeof ProgressiveImage>, 'source' | 'alt'>;
+/**
+ * Renders the media for a Badge Tile.
+ *
+ * @returns JSX.Element or null if media is not present
+ */
 export declare const BadgeTileMedia: ({ children, alt, ...props }: BadgeTileMediaProps) => JSX.Element | null;

package/dist/types/components/organisms/BadgeTile/badge-tile-status.d.ts

@@ -1 +1,6 @@
+/**
+ * Renders the status for a Badge Tile.
+ *
+ * @returns JSX.Element or null if badge is not earned or badgeNotEarnedMessage exists
+ */
 export declare const BadgeTileStatus: () => JSX.Element | null;

package/dist/types/components/organisms/BadgeTile/badge-tile-title.d.ts

@@ -1 +1,6 @@
+/**
+ * Renders the title for a Badge Tile.
+ *
+ * @returns JSX.Element or null if name is not present
+ */
 export declare const BadgeTileTitle: () => JSX.Element | null;

package/dist/types/components/organisms/BadgeTile/styles.d.ts

@@ -1,2 +1,8 @@
 import { StyleSheet } from 'react-native';
+/**
+ * Custom hook that returns the styles for the BadgeTile component.
+ * Applies responsive styling based on the current device.
+ *
+ * @returns StyleSheet styles for the BadgeTile component
+ */
 export declare const useBadgeTileStyles: () => ReturnType<typeof StyleSheet.create>;

package/dist/types/components/organisms/BannerTile/banner-tile-cta.d.ts

@@ -1 +1,6 @@
+/**
+ * Renders the call to action of a Banner Tile.
+ *
+ * @returns JSX.Element or null if no text or required props are present
+ */
 export declare const BannerTileCTA: () => JSX.Element | null;

package/dist/types/components/organisms/BannerTile/banner-tile-description.d.ts

@@ -1 +1,6 @@
+/**
+ * Renders the description text of a Banner Tile.
+ *
+ * @returns JSX.Element or null if no description is present
+ */
 export declare const BannerTileDescription: () => JSX.Element | null;

package/dist/types/components/organisms/BannerTile/banner-tile-media.d.ts

@@ -1,5 +1,10 @@
 type BannerTileMediaProps = {
     isArtworkOnly: boolean;
 };
+/**
+ * Renders the media of a Banner Tile.
+ *
+ * @returns JSX.Element or null if no media is present
+ */
 export declare const BannerTileMedia: ({ isArtworkOnly, }: BannerTileMediaProps) => JSX.Element | null;
 export {};

package/dist/types/components/organisms/BannerTile/banner-tile-title.d.ts

@@ -1 +1,6 @@
+/**
+ * Renders the title of a Banner Tile.
+ *
+ * @returns JSX.Element or null if no title is present
+ */
 export declare const BannerTileTitle: () => JSX.Element | null;

package/dist/types/components/organisms/BannerTile/styles.d.ts

@@ -1,2 +1,8 @@
 import { StyleSheet } from 'react-native';
+/**
+ * Custom hook that returns the styles for the BannerTile component.
+ * Applies responsive styling based on the current device.
+ *
+ * @returns StyleSheet styles for the BannerTile component
+ */
 export declare const useBannerTileStyles: () => ReturnType<typeof StyleSheet.create>;

package/dist/types/components/organisms/ContentTile/content-tile-container.d.ts

@@ -1,4 +1,2 @@
-import { ReactNode } from 'react';
-export declare const ContentTileContainer: ({ children, }: {
-    children: ReactNode;
-}) => JSX.Element;
+import { WithChildren } from '../../../types/helpers';
+export declare const ContentTileContainer: ({ children, }: WithChildren) => JSX.Element;

package/dist/types/components/organisms/ContentTile/content-tile-content.d.ts

@@ -1,4 +1,2 @@
-import { ReactNode } from 'react';
-export declare const ContentTileContent: ({ children, }: {
-    children: ReactNode;
-}) => JSX.Element;
+import { WithChildren } from '../../../types/helpers';
+export declare const ContentTileContent: ({ children }: WithChildren) => JSX.Element;

package/dist/types/components/organisms/ContentTile/index.d.ts

@@ -7,13 +7,9 @@ type ContentTileProps = {
  * The ContentTile component with subcomponents attached.
  */
 export declare const ContentTile: (({ tile }: ContentTileProps) => JSX.Element | null) & {
-    Container: ({ children, }: {
-        children: React.ReactNode;
-    }) => JSX.Element;
+    Container: ({ children, }: import("../../../types/helpers").WithChildren) => JSX.Element;
     Media: () => JSX.Element;
-    Content: ({ children, }: {
-        children: React.ReactNode;
-    }) => JSX.Element;
+    Content: ({ children }: import("../../../types/helpers").WithChildren) => JSX.Element;
     Header: () => JSX.Element | null;
     Body: () => JSX.Element;
 };

package/dist/types/components/organisms/ContentTile/styles.d.ts

@@ -1,2 +1,8 @@
 import { StyleSheet } from 'react-native';
+/**
+ * Custom hook that returns the styles for the ContentTile component.
+ * Applies responsive styling based on the current device.
+ *
+ * @returns StyleSheet styles for the ContentTile component
+ */
 export declare const useContentTileStyles: () => ReturnType<typeof StyleSheet.create>;

package/dist/types/components/organisms/Group/index.d.ts

@@ -9,8 +9,31 @@ type GroupContextType = {
 type GroupEmptyStateProps = {
     message: string;
 };
+/**
+ * Context for providing group data to child components
+ */
 export declare const GroupContext: React.Context<GroupContextType | undefined>;
+/**
+ * Custom hook to access the GroupContext
+ *
+ * @returns {GroupContextType} The group context data
+ * @throws {Error} If used outside of a GroupProvider
+ */
 export declare const useGroupContext: () => GroupContextType;
+/**
+ * Component to display an empty state with a message
+ *
+ * @param {GroupEmptyStateProps} props - Component props
+ * @param {string} props.message - Message to display
+ * @returns {JSX.Element} The empty state component
+ */
+export declare const GroupEmptyState: ({ message, }: GroupEmptyStateProps) => JSX.Element;
+/**
+ * Component to render all sections in a group
+ *
+ * @returns {JSX.Element} The sections component
+ */
+export declare const GroupSections: () => JSX.Element;
 /**
  * A page-level component that represents a Group view in the application.
  *
@@ -19,9 +42,9 @@ export declare const useGroupContext: () => GroupContextType;
  * loading, errors, and empty states, providing a complete page experience for
  * viewing group content.
  *
- * @param id - The unique identifier of the group to fetch and display.
+ * @param {GroupProps} props - Component props
+ * @param {string} props.id - The unique identifier of the group to fetch and display
+ * @returns {JSX.Element|null} The rendered group or null if invalid ID
  */
 declare const Group: ({ id }: GroupProps) => JSX.Element | null;
 export default Group;
-export declare const GroupSections: () => JSX.Element;
-export declare const GroupEmptyState: ({ message, }: GroupEmptyStateProps) => JSX.Element;

package/dist/types/components/organisms/PointsTile/points-tile-formatted-points.d.ts

@@ -1 +1,6 @@
+/**
+ * Renders formatted points value for a Points Tile.
+ *
+ * @returns JSX.Element or null if points are undefined or zero
+ */
 export declare const PointsTileFormattedPoints: () => JSX.Element | null;

package/dist/types/components/organisms/PointsTile/points-tile-media.d.ts

@@ -1,5 +1,10 @@
 type PointsTileMediaProps = {
     isFullSize: boolean;
 };
+/**
+ * Renders the media of a Points Tile.
+ *
+ * @returns JSX.Element or null if media is not present
+ */
 export declare const PointsTileMedia: ({ isFullSize, }: PointsTileMediaProps) => JSX.Element | null;
 export {};

package/dist/types/components/organisms/PointsTile/points-tile-title.d.ts

@@ -1 +1,6 @@
+/**
+ * Renders the title of a Points Tile.
+ *
+ * @returns JSX.Element or null if no title is present
+ */
 export declare const PointsTileTitle: () => JSX.Element | null;

package/dist/types/components/organisms/PointsTile/styles.d.ts

@@ -1,4 +1,10 @@
 import { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+/**
+ * Custom hook that returns the styles for the PointsTile component.
+ * Applies responsive styling based on the current device.
+ *
+ * @returns StyleSheet styles for the PointsTile component
+ */
 export declare const usePointsTileStyles: (isFullSize?: boolean) => {
     container: ViewStyle;
     contentContainer: ViewStyle;

package/dist/types/components/organisms/RewardCategoryTile/reward-category-header.d.ts

@@ -1 +1,6 @@
+/**
+ * Renders the header for a Reward Category Tile.
+ *
+ * @returns JSX.Element or null if showName is false or name is not present
+ */
 export declare const RewardCategoryHeader: () => JSX.Element | null;

package/dist/types/components/organisms/RewardCategoryTile/reward-category-media.d.ts

@@ -1 +1,6 @@
+/**
+ * Renders the background media for a Reward Category Tile.
+ *
+ * @returns JSX.Element or null if no artwork URL is present
+ */
 export declare const RewardCategoryMedia: () => JSX.Element | null;

package/dist/types/components/organisms/RewardCategoryTile/styles.d.ts

@@ -1,2 +1,8 @@
 import { StyleSheet } from 'react-native';
+/**
+ * Custom hook that returns the styles for the RewardCategory component.
+ * Applies responsive styling based on the current device.
+ *
+ * @returns StyleSheet styles for the RewardCategory component
+ */
 export declare const useRewardCategoryTileStyles: () => ReturnType<typeof StyleSheet.create>;

package/dist/types/components/organisms/RewardTile/reward-tile-chevron.d.ts

@@ -1 +1,6 @@
+/**
+ * Renders a chevron icon for a Reward Tile.
+ *
+ * @returns JSX.Element
+ */
 export declare const RewardTileChevron: () => JSX.Element;

package/dist/types/components/organisms/RewardTile/reward-tile-media.d.ts

@@ -1,5 +1,12 @@
 type RewardTileMediaProps = {
     isArtworkOnly: boolean;
 };
+/**
+ * Renders the media for a Reward Tile.
+ *
+ * @param props {RewardTileMediaProps} - Component props
+ * @param props.isArtworkOnly {boolean} - Whether the media should be rendered as an artwork only component
+ * @returns JSX.Element or null if no artwork URL is present or artwork should not be shown
+ */
 export declare const RewardTileMedia: ({ isArtworkOnly, }: RewardTileMediaProps) => JSX.Element | null;
 export {};

package/dist/types/components/organisms/RewardTile/reward-tile-points.d.ts

@@ -1 +1,6 @@
+/**
+ * Renders the points value of a Reward Tile.
+ *
+ * @returns JSX.Element or null if price should not be shown or is zero/undefined
+ */
 export declare const RewardTilePoints: () => JSX.Element | null;

package/dist/types/components/organisms/RewardTile/reward-tile-summary.d.ts

@@ -1 +1,6 @@
+/**
+ * Renders the summary of a Reward Tile.
+ *
+ * @returns JSX.Element or null if no summary is present
+ */
 export declare const RewardTileSummary: () => JSX.Element | null;

package/dist/types/components/organisms/RewardTile/reward-tile-title.d.ts

@@ -1 +1,6 @@
+/**
+ * Renders the title of a Reward Tile.
+ *
+ * @returns JSX.Element or null if no name is present
+ */
 export declare const RewardTileTitle: () => JSX.Element | null;

package/dist/types/components/organisms/RewardTile/styles.d.ts

@@ -1,2 +1,8 @@
 import { StyleSheet } from 'react-native';
+/**
+ * Custom hook that returns the styles for the RewardTile component.
+ * Applies responsive styling based on the current device.
+ *
+ * @returns StyleSheet styles for the RewardTile component
+ */
 export declare const useRewardTileStyles: () => ReturnType<typeof StyleSheet.create>;

package/dist/types/components/organisms/Section/index.d.ts

@@ -13,10 +13,18 @@ type SectionProps = {
 export declare const SectionContext: React.Context<SectionContextType | undefined>;
 /**
  * Custom hook to access the SectionContext.
+ *
+ * @returns {SectionContextType} The section context value
+ * @throws {Error} If used outside of a SectionProvider
  */
 export declare const useSectionContext: () => SectionContextType;
 /**
  * The Section component renders a section based on its type (e.g., Banner, Grid).
+ *
+ * @param {SectionProps} props - Component props
+ * @param {TSection} [props.section] - The section data
+ * @param {string} [props.sectionId] - The ID of the section to fetch
+ * @returns {JSX.Element|null} The rendered section or null if invalid props
  */
 declare const Section: ({ section, sectionId }: SectionProps) => JSX.Element | null;
 export default Section;

package/dist/types/components/organisms/Section/styles.d.ts

@@ -1,2 +1,8 @@
 import { StyleSheet } from 'react-native';
+/**
+ * Custom hook that returns the styles for the Section component.
+ * Applies responsive styling based on the current device.
+ *
+ * @returns StyleSheet styles for the Section component
+ */
 export declare const useSectionStyles: () => ReturnType<typeof StyleSheet.create>;

package/dist/types/context/WllSdkContext.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
 import { TGroup } from '../types/group';
+import { WithChildren } from '../types/helpers';
 import { NavigationConfig } from '../types/navigation';
 import { TSection } from '../types/section';
 import { BaseThemeObject, ThemeContextType } from '../types/theme';
@@ -24,8 +24,7 @@ type WllSdkContextType = ThemeContextType & {
 } & Readonly<{
     readonly config: SDKConfig;
 }>;
-type WllSdkProviderProps = {
-    children: ReactNode;
+type WllSdkProviderProps = WithChildren & {
     theme?: Partial<BaseThemeObject>;
     config: SDKConfig;
     navigationConfig?: NavigationConfig;

package/dist/types/types/helpers.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Makes a configuration type with required and optional fields,
+ * providing default values for optional fields.
+ */
+export type SafeConfig<T, R extends keyof T> = Required<Pick<T, R>> & Partial<Omit<T, R>>;
+/**
+ * Adds optional children to any component props.
+ */
+export type WithChildren<T = {}> = T & {
+    children?: React.ReactNode;
+};

package/dist/types/types/responsive.d.ts

@@ -1,11 +1,11 @@
 export type DimensionMode = 'desktop' | 'tablet' | 'mobile';
-export interface WindowDimensions {
+export type WindowDimensions = {
     width: number;
     height: number;
-}
-export interface ResponsiveContextType {
+};
+export type ResponsiveContextType = {
     dimensionMode: DimensionMode;
     isTablet: boolean;
     isMobile: boolean;
     isDesktop: boolean;
-}
+};

package/dist/types/types/theme.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
 import { sizes } from '../utils/styling';
+import { WithChildren } from './helpers';
 import { BadgeTileType } from './tile';
 export type PercentageKey = 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 95;
 export type DerivedColors = {
@@ -37,8 +37,7 @@ export type ThemeContextType = {
     theme: ThemeObject;
     setTheme: (theme: ThemeObject) => void;
 };
-export type ThemeProviderProps = {
-    children: ReactNode;
+export type ThemeProviderProps = WithChildren & {
     theme?: Partial<BaseThemeObject>;
 };
 export type Variant = 'primary' | 'accent' | 'positive' | 'negative';

package/dist/types/types/tile.d.ts

@@ -155,4 +155,8 @@ export type Tile = {
 };
 declare const getConfigForTileType: (tileType: TileType) => typeof BannerTileConfig | typeof PointsTileConfig | typeof ContentTileConfig | typeof RewardTileConfig | typeof BadgeTileConfig | typeof RewardCategoryTileConfig | typeof TierTileConfig;
 export type TileConfig = InstanceType<ReturnType<typeof getConfigForTileType>>;
+export type TileSizeInfo = {
+    isFullSize: boolean;
+    isHalfSize: boolean;
+};
 export {};

package/dist/types/utils/contextHelpers.d.ts

@@ -0,0 +1,17 @@
+import { TileSizeInfo } from '../types/tile';
+/**
+ * Utility function that checks if a component context and its configuration exist.
+ * Works for both tile contexts and banner contexts.
+ *
+ * @param context - The component context to validate (tileContext or bannerContext)
+ * @returns `true` if both the context and its configuration exist, otherwise `false`
+ */
+export declare function isContextValid(context: any): boolean;
+/**
+ * Checks if a tile's content should be hidden based on its size and artwork configuration.
+ *
+ * @param {TileSizeInfo | null} sizeInfo - The size information for the tile
+ * @param {string | null | undefined} artworkUrl - The URL of the tile's artwork
+ * @returns {boolean} True if the content should be hidden, false otherwise
+ */
+export declare const shouldHideContentForHalfTile: (sizeInfo: TileSizeInfo | null, artworkUrl?: string | null) => boolean;