@vaneui/ui 0.9.0-alpha.20260105191526.b49b458 → 0.9.0-alpha.20260106192523.680d7a3
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/ui/props/keys.d.ts +9 -9
- package/dist/components/ui/props/keys.d.ts.map +1 -1
- package/dist/components/ui/props/propDescriptions.d.ts +1 -1
- package/dist/components/ui/theme/size/fontSizeTheme.d.ts +5 -8
- package/dist/components/ui/theme/size/fontSizeTheme.d.ts.map +1 -1
- package/dist/components/ui/theme/size/gapTheme.d.ts +5 -8
- package/dist/components/ui/theme/size/gapTheme.d.ts.map +1 -1
- package/dist/components/ui/theme/size/pxTheme.d.ts +5 -8
- package/dist/components/ui/theme/size/pxTheme.d.ts.map +1 -1
- package/dist/components/ui/theme/size/pyTheme.d.ts +5 -8
- package/dist/components/ui/theme/size/pyTheme.d.ts.map +1 -1
- package/dist/index.esm.js +37 -51
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +37 -51
- package/dist/index.js.map +1 -1
- package/dist/ui.css +63 -36
- package/dist/vars.css +30 -14
- package/package.json +1 -1
package/dist/ui.css
CHANGED
|
@@ -140,6 +140,7 @@
|
|
|
140
140
|
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
141
141
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
142
142
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
143
|
+
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
143
144
|
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
144
145
|
--animate-bounce: bounce 1s infinite;
|
|
145
146
|
--default-transition-duration: 150ms;
|
|
@@ -675,6 +676,9 @@
|
|
|
675
676
|
.gap-\(--gap\) {
|
|
676
677
|
gap: var(--gap);
|
|
677
678
|
}
|
|
679
|
+
.gap-\(--gap-desktop\) {
|
|
680
|
+
gap: var(--gap-desktop);
|
|
681
|
+
}
|
|
678
682
|
.gap-0 {
|
|
679
683
|
gap: calc(var(--spacing) * 0);
|
|
680
684
|
}
|
|
@@ -952,6 +956,9 @@
|
|
|
952
956
|
.px-\(--px\) {
|
|
953
957
|
padding-inline: var(--px);
|
|
954
958
|
}
|
|
959
|
+
.px-\(--px-desktop\) {
|
|
960
|
+
padding-inline: var(--px-desktop);
|
|
961
|
+
}
|
|
955
962
|
.px-1 {
|
|
956
963
|
padding-inline: calc(var(--spacing) * 1);
|
|
957
964
|
}
|
|
@@ -967,6 +974,9 @@
|
|
|
967
974
|
.py-\(--py\) {
|
|
968
975
|
padding-block: var(--py);
|
|
969
976
|
}
|
|
977
|
+
.py-\(--py-desktop\) {
|
|
978
|
+
padding-block: var(--py-desktop);
|
|
979
|
+
}
|
|
970
980
|
.py-2 {
|
|
971
981
|
padding-block: calc(var(--spacing) * 2);
|
|
972
982
|
}
|
|
@@ -1035,6 +1045,9 @@
|
|
|
1035
1045
|
.text-\(length\:--fs\) {
|
|
1036
1046
|
font-size: var(--fs);
|
|
1037
1047
|
}
|
|
1048
|
+
.text-\(length\:--fs-desktop\) {
|
|
1049
|
+
font-size: var(--fs-desktop);
|
|
1050
|
+
}
|
|
1038
1051
|
.text-\[10px\] {
|
|
1039
1052
|
font-size: 10px;
|
|
1040
1053
|
}
|
|
@@ -1314,15 +1327,9 @@
|
|
|
1314
1327
|
.\[--fs-unit\:15\] {
|
|
1315
1328
|
--fs-unit: 15;
|
|
1316
1329
|
}
|
|
1317
|
-
.\[--fs-unit\:var\(--fs-unit-desktop\)\] {
|
|
1318
|
-
--fs-unit: var(--fs-unit-desktop);
|
|
1319
|
-
}
|
|
1320
1330
|
.\[--gap-unit\:2\] {
|
|
1321
1331
|
--gap-unit: 2;
|
|
1322
1332
|
}
|
|
1323
|
-
.\[--gap-unit\:var\(--gap-unit-desktop\)\] {
|
|
1324
|
-
--gap-unit: var(--gap-unit-desktop);
|
|
1325
|
-
}
|
|
1326
1333
|
.\[--lh\:1\.3\] {
|
|
1327
1334
|
--lh: 1.3;
|
|
1328
1335
|
}
|
|
@@ -1344,9 +1351,6 @@
|
|
|
1344
1351
|
.\[--py-unit\:3\] {
|
|
1345
1352
|
--py-unit: 3;
|
|
1346
1353
|
}
|
|
1347
|
-
.\[--py-unit\:var\(--py-unit-desktop\)\] {
|
|
1348
|
-
--py-unit: var(--py-unit-desktop);
|
|
1349
|
-
}
|
|
1350
1354
|
.\[--size-unit\:4\] {
|
|
1351
1355
|
--size-unit: 4;
|
|
1352
1356
|
}
|
|
@@ -1585,24 +1589,29 @@
|
|
|
1585
1589
|
flex-direction: column;
|
|
1586
1590
|
}
|
|
1587
1591
|
}
|
|
1588
|
-
.max-tablet
|
|
1592
|
+
.max-tablet\:gap-\(--gap-tablet\) {
|
|
1589
1593
|
@media (width < 64rem) {
|
|
1590
|
-
--
|
|
1594
|
+
gap: var(--gap-tablet);
|
|
1591
1595
|
}
|
|
1592
1596
|
}
|
|
1593
|
-
.max-tablet
|
|
1597
|
+
.max-tablet\:px-\(--px-tablet\) {
|
|
1594
1598
|
@media (width < 64rem) {
|
|
1595
|
-
|
|
1599
|
+
padding-inline: var(--px-tablet);
|
|
1596
1600
|
}
|
|
1597
1601
|
}
|
|
1598
|
-
.max-tablet
|
|
1602
|
+
.max-tablet\:py-\(--py-tablet\) {
|
|
1599
1603
|
@media (width < 64rem) {
|
|
1600
|
-
|
|
1604
|
+
padding-block: var(--py-tablet);
|
|
1601
1605
|
}
|
|
1602
1606
|
}
|
|
1603
|
-
.max-tablet
|
|
1607
|
+
.max-tablet\:text-\(length\:--fs-tablet\) {
|
|
1604
1608
|
@media (width < 64rem) {
|
|
1605
|
-
|
|
1609
|
+
font-size: var(--fs-tablet);
|
|
1610
|
+
}
|
|
1611
|
+
}
|
|
1612
|
+
.max-tablet\:\[--fs-unit\:12\] {
|
|
1613
|
+
@media (width < 64rem) {
|
|
1614
|
+
--fs-unit: 12;
|
|
1606
1615
|
}
|
|
1607
1616
|
}
|
|
1608
1617
|
.max-mobile\:hidden {
|
|
@@ -1615,19 +1624,29 @@
|
|
|
1615
1624
|
flex-direction: column;
|
|
1616
1625
|
}
|
|
1617
1626
|
}
|
|
1618
|
-
.max-mobile
|
|
1627
|
+
.max-mobile\:gap-\(--gap-mobile\) {
|
|
1628
|
+
@media (width < 48rem) {
|
|
1629
|
+
gap: var(--gap-mobile);
|
|
1630
|
+
}
|
|
1631
|
+
}
|
|
1632
|
+
.max-mobile\:px-\(--px-mobile\) {
|
|
1619
1633
|
@media (width < 48rem) {
|
|
1620
|
-
|
|
1634
|
+
padding-inline: var(--px-mobile);
|
|
1621
1635
|
}
|
|
1622
1636
|
}
|
|
1623
|
-
.max-mobile
|
|
1637
|
+
.max-mobile\:py-\(--py-mobile\) {
|
|
1624
1638
|
@media (width < 48rem) {
|
|
1625
|
-
|
|
1639
|
+
padding-block: var(--py-mobile);
|
|
1626
1640
|
}
|
|
1627
1641
|
}
|
|
1628
|
-
.max-mobile
|
|
1642
|
+
.max-mobile\:text-\(length\:--fs-mobile\) {
|
|
1629
1643
|
@media (width < 48rem) {
|
|
1630
|
-
|
|
1644
|
+
font-size: var(--fs-mobile);
|
|
1645
|
+
}
|
|
1646
|
+
}
|
|
1647
|
+
.max-mobile\:\[--fs-unit\:9\] {
|
|
1648
|
+
@media (width < 48rem) {
|
|
1649
|
+
--fs-unit: 9;
|
|
1631
1650
|
}
|
|
1632
1651
|
}
|
|
1633
1652
|
.sm\:grid-cols-2 {
|
|
@@ -1678,13 +1697,21 @@
|
|
|
1678
1697
|
--fs-unit-desktop: var(--fs-unit);
|
|
1679
1698
|
--fs-unit-tablet: var(--fs-unit);
|
|
1680
1699
|
--fs-unit-mobile: var(--fs-unit);
|
|
1681
|
-
--py: calc(var(--py-unit) * var(--spacing));
|
|
1682
|
-
--
|
|
1683
|
-
--
|
|
1684
|
-
--
|
|
1700
|
+
--py-desktop: calc(var(--py-unit-desktop) * var(--spacing));
|
|
1701
|
+
--py-tablet: calc(var(--py-unit-tablet) * var(--spacing));
|
|
1702
|
+
--py-mobile: calc(var(--py-unit-mobile) * var(--spacing));
|
|
1703
|
+
--px-desktop: calc(var(--aspect-ratio) * var(--py-unit-desktop) * var(--spacing));
|
|
1704
|
+
--px-tablet: calc(var(--aspect-ratio) * var(--py-unit-tablet) * var(--spacing));
|
|
1705
|
+
--px-mobile: calc(var(--aspect-ratio) * var(--py-unit-mobile) * var(--spacing));
|
|
1706
|
+
--gap-desktop: calc(var(--gap-unit-desktop) * var(--spacing));
|
|
1707
|
+
--gap-tablet: calc(var(--gap-unit-tablet) * var(--spacing));
|
|
1708
|
+
--gap-mobile: calc(var(--gap-unit-mobile) * var(--spacing));
|
|
1709
|
+
--fs-desktop: calc(var(--fs-unit-desktop) * var(--fs-base));
|
|
1710
|
+
--fs-tablet: calc(var(--fs-unit-tablet) * var(--fs-base));
|
|
1711
|
+
--fs-mobile: calc(var(--fs-unit-mobile) * var(--fs-base));
|
|
1712
|
+
--pl: calc(var(--py-unit) * var(--spacing));
|
|
1685
1713
|
--size: calc(var(--size-unit) * var(--spacing));
|
|
1686
1714
|
--br: calc(var(--br-unit) * var(--br-base));
|
|
1687
|
-
--pl: calc(var(--py-unit) * var(--spacing));
|
|
1688
1715
|
}
|
|
1689
1716
|
}
|
|
1690
1717
|
@layer components {
|
|
@@ -1704,19 +1731,19 @@
|
|
|
1704
1731
|
--br-unit: 2;
|
|
1705
1732
|
--gap-unit: 2;
|
|
1706
1733
|
--shadow-base: var(--shadow-sm);
|
|
1707
|
-
--shadow-hover: var(--shadow);
|
|
1734
|
+
--shadow-hover: var(--shadow-md);
|
|
1708
1735
|
}
|
|
1709
1736
|
[data-vane-type="ui"][data-size="lg"] {
|
|
1710
1737
|
--br-unit: 2.5;
|
|
1711
1738
|
--gap-unit: 2.5;
|
|
1712
|
-
--shadow-base: var(--shadow);
|
|
1713
|
-
--shadow-hover: var(--shadow-
|
|
1739
|
+
--shadow-base: var(--shadow-md);
|
|
1740
|
+
--shadow-hover: var(--shadow-lg);
|
|
1714
1741
|
}
|
|
1715
1742
|
[data-vane-type="ui"][data-size="xl"] {
|
|
1716
1743
|
--br-unit: 3;
|
|
1717
1744
|
--gap-unit: 3;
|
|
1718
|
-
--shadow-base: var(--shadow-
|
|
1719
|
-
--shadow-hover: var(--shadow-
|
|
1745
|
+
--shadow-base: var(--shadow-lg);
|
|
1746
|
+
--shadow-hover: var(--shadow-xl);
|
|
1720
1747
|
}
|
|
1721
1748
|
[data-vane-type="layout"][data-size="xs"] {
|
|
1722
1749
|
--br-unit: 3;
|
|
@@ -1731,17 +1758,17 @@
|
|
|
1731
1758
|
[data-vane-type="layout"][data-size="md"] {
|
|
1732
1759
|
--br-unit: 5;
|
|
1733
1760
|
--gap-unit: 4;
|
|
1734
|
-
--shadow-base: var(--shadow);
|
|
1761
|
+
--shadow-base: var(--shadow-md);
|
|
1735
1762
|
}
|
|
1736
1763
|
[data-vane-type="layout"][data-size="lg"] {
|
|
1737
1764
|
--br-unit: 6;
|
|
1738
1765
|
--gap-unit: 5;
|
|
1739
|
-
--shadow-base: var(--shadow-
|
|
1766
|
+
--shadow-base: var(--shadow-lg);
|
|
1740
1767
|
}
|
|
1741
1768
|
[data-vane-type="layout"][data-size="xl"] {
|
|
1742
1769
|
--br-unit: 7;
|
|
1743
1770
|
--gap-unit: 6;
|
|
1744
|
-
--shadow-base: var(--shadow-
|
|
1771
|
+
--shadow-base: var(--shadow-xl);
|
|
1745
1772
|
}
|
|
1746
1773
|
.vane-button {
|
|
1747
1774
|
--lh: 1.3;
|
package/dist/vars.css
CHANGED
|
@@ -163,7 +163,8 @@
|
|
|
163
163
|
|
|
164
164
|
@layer base {
|
|
165
165
|
[data-size] {
|
|
166
|
-
/*
|
|
166
|
+
/* Default: breakpoint-specific unit vars inherit from base unit vars.
|
|
167
|
+
Responsive components override these with specific numeric values. */
|
|
167
168
|
--py-unit-desktop: var(--py-unit);
|
|
168
169
|
--py-unit-tablet: var(--py-unit);
|
|
169
170
|
--py-unit-mobile: var(--py-unit);
|
|
@@ -174,14 +175,27 @@
|
|
|
174
175
|
--fs-unit-tablet: var(--fs-unit);
|
|
175
176
|
--fs-unit-mobile: var(--fs-unit);
|
|
176
177
|
|
|
177
|
-
/*
|
|
178
|
-
--py: calc(var(--py-unit) * var(--spacing));
|
|
179
|
-
--
|
|
180
|
-
--
|
|
181
|
-
|
|
178
|
+
/* Breakpoint-specific computed variables */
|
|
179
|
+
--py-desktop: calc(var(--py-unit-desktop) * var(--spacing));
|
|
180
|
+
--py-tablet: calc(var(--py-unit-tablet) * var(--spacing));
|
|
181
|
+
--py-mobile: calc(var(--py-unit-mobile) * var(--spacing));
|
|
182
|
+
|
|
183
|
+
--px-desktop: calc(var(--aspect-ratio) * var(--py-unit-desktop) * var(--spacing));
|
|
184
|
+
--px-tablet: calc(var(--aspect-ratio) * var(--py-unit-tablet) * var(--spacing));
|
|
185
|
+
--px-mobile: calc(var(--aspect-ratio) * var(--py-unit-mobile) * var(--spacing));
|
|
186
|
+
|
|
187
|
+
--gap-desktop: calc(var(--gap-unit-desktop) * var(--spacing));
|
|
188
|
+
--gap-tablet: calc(var(--gap-unit-tablet) * var(--spacing));
|
|
189
|
+
--gap-mobile: calc(var(--gap-unit-mobile) * var(--spacing));
|
|
190
|
+
|
|
191
|
+
--fs-desktop: calc(var(--fs-unit-desktop) * var(--fs-base));
|
|
192
|
+
--fs-tablet: calc(var(--fs-unit-tablet) * var(--fs-base));
|
|
193
|
+
--fs-mobile: calc(var(--fs-unit-mobile) * var(--fs-base));
|
|
194
|
+
|
|
195
|
+
/* Non-breakpoint computed variables */
|
|
196
|
+
--pl: calc(var(--py-unit) * var(--spacing));
|
|
182
197
|
--size: calc(var(--size-unit) * var(--spacing));
|
|
183
198
|
--br: calc(var(--br-unit) * var(--br-base));
|
|
184
|
-
--pl: calc(var(--py-unit) * var(--spacing));
|
|
185
199
|
}
|
|
186
200
|
}
|
|
187
201
|
|
|
@@ -196,16 +210,16 @@
|
|
|
196
210
|
/* UI type defaults (compact spacing, with hover shadows using Tailwind shadow vars) */
|
|
197
211
|
[data-vane-type="ui"][data-size="xs"] { --br-unit: 1; --gap-unit: 1; --shadow-base: var(--shadow-2xs); --shadow-hover: var(--shadow-xs); }
|
|
198
212
|
[data-vane-type="ui"][data-size="sm"] { --br-unit: 1.5; --gap-unit: 1.5; --shadow-base: var(--shadow-xs); --shadow-hover: var(--shadow-sm); }
|
|
199
|
-
[data-vane-type="ui"][data-size="md"] { --br-unit: 2; --gap-unit: 2; --shadow-base: var(--shadow-sm); --shadow-hover: var(--shadow); }
|
|
200
|
-
[data-vane-type="ui"][data-size="lg"] { --br-unit: 2.5; --gap-unit: 2.5; --shadow-base: var(--shadow);
|
|
201
|
-
[data-vane-type="ui"][data-size="xl"] { --br-unit: 3; --gap-unit: 3; --shadow-base: var(--shadow-
|
|
213
|
+
[data-vane-type="ui"][data-size="md"] { --br-unit: 2; --gap-unit: 2; --shadow-base: var(--shadow-sm); --shadow-hover: var(--shadow-md); }
|
|
214
|
+
[data-vane-type="ui"][data-size="lg"] { --br-unit: 2.5; --gap-unit: 2.5; --shadow-base: var(--shadow-md); --shadow-hover: var(--shadow-lg); }
|
|
215
|
+
[data-vane-type="ui"][data-size="xl"] { --br-unit: 3; --gap-unit: 3; --shadow-base: var(--shadow-lg); --shadow-hover: var(--shadow-xl); }
|
|
202
216
|
|
|
203
217
|
/* Layout type defaults (generous spacing, static shadows using Tailwind shadow vars) */
|
|
204
218
|
[data-vane-type="layout"][data-size="xs"] { --br-unit: 3; --gap-unit: 2; --shadow-base: var(--shadow-xs); }
|
|
205
219
|
[data-vane-type="layout"][data-size="sm"] { --br-unit: 4; --gap-unit: 3; --shadow-base: var(--shadow-sm); }
|
|
206
|
-
[data-vane-type="layout"][data-size="md"] { --br-unit: 5; --gap-unit: 4; --shadow-base: var(--shadow); }
|
|
207
|
-
[data-vane-type="layout"][data-size="lg"] { --br-unit: 6; --gap-unit: 5; --shadow-base: var(--shadow-
|
|
208
|
-
[data-vane-type="layout"][data-size="xl"] { --br-unit: 7; --gap-unit: 6; --shadow-base: var(--shadow-
|
|
220
|
+
[data-vane-type="layout"][data-size="md"] { --br-unit: 5; --gap-unit: 4; --shadow-base: var(--shadow-md); }
|
|
221
|
+
[data-vane-type="layout"][data-size="lg"] { --br-unit: 6; --gap-unit: 5; --shadow-base: var(--shadow-lg); }
|
|
222
|
+
[data-vane-type="layout"][data-size="xl"] { --br-unit: 7; --gap-unit: 6; --shadow-base: var(--shadow-xl); }
|
|
209
223
|
|
|
210
224
|
/* NON-RESPONSIVE COMPONENTS */
|
|
211
225
|
|
|
@@ -258,7 +272,9 @@
|
|
|
258
272
|
.vane-checkbox[data-size="xl"] { --size-unit: 5; --br-unit: 1.5; }
|
|
259
273
|
|
|
260
274
|
/* Label */
|
|
261
|
-
.vane-label {
|
|
275
|
+
.vane-label {
|
|
276
|
+
--lh: var(--lh-base);
|
|
277
|
+
}
|
|
262
278
|
.vane-label[data-size="xs"] { --fs-unit: var(--fs-unit-xs); }
|
|
263
279
|
.vane-label[data-size="sm"] { --fs-unit: var(--fs-unit-sm); }
|
|
264
280
|
.vane-label[data-size="md"] { --fs-unit: var(--fs-unit-md); }
|
package/package.json
CHANGED