@a4ui/core 0.11.1 → 0.13.0

package/src/themes/index.ts

@@ -0,0 +1,102 @@
+// A4ui theme runtime — pick one of the built-in themes (or your own) and apply
+// its palette by injecting a single <style id="a4ui-theme"> element that
+// overrides the token variables for both dark and `[data-theme='light']`.
+//
+// This is separate from the light/dark *mode* switch in ./lib/theme (which flips
+// `data-theme` and owns `setTheme`/`applyTheme` for the scheme). A theme recolors
+// the palette underneath either mode; the two compose (pick a theme, then toggle
+// light/dark within it). Named `selectTheme`/`applyThemeDefinition` to avoid
+// clashing with the light/dark API.
+import { createSignal } from 'solid-js'
+
+import { space, TOKEN_ORDER, themes, type Palette, type ThemeDefinition } from './palettes'
+
+export type { Palette, ThemeDefinition } from './palettes'
+export { themes, space, dino, doctor, scientist, soccer, snow, christmas, TOKEN_ORDER } from './palettes'
+
+// Distinct from the light/dark mode key ('a4ui-theme' in ./lib/theme) — the two
+// persist independently, so picking a palette and toggling light/dark don't
+// clobber each other.
+const STORAGE_KEY = 'a4ui-theme-name'
+const STYLE_ID = 'a4ui-theme'
+
+const byName = (name: string): ThemeDefinition | undefined => themes.find((t) => t.name === name)
+
+/** Serialize one palette to `--token: value;` declaration lines. */
+function paletteDecls(palette: Palette): string {
+  return TOKEN_ORDER.map((k) => `  --${k}: ${palette[k]};`).join('\n')
+}
+
+/**
+ * Render a theme to the CSS you'd paste into your own stylesheet: a `:root`
+ * block (dark) plus a `:root[data-theme='light']` block. Same output the docs
+ * Theme Builder exports.
+ */
+export function themeToCss(theme: ThemeDefinition): string {
+  return (
+    `:root {\n${paletteDecls(theme.dark)}\n}\n\n` +
+    `:root[data-theme='light'] {\n${paletteDecls(theme.light)}\n}`
+  )
+}
+
+/** Render a theme's tokens to a `{ dark, light }` JSON object. */
+export function themeToJson(theme: ThemeDefinition): { dark: Palette; light: Palette } {
+  return { dark: theme.dark, light: theme.light }
+}
+
+const [activeTheme, setActiveThemeSignal] = createSignal<ThemeDefinition>(space)
+
+/** Reactive accessor for the currently applied theme. */
+export { activeTheme }
+
+/**
+ * Apply a theme's palette globally by injecting/replacing the
+ * `<style id="a4ui-theme">` element. No-op during SSR. Does not persist or update
+ * the reactive signal — use {@link selectTheme} for the full, persisted version.
+ */
+export function applyThemeDefinition(theme: ThemeDefinition): void {
+  if (typeof document === 'undefined') return
+  let el = document.getElementById(STYLE_ID) as HTMLStyleElement | null
+  if (!el) {
+    el = document.createElement('style')
+    el.id = STYLE_ID
+    document.head.appendChild(el)
+  }
+  el.textContent = themeToCss(theme)
+}
+
+/**
+ * Select the active theme by definition or name: applies it, updates the
+ * reactive {@link activeTheme} signal, and persists the choice to localStorage.
+ * Unknown names are ignored.
+ */
+export function selectTheme(theme: ThemeDefinition | string): void {
+  const def = typeof theme === 'string' ? byName(theme) : theme
+  if (!def) return
+  applyThemeDefinition(def)
+  setActiveThemeSignal(def)
+  if (typeof localStorage !== 'undefined') {
+    try {
+      localStorage.setItem(STORAGE_KEY, def.name)
+    } catch {
+      /* private mode / storage disabled — ignore */
+    }
+  }
+}
+
+/**
+ * Restore the persisted theme (or fall back to Space) and apply it. Call once at
+ * startup. No-op during SSR.
+ */
+export function initTheme(): void {
+  if (typeof document === 'undefined') return
+  let name: string | null = null
+  if (typeof localStorage !== 'undefined') {
+    try {
+      name = localStorage.getItem(STORAGE_KEY)
+    } catch {
+      name = null
+    }
+  }
+  selectTheme((name && byName(name)) || space)
+}

package/src/themes/palettes.ts

@@ -0,0 +1,368 @@
+// A4ui themes — a "theme" is pure data: the 15 color tokens for dark + light.
+// Everything else (motion, glass, fonts, radius, data colors) is theme-agnostic
+// and lives in tokens.css / the Tailwind preset, so a theme only ever recolors.
+//
+// Values are HSL channels ("H S% L%") — the same format the tokens use and what
+// `hsl(var(--x))` in the preset expects. Primary/accent lightness is kept low
+// enough that white foreground text clears WCAG AA on the solid surfaces.
+//
+// `space` is the flagship default and matches tokens.css verbatim; applying it
+// is a no-op relative to the shipped defaults. New themes override on top.
+
+/** The 15 recolorable tokens, each an "H S% L%" channel string. */
+export interface Palette {
+  background: string
+  foreground: string
+  card: string
+  'card-foreground': string
+  muted: string
+  'muted-foreground': string
+  border: string
+  input: string
+  primary: string
+  'primary-foreground': string
+  accent: string
+  'accent-foreground': string
+  ring: string
+  destructive: string
+  'destructive-foreground': string
+}
+
+/** A named theme: a label plus a dark and a light palette. */
+export interface ThemeDefinition {
+  /** URL/storage-safe slug, e.g. `space`. */
+  name: string
+  /** Human label for the picker, e.g. `Space`. */
+  label: string
+  /** One-line flavour text. */
+  description: string
+  /** Emoji shown in the theme picker. */
+  icon: string
+  dark: Palette
+  light: Palette
+  /** Motif glyphs for the generic `ThemedScenery` backdrop. Omit for themes that
+      ship their own bespoke scenery (e.g. `space` uses `SpaceBackground`). */
+  motifs?: string[]
+}
+
+// The token order used when serializing a palette to CSS/JSON.
+export const TOKEN_ORDER: (keyof Palette)[] = [
+  'background',
+  'foreground',
+  'card',
+  'card-foreground',
+  'muted',
+  'muted-foreground',
+  'border',
+  'input',
+  'primary',
+  'primary-foreground',
+  'accent',
+  'accent-foreground',
+  'ring',
+  'destructive',
+  'destructive-foreground',
+]
+
+// --- Flagship: Space (matches tokens.css exactly) ---------------------------
+export const space: ThemeDefinition = {
+  name: 'space',
+  label: 'Space',
+  description: 'The signature spatial-glass look: deep night sky and electric blue.',
+  icon: '🚀',
+  dark: {
+    background: '222 47% 7%',
+    foreground: '213 31% 91%',
+    card: '222 40% 11%',
+    'card-foreground': '213 31% 91%',
+    muted: '217 33% 17%',
+    'muted-foreground': '215 25% 75%',
+    border: '217 30% 22%',
+    input: '217 30% 22%',
+    primary: '217 91% 52%',
+    'primary-foreground': '0 0% 100%',
+    accent: '199 89% 55%',
+    'accent-foreground': '0 0% 100%',
+    ring: '217 91% 52%',
+    destructive: '0 72% 52%',
+    'destructive-foreground': '0 0% 100%',
+  },
+  light: {
+    background: '214 32% 95%',
+    foreground: '222 47% 11%',
+    card: '0 0% 100%',
+    'card-foreground': '222 47% 11%',
+    muted: '214 30% 92%',
+    'muted-foreground': '215 22% 38%',
+    border: '214 24% 84%',
+    input: '214 32% 91%',
+    primary: '217 91% 52%',
+    'primary-foreground': '0 0% 100%',
+    accent: '199 89% 48%',
+    'accent-foreground': '0 0% 100%',
+    ring: '217 91% 52%',
+    destructive: '0 72% 50%',
+    'destructive-foreground': '0 0% 100%',
+  },
+}
+
+// --- Dino: jurassic jungle — leaf green + amber -----------------------------
+export const dino: ThemeDefinition = {
+  name: 'dino',
+  label: 'Dino',
+  description: 'Jurassic jungle: mossy greens with a warm amber accent.',
+  icon: '🦖',
+  motifs: ['🦕', '🦖', '🌿', '🍃', '🦴', '🌋', '🥚', '🌴'],
+  dark: {
+    background: '160 30% 8%',
+    foreground: '140 18% 90%',
+    card: '160 28% 12%',
+    'card-foreground': '140 18% 90%',
+    muted: '160 20% 18%',
+    'muted-foreground': '140 14% 74%',
+    border: '160 20% 24%',
+    input: '160 20% 24%',
+    primary: '140 60% 32%',
+    'primary-foreground': '0 0% 100%',
+    accent: '35 90% 52%',
+    'accent-foreground': '40 45% 12%',
+    ring: '140 60% 32%',
+    destructive: '0 72% 52%',
+    'destructive-foreground': '0 0% 100%',
+  },
+  light: {
+    background: '90 32% 94%',
+    foreground: '160 32% 13%',
+    card: '80 30% 99%',
+    'card-foreground': '160 32% 13%',
+    muted: '90 24% 88%',
+    'muted-foreground': '160 18% 34%',
+    border: '90 22% 79%',
+    input: '90 24% 88%',
+    primary: '140 55% 32%',
+    'primary-foreground': '0 0% 100%',
+    accent: '35 90% 44%',
+    'accent-foreground': '40 45% 12%',
+    ring: '140 55% 32%',
+    destructive: '0 72% 48%',
+    'destructive-foreground': '0 0% 100%',
+  },
+}
+
+// --- Doctor: clinical teal + clean white ------------------------------------
+export const doctor: ThemeDefinition = {
+  name: 'doctor',
+  label: 'Doctor',
+  description: 'Clinical and calm: teal and clean blues on crisp white.',
+  icon: '🩺',
+  motifs: ['🩺', '💊', '🩹', '🧬', '➕', '🫀', '🌡️', '💉'],
+  dark: {
+    background: '205 40% 9%',
+    foreground: '200 24% 92%',
+    card: '205 36% 13%',
+    'card-foreground': '200 24% 92%',
+    muted: '205 25% 19%',
+    'muted-foreground': '200 16% 74%',
+    border: '205 22% 25%',
+    input: '205 22% 25%',
+    primary: '190 85% 32%',
+    'primary-foreground': '0 0% 100%',
+    accent: '210 90% 46%',
+    'accent-foreground': '0 0% 100%',
+    ring: '190 85% 32%',
+    destructive: '0 72% 52%',
+    'destructive-foreground': '0 0% 100%',
+  },
+  light: {
+    background: '200 40% 97%',
+    foreground: '205 45% 14%',
+    card: '0 0% 100%',
+    'card-foreground': '205 45% 14%',
+    muted: '200 30% 92%',
+    'muted-foreground': '205 20% 36%',
+    border: '200 25% 84%',
+    input: '200 30% 91%',
+    primary: '190 90% 30%',
+    'primary-foreground': '0 0% 100%',
+    accent: '210 90% 46%',
+    'accent-foreground': '0 0% 100%',
+    ring: '190 90% 30%',
+    destructive: '0 72% 48%',
+    'destructive-foreground': '0 0% 100%',
+  },
+}
+
+// --- Scientist: lab violet + cyan -------------------------------------------
+export const scientist: ThemeDefinition = {
+  name: 'scientist',
+  label: 'Scientist',
+  description: 'Lab-grade violet with a bright cyan reaction accent.',
+  icon: '🔬',
+  motifs: ['🔬', '🧪', '⚗️', '🧫', '🧠', '🔭', '🧬', '⚛️'],
+  dark: {
+    background: '250 30% 9%',
+    foreground: '250 18% 92%',
+    card: '250 28% 13%',
+    'card-foreground': '250 18% 92%',
+    muted: '250 20% 19%',
+    'muted-foreground': '250 14% 74%',
+    border: '250 18% 26%',
+    input: '250 18% 26%',
+    primary: '265 65% 52%',
+    'primary-foreground': '0 0% 100%',
+    accent: '180 80% 45%',
+    'accent-foreground': '190 45% 10%',
+    ring: '265 65% 52%',
+    destructive: '0 72% 52%',
+    'destructive-foreground': '0 0% 100%',
+  },
+  light: {
+    background: '250 40% 97%',
+    foreground: '255 42% 14%',
+    card: '0 0% 100%',
+    'card-foreground': '255 42% 14%',
+    muted: '250 30% 93%',
+    'muted-foreground': '255 18% 38%',
+    border: '250 25% 85%',
+    input: '250 30% 92%',
+    primary: '265 62% 48%',
+    'primary-foreground': '0 0% 100%',
+    accent: '185 80% 34%',
+    'accent-foreground': '0 0% 100%',
+    ring: '265 62% 48%',
+    destructive: '0 72% 48%',
+    'destructive-foreground': '0 0% 100%',
+  },
+}
+
+// --- Soccer: pitch grass + lime ---------------------------------------------
+export const soccer: ThemeDefinition = {
+  name: 'soccer',
+  label: 'Soccer',
+  description: 'Match-day pitch: vivid grass green and fresh lime.',
+  icon: '⚽',
+  motifs: ['⚽', '🥅', '🏆', '🚩', '👟', '🧤', '🟨', '🟥'],
+  dark: {
+    background: '140 35% 8%',
+    foreground: '120 14% 92%',
+    card: '140 30% 12%',
+    'card-foreground': '120 14% 92%',
+    muted: '140 22% 18%',
+    'muted-foreground': '120 12% 74%',
+    border: '140 20% 24%',
+    input: '140 20% 24%',
+    primary: '142 72% 31%',
+    'primary-foreground': '0 0% 100%',
+    accent: '90 70% 48%',
+    'accent-foreground': '100 45% 10%',
+    ring: '142 72% 31%',
+    destructive: '0 72% 52%',
+    'destructive-foreground': '0 0% 100%',
+  },
+  light: {
+    background: '120 40% 96%',
+    foreground: '140 40% 12%',
+    card: '0 0% 100%',
+    'card-foreground': '140 40% 12%',
+    muted: '120 28% 90%',
+    'muted-foreground': '140 18% 34%',
+    border: '120 22% 81%',
+    input: '120 28% 90%',
+    primary: '142 68% 31%',
+    'primary-foreground': '0 0% 100%',
+    accent: '90 60% 40%',
+    'accent-foreground': '100 45% 10%',
+    ring: '142 68% 31%',
+    destructive: '0 72% 48%',
+    'destructive-foreground': '0 0% 100%',
+  },
+}
+
+// --- Snow: falling-snow winter — icy blue + frost white --------------------
+export const snow: ThemeDefinition = {
+  name: 'snow',
+  label: 'Snow',
+  description: 'A snowy winter: icy blues and frost white, with snow drifting down.',
+  icon: '❄️',
+  motifs: ['❄️', '⛄', '🌨️', '🏔️', '🧣', '☃️'],
+  dark: {
+    background: '215 45% 12%',
+    foreground: '210 30% 92%',
+    card: '215 40% 16%',
+    'card-foreground': '210 30% 92%',
+    muted: '215 30% 22%',
+    'muted-foreground': '210 20% 74%',
+    border: '215 25% 28%',
+    input: '215 25% 28%',
+    primary: '200 85% 38%',
+    'primary-foreground': '0 0% 100%',
+    accent: '190 75% 50%',
+    'accent-foreground': '200 45% 12%',
+    ring: '200 85% 38%',
+    destructive: '0 72% 52%',
+    'destructive-foreground': '0 0% 100%',
+  },
+  light: {
+    background: '205 45% 96%',
+    foreground: '215 45% 18%',
+    card: '0 0% 100%',
+    'card-foreground': '215 45% 18%',
+    muted: '205 35% 92%',
+    'muted-foreground': '215 22% 38%',
+    border: '205 30% 85%',
+    input: '205 35% 91%',
+    primary: '205 85% 38%',
+    'primary-foreground': '0 0% 100%',
+    accent: '190 80% 40%',
+    'accent-foreground': '200 45% 12%',
+    ring: '205 85% 38%',
+    destructive: '0 72% 48%',
+    'destructive-foreground': '0 0% 100%',
+  },
+}
+
+// --- Christmas: cozy holiday — cranberry red + pine green + candlelight -----
+export const christmas: ThemeDefinition = {
+  name: 'christmas',
+  label: 'Christmas',
+  description: 'Cozy holiday night: cranberry red, pine green, a tree, lights, and Santa.',
+  icon: '🎄',
+  motifs: ['🎄', '🎅', '🎁', '⭐', '🔔', '❄️', '🦌', '🕯️'],
+  dark: {
+    background: '160 30% 9%',
+    foreground: '40 30% 92%',
+    card: '160 28% 13%',
+    'card-foreground': '40 30% 92%',
+    muted: '160 20% 19%',
+    'muted-foreground': '40 18% 74%',
+    border: '160 20% 24%',
+    input: '160 20% 24%',
+    primary: '0 72% 46%',
+    'primary-foreground': '0 0% 100%',
+    accent: '140 55% 32%',
+    'accent-foreground': '0 0% 100%',
+    ring: '0 72% 46%',
+    destructive: '0 72% 52%',
+    'destructive-foreground': '0 0% 100%',
+  },
+  light: {
+    background: '40 44% 96%',
+    foreground: '160 40% 14%',
+    card: '0 0% 100%',
+    'card-foreground': '160 40% 14%',
+    muted: '40 30% 92%',
+    'muted-foreground': '160 18% 34%',
+    border: '40 25% 84%',
+    input: '40 30% 91%',
+    primary: '0 70% 44%',
+    'primary-foreground': '0 0% 100%',
+    accent: '140 55% 32%',
+    'accent-foreground': '0 0% 100%',
+    ring: '0 70% 44%',
+    destructive: '0 72% 48%',
+    'destructive-foreground': '0 0% 100%',
+  },
+}
+
+/** All built-in themes, in picker order. Space is the default. */
+export const themes: ThemeDefinition[] = [space, dino, doctor, scientist, soccer, snow, christmas]

package/src/ui/Accordion.tsx

@@ -0,0 +1,65 @@
+// Generic accessible accordion on Kobalte's Accordion primitive.
+import { Accordion as KAccordion } from '@kobalte/core/accordion'
+import type { JSX } from 'solid-js'
+import { For } 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 function Accordion(props: AccordionProps): JSX.Element {
+  return (
+    <KAccordion multiple={props.multiple ?? false} class={props.class}>
+      <For each={props.items}>
+        {(item) => (
+          <KAccordion.Item value={item.value} class="border-b border-border">
+            <KAccordion.Header>
+              <KAccordion.Trigger class="flex w-full items-center justify-between py-3 text-sm font-medium text-foreground [&[data-expanded]>svg]:rotate-90">
+                {item.title}
+                <svg
+                  class="h-3.5 w-3.5 shrink-0 transition-transform duration-200"
+                  viewBox="0 0 20 20"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                >
+                  <path d="M7 5l6 5-6 5" />
+                </svg>
+              </KAccordion.Trigger>
+            </KAccordion.Header>
+            <KAccordion.Content class="pb-3 text-sm text-muted-foreground">{item.content}</KAccordion.Content>
+          </KAccordion.Item>
+        )}
+      </For>
+    </KAccordion>
+  )
+}

package/src/ui/Affix.tsx

@@ -0,0 +1,72 @@
+// Pins its children to the top of the viewport once scrolled past their original position.
+import type { JSX, ParentProps } from 'solid-js'
+import { createSignal, onCleanup, onMount, Show } from 'solid-js'
+import { cn } from '../lib/cn'
+
+interface AffixProps extends ParentProps {
+  /** Distance in pixels from the top of the viewport to pin at once affixed. Defaults to `0`. */
+  offsetTop?: number
+  class?: string
+}
+
+/**
+ * Sticks its children to the top of the viewport once the user scrolls past the
+ * element's original position. While affixed, the children are rendered in a
+ * `position: fixed` container and a same-size spacer preserves the document flow
+ * so surrounding layout doesn't jump.
+ *
+ * @example
+ * ```tsx
+ * <Affix offsetTop={16}>
+ *   <nav class="rounded-md bg-card px-4 py-2 text-foreground">Sticky toolbar</nav>
+ * </Affix>
+ * ```
+ */
+export function Affix(props: AffixProps): JSX.Element {
+  const [affixed, setAffixed] = createSignal(false)
+  const [size, setSize] = createSignal({ width: 0, height: 0 })
+  let ref: HTMLDivElement | undefined
+
+  onMount(() => {
+    // Anchor is the element's original document position; captured once so the
+    // trigger point stays stable even after the wrapper becomes empty (affixed).
+    let anchorTop = 0
+    const measure = () => {
+      if (!ref) return
+      const rect = ref.getBoundingClientRect()
+      if (!affixed()) {
+        anchorTop = rect.top + window.scrollY
+        setSize({ width: rect.width, height: rect.height })
+      }
+    }
+    const update = () => {
+      const offset = props.offsetTop ?? 0
+      setAffixed(window.scrollY + offset > anchorTop)
+    }
+    const onScroll = () => {
+      measure()
+      update()
+    }
+
+    measure()
+    update()
+    window.addEventListener('scroll', onScroll, { passive: true })
+    window.addEventListener('resize', onScroll, { passive: true })
+    onCleanup(() => {
+      window.removeEventListener('scroll', onScroll)
+      window.removeEventListener('resize', onScroll)
+    })
+  })
+
+  return (
+    <div ref={ref} class={cn(props.class)}>
+      <Show when={affixed()} fallback={props.children}>
+        {/* Spacer keeps the original footprint so the page below doesn't shift up. */}
+        <div style={{ width: `${size().width}px`, height: `${size().height}px` }} aria-hidden="true" />
+        <div class="fixed z-40" style={{ top: `${props.offsetTop ?? 0}px`, width: `${size().width}px` }}>
+          {props.children}
+        </div>
+      </Show>
+    </div>
+  )
+}

package/src/ui/Alert.tsx

@@ -0,0 +1,55 @@
+// Inline status banner on Kobalte's Alert primitive. The tone is carried by the
+// border/background tint and a colored icon; the TEXT stays foreground/muted so
+// it keeps WCAG-AA contrast in both dark and light themes (tone `-600` text was
+// too dim on the dark surface).
+import { Alert as KAlert } from '@kobalte/core/alert'
+import { CircleCheck, CircleX, Info, TriangleAlert } from 'lucide-solid'
+import type { Component, JSX, ParentProps } from 'solid-js'
+import { Show } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
+
+import { cn } from '../lib/cn'
+
+/** Semantic tone of an {@link Alert}; drives the border/background tint and icon. */
+export type AlertTone = 'info' | 'success' | 'warning' | 'danger'
+
+const TONE: Record<AlertTone, { wrap: string; icon: string; Icon: Component<{ class?: string }> }> = {
+  info: { wrap: 'border-sky-500/30 bg-sky-500/10', icon: 'text-sky-500', Icon: Info },
+  success: { wrap: 'border-emerald-500/30 bg-emerald-500/10', icon: 'text-emerald-500', Icon: CircleCheck },
+  warning: { wrap: 'border-amber-500/30 bg-amber-500/10', icon: 'text-amber-500', Icon: TriangleAlert },
+  danger: { wrap: 'border-rose-500/30 bg-rose-500/10', icon: 'text-rose-500', Icon: CircleX },
+}
+
+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 function Alert(props: AlertProps): JSX.Element {
+  const tone = () => TONE[props.tone ?? 'info']
+  return (
+    <KAlert class={cn('flex gap-3 rounded-lg border p-3 text-sm text-foreground', tone().wrap, props.class)}>
+      <Dynamic component={tone().Icon} class={cn('mt-0.5 h-4 w-4 shrink-0', tone().icon)} />
+      <div class="flex-1">
+        <Show when={props.title}>
+          <p class="font-semibold">{props.title}</p>
+        </Show>
+        <div class="text-muted-foreground">{props.children}</div>
+      </div>
+    </KAlert>
+  )
+}