@neynar/ui 0.4.0 → 1.0.0

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

@@ -1,463 +1,39 @@
+import { useRender } from '@base-ui/react/use-render';
 import * as React from "react";
+type BreadcrumbProps = React.ComponentProps<"nav">;
 /**
- * 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.
- *
- * @param className - Additional CSS classes to apply to the navigation element
- * @param children - Child breadcrumb elements (typically BreadcrumbList)
- * @param props - All standard HTML nav element props except aria-label (automatically set to "breadcrumb")
- *
- * @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 using asChild
- * 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"` (automatically applied)
- * - Current page marked with `aria-current="page"` (via BreadcrumbPage)
- * - Separators marked with `role="presentation"` and `aria-hidden="true"`
- * - Screen reader friendly navigation structure with proper list semantics
- * - Supports keyboard navigation through links (Tab navigation)
- * - Compatible with screen readers and assistive technologies
- *
- * @see {@link https://ui.shadcn.com/docs/components/breadcrumb} for design patterns
- * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/} for ARIA breadcrumb pattern
- * @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
+ * Root breadcrumb navigation container with semantic HTML and accessibility attributes.
  */
-declare function Breadcrumb({ ...props }: Omit<React.ComponentProps<"nav">, "aria-label">): import("react/jsx-runtime").JSX.Element;
+declare function Breadcrumb({ className, ...props }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+type BreadcrumbListProps = React.ComponentProps<"ol">;
 /**
- * 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. Contains flexible
- * layout with word breaking and responsive gap adjustments.
- *
- * @param className - Additional CSS classes to apply to the ordered list element
- * @param children - Child breadcrumb items (BreadcrumbItem elements)
- * @param props - All standard HTML ordered list element props (id, role, data-*, etc.)
- *
- * @example
- * ```tsx
- * // Basic list with multiple items
- * <BreadcrumbList>
- *   <BreadcrumbItem>
- *     <BreadcrumbLink href="/">Home</BreadcrumbLink>
- *   </BreadcrumbItem>
- *   <BreadcrumbSeparator />
- *   <BreadcrumbItem>
- *     <BreadcrumbPage>Current</BreadcrumbPage>
- *   </BreadcrumbItem>
- * </BreadcrumbList>
- * ```
- *
- * @example
- * ```tsx
- * // With custom styling
- * <BreadcrumbList className="gap-4 text-base">
- *   <BreadcrumbItem>
- *     <BreadcrumbLink href="/">Home</BreadcrumbLink>
- *   </BreadcrumbItem>
- * </BreadcrumbList>
- * ```
- *
- * @accessibility
- * - Uses semantic `ol` element for proper list structure
- * - Maintains reading order for screen readers
- * - Supports list navigation shortcuts in screen readers
- * - Flexible text wrapping for long breadcrumb trails
- *
- * @since 1.0.0
+ * Ordered list container for breadcrumb items. Automatically styled with responsive spacing.
  */
-declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbList({ className, ...props }: BreadcrumbListProps): import("react/jsx-runtime").JSX.Element;
+type BreadcrumbItemProps = React.ComponentProps<"li">;
 /**
- * Individual breadcrumb list item container
- *
- * Wraps breadcrumb content (links, pages, separators) in a semantic list item.
- * Provides consistent alignment and spacing for breadcrumb elements with inline
- * flex layout for proper icon and text alignment.
- *
- * @param className - Additional CSS classes to apply to the list item element
- * @param children - Content to display within the item (links, pages, separators, ellipsis)
- * @param props - All standard HTML list item element props (id, role, data-*, etc.)
- *
- * @example
- * ```tsx
- * // With link
- * <BreadcrumbItem>
- *   <BreadcrumbLink href="/products">Products</BreadcrumbLink>
- * </BreadcrumbItem>
- * ```
- *
- * @example
- * ```tsx
- * // With current page
- * <BreadcrumbItem>
- *   <BreadcrumbPage>Current Page</BreadcrumbPage>
- * </BreadcrumbItem>
- * ```
- *
- * @example
- * ```tsx
- * // With separator
- * <BreadcrumbItem>
- *   <BreadcrumbSeparator />
- * </BreadcrumbItem>
- * ```
- *
- * @accessibility
- * - Uses semantic `li` element for proper list structure
- * - Maintains proper DOM hierarchy within breadcrumb list
- * - Supports assistive technology list navigation
- * - Inline flex layout ensures proper alignment of icons and text
- *
- * @since 1.0.0
+ * Individual breadcrumb item wrapper. Contains links, pages, or ellipsis components.
  */
-declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: BreadcrumbItemProps): import("react/jsx-runtime").JSX.Element;
+type BreadcrumbLinkProps = useRender.ComponentProps<"a">;
 /**
- * Navigable link within breadcrumb trail
- *
- * Represents a clickable parent page in the breadcrumb hierarchy with smooth hover
- * effects and transition animations. Supports composition via the `asChild` prop
- * for seamless integration with routing libraries like Next.js Link, React Router,
- * or Reach Router using the Radix UI Slot primitive for prop merging.
- *
- * Built on Radix UI Slot primitive which enables the asChild pattern - when asChild
- * is true, the component merges its props with the immediate child element instead
- * of rendering its own anchor tag. This allows for flexible composition while
- * maintaining consistent styling and behavior.
- *
- * @param asChild - When true, merges props with child element instead of rendering anchor. Enables composition with routing components @default false
- * @param className - Additional CSS classes to apply to the link element
- * @param href - Link destination URL (when asChild is false)
- * @param children - Link content to display (text, icons, etc.)
- * @param onClick - Click handler for the link interaction
- * @param props - All standard HTML anchor element props (target, rel, download, etc.)
- *
- * @example
- * ```tsx
- * // Standard anchor link
- * <BreadcrumbLink href="/products">Products</BreadcrumbLink>
- * ```
- *
- * @example
- * ```tsx
- * // With Next.js Link using asChild
- * import { Link } from "next/link"
- *
- * <BreadcrumbLink asChild>
- *   <Link href="/products">Products</Link>
- * </BreadcrumbLink>
- * ```
- *
- * @example
- * ```tsx
- * // With React Router Link
- * import { Link } from "react-router-dom"
- *
- * <BreadcrumbLink asChild>
- *   <Link to="/products">Products</Link>
- * </BreadcrumbLink>
- * ```
- *
- * @example
- * ```tsx
- * // With click handler
- * <BreadcrumbLink
- *   href="/products"
- *   onClick={(e) => {
- *     e.preventDefault();
- *     navigate('/products');
- *   }}
- * >
- *   Products
- * </BreadcrumbLink>
- * ```
- *
- * @accessibility
- * - Uses semantic anchor element with proper link role
- * - Supports keyboard navigation (Enter key activation)
- * - Compatible with screen reader link navigation
- * - Maintains focus management when used with asChild
- * - Preserves all accessibility attributes when composed
- *
- * @see {@link https://www.radix-ui.com/primitives/docs/utilities/slot} for asChild pattern details
- * @since 1.0.0
+ * Interactive breadcrumb link for navigable parent pages. Supports custom rendering with `render` prop.
  */
-declare function BreadcrumbLink({ asChild, className, ...props }: {
-    asChild?: boolean;
-} & React.ComponentProps<"a">): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbLink({ className, render, ...props }: BreadcrumbLinkProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+type BreadcrumbPageProps = React.ComponentProps<"span">;
 /**
- * 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 comprehensive accessibility
- * attributes including `aria-current="page"` for precise screen reader identification
- * of the user's current location within the site hierarchy.
- *
- * This component uses specific ARIA attributes to indicate it represents a link-like
- * element that is disabled, providing semantic meaning while maintaining the visual
- * breadcrumb structure. The `aria-current="page"` attribute is the standard way to
- * identify the current page in navigation components.
- *
- * @param className - Additional CSS classes to apply to the span element
- * @param children - Current page name or content to display
- * @param props - All standard HTML span element props (id, data-*, style, etc.)
- *
- * @example
- * ```tsx
- * // Simple page name
- * <BreadcrumbPage>Current Page Name</BreadcrumbPage>
- * ```
- *
- * @example
- * ```tsx
- * // With icon and text
- * <BreadcrumbPage>
- *   <FileIcon className="mr-1" />
- *   Document.pdf
- * </BreadcrumbPage>
- * ```
- *
- * @example
- * ```tsx
- * // With custom styling
- * <BreadcrumbPage className="font-semibold text-primary">
- *   Important Page
- * </BreadcrumbPage>
- * ```
- *
- * @accessibility
- * - Uses `role="link"` with `aria-disabled="true"` to indicate link-like but non-interactive element
- * - Marked with `aria-current="page"` to indicate current location (WCAG 2.1 standard)
- * - Provides semantic meaning for assistive technologies
- * - Screen readers will announce this as the current page in the breadcrumb trail
- * - Non-focusable as it represents the current location, not a navigation target
- *
- * @see {@link https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA02} for aria-current usage
- * @since 1.0.0
+ * Current page indicator (non-interactive). Rendered with higher contrast and accessibility attributes.
  */
-declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbPage({ className, ...props }: BreadcrumbPageProps): import("react/jsx-runtime").JSX.Element;
+type BreadcrumbSeparatorProps = React.ComponentProps<"li">;
 /**
- * Visual separator between breadcrumb items
- *
- * Displays a separator icon (default: ChevronRight) between breadcrumb items to
- * provide visual hierarchy and direction in the breadcrumb trail. Supports complete
- * customization with any icon or content. Properly hidden from assistive technologies
- * with accessibility attributes for clean screen reader navigation experience.
- *
- * The component uses CSS sizing constraints to ensure consistent icon sizing across
- * different separator types and maintains visual alignment within the breadcrumb flow.
- *
- * @param children - Custom separator icon or content to display instead of default ChevronRight. Typically Lucide icons like Slash, ArrowRight, etc.
- * @param className - Additional CSS classes to apply to the list item container
- * @param props - All standard HTML list item element props (id, data-*, style, etc.)
- *
- * @example
- * ```tsx
- * // Default ChevronRight separator
- * <BreadcrumbSeparator />
- * ```
- *
- * @example
- * ```tsx
- * // Custom Slash separator
- * import { Slash } from "lucide-react"
- * <BreadcrumbSeparator>
- *   <Slash />
- * </BreadcrumbSeparator>
- * ```
- *
- * @example
- * ```tsx
- * // Arrow right separator
- * import { ArrowRight } from "lucide-react"
- * <BreadcrumbSeparator>
- *   <ArrowRight />
- * </BreadcrumbSeparator>
- * ```
- *
- * @example
- * ```tsx
- * // Text separator
- * <BreadcrumbSeparator>
- *   <span className="text-muted-foreground">/</span>
- * </BreadcrumbSeparator>
- * ```
- *
- * @accessibility
- * - Uses `role="presentation"` to indicate purely decorative content
- * - Hidden from screen readers with `aria-hidden="true"`
- * - Does not interfere with keyboard navigation flow
- * - Screen readers skip over separator and focus on actual navigation links
- * - Maintains visual structure without adding semantic noise
- *
- * @since 1.0.0
+ * Visual separator between breadcrumb items. Defaults to ChevronRightIcon but accepts custom children.
  */
-declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: BreadcrumbSeparatorProps): import("react/jsx-runtime").JSX.Element;
+type BreadcrumbEllipsisProps = React.ComponentProps<"span">;
 /**
- * Ellipsis indicator for collapsed breadcrumb items
- *
- * Shows a horizontal ellipsis icon (MoreHorizontal) to indicate hidden or
- * collapsed middle items in a long breadcrumb trail. Essential for deep navigation
- * hierarchies where space is limited or mobile responsive design. Commonly used
- * in combination with dropdown menus, popovers, or expandable sections to reveal
- * the collapsed breadcrumb items on user interaction.
- *
- * The component provides a consistent 36px (9 × 4px) clickable area for better
- * touch interaction when used as a trigger for dropdown menus. Includes hidden
- * screen reader text to provide context about the collapsed content.
- *
- * @param className - Additional CSS classes to apply to the ellipsis container
- * @param children - Custom content to display instead of the default MoreHorizontal icon (rarely needed)
- * @param props - All standard HTML span element props (id, data-*, style, onClick for dropdown triggers, etc.)
- *
- * @example
- * ```tsx
- * // Simple static ellipsis
- * <BreadcrumbEllipsis />
- * ```
- *
- * @example
- * ```tsx
- * // Interactive ellipsis with dropdown menu
- * <BreadcrumbItem>
- *   <DropdownMenu>
- *     <DropdownMenuTrigger asChild>
- *       <BreadcrumbEllipsis className="hover:bg-muted cursor-pointer" />
- *     </DropdownMenuTrigger>
- *     <DropdownMenuContent>
- *       <DropdownMenuItem>
- *         <BreadcrumbLink href="/level1">Level 1</BreadcrumbLink>
- *       </DropdownMenuItem>
- *       <DropdownMenuItem>
- *         <BreadcrumbLink href="/level1/level2">Level 2</BreadcrumbLink>
- *       </DropdownMenuItem>
- *     </DropdownMenuContent>
- *   </DropdownMenu>
- * </BreadcrumbItem>
- * ```
- *
- * @example
- * ```tsx
- * // With popover for collapsed items
- * <BreadcrumbItem>
- *   <Popover>
- *     <PopoverTrigger asChild>
- *       <BreadcrumbEllipsis className="hover:bg-accent" />
- *     </PopoverTrigger>
- *     <PopoverContent>
- *       <div className="space-y-2">
- *         <BreadcrumbLink href="/hidden1">Hidden Item 1</BreadcrumbLink>
- *         <BreadcrumbLink href="/hidden2">Hidden Item 2</BreadcrumbLink>
- *       </div>
- *     </PopoverContent>
- *   </Popover>
- * </BreadcrumbItem>
- * ```
- *
- * @accessibility
- * - Uses `role="presentation"` and `aria-hidden="true"` for the visual ellipsis
- * - Includes hidden screen reader text "More" to provide context
- * - When used as dropdown trigger, ensure proper ARIA attributes on parent trigger
- * - Maintains 36px minimum touch target size for mobile accessibility
- * - Screen readers will announce "More" when focused (if used as interactive element)
- *
- * @see {@link https://www.w3.org/WAI/WCAG21/Understanding/target-size.html} for touch target guidelines
- * @since 1.0.0
+ * Ellipsis indicator for collapsed breadcrumb sections in long paths.
  */
-declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
-export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };
+declare function BreadcrumbEllipsis({ className, ...props }: BreadcrumbEllipsisProps): import("react/jsx-runtime").JSX.Element;
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, type BreadcrumbProps, type BreadcrumbListProps, type BreadcrumbItemProps, type BreadcrumbLinkProps, type BreadcrumbPageProps, type BreadcrumbSeparatorProps, type BreadcrumbEllipsisProps, };
 //# sourceMappingURL=breadcrumb.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/ui/breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA6G/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoHG;AACH,iBAAS,UAAU,CAAC,EAClB,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC,2CAEjD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAW1E;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAQ1E;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG;AACH,iBAAS,cAAc,CAAC,EACtB,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAUnD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAW5E;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,iBAAS,mBAAmB,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAY5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAa9B;AAED,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,kBAAkB,GACnB,CAAC"}
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/ui/breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAKtD,KAAK,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEnD;;GAEG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAS3D;AAED,KAAK,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AAEtD;;GAEG;AACH,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAWnE;AAED,KAAK,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AAEtD;;GAEG;AACH,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAQnE;AAED,KAAK,mBAAmB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AAEzD;;GAEG;AACH,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,0EAc3E;AAED,KAAK,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAExD;;GAEG;AACH,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAWnE;AAED,KAAK,wBAAwB,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AAE3D;;GAEG;AACH,iBAAS,mBAAmB,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAY1B;AAED,KAAK,uBAAuB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAE5D;;GAEG;AACH,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAgB3E;AAED,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,kBAAkB,EAClB,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,GAC7B,CAAC"}

package/dist/components/ui/breadcrumb.js

@@ -0,0 +1,115 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { cn } from "../../lib/utils.js";
+import ChevronRight from "../../node_modules/lucide-react/dist/esm/icons/chevron-right.js";
+import Ellipsis from "../../node_modules/lucide-react/dist/esm/icons/ellipsis.js";
+import { useRender } from "../../node_modules/@base-ui/react/esm/use-render/useRender.js";
+import { mergeProps } from "../../node_modules/@base-ui/react/esm/merge-props/mergeProps.js";
+function Breadcrumb({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": "breadcrumb",
+      "data-slot": "breadcrumb",
+      className: cn(className),
+      ...props
+    }
+  );
+}
+function BreadcrumbList({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      "data-slot": "breadcrumb-list",
+      className: cn(
+        "text-muted-foreground gap-1.5 text-sm sm:gap-2.5 flex flex-wrap items-center break-words",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function BreadcrumbItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-slot": "breadcrumb-item",
+      className: cn("gap-1.5 inline-flex items-center", className),
+      ...props
+    }
+  );
+}
+function BreadcrumbLink({ className, render, ...props }) {
+  return useRender({
+    defaultTagName: "a",
+    props: mergeProps(
+      {
+        className: cn("hover:text-foreground transition-colors", className)
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "breadcrumb-link"
+    }
+  });
+}
+function BreadcrumbPage({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "breadcrumb-page",
+      role: "link",
+      "aria-disabled": "true",
+      "aria-current": "page",
+      className: cn("text-foreground font-normal", className),
+      ...props
+    }
+  );
+}
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      "data-slot": "breadcrumb-separator",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn("[&>svg]:size-3.5", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(ChevronRight, {})
+    }
+  );
+}
+function BreadcrumbEllipsis({ className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-slot": "breadcrumb-ellipsis",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: cn(
+        "size-5 [&>svg]:size-4 flex items-center justify-center",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Ellipsis, {}),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More" })
+      ]
+    }
+  );
+}
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+};
+//# sourceMappingURL=breadcrumb.js.map

package/dist/components/ui/breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.js","sources":["../../../src/components/ui/breadcrumb.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\n\nimport { cn } from \"@/lib/utils\";\nimport { ChevronRightIcon, MoreHorizontalIcon } from \"lucide-react\";\n\ntype BreadcrumbProps = React.ComponentProps<\"nav\">;\n\n/**\n * Root breadcrumb navigation container with semantic HTML and accessibility attributes.\n */\nfunction Breadcrumb({ className, ...props }: BreadcrumbProps) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  );\n}\n\ntype BreadcrumbListProps = React.ComponentProps<\"ol\">;\n\n/**\n * Ordered list container for breadcrumb items. Automatically styled with responsive spacing.\n */\nfunction BreadcrumbList({ className, ...props }: BreadcrumbListProps) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground gap-1.5 text-sm sm:gap-2.5 flex flex-wrap items-center break-words\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype BreadcrumbItemProps = React.ComponentProps<\"li\">;\n\n/**\n * Individual breadcrumb item wrapper. Contains links, pages, or ellipsis components.\n */\nfunction BreadcrumbItem({ className, ...props }: BreadcrumbItemProps) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"gap-1.5 inline-flex items-center\", className)}\n      {...props}\n    />\n  );\n}\n\ntype BreadcrumbLinkProps = useRender.ComponentProps<\"a\">;\n\n/**\n * Interactive breadcrumb link for navigable parent pages. Supports custom rendering with `render` prop.\n */\nfunction BreadcrumbLink({ className, render, ...props }: BreadcrumbLinkProps) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\"hover:text-foreground transition-colors\", className),\n      },\n      props,\n    ),\n    render,\n    state: {\n      slot: \"breadcrumb-link\",\n    },\n  });\n}\n\ntype BreadcrumbPageProps = React.ComponentProps<\"span\">;\n\n/**\n * Current page indicator (non-interactive). Rendered with higher contrast and accessibility attributes.\n */\nfunction BreadcrumbPage({ className, ...props }: BreadcrumbPageProps) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  );\n}\n\ntype BreadcrumbSeparatorProps = React.ComponentProps<\"li\">;\n\n/**\n * Visual separator between breadcrumb items. Defaults to ChevronRightIcon but accepts custom children.\n */\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: BreadcrumbSeparatorProps) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? <ChevronRightIcon />}\n    </li>\n  );\n}\n\ntype BreadcrumbEllipsisProps = React.ComponentProps<\"span\">;\n\n/**\n * Ellipsis indicator for collapsed breadcrumb sections in long paths.\n */\nfunction BreadcrumbEllipsis({ className, ...props }: BreadcrumbEllipsisProps) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\n        className,\n      )}\n      {...props}\n    >\n      <MoreHorizontalIcon />\n      <span className=\"sr-only\">More</span>\n    </span>\n  );\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n  type BreadcrumbProps,\n  type BreadcrumbListProps,\n  type BreadcrumbItemProps,\n  type BreadcrumbLinkProps,\n  type BreadcrumbPageProps,\n  type BreadcrumbSeparatorProps,\n  type BreadcrumbEllipsisProps,\n};\n"],"names":["ChevronRightIcon","MoreHorizontalIcon"],"mappings":";;;;;;;AAYA,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAW;AAAA,MACX,aAAU;AAAA,MACV,WAAW,GAAG,SAAS;AAAA,MACtB,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAOA,SAAS,eAAe,EAAE,WAAW,GAAG,SAA8B;AACpE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAOA,SAAS,eAAe,EAAE,WAAW,GAAG,SAA8B;AACpE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,oCAAoC,SAAS;AAAA,MAC1D,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAOA,SAAS,eAAe,EAAE,WAAW,QAAQ,GAAG,SAA8B;AAC5E,SAAO,UAAU;AAAA,IACf,gBAAgB;AAAA,IAChB,OAAO;AAAA,MACL;AAAA,QACE,WAAW,GAAG,2CAA2C,SAAS;AAAA,MAAA;AAAA,MAEpE;AAAA,IAAA;AAAA,IAEF;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,IAAA;AAAA,EACR,CACD;AACH;AAOA,SAAS,eAAe,EAAE,WAAW,GAAG,SAA8B;AACpE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,iBAAc;AAAA,MACd,gBAAa;AAAA,MACb,WAAW,GAAG,+BAA+B,SAAS;AAAA,MACrD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAOA,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA6B;AAC3B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,oBAAoB,SAAS;AAAA,MAC1C,GAAG;AAAA,MAEH,UAAA,gCAAaA,cAAA,CAAA,CAAiB;AAAA,IAAA;AAAA,EAAA;AAGrC;AAOA,SAAS,mBAAmB,EAAE,WAAW,GAAG,SAAkC;AAC5E,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAACC,UAAA,EAAmB;AAAA,QACpB,oBAAC,QAAA,EAAK,WAAU,WAAU,UAAA,OAAA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpC;"}