@a4ui/core 0.11.1 → 0.13.0

package/src/ui/TextReveal.tsx

@@ -0,0 +1,93 @@
+// Reveal text word-by-word or char-by-char with a Motion (motion.dev) stagger:
+// each unit starts translated down and transparent, then fades/slides in with
+// `animate`'s `delay: stagger(...)`, either on mount or the first time the
+// text scrolls into view (`inView`). Whitespace units are rendered as plain
+// text (not wrapped/animated) so word spacing stays exactly what it would be
+// without the effect.
+import { createMemo, onMount, For, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { animate, inView, motionReduced, stagger } from '../lib/motion'
+
+export interface TextRevealProps {
+  text: string
+  /** Split unit. @default 'word' */
+  by?: 'word' | 'char'
+  /** Reveal when scrolled into view instead of on mount. @default false */
+  onView?: boolean
+  class?: string
+}
+
+/** Split `text` into render units: words with their surrounding spaces kept as separate whitespace units, or individual characters. */
+function splitUnits(text: string, by: 'word' | 'char'): string[] {
+  if (by === 'char') return text.split('')
+  return text.split(/(\s+)/).filter((unit) => unit.length > 0)
+}
+
+const isWhitespace = (unit: string): boolean => /^\s+$/.test(unit)
+
+/**
+ * Reveals `text`, split into words or characters, with a staggered
+ * fade + slide-up (via Motion's `animate` + `stagger`). Runs once on mount by
+ * default; pass `onView` to instead reveal the first time the component
+ * scrolls into view. Whitespace between words renders as plain text, not an
+ * animated unit. Under reduced motion, everything stays visible and no
+ * animation runs.
+ *
+ * @example
+ * ```tsx
+ * <TextReveal text="Ship it." by="char" onView />
+ * ```
+ */
+export function TextReveal(props: TextRevealProps): JSX.Element {
+  const units = createMemo(() => splitUnits(props.text, props.by ?? 'word'))
+  const spans: (HTMLSpanElement | undefined)[] = []
+  let root: HTMLSpanElement | undefined
+
+  const reveal = (): void => {
+    const targets = spans.filter((el): el is HTMLSpanElement => el !== undefined)
+    if (targets.length === 0) return
+    animate(
+      targets,
+      { opacity: [0, 1], y: [12, 0] },
+      { delay: stagger(0.03), duration: 0.4, ease: 'easeOut' },
+    )
+  }
+
+  onMount(() => {
+    if (motionReduced()) return
+
+    for (const el of spans) {
+      if (el) el.style.opacity = '0'
+    }
+
+    if (props.onView) {
+      if (!root) return
+      inView(root, () => reveal(), { amount: 0.3 })
+      return
+    }
+
+    reveal()
+  })
+
+  return (
+    <span class={cn(props.class)} ref={root}>
+      <For each={units()}>
+        {(unit, index) =>
+          isWhitespace(unit) ? (
+            unit
+          ) : (
+            <span
+              class="inline-block will-change-transform"
+              ref={(el) => {
+                spans[index()] = el
+              }}
+            >
+              {unit}
+            </span>
+          )
+        }
+      </For>
+    </span>
+  )
+}

package/src/ui/Textarea.tsx

@@ -0,0 +1,38 @@
+// Controlled multi-line text field — plain <textarea>, mirrors Input.tsx.
+import type { JSX } from 'solid-js'
+import { splitProps } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+const TEXTAREA_BASE =
+  'w-full min-h-[80px] resize-y rounded-md border border-input bg-background text-foreground placeholder:text-muted-foreground px-3 py-2 text-sm outline-none transition-colors a4-field disabled:cursor-not-allowed disabled:opacity-50'
+
+interface TextareaProps extends Omit<JSX.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onInput'> {
+  value: string
+  /** Called with the new string value on every input event (not the raw DOM event). */
+  onInput: (value: string) => void
+  class?: string
+}
+
+/**
+ * Controlled multi-line text field — a plain `<textarea>` styled to match
+ * {@link Input}. Any other native textarea attribute (e.g. `rows`, `placeholder`,
+ * `disabled`) is passed through.
+ *
+ * @example
+ * ```tsx
+ * const [bio, setBio] = createSignal('')
+ * <Textarea value={bio()} onInput={setBio} placeholder="Tell us about yourself" />
+ * ```
+ */
+export function Textarea(props: TextareaProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['value', 'onInput', 'class'])
+  return (
+    <textarea
+      class={cn(TEXTAREA_BASE, local.class)}
+      value={local.value}
+      onInput={(ev) => local.onInput(ev.currentTarget.value)}
+      {...rest}
+    />
+  )
+}

package/src/ui/TimeField.tsx

@@ -0,0 +1,298 @@
+// Compact custom time picker — no Kobalte primitive covers this yet, so this is
+// a small hand-rolled hour/minute (/ AM-PM) column picker in plain Solid + theme
+// tokens (works in light/dark). Reuses DateField's popover machinery verbatim:
+// a trigger button opens a portaled popover positioned `fixed` at the trigger's
+// viewport rect, closing on outside mousedown, Escape, scroll, or resize.
+import { Clock } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { For, Show, createEffect, createMemo, createSignal, onCleanup } from 'solid-js'
+import { Portal } from 'solid-js/web'
+
+import { cn } from '../lib/cn'
+
+type AmPm = 'AM' | 'PM'
+
+const HOURS24 = Array.from({ length: 24 }, (_, i) => i)
+const HOURS12 = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
+
+/** Zero-pad a non-negative integer to 2 digits. */
+function pad(n: number): string {
+  return `${n}`.padStart(2, '0')
+}
+
+/** Parse canonical "HH:MM" (24h) into `{h, m}`; null if malformed or out of range. */
+function parse(value: string): { h: number; m: number } | null {
+  const mm = /^(\d{2}):(\d{2})$/.exec(value)
+  if (!mm) return null
+  const h = Number(mm[1])
+  const m = Number(mm[2])
+  if (h < 0 || h > 23 || m < 0 || m > 59) return null
+  return { h, m }
+}
+
+/** Format an `{h, m}` pair as canonical "HH:MM" (24h, zero-padded). */
+function format(h: number, m: number): string {
+  return `${pad(h)}:${pad(m)}`
+}
+
+/** Convert a 24h hour to `{h12, ampm}` (12 stands for both 12AM and 12PM). */
+function to12(h24: number): { h12: number; ampm: AmPm } {
+  const ampm: AmPm = h24 < 12 ? 'AM' : 'PM'
+  let h12 = h24 % 12
+  if (h12 === 0) h12 = 12
+  return { h12, ampm }
+}
+
+/** Convert a 12h hour + AM/PM back to a 24h hour. */
+function to24(h12: number, ampm: AmPm): number {
+  if (ampm === 'AM') return h12 === 12 ? 0 : h12
+  return h12 === 12 ? 12 : h12 + 12
+}
+
+/** Human-readable trigger label, e.g. `15:05` or `3:05 PM`. */
+function displayLabel(value: string, hour12: boolean): string | null {
+  const p = parse(value)
+  if (!p) return null
+  if (hour12) {
+    const { h12, ampm } = to12(p.h)
+    return `${h12}:${pad(p.m)} ${ampm}`
+  }
+  return format(p.h, p.m)
+}
+
+export interface TimeFieldProps {
+  /** Selected time as canonical 24h "HH:MM" (e.g. "15:05"), or "" for none. */
+  value: string
+  /** Called with the newly picked time as "HH:MM" (24h). */
+  onChange: (value: string) => void
+  /** 12-hour display with AM/PM instead of 24-hour. @default false */
+  hour12?: boolean
+  /** Minute increment for the options list. @default 5 */
+  minuteStep?: number
+  /** Placeholder shown on the trigger when value is empty. */
+  label?: string
+  disabled?: boolean
+  class?: string
+}
+
+/**
+ * Compact hand-rolled hour/minute (/ AM-PM) column picker (no Kobalte primitive
+ * covers this yet). Trigger button opens a portaled popover; closes on outside
+ * click, Escape, scroll, or resize. Speaks plain 24h `HH:MM` strings.
+ *
+ * @example
+ * ```tsx
+ * const [time, setTime] = createSignal('15:05')
+ * <TimeField value={time()} onChange={setTime} label="Start time" hour12 />
+ * ```
+ */
+export function TimeField(props: TimeFieldProps): JSX.Element {
+  const [open, setOpen] = createSignal(false)
+  // Working selection shown/highlighted in the popover columns — 24h internally
+  // regardless of display mode. Seeded on open (see openPopover), not here.
+  const [workH, setWorkH] = createSignal(0)
+  const [workM, setWorkM] = createSignal(0)
+
+  let rootRef: HTMLDivElement | undefined
+  let btnRef: HTMLButtonElement | undefined
+  let popRef: HTMLDivElement | undefined
+  // The picker 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 popWidth = () => (props.hour12 ? 224 : 176) // w-56 / w-44
+
+  const place = () => {
+    if (!btnRef) return
+    const r = btnRef.getBoundingClientRect()
+    const w = popWidth()
+    const left = Math.max(8, Math.min(r.left, window.innerWidth - w - 8))
+    setPos({ top: r.bottom + 4, left })
+  }
+
+  const openPopover = () => {
+    if (props.disabled) return
+    const seed = parse(props.value)
+    if (seed) {
+      setWorkH(seed.h)
+      setWorkM(seed.m)
+    } else {
+      const step = props.minuteStep ?? 5
+      const now = new Date()
+      let h = now.getHours()
+      let m = Math.round(now.getMinutes() / step) * step
+      if (m >= 60) {
+        m -= 60
+        h = (h + 1) % 24
+      }
+      setWorkH(h)
+      setWorkM(m)
+    }
+    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 minuteOptions = createMemo(() => {
+    const step = props.minuteStep ?? 5
+    const out: number[] = []
+    for (let m = 0; m < 60; m += step) out.push(m)
+    return out
+  })
+
+  // Pick an hour: `value` is a 24h hour when hour12 is off, else the 12h label
+  // (1..12) which is combined with the current AM/PM to resolve the 24h hour.
+  const pickHour = (value: number) => {
+    const h24 = props.hour12 ? to24(value, to12(workH()).ampm) : value
+    setWorkH(h24)
+    props.onChange(format(h24, workM()))
+  }
+
+  const pickMinute = (m: number) => {
+    setWorkM(m)
+    props.onChange(format(workH(), m))
+  }
+
+  const pickAmPm = (ampm: AmPm) => {
+    const h24 = to24(to12(workH()).h12, ampm)
+    setWorkH(h24)
+    props.onChange(format(h24, workM()))
+  }
+
+  const optionClass = (selected: boolean) =>
+    cn(
+      'rounded-md px-2 py-1 text-left text-sm transition-colors',
+      selected ? 'bg-primary text-primary-foreground' : 'text-foreground hover:bg-muted',
+    )
+
+  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.hour12 ?? false) ? '' : 'text-muted-foreground'}>
+          {displayLabel(props.value, props.hour12 ?? false) ?? props.label ?? 'Select time'}
+        </span>
+        <Clock 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={cn(
+              'z-50 flex gap-1 divide-x divide-border rounded-lg border border-border bg-card p-2 text-card-foreground shadow-lg',
+              props.hour12 ? 'w-56' : 'w-44',
+            )}
+          >
+            <div
+              class="flex max-h-56 flex-1 flex-col gap-0.5 overflow-y-auto pr-1"
+              role="listbox"
+              aria-label="Hour"
+            >
+              <For each={props.hour12 ? HOURS12 : HOURS24}>
+                {(h) => {
+                  const isSel = () => (props.hour12 ? to12(workH()).h12 === h : workH() === h)
+                  return (
+                    <button
+                      type="button"
+                      role="option"
+                      aria-selected={isSel()}
+                      onClick={() => pickHour(h)}
+                      class={optionClass(isSel())}
+                    >
+                      {props.hour12 ? h : pad(h)}
+                    </button>
+                  )
+                }}
+              </For>
+            </div>
+
+            <div
+              class="flex max-h-56 flex-1 flex-col gap-0.5 overflow-y-auto px-1"
+              role="listbox"
+              aria-label="Minute"
+            >
+              <For each={minuteOptions()}>
+                {(m) => {
+                  const isSel = () => workM() === m
+                  return (
+                    <button
+                      type="button"
+                      role="option"
+                      aria-selected={isSel()}
+                      onClick={() => pickMinute(m)}
+                      class={optionClass(isSel())}
+                    >
+                      {pad(m)}
+                    </button>
+                  )
+                }}
+              </For>
+            </div>
+
+            <Show when={props.hour12}>
+              <div
+                class="flex max-h-56 flex-1 flex-col gap-0.5 overflow-y-auto pl-1"
+                role="listbox"
+                aria-label="AM or PM"
+              >
+                <For each={['AM', 'PM'] as const}>
+                  {(ampm) => {
+                    const isSel = () => to12(workH()).ampm === ampm
+                    return (
+                      <button
+                        type="button"
+                        role="option"
+                        aria-selected={isSel()}
+                        onClick={() => pickAmPm(ampm)}
+                        class={optionClass(isSel())}
+                      >
+                        {ampm}
+                      </button>
+                    )
+                  }}
+                </For>
+              </div>
+            </Show>
+          </div>
+        </Portal>
+      </Show>
+    </div>
+  )
+}

package/src/ui/Timeline.tsx

@@ -0,0 +1,89 @@
+// Vertical timeline: a continuous line with a tone-colored dot per event, plus
+// title / optional time / optional description. Semantic <ol>/<li>, theme-agnostic
+// tokens only (with fixed semantic accents like Badge/Stat use for success).
+import type { JSX } from 'solid-js'
+import { For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+/** Accent applied to a {@link TimelineItem}'s dot on the line. */
+export type TimelineTone = 'default' | 'primary' | 'success' | 'danger'
+
+const DOT_CLASSES: Record<TimelineTone, string> = {
+  default: 'bg-muted border border-border',
+  primary: 'bg-primary',
+  success: 'bg-emerald-500',
+  danger: 'bg-destructive',
+}
+
+/** A single event rendered by {@link Timeline}. */
+export interface TimelineItem {
+  /** Headline for the event (rendered emphasized). */
+  title: string
+  /** Optional supporting copy shown under the title. */
+  description?: string
+  /** Optional timestamp / relative time label. */
+  time?: string
+  /** Accent for the dot on the line. Defaults to `'default'`. */
+  tone?: TimelineTone
+}
+
+export interface TimelineProps {
+  items: TimelineItem[]
+  class?: string
+}
+
+/**
+ * Vertical timeline of events. A continuous line runs down the left with a
+ * tone-colored dot marking each entry; to the right sit the title, an optional
+ * right-aligned time, and an optional description. The line segment stops at the
+ * last item's dot. Renders as a semantic `<ol>`/`<li>` list.
+ *
+ * @example
+ * ```tsx
+ * <Timeline
+ *   items={[
+ *     { title: 'Order placed', time: '09:24', tone: 'primary' },
+ *     { title: 'Shipped', description: 'Left the warehouse.', time: '11:02', tone: 'success' },
+ *     { title: 'Delayed', description: 'Weather hold.', time: '14:30', tone: 'danger' },
+ *   ]}
+ * />
+ * ```
+ */
+export function Timeline(props: TimelineProps): JSX.Element {
+  return (
+    <ol class={cn('relative flex flex-col gap-6', props.class)}>
+      <For each={props.items}>
+        {(item, index) => (
+          <li class="relative flex gap-4 pl-2">
+            {/* Line segment: hidden on the last item so it doesn't extend past the dot. */}
+            <Show when={index() < props.items.length - 1}>
+              <span
+                aria-hidden="true"
+                class="absolute left-[calc(0.5rem+0.375rem)] top-3 -bottom-6 w-px -translate-x-1/2 bg-border"
+              />
+            </Show>
+            <span
+              aria-hidden="true"
+              class={cn(
+                'relative z-[1] mt-1 h-3 w-3 shrink-0 rounded-full',
+                DOT_CLASSES[item.tone ?? 'default'],
+              )}
+            />
+            <div class="min-w-0 flex-1">
+              <div class="flex items-baseline justify-between gap-3">
+                <p class="font-medium text-foreground">{item.title}</p>
+                <Show when={item.time}>
+                  <span class="shrink-0 text-xs text-muted-foreground">{item.time}</span>
+                </Show>
+              </div>
+              <Show when={item.description}>
+                <p class="mt-1 text-sm text-muted-foreground">{item.description}</p>
+              </Show>
+            </div>
+          </li>
+        )}
+      </For>
+    </ol>
+  )
+}

package/src/ui/Toast.tsx

@@ -0,0 +1,68 @@
+// Toast notifications on Kobalte's imperative `toaster` + `Toast.Region`.
+// Mount <Toaster /> once near the app root; call the `toast` helpers from
+// anywhere (pages, mutations' onError/onSuccess).
+import { Toast as KToast, toaster } from '@kobalte/core/toast'
+import type { JSX } from 'solid-js'
+import { Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+/** Visual/semantic tone of a toast — controls its border/background accent color. */
+export type ToastTone = 'success' | 'error' | 'info'
+
+const TONE_CLASSES: Record<ToastTone, string> = {
+  success: 'border-emerald-500/30 bg-emerald-500/10',
+  error: 'border-destructive/30 bg-destructive/10',
+  info: 'border-sky-500/30 bg-sky-500/10',
+}
+
+function show(tone: ToastTone, title: string, description?: string): void {
+  toaster.show((props) => (
+    <KToast
+      toastId={props.toastId}
+      class={cn(
+        // toast-item drives the slide+fade keyframes in styles.css, keyed off
+        // Kobalte's data-opened/data-closed presence (same animationend-only
+        // mechanism as Modal).
+        'toast-item flex w-full items-start gap-2 rounded-md border bg-card p-3 text-sm text-card-foreground shadow-sm ring-1 ring-border',
+        TONE_CLASSES[tone],
+      )}
+    >
+      <div class="flex-1">
+        <KToast.Title class="font-semibold">{title}</KToast.Title>
+        <Show when={description}>
+          <KToast.Description class="text-muted-foreground">{description}</KToast.Description>
+        </Show>
+      </div>
+      <KToast.CloseButton class="text-muted-foreground hover:text-foreground" aria-label="Close">
+        ✕
+      </KToast.CloseButton>
+    </KToast>
+  ))
+}
+
+/**
+ * Imperative API to show a toast notification from anywhere in the app (event
+ * handlers, mutation `onError`/`onSuccess`, etc.) — no component context
+ * needed. Requires a mounted {@link Toaster} to render into.
+ *
+ * @example
+ * ```tsx
+ * toast.success('Saved', 'Your changes were saved.')
+ * toast.error('Something went wrong')
+ * ```
+ */
+export const toast = {
+  success: (title: string, description?: string) => show('success', title, description),
+  error: (title: string, description?: string) => show('error', title, description),
+  info: (title: string, description?: string) => show('info', title, description),
+}
+
+/** Mount once near the app root — hosts the toast viewport. */
+export function Toaster(): JSX.Element {
+  return (
+    <KToast.Region duration={5000} swipeDirection="right">
+      <KToast.List class="fixed bottom-4 right-4 z-50 flex w-80 flex-col gap-2 outline-none" />
+    </KToast.Region>
+  )
+}

package/src/ui/Toggle.tsx

@@ -0,0 +1,41 @@
+// Two-state toggle button on Kobalte's ToggleButton primitive.
+import { ToggleButton as KToggleButton } from '@kobalte/core/toggle-button'
+import type { JSX, ParentProps } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+interface ToggleProps extends ParentProps {
+  /** Whether the toggle is pressed/"on". Controlled — pair with `onChange`. */
+  pressed: boolean
+  onChange: (pressed: boolean) => void
+  class?: string
+}
+
+/**
+ * Two-state toggle button (e.g. bold/italic, mute, favorite), built on
+ * Kobalte's ToggleButton primitive. `children` is the button's content
+ * (icon and/or text).
+ *
+ * @example
+ * ```tsx
+ * const [pressed, setPressed] = createSignal(false)
+ * <Toggle pressed={pressed()} onChange={setPressed}><StarIcon /></Toggle>
+ * ```
+ */
+export function Toggle(props: ToggleProps): JSX.Element {
+  return (
+    <KToggleButton
+      pressed={props.pressed}
+      onChange={props.onChange}
+      class={cn(
+        // Outlined at rest so it reads as a button; filled primary when pressed
+        // so the "on" state is unmistakable (the resting muted look alone made it
+        // look like stray text).
+        'inline-flex h-9 w-9 items-center justify-center rounded-md border border-border text-muted-foreground transition-colors hover:bg-muted hover:text-foreground data-[pressed]:border-primary data-[pressed]:bg-primary data-[pressed]:text-primary-foreground',
+        props.class,
+      )}
+    >
+      {props.children}
+    </KToggleButton>
+  )
+}

package/src/ui/ToggleGroup.tsx

@@ -0,0 +1,59 @@
+// Segmented button row on Kobalte's ToggleGroup primitive.
+import { ToggleGroup as KToggleGroup } from '@kobalte/core/toggle-group'
+import type { JSX } from 'solid-js'
+import { For } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+/** One option in a {@link ToggleGroup}: its `value` and visible `label`. */
+export interface ToggleGroupOption {
+  value: string
+  label: string
+}
+
+interface ToggleGroupProps {
+  /** Currently selected option's `value`, or `null` if none is selected. Controlled — pair with `onChange`. */
+  value: string | null
+  onChange: (value: string | null) => void
+  /** Options to render, in order, as segmented buttons. */
+  options: ToggleGroupOption[]
+  class?: string
+}
+
+/**
+ * Single-select segmented button row, built on Kobalte's ToggleGroup
+ * primitive — for exclusive-choice controls like view mode or alignment.
+ *
+ * @example
+ * ```tsx
+ * const [align, setAlign] = createSignal<string | null>('left')
+ * <ToggleGroup
+ *   value={align()}
+ *   onChange={setAlign}
+ *   options={[
+ *     { value: 'left', label: 'Left' },
+ *     { value: 'center', label: 'Center' },
+ *   ]}
+ * />
+ * ```
+ */
+export function ToggleGroup(props: ToggleGroupProps): JSX.Element {
+  return (
+    <KToggleGroup
+      value={props.value}
+      onChange={props.onChange}
+      class={cn('inline-flex gap-1 rounded-md border border-border bg-card p-1', props.class)}
+    >
+      <For each={props.options}>
+        {(option) => (
+          <KToggleGroup.Item
+            value={option.value}
+            class="rounded-sm px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground data-[pressed]:bg-primary data-[pressed]:text-primary-foreground"
+          >
+            {option.label}
+          </KToggleGroup.Item>
+        )}
+      </For>
+    </KToggleGroup>
+  )
+}