@tempots/beatui 0.36.0 → 0.37.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.
Files changed (7) hide show
  1. package/dist/beatui.css +132 -0
  2. package/dist/beatui.tailwind.css +132 -0
  3. package/dist/index.cjs.js +4 -4
  4. package/dist/index.es.js +2356 -2249
  5. package/dist/types/components/data/badge.d.ts +16 -0
  6. package/dist/types/components/data/index.d.ts +1 -0
  7. package/package.json +1 -1
package/dist/beatui.css CHANGED
@@ -1584,6 +1584,138 @@ a:focus-visible {
1584
1584
  color: var(--color-white);
1585
1585
  }
1586
1586
 
1587
+ /* Badge Component */
1588
+ .bc-badge {
1589
+ --badge-bg: transparent;
1590
+ --badge-bg-dark: transparent;
1591
+ --badge-bg-hover: var(--badge-bg);
1592
+ --badge-bg-hover-dark: var(--badge-bg-dark);
1593
+ --badge-text: inherit;
1594
+ --badge-text-dark: inherit;
1595
+ --badge-text-hover: var(--badge-text);
1596
+ --badge-text-hover-dark: var(--badge-text-dark);
1597
+ --badge-border: transparent;
1598
+ --badge-border-dark: transparent;
1599
+
1600
+ display: inline-flex;
1601
+ align-items: center;
1602
+ justify-content: center;
1603
+ border: 1.5px solid var(--badge-border);
1604
+ font-weight: var(--font-weight-semibold);
1605
+ font-family: var(
1606
+ --default-ui-font-family,
1607
+ var(--font-ui, var(--font-body, var(--font-family-sans)))
1608
+ );
1609
+ font-size: inherit;
1610
+ line-height: 1;
1611
+ border-radius: var(--radius-badge, var(--radius-control, var(--radius-md)));
1612
+ transition: all
1613
+ var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
1614
+ var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
1615
+ background-color: var(--badge-bg);
1616
+ color: var(--badge-text);
1617
+ }
1618
+
1619
+ .bc-badge__content {
1620
+ display: flex;
1621
+ align-items: center;
1622
+ justify-content: center;
1623
+ gap: var(
1624
+ --badge-gap,
1625
+ var(--spacing-stack-2xs, calc(var(--spacing-base) / 2))
1626
+ );
1627
+ }
1628
+
1629
+ /* Size variants */
1630
+ .bc-badge--size-xs {
1631
+ font-size: var(--font-size-xs);
1632
+ padding: calc(var(--spacing-base) * 0.5) calc(var(--spacing-base) * 1);
1633
+ --badge-gap: calc(var(--spacing-base) * 0.25);
1634
+ }
1635
+
1636
+ .bc-badge--size-sm {
1637
+ font-size: var(--font-size-sm);
1638
+ padding: calc(var(--spacing-base) * 0.75) calc(var(--spacing-base) * 1.5);
1639
+ --badge-gap: calc(var(--spacing-base) * 0.5);
1640
+ }
1641
+
1642
+ .bc-badge--size-md {
1643
+ font-size: var(--font-size-base);
1644
+ padding: var(--spacing-base) calc(var(--spacing-base) * 2);
1645
+ --badge-gap: calc(var(--spacing-base) * 0.75);
1646
+ }
1647
+
1648
+ .bc-badge--size-lg {
1649
+ font-size: var(--font-size-lg);
1650
+ padding: calc(var(--spacing-base) * 1.25) calc(var(--spacing-base) * 2.5);
1651
+ --badge-gap: var(--spacing-base);
1652
+ }
1653
+
1654
+ .bc-badge--size-xl {
1655
+ font-size: var(--font-size-xl);
1656
+ padding: calc(var(--spacing-base) * 1.5) calc(var(--spacing-base) * 3);
1657
+ --badge-gap: calc(var(--spacing-base) * 1.25);
1658
+ }
1659
+
1660
+ /* Circle variant - makes badge circular with equal width/height */
1661
+ .bc-badge--circle {
1662
+ padding-left: 0;
1663
+ padding-right: 0;
1664
+ aspect-ratio: 1;
1665
+ border-radius: 50%;
1666
+ }
1667
+
1668
+ .bc-badge--circle.bc-badge--size-xs {
1669
+ min-width: calc(var(--font-size-xs) + var(--spacing-base) * 1 + 3px);
1670
+ }
1671
+
1672
+ .bc-badge--circle.bc-badge--size-sm {
1673
+ min-width: calc(var(--font-size-sm) + var(--spacing-base) * 1.5 + 3px);
1674
+ }
1675
+
1676
+ .bc-badge--circle.bc-badge--size-md {
1677
+ min-width: calc(var(--font-size-md) + var(--spacing-base) * 2 + 3px);
1678
+ }
1679
+
1680
+ .bc-badge--circle.bc-badge--size-lg {
1681
+ min-width: calc(var(--font-size-lg) * 1.2 + var(--spacing-base) * 2.5 + 3px);
1682
+ }
1683
+
1684
+ .bc-badge--circle.bc-badge--size-xl {
1685
+ min-width: calc(var(--font-size-xl) * 1.2 + var(--spacing-base) * 3 + 3px);
1686
+ }
1687
+
1688
+ /* Full width variant */
1689
+ .bc-badge--full-width {
1690
+ display: flex;
1691
+ width: 100%;
1692
+ }
1693
+
1694
+ /* Dark mode styles */
1695
+ .b-dark .bc-badge {
1696
+ background-color: var(--badge-bg-dark);
1697
+ color: var(--badge-text-dark);
1698
+ border-color: var(--badge-border-dark);
1699
+ }
1700
+
1701
+ .b-dark .bc-badge:hover {
1702
+ background-color: var(--badge-bg-hover-dark);
1703
+ color: var(--badge-text-hover-dark);
1704
+ }
1705
+
1706
+ /* Accessibility adjustments */
1707
+ @media (prefers-contrast: high) {
1708
+ .bc-badge {
1709
+ border-width: 2px;
1710
+ }
1711
+ }
1712
+
1713
+ @media (prefers-reduced-motion: reduce) {
1714
+ .bc-badge {
1715
+ transition: none;
1716
+ }
1717
+ }
1718
+
1587
1719
  /* Button Component */
1588
1720
  .bc-button {
1589
1721
  --button-bg: transparent;
package/dist/beatui.tailwind.css CHANGED
@@ -1259,6 +1259,138 @@ a:focus-visible {
1259
1259
  color: var(--color-white);
1260
1260
  }
1261
1261
 
1262
+ /* Badge Component */
1263
+ .bc-badge {
1264
+ --badge-bg: transparent;
1265
+ --badge-bg-dark: transparent;
1266
+ --badge-bg-hover: var(--badge-bg);
1267
+ --badge-bg-hover-dark: var(--badge-bg-dark);
1268
+ --badge-text: inherit;
1269
+ --badge-text-dark: inherit;
1270
+ --badge-text-hover: var(--badge-text);
1271
+ --badge-text-hover-dark: var(--badge-text-dark);
1272
+ --badge-border: transparent;
1273
+ --badge-border-dark: transparent;
1274
+
1275
+ display: inline-flex;
1276
+ align-items: center;
1277
+ justify-content: center;
1278
+ border: 1.5px solid var(--badge-border);
1279
+ font-weight: var(--font-weight-semibold);
1280
+ font-family: var(
1281
+ --default-ui-font-family,
1282
+ var(--font-ui, var(--font-body, var(--font-family-sans)))
1283
+ );
1284
+ font-size: inherit;
1285
+ line-height: 1;
1286
+ border-radius: var(--radius-badge, var(--radius-control, var(--radius-md)));
1287
+ transition: all
1288
+ var(--motion-transition-fast, var(--motion-duration-fast, 0.2s))
1289
+ var(--motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
1290
+ background-color: var(--badge-bg);
1291
+ color: var(--badge-text);
1292
+ }
1293
+
1294
+ .bc-badge__content {
1295
+ display: flex;
1296
+ align-items: center;
1297
+ justify-content: center;
1298
+ gap: var(
1299
+ --badge-gap,
1300
+ var(--spacing-stack-2xs, calc(var(--spacing-base) / 2))
1301
+ );
1302
+ }
1303
+
1304
+ /* Size variants */
1305
+ .bc-badge--size-xs {
1306
+ font-size: var(--font-size-xs);
1307
+ padding: calc(var(--spacing-base) * 0.5) calc(var(--spacing-base) * 1);
1308
+ --badge-gap: calc(var(--spacing-base) * 0.25);
1309
+ }
1310
+
1311
+ .bc-badge--size-sm {
1312
+ font-size: var(--font-size-sm);
1313
+ padding: calc(var(--spacing-base) * 0.75) calc(var(--spacing-base) * 1.5);
1314
+ --badge-gap: calc(var(--spacing-base) * 0.5);
1315
+ }
1316
+
1317
+ .bc-badge--size-md {
1318
+ font-size: var(--font-size-base);
1319
+ padding: var(--spacing-base) calc(var(--spacing-base) * 2);
1320
+ --badge-gap: calc(var(--spacing-base) * 0.75);
1321
+ }
1322
+
1323
+ .bc-badge--size-lg {
1324
+ font-size: var(--font-size-lg);
1325
+ padding: calc(var(--spacing-base) * 1.25) calc(var(--spacing-base) * 2.5);
1326
+ --badge-gap: var(--spacing-base);
1327
+ }
1328
+
1329
+ .bc-badge--size-xl {
1330
+ font-size: var(--font-size-xl);
1331
+ padding: calc(var(--spacing-base) * 1.5) calc(var(--spacing-base) * 3);
1332
+ --badge-gap: calc(var(--spacing-base) * 1.25);
1333
+ }
1334
+
1335
+ /* Circle variant - makes badge circular with equal width/height */
1336
+ .bc-badge--circle {
1337
+ padding-left: 0;
1338
+ padding-right: 0;
1339
+ aspect-ratio: 1;
1340
+ border-radius: 50%;
1341
+ }
1342
+
1343
+ .bc-badge--circle.bc-badge--size-xs {
1344
+ min-width: calc(var(--font-size-xs) + var(--spacing-base) * 1 + 3px);
1345
+ }
1346
+
1347
+ .bc-badge--circle.bc-badge--size-sm {
1348
+ min-width: calc(var(--font-size-sm) + var(--spacing-base) * 1.5 + 3px);
1349
+ }
1350
+
1351
+ .bc-badge--circle.bc-badge--size-md {
1352
+ min-width: calc(var(--font-size-md) + var(--spacing-base) * 2 + 3px);
1353
+ }
1354
+
1355
+ .bc-badge--circle.bc-badge--size-lg {
1356
+ min-width: calc(var(--font-size-lg) * 1.2 + var(--spacing-base) * 2.5 + 3px);
1357
+ }
1358
+
1359
+ .bc-badge--circle.bc-badge--size-xl {
1360
+ min-width: calc(var(--font-size-xl) * 1.2 + var(--spacing-base) * 3 + 3px);
1361
+ }
1362
+
1363
+ /* Full width variant */
1364
+ .bc-badge--full-width {
1365
+ display: flex;
1366
+ width: 100%;
1367
+ }
1368
+
1369
+ /* Dark mode styles */
1370
+ .b-dark .bc-badge {
1371
+ background-color: var(--badge-bg-dark);
1372
+ color: var(--badge-text-dark);
1373
+ border-color: var(--badge-border-dark);
1374
+ }
1375
+
1376
+ .b-dark .bc-badge:hover {
1377
+ background-color: var(--badge-bg-hover-dark);
1378
+ color: var(--badge-text-hover-dark);
1379
+ }
1380
+
1381
+ /* Accessibility adjustments */
1382
+ @media (prefers-contrast: high) {
1383
+ .bc-badge {
1384
+ border-width: 2px;
1385
+ }
1386
+ }
1387
+
1388
+ @media (prefers-reduced-motion: reduce) {
1389
+ .bc-badge {
1390
+ transition: none;
1391
+ }
1392
+ }
1393
+
1262
1394
  /* Button Component */
1263
1395
  .bc-button {
1264
1396
  --button-bg: transparent;