@a4ui/core 0.11.1 → 0.12.0

package/src/ui/ContextMenu.tsx

@@ -0,0 +1,58 @@
+// Right-click menu on Kobalte's ContextMenu primitive. `children` is the target.
+import { ContextMenu as KContextMenu } from '@kobalte/core/context-menu'
+import type { JSX, ParentProps } from 'solid-js'
+import { For } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+/** A single actionable row rendered by {@link ContextMenu}. */
+export interface ContextMenuItem {
+  label: string
+  /** Called when the item is chosen (click or keyboard activation). */
+  onSelect: () => void
+  /** Styles the label as a destructive action (e.g. "Delete"). */
+  destructive?: boolean
+  disabled?: boolean
+}
+
+interface ContextMenuProps extends ParentProps {
+  items: ContextMenuItem[]
+  class?: string
+}
+
+/**
+ * Right-click (or long-press) menu built on Kobalte's `ContextMenu`
+ * primitive. `children` is the element that acts as the trigger/target area.
+ *
+ * @example
+ * ```tsx
+ * <ContextMenu items={[{ label: 'Rename', onSelect: rename }, { label: 'Delete', onSelect: remove, destructive: true }]}>
+ *   <div class="rounded border p-4">Right-click me</div>
+ * </ContextMenu>
+ * ```
+ */
+export function ContextMenu(props: ContextMenuProps): JSX.Element {
+  return (
+    <KContextMenu>
+      <KContextMenu.Trigger class={cn('inline-flex', props.class)}>{props.children}</KContextMenu.Trigger>
+      <KContextMenu.Portal>
+        <KContextMenu.Content class="z-50 min-w-[10rem] overflow-hidden rounded-md border border-border bg-card p-1 text-card-foreground shadow-sm">
+          <For each={props.items}>
+            {(item) => (
+              <KContextMenu.Item
+                class={cn(
+                  'cursor-pointer select-none rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+                  item.destructive && 'text-destructive',
+                )}
+                disabled={item.disabled}
+                onSelect={item.onSelect}
+              >
+                {item.label}
+              </KContextMenu.Item>
+            )}
+          </For>
+        </KContextMenu.Content>
+      </KContextMenu.Portal>
+    </KContextMenu>
+  )
+}

package/src/ui/Countdown.tsx

@@ -0,0 +1,123 @@
+// Live countdown to a target Date, rendered as four Days/Hours/Mins/Secs cells.
+// A single setInterval (started in onMount, cleared in onCleanup) ticks a signal
+// once per second; remaining ms is clamped at 0 and `onComplete` fires exactly
+// once when the target is reached. Each digit is an odometer-style roller: the
+// column of 0–9 slides so the active digit sits in the viewport, so a decreasing
+// countdown rolls the new number in from the top — like an old flip clock.
+//
+// Digit/cell slots use <Index> (keyed by position, not value) so they persist
+// across ticks and the CSS transform transition actually animates instead of the
+// node being torn down and recreated each second.
+//
+// The target instant is captured once (createMemo): a parent JSX expression like
+// `to={new Date(Date.now() + X)}` compiles to a getter Solid re-evaluates on each
+// access, which would otherwise pin "remaining" at X forever. Memoizing reads it
+// a single time (and still updates if `to` is backed by a real signal).
+import { createMemo, createSignal, Index, onCleanup, onMount, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface CountdownProps {
+  /** Target moment the countdown runs toward. */
+  to: Date
+  /** Called once, the moment the countdown reaches zero. */
+  onComplete?: () => void
+  class?: string
+}
+
+const MS_PER_SECOND = 1000
+const MS_PER_MINUTE = 60 * MS_PER_SECOND
+const MS_PER_HOUR = 60 * MS_PER_MINUTE
+const MS_PER_DAY = 24 * MS_PER_HOUR
+const DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+
+const pad = (n: number): string => String(n).padStart(2, '0')
+
+/** One odometer digit: a 0–9 column shifted so `char`'s row fills the viewport. */
+function Digit(props: { char: string }): JSX.Element {
+  const digit = () => (props.char >= '0' && props.char <= '9' ? Number(props.char) : 0)
+  return (
+    <span class="relative inline-block h-[1em] w-[0.62em] overflow-hidden align-top">
+      <span
+        class="absolute inset-x-0 top-0 flex flex-col transition-transform duration-500 ease-out"
+        style={{ transform: `translateY(${digit() * -10}%)` }}
+      >
+        <Index each={DIGITS}>
+          {(d) => <span class="block h-[1em] text-center leading-none">{d()}</span>}
+        </Index>
+      </span>
+    </span>
+  )
+}
+
+/** Render a value string as a row of rolling digits (stable slots per position). */
+function Rollers(props: { value: string }): JSX.Element {
+  const chars = () => props.value.split('')
+  return (
+    <span class="flex text-2xl font-bold tabular-nums text-foreground">
+      <Index each={chars()}>{(char) => <Digit char={char()} />}</Index>
+    </span>
+  )
+}
+
+/**
+ * Live countdown to `props.to`, shown as four cells (Days / Hours / Mins /
+ * Secs). Updates every second and calls `props.onComplete` once when it hits
+ * zero. Each digit rolls like an old flip clock as it changes. Hours, minutes,
+ * and seconds are zero-padded to two digits.
+ *
+ * @example
+ * ```tsx
+ * <Countdown to={new Date(Date.now() + 86_400_000)} onComplete={() => launch()} />
+ * ```
+ */
+export function Countdown(props: CountdownProps): JSX.Element {
+  // Read the target instant once (see file header on why this must be memoized).
+  const target = createMemo(() => props.to.getTime())
+  const remainingOf = () => Math.max(0, target() - Date.now())
+  const [remaining, setRemaining] = createSignal(remainingOf())
+
+  let completed = false
+  const notifyIfDone = (ms: number) => {
+    if (ms <= 0 && !completed) {
+      completed = true
+      props.onComplete?.()
+    }
+  }
+  // eslint-disable-next-line solid/reactivity -- one-time check at setup for an already-elapsed target
+  notifyIfDone(remaining())
+
+  onMount(() => {
+    const id = setInterval(() => {
+      const ms = remainingOf()
+      setRemaining(ms)
+      notifyIfDone(ms)
+    }, MS_PER_SECOND)
+    onCleanup(() => clearInterval(id))
+  })
+
+  const days = () => Math.floor(remaining() / MS_PER_DAY)
+  const hours = () => Math.floor((remaining() % MS_PER_DAY) / MS_PER_HOUR)
+  const minutes = () => Math.floor((remaining() % MS_PER_HOUR) / MS_PER_MINUTE)
+  const seconds = () => Math.floor((remaining() % MS_PER_MINUTE) / MS_PER_SECOND)
+
+  const cells = (): { label: string; value: string }[] => [
+    { label: 'Days', value: String(days()) },
+    { label: 'Hours', value: pad(hours()) },
+    { label: 'Mins', value: pad(minutes()) },
+    { label: 'Secs', value: pad(seconds()) },
+  ]
+
+  return (
+    <div class={cn('flex gap-4', props.class)}>
+      <Index each={cells()}>
+        {(cell) => (
+          <div class="flex flex-col items-center">
+            <Rollers value={cell().value} />
+            <span class="text-[10px] uppercase tracking-wide text-muted-foreground">{cell().label}</span>
+          </div>
+        )}
+      </Index>
+    </div>
+  )
+}

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>
+  )
+}