@yuva-devlab/ui 1.4.3 → 1.4.4
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 +96 -136
- package/dist/components/calendar/calendar.css +238 -0
- package/dist/components/copy-button/copy-button.css +2 -0
- package/dist/components/date-picker/date-picker.css +9 -3
- package/dist/components/popover/popover.css +5 -0
- package/dist/components/secret-reveal-card/secret-reveal-card.css +3 -0
- package/dist/components.css +259 -3
- package/dist/index.cjs +60 -77
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +5 -1
- package/dist/index.d.ts +5 -1
- package/dist/index.js +60 -77
- package/dist/index.js.map +1 -1
- package/dist/styles/components.css +259 -3
- package/package.json +21 -2
|
@@ -486,6 +486,246 @@
|
|
|
486
486
|
text-decoration: underline;
|
|
487
487
|
}
|
|
488
488
|
|
|
489
|
+
/* ── calendar ── */
|
|
490
|
+
.dl-calendar {
|
|
491
|
+
--cell-size: 2rem;
|
|
492
|
+
display: inline-block;
|
|
493
|
+
width: fit-content;
|
|
494
|
+
max-width: 100%;
|
|
495
|
+
padding: 0.75rem;
|
|
496
|
+
box-sizing: border-box;
|
|
497
|
+
color: var(--foreground);
|
|
498
|
+
}
|
|
499
|
+
|
|
500
|
+
.dl-calendar .rdp-root {
|
|
501
|
+
width: fit-content;
|
|
502
|
+
margin: 0 auto;
|
|
503
|
+
}
|
|
504
|
+
|
|
505
|
+
.dl-calendar .rdp-months {
|
|
506
|
+
position: relative;
|
|
507
|
+
display: flex;
|
|
508
|
+
flex-direction: column;
|
|
509
|
+
gap: 1rem;
|
|
510
|
+
width: calc(var(--cell-size, 2rem) * 7);
|
|
511
|
+
box-sizing: border-box;
|
|
512
|
+
}
|
|
513
|
+
|
|
514
|
+
.dl-calendar .rdp-month {
|
|
515
|
+
display: flex;
|
|
516
|
+
flex-direction: column;
|
|
517
|
+
gap: 0.75rem;
|
|
518
|
+
width: 100%;
|
|
519
|
+
}
|
|
520
|
+
|
|
521
|
+
.dl-calendar .rdp-month_caption {
|
|
522
|
+
position: relative;
|
|
523
|
+
display: flex;
|
|
524
|
+
height: var(--cell-size, 2rem);
|
|
525
|
+
width: 100%;
|
|
526
|
+
align-items: center;
|
|
527
|
+
justify-content: center;
|
|
528
|
+
padding: 0 var(--cell-size, 2rem);
|
|
529
|
+
font-size: 0.875rem;
|
|
530
|
+
font-weight: 600;
|
|
531
|
+
color: var(--foreground);
|
|
532
|
+
box-sizing: border-box;
|
|
533
|
+
}
|
|
534
|
+
|
|
535
|
+
.dl-calendar .rdp-caption_label {
|
|
536
|
+
font-size: 0.875rem;
|
|
537
|
+
font-weight: 600;
|
|
538
|
+
color: var(--foreground);
|
|
539
|
+
line-height: 1;
|
|
540
|
+
}
|
|
541
|
+
|
|
542
|
+
/* Navigation prev / next arrows */
|
|
543
|
+
.dl-calendar .rdp-nav {
|
|
544
|
+
position: absolute;
|
|
545
|
+
top: 0;
|
|
546
|
+
left: 0;
|
|
547
|
+
right: 0;
|
|
548
|
+
display: flex;
|
|
549
|
+
align-items: center;
|
|
550
|
+
justify-content: space-between;
|
|
551
|
+
width: 100%;
|
|
552
|
+
height: var(--cell-size, 2rem);
|
|
553
|
+
pointer-events: none;
|
|
554
|
+
}
|
|
555
|
+
|
|
556
|
+
.dl-calendar .rdp-button_previous,
|
|
557
|
+
.dl-calendar .rdp-button_next {
|
|
558
|
+
pointer-events: auto;
|
|
559
|
+
width: var(--cell-size, 2rem) !important;
|
|
560
|
+
height: var(--cell-size, 2rem) !important;
|
|
561
|
+
min-width: var(--cell-size, 2rem) !important;
|
|
562
|
+
padding: 0 !important;
|
|
563
|
+
display: inline-flex !important;
|
|
564
|
+
align-items: center;
|
|
565
|
+
justify-content: center;
|
|
566
|
+
border-radius: var(--radius-md, 0.375rem) !important;
|
|
567
|
+
border: 1px solid var(--border);
|
|
568
|
+
background: var(--background);
|
|
569
|
+
color: var(--muted-foreground);
|
|
570
|
+
cursor: pointer;
|
|
571
|
+
transition: all 0.15s ease;
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
.dl-calendar .rdp-button_previous:hover,
|
|
575
|
+
.dl-calendar .rdp-button_next:hover {
|
|
576
|
+
background-color: var(--accent);
|
|
577
|
+
color: var(--accent-foreground);
|
|
578
|
+
}
|
|
579
|
+
|
|
580
|
+
.dl-calendar .rdp-button_previous svg,
|
|
581
|
+
.dl-calendar .rdp-button_next svg {
|
|
582
|
+
width: 1rem;
|
|
583
|
+
height: 1rem;
|
|
584
|
+
flex-shrink: 0;
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
/* Grid Table */
|
|
588
|
+
.dl-calendar table.rdp-month_grid,
|
|
589
|
+
.dl-calendar table {
|
|
590
|
+
width: 100%;
|
|
591
|
+
border-collapse: collapse;
|
|
592
|
+
table-layout: fixed;
|
|
593
|
+
margin: 0;
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
/* Weekday header cells */
|
|
597
|
+
.dl-calendar th.rdp-weekday,
|
|
598
|
+
.dl-calendar th {
|
|
599
|
+
width: calc(100% / 7);
|
|
600
|
+
height: var(--cell-size, 2rem);
|
|
601
|
+
text-align: center;
|
|
602
|
+
vertical-align: middle;
|
|
603
|
+
font-size: 0.75rem;
|
|
604
|
+
font-weight: 500;
|
|
605
|
+
color: var(--muted-foreground);
|
|
606
|
+
padding: 0;
|
|
607
|
+
margin: 0;
|
|
608
|
+
box-sizing: border-box;
|
|
609
|
+
}
|
|
610
|
+
|
|
611
|
+
/* Day table cells */
|
|
612
|
+
.dl-calendar td.rdp-day,
|
|
613
|
+
.dl-calendar td {
|
|
614
|
+
width: calc(100% / 7);
|
|
615
|
+
height: var(--cell-size, 2rem);
|
|
616
|
+
padding: 2px !important;
|
|
617
|
+
margin: 0;
|
|
618
|
+
text-align: center;
|
|
619
|
+
vertical-align: middle;
|
|
620
|
+
background: transparent !important;
|
|
621
|
+
background-color: transparent !important;
|
|
622
|
+
border: none !important;
|
|
623
|
+
box-sizing: border-box;
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
/* Day Button inside td */
|
|
627
|
+
.dl-calendar button.rdp-day_button,
|
|
628
|
+
.dl-calendar .dl-calendar__day-button {
|
|
629
|
+
width: 100% !important;
|
|
630
|
+
height: 100% !important;
|
|
631
|
+
min-width: 0 !important;
|
|
632
|
+
min-height: 0 !important;
|
|
633
|
+
margin: 0 auto !important;
|
|
634
|
+
padding: 0 !important;
|
|
635
|
+
display: inline-flex !important;
|
|
636
|
+
align-items: center;
|
|
637
|
+
justify-content: center;
|
|
638
|
+
border-radius: var(--radius-md, 0.375rem) !important;
|
|
639
|
+
border: none !important;
|
|
640
|
+
font-size: 0.875rem;
|
|
641
|
+
font-weight: 400;
|
|
642
|
+
color: var(--foreground);
|
|
643
|
+
background: transparent;
|
|
644
|
+
cursor: pointer;
|
|
645
|
+
box-sizing: border-box;
|
|
646
|
+
transition: all 0.15s ease;
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
.dl-calendar button.rdp-day_button:hover:not(:disabled) {
|
|
650
|
+
background-color: var(--accent) !important;
|
|
651
|
+
color: var(--accent-foreground) !important;
|
|
652
|
+
}
|
|
653
|
+
|
|
654
|
+
/* Selected Date Highlight */
|
|
655
|
+
.dl-calendar td[aria-selected="true"] button.rdp-day_button,
|
|
656
|
+
.dl-calendar td.rdp-selected button.rdp-day_button,
|
|
657
|
+
.dl-calendar button.rdp-day_button[data-selected="true"],
|
|
658
|
+
.dl-calendar button.rdp-day_button[data-selected-single="true"] {
|
|
659
|
+
background-color: var(--primary) !important;
|
|
660
|
+
color: var(--primary-foreground) !important;
|
|
661
|
+
border-radius: var(--radius-md, 0.375rem) !important;
|
|
662
|
+
font-weight: 600;
|
|
663
|
+
box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
|
|
664
|
+
}
|
|
665
|
+
|
|
666
|
+
.dl-calendar td[aria-selected="true"] button.rdp-day_button:hover,
|
|
667
|
+
.dl-calendar td.rdp-selected button.rdp-day_button:hover,
|
|
668
|
+
.dl-calendar button.rdp-day_button[data-selected="true"]:hover,
|
|
669
|
+
.dl-calendar button.rdp-day_button[data-selected-single="true"]:hover {
|
|
670
|
+
background-color: color-mix(in oklch, var(--primary) 88%, black) !important;
|
|
671
|
+
color: var(--primary-foreground) !important;
|
|
672
|
+
}
|
|
673
|
+
|
|
674
|
+
/* Today indicator (when not selected) */
|
|
675
|
+
.dl-calendar
|
|
676
|
+
td.rdp-today:not([aria-selected="true"]):not(.rdp-selected)
|
|
677
|
+
button.rdp-day_button {
|
|
678
|
+
background-color: color-mix(
|
|
679
|
+
in oklch,
|
|
680
|
+
var(--secondary) 60%,
|
|
681
|
+
transparent
|
|
682
|
+
) !important;
|
|
683
|
+
color: var(--foreground) !important;
|
|
684
|
+
font-weight: 600;
|
|
685
|
+
border: 1px solid var(--border) !important;
|
|
686
|
+
}
|
|
687
|
+
|
|
688
|
+
/* Range selection styles */
|
|
689
|
+
.dl-calendar td.rdp-range_start {
|
|
690
|
+
background-color: var(--accent) !important;
|
|
691
|
+
border-top-left-radius: var(--radius-md, 0.375rem) !important;
|
|
692
|
+
border-bottom-left-radius: var(--radius-md, 0.375rem) !important;
|
|
693
|
+
}
|
|
694
|
+
|
|
695
|
+
.dl-calendar td.rdp-range_middle {
|
|
696
|
+
background-color: var(--accent) !important;
|
|
697
|
+
border-radius: 0 !important;
|
|
698
|
+
}
|
|
699
|
+
|
|
700
|
+
.dl-calendar td.rdp-range_middle button.rdp-day_button {
|
|
701
|
+
background: transparent !important;
|
|
702
|
+
color: var(--accent-foreground) !important;
|
|
703
|
+
border-radius: 0 !important;
|
|
704
|
+
}
|
|
705
|
+
|
|
706
|
+
.dl-calendar td.rdp-range_end {
|
|
707
|
+
background-color: var(--accent) !important;
|
|
708
|
+
border-top-right-radius: var(--radius-md, 0.375rem) !important;
|
|
709
|
+
border-bottom-right-radius: var(--radius-md, 0.375rem) !important;
|
|
710
|
+
}
|
|
711
|
+
|
|
712
|
+
.dl-calendar td.rdp-outside button.rdp-day_button {
|
|
713
|
+
color: var(--muted-foreground) !important;
|
|
714
|
+
opacity: 0.35;
|
|
715
|
+
}
|
|
716
|
+
|
|
717
|
+
.dl-calendar button.rdp-day_button:disabled {
|
|
718
|
+
color: var(--muted-foreground) !important;
|
|
719
|
+
opacity: 0.25;
|
|
720
|
+
cursor: not-allowed;
|
|
721
|
+
pointer-events: none;
|
|
722
|
+
}
|
|
723
|
+
|
|
724
|
+
.dl-calendar td.rdp-hidden {
|
|
725
|
+
visibility: hidden;
|
|
726
|
+
pointer-events: none;
|
|
727
|
+
}
|
|
728
|
+
|
|
489
729
|
/* ── card ── */
|
|
490
730
|
.dl-card {
|
|
491
731
|
border-radius: var(--radius-lg, 0.5rem);
|
|
@@ -820,6 +1060,8 @@
|
|
|
820
1060
|
cursor: pointer;
|
|
821
1061
|
transition: all 0.15s ease;
|
|
822
1062
|
user-select: none;
|
|
1063
|
+
white-space: nowrap;
|
|
1064
|
+
flex-shrink: 0;
|
|
823
1065
|
}
|
|
824
1066
|
|
|
825
1067
|
.dl-copy-button:hover {
|
|
@@ -865,9 +1107,15 @@
|
|
|
865
1107
|
flex-shrink: 0;
|
|
866
1108
|
}
|
|
867
1109
|
|
|
868
|
-
.dl-date-picker-content
|
|
869
|
-
|
|
870
|
-
|
|
1110
|
+
.dl-date-picker-content,
|
|
1111
|
+
.dl-popover.dl-date-picker-content {
|
|
1112
|
+
width: fit-content !important;
|
|
1113
|
+
max-width: fit-content !important;
|
|
1114
|
+
padding: 0 !important;
|
|
1115
|
+
box-shadow: 0 4px 20px rgb(0 0 0 / 0.15);
|
|
1116
|
+
border-radius: var(--radius-lg, 0.5rem);
|
|
1117
|
+
border: 1px solid var(--border);
|
|
1118
|
+
background-color: var(--popover);
|
|
871
1119
|
}
|
|
872
1120
|
|
|
873
1121
|
/* ── dialog ── */
|
|
@@ -1755,6 +2003,11 @@
|
|
|
1755
2003
|
animation: dl-fade-out 150ms ease;
|
|
1756
2004
|
}
|
|
1757
2005
|
|
|
2006
|
+
.dl-popover.dl-date-picker-content {
|
|
2007
|
+
width: auto;
|
|
2008
|
+
padding: 0;
|
|
2009
|
+
}
|
|
2010
|
+
|
|
1758
2011
|
/* ── progress ── */
|
|
1759
2012
|
.dl-progress {
|
|
1760
2013
|
position: relative;
|
|
@@ -2073,6 +2326,7 @@
|
|
|
2073
2326
|
border: 1px solid var(--border);
|
|
2074
2327
|
border-radius: calc(var(--radius, 0.5rem) - 2px);
|
|
2075
2328
|
padding: 0.5rem 0.75rem;
|
|
2329
|
+
flex-wrap: nowrap;
|
|
2076
2330
|
}
|
|
2077
2331
|
|
|
2078
2332
|
.dl-secret-reveal__code {
|
|
@@ -2081,6 +2335,8 @@
|
|
|
2081
2335
|
color: var(--primary);
|
|
2082
2336
|
word-break: break-all;
|
|
2083
2337
|
user-select: all;
|
|
2338
|
+
min-width: 0;
|
|
2339
|
+
flex: 1;
|
|
2084
2340
|
}
|
|
2085
2341
|
|
|
2086
2342
|
/* ── select ── */
|
package/package.json
CHANGED
|
@@ -1,6 +1,25 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yuva-devlab/ui",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.4",
|
|
4
|
+
"description": "Production-ready, accessible React 19 component library built on Radix UI and Tailwind CSS 4 design tokens for Yuva DevLab",
|
|
5
|
+
"repository": {
|
|
6
|
+
"type": "git",
|
|
7
|
+
"url": "https://github.com/yuvadevlab/devlab-shared.git",
|
|
8
|
+
"directory": "packages/ui"
|
|
9
|
+
},
|
|
10
|
+
"bugs": {
|
|
11
|
+
"url": "https://github.com/yuvadevlab/devlab-shared/issues"
|
|
12
|
+
},
|
|
13
|
+
"keywords": [
|
|
14
|
+
"react",
|
|
15
|
+
"react-19",
|
|
16
|
+
"ui",
|
|
17
|
+
"components",
|
|
18
|
+
"radix-ui",
|
|
19
|
+
"tailwindcss",
|
|
20
|
+
"design-system",
|
|
21
|
+
"devlab"
|
|
22
|
+
],
|
|
4
23
|
"type": "module",
|
|
5
24
|
"main": "./dist/index.cjs",
|
|
6
25
|
"module": "./dist/index.js",
|
|
@@ -72,7 +91,7 @@
|
|
|
72
91
|
"tailwind-merge": "^3.5.0",
|
|
73
92
|
"vaul": "^1.1.2",
|
|
74
93
|
"zod": "^3.25.76",
|
|
75
|
-
"@yuva-devlab/tokens": "1.3.
|
|
94
|
+
"@yuva-devlab/tokens": "1.3.1"
|
|
76
95
|
},
|
|
77
96
|
"devDependencies": {
|
|
78
97
|
"@storybook/react": "^8.6.14",
|