@adres/mgda-ui 0.0.0-stage → 0.0.1

package/src/components/data-list.test.tsx

@@ -0,0 +1,35 @@
+import { describe, expect, it } from "vitest"
+import * as React from "react"
+import { renderToStaticMarkup } from "react-dom/server"
+import { DataList, DataListItem, DataListLabel, DataListValue } from "./data-list"
+
+const list = (props: React.ComponentProps<typeof DataList>) => renderToStaticMarkup(
+  <DataList {...props}>
+    <DataListItem><DataListLabel>Trade licence</DataListLabel><DataListValue>2120561384412A</DataListValue></DataListItem>
+  </DataList>,
+)
+
+describe("DataList grid", () => {
+  it("lays items out in columns without dividers", () => {
+    const html = list({ orientation: "grid", columns: 4 })
+    expect(html).toContain("ax:grid ax:gap-x-lg ax:grid-cols-2 ax:sm:grid-cols-4")
+    expect(html).not.toContain("ax:divide-y")
+  })
+
+  it("stacks label above value and drops the horizontal label width", () => {
+    const html = list({ orientation: "grid" })
+    expect(html).not.toContain("ax:sm:flex-row")
+    expect(html).not.toContain("ax:sm:min-w-32")
+  })
+
+  it("keeps the divided list as the default", () => {
+    expect(list({})).toContain("ax:divide-y")
+  })
+
+  it("shares one label column across horizontal rows from sm up", () => {
+    const html = list({})
+    expect(html).toContain("ax:sm:grid ax:sm:grid-cols-[auto_1fr]")
+    expect(html).toContain("ax:sm:grid-cols-subgrid")
+    expect(html).toContain("ax:sm:gap-x-sm")
+  })
+})

package/src/components/data-list.tsx

@@ -0,0 +1,181 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/cn"
+
+export type DataListSize        = "sm" | "md" | "lg"
+export type DataListOrientation = "horizontal" | "vertical" | "grid"
+export type DataListColumns     = 2 | 3 | 4
+
+interface DataListContextValue {
+  size:        DataListSize
+  orientation: DataListOrientation
+}
+
+const DataListContext = React.createContext<DataListContextValue>({
+  size:        "md",
+  orientation: "horizontal",
+})
+
+// ─── Root ─────────────────────────────────────────────────────────────────────
+
+export interface DataListProps extends React.HTMLAttributes<HTMLDListElement> {
+  size?:        DataListSize
+  /** `grid` lays items out in columns, label above value, without dividers -
+   *  for short facts such as licence numbers or key dates. */
+  orientation?: DataListOrientation
+  /** Columns from `sm` up when `orientation="grid"`; two below `sm`. */
+  columns?:     DataListColumns
+}
+
+const GRID_COLUMNS: Record<DataListColumns, string> = {
+  2: "ax:grid-cols-2",
+  3: "ax:grid-cols-2 ax:sm:grid-cols-3",
+  4: "ax:grid-cols-2 ax:sm:grid-cols-4",
+}
+
+export const DataList = React.forwardRef<HTMLDListElement, DataListProps>(
+  ({ className, size = "md", orientation = "horizontal", columns = 2, ...props }, ref) => (
+    <DataListContext.Provider value={{ size, orientation }}>
+      <dl
+        ref={ref}
+        className={cn(
+          orientation === "grid"
+            ? cn("ax:grid ax:gap-x-lg", GRID_COLUMNS[columns])
+            : cn(
+                "ax:divide-y ax:divide-border",
+                // Rows share these column tracks via `grid-cols-subgrid` on each
+                // DataListItem, so the label column's `auto` track sizes to the
+                // single widest label across every row, not a per-row guess.
+                orientation === "horizontal" && "ax:sm:grid ax:sm:grid-cols-[auto_1fr]",
+              ),
+          className,
+        )}
+        {...props}
+      />
+    </DataListContext.Provider>
+  )
+)
+DataList.displayName = "DataList"
+
+// ─── Item ─────────────────────────────────────────────────────────────────────
+//
+// The middle (md) row uses `py-2.5` (a non-token half-step) so its visual
+// rhythm matches the Table component's `md` row exactly. sm/lg map cleanly
+// to the spacing scale.
+
+const ITEM_PADDING: Record<DataListSize, string> = {
+  sm: "ax:py-xs",   //  8px
+  md: "ax:py-2.5",  // 10px (intentional half-step, matches Table md)
+  lg: "ax:py-sm",   // 12px
+}
+
+// Label↔value gap when the item is stacked (vertical, and horizontal on mobile).
+const ITEM_GAP: Record<DataListSize, string> = {
+  sm: "ax:gap-2xs",  // 4px
+  md: "ax:gap-2xs",  // 4px
+  lg: "ax:gap-xs",   // 8px
+}
+
+// Label↔value gap in the row layout (horizontal from `sm` up) - a bit more
+// than the stacked gap, since side-by-side text reads better with clearer
+// separation than text stacked label-above-value does.
+const ITEM_GAP_X: Record<DataListSize, string> = {
+  sm: "ax:sm:gap-x-xs",  // 8px
+  md: "ax:sm:gap-x-sm",  // 12px
+  lg: "ax:sm:gap-x-md",  // 16px
+}
+
+export const DataListItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { size, orientation } = React.useContext(DataListContext)
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "ax:flex ax:flex-col",
+        // Horizontal is responsive: stacked (label above value) on mobile, then
+        // a baseline-aligned row from `sm` up. The row uses `grid-cols-subgrid`
+        // so its label/value cells adopt the DataList's shared column tracks
+        // instead of sizing independently per row.
+        orientation === "horizontal" && "ax:sm:grid ax:sm:grid-cols-subgrid ax:sm:col-span-full ax:sm:items-baseline",
+        ITEM_PADDING[size],
+        ITEM_GAP[size],
+        orientation === "horizontal" && ITEM_GAP_X[size],
+        className
+      )}
+      {...props}
+    />
+  )
+})
+DataListItem.displayName = "DataListItem"
+
+// ─── Label ────────────────────────────────────────────────────────────────────
+//
+// The label column's actual width comes from the DataListItem's subgrid (see
+// above): it's an `auto` track, so it sizes to the single widest label across
+// every row. `min-width` here is just a floor for when every label is short,
+// so the column never gets uncomfortably narrow. It applies only from `sm` up;
+// while stacked on mobile the label is a full-width block above the value, so
+// it needs no minimum.
+
+const LABEL_TEXT: Record<DataListSize, string> = {
+  sm: "ax:t-caption",
+  md: "ax:t-body-sm",
+  lg: "ax:t-body-sm",
+}
+
+const LABEL_MIN_WIDTH: Record<DataListSize, string> = {
+  sm: "ax:sm:min-w-25",  // 100px
+  md: "ax:sm:min-w-32",  // 128px
+  lg: "ax:sm:min-w-36",  // 144px
+}
+
+export const DataListLabel = React.forwardRef<
+  HTMLElement,
+  React.HTMLAttributes<HTMLElement>
+>(({ className, ...props }, ref) => {
+  const { size, orientation } = React.useContext(DataListContext)
+  return (
+    <dt
+      ref={ref as React.Ref<HTMLElement>}
+      className={cn(
+        "ax:text-muted-foreground",
+        LABEL_TEXT[size],
+        orientation === "horizontal" && LABEL_MIN_WIDTH[size],
+        className
+      )}
+      {...props}
+    />
+  )
+})
+DataListLabel.displayName = "DataListLabel"
+
+// ─── Value ────────────────────────────────────────────────────────────────────
+
+const VALUE_TEXT: Record<DataListSize, string> = {
+  sm: "ax:t-caption",
+  md: "ax:t-body-sm",
+  lg: "ax:t-body-md",
+}
+
+export const DataListValue = React.forwardRef<
+  HTMLElement,
+  React.HTMLAttributes<HTMLElement>
+>(({ className, ...props }, ref) => {
+  const { size } = React.useContext(DataListContext)
+  return (
+    <dd
+      ref={ref as React.Ref<HTMLElement>}
+      className={cn(
+        "ax:text-foreground ax:font-medium ax:min-w-0",
+        VALUE_TEXT[size],
+        className
+      )}
+      {...props}
+    />
+  )
+})
+DataListValue.displayName = "DataListValue"

package/src/components/data-table.stories.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { DataTable, rowStyle, type ColumnDef } from "./data-table"
+
+type Row = { name: string; role: string; status: string }
+
+const columns: ColumnDef<Row>[] = [
+  { key: "name", header: "Name", accessor: (r) => r.name, sortable: true },
+  { key: "role", header: "Role", accessor: (r) => r.role },
+  { key: "status", header: "Status", accessor: (r) => <span className={rowStyle.muted}>{r.status}</span> },
+]
+
+const data: Row[] = [
+  { name: "Aisha Khan", role: "Admin", status: "Active" },
+  { name: "Marco Silva", role: "Editor", status: "Active" },
+  { name: "Leila Hassan", role: "Viewer", status: "Invited" },
+]
+
+const meta: Meta<typeof DataTable<Row>> = {
+  title: "Components/DataTable",
+  component: DataTable,
+  tags: ["autodocs"],
+  args: { columns, data },
+}
+
+export default meta
+type Story = StoryObj<typeof DataTable<Row>>
+
+export const Default: Story = {}

package/src/components/data-table.tsx

@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import { ChevronUp, ChevronDown, ChevronsUpDown } from "lucide-react"
+import { cn } from "../lib/cn"
+
+export type SortDirection      = "asc" | "desc" | null
+export type DataTableSize      = "sm" | "md" | "lg"
+export type DataTableAlign     = "start" | "center" | "end"
+
+export interface ColumnDef<T> {
+  key: string
+  header: React.ReactNode
+  accessor: (row: T) => React.ReactNode
+  sortable?: boolean
+  /** Logical inline alignment. `start` and `end` flip in RTL. */
+  align?: DataTableAlign
+  className?: string
+}
+
+export interface DataTableProps<T> extends Omit<React.HTMLAttributes<HTMLDivElement>, "onClick"> {
+  columns: ColumnDef<T>[]
+  data: T[]
+  /** Visual density. Matches the Table component's size scale. */
+  size?: DataTableSize
+  /** Key-accessor for React list rendering. Defaults to row index. */
+  rowKey?: (row: T, index: number) => string | number
+  /** Per-row className. Lets callers visually mark rows (placeholders, status-specific tinting, etc.). */
+  rowClassName?: (row: T, index: number) => string | undefined
+  /** Row click handler. When provided, rows become clickable (cursor + role).
+   *  Interactive children (buttons, links, menu triggers) should stopPropagation
+   *  if they need to bypass the row click. */
+  onRowClick?: (row: T, index: number) => void
+  /** Shown when data is empty. */
+  emptyMessage?: string
+  /** Hide the header row entirely. */
+  headless?: boolean
+}
+
+// Matches the Table component's CELL_PADDING map exactly so the two stay in
+// visual sync: `py-1.5` and `py-2.5` are intentional half-steps.
+const CELL_PADDING: Record<DataTableSize, string> = {
+  sm: "ax:px-sm ax:py-1.5",
+  md: "ax:px-md ax:py-2.5",
+  lg: "ax:px-lg ax:py-md",
+}
+
+// Font-size + line-height per density. Applied to every <td> so column
+// accessors inherit the right base and only need to layer weight/colour.
+const CELL_TYPOGRAPHY: Record<DataTableSize, string> = {
+  sm: "ax:text-xs ax:leading-tight",
+  md: "ax:text-sm ax:leading-tight",
+  lg: "ax:text-base ax:leading-tight",
+}
+
+// Named row-text variants for column accessors. They intentionally carry no
+// font-size or line-height: those come from the table's size prop above.
+export const rowStyle = {
+  title:   "ax:font-medium ax:text-foreground-strong",
+  default: "ax:font-normal ax:text-foreground",
+  muted:   "ax:font-normal ax:text-muted-foreground",
+} as const
+
+function SortIcon({ direction }: { direction: SortDirection }) {
+  if (direction === "asc")  return <ChevronUp   className="ax:size-3.5 ax:shrink-0" />
+  if (direction === "desc") return <ChevronDown className="ax:size-3.5 ax:shrink-0" />
+  return <ChevronsUpDown className="ax:size-3.5 ax:shrink-0 ax:text-muted-foreground/50" />
+}
+
+function alignClass(align?: DataTableAlign): string {
+  if (align === "center") return "ax:text-center"
+  if (align === "end")    return "ax:text-end"
+  return "ax:text-start"
+}
+
+export function DataTable<T>({
+  columns,
+  data,
+  size = "md",
+  className,
+  rowKey,
+  rowClassName,
+  onRowClick,
+  emptyMessage = "No results.",
+  headless = false,
+  ...props
+}: DataTableProps<T>) {
+  const [sortKey, setSortKey] = React.useState<string | null>(null)
+  const [sortDir, setSortDir] = React.useState<SortDirection>(null)
+
+  const handleSort = (key: string) => {
+    if (sortKey !== key) {
+      setSortKey(key)
+      setSortDir("asc")
+      return
+    }
+    if (sortDir === "asc")  { setSortDir("desc"); return }
+    if (sortDir === "desc") { setSortKey(null); setSortDir(null); return }
+    setSortDir("asc")
+  }
+
+  const sortedData = React.useMemo(() => {
+    if (!sortKey || !sortDir) return data
+    const col = columns.find((c) => c.key === sortKey)
+    if (!col) return data
+    return [...data].sort((a, b) => {
+      const av = col.accessor(a)
+      const bv = col.accessor(b)
+      const as = String(av ?? "")
+      const bs = String(bv ?? "")
+      const cmp = as.localeCompare(bs, undefined, { numeric: true })
+      return sortDir === "asc" ? cmp : -cmp
+    })
+  }, [data, sortKey, sortDir, columns])
+
+  const cellPad = CELL_PADDING[size]
+
+  return (
+    <div
+      data-slot="data-table"
+      className={cn("ax:w-full ax:overflow-auto ax:rounded-lg ax:border ax:border-border ax:bg-card", className)}
+      {...props}
+    >
+      <table className="ax:w-full">
+        {!headless && (
+          <thead className="ax:sticky ax:top-0 ax:z-10 ax:border-b ax:border-border ax:bg-muted/50">
+            <tr>
+              {columns.map((col) => (
+                <th
+                  key={col.key}
+                  className={cn(
+                    cellPad,
+                    CELL_TYPOGRAPHY[size],
+                    "ax:font-medium ax:text-muted-foreground",
+                    alignClass(col.align),
+                    col.sortable && "ax:cursor-pointer ax:select-none ax:hover:text-foreground ax:transition-colors",
+                    col.className
+                  )}
+                  onClick={col.sortable ? () => handleSort(col.key) : undefined}
+                  aria-sort={
+                    sortKey === col.key
+                      ? sortDir === "asc"
+                        ? "ascending"
+                        : "descending"
+                      : undefined
+                  }
+                >
+                  <span className="ax:inline-flex ax:items-center ax:gap-1.5">
+                    {col.header}
+                    {col.sortable && (
+                      <SortIcon direction={sortKey === col.key ? sortDir : null} />
+                    )}
+                  </span>
+                </th>
+              ))}
+            </tr>
+          </thead>
+        )}
+        <tbody className="ax:divide-y ax:divide-border">
+          {sortedData.length === 0 ? (
+            <tr>
+              <td
+                colSpan={columns.length}
+                className={cn(cellPad, "ax:text-center ax:text-muted-foreground ax:py-2xl")}
+              >
+                {emptyMessage}
+              </td>
+            </tr>
+          ) : (
+            sortedData.map((row, i) => (
+              <tr
+                key={rowKey ? rowKey(row, i) : i}
+                className={cn(
+                  "ax:hover:bg-muted/40 ax:transition-colors",
+                  onRowClick && "ax:cursor-pointer",
+                  rowClassName?.(row, i),
+                )}
+                onClick={onRowClick ? () => onRowClick(row, i) : undefined}
+              >
+                {columns.map((col) => (
+                  <td
+                    key={col.key}
+                    className={cn(
+                      cellPad,
+                      CELL_TYPOGRAPHY[size],
+                      alignClass(col.align),
+                      col.className
+                    )}
+                  >
+                    {col.accessor(row)}
+                  </td>
+                ))}
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  )
+}

package/src/components/dialog.stories.tsx

@@ -0,0 +1,42 @@
+import React from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+import { Button } from "./button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./dialog"
+
+const meta: Meta<typeof Dialog> = {
+  title: "Components/Dialog",
+  component: Dialog,
+  tags: ["autodocs"],
+}
+
+export default meta
+type Story = StoryObj<typeof Dialog>
+
+export const Default: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Open dialog</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit profile</DialogTitle>
+          <DialogDescription>Make changes to your profile here.</DialogDescription>
+        </DialogHeader>
+        <p className="ax:t-body-sm ax:text-muted-foreground">Dialog body content.</p>
+        <DialogFooter>
+          <Button variant="outline">Cancel</Button>
+          <Button>Save</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+}

package/src/components/dialog.tsx

@@ -0,0 +1,200 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+import { cn } from "../lib/cn"
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type DialogSize = "sm" | "md" | "lg"
+
+const DialogSizeContext = React.createContext<DialogSize>("md")
+
+// ─── Size tokens ──────────────────────────────────────────────────────────────
+
+const MAX_WIDTH: Record<DialogSize, string> = {
+  sm: "ax:max-w-xs",   // 320px - compact confirmations / alerts
+  md: "ax:max-w-md",   // 448px - DEFAULT - typical form dialogs
+  lg: "ax:max-w-3xl",  // 768px - wide layouts / multi-column content
+}
+
+const PADDING: Record<DialogSize, string> = {
+  sm: "ax:p-lg",   // 20px
+  md: "ax:p-xl",   // 24px
+  lg: "ax:p-2xl",  // 32px
+}
+
+const GAP: Record<DialogSize, string> = {
+  sm: "ax:gap-sm",  // 12px
+  md: "ax:gap-md",  // 16px
+  lg: "ax:gap-xl",  // 24px
+}
+
+const TITLE_SIZE: Record<DialogSize, string> = {
+  sm: "ax:t-h3",
+  md: "ax:t-h3",
+  lg: "ax:t-h2",
+}
+
+const DESCRIPTION_SIZE: Record<DialogSize, string> = {
+  sm: "ax:t-body-sm",
+  md: "ax:t-body-sm",
+  lg: "ax:t-body-md",
+}
+
+const CLOSE_ICON: Record<DialogSize, string> = {
+  sm: "ax:size-4",
+  md: "ax:size-4",
+  lg: "ax:size-5",
+}
+
+// Footer top-margin scales with size so the gap above the action row feels
+// proportional to the dialog's interior padding.
+const FOOTER_MT: Record<DialogSize, string> = {
+  sm: "ax:mt-sm",
+  md: "ax:mt-md",
+  lg: "ax:mt-md",
+}
+
+// ─── Primitives (unchanged) ───────────────────────────────────────────────────
+
+export const Dialog        = DialogPrimitive.Root
+export const DialogTrigger = DialogPrimitive.Trigger
+export const DialogPortal  = DialogPrimitive.Portal
+export const DialogClose   = DialogPrimitive.Close
+
+// ─── Overlay ─────────────────────────────────────────────────────────────────
+
+export const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      // `--foreground` flips light in dark mode, which would tint the scrim
+      // whitish, so use a black scrim in dark at the same opacity + blur.
+      "ax:fixed ax:inset-0 ax:z-[1100] ax:bg-foreground/40 ax:dark:bg-black/40 ax:backdrop-blur-sm",
+      "ax:data-[state=open]:animate-in ax:data-[state=closed]:animate-out",
+      "ax:data-[state=open]:fade-in-0 ax:data-[state=closed]:fade-out-0",
+      "ax:[animation-duration:var(--motion-base)] ax:[animation-timing-function:var(--motion-ease-out)]",
+      "ax:motion-reduce:animate-none",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+// ─── Content ─────────────────────────────────────────────────────────────────
+
+export interface DialogContentProps
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+  size?: DialogSize
+}
+
+export const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  DialogContentProps
+>(({ className, children, size = "md", ...props }, ref) => (
+  <DialogSizeContext.Provider value={size}>
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          "ax:fixed ax:left-1/2 ax:top-1/2 ax:z-[1100] ax:grid ax:w-full ax:-translate-x-1/2 ax:-translate-y-1/2",
+          "ax:border ax:border-border ax:bg-card ax:shadow-lg ax:rounded-lg",
+          MAX_WIDTH[size],
+          PADDING[size],
+          GAP[size],
+          "ax:data-[state=open]:animate-in ax:data-[state=closed]:animate-out",
+          "ax:data-[state=open]:fade-in-0 ax:data-[state=closed]:fade-out-0",
+          "ax:data-[state=open]:zoom-in-[0.96] ax:data-[state=closed]:zoom-out-[0.96]",
+          "ax:data-[state=open]:slide-in-from-bottom-2 ax:data-[state=closed]:slide-out-to-bottom-1",
+          "ax:[animation-duration:var(--motion-base)] ax:[animation-timing-function:var(--motion-ease-out)]",
+          "ax:motion-reduce:animate-none",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close
+          className={cn(
+            "ax:absolute ax:right-md ax:top-md ax:rounded-sm ax:opacity-70 ax:transition-opacity",
+            "ax:hover:opacity-100 ax:focus:outline-none ax:focus-visible:ring-2 ax:focus-visible:ring-ring ax:focus-visible:ring-offset-2",
+            "ax:disabled:pointer-events-none"
+          )}
+        >
+          <X className={CLOSE_ICON[size]} aria-hidden="true" />
+          <span className="ax:sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  </DialogSizeContext.Provider>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+// ─── Header / Footer ─────────────────────────────────────────────────────────
+
+export const DialogHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("ax:flex ax:flex-col ax:gap-md ax:text-left", className)} {...props} />
+))
+DialogHeader.displayName = "DialogHeader"
+
+export const DialogFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const size = React.useContext(DialogSizeContext)
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "ax:flex ax:flex-col-reverse ax:gap-xs ax:sm:flex-row ax:sm:justify-end",
+        FOOTER_MT[size],
+        className
+      )}
+      {...props}
+    />
+  )
+})
+DialogFooter.displayName = "DialogFooter"
+
+// ─── Title ───────────────────────────────────────────────────────────────────
+
+export const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => {
+  const size = React.useContext(DialogSizeContext)
+  return (
+    <DialogPrimitive.Title
+      ref={ref}
+      className={cn(TITLE_SIZE[size], className)}
+      {...props}
+    />
+  )
+})
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+// ─── Description ─────────────────────────────────────────────────────────────
+
+export const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => {
+  const size = React.useContext(DialogSizeContext)
+  return (
+    <DialogPrimitive.Description
+      ref={ref}
+      className={cn("ax:text-foreground", DESCRIPTION_SIZE[size], className)}
+      {...props}
+    />
+  )
+})
+DialogDescription.displayName = DialogPrimitive.Description.displayName