cortena-ui 0.1.0 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cortena-ui",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Cortena UI — the shared React component library for cortenaweb and every Cortena extension. shadcn over Base UI, styled entirely from cortena-design tokens.",
   "license": "UNLICENSED",
   "repository": {
@@ -31,27 +31,54 @@
   "scripts": {
     "build": "tsdown",
     "check": "tsc --noEmit",
-    "lint:design": "node ../../lint/cli.mjs src",
+    "lint:design": "node ../../lint/cli.mjs --exempt chart-import src",
     "test": "vitest run",
     "guide": "vite --config guide/vite.config.ts",
     "guide:build": "vite build --config guide/vite.config.ts",
     "prepack": "pnpm build"
   },
   "peerDependencies": {
-    "cortena-design": ">=3.1.0",
+    "cortena-design": ">=3.2.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "zod": "^3.25.0 || ^4.0.0",
+    "@tanstack/react-query": "^5.0.0"
   },
   "dependencies": {
     "@base-ui/react": "^1.8.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@hookform/resolvers": "^5.9.1",
+    "@nivo/bar": "^0.99.0",
+    "@nivo/calendar": "^0.99.0",
+    "@nivo/core": "^0.99.0",
+    "@nivo/heatmap": "^0.99.0",
+    "@nivo/line": "^0.99.0",
+    "@nivo/pie": "^0.99.0",
+    "@nivo/scatterplot": "^0.99.0",
+    "@nivo/sunburst": "^0.99.0",
+    "@nivo/treemap": "^0.99.0",
+    "@tanstack/react-table": "^9.2.4",
+    "@tanstack/react-virtual": "^3.14.10",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "exceljs": "^4.4.0",
     "lucide-react": "^1.41.0",
+    "react-day-picker": "^10.0.1",
+    "react-dropzone": "^20.1.1",
+    "react-hook-form": "^7.87.0",
+    "react-markdown": "^10.1.0",
+    "recharts": "^3.10.1",
+    "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.6.0",
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
+    "@tanstack/react-query": "^5.102.8",
     "@types/node": "^22.20.1",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
@@ -66,9 +93,18 @@
     "typescript": "^5.9.0",
     "vite": "^8.2.2",
     "vitest": "^5.0.0",
-    "vitest-browser-react": "^2.3.0"
+    "vitest-browser-react": "^2.3.0",
+    "zod": "^4.5.4"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "peerDependenciesMeta": {
+    "zod": {
+      "optional": true
+    },
+    "@tanstack/react-query": {
+      "optional": true
+    }
   }
 }

package/src/components/accordion.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { ChevronDown } from "lucide-react";
+import { cn } from "@/lib/cn";
+
+/**
+ * Accordion.
+ *
+ * Base UI's Accordion is a list of Collapsibles: `Root > Item > Header > Trigger`
+ * plus `Panel`. The panel animates on height through Base UI's
+ * `--accordion-panel-height`, and marks its first/last frame with
+ * `data-starting-style` / `data-ending-style`, which is where it collapses to 0.
+ *
+ * Radix users: `type="single" | "multiple"` is now the boolean `multiple`, and
+ * `value` is always an array. `collapsible` is the default. `data-state="open"`
+ * is `data-open` on the item and panel, `data-panel-open` on the trigger.
+ */
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b border-[var(--ds-border)] last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header data-slot="accordion-header" className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "flex flex-1 items-start justify-between gap-4 py-4 text-left",
+          "text-[length:var(--ds-text-body-sm)] font-medium text-[color:var(--ds-foreground)]",
+          "rounded-[var(--ds-radius-sm)] outline-none",
+          "transition-colors duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]",
+          "hover:underline focus-visible:ring-[3px] focus-visible:ring-[var(--ds-ring)]/40",
+          "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+          "[&[data-panel-open]>svg]:rotate-180",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDown
+          aria-hidden
+          className={cn(
+            "pointer-events-none size-4 shrink-0 translate-y-0.5 text-[color:var(--ds-muted-foreground)]",
+            "transition-transform duration-[var(--ds-duration-base)] ease-[var(--ds-ease-out)]",
+          )}
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className={cn(
+        "h-[var(--accordion-panel-height,auto)] overflow-hidden",
+        "text-[length:var(--ds-text-body-sm)] text-[color:var(--ds-muted-foreground)]",
+        "transition-[height] duration-[var(--ds-duration-base)] ease-[var(--ds-ease-out)]",
+        "data-[starting-style]:h-0 data-[ending-style]:h-0",
+      )}
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Panel>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/components/alert.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+import { cn } from "@/lib/cn";
+
+/**
+ * Alert — an inline callout. Tinted variants use the `-soft` fill for the
+ * background and the tone colour for the border and icon; the body text stays
+ * on the foreground token so it reads in both themes.
+ */
+const alertVariants = cva(
+  [
+    "flex gap-3 rounded-[var(--ds-radius-md)] border px-3.5 py-3",
+    "text-[length:var(--ds-text-caption-lg)] leading-[var(--ds-text-caption-lg--line-height)]",
+    "text-[color:var(--ds-foreground)]",
+  ],
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-[var(--ds-card)] border-[var(--ds-border-subtle)] [&_[data-slot=alert-icon]]:text-[color:var(--ds-muted-foreground)]",
+        success:
+          "bg-[var(--ds-success-soft)] border-[var(--ds-success)]/35 [&_[data-slot=alert-icon]]:text-[color:var(--ds-success)]",
+        warn: "bg-[var(--ds-warning-soft)] border-[var(--ds-warning)]/35 [&_[data-slot=alert-icon]]:text-[color:var(--ds-warning)]",
+        danger:
+          "bg-[var(--ds-destructive-soft)] border-[var(--ds-destructive)]/35 [&_[data-slot=alert-icon]]:text-[color:var(--ds-destructive)]",
+        info: "bg-[var(--ds-info-soft)] border-[var(--ds-info)]/35 [&_[data-slot=alert-icon]]:text-[color:var(--ds-info)]",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface AlertProps
+  extends React.ComponentProps<"div">, VariantProps<typeof alertVariants> {}
+
+function Alert({ className, variant, ...props }: AlertProps) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertIcon({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-icon"
+      className={cn("shrink-0 self-start [&_svg]:size-4.5 [&_svg]:shrink-0", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn("self-start font-semibold text-[color:var(--ds-foreground)]", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn("mt-0.5 self-start text-[color:var(--ds-muted-foreground)]", className)}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertIcon, AlertTitle, AlertDescription, alertVariants };

package/src/components/avatar.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+import { cn } from "@/lib/cn";
+
+/**
+ * Avatar.
+ *
+ * Base UI preloads the image and only mounts `<img>` once it has loaded, so
+ * the fallback is what paints while loading and after an error. Initials sit
+ * on the primary fill in inverse text.
+ *
+ * Radix users: `delayMs` on the fallback is now `delay`.
+ */
+function Avatar({ className, ...props }: AvatarPrimitive.Root.Props) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-[var(--ds-radius-full)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full object-cover", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full select-none items-center justify-center rounded-[var(--ds-radius-full)]",
+        "bg-[var(--ds-primary)] text-[color:var(--ds-primary-foreground)]",
+        "text-[length:var(--ds-text-caption-lg)] font-semibold tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback };

package/src/components/badge.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+import { cn } from "@/lib/cn";
+
+/**
+ * Badge — the mono, uppercase status label. Each tone pairs a `-soft` fill
+ * with its foreground token; `warn`, `danger` and `secondary` are aliases kept
+ * for cortenaweb call sites.
+ */
+const badgeVariants = cva(
+  [
+    "inline-flex items-center gap-1.5 px-1.5 py-0.5 whitespace-nowrap",
+    "rounded-[var(--ds-radius-sm)]",
+    "font-[family-name:var(--ds-font-mono)] text-[length:var(--ds-text-caption-sm)] font-medium uppercase",
+    "tracking-[var(--ds-text-eyebrow--letter-spacing)] leading-[var(--ds-text-caption-sm--line-height)]",
+    "[&_svg]:size-3 [&_svg]:shrink-0",
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-[var(--ds-primary-soft)] text-[color:var(--ds-primary-soft-foreground)]",
+        success: "bg-[var(--ds-success-soft)] text-[color:var(--ds-success)]",
+        warning: "bg-[var(--ds-warning-soft)] text-[color:var(--ds-warning)]",
+        warn: "bg-[var(--ds-warning-soft)] text-[color:var(--ds-warning)]",
+        danger: "bg-[var(--ds-destructive-soft)] text-[color:var(--ds-destructive)]",
+        destructive: "bg-[var(--ds-destructive-soft)] text-[color:var(--ds-destructive)]",
+        info: "bg-[var(--ds-info-soft)] text-[color:var(--ds-info)]",
+        neutral: "bg-[var(--ds-hover)] text-[color:var(--ds-muted-foreground)]",
+        secondary: "bg-[var(--ds-hover)] text-[color:var(--ds-muted-foreground)]",
+        outline:
+          "bg-transparent border border-[var(--ds-border)] text-[color:var(--ds-muted-foreground)]",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.ComponentProps<"span">, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <span data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

package/src/components/calendar.tsx

@@ -0,0 +1,193 @@
+"use client";
+
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react";
+import * as React from "react";
+import {
+  DayPicker,
+  getDefaultClassNames,
+  type ChevronProps,
+  type DayButtonProps,
+  type DayPickerProps,
+  type NextMonthButtonProps,
+  type PreviousMonthButtonProps,
+  type RootProps,
+} from "react-day-picker";
+import { Button } from "@/components/button";
+import { cn } from "@/lib/cn";
+
+/**
+ * Calendar.
+ *
+ * The shadcn Calendar shape over react-day-picker 10. The library's stylesheet
+ * is not imported; every class comes from the `classNames` map below and every
+ * visual value in it is a cortena-design token. Structure (nav, caption, grid,
+ * dropdown caption) is DayPicker's; the day cells, nav buttons and chevrons are
+ * swapped for our Button and lucide icons through `components`.
+ *
+ * `showOutsideDays` defaults to true and `captionLayout` to `"label"`; pass
+ * `captionLayout="dropdown"` for native month/year selects in the caption.
+ */
+export type CalendarProps = DayPickerProps;
+
+function CalendarRoot({ className, rootRef, ...props }: RootProps) {
+  return <div data-slot="calendar" ref={rootRef} className={className} {...props} />;
+}
+
+function CalendarChevron({ className, orientation, size: _size, disabled, ...props }: ChevronProps) {
+  const Icon =
+    orientation === "left"
+      ? ChevronLeft
+      : orientation === "right"
+        ? ChevronRight
+        : orientation === "up"
+          ? ChevronUp
+          : ChevronDown;
+  return (
+    <Icon
+      data-slot="calendar-chevron"
+      aria-hidden
+      className={cn("size-4", disabled && "opacity-50", className)}
+      {...props}
+    />
+  );
+}
+
+function CalendarPreviousMonthButton(props: PreviousMonthButtonProps) {
+  return <Button data-slot="calendar-previous-month" variant="outline" size="icon-sm" {...props} />;
+}
+
+function CalendarNextMonthButton(props: NextMonthButtonProps) {
+  return <Button data-slot="calendar-next-month" variant="outline" size="icon-sm" {...props} />;
+}
+
+/**
+ * One day cell's button. Selection and range state are exposed as data
+ * attributes so the classes below (and a consumer's) can paint them; the
+ * `today` attribute is only set when the day is not selected, so the soft
+ * fill never competes with the selected fill.
+ */
+function CalendarDayButton({ className, day, modifiers, ...props }: DayButtonProps) {
+  const ref = React.useRef<HTMLButtonElement>(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+
+  const inRange = modifiers.range_start || modifiers.range_end || modifiers.range_middle;
+  const selectedSingle = modifiers.selected && !inRange;
+  const filled = selectedSingle || modifiers.range_start || modifiers.range_end;
+
+  return (
+    <Button
+      ref={ref}
+      data-slot="calendar-day-button"
+      data-day={day.isoDate}
+      data-selected-single={selectedSingle || undefined}
+      data-range-start={modifiers.range_start || undefined}
+      data-range-end={modifiers.range_end || undefined}
+      data-range-middle={(modifiers.range_middle && !filled) || undefined}
+      data-today={(modifiers.today && !modifiers.selected) || undefined}
+      variant="ghost"
+      size="icon-sm"
+      className={cn(
+        "size-8 font-normal text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-foreground)]",
+        "rounded-[var(--ds-radius-sm)] leading-none",
+        // today: soft fill from the primary tint
+        "data-[today]:bg-[var(--ds-primary-soft)] data-[today]:text-[color:var(--ds-primary-soft-foreground)]",
+        // range interior: soft fill, square so the run reads as one band
+        "data-[range-middle]:rounded-none data-[range-middle]:bg-[var(--ds-primary-soft)] data-[range-middle]:text-[color:var(--ds-primary-soft-foreground)] data-[range-middle]:hover:bg-[var(--ds-primary-soft)] data-[range-middle]:hover:brightness-95",
+        // selected day and range ends: solid primary
+        "data-[selected-single]:bg-[var(--ds-primary)] data-[selected-single]:text-[color:var(--ds-primary-foreground)] data-[selected-single]:hover:bg-[var(--ds-primary-hover)] data-[selected-single]:hover:text-[color:var(--ds-primary-foreground)]",
+        "data-[range-start]:bg-[var(--ds-primary)] data-[range-start]:text-[color:var(--ds-primary-foreground)] data-[range-start]:hover:bg-[var(--ds-primary-hover)] data-[range-start]:hover:text-[color:var(--ds-primary-foreground)]",
+        "data-[range-end]:bg-[var(--ds-primary)] data-[range-end]:text-[color:var(--ds-primary-foreground)] data-[range-end]:hover:bg-[var(--ds-primary-hover)] data-[range-end]:hover:text-[color:var(--ds-primary-foreground)]",
+        // the cell's own flags, read from the parent <td>
+        "group-data-[outside]/day:text-[color:var(--ds-text-tertiary)]",
+        "group-data-[disabled]/day:text-[color:var(--ds-text-disabled)] group-data-[disabled]/day:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function Calendar({
+  className,
+  classNames,
+  components,
+  showOutsideDays = true,
+  captionLayout = "label",
+  formatters,
+  ...props
+}: CalendarProps) {
+  const defaults = getDefaultClassNames();
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      captionLayout={captionLayout}
+      className={cn("w-fit p-3 text-[color:var(--ds-foreground)]", className)}
+      formatters={{
+        formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaults.root),
+        months: cn("relative flex flex-col gap-4 md:flex-row", defaults.months),
+        month: cn("flex w-full flex-col gap-3", defaults.month),
+        nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaults.nav),
+        button_previous: cn("aria-disabled:pointer-events-none aria-disabled:opacity-50", defaults.button_previous),
+        button_next: cn("aria-disabled:pointer-events-none aria-disabled:opacity-50", defaults.button_next),
+        month_caption: cn("flex h-8 w-full items-center justify-center px-9", defaults.month_caption),
+        caption_label: cn(
+          "select-none font-medium text-[length:var(--ds-text-body-sm)] text-[color:var(--ds-foreground)]",
+          captionLayout !== "label" &&
+            "flex h-8 items-center gap-1 rounded-[var(--ds-radius-sm)] pl-2 pr-1 [&>svg]:size-3.5 [&>svg]:text-[color:var(--ds-muted-foreground)]",
+          defaults.caption_label,
+        ),
+        dropdowns: cn(
+          "flex h-8 w-full items-center justify-center gap-1.5 font-medium text-[length:var(--ds-text-body-sm)]",
+          defaults.dropdowns,
+        ),
+        dropdown_root: cn(
+          "relative rounded-[var(--ds-radius-sm)] border border-[var(--ds-border)] bg-[var(--ds-muted)]",
+          "has-focus-visible:border-[var(--ds-ring)] has-focus-visible:ring-[3px] has-focus-visible:ring-[var(--ds-ring)]/40",
+          defaults.dropdown_root,
+        ),
+        dropdown: cn("absolute inset-0 cursor-pointer opacity-0", defaults.dropdown),
+        month_grid: cn("w-full border-collapse", defaults.month_grid),
+        weekdays: cn("flex", defaults.weekdays),
+        weekday: cn(
+          "flex-1 select-none font-normal text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]",
+          defaults.weekday,
+        ),
+        week: cn("mt-1 flex w-full", defaults.week),
+        week_number_header: cn("w-8 select-none", defaults.week_number_header),
+        week_number: cn(
+          "select-none text-[length:var(--ds-text-caption)] text-[color:var(--ds-muted-foreground)]",
+          defaults.week_number,
+        ),
+        day: cn(
+          "group/day relative aspect-square size-8 select-none p-0 text-center",
+          defaults.day,
+        ),
+        range_start: cn("rounded-l-[var(--ds-radius-sm)] bg-[var(--ds-primary-soft)]", defaults.range_start),
+        range_middle: cn("rounded-none bg-[var(--ds-primary-soft)]", defaults.range_middle),
+        range_end: cn("rounded-r-[var(--ds-radius-sm)] bg-[var(--ds-primary-soft)]", defaults.range_end),
+        today: defaults.today,
+        outside: defaults.outside,
+        disabled: defaults.disabled,
+        hidden: cn("invisible", defaults.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: CalendarRoot,
+        Chevron: CalendarChevron,
+        PreviousMonthButton: CalendarPreviousMonthButton,
+        NextMonthButton: CalendarNextMonthButton,
+        DayButton: CalendarDayButton,
+        ...components,
+      }}
+      {...props}
+    />
+  );
+}
+
+export { Calendar, CalendarDayButton };

package/src/components/card.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import type * as React from "react";
+import { cn } from "@/lib/cn";
+
+export interface CardProps extends React.ComponentProps<"div"> {
+  /** Lift the border and surface on hover, for clickable cards. */
+  hover?: boolean;
+  /** Draw the border in the ring colour, for a selected or highlighted card. */
+  accent?: boolean;
+}
+
+function Card({ className, hover, accent, ...props }: CardProps) {
+  return (
+    <div
+      data-slot="card"
+      data-accent={accent ? "" : undefined}
+      className={cn(
+        "flex flex-col rounded-[var(--ds-radius-lg)] border bg-[var(--ds-card)] text-[color:var(--ds-foreground)]",
+        "transition-[border-color,background-color] duration-[var(--ds-duration-fast)] ease-[var(--ds-ease-out)]",
+        accent ? "border-[var(--ds-ring)]" : "border-[var(--ds-border-subtle)]",
+        hover && "hover:border-[var(--ds-border)] hover:bg-[var(--ds-popover)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn("flex flex-col gap-1.5 p-5 pb-3", className)}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "text-[length:var(--ds-text-body-md)] font-semibold",
+        "leading-[var(--ds-text-h1--line-height)] tracking-[var(--ds-text-h1--letter-spacing)]",
+        "text-[color:var(--ds-foreground)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn(
+        "text-[length:var(--ds-text-caption-lg)] text-[color:var(--ds-muted-foreground)]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="card-content" className={cn("p-5 pt-0", className)} {...props} />;
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center gap-2 border-t border-[var(--ds-border-subtle)] p-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter };