@yuva-devlab/ui 1.2.0 → 1.3.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/dist/components/alert/alert.css +31 -9
- package/dist/components/alert/alert.mdx +26 -0
- package/dist/components/alert-dialog/alert-dialog.css +9 -3
- package/dist/components/avatar/avatar.mdx +18 -0
- package/dist/components/badge/badge.mdx +24 -0
- package/dist/components/button/button.mdx +40 -0
- package/dist/components/card/card.mdx +18 -0
- package/dist/components/checkbox/checkbox.mdx +22 -0
- package/dist/components/dialog/dialog.css +77 -10
- package/dist/components/dialog/dialog.mdx +18 -0
- package/dist/components/input/input.mdx +30 -0
- package/dist/components/progress/progress.mdx +18 -0
- package/dist/components/select/select.mdx +18 -0
- package/dist/components/skeleton/skeleton.mdx +18 -0
- package/dist/components/sonner/sonner.mdx +22 -0
- package/dist/components/status-badge/status-badge.mdx +24 -0
- package/dist/components/switch/switch.mdx +22 -0
- package/dist/components/table/table.mdx +18 -0
- package/dist/components/tabs/tabs.mdx +18 -0
- package/dist/components.css +117 -22
- package/dist/index.cjs +15 -16
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +38 -5
- package/dist/index.d.ts +38 -5
- package/dist/index.js +14 -16
- package/dist/index.js.map +1 -1
- package/dist/styles/components.css +117 -22
- package/package.json +2 -1
|
@@ -62,43 +62,65 @@
|
|
|
62
62
|
width: 100%;
|
|
63
63
|
border-radius: var(--radius-lg, 0.5rem);
|
|
64
64
|
border: 1px solid var(--border);
|
|
65
|
-
padding: 1rem;
|
|
65
|
+
padding: 0.875rem 1rem;
|
|
66
66
|
font-size: 0.875rem;
|
|
67
67
|
display: grid;
|
|
68
|
-
grid-template-columns:
|
|
69
|
-
gap: 0
|
|
68
|
+
grid-template-columns: 1fr;
|
|
69
|
+
row-gap: 0.25rem;
|
|
70
70
|
align-items: start;
|
|
71
71
|
}
|
|
72
|
-
|
|
72
|
+
|
|
73
|
+
.dl-alert:has(> svg) {
|
|
74
|
+
grid-template-columns: 1rem 1fr;
|
|
75
|
+
column-gap: 0.75rem;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.dl-alert > svg {
|
|
79
|
+
grid-column: 1;
|
|
80
|
+
grid-row: 1 / span 2;
|
|
73
81
|
width: 1rem;
|
|
74
82
|
height: 1rem;
|
|
75
83
|
margin-top: 0.125rem;
|
|
84
|
+
color: currentColor;
|
|
85
|
+
flex-shrink: 0;
|
|
76
86
|
}
|
|
87
|
+
|
|
88
|
+
.dl-alert:has(> svg) .dl-alert__title,
|
|
89
|
+
.dl-alert:has(> svg) .dl-alert__desc {
|
|
90
|
+
grid-column: 2;
|
|
91
|
+
}
|
|
92
|
+
|
|
77
93
|
.dl-alert--default {
|
|
78
|
-
background-color: var(--background);
|
|
94
|
+
background-color: var(--card, var(--background));
|
|
79
95
|
color: var(--foreground);
|
|
80
96
|
}
|
|
97
|
+
|
|
81
98
|
.dl-alert--destructive {
|
|
82
|
-
border-color: color-mix(in oklch, var(--destructive)
|
|
99
|
+
border-color: color-mix(in oklch, var(--destructive) 45%, transparent);
|
|
83
100
|
color: var(--destructive);
|
|
84
101
|
background-color: color-mix(
|
|
85
102
|
in oklch,
|
|
86
|
-
var(--destructive)
|
|
103
|
+
var(--destructive) 8%,
|
|
87
104
|
var(--background)
|
|
88
105
|
);
|
|
89
106
|
}
|
|
107
|
+
|
|
90
108
|
.dl-alert__title {
|
|
91
109
|
font-weight: 600;
|
|
92
|
-
line-height: 1;
|
|
110
|
+
line-height: 1.35;
|
|
93
111
|
letter-spacing: -0.01em;
|
|
94
|
-
margin-bottom: 0.25rem;
|
|
95
112
|
}
|
|
113
|
+
|
|
96
114
|
.dl-alert__desc {
|
|
97
115
|
font-size: 0.875rem;
|
|
98
116
|
color: var(--muted-foreground);
|
|
99
117
|
line-height: 1.5;
|
|
100
118
|
}
|
|
101
119
|
|
|
120
|
+
.dl-alert--destructive .dl-alert__desc {
|
|
121
|
+
color: color-mix(in oklch, var(--destructive) 80%, var(--foreground));
|
|
122
|
+
}
|
|
123
|
+
|
|
102
124
|
/* ── alert-dialog ── */
|
|
103
125
|
.dl-alert-dialog-overlay {
|
|
104
126
|
position: fixed;
|
|
@@ -121,15 +143,19 @@
|
|
|
121
143
|
top: 50%;
|
|
122
144
|
transform: translate(-50%, -50%);
|
|
123
145
|
z-index: 50;
|
|
124
|
-
display:
|
|
125
|
-
|
|
126
|
-
|
|
146
|
+
display: flex;
|
|
147
|
+
flex-direction: column;
|
|
148
|
+
width: calc(100% - 2rem);
|
|
149
|
+
max-width: var(--dl-dialog-max-width, 32rem);
|
|
150
|
+
max-height: calc(100dvh - 3rem);
|
|
127
151
|
gap: 1rem;
|
|
128
152
|
border: 1px solid var(--border);
|
|
129
153
|
background-color: var(--background);
|
|
130
154
|
padding: 1.5rem;
|
|
131
155
|
box-shadow: 0 8px 32px rgb(0 0 0 / 0.2);
|
|
132
156
|
border-radius: var(--radius-lg, 0.5rem);
|
|
157
|
+
overflow-y: auto;
|
|
158
|
+
overscroll-behavior: contain;
|
|
133
159
|
}
|
|
134
160
|
|
|
135
161
|
.dl-alert-dialog-content[data-state="open"] {
|
|
@@ -145,6 +171,7 @@
|
|
|
145
171
|
flex-direction: column;
|
|
146
172
|
gap: 0.5rem;
|
|
147
173
|
text-align: center;
|
|
174
|
+
flex-shrink: 0;
|
|
148
175
|
}
|
|
149
176
|
|
|
150
177
|
@media (min-width: 640px) {
|
|
@@ -157,6 +184,7 @@
|
|
|
157
184
|
display: flex;
|
|
158
185
|
flex-direction: column-reverse;
|
|
159
186
|
gap: 0.5rem;
|
|
187
|
+
flex-shrink: 0;
|
|
160
188
|
}
|
|
161
189
|
|
|
162
190
|
@media (min-width: 640px) {
|
|
@@ -828,15 +856,19 @@
|
|
|
828
856
|
top: 50%;
|
|
829
857
|
transform: translate(-50%, -50%);
|
|
830
858
|
z-index: 50;
|
|
831
|
-
display:
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
859
|
+
display: flex;
|
|
860
|
+
flex-direction: column;
|
|
861
|
+
width: calc(100% - 2rem);
|
|
862
|
+
max-width: var(--dl-dialog-max-width, 32rem);
|
|
863
|
+
max-height: calc(100dvh - 3rem);
|
|
835
864
|
border: 1px solid var(--border);
|
|
836
865
|
background-color: var(--background);
|
|
837
|
-
padding:
|
|
838
|
-
|
|
839
|
-
|
|
866
|
+
padding: 0;
|
|
867
|
+
gap: 0;
|
|
868
|
+
box-shadow: 0 16px 48px rgb(0 0 0 / 0.24);
|
|
869
|
+
border-radius: var(--radius-lg, 0.75rem);
|
|
870
|
+
overflow: hidden;
|
|
871
|
+
overscroll-behavior: contain;
|
|
840
872
|
}
|
|
841
873
|
.dl-dialog-content[data-state="open"] {
|
|
842
874
|
animation: dl-zoom-in 150ms ease;
|
|
@@ -845,10 +877,42 @@
|
|
|
845
877
|
animation: dl-zoom-out 150ms ease;
|
|
846
878
|
}
|
|
847
879
|
|
|
880
|
+
/* ── Sizing Variants ── */
|
|
881
|
+
.dl-dialog--sm {
|
|
882
|
+
max-width: 24rem;
|
|
883
|
+
}
|
|
884
|
+
.dl-dialog--md {
|
|
885
|
+
max-width: 32rem;
|
|
886
|
+
}
|
|
887
|
+
.dl-dialog--lg {
|
|
888
|
+
width: 90vw;
|
|
889
|
+
max-width: 44rem;
|
|
890
|
+
height: 80vh;
|
|
891
|
+
max-height: 80vh;
|
|
892
|
+
}
|
|
893
|
+
.dl-dialog--xl {
|
|
894
|
+
width: 92vw;
|
|
895
|
+
max-width: 56rem;
|
|
896
|
+
height: 85vh;
|
|
897
|
+
max-height: 85vh;
|
|
898
|
+
}
|
|
899
|
+
.dl-dialog--2xl {
|
|
900
|
+
width: 94vw;
|
|
901
|
+
max-width: 72rem;
|
|
902
|
+
height: 85vh;
|
|
903
|
+
max-height: 85vh;
|
|
904
|
+
}
|
|
905
|
+
.dl-dialog--full {
|
|
906
|
+
width: calc(100vw - 2rem);
|
|
907
|
+
max-width: calc(100vw - 2rem);
|
|
908
|
+
height: calc(100dvh - 2rem);
|
|
909
|
+
max-height: calc(100dvh - 2rem);
|
|
910
|
+
}
|
|
911
|
+
|
|
848
912
|
.dl-dialog-close {
|
|
849
913
|
position: absolute;
|
|
850
|
-
right:
|
|
851
|
-
top:
|
|
914
|
+
right: 1.25rem;
|
|
915
|
+
top: 1.25rem;
|
|
852
916
|
border-radius: var(--radius-sm, 0.25rem);
|
|
853
917
|
opacity: 0.7;
|
|
854
918
|
cursor: pointer;
|
|
@@ -857,6 +921,7 @@
|
|
|
857
921
|
padding: 0.25rem;
|
|
858
922
|
transition: opacity 0.15s ease;
|
|
859
923
|
color: var(--foreground);
|
|
924
|
+
z-index: 10;
|
|
860
925
|
}
|
|
861
926
|
.dl-dialog-close:hover {
|
|
862
927
|
opacity: 1;
|
|
@@ -865,22 +930,52 @@
|
|
|
865
930
|
outline: 2px solid var(--ring);
|
|
866
931
|
outline-offset: 2px;
|
|
867
932
|
}
|
|
933
|
+
.dl-dialog-close svg {
|
|
934
|
+
width: 1rem;
|
|
935
|
+
height: 1rem;
|
|
936
|
+
}
|
|
937
|
+
|
|
938
|
+
.dl-dialog-sr-only {
|
|
939
|
+
position: absolute;
|
|
940
|
+
width: 1px;
|
|
941
|
+
height: 1px;
|
|
942
|
+
padding: 0;
|
|
943
|
+
margin: -1px;
|
|
944
|
+
overflow: hidden;
|
|
945
|
+
clip: rect(0, 0, 0, 0);
|
|
946
|
+
white-space: nowrap;
|
|
947
|
+
border-width: 0;
|
|
948
|
+
}
|
|
868
949
|
|
|
869
950
|
.dl-dialog__header {
|
|
870
951
|
display: flex;
|
|
871
952
|
flex-direction: column;
|
|
872
953
|
gap: 0.375rem;
|
|
954
|
+
padding: 1.25rem 1.5rem;
|
|
955
|
+
padding-right: 3.5rem;
|
|
956
|
+
border-bottom: 1px solid var(--border);
|
|
957
|
+
flex-shrink: 0;
|
|
958
|
+
}
|
|
959
|
+
.dl-dialog__body {
|
|
960
|
+
flex: 1 1 auto;
|
|
961
|
+
min-height: 0;
|
|
962
|
+
overflow-y: auto;
|
|
963
|
+
padding: 1.25rem 1.5rem;
|
|
873
964
|
}
|
|
874
965
|
.dl-dialog__footer {
|
|
875
966
|
display: flex;
|
|
876
967
|
flex-direction: row;
|
|
877
968
|
justify-content: flex-end;
|
|
878
969
|
gap: 0.5rem;
|
|
970
|
+
padding: 0.875rem 1.5rem;
|
|
971
|
+
border-top: 1px solid var(--border);
|
|
972
|
+
background-color: color-mix(in srgb, var(--muted) 35%, transparent);
|
|
973
|
+
flex-shrink: 0;
|
|
879
974
|
}
|
|
880
975
|
.dl-dialog__title {
|
|
881
976
|
font-size: 1.125rem;
|
|
882
977
|
font-weight: 600;
|
|
883
|
-
line-height: 1;
|
|
978
|
+
line-height: 1.25;
|
|
884
979
|
letter-spacing: -0.01em;
|
|
885
980
|
}
|
|
886
981
|
.dl-dialog__desc {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yuva-devlab/ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.cjs",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -75,6 +75,7 @@
|
|
|
75
75
|
"@yuva-devlab/tokens": "1.1.0"
|
|
76
76
|
},
|
|
77
77
|
"devDependencies": {
|
|
78
|
+
"@storybook/react": "^8.6.14",
|
|
78
79
|
"@types/react": "^19.2.6",
|
|
79
80
|
"@types/react-dom": "^19.2.6",
|
|
80
81
|
"react": "^19.2.0",
|