@deriv-web-design/ui 0.0.8 → 0.0.10

package/dist/index.d.mts

@@ -99,8 +99,11 @@ interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "cl
 
 declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<HTMLInputElement>>;
 
+type SearchFieldVariant = "outline" | "fill";
 type SearchFieldStatus = "neutral" | "success" | "fail";
 interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "className"> {
+    /** Visual style of the field. Defaults to "outline". */
+    variant?: SearchFieldVariant;
     /** Visual validation state. Defaults to "neutral". */
     status?: SearchFieldStatus;
     /** Called when the clear (×) button is clicked.
@@ -639,16 +642,6 @@ 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.
@@ -672,19 +665,13 @@ interface NavbarProps extends HTMLAttributes<HTMLElement> {
     ctaLabel?: string;
     /** Destination for the CTA button */
     ctaHref?: string;
-    /**
-     * 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" */
+    /** Language label rendered next to the globe icon, e.g. "EN" */
     languageLabel?: string;
-    /** Called when the language button is clicked and no `languages` array is supplied */
+    /** Called when the language button is clicked */
     onLanguageClick?: () => void;
 }
 
-declare const Navbar: ({ theme, logoSrc, logoSrcDark, logoHref, navItems, loginLabel, loginHref, ctaLabel, ctaHref, languages, languageLabel, onLanguageClick, className, ...props }: NavbarProps) => react_jsx_runtime.JSX.Element;
+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 */

package/dist/index.d.ts

@@ -99,8 +99,11 @@ interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "cl
 
 declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<HTMLInputElement>>;
 
+type SearchFieldVariant = "outline" | "fill";
 type SearchFieldStatus = "neutral" | "success" | "fail";
 interface SearchFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "className"> {
+    /** Visual style of the field. Defaults to "outline". */
+    variant?: SearchFieldVariant;
     /** Visual validation state. Defaults to "neutral". */
     status?: SearchFieldStatus;
     /** Called when the clear (×) button is clicked.
@@ -639,16 +642,6 @@ 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.
@@ -672,19 +665,13 @@ interface NavbarProps extends HTMLAttributes<HTMLElement> {
     ctaLabel?: string;
     /** Destination for the CTA button */
     ctaHref?: string;
-    /**
-     * 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" */
+    /** Language label rendered next to the globe icon, e.g. "EN" */
     languageLabel?: string;
-    /** Called when the language button is clicked and no `languages` array is supplied */
+    /** Called when the language button is clicked */
     onLanguageClick?: () => void;
 }
 
-declare const Navbar: ({ theme, logoSrc, logoSrcDark, logoHref, navItems, loginLabel, loginHref, ctaLabel, ctaHref, languages, languageLabel, onLanguageClick, className, ...props }: NavbarProps) => react_jsx_runtime.JSX.Element;
+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 */