listpage-next 0.0.238 → 0.0.239
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ui/Button/index.d.ts +10 -0
- package/dist/ui/index.d.ts +1 -0
- package/dist/ui.css +259 -0
- package/package.json +1 -1
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface ButtonProps {
|
|
3
|
+
onClick?: () => void;
|
|
4
|
+
disabled?: boolean;
|
|
5
|
+
loading?: boolean;
|
|
6
|
+
children?: ReactNode;
|
|
7
|
+
type?: 'primary' | 'secondary';
|
|
8
|
+
size?: 'large' | 'medium' | 'small';
|
|
9
|
+
}
|
|
10
|
+
export declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
package/dist/ui/index.d.ts
CHANGED
package/dist/ui.css
CHANGED
|
@@ -7,9 +7,24 @@
|
|
|
7
7
|
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
8
8
|
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
|
9
9
|
"Courier New", monospace;
|
|
10
|
+
--color-blue-500: oklch(62.3% 0.214 259.815);
|
|
11
|
+
--color-blue-600: oklch(54.6% 0.245 262.881);
|
|
12
|
+
--color-blue-900: oklch(37.9% 0.146 265.522);
|
|
10
13
|
--color-slate-300: oklch(86.9% 0.022 252.894);
|
|
14
|
+
--color-gray-300: oklch(87.2% 0.01 258.338);
|
|
15
|
+
--color-gray-500: oklch(55.1% 0.027 264.364);
|
|
16
|
+
--color-gray-700: oklch(37.3% 0.034 259.733);
|
|
17
|
+
--color-gray-800: oklch(27.8% 0.033 256.848);
|
|
18
|
+
--color-white: #fff;
|
|
19
|
+
--spacing: 0.25rem;
|
|
20
|
+
--text-xs: 0.75rem;
|
|
21
|
+
--text-xs--line-height: calc(1 / 0.75);
|
|
11
22
|
--text-sm: 0.875rem;
|
|
12
23
|
--text-sm--line-height: calc(1.25 / 0.875);
|
|
24
|
+
--font-weight-medium: 500;
|
|
25
|
+
--radius-md: 0.375rem;
|
|
26
|
+
--radius-lg: 0.5rem;
|
|
27
|
+
--animate-spin: spin 1s linear infinite;
|
|
13
28
|
--default-transition-duration: 150ms;
|
|
14
29
|
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
15
30
|
--default-font-family: var(--font-sans);
|
|
@@ -207,25 +222,70 @@
|
|
|
207
222
|
.transform {
|
|
208
223
|
transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
|
|
209
224
|
}
|
|
225
|
+
.animate-spin {
|
|
226
|
+
animation: var(--animate-spin);
|
|
227
|
+
}
|
|
228
|
+
.cursor-pointer {
|
|
229
|
+
cursor: pointer;
|
|
230
|
+
}
|
|
210
231
|
.resize {
|
|
211
232
|
resize: both;
|
|
212
233
|
}
|
|
213
234
|
.flex-col {
|
|
214
235
|
flex-direction: column;
|
|
215
236
|
}
|
|
237
|
+
.items-center {
|
|
238
|
+
align-items: center;
|
|
239
|
+
}
|
|
240
|
+
.gap-2 {
|
|
241
|
+
gap: calc(var(--spacing) * 2);
|
|
242
|
+
}
|
|
216
243
|
.overflow-auto {
|
|
217
244
|
overflow: auto;
|
|
218
245
|
}
|
|
219
246
|
.overflow-hidden {
|
|
220
247
|
overflow: hidden;
|
|
221
248
|
}
|
|
249
|
+
.rounded {
|
|
250
|
+
border-radius: 0.25rem;
|
|
251
|
+
}
|
|
252
|
+
.rounded-lg {
|
|
253
|
+
border-radius: var(--radius-lg);
|
|
254
|
+
}
|
|
255
|
+
.rounded-md {
|
|
256
|
+
border-radius: var(--radius-md);
|
|
257
|
+
}
|
|
222
258
|
.border {
|
|
223
259
|
border-style: var(--tw-border-style);
|
|
224
260
|
border-width: 1px;
|
|
225
261
|
}
|
|
262
|
+
.border-gray-700 {
|
|
263
|
+
border-color: var(--color-gray-700);
|
|
264
|
+
}
|
|
226
265
|
.bg-\[\#0B1120\] {
|
|
227
266
|
background-color: #0B1120;
|
|
228
267
|
}
|
|
268
|
+
.bg-blue-600 {
|
|
269
|
+
background-color: var(--color-blue-600);
|
|
270
|
+
}
|
|
271
|
+
.px-3 {
|
|
272
|
+
padding-inline: calc(var(--spacing) * 3);
|
|
273
|
+
}
|
|
274
|
+
.px-4 {
|
|
275
|
+
padding-inline: calc(var(--spacing) * 4);
|
|
276
|
+
}
|
|
277
|
+
.px-6 {
|
|
278
|
+
padding-inline: calc(var(--spacing) * 6);
|
|
279
|
+
}
|
|
280
|
+
.py-1\.5 {
|
|
281
|
+
padding-block: calc(var(--spacing) * 1.5);
|
|
282
|
+
}
|
|
283
|
+
.py-2 {
|
|
284
|
+
padding-block: calc(var(--spacing) * 2);
|
|
285
|
+
}
|
|
286
|
+
.py-2\.5 {
|
|
287
|
+
padding-block: calc(var(--spacing) * 2.5);
|
|
288
|
+
}
|
|
229
289
|
.font-mono {
|
|
230
290
|
font-family: var(--font-mono);
|
|
231
291
|
}
|
|
@@ -233,9 +293,33 @@
|
|
|
233
293
|
font-size: var(--text-sm);
|
|
234
294
|
line-height: var(--tw-leading, var(--text-sm--line-height));
|
|
235
295
|
}
|
|
296
|
+
.text-xs {
|
|
297
|
+
font-size: var(--text-xs);
|
|
298
|
+
line-height: var(--tw-leading, var(--text-xs--line-height));
|
|
299
|
+
}
|
|
300
|
+
.font-medium {
|
|
301
|
+
--tw-font-weight: var(--font-weight-medium);
|
|
302
|
+
font-weight: var(--font-weight-medium);
|
|
303
|
+
}
|
|
304
|
+
.text-gray-300 {
|
|
305
|
+
color: var(--color-gray-300);
|
|
306
|
+
}
|
|
236
307
|
.text-slate-300 {
|
|
237
308
|
color: var(--color-slate-300);
|
|
238
309
|
}
|
|
310
|
+
.text-white {
|
|
311
|
+
color: var(--color-white);
|
|
312
|
+
}
|
|
313
|
+
.shadow-lg {
|
|
314
|
+
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
|
315
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
316
|
+
}
|
|
317
|
+
.shadow-blue-900\/20 {
|
|
318
|
+
--tw-shadow-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 20%, transparent);
|
|
319
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
320
|
+
--tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-900) 20%, transparent) var(--tw-shadow-alpha), transparent);
|
|
321
|
+
}
|
|
322
|
+
}
|
|
239
323
|
.outline {
|
|
240
324
|
outline-style: var(--tw-outline-style);
|
|
241
325
|
outline-width: 1px;
|
|
@@ -248,12 +332,98 @@
|
|
|
248
332
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
249
333
|
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
250
334
|
}
|
|
335
|
+
.transition-all {
|
|
336
|
+
transition-property: all;
|
|
337
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
338
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
339
|
+
}
|
|
340
|
+
.transition-colors {
|
|
341
|
+
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
|
|
342
|
+
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
|
343
|
+
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
|
344
|
+
}
|
|
345
|
+
.hover\:scale-\[1\.02\] {
|
|
346
|
+
&:hover {
|
|
347
|
+
@media (hover: hover) {
|
|
348
|
+
scale: 1.02;
|
|
349
|
+
}
|
|
350
|
+
}
|
|
351
|
+
}
|
|
352
|
+
.hover\:bg-blue-500 {
|
|
353
|
+
&:hover {
|
|
354
|
+
@media (hover: hover) {
|
|
355
|
+
background-color: var(--color-blue-500);
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
.hover\:bg-gray-800 {
|
|
360
|
+
&:hover {
|
|
361
|
+
@media (hover: hover) {
|
|
362
|
+
background-color: var(--color-gray-800);
|
|
363
|
+
}
|
|
364
|
+
}
|
|
365
|
+
}
|
|
366
|
+
.hover\:text-white {
|
|
367
|
+
&:hover {
|
|
368
|
+
@media (hover: hover) {
|
|
369
|
+
color: var(--color-white);
|
|
370
|
+
}
|
|
371
|
+
}
|
|
372
|
+
}
|
|
251
373
|
.focus\:outline-none {
|
|
252
374
|
&:focus {
|
|
253
375
|
--tw-outline-style: none;
|
|
254
376
|
outline-style: none;
|
|
255
377
|
}
|
|
256
378
|
}
|
|
379
|
+
.focus-visible\:ring-2 {
|
|
380
|
+
&:focus-visible {
|
|
381
|
+
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
|
382
|
+
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
|
383
|
+
}
|
|
384
|
+
}
|
|
385
|
+
.focus-visible\:ring-blue-500 {
|
|
386
|
+
&:focus-visible {
|
|
387
|
+
--tw-ring-color: var(--color-blue-500);
|
|
388
|
+
}
|
|
389
|
+
}
|
|
390
|
+
.focus-visible\:ring-gray-500 {
|
|
391
|
+
&:focus-visible {
|
|
392
|
+
--tw-ring-color: var(--color-gray-500);
|
|
393
|
+
}
|
|
394
|
+
}
|
|
395
|
+
.focus-visible\:ring-offset-2 {
|
|
396
|
+
&:focus-visible {
|
|
397
|
+
--tw-ring-offset-width: 2px;
|
|
398
|
+
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
399
|
+
}
|
|
400
|
+
}
|
|
401
|
+
.focus-visible\:outline-none {
|
|
402
|
+
&:focus-visible {
|
|
403
|
+
--tw-outline-style: none;
|
|
404
|
+
outline-style: none;
|
|
405
|
+
}
|
|
406
|
+
}
|
|
407
|
+
.active\:scale-\[0\.98\] {
|
|
408
|
+
&:active {
|
|
409
|
+
scale: 0.98;
|
|
410
|
+
}
|
|
411
|
+
}
|
|
412
|
+
.active\:bg-gray-700 {
|
|
413
|
+
&:active {
|
|
414
|
+
background-color: var(--color-gray-700);
|
|
415
|
+
}
|
|
416
|
+
}
|
|
417
|
+
.disabled\:cursor-not-allowed {
|
|
418
|
+
&:disabled {
|
|
419
|
+
cursor: not-allowed;
|
|
420
|
+
}
|
|
421
|
+
}
|
|
422
|
+
.disabled\:opacity-50 {
|
|
423
|
+
&:disabled {
|
|
424
|
+
opacity: 50%;
|
|
425
|
+
}
|
|
426
|
+
}
|
|
257
427
|
}
|
|
258
428
|
@property --tw-rotate-x {
|
|
259
429
|
syntax: "*";
|
|
@@ -280,6 +450,75 @@
|
|
|
280
450
|
inherits: false;
|
|
281
451
|
initial-value: solid;
|
|
282
452
|
}
|
|
453
|
+
@property --tw-font-weight {
|
|
454
|
+
syntax: "*";
|
|
455
|
+
inherits: false;
|
|
456
|
+
}
|
|
457
|
+
@property --tw-shadow {
|
|
458
|
+
syntax: "*";
|
|
459
|
+
inherits: false;
|
|
460
|
+
initial-value: 0 0 #0000;
|
|
461
|
+
}
|
|
462
|
+
@property --tw-shadow-color {
|
|
463
|
+
syntax: "*";
|
|
464
|
+
inherits: false;
|
|
465
|
+
}
|
|
466
|
+
@property --tw-shadow-alpha {
|
|
467
|
+
syntax: "<percentage>";
|
|
468
|
+
inherits: false;
|
|
469
|
+
initial-value: 100%;
|
|
470
|
+
}
|
|
471
|
+
@property --tw-inset-shadow {
|
|
472
|
+
syntax: "*";
|
|
473
|
+
inherits: false;
|
|
474
|
+
initial-value: 0 0 #0000;
|
|
475
|
+
}
|
|
476
|
+
@property --tw-inset-shadow-color {
|
|
477
|
+
syntax: "*";
|
|
478
|
+
inherits: false;
|
|
479
|
+
}
|
|
480
|
+
@property --tw-inset-shadow-alpha {
|
|
481
|
+
syntax: "<percentage>";
|
|
482
|
+
inherits: false;
|
|
483
|
+
initial-value: 100%;
|
|
484
|
+
}
|
|
485
|
+
@property --tw-ring-color {
|
|
486
|
+
syntax: "*";
|
|
487
|
+
inherits: false;
|
|
488
|
+
}
|
|
489
|
+
@property --tw-ring-shadow {
|
|
490
|
+
syntax: "*";
|
|
491
|
+
inherits: false;
|
|
492
|
+
initial-value: 0 0 #0000;
|
|
493
|
+
}
|
|
494
|
+
@property --tw-inset-ring-color {
|
|
495
|
+
syntax: "*";
|
|
496
|
+
inherits: false;
|
|
497
|
+
}
|
|
498
|
+
@property --tw-inset-ring-shadow {
|
|
499
|
+
syntax: "*";
|
|
500
|
+
inherits: false;
|
|
501
|
+
initial-value: 0 0 #0000;
|
|
502
|
+
}
|
|
503
|
+
@property --tw-ring-inset {
|
|
504
|
+
syntax: "*";
|
|
505
|
+
inherits: false;
|
|
506
|
+
}
|
|
507
|
+
@property --tw-ring-offset-width {
|
|
508
|
+
syntax: "<length>";
|
|
509
|
+
inherits: false;
|
|
510
|
+
initial-value: 0px;
|
|
511
|
+
}
|
|
512
|
+
@property --tw-ring-offset-color {
|
|
513
|
+
syntax: "*";
|
|
514
|
+
inherits: false;
|
|
515
|
+
initial-value: #fff;
|
|
516
|
+
}
|
|
517
|
+
@property --tw-ring-offset-shadow {
|
|
518
|
+
syntax: "*";
|
|
519
|
+
inherits: false;
|
|
520
|
+
initial-value: 0 0 #0000;
|
|
521
|
+
}
|
|
283
522
|
@property --tw-outline-style {
|
|
284
523
|
syntax: "*";
|
|
285
524
|
inherits: false;
|
|
@@ -338,6 +577,11 @@
|
|
|
338
577
|
syntax: "*";
|
|
339
578
|
inherits: false;
|
|
340
579
|
}
|
|
580
|
+
@keyframes spin {
|
|
581
|
+
to {
|
|
582
|
+
transform: rotate(360deg);
|
|
583
|
+
}
|
|
584
|
+
}
|
|
341
585
|
@layer properties {
|
|
342
586
|
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
|
|
343
587
|
*, ::before, ::after, ::backdrop {
|
|
@@ -347,6 +591,21 @@
|
|
|
347
591
|
--tw-skew-x: initial;
|
|
348
592
|
--tw-skew-y: initial;
|
|
349
593
|
--tw-border-style: solid;
|
|
594
|
+
--tw-font-weight: initial;
|
|
595
|
+
--tw-shadow: 0 0 #0000;
|
|
596
|
+
--tw-shadow-color: initial;
|
|
597
|
+
--tw-shadow-alpha: 100%;
|
|
598
|
+
--tw-inset-shadow: 0 0 #0000;
|
|
599
|
+
--tw-inset-shadow-color: initial;
|
|
600
|
+
--tw-inset-shadow-alpha: 100%;
|
|
601
|
+
--tw-ring-color: initial;
|
|
602
|
+
--tw-ring-shadow: 0 0 #0000;
|
|
603
|
+
--tw-inset-ring-color: initial;
|
|
604
|
+
--tw-inset-ring-shadow: 0 0 #0000;
|
|
605
|
+
--tw-ring-inset: initial;
|
|
606
|
+
--tw-ring-offset-width: 0px;
|
|
607
|
+
--tw-ring-offset-color: #fff;
|
|
608
|
+
--tw-ring-offset-shadow: 0 0 #0000;
|
|
350
609
|
--tw-outline-style: solid;
|
|
351
610
|
--tw-blur: initial;
|
|
352
611
|
--tw-brightness: initial;
|