@neynar/ui 0.2.1 → 0.3.1

package/src/components/ui/empty.tsx

@@ -0,0 +1,793 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+/**
+ * Props for Empty component (Documentation only - NOT used in component implementation)
+ * These types are for documentation generation and should not replace HTML inferred types
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type EmptyDocsProps = {
+  /** Additional CSS classes to merge with default empty container styles */
+  className?: string;
+  /** Child components including EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent, and action buttons */
+  children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+/**
+ * Props for EmptyHeader component (Documentation only)
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type EmptyHeaderDocsProps = {
+  /** Additional CSS classes for custom styling */
+  className?: string;
+  /** Header content including EmptyMedia and EmptyTitle */
+  children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+/**
+ * Props for EmptyMedia component (Documentation only)
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type EmptyMediaDocsProps = {
+  /** Visual variant for the media container @default "default" */
+  variant?: "default" | "icon";
+  /** Additional CSS classes for custom styling */
+  className?: string;
+  /** Icon or illustration element (typically SVG from lucide-react) */
+  children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+/**
+ * Props for EmptyTitle component (Documentation only)
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type EmptyTitleDocsProps = {
+  /** Additional CSS classes for custom styling */
+  className?: string;
+  /** Title text content describing the empty state */
+  children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+/**
+ * Props for EmptyDescription component (Documentation only)
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type EmptyDescriptionDocsProps = {
+  /** Additional CSS classes for custom styling */
+  className?: string;
+  /** Description text or rich content (supports links, paragraphs, etc.) */
+  children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+/**
+ * Props for EmptyContent component (Documentation only)
+ */
+// eslint-disable-next-line unused-imports/no-unused-vars
+type EmptyContentDocsProps = {
+  /** Additional CSS classes for custom styling */
+  className?: string;
+  /** Additional content such as action buttons, links, or secondary information */
+  children?: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+/**
+ * Empty - Flexible container for displaying empty states with consistent layout
+ *
+ * A foundational empty state component that provides a centered, vertically-aligned
+ * container optimized for displaying empty or no-data states. Uses a composable
+ * architecture similar to Alert and Card components, allowing fine-grained control
+ * over layout and content through sub-components.
+ *
+ * ## Key Features
+ * - Composable sub-components for flexible layouts (header, media, title, description, content)
+ * - Responsive padding that adapts from mobile to desktop (p-6 to md:p-12)
+ * - Built-in flex layout with automatic centering and gap spacing
+ * - Border-dashed styling hint for visual differentiation
+ * - Maximum content width constraints for optimal readability
+ * - Text balance for improved typography on multi-line content
+ * - Fully accessible with semantic HTML structure
+ *
+ * ## When to Use
+ * - Search results with no matches
+ * - Empty data tables, lists, or dashboards
+ * - Onboarding states for new users
+ * - File uploads or content creation areas
+ * - Inbox or notification centers with no items
+ * - Error recovery or loading failure scenarios
+ *
+ * ## Component Architecture
+ * - **Empty**: Root container with flex layout, padding, and centering
+ * - **EmptyHeader**: Groups media and title with constrained width (max-w-sm)
+ * - **EmptyMedia**: Icon or illustration display with two variants
+ * - **EmptyTitle**: Prominent heading text with medium font weight
+ * - **EmptyDescription**: Muted description text with link styling
+ * - **EmptyContent**: Additional content area for buttons or secondary info
+ *
+ * @example
+ * ```tsx
+ * // Basic empty state with icon, title, and description
+ * import { Inbox } from 'lucide-react';
+ *
+ * <Empty>
+ *   <EmptyHeader>
+ *     <EmptyMedia variant="icon">
+ *       <Inbox />
+ *     </EmptyMedia>
+ *     <EmptyTitle>No messages yet</EmptyTitle>
+ *   </EmptyHeader>
+ *   <EmptyDescription>
+ *     New messages will appear here when you receive them.
+ *   </EmptyDescription>
+ * </Empty>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Search results empty state with action button
+ * import { Search } from 'lucide-react';
+ * import { Button } from './button';
+ *
+ * <Empty>
+ *   <EmptyHeader>
+ *     <EmptyMedia variant="icon">
+ *       <Search />
+ *     </EmptyMedia>
+ *     <EmptyTitle>No results found</EmptyTitle>
+ *   </EmptyHeader>
+ *   <EmptyDescription>
+ *     Try adjusting your search or filters to find what you're looking for.
+ *   </EmptyDescription>
+ *   <EmptyContent>
+ *     <Button variant="outline" onClick={clearFilters}>
+ *       Clear filters
+ *     </Button>
+ *   </EmptyContent>
+ * </Empty>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // File upload empty state with custom illustration
+ * import { Upload } from 'lucide-react';
+ * import { Button } from './button';
+ *
+ * <Empty className="min-h-[400px] border-2 border-dashed">
+ *   <EmptyHeader>
+ *     <EmptyMedia>
+ *       <Upload className="w-16 h-16 text-muted-foreground" />
+ *     </EmptyMedia>
+ *     <EmptyTitle>Drop files here</EmptyTitle>
+ *   </EmptyHeader>
+ *   <EmptyDescription>
+ *     Drag and drop files to upload, or click the button below.
+ *   </EmptyDescription>
+ *   <EmptyContent>
+ *     <Button onClick={openFilePicker}>
+ *       Choose files
+ *     </Button>
+ *   </EmptyContent>
+ * </Empty>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Complex empty state with multiple actions
+ * import { Users, UserPlus, Upload } from 'lucide-react';
+ * import { Button } from './button';
+ *
+ * <Empty>
+ *   <EmptyHeader>
+ *     <EmptyMedia variant="icon">
+ *       <Users />
+ *     </EmptyMedia>
+ *     <EmptyTitle>No team members</EmptyTitle>
+ *   </EmptyHeader>
+ *   <EmptyDescription>
+ *     Get started by <a href="/invite">inviting your first team member</a> or
+ *     importing from a CSV file.
+ *   </EmptyDescription>
+ *   <EmptyContent>
+ *     <div className="flex gap-2">
+ *       <Button onClick={openInviteModal}>
+ *         <UserPlus className="w-4 h-4 mr-2" />
+ *         Invite member
+ *       </Button>
+ *       <Button variant="outline" onClick={importFromCsv}>
+ *         <Upload className="w-4 h-4 mr-2" />
+ *         Import CSV
+ *       </Button>
+ *     </div>
+ *   </EmptyContent>
+ * </Empty>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Minimal empty state without header grouping
+ * import { Sparkles } from 'lucide-react';
+ *
+ * <Empty>
+ *   <EmptyMedia>
+ *     <Sparkles className="w-12 h-12 text-primary" />
+ *   </EmptyMedia>
+ *   <EmptyTitle>All caught up!</EmptyTitle>
+ *   <EmptyDescription>
+ *     You've reviewed all pending items.
+ *   </EmptyDescription>
+ * </Empty>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Error state with custom styling
+ * import { AlertCircle } from 'lucide-react';
+ * import { Button } from './button';
+ *
+ * <Empty className="border-destructive/50 bg-destructive/5">
+ *   <EmptyHeader>
+ *     <EmptyMedia>
+ *       <AlertCircle className="w-12 h-12 text-destructive" />
+ *     </EmptyMedia>
+ *     <EmptyTitle>Failed to load data</EmptyTitle>
+ *   </EmptyHeader>
+ *   <EmptyDescription className="text-destructive/90">
+ *     There was an error loading your content. Please try again.
+ *   </EmptyDescription>
+ *   <EmptyContent>
+ *     <Button variant="destructive" onClick={retry}>
+ *       Retry
+ *     </Button>
+ *   </EmptyContent>
+ * </Empty>
+ * ```
+ *
+ * @accessibility
+ * - Semantic HTML structure with proper div hierarchy
+ * - Center-aligned content aids screen reader comprehension
+ * - Text balance improves readability for dyslexic users
+ * - Sufficient color contrast for text elements (muted-foreground meets WCAG AA)
+ * - Responsive padding ensures adequate touch targets on mobile
+ * - Interactive elements (buttons, links) remain keyboard accessible
+ * - Icons are decorative and don't interfere with screen reader navigation
+ * - Supports reduced motion preferences through CSS transitions
+ *
+ * @see {@link EmptyHeader} - Groups media and title with constrained width
+ * @see {@link EmptyMedia} - Icon or illustration display with variants
+ * @see {@link EmptyTitle} - Prominent heading for the empty state
+ * @see {@link EmptyDescription} - Descriptive text with link support
+ * @see {@link EmptyContent} - Additional content area for actions
+ * @see {@link https://ui.shadcn.com/docs/components/empty-state} - shadcn/ui empty state patterns
+ * @since 1.0.0
+ */
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * EmptyHeader - Groups media and title elements with constrained width
+ *
+ * A container component that groups the EmptyMedia and EmptyTitle elements together,
+ * applying a maximum width constraint (max-w-sm / 24rem) for optimal visual hierarchy
+ * and readability. Typically used to create a cohesive header unit within the empty state.
+ *
+ * ## Features
+ * - Maximum width of 24rem (384px) for visual balance
+ * - Flex column layout with 0.5rem (8px) gap between children
+ * - Center-aligned items and text
+ * - Maintains semantic grouping for screen readers
+ *
+ * ## Usage Patterns
+ * - Group EmptyMedia and EmptyTitle together
+ * - Create visual separation from description and content
+ * - Constrain width of title for better readability
+ * - Optional - components can be used without header grouping
+ *
+ * @example
+ * ```tsx
+ * // Standard header with icon and title
+ * import { Package } from 'lucide-react';
+ *
+ * <EmptyHeader>
+ *   <EmptyMedia variant="icon">
+ *     <Package />
+ *   </EmptyMedia>
+ *   <EmptyTitle>No packages found</EmptyTitle>
+ * </EmptyHeader>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Header with large illustration
+ * import { Rocket } from 'lucide-react';
+ *
+ * <EmptyHeader>
+ *   <EmptyMedia>
+ *     <Rocket className="w-20 h-20 text-primary" />
+ *   </EmptyMedia>
+ *   <EmptyTitle>Ready to launch!</EmptyTitle>
+ * </EmptyHeader>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom styled header
+ * <EmptyHeader className="max-w-md gap-4">
+ *   <EmptyMedia variant="icon">
+ *     <Star />
+ *   </EmptyMedia>
+ *   <EmptyTitle>Custom spacing and width</EmptyTitle>
+ * </EmptyHeader>
+ * ```
+ *
+ * @accessibility
+ * - Semantic grouping improves screen reader context
+ * - Maintains proper reading order (media → title)
+ * - Width constraint enhances readability for all users
+ * - Center alignment provides clear visual focus
+ *
+ * @see {@link EmptyMedia} - Icon or illustration component typically used within header
+ * @see {@link EmptyTitle} - Title component typically used within header
+ * @see {@link Empty} - Parent container component
+ */
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn(
+        "flex max-w-sm flex-col items-center gap-2 text-center",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * EmptyMedia variant styles configuration
+ *
+ * @variant default - Transparent background for custom illustrations or large icons
+ * @variant icon - Muted background with rounded corners and constrained sizing for standard icons (40px container, 24px icon)
+ */
+const emptyMediaVariants = cva(
+  "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        /** Transparent background suitable for custom-sized illustrations or decorative graphics */
+        default: "bg-transparent",
+        /** Muted background with rounded corners, fixed 40px container, and automatic 24px icon sizing */
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+/**
+ * EmptyMedia - Icon or illustration display component with styling variants
+ *
+ * Displays icons, illustrations, or other visual elements in an empty state. Offers
+ * two variants: a transparent default for custom-sized graphics and an "icon" variant
+ * with consistent sizing and background styling. Automatically handles SVG pointer
+ * events and shrinking behavior.
+ *
+ * ## Variants
+ *
+ * ### default
+ * - Transparent background (bg-transparent)
+ * - No size constraints - use for custom-sized illustrations
+ * - Full control over icon/illustration dimensions
+ * - Best for large decorative graphics (48px+)
+ *
+ * ### icon
+ * - Muted background (bg-muted) with rounded corners (rounded-lg)
+ * - Fixed 40px × 40px container (size-10)
+ * - Automatically sizes child SVGs to 24px (size-6) unless explicitly sized
+ * - Text color set to foreground for proper contrast
+ * - Best for standard icon sizes (16-24px)
+ * - Provides visual emphasis through background contrast
+ *
+ * ## Features
+ * - SVG pointer events disabled to prevent interaction issues
+ * - Shrink prevention for consistent sizing
+ * - Bottom margin (mb-2 / 8px) for spacing from subsequent elements
+ * - Flex layout with centered content
+ * - Compatible with all icon libraries (lucide-react, heroicons, etc.)
+ *
+ * @example
+ * ```tsx
+ * // Standard icon variant with auto-sizing
+ * import { Inbox } from 'lucide-react';
+ *
+ * <EmptyMedia variant="icon">
+ *   <Inbox />
+ * </EmptyMedia>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Default variant with custom-sized illustration
+ * import { Package } from 'lucide-react';
+ *
+ * <EmptyMedia>
+ *   <Package className="w-16 h-16 text-primary" />
+ * </EmptyMedia>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Icon variant with explicitly sized SVG (overrides auto-sizing)
+ * import { Search } from 'lucide-react';
+ *
+ * <EmptyMedia variant="icon">
+ *   <Search className="size-5" />
+ * </EmptyMedia>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom styled media container
+ * import { Sparkles } from 'lucide-react';
+ *
+ * <EmptyMedia className="bg-primary/10 rounded-full p-4">
+ *   <Sparkles className="w-8 h-8 text-primary" />
+ * </EmptyMedia>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Multiple icons or complex graphics
+ * import { Users, Plus } from 'lucide-react';
+ *
+ * <EmptyMedia>
+ *   <div className="relative">
+ *     <Users className="w-12 h-12 text-muted-foreground" />
+ *     <Plus className="w-6 h-6 text-primary absolute -bottom-1 -right-1" />
+ *   </div>
+ * </EmptyMedia>
+ * ```
+ *
+ * @accessibility
+ * - Icons are decorative and don't require alt text
+ * - SVG pointer events disabled prevents accidental interactions
+ * - Sufficient size for visibility and recognition
+ * - Color contrast maintained through foreground/muted colors
+ * - Responsive to theme changes (light/dark mode)
+ *
+ * @see {@link EmptyHeader} - Often used within header for visual grouping
+ * @see {@link Empty} - Parent container component
+ */
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+/**
+ * EmptyTitle - Prominent heading text for empty state messages
+ *
+ * Displays the primary heading or title for an empty state, styled with medium font
+ * weight and tight character spacing for visual hierarchy. Typically describes what
+ * is missing or the current state in a concise, user-friendly way.
+ *
+ * ## Features
+ * - Large text size (text-lg / 1.125rem / 18px)
+ * - Medium font weight (font-medium / 500) for emphasis
+ * - Tight character spacing (tracking-tight / -0.025em) for readability
+ * - Foreground color for maximum contrast
+ * - Center-aligned within empty state layout
+ *
+ * ## Best Practices
+ * - Keep titles short and descriptive (2-6 words)
+ * - Focus on the current state rather than what's wrong
+ * - Use positive language when possible
+ * - Be specific rather than generic ("No projects" vs "Empty")
+ * - Avoid technical jargon or error codes
+ *
+ * @example
+ * ```tsx
+ * // Simple descriptive title
+ * <EmptyTitle>No results found</EmptyTitle>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Positive framing for empty inbox
+ * <EmptyTitle>You're all caught up!</EmptyTitle>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Specific empty list title
+ * <EmptyTitle>No team members yet</EmptyTitle>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom styled title
+ * <EmptyTitle className="text-xl font-semibold text-primary">
+ *   Welcome to your dashboard
+ * </EmptyTitle>
+ * ```
+ *
+ * @accessibility
+ * - Provides clear, descriptive content for screen readers
+ * - Font size and weight ensure readability
+ * - High contrast color (foreground) meets WCAG AA standards
+ * - Center alignment aids comprehension
+ * - Can be enhanced with heading tags via className if needed for semantic structure
+ *
+ * @see {@link EmptyHeader} - Often grouped within header with EmptyMedia
+ * @see {@link EmptyDescription} - Complementary description text component
+ * @see {@link Empty} - Parent container component
+ */
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn("text-lg font-medium tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * EmptyDescription - Descriptive text with link styling for empty states
+ *
+ * Provides supplementary information, guidance, or context below the empty state title.
+ * Automatically styles inline links with underlines and hover effects, making it easy
+ * to include helpful links or documentation references within the description text.
+ *
+ * ## Features
+ * - Muted foreground color for visual hierarchy below title
+ * - Small text size (text-sm) with relaxed line height for readability
+ * - Automatic link styling with underlines and offset
+ * - Hover state for links changes color to primary
+ * - Supports rich content including paragraphs and inline elements
+ * - Center-aligned text within empty state layout
+ *
+ * ## Link Styling
+ * - Default: underline with 4px offset, muted-foreground color
+ * - Hover: primary color while maintaining underline
+ * - Provides clear visual affordance for interactive elements
+ *
+ * ## Best Practices
+ * - Provide helpful context or next steps
+ * - Keep descriptions concise (1-2 sentences)
+ * - Include actionable guidance when possible
+ * - Use links to documentation, help, or related features
+ * - Avoid overwhelming users with too much information
+ *
+ * @example
+ * ```tsx
+ * // Simple description text
+ * <EmptyDescription>
+ *   Try adjusting your search or filters to find what you're looking for.
+ * </EmptyDescription>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Description with inline link
+ * <EmptyDescription>
+ *   Get started by <a href="/docs/setup">reading our setup guide</a> or
+ *   watching the tutorial video.
+ * </EmptyDescription>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Multi-line description
+ * <EmptyDescription>
+ *   Your inbox is empty. New messages and notifications will appear here
+ *   when you receive them.
+ * </EmptyDescription>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Description with multiple links
+ * <EmptyDescription>
+ *   Need help? Check out our <a href="/docs">documentation</a> or
+ *   <a href="/support">contact support</a>.
+ * </EmptyDescription>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom styled description
+ * <EmptyDescription className="text-base text-foreground max-w-md">
+ *   Override default styling for custom appearance and width.
+ * </EmptyDescription>
+ * ```
+ *
+ * @accessibility
+ * - Links are keyboard accessible (Tab navigation)
+ * - Underlines provide visual affordance independent of color
+ * - Hover state provides additional interactive feedback
+ * - Muted color still meets WCAG AA contrast requirements
+ * - Relaxed line height (text-sm/relaxed) improves readability
+ * - Screen readers properly announce links and their purpose
+ *
+ * @see {@link EmptyTitle} - Title component that precedes description
+ * @see {@link EmptyContent} - Additional content area for buttons and actions
+ * @see {@link Empty} - Parent container component
+ */
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * EmptyContent - Additional content area for buttons, actions, or secondary information
+ *
+ * A flexible container for additional content within an empty state, typically used for
+ * action buttons, links, or secondary information. Provides consistent width constraints,
+ * gap spacing, and alignment for optimal layout of calls-to-action and supplementary content.
+ *
+ * ## Features
+ * - Maximum width of 24rem (384px) for visual balance
+ * - Minimum width of 0 to prevent overflow issues
+ * - Flex column layout with 1rem (16px) gap between children
+ * - Center-aligned items for button grouping
+ * - Small text size (text-sm) for secondary content
+ * - Text balance for improved multi-line typography
+ * - Full width within constraints (w-full)
+ *
+ * ## Common Use Cases
+ * - Primary and secondary action buttons
+ * - Button groups with multiple actions
+ * - Secondary links or navigation
+ * - Additional context or instructions
+ * - Step indicators or progress information
+ *
+ * ## Layout Patterns
+ * - Single button: automatically centered
+ * - Multiple buttons: stack vertically with gap spacing
+ * - Button groups: use flex-row with gap within content
+ * - Text content: maintains readability with text-balance
+ *
+ * @example
+ * ```tsx
+ * // Single action button
+ * import { Button } from './button';
+ *
+ * <EmptyContent>
+ *   <Button onClick={handleCreate}>Create new project</Button>
+ * </EmptyContent>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Multiple vertically stacked buttons
+ * import { Button } from './button';
+ *
+ * <EmptyContent>
+ *   <Button onClick={handleCreate}>Create project</Button>
+ *   <Button variant="outline" onClick={handleImport}>Import project</Button>
+ * </EmptyContent>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Horizontal button group
+ * import { Button } from './button';
+ * import { Plus, Upload } from 'lucide-react';
+ *
+ * <EmptyContent>
+ *   <div className="flex gap-2">
+ *     <Button onClick={handleCreate}>
+ *       <Plus className="w-4 h-4 mr-2" />
+ *       Create
+ *     </Button>
+ *     <Button variant="outline" onClick={handleUpload}>
+ *       <Upload className="w-4 h-4 mr-2" />
+ *       Upload
+ *     </Button>
+ *   </div>
+ * </EmptyContent>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Button with additional text
+ * import { Button } from './button';
+ *
+ * <EmptyContent>
+ *   <Button onClick={handleInvite}>Invite team members</Button>
+ *   <p className="text-xs text-muted-foreground">
+ *     or <a href="/import" className="underline">import from CSV</a>
+ *   </p>
+ * </EmptyContent>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Secondary links only
+ * <EmptyContent>
+ *   <a href="/docs" className="text-sm underline underline-offset-4">
+ *     View documentation
+ *   </a>
+ *   <a href="/examples" className="text-sm underline underline-offset-4">
+ *     Browse examples
+ *   </a>
+ * </EmptyContent>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom styled content area
+ * import { Button } from './button';
+ *
+ * <EmptyContent className="max-w-md gap-2">
+ *   <Button className="w-full" onClick={handleAction}>
+ *     Full width button
+ *   </Button>
+ *   <p className="text-center">
+ *     Tighter gap and wider max width
+ *   </p>
+ * </EmptyContent>
+ * ```
+ *
+ * @accessibility
+ * - Maintains focus order for keyboard navigation
+ * - Buttons and links remain fully keyboard accessible
+ * - Adequate spacing between interactive elements for touch targets
+ * - Text content maintains readability with text-balance
+ * - Center alignment provides clear visual hierarchy
+ * - Supports reduced motion preferences through CSS
+ *
+ * @see {@link EmptyDescription} - Description component that typically precedes content
+ * @see {@link Empty} - Parent container component
+ * @see {@link Button} - Common component used within EmptyContent for actions
+ */
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}