@vaneui/ui 0.9.0-alpha.20260105191526.b49b458 → 0.9.0-alpha.20260106184406.602ce72

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.
Files changed (18) hide show
  1. package/dist/components/ui/props/keys.d.ts +9 -9
  2. package/dist/components/ui/props/keys.d.ts.map +1 -1
  3. package/dist/components/ui/props/propDescriptions.d.ts +1 -1
  4. package/dist/components/ui/theme/size/fontSizeTheme.d.ts +5 -8
  5. package/dist/components/ui/theme/size/fontSizeTheme.d.ts.map +1 -1
  6. package/dist/components/ui/theme/size/gapTheme.d.ts +5 -8
  7. package/dist/components/ui/theme/size/gapTheme.d.ts.map +1 -1
  8. package/dist/components/ui/theme/size/pxTheme.d.ts +5 -8
  9. package/dist/components/ui/theme/size/pxTheme.d.ts.map +1 -1
  10. package/dist/components/ui/theme/size/pyTheme.d.ts +5 -8
  11. package/dist/components/ui/theme/size/pyTheme.d.ts.map +1 -1
  12. package/dist/index.esm.js +37 -51
  13. package/dist/index.esm.js.map +1 -1
  14. package/dist/index.js +37 -51
  15. package/dist/index.js.map +1 -1
  16. package/dist/ui.css +54 -28
  17. package/dist/vars.css +24 -8
  18. package/package.json +1 -1
package/dist/ui.css CHANGED
@@ -675,6 +675,9 @@
675
675
  .gap-\(--gap\) {
676
676
  gap: var(--gap);
677
677
  }
678
+ .gap-\(--gap-desktop\) {
679
+ gap: var(--gap-desktop);
680
+ }
678
681
  .gap-0 {
679
682
  gap: calc(var(--spacing) * 0);
680
683
  }
@@ -952,6 +955,9 @@
952
955
  .px-\(--px\) {
953
956
  padding-inline: var(--px);
954
957
  }
958
+ .px-\(--px-desktop\) {
959
+ padding-inline: var(--px-desktop);
960
+ }
955
961
  .px-1 {
956
962
  padding-inline: calc(var(--spacing) * 1);
957
963
  }
@@ -967,6 +973,9 @@
967
973
  .py-\(--py\) {
968
974
  padding-block: var(--py);
969
975
  }
976
+ .py-\(--py-desktop\) {
977
+ padding-block: var(--py-desktop);
978
+ }
970
979
  .py-2 {
971
980
  padding-block: calc(var(--spacing) * 2);
972
981
  }
@@ -1035,6 +1044,9 @@
1035
1044
  .text-\(length\:--fs\) {
1036
1045
  font-size: var(--fs);
1037
1046
  }
1047
+ .text-\(length\:--fs-desktop\) {
1048
+ font-size: var(--fs-desktop);
1049
+ }
1038
1050
  .text-\[10px\] {
1039
1051
  font-size: 10px;
1040
1052
  }
@@ -1314,15 +1326,9 @@
1314
1326
  .\[--fs-unit\:15\] {
1315
1327
  --fs-unit: 15;
1316
1328
  }
1317
- .\[--fs-unit\:var\(--fs-unit-desktop\)\] {
1318
- --fs-unit: var(--fs-unit-desktop);
1319
- }
1320
1329
  .\[--gap-unit\:2\] {
1321
1330
  --gap-unit: 2;
1322
1331
  }
1323
- .\[--gap-unit\:var\(--gap-unit-desktop\)\] {
1324
- --gap-unit: var(--gap-unit-desktop);
1325
- }
1326
1332
  .\[--lh\:1\.3\] {
1327
1333
  --lh: 1.3;
1328
1334
  }
@@ -1344,9 +1350,6 @@
1344
1350
  .\[--py-unit\:3\] {
1345
1351
  --py-unit: 3;
1346
1352
  }
1347
- .\[--py-unit\:var\(--py-unit-desktop\)\] {
1348
- --py-unit: var(--py-unit-desktop);
1349
- }
1350
1353
  .\[--size-unit\:4\] {
1351
1354
  --size-unit: 4;
1352
1355
  }
@@ -1585,24 +1588,29 @@
1585
1588
  flex-direction: column;
1586
1589
  }
1587
1590
  }
1588
- .max-tablet\:\[--fs-unit\:9\] {
1591
+ .max-tablet\:gap-\(--gap-tablet\) {
1589
1592
  @media (width < 64rem) {
1590
- --fs-unit: 9;
1593
+ gap: var(--gap-tablet);
1594
+ }
1595
+ }
1596
+ .max-tablet\:px-\(--px-tablet\) {
1597
+ @media (width < 64rem) {
1598
+ padding-inline: var(--px-tablet);
1591
1599
  }
1592
1600
  }
1593
- .max-tablet\:\[--fs-unit\:var\(--fs-unit-tablet\)\] {
1601
+ .max-tablet\:py-\(--py-tablet\) {
1594
1602
  @media (width < 64rem) {
1595
- --fs-unit: var(--fs-unit-tablet);
1603
+ padding-block: var(--py-tablet);
1596
1604
  }
1597
1605
  }
1598
- .max-tablet\:\[--gap-unit\:var\(--gap-unit-tablet\)\] {
1606
+ .max-tablet\:text-\(length\:--fs-tablet\) {
1599
1607
  @media (width < 64rem) {
1600
- --gap-unit: var(--gap-unit-tablet);
1608
+ font-size: var(--fs-tablet);
1601
1609
  }
1602
1610
  }
1603
- .max-tablet\:\[--py-unit\:var\(--py-unit-tablet\)\] {
1611
+ .max-tablet\:\[--fs-unit\:12\] {
1604
1612
  @media (width < 64rem) {
1605
- --py-unit: var(--py-unit-tablet);
1613
+ --fs-unit: 12;
1606
1614
  }
1607
1615
  }
1608
1616
  .max-mobile\:hidden {
@@ -1615,19 +1623,29 @@
1615
1623
  flex-direction: column;
1616
1624
  }
1617
1625
  }
1618
- .max-mobile\:\[--fs-unit\:var\(--fs-unit-mobile\)\] {
1626
+ .max-mobile\:gap-\(--gap-mobile\) {
1627
+ @media (width < 48rem) {
1628
+ gap: var(--gap-mobile);
1629
+ }
1630
+ }
1631
+ .max-mobile\:px-\(--px-mobile\) {
1632
+ @media (width < 48rem) {
1633
+ padding-inline: var(--px-mobile);
1634
+ }
1635
+ }
1636
+ .max-mobile\:py-\(--py-mobile\) {
1619
1637
  @media (width < 48rem) {
1620
- --fs-unit: var(--fs-unit-mobile);
1638
+ padding-block: var(--py-mobile);
1621
1639
  }
1622
1640
  }
1623
- .max-mobile\:\[--gap-unit\:var\(--gap-unit-mobile\)\] {
1641
+ .max-mobile\:text-\(length\:--fs-mobile\) {
1624
1642
  @media (width < 48rem) {
1625
- --gap-unit: var(--gap-unit-mobile);
1643
+ font-size: var(--fs-mobile);
1626
1644
  }
1627
1645
  }
1628
- .max-mobile\:\[--py-unit\:var\(--py-unit-mobile\)\] {
1646
+ .max-mobile\:\[--fs-unit\:9\] {
1629
1647
  @media (width < 48rem) {
1630
- --py-unit: var(--py-unit-mobile);
1648
+ --fs-unit: 9;
1631
1649
  }
1632
1650
  }
1633
1651
  .sm\:grid-cols-2 {
@@ -1678,13 +1696,21 @@
1678
1696
  --fs-unit-desktop: var(--fs-unit);
1679
1697
  --fs-unit-tablet: var(--fs-unit);
1680
1698
  --fs-unit-mobile: var(--fs-unit);
1681
- --py: calc(var(--py-unit) * var(--spacing));
1682
- --px: calc(var(--aspect-ratio) * var(--py-unit) * var(--spacing));
1683
- --gap: calc(var(--gap-unit) * var(--spacing));
1684
- --fs: calc(var(--fs-unit) * var(--fs-base));
1699
+ --py-desktop: calc(var(--py-unit-desktop) * var(--spacing));
1700
+ --py-tablet: calc(var(--py-unit-tablet) * var(--spacing));
1701
+ --py-mobile: calc(var(--py-unit-mobile) * var(--spacing));
1702
+ --px-desktop: calc(var(--aspect-ratio) * var(--py-unit-desktop) * var(--spacing));
1703
+ --px-tablet: calc(var(--aspect-ratio) * var(--py-unit-tablet) * var(--spacing));
1704
+ --px-mobile: calc(var(--aspect-ratio) * var(--py-unit-mobile) * var(--spacing));
1705
+ --gap-desktop: calc(var(--gap-unit-desktop) * var(--spacing));
1706
+ --gap-tablet: calc(var(--gap-unit-tablet) * var(--spacing));
1707
+ --gap-mobile: calc(var(--gap-unit-mobile) * var(--spacing));
1708
+ --fs-desktop: calc(var(--fs-unit-desktop) * var(--fs-base));
1709
+ --fs-tablet: calc(var(--fs-unit-tablet) * var(--fs-base));
1710
+ --fs-mobile: calc(var(--fs-unit-mobile) * var(--fs-base));
1711
+ --pl: calc(var(--py-unit) * var(--spacing));
1685
1712
  --size: calc(var(--size-unit) * var(--spacing));
1686
1713
  --br: calc(var(--br-unit) * var(--br-base));
1687
- --pl: calc(var(--py-unit) * var(--spacing));
1688
1714
  }
1689
1715
  }
1690
1716
  @layer components {
package/dist/vars.css CHANGED
@@ -163,7 +163,8 @@
163
163
 
164
164
  @layer base {
165
165
  [data-size] {
166
- /* Breakpoint vars default to base unit */
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
- /* Single formulas - unit vars are switched via Tailwind classes */
178
- --py: calc(var(--py-unit) * var(--spacing));
179
- --px: calc(var(--aspect-ratio) * var(--py-unit) * var(--spacing));
180
- --gap: calc(var(--gap-unit) * var(--spacing));
181
- --fs: calc(var(--fs-unit) * var(--fs-base));
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
 
@@ -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 { --lh: var(--lh-base); }
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaneui/ui",
3
- "version": "0.9.0-alpha.20260105191526.b49b458",
3
+ "version": "0.9.0-alpha.20260106184406.602ce72",
4
4
  "description": "A simple and lightweight UI component library for React, built with Tailwind CSS.",
5
5
  "author": "",
6
6
  "license": "ISC",