@deriv-web-design/ui 0.0.7 → 0.0.8

package/dist/index.d.mts

@@ -639,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.
@@ -662,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

@@ -639,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.
@@ -662,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 */