@deriv-ds/design-intelligence-layer 0.4.6 → 0.5.0
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 -0
- package/dist/index.cjs +8159 -4505
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +478 -155
- package/dist/index.d.ts +478 -155
- package/dist/index.js +6991 -2804
- package/dist/index.js.map +1 -1
- package/guides/design-principles/quill-design-principles.md +138 -0
- package/guides/design-system-guide/deriv-design-intelligence-guide.md +30 -2
- package/guides/design-system-guide/icon-reference.md +24 -24
- package/package.json +10 -11
- package/public/assets/icon-cfds.png +0 -0
- package/public/assets/icon-more.png +0 -0
- package/public/assets/icon-setup-profile.png +0 -0
- package/public/assets/logo-deriv-x.png +0 -0
- package/public/assets/no-transaction.png +0 -0
- package/src/styles.css +35 -0
- package/guides/design-principles/trading-game-design-principles.md +0 -98
package/dist/index.d.cts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React$1 from 'react';
|
|
3
3
|
import React__default from 'react';
|
|
4
|
-
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
5
4
|
import { Accordion as Accordion$1, AspectRatio as AspectRatio$1, Avatar as Avatar$1, Checkbox as Checkbox$1, Separator as Separator$1, Collapsible as Collapsible$1, Dialog as Dialog$1, ContextMenu as ContextMenu$1, Direction, DropdownMenu as DropdownMenu$1, Label as Label$1, Slot, HoverCard as HoverCard$1, Popover as Popover$1, Progress as Progress$1, RadioGroup as RadioGroup$1, ScrollArea as ScrollArea$1, Select as Select$1, Tooltip as Tooltip$1, Slider as Slider$1, Switch as Switch$1, Tabs, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1 } from 'radix-ui';
|
|
6
5
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
7
6
|
import { VariantProps } from 'class-variance-authority';
|
|
@@ -18,159 +17,157 @@ import * as ResizablePrimitive from 'react-resizable-panels';
|
|
|
18
17
|
import { ToasterProps } from 'sonner';
|
|
19
18
|
import { ClassValue } from 'clsx';
|
|
20
19
|
|
|
21
|
-
declare const
|
|
22
|
-
"arrow-down-to-line":
|
|
23
|
-
"arrow-left":
|
|
24
|
-
"arrow-right":
|
|
25
|
-
"arrow-right-arrow-left":
|
|
26
|
-
"arrows-left-right":
|
|
27
|
-
"arrow-
|
|
28
|
-
"arrow-
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"arrow-up-
|
|
32
|
-
|
|
33
|
-
"
|
|
34
|
-
|
|
35
|
-
"
|
|
36
|
-
|
|
37
|
-
"chart-
|
|
38
|
-
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
|
|
47
|
-
"
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
"
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
"
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
"
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
"
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
"
|
|
88
|
-
"
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
"
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
"
|
|
99
|
-
"
|
|
100
|
-
"
|
|
101
|
-
"circle-
|
|
102
|
-
"deal-cancellation":
|
|
103
|
-
"deal-protection":
|
|
104
|
-
"deriv-p2p":
|
|
105
|
-
"fiat-offramp":
|
|
106
|
-
"fiat-onramp":
|
|
107
|
-
"field-password":
|
|
108
|
-
"
|
|
109
|
-
"
|
|
110
|
-
"
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
"
|
|
114
|
-
"
|
|
115
|
-
|
|
116
|
-
"
|
|
117
|
-
"
|
|
118
|
-
|
|
119
|
-
"
|
|
120
|
-
"
|
|
121
|
-
"
|
|
122
|
-
"
|
|
123
|
-
"
|
|
124
|
-
"
|
|
125
|
-
|
|
126
|
-
"
|
|
127
|
-
"
|
|
128
|
-
|
|
129
|
-
"
|
|
130
|
-
"
|
|
131
|
-
"
|
|
132
|
-
"
|
|
133
|
-
"
|
|
134
|
-
"
|
|
135
|
-
"
|
|
136
|
-
"
|
|
137
|
-
"
|
|
138
|
-
"
|
|
139
|
-
"
|
|
140
|
-
"
|
|
141
|
-
"
|
|
142
|
-
"
|
|
143
|
-
"
|
|
144
|
-
"
|
|
145
|
-
"
|
|
146
|
-
"
|
|
147
|
-
"
|
|
148
|
-
"
|
|
149
|
-
"
|
|
150
|
-
"
|
|
151
|
-
"
|
|
152
|
-
"
|
|
20
|
+
declare const _iconKeys: {
|
|
21
|
+
readonly "arrow-down-to-line": 1;
|
|
22
|
+
readonly "arrow-left": 1;
|
|
23
|
+
readonly "arrow-right": 1;
|
|
24
|
+
readonly "arrow-right-arrow-left": 1;
|
|
25
|
+
readonly "arrows-left-right": 1;
|
|
26
|
+
readonly "arrow-up-right": 1;
|
|
27
|
+
readonly "arrow-up-right-from-square": 1;
|
|
28
|
+
readonly "rotate-right": 1;
|
|
29
|
+
readonly "clock-rotate-left": 1;
|
|
30
|
+
readonly "arrow-up-from-line": 1;
|
|
31
|
+
readonly "chevron-down": 1;
|
|
32
|
+
readonly "chevron-left": 1;
|
|
33
|
+
readonly "chevron-right": 1;
|
|
34
|
+
readonly "chevron-up": 1;
|
|
35
|
+
readonly bell: 1;
|
|
36
|
+
readonly "chart-bar": 1;
|
|
37
|
+
readonly "chart-candlestick": 1;
|
|
38
|
+
readonly "chart-line": 1;
|
|
39
|
+
readonly "chart-tradingview": 1;
|
|
40
|
+
readonly "chart-trend-down": 1;
|
|
41
|
+
readonly "chart-trend-still": 1;
|
|
42
|
+
readonly "chart-trend-up": 1;
|
|
43
|
+
readonly "arrow-trend-down": 1;
|
|
44
|
+
readonly "arrow-trend-up": 1;
|
|
45
|
+
readonly ohlc: 1;
|
|
46
|
+
readonly "chart-line-up-down-clock": 1;
|
|
47
|
+
readonly "chart-line-clock": 1;
|
|
48
|
+
readonly circle: 1;
|
|
49
|
+
readonly "circle-check": 1;
|
|
50
|
+
readonly "circle-exclamation": 1;
|
|
51
|
+
readonly "circle-info": 1;
|
|
52
|
+
readonly "circle-user-slash": 1;
|
|
53
|
+
readonly copy: 1;
|
|
54
|
+
readonly "dollar-sign": 1;
|
|
55
|
+
readonly ellipsis: 1;
|
|
56
|
+
readonly envelope: 1;
|
|
57
|
+
readonly "envelope-open": 1;
|
|
58
|
+
readonly eye: 1;
|
|
59
|
+
readonly "eye-slash": 1;
|
|
60
|
+
readonly "file-lines": 1;
|
|
61
|
+
readonly "file-xmark": 1;
|
|
62
|
+
readonly fingerprint: 1;
|
|
63
|
+
readonly gear: 1;
|
|
64
|
+
readonly globe: 1;
|
|
65
|
+
readonly "grip-vertical": 1;
|
|
66
|
+
readonly house: 1;
|
|
67
|
+
readonly "house-blank": 1;
|
|
68
|
+
readonly image: 1;
|
|
69
|
+
readonly inbox: 1;
|
|
70
|
+
readonly "magnifying-glass": 1;
|
|
71
|
+
readonly minus: 1;
|
|
72
|
+
readonly moon: 1;
|
|
73
|
+
readonly phone: 1;
|
|
74
|
+
readonly plus: 1;
|
|
75
|
+
readonly "right-from-bracket": 1;
|
|
76
|
+
readonly sparkles: 1;
|
|
77
|
+
readonly spinner: 1;
|
|
78
|
+
readonly square: 1;
|
|
79
|
+
readonly "square-check": 1;
|
|
80
|
+
readonly "square-minus": 1;
|
|
81
|
+
readonly star: 1;
|
|
82
|
+
readonly sun: 1;
|
|
83
|
+
readonly "table-cells-large": 1;
|
|
84
|
+
readonly "table-columns": 1;
|
|
85
|
+
readonly trash: 1;
|
|
86
|
+
readonly "trash-can": 1;
|
|
87
|
+
readonly "triangle-exclamation": 1;
|
|
88
|
+
readonly user: 1;
|
|
89
|
+
readonly wallet: 1;
|
|
90
|
+
readonly xmark: 1;
|
|
91
|
+
readonly check: 1;
|
|
92
|
+
readonly options: 1;
|
|
93
|
+
readonly "crosshairs-slash": 1;
|
|
94
|
+
readonly "book-open": 1;
|
|
95
|
+
readonly calculator: 1;
|
|
96
|
+
readonly deriv: 1;
|
|
97
|
+
readonly "book-circle-question": 1;
|
|
98
|
+
readonly "book-open-cover-circle-question": 1;
|
|
99
|
+
readonly "box-archive-circle-arrow-down": 1;
|
|
100
|
+
readonly "box-archive-circle-arrow-up": 1;
|
|
101
|
+
readonly "deal-cancellation": 1;
|
|
102
|
+
readonly "deal-protection": 1;
|
|
103
|
+
readonly "deriv-p2p": 1;
|
|
104
|
+
readonly "fiat-offramp": 1;
|
|
105
|
+
readonly "fiat-onramp": 1;
|
|
106
|
+
readonly "field-password": 1;
|
|
107
|
+
readonly "hand-gesture-swipe-left-right": 1;
|
|
108
|
+
readonly "hand-gesture-tap-left": 1;
|
|
109
|
+
readonly "hand-gesture-tap-right": 1;
|
|
110
|
+
readonly "horizontal-rule-dashed": 1;
|
|
111
|
+
readonly "lock-pattern": 1;
|
|
112
|
+
readonly "mobile-notch-rotate": 1;
|
|
113
|
+
readonly "page-circle-arrow-right": 1;
|
|
114
|
+
readonly passkey: 1;
|
|
115
|
+
readonly "playback-speed": 1;
|
|
116
|
+
readonly "puzzles-piece-two": 1;
|
|
117
|
+
readonly quill: 1;
|
|
118
|
+
readonly "rotate-device": 1;
|
|
119
|
+
readonly "stop-loss": 1;
|
|
120
|
+
readonly "take-profit": 1;
|
|
121
|
+
readonly "user-tie-circle-dollar": 1;
|
|
122
|
+
readonly "wallet-circle-minus": 1;
|
|
123
|
+
readonly "wallet-circle-plus": 1;
|
|
124
|
+
readonly "wallet-signal": 1;
|
|
125
|
+
readonly "user-circle-arrow-right": 1;
|
|
126
|
+
readonly "user-circle-arrow-up": 1;
|
|
127
|
+
readonly "calendar-circle-arrow-left": 1;
|
|
128
|
+
readonly "calendar-circle-arrow-right": 1;
|
|
129
|
+
readonly "file-lines-magnifying-glass": 1;
|
|
130
|
+
readonly "handshake-lock": 1;
|
|
131
|
+
readonly "handshake-shield": 1;
|
|
132
|
+
readonly "memo-shield": 1;
|
|
133
|
+
readonly "pen-field-circle-xmark": 1;
|
|
134
|
+
readonly "pen-field-lock": 1;
|
|
135
|
+
readonly "pen-field-slash": 1;
|
|
136
|
+
readonly "rectangle-history-circle-dollar": 1;
|
|
137
|
+
readonly "shield-circle-check": 1;
|
|
138
|
+
readonly "shield-halved-circle-minus": 1;
|
|
139
|
+
readonly "shield-halved-lock": 1;
|
|
140
|
+
readonly "shield-lock": 1;
|
|
141
|
+
readonly "user-circle-dollar": 1;
|
|
142
|
+
readonly "user-large-circle-dollar": 1;
|
|
143
|
+
readonly "users-line-circle-dollar": 1;
|
|
144
|
+
readonly "users-rectangle-circle-dollar": 1;
|
|
145
|
+
readonly "brand-harmony-os": 1;
|
|
146
|
+
readonly "brand-huawei": 1;
|
|
147
|
+
readonly "brand-huawei-app-gallery": 1;
|
|
148
|
+
readonly "brand-ios": 1;
|
|
149
|
+
readonly "brand-ipados": 1;
|
|
150
|
+
readonly "brand-macos": 1;
|
|
151
|
+
readonly "brand-microsoft-store": 1;
|
|
152
|
+
readonly "brand-trustpilot": 1;
|
|
153
153
|
};
|
|
154
|
-
type IconName = keyof typeof
|
|
154
|
+
type IconName = keyof typeof _iconKeys;
|
|
155
155
|
type IconWeight = "regular" | "bold" | "fill";
|
|
156
|
+
type IconQuillSize = "sm" | "md" | "lg";
|
|
157
|
+
/** Context — set by Chip/Tag to auto-select the correct Quill size variant for children. */
|
|
158
|
+
declare const IconSizeContext: React$1.Context<IconQuillSize>;
|
|
156
159
|
interface IconProps {
|
|
157
160
|
name: IconName;
|
|
158
|
-
/**
|
|
159
|
-
* Weight on the density ramp:
|
|
160
|
-
* - "regular" → thin outline (pro-light)
|
|
161
|
-
* - "bold" → medium outline (pro-regular) — default
|
|
162
|
-
* - "fill" → filled glyph (pro-solid)
|
|
163
|
-
*
|
|
164
|
-
* If the requested weight isn't mapped for this icon, falls back to bold.
|
|
165
|
-
*/
|
|
166
161
|
weight?: IconWeight;
|
|
162
|
+
/** Quill size variant (sm=14×22, md=16×24, lg=20×30). Overrides IconSizeContext. */
|
|
163
|
+
quillSize?: IconQuillSize;
|
|
167
164
|
className?: string;
|
|
168
165
|
style?: React$1.CSSProperties;
|
|
169
166
|
"aria-hidden"?: boolean | "true" | "false";
|
|
170
167
|
"aria-label"?: string;
|
|
171
168
|
title?: string;
|
|
172
169
|
}
|
|
173
|
-
declare function Icon({ name, weight, className, style, ...rest }: IconProps): react_jsx_runtime.JSX.Element;
|
|
170
|
+
declare function Icon({ name, weight, quillSize, className, style, ...rest }: IconProps): react_jsx_runtime.JSX.Element | null;
|
|
174
171
|
/** Every icon name in the system, alphabetical. */
|
|
175
172
|
declare const ICON_NAMES: IconName[];
|
|
176
173
|
/** Which weights are mapped for a given icon — used by the library page. */
|
|
@@ -246,7 +243,7 @@ declare function AccordionItem({ className, ...props }: React$1.ComponentProps<t
|
|
|
246
243
|
declare function AccordionTrigger({ className, children, icon, title, subtitle, titleBold, ...props }: React$1.ComponentProps<typeof Accordion$1.Trigger> & {
|
|
247
244
|
/**
|
|
248
245
|
* Optional leading icon (default layout only).
|
|
249
|
-
* Pass any React node — typically a 24 × 24 icon
|
|
246
|
+
* Pass any React node — typically a 24 × 24 icon.
|
|
250
247
|
*/
|
|
251
248
|
icon?: React$1.ReactNode;
|
|
252
249
|
/**
|
|
@@ -316,7 +313,7 @@ declare function NotificationDivider({ className }: {
|
|
|
316
313
|
}): react_jsx_runtime.JSX.Element;
|
|
317
314
|
|
|
318
315
|
declare const sectionMessageVariants: (props?: ({
|
|
319
|
-
variant?: "
|
|
316
|
+
variant?: "information" | "success" | "warning" | "danger" | "default" | "info" | "error" | null | undefined;
|
|
320
317
|
size?: "sm" | "md" | null | undefined;
|
|
321
318
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
322
319
|
declare function SectionMessage({ className, variant, size, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof sectionMessageVariants>): react_jsx_runtime.JSX.Element;
|
|
@@ -337,9 +334,9 @@ declare function AvatarGroupCount({ className, ...props }: React$1.ComponentProp
|
|
|
337
334
|
|
|
338
335
|
declare const tagVariants: (props?: ({
|
|
339
336
|
variant?: "fill-neutral" | "fill-red" | "fill-yellow" | "fill-green" | "fill-blue" | "outline-neutral" | "outline-red" | "outline-yellow" | "outline-green" | "outline-blue" | null | undefined;
|
|
340
|
-
size?: "sm" | "md" | null | undefined;
|
|
337
|
+
size?: "sm" | "md" | "2xs" | null | undefined;
|
|
341
338
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
342
|
-
declare function Tag({ className, variant, size, asChild, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof tagVariants> & {
|
|
339
|
+
declare function Tag({ className, variant, size, asChild, children, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof tagVariants> & {
|
|
343
340
|
asChild?: boolean;
|
|
344
341
|
}): react_jsx_runtime.JSX.Element;
|
|
345
342
|
|
|
@@ -383,8 +380,8 @@ declare function BreadcrumbSeparator({ children, className, ...props }: React$1.
|
|
|
383
380
|
declare function BreadcrumbEllipsis({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
|
|
384
381
|
|
|
385
382
|
declare const buttonVariants: (props?: ({
|
|
386
|
-
variant?: "
|
|
387
|
-
size?: "
|
|
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;
|
|
388
385
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
389
386
|
declare function Button({ className, variant, size, asChild, loading, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
|
|
390
387
|
asChild?: boolean;
|
|
@@ -394,7 +391,7 @@ declare function Button({ className, variant, size, asChild, loading, ...props }
|
|
|
394
391
|
declare const chipVariants: (props?: ({
|
|
395
392
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
396
393
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
397
|
-
declare function Chip({ className, size, selected, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof chipVariants> & {
|
|
394
|
+
declare function Chip({ className, size, selected, children, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof chipVariants> & {
|
|
398
395
|
selected?: boolean;
|
|
399
396
|
}): react_jsx_runtime.JSX.Element;
|
|
400
397
|
|
|
@@ -475,7 +472,7 @@ type CheckboxFieldProps = Omit<React$1.ComponentProps<typeof Checkbox$1.Root>, "
|
|
|
475
472
|
size?: "sm" | "md";
|
|
476
473
|
/** Label text rendered next to the checkbox. */
|
|
477
474
|
label?: React$1.ReactNode;
|
|
478
|
-
/** When `true`, renders
|
|
475
|
+
/** When `true`, renders an info icon after the label text. */
|
|
479
476
|
info?: boolean;
|
|
480
477
|
};
|
|
481
478
|
declare function CheckboxField({ id, label, info, size, disabled, className, ...props }: CheckboxFieldProps): react_jsx_runtime.JSX.Element;
|
|
@@ -716,7 +713,7 @@ declare const inputGroupAddonVariants: (props?: ({
|
|
|
716
713
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
717
714
|
declare function InputGroupAddon({ className, align, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): react_jsx_runtime.JSX.Element;
|
|
718
715
|
declare const inputGroupButtonVariants: (props?: ({
|
|
719
|
-
size?: "
|
|
716
|
+
size?: "sm" | "xs" | "icon-sm" | "icon-xs" | null | undefined;
|
|
720
717
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
721
718
|
declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React$1.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>): react_jsx_runtime.JSX.Element;
|
|
722
719
|
declare function InputGroupText({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
|
|
@@ -818,7 +815,7 @@ declare function PopoverDescription({ className, ...props }: React$1.ComponentPr
|
|
|
818
815
|
|
|
819
816
|
declare const progressVariants: (props?: ({
|
|
820
817
|
size?: "sm" | "md" | null | undefined;
|
|
821
|
-
variant?: "
|
|
818
|
+
variant?: "normal" | "inverse" | null | undefined;
|
|
822
819
|
color?: "red" | "yellow" | "green" | "blue" | "default" | null | undefined;
|
|
823
820
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
824
821
|
declare function Progress({ className, value, size, variant, color, ...props }: React$1.ComponentProps<typeof Progress$1.Root> & VariantProps<typeof progressVariants>): react_jsx_runtime.JSX.Element;
|
|
@@ -834,7 +831,7 @@ type RadioGroupFieldProps = React$1.ComponentProps<typeof RadioGroup$1.Item> & {
|
|
|
834
831
|
size?: "sm" | "md";
|
|
835
832
|
/** Label text rendered next to the radio button. */
|
|
836
833
|
label?: React$1.ReactNode;
|
|
837
|
-
/** When `true`, renders
|
|
834
|
+
/** When `true`, renders an info icon after the label text. */
|
|
838
835
|
info?: boolean;
|
|
839
836
|
};
|
|
840
837
|
declare function RadioGroupField({ id, label, info, size, disabled, className, ...props }: RadioGroupFieldProps): react_jsx_runtime.JSX.Element;
|
|
@@ -1163,4 +1160,330 @@ declare function Navbar({ activeId, badges, onNavChange, }: {
|
|
|
1163
1160
|
onNavChange?: (id: NavbarItemId) => void;
|
|
1164
1161
|
}): react_jsx_runtime.JSX.Element;
|
|
1165
1162
|
|
|
1166
|
-
|
|
1163
|
+
type SectionTitleSize = "titleLg" | "titleMd" | "titleSm" | "titleCaption" | "loading";
|
|
1164
|
+
interface SectionTag {
|
|
1165
|
+
label: string;
|
|
1166
|
+
/** Show a leading icon inside the tag. */
|
|
1167
|
+
showIcon?: boolean;
|
|
1168
|
+
/** Icon name (defaults to a sparkle) when showIcon is true. */
|
|
1169
|
+
icon?: React$1.ComponentProps<typeof Icon>["name"];
|
|
1170
|
+
}
|
|
1171
|
+
interface SectionProps {
|
|
1172
|
+
/** Section title text. */
|
|
1173
|
+
title?: string;
|
|
1174
|
+
/** Supporting description below the title row. */
|
|
1175
|
+
description?: string;
|
|
1176
|
+
/** Title typography size, or "loading" to render a skeleton title. */
|
|
1177
|
+
titleSize?: SectionTitleSize;
|
|
1178
|
+
/** Eyebrow tag above the title. */
|
|
1179
|
+
showTag?: boolean;
|
|
1180
|
+
tag?: SectionTag;
|
|
1181
|
+
showTitle?: boolean;
|
|
1182
|
+
/** Trailing chevron next to the title (affordance for "see all"). */
|
|
1183
|
+
showChevron?: boolean;
|
|
1184
|
+
/** Click handler for the title row (when it acts as a link). */
|
|
1185
|
+
onTitleClick?: () => void;
|
|
1186
|
+
/** Right-aligned control cluster (button + navigation + compact switcher). */
|
|
1187
|
+
showControlSection?: boolean;
|
|
1188
|
+
/** Grey pill button inside the control cluster. */
|
|
1189
|
+
showButton?: boolean;
|
|
1190
|
+
buttonLabel?: string;
|
|
1191
|
+
onButtonClick?: () => void;
|
|
1192
|
+
/** Grey previous/next chevron control. */
|
|
1193
|
+
showNavigation?: boolean;
|
|
1194
|
+
onPrev?: () => void;
|
|
1195
|
+
onNext?: () => void;
|
|
1196
|
+
/** Compact segmented control inside the control cluster (desktop). */
|
|
1197
|
+
controlSegments?: string[];
|
|
1198
|
+
showDescription?: boolean;
|
|
1199
|
+
/** Full-width segmented control below the description. */
|
|
1200
|
+
showSegmentedControl?: boolean;
|
|
1201
|
+
segments?: string[];
|
|
1202
|
+
value?: string;
|
|
1203
|
+
onValueChange?: (value: string) => void;
|
|
1204
|
+
/** Content rendered in the section's slot. */
|
|
1205
|
+
children?: React$1.ReactNode;
|
|
1206
|
+
className?: string;
|
|
1207
|
+
}
|
|
1208
|
+
declare function Section({ title, description, titleSize, showTag, tag, showTitle, showChevron, onTitleClick, showControlSection, showButton, buttonLabel, onButtonClick, showNavigation, onPrev, onNext, controlSegments, showDescription, showSegmentedControl, segments, value, onValueChange, children, className, }: SectionProps): react_jsx_runtime.JSX.Element;
|
|
1209
|
+
|
|
1210
|
+
type TradingAccountCardLayout = "mobile" | "desktop";
|
|
1211
|
+
type TradingAccountCardType = "loading" | "real" | "demo";
|
|
1212
|
+
interface TradingAccountCardProps {
|
|
1213
|
+
/** Force a layout. Omit (default) = responsive: mobile < md, desktop ≥ md. */
|
|
1214
|
+
layout?: TradingAccountCardLayout;
|
|
1215
|
+
/** Card state. "loading" renders skeletons. */
|
|
1216
|
+
type?: TradingAccountCardType;
|
|
1217
|
+
/** Account name (bold). */
|
|
1218
|
+
subtitle?: string;
|
|
1219
|
+
/** Balance / supporting line below the subtitle. */
|
|
1220
|
+
title?: string;
|
|
1221
|
+
/** Account logo — Quill illustration component or image src. Falls back to a neutral block. */
|
|
1222
|
+
logo?: React$1.ReactNode;
|
|
1223
|
+
/** @deprecated use `logo` instead */
|
|
1224
|
+
logoSrc?: string;
|
|
1225
|
+
/** real only — "Verification required" tag next to the title. */
|
|
1226
|
+
verificationTag?: boolean;
|
|
1227
|
+
/** real only — standalone warning icon next to the title. */
|
|
1228
|
+
showVerificationNeeded?: boolean;
|
|
1229
|
+
/** desktop only — refresh icon next to the subtitle. */
|
|
1230
|
+
showIconRefresh?: boolean;
|
|
1231
|
+
onTrade?: () => void;
|
|
1232
|
+
onTransfer?: () => void;
|
|
1233
|
+
onDetails?: () => void;
|
|
1234
|
+
className?: string;
|
|
1235
|
+
}
|
|
1236
|
+
declare function TradingAccountCard({ layout, className, ...props }: TradingAccountCardProps): react_jsx_runtime.JSX.Element;
|
|
1237
|
+
|
|
1238
|
+
type AccountActivatedCardState = "default" | "hover" | "pressed" | "loading";
|
|
1239
|
+
interface AccountActivatedCardProps {
|
|
1240
|
+
state?: AccountActivatedCardState;
|
|
1241
|
+
/** Account name (e.g. "Standard"). */
|
|
1242
|
+
name?: string;
|
|
1243
|
+
/** Numeric balance string (e.g. "1,000.00"). */
|
|
1244
|
+
balance?: string;
|
|
1245
|
+
/** Currency code shown next to the balance (e.g. "USD"). */
|
|
1246
|
+
currency?: string;
|
|
1247
|
+
/** Account logo — Quill illustration component or React node. Falls back to a neutral block. */
|
|
1248
|
+
logo?: React$1.ReactNode;
|
|
1249
|
+
/** @deprecated use `logo` instead */
|
|
1250
|
+
logoSrc?: string;
|
|
1251
|
+
/** Optional outline tag in the top-right corner. */
|
|
1252
|
+
tag?: string;
|
|
1253
|
+
/** Wire up real hover/active bg transitions (renders as a button). */
|
|
1254
|
+
interactive?: boolean;
|
|
1255
|
+
onClick?: () => void;
|
|
1256
|
+
className?: string;
|
|
1257
|
+
}
|
|
1258
|
+
declare function AccountActivatedCard({ state, name, balance, currency, logo, logoSrc, tag, interactive, onClick, className, }: AccountActivatedCardProps): react_jsx_runtime.JSX.Element;
|
|
1259
|
+
|
|
1260
|
+
type HomeBannerLayout = "mobile" | "desktop";
|
|
1261
|
+
interface BannerItem {
|
|
1262
|
+
id: string;
|
|
1263
|
+
/** Tailwind bg class for the card. Default: rgba(44,154,255,0.08) blue tint. */
|
|
1264
|
+
bgClass?: string;
|
|
1265
|
+
text: string;
|
|
1266
|
+
/** Tailwind text class. Default: text-prominent. */
|
|
1267
|
+
textClass?: string;
|
|
1268
|
+
/** Dismiss button bg + icon colour for this banner's surface. */
|
|
1269
|
+
closeSurface?: "light" | "dark";
|
|
1270
|
+
tag?: {
|
|
1271
|
+
label: string;
|
|
1272
|
+
/** Tailwind bg class. Default: bg-[#0c28f7] sapphire. */
|
|
1273
|
+
bgClass?: string;
|
|
1274
|
+
};
|
|
1275
|
+
/** src for a <video> or <img> in the media slot. */
|
|
1276
|
+
mediaSrc?: string;
|
|
1277
|
+
mediaType?: "video" | "image";
|
|
1278
|
+
}
|
|
1279
|
+
interface HomeBannerProps {
|
|
1280
|
+
items?: BannerItem[];
|
|
1281
|
+
autoplayMs?: number;
|
|
1282
|
+
/** Force a layout. Omit = responsive: mobile < md, desktop ≥ md. */
|
|
1283
|
+
layout?: HomeBannerLayout;
|
|
1284
|
+
className?: string;
|
|
1285
|
+
}
|
|
1286
|
+
interface BannerCardProps {
|
|
1287
|
+
banner: BannerItem;
|
|
1288
|
+
/** Force a layout. Omit = responsive: mobile < md, desktop ≥ md. */
|
|
1289
|
+
layout?: HomeBannerLayout;
|
|
1290
|
+
onClose?: () => void;
|
|
1291
|
+
className?: string;
|
|
1292
|
+
}
|
|
1293
|
+
declare function BannerCard({ banner, layout, onClose, className }: BannerCardProps): react_jsx_runtime.JSX.Element;
|
|
1294
|
+
declare function HomeBanner({ items, autoplayMs, layout, className, }: HomeBannerProps): react_jsx_runtime.JSX.Element;
|
|
1295
|
+
|
|
1296
|
+
type HomeExploreDerivLayout = "mobile" | "desktop";
|
|
1297
|
+
interface ExploreItem {
|
|
1298
|
+
id: string;
|
|
1299
|
+
/** Quill illustration component. Takes precedence over imgSrc. */
|
|
1300
|
+
icon?: React$1.ComponentType<React$1.ImgHTMLAttributes<HTMLImageElement>>;
|
|
1301
|
+
/** Icon image src. Omit for neutral placeholder circle. */
|
|
1302
|
+
imgSrc?: string;
|
|
1303
|
+
label: string;
|
|
1304
|
+
/** Badge text, e.g. "New" or "Copy trading". */
|
|
1305
|
+
tag?: string;
|
|
1306
|
+
/** Tailwind bg class for the badge. Default: bg-[var(--primitive-emerald-700)]. */
|
|
1307
|
+
tagBgClass?: string;
|
|
1308
|
+
disabled?: boolean;
|
|
1309
|
+
onClick?: () => void;
|
|
1310
|
+
}
|
|
1311
|
+
interface HomeExploreDerivProps {
|
|
1312
|
+
title?: string;
|
|
1313
|
+
items?: ExploreItem[];
|
|
1314
|
+
/** Force a layout. Omit = responsive: mobile < md, desktop ≥ md. */
|
|
1315
|
+
layout?: HomeExploreDerivLayout;
|
|
1316
|
+
className?: string;
|
|
1317
|
+
}
|
|
1318
|
+
declare function HomeExploreDeriv({ title, items, layout, className, }: HomeExploreDerivProps): react_jsx_runtime.JSX.Element;
|
|
1319
|
+
|
|
1320
|
+
interface HomeHighlightCardProps {
|
|
1321
|
+
/** Static image src for the preview area. */
|
|
1322
|
+
previewSrc?: string;
|
|
1323
|
+
/** Video src — takes precedence over previewSrc. Lazy-loaded on viewport entry. */
|
|
1324
|
+
videoSrc?: string;
|
|
1325
|
+
/** Black background behind the preview image (for dark-on-dark media). */
|
|
1326
|
+
darkPreview?: boolean;
|
|
1327
|
+
/** Small overline text above the title. */
|
|
1328
|
+
overline?: string;
|
|
1329
|
+
title: string;
|
|
1330
|
+
description: string;
|
|
1331
|
+
tags: string[];
|
|
1332
|
+
/** Card width in px. Default 240. */
|
|
1333
|
+
width?: number;
|
|
1334
|
+
}
|
|
1335
|
+
declare function HomeHighlightCard({ previewSrc, videoSrc, darkPreview, overline, title, description, tags, width, }: HomeHighlightCardProps): react_jsx_runtime.JSX.Element;
|
|
1336
|
+
|
|
1337
|
+
interface HomeHighlightsProps {
|
|
1338
|
+
title?: string;
|
|
1339
|
+
cards?: HomeHighlightCardProps[];
|
|
1340
|
+
className?: string;
|
|
1341
|
+
}
|
|
1342
|
+
declare function HomeHighlights({ title, cards, className, }: HomeHighlightsProps): react_jsx_runtime.JSX.Element;
|
|
1343
|
+
|
|
1344
|
+
type FeedbackSuccessAssetShape = "square" | "rectangle";
|
|
1345
|
+
type FeedbackSuccessLayout = "mobile" | "desktop";
|
|
1346
|
+
interface FeedbackSuccessScreenProps {
|
|
1347
|
+
/** Force a layout. Omit for responsive (mobile < md, desktop ≥ md). */
|
|
1348
|
+
layout?: FeedbackSuccessLayout;
|
|
1349
|
+
/** Shape of the 3-D asset placeholder. */
|
|
1350
|
+
assetShape?: FeedbackSuccessAssetShape;
|
|
1351
|
+
/** Real asset image src. Omit to show the dashed placeholder. */
|
|
1352
|
+
assetSrc?: string;
|
|
1353
|
+
title?: string;
|
|
1354
|
+
description?: string;
|
|
1355
|
+
/** Outline badge label below the description. */
|
|
1356
|
+
tag?: string;
|
|
1357
|
+
/** Slot for any block or component (e.g. a progress indicator). */
|
|
1358
|
+
slotActionNudge?: React$1.ReactNode;
|
|
1359
|
+
primaryLabel?: string;
|
|
1360
|
+
onPrimary?: () => void;
|
|
1361
|
+
secondaryLabel?: string;
|
|
1362
|
+
onSecondary?: () => void;
|
|
1363
|
+
className?: string;
|
|
1364
|
+
}
|
|
1365
|
+
interface FeedbackTradeAccount {
|
|
1366
|
+
id: string;
|
|
1367
|
+
label: string;
|
|
1368
|
+
logo?: React$1.ReactNode;
|
|
1369
|
+
/** @deprecated use `logo` instead */
|
|
1370
|
+
logoSrc?: string;
|
|
1371
|
+
}
|
|
1372
|
+
interface FeedbackTradeWithAccountsProps {
|
|
1373
|
+
title?: string;
|
|
1374
|
+
accounts?: FeedbackTradeAccount[];
|
|
1375
|
+
autoplayMs?: number;
|
|
1376
|
+
className?: string;
|
|
1377
|
+
}
|
|
1378
|
+
declare function FeedbackTradeWithAccounts({ title, accounts, autoplayMs, className, }: FeedbackTradeWithAccountsProps): react_jsx_runtime.JSX.Element;
|
|
1379
|
+
interface FeedbackTransferEndpoint {
|
|
1380
|
+
label: string;
|
|
1381
|
+
logo?: React$1.ReactNode;
|
|
1382
|
+
/** @deprecated use `logo` instead */
|
|
1383
|
+
logoSrc?: string;
|
|
1384
|
+
}
|
|
1385
|
+
interface FeedbackTransferSuggestionProps {
|
|
1386
|
+
title?: string;
|
|
1387
|
+
from: FeedbackTransferEndpoint;
|
|
1388
|
+
to: FeedbackTransferEndpoint;
|
|
1389
|
+
className?: string;
|
|
1390
|
+
}
|
|
1391
|
+
declare function FeedbackTransferSuggestion({ title, from, to, className, }: FeedbackTransferSuggestionProps): react_jsx_runtime.JSX.Element;
|
|
1392
|
+
declare function FeedbackSuccessScreen({ layout, assetShape, assetSrc, title, description, tag, slotActionNudge, primaryLabel, onPrimary, secondaryLabel, onSecondary, className, }: FeedbackSuccessScreenProps): react_jsx_runtime.JSX.Element;
|
|
1393
|
+
|
|
1394
|
+
type HeaderAppLayout = "mobile" | "desktop";
|
|
1395
|
+
type HeaderAppState = "default" | "loading";
|
|
1396
|
+
interface HeaderAppTab {
|
|
1397
|
+
id: string;
|
|
1398
|
+
label: string;
|
|
1399
|
+
}
|
|
1400
|
+
interface HeaderAppAction {
|
|
1401
|
+
id: string;
|
|
1402
|
+
iconName: string;
|
|
1403
|
+
onClick?: () => void;
|
|
1404
|
+
ariaLabel: string;
|
|
1405
|
+
}
|
|
1406
|
+
type HeaderAppCenter = {
|
|
1407
|
+
kind: "none";
|
|
1408
|
+
} | {
|
|
1409
|
+
kind: "segmentedControl";
|
|
1410
|
+
items: {
|
|
1411
|
+
value: string;
|
|
1412
|
+
label: string;
|
|
1413
|
+
}[];
|
|
1414
|
+
value: string;
|
|
1415
|
+
onValueChange: (v: string) => void;
|
|
1416
|
+
} | {
|
|
1417
|
+
kind: "askAmy";
|
|
1418
|
+
onClick?: () => void;
|
|
1419
|
+
};
|
|
1420
|
+
interface HeaderAppProps {
|
|
1421
|
+
layout?: HeaderAppLayout;
|
|
1422
|
+
state?: HeaderAppState;
|
|
1423
|
+
showBack?: boolean;
|
|
1424
|
+
onBack?: () => void;
|
|
1425
|
+
/** Optional leading logo — renders instead of back button (e.g. cTrader iframe). */
|
|
1426
|
+
leadingLogo?: {
|
|
1427
|
+
src: string;
|
|
1428
|
+
alt: string;
|
|
1429
|
+
};
|
|
1430
|
+
tabs?: HeaderAppTab[];
|
|
1431
|
+
activeTabId?: string;
|
|
1432
|
+
onTabChange?: (id: string) => void;
|
|
1433
|
+
labelButton?: {
|
|
1434
|
+
label: string;
|
|
1435
|
+
onClick?: () => void;
|
|
1436
|
+
};
|
|
1437
|
+
actions?: HeaderAppAction[];
|
|
1438
|
+
showAskAmyRight?: boolean;
|
|
1439
|
+
onAskAmyRight?: () => void;
|
|
1440
|
+
showClose?: boolean;
|
|
1441
|
+
onClose?: () => void;
|
|
1442
|
+
center?: HeaderAppCenter;
|
|
1443
|
+
className?: string;
|
|
1444
|
+
}
|
|
1445
|
+
interface HeaderAppHomeProps {
|
|
1446
|
+
state?: HeaderAppState;
|
|
1447
|
+
avatarSrc?: string;
|
|
1448
|
+
avatarFallback?: string;
|
|
1449
|
+
showNotificationBadge?: boolean;
|
|
1450
|
+
actions?: HeaderAppAction[];
|
|
1451
|
+
showAskAmy?: boolean;
|
|
1452
|
+
onAskAmy?: () => void;
|
|
1453
|
+
className?: string;
|
|
1454
|
+
}
|
|
1455
|
+
interface HeaderBrandingProps {
|
|
1456
|
+
languageCode?: string;
|
|
1457
|
+
onLanguageClick?: () => void;
|
|
1458
|
+
actions?: HeaderAppAction[];
|
|
1459
|
+
className?: string;
|
|
1460
|
+
}
|
|
1461
|
+
declare function HeaderApp({ layout, state, showBack, onBack, leadingLogo, tabs, activeTabId, onTabChange, labelButton, actions, showAskAmyRight, onAskAmyRight, showClose, onClose, center, className, }: HeaderAppProps): react_jsx_runtime.JSX.Element;
|
|
1462
|
+
declare function HeaderAppHome({ state, avatarSrc, avatarFallback, showNotificationBadge, actions, showAskAmy, onAskAmy, className, }: HeaderAppHomeProps): react_jsx_runtime.JSX.Element;
|
|
1463
|
+
declare function HeaderBranding({ languageCode, onLanguageClick, actions, className, }: HeaderBrandingProps): react_jsx_runtime.JSX.Element;
|
|
1464
|
+
|
|
1465
|
+
interface TradingActionButtonsProps {
|
|
1466
|
+
tradeState?: ActionButtonState;
|
|
1467
|
+
transferState?: ActionButtonState;
|
|
1468
|
+
depositState?: ActionButtonState;
|
|
1469
|
+
withdrawState?: ActionButtonState;
|
|
1470
|
+
}
|
|
1471
|
+
declare function TradingActionButtonsPrimarySkeleton(): react_jsx_runtime.JSX.Element;
|
|
1472
|
+
declare function TradingActionButtonsPrimary({ tradeState, transferState, depositState, withdrawState, }: TradingActionButtonsProps): react_jsx_runtime.JSX.Element;
|
|
1473
|
+
declare function TradingActionButtonsSecondarySkeleton(): react_jsx_runtime.JSX.Element;
|
|
1474
|
+
declare function TradingActionButtonsSecondary({ tradeState, transferState, depositState, withdrawState, }: TradingActionButtonsProps): react_jsx_runtime.JSX.Element;
|
|
1475
|
+
|
|
1476
|
+
interface TradingEmptyProps {
|
|
1477
|
+
/** Quill illustration component or React node shown above the text. */
|
|
1478
|
+
image?: React__default.ReactNode;
|
|
1479
|
+
/** @deprecated use `image` instead */
|
|
1480
|
+
imageSrc?: string;
|
|
1481
|
+
/** Primary heading. */
|
|
1482
|
+
title?: string;
|
|
1483
|
+
/** Supporting body copy. */
|
|
1484
|
+
description?: string;
|
|
1485
|
+
}
|
|
1486
|
+
declare function TradingEmptySkeleton(): react_jsx_runtime.JSX.Element;
|
|
1487
|
+
declare function TradingEmpty({ image, imageSrc, title, description, }: TradingEmptyProps): react_jsx_runtime.JSX.Element;
|
|
1488
|
+
|
|
1489
|
+
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, 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, 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, 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, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupField, RadioGroupItem, 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, 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, tabListVariants, tagVariants, textareaWrapperVariants as textareaVariants, toggleVariants, useComboboxAnchor, useDirection, useFormField, useIsMobile, useSidebar };
|