@deriv-web-design/ui 0.0.5 → 0.0.7

package/dist/index.d.mts

@@ -331,6 +331,8 @@ interface FooterDerivGoProps {
     appStoreBadge?: FooterAppBadge;
     /** Huawei AppGallery badge */
     huaweiBadge?: FooterAppBadge;
+    /** Label next to the QR code image. Defaults to "Scan to download". */
+    scanToDownloadLabel?: string;
     /** Footnote text (e.g. "*Availability varies by country.") */
     availabilityNote?: string;
 }
@@ -592,6 +594,82 @@ interface CTABannerProps extends HTMLAttributes<HTMLElement> {
 declare const AVATAR_DATA: AvatarItem[];
 declare const CTABanner: ({ headline, ctaLabel, ctaHref, avatars, variant, className, ...props }: CTABannerProps) => react_jsx_runtime.JSX.Element;
 
+interface NavDropdownItem {
+    /** Link text */
+    label: string;
+    /** Link destination */
+    href: string;
+    /** Opens in a new tab with ↗ indicator */
+    external?: boolean;
+}
+interface NavDropdownSection {
+    /** Section heading rendered above the link list */
+    title: string;
+    items: NavDropdownItem[];
+}
+interface NavDropdownColumn {
+    /** One or more titled groups stacked within this column */
+    sections: NavDropdownSection[];
+}
+interface NavDropdownFeature {
+    /** Bold heading inside the dark feature card */
+    title: string;
+    /** Body copy below the heading */
+    description: string;
+    /** Label for the "Learn more" style CTA */
+    ctaLabel: string;
+    /** Destination for the CTA */
+    ctaHref: string;
+    /** Optional background image URL — overlaid with dark tint */
+    backgroundImageUrl?: string;
+}
+interface NavItem {
+    /** Text rendered in the nav pill / mobile list */
+    label: string;
+    /** Simple href — used when there is no dropdown */
+    href?: string;
+    /** Render as an external link with ↗ icon (no dropdown) */
+    external?: boolean;
+    /** When provided the item triggers a mega-dropdown on desktop
+     *  and an accordion panel on mobile */
+    dropdown?: {
+        /** 1–4 link columns shown on the left side of the desktop dropdown */
+        columns: NavDropdownColumn[];
+        /** Optional dark feature card on the right side */
+        feature?: NavDropdownFeature;
+    };
+}
+interface NavbarProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * `dark`  — hero beneath has a dark / image background; pill uses white/24 tint, text is white.
+     * `light` — hero beneath has a white background; pill uses white/88 tint, text is slate.
+     */
+    theme?: "dark" | "light";
+    /** Logo image URL used when `theme="dark"` (light-coloured logo) */
+    logoSrc: string;
+    /** Logo image URL used when `theme="light"` (dark-coloured logo).
+     *  Falls back to `logoSrc` when omitted. */
+    logoSrcDark?: string;
+    /** Wraps the logo in an anchor tag */
+    logoHref?: string;
+    /** Navigation items — each may be a plain link, external link, or dropdown trigger */
+    navItems?: NavItem[];
+    /** Label for the "Log in" outlined button */
+    loginLabel?: string;
+    /** Destination for the Log in button */
+    loginHref?: string;
+    /** Label for the primary "Open account" button */
+    ctaLabel?: string;
+    /** Destination for the CTA button */
+    ctaHref?: string;
+    /** Language label rendered next to the globe icon, e.g. "EN" */
+    languageLabel?: string;
+    /** Called when the language button is clicked */
+    onLanguageClick?: () => void;
+}
+
+declare const Navbar: ({ theme, logoSrc, logoSrcDark, logoHref, navItems, loginLabel, loginHref, ctaLabel, ctaHref, languageLabel, onLanguageClick, className, ...props }: NavbarProps) => react_jsx_runtime.JSX.Element;
+
 interface DayNightTransitionProps extends HTMLAttributes<HTMLDivElement> {
     /** URL for the daytime background image */
     dayImageUrl: string;
@@ -638,4 +716,4 @@ declare const TEXT_CONTENT: {
 };
 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 };
+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, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, 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 };

package/dist/index.d.ts

@@ -331,6 +331,8 @@ interface FooterDerivGoProps {
     appStoreBadge?: FooterAppBadge;
     /** Huawei AppGallery badge */
     huaweiBadge?: FooterAppBadge;
+    /** Label next to the QR code image. Defaults to "Scan to download". */
+    scanToDownloadLabel?: string;
     /** Footnote text (e.g. "*Availability varies by country.") */
     availabilityNote?: string;
 }
@@ -592,6 +594,82 @@ interface CTABannerProps extends HTMLAttributes<HTMLElement> {
 declare const AVATAR_DATA: AvatarItem[];
 declare const CTABanner: ({ headline, ctaLabel, ctaHref, avatars, variant, className, ...props }: CTABannerProps) => react_jsx_runtime.JSX.Element;
 
+interface NavDropdownItem {
+    /** Link text */
+    label: string;
+    /** Link destination */
+    href: string;
+    /** Opens in a new tab with ↗ indicator */
+    external?: boolean;
+}
+interface NavDropdownSection {
+    /** Section heading rendered above the link list */
+    title: string;
+    items: NavDropdownItem[];
+}
+interface NavDropdownColumn {
+    /** One or more titled groups stacked within this column */
+    sections: NavDropdownSection[];
+}
+interface NavDropdownFeature {
+    /** Bold heading inside the dark feature card */
+    title: string;
+    /** Body copy below the heading */
+    description: string;
+    /** Label for the "Learn more" style CTA */
+    ctaLabel: string;
+    /** Destination for the CTA */
+    ctaHref: string;
+    /** Optional background image URL — overlaid with dark tint */
+    backgroundImageUrl?: string;
+}
+interface NavItem {
+    /** Text rendered in the nav pill / mobile list */
+    label: string;
+    /** Simple href — used when there is no dropdown */
+    href?: string;
+    /** Render as an external link with ↗ icon (no dropdown) */
+    external?: boolean;
+    /** When provided the item triggers a mega-dropdown on desktop
+     *  and an accordion panel on mobile */
+    dropdown?: {
+        /** 1–4 link columns shown on the left side of the desktop dropdown */
+        columns: NavDropdownColumn[];
+        /** Optional dark feature card on the right side */
+        feature?: NavDropdownFeature;
+    };
+}
+interface NavbarProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * `dark`  — hero beneath has a dark / image background; pill uses white/24 tint, text is white.
+     * `light` — hero beneath has a white background; pill uses white/88 tint, text is slate.
+     */
+    theme?: "dark" | "light";
+    /** Logo image URL used when `theme="dark"` (light-coloured logo) */
+    logoSrc: string;
+    /** Logo image URL used when `theme="light"` (dark-coloured logo).
+     *  Falls back to `logoSrc` when omitted. */
+    logoSrcDark?: string;
+    /** Wraps the logo in an anchor tag */
+    logoHref?: string;
+    /** Navigation items — each may be a plain link, external link, or dropdown trigger */
+    navItems?: NavItem[];
+    /** Label for the "Log in" outlined button */
+    loginLabel?: string;
+    /** Destination for the Log in button */
+    loginHref?: string;
+    /** Label for the primary "Open account" button */
+    ctaLabel?: string;
+    /** Destination for the CTA button */
+    ctaHref?: string;
+    /** Language label rendered next to the globe icon, e.g. "EN" */
+    languageLabel?: string;
+    /** Called when the language button is clicked */
+    onLanguageClick?: () => void;
+}
+
+declare const Navbar: ({ theme, logoSrc, logoSrcDark, logoHref, navItems, loginLabel, loginHref, ctaLabel, ctaHref, languageLabel, onLanguageClick, className, ...props }: NavbarProps) => react_jsx_runtime.JSX.Element;
+
 interface DayNightTransitionProps extends HTMLAttributes<HTMLDivElement> {
     /** URL for the daytime background image */
     dayImageUrl: string;
@@ -638,4 +716,4 @@ declare const TEXT_CONTENT: {
 };
 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 };
+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, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, 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 };