@abydahana/aksara-ui 1.0.0 → 1.1.0

package/README.md

@@ -1,6 +1,6 @@
 # Aksara UI
 
-Bootstrap readability with Tailwind flexibility: a static CSS and vanilla JavaScript frontend framework.
+Bootstrap readability with Tailwind flexibility: a static CSS and TypeScript frontend framework.
 
 Aksara UI is built around one promise: users can ship a modern interface with static files only. No Node.js, bundler, compiler, JIT server, runtime style injection, or framework adapter is required in production.
 
@@ -11,7 +11,7 @@ Aksara UI is built around one promise: users can ship a modern interface with st
 - **Static CSS Ahead-of-Time**: Predictable utility ranges and component classes precompiled into pure CSS. Dynamic class names are safe because utilities already exist in the stylesheet.
 - **Strict Variant Ordering**: Clean, enforceable modifier hierarchy (`theme -> breakpoint -> state -> utility`, e.g. `dark:md:hover:border-primary`).
 - **RTL-First Architecture**: Built on CSS logical properties (`ms`, `me`, `ps`, `pe`, `text-start`, `text-end`) ensuring seamless bidirectional layout support.
-- **Zero-Dependency Vanilla JS**: Modular, lightweight interactive components (Modal, Dropdown, Tooltip, Toast, Offcanvas, Accordion, Tab) accessible globally via `Aksara` or modular imports.
+- **Zero-Dependency TypeScript**: Modular, lightweight interactive components written in pure TypeScript with first-class type declarations, accessible globally via `Aksara` or modular imports.
 - **Icon Integration**: Bundled with Material Design Icons (`@mdi/font`).
 
 ---

package/dist/aksara.css

@@ -1,4 +1,4 @@
-/*! Aksara UI v0.1.0 | Static CSS, no JIT, vanilla JS */
+/*! Aksara UI v1.0.0 | Static CSS, no JIT, TypeScript */
 @import "@mdi/font/css/materialdesignicons.min.css";
 
 :root {
@@ -60,6 +60,7 @@
   --aksara-bg-invert:#0f172a;
   --aksara-bg:var(--aksara-bg-body);
   --aksara-text-body:#172033;
+  --aksara-text-base:var(--aksara-text-body);
   --aksara-text-body-secondary:#64748b;
   --aksara-text-body-tertiary:#94a3b8;
   --aksara-text-subtle:#64748b;
@@ -102,6 +103,7 @@
   --aksara-bg-invert:#f8fafc;
   --aksara-bg:var(--aksara-bg-body);
   --aksara-text-body:#f8fafc;
+  --aksara-text-base:var(--aksara-text-body);
   --aksara-text-body-secondary:#94a3b8;
   --aksara-text-body-tertiary:#64748b;
   --aksara-text-subtle:#94a3b8;
@@ -140,12 +142,37 @@ html {
 }
 body {
   margin:0;
-  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
+  font-family:Ubuntu,Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
   font-size:1rem;
   background:var(--aksara-bg-body);
   color:var(--aksara-text-body);
   line-height:1.5
 }
+h1,h2,h3,h4,h5,h6 {
+  margin-top:0;
+  margin-bottom:.5rem;
+  font-weight:600;
+  line-height:1.25;
+  color:inherit
+}
+h1 {
+  font-size:2rem
+}
+h2 {
+  font-size:1.75rem
+}
+h3 {
+  font-size:1.5rem
+}
+h4 {
+  font-size:1.25rem
+}
+h5 {
+  font-size:1.125rem
+}
+h6 {
+  font-size:1rem
+}
 form {
   margin:0
 }
@@ -590,6 +617,140 @@ img,svg,video {
 .card-footer {
   padding:1rem
 }
+.bento-grid {
+  display:grid;
+  grid-template-columns:repeat(1,minmax(0,1fr));
+  gap:1.25rem
+}
+.bento-grid-2 {
+  display:grid;
+  grid-template-columns:repeat(1,minmax(0,1fr));
+  gap:1.25rem
+}
+.bento-grid-3 {
+  display:grid;
+  grid-template-columns:repeat(1,minmax(0,1fr));
+  gap:1.25rem
+}
+.bento-grid-4 {
+  display:grid;
+  grid-template-columns:repeat(1,minmax(0,1fr));
+  gap:1.25rem
+}
+@media(min-width:48rem) {
+  .bento-grid {
+    grid-template-columns:repeat(3,minmax(0,1fr))
+  }
+  .bento-grid-2 {
+    grid-template-columns:repeat(2,minmax(0,1fr))
+  }
+  .bento-grid-3 {
+    grid-template-columns:repeat(3,minmax(0,1fr))
+  }
+  .bento-grid-4 {
+    grid-template-columns:repeat(4,minmax(0,1fr))
+  }
+}
+.bento-card {
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  justify-content:space-between;
+  overflow:hidden;
+  background:var(--aksara-surface);
+  color:var(--aksara-text-body);
+  border:1px solid var(--aksara-border-subtle);
+  border-radius:var(--aksara-radius-2xl);
+  padding:1.5rem;
+  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease
+}
+.bento-card:hover {
+  box-shadow:var(--aksara-shadow-md);
+  border-color:var(--aksara-border);
+  transform:translateY(-2px)
+}
+.bento-col-1 {
+  grid-column:span 1/span 1
+}
+.bento-col-2 {
+  grid-column:span 1/span 1
+}
+.bento-col-3 {
+  grid-column:span 1/span 1
+}
+.bento-col-4 {
+  grid-column:span 1/span 1
+}
+.bento-row-1 {
+  grid-row:span 1/span 1
+}
+.bento-row-2 {
+  grid-row:span 1/span 1
+}
+.bento-row-3 {
+  grid-row:span 1/span 1
+}
+@media(min-width:48rem) {
+  .bento-col-2 {
+    grid-column:span 2/span 2
+  }
+  .bento-col-3 {
+    grid-column:span 3/span 3
+  }
+  .bento-col-4 {
+    grid-column:span 4/span 4
+  }
+  .bento-row-2 {
+    grid-row:span 2/span 2
+  }
+  .bento-row-3 {
+    grid-row:span 3/span 3
+  }
+}
+.bento-featured {
+  background:linear-gradient(135deg,var(--aksara-surface),var(--aksara-bg-subtle));
+  border-color:rgb(var(--aksara-primary)/.35);
+  box-shadow:0 0 30px rgb(var(--aksara-primary)/.08)
+}
+.bento-header {
+  display:flex;
+  align-items:flex-start;
+  justify-content:space-between;
+  gap:1rem;
+  margin-bottom:1rem
+}
+.bento-title {
+  margin:0;
+  font-size:1.25rem;
+  font-weight:700;
+  line-height:1.3
+}
+.bento-subtitle {
+  margin:.25rem 0 0;
+  font-size:.875rem;
+  color:var(--aksara-text-subtle);
+  line-height:1.4
+}
+.bento-body {
+  flex:1 1 auto
+}
+.bento-footer {
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap:1rem;
+  margin-top:1.25rem
+}
+.bento-visual {
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  border-radius:var(--aksara-radius);
+  overflow:hidden;
+  background:var(--aksara-bg-subtle);
+  margin-top:1rem;
+  min-height:120px
+}
 .alert {
   position:relative;
   padding:1rem;
@@ -695,6 +856,60 @@ img,svg,video {
   opacity:.56;
   pointer-events:none
 }
+.timeline {
+  position:relative;
+  padding:0;
+  margin:0;
+  list-style:none
+}
+.timeline::before {
+  content:"";
+  position:absolute;
+  inset-block:0;
+  inset-inline-start:.875rem;
+  width:2px;
+  background:var(--aksara-border-subtle)
+}
+.timeline-item {
+  position:relative;
+  display:flex;
+  gap:1rem;
+  margin-bottom:1.5rem
+}
+.timeline-item:last-child {
+  margin-bottom:0
+}
+.timeline-point {
+  position:relative;
+  z-index:1;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  width:1.75rem;
+  height:1.75rem;
+  border-radius:9999px;
+  background:var(--aksara-surface);
+  border:2px solid rgb(var(--aksara-primary));
+  color:rgb(var(--aksara-primary));
+  flex-shrink:0;
+  box-shadow:0 0 0 3px var(--aksara-surface)
+}
+.timeline-content {
+  flex:1 1 auto;
+  padding-top:.125rem
+}
+.timeline-title {
+  margin:0 0 .25rem;
+  font-size:1rem;
+  font-weight:700;
+  line-height:1.3
+}
+.timeline-time {
+  display:block;
+  font-size:.75rem;
+  color:var(--aksara-text-subtle);
+  margin-bottom:.5rem
+}
 .navbar {
   display:flex;
   align-items:center;
@@ -955,6 +1170,15 @@ img,svg,video {
   padding:1rem;
   border-block-end:1px solid var(--aksara-border-subtle)
 }
+.modal-title {
+  margin-block-start:0;
+  margin-block-end:0;
+  margin-inline-start:0;
+  margin-inline-end:0;
+  font-size:1.25rem;
+  font-weight:600;
+  line-height:1.5
+}
 .modal-body {
   min-height:0;
   overflow:auto;
@@ -1817,6 +2041,15 @@ img,svg,video {
   background:currentColor;
   opacity:.16
 }
+.placeholder-xs {
+  min-height:.6em
+}
+.placeholder-sm {
+  min-height:.8em
+}
+.placeholder-lg {
+  min-height:1.2em
+}
 .placeholder-glow {
   animation:aksara-pulse 1.5s ease-in-out infinite
 }
@@ -1832,6 +2065,40 @@ img,svg,video {
   background:linear-gradient(90deg,transparent,var(--aksara-placeholder-shine),transparent);
   animation:aksara-placeholder-wave 1.6s linear infinite
 }
+.skeleton {
+  display:block;
+  background:var(--aksara-bg-subtle);
+  border-radius:var(--aksara-radius-sm);
+  position:relative;
+  overflow:hidden;
+  animation:aksara-pulse 1.5s ease-in-out infinite
+}
+.skeleton-text {
+  height:.875rem;
+  margin-bottom:.5rem;
+  border-radius:var(--aksara-radius-2xs);
+  width:100%
+}
+.skeleton-circle {
+  border-radius:9999px;
+  flex-shrink:0
+}
+.skeleton-rect {
+  width:100%;
+  height:100%
+}
+.skeleton-wave {
+  position:relative;
+  overflow:hidden
+}
+.skeleton-wave::after {
+  position:absolute;
+  inset:0;
+  content:"";
+  transform:translateX(-100%);
+  background:linear-gradient(90deg,transparent,var(--aksara-placeholder-shine),transparent);
+  animation:aksara-placeholder-wave 1.6s linear infinite
+}
 .carousel {
   position:relative;
   overflow:hidden
@@ -5041,6 +5308,9 @@ img,svg,video {
 .ring-primary {
   --aksara-ring-color:rgb(var(--aksara-primary) / 1)
 }
+.accent-primary {
+  accent-color:rgb(var(--aksara-primary) / 1)
+}
 .bg-secondary\/0 {
   background-color:rgb(var(--aksara-secondary) / 0)
 }
@@ -6571,6 +6841,9 @@ img,svg,video {
 .ring-secondary {
   --aksara-ring-color:rgb(var(--aksara-secondary) / 1)
 }
+.accent-secondary {
+  accent-color:rgb(var(--aksara-secondary) / 1)
+}
 .bg-success\/0 {
   background-color:rgb(var(--aksara-success) / 0)
 }
@@ -8101,6 +8374,9 @@ img,svg,video {
 .ring-success {
   --aksara-ring-color:rgb(var(--aksara-success) / 1)
 }
+.accent-success {
+  accent-color:rgb(var(--aksara-success) / 1)
+}
 .bg-danger\/0 {
   background-color:rgb(var(--aksara-danger) / 0)
 }
@@ -9631,6 +9907,9 @@ img,svg,video {
 .ring-danger {
   --aksara-ring-color:rgb(var(--aksara-danger) / 1)
 }
+.accent-danger {
+  accent-color:rgb(var(--aksara-danger) / 1)
+}
 .bg-warning\/0 {
   background-color:rgb(var(--aksara-warning) / 0)
 }
@@ -11161,6 +11440,9 @@ img,svg,video {
 .ring-warning {
   --aksara-ring-color:rgb(var(--aksara-warning) / 1)
 }
+.accent-warning {
+  accent-color:rgb(var(--aksara-warning) / 1)
+}
 .bg-info\/0 {
   background-color:rgb(var(--aksara-info) / 0)
 }
@@ -12691,6 +12973,9 @@ img,svg,video {
 .ring-info {
   --aksara-ring-color:rgb(var(--aksara-info) / 1)
 }
+.accent-info {
+  accent-color:rgb(var(--aksara-info) / 1)
+}
 .bg-dark\/0 {
   background-color:rgb(var(--aksara-dark) / 0)
 }
@@ -14221,6 +14506,9 @@ img,svg,video {
 .ring-dark {
   --aksara-ring-color:rgb(var(--aksara-dark) / 1)
 }
+.accent-dark {
+  accent-color:rgb(var(--aksara-dark) / 1)
+}
 .bg-light\/0 {
   background-color:rgb(var(--aksara-light) / 0)
 }
@@ -15751,6 +16039,12 @@ img,svg,video {
 .ring-light {
   --aksara-ring-color:rgb(var(--aksara-light) / 1)
 }
+.accent-light {
+  accent-color:rgb(var(--aksara-light) / 1)
+}
+.accent-auto {
+  accent-color:auto
+}
 .bg-body {
   background-color:var(--aksara-bg-body)
 }
@@ -23222,6 +23516,18 @@ img,svg,video {
   text-overflow:ellipsis;
   white-space:nowrap
 }
+.text-balance {
+  text-wrap:balance
+}
+.text-pretty {
+  text-wrap:pretty
+}
+.text-wrap {
+  text-wrap:wrap
+}
+.text-nowrap {
+  text-wrap:nowrap
+}
 .leading-none {
   line-height:1
 }
@@ -23279,6 +23585,18 @@ img,svg,video {
 .font-900 {
   font-weight:900
 }
+.font-sans {
+  font-family:Ubuntu,Inter,ui-sans-serif,system-ui,-apple-system,sans-serif
+}
+.font-serif {
+  font-family:ui-serif,Georgia,Cambria,serif
+}
+.font-mono {
+  font-family:var(--docs-font-mono,ui-monospace,SFMono-Regular,Menlo,monospace)
+}
+.font-monospace {
+  font-family:var(--docs-font-mono,ui-monospace,SFMono-Regular,Menlo,monospace)
+}
 .font-thin {
   font-weight:100
 }
@@ -23864,9 +24182,85 @@ img,svg,video {
 .animate-pulse {
   animation:aksara-pulse 1.5s ease-in-out infinite
 }
+.backdrop-blur-none {
+  backdrop-filter:blur(0)
+}
+.backdrop-blur-sm {
+  backdrop-filter:blur(4px)
+}
+.backdrop-blur {
+  backdrop-filter:blur(8px)
+}
+.backdrop-blur-md {
+  backdrop-filter:blur(12px)
+}
+.backdrop-blur-lg {
+  backdrop-filter:blur(16px)
+}
+.backdrop-blur-xl {
+  backdrop-filter:blur(24px)
+}
+.backdrop-blur-2xl {
+  backdrop-filter:blur(40px)
+}
+.backdrop-saturate-50 {
+  backdrop-filter:saturate(50%)
+}
+.backdrop-saturate-100 {
+  backdrop-filter:saturate(100%)
+}
+.backdrop-saturate-150 {
+  backdrop-filter:saturate(150%)
+}
+.backdrop-saturate-200 {
+  backdrop-filter:saturate(200%)
+}
+.blur-none {
+  filter:blur(0)
+}
+.blur-sm {
+  filter:blur(4px)
+}
+.blur {
+  filter:blur(8px)
+}
+.blur-md {
+  filter:blur(12px)
+}
+.blur-lg {
+  filter:blur(16px)
+}
+.blur-xl {
+  filter:blur(24px)
+}
+.scrollbar-none {
+  scrollbar-width:none;
+  -ms-overflow-style:none
+}
+.scrollbar-thin {
+  scrollbar-width:thin
+}
+.container-inline {
+  container-type:inline-size
+}
+.container-normal {
+  container-type:normal
+}
+.\@container {
+  container-type:inline-size
+}
+.scrollbar-none::-webkit-scrollbar {
+  display:none
+}
+.duration-75 {
+  transition-duration:75ms
+}
 .duration-100 {
   transition-duration:100ms
 }
+.duration-150 {
+  transition-duration:150ms
+}
 .duration-200 {
   transition-duration:200ms
 }
@@ -33433,39 +33827,6 @@ img,svg,video {
 .hover\:bg-primary\/80:hover {
   background-color:rgb(var(--aksara-primary) / 0.8)
 }
-.translate-y-\[-1px\] {
-  transform:translateY(-1px)
-}
-.hover\:translate-y-\[-1px\]:hover {
-  transform:translateY(-1px)
-}
-.translate-y-\[-2px\] {
-  transform:translateY(-2px)
-}
-.hover\:translate-y-\[-2px\]:hover {
-  transform:translateY(-2px)
-}
-.hover\:translate-y-\[-2px\]:hover {
-  transform:translateY(-2px)
-}
-.hover\:translate-y-\[-1px\]:hover {
-  transform:translateY(-1px)
-}
-.hover\:translate-y-\[-2px\]:hover {
-  transform:translateY(-2px)
-}
-.hover\:translate-y-\[-2px\]:hover {
-  transform:translateY(-2px)
-}
-.hover\:translate-y-\[-1px\]:hover {
-  transform:translateY(-1px)
-}
-.hover\:translate-y-\[-2px\]:hover {
-  transform:translateY(-2px)
-}
-.hover\:translate-y-\[-2px\]:hover {
-  transform:translateY(-2px)
-}
 .translate-x-\[-50\%\] {
   transform:translateX(-50%)
 }
@@ -33494,6 +33855,9 @@ img,svg,video {
 .mx-\[-1rem\] {
   margin-inline:-1rem !important
 }
+.translate-y-\[-2px\] {
+  transform:translateY(-2px)
+}
 .hover\:translate-y-\[-2px\]:hover {
   transform:translateY(-2px)
 }

package/dist/aksara.d.ts

@@ -272,6 +272,10 @@ export interface AksaraNamespace {
         target?: TargetElements;
         selector?: TargetElements;
     }), options?: OffcanvasOptions): Offcanvas;
+    setTheme(theme: "light" | "dark" | "system"): "light" | "dark" | "system";
+    getTheme(): "light" | "dark" | "system";
+    initTheme(): "light" | "dark" | "system";
+    clipboard(target: string | HTMLElement, text?: string): Promise<boolean>;
     init(root?: ParentNode | Document | HTMLElement): AksaraNamespace;
     destroy(): AksaraNamespace;
 }