arekui 1.0.0 → 2.0.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 (99) hide show
  1. package/CHANGELOG.md +49 -0
  2. package/LICENSE +21 -21
  3. package/README.md +26 -198
  4. package/arekui.css +5930 -3279
  5. package/arekui.d.ts +328 -328
  6. package/arekui.js +817 -450
  7. package/assets/img/grunge-wall-texture-freepick-kues1.webp +0 -0
  8. package/assets/img/logo.png +0 -0
  9. package/dist/css/arekui.base.min.css +1 -0
  10. package/dist/css/arekui.broadsheet.min.css +1 -0
  11. package/dist/css/arekui.brutalist.min.css +1 -0
  12. package/dist/css/arekui.default.min.css +1 -0
  13. package/dist/css/arekui.full.min.css +1 -0
  14. package/dist/css/arekui.min.css +1 -0
  15. package/dist/css/arekui.neo.min.css +1 -0
  16. package/dist/css/arekui.pixel.min.css +1 -0
  17. package/dist/js/arekui.min.js +2 -0
  18. package/package.json +64 -57
  19. package/scripts/build-css.js +95 -0
  20. package/scripts/build-custom.js +287 -318
  21. package/scripts/build-js.js +68 -0
  22. package/scripts/clean.js +13 -0
  23. package/scripts/dev.js +97 -0
  24. package/scripts/imports.js +18 -0
  25. package/scripts/split.js +256 -0
  26. package/src/arekui.base.css +63 -0
  27. package/src/arekui.broadsheet.css +6 -0
  28. package/src/arekui.brutalist.css +8 -0
  29. package/src/arekui.core.css +64 -0
  30. package/src/arekui.css +22 -5
  31. package/src/arekui.default.css +6 -0
  32. package/src/arekui.neo.css +8 -0
  33. package/src/arekui.pixel.css +8 -0
  34. package/src/base/brutalist-overrides.css +254 -0
  35. package/src/base/neo-overrides.css +330 -315
  36. package/src/base/pixel-overrides.css +336 -0
  37. package/src/base/reset.css +179 -65
  38. package/src/base/theme-brutalist.css +111 -0
  39. package/src/base/theme-default.css +184 -0
  40. package/src/base/theme-neo.css +108 -0
  41. package/src/base/theme-pixel.css +111 -0
  42. package/src/base/tokens.css +59 -302
  43. package/src/components/accordion.css +32 -33
  44. package/src/components/alert.css +24 -25
  45. package/src/components/badge.css +31 -32
  46. package/src/components/breadcrumb.css +31 -32
  47. package/src/components/broadsheet.css +264 -0
  48. package/src/components/button.css +102 -101
  49. package/src/components/card.css +22 -23
  50. package/src/components/carousel.css +49 -13
  51. package/src/components/chat.css +77 -76
  52. package/src/components/description-list.css +34 -0
  53. package/src/components/docs.css +252 -0
  54. package/src/components/empty.css +36 -0
  55. package/src/components/file-upload.css +49 -50
  56. package/src/components/footer.css +40 -25
  57. package/src/components/forms.css +67 -68
  58. package/src/components/heading.css +27 -0
  59. package/src/components/hero.css +20 -21
  60. package/src/components/join.css +12 -13
  61. package/src/components/kbd.css +15 -0
  62. package/src/components/link.css +22 -23
  63. package/src/components/loading.css +109 -0
  64. package/src/components/menu.css +104 -54
  65. package/src/components/misc.css +94 -55
  66. package/src/components/modal.css +30 -31
  67. package/src/components/navbar.css +166 -36
  68. package/src/components/pagination.css +50 -45
  69. package/src/components/popover.css +68 -69
  70. package/src/components/progress.css +17 -18
  71. package/src/components/prose.css +78 -78
  72. package/src/components/rating.css +35 -36
  73. package/src/components/scroll-top.css +34 -34
  74. package/src/components/segmented.css +44 -0
  75. package/src/components/sidebar.css +377 -0
  76. package/src/components/skeleton.css +52 -52
  77. package/src/components/spinner.css +36 -0
  78. package/src/components/swap.css +43 -43
  79. package/src/components/table.css +20 -21
  80. package/src/components/tabs.css +22 -23
  81. package/src/components/tag.css +99 -99
  82. package/src/components/textured.css +52 -32
  83. package/src/components/timeline.css +32 -33
  84. package/src/components/toast.css +132 -132
  85. package/src/components/tooltip.css +22 -23
  86. package/src/utilities/borders.css +150 -150
  87. package/src/utilities/brutalist-utilities.css +49 -0
  88. package/src/utilities/colors.css +79 -71
  89. package/src/utilities/hover.css +31 -31
  90. package/src/utilities/layout.css +98 -98
  91. package/src/utilities/neo-utilities.css +86 -93
  92. package/src/utilities/pixel-utilities.css +88 -0
  93. package/src/utilities/responsive.css +131 -126
  94. package/src/utilities/sizing.css +98 -89
  95. package/src/utilities/spacing.css +132 -129
  96. package/src/utilities/typography.css +95 -92
  97. package/dist/arekui.min.css +0 -1
  98. package/dist/arekui.min.js +0 -2
  99. package/src/components/drawer.css +0 -53
package/src/components/progress.css CHANGED
@@ -1,19 +1,18 @@
1
- /* PROGRESS */
2
- .ar-progress {
3
- appearance: none;
4
- width: 100%;
5
- height: 1rem;
6
- border-radius: var(--ar-radius-pill);
7
- border: 0;
8
- overflow: hidden;
9
- background: var(--ar-base-300);
10
- }
11
- .ar-progress::-webkit-progress-bar {
12
- background: var(--ar-base-300);
13
- }
14
- .ar-progress::-webkit-progress-value {
15
- background: var(--ar-primary);
16
- }
17
- .ar-progress::-moz-progress-bar {
18
- background: var(--ar-primary);
1
+ .ar-progress {
2
+ appearance: none;
3
+ width: 100%;
4
+ height: 1rem;
5
+ border-radius: var(--ar-radius-pill);
6
+ border: 0;
7
+ overflow: hidden;
8
+ background: var(--ar-base-300);
9
+ }
10
+ .ar-progress::-webkit-progress-bar {
11
+ background: var(--ar-base-300);
12
+ }
13
+ .ar-progress::-webkit-progress-value {
14
+ background: var(--ar-primary);
15
+ }
16
+ .ar-progress::-moz-progress-bar {
17
+ background: var(--ar-primary);
19
18
  }
package/src/components/prose.css CHANGED
@@ -1,80 +1,80 @@
1
1
  /* PROSE (article typography) */
2
- .ar-prose {
3
- font-size: 1rem;
4
- line-height: 1.75;
5
- max-width: 65ch;
6
- }
7
- .ar-prose > * + * {
8
- margin-top: 1rem;
9
- }
10
- .ar-prose h1,
11
- .ar-prose h2,
12
- .ar-prose h3,
13
- .ar-prose h4 {
14
- margin-top: 1.5rem;
15
- font-weight: 700;
16
- }
17
- .ar-prose h1 {
18
- font-size: 1.75rem;
19
- }
20
- .ar-prose h2 {
21
- font-size: 1.375rem;
22
- }
23
- .ar-prose h3 {
24
- font-size: 1.125rem;
25
- }
26
- .ar-prose h4 {
27
- font-size: 1rem;
28
- }
29
- .ar-prose img {
30
- margin: 1rem auto;
31
- border-radius: var(--ar-radius-box);
32
- }
33
- .ar-prose a {
34
- text-decoration: underline;
35
- }
36
- .ar-prose blockquote {
37
- margin: 1rem 0;
38
- border-left: 4px solid var(--ar-base-300);
39
- padding-left: 1rem;
40
- font-style: italic;
41
- color: var(--ar-gray-600);
42
- }
43
- .ar-prose ul,
44
- .ar-prose ol {
45
- padding-left: 1.5rem;
46
- }
47
- .ar-prose pre {
48
- background: var(--ar-base-200);
49
- border-radius: var(--ar-radius-box);
50
- padding: 1rem;
51
- overflow-x: auto;
52
- }
53
- .ar-prose code {
54
- font-size: 0.875em;
55
- background: var(--ar-base-200);
56
- border-radius: var(--ar-radius-field);
57
- padding: 0.125rem 0.375rem;
58
- }
59
- .ar-prose pre code {
60
- background: transparent;
61
- padding: 0;
62
- }
63
- .ar-prose table {
64
- width: 100%;
65
- border-collapse: collapse;
66
- font-size: 0.875rem;
67
- }
68
- .ar-prose th,
69
- .ar-prose td {
70
- border: var(--ar-border-width) solid var(--ar-base-300);
71
- padding: 0.5rem 0.75rem;
72
- }
73
- .ar-prose th {
74
- background: var(--ar-base-200);
75
- }
76
- .ar-prose hr {
77
- border: 0;
78
- border-top: var(--ar-border-width) solid var(--ar-base-300);
79
- margin: 1.5rem 0;
2
+ .ar-prose {
3
+ font-size: 1rem;
4
+ line-height: 1.75;
5
+ max-width: 65ch;
6
+ }
7
+ .ar-prose > * + * {
8
+ margin-top: 1rem;
9
+ }
10
+ .ar-prose h1,
11
+ .ar-prose h2,
12
+ .ar-prose h3,
13
+ .ar-prose h4 {
14
+ margin-top: 1.5rem;
15
+ font-weight: 700;
16
+ }
17
+ .ar-prose h1 {
18
+ font-size: 1.75rem;
19
+ }
20
+ .ar-prose h2 {
21
+ font-size: 1.375rem;
22
+ }
23
+ .ar-prose h3 {
24
+ font-size: 1.125rem;
25
+ }
26
+ .ar-prose h4 {
27
+ font-size: 1rem;
28
+ }
29
+ .ar-prose img {
30
+ margin: 1rem auto;
31
+ border-radius: var(--ar-radius-box);
32
+ }
33
+ .ar-prose a {
34
+ text-decoration: underline;
35
+ }
36
+ .ar-prose blockquote {
37
+ margin: 1rem 0;
38
+ border-left: 4px solid var(--ar-base-300);
39
+ padding-left: 1rem;
40
+ font-style: italic;
41
+ color: var(--ar-gray-600);
42
+ }
43
+ .ar-prose ul,
44
+ .ar-prose ol {
45
+ padding-left: 1.5rem;
46
+ }
47
+ .ar-prose pre {
48
+ background: var(--ar-base-200);
49
+ border-radius: var(--ar-radius-box);
50
+ padding: 1rem;
51
+ overflow-x: auto;
52
+ }
53
+ .ar-prose code {
54
+ font-size: 0.875em;
55
+ background: var(--ar-base-200);
56
+ border-radius: var(--ar-radius-field);
57
+ padding: 0.125rem 0.375rem;
58
+ }
59
+ .ar-prose pre code {
60
+ background: transparent;
61
+ padding: 0;
62
+ }
63
+ .ar-prose table {
64
+ width: 100%;
65
+ border-collapse: collapse;
66
+ font-size: 0.875rem;
67
+ }
68
+ .ar-prose th,
69
+ .ar-prose td {
70
+ border: var(--ar-border-width) solid var(--ar-base-300);
71
+ padding: 0.5rem 0.75rem;
72
+ }
73
+ .ar-prose th {
74
+ background: var(--ar-base-200);
75
+ }
76
+ .ar-prose hr {
77
+ border: 0;
78
+ border-top: var(--ar-border-width) solid var(--ar-base-300);
79
+ margin: 1.5rem 0;
80
80
  }
package/src/components/rating.css CHANGED
@@ -1,37 +1,36 @@
1
- /* RATING */
2
- .ar-rating {
3
- display: inline-flex;
4
- gap: var(--ar-s-1);
5
- direction: rtl;
6
- }
7
- .ar-rating input {
8
- display: none;
9
- }
10
- .ar-rating label {
11
- cursor: pointer;
12
- color: var(--ar-gray-300);
13
- transition:
14
- color 0.15s ease,
15
- transform 0.15s ease;
16
- }
17
- .ar-rating label:hover,
18
- .ar-rating label:hover ~ label,
19
- .ar-rating input:checked ~ label {
20
- color: var(--ar-warning);
21
- }
22
- .ar-rating label:hover {
23
- transform: scale(1.15);
24
- }
25
- .ar-rating svg {
26
- width: 1.5rem;
27
- height: 1.5rem;
28
- fill: currentColor;
29
- }
30
- .ar-rating-readonly label {
31
- cursor: default;
32
- }
33
- .ar-rating-readonly label:hover,
34
- .ar-rating-readonly label:hover ~ label,
35
- .ar-rating-readonly input:checked ~ label {
36
- transform: none;
1
+ .ar-rating {
2
+ display: inline-flex;
3
+ gap: var(--ar-s-1);
4
+ direction: rtl;
5
+ }
6
+ .ar-rating input {
7
+ display: none;
8
+ }
9
+ .ar-rating label {
10
+ cursor: pointer;
11
+ color: var(--ar-gray-300);
12
+ transition:
13
+ color 0.15s ease,
14
+ transform 0.15s ease;
15
+ }
16
+ .ar-rating label:hover,
17
+ .ar-rating label:hover ~ label,
18
+ .ar-rating input:checked ~ label {
19
+ color: var(--ar-warning);
20
+ }
21
+ .ar-rating label:hover {
22
+ transform: scale(1.15);
23
+ }
24
+ .ar-rating svg {
25
+ width: 1.5rem;
26
+ height: 1.5rem;
27
+ fill: currentColor;
28
+ }
29
+ .ar-rating-readonly label {
30
+ cursor: default;
31
+ }
32
+ .ar-rating-readonly label:hover,
33
+ .ar-rating-readonly label:hover ~ label,
34
+ .ar-rating-readonly input:checked ~ label {
35
+ transform: none;
37
36
  }
package/src/components/scroll-top.css CHANGED
@@ -1,36 +1,36 @@
1
1
  /* SCROLL TO TOP */
2
- .ar-scroll-top {
3
- position: fixed;
4
- bottom: var(--ar-s-6);
5
- right: var(--ar-s-6);
6
- z-index: 40;
7
- display: flex;
8
- align-items: center;
9
- justify-content: center;
10
- width: 2.75rem;
11
- height: 2.75rem;
12
- border-radius: var(--ar-radius-pill);
13
- background: var(--ar-primary);
14
- color: var(--ar-primary-content);
15
- border: 0;
16
- cursor: pointer;
17
- box-shadow: var(--ar-shadow-lg);
18
- opacity: 0;
19
- visibility: hidden;
20
- transform: translateY(0.5rem);
21
- transition: all 0.3s ease;
22
- }
23
- .ar-scroll-top-visible {
24
- opacity: 1;
25
- visibility: visible;
26
- transform: translateY(0);
27
- }
28
- .ar-scroll-top:hover {
29
- background: var(--ar-neutral);
30
- color: var(--ar-neutral-content);
31
- transform: translateY(-0.125rem);
32
- }
33
- .ar-scroll-top svg {
34
- width: 1.25rem;
35
- height: 1.25rem;
2
+ .ar-scroll-top {
3
+ position: fixed;
4
+ bottom: var(--ar-s-6);
5
+ right: var(--ar-s-6);
6
+ z-index: 40;
7
+ display: flex;
8
+ align-items: center;
9
+ justify-content: center;
10
+ width: 2.75rem;
11
+ height: 2.75rem;
12
+ border-radius: var(--ar-radius-pill);
13
+ background: var(--ar-primary);
14
+ color: var(--ar-primary-content);
15
+ border: 0;
16
+ cursor: pointer;
17
+ box-shadow: var(--ar-shadow-lg);
18
+ opacity: 0;
19
+ visibility: hidden;
20
+ transform: translateY(0.5rem);
21
+ transition: all 0.3s ease;
22
+ }
23
+ .ar-scroll-top-visible {
24
+ opacity: 1;
25
+ visibility: visible;
26
+ transform: translateY(0);
27
+ }
28
+ .ar-scroll-top:hover {
29
+ background: var(--ar-neutral);
30
+ color: var(--ar-neutral-content);
31
+ transform: translateY(-0.125rem);
32
+ }
33
+ .ar-scroll-top svg {
34
+ width: 1.25rem;
35
+ height: 1.25rem;
36
36
  }
package/src/components/segmented.css ADDED
@@ -0,0 +1,44 @@
1
+ /* SEGMENTED CONTROL */
2
+ .ar-segmented {
3
+ display: inline-flex;
4
+ align-items: center;
5
+ gap: var(--ar-s-1);
6
+ padding: var(--ar-s-1);
7
+ border-radius: var(--ar-radius-box);
8
+ background: var(--ar-base-200);
9
+ }
10
+ .ar-segmented-input {
11
+ position: absolute;
12
+ width: 1px;
13
+ height: 1px;
14
+ margin: -1px;
15
+ padding: 0;
16
+ overflow: hidden;
17
+ clip-path: inset(50%);
18
+ white-space: nowrap;
19
+ border: 0;
20
+ }
21
+ .ar-segmented-item {
22
+ padding: 0.5rem 1rem;
23
+ border-radius: calc(var(--ar-radius-box) - var(--ar-s-1));
24
+ color: var(--ar-gray-600);
25
+ font-family: var(--ar-font-sans);
26
+ font-size: 0.875rem;
27
+ font-weight: 600;
28
+ line-height: 1.25;
29
+ text-align: center;
30
+ white-space: nowrap;
31
+ cursor: pointer;
32
+ user-select: none;
33
+ }
34
+ .ar-segmented-item:hover {
35
+ color: var(--ar-base-content);
36
+ }
37
+ .ar-segmented-input:checked + .ar-segmented-item {
38
+ background: var(--ar-primary);
39
+ color: var(--ar-primary-content);
40
+ }
41
+ .ar-segmented-input:focus-visible + .ar-segmented-item {
42
+ outline: 2px solid var(--ar-primary);
43
+ outline-offset: 1px;
44
+ }