@deriv-web-design/ui 0.0.6 → 0.0.8

package/dist/index.d.mts

@@ -602,11 +602,15 @@ interface NavDropdownItem {
     /** Opens in a new tab with ↗ indicator */
     external?: boolean;
 }
-interface NavDropdownColumn {
+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;
@@ -635,6 +639,16 @@ interface NavItem {
         feature?: NavDropdownFeature;
     };
 }
+interface NavLanguage {
+    /** ISO code shown in the trigger button, e.g. "EN" */
+    code: string;
+    /** Native language name shown in the dropdown grid, e.g. "English" */
+    label: string;
+    /** Mark as currently selected — highlights in coral */
+    active?: boolean;
+    /** Called when this language is selected */
+    onClick: () => void;
+}
 interface NavbarProps extends HTMLAttributes<HTMLElement> {
     /**
      * `dark`  — hero beneath has a dark / image background; pill uses white/24 tint, text is white.
@@ -658,13 +672,19 @@ interface NavbarProps extends HTMLAttributes<HTMLElement> {
     ctaLabel?: string;
     /** Destination for the CTA button */
     ctaHref?: string;
-    /** Language label rendered next to the globe icon, e.g. "EN" */
+    /**
+     * Language options for the switcher dropdown.
+     * When provided, the globe button opens a 3-column language picker grid.
+     * Mark the active language with `active: true` — its code is shown in the button.
+     */
+    languages?: NavLanguage[];
+    /** Fallback label next to the globe icon when no `languages` array is supplied, e.g. "EN" */
     languageLabel?: string;
-    /** Called when the language button is clicked */
+    /** Called when the language button is clicked and no `languages` array is supplied */
     onLanguageClick?: () => void;
 }
 
-declare const Navbar: ({ theme, logoSrc, logoSrcDark, logoHref, navItems, loginLabel, loginHref, ctaLabel, ctaHref, languageLabel, onLanguageClick, className, ...props }: NavbarProps) => react_jsx_runtime.JSX.Element;
+declare const Navbar: ({ theme, logoSrc, logoSrcDark, logoHref, navItems, loginLabel, loginHref, ctaLabel, ctaHref, languages, languageLabel, onLanguageClick, className, ...props }: NavbarProps) => react_jsx_runtime.JSX.Element;
 
 interface DayNightTransitionProps extends HTMLAttributes<HTMLDivElement> {
     /** URL for the daytime background image */

package/dist/index.d.ts

@@ -602,11 +602,15 @@ interface NavDropdownItem {
     /** Opens in a new tab with ↗ indicator */
     external?: boolean;
 }
-interface NavDropdownColumn {
+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;
@@ -635,6 +639,16 @@ interface NavItem {
         feature?: NavDropdownFeature;
     };
 }
+interface NavLanguage {
+    /** ISO code shown in the trigger button, e.g. "EN" */
+    code: string;
+    /** Native language name shown in the dropdown grid, e.g. "English" */
+    label: string;
+    /** Mark as currently selected — highlights in coral */
+    active?: boolean;
+    /** Called when this language is selected */
+    onClick: () => void;
+}
 interface NavbarProps extends HTMLAttributes<HTMLElement> {
     /**
      * `dark`  — hero beneath has a dark / image background; pill uses white/24 tint, text is white.
@@ -658,13 +672,19 @@ interface NavbarProps extends HTMLAttributes<HTMLElement> {
     ctaLabel?: string;
     /** Destination for the CTA button */
     ctaHref?: string;
-    /** Language label rendered next to the globe icon, e.g. "EN" */
+    /**
+     * Language options for the switcher dropdown.
+     * When provided, the globe button opens a 3-column language picker grid.
+     * Mark the active language with `active: true` — its code is shown in the button.
+     */
+    languages?: NavLanguage[];
+    /** Fallback label next to the globe icon when no `languages` array is supplied, e.g. "EN" */
     languageLabel?: string;
-    /** Called when the language button is clicked */
+    /** Called when the language button is clicked and no `languages` array is supplied */
     onLanguageClick?: () => void;
 }
 
-declare const Navbar: ({ theme, logoSrc, logoSrcDark, logoHref, navItems, loginLabel, loginHref, ctaLabel, ctaHref, languageLabel, onLanguageClick, className, ...props }: NavbarProps) => react_jsx_runtime.JSX.Element;
+declare const Navbar: ({ theme, logoSrc, logoSrcDark, logoHref, navItems, loginLabel, loginHref, ctaLabel, ctaHref, languages, languageLabel, onLanguageClick, className, ...props }: NavbarProps) => react_jsx_runtime.JSX.Element;
 
 interface DayNightTransitionProps extends HTMLAttributes<HTMLDivElement> {
     /** URL for the daytime background image */