@neynar/ui 0.1.1

package/dist/components/ui/navigation-menu.d.ts

@@ -0,0 +1,318 @@
+import * as React from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+/**
+ * NavigationMenu - A collection of links for navigating websites
+ *
+ * A horizontal navigation component built on Radix UI primitives that provides
+ * flexible navigation patterns with dropdown content support. Features full
+ * keyboard navigation, accessibility compliance, and responsive design.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic navigation with dropdown
+ * <NavigationMenu>
+ *   <NavigationMenuList>
+ *     <NavigationMenuItem>
+ *       <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+ *       <NavigationMenuContent>
+ *         <NavigationMenuLink href="/products">All Products</NavigationMenuLink>
+ *       </NavigationMenuContent>
+ *     </NavigationMenuItem>
+ *   </NavigationMenuList>
+ * </NavigationMenu>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Simple navigation links
+ * <NavigationMenu>
+ *   <NavigationMenuList>
+ *     <NavigationMenuItem>
+ *       <NavigationMenuLink href="/about">About</NavigationMenuLink>
+ *     </NavigationMenuItem>
+ *     <NavigationMenuItem>
+ *       <NavigationMenuLink href="/contact">Contact</NavigationMenuLink>
+ *     </NavigationMenuItem>
+ *   </NavigationMenuList>
+ * </NavigationMenu>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With Next.js Link using asChild
+ * <NavigationMenu>
+ *   <NavigationMenuList>
+ *     <NavigationMenuItem>
+ *       <NavigationMenuLink asChild>
+ *         <Link href="/dashboard">Dashboard</Link>
+ *       </NavigationMenuLink>
+ *     </NavigationMenuItem>
+ *   </NavigationMenuList>
+ * </NavigationMenu>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Without viewport for simpler styling
+ * <NavigationMenu viewport={false}>
+ *   <NavigationMenuList>
+ *     <NavigationMenuItem>
+ *       <NavigationMenuTrigger>Features</NavigationMenuTrigger>
+ *       <NavigationMenuContent>
+ *         <div className="p-4 w-[300px]">
+ *           <NavigationMenuLink href="/analytics">Analytics</NavigationMenuLink>
+ *         </div>
+ *       </NavigationMenuContent>
+ *     </NavigationMenuItem>
+ *   </NavigationMenuList>
+ * </NavigationMenu>
+ * ```
+ *
+ * @accessibility
+ * - Full keyboard navigation with arrow keys for menu traversal
+ * - Tab key moves between focusable menu items
+ * - Escape key closes open dropdown menus
+ * - Enter/Space activates triggers and links
+ * - ARIA attributes for proper screen reader support
+ * - Focus management with automatic focus trapping in dropdowns
+ * - Semantic HTML structure for navigation landmarks
+ *
+ * @see {@link https://ui.shadcn.com/docs/components/navigation-menu} shadcn/ui Navigation Menu
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/navigation-menu} Radix UI Navigation Menu
+ * @since 1.0.0
+ */
+/**
+ * Main NavigationMenu component props
+ *
+ * @param viewport - Whether to render the navigation viewport container. Defaults to true.
+ *                   Set to false for simpler dropdown styling without viewport positioning.
+ * @param className - Additional CSS classes to apply to the navigation menu root
+ * @param children - NavigationMenuList and NavigationMenuViewport components
+ */
+declare function NavigationMenu({ className, children, viewport, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+    /** Whether to render the navigation viewport container for dropdown positioning */
+    viewport?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * NavigationMenuList - Container for navigation menu items
+ *
+ * A horizontal list container that groups NavigationMenuItem components.
+ * Provides the foundational layout structure for the navigation menu.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <NavigationMenuList>
+ *   <NavigationMenuItem>
+ *     <NavigationMenuLink href="/home">Home</NavigationMenuLink>
+ *   </NavigationMenuItem>
+ *   <NavigationMenuItem>
+ *     <NavigationMenuLink href="/about">About</NavigationMenuLink>
+ *   </NavigationMenuItem>
+ * </NavigationMenuList>
+ * ```
+ *
+ * @param className - Additional CSS classes for styling
+ * @since 1.0.0
+ */
+declare function NavigationMenuList({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+/**
+ * NavigationMenuItem - Individual navigation menu item container
+ *
+ * Wraps a single navigation item, which can contain either:
+ * - A NavigationMenuTrigger with NavigationMenuContent for dropdowns
+ * - A NavigationMenuLink for direct navigation
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // With dropdown content
+ * <NavigationMenuItem>
+ *   <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+ *   <NavigationMenuContent>
+ *     <NavigationMenuLink href="/products/all">All Products</NavigationMenuLink>
+ *   </NavigationMenuContent>
+ * </NavigationMenuItem>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Simple link
+ * <NavigationMenuItem>
+ *   <NavigationMenuLink href="/contact">Contact</NavigationMenuLink>
+ * </NavigationMenuItem>
+ * ```
+ *
+ * @param className - Additional CSS classes for styling
+ * @since 1.0.0
+ */
+declare function NavigationMenuItem({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare const navigationMenuTriggerStyle: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * NavigationMenuTrigger - Button that opens dropdown navigation content
+ *
+ * An interactive trigger button that displays NavigationMenuContent when activated.
+ * Features automatic chevron icon rotation and hover/focus states. Supports the
+ * asChild prop for custom button styling.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <NavigationMenuTrigger>Features</NavigationMenuTrigger>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom button styling using asChild
+ * <NavigationMenuTrigger asChild>
+ *   <Button variant="outline">Custom Trigger</Button>
+ * </NavigationMenuTrigger>
+ * ```
+ *
+ * @accessibility
+ * - Automatic ARIA expanded state management
+ * - Keyboard activation with Enter/Space keys
+ * - Focus visible indicator for keyboard navigation
+ * - Screen reader accessible button semantics
+ *
+ * @param className - Additional CSS classes for styling
+ * @param children - Button content (text, icons, etc.)
+ * @since 1.0.0
+ */
+declare function NavigationMenuTrigger({ className, children, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+/**
+ * NavigationMenuContent - Dropdown content panel for navigation menu
+ *
+ * The content container that appears when a NavigationMenuTrigger is activated.
+ * Supports enter/exit animations, responsive positioning, and flexible layouts.
+ * Can be styled differently based on the viewport prop setting.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <NavigationMenuContent>
+ *   <div className="grid gap-3 p-6 w-[400px]">
+ *     <NavigationMenuLink href="/feature1">Feature 1</NavigationMenuLink>
+ *     <NavigationMenuLink href="/feature2">Feature 2</NavigationMenuLink>
+ *   </div>
+ * </NavigationMenuContent>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Complex layout with sections
+ * <NavigationMenuContent>
+ *   <div className="grid gap-6 p-6 w-[600px] grid-cols-3">
+ *     <div>
+ *       <h4>Analytics</h4>
+ *       <NavigationMenuLink href="/dashboard">Dashboard</NavigationMenuLink>
+ *     </div>
+ *   </div>
+ * </NavigationMenuContent>
+ * ```
+ *
+ * @accessibility
+ * - Automatic focus management when opened
+ * - Escape key support for closing
+ * - Proper ARIA labeling and relationships
+ *
+ * @param className - Additional CSS classes for styling
+ * @param children - Content to display in the dropdown (links, layouts, etc.)
+ * @since 1.0.0
+ */
+declare function NavigationMenuContent({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+/**
+ * NavigationMenuViewport - Viewport container for dropdown content positioning
+ *
+ * Manages the positioning, sizing, and animation of NavigationMenuContent panels.
+ * Automatically adjusts dimensions based on content size and provides smooth
+ * enter/exit animations. Only rendered when viewport prop is true on NavigationMenu.
+ *
+ * @component
+ * @internal This component is typically not used directly by consumers
+ *
+ * @accessibility
+ * - Handles focus containment for dropdown content
+ * - Manages viewport announcements for screen readers
+ *
+ * @param className - Additional CSS classes for styling
+ * @since 1.0.0
+ */
+declare function NavigationMenuViewport({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>): import("react/jsx-runtime").JSX.Element;
+/**
+ * NavigationMenuLink - Styled link component for navigation menus
+ *
+ * A link component designed specifically for navigation menus. Supports active
+ * states, hover effects, and the asChild pattern for framework integration.
+ * Can be used both within dropdown content and as direct navigation items.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Direct navigation link
+ * <NavigationMenuLink href="/about">About Us</NavigationMenuLink>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With Next.js Link using asChild
+ * <NavigationMenuLink asChild>
+ *   <Link href="/products">Products</Link>
+ * </NavigationMenuLink>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // In dropdown content with description
+ * <NavigationMenuLink href="/analytics">
+ *   <div className="text-sm font-medium">Analytics</div>
+ *   <p className="text-sm text-muted-foreground">View your data insights</p>
+ * </NavigationMenuLink>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With trigger styling for direct navigation
+ * <NavigationMenuLink href="/docs" className={navigationMenuTriggerStyle()}>
+ *   Documentation
+ * </NavigationMenuLink>
+ * ```
+ *
+ * @accessibility
+ * - Focus visible ring for keyboard navigation
+ * - Active state styling for current page indication
+ * - Proper link semantics and ARIA attributes
+ * - Keyboard activation support (Enter key)
+ * - Screen reader compatible text content
+ *
+ * @param className - Additional CSS classes for styling
+ * @param children - Link content (text, elements, descriptions)
+ * @since 1.0.0
+ */
+declare function NavigationMenuLink({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>): import("react/jsx-runtime").JSX.Element;
+/**
+ * NavigationMenuIndicator - Visual indicator for active menu item
+ *
+ * Displays an animated arrow indicator that points to the currently active
+ * or hovered navigation menu item. Automatically transitions between positions
+ * as users navigate through menu items, providing visual feedback.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Typically used automatically, but can be customized
+ * <NavigationMenuIndicator className="custom-indicator-styles" />
+ * ```
+ *
+ * @accessibility
+ * - Purely decorative visual element
+ * - Does not interfere with screen reader navigation
+ * - Hidden from assistive technologies (aria-hidden)
+ *
+ * @param className - Additional CSS classes for custom indicator styling
+ * @since 1.0.0
+ */
+declare function NavigationMenuIndicator({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>): import("react/jsx-runtime").JSX.Element;
+export { NavigationMenu, NavigationMenuList, NavigationMenuItem, NavigationMenuContent, NavigationMenuTrigger, NavigationMenuLink, NavigationMenuIndicator, NavigationMenuViewport, navigationMenuTriggerStyle, };
+//# sourceMappingURL=navigation-menu.d.ts.map

package/dist/components/ui/navigation-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-menu.d.ts","sourceRoot":"","sources":["../../../src/components/ui/navigation-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,uBAAuB,MAAM,iCAAiC,CAAC;AAM3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiFG;AACH;;;;;;;GAOG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,QAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,GAAG;IAC7D,mFAAmF;IACnF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,2CAeA;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,2CAW3D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,2CAQ3D;AAED,QAAA,MAAM,0BAA0B,oFAE/B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,iBAAS,qBAAqB,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,OAAO,CAAC,2CAc9D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,iBAAS,qBAAqB,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,OAAO,CAAC,2CAY9D;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,QAAQ,CAAC,2CAiB/D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,2CAW3D;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,iBAAS,uBAAuB,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,SAAS,CAAC,2CAahE;AAED,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,EACrB,kBAAkB,EAClB,uBAAuB,EACvB,sBAAsB,EACtB,0BAA0B,GAC3B,CAAC"}

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

@@ -0,0 +1,343 @@
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+/**
+ * Pagination navigation component for large datasets
+ *
+ * A comprehensive pagination component built on shadcn/ui standards that provides
+ * intuitive navigation through pages of content. Features responsive design,
+ * accessibility compliance, and flexible composition patterns for different use cases.
+ *
+ * Ideal for data tables, search results, product listings, and any paginated content.
+ * Integrates seamlessly with React frameworks like Next.js through customizable link components.
+ *
+ * @example
+ * ```tsx
+ * // Basic pagination with numbered pages
+ * <Pagination>
+ *   <PaginationContent>
+ *     <PaginationItem>
+ *       <PaginationPrevious href="/page/1" />
+ *     </PaginationItem>
+ *     <PaginationItem>
+ *       <PaginationLink href="/page/1">1</PaginationLink>
+ *     </PaginationItem>
+ *     <PaginationItem>
+ *       <PaginationLink href="/page/2" isActive>2</PaginationLink>
+ *     </PaginationItem>
+ *     <PaginationItem>
+ *       <PaginationLink href="/page/3">3</PaginationLink>
+ *     </PaginationItem>
+ *     <PaginationItem>
+ *       <PaginationNext href="/page/3" />
+ *     </PaginationItem>
+ *   </PaginationContent>
+ * </Pagination>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With ellipsis for large page ranges
+ * <Pagination>
+ *   <PaginationContent>
+ *     <PaginationItem>
+ *       <PaginationPrevious href="/page/4" />
+ *     </PaginationItem>
+ *     <PaginationItem>
+ *       <PaginationLink href="/page/1">1</PaginationLink>
+ *     </PaginationItem>
+ *     <PaginationItem>
+ *       <PaginationEllipsis />
+ *     </PaginationItem>
+ *     <PaginationItem>
+ *       <PaginationLink href="/page/5" isActive>5</PaginationLink>
+ *     </PaginationItem>
+ *     <PaginationItem>
+ *       <PaginationEllipsis />
+ *     </PaginationItem>
+ *     <PaginationItem>
+ *       <PaginationLink href="/page/50">50</PaginationLink>
+ *     </PaginationItem>
+ *     <PaginationItem>
+ *       <PaginationNext href="/page/6" />
+ *     </PaginationItem>
+ *   </PaginationContent>
+ * </Pagination>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With Next.js Link integration
+ * <Pagination>
+ *   <PaginationContent>
+ *     <PaginationItem>
+ *       <PaginationLink asChild>
+ *         <Link href="/products?page=1">1</Link>
+ *       </PaginationLink>
+ *     </PaginationItem>
+ *   </PaginationContent>
+ * </Pagination>
+ * ```
+ *
+ * @accessibility
+ * - Semantic nav element with role="navigation" and aria-label="pagination"
+ * - aria-current="page" automatically applied to active page links
+ * - Descriptive aria-labels on Previous/Next buttons for screen readers
+ * - Full keyboard navigation support with Tab and Enter keys
+ * - High contrast focus indicators and proper color contrast ratios
+ * - Screen reader friendly ellipsis with "More pages" hidden text
+ *
+ * @see {@link https://ui.shadcn.com/docs/components/pagination} shadcn/ui Pagination
+ * @see {@link PaginationContent} Container for pagination items
+ * @see {@link PaginationLink} Individual page number links
+ * @see {@link PaginationPrevious} Previous page navigation button
+ * @see {@link PaginationNext} Next page navigation button
+ * @see {@link PaginationEllipsis} Ellipsis indicator for omitted pages
+ * @since 1.0.0
+ */
+declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
+/**
+ * Container for pagination navigation items
+ *
+ * A semantic unordered list that houses all pagination controls in a
+ * responsive horizontal layout. Provides proper spacing and alignment
+ * for pagination items while maintaining accessibility standards.
+ *
+ * @example
+ * ```tsx
+ * <PaginationContent>
+ *   <PaginationItem>
+ *     <PaginationPrevious href="/prev" />
+ *   </PaginationItem>
+ *   <PaginationItem>
+ *     <PaginationLink href="/page/1">1</PaginationLink>
+ *   </PaginationItem>
+ * </PaginationContent>
+ * ```
+ *
+ * @accessibility
+ * - Semantic ul element for proper list structure
+ * - Flexible gap spacing for touch-friendly interaction
+ * - Horizontal scrolling support on narrow viewports
+ */
+declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;
+/**
+ * Individual list item wrapper for pagination controls
+ *
+ * A semantic list item that wraps pagination links, buttons, or ellipsis elements.
+ * Provides consistent structure and enables proper keyboard navigation between
+ * pagination controls.
+ *
+ * @example
+ * ```tsx
+ * <PaginationItem>
+ *   <PaginationLink href="/page/1">1</PaginationLink>
+ * </PaginationItem>
+ *
+ * <PaginationItem>
+ *   <PaginationEllipsis />
+ * </PaginationItem>
+ * ```
+ */
+declare function PaginationItem({ ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for pagination link components
+ */
+type PaginationLinkProps = {
+    /**
+     * Whether this link represents the currently active page
+     *
+     * When true, applies active styling and adds aria-current="page"
+     * for screen reader accessibility.
+     *
+     * @default false
+     */
+    isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, "size"> & React.ComponentProps<"a">;
+/**
+ * Clickable link for individual page numbers
+ *
+ * Interactive link component that navigates to specific pages within
+ * paginated content. Features automatic active state styling and
+ * accessibility attributes. Can be used with framework routers like
+ * Next.js Link or React Router through the asChild pattern.
+ *
+ * @example
+ * ```tsx
+ * // Basic page links
+ * <PaginationLink href="/products?page=1">1</PaginationLink>
+ * <PaginationLink href="/products?page=2" isActive>2</PaginationLink>
+ * <PaginationLink href="/products?page=3">3</PaginationLink>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With Next.js Link
+ * <PaginationLink asChild>
+ *   <Link href="/search?q=react&page=1">1</Link>
+ * </PaginationLink>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With onClick handlers for client-side pagination
+ * <PaginationLink
+ *   href="#"
+ *   onClick={(e) => {
+ *     e.preventDefault();
+ *     onPageChange(1);
+ *   }}
+ * >
+ *   1
+ * </PaginationLink>
+ * ```
+ *
+ * @accessibility
+ * - Automatically applies aria-current="page" when isActive is true
+ * - Button-style focus indicators for keyboard navigation
+ * - Sufficient color contrast for active/inactive states
+ * - Touch-friendly minimum 44px target size
+ */
+declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Previous page navigation button
+ *
+ * Navigates to the previous page in the pagination sequence. Features
+ * responsive design that shows only an icon on mobile devices and
+ * icon with text on larger screens for optimal user experience.
+ *
+ * @example
+ * ```tsx
+ * // Basic previous button
+ * <PaginationPrevious href="/products?page=1" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With disabled state (typically for first page)
+ * <PaginationPrevious
+ *   href="#"
+ *   className="pointer-events-none opacity-50"
+ *   aria-disabled="true"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With click handler for client-side navigation
+ * <PaginationPrevious
+ *   href="#"
+ *   onClick={(e) => {
+ *     e.preventDefault();
+ *     if (currentPage > 1) {
+ *       onPageChange(currentPage - 1);
+ *     }
+ *   }}
+ * />
+ * ```
+ *
+ * @accessibility
+ * - Built-in aria-label="Go to previous page" for screen readers
+ * - Chevron icon provides visual direction context
+ * - Responsive text label appears on larger screens
+ * - Keyboard accessible through Tab navigation
+ * - Should be disabled on first page to prevent confusion
+ */
+declare function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Next page navigation button
+ *
+ * Navigates to the next page in the pagination sequence. Features
+ * responsive design that shows only an icon on mobile devices and
+ * text with icon on larger screens for optimal user experience.
+ *
+ * @example
+ * ```tsx
+ * // Basic next button
+ * <PaginationNext href="/products?page=3" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With disabled state (typically for last page)
+ * <PaginationNext
+ *   href="#"
+ *   className="pointer-events-none opacity-50"
+ *   aria-disabled="true"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With click handler for client-side navigation
+ * <PaginationNext
+ *   href="#"
+ *   onClick={(e) => {
+ *     e.preventDefault();
+ *     if (currentPage < totalPages) {
+ *       onPageChange(currentPage + 1);
+ *     }
+ *   }}
+ * />
+ * ```
+ *
+ * @accessibility
+ * - Built-in aria-label="Go to next page" for screen readers
+ * - Chevron icon provides visual direction context
+ * - Responsive text label appears on larger screens
+ * - Keyboard accessible through Tab navigation
+ * - Should be disabled on last page to prevent confusion
+ */
+declare function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Visual indicator for omitted page numbers
+ *
+ * Displays a horizontal ellipsis (three dots) to indicate that
+ * page numbers have been omitted from the pagination display.
+ * Used to maintain clean UI when dealing with large page ranges.
+ *
+ * @example
+ * ```tsx
+ * // Between page ranges
+ * <PaginationItem>
+ *   <PaginationLink href="/page/1">1</PaginationLink>
+ * </PaginationItem>
+ * <PaginationItem>
+ *   <PaginationEllipsis />
+ * </PaginationItem>
+ * <PaginationItem>
+ *   <PaginationLink href="/page/25" isActive>25</PaginationLink>
+ * </PaginationItem>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Common pagination pattern with ellipsis
+ * // 1 ... 23 24 [25] 26 27 ... 100
+ * <PaginationContent>
+ *   <PaginationItem>
+ *     <PaginationLink href="/page/1">1</PaginationLink>
+ *   </PaginationItem>
+ *   <PaginationItem>
+ *     <PaginationEllipsis />
+ *   </PaginationItem>
+ *   <PaginationItem>
+ *     <PaginationLink href="/page/25" isActive>25</PaginationLink>
+ *   </PaginationItem>
+ *   <PaginationItem>
+ *     <PaginationEllipsis />
+ *   </PaginationItem>
+ *   <PaginationItem>
+ *     <PaginationLink href="/page/100">100</PaginationLink>
+ *   </PaginationItem>
+ * </PaginationContent>
+ * ```
+ *
+ * @accessibility
+ * - Visual element is aria-hidden from screen readers
+ * - Hidden "More pages" text provides context for assistive technology
+ * - Non-interactive, purely decorative indicator
+ * - Consistent sizing with pagination links for visual harmony
+ */
+declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, };
+//# sourceMappingURL=pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/ui/pagination.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,MAAM,EAAkB,MAAM,wBAAwB,CAAC;AAEhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6FG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAUvE;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAQ5B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAE/D;AAED;;GAEG;AACH,KAAK,mBAAmB,GAAG;IACzB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,CAAC,GACnD,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AAE5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,IAAa,EACb,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAgBrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,2CAY7C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,2CAY7C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAY9B;AAED,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,cAAc,EACd,kBAAkB,GACnB,CAAC"}