@deriv-web-design/ui-templates 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,419 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CardPrimaryStyle } from '@deriv-web-design/ui-core/core';
+import { ReactNode, HTMLAttributes } from 'react';
+
+interface FeatureCardItem {
+    title: string;
+    description: string;
+    colorScheme?: CardPrimaryStyle;
+    image?: string;
+    imageAlt?: string;
+    showLink?: boolean;
+    linkText?: string;
+    onLinkClick?: () => void;
+}
+interface FeatureCardsProps {
+    sectionTitle: string;
+    sectionDescription?: string;
+    showLink?: boolean;
+    linkText?: string;
+    onLinkClick?: () => void;
+    /** Controls the visual style of all cards in the grid */
+    cardColorScheme?: CardPrimaryStyle;
+    cards: FeatureCardItem[];
+}
+
+declare const FeatureCards: ({ sectionTitle, sectionDescription, showLink, linkText, onLinkClick, cardColorScheme, cards, }: FeatureCardsProps) => react_jsx_runtime.JSX.Element;
+
+interface FeatureCardSecondaryItem {
+    title: string;
+    description: string;
+    icon?: ReactNode;
+    showIcon?: boolean;
+    showLink?: boolean;
+    linkText?: string;
+    onLinkClick?: () => void;
+}
+interface FeatureCardsSecondaryProps {
+    sectionTitle: string;
+    sectionDescription?: string;
+    showLink?: boolean;
+    linkText?: string;
+    onLinkClick?: () => void;
+    cards: FeatureCardSecondaryItem[];
+}
+
+declare const FeatureCardsSecondary: ({ sectionTitle, sectionDescription, showLink, linkText, onLinkClick, cards, }: FeatureCardsSecondaryProps) => react_jsx_runtime.JSX.Element;
+
+type HeroVariant = "split" | "centered" | "showcase" | "visuals" | "minimal";
+interface HeroButtonProps {
+    /** Button label text */
+    label: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Link href — renders an anchor if provided */
+    href?: string;
+}
+interface HeroProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Layout variant:
+     *
+     * - "split"    — dark bg, left-aligned text, right-side hero image, 100vh
+     * - "centered" — full background image, center-aligned text, 100vh
+     * - "showcase" — dark bg + full-bleed bg image, center-aligned text, large product image
+     *                below buttons, smaller floating image below that.
+     * - "visuals"  — light grey bg + SVG grid, center-aligned text, floating visuals, min-height 540px
+     * - "minimal"  — same as visuals but without floating graphics
+     */
+    variant: HeroVariant;
+    /** Optional eyebrow / subtitle above the title */
+    subtitle?: string;
+    /** Main heading */
+    title: string;
+    /** Body copy below the title */
+    description?: string;
+    /**
+     * Primary CTA button (coral).
+     * Shown on all variants.
+     */
+    primaryButton?: HeroButtonProps;
+    /**
+     * Secondary CTA button (white outline).
+     * Shown on Split, Centered and Showcase variants.
+     */
+    secondaryButton?: HeroButtonProps;
+    /**
+     * Background image URL.
+     * - "split"    — used as the full-bleed background behind the overlay
+     * - "centered" — used as the full-bleed background behind the overlay
+     * - "showcase" — used as the full-bleed background behind the overlay
+     */
+    backgroundImageSrc?: string;
+    /**
+     * Right-side hero image for the Split variant.
+     * Accepts a ReactNode (e.g. <img>) or an image URL string.
+     */
+    heroImage?: ReactNode | string;
+    /**
+     * Left floating visual for the Visuals variant.
+     * Accepts a ReactNode or image URL string.
+     */
+    leftVisual?: ReactNode | string;
+    /**
+     * Right floating visual for the Visuals variant.
+     * Accepts a ReactNode or image URL string.
+     */
+    rightVisual?: ReactNode | string;
+    /**
+     * Large product image shown centered below the CTA buttons in the Showcase variant.
+     * Accepts a ReactNode or image URL string.
+     */
+    productImage?: ReactNode | string;
+    /**
+     * Smaller floating image shown below the productImage in the Showcase variant.
+     * Accepts a ReactNode or image URL string.
+     */
+    floatingImage?: ReactNode | string;
+}
+
+declare const Hero: ({ variant, subtitle, title, description, primaryButton, secondaryButton, backgroundImageSrc, heroImage, leftVisual, rightVisual, productImage, floatingImage, className, ...props }: HeroProps) => react_jsx_runtime.JSX.Element;
+
+interface StatItem {
+    /** Numeric or short display value, e.g. "2.5M+" */
+    value: string;
+    /** Descriptive label below the value, e.g. "customers worldwide" */
+    label: string;
+}
+interface AwardItem {
+    /** URL of the award badge image (PNG, SVG, WebP, etc.) */
+    imageSrc: string;
+    /** Accessible alt text for the award image */
+    imageAlt?: string;
+}
+interface StatsProps extends HTMLAttributes<HTMLElement> {
+    /** Section heading (H2) */
+    title: string;
+    /** Optional body copy below the heading */
+    description?: string;
+    /**
+     * Ordered list of stats displayed in the centre card.
+     * Mark one item as `featured: true` to render it at the hero size.
+     */
+    stats: StatItem[];
+    /**
+     * Award badge images shown on the left side (desktop) / top row (mobile).
+     * Maximum 2 items recommended.
+     */
+    leftAwards?: AwardItem[];
+    /**
+     * Award badge images shown on the right side (desktop) / bottom row (mobile).
+     * Maximum 2 items recommended.
+     */
+    rightAwards?: AwardItem[];
+}
+
+declare const Stats: ({ title, description, stats, leftAwards, rightAwards, className, ...props }: StatsProps) => react_jsx_runtime.JSX.Element;
+
+interface FeatureScrollItem {
+    /** Short feature name, e.g. "Forex" */
+    title: string;
+    /** Body copy below the title */
+    description: string;
+    /** Visible label on the link, e.g. "Learn more" */
+    linkLabel: string;
+    /** URL the link points to */
+    link: string;
+    /**
+     * Optional override for media rendering.
+     * When omitted the component auto-detects based on the URL extension:
+     *   *.lottie → DotLottie animation player
+     *   everything else (png, jpg, svg, webp…) → <img>
+     */
+    mediaType?: "lottie" | "image";
+    /** URL to the .lottie file or any image asset (png, jpg, svg, webp…) */
+    mediaUrl: string;
+}
+interface FeatureScrollProps extends HTMLAttributes<HTMLElement> {
+    /** Section heading rendered as an H2 */
+    header: string;
+    /**
+     * Ordered list of feature items.
+     * Drives both the desktop scroll-driven layout and the mobile stacked layout.
+     */
+    items: FeatureScrollItem[];
+    /**
+     * Controls which side the sticky media column sits on.
+     * @default "media-right"
+     */
+    variant?: "media-left" | "media-right";
+}
+
+declare const FEATURE_SCROLL_DATA: FeatureScrollItem[];
+declare const FeatureScroll: ({ header, items, variant, className, ...props }: FeatureScrollProps) => react_jsx_runtime.JSX.Element;
+
+/** Visual colour theme for each card — matches the Figma palette. */
+type StickyCardTheme = "light" | "coral" | "dark";
+interface StickyCardItem {
+    /** Card heading */
+    title: string;
+    /** Body copy below the title */
+    description: string;
+    /** URL of the card's hero image (webp, png, jpg, etc.) */
+    imageUrl: string;
+    /**
+     * Background / text colour theme.
+     * light → slate-75 bg + dark text
+     * coral → coral-500 bg + white text
+     * dark  → slate-1200 bg + white text
+     * @default "light"
+     */
+    theme?: StickyCardTheme;
+}
+interface StickyStackedCardsProps extends HTMLAttributes<HTMLElement> {
+    /** Section heading rendered as H2 */
+    header: string;
+    /**
+     * Ordered list of cards.
+     * On desktop each card is position:sticky and slides over the previous one.
+     * On mobile they render as a plain vertical stack.
+     */
+    items: StickyCardItem[];
+}
+
+declare const STEPS_DATA: StickyCardItem[];
+declare const StickyStackedCards: ({ header, items, className, ...props }: StickyStackedCardsProps) => react_jsx_runtime.JSX.Element;
+
+interface AvatarPosition {
+    left?: string;
+    right?: string;
+    top?: string;
+}
+interface AvatarItem {
+    /** Unique identifier */
+    id: number;
+    /** Image source URL */
+    imageUrl: string;
+    /**
+     * Distance rank from the center content area (0 = closest).
+     * Drives the center-outward animation stagger:
+     *   delay = ANIM.delayAvatars + staggerRank × ANIM.stagger
+     */
+    staggerRank: number;
+    /** Absolute position within the 1280 × 680 desktop stage */
+    desktopPos: AvatarPosition;
+    /**
+     * Absolute position within the mobile stage.
+     * `null` = hidden on mobile.
+     */
+    mobilePos: AvatarPosition | null;
+    /** Whether this avatar is rendered on mobile viewports */
+    mobileVisible: boolean;
+}
+interface CTABannerProps extends HTMLAttributes<HTMLElement> {
+    /** Section headline */
+    headline?: string;
+    /** CTA button label */
+    ctaLabel?: string;
+    /** CTA button href */
+    ctaHref?: string;
+    /** Override the default avatar array */
+    avatars?: AvatarItem[];
+    /**
+     * Layout variant.
+     * - `standard` (default): 12 avatars, taller section (864px desktop)
+     * - `compact`: 7 avatars, section height matches stage (680px desktop)
+     */
+    variant?: "standard" | "compact";
+}
+
+declare const AVATAR_DATA: AvatarItem[];
+declare const CTABanner: ({ headline, ctaLabel, ctaHref, avatars, variant, className, ...props }: CTABannerProps) => react_jsx_runtime.JSX.Element;
+
+interface DayNightTransitionProps extends HTMLAttributes<HTMLDivElement> {
+    /** URL for the daytime background image */
+    dayImageUrl: string;
+    /** URL for the nighttime background image */
+    nightImageUrl: string;
+    /** Headline shown in the day state */
+    dayHeadline?: string;
+    /** Headline shown in the night state */
+    nightHeadline?: string;
+    /** Description shown in the day state */
+    dayDescription?: string;
+    /** Description shown in the night state */
+    nightDescription?: string;
+    /** Label for the CTA button */
+    ctaLabel?: string;
+    /** href for the CTA button */
+    ctaHref?: string;
+    /** When true, the CTA button is omitted (e.g. hero blocks that end on copy only). */
+    hideCta?: boolean;
+    /** Headline typography scale — maps to global `--typography-h1-*` or `--typography-h2-*` tokens. */
+    headlineLevel?: "h1" | "h2";
+    /** Description typography scale — maps to `--typography-body-md-*` or `--typography-body-lg-*` tokens. */
+    descriptionLevel?: "body-md" | "body-lg";
+    /**
+     * Webflow-style headline: fixed `prefix` plus `dayWord` / `nightWord` overlaid and scroll-crossfaded
+     * (same pattern as `DayNightTransitionV2` HTML: “Trade all ” + day + night).
+     */
+    inlineDayNightHeadline?: {
+        prefix: string;
+        dayWord: string;
+        nightWord: string;
+    };
+    /**
+     * `"webflow-day-night-v2"` replays IX2 scroll curves from Webflow export `DayNightTransitionV2`
+     * (`SCROLLING_IN_VIEW` + `SCROLL_PROGRESS` actionLists `a` / `a-2` in `js/webflow.js`).
+     */
+    scrollPreset?: "default" | "webflow-day-night-v2";
+}
+
+declare const DayNightTransition: ({ dayImageUrl, nightImageUrl, dayHeadline, nightHeadline, dayDescription, nightDescription, ctaLabel, ctaHref, hideCta, headlineLevel, descriptionLevel, inlineDayNightHeadline, scrollPreset, className, ...props }: DayNightTransitionProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * **DayNightTransitionV2** Storybook preset: same headlines, body copy, CTA, and
+ * typography defaults (h2 + body-md) as the **Default** story; Webflow IX2 scroll
+ * timing via `scrollPreset: "webflow-day-night-v2"` plus `dnt--layout-v2` /
+ * `dnt--webflow-v2` for layout and backgrounds.
+ */
+declare const dayNightTransitionV2Preset: Pick<DayNightTransitionProps, "className" | "dayImageUrl" | "nightImageUrl" | "dayHeadline" | "nightHeadline" | "dayDescription" | "nightDescription" | "ctaLabel" | "ctaHref" | "scrollPreset">;
+
+interface LogoItem {
+    name: string;
+    url: string;
+}
+interface LogoMarqueeProps extends HTMLAttributes<HTMLElement> {
+    headline?: string;
+    body?: string;
+    disclaimer?: string;
+    ctaLabel?: string;
+    ctaHref?: string;
+    col1Logos?: LogoItem[];
+    col2Logos?: LogoItem[];
+}
+
+declare const COL_ONE_LOGOS: LogoItem[];
+declare const COL_TWO_LOGOS: LogoItem[];
+declare const TEXT_CONTENT: {
+    headline: string;
+    body: string;
+    disclaimer: string;
+    ctaLabel: string;
+    ctaHref: string;
+};
+declare const LogoMarquee: ({ headline, body, disclaimer, ctaLabel, ctaHref, col1Logos, col2Logos, className, ...props }: LogoMarqueeProps) => react_jsx_runtime.JSX.Element;
+
+type StepsImagePosition = "left" | "right";
+interface StepItem {
+    /** Step title */
+    title: string;
+    /** Step body copy */
+    description: string;
+}
+interface StepsProps {
+    /** Section headline (H2) */
+    title: string;
+    /** Ordered list of steps */
+    steps: StepItem[];
+    /** Image source URL */
+    image?: string;
+    /** Accessible alt text for the image */
+    imageAlt?: string;
+    /**
+     * Which side the image sits on (default: "left").
+     * On mobile the image always stacks above the content.
+     */
+    imagePosition?: StepsImagePosition;
+}
+
+declare const Steps: ({ title, steps, image, imageAlt, imagePosition, }: StepsProps) => react_jsx_runtime.JSX.Element;
+
+type DownloadBannerStyle = "light" | "light-2" | "dark";
+interface DownloadBannerProps {
+    /**
+     * Visual style of the inner card.
+     * - "light"   → slate-100 outer section, white inner card
+     * - "light-2" → white outer section, slate-100 inner card (default)
+     * - "dark"    → white outer section, slate-1200 inner card
+     */
+    style?: DownloadBannerStyle;
+    /** QR code image URL. When provided the QR block is shown on desktop. */
+    qrCodeImage?: string;
+    /** Accessible alt text for the QR code image */
+    qrCodeAlt?: string;
+    /** First line of text beside the QR code (default: "Scan to download") */
+    qrTitle?: string;
+    /** Second line of text beside the QR code (default: "Android & iOS") */
+    qrSubtitle?: string;
+    /** Heading shown on mobile above the badge grid (default: "Available on") */
+    mobileTitle?: string;
+    showAppStore?: boolean;
+    showGooglePlay?: boolean;
+    showAppGallery?: boolean;
+    showWindows?: boolean;
+    showMacOS?: boolean;
+    showLinux?: boolean;
+    showWeb?: boolean;
+    appStoreHref?: string;
+    googlePlayHref?: string;
+    appGalleryHref?: string;
+    windowsHref?: string;
+    macOSHref?: string;
+    linuxHref?: string;
+    webHref?: string;
+    /** Optional small-print disclaimer shown below the QR text */
+    disclaimer?: string;
+}
+
+declare const DownloadBanner: ({ style, qrCodeImage, qrCodeAlt, qrTitle, qrSubtitle, mobileTitle, showAppStore, showGooglePlay, showAppGallery, showWindows, showMacOS, showLinux, showWeb, appStoreHref, googlePlayHref, appGalleryHref, windowsHref, macOSHref, linuxHref, webHref, disclaimer, }: DownloadBannerProps) => react_jsx_runtime.JSX.Element;
+
+interface TextScrollProps {
+    /** The large body copy that animates word-by-word on scroll */
+    text: string;
+    /** Additional class names forwarded to the section root */
+    className?: string;
+}
+
+declare const TextScroll: ({ text, className }: TextScrollProps) => react_jsx_runtime.JSX.Element;
+
+export { AVATAR_DATA, type AvatarItem, type AvatarPosition, type AwardItem, COL_ONE_LOGOS, COL_TWO_LOGOS, CTABanner, type CTABannerProps, DayNightTransition, type DayNightTransitionProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, FEATURE_SCROLL_DATA, type FeatureCardItem, type FeatureCardSecondaryItem, FeatureCards, type FeatureCardsProps, FeatureCardsSecondary, type FeatureCardsSecondaryProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, type LogoItem, LogoMarquee, type LogoMarqueeProps, STEPS_DATA, type StatItem, Stats, type StatsProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, type StickyCardItem, type StickyCardTheme, StickyStackedCards, type StickyStackedCardsProps, TEXT_CONTENT, TextScroll, type TextScrollProps, dayNightTransitionV2Preset };