@alien-id/ui-kit-react 0.1.1
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/README.md +43 -0
- package/dist/index.cjs +443 -0
- package/dist/index.css +351 -0
- package/dist/index.d.cts +111 -0
- package/dist/index.d.mts +111 -0
- package/dist/index.mjs +406 -0
- package/package.json +65 -0
package/dist/index.css
ADDED
|
@@ -0,0 +1,351 @@
|
|
|
1
|
+
.alien-bottomsheet-overlay {
|
|
2
|
+
position: fixed;
|
|
3
|
+
inset: 0;
|
|
4
|
+
background-color: rgba(0, 0, 0, 0.8);
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.alien-bottomsheet-content {
|
|
8
|
+
position: fixed;
|
|
9
|
+
left: 0;
|
|
10
|
+
right: 0;
|
|
11
|
+
bottom: 0;
|
|
12
|
+
width: 100%;
|
|
13
|
+
padding: 1rem;
|
|
14
|
+
padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
|
|
15
|
+
border-top-left-radius: 0.5rem;
|
|
16
|
+
border-top-right-radius: 0.5rem;
|
|
17
|
+
color: var(--foreground, currentColor);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.alien-bottomsheet-inner {
|
|
21
|
+
display: flex;
|
|
22
|
+
flex-direction: column;
|
|
23
|
+
height: 100%;
|
|
24
|
+
padding-left: 1.5rem;
|
|
25
|
+
padding-right: 1.5rem;
|
|
26
|
+
padding-bottom: 1.5rem;
|
|
27
|
+
border-radius: 40px;
|
|
28
|
+
background-color: var(--card, #1a1a1a);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.alien-bottomsheet-handle {
|
|
32
|
+
margin-top: 0.75rem;
|
|
33
|
+
width: 2.75rem;
|
|
34
|
+
background-color: rgba(255, 255, 255, 0.2);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
:root {
|
|
38
|
+
--font-booton: "Booton", system-ui, sans-serif;
|
|
39
|
+
font-family: var(--font-booton);
|
|
40
|
+
--alien-color-primary: #2979ff;
|
|
41
|
+
--alien-color-primary-tinted: rgba(41, 121, 255, 0.16);
|
|
42
|
+
--alien-color-secondary: rgba(141, 141, 141, 0.24);
|
|
43
|
+
--alien-color-disabled-bg: rgba(141, 141, 141, 0.16);
|
|
44
|
+
--alien-color-disabled-text: rgba(141, 141, 141, 0.24);
|
|
45
|
+
--alien-color-text-on-primary: #ffffff;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.alien-button {
|
|
49
|
+
font-family: var(--font-booton);
|
|
50
|
+
border: none;
|
|
51
|
+
display: flex;
|
|
52
|
+
width: 100%;
|
|
53
|
+
align-items: center;
|
|
54
|
+
justify-content: center;
|
|
55
|
+
padding: 16px 20px;
|
|
56
|
+
gap: 0.5rem;
|
|
57
|
+
border-radius: 24px;
|
|
58
|
+
font-weight: 469;
|
|
59
|
+
cursor: pointer;
|
|
60
|
+
transition: opacity 0.3s;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.alien-button:disabled {
|
|
64
|
+
cursor: not-allowed;
|
|
65
|
+
background: var(--alien-color-disabled-bg, rgba(141, 141, 141, 0.16));
|
|
66
|
+
color: var(--alien-color-disabled-text, rgba(141, 141, 141, 0.24));
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.alien-button:hover:not(:disabled) {
|
|
70
|
+
opacity: 0.8;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.alien-button-primary {
|
|
74
|
+
color: var(--alien-color-text-on-primary, #ffffff);
|
|
75
|
+
background: var(--alien-color-primary, #2979ff);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.alien-button-secondary {
|
|
79
|
+
color: var(--alien-color-text-on-primary, #ffffff);
|
|
80
|
+
background: var(--alien-color-secondary, rgba(141, 141, 141, 0.24));
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.alien-button-tinted {
|
|
84
|
+
color: var(--alien-color-primary, #2979ff);
|
|
85
|
+
background: var(--alien-color-primary-tinted, rgba(41, 121, 255, 0.16));
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.alien-button-tertiary {
|
|
89
|
+
background: transparent;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.alien-button-tertiary:disabled {
|
|
93
|
+
cursor: not-allowed;
|
|
94
|
+
color: var(--alien-color-disabled-text, rgba(141, 141, 141, 0.24));
|
|
95
|
+
background: transparent;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.alien-price-chart {
|
|
99
|
+
display: flex;
|
|
100
|
+
flex-direction: column;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.alien-price-chart-header {
|
|
104
|
+
display: flex;
|
|
105
|
+
align-items: flex-end;
|
|
106
|
+
justify-content: space-between;
|
|
107
|
+
padding: 16px 16px 0;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.alien-price-chart-info {
|
|
111
|
+
display: flex;
|
|
112
|
+
flex-direction: column;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.alien-price-chart-value {
|
|
116
|
+
font-size: 22px;
|
|
117
|
+
font-weight: 600;
|
|
118
|
+
color: var(--alien-color-text-primary, #fff);
|
|
119
|
+
line-height: 1.25;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.alien-price-chart-label {
|
|
123
|
+
font-size: 14px;
|
|
124
|
+
color: var(--alien-color-text-secondary, #8d8d8d);
|
|
125
|
+
margin-top: 2px;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.alien-price-chart-stats {
|
|
129
|
+
display: flex;
|
|
130
|
+
flex-direction: column;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.alien-price-chart-stats--end {
|
|
134
|
+
align-items: flex-end;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.alien-price-chart-stats--start {
|
|
138
|
+
align-self: flex-start;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.alien-price-chart-change {
|
|
142
|
+
display: flex;
|
|
143
|
+
align-items: center;
|
|
144
|
+
gap: 4px;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.alien-price-chart-change-text {
|
|
148
|
+
font-size: 14px;
|
|
149
|
+
font-weight: 500;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.alien-price-chart-change-text--positive {
|
|
153
|
+
color: #03aa58;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.alien-price-chart-change-text--negative {
|
|
157
|
+
color: #f43f5d;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.alien-price-chart-period-label {
|
|
161
|
+
font-size: 12px;
|
|
162
|
+
color: var(--alien-color-text-secondary, #8d8d8d);
|
|
163
|
+
margin-top: 2px;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.alien-price-chart-area {
|
|
167
|
+
position: relative;
|
|
168
|
+
width: 100%;
|
|
169
|
+
cursor: crosshair;
|
|
170
|
+
background: none;
|
|
171
|
+
border: none;
|
|
172
|
+
padding: 0;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.alien-price-chart-area svg,
|
|
176
|
+
.alien-price-chart-area svg * {
|
|
177
|
+
transition: none !important;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.alien-price-chart-crosshair {
|
|
181
|
+
position: absolute;
|
|
182
|
+
top: 0;
|
|
183
|
+
height: 100%;
|
|
184
|
+
width: 1px;
|
|
185
|
+
pointer-events: none;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.alien-price-chart-overlay {
|
|
189
|
+
position: absolute;
|
|
190
|
+
top: 0;
|
|
191
|
+
height: 100%;
|
|
192
|
+
pointer-events: none;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
.alien-price-chart-dot {
|
|
196
|
+
position: absolute;
|
|
197
|
+
width: 8px;
|
|
198
|
+
height: 8px;
|
|
199
|
+
border-radius: 50%;
|
|
200
|
+
pointer-events: none;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.alien-price-chart-periods {
|
|
204
|
+
display: flex;
|
|
205
|
+
align-items: center;
|
|
206
|
+
justify-content: center;
|
|
207
|
+
gap: 8px;
|
|
208
|
+
padding: 8px 0 16px;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.alien-price-chart-period-btn {
|
|
212
|
+
padding: 6px 16px;
|
|
213
|
+
border-radius: 9999px;
|
|
214
|
+
font-size: 13px;
|
|
215
|
+
font-weight: 500;
|
|
216
|
+
cursor: pointer;
|
|
217
|
+
background: none;
|
|
218
|
+
border: none;
|
|
219
|
+
color: var(--alien-color-text-secondary, #8d8d8d);
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.alien-price-chart-period-btn:hover {
|
|
223
|
+
color: var(--alien-color-text-primary, #fff);
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.alien-price-chart-period-btn--active {
|
|
227
|
+
background-color: var(--alien-color-primary-tinted, rgba(41, 121, 255, 0.16));
|
|
228
|
+
color: var(--alien-color-primary, #2979ff);
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.alien-price-chart-period-btn--active:hover {
|
|
232
|
+
color: var(--alien-color-primary, #2979ff);
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.alien-input {
|
|
236
|
+
font-family: var(--font-booton);
|
|
237
|
+
display: flex;
|
|
238
|
+
height: 36px;
|
|
239
|
+
width: 100%;
|
|
240
|
+
min-width: 0;
|
|
241
|
+
border-radius: 8px;
|
|
242
|
+
border: 1px solid var(--alien-color-secondary, rgba(141, 141, 141, 0.24));
|
|
243
|
+
background: transparent;
|
|
244
|
+
padding: 4px 12px;
|
|
245
|
+
font-size: 14px;
|
|
246
|
+
line-height: 1.25;
|
|
247
|
+
color: inherit;
|
|
248
|
+
outline: none;
|
|
249
|
+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
250
|
+
transition:
|
|
251
|
+
color 0.15s,
|
|
252
|
+
box-shadow 0.15s,
|
|
253
|
+
border-color 0.15s;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.alien-input::placeholder {
|
|
257
|
+
color: var(--alien-color-disabled-text, rgba(141, 141, 141, 0.24));
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.alien-input::selection {
|
|
261
|
+
background: var(--alien-color-primary, #2979ff);
|
|
262
|
+
color: var(--alien-color-text-on-primary, #ffffff);
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
.alien-input:focus-visible {
|
|
266
|
+
border-color: var(--alien-color-primary, #2979ff);
|
|
267
|
+
box-shadow: 0 0 0 3px
|
|
268
|
+
var(--alien-color-primary-tinted, rgba(41, 121, 255, 0.16));
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
.alien-input[aria-invalid="true"] {
|
|
272
|
+
border-color: #ef4444;
|
|
273
|
+
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.alien-input:disabled {
|
|
277
|
+
pointer-events: none;
|
|
278
|
+
cursor: not-allowed;
|
|
279
|
+
opacity: 0.5;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.alien-input::-webkit-file-upload-button {
|
|
283
|
+
display: inline-flex;
|
|
284
|
+
height: 28px;
|
|
285
|
+
border: 0;
|
|
286
|
+
background: transparent;
|
|
287
|
+
font-size: 14px;
|
|
288
|
+
font-weight: 500;
|
|
289
|
+
color: inherit;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
/* Floating label input */
|
|
293
|
+
|
|
294
|
+
.alien-floating-wrapper {
|
|
295
|
+
position: relative;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.alien-floating-input {
|
|
299
|
+
font-family: var(--font-booton);
|
|
300
|
+
width: 100%;
|
|
301
|
+
appearance: none;
|
|
302
|
+
padding: 24px 16px 8px;
|
|
303
|
+
border-radius: 16px;
|
|
304
|
+
outline: 1px solid var(--alien-color-secondary, rgba(141, 141, 141, 0.24));
|
|
305
|
+
outline-offset: -1px;
|
|
306
|
+
background: transparent;
|
|
307
|
+
font-size: 16px;
|
|
308
|
+
line-height: 1.375;
|
|
309
|
+
color: inherit;
|
|
310
|
+
transition: outline-color 0.2s ease-in-out;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.alien-floating-input::placeholder {
|
|
314
|
+
color: transparent;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
.alien-floating-input:hover:not(:disabled) {
|
|
318
|
+
outline-color: var(--alien-color-primary, #2979ff);
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.alien-floating-input:focus {
|
|
322
|
+
outline-color: var(--alien-color-primary, #2979ff);
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.alien-floating-input-disabled {
|
|
326
|
+
background: rgba(141, 141, 141, 0.16);
|
|
327
|
+
outline: none;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
.alien-floating-label {
|
|
331
|
+
position: absolute;
|
|
332
|
+
z-index: 1;
|
|
333
|
+
left: 16px;
|
|
334
|
+
top: 50%;
|
|
335
|
+
transform: translateY(-50%);
|
|
336
|
+
font-size: 16px;
|
|
337
|
+
line-height: 1.375;
|
|
338
|
+
color: #999;
|
|
339
|
+
transition: all 0.2s ease-in-out;
|
|
340
|
+
pointer-events: none;
|
|
341
|
+
user-select: none;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
/* Label moves up when input is focused or has content (non-empty placeholder trick) */
|
|
345
|
+
.alien-floating-input:focus + .alien-floating-label,
|
|
346
|
+
.alien-floating-input:not(:placeholder-shown) + .alien-floating-label {
|
|
347
|
+
top: 16px;
|
|
348
|
+
font-size: 12px;
|
|
349
|
+
line-height: 1;
|
|
350
|
+
}
|
|
351
|
+
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
2
|
+
import * as react from "react";
|
|
3
|
+
import { ComponentProps, ReactNode } from "react";
|
|
4
|
+
import { Drawer } from "vaul-base";
|
|
5
|
+
|
|
6
|
+
//#region src/components/bottom-sheet/index.d.ts
|
|
7
|
+
type DrawerRootProps = ComponentProps<typeof Drawer.Root>;
|
|
8
|
+
interface BottomSheetProps {
|
|
9
|
+
renderTrigger?: ComponentProps<typeof Drawer.Trigger>['render'];
|
|
10
|
+
children: ReactNode;
|
|
11
|
+
open?: DrawerRootProps['open'];
|
|
12
|
+
onOpenChange?: DrawerRootProps['onOpenChange'];
|
|
13
|
+
dismissible?: DrawerRootProps['dismissible'];
|
|
14
|
+
}
|
|
15
|
+
declare const BottomSheetComponent: {
|
|
16
|
+
({
|
|
17
|
+
renderTrigger,
|
|
18
|
+
children,
|
|
19
|
+
open,
|
|
20
|
+
onOpenChange,
|
|
21
|
+
dismissible
|
|
22
|
+
}: BottomSheetProps): react_jsx_runtime0.JSX.Element;
|
|
23
|
+
displayName: string;
|
|
24
|
+
};
|
|
25
|
+
type BottomSheet = typeof BottomSheetComponent & {
|
|
26
|
+
Close: typeof Drawer.Close;
|
|
27
|
+
Title: typeof Drawer.Title;
|
|
28
|
+
Description: typeof Drawer.Description;
|
|
29
|
+
};
|
|
30
|
+
declare const BottomSheet: BottomSheet;
|
|
31
|
+
//#endregion
|
|
32
|
+
//#region src/components/buttons/types.d.ts
|
|
33
|
+
type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'tinted';
|
|
34
|
+
type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
35
|
+
children: React.ReactNode;
|
|
36
|
+
variant?: ButtonVariant;
|
|
37
|
+
};
|
|
38
|
+
//#endregion
|
|
39
|
+
//#region src/components/buttons/button.d.ts
|
|
40
|
+
declare const Button: ({
|
|
41
|
+
children,
|
|
42
|
+
variant,
|
|
43
|
+
className,
|
|
44
|
+
...props
|
|
45
|
+
}: ButtonProps) => react_jsx_runtime0.JSX.Element;
|
|
46
|
+
//#endregion
|
|
47
|
+
//#region src/components/buttons/index.d.ts
|
|
48
|
+
type VariantButtonProps = Omit<ButtonProps, 'variant'>;
|
|
49
|
+
declare const PrimaryButton: (props: VariantButtonProps) => react_jsx_runtime0.JSX.Element;
|
|
50
|
+
declare const SecondaryButton: (props: VariantButtonProps) => react_jsx_runtime0.JSX.Element;
|
|
51
|
+
declare const TertiaryButton: (props: VariantButtonProps) => react_jsx_runtime0.JSX.Element;
|
|
52
|
+
declare const TintedButton: (props: VariantButtonProps) => react_jsx_runtime0.JSX.Element;
|
|
53
|
+
//#endregion
|
|
54
|
+
//#region src/components/charts/types.d.ts
|
|
55
|
+
interface PriceChartDataPoint {
|
|
56
|
+
timestamp: string | number;
|
|
57
|
+
value: number;
|
|
58
|
+
}
|
|
59
|
+
type TimePeriod = '1H' | '1D' | '1W' | '1M';
|
|
60
|
+
interface PriceChartProps {
|
|
61
|
+
data: PriceChartDataPoint[];
|
|
62
|
+
height?: number;
|
|
63
|
+
label?: string;
|
|
64
|
+
currency?: string;
|
|
65
|
+
activePeriod?: TimePeriod;
|
|
66
|
+
periods?: TimePeriod[];
|
|
67
|
+
onPeriodChange?: (period: TimePeriod) => void;
|
|
68
|
+
onDataPointClick?: (point: PriceChartDataPoint) => void;
|
|
69
|
+
formatValue?: (value: number) => string;
|
|
70
|
+
color?: string;
|
|
71
|
+
className?: string;
|
|
72
|
+
showPeriodChange?: boolean;
|
|
73
|
+
}
|
|
74
|
+
//#endregion
|
|
75
|
+
//#region src/components/charts/index.d.ts
|
|
76
|
+
declare const PriceChart: react.MemoExoticComponent<({
|
|
77
|
+
data,
|
|
78
|
+
height,
|
|
79
|
+
label,
|
|
80
|
+
currency,
|
|
81
|
+
activePeriod: controlledPeriod,
|
|
82
|
+
periods,
|
|
83
|
+
onPeriodChange,
|
|
84
|
+
onDataPointClick,
|
|
85
|
+
formatValue,
|
|
86
|
+
color,
|
|
87
|
+
className,
|
|
88
|
+
showPeriodChange
|
|
89
|
+
}: PriceChartProps) => react_jsx_runtime0.JSX.Element>;
|
|
90
|
+
//#endregion
|
|
91
|
+
//#region src/components/inputs/floating-label-input.d.ts
|
|
92
|
+
interface FloatingLabelInputProps extends react.InputHTMLAttributes<HTMLInputElement> {
|
|
93
|
+
id: string;
|
|
94
|
+
label: string;
|
|
95
|
+
}
|
|
96
|
+
declare function FloatingLabelInput({
|
|
97
|
+
id,
|
|
98
|
+
label,
|
|
99
|
+
className,
|
|
100
|
+
disabled,
|
|
101
|
+
...props
|
|
102
|
+
}: FloatingLabelInputProps): react_jsx_runtime0.JSX.Element;
|
|
103
|
+
//#endregion
|
|
104
|
+
//#region src/components/inputs/input.d.ts
|
|
105
|
+
declare function Input({
|
|
106
|
+
className,
|
|
107
|
+
type,
|
|
108
|
+
...props
|
|
109
|
+
}: react.ComponentProps<'input'>): react_jsx_runtime0.JSX.Element;
|
|
110
|
+
//#endregion
|
|
111
|
+
export { BottomSheet, Button, type ButtonProps, type ButtonVariant, FloatingLabelInput, Input, PriceChart, type PriceChartDataPoint, type PriceChartProps, PrimaryButton, SecondaryButton, TertiaryButton, type TimePeriod, TintedButton };
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import { Drawer } from "vaul-base";
|
|
2
|
+
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
|
+
import * as react from "react";
|
|
4
|
+
import { ComponentProps, ReactNode } from "react";
|
|
5
|
+
|
|
6
|
+
//#region src/components/bottom-sheet/index.d.ts
|
|
7
|
+
type DrawerRootProps = ComponentProps<typeof Drawer.Root>;
|
|
8
|
+
interface BottomSheetProps {
|
|
9
|
+
renderTrigger?: ComponentProps<typeof Drawer.Trigger>['render'];
|
|
10
|
+
children: ReactNode;
|
|
11
|
+
open?: DrawerRootProps['open'];
|
|
12
|
+
onOpenChange?: DrawerRootProps['onOpenChange'];
|
|
13
|
+
dismissible?: DrawerRootProps['dismissible'];
|
|
14
|
+
}
|
|
15
|
+
declare const BottomSheetComponent: {
|
|
16
|
+
({
|
|
17
|
+
renderTrigger,
|
|
18
|
+
children,
|
|
19
|
+
open,
|
|
20
|
+
onOpenChange,
|
|
21
|
+
dismissible
|
|
22
|
+
}: BottomSheetProps): react_jsx_runtime0.JSX.Element;
|
|
23
|
+
displayName: string;
|
|
24
|
+
};
|
|
25
|
+
type BottomSheet = typeof BottomSheetComponent & {
|
|
26
|
+
Close: typeof Drawer.Close;
|
|
27
|
+
Title: typeof Drawer.Title;
|
|
28
|
+
Description: typeof Drawer.Description;
|
|
29
|
+
};
|
|
30
|
+
declare const BottomSheet: BottomSheet;
|
|
31
|
+
//#endregion
|
|
32
|
+
//#region src/components/buttons/types.d.ts
|
|
33
|
+
type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'tinted';
|
|
34
|
+
type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
35
|
+
children: React.ReactNode;
|
|
36
|
+
variant?: ButtonVariant;
|
|
37
|
+
};
|
|
38
|
+
//#endregion
|
|
39
|
+
//#region src/components/buttons/button.d.ts
|
|
40
|
+
declare const Button: ({
|
|
41
|
+
children,
|
|
42
|
+
variant,
|
|
43
|
+
className,
|
|
44
|
+
...props
|
|
45
|
+
}: ButtonProps) => react_jsx_runtime0.JSX.Element;
|
|
46
|
+
//#endregion
|
|
47
|
+
//#region src/components/buttons/index.d.ts
|
|
48
|
+
type VariantButtonProps = Omit<ButtonProps, 'variant'>;
|
|
49
|
+
declare const PrimaryButton: (props: VariantButtonProps) => react_jsx_runtime0.JSX.Element;
|
|
50
|
+
declare const SecondaryButton: (props: VariantButtonProps) => react_jsx_runtime0.JSX.Element;
|
|
51
|
+
declare const TertiaryButton: (props: VariantButtonProps) => react_jsx_runtime0.JSX.Element;
|
|
52
|
+
declare const TintedButton: (props: VariantButtonProps) => react_jsx_runtime0.JSX.Element;
|
|
53
|
+
//#endregion
|
|
54
|
+
//#region src/components/charts/types.d.ts
|
|
55
|
+
interface PriceChartDataPoint {
|
|
56
|
+
timestamp: string | number;
|
|
57
|
+
value: number;
|
|
58
|
+
}
|
|
59
|
+
type TimePeriod = '1H' | '1D' | '1W' | '1M';
|
|
60
|
+
interface PriceChartProps {
|
|
61
|
+
data: PriceChartDataPoint[];
|
|
62
|
+
height?: number;
|
|
63
|
+
label?: string;
|
|
64
|
+
currency?: string;
|
|
65
|
+
activePeriod?: TimePeriod;
|
|
66
|
+
periods?: TimePeriod[];
|
|
67
|
+
onPeriodChange?: (period: TimePeriod) => void;
|
|
68
|
+
onDataPointClick?: (point: PriceChartDataPoint) => void;
|
|
69
|
+
formatValue?: (value: number) => string;
|
|
70
|
+
color?: string;
|
|
71
|
+
className?: string;
|
|
72
|
+
showPeriodChange?: boolean;
|
|
73
|
+
}
|
|
74
|
+
//#endregion
|
|
75
|
+
//#region src/components/charts/index.d.ts
|
|
76
|
+
declare const PriceChart: react.MemoExoticComponent<({
|
|
77
|
+
data,
|
|
78
|
+
height,
|
|
79
|
+
label,
|
|
80
|
+
currency,
|
|
81
|
+
activePeriod: controlledPeriod,
|
|
82
|
+
periods,
|
|
83
|
+
onPeriodChange,
|
|
84
|
+
onDataPointClick,
|
|
85
|
+
formatValue,
|
|
86
|
+
color,
|
|
87
|
+
className,
|
|
88
|
+
showPeriodChange
|
|
89
|
+
}: PriceChartProps) => react_jsx_runtime0.JSX.Element>;
|
|
90
|
+
//#endregion
|
|
91
|
+
//#region src/components/inputs/floating-label-input.d.ts
|
|
92
|
+
interface FloatingLabelInputProps extends react.InputHTMLAttributes<HTMLInputElement> {
|
|
93
|
+
id: string;
|
|
94
|
+
label: string;
|
|
95
|
+
}
|
|
96
|
+
declare function FloatingLabelInput({
|
|
97
|
+
id,
|
|
98
|
+
label,
|
|
99
|
+
className,
|
|
100
|
+
disabled,
|
|
101
|
+
...props
|
|
102
|
+
}: FloatingLabelInputProps): react_jsx_runtime0.JSX.Element;
|
|
103
|
+
//#endregion
|
|
104
|
+
//#region src/components/inputs/input.d.ts
|
|
105
|
+
declare function Input({
|
|
106
|
+
className,
|
|
107
|
+
type,
|
|
108
|
+
...props
|
|
109
|
+
}: react.ComponentProps<'input'>): react_jsx_runtime0.JSX.Element;
|
|
110
|
+
//#endregion
|
|
111
|
+
export { BottomSheet, Button, type ButtonProps, type ButtonVariant, FloatingLabelInput, Input, PriceChart, type PriceChartDataPoint, type PriceChartProps, PrimaryButton, SecondaryButton, TertiaryButton, type TimePeriod, TintedButton };
|