@adea-ai/ui 0.60.3 → 0.61.0

package/src/components/ui/breadcrumb/breadcrumb.tsx

@@ -0,0 +1,117 @@
+import { ChevronRight, MoreHorizontal } from 'lucide-solid'
+import type { ComponentProps } from 'solid-js'
+import { Show, splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+
+/**
+ * Breadcrumb.
+ *
+ * The path to the current view, in a real `<nav>` wrapping an ordered list so
+ * the structure is announced rather than read as loose text. The final crumb is
+ * the current page and is marked `aria-current="page"` instead of being a link
+ * to itself.
+ *
+ * A long path collapses from the middle: the root says where the user started
+ * and the last crumbs say what they are looking at, so those are the parts that
+ * have to survive.
+ */
+export function Breadcrumb(props: ComponentProps<'nav'>) {
+  const [local, rest] = splitProps(props, ['class', 'aria-label'])
+
+  return (
+    <nav
+      data-slot="breadcrumb"
+      aria-label={local['aria-label'] ?? 'Breadcrumb'}
+      class={cn('text-muted-foreground', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function BreadcrumbList(props: ComponentProps<'ol'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      class={cn('flex flex-wrap items-center gap-1.5 text-sm break-words', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function BreadcrumbItem(props: ComponentProps<'li'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      class={cn('inline-flex items-center gap-1.5', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export type BreadcrumbLinkProps = ComponentProps<'a'> & {
+  /** Render as the current page rather than as a link. */
+  current?: boolean
+}
+
+export function BreadcrumbLink(props: BreadcrumbLinkProps) {
+  const [local, rest] = splitProps(props, ['class', 'current'])
+
+  return (
+    <Show
+      when={!local.current}
+      fallback={
+        <span
+          data-slot="breadcrumb-page"
+          aria-current="page"
+          class={cn('font-medium text-foreground', local.class)}
+          {...(rest as ComponentProps<'span'>)}
+        />
+      }
+    >
+      <a
+        data-slot="breadcrumb-link"
+        class={cn(
+          'rounded-sm transition-colors ease-out outline-none hover:text-foreground',
+          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
+          local.class
+        )}
+        {...rest}
+      />
+    </Show>
+  )
+}
+
+export function BreadcrumbSeparator(props: ComponentProps<'li'>) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      class={cn('[&_svg]:size-3.5', local.class)}
+      {...rest}
+    >
+      {local.children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+export function BreadcrumbEllipsis(props: ComponentProps<'span'>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      class={cn('flex size-6 items-center justify-center', local.class)}
+      {...rest}
+    >
+      <MoreHorizontal class="size-4" />
+      <span class="visually-hidden">More</span>
+    </span>
+  )
+}

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

@@ -0,0 +1,9 @@
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+  type BreadcrumbLinkProps,
+} from './breadcrumb'

package/src/components/ui/button/button.tsx

@@ -0,0 +1,89 @@
+import { Polymorphic, type PolymorphicProps } from '@kobalte/core/polymorphic'
+import { type ComponentProps, splitProps, type ValidComponent } from 'solid-js'
+import { cva, controlInteractive, controlSize, type VariantProps } from '#lib/variants'
+import { cn } from '#lib/utils'
+
+/**
+ * Button.
+ *
+ * One appearance ladder shared by every pressable thing in the system: a
+ * button, a toolbar control, a dialog action, and a menu row all draw from the
+ * same tokens, so a row of them cannot drift apart.
+ *
+ * The variants answer "what is this for", never "what colour is it". A caller
+ * that wants a red button writes `variant="destructive"`; the red lives here.
+ * That is also what lets the design-system linter tell a caller which variant
+ * to use instead of only which class was wrong.
+ *
+ * Polymorphic: pass `as="a"` (or any component) and the button becomes it
+ * while keeping the same styling contract. This replaces the React-era
+ * `asChild` primitive, which has no Solid equivalent that preserves props.
+ */
+export const buttonVariants = cva(
+  `${controlInteractive} inline-flex shrink-0 items-center justify-center rounded-md font-medium whitespace-nowrap select-none [&_svg]:pointer-events-none [&_svg]:shrink-0`,
+  {
+    variants: {
+      variant: {
+        /** The one primary action in a view. */
+        default: 'bg-primary text-primary-foreground hover:bg-primary-hover',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-surface-hover',
+        /** For the action that destroys something. Never the default. */
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive-subtle',
+        /** A bordered button for a surface that already has a fill. */
+        outline:
+          'border border-border bg-transparent text-foreground hover:bg-surface-hover hover:border-input',
+        /** No chrome until hover. The default for toolbar and row actions. */
+        ghost: 'text-foreground hover:bg-surface-hover',
+        /** A tinted primary, for a secondary action inside a primary flow. */
+        subtle: 'bg-primary-subtle text-primary hover:bg-primary-subtle/80',
+        success: 'bg-success text-success-foreground hover:bg-success/90',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        '2xs': `${controlSize['2xs']} [&_svg]:size-3`,
+        xs: `${controlSize.xs} [&_svg]:size-3.5`,
+        sm: `${controlSize.sm} [&_svg]:size-3.5`,
+        md: `${controlSize.md} [&_svg]:size-4`,
+        lg: `${controlSize.lg} [&_svg]:size-4`,
+        xl: `${controlSize.xl} [&_svg]:size-5`,
+        /* Square, for an icon with no label. The accessible name then has to
+           come from `aria-label` or a visually hidden label — an icon-only
+           button with neither is the accessibility finding the Storybook lane
+           catches on every story. */
+        'icon-2xs': 'size-control-2xs p-0 [&_svg]:size-3',
+        'icon-xs': 'size-control-xs p-0 [&_svg]:size-3.5',
+        'icon-sm': 'size-control-sm p-0 [&_svg]:size-3.5',
+        'icon-md': 'size-control-md p-0 [&_svg]:size-4',
+        'icon-lg': 'size-control-lg p-0 [&_svg]:size-4',
+        'icon-xl': 'size-control-xl p-0 [&_svg]:size-5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  }
+)
+
+type ButtonVariantProps = VariantProps<typeof buttonVariants>
+
+export type ButtonProps<T extends ValidComponent = 'button'> = PolymorphicProps<
+  T,
+  ButtonVariantProps & {
+    class?: string
+  }
+>
+
+export function Button<T extends ValidComponent = 'button'>(props: ButtonProps<T>) {
+  const [local, rest] = splitProps(props as ButtonProps, ['variant', 'size', 'class'])
+
+  return (
+    <Polymorphic
+      as="button"
+      type="button"
+      class={cn(buttonVariants({ variant: local.variant, size: local.size }), local.class)}
+      {...(rest as ComponentProps<'button'>)}
+    />
+  )
+}

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

@@ -0,0 +1 @@
+export { Button, buttonVariants, type ButtonProps } from './button'

package/src/components/ui/button-group/button-group.tsx

@@ -0,0 +1,92 @@
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+import { Separator } from '../separator/separator'
+
+/**
+ * ButtonGroup.
+ *
+ * Several controls acting as one. The point is the *join*: the items share a
+ * border, collapse the seam between them, and round only at the ends, so a row of
+ * buttons reads as a single object with segments rather than as buttons that happen
+ * to be adjacent.
+ *
+ * The joining lives on the group, through child selectors, so an item never has to
+ * know whether it sits at an end — which is also where the border collapse belongs.
+ * A caller composing a group out of `Button`, `Select` and `InputGroup` therefore
+ * gets the same treatment without those components knowing about it.
+ *
+ * The group is a `role="group"` with a label, because a screen reader announcing
+ * four unrelated buttons where the sighted user sees one control is the failure
+ * this prevents.
+ */
+export type ButtonGroupProps = ComponentProps<'div'> & {
+  /** The group's accessible name. Required: a group with no name is announced as loose buttons. */
+  label: string
+  orientation?: 'horizontal' | 'vertical'
+}
+
+export function ButtonGroup(props: ButtonGroupProps) {
+  const [local, rest] = splitProps(props, ['class', 'label', 'orientation', 'children'])
+
+  const horizontal = () => local.orientation !== 'vertical'
+
+  return (
+    <div
+      data-slot="button-group"
+      role="group"
+      aria-label={local.label}
+      class={cn(
+        'flex w-fit items-stretch',
+        horizontal() ? 'flex-row' : 'flex-col',
+        /* Ends keep their outer radius; everything between them is squared, and the
+           seam is collapsed by pulling each item back over its neighbour's border. */
+        horizontal()
+          ? '[&>*:first-child]:rounded-e-none [&>*:last-child]:rounded-s-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-ms-px'
+          : '[&>*:first-child]:rounded-b-none [&>*:last-child]:rounded-t-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-mt-px',
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  )
+}
+
+/**
+ * A separator inside a group. `orientation` follows the group: a vertical rule in a
+ * horizontal group, and the reverse.
+ */
+export function ButtonGroupSeparator(
+  props: ComponentProps<typeof Separator> & { orientation?: 'horizontal' | 'vertical' }
+) {
+  const [local, rest] = splitProps(props, ['class', 'orientation'])
+
+  return (
+    <Separator
+      orientation={local.orientation ?? 'vertical'}
+      class={cn('self-stretch', local.class)}
+      {...rest}
+    />
+  )
+}
+
+/**
+ * Static text in a group — a unit, a label, a readout that is not a control. It
+ * takes the group's border and height so it sits in the row as a peer, but it is
+ * not focusable and does not pretend to be.
+ */
+export function ButtonGroupText(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <div
+      data-slot="button-group-text"
+      class={cn(
+        'bg-muted text-muted-foreground flex items-center gap-2 rounded-md border border-border px-control-sm text-sm',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}

package/src/components/ui/button-group/index.ts

@@ -0,0 +1,6 @@
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  type ButtonGroupProps,
+} from './button-group'

package/src/components/ui/calendar/calendar.tsx

@@ -0,0 +1,277 @@
+import { For, Show, splitProps, type ComponentProps, type JSX } from 'solid-js'
+import Calendar, {
+  type RootProps as CorvuCalendarProps,
+  type RootSingleProps,
+} from '@corvu/calendar'
+
+/** The three modes corvu's calendar is a union over. */
+export type CalendarMode = 'single' | 'multiple' | 'range'
+import { ChevronLeft, ChevronRight } from 'lucide-solid'
+import { cn } from '#lib/utils'
+import { Button } from '../button'
+
+/**
+ * Calendar.
+ *
+ * A month grid, over `@corvu/calendar`. The primitive owns the hard part — the
+ * roving `tabindex` that makes a grid of days one tab stop rather than 42, the
+ * arrow-key navigation, the `aria-selected`/`aria-disabled` bookkeeping, and the
+ * `data-*` attributes that carry the states.
+ *
+ * What this component owns is the *presentation* of those states, and it is worth
+ * saying why they are styled from `data-*` rather than from props: a day is today,
+ * selected, in range, at a range end, and disabled independently, and a range
+ * start that is also today has to read as both. Boolean props cannot express that
+ * without a combinatorial explosion; the data attributes can.
+ *
+ * `mode` is the primitive's discriminated union — `single`, `multiple`, `range` —
+ * so `value` and `onValueChange` change type with it. That is why this forwards
+ * the props rather than normalising them: a normalised `Date[]` would lose what a
+ * range needs to know which end moved.
+ *
+ * Three things the primitive leaves open, and this closes:
+ *
+ * 1. **The month caption is a heading**, wired to the grid's `aria-labelledby`, so
+ *    the grid has a name and a screen reader user can hear which month they are in.
+ * 2. **The nav buttons have accessible names.** A bare chevron is not a name.
+ * 3. **Today is a ring, not a fill.** A fill would be indistinguishable from
+ *    selected, and today is often also selected.
+ *
+ * The sub-components come off the default export as statics (`Calendar.Cell`,
+ * `Calendar.CellTrigger`, …) — corvu's shape, and the reason this file does not
+ * import seven names.
+ */
+
+/**
+ * The props this wrapper adds on top of the primitive's own. They are separate so
+ * `splitProps` has a fixed list to pull out, and so the mode-specific props stay
+ * the primitive's to define.
+ */
+type CalendarExtras = {
+  /** Weekday header labels, Sunday first. Defaults to the locale's short names. */
+  weekdayLabels?: readonly string[]
+  /** Accessible names for the month navigation. Override for a non-English app. */
+  previousLabel?: string
+  nextLabel?: string
+  /** Format a month for the caption. Defaults to `Intl.DateTimeFormat`. */
+  formatMonth?: (month: Date) => string
+  class?: string
+}
+
+/**
+ * `Omit` distributes over a union, which would collapse the three modes into one
+ * shape and lose the discriminant. This keeps them apart. `children` is dropped
+ * because the surface supplies the grid itself — the caller's job is the value,
+ * not the layout.
+ */
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never
+
+/** The props of any of the three modes. `mode` decides the shape of `value`. */
+export type CalendarProps = DistributiveOmit<CorvuCalendarProps, 'children'> & CalendarExtras
+
+const EXTRAS = ['weekdayLabels', 'previousLabel', 'nextLabel', 'formatMonth', 'class'] as const
+
+const MONTH_FORMAT: Intl.DateTimeFormatOptions = { month: 'long', year: 'numeric' }
+
+function monthLabel(month: Date, format?: (month: Date) => string): string {
+  return format ? format(month) : new Intl.DateTimeFormat(undefined, MONTH_FORMAT).format(month)
+}
+
+/**
+ * A day's accessible name: the full date, because the visible number is only
+ * meaningful next to its column heading.
+ */
+function dayLabel(day: Date): string {
+  return new Intl.DateTimeFormat(undefined, {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  }).format(day)
+}
+
+/** The locale's short weekday names, Sunday first — which is the order corvu's `weeks` use. */
+function defaultWeekdays(): string[] {
+  const format = new Intl.DateTimeFormat(undefined, { weekday: 'short' })
+  // 2024-01-07 is a Sunday, so index 0 is Sunday without arithmetic.
+  return Array.from({ length: 7 }, (_, index) => format.format(new Date(2024, 0, 7 + index)))
+}
+
+/**
+ * The grid, inside the root's context. A separate component because
+ * `Calendar.useContext` is only available to a descendant, and reading `months()`
+ * in the same component that provides it renders one month behind.
+ */
+function CalendarGrid(props: {
+  weekdayLabels?: readonly string[]
+  previousLabel: string
+  nextLabel: string
+  formatMonth?: (month: Date) => string
+}) {
+  const context = Calendar.useContext()
+  const weekdays = () => props.weekdayLabels ?? defaultWeekdays()
+
+  return (
+    <For each={context.months()}>
+      {(month, index) => (
+        <div class="flex flex-col gap-2">
+          <div class="flex items-center justify-between gap-2">
+            <Calendar.Nav
+              action="prev-month"
+              as={Button}
+              variant="ghost"
+              size="icon-sm"
+              aria-label={props.previousLabel}
+            >
+              <ChevronLeft aria-hidden="true" />
+            </Calendar.Nav>
+            <Calendar.Label index={index()} class="text-sm font-semibold text-foreground">
+              {monthLabel(month.month, props.formatMonth)}
+            </Calendar.Label>
+            <Calendar.Nav
+              action="next-month"
+              as={Button}
+              variant="ghost"
+              size="icon-sm"
+              aria-label={props.nextLabel}
+            >
+              <ChevronRight aria-hidden="true" />
+            </Calendar.Nav>
+          </div>
+          <Calendar.Table class="w-full border-collapse">
+            <thead>
+              <tr>
+                <For each={weekdays()}>
+                  {(label) => (
+                    <Calendar.HeadCell
+                      as="th"
+                      scope="col"
+                      class="pb-1 text-2xs font-medium text-muted-foreground"
+                    >
+                      {label}
+                    </Calendar.HeadCell>
+                  )}
+                </For>
+              </tr>
+            </thead>
+            <tbody>
+              <For each={month.weeks}>
+                {(week) => (
+                  <tr>
+                    <For each={week}>
+                      {(day) => (
+                        <Calendar.Cell as="td" class="p-0.5 text-center">
+                          <Calendar.CellTrigger
+                            as="button"
+                            day={day}
+                            month={month.month}
+                            class={cn(
+                              'w-full rounded-md text-xs text-foreground transition-colors',
+                              'min-h-control-xs',
+                              'hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none',
+                              // Styled from data states, so a day can be a range
+                              // end and today at once without a prop per pair.
+                              'data-selected:bg-primary data-selected:text-primary-foreground',
+                              'data-in-range:bg-primary-subtle',
+                              'data-range-start:rounded-r-none data-range-end:rounded-l-none',
+                              'data-today:ring-1 data-today:ring-ring',
+                              'data-disabled:text-muted-foreground data-disabled:line-through',
+                              'data-disabled:hover:bg-transparent'
+                            )}
+                          >
+                            {/*
+                              The trigger renders no children of its own, so the
+                              day number is the caller's — without it every cell
+                              is an unnamed button (`button-name`).
+
+                              The number is what a sighted reader needs and the
+                              full date is what a screen reader user needs: "25"
+                              alone is meaningless out of context. So the number
+                              is hidden from the accessibility tree and the date
+                              supplies the name.
+                            */}
+                            <span aria-hidden="true">{day.getDate()}</span>
+                            <span class="visually-hidden">{dayLabel(day)}</span>
+                          </Calendar.CellTrigger>
+                        </Calendar.Cell>
+                      )}
+                    </For>
+                  </tr>
+                )}
+              </For>
+            </tbody>
+          </Calendar.Table>
+        </div>
+      )}
+    </For>
+  )
+}
+
+/**
+ * Generic over the mode on purpose. `splitProps` cannot carry a discriminant
+ * through destructuring — the rest object widens to `mode: 'single' | 'multiple' |
+ * 'range'`, which is assignable to no single member of the primitive's union. A
+ * type parameter keeps `mode` a literal, so `Extract` resolves the right member
+ * and the forwarding stays checked rather than cast.
+ */
+export function CalendarSurface<M extends CalendarMode>(props: CalendarProps & { mode: M }) {
+  const [local, rest] = splitProps(props as CalendarProps, [...EXTRAS])
+
+  return (
+    <div class={cn('w-fit rounded-lg border border-border bg-card p-3', local.class)}>
+      <Calendar {...(rest as Extract<CorvuCalendarProps, { mode: M }>)}>
+        <CalendarGrid
+          weekdayLabels={local.weekdayLabels}
+          previousLabel={local.previousLabel ?? 'Previous month'}
+          nextLabel={local.nextLabel ?? 'Next month'}
+          formatMonth={local.formatMonth}
+        />
+      </Calendar>
+    </div>
+  )
+}
+
+/**
+ * Built from the primitive's *single* props rather than from `CalendarProps` with
+ * `mode` omitted. Omitting a discriminant leaves the other members of the union
+ * behind — `value` stays `Date | Date[] | {from,to}` — and the picker would then
+ * have to cast to prove what its own name already says.
+ */
+export type DatePickerProps = Omit<RootSingleProps, 'mode' | 'children'> &
+  CalendarExtras & {
+    /** A labelled heading above the grid. */
+    label?: string
+    /** A footer slot: the confirm and cancel row a picker usually has. */
+    footer?: JSX.Element
+  }
+
+/**
+ * A single-day picker: the calendar with a name and a footer. Split from
+ * `CalendarSurface` because a bare calendar is a control inside a form the caller
+ * already owns, while a picker is a thing the caller drops in — and the two want
+ * different surroundings.
+ */
+export function DatePicker(props: DatePickerProps) {
+  const [local, rest] = splitProps(props, ['value', 'onValueChange', 'label', 'footer', 'class'])
+
+  return (
+    <div class={cn('grid w-fit gap-2', local.class)}>
+      <Show when={local.label}>
+        <p class="text-xs font-semibold text-foreground">{local.label}</p>
+      </Show>
+      <CalendarSurface
+        {...rest}
+        mode="single"
+        value={local.value}
+        onValueChange={local.onValueChange}
+      />
+      <Show when={local.footer}>
+        <div class="flex justify-end gap-2">{local.footer}</div>
+      </Show>
+    </div>
+  )
+}
+
+/** Re-exported so a caller can type a value it holds. */
+export type { CalendarProps as CorvuCalendarProps }
+export { Calendar as CalendarRoot }
+export type CalendarElementProps = ComponentProps<'div'>

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

@@ -0,0 +1 @@
+export { CalendarSurface, DatePicker, type CalendarProps, type DatePickerProps } from './calendar'

package/src/components/ui/card/card.tsx

@@ -0,0 +1,82 @@
+import type { ComponentProps, JSX } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+
+/**
+ * Card.
+ *
+ * A surface that sits on the canvas. Every card carries its own edge — a
+ * border — because in the light theme `--card` and `--background` are both
+ * white, and a borderless card there is invisible. Making the border
+ * structural rather than optional is what stops one app's cards from reading
+ * as floating panels and another's as nothing at all.
+ *
+ * The parts are separate components rather than a template because a card's
+ * header, content and footer have different padding on purpose: the header and
+ * footer are tight, the content breathes.
+ */
+export function Card(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="card"
+      class={cn(
+        'bg-card text-card-foreground flex flex-col gap-4 rounded-xl border border-border py-4 shadow-xs',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export function CardHeader(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div data-slot="card-header" class={cn('flex flex-col gap-1 px-4', local.class)} {...rest} />
+  )
+}
+
+export function CardTitle(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="card-title"
+      class={cn('text-base leading-none font-semibold tracking-tight', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function CardDescription(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="card-description"
+      class={cn('text-muted-foreground text-sm', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function CardAction(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="card-action"
+      class={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function CardContent(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <div data-slot="card-content" class={cn('px-4', local.class)} {...rest} />
+}
+
+export function CardFooter(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <div data-slot="card-footer" class={cn('flex items-center px-4', local.class)} {...rest} />
+}
+
+export type CardProps = ComponentProps<'div'> & JSX.HTMLAttributes<HTMLDivElement>