@chesapeake/stack 0.1.0

package/components/ui/card.tsx

@@ -0,0 +1,162 @@
+// Copyright 2026 Chesapeake Computing
+// SPDX-License-Identifier: Apache-2.0
+
+import React from "react";
+
+import { cn } from "../../lib/utils";
+
+/**
+ * The main Card container component.
+ * Provides consistent card styling with background, border, and shadow.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>Card Title</CardTitle>
+ *     <CardDescription>Card description goes here</CardDescription>
+ *   </CardHeader>
+ *   <CardContent>
+ *     <p>Main content of the card</p>
+ *   </CardContent>
+ *   <CardFooter>
+ *     <Button>Action</Button>
+ *   </CardFooter>
+ * </Card>
+ * ```
+ */
+function Card({ className, ...props }: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col rounded-xl border shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Header section of the Card.
+ * Contains the title and description with proper spacing.
+ */
+function CardHeader({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-4 sm:px-6 pt-4 sm:pt-6 pb-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Title element for the Card header.
+ */
+function CardTitle({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "leading-tight font-semibold text-base sm:text-lg",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Description text for the Card header.
+ * Typically rendered below the title with muted styling.
+ */
+function CardDescription({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Action element positioned in the top-right of the Card header.
+ * Useful for dropdown menus, buttons, or other actions.
+ */
+function CardAction({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"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}
+    />
+  );
+}
+
+/**
+ * Main content area of the Card.
+ * Contains the primary content with consistent padding.
+ */
+function CardContent({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-4 sm:px-6 pb-4 sm:pb-6", className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Footer section of the Card.
+ * Typically contains actions or additional information.
+ */
+function CardFooter({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center px-4 sm:px-6 py-4 sm:py-6 [.border-t]:pt-6",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+};

package/components/ui/dialog.tsx

@@ -0,0 +1,290 @@
+// Copyright 2026 Chesapeake Computing
+// SPDX-License-Identifier: Apache-2.0
+
+import React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+
+import { cn } from "../../lib/utils";
+
+/**
+ * Dialog component root. Provides the context for dialog components.
+ * Built on top of Radix UI Dialog primitives for accessibility.
+ *
+ * @example
+ * ```tsx
+ * import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle } from "@shared/components/ui/dialog"
+ * import { Button } from "@shared/components/ui/button"
+ *
+ * function MyDialog() {
+ *   return (
+ *     <Dialog>
+ *       <DialogTrigger asChild>
+ *         <Button>Open Dialog</Button>
+ *       </DialogTrigger>
+ *       <DialogContent>
+ *         <DialogHeader>
+ *           <DialogTitle>Dialog Title</DialogTitle>
+ *         </DialogHeader>
+ *         <p>Dialog content here</p>
+ *       </DialogContent>
+ *     </Dialog>
+ *   )
+ * }
+ * ```
+ */
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+/**
+ * DialogTrigger component. Wraps the element that opens the dialog.
+ * When clicked, the dialog will open.
+ *
+ * @example
+ * ```tsx
+ * <Dialog>
+ *   <DialogTrigger asChild>
+ *     <Button>Open</Button>
+ *   </DialogTrigger>
+ *   <DialogContent>...</DialogContent>
+ * </Dialog>
+ * ```
+ */
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+/**
+ * DialogPortal component. Portals the dialog content outside the DOM hierarchy.
+ * Usually used internally by DialogContent.
+ */
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+/**
+ * DialogClose component. Closes the dialog when clicked.
+ *
+ * @example
+ * ```tsx
+ * <DialogContent>
+ *   <DialogHeader>
+ *     <DialogTitle>Title</DialogTitle>
+ *   </DialogHeader>
+ *   <p>Content</p>
+ *   <DialogFooter>
+ *     <DialogClose asChild>
+ *       <Button variant="outline">Close</Button>
+ *     </DialogClose>
+ *   </DialogFooter>
+ * </DialogContent>
+ * ```
+ */
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+/**
+ * DialogOverlay component. The backdrop behind the dialog content.
+ * Usually used internally by DialogContent.
+ */
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * DialogContent component. The main content container for the dialog.
+ * Includes the overlay and portal by default.
+ *
+ * @example
+ * ```tsx
+ * <Dialog>
+ *   <DialogTrigger>Open</DialogTrigger>
+ *   <DialogContent className="max-w-md">
+ *     <DialogHeader>
+ *       <DialogTitle>Confirm Action</DialogTitle>
+ *       <DialogDescription>
+ *         Are you sure you want to proceed?
+ *       </DialogDescription>
+ *     </DialogHeader>
+ *     <DialogFooter>
+ *       <Button>Confirm</Button>
+ *       <DialogClose asChild>
+ *         <Button variant="outline">Cancel</Button>
+ *       </DialogClose>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ */
+function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+/**
+ * DialogHeader component. Container for the dialog title and description.
+ * Provides consistent spacing and layout.
+ *
+ * @example
+ * ```tsx
+ * <DialogContent>
+ *   <DialogHeader>
+ *     <DialogTitle>Dialog Title</DialogTitle>
+ *     <DialogDescription>Optional description text</DialogDescription>
+ *   </DialogHeader>
+ * </DialogContent>
+ * ```
+ */
+function DialogHeader({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn(
+        "flex flex-col space-y-1.5 text-center sm:text-left",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * DialogFooter component. Container for dialog action buttons.
+ * Provides consistent spacing and responsive layout.
+ *
+ * @example
+ * ```tsx
+ * <DialogContent>
+ *   <DialogHeader>...</DialogHeader>
+ *   <DialogFooter>
+ *     <Button>Save</Button>
+ *     <DialogClose asChild>
+ *       <Button variant="outline">Cancel</Button>
+ *     </DialogClose>
+ *   </DialogFooter>
+ * </DialogContent>
+ * ```
+ */
+function DialogFooter({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * DialogTitle component. The accessible title for the dialog.
+ * Required for screen readers and accessibility.
+ *
+ * @example
+ * ```tsx
+ * <DialogHeader>
+ *   <DialogTitle>Delete Item</DialogTitle>
+ * </DialogHeader>
+ * ```
+ */
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "text-lg font-semibold leading-none tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * DialogDescription component. Optional descriptive text for the dialog.
+ * Helps provide context to users.
+ *
+ * @example
+ * ```tsx
+ * <DialogHeader>
+ *   <DialogTitle>Confirm Deletion</DialogTitle>
+ *   <DialogDescription>
+ *     This action cannot be undone. This will permanently delete the item.
+ *   </DialogDescription>
+ * </DialogHeader>
+ * ```
+ */
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

package/components/ui/drawer.tsx

@@ -0,0 +1,227 @@
+// Copyright 2026 Chesapeake Computing
+// SPDX-License-Identifier: Apache-2.0
+
+"use client";
+
+import React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+
+import { cn } from "../../lib/utils";
+
+/**
+ * Drawer component root. Manages the open/closed state of the drawer.
+ * Built on top of Vaul for smooth interactions and animations.
+ *
+ * @example
+ * ```tsx
+ * <Drawer>
+ *   <DrawerTrigger asChild>
+ *     <Button>Open Drawer</Button>
+ *   </DrawerTrigger>
+ *   <DrawerContent>
+ *     <DrawerHeader>
+ *       <DrawerTitle>Drawer Title</DrawerTitle>
+ *       <DrawerDescription>Description text</DrawerDescription>
+ *     </DrawerHeader>
+ *     <DrawerFooter>
+ *       <DrawerClose asChild>
+ *         <Button>Close</Button>
+ *       </DrawerClose>
+ *     </DrawerFooter>
+ *   </DrawerContent>
+ * </Drawer>
+ * ```
+ */
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
+}
+
+/**
+ * Trigger element that opens/closes the drawer.
+ *
+ * @example
+ * ```tsx
+ * <DrawerTrigger asChild>
+ *   <Button>Open</Button>
+ * </DrawerTrigger>
+ * ```
+ */
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+/**
+ * Portal for rendering drawer content outside the DOM hierarchy.
+ */
+function DrawerPortal({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+/**
+ * Closes the drawer when clicked.
+ *
+ * @example
+ * ```tsx
+ * <DrawerClose asChild>
+ *   <Button variant="outline">Cancel</Button>
+ * </DrawerClose>
+ * ```
+ */
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+/**
+ * Backdrop overlay behind the drawer content.
+ */
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Main content container for the drawer.
+ * Supports multiple directions: top, bottom, left, right (default: bottom).
+ *
+ * @example
+ * ```tsx
+ * // Bottom drawer (default)
+ * <DrawerContent>
+ *   <p>Content here</p>
+ * </DrawerContent>
+ *
+ * // Side drawer
+ * <Drawer direction="right">
+ *   <DrawerContent>
+ *     <p>Side content</p>
+ *   </DrawerContent>
+ * </Drawer>
+ * ```
+ */
+function DrawerContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(
+          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  );
+}
+
+/**
+ * Header section of the drawer.
+ * Contains title and description with proper spacing.
+ */
+function DrawerHeader({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Footer section of the drawer.
+ * Typically contains action buttons.
+ */
+function DrawerFooter({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Title element for the drawer header.
+ */
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Description text for the drawer header.
+ */
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger,
+};