@lancar/lxui 1.0.0

package/css/base/reset.css

@@ -0,0 +1,91 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* reset */
+§1  RESET & BASE
+================================================================= */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+  -webkit-text-size-adjust: 100%;
+  tab-size: 4;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: var(--font-default, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
+  font-size: var(--lx-text-base, 1rem);
+  line-height: 1.6;
+  color: var(--text-primary, #111827);
+  background-color: var(--bg-primary, #ffffff);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
+
+img, svg, video, canvas, audio, iframe, embed, object { display: block; max-width: 100%; }
+
+input, button, textarea, select { font: inherit; }
+
+ul[role='list'], ol[role='list'] { list-style: none; }
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-default);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--text-primary, #111827);
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+}
+
+h1 { font-size: clamp(1.75rem, 4vw + 1rem, 2.5rem); line-height: 1.2; }
+h2 { font-size: clamp(1.5rem, 3vw + 0.8rem, 2rem);  line-height: 1.3; }
+h3 { font-size: clamp(1.25rem, 2.5vw + 0.6rem, 1.75rem); line-height: 1.3; }
+h4 { font-size: clamp(1.125rem, 2vw + 0.5rem, 1.5rem); line-height: 1.4; }
+h5 { font-size: clamp(1rem, 1.5vw + 0.4rem, 1.25rem); line-height: 1.4; }
+h6 { font-size: 1rem; line-height: 1.5; font-weight: 600; }
+
+p { margin-top: 0; margin-bottom: 1em; }
+
+a { color: var(--accent, #3b82f6); text-decoration: none; transition: color 0.2s ease; }
+a:hover { color: var(--accent-hover, #2563eb); text-decoration: underline; }
+a:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; border-radius: 3px; }
+
+code, pre { font-family: var(--font-mono, "SFMono-Regular", Consolas, monospace); }
+code { padding: 2px 6px; background: var(--bg-secondary, #f3f4f6); border: 1px solid var(--border-subtle, #e5e7eb); border-radius: 4px; font-size: 0.875em; }
+pre { padding: 1rem; overflow-x: auto; line-height: 1.6; background: var(--bg-secondary, #f3f4f6); border: 1px solid var(--border-subtle, #e5e7eb); border-radius: 8px; }
+pre code { background: none; border: none; padding: 0; }
+
+kbd { font-family: var(--font-mono); font-size: 0.875em; padding: 0.125rem 0.375rem; background: var(--bg-tertiary, #e5e7eb); border: 1px solid var(--border-default, #d1d5db); border-radius: 4px; }
+
+mark { background: #fef08a; padding: 0.1em 0.2em; border-radius: 2px; }
+
+hr { border: none; border-top: 1px solid var(--border-subtle, #e5e7eb); margin: 1.5rem 0; }
+
+::selection { background: var(--accent-subtle, #dbeafe); color: var(--accent, #1d4ed8); }
+
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: var(--bg-secondary, #f3f4f6); }
+::-webkit-scrollbar-thumb { background: var(--border-strong, #d1d5db); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: var(--accent, #3b82f6); }
+
+:focus-visible { outline: 2px solid var(--accent, #3b82f6); outline-offset: 2px; }
+:focus:not(:focus-visible) { outline: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ================================================================

package/css/base/tokens-extended.css

@@ -0,0 +1,119 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Extended design tokens */
+/* ── Extended design tokens ── */
+:root {
+  /* Semantic aliases */
+  --lx-font-sans:   var(--font-default);
+  --lx-font-serif:  "Source Serif Pro", Georgia, "Times New Roman", serif;
+  --lx-text:          var(--text-primary, #111827);
+  --lx-text-secondary:var(--text-secondary, #6b7280);
+  --lx-text-muted:    var(--text-muted, #9ca3af);
+  --lx-text-disabled: #d1d5db;
+  --lx-bg:          var(--bg-primary, #ffffff);
+  --lx-bg-soft:     var(--bg-secondary, #f9fafb);
+  --lx-bg-muted:    var(--bg-tertiary, #f3f4f6);
+  --lx-border:      var(--border-default, #e5e7eb);
+
+  /* Extended color variants */
+  --lx-primary-hover:   var(--lx-primary-dark, #2563eb);
+  --lx-primary-subtle:  var(--accent-subtle, #dbeafe);
+  --lx-primary-fg:      var(--accent-fg, #ffffff);
+  --lx-secondary-hover: #4b5563;
+  --lx-secondary-subtle:#f9fafb;
+  --lx-secondary-fg:    #ffffff;
+  --lx-success-hover:   #16a34a;
+  --lx-success-subtle:  #f0fdf4;
+  --lx-success-light:   #86efac;
+  --lx-success-fg:      #ffffff;
+  --lx-warning-hover:   #d97706;
+  --lx-warning-subtle:  #fffbeb;
+  --lx-warning-light:   #fcd34d;
+  --lx-warning-fg:      #ffffff;
+  --lx-danger-hover:    #dc2626;
+  --lx-danger-subtle:   #fef2f2;
+  --lx-danger-light:    #fca5a5;
+  --lx-danger-fg:       #ffffff;
+  --lx-info-hover:      #0891b2;
+  --lx-info-subtle:     #ecfeff;
+  --lx-info-light:      #67e8f9;
+  --lx-info-fg:         #ffffff;
+  --lx-white:           #ffffff;
+  --lx-black:           #000000;
+
+  /* Gray scale */
+  --lx-gray-50:  #f9fafb;
+  --lx-gray-100: #f3f4f6;
+  --lx-gray-200: #e5e7eb;
+  --lx-gray-300: #d1d5db;
+  --lx-gray-400: #9ca3af;
+  --lx-gray-500: #6b7280;
+  --lx-gray-600: #4b5563;
+  --lx-gray-700: #374151;
+  --lx-gray-800: #1f2937;
+  --lx-gray-900: #111827;
+  --lx-gray-950: #030712;
+
+  /* Timing functions */
+  --lx-ease:        cubic-bezier(0.4, 0, 0.2, 1);
+  --lx-ease-in:     cubic-bezier(0.4, 0, 1, 1);
+  --lx-ease-out:    cubic-bezier(0, 0, 0.2, 1);
+  --lx-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --lx-duration-fast: 100ms;
+  --lx-duration:      200ms;
+  --lx-duration-slow: 300ms;
+
+  /* Component tokens */
+  --lx-btn-padding-y:    0.5rem;
+  --lx-btn-padding-x:    1rem;
+  --lx-btn-font-size:    var(--lx-text-sm, 0.875rem);
+  --lx-btn-font-weight:  600;
+  --lx-btn-radius:       var(--lx-radius, 8px);
+  --lx-btn-transition:   var(--lx-transition);
+
+  --lx-card-padding: 1.5rem;
+  --lx-card-radius:  var(--lx-radius-md, 12px);
+  --lx-card-shadow:  var(--lx-shadow);
+  --lx-card-border:  1px solid var(--border-default, #e5e7eb);
+
+  --lx-input-padding-y:    0.5rem;
+  --lx-input-padding-x:    0.75rem;
+  --lx-input-font-size:    var(--lx-text-sm, 0.875rem);
+  --lx-input-radius:       var(--lx-radius, 8px);
+  --lx-input-border:       1px solid var(--border-strong, #d1d5db);
+  --lx-input-bg:           var(--bg-primary, #ffffff);
+  --lx-input-focus-shadow: 0 0 0 3px rgba(59,130,246,.15);
+
+  --lx-modal-radius:   var(--lx-radius-lg, 16px);
+  --lx-modal-shadow:   var(--lx-shadow-xl);
+  --lx-modal-backdrop: rgba(0,0,0,.5);
+
+  --lx-tooltip-bg:     #111827;
+  --lx-tooltip-color:  #ffffff;
+  --lx-tooltip-radius: var(--lx-radius-sm, 4px);
+
+  --lx-badge-padding-y:   0.25em;
+  --lx-badge-padding-x:   0.6em;
+  --lx-badge-font-size:   0.75em;
+  --lx-badge-font-weight: 600;
+  --lx-badge-radius:      var(--lx-radius-full, 9999px);
+
+  --lx-progress-height: 0.5rem;
+  --lx-progress-bg:     var(--bg-tertiary, #f3f4f6);
+  --lx-progress-radius: var(--lx-radius-full, 9999px);
+
+  --lx-avatar-size:      2.5rem;
+  --lx-avatar-radius:    50%;
+  --lx-avatar-font-size: 0.875rem;
+
+  --lx-breadcrumb-sep: "/";
+
+  /* Container sizes */
+  --lx-container-sm:  640px;
+  --lx-container-md:  768px;
+  --lx-container-lg:  1024px;
+  --lx-container-xl:  1280px;
+  --lx-container-2xl: 1536px;
+  --lx-container-pad: var(--lx-container-padding-x, 1rem);
+}
+
+/* ================================================================

package/css/base/tokens.css

@@ -0,0 +1,105 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* tokens */
+§2  DESIGN TOKENS
+================================================================= */
+
+:root {
+  /* Font system */
+  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --font-default: "Plus Jakarta Sans", var(--font-system);
+  --font-modern:  "Inter", var(--font-system);
+  --font-mono:    "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", Menlo, "Courier New", monospace;
+
+  /* Font sizes */
+  --lx-text-xs:   0.75rem;
+  --lx-text-sm:   0.875rem;
+  --lx-text-base: 1rem;
+  --lx-text-lg:   1.125rem;
+  --lx-text-xl:   1.25rem;
+  --lx-text-2xl:  1.5rem;
+  --lx-text-3xl:  1.875rem;
+  --lx-text-4xl:  2.25rem;
+  --lx-text-5xl:  3rem;
+
+  /* Spacing */
+  --lx-spacer:   1rem;
+  --lx-space-1:  0.25rem;
+  --lx-space-2:  0.5rem;
+  --lx-space-3:  0.75rem;
+  --lx-space-4:  1rem;
+  --lx-space-5:  1.25rem;
+  --lx-space-6:  1.5rem;
+  --lx-space-8:  2rem;
+  --lx-space-10: 2.5rem;
+  --lx-space-12: 3rem;
+  --lx-space-16: 4rem;
+
+  /* Border radius */
+  --lx-radius-none: 0;
+  --lx-radius-sm:   4px;
+  --lx-radius:      8px;
+  --lx-radius-md:   12px;
+  --lx-radius-lg:   16px;
+  --lx-radius-xl:   24px;
+  --lx-radius-full: 9999px;
+
+  /* Shadows */
+  --lx-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --lx-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --lx-shadow:    0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  --lx-shadow-md: 0 8px 12px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
+  --lx-shadow-lg: 0 16px 24px -5px rgba(0, 0, 0, 0.1),  0 8px 10px -6px rgba(0, 0, 0, 0.05);
+  --lx-shadow-xl: 0 24px 40px -8px rgba(0, 0, 0, 0.12), 0 12px 16px -8px rgba(0, 0, 0, 0.06);
+  --lx-shadow-2xl: 0 40px 60px -12px rgba(0, 0, 0, 0.18);
+
+  /* Transitions */
+  --lx-transition:      all 0.2s ease;
+  --lx-transition-fast: all 0.1s ease;
+  --lx-transition-slow: all 0.4s ease;
+
+  /* Z-index */
+  --lx-z-dropdown:  1000;
+  --lx-z-sticky:    1020;
+  --lx-z-fixed:     1030;
+  --lx-z-offcanvas: 1040;
+  --lx-z-modal-bg:  1050;
+  --lx-z-modal:     1060;
+  --lx-z-popover:   1070;
+  --lx-z-tooltip:   1080;
+  --lx-z-toast:     1090;
+
+  /* Brand colors (fallback when no theme is active) */
+  --lx-primary:       #3b82f6;
+  --lx-primary-dark:  #2563eb;
+  --lx-primary-light: #93c5fd;
+  --lx-secondary:     #6b7280;
+  --lx-success:       #22c55e;
+  --lx-warning:       #f59e0b;
+  --lx-danger:        #ef4444;
+  --lx-info:          #06b6d4;
+  --lx-dark:          #1f2937;
+  --lx-light:         #f9fafb;
+
+  /* Default semantic vars (overridden by UI themes) */
+  --bg-primary:     #ffffff;
+  --bg-secondary:   #f9fafb;
+  --bg-tertiary:    #f3f4f6;
+  --surface:        #ffffff;
+  --text-primary:   #111827;
+  --text-secondary: #6b7280;
+  --text-muted:     #9ca3af;
+  --border-strong:  #d1d5db;
+  --border-default: #e5e7eb;
+  --border-subtle:  #f3f4f6;
+  --accent:         var(--lx-primary);
+  --accent-hover:   var(--lx-primary-dark);
+  --accent-subtle:  #dbeafe;
+  --accent-fg:      #ffffff;
+
+  /* Container */
+  --lx-container-padding-x: 1rem;
+}
+
+@media (min-width: 768px) {
+  :root { --lx-container-padding-x: 1.5rem; }
+}

package/css/base/typography.css

@@ -0,0 +1,35 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* typography */
+§3  TYPOGRAPHY
+================================================================= */
+
+h1, .lx-h1 { font-size: clamp(1.75rem,4vw + 1rem,2.5rem);  font-weight: 700; line-height: 1.2;  letter-spacing: -0.03em; }
+h2, .lx-h2 { font-size: clamp(1.5rem,3vw + 0.8rem,2rem);   font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
+h3, .lx-h3 { font-size: clamp(1.25rem,2.5vw + 0.6rem,1.75rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
+h4, .lx-h4 { font-size: clamp(1.125rem,2vw + 0.5rem,1.5rem);  font-weight: 600; line-height: 1.35; }
+h5, .lx-h5 { font-size: clamp(1rem,1.5vw + 0.4rem,1.25rem);   font-weight: 600; line-height: 1.4; }
+h6, .lx-h6 { font-size: 1rem; font-weight: 600; line-height: 1.5; }
+
+.lx-display-1 { font-size: clamp(2.5rem,8vw + 0.5rem,5rem);   font-weight: 700; line-height: 1.1;  letter-spacing: -0.04em; }
+.lx-display-2 { font-size: clamp(2.2rem,7vw + 0.5rem,4.5rem); font-weight: 700; line-height: 1.1;  letter-spacing: -0.04em; }
+.lx-display-3 { font-size: clamp(2rem,6vw + 0.5rem,4rem);     font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; }
+.lx-display-4 { font-size: clamp(1.8rem,5vw + 0.5rem,3.5rem); font-weight: 700; line-height: 1.2;  letter-spacing: -0.03em; }
+
+.lx-lead { font-size: var(--lx-text-lg,1.125rem); font-weight: 400; line-height: 1.7; color: var(--lx-text-secondary,#6b7280); }
+
+small, .lx-small { font-size: var(--lx-text-xs,0.75rem); color: var(--lx-text-muted,#9ca3af); }
+
+blockquote, .lx-blockquote {
+  border-left:   3px solid var(--accent,#3b82f6);
+  padding:       1rem 1.5rem;
+  margin:        1.5rem 0;
+  background:    var(--accent-subtle,#dbeafe);
+  border-radius: 0 var(--lx-radius,8px) var(--lx-radius,8px) 0;
+  font-style:    italic;
+  color:         var(--lx-text-secondary,#6b7280);
+}
+.lx-blockquote-footer { font-size: var(--lx-text-sm,0.875rem); font-style: normal; font-weight: 600; color: var(--lx-text-muted,#9ca3af); margin-top: 0.5rem; }
+.lx-blockquote-footer::before { content: "— "; }
+
+
+/* ================================================================

package/css/base/utils.css

@@ -0,0 +1,26 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+
+/* ── Utility: scroll lock & fade ── */
+body.lx-modal-open { overflow: hidden; }
+.lx-fade { animation: lx-fadein .2s ease; }
+.lx-offcanvas-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1039;
+  background: rgba(0,0,0,.5);
+  -webkit-backdrop-filter: blur(2px);
+  backdrop-filter: blur(2px);
+}
+
+/* ── Link helpers ── */
+.lx-link-primary   { color: var(--lx-primary,#3b82f6);   }
+.lx-link-secondary { color: var(--lx-secondary,#6b7280); }
+.lx-link-success   { color: var(--lx-success,#22c55e);   }
+.lx-link-warning   { color: var(--lx-warning,#f59e0b);   }
+.lx-link-danger    { color: var(--lx-danger,#ef4444);    }
+.lx-link-info      { color: var(--lx-info,#06b6d4);      }
+.lx-link-dark      { color: var(--lx-dark,#1f2937);      }
+[class^="lx-link-"]:hover { text-decoration: underline; }
+
+
+/* ================================================================

package/css/components/accordion.css

@@ -0,0 +1,25 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Accordion */
+/* ── Accordion ── */
+.lx-accordion { border: 1px solid var(--border-default,#e5e7eb); border-radius: var(--lx-radius-md,12px); overflow: hidden; }
+.lx-accordion-item { border-bottom: 1px solid var(--border-default,#e5e7eb); }
+.lx-accordion-item:last-child { border-bottom: none; }
+.lx-accordion-flush { border: none; border-radius: 0; }
+.lx-accordion-flush .lx-accordion-item { border-inline: none; }
+.lx-accordion-trigger {
+  display: flex; align-items: center; justify-content: space-between;
+  width: 100%; padding: 1rem 1.25rem;
+  font-size: var(--lx-text-sm,0.875rem); font-weight: 600; color: var(--lx-text,#111827);
+  background: var(--lx-bg,#fff); border: none; cursor: pointer; text-align: start;
+  transition: background .1s ease;
+}
+.lx-accordion-trigger:hover    { background: var(--lx-bg-soft,#f9fafb); }
+.lx-accordion-trigger.lx-active { color: var(--lx-primary,#3b82f6); background: var(--lx-primary-subtle,#dbeafe); }
+.lx-accordion-icon {
+  width: .875rem; height: .875rem;
+  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
+  transform: rotate(45deg); flex-shrink: 0; transition: transform .2s ease;
+}
+.lx-accordion-trigger.lx-active .lx-accordion-icon { transform: rotate(-135deg); }
+.lx-accordion-body { display: none; padding: 1rem 1.25rem; font-size: var(--lx-text-sm,0.875rem); color: var(--lx-text-secondary,#6b7280); line-height: 1.7; }
+.lx-accordion-body.lx-show { display: block; animation: lx-fadein .2s ease; }

package/css/components/alert.css

@@ -0,0 +1,22 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Alert */
+/* ── Alert ── */
+.lx-alert {
+  position:      relative;
+  padding:       .875rem 1.125rem;
+  border-radius: var(--lx-radius,8px);
+  border:        1px solid transparent;
+  font-size:     var(--lx-text-sm,0.875rem);
+  line-height:   1.6;
+}
+.lx-alert-heading    { font-weight: 700; font-size: var(--lx-text-base,1rem); margin-bottom: .375rem; }
+.lx-alert-divider    { border-color: currentColor; opacity: .2; margin: .75rem 0; }
+.lx-alert-dismissible { padding-inline-end: 3rem; }
+.lx-alert-close      { position: absolute; top: .5rem; inset-inline-end: .5rem; }
+
+.lx-alert-primary   { background: var(--lx-primary-subtle,#dbeafe);  color: var(--lx-primary-hover,#2563eb);  border-color: var(--lx-primary-light,#93c5fd); }
+.lx-alert-secondary { background: var(--lx-gray-100,#f3f4f6);         color: var(--lx-gray-700,#374151);        border-color: var(--lx-gray-300,#d1d5db); }
+.lx-alert-success   { background: var(--lx-success-subtle,#f0fdf4);  color: var(--lx-success-hover,#16a34a);  border-color: var(--lx-success-light,#86efac); }
+.lx-alert-warning   { background: var(--lx-warning-subtle,#fffbeb);  color: var(--lx-warning-hover,#d97706);  border-color: var(--lx-warning-light,#fcd34d); }
+.lx-alert-danger    { background: var(--lx-danger-subtle,#fef2f2);   color: var(--lx-danger-hover,#dc2626);   border-color: var(--lx-danger-light,#fca5a5); }
+.lx-alert-info      { background: var(--lx-info-subtle,#ecfeff);     color: var(--lx-info-hover,#0891b2);     border-color: var(--lx-info-light,#67e8f9); }

package/css/components/animations.css

@@ -0,0 +1,26 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Scroll-driven & animation helpers */
+/* ── Scroll-driven & animation helpers ── */
+@keyframes lx-slide-up   { from { opacity:0; -webkit-transform:translateY(16px); transform:translateY(16px); } to { opacity:1; -webkit-transform:none; transform:none; } }
+@keyframes lx-slide-down { from { opacity:0; -webkit-transform:translateY(-16px); transform:translateY(-16px); } to { opacity:1; -webkit-transform:none; transform:none; } }
+@keyframes lx-slide-left { from { opacity:0; -webkit-transform:translateX(16px); transform:translateX(16px); } to { opacity:1; -webkit-transform:none; transform:none; } }
+@keyframes lx-slide-right{ from { opacity:0; -webkit-transform:translateX(-16px); transform:translateX(-16px); } to { opacity:1; -webkit-transform:none; transform:none; } }
+@keyframes lx-zoom-in    { from { opacity:0; -webkit-transform:scale(.9); transform:scale(.9); } to { opacity:1; -webkit-transform:scale(1); transform:scale(1); } }
+@keyframes lx-bounce-in  { 0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)} 50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)} 70%{-webkit-transform:scale(.9);transform:scale(.9)} 100%{-webkit-transform:scale(1);transform:scale(1)} }
+@keyframes lx-pulse-ring { 0%{-webkit-box-shadow:0 0 0 0 rgba(59,130,246,.4);box-shadow:0 0 0 0 rgba(59,130,246,.4)} 70%{-webkit-box-shadow:0 0 0 10px transparent;box-shadow:0 0 0 10px transparent} 100%{-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent} }
+.lx-animate-slide-up    { -webkit-animation: lx-slide-up   .35s var(--lx-ease,cubic-bezier(.4,0,.2,1)) both; animation: lx-slide-up   .35s var(--lx-ease,cubic-bezier(.4,0,.2,1)) both; }
+.lx-animate-slide-down  { -webkit-animation: lx-slide-down .35s var(--lx-ease,cubic-bezier(.4,0,.2,1)) both; animation: lx-slide-down .35s var(--lx-ease,cubic-bezier(.4,0,.2,1)) both; }
+.lx-animate-slide-left  { -webkit-animation: lx-slide-left .35s var(--lx-ease,cubic-bezier(.4,0,.2,1)) both; animation: lx-slide-left .35s var(--lx-ease,cubic-bezier(.4,0,.2,1)) both; }
+.lx-animate-slide-right { -webkit-animation: lx-slide-right.35s var(--lx-ease,cubic-bezier(.4,0,.2,1)) both; animation: lx-slide-right.35s var(--lx-ease,cubic-bezier(.4,0,.2,1)) both; }
+.lx-animate-zoom-in     { -webkit-animation: lx-zoom-in   .3s var(--lx-ease,cubic-bezier(.4,0,.2,1)) both; animation: lx-zoom-in   .3s var(--lx-ease,cubic-bezier(.4,0,.2,1)) both; }
+.lx-animate-bounce-in   { -webkit-animation: lx-bounce-in .5s both; animation: lx-bounce-in .5s both; }
+.lx-animate-pulse-ring  { -webkit-animation: lx-pulse-ring 1.5s infinite; animation: lx-pulse-ring 1.5s infinite; }
+.lx-animate-spin        { -webkit-animation: lx-spin .6s linear infinite; animation: lx-spin .6s linear infinite; }
+.lx-animate-ping        { -webkit-animation: lx-grow 1s ease-in-out infinite; animation: lx-grow 1s ease-in-out infinite; }
+
+/* Delay helpers */
+.lx-delay-100 { -webkit-animation-delay: .1s; animation-delay: .1s; }
+.lx-delay-200 { -webkit-animation-delay: .2s; animation-delay: .2s; }
+.lx-delay-300 { -webkit-animation-delay: .3s; animation-delay: .3s; }
+.lx-delay-500 { -webkit-animation-delay: .5s; animation-delay: .5s; }
+.lx-delay-700 { -webkit-animation-delay: .7s; animation-delay: .7s; }

package/css/components/avatar.css

@@ -0,0 +1,38 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Avatar */
+/* ── Avatar ── */
+.lx-avatar {
+  display:         inline-flex;
+  align-items:     center;
+  justify-content: center;
+  width:           var(--lx-avatar-size);
+  height:          var(--lx-avatar-size);
+  border-radius:   var(--lx-avatar-radius);
+  font-size:       var(--lx-avatar-font-size);
+  font-weight:     600;
+  background:      var(--lx-gray-200,#e5e7eb);
+  color:           var(--lx-gray-600,#4b5563);
+  overflow:        hidden;
+  flex-shrink:     0;
+  user-select:     none;
+}
+.lx-avatar img  { width: 100%; height: 100%; object-fit: cover; }
+.lx-avatar-xs   { width: 1.5rem; height: 1.5rem; font-size: .55rem; }
+.lx-avatar-sm   { width: 2rem;   height: 2rem;   font-size: .7rem; }
+.lx-avatar-lg   { width: 3.5rem; height: 3.5rem; font-size: 1rem; }
+.lx-avatar-xl   { width: 4.5rem; height: 4.5rem; font-size: 1.25rem; }
+.lx-avatar-2xl  { width: 6rem;   height: 6rem;   font-size: 1.5rem; }
+.lx-avatar-primary   { background: var(--lx-primary-subtle,#dbeafe);  color: var(--lx-primary,#3b82f6); }
+.lx-avatar-success   { background: var(--lx-success-subtle,#f0fdf4);  color: var(--lx-success-hover,#16a34a); }
+.lx-avatar-warning   { background: var(--lx-warning-subtle,#fffbeb);  color: var(--lx-warning-hover,#d97706); }
+.lx-avatar-danger    { background: var(--lx-danger-subtle,#fef2f2);   color: var(--lx-danger-hover,#dc2626); }
+.lx-avatar-info      { background: var(--lx-info-subtle,#ecfeff);     color: var(--lx-info-hover,#0891b2); }
+.lx-avatar-wrapper { position: relative; display: inline-block; }
+.lx-avatar-status { position: absolute; bottom: 0; inset-inline-end: 0; width: .75rem; height: .75rem; border-radius: 50%; border: 2px solid var(--lx-bg,#fff); }
+.lx-avatar-status-online  { background: var(--lx-success,#22c55e); }
+.lx-avatar-status-busy    { background: var(--lx-danger,#ef4444); }
+.lx-avatar-status-away    { background: var(--lx-warning,#f59e0b); }
+.lx-avatar-status-offline { background: var(--lx-gray-400,#9ca3af); }
+.lx-avatar-group         { display: inline-flex; }
+.lx-avatar-group .lx-avatar { margin-inline-start: -.5rem; border: 2px solid var(--lx-bg,#fff); }
+.lx-avatar-group .lx-avatar:first-child { margin-inline-start: 0; }

package/css/components/back-top.css

@@ -0,0 +1,32 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Back To Top */
+/* ── Back To Top ── */
+.lx-back-top {
+  position:   fixed;
+  inset-inline-end: 1.5rem;
+  bottom:     5rem;
+  z-index:    var(--lx-z-fixed,1030);
+  display:    flex;
+  align-items: center;
+  justify-content: center;
+  width:      2.5rem;
+  height:     2.5rem;
+  border-radius: 50%;
+  background: var(--bg-primary,#fff);
+  border:     1px solid var(--border-default,#e5e7eb);
+  -webkit-box-shadow: var(--lx-shadow-md);
+  box-shadow: var(--lx-shadow-md);
+  cursor:     pointer;
+  opacity:    0;
+  visibility: hidden;
+  -webkit-transform: translateY(8px);
+  transform:  translateY(8px);
+  -webkit-transition: opacity .25s ease, visibility .25s ease, -webkit-transform .25s ease;
+  transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
+  font-size:  1.125rem;
+  color:      var(--lx-text-secondary,#6b7280);
+  text-decoration: none;
+}
+.lx-back-top.lx-show { opacity: 1; visibility: visible; -webkit-transform: none; transform: none; }
+.lx-back-top:hover { background: var(--lx-primary,#3b82f6); color: #fff; border-color: var(--lx-primary,#3b82f6); }
+.lx-back-top::before { content: "↑"; font-weight: 700; }

package/css/components/badge.css

@@ -0,0 +1,37 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Badge */
+/* ── Badge ── */
+.lx-badge {
+  display:       inline-flex;
+  align-items:   center;
+  padding:       var(--lx-badge-padding-y) var(--lx-badge-padding-x);
+  font-size:     var(--lx-badge-font-size);
+  font-weight:   var(--lx-badge-font-weight);
+  line-height:   1;
+  border-radius: var(--lx-badge-radius);
+  white-space:   nowrap;
+}
+.lx-badge-sm { font-size: .65em; }
+.lx-badge-lg { font-size: .875em; padding: .35em .7em; }
+
+.lx-badge-primary   { background: var(--lx-primary,#3b82f6);   color: var(--lx-primary-fg,#fff); }
+.lx-badge-secondary { background: var(--lx-secondary,#6b7280); color: #fff; }
+.lx-badge-success   { background: var(--lx-success,#22c55e);   color: #fff; }
+.lx-badge-warning   { background: var(--lx-warning,#f59e0b);   color: #fff; }
+.lx-badge-danger    { background: var(--lx-danger,#ef4444);    color: #fff; }
+.lx-badge-info      { background: var(--lx-info,#06b6d4);      color: #fff; }
+.lx-badge-dark      { background: var(--lx-dark,#1f2937);      color: #fff; }
+.lx-badge-light     { background: var(--lx-light,#f9fafb);     color: var(--lx-text,#111827); border: 1px solid var(--border-default,#e5e7eb); }
+
+.lx-badge-outline-primary   { border: 1px solid var(--lx-primary,#3b82f6);   color: var(--lx-primary,#3b82f6);   background: transparent; }
+.lx-badge-outline-secondary { border: 1px solid var(--lx-secondary,#6b7280); color: var(--lx-secondary,#6b7280); background: transparent; }
+.lx-badge-outline-success   { border: 1px solid var(--lx-success,#22c55e);   color: var(--lx-success,#22c55e);   background: transparent; }
+.lx-badge-outline-danger    { border: 1px solid var(--lx-danger,#ef4444);    color: var(--lx-danger,#ef4444);    background: transparent; }
+.lx-badge-outline-warning   { border: 1px solid var(--lx-warning,#f59e0b);   color: var(--lx-warning,#f59e0b);   background: transparent; }
+
+.lx-badge-soft-primary   { background: var(--lx-primary-subtle,#dbeafe);  color: var(--lx-primary,#3b82f6); }
+.lx-badge-soft-secondary { background: var(--lx-gray-100,#f3f4f6);        color: var(--lx-secondary,#6b7280); }
+.lx-badge-soft-success   { background: var(--lx-success-subtle,#f0fdf4);  color: var(--lx-success-hover,#16a34a); }
+.lx-badge-soft-warning   { background: var(--lx-warning-subtle,#fffbeb);  color: var(--lx-warning-hover,#d97706); }
+.lx-badge-soft-danger    { background: var(--lx-danger-subtle,#fef2f2);   color: var(--lx-danger-hover,#dc2626); }
+.lx-badge-soft-info      { background: var(--lx-info-subtle,#ecfeff);     color: var(--lx-info-hover,#0891b2); }

package/css/components/breadcrumb.css

@@ -0,0 +1,13 @@
+/*! LxUI v1.0.0 | MIT License | https://ui.lancar.id */
+/* Breadcrumb */
+/* ── Breadcrumb ── */
+.lx-breadcrumb {
+  display: flex; flex-wrap: wrap; gap: .25rem;
+  list-style: none; padding: 0; margin: 0;
+  font-size: var(--lx-text-sm,0.875rem);
+}
+.lx-breadcrumb-item { display: flex; align-items: center; color: var(--lx-text-muted,#9ca3af); }
+.lx-breadcrumb-item a { color: var(--lx-text-secondary,#6b7280); text-decoration: none; transition: color .1s ease; }
+.lx-breadcrumb-item a:hover { color: var(--lx-primary,#3b82f6); }
+.lx-breadcrumb-item.lx-active { color: var(--lx-text,#111827); font-weight: 500; }
+.lx-breadcrumb-item + .lx-breadcrumb-item::before { content: var(--lx-breadcrumb-sep); padding-inline: .4rem; color: var(--lx-text-muted,#9ca3af); }