@nuskin/marketing-components 1.51.0 → 1.52.0

package/dist/index.d.mts

@@ -201,11 +201,11 @@ declare const PLACEHOLDER_VALUES: {
     readonly body: "Enter Body Text";
 };
 
-type PaddingScale = 'none' | 'small' | 'medium' | 'large';
+type PaddingScale$1 = 'none' | 'small' | 'medium' | 'large';
 type DividerStyle = 'solid' | 'dashed' | 'dotted' | 'none';
 type DividerThickness = 'thin' | 'medium' | 'thick';
 interface SpacingDividerProps {
-    vertical_padding?: PaddingScale;
+    vertical_padding?: PaddingScale$1;
     divider_style?: DividerStyle;
     divider_thickness?: DividerThickness;
     divider_color?: string;
@@ -515,4 +515,95 @@ interface FaqProps {
 
 declare const Faq: React$1.FC<FaqProps>;
 
-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, Faq, type FaqEditTags, type FaqItemData, type FaqItemEditTags, type FaqProps, type FaqSectionWidth, 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, TableRichText, type TextAlignment, type TextColor, type UseCarouselReturn, type VerticalAlignment, extractBynderMedia, getMediaUrl };
+type VideoKind = 'youtube' | 'vimeo' | 'embed';
+type PaddingScale = 'none' | 'small' | 'medium' | 'large';
+type Alignment = 'left' | 'center' | 'right';
+/** Playback options for the video player. */
+interface PlaybackOptions {
+    autoplay?: boolean;
+    /** When false, controls are hidden. Defaults to visible. */
+    controls?: boolean;
+    loop?: boolean;
+}
+/** Normalized, render-ready description of a video. */
+interface VideoDescriptor extends PlaybackOptions {
+    /** 'youtube' | 'vimeo' render as a provider iframe; 'embed' renders a generic sandboxed iframe. */
+    kind: VideoKind;
+    /** Embed/iframe URL (providers & generic embeds) or direct media URL (file). */
+    src: string;
+    /** Optional human-readable title used for the iframe `title`. */
+    title?: string;
+}
+/** Raw values as supplied by the VideoPlayer component props. */
+interface VideoPlayerProps {
+    /** Video source type: 'youtube', 'vimeo', or 'embed' (generic iframe). */
+    videoSource?: 'youtube' | 'vimeo' | 'embed' | string;
+    /** Provider video URL or bare ID, a generic embed URL, or a direct file URL. */
+    url?: string;
+    autoplay?: boolean;
+    controls?: boolean;
+    loop?: boolean;
+    /** Optional accessible title for the iframe. */
+    title?: string;
+    /** Horizontal alignment of the video within its container. */
+    alignment?: Alignment;
+    /** Vertical padding above and below the video. */
+    vertical_padding?: PaddingScale;
+    /** Horizontal padding to the left and right of the video. */
+    horizontal_padding?: PaddingScale;
+    /** Width of the video as a percentage of its container (0–100). */
+    width_percent?: number | string;
+}
+
+/**
+ * Renders a sandboxed provider/embed iframe (YouTube, Vimeo, generic) or an
+ * HTML5 `<video>` for direct file URLs, given a normalized `VideoDescriptor`.
+ * This internal variant accepts a pre-built descriptor — useful when you already
+ * have one (e.g. from `buildVideoDescriptor`).
+ */
+declare function VideoPlayerFromDescriptor({ video }: {
+    readonly video: VideoDescriptor | null;
+}): React$1.ReactElement;
+/**
+ * Presentational video player component.
+ *
+ * Supports YouTube, Vimeo, generic embed iframes, and direct video file URLs.
+ * Pass `videoSource` and `url` to render a video; if either is missing a
+ * placeholder is shown instead.
+ *
+ * @example
+ * // YouTube
+ * <VideoPlayer videoSource="youtube" url="https://www.youtube.com/watch?v=I0_951_MPE0" />
+ *
+ * @example
+ * // Vimeo
+ * <VideoPlayer videoSource="vimeo" url="https://vimeo.com/22439234" />
+ *
+ * @example
+ * // Direct file
+ * <VideoPlayer videoSource="url" url="https://example.com/video.mp4" controls loop />
+ */
+declare const VideoPlayer: React$1.FC<VideoPlayerProps>;
+
+/**
+ * Only permit http/https URLs to prevent `javascript:` injection.
+ */
+declare function safeVideoSrc(url: unknown): string;
+/**
+ * Extract the bare video ID from either a raw id or a full share/watch URL.
+ * The author may enter a YouTube/Vimeo URL or just the ID.
+ */
+declare function extractVideoId(source: string, raw: unknown): string;
+/** Build a provider embed URL (YouTube/Vimeo), encoding playback options as query params. */
+declare function buildEmbedUrl(source: string, raw: unknown, opts?: PlaybackOptions): string;
+/**
+ * Build a render-ready VideoDescriptor from the VideoPlayer props.
+ * Returns null until enough has been entered to render something.
+ *
+ * Providers:
+ *   - youtube / vimeo → provider embed iframe (options encoded in the URL).
+ *   - embed           → generic iframe using the entered URL as-is.
+ */
+declare function buildVideoDescriptor(videoSource: string | undefined, url: string | undefined, opts?: PlaybackOptions): VideoDescriptor | 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, Faq, type FaqEditTags, type FaqItemData, type FaqItemEditTags, type FaqProps, type FaqSectionWidth, 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, type PlaybackOptions, RichText as RichTextComponent, SpacingDivider, type SpacingDividerProps, TableRichText, type TextAlignment, type TextColor, type UseCarouselReturn, type VerticalAlignment, type VideoDescriptor, type VideoKind, VideoPlayer, VideoPlayerFromDescriptor, type VideoPlayerProps, buildEmbedUrl, buildVideoDescriptor, extractBynderMedia, extractVideoId, getMediaUrl, safeVideoSrc };

package/dist/index.d.ts

@@ -201,11 +201,11 @@ declare const PLACEHOLDER_VALUES: {
     readonly body: "Enter Body Text";
 };
 
-type PaddingScale = 'none' | 'small' | 'medium' | 'large';
+type PaddingScale$1 = 'none' | 'small' | 'medium' | 'large';
 type DividerStyle = 'solid' | 'dashed' | 'dotted' | 'none';
 type DividerThickness = 'thin' | 'medium' | 'thick';
 interface SpacingDividerProps {
-    vertical_padding?: PaddingScale;
+    vertical_padding?: PaddingScale$1;
     divider_style?: DividerStyle;
     divider_thickness?: DividerThickness;
     divider_color?: string;
@@ -515,4 +515,95 @@ interface FaqProps {
 
 declare const Faq: React$1.FC<FaqProps>;
 
-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, Faq, type FaqEditTags, type FaqItemData, type FaqItemEditTags, type FaqProps, type FaqSectionWidth, 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, TableRichText, type TextAlignment, type TextColor, type UseCarouselReturn, type VerticalAlignment, extractBynderMedia, getMediaUrl };
+type VideoKind = 'youtube' | 'vimeo' | 'embed';
+type PaddingScale = 'none' | 'small' | 'medium' | 'large';
+type Alignment = 'left' | 'center' | 'right';
+/** Playback options for the video player. */
+interface PlaybackOptions {
+    autoplay?: boolean;
+    /** When false, controls are hidden. Defaults to visible. */
+    controls?: boolean;
+    loop?: boolean;
+}
+/** Normalized, render-ready description of a video. */
+interface VideoDescriptor extends PlaybackOptions {
+    /** 'youtube' | 'vimeo' render as a provider iframe; 'embed' renders a generic sandboxed iframe. */
+    kind: VideoKind;
+    /** Embed/iframe URL (providers & generic embeds) or direct media URL (file). */
+    src: string;
+    /** Optional human-readable title used for the iframe `title`. */
+    title?: string;
+}
+/** Raw values as supplied by the VideoPlayer component props. */
+interface VideoPlayerProps {
+    /** Video source type: 'youtube', 'vimeo', or 'embed' (generic iframe). */
+    videoSource?: 'youtube' | 'vimeo' | 'embed' | string;
+    /** Provider video URL or bare ID, a generic embed URL, or a direct file URL. */
+    url?: string;
+    autoplay?: boolean;
+    controls?: boolean;
+    loop?: boolean;
+    /** Optional accessible title for the iframe. */
+    title?: string;
+    /** Horizontal alignment of the video within its container. */
+    alignment?: Alignment;
+    /** Vertical padding above and below the video. */
+    vertical_padding?: PaddingScale;
+    /** Horizontal padding to the left and right of the video. */
+    horizontal_padding?: PaddingScale;
+    /** Width of the video as a percentage of its container (0–100). */
+    width_percent?: number | string;
+}
+
+/**
+ * Renders a sandboxed provider/embed iframe (YouTube, Vimeo, generic) or an
+ * HTML5 `<video>` for direct file URLs, given a normalized `VideoDescriptor`.
+ * This internal variant accepts a pre-built descriptor — useful when you already
+ * have one (e.g. from `buildVideoDescriptor`).
+ */
+declare function VideoPlayerFromDescriptor({ video }: {
+    readonly video: VideoDescriptor | null;
+}): React$1.ReactElement;
+/**
+ * Presentational video player component.
+ *
+ * Supports YouTube, Vimeo, generic embed iframes, and direct video file URLs.
+ * Pass `videoSource` and `url` to render a video; if either is missing a
+ * placeholder is shown instead.
+ *
+ * @example
+ * // YouTube
+ * <VideoPlayer videoSource="youtube" url="https://www.youtube.com/watch?v=I0_951_MPE0" />
+ *
+ * @example
+ * // Vimeo
+ * <VideoPlayer videoSource="vimeo" url="https://vimeo.com/22439234" />
+ *
+ * @example
+ * // Direct file
+ * <VideoPlayer videoSource="url" url="https://example.com/video.mp4" controls loop />
+ */
+declare const VideoPlayer: React$1.FC<VideoPlayerProps>;
+
+/**
+ * Only permit http/https URLs to prevent `javascript:` injection.
+ */
+declare function safeVideoSrc(url: unknown): string;
+/**
+ * Extract the bare video ID from either a raw id or a full share/watch URL.
+ * The author may enter a YouTube/Vimeo URL or just the ID.
+ */
+declare function extractVideoId(source: string, raw: unknown): string;
+/** Build a provider embed URL (YouTube/Vimeo), encoding playback options as query params. */
+declare function buildEmbedUrl(source: string, raw: unknown, opts?: PlaybackOptions): string;
+/**
+ * Build a render-ready VideoDescriptor from the VideoPlayer props.
+ * Returns null until enough has been entered to render something.
+ *
+ * Providers:
+ *   - youtube / vimeo → provider embed iframe (options encoded in the URL).
+ *   - embed           → generic iframe using the entered URL as-is.
+ */
+declare function buildVideoDescriptor(videoSource: string | undefined, url: string | undefined, opts?: PlaybackOptions): VideoDescriptor | 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, Faq, type FaqEditTags, type FaqItemData, type FaqItemEditTags, type FaqProps, type FaqSectionWidth, 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, type PlaybackOptions, RichText as RichTextComponent, SpacingDivider, type SpacingDividerProps, TableRichText, type TextAlignment, type TextColor, type UseCarouselReturn, type VerticalAlignment, type VideoDescriptor, type VideoKind, VideoPlayer, VideoPlayerFromDescriptor, type VideoPlayerProps, buildEmbedUrl, buildVideoDescriptor, extractBynderMedia, extractVideoId, getMediaUrl, safeVideoSrc };