arekui 1.0.0

package/src/components/chat.css

@@ -0,0 +1,78 @@
+/* CHAT BUBBLE */
+.ar-chat {
+ display: flex;
+ flex-direction: column;
+ gap: var(--ar-s-3);
+ max-width: 48rem;
+}
+.ar-chat-bubble {
+ position: relative;
+ padding: var(--ar-s-3) var(--ar-s-4);
+ border-radius: var(--ar-radius-box);
+ background: var(--ar-base-200);
+ color: var(--ar-base-content);
+ max-width: 80%;
+ line-height: 1.5;
+ word-wrap: break-word;
+}
+.ar-chat-start {
+ align-self: flex-start;
+}
+.ar-chat-end {
+ align-self: flex-end;
+}
+.ar-chat-start .ar-chat-bubble {
+ border-bottom-left-radius: 0;
+}
+.ar-chat-end .ar-chat-bubble {
+ background: var(--ar-primary);
+ color: var(--ar-primary-content);
+ border-bottom-right-radius: 0;
+}
+.ar-chat-avatar {
+ width: 2.5rem;
+ height: 2.5rem;
+ border-radius: var(--ar-radius-pill);
+ overflow: hidden;
+ flex-shrink: 0;
+}
+.ar-chat-avatar img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+.ar-chat-start .ar-chat-header,
+.ar-chat-end .ar-chat-header {
+ display: flex;
+ align-items: center;
+ gap: var(--ar-s-2);
+ margin-bottom: var(--ar-s-1);
+ font-size: 0.75rem;
+ font-weight: 600;
+ color: var(--ar-gray-600);
+}
+.ar-chat-end .ar-chat-header {
+ justify-content: flex-end;
+}
+.ar-chat-footer {
+ font-size: 0.7rem;
+ color: var(--ar-gray-500);
+ margin-top: var(--ar-s-1);
+}
+.ar-chat-start .ar-chat-footer {
+ text-align: left;
+}
+.ar-chat-end .ar-chat-footer {
+ text-align: right;
+}
+.ar-chat-sender {
+ display: flex;
+ align-items: flex-end;
+ gap: var(--ar-s-2);
+}
+.ar-chat-receiver {
+ display: flex;
+ align-items: flex-end;
+ gap: var(--ar-s-2);
+ flex-direction: row-reverse;
+}

package/src/components/drawer.css

@@ -0,0 +1,53 @@
+/* DRAWER */
+.ar-drawer {
+ position: relative;
+ display: flex;
+}
+.ar-drawer-toggle {
+ appearance: none;
+ position: fixed;
+ opacity: 0;
+ pointer-events: none;
+}
+.ar-drawer-content {
+ flex: 1;
+ min-width: 0;
+}
+.ar-drawer-side {
+ position: fixed;
+ inset: 0;
+ z-index: 40;
+ visibility: hidden;
+ pointer-events: none;
+}
+.ar-drawer-side > * {
+ visibility: visible;
+}
+.ar-drawer-overlay {
+ position: absolute;
+ inset: 0;
+ background: rgb(0 0 0 / 0.5);
+ cursor: pointer;
+ opacity: 0;
+ transition: opacity 0.3s;
+}
+.ar-drawer-side .ar-menu {
+ position: absolute;
+ inset: 0 auto 0 0;
+ width: 20rem;
+ height: 100%;
+ overflow-y: auto;
+ background: var(--ar-base-100);
+ transform: translateX(-100%);
+ transition: transform 0.3s ease;
+}
+.ar-drawer-toggle:checked ~ .ar-drawer-side {
+ visibility: visible;
+ pointer-events: auto;
+}
+.ar-drawer-toggle:checked ~ .ar-drawer-side .ar-drawer-overlay {
+ opacity: 1;
+}
+.ar-drawer-toggle:checked ~ .ar-drawer-side .ar-menu {
+ transform: translateX(0);
+}

package/src/components/file-upload.css

@@ -0,0 +1,51 @@
+/* FILE UPLOAD */
+.ar-file-upload {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: var(--ar-s-2);
+ padding: var(--ar-s-8) var(--ar-s-4);
+ border: 2px dashed var(--ar-base-300);
+ border-radius: var(--ar-radius-box);
+ background: var(--ar-base-200);
+ color: var(--ar-gray-600);
+ text-align: center;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+.ar-file-upload:hover,
+.ar-file-upload.ar-file-upload-dragover {
+ border-color: var(--ar-primary);
+ background: var(--ar-base-300);
+ color: var(--ar-base-content);
+}
+.ar-file-upload input[type="file"] {
+ position: absolute;
+ inset: 0;
+ opacity: 0;
+ cursor: pointer;
+}
+.ar-file-upload-icon {
+ width: 2.5rem;
+ height: 2.5rem;
+ opacity: 0.5;
+}
+.ar-file-upload-text {
+ font-size: 0.875rem;
+}
+.ar-file-upload-text strong {
+ color: var(--ar-primary);
+}
+.ar-file-upload-hint {
+ font-size: 0.75rem;
+ opacity: 0.7;
+}
+.ar-file-upload-sm {
+ padding: var(--ar-s-4) var(--ar-s-3);
+}
+.ar-file-upload-sm .ar-file-upload-icon {
+ width: 1.5rem;
+ height: 1.5rem;
+}

package/src/components/footer.css

@@ -0,0 +1,26 @@
+/* FOOTER */
+.ar-footer {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: var(--ar-s-4);
+ padding: var(--ar-s-10);
+ background: var(--ar-base-200);
+ border-top: var(--ar-border-width) solid var(--ar-base-300);
+}
+.ar-footer nav {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: var(--ar-s-4);
+}
+.ar-footer a {
+ color: var(--ar-base-content);
+ opacity: 0.8;
+}
+.ar-footer a:hover {
+ opacity: 1;
+}
+.ar-footer-center {
+ text-align: center;
+}

package/src/components/forms.css

@@ -0,0 +1,69 @@
+/* FORMS */
+.ar-fieldset {
+ display: flex;
+ flex-direction: column;
+ gap: var(--ar-s-2);
+ border: 0;
+ margin: 0;
+ padding: 0;
+}
+.ar-label {
+ display: flex;
+ align-items: center;
+ gap: var(--ar-s-2);
+ font-weight: 600;
+}
+.ar-input,
+.ar-select,
+.ar-textarea {
+ width: 100%;
+ border: var(--ar-border-width) solid var(--ar-base-300);
+ border-radius: var(--ar-radius-field);
+ background: var(--ar-base-100);
+ color: var(--ar-base-content);
+ padding: 0.5rem 0.75rem;
+}
+.ar-input:focus,
+.ar-select:focus,
+.ar-textarea:focus {
+ outline: 2px solid var(--ar-primary);
+ outline-offset: 0;
+ border-color: transparent;
+}
+.ar-checkbox,
+.ar-radio {
+ accent-color: var(--ar-primary);
+ width: 1.125rem;
+ height: 1.125rem;
+}
+.ar-toggle {
+ position: relative;
+ appearance: none;
+ width: 2.75rem;
+ height: 1.5rem;
+ border-radius: var(--ar-radius-pill);
+ background: var(--ar-base-300);
+ cursor: pointer;
+ transition: background 0.2s;
+}
+.ar-toggle::after {
+ content: "";
+ position: absolute;
+ top: 0.1875rem;
+ left: 0.1875rem;
+ width: 1.125rem;
+ height: 1.125rem;
+ border-radius: var(--ar-radius-pill);
+ background: var(--ar-base-100);
+ transition: transform 0.2s;
+}
+.ar-toggle:checked {
+ background: var(--ar-primary);
+}
+.ar-toggle:checked::after {
+ transform: translateX(1.25rem);
+}
+.ar-range {
+ accent-color: var(--ar-primary);
+ width: 100%;
+}

package/src/components/hero.css

@@ -0,0 +1,22 @@
+/* HERO */
+.ar-hero {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--ar-base-200);
+ padding: var(--ar-s-16) var(--ar-s-6);
+}
+.ar-hero-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: var(--ar-s-6);
+ text-align: center;
+ max-width: 64rem;
+}
+@media (min-width: 1024px) {
+ .ar-hero-content {
+  flex-direction: row;
+  text-align: left;
+ }
+}

package/src/components/join.css

@@ -0,0 +1,14 @@
+/* JOIN */
+.ar-join {
+ display: inline-flex;
+ align-items: stretch;
+ border-radius: var(--ar-radius-field);
+ overflow: hidden;
+}
+.ar-join-item:not(:first-child) {
+ border-left-width: 0;
+}
+.ar-join .ar-btn,
+.ar-join-item {
+ border-radius: 0;
+}

package/src/components/link.css

@@ -0,0 +1,24 @@
+/* LINK */
+.ar-link {
+ color: var(--ar-primary);
+ text-decoration: underline;
+ cursor: pointer;
+}
+.ar-link-hover {
+ text-decoration: none;
+}
+.ar-link-hover:hover {
+ text-decoration: underline;
+}
+.ar-desc a {
+ text-decoration: underline;
+ background: var(--ar-desc-grad);
+ background-size: 200%;
+ transition:
+  background-position 0.5s ease-out,
+  color 0.5s ease-out;
+}
+.ar-desc a:hover {
+ background-position: left;
+ color: var(--ar-arc);
+}

package/src/components/menu.css

@@ -0,0 +1,56 @@
+/* MENU & DROPDOWN */
+.ar-menu {
+ display: flex;
+ flex-direction: column;
+ list-style: none;
+ margin: 0;
+ padding: var(--ar-s-2);
+ background: var(--ar-base-100);
+}
+.ar-menu li > a {
+ display: block;
+ padding: 0.5rem 0.75rem;
+ border-radius: var(--ar-radius-field);
+ color: var(--ar-base-content);
+ text-decoration: none;
+}
+.ar-menu li > a:hover {
+ background: var(--ar-base-200);
+}
+.ar-menu-horizontal {
+ flex-direction: row;
+ align-items: center;
+ gap: var(--ar-s-2);
+}
+.ar-menu-sm li > a {
+ font-size: 0.8rem;
+ padding: 0.25rem 0.5rem;
+}
+.ar-dropdown {
+ position: relative;
+ display: inline-block;
+}
+.ar-dropdown-content {
+ display: none;
+ position: absolute;
+ z-index: 20;
+ min-width: 15rem;
+ margin-top: 0.75rem;
+ background: var(--ar-base-100);
+ border-radius: var(--ar-radius-box);
+ box-shadow: var(--ar-shadow-lg);
+ padding: var(--ar-s-2);
+}
+.ar-dropdown:hover .ar-dropdown-content,
+.ar-dropdown:focus-within .ar-dropdown-content,
+.ar-dropdown.ar-dropdown-open .ar-dropdown-content {
+ display: block;
+}
+.ar-dropdown-content::before {
+ content: "";
+ position: absolute;
+ top: -0.75rem;
+ left: 0;
+ right: 0;
+ height: 0.75rem;
+}

package/src/components/misc.css

@@ -0,0 +1,57 @@
+/* DIVIDER & STEPPER & AVATAR */
+.ar-divider {
+ display: flex;
+ align-items: center;
+ gap: var(--ar-s-3);
+ color: var(--ar-gray-600);
+ margin: var(--ar-s-4) 0;
+}
+.ar-divider::before,
+.ar-divider::after {
+ content: "";
+ flex: 1;
+ height: var(--ar-border-width);
+ background: var(--ar-base-300);
+}
+.ar-stepper {
+ display: flex;
+ justify-content: space-between;
+ gap: var(--ar-s-2);
+}
+.ar-step {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: var(--ar-s-1);
+ text-align: center;
+ font-size: 0.75rem;
+ color: var(--ar-gray-600);
+}
+.ar-step::before {
+ content: attr(data-step);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2rem;
+ height: 2rem;
+ border-radius: var(--ar-radius-pill);
+ background: var(--ar-base-300);
+ color: var(--ar-base-content);
+ font-weight: 700;
+}
+.ar-step-active::before {
+ background: var(--ar-primary);
+ color: var(--ar-primary-content);
+}
+.ar-avatar {
+ width: 3rem;
+ height: 3rem;
+ border-radius: var(--ar-radius-pill);
+ overflow: hidden;
+}
+.ar-avatar img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}

package/src/components/modal.css

@@ -0,0 +1,32 @@
+/* MODAL */
+.ar-modal {
+ border: 0;
+ padding: 0;
+ max-width: none;
+ max-height: none;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ background: rgb(0 0 0 / 0.5);
+ display: none;
+ align-items: center;
+ justify-content: center;
+}
+.ar-modal[open] {
+ display: flex;
+}
+.ar-modal::backdrop {
+ background: rgb(0 0 0 / 0.5);
+}
+.ar-modal-box {
+ background: var(--ar-base-100);
+ border-radius: var(--ar-radius-box);
+ box-shadow: var(--ar-shadow-xl);
+ padding: var(--ar-s-6);
+ width: min(92vw, 42rem);
+ max-height: 90vh;
+ overflow-y: auto;
+}
+.ar-modal-backdrop {
+ display: contents;
+}

package/src/components/navbar.css

@@ -0,0 +1,37 @@
+/* NAVBAR */
+.ar-navbar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--ar-s-4);
+ padding: var(--ar-s-2) var(--ar-s-4);
+ background: var(--ar-base-100);
+ border-bottom: var(--ar-border-width) solid var(--ar-base-300);
+}
+.ar-navbar-start {
+ display: flex;
+ align-items: center;
+ gap: var(--ar-s-2);
+ flex: 1;
+}
+.ar-navbar-center {
+ display: none;
+ align-items: center;
+ gap: var(--ar-s-2);
+}
+.ar-navbar-end {
+ display: flex;
+ align-items: center;
+ gap: var(--ar-s-2);
+}
+@media (min-width: 1024px) {
+ .ar-navbar-center {
+  display: flex;
+ }
+}
+.ar-navbar-brand {
+ font-size: 1.875rem;
+ font-weight: 400;
+ color: var(--ar-base-content);
+ text-decoration: none;
+}

package/src/components/pagination.css

@@ -0,0 +1,46 @@
+/* PAGINATION */
+.ar-pagination {
+ display: flex;
+ align-items: center;
+ gap: var(--ar-s-1);
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+.ar-page-item {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 2.25rem;
+ height: 2.25rem;
+ padding: 0 var(--ar-s-2);
+ border-radius: var(--ar-radius-field);
+ border: var(--ar-border-width) solid transparent;
+ background: transparent;
+ color: var(--ar-base-content);
+ font-size: 0.875rem;
+ font-weight: 500;
+ text-decoration: none;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+.ar-page-item:hover {
+ background: var(--ar-base-200);
+}
+.ar-page-active {
+ background: var(--ar-primary);
+ color: var(--ar-primary-content);
+ font-weight: 700;
+}
+.ar-page-active:hover {
+ background: var(--ar-primary);
+ color: var(--ar-primary-content);
+}
+.ar-page-disabled {
+ opacity: 0.4;
+ pointer-events: none;
+}
+.ar-page-ellipsis {
+ pointer-events: none;
+ color: var(--ar-gray-500);
+}

package/src/components/popover.css

@@ -0,0 +1,70 @@
+/* POPOVER */
+.ar-popover {
+ position: relative;
+ display: inline-block;
+}
+.ar-popover-content {
+ position: absolute;
+ z-index: 30;
+ min-width: 14rem;
+ padding: var(--ar-s-3) var(--ar-s-4);
+ background: var(--ar-base-100);
+ color: var(--ar-base-content);
+ border-radius: var(--ar-radius-box);
+ box-shadow: var(--ar-shadow-lg);
+ border: var(--ar-border-width) solid var(--ar-base-300);
+ font-size: 0.875rem;
+ line-height: 1.5;
+ opacity: 0;
+ visibility: hidden;
+ transition:
+  opacity 0.2s ease,
+  visibility 0.2s ease,
+  transform 0.2s ease;
+ pointer-events: none;
+}
+.ar-popover-open .ar-popover-content {
+ opacity: 1;
+ visibility: visible;
+ pointer-events: auto;
+}
+/* Placement: top (default) */
+.ar-popover-content[data-ar-placement="top"] {
+ bottom: calc(100% + 0.5rem);
+ left: 50%;
+ transform: translateX(-50%) translateY(0.25rem);
+}
+.ar-popover-open .ar-popover-content[data-ar-placement="top"] {
+ transform: translateX(-50%) translateY(0);
+}
+/* Placement: bottom */
+.ar-popover-content[data-ar-placement="bottom"] {
+ top: calc(100% + 0.5rem);
+ left: 50%;
+ transform: translateX(-50%) translateY(-0.25rem);
+}
+.ar-popover-open .ar-popover-content[data-ar-placement="bottom"] {
+ transform: translateX(-50%) translateY(0);
+}
+/* Placement: left */
+.ar-popover-content[data-ar-placement="left"] {
+ right: calc(100% + 0.5rem);
+ top: 50%;
+ transform: translateY(-50%) translateX(0.25rem);
+}
+.ar-popover-open .ar-popover-content[data-ar-placement="left"] {
+ transform: translateY(-50%) translateX(0);
+}
+/* Placement: right */
+.ar-popover-content[data-ar-placement="right"] {
+ left: calc(100% + 0.5rem);
+ top: 50%;
+ transform: translateY(-50%) translateX(-0.25rem);
+}
+.ar-popover-open .ar-popover-content[data-ar-placement="right"] {
+ transform: translateY(-50%) translateX(0);
+}
+.ar-popover-title {
+ font-weight: 600;
+ margin-bottom: var(--ar-s-1);
+}

package/src/components/progress.css

@@ -0,0 +1,19 @@
+/* PROGRESS */
+.ar-progress {
+ appearance: none;
+ width: 100%;
+ height: 1rem;
+ border-radius: var(--ar-radius-pill);
+ border: 0;
+ overflow: hidden;
+ background: var(--ar-base-300);
+}
+.ar-progress::-webkit-progress-bar {
+ background: var(--ar-base-300);
+}
+.ar-progress::-webkit-progress-value {
+ background: var(--ar-primary);
+}
+.ar-progress::-moz-progress-bar {
+ background: var(--ar-primary);
+}