@kala-ui/react 0.0.1-beta.6 → 0.0.1-beta.7

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 (47) hide show
  1. package/CHANGELOG.md +110 -110
  2. package/LICENSE +21 -21
  3. package/README.md +366 -366
  4. package/dist/components/container/container.d.ts +11 -0
  5. package/dist/components/container/container.js +29 -0
  6. package/dist/components/container/container.stories.d.ts +8 -0
  7. package/dist/components/container/container.stories.js +34 -0
  8. package/dist/components/container/index.d.ts +1 -0
  9. package/dist/components/container/index.js +1 -0
  10. package/dist/components/dnd/dnd.stories.js +35 -35
  11. package/dist/components/flex/flex.d.ts +16 -0
  12. package/dist/components/flex/flex.js +78 -0
  13. package/dist/components/flex/flex.stories.d.ts +8 -0
  14. package/dist/components/flex/flex.stories.js +51 -0
  15. package/dist/components/flex/index.d.ts +1 -0
  16. package/dist/components/flex/index.js +1 -0
  17. package/dist/components/group/group.d.ts +7 -0
  18. package/dist/components/group/group.js +9 -0
  19. package/dist/components/group/group.stories.d.ts +7 -0
  20. package/dist/components/group/group.stories.js +34 -0
  21. package/dist/components/group/index.d.ts +1 -0
  22. package/dist/components/group/index.js +1 -0
  23. package/dist/components/heading/heading.d.ts +12 -0
  24. package/dist/components/heading/heading.js +44 -0
  25. package/dist/components/heading/heading.stories.d.ts +9 -0
  26. package/dist/components/heading/heading.stories.js +45 -0
  27. package/dist/components/heading/index.d.ts +1 -0
  28. package/dist/components/heading/index.js +1 -0
  29. package/dist/components/resizable/resizable.stories.js +8 -8
  30. package/dist/components/scroll-area/scroll-area.stories.js +25 -25
  31. package/dist/components/stack/index.d.ts +1 -0
  32. package/dist/components/stack/index.js +1 -0
  33. package/dist/components/stack/stack.d.ts +7 -0
  34. package/dist/components/stack/stack.js +9 -0
  35. package/dist/components/stack/stack.stories.d.ts +8 -0
  36. package/dist/components/stack/stack.stories.js +44 -0
  37. package/dist/components/text/index.d.ts +1 -0
  38. package/dist/components/text/index.js +1 -0
  39. package/dist/components/text/text.d.ts +14 -0
  40. package/dist/components/text/text.js +66 -0
  41. package/dist/components/text/text.stories.d.ts +8 -0
  42. package/dist/components/text/text.stories.js +40 -0
  43. package/dist/index.d.ts +6 -0
  44. package/dist/index.js +6 -0
  45. package/dist/lib/animations.js +94 -94
  46. package/dist/styles/globals.css +171 -20
  47. package/package.json +446 -418
@@ -1118,6 +1118,24 @@
1118
1118
  .max-w-md {
1119
1119
  max-width: var(--container-md);
1120
1120
  }
1121
+ .max-w-none {
1122
+ max-width: none;
1123
+ }
1124
+ .max-w-screen-2xl {
1125
+ max-width: 1536px;
1126
+ }
1127
+ .max-w-screen-lg {
1128
+ max-width: 1024px;
1129
+ }
1130
+ .max-w-screen-md {
1131
+ max-width: 768px;
1132
+ }
1133
+ .max-w-screen-sm {
1134
+ max-width: 640px;
1135
+ }
1136
+ .max-w-screen-xl {
1137
+ max-width: 1280px;
1138
+ }
1121
1139
  .max-w-sm {
1122
1140
  max-width: var(--container-sm);
1123
1141
  }
@@ -1163,12 +1181,24 @@
1163
1181
  .flex-1 {
1164
1182
  flex: 1;
1165
1183
  }
1184
+ .flex-shrink {
1185
+ flex-shrink: 1;
1186
+ }
1166
1187
  .flex-shrink-0 {
1167
1188
  flex-shrink: 0;
1168
1189
  }
1190
+ .shrink {
1191
+ flex-shrink: 1;
1192
+ }
1169
1193
  .shrink-0 {
1170
1194
  flex-shrink: 0;
1171
1195
  }
1196
+ .flex-grow {
1197
+ flex-grow: 1;
1198
+ }
1199
+ .flex-grow-0 {
1200
+ flex-grow: 0;
1201
+ }
1172
1202
  .grow {
1173
1203
  flex-grow: 1;
1174
1204
  }
@@ -1355,9 +1385,21 @@
1355
1385
  .flex-row {
1356
1386
  flex-direction: row;
1357
1387
  }
1388
+ .flex-row-reverse {
1389
+ flex-direction: row-reverse;
1390
+ }
1391
+ .flex-nowrap {
1392
+ flex-wrap: nowrap;
1393
+ }
1358
1394
  .flex-wrap {
1359
1395
  flex-wrap: wrap;
1360
1396
  }
1397
+ .flex-wrap-reverse {
1398
+ flex-wrap: wrap-reverse;
1399
+ }
1400
+ .items-baseline {
1401
+ align-items: baseline;
1402
+ }
1361
1403
  .items-center {
1362
1404
  align-items: center;
1363
1405
  }
@@ -1370,6 +1412,9 @@
1370
1412
  .items-stretch {
1371
1413
  align-items: stretch;
1372
1414
  }
1415
+ .justify-around {
1416
+ justify-content: space-around;
1417
+ }
1373
1418
  .justify-between {
1374
1419
  justify-content: space-between;
1375
1420
  }
@@ -1379,6 +1424,9 @@
1379
1424
  .justify-end {
1380
1425
  justify-content: flex-end;
1381
1426
  }
1427
+ .justify-evenly {
1428
+ justify-content: space-evenly;
1429
+ }
1382
1430
  .justify-start {
1383
1431
  justify-content: flex-start;
1384
1432
  }
@@ -1400,6 +1448,9 @@
1400
1448
  .gap-4 {
1401
1449
  gap: 1rem;
1402
1450
  }
1451
+ .gap-5 {
1452
+ gap: 1.25rem;
1453
+ }
1403
1454
  .gap-6 {
1404
1455
  gap: 1.5rem;
1405
1456
  }
@@ -1409,6 +1460,15 @@
1409
1460
  .gap-8 {
1410
1461
  gap: 2rem;
1411
1462
  }
1463
+ .gap-10 {
1464
+ gap: 2.5rem;
1465
+ }
1466
+ .gap-12 {
1467
+ gap: 3rem;
1468
+ }
1469
+ .gap-16 {
1470
+ gap: 4rem;
1471
+ }
1412
1472
  .space-y-1 {
1413
1473
  :where(& > :not(:last-child)) {
1414
1474
  --tw-space-y-reverse: 0;
@@ -2330,12 +2390,21 @@
2330
2390
  .text-center {
2331
2391
  text-align: center;
2332
2392
  }
2393
+ .text-end {
2394
+ text-align: end;
2395
+ }
2396
+ .text-justify {
2397
+ text-align: justify;
2398
+ }
2333
2399
  .text-left {
2334
2400
  text-align: left;
2335
2401
  }
2336
2402
  .text-right {
2337
2403
  text-align: right;
2338
2404
  }
2405
+ .text-start {
2406
+ text-align: start;
2407
+ }
2339
2408
  .align-middle {
2340
2409
  vertical-align: middle;
2341
2410
  }
@@ -2354,10 +2423,26 @@
2354
2423
  font-size: 2.25rem;
2355
2424
  line-height: var(--tw-leading, 2.5rem);
2356
2425
  }
2426
+ .text-5xl {
2427
+ font-size: 3rem;
2428
+ line-height: var(--tw-leading, 1);
2429
+ }
2357
2430
  .text-6xl {
2358
2431
  font-size: 3.75rem;
2359
2432
  line-height: var(--tw-leading, 1);
2360
2433
  }
2434
+ .text-7xl {
2435
+ font-size: 4.5rem;
2436
+ line-height: var(--tw-leading, 1);
2437
+ }
2438
+ .text-8xl {
2439
+ font-size: 6rem;
2440
+ line-height: var(--tw-leading, 1);
2441
+ }
2442
+ .text-9xl {
2443
+ font-size: 8rem;
2444
+ line-height: var(--tw-leading, 1);
2445
+ }
2361
2446
  .text-base {
2362
2447
  font-size: 1rem;
2363
2448
  line-height: var(--tw-leading, 1.5rem);
@@ -2407,10 +2492,26 @@
2407
2492
  --tw-leading: 1.25;
2408
2493
  line-height: 1.25;
2409
2494
  }
2495
+ .font-black {
2496
+ --tw-font-weight: 900;
2497
+ font-weight: 900;
2498
+ }
2410
2499
  .font-bold {
2411
2500
  --tw-font-weight: 700;
2412
2501
  font-weight: 700;
2413
2502
  }
2503
+ .font-extrabold {
2504
+ --tw-font-weight: 800;
2505
+ font-weight: 800;
2506
+ }
2507
+ .font-extralight {
2508
+ --tw-font-weight: 200;
2509
+ font-weight: 200;
2510
+ }
2511
+ .font-light {
2512
+ --tw-font-weight: 300;
2513
+ font-weight: 300;
2514
+ }
2414
2515
  .font-medium {
2415
2516
  --tw-font-weight: 500;
2416
2517
  font-weight: 500;
@@ -2423,6 +2524,10 @@
2423
2524
  --tw-font-weight: 600;
2424
2525
  font-weight: 600;
2425
2526
  }
2527
+ .font-thin {
2528
+ --tw-font-weight: 100;
2529
+ font-weight: 100;
2530
+ }
2426
2531
  .tracking-tight {
2427
2532
  --tw-tracking: -0.025em;
2428
2533
  letter-spacing: -0.025em;
@@ -5489,6 +5594,11 @@
5489
5594
  padding: 1.5rem;
5490
5595
  }
5491
5596
  }
5597
+ .md\:px-6 {
5598
+ @media (width >= 768px) {
5599
+ padding-inline: 1.5rem;
5600
+ }
5601
+ }
5492
5602
  .md\:py-12 {
5493
5603
  @media (width >= 768px) {
5494
5604
  padding-block: 3rem;
@@ -5564,12 +5674,53 @@
5564
5674
  padding-inline: 1.5rem;
5565
5675
  }
5566
5676
  }
5677
+ .lg\:px-8 {
5678
+ @media (width >= 1024px) {
5679
+ padding-inline: 2rem;
5680
+ }
5681
+ }
5682
+ .lg\:text-2xl {
5683
+ @media (width >= 1024px) {
5684
+ font-size: 1.5rem;
5685
+ line-height: var(--tw-leading, 2rem);
5686
+ }
5687
+ }
5688
+ .lg\:text-3xl {
5689
+ @media (width >= 1024px) {
5690
+ font-size: 1.875rem;
5691
+ line-height: var(--tw-leading, 2.25rem);
5692
+ }
5693
+ }
5694
+ .lg\:text-4xl {
5695
+ @media (width >= 1024px) {
5696
+ font-size: 2.25rem;
5697
+ line-height: var(--tw-leading, 2.5rem);
5698
+ }
5699
+ }
5700
+ .lg\:text-5xl {
5701
+ @media (width >= 1024px) {
5702
+ font-size: 3rem;
5703
+ line-height: var(--tw-leading, 1);
5704
+ }
5705
+ }
5567
5706
  .lg\:text-base {
5568
5707
  @media (width >= 1024px) {
5569
5708
  font-size: 1rem;
5570
5709
  line-height: var(--tw-leading, 1.5rem);
5571
5710
  }
5572
5711
  }
5712
+ .lg\:text-lg {
5713
+ @media (width >= 1024px) {
5714
+ font-size: 1.125rem;
5715
+ line-height: var(--tw-leading, 1.75rem);
5716
+ }
5717
+ }
5718
+ .lg\:text-xl {
5719
+ @media (width >= 1024px) {
5720
+ font-size: 1.25rem;
5721
+ line-height: var(--tw-leading, 1.75rem);
5722
+ }
5723
+ }
5573
5724
  .xl\:w-64 {
5574
5725
  @media (width >= 1280px) {
5575
5726
  width: 16rem;
@@ -6446,11 +6597,11 @@
6446
6597
  -webkit-tap-highlight-color: transparent;
6447
6598
  -webkit-touch-callout: none;
6448
6599
  }
6449
- button,
6450
- [role="button"],
6451
- a,
6452
- input[type="submit"],
6453
- input[type="button"],
6600
+ button,
6601
+ [role="button"],
6602
+ a,
6603
+ input[type="submit"],
6604
+ input[type="button"],
6454
6605
  input[type="reset"] {
6455
6606
  -webkit-tap-highlight-color: transparent;
6456
6607
  touch-action: manipulation;
@@ -6655,14 +6806,14 @@
6655
6806
  }
6656
6807
  .theme-card {
6657
6808
  background-color: hsl(var(--card));
6658
- border-color: hsl(
6659
- var(--border) /
6660
- var(--card-border-alpha, var(--border-alpha, 1))
6809
+ border-color: hsl(
6810
+ var(--border) /
6811
+ var(--card-border-alpha, var(--border-alpha, 1))
6661
6812
  );
6662
- box-shadow: 0 0 var(--shadow-spread)
6813
+ box-shadow: 0 0 var(--shadow-spread)
6663
6814
  hsl(var(--shadow-color) / var(--shadow-alpha)) !important;
6664
6815
  }
6665
- .theme-input,
6816
+ .theme-input,
6666
6817
  .theme-dropdown {
6667
6818
  background-color: hsl(var(--card)) !important;
6668
6819
  border-color: hsl(var(--border) / var(--border-alpha, 1)) !important;
@@ -6680,7 +6831,7 @@
6680
6831
  --tw-ring-offset-color: hsl(var(--ring-offset-color));
6681
6832
  --tw-ring-color: hsl(var(--ring));
6682
6833
  outline: none;
6683
- box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color),
6834
+ box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color),
6684
6835
  0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
6685
6836
  }
6686
6837
  .ring-destructive {
@@ -6688,7 +6839,7 @@
6688
6839
  --tw-ring-offset-color: hsl(var(--ring-offset-color));
6689
6840
  --tw-ring-color: hsl(var(--destructive));
6690
6841
  outline: none;
6691
- box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color),
6842
+ box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color),
6692
6843
  0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
6693
6844
  }
6694
6845
  .ring-success {
@@ -6696,7 +6847,7 @@
6696
6847
  --tw-ring-offset-color: hsl(var(--ring-offset-color));
6697
6848
  --tw-ring-color: hsl(var(--success));
6698
6849
  outline: none;
6699
- box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color),
6850
+ box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color),
6700
6851
  0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
6701
6852
  }
6702
6853
  .focus-ring {
@@ -6706,7 +6857,7 @@
6706
6857
  --tw-ring-offset-width: 2px;
6707
6858
  --tw-ring-offset-color: hsl(var(--ring-offset-color));
6708
6859
  --tw-ring-color: hsl(var(--ring));
6709
- box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color),
6860
+ box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color),
6710
6861
  0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
6711
6862
  }
6712
6863
  .focus-within-ring {
@@ -6716,7 +6867,7 @@
6716
6867
  --tw-ring-offset-width: 2px;
6717
6868
  --tw-ring-offset-color: hsl(var(--ring-offset-color));
6718
6869
  --tw-ring-color: hsl(var(--ring));
6719
- box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color),
6870
+ box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color),
6720
6871
  0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
6721
6872
  }
6722
6873
  .focus-ring-destructive {
@@ -6726,7 +6877,7 @@
6726
6877
  --tw-ring-offset-width: 2px;
6727
6878
  --tw-ring-offset-color: hsl(var(--ring-offset-color));
6728
6879
  --tw-ring-color: hsl(var(--destructive));
6729
- box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color),
6880
+ box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color),
6730
6881
  0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
6731
6882
  }
6732
6883
  .focus-ring-success {
@@ -6736,7 +6887,7 @@
6736
6887
  --tw-ring-offset-width: 2px;
6737
6888
  --tw-ring-offset-color: hsl(var(--ring-offset-color));
6738
6889
  --tw-ring-color: hsl(var(--success));
6739
- box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color),
6890
+ box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color),
6740
6891
  0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
6741
6892
  }
6742
6893
  .focus-within-ring-destructive {
@@ -6746,7 +6897,7 @@
6746
6897
  --tw-ring-offset-width: 2px;
6747
6898
  --tw-ring-offset-color: hsl(var(--ring-offset-color));
6748
6899
  --tw-ring-color: hsl(var(--destructive));
6749
- box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color),
6900
+ box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color),
6750
6901
  0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
6751
6902
  }
6752
6903
  .focus-visible-ring-success {
@@ -6756,7 +6907,7 @@
6756
6907
  --tw-ring-offset-width: 2px;
6757
6908
  --tw-ring-offset-color: hsl(var(--ring-offset-color));
6758
6909
  --tw-ring-color: hsl(var(--success));
6759
- box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color),
6910
+ box-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color),
6760
6911
  0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
6761
6912
  }
6762
6913
  @keyframes enter {
@@ -7215,4 +7366,4 @@
7215
7366
  --tw-content: "";
7216
7367
  }
7217
7368
  }
7218
- }
7369
+ }