@deriv-web-design/ui 0.0.27 → 0.0.28

package/dist/index.d.mts

@@ -55,7 +55,7 @@ interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 declare const Chip: ({ size, label, icon, tag, selected, showFocusRing, disabled, children, className, ...props }: ChipProps) => react_jsx_runtime.JSX.Element;
 
 type TagSize = "xs" | "sm" | "md" | "lg";
-type TagVariant = "fill" | "outline";
+type TagVariant = "fill" | "outline" | "custom";
 type TagFontWeight = "regular" | "bold";
 interface TagProps extends HTMLAttributes<HTMLSpanElement> {
     size?: TagSize;
@@ -202,13 +202,18 @@ interface CardPrimaryProps extends HTMLAttributes<HTMLDivElement> {
     onLinkClick?: () => void;
 }
 type CardThumbnailType = "video" | "article";
+type CardThumbnailLayout = "vertical" | "horizontal" | "horizontal-reverse";
 interface CardThumbnailProps extends HTMLAttributes<HTMLDivElement> {
     variant: "thumbnail";
     /** Thumbnail variant — "video" shows a play button, "article" shows an optional avatar */
     type?: CardThumbnailType;
+    /** Layout direction — "vertical" stacks thumbnail above content, "horizontal" places them side by side */
+    layout?: CardThumbnailLayout;
     /** Thumbnail image source */
     thumbnail: string;
     thumbnailAlt?: string;
+    /** Hide the thumbnail image */
+    hideThumbnail?: boolean;
     /** Card headline */
     title: string;
     /** Card body text */
@@ -223,6 +228,8 @@ interface CardThumbnailProps extends HTMLAttributes<HTMLDivElement> {
     /** Author avatar (article type only) */
     avatar?: string;
     avatarAlt?: string;
+    /** Hide the author avatar (default: false) */
+    hideAvatar?: boolean;
 }
 interface CardSecondaryProps extends HTMLAttributes<HTMLDivElement> {
     variant: "secondary";
@@ -240,7 +247,27 @@ interface CardSecondaryProps extends HTMLAttributes<HTMLDivElement> {
     linkText?: string;
     onLinkClick?: () => void;
 }
-type CardProps = CardPrimaryProps | CardThumbnailProps | CardSecondaryProps;
+interface CardCategoryArticle {
+    /** Article title */
+    title: string;
+    /** Date or tag label */
+    date?: string;
+    /** Click handler */
+    onClick?: () => void;
+}
+interface CardCategoryProps extends HTMLAttributes<HTMLDivElement> {
+    variant: "category";
+    /** Category heading */
+    title: string;
+    /** Hero image for the category */
+    thumbnail?: string;
+    thumbnailAlt?: string;
+    /** Click handler for the title + thumbnail area */
+    onHeaderClick?: () => void;
+    /** List of articles under this category */
+    articles: CardCategoryArticle[];
+}
+type CardProps = CardPrimaryProps | CardThumbnailProps | CardSecondaryProps | CardCategoryProps;
 
 declare const Card: (props: CardProps) => react_jsx_runtime.JSX.Element;
 
@@ -1202,4 +1229,71 @@ interface TestimonialProps {
 
 declare const Testimonial: ({ title, items, className, ...props }: TestimonialProps) => react_jsx_runtime.JSX.Element | null;
 
-export { AVATAR_DATA, Accordion, type AccordionProps, AvatarGrid, type AvatarGridProps, type AvatarItem, type AvatarPosition, 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, FaqAccordion, type FaqAccordionColorScheme, type FaqAccordionProps, type FaqItem, FeatureBullets, type FeatureBulletsProps, type FeatureCardIconItem, type FeatureCardItem, FeatureCards, FeatureCardsIcon, type FeatureCardsIconProps, type FeatureCardsProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Header, type HeaderButtonProps, type HeaderProps, type HeaderVariant, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, ImageBanner, type ImageBannerProps, type LanguageItem, type LeaderItem, Leaders, type LeadersProps, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, PeopleGrid, type PeopleGridProps, type PersonItem, STEPS_DATA, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsAward, type StatsProps, StatsSimple, type StatsSimpleProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, type StickyCardItem, type StickyCardTheme, type StickyMarketCardItem, type StickyMarketCardTheme, StickyMarketCards, type StickyMarketCardsProps, StickyStackedCards, type StickyStackedCardsProps, TEXT_CONTENT, type TabItem, Table, type TableColumnDef, type TableColumnWidth, type TableProps, type TableRowData, Tabs, type TabsProps, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, Testimonial, type TestimonialItem, type TestimonialProps, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant, TextScroll, type TextScrollProps, dayNightTransitionV2Preset };
+interface ArticleHeroArticle {
+    /** Article title */
+    title: string;
+    /** Article summary/description */
+    summary?: string;
+    /** Thumbnail image URL */
+    thumbnail?: string;
+    thumbnailAlt?: string;
+    /** Tags displayed below the content (e.g. date, category) */
+    tags?: string[];
+    /** Click handler for the article */
+    onClick?: () => void;
+}
+interface ArticleHeroColumn {
+    /** Section label displayed with a horizontal line (e.g. "Today's pick", "Trending stories") */
+    label?: string;
+    /** List of articles in this column */
+    articles: ArticleHeroArticle[];
+}
+interface ArticleHeroProps {
+    /** The featured/hero article displayed prominently in the center */
+    featured: ArticleHeroArticle;
+    /** Small cards displayed below the featured article (max 2) */
+    featuredFooter?: ArticleHeroArticle[];
+    /** Left sidebar column */
+    leftColumn: ArticleHeroColumn;
+    /** Right sidebar column */
+    rightColumn: ArticleHeroColumn;
+    /** Additional CSS class */
+    className?: string;
+}
+
+declare const ArticleHero: ({ featured, featuredFooter, leftColumn, rightColumn, className, }: ArticleHeroProps) => react_jsx_runtime.JSX.Element;
+
+type ArticleSectionVariant = "featured" | "showcase" | "grid";
+interface ArticleSectionItem {
+    /** Article title */
+    title: string;
+    /** Article summary/description */
+    summary?: string;
+    /** Thumbnail image URL */
+    thumbnail?: string;
+    thumbnailAlt?: string;
+    /** Tags displayed below the content (e.g. category, date) */
+    tags?: string[];
+    /** Click handler */
+    onClick?: () => void;
+}
+interface ArticleSectionProps {
+    /** Layout variant — "featured" shows a large horizontal hero card + text-only grid; "showcase" shows a vertical featured card + horizontal-reverse card columns; "grid" shows a 4-column card grid (horizontal scroll on mobile) */
+    variant?: ArticleSectionVariant;
+    /** Section heading */
+    sectionTitle: string;
+    /** "View all" link text */
+    linkText?: string;
+    /** "View all" link click handler */
+    onLinkClick?: () => void;
+    /** The featured article (large card) — not used in "grid" variant */
+    featured?: ArticleSectionItem;
+    /** List of smaller articles */
+    articles: ArticleSectionItem[];
+    /** Additional CSS class */
+    className?: string;
+}
+
+declare const ArticleSection: ({ variant, sectionTitle, linkText, onLinkClick, featured, articles, className, }: ArticleSectionProps) => react_jsx_runtime.JSX.Element;
+
+export { AVATAR_DATA, Accordion, type AccordionProps, ArticleHero, type ArticleHeroArticle, type ArticleHeroColumn, type ArticleHeroProps, ArticleSection, type ArticleSectionItem, type ArticleSectionProps, type ArticleSectionVariant, AvatarGrid, type AvatarGridProps, type AvatarItem, type AvatarPosition, 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, FaqAccordion, type FaqAccordionColorScheme, type FaqAccordionProps, type FaqItem, FeatureBullets, type FeatureBulletsProps, type FeatureCardIconItem, type FeatureCardItem, FeatureCards, FeatureCardsIcon, type FeatureCardsIconProps, type FeatureCardsProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Header, type HeaderButtonProps, type HeaderProps, type HeaderVariant, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, ImageBanner, type ImageBannerProps, type LanguageItem, type LeaderItem, Leaders, type LeadersProps, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, PeopleGrid, type PeopleGridProps, type PersonItem, STEPS_DATA, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsAward, type StatsProps, StatsSimple, type StatsSimpleProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, type StickyCardItem, type StickyCardTheme, type StickyMarketCardItem, type StickyMarketCardTheme, StickyMarketCards, type StickyMarketCardsProps, StickyStackedCards, type StickyStackedCardsProps, TEXT_CONTENT, type TabItem, Table, type TableColumnDef, type TableColumnWidth, type TableProps, type TableRowData, Tabs, type TabsProps, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, Testimonial, type TestimonialItem, type TestimonialProps, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant, TextScroll, type TextScrollProps, dayNightTransitionV2Preset };

package/dist/index.d.ts

@@ -55,7 +55,7 @@ interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 declare const Chip: ({ size, label, icon, tag, selected, showFocusRing, disabled, children, className, ...props }: ChipProps) => react_jsx_runtime.JSX.Element;
 
 type TagSize = "xs" | "sm" | "md" | "lg";
-type TagVariant = "fill" | "outline";
+type TagVariant = "fill" | "outline" | "custom";
 type TagFontWeight = "regular" | "bold";
 interface TagProps extends HTMLAttributes<HTMLSpanElement> {
     size?: TagSize;
@@ -202,13 +202,18 @@ interface CardPrimaryProps extends HTMLAttributes<HTMLDivElement> {
     onLinkClick?: () => void;
 }
 type CardThumbnailType = "video" | "article";
+type CardThumbnailLayout = "vertical" | "horizontal" | "horizontal-reverse";
 interface CardThumbnailProps extends HTMLAttributes<HTMLDivElement> {
     variant: "thumbnail";
     /** Thumbnail variant — "video" shows a play button, "article" shows an optional avatar */
     type?: CardThumbnailType;
+    /** Layout direction — "vertical" stacks thumbnail above content, "horizontal" places them side by side */
+    layout?: CardThumbnailLayout;
     /** Thumbnail image source */
     thumbnail: string;
     thumbnailAlt?: string;
+    /** Hide the thumbnail image */
+    hideThumbnail?: boolean;
     /** Card headline */
     title: string;
     /** Card body text */
@@ -223,6 +228,8 @@ interface CardThumbnailProps extends HTMLAttributes<HTMLDivElement> {
     /** Author avatar (article type only) */
     avatar?: string;
     avatarAlt?: string;
+    /** Hide the author avatar (default: false) */
+    hideAvatar?: boolean;
 }
 interface CardSecondaryProps extends HTMLAttributes<HTMLDivElement> {
     variant: "secondary";
@@ -240,7 +247,27 @@ interface CardSecondaryProps extends HTMLAttributes<HTMLDivElement> {
     linkText?: string;
     onLinkClick?: () => void;
 }
-type CardProps = CardPrimaryProps | CardThumbnailProps | CardSecondaryProps;
+interface CardCategoryArticle {
+    /** Article title */
+    title: string;
+    /** Date or tag label */
+    date?: string;
+    /** Click handler */
+    onClick?: () => void;
+}
+interface CardCategoryProps extends HTMLAttributes<HTMLDivElement> {
+    variant: "category";
+    /** Category heading */
+    title: string;
+    /** Hero image for the category */
+    thumbnail?: string;
+    thumbnailAlt?: string;
+    /** Click handler for the title + thumbnail area */
+    onHeaderClick?: () => void;
+    /** List of articles under this category */
+    articles: CardCategoryArticle[];
+}
+type CardProps = CardPrimaryProps | CardThumbnailProps | CardSecondaryProps | CardCategoryProps;
 
 declare const Card: (props: CardProps) => react_jsx_runtime.JSX.Element;
 
@@ -1202,4 +1229,71 @@ interface TestimonialProps {
 
 declare const Testimonial: ({ title, items, className, ...props }: TestimonialProps) => react_jsx_runtime.JSX.Element | null;
 
-export { AVATAR_DATA, Accordion, type AccordionProps, AvatarGrid, type AvatarGridProps, type AvatarItem, type AvatarPosition, 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, FaqAccordion, type FaqAccordionColorScheme, type FaqAccordionProps, type FaqItem, FeatureBullets, type FeatureBulletsProps, type FeatureCardIconItem, type FeatureCardItem, FeatureCards, FeatureCardsIcon, type FeatureCardsIconProps, type FeatureCardsProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Header, type HeaderButtonProps, type HeaderProps, type HeaderVariant, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, ImageBanner, type ImageBannerProps, type LanguageItem, type LeaderItem, Leaders, type LeadersProps, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, PeopleGrid, type PeopleGridProps, type PersonItem, STEPS_DATA, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsAward, type StatsProps, StatsSimple, type StatsSimpleProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, type StickyCardItem, type StickyCardTheme, type StickyMarketCardItem, type StickyMarketCardTheme, StickyMarketCards, type StickyMarketCardsProps, StickyStackedCards, type StickyStackedCardsProps, TEXT_CONTENT, type TabItem, Table, type TableColumnDef, type TableColumnWidth, type TableProps, type TableRowData, Tabs, type TabsProps, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, Testimonial, type TestimonialItem, type TestimonialProps, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant, TextScroll, type TextScrollProps, dayNightTransitionV2Preset };
+interface ArticleHeroArticle {
+    /** Article title */
+    title: string;
+    /** Article summary/description */
+    summary?: string;
+    /** Thumbnail image URL */
+    thumbnail?: string;
+    thumbnailAlt?: string;
+    /** Tags displayed below the content (e.g. date, category) */
+    tags?: string[];
+    /** Click handler for the article */
+    onClick?: () => void;
+}
+interface ArticleHeroColumn {
+    /** Section label displayed with a horizontal line (e.g. "Today's pick", "Trending stories") */
+    label?: string;
+    /** List of articles in this column */
+    articles: ArticleHeroArticle[];
+}
+interface ArticleHeroProps {
+    /** The featured/hero article displayed prominently in the center */
+    featured: ArticleHeroArticle;
+    /** Small cards displayed below the featured article (max 2) */
+    featuredFooter?: ArticleHeroArticle[];
+    /** Left sidebar column */
+    leftColumn: ArticleHeroColumn;
+    /** Right sidebar column */
+    rightColumn: ArticleHeroColumn;
+    /** Additional CSS class */
+    className?: string;
+}
+
+declare const ArticleHero: ({ featured, featuredFooter, leftColumn, rightColumn, className, }: ArticleHeroProps) => react_jsx_runtime.JSX.Element;
+
+type ArticleSectionVariant = "featured" | "showcase" | "grid";
+interface ArticleSectionItem {
+    /** Article title */
+    title: string;
+    /** Article summary/description */
+    summary?: string;
+    /** Thumbnail image URL */
+    thumbnail?: string;
+    thumbnailAlt?: string;
+    /** Tags displayed below the content (e.g. category, date) */
+    tags?: string[];
+    /** Click handler */
+    onClick?: () => void;
+}
+interface ArticleSectionProps {
+    /** Layout variant — "featured" shows a large horizontal hero card + text-only grid; "showcase" shows a vertical featured card + horizontal-reverse card columns; "grid" shows a 4-column card grid (horizontal scroll on mobile) */
+    variant?: ArticleSectionVariant;
+    /** Section heading */
+    sectionTitle: string;
+    /** "View all" link text */
+    linkText?: string;
+    /** "View all" link click handler */
+    onLinkClick?: () => void;
+    /** The featured article (large card) — not used in "grid" variant */
+    featured?: ArticleSectionItem;
+    /** List of smaller articles */
+    articles: ArticleSectionItem[];
+    /** Additional CSS class */
+    className?: string;
+}
+
+declare const ArticleSection: ({ variant, sectionTitle, linkText, onLinkClick, featured, articles, className, }: ArticleSectionProps) => react_jsx_runtime.JSX.Element;
+
+export { AVATAR_DATA, Accordion, type AccordionProps, ArticleHero, type ArticleHeroArticle, type ArticleHeroColumn, type ArticleHeroProps, ArticleSection, type ArticleSectionItem, type ArticleSectionProps, type ArticleSectionVariant, AvatarGrid, type AvatarGridProps, type AvatarItem, type AvatarPosition, 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, FaqAccordion, type FaqAccordionColorScheme, type FaqAccordionProps, type FaqItem, FeatureBullets, type FeatureBulletsProps, type FeatureCardIconItem, type FeatureCardItem, FeatureCards, FeatureCardsIcon, type FeatureCardsIconProps, type FeatureCardsProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Header, type HeaderButtonProps, type HeaderProps, type HeaderVariant, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, ImageBanner, type ImageBannerProps, type LanguageItem, type LeaderItem, Leaders, type LeadersProps, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, PeopleGrid, type PeopleGridProps, type PersonItem, STEPS_DATA, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsAward, type StatsProps, StatsSimple, type StatsSimpleProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, type StickyCardItem, type StickyCardTheme, type StickyMarketCardItem, type StickyMarketCardTheme, StickyMarketCards, type StickyMarketCardsProps, StickyStackedCards, type StickyStackedCardsProps, TEXT_CONTENT, type TabItem, Table, type TableColumnDef, type TableColumnWidth, type TableProps, type TableRowData, Tabs, type TabsProps, Tag, type TagFontWeight, type TagProps, type TagSize, type TagVariant, Testimonial, type TestimonialItem, type TestimonialProps, TextField, type TextFieldProps, type TextFieldStatus, type TextFieldVariant, TextScroll, type TextScrollProps, dayNightTransitionV2Preset };