@nuskin/marketing-components 1.21.1 → 1.22.1

package/dist/column-control/Carousel.d.ts

@@ -0,0 +1,6 @@
+import type { ColumnControlProps } from './types';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+/** Carousel layout: slider with arrows and dots. Uses shared hook and UI with ColumnControl. */
+export declare function Carousel<T = unknown>(props: Readonly<Omit<ColumnControlProps<T>, 'layout'>>): import("react/jsx-runtime").JSX.Element;
+export default Carousel;

package/dist/column-control/Carousel.stories.d.ts

@@ -1,9 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import ColumnControl from './ColumnControl';
-declare const meta: Meta<typeof ColumnControl>;
+import { Carousel } from './Carousel';
+declare const meta: Meta<typeof Carousel>;
 export default meta;
-type Story = StoryObj<typeof ColumnControl>;
-export declare const AutoplayDemo: Story;
-export declare const ProductCards: Story;
-export declare const ContentCards: Story;
-export declare const HeroBanners: Story;
+type Story = StoryObj<typeof Carousel>;
+export declare const SingleFull: Story;
+export declare const TwoEqual: Story;
+export declare const TwoSmallLarge: Story;
+export declare const ThreeEqual: Story;
+export declare const ThreeSmallMediumLarge: Story;
+export declare const FourEqual: Story;
+export declare const Autoplay: Story;
+export declare const EmptyState: Story;
+export declare const FewerSlidesThanPreset: Story;

package/dist/column-control/ColumnControl.d.ts

@@ -1,6 +1,4 @@
 import React from 'react';
 import type { ColumnControlProps } from './types';
-import 'slick-carousel/slick/slick.css';
-import 'slick-carousel/slick/slick-theme.css';
 declare const _default: React.FC<ColumnControlProps>;
 export default _default;

package/dist/column-control/ColumnControl.stories.d.ts

@@ -3,7 +3,11 @@ import ColumnControl from './ColumnControl';
 declare const meta: Meta<typeof ColumnControl>;
 export default meta;
 type Story = StoryObj<typeof ColumnControl>;
-export declare const GridDemo: Story;
-export declare const WithProductCardMocks: Story;
-export declare const WithContentCardMocks: Story;
-export declare const WithHeroBannerMocks: Story;
+export declare const SingleFull: Story;
+export declare const TwoEqual: Story;
+export declare const TwoSmallLarge: Story;
+export declare const ThreeEqual: Story;
+export declare const ThreeSmallMediumLarge: Story;
+export declare const FourEqual: Story;
+export declare const EmptyState: Story;
+export declare const FewerSlidesThanPreset: Story;

package/dist/column-control/ColumnControl.styled.d.ts

@@ -8,6 +8,7 @@ export declare const ColumnControlContainer: import("@emotion/styled").StyledCom
     maxColumnHeight?: number;
     isVariableWidth: boolean;
     fullWidth?: boolean;
+    dotsInside?: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
 export declare const TabletGridContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;

package/dist/column-control/hooks/useColumnControl.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { ColumnControlProps } from '../types';
+import type { SliderRefInstance } from '../shared';
+/** Shared hook for column control (grid) and carousel. Layout drives grid vs carousel behavior. */
+export declare function useColumnControl<T>(props: ColumnControlProps<T>): {
+    gapPx: number;
+    containerHeight: string;
+    stackedItemHeight: string;
+    stackedItemMaxHeight: number;
+    isVariableWidth: boolean;
+    containerClassName: string;
+    layout: "grid" | "carousel";
+    effectiveFullWidth: boolean;
+    parent$: Record<string, unknown> | undefined;
+    $: Record<string, unknown> | undefined;
+    emptyBlockParentClass: string | undefined;
+    emptyPlaceholderText: string;
+    sliderRef: React.MutableRefObject<SliderRefInstance | null>;
+    sliderSettings: any;
+    carouselKey: string;
+    renderSlides: (useFlexLayout?: boolean) => import("react/jsx-runtime").JSX.Element[];
+    slidesForRender: T[];
+    hasSlides: boolean;
+    isStackedViewport: boolean;
+    isTabletGridViewport: boolean;
+    preset: import("..").SlidePreset;
+    showArrowsOnDesktop: boolean;
+    slidesToShow: number;
+    slidesLength: number;
+    goToPrevious: () => void | undefined;
+    goToNext: () => void | undefined;
+};

package/dist/column-control/index.d.ts

@@ -1,2 +1,3 @@
 export { default as ColumnControl } from './ColumnControl';
+export { Carousel } from './Carousel';
 export * from './types';

package/dist/column-control/mocks/MockContentCard.d.ts

@@ -1,9 +1,20 @@
 import React from 'react';
-/** Mock content card for ColumnControl/carousel slide content only. */
+/** Image height preset for story variants (px). */
+declare const IMAGE_HEIGHTS: {
+    readonly short: 120;
+    readonly medium: 200;
+    readonly tall: 320;
+};
+/** Mock content card for ColumnControl/carousel stories. Optional image, content, and CTA. */
 export interface MockContentCardProps {
-    imageSrc: string;
+    imageSrc?: string;
     imageAlt?: string;
+    /** Image area height: preset name or px number. Default 'medium'. */
+    imageHeight?: keyof typeof IMAGE_HEIGHTS | number;
     title?: string;
+    description?: string;
+    ctaText?: string;
+    ctaHref?: string;
 }
 declare const MockContentCard: React.FC<MockContentCardProps>;
 export default MockContentCard;

package/dist/column-control/shared.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+declare const Slider: any;
+declare const ColumnControlContainer: any;
+declare const ArrowButton: any;
+declare const InnerWrapper: any;
+declare const TabletGridContainer: any;
+declare const SlideSection: any;
+declare const SlideInner: any;
+declare const SlideContentInner: any;
+export declare const CONTAINER_CLASS = "column-control-container";
+export { Slider, ColumnControlContainer, ArrowButton, InnerWrapper, TabletGridContainer, SlideSection, SlideInner, SlideContentInner };
+export interface SliderRefInstance {
+    slickPrev: () => void;
+    slickNext: () => void;
+}
+export declare function getSlideKey(slide: unknown, index: number, isPlaceholder: boolean): string;
+export declare function getSlideContent<T>(slide: T | {
+    __emptyPlaceholder: true;
+}, index: number, isPlaceholder: boolean, emptyBlockParentClass: string | undefined, renderSlide: (slide: T, index: number) => React.ReactNode, emptyPlaceholderText?: string): React.ReactNode;
+export declare function renderSlidesContent<T>(params: {
+    slidesForRender: (T | {
+        __emptyPlaceholder: true;
+    })[];
+    renderSlide: (slide: T, index: number) => React.ReactNode;
+    presetColumns: number;
+    gap: number;
+    isVariableWidth: boolean;
+    getSlideWidth: (index: number) => string;
+    stackedVerticalGap: number;
+    stackedItemHeight: string;
+    stackedItemMaxHeight?: number;
+    useFlexLayout?: boolean;
+    emptyBlockParentClass?: string;
+    emptyPlaceholderText?: string;
+    $?: Record<string, unknown>;
+}): import("react/jsx-runtime").JSX.Element[];
+export declare function renderContentOrEmpty(hasSlides: boolean, content: React.ReactNode, emptyBlockParentClass: string | undefined, emptyPlaceholderText?: string, $?: Record<string, unknown>): React.ReactNode;

package/dist/column-control/types.d.ts

@@ -32,6 +32,10 @@ export type ColumnControlProps<T = unknown> = Readonly<{
     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>;
@@ -58,5 +62,7 @@ export type DeviceSize = keyof typeof DEVICE_SIZES;
 export declare const MIN_SLIDE_WIDTH_PX = 280;
 export declare const MIN_SLIDE_HEIGHT_PX = 320;
 /** Max height of a slide/card when height is content-driven. Authoring guide recommends designing for 400px. */
-export declare const MAX_SLIDE_HEIGHT_PX = 450;
+export declare const MAX_SLIDE_HEIGHT_PX = 650;
+/** Minimum height (px) for empty placeholder slots in column control/carousel. */
+export declare const MIN_EMPTY_PLACEHOLDER_HEIGHT_PX = 220;
 export declare const MAX_ALLOWED_COLUMN_CONTROL_ITEMS = 4;

package/dist/column-control/utils.d.ts

@@ -1,5 +1,20 @@
 import React from 'react';
 import type { ColumnControlProps } from './types';
+export interface ViewportLayoutState {
+    isStackedViewport: boolean;
+    isTabletGridViewport: boolean;
+    stackedItemHeight: string;
+    stackedItemMaxHeight: number;
+    stackedVerticalGap: number;
+    containerHeight: string;
+}
+export declare function getViewportLayoutState(isGridLayout: boolean, windowWidth: number, gapPx: number, height?: string): ViewportLayoutState;
+export interface SlidesMeta<T> {
+    gridSlides: T[];
+    slidesToShow: number;
+    shouldShowDots: boolean;
+}
+export declare function getSlidesMeta<T>(slides: T[], isGridLayout: boolean, presetColumns: number, presetSlidesToShow: number, effectiveShowPagination: boolean): SlidesMeta<T>;
 export declare function unwrapComponent<T>(mod: T): any;
 export declare const EmptyPlaceholder: React.FC<Readonly<{
     emptyBlockParentClass?: string;
@@ -9,6 +24,15 @@ export declare function getPresetColumns(preset: ColumnControlProps['preset']):
 export declare function isVariableWidthPreset(preset: ColumnControlProps['preset'], windowWidth: number): boolean;
 export declare function getVariableSlideWidth(preset: ColumnControlProps['preset'], index: number, windowWidth: number): string;
 export declare function getSlidesToShowByViewport(windowWidth: number, presetColumns: number): number;
+/** Sentinel used in the slides array to represent an empty slot when slides.length < preset. */
+export declare const EMPTY_SLIDE_SENTINEL: {
+    readonly __emptyPlaceholder: true;
+};
+export declare function isEmptySlide(slide: unknown): slide is typeof EMPTY_SLIDE_SENTINEL;
+/** Type guard: true when slide is a real slide (not the empty placeholder sentinel). */
+export declare function isRealSlide<T>(slide: T | typeof EMPTY_SLIDE_SENTINEL): slide is T;
+/** Pads the slides array with EMPTY_SLIDE_SENTINEL so length equals targetCount when slides.length < targetCount. */
+export declare function padSlidesToPreset<T>(slides: T[], targetCount: number): (T | typeof EMPTY_SLIDE_SENTINEL)[];
 export declare function getSlidesForRender<T>(params: {
     isGridLayout: boolean;
     isStackedViewport: boolean;
@@ -23,6 +47,8 @@ export declare function buildResponsiveSettings(params: {
     gridSlides: unknown[];
     presetColumns: number;
     shouldShowDots: boolean;
+    /** When set (e.g. after padding to preset), use this as the slide count cap so placeholders are visible. */
+    effectiveSlidesCount?: number;
 }): ({
     breakpoint: 600;
     settings: {