@a4ui/core 0.31.1 → 0.33.0

package/src/charts/RadarChart.tsx

@@ -0,0 +1,215 @@
+// RadarChart — a native SVG spider/radar chart (no charting library). Axes
+// are laid out clockwise starting at 12 o'clock, one spoke per dimension.
+// A faint concentric polygon grid marks reference levels, and each series is
+// drawn as a translucent-filled polygon connecting its normalized values.
+// Colors come from theme tokens, either per-series `tone` or, when omitted,
+// cycled across `--primary` / `--accent` by index.
+import { For, Show, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface RadarSeries {
+  name?: string
+  tone?: 'primary' | 'accent'
+  values: number[]
+}
+
+export interface RadarChartProps {
+  axes: string[]
+  series: RadarSeries[]
+  /** Value that reaches the outer edge of the grid. Default: max across all series. */
+  max?: number
+  /** Overall SVG width/height in px (square). Default 240. */
+  size?: number
+  class?: string
+}
+
+// Explicit tone -> CSS custom property name.
+const TONE_TOKENS: Record<'primary' | 'accent', string> = {
+  primary: '--primary',
+  accent: '--accent',
+}
+
+// Fallback rotation used when a series has no explicit `tone`.
+const CYCLE_TOKENS = ['--primary', '--accent'] as const
+
+/** Resolve the CSS custom property a series should stroke/fill with. */
+function tokenFor(series: RadarSeries, index: number): string {
+  if (series.tone) return TONE_TOKENS[series.tone]
+  return CYCLE_TOKENS[index % CYCLE_TOKENS.length]
+}
+
+const RING_LEVELS = 4
+const LABEL_OFFSET = 14
+// Extra viewBox margin (all sides) so axis-label text isn't clipped.
+const LABEL_PAD = 34
+
+/** Angle (in degrees) of axis `index` of `count`, starting at 12 o'clock and running clockwise. */
+function axisAngle(index: number, count: number): number {
+  return -90 + (360 / count) * index
+}
+
+/** Convert a polar coordinate (center + radius + angle in degrees) to cartesian `{ x, y }`. */
+function polarToPoint(cx: number, cy: number, r: number, angleDeg: number): { x: number; y: number } {
+  const rad = (angleDeg * Math.PI) / 180
+  return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) }
+}
+
+/** Build the `x,y ...` points attribute for a polygon at `radius` across all axes. */
+function ringPoints(cx: number, cy: number, radius: number, axisCount: number): string {
+  return Array.from({ length: axisCount }, (_, i) => {
+    const p = polarToPoint(cx, cy, radius, axisAngle(i, axisCount))
+    return `${p.x},${p.y}`
+  }).join(' ')
+}
+
+/** Text anchor for a label sitting outside the vertex at `angleDeg`. */
+function labelAnchor(angleDeg: number): 'start' | 'middle' | 'end' {
+  const cos = Math.cos((angleDeg * Math.PI) / 180)
+  if (cos > 0.1) return 'start'
+  if (cos < -0.1) return 'end'
+  return 'middle'
+}
+
+/** Dominant baseline for a label sitting outside the vertex at `angleDeg`. */
+function labelBaseline(angleDeg: number): 'auto' | 'hanging' | 'middle' {
+  const sin = Math.sin((angleDeg * Math.PI) / 180)
+  if (sin < -0.3) return 'auto'
+  if (sin > 0.3) return 'hanging'
+  return 'middle'
+}
+
+/**
+ * SVG spider/radar chart: a concentric polygon grid with one spoke per axis,
+ * and one translucent-filled polygon per series connecting its values
+ * (normalized by `max`, default the max value across all series). Series
+ * colors come from each datum's `tone`, or cycle through `primary`/`accent`
+ * by index when omitted. Shows a small legend when 2+ series have a `name`.
+ *
+ * @example
+ * ```tsx
+ * <RadarChart
+ *   axes={['Speed', 'Power', 'Range', 'Defense', 'Utility']}
+ *   series={[
+ *     { name: 'Model A', tone: 'primary', values: [80, 60, 90, 40, 70] },
+ *     { name: 'Model B', tone: 'accent', values: [50, 85, 60, 75, 55] },
+ *   ]}
+ * />
+ * ```
+ */
+export function RadarChart(props: RadarChartProps): JSX.Element {
+  const size = () => props.size ?? 240
+  const center = () => size() / 2
+  const outerRadius = () => Math.max(size() / 2 - LABEL_OFFSET * 2, 0)
+  const axisCount = () => props.axes.length
+  const max = () => props.max ?? Math.max(1, ...props.series.flatMap((s) => s.values))
+
+  const rings = () =>
+    Array.from({ length: RING_LEVELS }, (_, i) => {
+      const level = i + 1
+      return ringPoints(center(), center(), outerRadius() * (level / RING_LEVELS), axisCount())
+    })
+
+  const spokes = () =>
+    props.axes.map((_, i) => polarToPoint(center(), center(), outerRadius(), axisAngle(i, axisCount())))
+
+  const labels = () =>
+    props.axes.map((label, i) => {
+      const angle = axisAngle(i, axisCount())
+      const point = polarToPoint(center(), center(), outerRadius() + LABEL_OFFSET, angle)
+      return { label, x: point.x, y: point.y, anchor: labelAnchor(angle), baseline: labelBaseline(angle) }
+    })
+
+  const seriesPolygons = () => {
+    const grandMax = max()
+    return props.series.map((series, index) => {
+      const points = series.values
+        .map((value, i) => {
+          const fraction = grandMax > 0 ? Math.max(value, 0) / grandMax : 0
+          const p = polarToPoint(center(), center(), outerRadius() * fraction, axisAngle(i, axisCount()))
+          return `${p.x},${p.y}`
+        })
+        .join(' ')
+      return { series, index, points, token: tokenFor(series, index) }
+    })
+  }
+
+  const namedSeries = () => props.series.filter((s) => s.name)
+  const showLegend = () => namedSeries().length >= 2
+
+  return (
+    <div class={cn('inline-flex flex-col items-center gap-2', props.class)}>
+      <svg
+        width={size()}
+        height={size()}
+        // Pad the coordinate space so axis-label text near the left/right
+        // vertices isn't clipped by the viewBox edge (the plot scales down a
+        // touch to fit; the CSS footprint stays `size`).
+        viewBox={`${-LABEL_PAD} ${-LABEL_PAD} ${size() + LABEL_PAD * 2} ${size() + LABEL_PAD * 2}`}
+        role="img"
+        aria-label={`Radar chart comparing ${props.series.length} series across ${axisCount()} axes: ${props.axes.join(', ')}`}
+      >
+        <For each={rings()}>
+          {(points) => <polygon points={points} fill="none" stroke="hsl(var(--border))" stroke-width={1} />}
+        </For>
+        <For each={spokes()}>
+          {(point) => (
+            <line
+              x1={center()}
+              y1={center()}
+              x2={point.x}
+              y2={point.y}
+              stroke="hsl(var(--border))"
+              stroke-width={1}
+            />
+          )}
+        </For>
+        <For each={seriesPolygons()}>
+          {({ series, points, token }) => (
+            <polygon
+              points={points}
+              fill={`hsl(var(${token}) / 0.15)`}
+              stroke={`hsl(var(${token}))`}
+              stroke-width={2}
+              stroke-linejoin="round"
+            >
+              <Show when={series.name}>
+                <title>{series.name}</title>
+              </Show>
+            </polygon>
+          )}
+        </For>
+        <For each={labels()}>
+          {(item) => (
+            <text
+              x={item.x}
+              y={item.y}
+              text-anchor={item.anchor}
+              dominant-baseline={item.baseline}
+              class="text-xs fill-muted-foreground"
+            >
+              {item.label}
+            </text>
+          )}
+        </For>
+      </svg>
+      <Show when={showLegend()}>
+        <div class="flex flex-wrap items-center justify-center gap-x-3 gap-y-1">
+          <For each={seriesPolygons()}>
+            {({ series, token }) => (
+              <Show when={series.name}>
+                <span class="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
+                  <span
+                    class="inline-block size-2 rounded-full"
+                    style={{ 'background-color': `hsl(var(${token}))` }}
+                  />
+                  {series.name}
+                </span>
+              </Show>
+            )}
+          </For>
+        </div>
+      </Show>
+    </div>
+  )
+}

package/src/charts/StatusTracker.tsx

@@ -0,0 +1,81 @@
+// StatusTracker — a status-page style history bar built from plain flex
+// `div`s (no SVG, no charting library). Each segment is a thin rounded bar
+// colored by its status, with a native tooltip carrying the label. `ok`/
+// `degraded` reuse the same success/warning tones as `Alert`/`Badge`
+// (`emerald-500`/`amber-500` — the repo has no dedicated CSS token for
+// them); `down` uses the `--destructive` semantic token.
+import { For, Show, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface StatusSegment {
+  status: 'ok' | 'degraded' | 'down'
+  label?: string
+}
+
+export interface StatusTrackerProps {
+  segments: StatusSegment[]
+  class?: string
+}
+
+const STATUS_CLASSES: Record<StatusSegment['status'], string> = {
+  ok: 'bg-emerald-500',
+  degraded: 'bg-amber-500',
+  down: 'bg-destructive',
+}
+
+const STATUS_LABEL: Record<StatusSegment['status'], string> = {
+  ok: 'Operational',
+  degraded: 'Degraded',
+  down: 'Down',
+}
+
+/** Share of `segments` that are `'ok'`, formatted as e.g. `"98.7% uptime"`; `undefined` when empty. */
+function uptimeSummary(segments: StatusSegment[]): string | undefined {
+  if (segments.length === 0) return undefined
+  const ok = segments.filter((s) => s.status === 'ok').length
+  return `${((ok / segments.length) * 100).toFixed(1)}% uptime`
+}
+
+/**
+ * Status-page style history bar: a row of thin rounded segments colored by
+ * `status` (ok/degraded/down), each with a native hover tooltip showing its
+ * label and status, plus a summary uptime line above.
+ *
+ * @example
+ * ```tsx
+ * <StatusTracker
+ *   segments={[
+ *     { status: 'ok', label: 'Jul 1' },
+ *     { status: 'degraded', label: 'Jul 2' },
+ *     { status: 'ok', label: 'Jul 3' },
+ *     { status: 'down', label: 'Jul 4' },
+ *   ]}
+ * />
+ * ```
+ */
+export function StatusTracker(props: StatusTrackerProps): JSX.Element {
+  const summary = () => uptimeSummary(props.segments)
+
+  return (
+    <div class={cn('flex w-full flex-col gap-1.5', props.class)}>
+      <Show when={summary()}>
+        <span class="text-xs text-muted-foreground">{summary()}</span>
+      </Show>
+      <div class="flex w-full items-stretch gap-1">
+        <For each={props.segments}>
+          {(segment) => (
+            <div
+              title={
+                segment.label
+                  ? `${segment.label}: ${STATUS_LABEL[segment.status]}`
+                  : STATUS_LABEL[segment.status]
+              }
+              class={cn('h-6 flex-1 rounded-sm transition-colors', STATUS_CLASSES[segment.status])}
+            />
+          )}
+        </For>
+      </div>
+    </div>
+  )
+}

package/src/charts/index.ts

@@ -3,3 +3,9 @@
 export { Sparkline, type SparklineProps } from './Sparkline'
 export { BarChart, type BarDatum, type BarChartProps } from './BarChart'
 export { DonutChart, type DonutSegment, type DonutChartProps } from './DonutChart'
+export { LineChart, type LineSeries, type LineChartProps } from './LineChart'
+export { GaugeChart, type GaugeThreshold, type GaugeChartProps } from './GaugeChart'
+export { RadarChart, type RadarSeries, type RadarChartProps } from './RadarChart'
+export { BarList, type BarListDatum, type BarListProps } from './BarList'
+export { StatusTracker, type StatusSegment, type StatusTrackerProps } from './StatusTracker'
+export { CategoryBar, type CategoryBarTone, type CategoryBarProps } from './CategoryBar'

package/src/index.ts

@@ -8,7 +8,7 @@
 //   import '@a4ui/core/styles.css'
 //   import { Button, Card, Modal } from '@a4ui/core'
 
-export const A4UI_VERSION = '0.31.1'
+export const A4UI_VERSION = '0.33.0'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'
@@ -179,6 +179,36 @@ export { FocusBlurGroup, type FocusBlurGroupProps } from './ui/FocusBlurGroup'
 export { CardSpread, type CardSpreadProps, type CardSpreadLayout } from './ui/CardSpread'
 export { Carousel3D, type Carousel3DProps, type Carousel3DVariant } from './ui/Carousel3D'
 export { TimeMachineStack, type TimeMachineStackProps } from './ui/TimeMachineStack'
+
+// Spatial "wow" primitives (bento, dock, beams, meteors).
+export { BentoGrid, BentoCard, type BentoGridProps, type BentoCardProps } from './ui/BentoGrid'
+export { Dock, type DockItem, type DockProps } from './ui/Dock'
+export { AnimatedBeam, type AnimatedBeamProps } from './ui/AnimatedBeam'
+export { BorderBeam, type BorderBeamProps } from './ui/BorderBeam'
+export { Meteors, type MeteorsProps } from './ui/Meteors'
+
+// AI agent surface + chat affordances.
+export { ReasoningTrace, type ReasoningTraceProps } from './ui/ReasoningTrace'
+export {
+  ToolCallTimeline,
+  type ToolCall,
+  type ToolCallStatus,
+  type ToolCallTimelineProps,
+} from './ui/ToolCallTimeline'
+export { DiffViewer, type DiffLine, type DiffViewerProps } from './ui/DiffViewer'
+export { ModelPicker, type ModelOption, type ModelPickerProps } from './ui/ModelPicker'
+export { UsageMeter, type UsageMeterProps } from './ui/UsageMeter'
+export { SuggestionChips, type SuggestionChipsProps } from './ui/SuggestionChips'
+
+// Content blocks.
+export { Callout, type CalloutTone, type CalloutProps } from './ui/Callout'
+export { Snippet, type SnippetProps } from './ui/Snippet'
+
+// Spatial showpieces + motion extras.
+export { Globe, type GlobeMarker, type GlobeArc, type GlobeProps } from './ui/Globe'
+export { WorldMap, type WorldMapPoint, type WorldMapConnection, type WorldMapProps } from './ui/WorldMap'
+export { Confetti, fireConfetti, type ConfettiProps } from './ui/Confetti'
+export { CursorTrail, type CursorTrailProps } from './ui/CursorTrail'
 export {
   CopyButton,
   type CopyButtonProps,

package/src/ui/AnimatedBeam.tsx

@@ -0,0 +1,187 @@
+// AnimatedBeam — an absolutely-positioned SVG overlay that draws a curved
+// line between two elements (`fromRef` → `toRef`) inside a positioned
+// `containerRef`, with a faint static stroke under a traveling
+// primary→accent gradient segment that loops along the path. Path geometry
+// is recomputed on mount, on window resize, and via a ResizeObserver on the
+// container. No travel (static stroke only) under reduced motion.
+import { createEffect, createSignal, createUniqueId, onCleanup, onMount, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { animate, motionReduced } from '../lib/motion'
+
+export interface AnimatedBeamProps {
+  containerRef: HTMLElement | undefined
+  fromRef: HTMLElement | undefined
+  toRef: HTMLElement | undefined
+  /** Px the curve bows away from a straight line. @default 0 (straight) */
+  curvature?: number
+  /** Travel from `toRef` to `fromRef` instead of the default direction. */
+  reverse?: boolean
+  /** Seconds for one travel of the gradient segment. @default 3 */
+  duration?: number
+  class?: string
+}
+
+interface Point {
+  x: number
+  y: number
+}
+
+/**
+ * Renders an animated SVG "beam" connecting two elements: a faint static
+ * base stroke under a traveling gradient segment that loops from `fromRef`
+ * to `toRef` (or the reverse, with `reverse`). Absolutely positioned over
+ * `containerRef`, whose bounds establish the coordinate space both
+ * endpoints are measured against. Static (no travel) under reduced motion.
+ *
+ * @example
+ * ```tsx
+ * let container: HTMLDivElement | undefined
+ * let fromEl: HTMLDivElement | undefined
+ * let toEl: HTMLDivElement | undefined
+ *
+ * <div ref={container} class="relative flex items-center justify-between p-8">
+ *   <div ref={fromEl} class="size-10 rounded-full bg-card" />
+ *   <div ref={toEl} class="size-10 rounded-full bg-card" />
+ *   <AnimatedBeam containerRef={container} fromRef={fromEl} toRef={toEl} curvature={40} />
+ * </div>
+ * ```
+ */
+export function AnimatedBeam(props: AnimatedBeamProps): JSX.Element {
+  const [pathD, setPathD] = createSignal('')
+  const [size, setSize] = createSignal({ w: 0, h: 0 })
+  const gradientId = `beam-gradient-${createUniqueId()}`
+
+  let gradientEl: SVGLinearGradientElement | undefined
+  let start: Point = { x: 0, y: 0 }
+  let end: Point = { x: 0, y: 0 }
+  let control: Point = { x: 0, y: 0 }
+
+  const recompute = (): void => {
+    const container = props.containerRef
+    const from = props.fromRef
+    const to = props.toRef
+    if (!container || !from || !to) return
+
+    const containerRect = container.getBoundingClientRect()
+    const fromRect = from.getBoundingClientRect()
+    const toRect = to.getBoundingClientRect()
+
+    start = {
+      x: fromRect.left - containerRect.left + fromRect.width / 2,
+      y: fromRect.top - containerRect.top + fromRect.height / 2,
+    }
+    end = {
+      x: toRect.left - containerRect.left + toRect.width / 2,
+      y: toRect.top - containerRect.top + toRect.height / 2,
+    }
+
+    const curvature = props.curvature ?? 0
+    const mx = (start.x + end.x) / 2
+    const my = (start.y + end.y) / 2
+    const dx = end.x - start.x
+    const dy = end.y - start.y
+    const length = Math.hypot(dx, dy) || 1
+    control = {
+      x: mx + (-dy / length) * curvature,
+      y: my + (dx / length) * curvature,
+    }
+
+    setSize({ w: containerRect.width, h: containerRect.height })
+    setPathD(`M ${start.x} ${start.y} Q ${control.x} ${control.y} ${end.x} ${end.y}`)
+  }
+
+  /** Point at parameter `t` (0..1) along the quadratic curve. */
+  const pointAt = (t: number): Point => {
+    const it = 1 - t
+    return {
+      x: it * it * start.x + 2 * it * t * control.x + t * t * end.x,
+      y: it * it * start.y + 2 * it * t * control.y + t * t * end.y,
+    }
+  }
+
+  createEffect(() => {
+    // Track the refs reactively — recompute picks up the initial mount and
+    // any later change (e.g. a ref that resolves after this beam mounts).
+    void props.containerRef
+    void props.fromRef
+    void props.toRef
+    recompute()
+  })
+
+  onMount(() => {
+    const handleResize = (): void => recompute()
+    window.addEventListener('resize', handleResize)
+
+    let resizeObserver: ResizeObserver | undefined
+    if (props.containerRef && typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(() => recompute())
+      resizeObserver.observe(props.containerRef)
+    }
+
+    let controls: ReturnType<typeof animate> | undefined
+    if (!motionReduced()) {
+      const segment = 0.2
+      controls = animate(0, 1, {
+        duration: props.duration ?? 3,
+        repeat: Infinity,
+        ease: 'linear',
+        onUpdate: (p: number) => {
+          const t = props.reverse ? 1 - p : p
+          const lead = props.reverse ? Math.min(1, t + segment) : t
+          const trail = props.reverse ? t : Math.max(0, t - segment)
+          const from = pointAt(trail)
+          const to = pointAt(lead)
+          gradientEl?.setAttribute('x1', String(from.x))
+          gradientEl?.setAttribute('y1', String(from.y))
+          gradientEl?.setAttribute('x2', String(to.x))
+          gradientEl?.setAttribute('y2', String(to.y))
+        },
+      })
+    }
+
+    onCleanup(() => {
+      window.removeEventListener('resize', handleResize)
+      resizeObserver?.disconnect()
+      controls?.stop()
+    })
+  })
+
+  return (
+    <svg
+      aria-hidden="true"
+      class={cn('pointer-events-none absolute inset-0', props.class)}
+      width={size().w}
+      height={size().h}
+      viewBox={`0 0 ${size().w} ${size().h}`}
+      fill="none"
+    >
+      <path d={pathD()} stroke="hsl(var(--border))" stroke-width="2" stroke-opacity="0.4" fill="none" />
+      {!motionReduced() && (
+        <>
+          <defs>
+            <linearGradient
+              ref={(el) => {
+                gradientEl = el
+              }}
+              id={gradientId}
+              gradientUnits="userSpaceOnUse"
+            >
+              <stop offset="0%" stop-color="hsl(var(--primary))" stop-opacity="0" />
+              <stop offset="50%" stop-color="hsl(var(--primary))" />
+              <stop offset="50%" stop-color="hsl(var(--accent))" />
+              <stop offset="100%" stop-color="hsl(var(--accent))" stop-opacity="0" />
+            </linearGradient>
+          </defs>
+          <path
+            d={pathD()}
+            stroke={`url(#${gradientId})`}
+            stroke-width="2"
+            stroke-linecap="round"
+            fill="none"
+          />
+        </>
+      )}
+    </svg>
+  )
+}

package/src/ui/BentoGrid.tsx

@@ -0,0 +1,89 @@
+// BentoGrid + BentoCard — responsive grid of glass tiles with variable spans.
+import type { JSX } from 'solid-js'
+import { splitProps } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface BentoGridProps {
+  children: JSX.Element
+  class?: string
+}
+
+export interface BentoCardProps {
+  children: JSX.Element
+  /** Number of grid columns to span at `sm`+ (2) and `lg`+ (3). Defaults to 1. */
+  colSpan?: 1 | 2 | 3
+  /** Number of grid rows to span. Defaults to 1. */
+  rowSpan?: 1 | 2
+  class?: string
+}
+
+// Static lookup so Tailwind's content scanner can see the full class names
+// (dynamic `col-span-${n}` strings are invisible to it and get purged).
+const COL_SPAN_CLASSES: Record<NonNullable<BentoCardProps['colSpan']>, string> = {
+  1: '',
+  2: 'sm:col-span-2',
+  3: 'sm:col-span-2 lg:col-span-3',
+}
+
+const ROW_SPAN_CLASSES: Record<NonNullable<BentoCardProps['rowSpan']>, string> = {
+  1: '',
+  2: 'row-span-2',
+}
+
+/**
+ * Responsive CSS grid for bento-style layouts — 1 column on mobile, 2 at
+ * `sm`, 3 at `lg`. Compose with {@link BentoCard} tiles, using `colSpan`/
+ * `rowSpan` on each tile to create the varied-size bento look.
+ *
+ * @example
+ * ```tsx
+ * <BentoGrid>
+ *   <BentoCard colSpan={2} rowSpan={2}>
+ *     <h3 class="text-lg font-semibold">Overview</h3>
+ *   </BentoCard>
+ *   <BentoCard>
+ *     <h3 class="text-lg font-semibold">Uptime</h3>
+ *   </BentoCard>
+ *   <BentoCard>
+ *     <h3 class="text-lg font-semibold">Latency</h3>
+ *   </BentoCard>
+ *   <BentoCard colSpan={3}>
+ *     <h3 class="text-lg font-semibold">Recent activity</h3>
+ *   </BentoCard>
+ * </BentoGrid>
+ * ```
+ */
+export function BentoGrid(props: BentoGridProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+  return (
+    <div
+      class={cn(
+        'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 auto-rows-[minmax(11rem,auto)]',
+        local.class,
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  )
+}
+
+/** Glass tile for a {@link BentoGrid}, spanning columns/rows via `colSpan`/`rowSpan`. */
+export function BentoCard(props: BentoCardProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['class', 'children', 'colSpan', 'rowSpan'])
+  return (
+    <div
+      class={cn(
+        'rounded-2xl border border-border bg-card p-5 text-card-foreground overflow-hidden',
+        'transition-transform hover:-translate-y-0.5',
+        COL_SPAN_CLASSES[local.colSpan ?? 1],
+        ROW_SPAN_CLASSES[local.rowSpan ?? 1],
+        local.class,
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  )
+}