@neynar/ui 0.1.1

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

@@ -0,0 +1,244 @@
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+/**
+ * Avatar - A flexible container for displaying user profile images with graceful fallback support
+ *
+ * The Avatar component is built on Radix UI's Avatar primitive and provides a robust solution
+ * for displaying user profile pictures throughout your application. It automatically handles
+ * image loading states and displays fallback content when images fail to load or are unavailable.
+ *
+ * This component follows the shadcn/ui design system principles and provides a consistent
+ * approach to user representation across all applications.
+ *
+ * ## Features
+ * - **Automatic loading states**: Seamlessly handles image loading and error states
+ * - **Graceful fallbacks**: Shows fallback content when images are unavailable
+ * - **Flexible sizing**: Easy customization through Tailwind CSS size utilities
+ * - **Shape variants**: Circular by default with support for rounded corners
+ * - **Accessibility first**: Built-in ARIA attributes and keyboard navigation
+ * - **Composable design**: Works with AvatarImage and AvatarFallback sub-components
+ *
+ * ## Common Use Cases
+ * - User profile displays in headers and navigation
+ * - Comment sections and author attribution
+ * - Team member listings and directories
+ * - Avatar groups with overlapping layouts
+ * - Organization logos and brand representation
+ * - Loading states and placeholder content
+ *
+ * ## Size Variants
+ * - `size-6` (24px) - Small avatars for dense layouts
+ * - `size-8` (32px) - Default size for most use cases
+ * - `size-10` (40px) - Medium avatars for lists
+ * - `size-12` (48px) - Large avatars for profiles
+ * - `size-16` (64px) - Extra large for main profile displays
+ *
+ * @example Basic avatar with image and fallback
+ * ```tsx
+ * <Avatar>
+ *   <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+ *   <AvatarFallback>CN</AvatarFallback>
+ * </Avatar>
+ * ```
+ *
+ * @example Custom sizing
+ * ```tsx
+ * <Avatar className="size-12">
+ *   <AvatarImage src="/profile.jpg" alt="John Doe" />
+ *   <AvatarFallback>JD</AvatarFallback>
+ * </Avatar>
+ * ```
+ *
+ * @example Avatar group with borders
+ * ```tsx
+ * <div className="flex -space-x-2">
+ *   <Avatar className="border-2 border-background">
+ *     <AvatarImage src="/user1.jpg" alt="User 1" />
+ *     <AvatarFallback>U1</AvatarFallback>
+ *   </Avatar>
+ *   <Avatar className="border-2 border-background">
+ *     <AvatarImage src="/user2.jpg" alt="User 2" />
+ *     <AvatarFallback>U2</AvatarFallback>
+ *   </Avatar>
+ *   <Avatar className="border-2 border-background">
+ *     <AvatarFallback>+3</AvatarFallback>
+ *   </Avatar>
+ * </div>
+ * ```
+ *
+ * @example Square avatar for logos
+ * ```tsx
+ * <Avatar className="rounded-lg">
+ *   <AvatarImage src="/company-logo.png" alt="Company" />
+ *   <AvatarFallback>CO</AvatarFallback>
+ * </Avatar>
+ * ```
+ *
+ * @example With status indicator
+ * ```tsx
+ * <div className="relative">
+ *   <Avatar>
+ *     <AvatarImage src="/user.jpg" alt="Online user" />
+ *     <AvatarFallback>OU</AvatarFallback>
+ *   </Avatar>
+ *   <div className="absolute bottom-0 right-0 size-3 bg-green-500 border-2 border-background rounded-full" />
+ * </div>
+ * ```
+ *
+ * @param className Additional CSS classes for styling. Common patterns include size utilities (size-6, size-8, size-10, size-12, size-16) and border radius overrides (rounded-lg, rounded-md, rounded-none)
+ * @param children Should contain AvatarImage and AvatarFallback components for proper functionality
+ *
+ * @accessibility
+ * - Automatically manages focus and ARIA attributes through Radix UI
+ * - Always provide descriptive alt text for AvatarImage components
+ * - Fallback content should be meaningful (user initials, not generic placeholders)
+ * - Ensure sufficient color contrast for fallback text (minimum 4.5:1 ratio)
+ * - Component supports keyboard navigation and screen reader announcements
+ * - Status indicators should include appropriate ARIA labels
+ *
+ * @see {@link AvatarImage} The image component for displaying avatar pictures
+ * @see {@link AvatarFallback} The fallback component for displaying initials or icons when images fail
+ * @see {@link https://ui.shadcn.com/docs/components/avatar} shadcn/ui Avatar Documentation
+ * @see {@link https://www.radix-ui.com/docs/primitives/components/avatar} Radix UI Avatar Primitive
+ * @since 1.0.0
+ */
+declare function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+/**
+ * AvatarImage - The image element component for displaying avatar pictures
+ *
+ * This component renders the actual avatar image and automatically handles loading states.
+ * It's built on Radix UI's Avatar.Image primitive which provides robust image loading
+ * behavior - when the image fails to load or is still loading, it remains hidden
+ * and the AvatarFallback will be displayed instead.
+ *
+ * ## Key Features
+ * - Automatic image loading state management
+ * - Graceful error handling for broken image URLs
+ * - Proper aspect ratio maintenance (square by default)
+ * - Inherits parent Avatar's size and border radius
+ * - Accessible image implementation
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage with remote image
+ * <Avatar>
+ *   <AvatarImage
+ *     src="https://github.com/username.png"
+ *     alt="GitHub Profile Picture"
+ *   />
+ *   <AvatarFallback>GH</AvatarFallback>
+ * </Avatar>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Local image with descriptive alt text
+ * <Avatar>
+ *   <AvatarImage
+ *     src="/uploads/user-avatar.jpg"
+ *     alt="John Doe's profile picture"
+ *   />
+ *   <AvatarFallback>JD</AvatarFallback>
+ * </Avatar>
+ * ```
+ *
+ * @param src - The URL of the image to display. Can be relative or absolute URL
+ * @param alt - Descriptive alternative text for the image. Should describe the person or entity, not just "avatar" or "profile picture"
+ * @param className - Additional CSS classes to apply to the image element
+ * @param onLoadingStatusChange - Optional callback fired when the loading status changes
+ *
+ * @accessibility
+ * - Always provide descriptive alt text that identifies the person or entity
+ * - The image is automatically hidden from assistive technologies when loading or failed
+ * - Use meaningful descriptions like "John Doe's profile picture" rather than generic terms
+ * - The component handles ARIA attributes automatically via Radix UI
+ *
+ * @see {@link Avatar} - The parent container component
+ * @see {@link AvatarFallback} - The fallback component shown when image is unavailable
+ * @since 1.0.0
+ */
+declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): import("react/jsx-runtime").JSX.Element;
+/**
+ * AvatarFallback - Fallback content displayed when the avatar image is unavailable
+ *
+ * This component renders alternative content when the AvatarImage is loading, fails to load,
+ * or is not provided. It's built on Radix UI's Avatar.Fallback primitive and provides a
+ * visually appealing placeholder that maintains the avatar's design consistency.
+ *
+ * ## Common Use Cases
+ * - User initials (most common pattern)
+ * - Generic user icons
+ * - Company/brand initials for organization avatars
+ * - Loading states with animations
+ * - Placeholder content for new users
+ *
+ * ## Design Considerations
+ * - Uses muted background color for subtle appearance
+ * - Automatically centers content both horizontally and vertically
+ * - Inherits size and border radius from parent Avatar
+ * - Should complement the overall design system
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // User initials (recommended pattern)
+ * <Avatar>
+ *   <AvatarImage src="/avatar.jpg" alt="John Doe" />
+ *   <AvatarFallback>JD</AvatarFallback>
+ * </Avatar>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Icon fallback for unknown users
+ * import { User } from "lucide-react";
+ *
+ * <Avatar>
+ *   <AvatarImage src="/unknown-user.jpg" alt="Anonymous User" />
+ *   <AvatarFallback>
+ *     <User className="size-4 text-muted-foreground" />
+ *   </AvatarFallback>
+ * </Avatar>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom colored fallback
+ * <Avatar>
+ *   <AvatarImage src="/user.jpg" alt="Jane Smith" />
+ *   <AvatarFallback className="bg-blue-500 text-white">
+ *     JS
+ *   </AvatarFallback>
+ * </Avatar>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Loading state with animation
+ * <Avatar>
+ *   <AvatarImage src="/loading-image.jpg" alt="Loading" />
+ *   <AvatarFallback className="animate-pulse">
+ *     <User className="size-4 text-muted-foreground" />
+ *   </AvatarFallback>
+ * </Avatar>
+ * ```
+ *
+ * @param children - The fallback content to display. Common patterns include user initials (2-3 characters), icons, or loading indicators
+ * @param className - Additional CSS classes. Use for custom background colors, text styling, or animations
+ * @param delayMs - Optional delay in milliseconds before showing the fallback (Radix UI feature)
+ *
+ * @accessibility
+ * - Content should be meaningful and descriptive
+ * - Ensure sufficient color contrast between text and background (minimum 4.5:1 ratio)
+ * - Keep text concise - typically 1-3 characters for initials
+ * - Icons should have appropriate sizing relative to the avatar
+ * - The component is automatically accessible via Radix UI implementation
+ *
+ * @see {@link Avatar} - The parent container component
+ * @see {@link AvatarImage} - The image component that this component provides fallback for
+ * @since 1.0.0
+ */
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): import("react/jsx-runtime").JSX.Element;
+export { Avatar, AvatarImage, AvatarFallback };
+//# sourceMappingURL=avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/ui/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAI1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqGG;AACH,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAWnD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQpD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+EG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC,2CAWvD;AAED,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC"}

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

@@ -0,0 +1,163 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+/**
+ * Badge variant styles using class-variance-authority (CVA).
+ *
+ * This function generates type-safe CSS classes for different badge variants.
+ * Each variant is designed with specific semantic meaning and appropriate
+ * color schemes for both light and dark themes.
+ *
+ * ## Base Styles
+ * - Inline flex layout with center alignment
+ * - Fixed height with responsive padding
+ * - Rounded corners and border
+ * - Typography: small, medium weight, no wrap
+ * - Icon support with consistent sizing
+ * - Accessibility features (focus rings, error states)
+ * - Smooth transitions for interactive states
+ *
+ * ## Variants
+ * - **default**: Primary brand color, high emphasis
+ * - **secondary**: Muted background, medium emphasis
+ * - **destructive**: Error/warning states, urgent attention
+ * - **outline**: Subtle border-only style, low emphasis
+ *
+ * @param props - Variant configuration object
+ * @param props.variant - The visual variant to apply
+ * @returns CSS class string for the specified variant
+ *
+ * @example
+ * ```tsx
+ * // Use directly with className
+ * <span className={badgeVariants({ variant: "destructive" })}>
+ *   Error
+ * </span>
+ *
+ * // Combine with additional classes
+ * <span className={cn(badgeVariants({ variant: "outline" }), "custom-class")}>
+ *   Custom Badge
+ * </span>
+ * ```
+ */
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * A versatile badge component for displaying status indicators, labels, counts, and notifications.
+ *
+ * Badges are small status descriptors for UI elements. They provide visual feedback about the state,
+ * category, or importance of content. The component is built with accessibility in mind and supports
+ * multiple visual variants for different semantic meanings.
+ *
+ * ## Key Features
+ * - Multiple semantic variants (default, secondary, destructive, outline)
+ * - Icon support with proper sizing and spacing
+ * - Polymorphic rendering via `asChild` prop
+ * - Accessibility-first design with proper focus management
+ * - Support for interactive states (hover, focus, invalid)
+ * - Built-in responsive behavior
+ *
+ * ## When to Use
+ * - Status indicators (active, pending, error)
+ * - Notification counts and badges
+ * - Category labels and tags
+ * - Priority indicators
+ * - Quick action buttons (when used with asChild)
+ *
+ * ## Accessibility Features
+ * - Keyboard navigation support with focus-visible ring
+ * - High contrast colors for all variants
+ * - Support for `aria-invalid` state with visual feedback
+ * - Semantic color mapping (destructive = error, etc.)
+ * - Screen reader friendly content structure
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic status badge
+ * <Badge>New</Badge>
+ * <Badge variant="secondary">Draft</Badge>
+ * <Badge variant="destructive">Error</Badge>
+ * <Badge variant="outline">Pending</Badge>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Badge with icon
+ * import { Check, AlertTriangle } from "lucide-react";
+ *
+ * <Badge>
+ *   <Check />
+ *   Completed
+ * </Badge>
+ *
+ * <Badge variant="destructive">
+ *   <AlertTriangle />
+ *   Failed
+ * </Badge>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Notification count badge
+ * <div className="relative">
+ *   <Bell />
+ *   <Badge className="absolute -top-2 -right-2 size-5 p-0 text-xs">
+ *     3
+ *   </Badge>
+ * </div>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Interactive badge as link
+ * import Link from "next/link";
+ *
+ * <Badge asChild>
+ *   <Link href="/notifications">
+ *     3 new messages
+ *   </Link>
+ * </Badge>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Removable tag badge
+ * <Badge className="pr-1">
+ *   React
+ *   <button className="ml-1 hover:bg-primary-foreground/20 rounded-full p-0.5">
+ *     <X className="size-3" />
+ *   </button>
+ * </Badge>
+ * ```
+ *
+ * @see {@link Button} - For primary actionable elements
+ * @see [shadcn/ui Badge Documentation](https://ui.shadcn.com/docs/components/badge)
+ * @since 1.0.0
+ */
+declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    /**
+     * If true, the badge will render its child element instead of a span element.
+     * Useful for creating badge-styled links, buttons, or other interactive elements.
+     *
+     * When true, you must provide exactly one child element that can receive props.
+     * The child element will receive all the badge styling and attributes.
+     *
+     * @default false
+     * @example
+     * ```tsx
+     * // Badge as a link
+     * <Badge asChild>
+     *   <Link href="/profile">Profile</Link>
+     * </Badge>
+     *
+     * // Badge as a button
+     * <Badge asChild>
+     *   <button onClick={handleClick}>Click me</button>
+     * </Badge>
+     * ```
+     */
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };
+//# sourceMappingURL=badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/ui/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,QAAA,MAAM,aAAa;;8EAuBlB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4FG;AACH,iBAAS,KAAK,CAAC,EACb,SAAS,EACT,OAAO,EACP,OAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GAC7B,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IACnC;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,2CAUF;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC"}

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

@@ -0,0 +1,281 @@
+import * as React from "react";
+/**
+ * Breadcrumb navigation component that displays hierarchical page location
+ *
+ * A breadcrumb navigation component built on semantic HTML that shows the current page
+ * location within a navigational hierarchy. Provides users with contextual awareness
+ * of their position in the site structure and enables easy navigation to parent pages.
+ *
+ * Based on the shadcn/ui Breadcrumb component with accessibility features and
+ * support for composition patterns including custom separators, ellipsis for long
+ * paths, dropdown menus, and custom link components via the asChild prop.
+ *
+ * @example
+ * ```tsx
+ * // Basic breadcrumb navigation
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/">Home</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/products">Products</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbPage>Laptop</BreadcrumbPage>
+ *     </BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With ellipsis for long paths
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/">Home</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbEllipsis />
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/products/laptops">Laptops</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbPage>Gaming Laptop</BreadcrumbPage>
+ *     </BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With Next.js Link integration
+ * import { Link } from "next/link"
+ *
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink asChild>
+ *         <Link href="/">Home</Link>
+ *       </BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbPage>Current Page</BreadcrumbPage>
+ *     </BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom separator
+ * import { Slash } from "lucide-react"
+ *
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/">Home</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator>
+ *       <Slash />
+ *     </BreadcrumbSeparator>
+ *     <BreadcrumbItem>
+ *       <BreadcrumbPage>Current Page</BreadcrumbPage>
+ *     </BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ * ```
+ *
+ * @accessibility
+ * - Uses semantic `nav` element with `aria-label="breadcrumb"`
+ * - Current page marked with `aria-current="page"`
+ * - Separators marked with `role="presentation"` and `aria-hidden="true"`
+ * - Screen reader friendly navigation structure
+ * - Supports keyboard navigation through links
+ *
+ * @see {@link https://ui.shadcn.com/docs/components/breadcrumb} for design patterns
+ * @see {@link BreadcrumbList} - Ordered list container for breadcrumb items
+ * @see {@link BreadcrumbItem} - Individual breadcrumb list item
+ * @see {@link BreadcrumbLink} - Navigable breadcrumb link with asChild support
+ * @see {@link BreadcrumbPage} - Current page indicator (non-clickable)
+ * @see {@link BreadcrumbSeparator} - Visual separator between items
+ * @see {@link BreadcrumbEllipsis} - Ellipsis indicator for collapsed items
+ * @since 1.0.0
+ */
+declare function Breadcrumb({ ...props }: React.ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
+/**
+ * Ordered list container for breadcrumb items
+ *
+ * Provides the structured list layout for breadcrumb navigation items with
+ * responsive spacing and text overflow handling. Uses semantic `ol` element
+ * for proper accessibility and screen reader navigation.
+ *
+ * @param className - Additional CSS classes to apply
+ * @param props - Standard HTML ordered list props
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbList>
+ *   <BreadcrumbItem>
+ *     <BreadcrumbLink href="/">Home</BreadcrumbLink>
+ *   </BreadcrumbItem>
+ * </BreadcrumbList>
+ * ```
+ *
+ * @since 1.0.0
+ */
+declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): import("react/jsx-runtime").JSX.Element;
+/**
+ * Individual breadcrumb list item container
+ *
+ * Wraps breadcrumb content (links, pages, separators) in a semantic list item.
+ * Provides consistent alignment and spacing for breadcrumb elements.
+ *
+ * @param className - Additional CSS classes to apply
+ * @param props - Standard HTML list item props
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbItem>
+ *   <BreadcrumbLink href="/products">Products</BreadcrumbLink>
+ * </BreadcrumbItem>
+ * ```
+ *
+ * @since 1.0.0
+ */
+declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+/**
+ * Navigable link within breadcrumb trail
+ *
+ * Represents a clickable parent page in the breadcrumb hierarchy with hover
+ * effects and transition animations. Supports composition via the `asChild` prop
+ * for integration with routing libraries like Next.js Link or React Router.
+ *
+ * @param asChild - When true, renders children directly instead of an anchor element
+ * @param className - Additional CSS classes to apply
+ * @param props - Standard HTML anchor props when asChild is false
+ *
+ * @example
+ * ```tsx
+ * // Standard link
+ * <BreadcrumbLink href="/products">Products</BreadcrumbLink>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With Next.js Link
+ * <BreadcrumbLink asChild>
+ *   <Link href="/products">Products</Link>
+ * </BreadcrumbLink>
+ * ```
+ *
+ * @since 1.0.0
+ */
+declare function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<"a"> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Current page indicator in breadcrumb trail
+ *
+ * Represents the current page (non-clickable) at the end of the breadcrumb trail.
+ * Styled with prominent text color and marked with accessibility attributes
+ * including `aria-current="page"` for screen reader identification.
+ *
+ * @param className - Additional CSS classes to apply
+ * @param props - Standard HTML span props
+ *
+ * @example
+ * ```tsx
+ * <BreadcrumbPage>Current Page Name</BreadcrumbPage>
+ * ```
+ *
+ * @accessibility
+ * - Uses `role="link"` with `aria-disabled="true"` for semantic meaning
+ * - Marked with `aria-current="page"` to indicate current location
+ *
+ * @since 1.0.0
+ */
+declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+/**
+ * Visual separator between breadcrumb items
+ *
+ * Displays a separator icon (default: ChevronRight) between breadcrumb items.
+ * Supports custom separator icons by passing them as children. Hidden from
+ * screen readers with accessibility attributes for clean navigation experience.
+ *
+ * @param children - Custom separator icon to display instead of default ChevronRight
+ * @param className - Additional CSS classes to apply
+ * @param props - Standard HTML list item props
+ *
+ * @example
+ * ```tsx
+ * // Default separator
+ * <BreadcrumbSeparator />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom separator
+ * import { Slash } from "lucide-react"
+ * <BreadcrumbSeparator>
+ *   <Slash />
+ * </BreadcrumbSeparator>
+ * ```
+ *
+ * @accessibility
+ * - Uses `role="presentation"` to indicate decorative content
+ * - Hidden from screen readers with `aria-hidden="true"`
+ *
+ * @since 1.0.0
+ */
+declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+/**
+ * Ellipsis indicator for collapsed breadcrumb items
+ *
+ * Shows a horizontal ellipsis icon (MoreHorizontal) to indicate hidden or
+ * collapsed middle items in a long breadcrumb trail. Useful for deep navigation
+ * hierarchies where space is limited. Often used in combination with dropdown
+ * menus to reveal the collapsed items.
+ *
+ * @param className - Additional CSS classes to apply
+ * @param props - Standard HTML span props
+ *
+ * @example
+ * ```tsx
+ * // Simple ellipsis
+ * <BreadcrumbEllipsis />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With dropdown menu for collapsed items
+ * <BreadcrumbItem>
+ *   <DropdownMenu>
+ *     <DropdownMenuTrigger>
+ *       <BreadcrumbEllipsis />
+ *     </DropdownMenuTrigger>
+ *     <DropdownMenuContent>
+ *       <DropdownMenuItem>Hidden Item 1</DropdownMenuItem>
+ *       <DropdownMenuItem>Hidden Item 2</DropdownMenuItem>
+ *     </DropdownMenuContent>
+ *   </DropdownMenu>
+ * </BreadcrumbItem>
+ * ```
+ *
+ * @accessibility
+ * - Uses `role="presentation"` and `aria-hidden="true"` for decorative content
+ * - Includes screen reader text "More" for context
+ *
+ * @since 1.0.0
+ */
+declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };
+//# sourceMappingURL=breadcrumb.d.ts.map