@a4ui/core 0.2.0 → 0.3.1

package/dist/styles.css

@@ -18,11 +18,11 @@
   --muted-foreground: 215 25% 75%;
   --border: 217 30% 22%;
   --input: 217 30% 22%;
-  --primary: 217 91% 60%;
+  --primary: 217 91% 52%;
   --primary-foreground: 0 0% 100%;
   --accent: 199 89% 55%;
   --accent-foreground: 0 0% 100%;
-  --ring: 217 91% 60%;
+  --ring: 217 91% 52%;
   --destructive: 0 72% 55%;
   --destructive-foreground: 0 0% 100%;
 
@@ -54,11 +54,11 @@
   --muted-foreground: 215 22% 38%;
   --border: 214 24% 84%;
   --input: 214 32% 91%;
-  --primary: 217 91% 55%;
+  --primary: 217 91% 52%;
   --primary-foreground: 0 0% 100%;
   --accent: 199 89% 48%;
   --accent-foreground: 0 0% 100%;
-  --ring: 217 91% 55%;
+  --ring: 217 91% 52%;
   --destructive: 0 72% 51%;
   --destructive-foreground: 0 0% 100%;
 }
@@ -75,57 +75,127 @@ body {
 
 /* Route/page cross-fade (AppShell wraps routed content in a <Transition>). */
 .page-enter-active,
-.page-exit-active { transition: opacity 0.16s ease-out; }
+.page-exit-active {
+  transition: opacity 0.16s ease-out;
+}
 .page-enter,
-.page-exit-to { opacity: 0; }
+.page-exit-to {
+  opacity: 0;
+}
 
 /* Modal — MUST be @keyframes (Kobalte Dialog presence listens for
    animationend, not transitionend, or the exit never resolves). */
-@keyframes modal-overlay-in { from { opacity: 0; } to { opacity: 1; } }
-@keyframes modal-overlay-out { from { opacity: 1; } to { opacity: 0; } }
+@keyframes modal-overlay-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes modal-overlay-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
 @keyframes modal-content-in {
-  from { opacity: 0; transform: scale(0.96) translateY(4px); }
-  to { opacity: 1; transform: scale(1) translateY(0); }
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
 }
 @keyframes modal-content-out {
-  from { opacity: 1; transform: scale(1) translateY(0); }
-  to { opacity: 0; transform: scale(0.96) translateY(4px); }
+  from {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96) translateY(4px);
+  }
+}
+.modal-overlay[data-expanded] {
+  animation: modal-overlay-in 0.15s ease-out;
+}
+.modal-overlay[data-closed] {
+  animation: modal-overlay-out 0.15s ease-in;
+}
+.modal-content[data-expanded] {
+  animation: modal-content-in 0.18s ease-out;
+}
+.modal-content[data-closed] {
+  animation: modal-content-out 0.15s ease-in;
 }
-.modal-overlay[data-expanded] { animation: modal-overlay-in 0.15s ease-out; }
-.modal-overlay[data-closed] { animation: modal-overlay-out 0.15s ease-in; }
-.modal-content[data-expanded] { animation: modal-content-in 0.18s ease-out; }
-.modal-content[data-closed] { animation: modal-content-out 0.15s ease-in; }
 
 /* Toast — same animationend-only presence mechanism as Dialog. */
 @keyframes toast-in {
-  from { opacity: 0; transform: translateX(16px); }
-  to { opacity: 1; transform: translateX(0); }
+  from {
+    opacity: 0;
+    transform: translateX(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 @keyframes toast-out {
-  from { opacity: 1; transform: translateX(0); }
-  to { opacity: 0; transform: translateX(16px); }
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(16px);
+  }
+}
+.toast-item[data-opened] {
+  animation: toast-in 0.2s ease-out;
+}
+.toast-item[data-closed] {
+  animation: toast-out 0.18s ease-in;
 }
-.toast-item[data-opened] { animation: toast-in 0.2s ease-out; }
-.toast-item[data-closed] { animation: toast-out 0.18s ease-in; }
 
 /* Table row enter/exit fade. */
 .row-enter-active,
-.row-exit-active { transition: opacity 0.15s ease-out; }
+.row-exit-active {
+  transition: opacity 0.15s ease-out;
+}
 .row-enter,
-.row-exit-to { opacity: 0; }
+.row-exit-to {
+  opacity: 0;
+}
 
 /* Drawer / Modal drawer-variant slide-over (Kobalte Dialog presence →
    animationend keyframes, keyed off data-expanded/data-closed like Modal). */
 @keyframes drawer-in {
-  from { transform: translateX(100%); }
-  to { transform: translateX(0); }
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
 }
 @keyframes drawer-out {
-  from { transform: translateX(0); }
-  to { transform: translateX(100%); }
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+.drawer-content[data-expanded] {
+  animation: drawer-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.drawer-content[data-closed] {
+  animation: drawer-out 0.2s ease-in;
 }
-.drawer-content[data-expanded] { animation: drawer-in 0.28s cubic-bezier(0.16, 1, 0.3, 1); }
-.drawer-content[data-closed] { animation: drawer-out 0.2s ease-in; }
 
 /* Reduced motion: resolve near-instantly rather than removing outright, so
    libraries that gate DOM unmount on transitionend/animationend (Kobalte
@@ -149,56 +219,114 @@ body {
  * content at z-index >= 10 (AppShell already does this). Bundled into
  * `a4ui/styles.css` after the component surfaces. */
 
-#space { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
+#space {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
 
 #space .sky {
-  position: absolute; inset: 0;
+  position: absolute;
+  inset: 0;
   background:
-    radial-gradient(1200px 700px at 82% -8%, hsl(217 91% 60% / .34), transparent 60%),
-    radial-gradient(900px 600px at 8% 12%, hsl(275 80% 55% / .28), transparent 60%),
-    radial-gradient(1000px 800px at 50% 120%, hsl(199 89% 55% / .24), transparent 55%),
-    radial-gradient(700px 500px at 30% 55%, hsl(330 80% 55% / .14), transparent 60%),
-    hsl(var(--background));
+    radial-gradient(1200px 700px at 82% -8%, hsl(217 91% 60% / 0.34), transparent 60%),
+    radial-gradient(900px 600px at 8% 12%, hsl(275 80% 55% / 0.28), transparent 60%),
+    radial-gradient(1000px 800px at 50% 120%, hsl(199 89% 55% / 0.24), transparent 55%),
+    radial-gradient(700px 500px at 30% 55%, hsl(330 80% 55% / 0.14), transparent 60%), hsl(var(--background));
 }
 [data-theme='light'] #space .sky {
   background:
-    radial-gradient(1100px 680px at 84% -10%, hsl(38 95% 70% / .38), transparent 60%),
-    radial-gradient(900px 600px at 6% 8%, hsl(217 91% 70% / .32), transparent 60%),
-    radial-gradient(1000px 820px at 50% 120%, hsl(275 70% 75% / .26), transparent 55%),
-    radial-gradient(700px 500px at 30% 55%, hsl(340 85% 70% / .18), transparent 60%),
-    hsl(var(--background));
+    radial-gradient(1100px 680px at 84% -10%, hsl(38 95% 70% / 0.38), transparent 60%),
+    radial-gradient(900px 600px at 6% 8%, hsl(217 91% 70% / 0.32), transparent 60%),
+    radial-gradient(1000px 820px at 50% 120%, hsl(275 70% 75% / 0.26), transparent 55%),
+    radial-gradient(700px 500px at 30% 55%, hsl(340 85% 70% / 0.18), transparent 60%), hsl(var(--background));
+}
+@keyframes nebulaShift {
+  0%,
+  100% {
+    filter: hue-rotate(0deg);
+  }
+  50% {
+    filter: hue-rotate(18deg);
+  }
 }
-@keyframes nebulaShift { 0%, 100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(18deg); } }
 
 /* Aurora — dark theme only */
 #space .aurora {
-  position: absolute; top: -10%; left: -10%; right: -10%; height: 46%;
-  background: linear-gradient(180deg, hsl(160 84% 45% / .16), hsl(199 89% 55% / .10) 45%, transparent 80%);
-  filter: blur(40px); opacity: .55; mix-blend-mode: screen;
+  position: absolute;
+  top: -10%;
+  left: -10%;
+  right: -10%;
+  height: 46%;
+  background: linear-gradient(180deg, hsl(160 84% 45% / 0.16), hsl(199 89% 55% / 0.1) 45%, transparent 80%);
+  filter: blur(40px);
+  opacity: 0.55;
+  mix-blend-mode: screen;
+}
+[data-theme='light'] #space .aurora {
+  display: none;
+}
+@keyframes auroraSway {
+  0%,
+  100% {
+    transform: translateX(-2%) scaleY(1);
+    opacity: 0.5;
+  }
+  50% {
+    transform: translateX(3%) scaleY(1.08);
+    opacity: 0.68;
+  }
 }
-[data-theme='light'] #space .aurora { display: none; }
-@keyframes auroraSway { 0%,100% { transform: translateX(-2%) scaleY(1); opacity: .5; } 50% { transform: translateX(3%) scaleY(1.08); opacity: .68; } }
 
 /* Randomized starfield — each star is generated in SpaceBackground.tsx with a
    random position/size/brightness/bloom, so there's no visible tiling pattern.
    Static (no drift): moving the field behind the frosted cards re-blurs every
    frame and felt laggy; a subset twinkles for life instead. */
-#space #starfield { position: absolute; inset: 0; }
-[data-theme='light'] #space #starfield { opacity: 0.85; }
+#space #starfield {
+  position: absolute;
+  inset: 0;
+}
+[data-theme='light'] #space #starfield {
+  opacity: 0.85;
+}
 /* A few stars drift smoothly like the satellite: each is a tiny element moving
    via its own transform (GPU-composited, cheap), NOT the whole field. Uses
    `alternate` so it eases out and back with no loop jump. Per-star --dx/--dy. */
-@keyframes starDrift { from { transform: translate(0, 0); } to { transform: translate(var(--dx, 0), var(--dy, 0)); } }
+@keyframes starDrift {
+  from {
+    transform: translate(0, 0);
+  }
+  to {
+    transform: translate(var(--dx, 0), var(--dy, 0));
+  }
+}
 
 /* Rocket exhaust flame (custom SVG rocket in SpaceBackground.tsx) — flickers. */
-.rk-flame { transform-box: fill-box; transform-origin: 50% 0%; animation: rocketFlame 0.12s ease-in-out infinite alternate; }
-@keyframes rocketFlame { from { transform: scaleY(0.8); opacity: 0.85; } to { transform: scaleY(1.06); opacity: 1; } }
+.rk-flame {
+  transform-box: fill-box;
+  transform-origin: 50% 0%;
+  animation: rocketFlame 0.12s ease-in-out infinite alternate;
+}
+@keyframes rocketFlame {
+  from {
+    transform: scaleY(0.8);
+    opacity: 0.85;
+  }
+  to {
+    transform: scaleY(1.06);
+    opacity: 1;
+  }
+}
 
 /* Legacy tiled star layers (kept for parity; the current SpaceBackground scatters
    individual stars into #starfield instead). Sized generously: small dots nearly
    vanish under backdrop-filter blur, so keep them >= 2.5px. */
 #space .stars {
-  position: absolute; inset: -50%; background-repeat: repeat;
+  position: absolute;
+  inset: -50%;
+  background-repeat: repeat;
   background-image:
     radial-gradient(4px 4px at 20px 30px, hsl(var(--foreground)), transparent),
     radial-gradient(3.6px 3.6px at 120px 90px, hsl(var(--foreground)), transparent),
@@ -207,7 +335,9 @@ body {
     radial-gradient(3.4px 3.4px at 380px 220px, hsl(330 80% 84%), transparent),
     radial-gradient(3px 3px at 90px 190px, hsl(var(--foreground)), transparent),
     radial-gradient(2.8px 2.8px at 260px 250px, hsl(48 90% 82%), transparent);
-  background-size: 420px 300px; opacity: 1; animation: drift 140s linear infinite;
+  background-size: 420px 300px;
+  opacity: 1;
+  animation: drift 140s linear infinite;
 }
 [data-theme='light'] #space .stars {
   background-image:
@@ -219,9 +349,15 @@ body {
     radial-gradient(3px 3px at 90px 190px, hsl(40 90% 50%), transparent),
     radial-gradient(2.8px 2.8px at 260px 250px, hsl(48 90% 52%), transparent);
 }
-#space .stars.s2 { background-size: 640px 480px; opacity: .85; animation-duration: 200s; }
+#space .stars.s2 {
+  background-size: 640px 480px;
+  opacity: 0.85;
+  animation-duration: 200s;
+}
 #space .stars.s3 {
-  background-size: 260px 190px; opacity: 1; animation-duration: 95s;
+  background-size: 260px 190px;
+  opacity: 1;
+  animation-duration: 95s;
   background-image:
     radial-gradient(6px 6px at 40px 50px, hsl(var(--foreground)), transparent),
     radial-gradient(5.6px 5.6px at 160px 130px, hsl(199 89% 85%), transparent),
@@ -229,77 +365,190 @@ body {
     radial-gradient(5px 5px at 90px 20px, hsl(330 85% 85%), transparent);
 }
 [data-theme='light'] #space .stars.s3 {
-  opacity: .8;
+  opacity: 0.8;
   background-image:
     radial-gradient(6px 6px at 40px 50px, hsl(38 92% 50%), transparent),
     radial-gradient(5.6px 5.6px at 160px 130px, hsl(45 95% 54%), transparent),
     radial-gradient(5.8px 5.8px at 250px 40px, hsl(30 88% 48%), transparent),
     radial-gradient(5px 5px at 90px 20px, hsl(50 92% 55%), transparent);
 }
-@keyframes drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-420px,-300px,0); } }
+@keyframes drift {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    transform: translate3d(-420px, -300px, 0);
+  }
+}
 
 /* Individually-placed twinkling stars */
 .twinkle {
-  position: absolute; width: 5px; height: 5px; border-radius: 50%;
-  background: hsl(var(--foreground)); box-shadow: 0 0 14px 3px hsl(var(--foreground) / .9);
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: hsl(var(--foreground));
+  box-shadow: 0 0 14px 3px hsl(var(--foreground) / 0.9);
   animation: twinkle 3.2s ease-in-out infinite;
 }
-[data-theme='light'] .twinkle { background: hsl(40 92% 50%); box-shadow: 0 0 14px 3px hsl(40 92% 50% / .85); }
-@keyframes twinkle { 0%,100% { opacity: .25; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.15); } }
+[data-theme='light'] .twinkle {
+  background: hsl(40 92% 50%);
+  box-shadow: 0 0 14px 3px hsl(40 92% 50% / 0.85);
+}
+@keyframes twinkle {
+  0%,
+  100% {
+    opacity: 0.25;
+    transform: scale(0.6);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.15);
+  }
+}
 
 /* Constellations — thin line art connecting a handful of stars */
-#space .constellation { position: absolute; opacity: 1; }
-[data-theme='light'] #space .constellation { opacity: .6; }
-[data-theme='light'] #space .constellation .cline { stroke: hsl(38 92% 50%) !important; }
-[data-theme='light'] #space .constellation .cdot { fill: hsl(222 47% 20%) !important; }
+#space .constellation {
+  position: absolute;
+  opacity: 1;
+}
+[data-theme='light'] #space .constellation {
+  opacity: 0.6;
+}
+[data-theme='light'] #space .constellation .cline {
+  stroke: hsl(38 92% 50%) !important;
+}
+[data-theme='light'] #space .constellation .cdot {
+  fill: hsl(222 47% 20%) !important;
+}
 
 /* Planets / moons — decorative, corner-anchored, gentle float */
-.planet { border-radius: 50%; }
+.planet {
+  border-radius: 50%;
+}
 .planet::after {
-  content: ''; position: absolute; inset: -34% -55%; border-radius: 50%;
-  border: 3px solid hsl(var(--foreground) / .18); transform: rotate(-24deg);
+  content: '';
+  position: absolute;
+  inset: -34% -55%;
+  border-radius: 50%;
+  border: 3px solid hsl(var(--foreground) / 0.18);
+  transform: rotate(-24deg);
+}
+.planet-glow {
+  border-radius: 50%;
+  filter: blur(2px);
+}
+@keyframes floaty {
+  0%,
+  100% {
+    transform: translateY(0) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-14px) rotate(4deg);
+  }
+}
+.floaty {
+  animation: floaty 12s ease-in-out infinite;
+}
+.floaty.slow {
+  animation-duration: 18s;
 }
-.planet-glow { border-radius: 50%; filter: blur(2px); }
-@keyframes floaty { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(4deg); } }
-.floaty { animation: floaty 12s ease-in-out infinite; }
-.floaty.slow { animation-duration: 18s; }
 
 /* Asteroid belt (small drifting rocks) */
-.asteroid { border-radius: 40% 55% 50% 45%; background: hsl(var(--foreground) / .35); }
-@keyframes asteroidDrift { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(-8px,6px) rotate(25deg); } }
+.asteroid {
+  border-radius: 40% 55% 50% 45%;
+  background: hsl(var(--foreground) / 0.35);
+}
+@keyframes asteroidDrift {
+  0%,
+  100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  50% {
+    transform: translate(-8px, 6px) rotate(25deg);
+  }
+}
 
 /* Shooting star — bright core + tapered glowing trail */
 .shooter {
-  position: absolute; height: 2.5px; border-radius: 999px; transform-origin: left center;
-  background: linear-gradient(90deg, hsla(0,0%,100%,0) 0%, hsla(199,90%,85%,.55) 55%, hsla(0,0%,100%,.98) 100%);
-  filter: blur(.2px) drop-shadow(0 0 3px hsla(199,90%,80%,.5));
+  position: absolute;
+  height: 2.5px;
+  border-radius: 999px;
+  transform-origin: left center;
+  background: linear-gradient(
+    90deg,
+    hsla(0, 0%, 100%, 0) 0%,
+    hsla(199, 90%, 85%, 0.55) 55%,
+    hsla(0, 0%, 100%, 0.98) 100%
+  );
+  filter: blur(0.2px) drop-shadow(0 0 3px hsla(199, 90%, 80%, 0.5));
 }
 .shooter::before {
-  content: ''; position: absolute; right: -2px; top: 50%; width: 6px; height: 6px; border-radius: 50%;
-  transform: translateY(-50%); background: radial-gradient(circle, #fff 0%, hsla(199,95%,88%,.95) 50%, transparent 75%);
-  box-shadow: 0 0 8px 2px #fff, 0 0 20px 7px hsla(199,90%,75%,.85), 0 0 38px 14px hsla(199,90%,60%,.4);
+  content: '';
+  position: absolute;
+  right: -2px;
+  top: 50%;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  transform: translateY(-50%);
+  background: radial-gradient(circle, #fff 0%, hsla(199, 95%, 88%, 0.95) 50%, transparent 75%);
+  box-shadow:
+    0 0 8px 2px #fff,
+    0 0 20px 7px hsla(199, 90%, 75%, 0.85),
+    0 0 38px 14px hsla(199, 90%, 60%, 0.4);
 }
 .shooter::after {
-  content: ''; position: absolute; left: 0; top: 50%; width: 55%; height: 1px; transform: translateY(-50%);
-  background: hsla(199,85%,92%,.65); filter: blur(2px);
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  width: 55%;
+  height: 1px;
+  transform: translateY(-50%);
+  background: hsla(199, 85%, 92%, 0.65);
+  filter: blur(2px);
 }
 
 /* Satellite (drifting glyph, e.g. a lucide "satellite" icon) */
-@keyframes satelliteDrift { from { transform: translate(0,0) rotate(-18deg); } to { transform: translate(126vw, 34vh) rotate(-18deg); } }
-#satellite { animation: satelliteDrift 46s linear infinite; }
+@keyframes satelliteDrift {
+  from {
+    transform: translate(0, 0) rotate(-18deg);
+  }
+  to {
+    transform: translate(126vw, 34vh) rotate(-18deg);
+  }
+}
+#satellite {
+  animation: satelliteDrift 46s linear infinite;
+}
 
 /* Cursor-following ambient glow (nebula that trails the pointer) */
 #cursorGlow {
-  border-radius: 50%; transform: translate(-50%,-50%);
-  background: radial-gradient(circle, hsl(217 91% 60% / .10), transparent 70%);
-  opacity: 0; transition: opacity .4s ease;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  background: radial-gradient(circle, hsl(217 91% 60% / 0.1), transparent 70%);
+  opacity: 0;
+  transition: opacity 0.4s ease;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  html:not(.force-motion) #space .stars, html:not(.force-motion) .twinkle,
-  html:not(.force-motion) .floaty, html:not(.force-motion) .shooter,
-  html:not(.force-motion) #satellite, html:not(.force-motion) .asteroid { animation: none !important; }
-  html:not(.force-motion) #cursorGlow { display: none !important; }
-  html:not(.force-motion) #space .sky, html:not(.force-motion) #space .aurora { animation: none !important; }
-  .card.glow-edge::before { display: none; }
+  html:not(.force-motion) #space .stars,
+  html:not(.force-motion) .twinkle,
+  html:not(.force-motion) .floaty,
+  html:not(.force-motion) .shooter,
+  html:not(.force-motion) #satellite,
+  html:not(.force-motion) .asteroid {
+    animation: none !important;
+  }
+  html:not(.force-motion) #cursorGlow {
+    display: none !important;
+  }
+  html:not(.force-motion) #space .sky,
+  html:not(.force-motion) #space .aurora {
+    animation: none !important;
+  }
+  .card.glow-edge::before {
+    display: none;
+  }
 }

package/dist/ui/Accordion.d.ts

@@ -1,13 +1,32 @@
 import { JSX } from 'solid-js';
+/** A single collapsible section rendered by {@link Accordion}. */
 export interface AccordionItem {
+    /** Unique identifier for the item; used to track expanded state. */
     value: string;
+    /** Text shown in the trigger row. */
     title: string;
+    /** Content revealed when the item is expanded. */
     content: JSX.Element;
 }
 interface AccordionProps {
     items: AccordionItem[];
+    /** Allow more than one item to be expanded at the same time. Defaults to `false` (single-open). */
     multiple?: boolean;
     class?: string;
 }
+/**
+ * Accessible, collapsible list of sections built on Kobalte's `Accordion` primitive.
+ * Each entry in `items` renders as a header/trigger row plus a content panel.
+ *
+ * @example
+ * ```tsx
+ * <Accordion
+ *   items={[
+ *     { value: 'a', title: 'What is A4ui?', content: <p>A SolidJS design system.</p> },
+ *     { value: 'b', title: 'How do I install it?', content: <p>npm install a4ui</p> },
+ *   ]}
+ * />
+ * ```
+ */
 export declare function Accordion(props: AccordionProps): JSX.Element;
 export {};

package/dist/ui/Alert.d.ts

@@ -1,9 +1,23 @@
 import { JSX, ParentProps } from 'solid-js';
+/** Semantic tone of an {@link Alert}; drives the border/background tint and icon. */
 export type AlertTone = 'info' | 'success' | 'warning' | 'danger';
 interface AlertProps extends ParentProps {
+    /** Visual/semantic tone. Defaults to `'info'`. */
     tone?: AlertTone;
+    /** Optional bold heading shown above the body text. */
     title?: string;
     class?: string;
 }
+/**
+ * Inline status banner (not a toast/dialog) built on Kobalte's `Alert` primitive,
+ * for surfacing info/success/warning/danger messages inline in the page.
+ *
+ * @example
+ * ```tsx
+ * <Alert tone="warning" title="Heads up">
+ *   Your session will expire in 5 minutes.
+ * </Alert>
+ * ```
+ */
 export declare function Alert(props: AlertProps): JSX.Element;
 export {};

package/dist/ui/AlertDialog.d.ts

@@ -1,9 +1,24 @@
 import { JSX, ParentProps } from 'solid-js';
 interface AlertDialogProps extends ParentProps {
+    /** Whether the dialog is currently visible. */
     open: boolean;
+    /** Called when the dialog requests to open/close (overlay click, Escape, etc). */
     onOpenChange: (open: boolean) => void;
+    /** Optional heading rendered above the description. */
     title?: string;
     class?: string;
 }
+/**
+ * Centered, focus-trapped confirmation modal built on Kobalte's `AlertDialog`
+ * primitive. Use for interruptive confirmations (e.g. "Delete this item?")
+ * rather than for general-purpose dialogs.
+ *
+ * @example
+ * ```tsx
+ * <AlertDialog open={confirmOpen()} onOpenChange={setConfirmOpen} title="Delete project?">
+ *   This action cannot be undone.
+ * </AlertDialog>
+ * ```
+ */
 export declare function AlertDialog(props: AlertDialogProps): JSX.Element;
 export {};

package/dist/ui/Avatar.d.ts

@@ -1,9 +1,20 @@
 import { JSX } from 'solid-js';
 interface AvatarProps {
+    /** Image URL. If it fails to load (or is omitted), `fallback` is shown instead. */
     src?: string;
     alt?: string;
+    /** Text shown when there is no image or it fails to load (typically initials). */
     fallback: string;
     class?: string;
 }
+/**
+ * Circular user avatar built on Kobalte's `Image` primitive; automatically
+ * falls back to initials/text when the image is missing or fails to load.
+ *
+ * @example
+ * ```tsx
+ * <Avatar src={user.avatarUrl} alt={user.name} fallback="JD" />
+ * ```
+ */
 export declare function Avatar(props: AvatarProps): JSX.Element;
 export {};