@robomous/ui-core 0.1.0

package/shadcn/tooltip.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/cn"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }

package/src/harness.test.tsx

@@ -0,0 +1,37 @@
+/**
+ * A test boundary is a clean one: nothing a test mounted is still doing work
+ * when the next test begins, or when the file ends.
+ *
+ * Radix's focus scope returns focus from a `setTimeout(…, 0)` scheduled by its
+ * unmount cleanup — after `cleanup()` has already run. Left alone, that timer
+ * races the next test, and after a file's last test it races vitest's
+ * environment teardown; when teardown wins, it dispatches a `CustomEvent` from
+ * Node's realm into a closed jsdom document and the run ends with
+ * `Errors 1 error` under a green test count. `vitest.setup.ts` drains one
+ * macrotask after every `cleanup()` so the timer fires while the document it
+ * targets still exists. These two tests hold that property: the first ends
+ * with a dialog mounted, the second proves its unmount had finished before the
+ * second began. Delete the drain and the second fails.
+ */
+
+import { render } from "@testing-library/react";
+import { expect, it, vi } from "vitest";
+
+import { Dialog, DialogContent, DialogTitle } from "./primitives/dialog";
+
+const unmountFocusReturned = vi.fn();
+
+it("ends with a focus-trapping dialog still mounted", () => {
+  render(
+    <Dialog open>
+      <DialogContent onCloseAutoFocus={unmountFocusReturned}>
+        <DialogTitle>still open when the test ends</DialogTitle>
+      </DialogContent>
+    </Dialog>,
+  );
+  expect(unmountFocusReturned).not.toHaveBeenCalled();
+});
+
+it("and the next test starts only after that dialog's unmount timer has run", () => {
+  expect(unmountFocusReturned).toHaveBeenCalledTimes(1);
+});

package/src/index.ts

@@ -0,0 +1,119 @@
+/**
+ * `@robomous/ui-core` — the Robomous design system.
+ *
+ * Extracted from Robomous/VisionSet. UI primitives: Radix behaviour under
+ * shadcn Nova styling, iconed with lucide; the foundation design tokens; and
+ * the status-tone vocabulary. A consumer imports exactly:
+ *
+ * ```ts
+ * import "@robomous/ui-core/styles.css";   // once, in the app's entry
+ * import { Button, Card } from "@robomous/ui-core";
+ * ```
+ *
+ * The public surface is listed explicitly rather than `export *`, so what this
+ * package promises stays auditable. The gates that keep the primitives
+ * canonical are published too: `import { ... } from "@robomous/ui-core/gates"`.
+ */
+
+// The design tokens, and their prose contract in DESIGN.md.
+export { cssVar, DARK_THEME, LIGHT_THEME, THEME } from "./tokens.js";
+
+export { inlineLink } from "./lib/button.js";
+export { cn } from "./lib/cn.js";
+export { menuSurface } from "./lib/menu.js";
+export { twoLineTrigger } from "./lib/select.js";
+export { progressAria } from "./lib/progress.js";
+
+// The one home for status colour outside the Badge.
+export { STATUS_INK, TONE_BORDER, TONE_FILL, type StatusTone } from "./statusTone.js";
+
+// Primitives — Radix behaviour under shadcn Nova styling, iconed with lucide.
+export { Button, buttonVariants } from "./primitives/button.js";
+export {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "./primitives/card.js";
+export { Input } from "./primitives/input.js";
+export { Textarea } from "./primitives/textarea.js";
+export { Label } from "./primitives/label.js";
+export {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+} from "./primitives/field.js";
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from "./primitives/input-group.js";
+export {
+  Combobox,
+  ComboboxChip,
+  ComboboxChips,
+  ComboboxChipsInput,
+  ComboboxCollection,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxSeparator,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+} from "./primitives/combobox.js";
+export { Badge, badgeVariants } from "./primitives/badge.js";
+export { Alert, AlertAction, AlertDescription, AlertTitle } from "./primitives/alert.js";
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./primitives/dialog.js";
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./primitives/sheet.js";
+export { Tabs, TabsContent, TabsList, tabsListVariants, TabsTrigger } from "./primitives/tabs.js";
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./primitives/select.js";
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "./primitives/dropdown-menu.js";
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./primitives/tooltip.js";
+export { Progress } from "./primitives/progress.js";
+export { Skeleton } from "./primitives/skeleton.js";
+export { Toaster } from "./primitives/sonner.js";
+export { toast } from "sonner";
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./primitives/table.js";

package/src/lib/button.ts

@@ -0,0 +1,4 @@
+// A link button is inline prose, not a boxed control: the canonical variant keeps
+// the button's height and padding, so the sites that sit inside a sentence or a
+// table cell hand them back.
+export const inlineLink = "h-auto p-0";

package/src/lib/cn.test.ts

@@ -0,0 +1,33 @@
+/**
+ * `cn` — the generic merge cases. No custom `tailwind-merge` configuration
+ * lives behind this one (the shadcn preset's names do not collide with a
+ * stock class group the way v1's `--text-*` scale did), so there is nothing
+ * scale-specific left to pin here.
+ */
+
+import { describe, expect, it } from "vitest";
+
+import { cn } from "./cn";
+
+describe("cn", () => {
+  it("lets a caller override a stock utility", () => {
+    expect(cn("px-4", "px-6")).toBe("px-6");
+    expect(cn("rounded-md", "rounded-full")).toBe("rounded-full");
+  });
+
+  it("keeps utilities that do not conflict", () => {
+    expect(cn("flex", "items-center").split(" ").sort()).toEqual(["flex", "items-center"]);
+  });
+
+  it("drops falsy input rather than emitting it", () => {
+    expect(cn("flex", false, undefined, null, "gap-2")).toBe("flex gap-2");
+  });
+
+  it("keeps a semantic colour beside a layout utility", () => {
+    expect(cn("bg-primary", "rounded-lg").split(" ").sort()).toEqual(["bg-primary", "rounded-lg"]);
+  });
+
+  it("lets a caller override a semantic background colour", () => {
+    expect(cn("bg-primary", "bg-destructive")).toBe("bg-destructive");
+  });
+});

package/src/lib/cn.ts

@@ -0,0 +1,23 @@
+/**
+ * `cn` — merge class names, last conflicting utility wins.
+ *
+ * `clsx` handles the conditionals; `tailwind-merge` handles the part a naive
+ * join gets wrong. Without it `cn("px-4", props.className)` with `px-6`
+ * passed in emits both, and which one applies is decided by the order
+ * Tailwind happened to write them into the stylesheet — so a caller's
+ * override works or does not depending on a rule nobody can see. That is why
+ * the `className` prop on every primitive here is a real extension point
+ * rather than a suggestion.
+ *
+ * The shadcn preset's own vocabulary needs no custom `tailwind-merge`
+ * configuration — unlike v1's `--text-*` scale, none of its names collide
+ * with a stock Tailwind class group — so this is the bare merge, the same
+ * shape the CLI scratch's own `lib/utils.ts` ships.
+ */
+
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: readonly ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}

package/src/lib/menu.ts

@@ -0,0 +1,16 @@
+// What every `DropdownMenuContent` call site adds to the canonical surface, in
+// one constant because both halves are the same rule — a menu that behaves like
+// a menu (DESIGN.md, Motion).
+//
+// `data-closed:animate-none!`: a menu surface leaves on the frame it is
+// dismissed. While Radix runs an exit animation the dismissable layer stays
+// mounted, and a press that should open the next menu is swallowed as the
+// dismissal of this one.
+//
+// `w-auto`: a menu sizes to its items, not to its trigger. Canonical carries
+// `w-(--radix-dropdown-menu-trigger-width) min-w-32`, which pins the surface to
+// the trigger — behind an icon-sized button that is the 128px floor, and every
+// item longer than that wraps (the row actions on ModelsScreen, the Annotate
+// picker). `min-w-32` survives as the floor it was meant to be, because
+// tailwind-merge replaces only the `w-*` in the same utility group.
+export const menuSurface = "data-closed:animate-none! w-auto";

package/src/lib/progress.ts

@@ -0,0 +1,6 @@
+// Canonical `Progress` reads `value` only to size the indicator and never
+// forwards it to Radix's `Root`, so the number a screen reader would announce
+// is otherwise never rendered at all — a caller that needs it says so again here.
+export function progressAria(value: number): { readonly "aria-valuenow": number } {
+  return { "aria-valuenow": value };
+}

package/src/lib/select.ts

@@ -0,0 +1,4 @@
+// A two-line option needs the closed trigger to grow and to stop clamping its
+// value; both overrides name canonical's own variants so the merge replaces them.
+export const twoLineTrigger =
+  "data-[size=default]:h-auto min-h-8 *:data-[slot=select-value]:line-clamp-none";

package/src/primitives/alert.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/cn.js"
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn("absolute top-2 right-2", className)}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction }

package/src/primitives/badge.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "../lib/cn.js"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        success:
+          "bg-emerald-500/10 text-emerald-700 focus-visible:ring-emerald-500/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:focus-visible:ring-emerald-400/40 [a]:hover:bg-emerald-500/20 dark:[a]:hover:bg-emerald-400/20",
+        warning:
+          "bg-amber-500/10 text-amber-700 focus-visible:ring-amber-500/20 dark:bg-amber-400/10 dark:text-amber-400 dark:focus-visible:ring-amber-400/40 [a]:hover:bg-amber-500/20 dark:[a]:hover:bg-amber-400/20",
+        info:
+          "bg-sky-500/10 text-sky-700 focus-visible:ring-sky-500/20 dark:bg-sky-400/10 dark:text-sky-400 dark:focus-visible:ring-sky-400/40 [a]:hover:bg-sky-500/20 dark:[a]:hover:bg-sky-400/20",
+        quiet:
+          "bg-muted text-muted-foreground [a]:hover:bg-muted/80",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

package/src/primitives/button.tsx

@@ -0,0 +1,67 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "../lib/cn.js"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/src/primitives/card.tsx

@@ -0,0 +1,103 @@
+import * as React from "react"
+
+import { cn } from "../lib/cn.js"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-(--card-spacing)", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/src/primitives/combobox.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "./combobox";
+
+const FRUIT = ["apple", "banana", "cherry"];
+
+function Demo() {
+  return (
+    <Combobox items={FRUIT}>
+      <ComboboxInput placeholder="Pick" aria-label="Fruit" />
+      <ComboboxContent>
+        <ComboboxEmpty>No matches</ComboboxEmpty>
+        <ComboboxList>{(item: string) => <ComboboxItem key={item} value={item}>{item}</ComboboxItem>}</ComboboxList>
+      </ComboboxContent>
+    </Combobox>
+  );
+}
+
+describe("combobox", () => {
+  it("filters as you type and offers the survivors as options", async () => {
+    const user = userEvent.setup();
+    render(<Demo />);
+    const input = screen.getByRole("combobox", { name: "Fruit" });
+    await user.type(input, "an");
+    expect(await screen.findByRole("option", { name: "banana" })).toBeTruthy();
+    expect(screen.queryByRole("option", { name: "cherry" })).toBeNull();
+  });
+  it("closes on Escape", async () => {
+    const user = userEvent.setup();
+    render(<Demo />);
+    const input = screen.getByRole("combobox", { name: "Fruit" });
+    await user.type(input, "a");
+    await screen.findByRole("option", { name: "apple" });
+    await user.keyboard("{Escape}");
+    expect(screen.queryByRole("option", { name: "apple" })).toBeNull();
+  });
+});