@lancar/lxui 1.0.0

package/css/components/list-group.css

@@ -0,0 +1,17 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* List Group */
+/* ── List Group ── */
+.lx-list-group { display: flex; flex-direction: column; border-radius: var(--lx-radius-md,12px); overflow: hidden; border: 1px solid var(--border-default,#e5e7eb); }
+.lx-list-group-item { padding: .75rem 1rem; font-size: var(--lx-text-sm,0.875rem); background: var(--lx-bg,#fff); color: var(--lx-text-secondary,#6b7280); border-bottom: 1px solid var(--border-default,#e5e7eb); }
+.lx-list-group-item:last-child { border-bottom: none; }
+.lx-list-group-item.lx-active   { background: var(--lx-primary,#3b82f6); color: #fff; border-color: var(--lx-primary,#3b82f6); }
+.lx-list-group-item.lx-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
+.lx-list-group-item-action { cursor: pointer; text-decoration: none; display: block; transition: background .1s ease; }
+.lx-list-group-item-action:hover { background: var(--lx-bg-muted,#f3f4f6); color: var(--lx-text,#111827); }
+.lx-list-group-item-success { background: var(--lx-success-subtle,#f0fdf4); color: var(--lx-success-hover,#16a34a); border-color: var(--lx-success-light,#86efac); }
+.lx-list-group-item-warning { background: var(--lx-warning-subtle,#fffbeb); color: var(--lx-warning-hover,#d97706); border-color: var(--lx-warning-light,#fcd34d); }
+.lx-list-group-item-danger  { background: var(--lx-danger-subtle,#fef2f2);  color: var(--lx-danger-hover,#dc2626);   border-color: var(--lx-danger-light,#fca5a5); }
+.lx-list-group-item-info    { background: var(--lx-info-subtle,#ecfeff);    color: var(--lx-info-hover,#0891b2);     border-color: var(--lx-info-light,#67e8f9); }
+.lx-list-group-horizontal { flex-direction: row; }
+.lx-list-group-horizontal .lx-list-group-item { border-bottom: none; border-inline-end: 1px solid var(--border-default,#e5e7eb); }
+.lx-list-group-horizontal .lx-list-group-item:last-child { border-inline-end: none; }

package/css/components/modal.css

@@ -0,0 +1,50 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Modal */
+/* ── Modal ── */
+.lx-modal {
+  display: none; position: fixed; inset: 0;
+  z-index: var(--lx-z-modal,1060); overflow-x: hidden; overflow-y: auto;
+  align-items: center; justify-content: center;
+}
+.lx-modal.lx-show { display: flex; }
+.lx-modal-backdrop {
+  position: fixed; inset: 0;
+  background: var(--lx-modal-backdrop,rgba(0,0,0,.5));
+  z-index: var(--lx-z-modal-bg,1050);
+  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(2px);
+}
+.lx-modal-dialog {
+  position: relative; width: 100%; max-width: 500px;
+  margin: auto; padding: 1rem; z-index: inherit;
+}
+.lx-modal-sm         { max-width: 300px; }
+.lx-modal-lg         { max-width: 800px; }
+.lx-modal-xl         { max-width: 1100px; }
+.lx-modal-fullscreen { max-width: none; padding: 0; min-height: 100dvh; }
+.lx-modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 2rem); }
+.lx-modal-dialog-scrollable .lx-modal-body { overflow-y: auto; max-height: 60vh; }
+.lx-modal-content {
+  background: var(--lx-bg,#fff); border-radius: var(--lx-modal-radius,16px);
+  box-shadow: var(--lx-modal-shadow); border: 1px solid var(--border-default,#e5e7eb); overflow: hidden;
+}
+.lx-modal-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 1.25rem var(--lx-card-padding); border-bottom: 1px solid var(--border-default,#e5e7eb);
+}
+.lx-modal-title  { font-size: var(--lx-text-lg,1.125rem); font-weight: 600; color: var(--lx-text,#111827); }
+.lx-modal-body   { padding: var(--lx-card-padding); }
+.lx-modal-footer {
+  display: flex; align-items: center; justify-content: flex-end; gap: .5rem;
+  padding: 1rem var(--lx-card-padding); border-top: 1px solid var(--border-default,#e5e7eb);
+  background: var(--lx-bg-soft,#f9fafb);
+}
+.lx-modal.lx-fade .lx-modal-content { -webkit-animation: lx-modal-in .3s ease; animation: lx-modal-in .3s ease; }
+@-webkit-keyframes lx-modal-in {
+  from { opacity: 0; -webkit-transform: scale(.96) translateY(-8px); }
+  to   { opacity: 1; -webkit-transform: scale(1)  translateY(0); }
+}
+@keyframes lx-modal-in {
+  from { opacity: 0; transform: scale(.96) translateY(-8px); }
+  to   { opacity: 1; transform: scale(1)  translateY(0); }
+}

package/css/components/nav.css

@@ -0,0 +1,25 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Navs & Tabs */
+/* ── Navs & Tabs ── */
+.lx-nav { display: flex; flex-wrap: wrap; gap: .125rem; list-style: none; padding: 0; margin: 0; }
+.lx-nav-link {
+  display: block; padding: .45rem .875rem;
+  font-size: var(--lx-text-sm,0.875rem); font-weight: 500;
+  color: var(--lx-text-secondary,#6b7280); border-radius: var(--lx-radius,8px);
+  text-decoration: none; background: transparent; border: none; cursor: pointer;
+  transition: var(--lx-transition);
+}
+.lx-nav-link:hover    { background: var(--lx-bg-muted,#f3f4f6); color: var(--lx-text,#111827); }
+.lx-nav-link.lx-active { background: var(--lx-primary-subtle,#dbeafe); color: var(--lx-primary,#3b82f6); font-weight: 600; }
+.lx-nav-link.lx-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
+.lx-nav-tabs { border-bottom: 1px solid var(--border-default,#e5e7eb); gap: 0; padding-bottom: 0; }
+.lx-nav-tabs .lx-nav-link { border-radius: var(--lx-radius,8px) var(--lx-radius,8px) 0 0; border: 1px solid transparent; margin-bottom: -1px; }
+.lx-nav-tabs .lx-nav-link.lx-active { background: var(--lx-bg,#fff); border-color: var(--border-default,#e5e7eb) var(--border-default,#e5e7eb) var(--lx-bg,#fff); color: var(--lx-text,#111827); font-weight: 600; }
+.lx-nav-pills .lx-nav-link { border-radius: var(--lx-radius-full,9999px); }
+.lx-nav-pills .lx-nav-link.lx-active { background: var(--lx-primary,#3b82f6); color: #fff; }
+.lx-nav-fill .lx-nav-item, .lx-nav-justified .lx-nav-item { flex: 1; }
+.lx-nav-fill .lx-nav-link, .lx-nav-justified .lx-nav-link { text-align: center; }
+.lx-tab-content .lx-tab-pane { display: none; }
+.lx-tab-content .lx-tab-pane.lx-active { display: block; -webkit-animation: lx-fadein .2s ease; animation: lx-fadein .2s ease; }
+@-webkit-keyframes lx-fadein { from { opacity: 0; } to { opacity: 1; } }
+@keyframes lx-fadein { from { opacity: 0; } to { opacity: 1; } }

package/css/components/navbar.css

@@ -0,0 +1,44 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Navbar */
+/* ── Navbar ── */
+.lx-navbar {
+  display: flex; align-items: center; flex-wrap: wrap;
+  padding: .75rem 0; background: var(--lx-bg,#fff); border-bottom: 1px solid var(--border-default,#e5e7eb);
+}
+.lx-navbar-brand {
+  display: flex; align-items: center; gap: .5rem;
+  font-size: var(--lx-text-lg,1.125rem); font-weight: 700;
+  color: var(--lx-text,#111827); text-decoration: none;
+  margin-inline-end: 1.5rem; flex-shrink: 0;
+}
+.lx-navbar-brand img { height: 32px; width: auto; }
+.lx-navbar-nav { display: flex; align-items: center; gap: .125rem; list-style: none; padding: 0; margin: 0; }
+.lx-navbar-nav .lx-nav-link {
+  font-size: var(--lx-text-sm,0.875rem); font-weight: 500;
+  padding: .45rem .75rem; color: var(--lx-text-secondary,#6b7280);
+  border-radius: var(--lx-radius,8px); text-decoration: none;
+  transition: background .1s ease, color .1s ease;
+}
+.lx-navbar-nav .lx-nav-link:hover      { background: var(--lx-bg-muted,#f3f4f6); color: var(--lx-text,#111827); }
+.lx-navbar-nav .lx-nav-link.lx-active  { background: var(--lx-primary-subtle,#dbeafe); color: var(--lx-primary,#3b82f6); font-weight: 600; }
+.lx-navbar-dark { background: var(--lx-dark,#1f2937); border-color: transparent; }
+.lx-navbar-dark .lx-navbar-brand, .lx-navbar-dark .lx-nav-link { color: rgba(255,255,255,.85); }
+.lx-navbar-dark .lx-nav-link:hover { background: rgba(255,255,255,.1); color: #fff; }
+.lx-navbar-toggler {
+  padding: .375rem .5rem; background: transparent;
+  border: 1px solid var(--border-default,#e5e7eb); border-radius: var(--lx-radius,8px);
+  cursor: pointer; display: none;
+}
+.lx-navbar-toggler-icon { display: block; width: 22px; height: 2px; background: currentColor; box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor; }
+.lx-navbar-collapse { display: flex; align-items: center; flex: 1; }
+.lx-navbar-expand-lg .lx-navbar-collapse { display: flex !important; }
+@media (max-width: 1023.98px) {
+  .lx-navbar-expand-lg .lx-navbar-toggler { display: flex; }
+  .lx-navbar-expand-lg .lx-navbar-collapse {
+    display: none; width: 100%; flex-direction: column; align-items: flex-start;
+    padding: .75rem 0; border-top: 1px solid var(--border-default,#e5e7eb); margin-top: .75rem;
+  }
+  .lx-navbar-expand-lg .lx-navbar-collapse.lx-show { display: flex; }
+  .lx-navbar-expand-lg .lx-navbar-nav { flex-direction: column; width: 100%; gap: .125rem; }
+  .lx-navbar-expand-lg .lx-navbar-nav .lx-nav-link { width: 100%; }
+}

package/css/components/number-input.css

@@ -0,0 +1,52 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Number Input */
+/* ── Number Input ── */
+.lx-number-input {
+  display:   inline-flex;
+  align-items: stretch;
+  border:    1px solid var(--border-strong,#d1d5db);
+  border-radius: var(--lx-radius,8px);
+  overflow:  hidden;
+  background: var(--bg-primary,#fff);
+}
+.lx-number-input:focus-within {
+  border-color: var(--lx-primary,#3b82f6);
+  -webkit-box-shadow: 0 0 0 3px rgba(59,130,246,.15);
+  box-shadow:   0 0 0 3px rgba(59,130,246,.15);
+}
+.lx-number-btn {
+  display:         flex;
+  align-items:     center;
+  justify-content: center;
+  width:           2.25rem;
+  background:      var(--bg-secondary,#f9fafb);
+  border:          none;
+  cursor:          pointer;
+  font-size:       1rem;
+  color:           var(--lx-text-secondary,#6b7280);
+  -webkit-transition: background .1s ease, color .1s ease;
+  transition:      background .1s ease, color .1s ease;
+  line-height:     1;
+  -webkit-user-select: none;
+  user-select:     none;
+}
+.lx-number-btn:hover { background: var(--bg-tertiary,#f3f4f6); color: var(--lx-text,#111827); }
+.lx-number-btn:active { background: var(--lx-primary-subtle,#dbeafe); color: var(--lx-primary,#3b82f6); }
+.lx-number-btn:disabled { opacity: .4; cursor: not-allowed; }
+.lx-number-input input[type="number"],
+.lx-number-input input[type="text"] {
+  flex:         1;
+  min-width:    3rem;
+  border:       none;
+  padding:      .5rem .375rem;
+  font-size:    var(--lx-text-sm,0.875rem);
+  text-align:   center;
+  color:        var(--lx-text,#111827);
+  background:   transparent;
+  outline:      none;
+  -moz-appearance: textfield;
+  -webkit-appearance: none;
+  appearance:   textfield;
+}
+.lx-number-input input[type="number"]::-webkit-inner-spin-button,
+.lx-number-input input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

package/css/components/offcanvas.css

@@ -0,0 +1,25 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Offcanvas / Drawer */
+/* ── Offcanvas / Drawer ── */
+.lx-offcanvas {
+  position: fixed; z-index: var(--lx-z-offcanvas,1040);
+  background: var(--lx-bg,#fff); box-shadow: var(--lx-shadow-xl);
+  display: flex; flex-direction: column;
+  visibility: hidden;
+  transition: transform .3s ease, visibility .3s;
+}
+.lx-offcanvas.lx-show { visibility: visible; }
+.lx-offcanvas-start  { top: 0; inset-inline-start: 0; height: 100%; width: min(80vw, 360px); transform: translateX(-100%); }
+.lx-offcanvas-end    { top: 0; inset-inline-end: 0;   height: 100%; width: min(80vw, 360px); transform: translateX(100%); }
+.lx-offcanvas-top    { top: 0; inset-inline: 0; max-height: 80vh; transform: translateY(-100%); }
+.lx-offcanvas-bottom { bottom: 0; inset-inline: 0; max-height: 80vh; transform: translateY(100%); }
+.lx-offcanvas.lx-show.lx-offcanvas-start,
+.lx-offcanvas.lx-show.lx-offcanvas-end,
+.lx-offcanvas.lx-show.lx-offcanvas-top,
+.lx-offcanvas.lx-show.lx-offcanvas-bottom { transform: none; }
+.lx-offcanvas-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-default,#e5e7eb); flex-shrink: 0;
+}
+.lx-offcanvas-title { font-weight: 600; font-size: var(--lx-text-lg,1.125rem); color: var(--lx-text,#111827); }
+.lx-offcanvas-body  { padding: 1.5rem; flex: 1; overflow-y: auto; }

package/css/components/pagination.css

@@ -0,0 +1,17 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Pagination */
+/* ── Pagination ── */
+.lx-pagination { display: inline-flex; align-items: center; gap: .125rem; list-style: none; padding: 0; margin: 0; }
+.lx-page-link {
+  display: flex; align-items: center; justify-content: center;
+  min-width: 2rem; height: 2rem; padding: 0 .5rem;
+  font-size: var(--lx-text-sm,0.875rem); font-weight: 500;
+  color: var(--lx-text-secondary,#6b7280); background: var(--lx-bg,#fff);
+  border: 1px solid var(--border-default,#e5e7eb); border-radius: var(--lx-radius,8px);
+  text-decoration: none; cursor: pointer; transition: var(--lx-transition);
+}
+.lx-page-link:hover { background: var(--lx-bg-muted,#f3f4f6); color: var(--lx-text,#111827); }
+.lx-page-item.lx-active .lx-page-link   { background: var(--lx-primary,#3b82f6); color: white; border-color: var(--lx-primary,#3b82f6); }
+.lx-page-item.lx-disabled .lx-page-link { opacity: .5; cursor: not-allowed; pointer-events: none; }
+.lx-pagination-sm .lx-page-link { min-width: 1.75rem; height: 1.75rem; font-size: .75rem; }
+.lx-pagination-lg .lx-page-link { min-width: 2.5rem;  height: 2.5rem;  font-size: 1rem; }

package/css/components/popover.css

@@ -0,0 +1,12 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Popover (CSS component) */
+/* ── Popover (CSS component) ── */
+.lx-popover {
+  position: absolute; z-index: var(--lx-z-popover,1070);
+  background: var(--lx-bg,#fff); border: 1px solid var(--border-default,#e5e7eb);
+  border-radius: var(--lx-radius-md,12px); box-shadow: var(--lx-shadow-lg);
+  max-width: 280px; font-size: var(--lx-text-sm,0.875rem);
+  animation: lx-fadein .1s ease;
+}
+.lx-popover-header { padding: .6rem .875rem; font-weight: 600; border-bottom: 1px solid var(--border-default,#e5e7eb); background: var(--lx-bg-soft,#f9fafb); border-radius: var(--lx-radius-md,12px) var(--lx-radius-md,12px) 0 0; }
+.lx-popover-body   { padding: .75rem .875rem; color: var(--lx-text-secondary,#6b7280); line-height: 1.6; }

package/css/components/progress.css

@@ -0,0 +1,26 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Progress */
+/* ── Progress ── */
+.lx-progress {
+  height:        var(--lx-progress-height);
+  background:    var(--lx-progress-bg);
+  border-radius: var(--lx-progress-radius);
+  overflow:      hidden;
+}
+.lx-progress-bar {
+  height:          100%;
+  background:      var(--lx-primary,#3b82f6);
+  border-radius:   inherit;
+  transition:      width .4s ease;
+  display:         flex;
+  align-items:     center;
+  justify-content: center;
+  font-size:       .65rem;
+  font-weight:     700;
+  color:           white;
+}
+.lx-progress-bar-striped {
+  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.15) 0, rgba(255,255,255,.15) 10px, transparent 10px, transparent 20px);
+}
+.lx-progress-bar-animated { animation: lx-progress-stripes 1s linear infinite; }
+@keyframes lx-progress-stripes { to { background-position-x: -20px; } }

package/css/components/rating.css

@@ -0,0 +1,28 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Rating / Stars */
+/* ── Rating / Stars ── */
+.lx-rating {
+  display:     inline-flex;
+  align-items: center;
+  gap:         .125rem;
+  direction:   ltr;
+}
+.lx-rating-star {
+  font-size:   1.25rem;
+  line-height: 1;
+  color:       var(--border-strong,#d1d5db);
+  cursor:      pointer;
+  -webkit-transition: color .15s ease, -webkit-transform .15s ease;
+  transition:  color .15s ease, transform .15s ease;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.lx-rating-star::before { content: "★"; }
+.lx-rating-star.lx-filled,
+.lx-rating:not([data-readonly]) .lx-rating-star:hover,
+.lx-rating:not([data-readonly]) .lx-rating-star:hover ~ .lx-rating-star { color: var(--lx-warning,#f59e0b); }
+.lx-rating-star.lx-filled { color: var(--lx-warning,#f59e0b); }
+.lx-rating-star:hover { -webkit-transform: scale(1.15); transform: scale(1.15); }
+.lx-rating-sm .lx-rating-star { font-size: .875rem; }
+.lx-rating-lg .lx-rating-star { font-size: 1.75rem; }
+.lx-rating[data-readonly] .lx-rating-star { cursor: default; pointer-events: none; }

package/css/components/section.css

@@ -0,0 +1,18 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Section / Hero helpers */
+/* ── Section / Hero helpers ── */
+.lx-section { padding-block: var(--lx-section-py,4rem); }
+.lx-section-sm { --lx-section-py: 2.5rem; }
+.lx-section-lg { --lx-section-py: 6rem; }
+.lx-section-xl { --lx-section-py: 8rem; }
+
+.lx-gradient-text {
+  background:      linear-gradient(135deg, var(--lx-primary,#3b82f6), var(--lx-info,#06b6d4));
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.lx-gradient-primary { background: linear-gradient(135deg, var(--lx-primary,#3b82f6), var(--lx-primary-dark,#2563eb)); }
+.lx-gradient-warm    { background: linear-gradient(135deg, #f59e0b, #ef4444); }
+.lx-gradient-cool    { background: linear-gradient(135deg, #06b6d4, #3b82f6); }
+.lx-gradient-purple  { background: linear-gradient(135deg, #8b5cf6, #ec4899); }

package/css/components/skeleton.css

@@ -0,0 +1,19 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Skeleton */
+/* ── Skeleton ── */
+.lx-skeleton {
+  background: -webkit-linear-gradient(left, var(--lx-gray-100,#f3f4f6) 25%, var(--lx-gray-200,#e5e7eb) 50%, var(--lx-gray-100,#f3f4f6) 75%);
+  background: linear-gradient(90deg, var(--lx-gray-100,#f3f4f6) 25%, var(--lx-gray-200,#e5e7eb) 50%, var(--lx-gray-100,#f3f4f6) 75%);
+  background-size: 200% 100%; -webkit-animation: lx-skeleton-wave 1.5s ease-in-out infinite; animation: lx-skeleton-wave 1.5s ease-in-out infinite;
+  border-radius: var(--lx-radius,8px);
+}
+.lx-skeleton-text   { height: 1em; margin-bottom: .5em; }
+.lx-skeleton-img    { width: 100%; border-radius: var(--lx-radius,8px); }
+.lx-skeleton-avatar { width: var(--lx-avatar-size,2.5rem); height: var(--lx-avatar-size,2.5rem); border-radius: 50%; }
+.lx-skeleton-btn    { height: 2.25rem; width: 5rem; }
+.lx-skeleton-pulse  { animation: lx-skeleton-pulse 1.5s ease-in-out infinite; background: var(--lx-gray-200,#e5e7eb); }
+.lx-skeleton-none   { animation: none; background: var(--lx-gray-200,#e5e7eb); }
+@-webkit-keyframes lx-skeleton-wave  { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+@keyframes lx-skeleton-wave  { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+@-webkit-keyframes lx-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
+@keyframes lx-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

package/css/components/spinner.css

@@ -0,0 +1,38 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Spinner */
+/* ── Spinner ── */
+.lx-spinner {
+  display:        inline-block;
+  width:          1.5rem;
+  height:         1.5rem;
+  border:         2px solid currentColor;
+  border-right-color: transparent;
+  border-radius:  50%;
+  -webkit-animation: lx-spin .6s linear infinite;
+  animation:      lx-spin .6s linear infinite;
+  vertical-align: -.125em;
+  color:          var(--lx-primary,#3b82f6);
+}
+.lx-spinner-sm   { width: 1rem;    height: 1rem;    border-width: 2px; }
+.lx-spinner-lg   { width: 2.25rem; height: 2.25rem; border-width: 3px; }
+.lx-spinner-xl   { width: 3rem;    height: 3rem;    border-width: 3px; }
+.lx-spinner-grow { background: currentColor; border: none; animation: lx-grow .75s ease-in-out infinite; }
+@-webkit-keyframes lx-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
+@keyframes lx-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
+@-webkit-keyframes lx-grow {
+  0%   { -webkit-transform: scale(0); transform: scale(0); opacity: 0; }
+  50%  { opacity: 1; }
+  100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; }
+}
+@keyframes lx-grow {
+  0%   { -webkit-transform: scale(0); transform: scale(0); opacity: 0; }
+  50%  { opacity: 1; }
+  100% { -webkit-transform: scale(1); transform: scale(1); opacity: 0; }
+}
+.lx-loading-overlay {
+  position: fixed; inset: 0; background: rgba(255,255,255,.8);
+  display: flex; align-items: center; justify-content: center;
+  z-index: var(--lx-z-toast,1090);
+  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(2px);
+}

package/css/components/stat.css

@@ -0,0 +1,58 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Stat / Metric Card */
+/* ── Stat / Metric Card ── */
+.lx-stat {
+  background:    var(--bg-primary,#fff);
+  border:        1px solid var(--border-default,#e5e7eb);
+  border-radius: var(--lx-radius-md,12px);
+  padding:       1.25rem 1.5rem;
+  -webkit-box-shadow: var(--lx-shadow-xs);
+  box-shadow:    var(--lx-shadow-xs);
+}
+.lx-stat-label {
+  font-size:      var(--lx-text-xs,0.75rem);
+  font-weight:    700;
+  text-transform: uppercase;
+  letter-spacing: .05em;
+  color:          var(--lx-text-muted,#9ca3af);
+  margin-bottom:  .375rem;
+}
+.lx-stat-value {
+  font-size:   clamp(1.75rem,4vw,2.25rem);
+  font-weight: 700;
+  line-height: 1.1;
+  color:       var(--lx-text,#111827);
+  letter-spacing: -0.02em;
+}
+.lx-stat-desc {
+  font-size:  var(--lx-text-sm,0.875rem);
+  color:      var(--lx-text-muted,#9ca3af);
+  margin-top: .375rem;
+}
+.lx-stat-trend {
+  display:     inline-flex;
+  align-items: center;
+  gap:         .25rem;
+  font-size:   var(--lx-text-xs,0.75rem);
+  font-weight: 600;
+  margin-top:  .375rem;
+}
+.lx-stat-trend-up   { color: var(--lx-success-hover,#16a34a); }
+.lx-stat-trend-down { color: var(--lx-danger-hover,#dc2626); }
+.lx-stat-trend-up::before   { content: "▲"; font-size: .625rem; }
+.lx-stat-trend-down::before { content: "▼"; font-size: .625rem; }
+.lx-stat-icon {
+  display:         flex;
+  align-items:     center;
+  justify-content: center;
+  width:           2.75rem;
+  height:          2.75rem;
+  border-radius:   var(--lx-radius-md,12px);
+  font-size:       1.25rem;
+  flex-shrink:     0;
+}
+.lx-stat-icon-primary { background: var(--lx-primary-subtle,#dbeafe); color: var(--lx-primary,#3b82f6); }
+.lx-stat-icon-success { background: var(--lx-success-subtle,#f0fdf4); color: var(--lx-success-hover,#16a34a); }
+.lx-stat-icon-warning { background: var(--lx-warning-subtle,#fffbeb); color: var(--lx-warning-hover,#d97706); }
+.lx-stat-icon-danger  { background: var(--lx-danger-subtle,#fef2f2);  color: var(--lx-danger-hover,#dc2626); }
+.lx-stat-icon-info    { background: var(--lx-info-subtle,#ecfeff);    color: var(--lx-info-hover,#0891b2); }

package/css/components/steps.css

@@ -0,0 +1,76 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Steps / Stepper */
+/* ── Steps / Stepper ── */
+.lx-steps {
+  display:       flex;
+  align-items:   flex-start;
+  gap:           0;
+  list-style:    none;
+  padding:       0;
+  margin:        0;
+}
+.lx-steps-vertical { flex-direction: column; }
+.lx-step {
+  display:   flex;
+  flex:      1;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  position:  relative;
+}
+.lx-step:not(:last-child)::after {
+  content:    "";
+  position:   absolute;
+  top:        calc(1.25rem - 1px);
+  inset-inline-start: calc(50% + 1.25rem);
+  width:      calc(100% - 2.5rem);
+  height:     2px;
+  background: var(--border-default,#e5e7eb);
+  transition: background .3s ease;
+}
+.lx-step.lx-step-done:not(:last-child)::after { background: var(--lx-primary,#3b82f6); }
+.lx-step-icon {
+  display:         flex;
+  align-items:     center;
+  justify-content: center;
+  width:           2.5rem;
+  height:          2.5rem;
+  border-radius:   50%;
+  border:          2px solid var(--border-default,#e5e7eb);
+  background:      var(--bg-primary,#fff);
+  color:           var(--lx-text-muted,#9ca3af);
+  font-size:       var(--lx-text-sm,0.875rem);
+  font-weight:     600;
+  flex-shrink:     0;
+  z-index:         1;
+  transition:      border-color .3s ease, background .3s ease, color .3s ease;
+  -webkit-transition: border-color .3s ease, background .3s ease, color .3s ease;
+}
+.lx-step.lx-step-active .lx-step-icon {
+  border-color: var(--lx-primary,#3b82f6);
+  background:   var(--lx-primary,#3b82f6);
+  color:        #fff;
+  -webkit-box-shadow: 0 0 0 4px var(--lx-primary-subtle,#dbeafe);
+  box-shadow:   0 0 0 4px var(--lx-primary-subtle,#dbeafe);
+}
+.lx-step.lx-step-done .lx-step-icon {
+  border-color: var(--lx-primary,#3b82f6);
+  background:   var(--lx-primary,#3b82f6);
+  color:        #fff;
+}
+.lx-step.lx-step-done .lx-step-icon::after { content: "✓"; font-size: .875rem; }
+.lx-step.lx-step-error .lx-step-icon { border-color: var(--lx-danger,#ef4444); background: var(--lx-danger,#ef4444); color: #fff; }
+.lx-step-label { margin-top: .5rem; }
+.lx-step-title { font-size: var(--lx-text-sm,0.875rem); font-weight: 600; color: var(--lx-text,#111827); }
+.lx-step-desc  { font-size: var(--lx-text-xs,0.75rem); color: var(--lx-text-muted,#9ca3af); margin-top: .125rem; }
+.lx-step.lx-step-active .lx-step-title { color: var(--lx-primary,#3b82f6); }
+.lx-step.lx-step-done .lx-step-title   { color: var(--lx-text-secondary,#6b7280); }
+
+/* Vertical variant */
+.lx-steps-vertical .lx-step { flex-direction: row; align-items: flex-start; text-align: start; flex: none; width: 100%; padding-bottom: 1.5rem; }
+.lx-steps-vertical .lx-step:not(:last-child)::after { inset-inline-start: calc(1.25rem - 1px); top: 2.5rem; width: 2px; height: calc(100% - 2.5rem); }
+.lx-steps-vertical .lx-step-label { margin-top: 0; margin-inline-start: .875rem; }
+
+/* Compact / mini steps */
+.lx-steps-sm .lx-step-icon { width: 1.75rem; height: 1.75rem; font-size: .7rem; }
+.lx-steps-sm .lx-step:not(:last-child)::after { top: calc(.875rem - 1px); inset-inline-start: calc(50% + .875rem); width: calc(100% - 1.75rem); }

package/css/components/table.css

@@ -0,0 +1,29 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Table & Images */
+/* ── Table ── */
+.lx-table { width: 100%; caption-side: bottom; border-collapse: collapse; font-size: var(--lx-text-sm,0.875rem); }
+.lx-table th, .lx-table td { padding: .625rem .875rem; vertical-align: middle; border-bottom: 1px solid var(--border-default,#e5e7eb); color: var(--lx-text-secondary,#6b7280); }
+.lx-table th { font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--lx-text-muted,#9ca3af); background: var(--lx-bg-soft,#f9fafb); white-space: nowrap; }
+.lx-table tbody tr:last-child td { border-bottom: none; }
+.lx-table tbody tr:hover td { background: var(--lx-bg-soft,#f9fafb); }
+.lx-table-striped tbody tr:nth-child(even) td { background: var(--lx-bg-muted,#f3f4f6); }
+.lx-table-hover   tbody tr:hover td { background: var(--lx-primary-subtle,#dbeafe); }
+.lx-table-bordered th, .lx-table-bordered td   { border: 1px solid var(--border-default,#e5e7eb); }
+.lx-table-borderless th, .lx-table-borderless td { border: none; }
+.lx-table-compact th, .lx-table-compact td { padding: .35rem .75rem; }
+.lx-table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+.lx-table-primary td { background: var(--lx-primary-subtle,#dbeafe); color: var(--lx-primary,#3b82f6); }
+.lx-table-success td { background: var(--lx-success-subtle,#f0fdf4); color: var(--lx-success-hover,#16a34a); }
+.lx-table-warning td { background: var(--lx-warning-subtle,#fffbeb); color: var(--lx-warning-hover,#d97706); }
+.lx-table-danger  td { background: var(--lx-danger-subtle,#fef2f2);  color: var(--lx-danger-hover,#dc2626); }
+.lx-table-active  td { background: var(--lx-bg-muted,#f3f4f6); }
+
+/* ── Images & Figures ── */
+.lx-img-fluid     { max-width: 100%; height: auto; display: block; }
+.lx-img-thumbnail { max-width: 100%; height: auto; border: 2px solid var(--border-default,#e5e7eb); border-radius: var(--lx-radius,8px); padding: .25rem; background: var(--lx-bg,#fff); }
+.lx-img-cover     { width: 100%; height: 100%; object-fit: cover; display: block; }
+.lx-figure { margin: 0; }
+.lx-figure-caption { margin-top: .5rem; font-size: var(--lx-text-xs,0.75rem); color: var(--lx-text-muted,#9ca3af); }
+
+
+/* ================================================================

package/css/components/tag.css

@@ -0,0 +1,29 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Tag (different from chip — square, label-like) */
+/* ── Tag (different from chip — square, label-like) ── */
+.lx-tag {
+  display:       inline-flex;
+  align-items:   center;
+  gap:           .25rem;
+  padding:       .125rem .5rem;
+  font-size:     .7rem;
+  font-weight:   700;
+  text-transform: uppercase;
+  letter-spacing: .04em;
+  border-radius: var(--lx-radius-sm,4px);
+  background:    var(--bg-tertiary,#f3f4f6);
+  color:         var(--lx-text-secondary,#6b7280);
+  white-space:   nowrap;
+  line-height:   1.5;
+}
+.lx-tag-primary { background: var(--lx-primary,#3b82f6); color: #fff; }
+.lx-tag-success { background: var(--lx-success,#22c55e); color: #fff; }
+.lx-tag-warning { background: var(--lx-warning,#f59e0b); color: #fff; }
+.lx-tag-danger  { background: var(--lx-danger,#ef4444);  color: #fff; }
+.lx-tag-info    { background: var(--lx-info,#06b6d4);    color: #fff; }
+.lx-tag-dark    { background: var(--lx-dark,#1f2937);    color: #fff; }
+.lx-tag-soft-primary { background: var(--lx-primary-subtle,#dbeafe); color: var(--lx-primary,#3b82f6); }
+.lx-tag-soft-success { background: var(--lx-success-subtle,#f0fdf4); color: var(--lx-success-hover,#16a34a); }
+.lx-tag-soft-warning { background: var(--lx-warning-subtle,#fffbeb); color: var(--lx-warning-hover,#d97706); }
+.lx-tag-soft-danger  { background: var(--lx-danger-subtle,#fef2f2);  color: var(--lx-danger-hover,#dc2626); }
+.lx-tag-soft-info    { background: var(--lx-info-subtle,#ecfeff);    color: var(--lx-info-hover,#0891b2); }

package/css/components/timeline.css

@@ -0,0 +1,11 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Timeline */
+/* ── Timeline ── */
+.lx-timeline { position: relative; padding-inline-start: 1.75rem; }
+.lx-timeline::before { content: ""; position: absolute; inset-inline-start: .55rem; top: 0; bottom: 0; width: 2px; background: var(--border-default,#e5e7eb); }
+.lx-timeline-item { position: relative; padding-bottom: 1.5rem; }
+.lx-timeline-item:last-child { padding-bottom: 0; }
+.lx-timeline-marker { position: absolute; inset-inline-start: -1.2rem; top: .25rem; width: .875rem; height: .875rem; border-radius: 50%; background: var(--lx-primary,#3b82f6); border: 2px solid var(--lx-bg,#fff); box-shadow: 0 0 0 2px var(--border-default,#e5e7eb); z-index: 1; }
+.lx-timeline-content { padding-inline-start: .25rem; }
+.lx-timeline-title   { font-weight: 600; font-size: var(--lx-text-sm,0.875rem); color: var(--lx-text,#111827); margin: 0; }
+.lx-timeline-time    { font-size: var(--lx-text-xs,0.75rem); color: var(--lx-text-muted,#9ca3af); white-space: nowrap; }

package/css/components/toast.css

@@ -0,0 +1,14 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Toast (CSS component) */
+/* ── Toast (CSS component) ── */
+.lx-toast-container { display: flex; flex-direction: column; gap: .5rem; }
+.lx-toast {
+  min-width: 280px; max-width: 380px;
+  background: var(--lx-bg,#fff); border: 1px solid var(--border-default,#e5e7eb);
+  border-radius: var(--lx-radius-md,12px); box-shadow: var(--lx-shadow-lg);
+  overflow: hidden; opacity: 0;
+  transition: opacity .2s ease, transform .2s ease; transform: translateX(1rem);
+}
+.lx-toast.lx-show { opacity: 1; transform: translateX(0); }
+.lx-toast-header { display: flex; align-items: center; padding: .6rem .875rem; border-bottom: 1px solid var(--border-default,#e5e7eb); background: var(--lx-bg-soft,#f9fafb); font-size: var(--lx-text-sm,0.875rem); font-weight: 600; gap: .5rem; }
+.lx-toast-body  { padding: .75rem .875rem; font-size: var(--lx-text-sm,0.875rem); color: var(--lx-text-secondary,#6b7280); }

package/css/components/toggler.css

@@ -0,0 +1,20 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Navbar Toggle (hamburger animation) */
+/* ── Navbar Toggle (hamburger animation) ── */
+.lx-toggler-icon { position: relative; display: block; width: 22px; height: 2px; background: currentColor; -webkit-transition: background .2s ease; transition: background .2s ease; }
+.lx-toggler-icon::before,
+.lx-toggler-icon::after {
+  content:    "";
+  position:   absolute;
+  width:      22px;
+  height:     2px;
+  background: currentColor;
+  -webkit-transition: transform .3s ease;
+  transition: transform .3s ease;
+  left:       0;
+}
+.lx-toggler-icon::before { top: -6px; }
+.lx-toggler-icon::after  { bottom: -6px; }
+.lx-toggler-open .lx-toggler-icon { background: transparent; }
+.lx-toggler-open .lx-toggler-icon::before { -webkit-transform: rotate(45deg) translate(4px, 4px); transform: rotate(45deg) translate(4px, 4px); }
+.lx-toggler-open .lx-toggler-icon::after  { -webkit-transform: rotate(-45deg) translate(4px, -4px); transform: rotate(-45deg) translate(4px, -4px); }

package/css/components/tooltip.css

@@ -0,0 +1,10 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Tooltip (CSS component) */
+/* ── Tooltip (CSS component) ── */
+.lx-tooltip {
+  position: absolute; z-index: var(--lx-z-tooltip,1080);
+  background: var(--lx-tooltip-bg,#111827); color: var(--lx-tooltip-color,#fff);
+  font-size: .75rem; padding: .3rem .6rem; border-radius: var(--lx-tooltip-radius,4px);
+  pointer-events: none; max-width: 200px; white-space: normal; line-height: 1.4;
+  animation: lx-fadein .1s ease;
+}