arekui 1.0.0 → 2.0.0

package/src/components/tag.css

@@ -1,101 +1,101 @@
 /* TAG / CHIP */
-.ar-tag {
- display: inline-flex;
- align-items: center;
- gap: var(--ar-s-1);
- padding: 0.25rem 0.75rem;
- border-radius: var(--ar-radius-pill);
- background: var(--ar-base-200);
- color: var(--ar-base-content);
- font-size: 0.8125rem;
- font-weight: 500;
- line-height: 1.4;
- white-space: nowrap;
-}
-.ar-tag-primary {
- background: var(--ar-primary);
- color: var(--ar-primary-content);
-}
-.ar-tag-secondary {
- background: var(--ar-secondary);
- color: var(--ar-secondary-content);
-}
-.ar-tag-accent {
- background: var(--ar-accent);
- color: var(--ar-accent-content);
-}
-.ar-tag-neutral {
- background: var(--ar-neutral);
- color: var(--ar-neutral-content);
-}
-.ar-tag-info {
- background: var(--ar-info);
- color: var(--ar-info-content);
-}
-.ar-tag-success {
- background: var(--ar-success);
- color: var(--ar-success-content);
-}
-.ar-tag-warning {
- background: var(--ar-warning);
- color: var(--ar-warning-content);
-}
-.ar-tag-error {
- background: var(--ar-error);
- color: var(--ar-error-content);
-}
-.ar-tag-outline {
- background: transparent;
- border: var(--ar-border-width) solid currentColor;
-}
-.ar-tag-outline.ar-tag-primary {
- color: var(--ar-primary);
-}
-.ar-tag-outline.ar-tag-secondary {
- color: var(--ar-secondary);
-}
-.ar-tag-outline.ar-tag-accent {
- color: var(--ar-accent);
-}
-.ar-tag-outline.ar-tag-neutral {
- color: var(--ar-neutral);
-}
-.ar-tag-outline.ar-tag-info {
- color: var(--ar-info);
-}
-.ar-tag-outline.ar-tag-success {
- color: var(--ar-success);
-}
-.ar-tag-outline.ar-tag-warning {
- color: var(--ar-warning);
-}
-.ar-tag-outline.ar-tag-error {
- color: var(--ar-error);
-}
-.ar-tag-lg {
- padding: 0.375rem 1rem;
- font-size: 0.875rem;
-}
-.ar-tag-sm {
- padding: 0.125rem 0.5rem;
- font-size: 0.75rem;
-}
-.ar-tag-close {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- width: 1rem;
- height: 1rem;
- border-radius: var(--ar-radius-pill);
- background: transparent;
- border: 0;
- color: inherit;
- opacity: 0.6;
- cursor: pointer;
- padding: 0;
- font-size: 0.875rem;
- line-height: 1;
-}
-.ar-tag-close:hover {
- opacity: 1;
+.ar-tag {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--ar-s-1);
+ padding: 0.25rem 0.75rem;
+ border-radius: var(--ar-radius-pill);
+ background: var(--ar-base-200);
+ color: var(--ar-base-content);
+ font-size: 0.8125rem;
+ font-weight: 500;
+ line-height: 1.4;
+ white-space: nowrap;
+}
+.ar-tag-primary {
+ background: var(--ar-primary);
+ color: var(--ar-primary-content);
+}
+.ar-tag-secondary {
+ background: var(--ar-secondary);
+ color: var(--ar-secondary-content);
+}
+.ar-tag-accent {
+ background: var(--ar-accent);
+ color: var(--ar-accent-content);
+}
+.ar-tag-neutral {
+ background: var(--ar-neutral);
+ color: var(--ar-neutral-content);
+}
+.ar-tag-info {
+ background: var(--ar-info);
+ color: var(--ar-info-content);
+}
+.ar-tag-success {
+ background: var(--ar-success);
+ color: var(--ar-success-content);
+}
+.ar-tag-warning {
+ background: var(--ar-warning);
+ color: var(--ar-warning-content);
+}
+.ar-tag-error {
+ background: var(--ar-error);
+ color: var(--ar-error-content);
+}
+.ar-tag-outline {
+ background: transparent;
+ border: var(--ar-border-width) solid currentColor;
+}
+.ar-tag-outline.ar-tag-primary {
+ color: var(--ar-primary-text);
+}
+.ar-tag-outline.ar-tag-secondary {
+ color: var(--ar-secondary-text);
+}
+.ar-tag-outline.ar-tag-accent {
+ color: var(--ar-accent-text);
+}
+.ar-tag-outline.ar-tag-neutral {
+ color: var(--ar-neutral-text);
+}
+.ar-tag-outline.ar-tag-info {
+ color: var(--ar-info-text);
+}
+.ar-tag-outline.ar-tag-success {
+ color: var(--ar-success-text);
+}
+.ar-tag-outline.ar-tag-warning {
+ color: var(--ar-warning-text);
+}
+.ar-tag-outline.ar-tag-error {
+ color: var(--ar-error-text);
+}
+.ar-tag-lg {
+ padding: 0.375rem 1rem;
+ font-size: 0.875rem;
+}
+.ar-tag-sm {
+ padding: 0.125rem 0.5rem;
+ font-size: 0.75rem;
+}
+.ar-tag-close {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 1rem;
+ height: 1rem;
+ border-radius: var(--ar-radius-pill);
+ background: transparent;
+ border: 0;
+ color: inherit;
+ opacity: 0.6;
+ cursor: pointer;
+ padding: 0;
+ font-size: 0.875rem;
+ line-height: 1;
+}
+.ar-tag-close:hover {
+ opacity: 1;
 }

package/src/components/textured.css

@@ -1,34 +1,54 @@
 /* TEXTURED TEXT & ANIMATION */
-.ar-bg-img {
- color: transparent;
- background-image: var(--ar-texture);
- background-size: cover;
- -webkit-background-clip: text;
- background-clip: text;
- -webkit-text-fill-color: var(--ar-bg-img-fill, transparent);
-}
-.ar-bounce {
- animation: ar-bounce 1s infinite;
-}
-@keyframes ar-bounce {
- 0%,
- 100% {
-  transform: translateY(0);
- }
- 50% {
-  transform: translateY(-0.25rem);
- }
-}
-.ar-animate-fade-in {
- animation: ar-fade-in 0.4s ease-out forwards;
-}
-@keyframes ar-fade-in {
- from {
-  opacity: 0;
-  transform: translateY(1.25rem);
- }
- to {
-  opacity: 1;
-  transform: translateY(0);
- }
+.ar-bg-img {
+ color: transparent;
+
+ background-color: var(--ar-base-content, #171717);
+ background-image: var(--ar-texture);
+ background-size: cover;
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: var(--ar-bg-img-fill, transparent);
+}
+.ar-bounce {
+ animation: ar-bounce 1s infinite;
+}
+@keyframes ar-bounce {
+ 0%,
+ 100% {
+  transform: translateY(0);
+ }
+ 50% {
+  transform: translateY(-0.25rem);
+ }
+}
+.ar-animate-fade-in {
+ animation: ar-fade-in 0.4s ease-out var(--ar-delay, 0s) backwards;
+}
+@keyframes ar-fade-in {
+ from {
+  opacity: 0;
+  transform: translateY(1.25rem);
+ }
+ to {
+  opacity: 1;
+  transform: translateY(0);
+ }
+}
+.ar-reveal {
+ opacity: 0;
+ transform: translateY(1.25rem);
+ transition: opacity 0.6s ease-out var(--ar-delay, 0s), transform 0.6s ease-out var(--ar-delay, 0s);
+}
+.ar-reveal.ar-reveal-in {
+ opacity: 1;
+ transform: none;
+}
+@media (prefers-reduced-motion: reduce) {
+ .ar-reveal,
+ .ar-animate-fade-in {
+  opacity: 1;
+  transform: none;
+  transition: none;
+  animation: none;
+ }
 }

package/src/components/timeline.css

@@ -1,34 +1,33 @@
-/* TIMELINE */
-.ar-timeline {
- display: flex;
- flex-direction: column;
- gap: var(--ar-s-4);
- padding-left: 0;
- list-style: none;
-}
-.ar-timeline-item {
- position: relative;
- padding-left: var(--ar-s-8);
-}
-.ar-timeline-item::before {
- content: "";
- position: absolute;
- left: 0.375rem;
- top: 0.25rem;
- width: 0.75rem;
- height: 0.75rem;
- border-radius: var(--ar-radius-pill);
- background: var(--ar-primary);
-}
-.ar-timeline-item::after {
- content: "";
- position: absolute;
- left: 0.65625rem;
- top: 1.25rem;
- bottom: -1.5rem;
- width: 2px;
- background: var(--ar-base-300);
-}
-.ar-timeline-item:last-child::after {
- display: none;
+.ar-timeline {
+ display: flex;
+ flex-direction: column;
+ gap: var(--ar-s-4);
+ padding-left: 0;
+ list-style: none;
+}
+.ar-timeline-item {
+ position: relative;
+ padding-left: var(--ar-s-8);
+}
+.ar-timeline-item::before {
+ content: "";
+ position: absolute;
+ left: 0.375rem;
+ top: 0.25rem;
+ width: 0.75rem;
+ height: 0.75rem;
+ border-radius: var(--ar-radius-pill);
+ background: var(--ar-primary);
+}
+.ar-timeline-item::after {
+ content: "";
+ position: absolute;
+ left: 0.65625rem;
+ top: 1.25rem;
+ bottom: -1.5rem;
+ width: 2px;
+ background: var(--ar-base-300);
+}
+.ar-timeline-item:last-child::after {
+ display: none;
 }

package/src/components/toast.css

@@ -1,134 +1,134 @@
 /* TOAST / SNACKBAR */
-.ar-toast-container {
- position: fixed;
- z-index: 100;
- display: flex;
- flex-direction: column;
- gap: var(--ar-s-2);
- pointer-events: none;
-}
-.ar-toast-container[data-ar-toast-position="top-left"] {
- top: var(--ar-s-4);
- left: var(--ar-s-4);
-}
-.ar-toast-container[data-ar-toast-position="top-center"] {
- top: var(--ar-s-4);
- left: 50%;
- transform: translateX(-50%);
-}
-.ar-toast-container[data-ar-toast-position="top-right"] {
- top: var(--ar-s-4);
- right: var(--ar-s-4);
-}
-.ar-toast-container[data-ar-toast-position="bottom-left"] {
- bottom: var(--ar-s-4);
- left: var(--ar-s-4);
-}
-.ar-toast-container[data-ar-toast-position="bottom-center"] {
- bottom: var(--ar-s-4);
- left: 50%;
- transform: translateX(-50%);
-}
-.ar-toast-container[data-ar-toast-position="bottom-right"] {
- bottom: var(--ar-s-4);
- right: var(--ar-s-4);
-}
-.ar-toast {
- display: flex;
- align-items: center;
- gap: var(--ar-s-3);
- min-width: 18rem;
- max-width: 24rem;
- padding: var(--ar-s-3) var(--ar-s-4);
- border-radius: var(--ar-radius-box);
- background: var(--ar-base-100);
- color: var(--ar-base-content);
- box-shadow: var(--ar-shadow-lg);
- border: var(--ar-border-width) solid var(--ar-base-300);
- pointer-events: auto;
- opacity: 0;
- transform: translateY(-0.5rem);
- animation: ar-toast-in 0.3s ease-out forwards;
-}
-.ar-toast-container[data-ar-toast-position="bottom-left"] .ar-toast,
-.ar-toast-container[data-ar-toast-position="bottom-center"] .ar-toast,
-.ar-toast-container[data-ar-toast-position="bottom-right"] .ar-toast {
- transform: translateY(0.5rem);
-}
-.ar-toast.ar-toast-out {
- animation: ar-toast-out 0.2s ease-in forwards;
-}
-.ar-toast-info {
- background: var(--ar-info);
- color: var(--ar-info-content);
- border-color: var(--ar-info);
-}
-.ar-toast-success {
- background: var(--ar-success);
- color: var(--ar-success-content);
- border-color: var(--ar-success);
-}
-.ar-toast-warning {
- background: var(--ar-warning);
- color: var(--ar-warning-content);
- border-color: var(--ar-warning);
-}
-.ar-toast-error {
- background: var(--ar-error);
- color: var(--ar-error-content);
- border-color: var(--ar-error);
-}
-.ar-toast-icon {
- flex-shrink: 0;
- width: 1.25rem;
- height: 1.25rem;
-}
-.ar-toast-message {
- flex: 1;
- font-size: 0.875rem;
- line-height: 1.4;
-}
-.ar-toast-close {
- flex-shrink: 0;
- background: transparent;
- border: 0;
- color: inherit;
- opacity: 0.6;
- cursor: pointer;
- padding: 0;
- font-size: 1.125rem;
- line-height: 1;
-}
-.ar-toast-close:hover {
- opacity: 1;
-}
-.ar-toast-progress {
- position: absolute;
- bottom: 0;
- left: 0;
- height: 3px;
- background: currentColor;
- opacity: 0.4;
- border-radius: 0 0 var(--ar-radius-box) var(--ar-radius-box);
- animation: ar-toast-progress linear forwards;
-}
-@keyframes ar-toast-in {
- to {
-  opacity: 1;
-  transform: translateY(0);
- }
-}
-@keyframes ar-toast-out {
- to {
-  opacity: 0;
-  transform: translateY(-0.5rem);
- }
-}
-@keyframes ar-toast-progress {
- from {
-  width: 100%;
- }
- to {
-  width: 0%;
- }
+.ar-toast-container {
+ position: fixed;
+ z-index: 100;
+ display: flex;
+ flex-direction: column;
+ gap: var(--ar-s-2);
+ pointer-events: none;
+}
+.ar-toast-container[data-ar-toast-position="top-left"] {
+ top: var(--ar-s-4);
+ left: var(--ar-s-4);
+}
+.ar-toast-container[data-ar-toast-position="top-center"] {
+ top: var(--ar-s-4);
+ left: 50%;
+ transform: translateX(-50%);
+}
+.ar-toast-container[data-ar-toast-position="top-right"] {
+ top: var(--ar-s-4);
+ right: var(--ar-s-4);
+}
+.ar-toast-container[data-ar-toast-position="bottom-left"] {
+ bottom: var(--ar-s-4);
+ left: var(--ar-s-4);
+}
+.ar-toast-container[data-ar-toast-position="bottom-center"] {
+ bottom: var(--ar-s-4);
+ left: 50%;
+ transform: translateX(-50%);
+}
+.ar-toast-container[data-ar-toast-position="bottom-right"] {
+ bottom: var(--ar-s-4);
+ right: var(--ar-s-4);
+}
+.ar-toast {
+ display: flex;
+ align-items: center;
+ gap: var(--ar-s-3);
+ min-width: 18rem;
+ max-width: 24rem;
+ padding: var(--ar-s-3) var(--ar-s-4);
+ border-radius: var(--ar-radius-box);
+ background: var(--ar-base-100);
+ color: var(--ar-base-content);
+ box-shadow: var(--ar-shadow-lg);
+ border: var(--ar-border-width) solid var(--ar-base-300);
+ pointer-events: auto;
+ opacity: 0;
+ transform: translateY(-0.5rem);
+ animation: ar-toast-in 0.3s ease-out forwards;
+}
+.ar-toast-container[data-ar-toast-position="bottom-left"] .ar-toast,
+.ar-toast-container[data-ar-toast-position="bottom-center"] .ar-toast,
+.ar-toast-container[data-ar-toast-position="bottom-right"] .ar-toast {
+ transform: translateY(0.5rem);
+}
+.ar-toast.ar-toast-out {
+ animation: ar-toast-out 0.2s ease-in forwards;
+}
+.ar-toast-info {
+ background: var(--ar-info);
+ color: var(--ar-info-content);
+ border-color: var(--ar-info);
+}
+.ar-toast-success {
+ background: var(--ar-success);
+ color: var(--ar-success-content);
+ border-color: var(--ar-success);
+}
+.ar-toast-warning {
+ background: var(--ar-warning);
+ color: var(--ar-warning-content);
+ border-color: var(--ar-warning);
+}
+.ar-toast-error {
+ background: var(--ar-error);
+ color: var(--ar-error-content);
+ border-color: var(--ar-error);
+}
+.ar-toast-icon {
+ flex-shrink: 0;
+ width: 1.25rem;
+ height: 1.25rem;
+}
+.ar-toast-message {
+ flex: 1;
+ font-size: 0.875rem;
+ line-height: 1.4;
+}
+.ar-toast-close {
+ flex-shrink: 0;
+ background: transparent;
+ border: 0;
+ color: inherit;
+ opacity: 0.6;
+ cursor: pointer;
+ padding: 0;
+ font-size: 1.125rem;
+ line-height: 1;
+}
+.ar-toast-close:hover {
+ opacity: 1;
+}
+.ar-toast-progress {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ height: 3px;
+ background: currentColor;
+ opacity: 0.4;
+ border-radius: 0 0 var(--ar-radius-box) var(--ar-radius-box);
+ animation: ar-toast-progress linear forwards;
+}
+@keyframes ar-toast-in {
+ to {
+  opacity: 1;
+  transform: translateY(0);
+ }
+}
+@keyframes ar-toast-out {
+ to {
+  opacity: 0;
+  transform: translateY(-0.5rem);
+ }
+}
+@keyframes ar-toast-progress {
+ from {
+  width: 100%;
+ }
+ to {
+  width: 0%;
+ }
 }

package/src/components/tooltip.css

@@ -1,24 +1,23 @@
-/* TOOLTIP */
-.ar-tooltip {
- position: relative;
-}
-.ar-tooltip[data-tip]::after {
- content: attr(data-tip);
- position: absolute;
- z-index: 30;
- bottom: calc(100% + 0.5rem);
- left: 50%;
- transform: translateX(-50%);
- padding: 0.25rem 0.625rem;
- border-radius: var(--ar-radius-field);
- background: var(--ar-neutral);
- color: var(--ar-neutral-content);
- font-size: 0.75rem;
- white-space: nowrap;
- opacity: 0;
- pointer-events: none;
- transition: opacity 0.2s;
-}
-.ar-tooltip:hover[data-tip]::after {
- opacity: 1;
+.ar-tooltip {
+ position: relative;
+}
+.ar-tooltip[data-tip]::after {
+ content: attr(data-tip);
+ position: absolute;
+ z-index: 30;
+ bottom: calc(100% + 0.5rem);
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 0.25rem 0.625rem;
+ border-radius: var(--ar-radius-field);
+ background: var(--ar-neutral);
+ color: var(--ar-neutral-content);
+ font-size: 0.75rem;
+ white-space: nowrap;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.2s;
+}
+.ar-tooltip:hover[data-tip]::after {
+ opacity: 1;
 }