arekui 1.0.0

package/src/components/prose.css

@@ -0,0 +1,80 @@
+/* PROSE (article typography) */
+.ar-prose {
+ font-size: 1rem;
+ line-height: 1.75;
+ max-width: 65ch;
+}
+.ar-prose > * + * {
+ margin-top: 1rem;
+}
+.ar-prose h1,
+.ar-prose h2,
+.ar-prose h3,
+.ar-prose h4 {
+ margin-top: 1.5rem;
+ font-weight: 700;
+}
+.ar-prose h1 {
+ font-size: 1.75rem;
+}
+.ar-prose h2 {
+ font-size: 1.375rem;
+}
+.ar-prose h3 {
+ font-size: 1.125rem;
+}
+.ar-prose h4 {
+ font-size: 1rem;
+}
+.ar-prose img {
+ margin: 1rem auto;
+ border-radius: var(--ar-radius-box);
+}
+.ar-prose a {
+ text-decoration: underline;
+}
+.ar-prose blockquote {
+ margin: 1rem 0;
+ border-left: 4px solid var(--ar-base-300);
+ padding-left: 1rem;
+ font-style: italic;
+ color: var(--ar-gray-600);
+}
+.ar-prose ul,
+.ar-prose ol {
+ padding-left: 1.5rem;
+}
+.ar-prose pre {
+ background: var(--ar-base-200);
+ border-radius: var(--ar-radius-box);
+ padding: 1rem;
+ overflow-x: auto;
+}
+.ar-prose code {
+ font-size: 0.875em;
+ background: var(--ar-base-200);
+ border-radius: var(--ar-radius-field);
+ padding: 0.125rem 0.375rem;
+}
+.ar-prose pre code {
+ background: transparent;
+ padding: 0;
+}
+.ar-prose table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 0.875rem;
+}
+.ar-prose th,
+.ar-prose td {
+ border: var(--ar-border-width) solid var(--ar-base-300);
+ padding: 0.5rem 0.75rem;
+}
+.ar-prose th {
+ background: var(--ar-base-200);
+}
+.ar-prose hr {
+ border: 0;
+ border-top: var(--ar-border-width) solid var(--ar-base-300);
+ margin: 1.5rem 0;
+}

package/src/components/rating.css

@@ -0,0 +1,37 @@
+/* RATING */
+.ar-rating {
+ display: inline-flex;
+ gap: var(--ar-s-1);
+ direction: rtl;
+}
+.ar-rating input {
+ display: none;
+}
+.ar-rating label {
+ cursor: pointer;
+ color: var(--ar-gray-300);
+ transition:
+  color 0.15s ease,
+  transform 0.15s ease;
+}
+.ar-rating label:hover,
+.ar-rating label:hover ~ label,
+.ar-rating input:checked ~ label {
+ color: var(--ar-warning);
+}
+.ar-rating label:hover {
+ transform: scale(1.15);
+}
+.ar-rating svg {
+ width: 1.5rem;
+ height: 1.5rem;
+ fill: currentColor;
+}
+.ar-rating-readonly label {
+ cursor: default;
+}
+.ar-rating-readonly label:hover,
+.ar-rating-readonly label:hover ~ label,
+.ar-rating-readonly input:checked ~ label {
+ transform: none;
+}

package/src/components/scroll-top.css

@@ -0,0 +1,36 @@
+/* SCROLL TO TOP */
+.ar-scroll-top {
+ position: fixed;
+ bottom: var(--ar-s-6);
+ right: var(--ar-s-6);
+ z-index: 40;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.75rem;
+ height: 2.75rem;
+ border-radius: var(--ar-radius-pill);
+ background: var(--ar-primary);
+ color: var(--ar-primary-content);
+ border: 0;
+ cursor: pointer;
+ box-shadow: var(--ar-shadow-lg);
+ opacity: 0;
+ visibility: hidden;
+ transform: translateY(0.5rem);
+ transition: all 0.3s ease;
+}
+.ar-scroll-top-visible {
+ opacity: 1;
+ visibility: visible;
+ transform: translateY(0);
+}
+.ar-scroll-top:hover {
+ background: var(--ar-neutral);
+ color: var(--ar-neutral-content);
+ transform: translateY(-0.125rem);
+}
+.ar-scroll-top svg {
+ width: 1.25rem;
+ height: 1.25rem;
+}

package/src/components/skeleton.css

@@ -0,0 +1,54 @@
+/* SKELETON LOADER */
+.ar-skeleton {
+ background: var(--ar-base-300);
+ border-radius: var(--ar-radius-field);
+ position: relative;
+ overflow: hidden;
+}
+.ar-skeleton::after {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(
+  90deg,
+  transparent 0%,
+  oklch(100% 0 0 / 0.08) 50%,
+  transparent 100%
+ );
+ animation: ar-skeleton-shimmer 1.5s ease-in-out infinite;
+}
+.ar-skeleton-text {
+ height: 1rem;
+ margin-bottom: var(--ar-s-2);
+ width: 100%;
+}
+.ar-skeleton-text:last-child {
+ width: 70%;
+}
+.ar-skeleton-title {
+ height: 1.5rem;
+ width: 60%;
+ margin-bottom: var(--ar-s-3);
+}
+.ar-skeleton-avatar {
+ width: 3rem;
+ height: 3rem;
+ border-radius: var(--ar-radius-pill);
+}
+.ar-skeleton-thumbnail {
+ width: 100%;
+ aspect-ratio: 16 / 9;
+}
+.ar-skeleton-btn {
+ height: 2.5rem;
+ width: 8rem;
+ border-radius: var(--ar-radius-field);
+}
+@keyframes ar-skeleton-shimmer {
+ 0% {
+  transform: translateX(-100%);
+ }
+ 100% {
+  transform: translateX(100%);
+ }
+}

package/src/components/swap.css

@@ -0,0 +1,45 @@
+/* SWAP (theme toggle) */
+.ar-swap {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 2rem;
+ height: 2rem;
+ cursor: pointer;
+}
+.ar-swap > .ar-swap-on,
+.ar-swap > .ar-swap-off {
+ position: absolute;
+ transition:
+  opacity 0.3s ease,
+  transform 0.3s ease;
+}
+.ar-swap > .ar-swap-on {
+ opacity: 0;
+}
+.ar-swap input:checked ~ .ar-swap-on,
+.ar-swap.ar-swap-active > .ar-swap-on {
+ opacity: 1;
+}
+.ar-swap input:checked ~ .ar-swap-off,
+.ar-swap.ar-swap-active > .ar-swap-off {
+ opacity: 0;
+}
+.ar-swap input {
+ position: absolute;
+ opacity: 0;
+ pointer-events: none;
+}
+.ar-swap-rotate > .ar-swap-on,
+.ar-swap-rotate > .ar-swap-off {
+ transform: rotate(0deg);
+}
+.ar-swap-rotate input:checked ~ .ar-swap-on,
+.ar-swap-rotate.ar-swap-active > .ar-swap-on {
+ transform: rotate(360deg);
+}
+.ar-swap-rotate input:checked ~ .ar-swap-off,
+.ar-swap-rotate.ar-swap-active > .ar-swap-off {
+ transform: rotate(-360deg);
+}

package/src/components/table.css

@@ -0,0 +1,22 @@
+/* TABLE */
+.ar-table {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 0.875rem;
+}
+.ar-table th,
+.ar-table td {
+ border-bottom: var(--ar-border-width) solid var(--ar-base-300);
+ padding: 0.625rem 0.75rem;
+ text-align: left;
+}
+.ar-table th {
+ font-weight: 700;
+ background: var(--ar-base-200);
+}
+.ar-table-striped tbody tr:nth-child(odd) {
+ background: var(--ar-base-200);
+}
+.ar-table-hover tbody tr:hover {
+ background: var(--ar-base-300);
+}

package/src/components/tabs.css

@@ -0,0 +1,24 @@
+/* TABS */
+.ar-tabs {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--ar-s-1);
+ border-bottom: var(--ar-border-width) solid var(--ar-base-300);
+}
+.ar-tab {
+ padding: 0.625rem 1rem;
+ cursor: pointer;
+ border: 0;
+ background: transparent;
+ color: var(--ar-gray-600);
+ border-bottom: 2px solid transparent;
+ font-family: var(--ar-font-sans);
+ font-weight: 600;
+}
+.ar-tab:hover {
+ color: var(--ar-base-content);
+}
+.ar-tab-active {
+ color: var(--ar-primary);
+ border-bottom-color: var(--ar-primary);
+}

package/src/components/tag.css

@@ -0,0 +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;
+}

package/src/components/textured.css

@@ -0,0 +1,34 @@
+/* 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);
+ }
+}

package/src/components/timeline.css

@@ -0,0 +1,34 @@
+/* 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;
+}

package/src/components/toast.css

@@ -0,0 +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%;
+ }
+}

package/src/components/tooltip.css

@@ -0,0 +1,24 @@
+/* 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;
+}