@adea-ai/ui 0.60.4 → 0.61.1

package/src/components/ui/alert-dialog/alert-dialog.tsx

@@ -0,0 +1,176 @@
+import { AlertDialog as KobalteAlertDialog } from '@kobalte/core/alert-dialog'
+import type { ComponentProps } from 'solid-js'
+import { createEffect, createSignal, splitProps } from 'solid-js'
+import { overlayMotion, overlayPositioner, overlayScrim, overlaySurface } from '#lib/overlay'
+import { cn } from '#lib/utils'
+
+/**
+ * AlertDialog.
+ *
+ * A dialog that cannot be dismissed by accident: Escape and a click on the scrim
+ * do nothing, and the user must choose one of the actions. That is the whole
+ * difference from Dialog, and it is why this exists as its own component rather
+ * than a prop — a caller has to reach for it deliberately.
+ *
+ * The consequence is a rule of use: this is for confirming a destructive or
+ * irreversible step. Wrapping an ordinary form in an AlertDialog traps someone who
+ * wants to back out.
+ *
+ * There is deliberately no close button in the corner. An X has no label, and the
+ * point of this surface is that every exit is a named choice.
+ */
+export function AlertDialog(props: ComponentProps<typeof KobalteAlertDialog>) {
+  return <KobalteAlertDialog {...props} />
+}
+
+export function AlertDialogTrigger(props: ComponentProps<typeof KobalteAlertDialog.Trigger>) {
+  return <KobalteAlertDialog.Trigger {...props} />
+}
+
+export function AlertDialogPortal(props: ComponentProps<typeof KobalteAlertDialog.Portal>) {
+  return <KobalteAlertDialog.Portal {...props} />
+}
+
+export function AlertDialogOverlay(props: ComponentProps<typeof KobalteAlertDialog.Overlay>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <KobalteAlertDialog.Overlay
+      class={cn(
+        overlayScrim,
+        'data-expanded:animate-in data-expanded:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+/**
+ * The panel.
+ *
+ * Kobalte's `AlertDialog.Content` is `Dialog.Content` with `role="alertdialog"`
+ * and nothing else — Escape and an outside click dismiss it exactly as they
+ * dismiss a Dialog. That is a real gap in the primitive, so the blocking is
+ * implemented here, and it is the whole difference between this component and a
+ * Dialog:
+ *
+ *   - Escape is prevented, because a key that closes a confirmation is a key that
+ *     makes "confirm" meaningless.
+ *   - Pointer and focus interactions outside are prevented, including the scrim
+ *     click, for the same reason.
+ *
+ * There is deliberately no prop to turn this off. A surface that can be escaped
+ * accidentally does not need to be an AlertDialog; it is a Dialog, and using this
+ * one would be a claim about the flow that is not true.
+ */
+const blockDismissal = {
+  onEscapeKeyDown: (event: KeyboardEvent) => event.preventDefault(),
+  onPointerDownOutside: (event: Event) => event.preventDefault(),
+  onFocusOutside: (event: Event) => event.preventDefault(),
+  onInteractOutside: (event: Event) => event.preventDefault(),
+} as const
+
+export function AlertDialogContent(props: ComponentProps<typeof KobalteAlertDialog.Content>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <KobalteAlertDialog.Portal>
+      <AlertDialogOverlay />
+      <div class={overlayPositioner}>
+        <KobalteAlertDialog.Content
+          {...blockDismissal}
+          class={cn(overlaySurface, overlayMotion, 'grid w-full max-w-md gap-4 p-5', local.class)}
+          {...rest}
+        />
+      </div>
+    </KobalteAlertDialog.Portal>
+  )
+}
+
+export function AlertDialogHeader(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      class={cn('flex flex-col gap-1.5 text-start', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function AlertDialogFooter(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      class={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function AlertDialogTitle(props: ComponentProps<typeof KobalteAlertDialog.Title>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <KobalteAlertDialog.Title
+      class={cn('text-base leading-none font-semibold tracking-tight', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function AlertDialogDescription(
+  props: ComponentProps<typeof KobalteAlertDialog.Description>
+) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <KobalteAlertDialog.Description
+      class={cn('text-muted-foreground text-sm', local.class)}
+      {...rest}
+    />
+  )
+}
+
+/**
+ * One of the dialog's two named choices.
+ *
+ * Kobalte labels its close button "Dismiss" by default, because a generic close
+ * button is usually an icon with no text of its own. In an AlertDialog it is
+ * something else: the named choices. An `aria-label` there *replaces* the visible
+ * text, so a screen reader hears "Dismiss" twice and the user cannot tell the
+ * destructive action from the safe one.
+ *
+ * The injected label is removed rather than overridden with an empty one. An empty
+ * `aria-label` is not reliably ignored — some name computations treat its presence
+ * as an explicit empty name, which leaves the button unnamed — so the attribute
+ * has to go, and the visible text becomes the name. A caller whose button is an
+ * icon passes its own `aria-label`, and that one is left alone.
+ *
+ * Applied through a layout-neutral wrapper because Kobalte keeps the `ref` for its
+ * own dismissable layer and does not forward it. The wrapper is `display: contents`
+ * so the button remains the flex item its parent lays out.
+ */
+function AlertDialogChoice(props: ComponentProps<typeof KobalteAlertDialog.CloseButton>) {
+  const [local, rest] = splitProps(props, ['class', 'aria-label'])
+  const [wrapper, setWrapper] = createSignal<HTMLSpanElement>()
+
+  createEffect(() => {
+    const root = wrapper()
+    if (!root || local['aria-label'] !== undefined) return
+    root.querySelector('button')?.removeAttribute('aria-label')
+  })
+
+  return (
+    <span ref={setWrapper} class="contents">
+      <KobalteAlertDialog.CloseButton class={cn(local.class)} {...rest} />
+    </span>
+  )
+}
+
+export function AlertDialogAction(props: ComponentProps<typeof KobalteAlertDialog.CloseButton>) {
+  return <AlertDialogChoice {...props} />
+}
+
+export function AlertDialogCancel(props: ComponentProps<typeof KobalteAlertDialog.CloseButton>) {
+  return <AlertDialogChoice {...props} />
+}

package/src/components/ui/alert-dialog/index.ts

@@ -0,0 +1,13 @@
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from './alert-dialog'

package/src/components/ui/aspect-ratio/aspect-ratio.tsx

@@ -0,0 +1,38 @@
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+
+/**
+ * AspectRatio.
+ *
+ * Holds a box to a ratio so its content cannot change the layout as it loads. The
+ * problem it solves is a specific one: an image or an embed whose intrinsic size is
+ * unknown until it arrives pushes everything below it down when it does, and a
+ * preview or a grid of cards is where that is most visible.
+ *
+ * CSS `aspect-ratio` rather than the padding-top trick a decade of libraries used:
+ * the property is supported everywhere this system runs, it does not require a
+ * wrapper element, and it does not break when the child is positioned.
+ *
+ * The child fills the box, so a caller passes the image, video or iframe directly
+ * and never sizes it.
+ */
+export type AspectRatioProps = ComponentProps<'div'> & {
+  /** Width divided by height, e.g. `16 / 9` or `1`. */
+  ratio?: number
+}
+
+export function AspectRatio(props: AspectRatioProps) {
+  const [local, rest] = splitProps(props, ['class', 'ratio', 'children'])
+
+  return (
+    <div
+      data-slot="aspect-ratio"
+      style={{ 'aspect-ratio': String(local.ratio ?? 16 / 9) }}
+      class={cn('relative w-full [&>*]:absolute [&>*]:inset-0 [&>*]:size-full', local.class)}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  )
+}

package/src/components/ui/aspect-ratio/index.ts

@@ -0,0 +1 @@
+export { AspectRatio, type AspectRatioProps } from './aspect-ratio'

package/src/components/ui/avatar/avatar.tsx

@@ -0,0 +1,114 @@
+import type { ComponentProps } from 'solid-js'
+import { createSignal, Show, splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+
+/**
+ * Avatar.
+ *
+ * The fallback is painted *under* the image and the image is removed on error,
+ * which is the arrangement that avoids every flicker case: a cached image
+ * covers the fallback on the first paint, a slow image shows the fallback
+ * until it arrives, and a broken image leaves the fallback in place instead of
+ * a browser glyph.
+ *
+ * Initials are derived here so the rule lives in one place rather than in
+ * every caller's string slicing: two words give two letters, one word gives
+ * one, and a name with no letters gives nothing rather than a stray dot.
+ */
+export function initialsFrom(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean)
+  const first = parts[0]?.[0] ?? ''
+  if (!first) return ''
+  const last = parts.length > 1 ? (parts[parts.length - 1]?.[0] ?? '') : ''
+  return (first + last).toUpperCase()
+}
+
+const avatarSizes = {
+  xs: 'size-5 text-2xs',
+  sm: 'size-6 text-2xs',
+  md: 'size-8 text-xs',
+  lg: 'size-10 text-sm',
+  xl: 'size-12 text-base',
+} as const
+
+export type AvatarProps = ComponentProps<'span'> & {
+  size?: keyof typeof avatarSizes
+}
+
+export function Avatar(props: AvatarProps) {
+  const [local, rest] = splitProps(props, ['class', 'size'])
+
+  return (
+    <span
+      data-slot="avatar"
+      class={cn(
+        'relative flex shrink-0 overflow-hidden rounded-full select-none',
+        avatarSizes[local.size ?? 'md'],
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export type AvatarImageProps = Omit<ComponentProps<'img'>, 'onError'> & {
+  onLoadingStatusChange?: (status: 'loading' | 'loaded' | 'error') => void
+}
+
+export function AvatarImage(props: AvatarImageProps) {
+  const [local, rest] = splitProps(props, ['class', 'alt', 'onLoadingStatusChange'])
+  const [status, setStatus] = createSignal<'loading' | 'loaded' | 'error'>('loading')
+
+  const update = (next: 'loading' | 'loaded' | 'error') => {
+    setStatus(next)
+    local.onLoadingStatusChange?.(next)
+  }
+
+  return (
+    <Show when={status() !== 'error'}>
+      <img
+        data-slot="avatar-image"
+        alt={local.alt ?? ''}
+        class={cn('absolute inset-0 z-10 aspect-square size-full object-cover', local.class)}
+        onLoad={() => update('loaded')}
+        onError={() => update('error')}
+        {...rest}
+      />
+    </Show>
+  )
+}
+
+export type AvatarFallbackProps = ComponentProps<'span'> & {
+  /** A person or entity name. Initials are derived from it. */
+  name?: string
+  /** Replace the derived initials with a glyph or emoji string. */
+  content?: string
+  /** How long to wait before showing the fallback, in ms. 0 shows it at once. */
+  delay?: number
+}
+
+export function AvatarFallback(props: AvatarFallbackProps) {
+  const [local, rest] = splitProps(props, ['class', 'name', 'content', 'delay'])
+  const [revealed, setRevealed] = createSignal((local.delay ?? 0) <= 0)
+
+  if ((local.delay ?? 0) > 0) {
+    setTimeout(() => setRevealed(true), local.delay)
+  }
+
+  const label = () => local.content ?? initialsFrom(local.name ?? '')
+
+  return (
+    <span
+      data-slot="avatar-fallback"
+      class={cn(
+        'bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full font-medium',
+        { 'opacity-0': !revealed() },
+        local.class
+      )}
+      {...rest}
+    >
+      <span aria-hidden="true">{label()}</span>
+      {local.name ? <span class="visually-hidden">{local.name}</span> : null}
+    </span>
+  )
+}

package/src/components/ui/avatar/index.ts

@@ -0,0 +1,9 @@
+export {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  initialsFrom,
+  type AvatarFallbackProps,
+  type AvatarImageProps,
+  type AvatarProps,
+} from './avatar'

package/src/components/ui/badge/badge.tsx

@@ -0,0 +1,59 @@
+import { Polymorphic, type PolymorphicProps } from '@kobalte/core/polymorphic'
+import { type ComponentProps, splitProps, type ValidComponent } from 'solid-js'
+import { cva, type VariantProps } from '#lib/variants'
+import { cn } from '#lib/utils'
+
+/**
+ * Badge.
+ *
+ * A short, non-interactive status label. If it can be clicked it is a Button
+ * with `size="2xs"`, not a Badge — the difference matters because a Badge
+ * carries no focus or pressed state and must never be the only way to reach an
+ * action.
+ */
+export const badgeVariants = cva(
+  'inline-flex w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-md border border-transparent font-medium transition-colors [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-3',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground',
+        secondary: 'bg-secondary text-secondary-foreground',
+        outline: 'border-border text-foreground',
+        /** Tinted status fills, for counts and states rather than actions. */
+        success: 'bg-success-subtle text-success',
+        warning: 'bg-warning-subtle text-warning',
+        destructive: 'bg-destructive-subtle text-destructive',
+        info: 'bg-info-subtle text-info',
+        subtle: 'bg-primary-subtle text-primary',
+      },
+      size: {
+        sm: 'h-4 px-1.5 text-2xs',
+        md: 'h-5 px-2 text-xs',
+        lg: 'h-6 px-2.5 text-xs',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  }
+)
+
+type BadgeVariantProps = VariantProps<typeof badgeVariants>
+
+export type BadgeProps<T extends ValidComponent = 'span'> = PolymorphicProps<
+  T,
+  BadgeVariantProps & { class?: string }
+>
+
+export function Badge<T extends ValidComponent = 'span'>(props: BadgeProps<T>) {
+  const [local, rest] = splitProps(props as BadgeProps, ['variant', 'size', 'class'])
+
+  return (
+    <Polymorphic
+      as="span"
+      class={cn(badgeVariants({ variant: local.variant, size: local.size }), local.class)}
+      {...(rest as ComponentProps<'span'>)}
+    />
+  )
+}

package/src/components/ui/badge/index.ts

@@ -0,0 +1 @@
+export { Badge, badgeVariants, type BadgeProps } from './badge'

package/src/components/ui/board/board.tsx

@@ -0,0 +1,254 @@
+import { createMemo, createSignal, For, Show, splitProps, type JSX } from 'solid-js'
+import { cva, type VariantProps } from '#lib/variants'
+import { cn } from '#lib/utils'
+
+/**
+ * Board.
+ *
+ * Columns of cards, with drag between them — the shape a task tracker, a CRM
+ * pipeline, a support queue and a release plan all share. It is generic in the
+ * one place that matters: the *column ids are the caller's*, and so is the rule
+ * that decides which moves are legal. The component knows nothing about tasks.
+ *
+ * The transitions are a predicate rather than a derived table because the legal
+ * moves in a real product are not "any column to any column". A task that is
+ * `completed` may be archived but not re-queued; a lead may become a customer but
+ * not a stranger again. A board that let you drop anything anywhere would encode
+ * a state machine in the UI that the server rejects — so `canDrop` is required,
+ * and a column that cannot receive the dragged card renders as unavailable rather
+ * than silently accepting a drop that will fail.
+ *
+ * Three input methods, because a drag-only board is unusable by keyboard:
+ * dragging with the pointer, `Ctrl`/`Cmd` + arrow keys to move a focused card
+ * between columns, and whatever the caller wires into `actions`. The card is
+ * focusable and its move is announced through a live region, so the board is
+ * operable without a mouse.
+ *
+ * The card is rendered by the caller through `children`, given the item and a set
+ * of drag props. That is deliberate: a card's contents are domain — a title, a
+ * priority tag, an assignee — and a board that rendered them itself could only
+ * ever serve one product.
+ */
+
+export type BoardColumn = Readonly<{
+  id: string
+  label: string
+  /** A count or a limit, shown beside the label. */
+  meta?: JSX.Element
+  /** Dim the column and refuse drops — a lane that is closed or read-only. */
+  disabled?: boolean
+}>
+
+export type BoardMove = Readonly<{
+  itemId: string
+  from: string
+  to: string
+}>
+
+export type BoardProps<T> = {
+  columns: readonly BoardColumn[]
+  items: readonly T[]
+  /** The item's stable id. */
+  itemId: (item: T) => string
+  /** The id of the column the item currently sits in. */
+  itemColumn: (item: T) => string
+  /** Whether `item` may move from `from` to `to`. Required: see the note above. */
+  canDrop: (item: T, from: string, to: string) => boolean
+  onMove: (move: BoardMove) => void
+  /** The card body. `dragging` is true while this card is the one being dragged. */
+  children: (item: T, state: { dragging: boolean }) => JSX.Element
+  /** Shown when a column has no items. */
+  emptyColumn?: (column: BoardColumn) => JSX.Element
+  /** The board's accessible name. Defaults to "Board". */
+  label?: string
+  class?: string
+}
+
+const cardDragState = {
+  idle: '',
+  dragging: 'opacity-40',
+} as const
+
+export function Board<T>(props: BoardProps<T>) {
+  const [local] = splitProps(props, [
+    'columns',
+    'items',
+    'itemId',
+    'itemColumn',
+    'canDrop',
+    'onMove',
+    'children',
+    'emptyColumn',
+    'label',
+    'class',
+  ])
+
+  // The dragged item, not its id: `canDrop` takes the item itself, and the
+  // pointer may leave the card before it is dropped.
+  const [dragging, setDragging] = createSignal<T | null>(null)
+  const [overColumn, setOverColumn] = createSignal<string | null>(null)
+  const [announcement, setAnnouncement] = createSignal('')
+
+  const byColumn = createMemo(() => {
+    const grouped = new Map<string, T[]>()
+    for (const column of local.columns) grouped.set(column.id, [])
+    for (const item of local.items) grouped.get(local.itemColumn(item))?.push(item)
+    return grouped
+  })
+
+  const accepts = (column: BoardColumn) => {
+    const item = dragging()
+    return Boolean(
+      item && !column.disabled && local.canDrop(item, local.itemColumn(item), column.id)
+    )
+  }
+
+  const drop = (column: BoardColumn) => {
+    const item = dragging()
+    const from = item ? local.itemColumn(item) : null
+    setDragging(null)
+    setOverColumn(null)
+    if (!item || !from || from === column.id || !accepts(column)) return
+    local.onMove({ itemId: local.itemId(item), from, to: column.id })
+  }
+
+  /**
+   * Keyboard move. `Ctrl`/`Cmd` plus an arrow is the convention for "reorder this
+   * thing within its container" that does not collide with scrolling or with the
+   * text caret, and it is the same chord a browser tab or a spreadsheet uses.
+   */
+  const moveByKeyboard = (item: T, direction: -1 | 1) => {
+    const from = local.itemColumn(item)
+    const index = local.columns.findIndex((column) => column.id === from)
+    const candidates = local.columns.slice(index + direction)
+    const ordered = direction === 1 ? candidates : candidates.toReversed()
+    const target = ordered.find(
+      (column) => !column.disabled && local.canDrop(item, from, column.id)
+    )
+    if (!target) {
+      setAnnouncement(`No column after ${from} accepts this item`)
+      return
+    }
+    local.onMove({ itemId: local.itemId(item), from, to: target.id })
+    setAnnouncement(`Moved to ${target.label}`)
+  }
+
+  return (
+    /*
+      `role="region"` + `tabindex="0"` because the board scrolls horizontally and a
+      keyboard user has to be able to scroll it — axe's `scrollable-region-focusable`.
+      It is not enough that the cards are focusable: a board with empty columns, or
+      with more columns than fit, has nothing focusable to scroll from.
+    */
+    <div
+      class={cn('flex min-h-0 gap-4 overflow-x-auto pb-2', local.class)}
+      role="region"
+      aria-label={local.label ?? 'Board'}
+      tabindex="0"
+    >
+      <For each={local.columns}>
+        {(column) => {
+          const items = () => byColumn().get(column.id) ?? []
+          return (
+            <section
+              class={cn(
+                'flex w-72 shrink-0 flex-col gap-2 rounded-lg border border-border bg-muted/40 p-2',
+                accepts(column) && 'border-ring bg-muted',
+                overColumn() === column.id && !accepts(column) && 'border-dashed opacity-60',
+                column.disabled && 'opacity-50'
+              )}
+              aria-label={column.label}
+              onDragOver={(event) => {
+                setOverColumn(column.id)
+                if (accepts(column)) event.preventDefault()
+              }}
+              onDragLeave={() =>
+                setOverColumn((current) => (current === column.id ? null : current))
+              }
+              onDrop={(event) => {
+                event.preventDefault()
+                drop(column)
+              }}
+            >
+              <header class="flex items-center justify-between gap-2 px-1 py-0.5">
+                <h3 class="text-xs font-semibold text-foreground">{column.label}</h3>
+                <Show when={column.meta}>
+                  <span class="text-2xs text-muted-foreground">{column.meta}</span>
+                </Show>
+              </header>
+              <div class="flex min-h-16 flex-col gap-2">
+                <For each={items()}>
+                  {(item) => {
+                    const isDragging = () => {
+                      const current = dragging()
+                      return Boolean(current && local.itemId(current) === local.itemId(item))
+                    }
+                    return (
+                      <article
+                        class={cn(
+                          'rounded-md border border-border bg-card text-sm shadow-xs',
+                          cardDragState[isDragging() ? 'dragging' : 'idle']
+                        )}
+                        // A board card is a control that can be moved, so it is
+                        // focusable and carries the chord it responds to.
+                        tabindex="0"
+                        aria-roledescription="Draggable card"
+                        draggable={true}
+                        onDragStart={() => setDragging(() => item)}
+                        onDragEnd={() => {
+                          setDragging(null)
+                          setOverColumn(null)
+                        }}
+                        onKeyDown={(event) => {
+                          if (!(event.ctrlKey || event.metaKey)) return
+                          if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return
+                          event.preventDefault()
+                          moveByKeyboard(item, event.key === 'ArrowRight' ? 1 : -1)
+                        }}
+                      >
+                        {local.children(item, { dragging: isDragging() })}
+                      </article>
+                    )
+                  }}
+                </For>
+                <Show when={items().length === 0}>
+                  <p class="rounded-md border border-dashed border-border px-2 py-4 text-center text-2xs text-muted-foreground">
+                    {local.emptyColumn?.(column) ?? 'Nothing here'}
+                  </p>
+                </Show>
+              </div>
+            </section>
+          )
+        }}
+      </For>
+      {/*
+        The keyboard move's result, announced. A drag speaks for itself — the card
+        visibly moves — while a keyboard move happens with the focus elsewhere.
+      */}
+      <div class="visually-hidden" role="status" aria-live="polite">
+        {announcement()}
+      </div>
+    </div>
+  )
+}
+
+export const boardCardTitleVariants = cva('truncate font-medium text-foreground', {
+  variants: { size: { sm: 'text-xs', md: 'text-sm' } },
+  defaultVariants: { size: 'md' },
+})
+
+export type BoardCardTitleProps = { class?: string; children: JSX.Element } & VariantProps<
+  typeof boardCardTitleVariants
+>
+
+/** The card's title line, at the size a board card uses. */
+export function BoardCardTitle(props: BoardCardTitleProps) {
+  return (
+    <h4 class={cn(boardCardTitleVariants({ size: props.size }), props.class)}>{props.children}</h4>
+  )
+}
+
+/** A card's padding, so every card in an application is the same shape. */
+export function BoardCardBody(props: { class?: string; children: JSX.Element }) {
+  return <div class={cn('grid gap-1.5 p-2.5', props.class)}>{props.children}</div>
+}

package/src/components/ui/board/index.ts

@@ -0,0 +1,10 @@
+export {
+  Board,
+  BoardCardBody,
+  BoardCardTitle,
+  boardCardTitleVariants,
+  type BoardCardTitleProps,
+  type BoardColumn,
+  type BoardMove,
+  type BoardProps,
+} from './board'