@deriv-web-design/ui 0.0.8 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +8 -139
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +3 -19
- package/dist/index.d.ts +3 -19
- package/dist/index.js +265 -194
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +253 -182
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/tokens.css +213 -17
package/dist/index.d.mts
CHANGED
|
@@ -639,16 +639,6 @@ interface NavItem {
|
|
|
639
639
|
feature?: NavDropdownFeature;
|
|
640
640
|
};
|
|
641
641
|
}
|
|
642
|
-
interface NavLanguage {
|
|
643
|
-
/** ISO code shown in the trigger button, e.g. "EN" */
|
|
644
|
-
code: string;
|
|
645
|
-
/** Native language name shown in the dropdown grid, e.g. "English" */
|
|
646
|
-
label: string;
|
|
647
|
-
/** Mark as currently selected — highlights in coral */
|
|
648
|
-
active?: boolean;
|
|
649
|
-
/** Called when this language is selected */
|
|
650
|
-
onClick: () => void;
|
|
651
|
-
}
|
|
652
642
|
interface NavbarProps extends HTMLAttributes<HTMLElement> {
|
|
653
643
|
/**
|
|
654
644
|
* `dark` — hero beneath has a dark / image background; pill uses white/24 tint, text is white.
|
|
@@ -672,19 +662,13 @@ interface NavbarProps extends HTMLAttributes<HTMLElement> {
|
|
|
672
662
|
ctaLabel?: string;
|
|
673
663
|
/** Destination for the CTA button */
|
|
674
664
|
ctaHref?: string;
|
|
675
|
-
/**
|
|
676
|
-
* Language options for the switcher dropdown.
|
|
677
|
-
* When provided, the globe button opens a 3-column language picker grid.
|
|
678
|
-
* Mark the active language with `active: true` — its code is shown in the button.
|
|
679
|
-
*/
|
|
680
|
-
languages?: NavLanguage[];
|
|
681
|
-
/** Fallback label next to the globe icon when no `languages` array is supplied, e.g. "EN" */
|
|
665
|
+
/** Language label rendered next to the globe icon, e.g. "EN" */
|
|
682
666
|
languageLabel?: string;
|
|
683
|
-
/** Called when the language button is clicked
|
|
667
|
+
/** Called when the language button is clicked */
|
|
684
668
|
onLanguageClick?: () => void;
|
|
685
669
|
}
|
|
686
670
|
|
|
687
|
-
declare const Navbar: ({ theme, logoSrc, logoSrcDark, logoHref, navItems, loginLabel, loginHref, ctaLabel, ctaHref,
|
|
671
|
+
declare const Navbar: ({ theme, logoSrc, logoSrcDark, logoHref, navItems, loginLabel, loginHref, ctaLabel, ctaHref, languageLabel, onLanguageClick, className, ...props }: NavbarProps) => react_jsx_runtime.JSX.Element;
|
|
688
672
|
|
|
689
673
|
interface DayNightTransitionProps extends HTMLAttributes<HTMLDivElement> {
|
|
690
674
|
/** URL for the daytime background image */
|
package/dist/index.d.ts
CHANGED
|
@@ -639,16 +639,6 @@ interface NavItem {
|
|
|
639
639
|
feature?: NavDropdownFeature;
|
|
640
640
|
};
|
|
641
641
|
}
|
|
642
|
-
interface NavLanguage {
|
|
643
|
-
/** ISO code shown in the trigger button, e.g. "EN" */
|
|
644
|
-
code: string;
|
|
645
|
-
/** Native language name shown in the dropdown grid, e.g. "English" */
|
|
646
|
-
label: string;
|
|
647
|
-
/** Mark as currently selected — highlights in coral */
|
|
648
|
-
active?: boolean;
|
|
649
|
-
/** Called when this language is selected */
|
|
650
|
-
onClick: () => void;
|
|
651
|
-
}
|
|
652
642
|
interface NavbarProps extends HTMLAttributes<HTMLElement> {
|
|
653
643
|
/**
|
|
654
644
|
* `dark` — hero beneath has a dark / image background; pill uses white/24 tint, text is white.
|
|
@@ -672,19 +662,13 @@ interface NavbarProps extends HTMLAttributes<HTMLElement> {
|
|
|
672
662
|
ctaLabel?: string;
|
|
673
663
|
/** Destination for the CTA button */
|
|
674
664
|
ctaHref?: string;
|
|
675
|
-
/**
|
|
676
|
-
* Language options for the switcher dropdown.
|
|
677
|
-
* When provided, the globe button opens a 3-column language picker grid.
|
|
678
|
-
* Mark the active language with `active: true` — its code is shown in the button.
|
|
679
|
-
*/
|
|
680
|
-
languages?: NavLanguage[];
|
|
681
|
-
/** Fallback label next to the globe icon when no `languages` array is supplied, e.g. "EN" */
|
|
665
|
+
/** Language label rendered next to the globe icon, e.g. "EN" */
|
|
682
666
|
languageLabel?: string;
|
|
683
|
-
/** Called when the language button is clicked
|
|
667
|
+
/** Called when the language button is clicked */
|
|
684
668
|
onLanguageClick?: () => void;
|
|
685
669
|
}
|
|
686
670
|
|
|
687
|
-
declare const Navbar: ({ theme, logoSrc, logoSrcDark, logoHref, navItems, loginLabel, loginHref, ctaLabel, ctaHref,
|
|
671
|
+
declare const Navbar: ({ theme, logoSrc, logoSrcDark, logoHref, navItems, loginLabel, loginHref, ctaLabel, ctaHref, languageLabel, onLanguageClick, className, ...props }: NavbarProps) => react_jsx_runtime.JSX.Element;
|
|
688
672
|
|
|
689
673
|
interface DayNightTransitionProps extends HTMLAttributes<HTMLDivElement> {
|
|
690
674
|
/** URL for the daytime background image */
|