@deriv-web-design/ui 0.0.3 → 0.0.5

package/dist/index.d.mts

@@ -150,6 +150,31 @@ interface ChipDropdownProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>
 
 declare const ChipDropdown: ({ size, label, tag, icon, options, value, onChange, disabled, className, ...props }: ChipDropdownProps) => react_jsx_runtime.JSX.Element;
 
+interface BottomSheetAction {
+    label: string;
+    onClick: () => void;
+}
+interface BottomSheetProps {
+    /** Whether the sheet is visible */
+    open: boolean;
+    /** Called when the user dismisses the sheet (overlay click, close button, or Escape key) */
+    onClose: () => void;
+    /** Title displayed in the header */
+    title?: string;
+    /** Show the header row (title + close button). Default: true */
+    showHeader?: boolean;
+    /** Show the drag handle bar at the top. Default: true */
+    showHandleBar?: boolean;
+    /** Primary action button rendered at the bottom of the sheet */
+    primaryAction?: BottomSheetAction;
+    /** Secondary action button rendered below the primary */
+    secondaryAction?: BottomSheetAction;
+    /** Flexible body content — list items, form fields, etc. */
+    children?: ReactNode;
+}
+
+declare const BottomSheet: ({ open, onClose, title, showHeader, showHandleBar, primaryAction, secondaryAction, children, }: BottomSheetProps) => react.ReactPortal | null;
+
 interface CardTag {
     label: string;
     icon?: ReactNode;
@@ -251,4 +276,366 @@ interface FeatureCardsProps {
 
 declare const FeatureCards: ({ sectionTitle, sectionDescription, showLink, linkText, onLinkClick, cardColorScheme, cards, }: FeatureCardsProps) => react_jsx_runtime.JSX.Element;
 
-export { Accordion, type AccordionProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSize, Button, type ButtonColorScheme, type ButtonIconPosition, type ButtonProps, type ButtonVariant, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, type FeatureCardItem, FeatureCards, type FeatureCardsProps, Link, type LinkColorScheme, type LinkProps, Pagination, type PaginationProps, SearchField, type SearchFieldProps, type SearchFieldStatus, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant };
+interface FooterLinkItem {
+    /** Link label text */
+    label: string;
+    /** Link href */
+    href?: string;
+    /** Renders an external-link icon and opens in a new tab */
+    isExternal?: boolean;
+    /** Optional click handler */
+    onClick?: () => void;
+}
+interface FooterNavSection {
+    /** Section heading (e.g. "Trade", "Markets") */
+    title: string;
+    /** List of navigation links in this section */
+    links: FooterLinkItem[];
+}
+interface FooterSocialLink {
+    /** Icon node (SVG or any ReactNode) */
+    icon: ReactNode;
+    /** Link href */
+    href?: string;
+    /** Accessible label for the link */
+    ariaLabel: string;
+}
+interface FooterAppBadge {
+    /** Inline SVG or ReactNode — use instead of imageSrc for pixel-perfect badges */
+    icon?: ReactNode;
+    /** Image source URL (used when icon is not provided) */
+    imageSrc?: string;
+    /** Image alt text */
+    imageAlt: string;
+    /** Link href (optional) */
+    href?: string;
+}
+interface FooterDerivGoProps {
+    /** Deriv GO product logo image source */
+    logoSrc: string;
+    /** Alt text for the logo */
+    logoAlt?: string;
+    /** Product title */
+    title?: string;
+    /** Short description */
+    description?: string;
+    /** QR code image source — shown only on desktop */
+    qrCodeSrc?: string;
+    /** Inline SVG or ReactNode — use instead of qrCodeSrc for pixel-perfect QR codes */
+    qrCodeIcon?: ReactNode;
+    /** Alt text for the QR code */
+    qrCodeAlt?: string;
+    /** Google Play store badge */
+    googlePlayBadge?: FooterAppBadge;
+    /** Apple App Store badge */
+    appStoreBadge?: FooterAppBadge;
+    /** Huawei AppGallery badge */
+    huaweiBadge?: FooterAppBadge;
+    /** Footnote text (e.g. "*Availability varies by country.") */
+    availabilityNote?: string;
+}
+interface FooterAiSummaryItem {
+    /** AI app icon image source */
+    imageSrc: string;
+    /** Alt / aria-label text */
+    imageAlt: string;
+    /** Link href */
+    href?: string;
+}
+interface FooterAiSummaryProps {
+    /** Prompt label shown above the icons */
+    label?: string;
+    /** List of AI app items */
+    items: FooterAiSummaryItem[];
+}
+interface FooterProps extends HTMLAttributes<HTMLElement> {
+    /** Deriv logo image source */
+    logoSrc: string;
+    /** Alt text for the logo */
+    logoAlt?: string;
+    /**
+     * Navigation structure.
+     * Outer array = columns (desktop grid), inner array = sections per column.
+     * On mobile/tablet all sections are flattened into an accordion list.
+     */
+    navColumns: FooterNavSection[][];
+    /** Social media links shown in the header row */
+    socialLinks?: FooterSocialLink[];
+    /** Deriv GO promotion banner */
+    derivGo?: FooterDerivGoProps;
+    /** "Investors in People" badge image source */
+    investorsInPeopleSrc?: string;
+    /** Alt text for the Investors in People badge */
+    investorsInPeopleAlt?: string;
+    /** Legal / licence text block (supports ReactNode for inline links) */
+    licenseText?: ReactNode;
+    /** Risk-warning paragraph text */
+    riskWarningText?: ReactNode;
+    /**
+     * AI summary section.
+     * Desktop: rendered inline inside the header row.
+     * Mobile: rendered as a standalone card below the header.
+     * Tablet: hidden.
+     */
+    aiSummary?: FooterAiSummaryProps;
+}
+
+declare const Footer: ({ logoSrc, logoAlt, navColumns, socialLinks, derivGo, investorsInPeopleSrc, investorsInPeopleAlt, licenseText, riskWarningText, aiSummary, className, ...props }: FooterProps) => react_jsx_runtime.JSX.Element;
+
+type HeroVariant = "homepage" | "full-image" | "visuals" | "text-only";
+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:
+     * - "homepage"   — dark bg, left-aligned text, right-side hero image, 100vh
+     * - "full-image" — full background image, center-aligned text, 100vh
+     * - "visuals"    — light grey bg + SVG grid, center-aligned text, floating visuals, min-height 540px
+     * - "text-only"  — 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 Homepage and Full Image variants.
+     */
+    secondaryButton?: HeroButtonProps;
+    /**
+     * Background image URL.
+     * - "homepage"   — used as the full-bleed background behind the overlay
+     * - "full-image" — used as the full-bleed background behind the overlay
+     */
+    backgroundImageSrc?: string;
+    /**
+     * Right-side hero image for the Homepage variant.
+     * Accepts a ReactNode (e.g. <img>) or an image URL string.
+     */
+    heroImage?: ReactNode | string;
+    /**
+     * Left floating visual for the Visuals variant (desktop only).
+     * Accepts a ReactNode or image URL string.
+     */
+    leftVisual?: ReactNode | string;
+    /**
+     * Right floating visual for the Visuals variant (desktop only).
+     * Accepts a ReactNode or image URL string.
+     */
+    rightVisual?: ReactNode | string;
+}
+
+declare const Hero: ({ variant, subtitle, title, description, primaryButton, secondaryButton, backgroundImageSrc, heroImage, leftVisual, rightVisual, 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 ScrollytellingItem {
+    /** Short market 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 ScrollytellingProps extends HTMLAttributes<HTMLElement> {
+    /** Section heading rendered as an H2 */
+    header: string;
+    /**
+     * Ordered list of market items.
+     * Drives both the desktop scrollytelling and the mobile stacked layout.
+     */
+    items: ScrollytellingItem[];
+    /**
+     * Controls which side the sticky media column sits on.
+     * @default "media-right"
+     */
+    variant?: "media-left" | "media-right";
+}
+
+declare const SCROLLYTELLING_DATA: ScrollytellingItem[];
+declare const Scrollytelling: ({ header, items, variant, className, ...props }: ScrollytellingProps) => 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;
+}
+
+declare const DayNightTransition: ({ dayImageUrl, nightImageUrl, dayHeadline, nightHeadline, dayDescription, nightDescription, ctaLabel, ctaHref, className, ...props }: DayNightTransitionProps) => react_jsx_runtime.JSX.Element;
+
+interface LogoItem {
+    name: string;
+    url: string;
+}
+interface PaymentMethodsProps 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 PaymentMethods: ({ headline, body, disclaimer, ctaLabel, ctaHref, col1Logos, col2Logos, className, ...props }: PaymentMethodsProps) => react_jsx_runtime.JSX.Element;
+
+export { AVATAR_DATA, Accordion, type AccordionProps, type AvatarItem, type AvatarPosition, type AwardItem, BottomSheet, type BottomSheetAction, type BottomSheetProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSize, Button, type ButtonColorScheme, type ButtonIconPosition, type ButtonProps, type ButtonVariant, COL_ONE_LOGOS, COL_TWO_LOGOS, CTABanner, type CTABannerProps, Card, type CardPrimaryStyle, type CardProps, type CardTag, type CardThumbnailType, Chip, ChipDropdown, type ChipDropdownOption, type ChipDropdownProps, type ChipProps, type ChipSize, DayNightTransition, type DayNightTransitionProps, type FeatureCardItem, FeatureCards, type FeatureCardsProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, Link, type LinkColorScheme, type LinkProps, type LogoItem, Pagination, type PaginationProps, PaymentMethods, type PaymentMethodsProps, SCROLLYTELLING_DATA, STEPS_DATA, Scrollytelling, type ScrollytellingItem, type ScrollytellingProps, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsProps, type StickyCardItem, type StickyCardTheme, StickyStackedCards, type StickyStackedCardsProps, TEXT_CONTENT, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant };