@deriv-web-design/ui 0.0.14 → 0.0.15

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, HTMLAttributes, InputHTMLAttributes, MouseEvent } from 'react';
+import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, HTMLAttributes, InputHTMLAttributes, MouseEvent, ComponentProps } from 'react';
+import { DotLottieReact } from '@lottiefiles/dotlottie-react';
 
 type ButtonColorScheme = "coral" | "black" | "white";
 type ButtonVariant = "primary" | "secondary";
@@ -516,8 +517,8 @@ interface StatsProps extends HTMLAttributes<HTMLElement> {
 
 declare const Stats: ({ title, description, stats, leftAwards, rightAwards, className, ...props }: StatsProps) => react_jsx_runtime.JSX.Element;
 
-interface ScrollytellingItem {
-    /** Short market name, e.g. "Forex" */
+interface FeatureScrollItem {
+    /** Short feature name, e.g. "Forex" */
     title: string;
     /** Body copy below the title */
     description: string;
@@ -535,14 +536,14 @@ interface ScrollytellingItem {
     /** URL to the .lottie file or any image asset (png, jpg, svg, webp…) */
     mediaUrl: string;
 }
-interface ScrollytellingProps extends HTMLAttributes<HTMLElement> {
+interface FeatureScrollProps 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.
+     * Ordered list of feature items.
+     * Drives both the desktop scroll-driven layout and the mobile stacked layout.
      */
-    items: ScrollytellingItem[];
+    items: FeatureScrollItem[];
     /**
      * Controls which side the sticky media column sits on.
      * @default "media-right"
@@ -550,8 +551,24 @@ interface ScrollytellingProps extends HTMLAttributes<HTMLElement> {
     variant?: "media-left" | "media-right";
 }
 
-declare const SCROLLYTELLING_DATA: ScrollytellingItem[];
-declare const Scrollytelling: ({ header, items, variant, className, ...props }: ScrollytellingProps) => react_jsx_runtime.JSX.Element;
+declare const FEATURE_SCROLL_DATA: FeatureScrollItem[];
+declare const FeatureScroll: ({ header, items, variant, className, ...props }: FeatureScrollProps) => react_jsx_runtime.JSX.Element;
+
+type DotLottieInViewProps = Omit<ComponentProps<typeof DotLottieReact>, "autoplay" | "loop" | "dotLottieRefCallback"> & {
+    /**
+     * When false, playback is stopped (e.g. inactive slide in a stacked player).
+     * When true, plays once whenever the instance is both enabled and intersecting.
+     */
+    enabled?: boolean;
+    rootMargin?: string;
+    threshold?: number | number[];
+};
+/**
+ * Plays a .lottie once when it scrolls into view. Stops and resets when it leaves view.
+ * When it enters view again, it plays once more. Set `enabled={false}` to force stop
+ * (e.g. hidden slides) without relying on geometry alone.
+ */
+declare function DotLottieInView({ enabled, rootMargin, threshold, className, style, ...dotProps }: DotLottieInViewProps): react_jsx_runtime.JSX.Element;
 
 /** Visual colour theme for each card — matches the Figma palette. */
 type StickyCardTheme = "light" | "coral" | "dark";
@@ -846,4 +863,4 @@ interface DownloadBannerProps {
 
 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;
 
-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, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, type FeatureCardItem, type FeatureCardSecondaryItem, FeatureCards, type FeatureCardsProps, FeatureCardsSecondary, type FeatureCardsSecondaryProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, type LanguageItem, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, SCROLLYTELLING_DATA, STEPS_DATA, Scrollytelling, type ScrollytellingItem, type ScrollytellingProps, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, 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 };
+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, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, FEATURE_SCROLL_DATA, type FeatureCardItem, type FeatureCardSecondaryItem, FeatureCards, type FeatureCardsProps, FeatureCardsSecondary, type FeatureCardsSecondaryProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, type LanguageItem, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, STEPS_DATA, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, 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 };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, HTMLAttributes, InputHTMLAttributes, MouseEvent } from 'react';
+import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, HTMLAttributes, InputHTMLAttributes, MouseEvent, ComponentProps } from 'react';
+import { DotLottieReact } from '@lottiefiles/dotlottie-react';
 
 type ButtonColorScheme = "coral" | "black" | "white";
 type ButtonVariant = "primary" | "secondary";
@@ -516,8 +517,8 @@ interface StatsProps extends HTMLAttributes<HTMLElement> {
 
 declare const Stats: ({ title, description, stats, leftAwards, rightAwards, className, ...props }: StatsProps) => react_jsx_runtime.JSX.Element;
 
-interface ScrollytellingItem {
-    /** Short market name, e.g. "Forex" */
+interface FeatureScrollItem {
+    /** Short feature name, e.g. "Forex" */
     title: string;
     /** Body copy below the title */
     description: string;
@@ -535,14 +536,14 @@ interface ScrollytellingItem {
     /** URL to the .lottie file or any image asset (png, jpg, svg, webp…) */
     mediaUrl: string;
 }
-interface ScrollytellingProps extends HTMLAttributes<HTMLElement> {
+interface FeatureScrollProps 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.
+     * Ordered list of feature items.
+     * Drives both the desktop scroll-driven layout and the mobile stacked layout.
      */
-    items: ScrollytellingItem[];
+    items: FeatureScrollItem[];
     /**
      * Controls which side the sticky media column sits on.
      * @default "media-right"
@@ -550,8 +551,24 @@ interface ScrollytellingProps extends HTMLAttributes<HTMLElement> {
     variant?: "media-left" | "media-right";
 }
 
-declare const SCROLLYTELLING_DATA: ScrollytellingItem[];
-declare const Scrollytelling: ({ header, items, variant, className, ...props }: ScrollytellingProps) => react_jsx_runtime.JSX.Element;
+declare const FEATURE_SCROLL_DATA: FeatureScrollItem[];
+declare const FeatureScroll: ({ header, items, variant, className, ...props }: FeatureScrollProps) => react_jsx_runtime.JSX.Element;
+
+type DotLottieInViewProps = Omit<ComponentProps<typeof DotLottieReact>, "autoplay" | "loop" | "dotLottieRefCallback"> & {
+    /**
+     * When false, playback is stopped (e.g. inactive slide in a stacked player).
+     * When true, plays once whenever the instance is both enabled and intersecting.
+     */
+    enabled?: boolean;
+    rootMargin?: string;
+    threshold?: number | number[];
+};
+/**
+ * Plays a .lottie once when it scrolls into view. Stops and resets when it leaves view.
+ * When it enters view again, it plays once more. Set `enabled={false}` to force stop
+ * (e.g. hidden slides) without relying on geometry alone.
+ */
+declare function DotLottieInView({ enabled, rootMargin, threshold, className, style, ...dotProps }: DotLottieInViewProps): react_jsx_runtime.JSX.Element;
 
 /** Visual colour theme for each card — matches the Figma palette. */
 type StickyCardTheme = "light" | "coral" | "dark";
@@ -846,4 +863,4 @@ interface DownloadBannerProps {
 
 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;
 
-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, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, type FeatureCardItem, type FeatureCardSecondaryItem, FeatureCards, type FeatureCardsProps, FeatureCardsSecondary, type FeatureCardsSecondaryProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, type LanguageItem, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, SCROLLYTELLING_DATA, STEPS_DATA, Scrollytelling, type ScrollytellingItem, type ScrollytellingProps, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, 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 };
+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, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, FEATURE_SCROLL_DATA, type FeatureCardItem, type FeatureCardSecondaryItem, FeatureCards, type FeatureCardsProps, FeatureCardsSecondary, type FeatureCardsSecondaryProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, type LanguageItem, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, STEPS_DATA, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, 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 };