@nuskin/marketing-components 1.40.0 → 1.40.1

package/dist/index.d.mts

@@ -0,0 +1,446 @@
+import React$1, { ReactElement, ComponentProps } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface CsTextProps$1 {
+    full_width?: boolean;
+    container_background_color?: unknown;
+    alignment?: 'left' | 'center' | 'right';
+    text_editor: string;
+    font_color?: boolean;
+    $?: {
+        text_editor?: Record<string, unknown>;
+    };
+}
+declare const CsText: ({ full_width, container_background_color, alignment, text_editor, font_color, $ }: CsTextProps$1) => ReactElement | null;
+
+type NsImageProps = {
+    alt: string;
+    className?: string;
+    fill?: boolean;
+    height?: number | string;
+    id?: string;
+    src: string;
+    variant?: 'product' | 'award' | 'icon' | 'fill';
+    width?: number | string;
+    full_width?: boolean;
+};
+interface CsImageProps extends Partial<NsImageProps> {
+    image_alignment?: 'left' | 'center' | 'right';
+    image?: string | {
+        image: CSImage[];
+    };
+    isEditing?: boolean;
+    parent$?: Record<string, unknown>;
+    $?: Record<string, unknown>;
+}
+type CSImage = {
+    previewUrls: string[];
+    selected: ImageFile;
+    isPublic: boolean;
+    type: 'IMAGE';
+    id: string;
+    files: {
+        transformBaseUrl: ImageFileMeta;
+        thumbnail: ImageFileMeta;
+    };
+    databaseId: string;
+    name: string;
+    description: string | null;
+};
+type ImageFile = {
+    url: string;
+    width: number | null;
+    height: number | null;
+    fileSize: number | null;
+    imageType: 'transformBaseUrl' | 'thumbnail';
+    altText: string;
+    type: 'IMAGE';
+    fit: 'cover' | 'contain';
+    position: string;
+    bgColor: string;
+};
+type ImageFileMeta = {
+    url: string;
+    width: number | null;
+    height: number | null;
+    fileSize: number | null;
+};
+
+declare const CsImage: (props: CsImageProps) => react_jsx_runtime.JSX.Element;
+
+type LinkTarget = '_self' | '_blank';
+type ButtonVariant = 'primary' | 'secondary' | 'link';
+type ButtonSize = 'small' | 'medium' | 'large';
+type ButtonAlignment = 'left' | 'center' | 'right';
+type IconPosition = 'left' | 'right';
+interface Button$ {
+    [key: string]: unknown;
+    $?: {
+        title?: Record<string, unknown>;
+        icon?: Record<string, unknown>;
+    };
+}
+type ButtonType = 'square' | 'rounded';
+interface ButtonsEntry extends ButtonProps {
+    $?: Record<string, unknown>;
+    [key: string]: unknown;
+}
+interface ButtonsBlock$ {
+    [key: string]: unknown;
+    buttons__0?: Record<string, unknown>;
+}
+type ButtonsBlock = {
+    buttons?: ButtonsEntry[];
+    $?: ButtonsBlock$;
+};
+type ButtonBlockProp = ButtonProps | ButtonsBlock;
+interface ButtonProps {
+    title?: string;
+    url?: string;
+    placeholder_text?: string;
+    open_in_new_tab?: 'Yes' | 'No' | null;
+    variant?: ButtonVariant;
+    button_size?: ButtonSize;
+    alignment?: ButtonAlignment;
+    buttontype?: string;
+    icon?: string;
+    iconposition?: IconPosition;
+    button_state?: boolean | string;
+    $?: Button$;
+    parent$?: Record<string, unknown>;
+    isEditing?: boolean;
+}
+
+type CSEditTags$1 = Record<string, any>;
+type GradientDirection = 'leftToRight' | 'rightToLeft' | 'radial';
+type GradientDepth$1 = 'sm' | 'md' | 'lg';
+type ColorTheme = 'primary' | 'secondary';
+type TextColor = 'white' | 'dark';
+type MediaType = 'image' | 'gif' | 'video';
+type BannerAlignment = 'left' | 'center' | 'right';
+type TextAlignment = 'left' | 'center' | 'right';
+interface BannerData {
+    header_text?: string;
+    title?: string;
+    subtitle?: string;
+    body_text?: string;
+    cta_button?: ButtonBlockProp;
+    bynder_media?: string;
+    position?: 'left' | 'center' | 'right';
+    text_color?: 'white' | 'dark';
+    gradient?: {
+        show_gradient?: boolean;
+        gradient_depth?: 'sm' | 'md' | 'lg';
+        $?: CSEditTags$1;
+    };
+    content_position?: 'left' | 'center' | 'right';
+    $?: CSEditTags$1;
+    isEditing?: boolean;
+}
+interface MarketingBannerData {
+    readonly banners: BannerData[];
+    readonly rotation_interval?: number;
+}
+interface MarketingBannerProps extends MarketingBannerData {
+    readonly isEditing?: boolean;
+    readonly $?: CSEditTags$1;
+}
+interface BannerTextProps {
+    readonly headerText?: string;
+    readonly title?: string;
+    readonly subtitle?: string;
+    readonly bodyText?: string;
+    readonly textColor?: string;
+    readonly textAlignment?: TextAlignment;
+    readonly testId?: string;
+    readonly $?: CSEditTags$1;
+    readonly isEditing?: boolean;
+}
+interface UseCarouselReturn {
+    currentIndex: number;
+    isPaused: boolean;
+    totalSlides: number;
+    goToNext: () => void;
+    goToPrevious: () => void;
+    goToSlide: (index: number) => void;
+    pause: () => void;
+    resume: () => void;
+    handleKeyDown: (event: React.KeyboardEvent) => void;
+}
+
+/**
+ * MarketingBanner Component
+ * Main component with single banner and automatic carousel mode
+ */
+
+declare function MarketingBannerComponent(props: Readonly<MarketingBannerProps>): React$1.ReactElement;
+
+/**
+ * Default Configurations
+ * Marketing Banner Component
+ */
+declare const DEFAULT_BANNER_CONFIG: {
+    position: "left";
+    textColor: "white";
+    showGradient: boolean;
+    gradientDepth: "md";
+    mediaType: "image";
+    ctaVariant: "dark";
+};
+declare const DEFAULT_CAROUSEL_CONFIG: {
+    rotationInterval: number;
+};
+declare const DEFAULT_ROTATION_INTERVAL = 5000;
+declare const PLACEHOLDER_VALUES: {
+    readonly header: "Enter Header";
+    readonly title: "Enter Title";
+    readonly subtitle: "Enter Subtitle";
+    readonly body: "Enter Body Text";
+};
+
+type PaddingScale = 'none' | 'small' | 'medium' | 'large';
+type DividerStyle = 'solid' | 'dashed' | 'dotted' | 'none';
+type DividerThickness = 'thin' | 'medium' | 'thick';
+interface SpacingDividerProps {
+    vertical_padding?: PaddingScale;
+    divider_style?: DividerStyle;
+    divider_thickness?: DividerThickness;
+    divider_color?: string;
+    divider_gradient_preset?: 'none' | 'soft' | 'bold' | 'faint';
+    divider_width_percent?: number;
+    divider_alignment?: 'left' | 'center' | 'right';
+}
+
+declare const SpacingDivider: (props: SpacingDividerProps) => React$1.ReactElement | null;
+
+/** Gap between columns/slides: preset name → px (none: 0, small: 8, medium: 12, large: 16) */
+type GapPreset$1 = 'none' | 'small' | 'medium' | 'large';
+type CarouselPreset = 'single-full' | 'two-equal' | 'two-small-large' | 'three-equal' | 'three-small-medium-large' | 'four-equal';
+/** Render callback: consumer renders each slide from their data. */
+type CarouselRenderSlide<T = unknown> = (slide: T, index: number) => React$1.ReactNode;
+type CarouselProps<T = unknown> = Readonly<{
+    /** Slide data (CMS/consumer shape). Rendered via renderSlide. */
+    slides: T[];
+    /** Called to render each slide. Receives slide data and index. */
+    renderSlide: CarouselRenderSlide<T>;
+    preset?: CarouselPreset;
+    /** Convenience props that override autoplay.enabled */
+    autoplayEnabled?: boolean;
+    /** Autoplay interval in seconds (e.g. 3 = 3s). Passed to slider as ms internally. */
+    autoplayDuration?: number;
+    /** Convenience props that override navigation.showArrows */
+    showArrows?: boolean;
+    /** Convenience props that override navigation.showPagination */
+    showPagination?: boolean;
+    onSlideChange?: (index: number) => void;
+    className?: string;
+    slickSettings?: any;
+    /** Spacing between columns/slides: 'none'|'small'|'medium'|'large' (0,8,12,16px) or legacy number */
+    gap?: GapPreset$1 | number;
+    height?: string;
+    fullWidth?: boolean;
+    emptyBlockParentClass?: string;
+    /** Override empty placeholder label. Defaults: "Add items to the column control" (grid) or "Add items to the carousel" (carousel). */
+    emptyPlaceholderText?: string;
+    /** Position of slider dots: 'inside' overlays within the slider; 'outside' places them below as part of the height. Defaults to 'inside'. */
+    dotsPosition?: 'inside' | 'outside';
+    isEditing?: boolean;
+    parent$?: Record<string, unknown>;
+    $?: Record<string, unknown>;
+}>;
+
+/** Carousel layout: slider with arrows and dots. Uses shared hook and UI with carousel container. */
+declare function Carousel<T = unknown>(props: CarouselProps<T>): react_jsx_runtime.JSX.Element;
+
+/** Gap between columns/slides: preset name → px (none: 0, small: 8, medium: 12, large: 16) */
+type GapPreset = 'none' | 'small' | 'medium' | 'large';
+type ColumnControlGridLayout = '2x1' | '3x1' | '4x1' | '2x2' | '3x2' | '4x2';
+type SlidePreset = 'single-full' | 'two-equal' | 'two-small-large' | 'three-equal' | 'three-small-medium-large' | 'four-equal';
+/** Render callback: consumer renders each slide from their data. */
+type RenderSlideCallback<T = unknown> = (slide: T, index: number) => React$1.ReactNode;
+type ColumnControlProps<T = unknown> = Readonly<{
+    /** Slide data (CMS/consumer shape). Rendered via renderSlide. */
+    slides: T[];
+    /** Called to render each slide. Receives slide data and index. */
+    renderSlide: RenderSlideCallback<T>;
+    /** Preset-based sizing is deprecated. Use ColumnControl (grid) with layout. */
+    preset?: SlidePreset;
+    /** Grid layout for ColumnControl (grid) mode: "<columns>x<rows>" (e.g. "3x2"). */
+    layout?: ColumnControlGridLayout;
+    className?: string;
+    /** Spacing between columns/slides: 'none'|'small'|'medium'|'large' (0,8,12,16px) or legacy number */
+    gap?: GapPreset | number;
+    height?: string;
+    fullWidth?: boolean;
+    emptyBlockParentClass?: string;
+    /** Override empty placeholder label. Defaults: "Add items to the column control". */
+    emptyPlaceholderText?: string;
+    isEditing?: boolean;
+    parent$?: Record<string, unknown>;
+    $?: Record<string, unknown>;
+}>;
+
+declare const _default: React$1.FC<ColumnControlProps>;
+
+type ContentAlignment$1 = 'left' | 'center' | 'right';
+type CtaStyle = 'card' | 'button' | 'none';
+interface ContentCardProps {
+    title?: string;
+    subtitle?: string;
+    body?: string;
+    media?: string;
+    cta?: ButtonBlockProp;
+    card_cta_group?: ButtonBlockProp;
+    button_cta_group?: ButtonBlockProp;
+    cta_style?: CtaStyle;
+    content_alignment?: ContentAlignment$1;
+    _metadata?: {
+        uid?: string;
+    };
+    max_height?: number;
+    background_color?: string;
+    text_color?: string;
+    border_radius?: string;
+    isEditing?: boolean;
+    parent$?: Record<string, unknown>;
+    $?: {
+        media?: Record<string, unknown>;
+        body?: Record<string, unknown>;
+        title?: Record<string, unknown>;
+        subtitle?: Record<string, unknown>;
+        button?: Record<string, unknown>;
+    };
+}
+
+declare const ContentCard: React$1.FC<ContentCardProps>;
+
+type GradientDepth = 'sm' | 'md' | 'lg';
+
+declare const Button: React$1.FC<ButtonProps>;
+
+type ButtonWrapperProps = {
+    parent$?: Record<string, unknown>;
+    alignment?: ButtonProps['alignment'];
+    isEditing?: boolean;
+} & Partial<ButtonBlockProp>;
+declare const Buttons: React$1.FC<ButtonWrapperProps>;
+
+type ContentAlignment = 'left' | 'center' | 'right';
+type HeroBannerMediaType = 'image' | 'gif' | 'video';
+interface HeroBanner$ {
+    [key: string]: unknown;
+    button?: Record<string, unknown>;
+    media?: Record<string, unknown>;
+    $?: Record<string, unknown>;
+}
+interface HeroBannerProps {
+    title?: string;
+    subtitle?: string;
+    body?: string;
+    brandcaption?: string;
+    button?: ButtonBlockProp;
+    media?: string;
+    class_name?: string;
+    content_alignment?: ContentAlignment;
+    gradient_enabled?: boolean;
+    gradient_depth?: GradientDepth;
+    text_color?: string;
+    $?: HeroBanner$;
+    parent$?: Record<string, unknown>;
+    isEditing?: boolean;
+}
+
+declare const HeroBanner: React$1.FC<HeroBannerProps>;
+
+type CsTextProps = ComponentProps<typeof CsText>;
+interface RichTextProps extends Omit<CsTextProps, 'text_editor' | 'font_color'> {
+    text_editor: string;
+    font_color?: 'Light' | 'Dark';
+}
+/**
+ * RichText Component
+ *
+ * Wrapper component that sanitizes Rich Text Editor content before passing to CsText.
+ * Uses DOMPurify to remove dangerous markup (scripts, styles, event handlers, etc.)
+ * while preserving allowed formatting tags and attributes.
+ *
+ * SECURITY FEATURES:
+ * - Removes script tags and event handlers
+ * - Strips dangerous attributes and tags
+ * - Allows only specified tags: p, div, span, a, br, strong, em, i, u, h1, h2, h3, ul, ol, li
+ * - Allows only specified attributes: href, target, rel, title, class, style, data-cslp
+ * - Sanitization is applied before rendering in CsText
+ *
+ * @param props - CsText component props with sanitizable text_editor content
+ * @returns Rendered component with sanitized content
+ */
+declare const RichText: ({ text_editor, font_color, ...restProps }: RichTextProps) => ReactElement | null;
+
+type BynderMediaType = 'image' | 'gif' | 'video';
+type CSEditTags = Record<string, any>;
+interface BynderMediaProps {
+    /** JSON string from Contentstack bynder_media field */
+    readonly bynder_media?: string;
+    /** Contentstack edit tags */
+    readonly $?: CSEditTags;
+}
+type BynderMediaExtracted = {
+    url: string;
+    type: BynderMediaType;
+    alt: string;
+    isResponsive?: boolean;
+    desktopUrl?: string;
+    mobileUrl?: string;
+    imageFit?: 'cover' | 'contain' | 'scale-down' | 'none' | 'fill' | null;
+    focusPoint?: {
+        x: number;
+        y: number;
+    };
+    objectPosition?: string;
+    bgColor?: string;
+};
+type BynderImageDataType = {
+    /** selected is manually added, using additionalInfo from bynder */
+    selected?: {
+        url: string;
+        fileSize: number | null;
+        width: number | null;
+        height: number | null;
+        imageType?: string;
+        type: 'VIDEO' | 'IMAGE';
+        altText?: string;
+        fit: 'cover' | 'contain' | 'scale-down' | 'none';
+        position: string;
+        bgColor: string;
+    };
+    isPublic: boolean;
+    __typename?: 'Image';
+    id: string;
+    name: string;
+    description: string | null;
+    databaseId: string;
+    originalUrl?: string;
+    type: 'VIDEO' | 'IMAGE' | 'DOCUMENT';
+    url?: string;
+    previewUrls?: string[];
+    extensions?: string[];
+    textMetaproperties?: ({
+        name: string;
+        value: string;
+    } | null)[];
+    files: {
+        [key: string]: {
+            url: string;
+            width: number | null;
+            height: number | null;
+            fileSize: number | null;
+        };
+    };
+};
+
+declare function BynderMedia({ bynder_media, $ }: Readonly<BynderMediaProps>): React$1.ReactElement | null;
+
+declare function getMediaUrl(selected: BynderImageDataType['selected'], isPublic: boolean, previewUrls: BynderImageDataType['previewUrls']): string;
+declare function extractBynderMedia(mediaJson?: string): BynderMediaExtracted | null;
+
+export { type BannerAlignment, type BannerData, type BannerTextProps, Button, type Button$, type ButtonAlignment, type ButtonBlockProp, type ButtonProps, type ButtonSize, type ButtonType, type ButtonVariant, Buttons, type ButtonsBlock, type ButtonsBlock$, type ButtonsEntry, type BynderImageDataType, BynderMedia, type BynderMediaExtracted, type BynderMediaProps, type BynderMediaType, type CSEditTags$1 as CSEditTags, Carousel, type CarouselPreset, type CarouselProps, type CarouselRenderSlide, type ColorTheme, _default as ColumnControl, type ColumnControlProps, type ContentAlignment, ContentCard, type ContentCardProps, CsImage, CsText as CsTextComponent, DEFAULT_BANNER_CONFIG, DEFAULT_CAROUSEL_CONFIG, DEFAULT_ROTATION_INTERVAL, type GradientDepth$1 as GradientDepth, type GradientDirection, HeroBanner, type HeroBanner$, type HeroBannerMediaType, type HeroBannerProps, type IconPosition, type LinkTarget, MarketingBannerComponent as MarketingBanner, type MarketingBannerData, type MarketingBannerProps, type MediaType, PLACEHOLDER_VALUES, RichText as RichTextComponent, SpacingDivider, type SpacingDividerProps, type TextAlignment, type TextColor, type UseCarouselReturn, extractBynderMedia, getMediaUrl };