@sikka/hawa 0.0.288 → 0.1.1

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 (40) hide show
  1. package/dist/styles.css +182 -89
  2. package/es/blocks/AuthForms/SignInBlock.d.ts +2 -0
  3. package/es/blocks/AuthForms/SignInForm.d.ts +1 -1
  4. package/es/blocks/AuthForms/index.d.ts +1 -0
  5. package/es/elements/Button.d.ts +12 -0
  6. package/es/elements/Card.d.ts +10 -0
  7. package/es/elements/Icons.d.ts +19 -0
  8. package/es/elements/Input.d.ts +5 -0
  9. package/es/elements/Label.d.ts +5 -0
  10. package/es/index.es.js +3 -3
  11. package/es/util.d.ts +2 -0
  12. package/lib/blocks/AuthForms/SignInBlock.d.ts +2 -0
  13. package/lib/blocks/AuthForms/SignInForm.d.ts +1 -1
  14. package/lib/blocks/AuthForms/index.d.ts +1 -0
  15. package/lib/elements/Button.d.ts +12 -0
  16. package/lib/elements/Card.d.ts +10 -0
  17. package/lib/elements/Icons.d.ts +19 -0
  18. package/lib/elements/Input.d.ts +5 -0
  19. package/lib/elements/Label.d.ts +5 -0
  20. package/lib/index.js +3 -3
  21. package/lib/util.d.ts +2 -0
  22. package/package.json +5 -2
  23. package/src/blocks/AuthForms/ResetPasswordForm.tsx +59 -49
  24. package/src/blocks/AuthForms/SignInBlock.tsx +60 -0
  25. package/src/blocks/AuthForms/SignInForm.tsx +139 -128
  26. package/src/blocks/AuthForms/SignUpForm.tsx +237 -225
  27. package/src/blocks/AuthForms/index.ts +8 -7
  28. package/src/elements/Button.tsx +77 -0
  29. package/src/elements/Card.tsx +87 -0
  30. package/src/elements/HawaLoading.tsx +4 -4
  31. package/src/elements/HawaTextField.tsx +9 -7
  32. package/src/elements/Icons.tsx +145 -0
  33. package/src/elements/Input.tsx +25 -0
  34. package/src/elements/Label.tsx +26 -0
  35. package/src/styles.css +182 -89
  36. package/src/tailwind.css +22 -22
  37. package/src/translations/ar.json +1 -0
  38. package/src/translations/en.json +1 -0
  39. package/src/util.ts +10 -4
  40. package/tailwind.config.js +39 -3
package/dist/styles.css CHANGED
@@ -388,46 +388,45 @@ video {
388
388
  :root {
389
389
  --background: 0 0% 100%;
390
390
  --foreground: 240 10% 3.9%;
391
+ --card: 0 0% 100%;
392
+ --card-foreground: 240 10% 3.9%;
393
+ --popover: 0 0% 100%;
394
+ --popover-foreground: 240 10% 3.9%;
395
+ --primary: 240 5.9% 10%;
396
+ --primary-foreground: 0 0% 98%;
397
+ --secondary: 240 4.8% 95.9%;
398
+ --secondary-foreground: 240 5.9% 10%;
399
+ --muted: 240 4.8% 95.9%;
400
+ --muted-foreground: 240 3.8% 46.1%;
401
+ --accent: 240 4.8% 95.9%;
402
+ --accent-foreground: 240 5.9% 10%;
403
+ --destructive: 0 84.2% 60.2%;
404
+ --destructive-foreground: 0 0% 98%;
391
405
  --border: 240 5.9% 90%;
406
+ --input: 240 5.9% 90%;
407
+ --ring: 240 5% 64.9%;
408
+ --radius: 0rem;
409
+ --radius-inner: calc(var(--radius) - calc(var(--radius) / 3));
392
410
 
393
411
  --layout-primary-700: #b7aff7;
394
- /* --layout-primary-500: #dfdcfc; */
395
412
  --layout-primary-500: #fdfdfd;
396
413
  --layout-primary-600: #f7f7f7;
397
414
  --layout-primary-300: #e7e5fa;
398
-
399
415
  --layout-secondary: #d2cdfa;
400
416
 
401
417
  --button-primary-300: 247 72% 61%;
402
418
  --button-primary-500: 247 82% 57%;
403
419
  --button-primary-500-hsl: hsl(247, 82%, 57%);
404
420
  --button-primary-700: 247 71% 39%;
405
-
406
421
  --button-secondary-500: #ffc011;
407
422
  --button-secondary-700: #b48d24;
408
-
409
- --card: 0 0% 100%;
410
- --card-foreground: 240 10% 3.9%;
411
-
412
- --muted: 240 4.8% 95.9%;
413
- --muted-foreground: 240 3.8% 46.1%;
414
-
415
- --border-radius: 10px;
416
- --border-radius-inner: calc(
417
- var(--border-radius) - calc(var(--border-radius) / 3)
418
- );
419
423
  }
420
-
421
424
  .dark {
422
425
  --layout-primary-500: #363636;
423
426
  --layout-primary-600: #2d2d2d;
424
427
  --layout-primary-700: #1d1d1d;
425
428
  --layout-primary-300: #4a4a4a;
426
- /* --layout-primary-300: hsl(240, 8%, 10%); */
427
-
428
- /* --background: 240 10% 3.9%; //odd */
429
- --background: 240 8% 10%;
430
-
429
+ --background: 240 10% 3.9%;
431
430
  --foreground: 0 0% 98%;
432
431
  --card: 240 10% 3.9%;
433
432
  --card-foreground: 0 0% 98%;
@@ -442,12 +441,11 @@ video {
442
441
  --accent: 240 3.7% 15.9%;
443
442
  --accent-foreground: 0 0% 98%;
444
443
  --destructive: 0 62.8% 30.6%;
445
- --destructive-foreground: 0 0% 98%;
444
+ --destructive-foreground: 0 85.7% 97.3%;
446
445
  --border: 240 3.7% 15.9%;
447
446
  --input: 240 3.7% 15.9%;
448
447
  --ring: 240 4.9% 83.9%;
449
448
  }
450
-
451
449
  .link::after {
452
450
  content: url("data:image/svg+xml,%3Csvg stroke='%234c37eb' fill='none' stroke-width='2' viewBox='0 0 24 24' aria-hidden='true' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14'%3E%3C/path%3E%3C/svg%3E");
453
451
  display: inline-block;
@@ -469,7 +467,7 @@ video {
469
467
  font-size: 0.75rem;
470
468
  /* color: theme("colors.slate.500"); */
471
469
  /* background-color: theme("colors.stone.100"); */
472
- border-radius: var(--border-radius);
470
+ border-radius: var(--radius);
473
471
  /* padding-left: theme("spacing[1.5]");
474
472
  padding-right: theme("spacing[1.5]");
475
473
  padding-top: theme("spacing.1");
@@ -642,41 +640,15 @@ video {
642
640
  }
643
641
  .container {
644
642
  width: 100%;
643
+ margin-right: auto;
644
+ margin-left: auto;
645
+ padding-right: 2rem;
646
+ padding-left: 2rem;
645
647
  }
646
- @media (min-width: 440px) {
647
-
648
- .container {
649
- max-width: 440px;
650
- }
651
- }
652
- @media (min-width: 640px) {
653
-
654
- .container {
655
- max-width: 640px;
656
- }
657
- }
658
- @media (min-width: 768px) {
659
-
660
- .container {
661
- max-width: 768px;
662
- }
663
- }
664
- @media (min-width: 1024px) {
665
-
666
- .container {
667
- max-width: 1024px;
668
- }
669
- }
670
- @media (min-width: 1280px) {
671
-
672
- .container {
673
- max-width: 1280px;
674
- }
675
- }
676
- @media (min-width: 1536px) {
648
+ @media (min-width: 1400px) {
677
649
 
678
650
  .container {
679
- max-width: 1536px;
651
+ max-width: 1400px;
680
652
  }
681
653
  }
682
654
  .sr-only {
@@ -1422,6 +1394,9 @@ video {
1422
1394
  -moz-columns: 1;
1423
1395
  columns: 1;
1424
1396
  }
1397
+ .grid-cols-1 {
1398
+ grid-template-columns: repeat(1, minmax(0, 1fr));
1399
+ }
1425
1400
  .grid-cols-2 {
1426
1401
  grid-template-columns: repeat(2, minmax(0, 1fr));
1427
1402
  }
@@ -1500,6 +1475,9 @@ video {
1500
1475
  .gap-5 {
1501
1476
  gap: 1.25rem;
1502
1477
  }
1478
+ .gap-6 {
1479
+ gap: 1.5rem;
1480
+ }
1503
1481
  .gap-8 {
1504
1482
  gap: 2rem;
1505
1483
  }
@@ -1526,11 +1504,6 @@ video {
1526
1504
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
1527
1505
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
1528
1506
  }
1529
- .space-x-2 > :not([hidden]) ~ :not([hidden]) {
1530
- --tw-space-x-reverse: 0;
1531
- margin-right: calc(0.5rem * var(--tw-space-x-reverse));
1532
- margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
1533
- }
1534
1507
  .space-x-4 > :not([hidden]) ~ :not([hidden]) {
1535
1508
  --tw-space-x-reverse: 0;
1536
1509
  margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -1541,6 +1514,16 @@ video {
1541
1514
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
1542
1515
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
1543
1516
  }
1517
+ .space-y-1 > :not([hidden]) ~ :not([hidden]) {
1518
+ --tw-space-y-reverse: 0;
1519
+ margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
1520
+ margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
1521
+ }
1522
+ .space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
1523
+ --tw-space-y-reverse: 0;
1524
+ margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
1525
+ margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
1526
+ }
1544
1527
  .space-y-6 > :not([hidden]) ~ :not([hidden]) {
1545
1528
  --tw-space-y-reverse: 0;
1546
1529
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1594,7 +1577,7 @@ video {
1594
1577
  white-space: nowrap;
1595
1578
  }
1596
1579
  .rounded {
1597
- border-radius: var(--border-radius);
1580
+ border-radius: var(--radius);
1598
1581
  }
1599
1582
  .rounded-3xl {
1600
1583
  border-radius: 1.5rem;
@@ -1606,82 +1589,82 @@ video {
1606
1589
  border-radius: 9999px;
1607
1590
  }
1608
1591
  .rounded-inner {
1609
- border-radius: var(--border-radius-inner);
1592
+ border-radius: var(--radius-inner);
1610
1593
  }
1611
1594
  .rounded-lg {
1612
- border-radius: 0.5rem;
1595
+ border-radius: var(--radius);
1613
1596
  }
1614
1597
  .rounded-md {
1615
- border-radius: 0.375rem;
1598
+ border-radius: calc(var(--radius) - 2px);
1616
1599
  }
1617
1600
  .rounded-none {
1618
1601
  border-radius: 0px;
1619
1602
  }
1620
1603
  .rounded-xl {
1621
- border-radius: 0.75rem;
1604
+ border-radius: calc(var(--radius) + 4px);
1622
1605
  }
1623
1606
  .rounded-b {
1624
- border-bottom-right-radius: var(--border-radius);
1625
- border-bottom-left-radius: var(--border-radius);
1607
+ border-bottom-right-radius: var(--radius);
1608
+ border-bottom-left-radius: var(--radius);
1626
1609
  }
1627
1610
  .rounded-b-lg {
1628
- border-bottom-right-radius: 0.5rem;
1629
- border-bottom-left-radius: 0.5rem;
1611
+ border-bottom-right-radius: var(--radius);
1612
+ border-bottom-left-radius: var(--radius);
1630
1613
  }
1631
1614
  .rounded-l {
1632
- border-top-left-radius: var(--border-radius);
1633
- border-bottom-left-radius: var(--border-radius);
1615
+ border-top-left-radius: var(--radius);
1616
+ border-bottom-left-radius: var(--radius);
1634
1617
  }
1635
1618
  .rounded-l-lg {
1636
- border-top-left-radius: 0.5rem;
1637
- border-bottom-left-radius: 0.5rem;
1619
+ border-top-left-radius: var(--radius);
1620
+ border-bottom-left-radius: var(--radius);
1638
1621
  }
1639
1622
  .rounded-l-none {
1640
1623
  border-top-left-radius: 0px;
1641
1624
  border-bottom-left-radius: 0px;
1642
1625
  }
1643
1626
  .rounded-r {
1644
- border-top-right-radius: var(--border-radius);
1645
- border-bottom-right-radius: var(--border-radius);
1627
+ border-top-right-radius: var(--radius);
1628
+ border-bottom-right-radius: var(--radius);
1646
1629
  }
1647
1630
  .rounded-t {
1648
- border-top-left-radius: var(--border-radius);
1649
- border-top-right-radius: var(--border-radius);
1631
+ border-top-left-radius: var(--radius);
1632
+ border-top-right-radius: var(--radius);
1650
1633
  }
1651
1634
  .rounded-t-inner {
1652
- border-top-left-radius: var(--border-radius-inner);
1653
- border-top-right-radius: var(--border-radius-inner);
1635
+ border-top-left-radius: var(--radius-inner);
1636
+ border-top-right-radius: var(--radius-inner);
1654
1637
  }
1655
1638
  .rounded-t-lg {
1656
- border-top-left-radius: 0.5rem;
1657
- border-top-right-radius: 0.5rem;
1639
+ border-top-left-radius: var(--radius);
1640
+ border-top-right-radius: var(--radius);
1658
1641
  }
1659
1642
  .rounded-bl {
1660
- border-bottom-left-radius: var(--border-radius);
1643
+ border-bottom-left-radius: var(--radius);
1661
1644
  }
1662
1645
  .rounded-bl-lg {
1663
- border-bottom-left-radius: 0.5rem;
1646
+ border-bottom-left-radius: var(--radius);
1664
1647
  }
1665
1648
  .rounded-bl-none {
1666
1649
  border-bottom-left-radius: 0px;
1667
1650
  }
1668
1651
  .rounded-br {
1669
- border-bottom-right-radius: var(--border-radius);
1652
+ border-bottom-right-radius: var(--radius);
1670
1653
  }
1671
1654
  .rounded-br-lg {
1672
- border-bottom-right-radius: 0.5rem;
1655
+ border-bottom-right-radius: var(--radius);
1673
1656
  }
1674
1657
  .rounded-br-none {
1675
1658
  border-bottom-right-radius: 0px;
1676
1659
  }
1677
1660
  .rounded-tl-lg {
1678
- border-top-left-radius: 0.5rem;
1661
+ border-top-left-radius: var(--radius);
1679
1662
  }
1680
1663
  .rounded-tl-none {
1681
1664
  border-top-left-radius: 0px;
1682
1665
  }
1683
1666
  .rounded-tr-lg {
1684
- border-top-right-radius: 0.5rem;
1667
+ border-top-right-radius: var(--radius);
1685
1668
  }
1686
1669
  .rounded-tr-none {
1687
1670
  border-top-right-radius: 0px;
@@ -1788,6 +1771,9 @@ video {
1788
1771
  --tw-border-opacity: 1;
1789
1772
  border-color: rgb(134 239 172 / var(--tw-border-opacity));
1790
1773
  }
1774
+ .border-input {
1775
+ border-color: hsl(var(--input));
1776
+ }
1791
1777
  .border-red-300 {
1792
1778
  --tw-border-opacity: 1;
1793
1779
  border-color: rgb(252 165 165 / var(--tw-border-opacity));
@@ -1849,6 +1835,10 @@ video {
1849
1835
  --tw-bg-opacity: 1;
1850
1836
  background-color: rgb(21 94 117 / var(--tw-bg-opacity));
1851
1837
  }
1838
+ .bg-destructive {
1839
+ --tw-bg-opacity: 1;
1840
+ background-color: hsl(var(--destructive) / var(--tw-bg-opacity));
1841
+ }
1852
1842
  .bg-gray-100 {
1853
1843
  --tw-bg-opacity: 1;
1854
1844
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -1910,6 +1900,12 @@ video {
1910
1900
  --tw-bg-opacity: 1;
1911
1901
  background-color: rgb(251 146 60 / var(--tw-bg-opacity));
1912
1902
  }
1903
+ .bg-primary {
1904
+ background-color: hsl(var(--primary));
1905
+ }
1906
+ .bg-primary-foreground {
1907
+ background-color: hsl(var(--primary-foreground));
1908
+ }
1913
1909
  .bg-red-100 {
1914
1910
  --tw-bg-opacity: 1;
1915
1911
  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
@@ -1938,6 +1934,9 @@ video {
1938
1934
  --tw-bg-opacity: 1;
1939
1935
  background-color: rgb(127 29 29 / var(--tw-bg-opacity));
1940
1936
  }
1937
+ .bg-secondary {
1938
+ background-color: hsl(var(--secondary));
1939
+ }
1941
1940
  .bg-slate-600 {
1942
1941
  --tw-bg-opacity: 1;
1943
1942
  background-color: rgb(71 85 105 / var(--tw-bg-opacity));
@@ -2055,6 +2054,10 @@ video {
2055
2054
  padding-left: 1.5rem;
2056
2055
  padding-right: 1.5rem;
2057
2056
  }
2057
+ .px-8 {
2058
+ padding-left: 2rem;
2059
+ padding-right: 2rem;
2060
+ }
2058
2061
  .px-\[5px\] {
2059
2062
  padding-left: 5px;
2060
2063
  padding-right: 5px;
@@ -2153,6 +2156,9 @@ video {
2153
2156
  .pt-4 {
2154
2157
  padding-top: 1rem;
2155
2158
  }
2159
+ .pt-6 {
2160
+ padding-top: 1.5rem;
2161
+ }
2156
2162
  .text-left {
2157
2163
  text-align: left;
2158
2164
  }
@@ -2296,6 +2302,10 @@ video {
2296
2302
  .text-card-foreground {
2297
2303
  color: hsl(var(--card-foreground));
2298
2304
  }
2305
+ .text-destructive-foreground {
2306
+ --tw-text-opacity: 1;
2307
+ color: hsl(var(--destructive-foreground) / var(--tw-text-opacity));
2308
+ }
2299
2309
  .text-foreground {
2300
2310
  color: hsl(var(--foreground));
2301
2311
  }
@@ -2354,6 +2364,12 @@ video {
2354
2364
  --tw-text-opacity: 1;
2355
2365
  color: rgb(23 23 23 / var(--tw-text-opacity));
2356
2366
  }
2367
+ .text-primary {
2368
+ color: hsl(var(--primary));
2369
+ }
2370
+ .text-primary-foreground {
2371
+ color: hsl(var(--primary-foreground));
2372
+ }
2357
2373
  .text-red-500 {
2358
2374
  --tw-text-opacity: 1;
2359
2375
  color: rgb(239 68 68 / var(--tw-text-opacity));
@@ -2370,6 +2386,9 @@ video {
2370
2386
  --tw-text-opacity: 1;
2371
2387
  color: rgb(127 29 29 / var(--tw-text-opacity));
2372
2388
  }
2389
+ .text-secondary-foreground {
2390
+ color: hsl(var(--secondary-foreground));
2391
+ }
2373
2392
  .text-violet-11 {
2374
2393
  --tw-text-opacity: 1;
2375
2394
  color: hsl(250 43.0% 48.0% / var(--tw-text-opacity));
@@ -2482,6 +2501,9 @@ video {
2482
2501
  .ring-offset-2 {
2483
2502
  --tw-ring-offset-width: 2px;
2484
2503
  }
2504
+ .ring-offset-background {
2505
+ --tw-ring-offset-color: hsl(var(--background));
2506
+ }
2485
2507
  .drop-shadow-lg {
2486
2508
  --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
2487
2509
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -2505,6 +2527,13 @@ video {
2505
2527
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2506
2528
  transition-duration: 150ms;
2507
2529
  }
2530
+ .transition-colors {
2531
+ transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
2532
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
2533
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
2534
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2535
+ transition-duration: 150ms;
2536
+ }
2508
2537
  .delay-100 {
2509
2538
  transition-delay: 100ms;
2510
2539
  }
@@ -2579,6 +2608,25 @@ video {
2579
2608
  body {
2580
2609
  font-family: "IBM Plex Sans Arabic", sans-serif;
2581
2610
  }
2611
+ .file\:border-0::file-selector-button {
2612
+ border-width: 0px;
2613
+ }
2614
+ .file\:bg-transparent::file-selector-button {
2615
+ background-color: transparent;
2616
+ }
2617
+ .file\:text-sm::file-selector-button {
2618
+ font-size: 0.875rem;
2619
+ line-height: 1.25rem;
2620
+ }
2621
+ .file\:font-medium::file-selector-button {
2622
+ font-weight: 500;
2623
+ }
2624
+ .placeholder\:text-muted-foreground::-moz-placeholder {
2625
+ color: hsl(var(--muted-foreground));
2626
+ }
2627
+ .placeholder\:text-muted-foreground::placeholder {
2628
+ color: hsl(var(--muted-foreground));
2629
+ }
2582
2630
  .after\:absolute::after {
2583
2631
  content: var(--tw-content);
2584
2632
  position: absolute;
@@ -2677,6 +2725,9 @@ body {
2677
2725
  .hover\:cursor-pointer:hover {
2678
2726
  cursor: pointer;
2679
2727
  }
2728
+ .hover\:bg-accent:hover {
2729
+ background-color: hsl(var(--accent));
2730
+ }
2680
2731
  .hover\:bg-blue-300:hover {
2681
2732
  --tw-bg-opacity: 1;
2682
2733
  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
@@ -2700,6 +2751,9 @@ body {
2700
2751
  .hover\:bg-buttonSecondary-700:hover {
2701
2752
  background-color: var(--button-secondary-700);
2702
2753
  }
2754
+ .hover\:bg-destructive\/90:hover {
2755
+ background-color: hsl(var(--destructive) / 0.9);
2756
+ }
2703
2757
  .hover\:bg-gray-100:hover {
2704
2758
  --tw-bg-opacity: 1;
2705
2759
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
@@ -2737,10 +2791,16 @@ body {
2737
2791
  .hover\:bg-layoutPrimary-700:hover {
2738
2792
  background-color: var(--layout-primary-700);
2739
2793
  }
2794
+ .hover\:bg-primary\/90:hover {
2795
+ background-color: hsl(var(--primary) / 0.9);
2796
+ }
2740
2797
  .hover\:bg-red-300:hover {
2741
2798
  --tw-bg-opacity: 1;
2742
2799
  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
2743
2800
  }
2801
+ .hover\:bg-secondary\/80:hover {
2802
+ background-color: hsl(var(--secondary) / 0.8);
2803
+ }
2744
2804
  .hover\:bg-yellow-300:hover {
2745
2805
  --tw-bg-opacity: 1;
2746
2806
  background-color: rgb(253 224 71 / var(--tw-bg-opacity));
@@ -2748,6 +2808,9 @@ body {
2748
2808
  .hover\:font-bold:hover {
2749
2809
  font-weight: 700;
2750
2810
  }
2811
+ .hover\:text-accent-foreground:hover {
2812
+ color: hsl(var(--accent-foreground));
2813
+ }
2751
2814
  .hover\:text-black:hover {
2752
2815
  --tw-text-opacity: 1;
2753
2816
  color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -2844,10 +2907,34 @@ body {
2844
2907
  --tw-ring-opacity: 1;
2845
2908
  --tw-ring-color: rgb(249 250 251 / var(--tw-ring-opacity));
2846
2909
  }
2910
+ .focus-visible\:outline-none:focus-visible {
2911
+ outline: 2px solid transparent;
2912
+ outline-offset: 2px;
2913
+ }
2914
+ .focus-visible\:ring-2:focus-visible {
2915
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2916
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2917
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2918
+ }
2919
+ .focus-visible\:ring-ring:focus-visible {
2920
+ --tw-ring-color: hsl(var(--ring));
2921
+ }
2922
+ .focus-visible\:ring-offset-2:focus-visible {
2923
+ --tw-ring-offset-width: 2px;
2924
+ }
2925
+ .disabled\:pointer-events-none:disabled {
2926
+ pointer-events: none;
2927
+ }
2928
+ .disabled\:cursor-not-allowed:disabled {
2929
+ cursor: not-allowed;
2930
+ }
2847
2931
  .disabled\:bg-gray-200:disabled {
2848
2932
  --tw-bg-opacity: 1;
2849
2933
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
2850
2934
  }
2935
+ .disabled\:opacity-50:disabled {
2936
+ opacity: 0.5;
2937
+ }
2851
2938
  .group:hover .group-hover\:opacity-100 {
2852
2939
  opacity: 1;
2853
2940
  }
@@ -2885,6 +2972,12 @@ body {
2885
2972
  --tw-border-opacity: 1;
2886
2973
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
2887
2974
  }
2975
+ .peer:disabled ~ .peer-disabled\:cursor-not-allowed {
2976
+ cursor: not-allowed;
2977
+ }
2978
+ .peer:disabled ~ .peer-disabled\:opacity-70 {
2979
+ opacity: 0.7;
2980
+ }
2888
2981
  .data-\[disabled\]\:pointer-events-none[data-disabled] {
2889
2982
  pointer-events: none;
2890
2983
  }
@@ -3360,8 +3453,8 @@ body {
3360
3453
  }
3361
3454
 
3362
3455
  .md\:rounded-l-lg {
3363
- border-top-left-radius: 0.5rem;
3364
- border-bottom-left-radius: 0.5rem;
3456
+ border-top-left-radius: var(--radius);
3457
+ border-bottom-left-radius: var(--radius);
3365
3458
  }
3366
3459
 
3367
3460
  .md\:border-l {
@@ -0,0 +1,2 @@
1
+ /// <reference types="react" />
2
+ export declare function SignInBlock(): import("react").JSX.Element;
@@ -20,7 +20,7 @@ type SignInFormTypes = {
20
20
  passwordRequiredText?: string;
21
21
  forgotPasswordText?: string;
22
22
  newUserText?: string;
23
- signUpText?: string;
23
+ createAccount?: string;
24
24
  signInText?: string;
25
25
  signInViaGoogleLabel?: string;
26
26
  signInViaGithubLabel?: string;
@@ -1,6 +1,7 @@
1
1
  export * from "./AppLanding";
2
2
  export * from "./SignInPhone";
3
3
  export * from "./SignInForm";
4
+ export * from "./SignInBlock";
4
5
  export * from "./SignUpForm";
5
6
  export * from "./NewPasswordForm";
6
7
  export * from "./ResetPasswordForm";
@@ -0,0 +1,12 @@
1
+ import * as React from "react";
2
+ import { type VariantProps } from "class-variance-authority";
3
+ declare const buttonVariants: (props?: {
4
+ variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
5
+ size?: "default" | "sm" | "lg" | "icon";
6
+ } & import("class-variance-authority/dist/types").ClassProp) => string;
7
+ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
8
+ asChild?: boolean;
9
+ isLoading?: boolean;
10
+ }
11
+ declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
12
+ export { Button, buttonVariants };
@@ -0,0 +1,10 @@
1
+ import * as React from "react";
2
+ declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
3
+ declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
4
+ declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
5
+ declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
6
+ declare const CardContent: React.ForwardRefExoticComponent<{
7
+ headless?: boolean;
8
+ } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
9
+ declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
10
+ export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
@@ -0,0 +1,19 @@
1
+ /// <reference types="react" />
2
+ type IconProps = React.HTMLAttributes<SVGElement>;
3
+ export declare const Icons: {
4
+ logo: (props: IconProps) => import("react").JSX.Element;
5
+ twitter: (props: IconProps) => import("react").JSX.Element;
6
+ gitHub: (props: IconProps) => import("react").JSX.Element;
7
+ radix: (props: IconProps) => import("react").JSX.Element;
8
+ aria: (props: IconProps) => import("react").JSX.Element;
9
+ npm: (props: IconProps) => import("react").JSX.Element;
10
+ yarn: (props: IconProps) => import("react").JSX.Element;
11
+ pnpm: (props: IconProps) => import("react").JSX.Element;
12
+ react: (props: IconProps) => import("react").JSX.Element;
13
+ tailwind: (props: IconProps) => import("react").JSX.Element;
14
+ google: (props: IconProps) => import("react").JSX.Element;
15
+ apple: (props: IconProps) => import("react").JSX.Element;
16
+ paypal: (props: IconProps) => import("react").JSX.Element;
17
+ spinner: (props: IconProps) => import("react").JSX.Element;
18
+ };
19
+ export {};
@@ -0,0 +1,5 @@
1
+ import * as React from "react";
2
+ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
3
+ }
4
+ declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
5
+ export { Input };
@@ -0,0 +1,5 @@
1
+ import * as React from "react";
2
+ import * as LabelPrimitive from "@radix-ui/react-label";
3
+ import { type VariantProps } from "class-variance-authority";
4
+ declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: import("class-variance-authority/dist/types").ClassProp) => string> & React.RefAttributes<HTMLLabelElement>>;
5
+ export { Label };