@julseb-lib/react 1.1.33 → 1.1.34
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/{Image-YXIP4TUI.js → Image-N6SBVL55.js} +2 -2
- package/dist/{chunk-CIZBB6QC.js → chunk-AXOMYMGN.js} +83 -1
- package/dist/chunk-AXOMYMGN.js.map +1 -0
- package/dist/{global-CXiIaXyy.d.cts → global-BFS193oO.d.cts} +83 -0
- package/dist/{global-CXiIaXyy.d.ts → global-BFS193oO.d.ts} +83 -0
- package/dist/index.cjs +82 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +286 -4
- package/dist/index.d.ts +286 -4
- package/dist/index.js +2 -2
- package/dist/types/components-items-props.d.cts +1 -1
- package/dist/types/components-items-props.d.ts +1 -1
- package/dist/types/components-props.d.cts +1 -1
- package/dist/types/components-props.d.ts +1 -1
- package/dist/types/global.d.cts +1 -1
- package/dist/types/global.d.ts +1 -1
- package/dist/types/index.d.cts +1 -1
- package/dist/types/index.d.ts +1 -1
- package/package.json +1 -1
- package/dist/chunk-CIZBB6QC.js.map +0 -1
- /package/dist/{Image-YXIP4TUI.js.map → Image-N6SBVL55.js.map} +0 -0
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { Dispatch, SetStateAction, ReactNode, FunctionComponent, HTMLAttributes, ElementType, RefObject, CSSProperties as CSSProperties$1, ReactElement as ReactElement$1 } from 'react';
|
|
2
2
|
import { Property } from 'csstype';
|
|
3
3
|
|
|
4
|
+
/** Design tokens used across the component library for consistent styling. */
|
|
4
5
|
declare const designTokens: {
|
|
5
6
|
readonly libColors: {
|
|
6
7
|
/**
|
|
@@ -324,6 +325,15 @@ declare const designTokens: {
|
|
|
324
325
|
readonly bold: "bold";
|
|
325
326
|
readonly black: "black";
|
|
326
327
|
};
|
|
328
|
+
/**
|
|
329
|
+
* Letter spacing (tracking) values.
|
|
330
|
+
* Tighter — -0.05em
|
|
331
|
+
* Tight — -0.025em
|
|
332
|
+
* Normal — 0em
|
|
333
|
+
* Wide — 0.025em
|
|
334
|
+
* Wider — 0.05em
|
|
335
|
+
* Widest — 0.1em
|
|
336
|
+
*/
|
|
327
337
|
readonly libTracking: {
|
|
328
338
|
readonly tighter: "tighter";
|
|
329
339
|
readonly tight: "tight";
|
|
@@ -332,6 +342,15 @@ declare const designTokens: {
|
|
|
332
342
|
readonly wider: "wider";
|
|
333
343
|
readonly widest: "widest";
|
|
334
344
|
};
|
|
345
|
+
/**
|
|
346
|
+
* Line height (leading) values.
|
|
347
|
+
* Tight — 1.25
|
|
348
|
+
* Snug — 1.375
|
|
349
|
+
* Normal — 1.5
|
|
350
|
+
* Relaxed — 1.625
|
|
351
|
+
* Loose — 2
|
|
352
|
+
* None — 1
|
|
353
|
+
*/
|
|
335
354
|
readonly libLeading: {
|
|
336
355
|
readonly tight: "tight";
|
|
337
356
|
readonly snug: "snug";
|
|
@@ -340,6 +359,18 @@ declare const designTokens: {
|
|
|
340
359
|
readonly loose: "loose";
|
|
341
360
|
readonly none: "none";
|
|
342
361
|
};
|
|
362
|
+
/**
|
|
363
|
+
* Border radius values.
|
|
364
|
+
* xs — 0.125rem
|
|
365
|
+
* sm — 0.25rem
|
|
366
|
+
* md — 0.375rem
|
|
367
|
+
* lg — 0.5rem
|
|
368
|
+
* xl — 0.75rem
|
|
369
|
+
* 2xl — 1rem
|
|
370
|
+
* 3xl — 1.5rem
|
|
371
|
+
* 4xl — 2rem
|
|
372
|
+
* full — 9999px
|
|
373
|
+
*/
|
|
343
374
|
readonly libRadius: {
|
|
344
375
|
readonly xs: "xs";
|
|
345
376
|
readonly sm: "sm";
|
|
@@ -351,6 +382,7 @@ declare const designTokens: {
|
|
|
351
382
|
readonly "4xl": "4xl";
|
|
352
383
|
readonly full: "full";
|
|
353
384
|
};
|
|
385
|
+
/** Box shadow size values. */
|
|
354
386
|
readonly libShadows: {
|
|
355
387
|
readonly "2xs": "2xs";
|
|
356
388
|
readonly xs: "xs";
|
|
@@ -361,11 +393,13 @@ declare const designTokens: {
|
|
|
361
393
|
readonly "2xl": "2xl";
|
|
362
394
|
readonly none: "none";
|
|
363
395
|
};
|
|
396
|
+
/** Inset (inner) shadow size values. */
|
|
364
397
|
readonly libInsetShadows: {
|
|
365
398
|
readonly "2xs": "2xs";
|
|
366
399
|
readonly xs: "xs";
|
|
367
400
|
readonly sm: "sm";
|
|
368
401
|
};
|
|
402
|
+
/** Drop shadow filter size values. */
|
|
369
403
|
readonly libDropShadows: {
|
|
370
404
|
readonly xs: "xs";
|
|
371
405
|
readonly sm: "sm";
|
|
@@ -374,6 +408,7 @@ declare const designTokens: {
|
|
|
374
408
|
readonly xl: "xl";
|
|
375
409
|
readonly "2xl": "2xl";
|
|
376
410
|
};
|
|
411
|
+
/** Text shadow size values. */
|
|
377
412
|
readonly libTextShadow: {
|
|
378
413
|
readonly "2xs": "2xs";
|
|
379
414
|
readonly xs: "xs";
|
|
@@ -381,17 +416,20 @@ declare const designTokens: {
|
|
|
381
416
|
readonly md: "md";
|
|
382
417
|
readonly lg: "lg";
|
|
383
418
|
};
|
|
419
|
+
/** CSS transition timing function values. */
|
|
384
420
|
readonly libTransitionTimingFunctions: {
|
|
385
421
|
readonly "--ease-in": "--ease-in";
|
|
386
422
|
readonly "--ease-out": "--ease-out";
|
|
387
423
|
readonly "--ease-in-out": "--ease-in-out";
|
|
388
424
|
};
|
|
425
|
+
/** CSS animation presets. */
|
|
389
426
|
readonly libAnimate: {
|
|
390
427
|
readonly spin: "spin";
|
|
391
428
|
readonly ping: "ping";
|
|
392
429
|
readonly pulse: "pulse";
|
|
393
430
|
readonly bounce: "bounce";
|
|
394
431
|
};
|
|
432
|
+
/** Blur filter size values. */
|
|
395
433
|
readonly libBlur: {
|
|
396
434
|
readonly xs: "xs";
|
|
397
435
|
readonly sm: "sm";
|
|
@@ -401,6 +439,7 @@ declare const designTokens: {
|
|
|
401
439
|
readonly "2xl": "2xl";
|
|
402
440
|
readonly "3xl": "3xl";
|
|
403
441
|
};
|
|
442
|
+
/** CSS perspective distance values for 3D transforms. */
|
|
404
443
|
readonly libPerspective: {
|
|
405
444
|
readonly dramatic: "dramatic";
|
|
406
445
|
readonly near: "near";
|
|
@@ -408,7 +447,9 @@ declare const designTokens: {
|
|
|
408
447
|
readonly midrange: "midrange";
|
|
409
448
|
readonly distant: "distant";
|
|
410
449
|
};
|
|
450
|
+
/** Video aspect ratio token (16:9). */
|
|
411
451
|
readonly libAspectVideo: {};
|
|
452
|
+
/** Display heading tags (h1–h5) reference. */
|
|
412
453
|
readonly libTextDisplayTags: {
|
|
413
454
|
h1: string;
|
|
414
455
|
h2: string;
|
|
@@ -416,6 +457,7 @@ declare const designTokens: {
|
|
|
416
457
|
h4: string;
|
|
417
458
|
h5: string;
|
|
418
459
|
};
|
|
460
|
+
/** Text-level HTML element tags (h6, p, strong, em, small, blockquote, ul, ol, dl). */
|
|
419
461
|
readonly libTextTags: {
|
|
420
462
|
readonly h6: "h6";
|
|
421
463
|
readonly p: "p";
|
|
@@ -427,6 +469,7 @@ declare const designTokens: {
|
|
|
427
469
|
readonly ol: "ol";
|
|
428
470
|
readonly dl: "dl";
|
|
429
471
|
};
|
|
472
|
+
/** CSS transition property targets. */
|
|
430
473
|
readonly libTransitions: {
|
|
431
474
|
readonly none: "none";
|
|
432
475
|
readonly all: "all";
|
|
@@ -436,27 +479,33 @@ declare const designTokens: {
|
|
|
436
479
|
readonly shadow: "shadow";
|
|
437
480
|
readonly transform: "transform";
|
|
438
481
|
};
|
|
482
|
+
/** Color theme modes. */
|
|
439
483
|
readonly libThemes: {
|
|
440
484
|
readonly light: "light";
|
|
441
485
|
readonly dark: "dark";
|
|
442
486
|
};
|
|
487
|
+
/** Input field border radius variants. */
|
|
443
488
|
readonly libInputVariants: {
|
|
444
489
|
readonly rounded: "rounded";
|
|
445
490
|
readonly pill: "pill";
|
|
446
491
|
};
|
|
492
|
+
/** Input field background color modes. */
|
|
447
493
|
readonly libInputBackgrounds: {
|
|
448
494
|
readonly light: "light";
|
|
449
495
|
readonly dark: "dark";
|
|
450
496
|
};
|
|
497
|
+
/** Main content area width presets. */
|
|
451
498
|
readonly libMainSizes: {
|
|
452
499
|
readonly default: "default";
|
|
453
500
|
readonly large: "large";
|
|
454
501
|
readonly form: "form";
|
|
455
502
|
};
|
|
503
|
+
/** Aside panel width presets. */
|
|
456
504
|
readonly libAsideSizes: {
|
|
457
505
|
readonly default: "default";
|
|
458
506
|
readonly small: "small";
|
|
459
507
|
};
|
|
508
|
+
/** Z-index layer values (0–50, with negative counterparts). */
|
|
460
509
|
readonly libZIndex: {
|
|
461
510
|
readonly "0": "0";
|
|
462
511
|
readonly "10": "10";
|
|
@@ -471,11 +520,13 @@ declare const designTokens: {
|
|
|
471
520
|
readonly "-40": "-40";
|
|
472
521
|
readonly "-50": "-50";
|
|
473
522
|
};
|
|
523
|
+
/** CSS position property values. */
|
|
474
524
|
readonly libPosition: {
|
|
475
525
|
readonly relative: "relative";
|
|
476
526
|
readonly absolute: "absolute";
|
|
477
527
|
readonly fixed: "fixed";
|
|
478
528
|
};
|
|
529
|
+
/** Minimum height sizing values. */
|
|
479
530
|
readonly libMinHeights: {
|
|
480
531
|
readonly px: "px";
|
|
481
532
|
readonly full: "full";
|
|
@@ -492,10 +543,12 @@ declare const designTokens: {
|
|
|
492
543
|
readonly fit: "fit";
|
|
493
544
|
readonly lh: "lh";
|
|
494
545
|
};
|
|
546
|
+
/** Keyboard Key component size variants. */
|
|
495
547
|
readonly libKeySizes: {
|
|
496
548
|
readonly large: "large";
|
|
497
549
|
readonly small: "small";
|
|
498
550
|
};
|
|
551
|
+
/** Maximum width sizing values. */
|
|
499
552
|
readonly libMaxWidths: {
|
|
500
553
|
readonly "3xs": "3xs";
|
|
501
554
|
readonly "2xs": "2xs";
|
|
@@ -524,43 +577,52 @@ declare const designTokens: {
|
|
|
524
577
|
readonly max: "max";
|
|
525
578
|
readonly fit: "fit";
|
|
526
579
|
};
|
|
580
|
+
/** Skeleton loading animation styles. */
|
|
527
581
|
readonly libSkeletonAnimations: {
|
|
528
582
|
readonly pulse: "pulse";
|
|
529
583
|
readonly shine: "shine";
|
|
530
584
|
readonly none: "none";
|
|
531
585
|
};
|
|
586
|
+
/** Tooltip positioning options. */
|
|
532
587
|
readonly libTooltipPositions: {
|
|
533
588
|
readonly top: "top";
|
|
534
589
|
readonly bottom: "bottom";
|
|
535
590
|
readonly left: "left";
|
|
536
591
|
readonly right: "right";
|
|
537
592
|
};
|
|
593
|
+
/** Tooltip trigger interaction modes. */
|
|
538
594
|
readonly libTooltipTriggers: {
|
|
539
595
|
readonly hover: "hover";
|
|
540
596
|
readonly click: "click";
|
|
541
597
|
};
|
|
598
|
+
/** Loader spinner visual variants. */
|
|
542
599
|
readonly libLoaderVariants: {
|
|
543
600
|
readonly 1: 1;
|
|
544
601
|
readonly 2: 2;
|
|
545
602
|
readonly 3: 3;
|
|
546
603
|
};
|
|
604
|
+
/** Button visual style variants. */
|
|
547
605
|
readonly libButtonVariants: {
|
|
548
606
|
readonly plain: "plain";
|
|
549
607
|
readonly ghost: "ghost";
|
|
550
608
|
readonly transparent: "transparent";
|
|
551
609
|
};
|
|
610
|
+
/** Button size presets. */
|
|
552
611
|
readonly libButtonSize: {
|
|
553
612
|
readonly default: "default";
|
|
554
613
|
readonly small: "small";
|
|
555
614
|
};
|
|
615
|
+
/** ButtonGroup toggle selection modes (single or multi). */
|
|
556
616
|
readonly libButtonGroupToggle: {
|
|
557
617
|
readonly single: "single";
|
|
558
618
|
readonly multi: "multi";
|
|
559
619
|
};
|
|
620
|
+
/** Tag visual style variants. */
|
|
560
621
|
readonly libTagVariant: {
|
|
561
622
|
readonly plain: "plain";
|
|
562
623
|
readonly outline: "outline";
|
|
563
624
|
};
|
|
625
|
+
/** HTML input type values supported by the Input component. */
|
|
564
626
|
readonly libInputTypes: {
|
|
565
627
|
readonly color: "color";
|
|
566
628
|
readonly date: "date";
|
|
@@ -579,23 +641,28 @@ declare const designTokens: {
|
|
|
579
641
|
readonly select: "select";
|
|
580
642
|
readonly textarea: "textarea";
|
|
581
643
|
};
|
|
644
|
+
/** Checkbox/radio input visual variants (tile, toggle, selector). */
|
|
582
645
|
readonly libCheckInputVariants: {
|
|
583
646
|
readonly tile: "tile";
|
|
584
647
|
readonly toggle: "toggle";
|
|
585
648
|
readonly selector: "selector";
|
|
586
649
|
};
|
|
650
|
+
/** Dropdown list expansion direction. */
|
|
587
651
|
readonly libListInputDirections: {
|
|
588
652
|
readonly up: "up";
|
|
589
653
|
readonly down: "down";
|
|
590
654
|
};
|
|
655
|
+
/** Accordion visual style variants. */
|
|
591
656
|
readonly libAccordionVariant: {
|
|
592
657
|
readonly basic: "basic";
|
|
593
658
|
readonly rounded: "rounded";
|
|
594
659
|
};
|
|
660
|
+
/** Accordion expand/collapse icon styles. */
|
|
595
661
|
readonly libAccordionIcon: {
|
|
596
662
|
readonly plus: "plus";
|
|
597
663
|
readonly chevron: "chevron";
|
|
598
664
|
};
|
|
665
|
+
/** Toast notification status types. */
|
|
599
666
|
readonly libToastStatus: {
|
|
600
667
|
readonly success: "success";
|
|
601
668
|
readonly error: "error";
|
|
@@ -603,42 +670,51 @@ declare const designTokens: {
|
|
|
603
670
|
readonly info: "info";
|
|
604
671
|
readonly loading: "loading";
|
|
605
672
|
};
|
|
673
|
+
/** Tabs button alignment options. */
|
|
606
674
|
readonly libTabsJustify: {
|
|
607
675
|
readonly start: "start";
|
|
608
676
|
readonly stretch: "stretch";
|
|
609
677
|
};
|
|
678
|
+
/** Tabs visual style variants. */
|
|
610
679
|
readonly libTabsVariant: {
|
|
611
680
|
readonly basic: "basic";
|
|
612
681
|
readonly rounded: "rounded";
|
|
613
682
|
};
|
|
683
|
+
/** Slideshow pagination indicator styles. */
|
|
614
684
|
readonly libSlideshowPagination: {
|
|
615
685
|
readonly dots: "dots";
|
|
616
686
|
readonly "dots-outline": "dots-outline";
|
|
617
687
|
readonly bars: "bars";
|
|
618
688
|
readonly thumbnails: "thumbnails";
|
|
619
689
|
};
|
|
690
|
+
/** Slideshow pagination placement (inside or outside the slide area). */
|
|
620
691
|
readonly libSlideshowPaginationPosition: {
|
|
621
692
|
readonly inside: "inside";
|
|
622
693
|
readonly outside: "outside";
|
|
623
694
|
};
|
|
695
|
+
/** Slideshow navigation button alignment. */
|
|
624
696
|
readonly libSlideshowButtonsPositions: {
|
|
625
697
|
readonly left: "left";
|
|
626
698
|
readonly right: "right";
|
|
627
699
|
};
|
|
700
|
+
/** Slideshow navigation button size presets. */
|
|
628
701
|
readonly libSlideshowButtonsSizes: {
|
|
629
702
|
readonly small: "small";
|
|
630
703
|
readonly large: "large";
|
|
631
704
|
};
|
|
705
|
+
/** Table visual style variants. */
|
|
632
706
|
readonly libTableVariants: {
|
|
633
707
|
readonly bordered: "bordered";
|
|
634
708
|
readonly stripped: "stripped";
|
|
635
709
|
readonly "border-bottom": "border-bottom";
|
|
636
710
|
};
|
|
711
|
+
/** Markdown editor view modes (code, live preview, preview only). */
|
|
637
712
|
readonly libMdEditorViews: {
|
|
638
713
|
readonly viewCode: "viewCode";
|
|
639
714
|
readonly viewLive: "viewLive";
|
|
640
715
|
readonly viewPreview: "viewPreview";
|
|
641
716
|
};
|
|
717
|
+
/** Markdown editor toolbar formatting buttons. */
|
|
642
718
|
readonly libMdEditorButtons: {
|
|
643
719
|
readonly bold: "bold";
|
|
644
720
|
readonly italic: "italic";
|
|
@@ -654,6 +730,7 @@ declare const designTokens: {
|
|
|
654
730
|
readonly comment: "comment";
|
|
655
731
|
readonly image: "image";
|
|
656
732
|
};
|
|
733
|
+
/** Markdown editor heading level options (h1–h6). */
|
|
657
734
|
readonly libMdEditorTitles: {
|
|
658
735
|
readonly h6: "h6";
|
|
659
736
|
readonly h1: string;
|
|
@@ -662,27 +739,33 @@ declare const designTokens: {
|
|
|
662
739
|
readonly h4: string;
|
|
663
740
|
readonly h5: string;
|
|
664
741
|
};
|
|
742
|
+
/** Drawer panel slide-in positions. */
|
|
665
743
|
readonly libDrawerPositions: {
|
|
666
744
|
readonly left: "left";
|
|
667
745
|
readonly right: "right";
|
|
668
746
|
};
|
|
747
|
+
/** Mobile navigation burger button position. */
|
|
669
748
|
readonly libNavBurgerPositions: {
|
|
670
749
|
readonly left: "left";
|
|
671
750
|
readonly right: "right";
|
|
672
751
|
};
|
|
752
|
+
/** Mobile navigation display variants. */
|
|
673
753
|
readonly libNavMobileVariants: {
|
|
674
754
|
readonly full: "full";
|
|
675
755
|
readonly top: "top";
|
|
676
756
|
readonly drawer: "drawer";
|
|
677
757
|
};
|
|
758
|
+
/** Footer links layout direction. */
|
|
678
759
|
readonly libFooterDirection: {
|
|
679
760
|
readonly horizontal: "horizontal";
|
|
680
761
|
readonly vertical: "vertical";
|
|
681
762
|
};
|
|
763
|
+
/** Footer links separator character styles. */
|
|
682
764
|
readonly libFooterLinksSeparator: {
|
|
683
765
|
readonly dot: "dot";
|
|
684
766
|
readonly dash: "dash";
|
|
685
767
|
};
|
|
768
|
+
/** ISO 3166-1 alpha-2 country codes for the InputPhone component. */
|
|
686
769
|
readonly libCountryCodes: {
|
|
687
770
|
readonly af: "af";
|
|
688
771
|
readonly ax: "ax";
|