@a4ui/core 0.11.1 → 0.13.0

package/src/ui/DataGrid.tsx

@@ -0,0 +1,177 @@
+// Sortable + filterable data table built on the Table + Pagination primitives.
+// Fully client-side and self-contained: the grid owns its own filter, sort, and
+// page signals and derives the visible rows with a single createMemo pipeline
+// (filter → sort → paginate). For huge datasets, prefer a server-driven table.
+import { ChevronDown, ChevronsUpDown, ChevronUp } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { createMemo, createSignal, For } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Input } from './Input'
+import { Pagination } from './Pagination'
+import { Table, TableBody, TableCell, TableHead, TableHeadCell, TableRow } from './Table'
+
+/** A single column definition for {@link DataGrid}. */
+export interface DataGridColumn {
+  /** Row property this column reads (also used as the sort key). */
+  key: string
+  /** Column heading text. */
+  header: string
+  /** When true, the header becomes a button that cycles asc → desc → none. */
+  sortable?: boolean
+  /** Custom cell renderer; falls back to `String(row[key])` when omitted. */
+  render?: (row: Record<string, unknown>) => JSX.Element
+}
+
+/** Props for {@link DataGrid}. */
+export interface DataGridProps {
+  columns: DataGridColumn[]
+  rows: Record<string, unknown>[]
+  /** Rows per page. Defaults to 10. */
+  pageSize?: number
+  /** Show the global text filter above the table. Defaults to true. */
+  filterable?: boolean
+  class?: string
+}
+
+type SortDir = 'asc' | 'desc'
+type SortState = { key: string; dir: SortDir } | null
+
+function compareValues(a: unknown, b: unknown): number {
+  if (typeof a === 'number' && typeof b === 'number') return a - b
+  return String(a ?? '').localeCompare(String(b ?? ''))
+}
+
+/**
+ * Sortable + filterable table. Provide `columns` and `rows`; the grid handles
+ * global text filtering, per-column sorting (click a sortable header to cycle
+ * ascending → descending → unsorted), and pagination on its own.
+ *
+ * @example
+ * ```tsx
+ * <DataGrid
+ *   columns={[
+ *     { key: 'name', header: 'Name', sortable: true },
+ *     { key: 'age', header: 'Age', sortable: true },
+ *   ]}
+ *   rows={[{ name: 'Alfredo', age: 30 }, { name: 'Sonora', age: 12 }]}
+ *   pageSize={25}
+ * />
+ * ```
+ */
+export function DataGrid(props: DataGridProps): JSX.Element {
+  const [query, setQuery] = createSignal('')
+  const [sort, setSort] = createSignal<SortState>(null)
+  const [page, setPage] = createSignal(1)
+
+  const pageSize = () => props.pageSize ?? 10
+  const filterable = () => props.filterable ?? true
+
+  function cycleSort(key: string) {
+    setPage(1)
+    setSort((prev) => {
+      if (!prev || prev.key !== key) return { key, dir: 'asc' }
+      if (prev.dir === 'asc') return { key, dir: 'desc' }
+      return null
+    })
+  }
+
+  const filtered = createMemo(() => {
+    const q = query().trim().toLowerCase()
+    if (!q) return props.rows
+    return props.rows.filter((row) =>
+      Object.values(row).some((v) =>
+        String(v ?? '')
+          .toLowerCase()
+          .includes(q),
+      ),
+    )
+  })
+
+  const sorted = createMemo(() => {
+    const s = sort()
+    if (!s) return filtered()
+    const factor = s.dir === 'asc' ? 1 : -1
+    return [...filtered()].sort((a, b) => compareValues(a[s.key], b[s.key]) * factor)
+  })
+
+  const totalPages = createMemo(() => Math.max(1, Math.ceil(sorted().length / pageSize())))
+
+  const paged = createMemo(() => {
+    const current = Math.min(page(), totalPages())
+    const start = (current - 1) * pageSize()
+    return sorted().slice(start, start + pageSize())
+  })
+
+  function ariaSort(col: DataGridColumn): JSX.AriaAttributes['aria-sort'] {
+    if (!col.sortable) return undefined
+    const s = sort()
+    if (!s || s.key !== col.key) return 'none'
+    return s.dir === 'asc' ? 'ascending' : 'descending'
+  }
+
+  function SortIcon(colProps: { col: DataGridColumn }) {
+    const s = sort()
+    if (!s || s.key !== colProps.col.key) return <ChevronsUpDown class="h-4 w-4 opacity-60" />
+    return <>{s.dir === 'asc' ? <ChevronUp class="h-4 w-4" /> : <ChevronDown class="h-4 w-4" />}</>
+  }
+
+  return (
+    <div class={cn('flex w-full flex-col rounded-lg border border-border bg-background', props.class)}>
+      {filterable() && (
+        <div class="p-3">
+          <Input
+            value={query()}
+            onInput={(v) => {
+              setQuery(v)
+              setPage(1)
+            }}
+            placeholder="Filter…"
+            aria-label="Filter rows"
+          />
+        </div>
+      )}
+      <Table>
+        <TableHead>
+          <TableRow>
+            <For each={props.columns}>
+              {(col) => (
+                <TableHeadCell aria-sort={ariaSort(col)}>
+                  {col.sortable ? (
+                    <button
+                      type="button"
+                      class="inline-flex items-center gap-1 uppercase tracking-wide transition-colors hover:text-foreground"
+                      onClick={() => cycleSort(col.key)}
+                    >
+                      {col.header}
+                      <SortIcon col={col} />
+                    </button>
+                  ) : (
+                    col.header
+                  )}
+                </TableHeadCell>
+              )}
+            </For>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <For each={paged()}>
+            {(row) => (
+              <TableRow>
+                <For each={props.columns}>
+                  {(col) => <TableCell>{col.render?.(row) ?? String(row[col.key] ?? '')}</TableCell>}
+                </For>
+              </TableRow>
+            )}
+          </For>
+        </TableBody>
+      </Table>
+      <Pagination
+        page={Math.min(page(), totalPages())}
+        totalPages={totalPages()}
+        onChange={setPage}
+        summary={`${sorted().length} rows`}
+      />
+    </div>
+  )
+}

package/src/ui/DateField.tsx

@@ -0,0 +1,177 @@
+// Compact custom date picker — Kobalte 0.13.x ships no DatePicker, so this is a
+// small hand-rolled month-grid calendar in plain Solid + theme tokens (works in
+// light/dark). No new deps: outside-click is a document listener wired on open
+// and torn down via onCleanup; the popover is absolutely positioned under the
+// trigger. Value/onChange speak `YYYY-MM-DD` (local, never toISOString which
+// shifts by timezone).
+import { CalendarDays } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { Show, createEffect, createMemo, createSignal, onCleanup } from 'solid-js'
+import { Portal } from 'solid-js/web'
+
+import { cn } from '../lib/cn'
+import { CalendarCore } from './internal/CalendarCore'
+
+const WEEKDAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
+const MONTHS = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+]
+
+/** Format a local Date as `YYYY-MM-DD` (zero-padded, no timezone shift). */
+function fmt(d: Date): string {
+  const y = d.getFullYear()
+  const m = `${d.getMonth() + 1}`.padStart(2, '0')
+  const day = `${d.getDate()}`.padStart(2, '0')
+  return `${y}-${m}-${day}`
+}
+
+/** Parse `YYYY-MM-DD` into a local-midnight Date; null if malformed. */
+function parse(value: string): Date | null {
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value)
+  if (!m) return null
+  return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]))
+}
+
+/** Human-readable trigger label, e.g. `15 Mar 2026`. */
+function displayLabel(value: string, months: string[]): string | null {
+  const d = parse(value)
+  if (!d) return null
+  return `${d.getDate()} ${months[d.getMonth()].slice(0, 3)} ${d.getFullYear()}`
+}
+
+interface DateFieldProps {
+  /** Selected date as `YYYY-MM-DD` (local, no timezone shift), or `''` for none. */
+  value: string
+  /** Called with the newly picked date as `YYYY-MM-DD`. */
+  onChange: (value: string) => void
+  /** Placeholder shown on the trigger when `value` is empty. */
+  label?: string
+  disabled?: boolean
+  class?: string
+  /** Full month names, January … December order (12 entries). */
+  months?: string[]
+  /** Weekday headers, Monday-first (7 entries). */
+  weekdays?: string[]
+}
+
+/**
+ * Compact hand-rolled month-grid date picker (no Kobalte primitive covers this yet).
+ * Trigger button opens a portaled popover calendar; closes on outside click, Escape,
+ * scroll, or resize. Speaks plain `YYYY-MM-DD` strings, never `Date`/`toISOString`.
+ *
+ * @example
+ * ```tsx
+ * const [date, setDate] = createSignal('2026-07-14')
+ * <DateField value={date()} onChange={setDate} label="Due date" />
+ * ```
+ */
+export function DateField(props: DateFieldProps): JSX.Element {
+  const [open, setOpen] = createSignal(false)
+
+  let rootRef: HTMLDivElement | undefined
+  let btnRef: HTMLButtonElement | undefined
+  let popRef: HTMLDivElement | undefined
+  // The calendar is rendered in a <Portal> (so it escapes the glass card's
+  // backdrop-filter stacking context, which otherwise traps it behind later
+  // content). Being at <body>, it can't use `absolute` positioning relative to
+  // the trigger — position it with `fixed` at the trigger's viewport rect.
+  const [pos, setPos] = createSignal({ top: 0, left: 0 })
+  const POP_W = 288 // w-72
+
+  const place = () => {
+    if (!btnRef) return
+    const r = btnRef.getBoundingClientRect()
+    const left = Math.max(8, Math.min(r.left, window.innerWidth - POP_W - 8))
+    setPos({ top: r.bottom + 4, left })
+  }
+
+  const openPopover = () => {
+    if (props.disabled) return
+    place()
+    setOpen(true)
+  }
+
+  const close = () => setOpen(false)
+
+  const onDocPointer = (ev: MouseEvent) => {
+    const t = ev.target as Node
+    // Ignore clicks on the trigger (rootRef) AND the portaled popover (popRef).
+    if (rootRef && !rootRef.contains(t) && popRef && !popRef.contains(t)) close()
+  }
+  const onKey = (ev: KeyboardEvent) => {
+    if (ev.key === 'Escape') close()
+  }
+
+  // Wire/tear-down the global listeners strictly around the open state. Scroll/
+  // resize close the popover (its fixed position would otherwise drift).
+  const toggleListeners = (isOpen: boolean) => {
+    if (isOpen) {
+      document.addEventListener('mousedown', onDocPointer)
+      document.addEventListener('keydown', onKey)
+      window.addEventListener('scroll', close, true)
+      window.addEventListener('resize', close)
+    } else {
+      document.removeEventListener('mousedown', onDocPointer)
+      document.removeEventListener('keydown', onKey)
+      window.removeEventListener('scroll', close, true)
+      window.removeEventListener('resize', close)
+    }
+  }
+  // Reactively attach when open flips; always clean up on unmount.
+  createEffect(() => toggleListeners(open()))
+  onCleanup(() => toggleListeners(false))
+
+  const selected = createMemo(() => parse(props.value))
+
+  const pick = (d: Date) => {
+    props.onChange(fmt(d))
+    close()
+  }
+
+  return (
+    <div ref={rootRef} class={cn('relative', props.class)}>
+      <button
+        ref={btnRef}
+        type="button"
+        disabled={props.disabled}
+        onClick={() => (open() ? close() : openPopover())}
+        class="flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-left text-sm text-foreground outline-none transition-colors a4-field disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        <span class={displayLabel(props.value, props.months ?? MONTHS) ? '' : 'text-muted-foreground'}>
+          {displayLabel(props.value, props.months ?? MONTHS) ?? props.label ?? 'Select date'}
+        </span>
+        <CalendarDays class="h-4 w-4 shrink-0 text-muted-foreground" />
+      </button>
+
+      <Show when={open()}>
+        <Portal>
+          <div
+            ref={popRef}
+            style={{ position: 'fixed', top: `${pos().top}px`, left: `${pos().left}px` }}
+            class="z-50 w-72 rounded-lg border border-border bg-card p-3 text-card-foreground shadow-lg"
+          >
+            <CalendarCore
+              selected={selected() ?? undefined}
+              initialView={selected() ?? undefined}
+              onPick={pick}
+              weekStart={1}
+              months={props.months}
+              weekdays={props.weekdays ?? WEEKDAYS}
+            />
+          </div>
+        </Portal>
+      </Show>
+    </div>
+  )
+}

package/src/ui/DateRangePicker.tsx

@@ -0,0 +1,204 @@
+// Two-click range variant of DateField: same hand-rolled popover mechanism
+// (portaled, fixed-positioned at the trigger's viewport rect, closing on
+// outside click / Escape / scroll / resize), but driving `<CalendarCore>`'s
+// `rangeStart`/`rangeEnd` highlight instead of a single `selected` day. Value/
+// onChange speak plain `YYYY-MM-DD` strings (local, never `toISOString` which
+// shifts by timezone).
+import { CalendarDays } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { createEffect, createMemo, createSignal, onCleanup, Show } from 'solid-js'
+import { Portal } from 'solid-js/web'
+
+import { cn } from '../lib/cn'
+import { CalendarCore } from './internal/CalendarCore'
+
+const WEEKDAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
+const MONTHS = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+]
+
+/** Format a local Date as `YYYY-MM-DD` (zero-padded, no timezone shift). */
+function fmt(d: Date): string {
+  const y = d.getFullYear()
+  const m = `${d.getMonth() + 1}`.padStart(2, '0')
+  const day = `${d.getDate()}`.padStart(2, '0')
+  return `${y}-${m}-${day}`
+}
+
+/** Parse `YYYY-MM-DD` into a local-midnight Date; null if malformed. */
+function parse(value: string): Date | null {
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value)
+  if (!m) return null
+  return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]))
+}
+
+/** Human-readable endpoint label, e.g. `15 Mar 2026`. */
+function formatDay(d: Date, months: string[]): string {
+  return `${d.getDate()} ${months[d.getMonth()].slice(0, 3)} ${d.getFullYear()}`
+}
+
+export interface DateRange {
+  /** 'YYYY-MM-DD' (local) or '' if unset. */
+  start: string
+  end: string
+}
+
+export interface DateRangePickerProps {
+  value: DateRange
+  onChange: (value: DateRange) => void
+  /** Placeholder shown when nothing is selected. */
+  label?: string
+  disabled?: boolean
+  months?: string[]
+  weekdays?: string[]
+  class?: string
+}
+
+/**
+ * Compact hand-rolled range picker built on the same popover mechanism as
+ * `DateField`, but tracking a start/end pair instead of a single day. The
+ * first click begins a range, the second completes it (closing the popover);
+ * clicking again once complete starts a fresh range.
+ *
+ * @example
+ * ```tsx
+ * const [range, setRange] = createSignal<DateRange>({ start: '2026-03-15', end: '' })
+ * <DateRangePicker value={range()} onChange={setRange} label="Stay dates" />
+ * ```
+ */
+export function DateRangePicker(props: DateRangePickerProps): JSX.Element {
+  const [open, setOpen] = createSignal(false)
+
+  let rootRef: HTMLDivElement | undefined
+  let btnRef: HTMLButtonElement | undefined
+  let popRef: HTMLDivElement | undefined
+  // The calendar is rendered in a <Portal> (so it escapes the glass card's
+  // backdrop-filter stacking context, which otherwise traps it behind later
+  // content). Being at <body>, it can't use `absolute` positioning relative to
+  // the trigger — position it with `fixed` at the trigger's viewport rect.
+  const [pos, setPos] = createSignal({ top: 0, left: 0 })
+  const POP_W = 288 // w-72
+
+  const place = () => {
+    if (!btnRef) return
+    const r = btnRef.getBoundingClientRect()
+    const left = Math.max(8, Math.min(r.left, window.innerWidth - POP_W - 8))
+    setPos({ top: r.bottom + 4, left })
+  }
+
+  const openPopover = () => {
+    if (props.disabled) return
+    place()
+    setOpen(true)
+  }
+
+  const close = () => setOpen(false)
+
+  const onDocPointer = (ev: MouseEvent) => {
+    const t = ev.target as Node
+    // Ignore clicks on the trigger (rootRef) AND the portaled popover (popRef).
+    if (rootRef && !rootRef.contains(t) && popRef && !popRef.contains(t)) close()
+  }
+  const onKey = (ev: KeyboardEvent) => {
+    if (ev.key === 'Escape') close()
+  }
+
+  // Wire/tear-down the global listeners strictly around the open state. Scroll/
+  // resize close the popover (its fixed position would otherwise drift).
+  const toggleListeners = (isOpen: boolean) => {
+    if (isOpen) {
+      document.addEventListener('mousedown', onDocPointer)
+      document.addEventListener('keydown', onKey)
+      window.addEventListener('scroll', close, true)
+      window.addEventListener('resize', close)
+    } else {
+      document.removeEventListener('mousedown', onDocPointer)
+      document.removeEventListener('keydown', onKey)
+      window.removeEventListener('scroll', close, true)
+      window.removeEventListener('resize', close)
+    }
+  }
+  // Reactively attach when open flips; always clean up on unmount.
+  createEffect(() => toggleListeners(open()))
+  onCleanup(() => toggleListeners(false))
+
+  const startDate = createMemo(() => parse(props.value.start))
+  const endDate = createMemo(() => parse(props.value.end))
+
+  const triggerLabel = createMemo(() => {
+    const months = props.months ?? MONTHS
+    const s = startDate()
+    const e = endDate()
+    if (s && e) return `${formatDay(s, months)} – ${formatDay(e, months)}`
+    if (s) return `${formatDay(s, months)} – …`
+    return null
+  })
+
+  const handlePick = (d: Date) => {
+    const { start, end } = props.value
+    const startD = start ? parse(start) : null
+
+    // Both endpoints set, or neither set: begin a fresh range and stay open.
+    if ((start && end) || (!start && !end) || !startD) {
+      props.onChange({ start: fmt(d), end: '' })
+      return
+    }
+
+    // Start set, end empty: complete the range if picking on/after start,
+    // otherwise restart from the newly picked (earlier) day.
+    if (d >= startD) {
+      props.onChange({ start, end: fmt(d) })
+      close()
+    } else {
+      props.onChange({ start: fmt(d), end: '' })
+    }
+  }
+
+  return (
+    <div ref={rootRef} class={cn('relative', props.class)}>
+      <button
+        ref={btnRef}
+        type="button"
+        disabled={props.disabled}
+        onClick={() => (open() ? close() : openPopover())}
+        class="flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-left text-sm text-foreground outline-none transition-colors a4-field disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        <span class={triggerLabel() ? '' : 'text-muted-foreground'}>
+          {triggerLabel() ?? props.label ?? 'Select range'}
+        </span>
+        <CalendarDays class="h-4 w-4 shrink-0 text-muted-foreground" />
+      </button>
+
+      <Show when={open()}>
+        <Portal>
+          <div
+            ref={popRef}
+            style={{ position: 'fixed', top: `${pos().top}px`, left: `${pos().left}px` }}
+            class="z-50 w-72 rounded-lg border border-border bg-card p-3 text-card-foreground shadow-lg"
+          >
+            <CalendarCore
+              rangeStart={startDate() ?? undefined}
+              rangeEnd={endDate() ?? undefined}
+              initialView={startDate() ?? undefined}
+              onPick={handlePick}
+              weekStart={1}
+              months={props.months}
+              weekdays={props.weekdays ?? WEEKDAYS}
+            />
+          </div>
+        </Portal>
+      </Show>
+    </div>
+  )
+}

package/src/ui/DateTimeField.tsx

@@ -0,0 +1,68 @@
+// Combined date + time picker: a DateField and a TimeField side by side that
+// read/write a single "YYYY-MM-DD HH:MM" string (local, no timezone shift). Each
+// half keeps its own popover; this just splits the value on the way in and joins
+// it on the way out, so either part can be filled independently.
+import type { JSX } from 'solid-js'
+import { createMemo } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { DateField } from './DateField'
+import { TimeField } from './TimeField'
+
+export interface DateTimeFieldProps {
+  /** Selected moment as `YYYY-MM-DD HH:MM` (local), or `''` for none. */
+  value: string
+  /** Called with the combined `YYYY-MM-DD HH:MM` (either part may be missing). */
+  onChange: (value: string) => void
+  /** 12-hour time display with AM/PM. @default false */
+  hour12?: boolean
+  /** Minute increment for the time options. @default 5 */
+  minuteStep?: number
+  /** Placeholder for the date half. */
+  dateLabel?: string
+  /** Placeholder for the time half. */
+  timeLabel?: string
+  disabled?: boolean
+  class?: string
+}
+
+const DATE_RE = /\d{4}-\d{2}-\d{2}/
+const TIME_RE = /\d{2}:\d{2}/
+
+const join = (date: string, time: string): string => [date, time].filter(Boolean).join(' ')
+
+/**
+ * Date + time picker built from {@link DateField} and {@link TimeField}. Speaks a
+ * single `YYYY-MM-DD HH:MM` string; the two halves fill in independently.
+ *
+ * @example
+ * ```tsx
+ * const [when, setWhen] = createSignal('2026-07-15 09:30')
+ * <DateTimeField value={when()} onChange={setWhen} hour12 />
+ * ```
+ */
+export function DateTimeField(props: DateTimeFieldProps): JSX.Element {
+  const datePart = createMemo(() => DATE_RE.exec(props.value)?.[0] ?? '')
+  const timePart = createMemo(() => TIME_RE.exec(props.value)?.[0] ?? '')
+
+  return (
+    <div class={cn('flex flex-wrap items-start gap-2', props.class)}>
+      <DateField
+        value={datePart()}
+        onChange={(d) => props.onChange(join(d, timePart()))}
+        label={props.dateLabel ?? 'Select date'}
+        disabled={props.disabled}
+        class="min-w-40 flex-1"
+      />
+      <TimeField
+        value={timePart()}
+        onChange={(t) => props.onChange(join(datePart(), t))}
+        hour12={props.hour12}
+        minuteStep={props.minuteStep}
+        label={props.timeLabel ?? 'Select time'}
+        disabled={props.disabled}
+        class="min-w-32"
+      />
+    </div>
+  )
+}

package/src/ui/Descriptions.tsx

@@ -0,0 +1,56 @@
+// Semantic key/value detail list — a <dl> laid out as a responsive grid. For
+// showing an entity's attributes (a "properties" / "details" panel). Values are
+// JSX so they can carry badges, links, or formatted content; all colors come
+// from semantic theme tokens so it stays theme-agnostic.
+import { For, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+/** A single label/value row in a {@link Descriptions} list. */
+export interface DescriptionItem {
+  label: string
+  value: JSX.Element
+}
+
+export interface DescriptionsProps {
+  items: DescriptionItem[]
+  /** Number of columns on `sm`+ screens (1, 2, or 3). Default: 1. */
+  columns?: number
+  class?: string
+}
+
+const COLUMN_CLASSES: Record<number, string> = {
+  1: 'grid-cols-1',
+  2: 'sm:grid-cols-2',
+  3: 'sm:grid-cols-3',
+}
+
+/**
+ * Renders a set of label/value pairs as a semantic `<dl>` in a responsive grid.
+ * Use `columns` to fan the pairs out into 2 or 3 columns on wider screens.
+ *
+ * @example
+ * ```tsx
+ * <Descriptions
+ *   columns={2}
+ *   items={[
+ *     { label: 'Status', value: <Badge tone="success">Active</Badge> },
+ *     { label: 'Owner', value: 'Ada Lovelace' },
+ *   ]}
+ * />
+ * ```
+ */
+export function Descriptions(props: DescriptionsProps): JSX.Element {
+  return (
+    <dl class={cn('grid gap-x-6', COLUMN_CLASSES[props.columns ?? 1] ?? COLUMN_CLASSES[1], props.class)}>
+      <For each={props.items}>
+        {(item) => (
+          <div class="border-b border-border py-2">
+            <dt class="text-xs uppercase tracking-wide text-muted-foreground">{item.label}</dt>
+            <dd class="mt-0.5 text-sm text-foreground">{item.value}</dd>
+          </div>
+        )}
+      </For>
+    </dl>
+  )
+}