@neynar/ui 0.4.0 → 0.5.0

package/src/components/ui/sheet.tsx

@@ -1,452 +1,58 @@
 import * as React from "react";
-import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { XIcon } from "lucide-react";
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
 
 import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { XIcon } from "lucide-react";
 
-/**
- * Props for Sheet component (Documentation only - NOT used in component implementation)
- * These types are for documentation generation and should not replace Radix inferred types
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type SheetDocsProps = {
-  /** Controls the open state of the sheet. Use with onOpenChange for controlled behavior */
-  open?: boolean;
-  /** Callback fired when the open state changes. Use with open for controlled behavior */
-  onOpenChange?: (open: boolean) => void;
-  /** Initial open state for uncontrolled usage @default false */
-  defaultOpen?: boolean;
-  /** Whether the sheet should be modal (blocking interaction with content behind) @default true */
-  modal?: boolean;
-  /** Child elements that make up the sheet (trigger, content, etc.) */
-  children?: React.ReactNode;
-};
-
-/**
- * Props for SheetTrigger component (Documentation only - NOT used in component implementation)
- * These types are for documentation generation and should not replace Radix inferred types
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type SheetTriggerDocsProps = {
-  /** When true, merges props with child element instead of rendering a button @default false */
-  asChild?: boolean;
-  /** Child element to render as the trigger. Required when asChild is true */
-  children?: React.ReactNode;
-};
-
-/**
- * Props for SheetClose component (Documentation only - NOT used in component implementation)
- * These types are for documentation generation and should not replace Radix inferred types
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type SheetCloseDocsProps = {
-  /** When true, merges props with child element instead of rendering a button @default false */
-  asChild?: boolean;
-  /** Child element to render as the close button. Required when asChild is true */
-  children?: React.ReactNode;
-};
-
-/**
- * Props for SheetPortal component (Documentation only - NOT used in component implementation)
- * These types are for documentation generation and should not replace Radix inferred types
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type SheetPortalDocsProps = {
-  /** Forces mounting when true. Useful for controlling animations with external state */
-  forceMount?: boolean;
-  /** Container element to portal the sheet into @default document.body */
-  container?: HTMLElement | null;
-  /** Child elements to render in the portal */
-  children?: React.ReactNode;
-};
-
-/**
- * Props for SheetOverlay component (Documentation only - NOT used in component implementation)
- * These types are for documentation generation and should not replace Radix inferred types
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type SheetOverlayDocsProps = {
-  /** When true, merges props with child element instead of rendering a div @default false */
-  asChild?: boolean;
-  /** Forces mounting when true. Useful for controlling animations with external state */
-  forceMount?: boolean;
-  /** Additional CSS classes for styling customization */
-  className?: string;
-};
-
-/**
- * Props for SheetContent component (Documentation only - NOT used in component implementation)
- * These types are for documentation generation and should not replace Radix inferred types
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type SheetContentDocsProps = {
-  /** When true, merges props with child element instead of rendering a div @default false */
-  asChild?: boolean;
-  /** Forces mounting when true. Useful for controlling animations with external state */
-  forceMount?: boolean;
-  /** Event handler called when focus moves to the trigger after closing */
-  onCloseAutoFocus?: (event: Event) => void;
-  /** Event handler called when focus moves into the component after opening */
-  onOpenAutoFocus?: (event: Event) => void;
-  /** Event handler called when the escape key is down */
-  onEscapeKeyDown?: (event: KeyboardEvent) => void;
-  /** Event handler called when a pointer down event happens outside the bounds of the component */
-  onPointerDownOutside?: (
-    event: CustomEvent<{ originalEvent: PointerEvent }>,
-  ) => void;
-  /** Event handler called when an interaction (pointer or focus) happens outside the bounds of the component */
-  onInteractOutside?: (
-    event: CustomEvent<{ originalEvent: PointerEvent | FocusEvent }>,
-  ) => void;
-  /** Which side of the screen the sheet slides in from @default "right" */
-  side?: "top" | "right" | "bottom" | "left";
-  /** Additional CSS classes for styling customization */
-  className?: string;
-  /** Content to display inside the sheet */
-  children?: React.ReactNode;
-};
-
-/**
- * Props for SheetHeader component (Documentation only - NOT used in component implementation)
- * These types are for documentation generation and should not replace HTML element types
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type SheetHeaderDocsProps = {
-  /** Additional CSS classes for styling customization */
-  className?: string;
-  /** Header content (typically SheetTitle and SheetDescription) */
-  children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>;
-
-/**
- * Props for SheetFooter component (Documentation only - NOT used in component implementation)
- * These types are for documentation generation and should not replace HTML element types
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type SheetFooterDocsProps = {
-  /** Additional CSS classes for styling customization */
-  className?: string;
-  /** Footer content (typically action buttons) */
-  children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>;
-
-/**
- * Props for SheetTitle component (Documentation only - NOT used in component implementation)
- * These types are for documentation generation and should not replace Radix inferred types
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type SheetTitleDocsProps = {
-  /** When true, merges props with child element instead of rendering an h2 @default false */
-  asChild?: boolean;
-  /** Additional CSS classes for styling customization */
-  className?: string;
-  /** Title text content */
-  children?: React.ReactNode;
-};
-
-/**
- * Props for SheetDescription component (Documentation only - NOT used in component implementation)
- * These types are for documentation generation and should not replace Radix inferred types
- */
-// eslint-disable-next-line unused-imports/no-unused-vars
-type SheetDescriptionDocsProps = {
-  /** When true, merges props with child element instead of rendering a p element @default false */
-  asChild?: boolean;
-  /** Additional CSS classes for styling customization */
-  className?: string;
-  /** Description text content */
-  children?: React.ReactNode;
-};
+type SheetProps = SheetPrimitive.Root.Props;
 
 /**
- * Sheet - A slide-out panel that displays supplementary content
- *
- * A versatile sheet component that slides in from any edge of the screen to display
- * supplementary content without fully blocking the main interface. Built on Radix UI
- * Dialog primitives with smooth animations and comprehensive accessibility support.
- *
- * Sheets are ideal for:
- * - Mobile navigation menus
- * - Settings panels and configuration forms
- * - Contextual information displays
- * - Secondary actions that don't require full attention
- * - Filters and search interfaces
- *
- * @component
- * @example
- * ```tsx
- * // Basic sheet from right side (default)
- * <Sheet>
- *   <SheetTrigger asChild>
- *     <Button>Open Settings</Button>
- *   </SheetTrigger>
- *   <SheetContent>
- *     <SheetHeader>
- *       <SheetTitle>Settings</SheetTitle>
- *       <SheetDescription>
- *         Configure your application preferences.
- *       </SheetDescription>
- *     </SheetHeader>
- *     <div className="py-4">
- *       <p>Settings content here</p>
- *     </div>
- *     <SheetFooter>
- *       <Button type="submit">Save Changes</Button>
- *     </SheetFooter>
- *   </SheetContent>
- * </Sheet>
- * ```
- *
- * @example
- * ```tsx
- * // Sheet from different sides with controlled state
- * function NavigationSheet() {
- *   const [open, setOpen] = useState(false)
- *
- *   return (
- *     <Sheet open={open} onOpenChange={setOpen}>
- *       <SheetTrigger asChild>
- *         <Button variant="outline">Menu</Button>
- *       </SheetTrigger>
- *       <SheetContent side="left">
- *         <SheetHeader>
- *           <SheetTitle>Navigation</SheetTitle>
- *         </SheetHeader>
- *         <nav className="py-4">
- *           <Button variant="ghost" className="w-full justify-start">
- *             Dashboard
- *           </Button>
- *         </nav>
- *       </SheetContent>
- *     </Sheet>
- *   )
- * }
- * ```
- *
- * @example
- * ```tsx
- * // Sheet with form handling
- * <Sheet>
- *   <SheetTrigger asChild>
- *     <Button>Edit Profile</Button>
- *   </SheetTrigger>
- *   <SheetContent>
- *     <form onSubmit={handleSubmit}>
- *       <SheetHeader>
- *         <SheetTitle>Edit Profile</SheetTitle>
- *         <SheetDescription>
- *           Update your profile information.
- *         </SheetDescription>
- *       </SheetHeader>
- *       <div className="grid gap-4 py-4">
- *         <Input placeholder="Name" />
- *         <Input placeholder="Email" type="email" />
- *       </div>
- *       <SheetFooter>
- *         <SheetClose asChild>
- *           <Button type="button" variant="outline">Cancel</Button>
- *         </SheetClose>
- *         <Button type="submit">Save</Button>
- *       </SheetFooter>
- *     </form>
- *   </SheetContent>
- * </Sheet>
- * ```
- *
- * @accessibility
- * - Focus is trapped within the sheet when open
- * - Escape key closes the sheet
- * - Background scroll is locked when sheet is open
- * - Proper ARIA labeling for screen readers
- * - Close button always visible and accessible
- * - Supports keyboard navigation
- *
- * @see {@link https://ui.shadcn.com/docs/components/sheet} shadcn/ui Sheet documentation
- * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog} Radix UI Dialog primitive
- * @since 1.0.0
+ * Sheet root component. Manages open/closed state for slide-in panels.
+ * Built on Base UI Dialog with directional slide animations.
  */
-function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+function Sheet({ ...props }: SheetProps) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />;
 }
 
+type SheetTriggerProps = SheetPrimitive.Trigger.Props;
+
 /**
- * SheetTrigger - Button or element that opens the sheet
- *
- * The trigger element that users interact with to open the sheet.
- * Use the `asChild` prop to render as a different element while
- * maintaining the trigger functionality. When clicked, opens the
- * sheet and manages focus appropriately.
- *
- * @component
- * @example
- * ```tsx
- * // As a styled button
- * <SheetTrigger asChild>
- *   <Button variant="outline">Open Settings</Button>
- * </SheetTrigger>
- *
- * // As a simple button
- * <SheetTrigger>Click to open</SheetTrigger>
- *
- * // As an icon button
- * <SheetTrigger asChild>
- *   <Button size="icon" variant="ghost">
- *     <MenuIcon className="h-4 w-4" />
- *   </Button>
- * </SheetTrigger>
- * ```
- *
- * @param asChild - When true, merges props with child element instead of rendering a button @default false
- * @param children - Child element to render as the trigger. Required when asChild is true
- *
- * @accessibility
- * - Automatically receives appropriate ARIA attributes
- * - Manages focus when sheet opens and closes
- * - Supports keyboard activation (Space and Enter)
- *
- * @see {@link SheetContent} For the content that this trigger opens
- * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#trigger} Radix UI Dialog Trigger
+ * Button that opens the sheet. Use `render` prop to customize the trigger element.
  */
-function SheetTrigger({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+function SheetTrigger({ ...props }: SheetTriggerProps) {
   return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
 }
 
+type SheetCloseProps = SheetPrimitive.Close.Props;
+
 /**
- * SheetClose - Button that closes the sheet
- *
- * A button that closes the sheet when clicked. Can be placed anywhere
- * within the sheet content. Use the `asChild` prop to render as a
- * different element while maintaining the close functionality.
- * Multiple close buttons can be used throughout the sheet content.
- *
- * @component
- * @example
- * ```tsx
- * // In footer with styled button
- * <SheetFooter>
- *   <SheetClose asChild>
- *     <Button variant="outline">Cancel</Button>
- *   </SheetClose>
- *   <Button type="submit">Save</Button>
- * </SheetFooter>
- *
- * // As simple text button
- * <SheetClose>Close</SheetClose>
- *
- * // Custom close button in content
- * <SheetClose asChild>
- *   <Button variant="ghost" size="sm" className="ml-auto">
- *     <XIcon className="h-4 w-4" />
- *   </Button>
- * </SheetClose>
- * ```
- *
- * @param asChild - When true, merges props with child element instead of rendering a button @default false
- * @param children - Child element to render as the close button. Required when asChild is true
- *
- * @accessibility
- * - Automatically receives appropriate ARIA attributes
- * - Supports keyboard activation (Space and Enter)
- * - Focus returns to trigger element after closing
- *
- * @see {@link SheetTrigger} For the element that opens the sheet
- * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#close} Radix UI Dialog Close
+ * Button that closes the sheet. Use `render` prop to customize the close element.
  */
-function SheetClose({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+function SheetClose({ ...props }: SheetCloseProps) {
   return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
 }
 
+type SheetPortalProps = SheetPrimitive.Portal.Props;
+
 /**
- * SheetPortal - Portal container for sheet content
- *
- * Renders the sheet content in a portal at the end of the document body.
- * This ensures the sheet appears above other content with proper z-index.
- * Usually not used directly - SheetContent handles this automatically.
- * Essential for proper layering and focus management.
- *
- * @component
- * @example
- * ```tsx
- * // Custom portal container
- * <SheetPortal container={customContainer}>
- *   <SheetOverlay />
- *   <SheetPrimitive.Content>
- *     Sheet content here
- *   </SheetPrimitive.Content>
- * </SheetPortal>
- *
- * // Force mounted portal for animation control
- * <SheetPortal forceMount={shouldShow}>
- *   <SheetOverlay />
- *   <SheetPrimitive.Content>
- *     Content with custom mounting logic
- *   </SheetPrimitive.Content>
- * </SheetPortal>
- * ```
- *
- * @param forceMount - Forces mounting when true. Useful for controlling animations with external state
- * @param container - Container element to portal the sheet into @default document.body
- * @param children - Child elements to render in the portal (overlay and content)
- *
- * @accessibility
- * - Ensures sheet content is properly layered for screen readers
- * - Maintains proper document flow for accessibility tree
- *
- * @see {@link SheetContent} For the main content component that uses this portal
- * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#portal} Radix UI Dialog Portal
+ * Portal container for sheet content. Renders sheet outside normal DOM hierarchy.
  */
-function SheetPortal({
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+function SheetPortal({ ...props }: SheetPortalProps) {
   return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
 }
 
+type SheetOverlayProps = SheetPrimitive.Backdrop.Props;
+
 /**
- * SheetOverlay - Background overlay behind the sheet
- *
- * A semi-transparent overlay that covers the entire viewport behind the sheet.
- * Clicking the overlay closes the sheet (when modal is true). Includes smooth
- * fade animations and prevents interaction with content behind the sheet.
- * Usually not used directly - SheetContent handles this automatically.
- *
- * @component
- * @example
- * ```tsx
- * // Custom overlay with different opacity
- * <SheetOverlay className="bg-black/30" />
- *
- * // Overlay with custom animation timing
- * <SheetOverlay className="bg-black/60 duration-200" />
- *
- * // Force mounted overlay for external animation control
- * <SheetOverlay forceMount={isAnimating} />
- * ```
- *
- * @param asChild - When true, merges props with child element instead of rendering a div @default false
- * @param forceMount - Forces mounting when true. Useful for controlling animations with external state
- * @param className - Additional CSS classes for styling customization
- *
- * @accessibility
- * - Prevents interaction with content behind the sheet
- * - Clicking overlay closes the sheet (respects modal behavior)
- * - Proper z-index layering for screen readers
- *
- * @see {@link SheetContent} For the content component that uses this overlay
- * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#overlay} Radix UI Dialog Overlay
+ * Translucent backdrop overlay with blur effect. Automatically included in SheetContent.
  */
-function SheetOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+function SheetOverlay({ className, ...props }: SheetOverlayProps) {
   return (
-    <SheetPrimitive.Overlay
+    <SheetPrimitive.Backdrop
       data-slot="sheet-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",
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50",
         className,
       )}
       {...props}
@@ -454,159 +60,63 @@ function SheetOverlay({
   );
 }
 
+type SheetContentProps = SheetPrimitive.Popup.Props & {
+  /** Which edge the sheet slides in from. @default "right" */
+  side?: "top" | "right" | "bottom" | "left";
+  /** Show close button (X) in top-right corner. @default true */
+  showCloseButton?: boolean;
+};
+
 /**
- * SheetContent - Main container for sheet content
- *
- * The primary content area of the sheet that slides in from the specified side.
- * Includes automatic overlay, portal rendering, and close button. Contains smooth
- * slide animations with responsive sizing and proper focus management.
- *
- * Features automatic positioning based on the side prop:
- * - Right/Left: Full height, responsive width (3/4 on mobile, max 384px on desktop)
- * - Top/Bottom: Full width, auto height based on content
- *
- * @component
- * @example
- * ```tsx
- * // Default right-side sheet
- * <SheetContent>
- *   <SheetHeader>
- *     <SheetTitle>Settings</SheetTitle>
- *   </SheetHeader>
- *   <div className="py-4">
- *     Settings content here
- *   </div>
- * </SheetContent>
- *
- * // Left-side navigation sheet
- * <SheetContent side="left">
- *   <nav>
- *     <Button variant="ghost">Dashboard</Button>
- *     <Button variant="ghost">Profile</Button>
- *   </nav>
- * </SheetContent>
- *
- * // Top sheet with custom height
- * <SheetContent side="top" className="h-[300px]">
- *   <SheetHeader>
- *     <SheetTitle>Notifications</SheetTitle>
- *   </SheetHeader>
- * </SheetContent>
- *
- * // Bottom sheet for mobile actions
- * <SheetContent side="bottom" className="h-[400px]">
- *   <div className="grid grid-cols-2 gap-4">
- *     <Button>Action 1</Button>
- *     <Button>Action 2</Button>
- *   </div>
- * </SheetContent>
- * ```
- *
- * @param asChild - When true, merges props with child element instead of rendering a div @default false
- * @param forceMount - Forces mounting when true. Useful for controlling animations with external state
- * @param onCloseAutoFocus - Event handler called when focus moves to the trigger after closing
- * @param onOpenAutoFocus - Event handler called when focus moves into the component after opening
- * @param onEscapeKeyDown - Event handler called when the escape key is down. Can prevent default to disable escape key closing
- * @param onPointerDownOutside - Event handler called when a pointer down event happens outside the component bounds
- * @param onInteractOutside - Event handler called when an interaction happens outside the component bounds
- * @param side - Which side of the screen the sheet slides in from @default "right"
- * @param className - Additional CSS classes for styling customization
- * @param children - Content to display inside the sheet
- *
- * @accessibility
- * - Includes built-in close button with proper ARIA labels and screen reader text
- * - Focus automatically trapped within content when open
- * - Escape key closes the sheet (can be prevented with onEscapeKeyDown)
- * - Background overlay prevents interaction with page content
- * - Focus returns to trigger element when closed
- * - Supports all standard keyboard interactions
- *
- * @see {@link SheetHeader} For structured header content
- * @see {@link SheetFooter} For action buttons
- * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#content} Radix UI Dialog Content
+ * Sheet content panel with automatic portal, overlay, and slide animations.
+ * Slides in from specified edge with backdrop blur effect.
  */
 function SheetContent({
   className,
   children,
   side = "right",
+  showCloseButton = true,
   ...props
-}: React.ComponentProps<typeof SheetPrimitive.Content> & {
-  side?: "top" | "right" | "bottom" | "left";
-}) {
+}: SheetContentProps) {
   return (
     <SheetPortal>
       <SheetOverlay />
-      <SheetPrimitive.Content
+      <SheetPrimitive.Popup
         data-slot="sheet-content"
+        data-side={side}
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-          side === "right" &&
-            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
-          side === "left" &&
-            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
-          side === "top" &&
-            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
-          side === "bottom" &&
-            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
           className,
         )}
         {...props}
       >
         {children}
-        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
-          <XIcon className="size-4" />
-          <span className="sr-only">Close</span>
-        </SheetPrimitive.Close>
-      </SheetPrimitive.Content>
+        {showCloseButton && (
+          <SheetPrimitive.Close
+            data-slot="sheet-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-4 right-4"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Popup>
     </SheetPortal>
   );
 }
 
+type SheetHeaderProps = React.ComponentProps<"div">;
+
 /**
- * SheetHeader - Header section for sheet content
- *
- * A container for the sheet's title and description, positioned at the top
- * of the sheet content. Provides consistent spacing and layout for sheet headers.
- * Should contain SheetTitle and optionally SheetDescription for proper
- * accessibility and semantic structure.
- *
- * @component
- * @example
- * ```tsx
- * // Complete header with title and description
- * <SheetHeader>
- *   <SheetTitle>Edit Profile</SheetTitle>
- *   <SheetDescription>
- *     Make changes to your profile information.
- *   </SheetDescription>
- * </SheetHeader>
- *
- * // Header with title only
- * <SheetHeader>
- *   <SheetTitle>Quick Actions</SheetTitle>
- * </SheetHeader>
- *
- * // With custom styling and border
- * <SheetHeader className="border-b pb-4 mb-4">
- *   <SheetTitle>Advanced Settings</SheetTitle>
- *   <SheetDescription>
- *     Configure advanced options for your account.
- *   </SheetDescription>
- * </SheetHeader>
- * ```
- *
- * @param className - Additional CSS classes for styling customization
- * @param children - Header content (typically SheetTitle and SheetDescription)
- *
- * @accessibility
- * - Provides semantic structure for sheet content
- * - Works with SheetTitle to properly label the sheet
- * - Maintains proper heading hierarchy
- *
- * @see {@link SheetTitle} For the main sheet heading
- * @see {@link SheetDescription} For additional context text
+ * Header section for sheet title and description. Provides consistent spacing.
  */
-function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+function SheetHeader({ className, ...props }: SheetHeaderProps) {
   return (
     <div
       data-slot="sheet-header"
@@ -616,62 +126,12 @@ function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
+type SheetFooterProps = React.ComponentProps<"div">;
+
 /**
- * SheetFooter - Footer section for sheet actions
- *
- * A container for action buttons positioned at the bottom of the sheet content.
- * Uses `mt-auto` to stick to the bottom and provides consistent spacing for buttons.
- * Ideal for primary and secondary actions like Save/Cancel button pairs.
- *
- * @component
- * @example
- * ```tsx
- * // Standard save/cancel footer
- * <SheetFooter>
- *   <SheetClose asChild>
- *     <Button variant="outline">Cancel</Button>
- *   </SheetClose>
- *   <Button type="submit">Save Changes</Button>
- * </SheetFooter>
- *
- * // Single action footer
- * <SheetFooter>
- *   <SheetClose asChild>
- *     <Button className="w-full">Done</Button>
- *   </SheetClose>
- * </SheetFooter>
- *
- * // Custom layout with multiple action groups
- * <SheetFooter className="flex-row justify-between">
- *   <Button variant="ghost">Reset</Button>
- *   <div className="flex gap-2">
- *     <SheetClose asChild>
- *       <Button variant="outline">Cancel</Button>
- *     </SheetClose>
- *     <Button>Save</Button>
- *   </div>
- * </SheetFooter>
- *
- * // Footer with destructive action
- * <SheetFooter>
- *   <Button variant="destructive">Delete Account</Button>
- *   <SheetClose asChild>
- *     <Button variant="outline">Keep Account</Button>
- *   </SheetClose>
- * </SheetFooter>
- * ```
- *
- * @param className - Additional CSS classes for styling customization
- * @param children - Footer content (typically action buttons)
- *
- * @accessibility
- * - Provides semantic footer structure
- * - Supports proper tab order for action buttons
- * - Works with form submission patterns
- *
- * @see {@link SheetClose} For buttons that close the sheet
+ * Footer section for sheet actions. Automatically sticks to bottom with consistent spacing.
  */
-function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+function SheetFooter({ className, ...props }: SheetFooterProps) {
   return (
     <div
       data-slot="sheet-footer"
@@ -681,116 +141,27 @@ function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
+type SheetTitleProps = SheetPrimitive.Title.Props;
+
 /**
- * SheetTitle - Title element for the sheet
- *
- * The main heading for the sheet content. Provides proper semantic heading
- * and accessibility labeling for screen readers. Should be used within SheetHeader.
- * This component is required for proper accessibility - every sheet must have a title.
- *
- * @component
- * @example
- * ```tsx
- * // Standard usage in header
- * <SheetHeader>
- *   <SheetTitle>Edit Profile</SheetTitle>
- *   <SheetDescription>Update your profile information.</SheetDescription>
- * </SheetHeader>
- *
- * // With custom styling
- * <SheetTitle className="text-lg text-blue-600">Settings</SheetTitle>
- *
- * // As a custom heading level
- * <SheetTitle asChild>
- *   <h1 className="text-2xl font-bold">Important Notice</h1>
- * </SheetTitle>
- *
- * // Dynamic title content
- * <SheetTitle>Edit {selectedUser?.name || 'User'}</SheetTitle>
- * ```
- *
- * @param asChild - When true, merges props with child element instead of rendering an h2 @default false
- * @param className - Additional CSS classes for styling customization
- * @param children - Title text content
- *
- * @accessibility
- * - Required for proper sheet accessibility
- * - Automatically provides ARIA labeling for the entire sheet
- * - Renders as semantic heading element (h2 by default)
- * - Screen readers announce this title when sheet opens
- *
- * @see {@link SheetHeader} For proper title placement
- * @see {@link SheetDescription} For additional context
- * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#title} Radix UI Dialog Title
+ * Accessible sheet title. Automatically linked to sheet for screen readers.
  */
-function SheetTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+function SheetTitle({ className, ...props }: SheetTitleProps) {
   return (
     <SheetPrimitive.Title
       data-slot="sheet-title"
-      className={cn("text-foreground font-semibold", className)}
+      className={cn("text-foreground font-medium", className)}
       {...props}
     />
   );
 }
 
+type SheetDescriptionProps = SheetPrimitive.Description.Props;
+
 /**
- * SheetDescription - Description text for the sheet
- *
- * Provides additional context about the sheet's purpose or instructions.
- * Appears below the title with muted styling. Should be used within SheetHeader.
- * While optional, it's recommended for better accessibility and user understanding.
- *
- * @component
- * @example
- * ```tsx
- * // Standard usage with instructional text
- * <SheetHeader>
- *   <SheetTitle>Edit Profile</SheetTitle>
- *   <SheetDescription>
- *     Make changes to your profile here. Click save when you're done.
- *   </SheetDescription>
- * </SheetHeader>
- *
- * // Warning or important information
- * <SheetDescription className="text-orange-600">
- *   This action cannot be undone.
- * </SheetDescription>
- *
- * // Custom styled description
- * <SheetDescription asChild>
- *   <p className="text-sm text-gray-600 italic">
- *     Changes will be saved automatically.
- *   </p>
- * </SheetDescription>
- *
- * // Contextual help description
- * <SheetDescription>
- *   Use this form to update your notification preferences.
- *   Changes take effect immediately.
- * </SheetDescription>
- * ```
- *
- * @param asChild - When true, merges props with child element instead of rendering a p element @default false
- * @param className - Additional CSS classes for styling customization
- * @param children - Description text content
- *
- * @accessibility
- * - Provides additional context for screen readers
- * - Automatically linked to the sheet via ARIA attributes
- * - Announced by screen readers when sheet opens
- * - Helps users understand the sheet's purpose
- *
- * @see {@link SheetTitle} For the main sheet heading
- * @see {@link SheetHeader} For proper description placement
- * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#description} Radix UI Dialog Description
+ * Accessible sheet description. Provides additional context for screen readers.
  */
-function SheetDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+function SheetDescription({ className, ...props }: SheetDescriptionProps) {
   return (
     <SheetPrimitive.Description
       data-slot="sheet-description"
@@ -809,4 +180,12 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
+  type SheetProps,
+  type SheetTriggerProps,
+  type SheetCloseProps,
+  type SheetContentProps,
+  type SheetHeaderProps,
+  type SheetFooterProps,
+  type SheetTitleProps,
+  type SheetDescriptionProps,
 };