@deriv-web-design/ui 0.0.15 → 0.0.17
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 +203 -26
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +39 -2
- package/dist/index.d.ts +39 -2
- package/dist/index.js +484 -80
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +483 -81
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -4
- package/tokens.css +50 -19
package/dist/index.d.mts
CHANGED
|
@@ -754,9 +754,37 @@ interface DayNightTransitionProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
754
754
|
ctaLabel?: string;
|
|
755
755
|
/** href for the CTA button */
|
|
756
756
|
ctaHref?: string;
|
|
757
|
+
/** When true, the CTA button is omitted (e.g. hero blocks that end on copy only). */
|
|
758
|
+
hideCta?: boolean;
|
|
759
|
+
/** Headline typography scale — maps to global `--typography-h1-*` or `--typography-h2-*` tokens. */
|
|
760
|
+
headlineLevel?: "h1" | "h2";
|
|
761
|
+
/** Description typography scale — maps to `--typography-body-md-*` or `--typography-body-lg-*` tokens. */
|
|
762
|
+
descriptionLevel?: "body-md" | "body-lg";
|
|
763
|
+
/**
|
|
764
|
+
* Webflow-style headline: fixed `prefix` plus `dayWord` / `nightWord` overlaid and scroll-crossfaded
|
|
765
|
+
* (same pattern as `DayNightTransitionV2` HTML: “Trade all ” + day + night).
|
|
766
|
+
*/
|
|
767
|
+
inlineDayNightHeadline?: {
|
|
768
|
+
prefix: string;
|
|
769
|
+
dayWord: string;
|
|
770
|
+
nightWord: string;
|
|
771
|
+
};
|
|
772
|
+
/**
|
|
773
|
+
* `"webflow-day-night-v2"` replays IX2 scroll curves from Webflow export `DayNightTransitionV2`
|
|
774
|
+
* (`SCROLLING_IN_VIEW` + `SCROLL_PROGRESS` actionLists `a` / `a-2` in `js/webflow.js`).
|
|
775
|
+
*/
|
|
776
|
+
scrollPreset?: "default" | "webflow-day-night-v2";
|
|
757
777
|
}
|
|
758
778
|
|
|
759
|
-
declare const DayNightTransition: ({ dayImageUrl, nightImageUrl, dayHeadline, nightHeadline, dayDescription, nightDescription, ctaLabel, ctaHref, className, ...props }: DayNightTransitionProps) => react_jsx_runtime.JSX.Element;
|
|
779
|
+
declare const DayNightTransition: ({ dayImageUrl, nightImageUrl, dayHeadline, nightHeadline, dayDescription, nightDescription, ctaLabel, ctaHref, hideCta, headlineLevel, descriptionLevel, inlineDayNightHeadline, scrollPreset, className, ...props }: DayNightTransitionProps) => react_jsx_runtime.JSX.Element;
|
|
780
|
+
|
|
781
|
+
/**
|
|
782
|
+
* **DayNightTransitionV2** Storybook preset: same headlines, body copy, CTA, and
|
|
783
|
+
* typography defaults (h2 + body-md) as the **Default** story; Webflow IX2 scroll
|
|
784
|
+
* timing via `scrollPreset: "webflow-day-night-v2"` plus `dnt--layout-v2` /
|
|
785
|
+
* `dnt--webflow-v2` for layout and backgrounds.
|
|
786
|
+
*/
|
|
787
|
+
declare const dayNightTransitionV2Preset: Pick<DayNightTransitionProps, "className" | "dayImageUrl" | "nightImageUrl" | "dayHeadline" | "nightHeadline" | "dayDescription" | "nightDescription" | "ctaLabel" | "ctaHref" | "scrollPreset">;
|
|
760
788
|
|
|
761
789
|
interface LogoItem {
|
|
762
790
|
name: string;
|
|
@@ -863,4 +891,13 @@ interface DownloadBannerProps {
|
|
|
863
891
|
|
|
864
892
|
declare const DownloadBanner: ({ style, qrCodeImage, qrCodeAlt, qrTitle, qrSubtitle, mobileTitle, showAppStore, showGooglePlay, showAppGallery, showWindows, showMacOS, showLinux, showWeb, appStoreHref, googlePlayHref, appGalleryHref, windowsHref, macOSHref, linuxHref, webHref, disclaimer, }: DownloadBannerProps) => react_jsx_runtime.JSX.Element;
|
|
865
893
|
|
|
866
|
-
|
|
894
|
+
interface TextScrollProps {
|
|
895
|
+
/** The large body copy that animates word-by-word on scroll */
|
|
896
|
+
text: string;
|
|
897
|
+
/** Additional class names forwarded to the section root */
|
|
898
|
+
className?: string;
|
|
899
|
+
}
|
|
900
|
+
|
|
901
|
+
declare const TextScroll: ({ text, className }: TextScrollProps) => react_jsx_runtime.JSX.Element;
|
|
902
|
+
|
|
903
|
+
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, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, FEATURE_SCROLL_DATA, type FeatureCardItem, type FeatureCardSecondaryItem, FeatureCards, type FeatureCardsProps, FeatureCardsSecondary, type FeatureCardsSecondaryProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, type LanguageItem, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, STEPS_DATA, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, 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, TextScroll, type TextScrollProps, dayNightTransitionV2Preset };
|
package/dist/index.d.ts
CHANGED
|
@@ -754,9 +754,37 @@ interface DayNightTransitionProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
754
754
|
ctaLabel?: string;
|
|
755
755
|
/** href for the CTA button */
|
|
756
756
|
ctaHref?: string;
|
|
757
|
+
/** When true, the CTA button is omitted (e.g. hero blocks that end on copy only). */
|
|
758
|
+
hideCta?: boolean;
|
|
759
|
+
/** Headline typography scale — maps to global `--typography-h1-*` or `--typography-h2-*` tokens. */
|
|
760
|
+
headlineLevel?: "h1" | "h2";
|
|
761
|
+
/** Description typography scale — maps to `--typography-body-md-*` or `--typography-body-lg-*` tokens. */
|
|
762
|
+
descriptionLevel?: "body-md" | "body-lg";
|
|
763
|
+
/**
|
|
764
|
+
* Webflow-style headline: fixed `prefix` plus `dayWord` / `nightWord` overlaid and scroll-crossfaded
|
|
765
|
+
* (same pattern as `DayNightTransitionV2` HTML: “Trade all ” + day + night).
|
|
766
|
+
*/
|
|
767
|
+
inlineDayNightHeadline?: {
|
|
768
|
+
prefix: string;
|
|
769
|
+
dayWord: string;
|
|
770
|
+
nightWord: string;
|
|
771
|
+
};
|
|
772
|
+
/**
|
|
773
|
+
* `"webflow-day-night-v2"` replays IX2 scroll curves from Webflow export `DayNightTransitionV2`
|
|
774
|
+
* (`SCROLLING_IN_VIEW` + `SCROLL_PROGRESS` actionLists `a` / `a-2` in `js/webflow.js`).
|
|
775
|
+
*/
|
|
776
|
+
scrollPreset?: "default" | "webflow-day-night-v2";
|
|
757
777
|
}
|
|
758
778
|
|
|
759
|
-
declare const DayNightTransition: ({ dayImageUrl, nightImageUrl, dayHeadline, nightHeadline, dayDescription, nightDescription, ctaLabel, ctaHref, className, ...props }: DayNightTransitionProps) => react_jsx_runtime.JSX.Element;
|
|
779
|
+
declare const DayNightTransition: ({ dayImageUrl, nightImageUrl, dayHeadline, nightHeadline, dayDescription, nightDescription, ctaLabel, ctaHref, hideCta, headlineLevel, descriptionLevel, inlineDayNightHeadline, scrollPreset, className, ...props }: DayNightTransitionProps) => react_jsx_runtime.JSX.Element;
|
|
780
|
+
|
|
781
|
+
/**
|
|
782
|
+
* **DayNightTransitionV2** Storybook preset: same headlines, body copy, CTA, and
|
|
783
|
+
* typography defaults (h2 + body-md) as the **Default** story; Webflow IX2 scroll
|
|
784
|
+
* timing via `scrollPreset: "webflow-day-night-v2"` plus `dnt--layout-v2` /
|
|
785
|
+
* `dnt--webflow-v2` for layout and backgrounds.
|
|
786
|
+
*/
|
|
787
|
+
declare const dayNightTransitionV2Preset: Pick<DayNightTransitionProps, "className" | "dayImageUrl" | "nightImageUrl" | "dayHeadline" | "nightHeadline" | "dayDescription" | "nightDescription" | "ctaLabel" | "ctaHref" | "scrollPreset">;
|
|
760
788
|
|
|
761
789
|
interface LogoItem {
|
|
762
790
|
name: string;
|
|
@@ -863,4 +891,13 @@ interface DownloadBannerProps {
|
|
|
863
891
|
|
|
864
892
|
declare const DownloadBanner: ({ style, qrCodeImage, qrCodeAlt, qrTitle, qrSubtitle, mobileTitle, showAppStore, showGooglePlay, showAppGallery, showWindows, showMacOS, showLinux, showWeb, appStoreHref, googlePlayHref, appGalleryHref, windowsHref, macOSHref, linuxHref, webHref, disclaimer, }: DownloadBannerProps) => react_jsx_runtime.JSX.Element;
|
|
865
893
|
|
|
866
|
-
|
|
894
|
+
interface TextScrollProps {
|
|
895
|
+
/** The large body copy that animates word-by-word on scroll */
|
|
896
|
+
text: string;
|
|
897
|
+
/** Additional class names forwarded to the section root */
|
|
898
|
+
className?: string;
|
|
899
|
+
}
|
|
900
|
+
|
|
901
|
+
declare const TextScroll: ({ text, className }: TextScrollProps) => react_jsx_runtime.JSX.Element;
|
|
902
|
+
|
|
903
|
+
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, DotLottieInView, type DotLottieInViewProps, DownloadBadge, type DownloadBadgeColorScheme, type DownloadBadgePlatform, type DownloadBadgeProps, DownloadBanner, type DownloadBannerProps, type DownloadBannerStyle, FEATURE_SCROLL_DATA, type FeatureCardItem, type FeatureCardSecondaryItem, FeatureCards, type FeatureCardsProps, FeatureCardsSecondary, type FeatureCardsSecondaryProps, FeatureScroll, type FeatureScrollItem, type FeatureScrollProps, Footer, type FooterAiSummaryItem, type FooterAiSummaryProps, type FooterAppBadge, type FooterDerivGoProps, type FooterLinkItem, type FooterNavSection, type FooterProps, type FooterSocialLink, Hero, type HeroButtonProps, type HeroProps, type HeroVariant, type LanguageItem, Link, type LinkColorScheme, type LinkProps, type LogoItem, LogoMarquee, type LogoMarqueeProps, type NavDropdownColumn, type NavDropdownFeature, type NavDropdownItem, type NavItem, Navbar, type NavbarProps, Pagination, type PaginationProps, STEPS_DATA, SearchField, type SearchFieldProps, type SearchFieldStatus, type StatItem, Stats, type StatsProps, type StepItem, Steps, type StepsImagePosition, type StepsProps, 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, TextScroll, type TextScrollProps, dayNightTransitionV2Preset };
|