@deriv-ds/design-intelligence-layer 0.5.1 → 0.5.2
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/AGENTS.md +3 -2
- package/CHANGELOG.md +63 -0
- package/README.md +40 -12
- package/dist/index.cjs +1764 -965
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +103 -3
- package/dist/index.d.ts +103 -3
- package/dist/index.js +1861 -1062
- package/dist/index.js.map +1 -1
- package/guides/design-system-guide/deriv-design-intelligence-guide.md +4 -0
- package/package.json +11 -4
- package/src/styles.css +71 -13
package/dist/index.d.cts
CHANGED
|
@@ -333,7 +333,7 @@ declare function AvatarGroup({ className, ...props }: React$1.ComponentProps<"di
|
|
|
333
333
|
declare function AvatarGroupCount({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
|
|
334
334
|
|
|
335
335
|
declare const tagVariants: (props?: ({
|
|
336
|
-
variant?: "fill-neutral" | "fill-red" | "fill-yellow" | "fill-green" | "fill-blue" | "outline-neutral" | "outline-red" | "outline-yellow" | "outline-green" | "outline-blue" | null | undefined;
|
|
336
|
+
variant?: "fill-neutral" | "fill-red" | "fill-yellow" | "fill-green" | "fill-blue" | "fill-emerald" | "outline-neutral" | "outline-red" | "outline-yellow" | "outline-green" | "outline-blue" | null | undefined;
|
|
337
337
|
size?: "sm" | "md" | "2xs" | null | undefined;
|
|
338
338
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
339
339
|
declare function Tag({ className, variant, size, asChild, children, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof tagVariants> & {
|
|
@@ -381,12 +381,24 @@ declare function BreadcrumbEllipsis({ className, ...props }: React$1.ComponentPr
|
|
|
381
381
|
|
|
382
382
|
declare const buttonVariants: (props?: ({
|
|
383
383
|
variant?: "primary" | "secondary" | "tertiary" | "ghost" | null | undefined;
|
|
384
|
-
size?: "sm" | "md" | "lg" | "xs" | "icon" | "icon-lg" | "icon-md" | "icon-sm" | "icon-xs" | null | undefined;
|
|
384
|
+
size?: "sm" | "md" | "lg" | "xs" | "icon" | "xl" | "icon-xl" | "icon-lg" | "icon-md" | "icon-sm" | "icon-xs" | null | undefined;
|
|
385
385
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
386
386
|
declare function Button({ className, variant, size, asChild, loading, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
|
|
387
387
|
asChild?: boolean;
|
|
388
388
|
loading?: boolean;
|
|
389
389
|
}): react_jsx_runtime.JSX.Element;
|
|
390
|
+
declare const socialButtonVariants: (props?: ({
|
|
391
|
+
variant?: "primary" | "secondary" | null | undefined;
|
|
392
|
+
size?: "md" | "lg" | "xl" | null | undefined;
|
|
393
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
394
|
+
type SocialProvider = "google" | "apple" | "facebook" | "x";
|
|
395
|
+
type SocialButtonSize = "md" | "lg" | "xl";
|
|
396
|
+
type SocialButtonVariant = "primary" | "secondary";
|
|
397
|
+
declare function SocialButton({ className, provider, variant, size, asChild, loading, children, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof socialButtonVariants> & {
|
|
398
|
+
provider: SocialProvider;
|
|
399
|
+
asChild?: boolean;
|
|
400
|
+
loading?: boolean;
|
|
401
|
+
}): react_jsx_runtime.JSX.Element;
|
|
390
402
|
|
|
391
403
|
declare const chipVariants: (props?: ({
|
|
392
404
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
@@ -720,6 +732,62 @@ declare function InputGroupText({ className, ...props }: React$1.ComponentProps<
|
|
|
720
732
|
declare function InputGroupInput({ className, ...props }: React$1.ComponentProps<"input">): react_jsx_runtime.JSX.Element;
|
|
721
733
|
declare function InputGroupTextarea({ className, ...props }: React$1.ComponentProps<"textarea">): react_jsx_runtime.JSX.Element;
|
|
722
734
|
|
|
735
|
+
interface Country {
|
|
736
|
+
name: string;
|
|
737
|
+
iso2: string;
|
|
738
|
+
dialCode: string;
|
|
739
|
+
/** Pascal-case key used to look up Flag{key}Icon from @deriv/quill-icons/Flags */
|
|
740
|
+
flagKey: string;
|
|
741
|
+
}
|
|
742
|
+
declare const COUNTRIES: Country[];
|
|
743
|
+
declare const DEFAULT_COUNTRY: Country;
|
|
744
|
+
|
|
745
|
+
type PhoneInputStatus = "default" | "success" | "error";
|
|
746
|
+
interface PhoneInputProps extends Omit<React$1.ComponentProps<"input">, "value" | "defaultValue" | "onChange"> {
|
|
747
|
+
/** External label rendered above the field (only when `floatingLabel` is false). */
|
|
748
|
+
label?: string;
|
|
749
|
+
/** Floating caption shown inside the textfield half when `floatingLabel` is true. */
|
|
750
|
+
fieldLabel?: string;
|
|
751
|
+
/** Controlled dial code, e.g. "+376". */
|
|
752
|
+
dialCode?: string;
|
|
753
|
+
/** Uncontrolled initial dial code. Defaults to Andorra (+376). */
|
|
754
|
+
defaultDialCode?: string;
|
|
755
|
+
onDialCodeChange?: (dialCode: string, country: Country) => void;
|
|
756
|
+
helperText?: string;
|
|
757
|
+
status?: PhoneInputStatus;
|
|
758
|
+
/** Phone number value (passed to the inner input). */
|
|
759
|
+
value?: string;
|
|
760
|
+
defaultValue?: string;
|
|
761
|
+
onChange?: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
|
|
762
|
+
/** When true, renders the floating-label layout (Code / fieldLabel captions inside both halves). */
|
|
763
|
+
floatingLabel?: boolean;
|
|
764
|
+
/** When true, the numeric-only filter is lifted so non-digit characters pass
|
|
765
|
+
* through untouched. Used by EmailOrPhoneInput so a typed letter/symbol can
|
|
766
|
+
* bubble up and morph the field back to email mode. */
|
|
767
|
+
allowNonNumeric?: boolean;
|
|
768
|
+
}
|
|
769
|
+
declare const PhoneInput: React$1.ForwardRefExoticComponent<Omit<PhoneInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
|
|
770
|
+
|
|
771
|
+
interface EmailOrPhoneInputProps {
|
|
772
|
+
/** Label text — "Email/Phone number". */
|
|
773
|
+
label?: string;
|
|
774
|
+
/** "floating" floats the label inside the field; "external" renders it above. */
|
|
775
|
+
labelVariant?: "floating" | "external";
|
|
776
|
+
/** Placeholder shown in email mode for the external variant. */
|
|
777
|
+
placeholder?: string;
|
|
778
|
+
/** Initial dial code once the field morphs to phone mode. Defaults to +376 (AD). */
|
|
779
|
+
defaultDialCode?: string;
|
|
780
|
+
status?: PhoneInputStatus;
|
|
781
|
+
helperText?: string;
|
|
782
|
+
disabled?: boolean;
|
|
783
|
+
defaultValue?: string;
|
|
784
|
+
onValueChange?: (value: string, mode: "email" | "phone", dialCode?: string) => void;
|
|
785
|
+
className?: string;
|
|
786
|
+
/** Shows an emerald "Last used" badge clipped above the top-right corner of the field. */
|
|
787
|
+
showLastUsed?: boolean;
|
|
788
|
+
}
|
|
789
|
+
declare function EmailOrPhoneInput({ label, labelVariant, placeholder, defaultDialCode, status, helperText, disabled, defaultValue, onValueChange, className, showLastUsed, }: EmailOrPhoneInputProps): react_jsx_runtime.JSX.Element;
|
|
790
|
+
|
|
723
791
|
declare const searchFieldVariants: (props?: ({
|
|
724
792
|
variant?: "fill" | "outline" | null | undefined;
|
|
725
793
|
size?: "sm" | "md" | null | undefined;
|
|
@@ -1486,4 +1554,36 @@ interface TradingEmptyProps {
|
|
|
1486
1554
|
declare function TradingEmptySkeleton(): react_jsx_runtime.JSX.Element;
|
|
1487
1555
|
declare function TradingEmpty({ image, imageSrc, title, description, }: TradingEmptyProps): react_jsx_runtime.JSX.Element;
|
|
1488
1556
|
|
|
1489
|
-
|
|
1557
|
+
type ReferralLayout = "mobile" | "desktop";
|
|
1558
|
+
interface ReferralMetric {
|
|
1559
|
+
/** Stat value, e.g. "0" or "0.00". */
|
|
1560
|
+
value: string;
|
|
1561
|
+
/** Stat label below the value, e.g. "Sign-ups". */
|
|
1562
|
+
label: string;
|
|
1563
|
+
}
|
|
1564
|
+
interface ReferralProps {
|
|
1565
|
+
/** Force a layout. Omit (default) = responsive: mobile < md, desktop ≥ md. */
|
|
1566
|
+
layout?: ReferralLayout;
|
|
1567
|
+
/** Gift illustration src. Omit to show a neutral placeholder. */
|
|
1568
|
+
assetSrc?: string;
|
|
1569
|
+
/** Heading. Use "\n" to control line breaks. */
|
|
1570
|
+
title?: string;
|
|
1571
|
+
/** Share-link card title. */
|
|
1572
|
+
shareTitle?: string;
|
|
1573
|
+
/** Referral URL shown under the share title. */
|
|
1574
|
+
referralLink?: string;
|
|
1575
|
+
/** Copy button label. */
|
|
1576
|
+
copyLabel?: string;
|
|
1577
|
+
/** Copy button handler. */
|
|
1578
|
+
onCopy?: () => void;
|
|
1579
|
+
/** Metrics row. Omit to use built-in demo metrics. */
|
|
1580
|
+
metrics?: ReferralMetric[];
|
|
1581
|
+
/** How-to-earn card title. */
|
|
1582
|
+
howToTitle?: string;
|
|
1583
|
+
/** How-to-earn steps. Omit to use built-in demo steps. */
|
|
1584
|
+
steps?: string[];
|
|
1585
|
+
className?: string;
|
|
1586
|
+
}
|
|
1587
|
+
declare function Referral({ layout, assetSrc, title, shareTitle, referralLink, copyLabel, onCopy, metrics, howToTitle, steps, className, }: ReferralProps): react_jsx_runtime.JSX.Element;
|
|
1588
|
+
|
|
1589
|
+
export { Accordion, AccordionContent, AccordionItem, type AccordionSize, AccordionTrigger, type AccordionVariant, AccountActivatedCard, type AccountActivatedCardProps, type AccountActivatedCardState, type ActionButtonState, type ActionButtonSurface, AspectRatio, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BadgeDot, BannerCard, type BannerCardProps, type BannerItem, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, COUNTRIES, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CheckboxField, Chip, CodeInput, CodeInputGroup, CodeInputSeparator, CodeInputSlot, Collapsible, CollapsibleContent, CollapsibleItem, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type Country, DEFAULT_COUNTRY, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmailOrPhoneInput, type EmailOrPhoneInputProps, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, type ExploreItem, type FeedbackSuccessAssetShape, type FeedbackSuccessLayout, FeedbackSuccessScreen, type FeedbackSuccessScreenProps, type FeedbackTradeAccount, FeedbackTradeWithAccounts, type FeedbackTradeWithAccountsProps, type FeedbackTransferEndpoint, FeedbackTransferSuggestion, type FeedbackTransferSuggestionProps, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HeaderApp, type HeaderAppAction, type HeaderAppCenter, HeaderAppHome, type HeaderAppHomeProps, type HeaderAppLayout, type HeaderAppProps, type HeaderAppState, type HeaderAppTab, HeaderBranding, type HeaderBrandingProps, HeroActionButton, HeroDesktopHomeOnboarding, HeroDesktopHomeOnboardingSkeleton, HeroDesktopHomeWithBalance, HeroDesktopHomeWithBalanceSkeleton, HeroDesktopMain, HeroDesktopMainSkeleton, HeroDesktopSecondary, HeroDesktopSecondarySkeleton, HeroMobileHomeTitle, HeroMobileHomeTitleSkeleton, HeroMobileHomeTotalAssets, HeroMobileHomeTotalAssetsSkeleton, HeroMobileMain, HeroMobileMainSkeleton, HeroMobileSecondary, HeroMobileSecondarySkeleton, HeroMobileTransaction, HomeBanner, type HomeBannerLayout, type HomeBannerProps, HomeExploreDeriv, type HomeExploreDerivLayout, type HomeExploreDerivProps, HomeHighlightCard, type HomeHighlightCardProps, HomeHighlights, type HomeHighlightsProps, HoverCard, HoverCardContent, HoverCardTrigger, ICON_NAMES, Icon, type IconName, type IconProps, type IconQuillSize, IconSizeContext, type IconWeight, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, KbdGroup, Label, Link, ListItem, ListItemActions, ListItemContent, ListItemDescription, ListItemFlag, ListItemFooter, ListItemGroup, ListItemHeader, ListItemIcon, ListItemMedia, ListItemSeparator, ListItemTitle, LoadingSpinner, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavDesktopSidebar, type NavDesktopSidebarItemId, NavMobileBottomBar, type NavMobileBottomBarItemId, Navbar, type NavbarItemId, NotificationBanner, type NotificationBannerProps, NotificationDivider, NotificationItem, type NotificationItemProps, type NotificationVariant, Pagination, PaginationBullets, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PhoneInput, type PhoneInputProps, type PhoneInputStatus, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupField, RadioGroupItem, Referral, type ReferralLayout, type ReferralMetric, type ReferralProps, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SearchField, Section, SectionMessage, SectionMessageDescription, SectionMessageIcon, SectionMessageTitle, type SectionProps, type SectionTag, type SectionTitleSize, SegmentedControl, SegmentedControlContent, SegmentedControlList, SegmentedControlTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Snackbar, SocialButton, type SocialButtonSize, type SocialButtonVariant, type SocialProvider, Spinner, Stepper, type StepperProps, Switch, Tab, TabContent, TabList, TabTrigger, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tag, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TradingAccountCard, type TradingAccountCardLayout, type TradingAccountCardProps, type TradingAccountCardType, TradingActionButtonsPrimary, TradingActionButtonsPrimarySkeleton, type TradingActionButtonsProps, TradingActionButtonsSecondary, TradingActionButtonsSecondarySkeleton, TradingEmpty, type TradingEmptyProps, TradingEmptySkeleton, type TransactionType, buttonVariants, cardVariants, chipVariants, cn, codeInputSlotVariants, iconAvailableWeights, inputGroupVariants, inputOTPSlotVariants, inputWrapperVariants as inputVariants, linkVariants, progressVariants, searchFieldVariants, segmentedControlListVariants, socialButtonVariants, tabListVariants, tagVariants, textareaWrapperVariants as textareaVariants, toggleVariants, useComboboxAnchor, useDirection, useFormField, useIsMobile, useSidebar };
|
package/dist/index.d.ts
CHANGED
|
@@ -333,7 +333,7 @@ declare function AvatarGroup({ className, ...props }: React$1.ComponentProps<"di
|
|
|
333
333
|
declare function AvatarGroupCount({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
|
|
334
334
|
|
|
335
335
|
declare const tagVariants: (props?: ({
|
|
336
|
-
variant?: "fill-neutral" | "fill-red" | "fill-yellow" | "fill-green" | "fill-blue" | "outline-neutral" | "outline-red" | "outline-yellow" | "outline-green" | "outline-blue" | null | undefined;
|
|
336
|
+
variant?: "fill-neutral" | "fill-red" | "fill-yellow" | "fill-green" | "fill-blue" | "fill-emerald" | "outline-neutral" | "outline-red" | "outline-yellow" | "outline-green" | "outline-blue" | null | undefined;
|
|
337
337
|
size?: "sm" | "md" | "2xs" | null | undefined;
|
|
338
338
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
339
339
|
declare function Tag({ className, variant, size, asChild, children, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof tagVariants> & {
|
|
@@ -381,12 +381,24 @@ declare function BreadcrumbEllipsis({ className, ...props }: React$1.ComponentPr
|
|
|
381
381
|
|
|
382
382
|
declare const buttonVariants: (props?: ({
|
|
383
383
|
variant?: "primary" | "secondary" | "tertiary" | "ghost" | null | undefined;
|
|
384
|
-
size?: "sm" | "md" | "lg" | "xs" | "icon" | "icon-lg" | "icon-md" | "icon-sm" | "icon-xs" | null | undefined;
|
|
384
|
+
size?: "sm" | "md" | "lg" | "xs" | "icon" | "xl" | "icon-xl" | "icon-lg" | "icon-md" | "icon-sm" | "icon-xs" | null | undefined;
|
|
385
385
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
386
386
|
declare function Button({ className, variant, size, asChild, loading, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
|
|
387
387
|
asChild?: boolean;
|
|
388
388
|
loading?: boolean;
|
|
389
389
|
}): react_jsx_runtime.JSX.Element;
|
|
390
|
+
declare const socialButtonVariants: (props?: ({
|
|
391
|
+
variant?: "primary" | "secondary" | null | undefined;
|
|
392
|
+
size?: "md" | "lg" | "xl" | null | undefined;
|
|
393
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
394
|
+
type SocialProvider = "google" | "apple" | "facebook" | "x";
|
|
395
|
+
type SocialButtonSize = "md" | "lg" | "xl";
|
|
396
|
+
type SocialButtonVariant = "primary" | "secondary";
|
|
397
|
+
declare function SocialButton({ className, provider, variant, size, asChild, loading, children, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof socialButtonVariants> & {
|
|
398
|
+
provider: SocialProvider;
|
|
399
|
+
asChild?: boolean;
|
|
400
|
+
loading?: boolean;
|
|
401
|
+
}): react_jsx_runtime.JSX.Element;
|
|
390
402
|
|
|
391
403
|
declare const chipVariants: (props?: ({
|
|
392
404
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
@@ -720,6 +732,62 @@ declare function InputGroupText({ className, ...props }: React$1.ComponentProps<
|
|
|
720
732
|
declare function InputGroupInput({ className, ...props }: React$1.ComponentProps<"input">): react_jsx_runtime.JSX.Element;
|
|
721
733
|
declare function InputGroupTextarea({ className, ...props }: React$1.ComponentProps<"textarea">): react_jsx_runtime.JSX.Element;
|
|
722
734
|
|
|
735
|
+
interface Country {
|
|
736
|
+
name: string;
|
|
737
|
+
iso2: string;
|
|
738
|
+
dialCode: string;
|
|
739
|
+
/** Pascal-case key used to look up Flag{key}Icon from @deriv/quill-icons/Flags */
|
|
740
|
+
flagKey: string;
|
|
741
|
+
}
|
|
742
|
+
declare const COUNTRIES: Country[];
|
|
743
|
+
declare const DEFAULT_COUNTRY: Country;
|
|
744
|
+
|
|
745
|
+
type PhoneInputStatus = "default" | "success" | "error";
|
|
746
|
+
interface PhoneInputProps extends Omit<React$1.ComponentProps<"input">, "value" | "defaultValue" | "onChange"> {
|
|
747
|
+
/** External label rendered above the field (only when `floatingLabel` is false). */
|
|
748
|
+
label?: string;
|
|
749
|
+
/** Floating caption shown inside the textfield half when `floatingLabel` is true. */
|
|
750
|
+
fieldLabel?: string;
|
|
751
|
+
/** Controlled dial code, e.g. "+376". */
|
|
752
|
+
dialCode?: string;
|
|
753
|
+
/** Uncontrolled initial dial code. Defaults to Andorra (+376). */
|
|
754
|
+
defaultDialCode?: string;
|
|
755
|
+
onDialCodeChange?: (dialCode: string, country: Country) => void;
|
|
756
|
+
helperText?: string;
|
|
757
|
+
status?: PhoneInputStatus;
|
|
758
|
+
/** Phone number value (passed to the inner input). */
|
|
759
|
+
value?: string;
|
|
760
|
+
defaultValue?: string;
|
|
761
|
+
onChange?: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
|
|
762
|
+
/** When true, renders the floating-label layout (Code / fieldLabel captions inside both halves). */
|
|
763
|
+
floatingLabel?: boolean;
|
|
764
|
+
/** When true, the numeric-only filter is lifted so non-digit characters pass
|
|
765
|
+
* through untouched. Used by EmailOrPhoneInput so a typed letter/symbol can
|
|
766
|
+
* bubble up and morph the field back to email mode. */
|
|
767
|
+
allowNonNumeric?: boolean;
|
|
768
|
+
}
|
|
769
|
+
declare const PhoneInput: React$1.ForwardRefExoticComponent<Omit<PhoneInputProps, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
|
|
770
|
+
|
|
771
|
+
interface EmailOrPhoneInputProps {
|
|
772
|
+
/** Label text — "Email/Phone number". */
|
|
773
|
+
label?: string;
|
|
774
|
+
/** "floating" floats the label inside the field; "external" renders it above. */
|
|
775
|
+
labelVariant?: "floating" | "external";
|
|
776
|
+
/** Placeholder shown in email mode for the external variant. */
|
|
777
|
+
placeholder?: string;
|
|
778
|
+
/** Initial dial code once the field morphs to phone mode. Defaults to +376 (AD). */
|
|
779
|
+
defaultDialCode?: string;
|
|
780
|
+
status?: PhoneInputStatus;
|
|
781
|
+
helperText?: string;
|
|
782
|
+
disabled?: boolean;
|
|
783
|
+
defaultValue?: string;
|
|
784
|
+
onValueChange?: (value: string, mode: "email" | "phone", dialCode?: string) => void;
|
|
785
|
+
className?: string;
|
|
786
|
+
/** Shows an emerald "Last used" badge clipped above the top-right corner of the field. */
|
|
787
|
+
showLastUsed?: boolean;
|
|
788
|
+
}
|
|
789
|
+
declare function EmailOrPhoneInput({ label, labelVariant, placeholder, defaultDialCode, status, helperText, disabled, defaultValue, onValueChange, className, showLastUsed, }: EmailOrPhoneInputProps): react_jsx_runtime.JSX.Element;
|
|
790
|
+
|
|
723
791
|
declare const searchFieldVariants: (props?: ({
|
|
724
792
|
variant?: "fill" | "outline" | null | undefined;
|
|
725
793
|
size?: "sm" | "md" | null | undefined;
|
|
@@ -1486,4 +1554,36 @@ interface TradingEmptyProps {
|
|
|
1486
1554
|
declare function TradingEmptySkeleton(): react_jsx_runtime.JSX.Element;
|
|
1487
1555
|
declare function TradingEmpty({ image, imageSrc, title, description, }: TradingEmptyProps): react_jsx_runtime.JSX.Element;
|
|
1488
1556
|
|
|
1489
|
-
|
|
1557
|
+
type ReferralLayout = "mobile" | "desktop";
|
|
1558
|
+
interface ReferralMetric {
|
|
1559
|
+
/** Stat value, e.g. "0" or "0.00". */
|
|
1560
|
+
value: string;
|
|
1561
|
+
/** Stat label below the value, e.g. "Sign-ups". */
|
|
1562
|
+
label: string;
|
|
1563
|
+
}
|
|
1564
|
+
interface ReferralProps {
|
|
1565
|
+
/** Force a layout. Omit (default) = responsive: mobile < md, desktop ≥ md. */
|
|
1566
|
+
layout?: ReferralLayout;
|
|
1567
|
+
/** Gift illustration src. Omit to show a neutral placeholder. */
|
|
1568
|
+
assetSrc?: string;
|
|
1569
|
+
/** Heading. Use "\n" to control line breaks. */
|
|
1570
|
+
title?: string;
|
|
1571
|
+
/** Share-link card title. */
|
|
1572
|
+
shareTitle?: string;
|
|
1573
|
+
/** Referral URL shown under the share title. */
|
|
1574
|
+
referralLink?: string;
|
|
1575
|
+
/** Copy button label. */
|
|
1576
|
+
copyLabel?: string;
|
|
1577
|
+
/** Copy button handler. */
|
|
1578
|
+
onCopy?: () => void;
|
|
1579
|
+
/** Metrics row. Omit to use built-in demo metrics. */
|
|
1580
|
+
metrics?: ReferralMetric[];
|
|
1581
|
+
/** How-to-earn card title. */
|
|
1582
|
+
howToTitle?: string;
|
|
1583
|
+
/** How-to-earn steps. Omit to use built-in demo steps. */
|
|
1584
|
+
steps?: string[];
|
|
1585
|
+
className?: string;
|
|
1586
|
+
}
|
|
1587
|
+
declare function Referral({ layout, assetSrc, title, shareTitle, referralLink, copyLabel, onCopy, metrics, howToTitle, steps, className, }: ReferralProps): react_jsx_runtime.JSX.Element;
|
|
1588
|
+
|
|
1589
|
+
export { Accordion, AccordionContent, AccordionItem, type AccordionSize, AccordionTrigger, type AccordionVariant, AccountActivatedCard, type AccountActivatedCardProps, type AccountActivatedCardState, type ActionButtonState, type ActionButtonSurface, AspectRatio, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BadgeDot, BannerCard, type BannerCardProps, type BannerItem, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, COUNTRIES, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CheckboxField, Chip, CodeInput, CodeInputGroup, CodeInputSeparator, CodeInputSlot, Collapsible, CollapsibleContent, CollapsibleItem, CollapsibleTrigger, Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, type Country, DEFAULT_COUNTRY, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmailOrPhoneInput, type EmailOrPhoneInputProps, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, type ExploreItem, type FeedbackSuccessAssetShape, type FeedbackSuccessLayout, FeedbackSuccessScreen, type FeedbackSuccessScreenProps, type FeedbackTradeAccount, FeedbackTradeWithAccounts, type FeedbackTradeWithAccountsProps, type FeedbackTransferEndpoint, FeedbackTransferSuggestion, type FeedbackTransferSuggestionProps, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, HeaderApp, type HeaderAppAction, type HeaderAppCenter, HeaderAppHome, type HeaderAppHomeProps, type HeaderAppLayout, type HeaderAppProps, type HeaderAppState, type HeaderAppTab, HeaderBranding, type HeaderBrandingProps, HeroActionButton, HeroDesktopHomeOnboarding, HeroDesktopHomeOnboardingSkeleton, HeroDesktopHomeWithBalance, HeroDesktopHomeWithBalanceSkeleton, HeroDesktopMain, HeroDesktopMainSkeleton, HeroDesktopSecondary, HeroDesktopSecondarySkeleton, HeroMobileHomeTitle, HeroMobileHomeTitleSkeleton, HeroMobileHomeTotalAssets, HeroMobileHomeTotalAssetsSkeleton, HeroMobileMain, HeroMobileMainSkeleton, HeroMobileSecondary, HeroMobileSecondarySkeleton, HeroMobileTransaction, HomeBanner, type HomeBannerLayout, type HomeBannerProps, HomeExploreDeriv, type HomeExploreDerivLayout, type HomeExploreDerivProps, HomeHighlightCard, type HomeHighlightCardProps, HomeHighlights, type HomeHighlightsProps, HoverCard, HoverCardContent, HoverCardTrigger, ICON_NAMES, Icon, type IconName, type IconProps, type IconQuillSize, IconSizeContext, type IconWeight, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, KbdGroup, Label, Link, ListItem, ListItemActions, ListItemContent, ListItemDescription, ListItemFlag, ListItemFooter, ListItemGroup, ListItemHeader, ListItemIcon, ListItemMedia, ListItemSeparator, ListItemTitle, LoadingSpinner, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavDesktopSidebar, type NavDesktopSidebarItemId, NavMobileBottomBar, type NavMobileBottomBarItemId, Navbar, type NavbarItemId, NotificationBanner, type NotificationBannerProps, NotificationDivider, NotificationItem, type NotificationItemProps, type NotificationVariant, Pagination, PaginationBullets, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PhoneInput, type PhoneInputProps, type PhoneInputStatus, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupField, RadioGroupItem, Referral, type ReferralLayout, type ReferralMetric, type ReferralProps, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, SearchField, Section, SectionMessage, SectionMessageDescription, SectionMessageIcon, SectionMessageTitle, type SectionProps, type SectionTag, type SectionTitleSize, SegmentedControl, SegmentedControlContent, SegmentedControlList, SegmentedControlTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Snackbar, SocialButton, type SocialButtonSize, type SocialButtonVariant, type SocialProvider, Spinner, Stepper, type StepperProps, Switch, Tab, TabContent, TabList, TabTrigger, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tag, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TradingAccountCard, type TradingAccountCardLayout, type TradingAccountCardProps, type TradingAccountCardType, TradingActionButtonsPrimary, TradingActionButtonsPrimarySkeleton, type TradingActionButtonsProps, TradingActionButtonsSecondary, TradingActionButtonsSecondarySkeleton, TradingEmpty, type TradingEmptyProps, TradingEmptySkeleton, type TransactionType, buttonVariants, cardVariants, chipVariants, cn, codeInputSlotVariants, iconAvailableWeights, inputGroupVariants, inputOTPSlotVariants, inputWrapperVariants as inputVariants, linkVariants, progressVariants, searchFieldVariants, segmentedControlListVariants, socialButtonVariants, tabListVariants, tagVariants, textareaWrapperVariants as textareaVariants, toggleVariants, useComboboxAnchor, useDirection, useFormField, useIsMobile, useSidebar };
|