@neynar/ui 0.2.1 → 0.3.1

package/dist/components/ui/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/empty-state.d.ts

@@ -191,6 +191,7 @@ import * as React from "react";
  * @see {@link https://ui.patterns.build/empty-states} Empty state design patterns
  * @see {@link https://www.nngroup.com/articles/empty-state-interface-design/} Nielsen Norman Group empty state guidelines
  * @since 1.0.0
+ * @deprecated Use @neynar/ui Empty component instead
  */
 declare const EmptyState: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
     title: string;

package/dist/components/ui/empty-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../../src/components/ui/empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA6E/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgMG;AACH,QAAA,MAAM,UAAU;WAGL,MAAM;kBACC,MAAM;WACb,KAAK,CAAC,SAAS;aACb;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB;gDAoBH,CAAC;AAIH,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../../src/components/ui/empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA6E/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiMG;AACH,QAAA,MAAM,UAAU;WAGL,MAAM;kBACC,MAAM;WACb,KAAK,CAAC,SAAS;aACb;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB;gDAoBH,CAAC;AAIH,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/ui/empty.d.ts

@@ -0,0 +1,630 @@
+import { type VariantProps } from "class-variance-authority";
+/**
+ * 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
+ */
+declare function Empty({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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
+ */
+declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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)
+ */
+declare const emptyMediaVariants: (props?: ({
+    variant?: "default" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * 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
+ */
+declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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
+ */
+declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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
+ */
+declare function EmptyDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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
+ */
+declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia, };
+//# sourceMappingURL=empty.d.ts.map

package/dist/components/ui/empty.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty.d.ts","sourceRoot":"","sources":["../../../src/components/ui/empty.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAyEjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4LG;AACH,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWlE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWxE;AAED;;;;;GAKG;AACH,QAAA,MAAM,kBAAkB;;8EAevB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6FG;AACH,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,2CASvE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQvE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiFG;AACH,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAW3E;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0HG;AACH,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWzE;AAED,OAAO,EACL,KAAK,EACL,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,YAAY,EACZ,UAAU,GACX,CAAA"}