@neynar/ui 0.2.0 → 0.3.0

package/llm-docs/pagination-link.llm.md

@@ -1,150 +0,0 @@
-# PaginationLink
-
-**Type**: component
-
-Clickable link for individual page numbers Interactive link component that navigates to specific pages within paginated content. Uses buttonVariants from the Button component to provide consistent styling - applies "outline" variant when active and "ghost" variant when inactive. Features automatic active state styling and comprehensive accessibility attributes. The component automatically inherits focus management, hover states, and proper spacing from the Button component's CVA configuration while maintaining semantic link behavior for proper navigation and SEO.
-
-## JSX Usage
-
-```jsx
-import { PaginationLink } from '@neynar/ui';
-
-<PaginationLink
-  isActive={true}
-  size={value}
-  href="value"
-  className="value"
-  onClick={handleClick}
-  "aria-label"="value"
-  "aria-current"={value}
-  "aria-describedby"="value"
-  "aria-disabled"={true}
-  tabIndex={0}
-  id="value"
-  title="value"
-  target={value}
-  rel="value"
->
-  {/* Your content here */}
-</PaginationLink>
-```
-
-## Component Props
-
-### isActive
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### size
-- **Type**: `"default" | "sm" | "lg" | "icon"`
-- **Required**: No
-- **Description**: No description available
-
-### href
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### onClick
-- **Type**: `React.MouseEventHandler<HTMLAnchorElement>`
-- **Required**: No
-- **Description**: No description available
-
-### "aria-label"
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### "aria-current"
-- **Type**: `"page" | "step" | "location" | "date" | "time" | boolean`
-- **Required**: No
-- **Description**: No description available
-
-### "aria-describedby"
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### "aria-disabled"
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### tabIndex
-- **Type**: `number`
-- **Required**: No
-- **Description**: No description available
-
-### id
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### title
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### target
-- **Type**: `"_self" | "_blank" | "_parent" | "_top"`
-- **Required**: No
-- **Description**: No description available
-
-### rel
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic page links with different states
-<PaginationLink href="/products?page=1">1</PaginationLink>
-<PaginationLink href="/products?page=2" isActive>2</PaginationLink>
-<PaginationLink href="/products?page=3">3</PaginationLink>
-```
-### Example 2
-```tsx
-// Different sizes using Button size variants
-<PaginationLink href="/page/1" size="sm">1</PaginationLink>
-<PaginationLink href="/page/2" size="default">2</PaginationLink>
-<PaginationLink href="/page/3" size="lg">3</PaginationLink>
-```
-### Example 3
-```tsx
-// With onClick handlers for client-side pagination
-<PaginationLink
-  href="#"
-  onClick={(e) => {
-    e.preventDefault();
-    onPageChange(1);
-  }}
-  aria-label="Go to page 1"
->
-  1
-</PaginationLink>
-```
-### Example 4
-```tsx
-// Disabled state for out-of-bounds pages
-<PaginationLink
-  href="#"
-  className="pointer-events-none opacity-50"
-  aria-disabled="true"
-  tabIndex={-1}
->
-  5
-</PaginationLink>
-```

package/llm-docs/pagination-next.llm.md

@@ -1,115 +0,0 @@
-# PaginationNext
-
-**Type**: component
-
-Next page navigation button Navigates to the next page in the pagination sequence. Built on PaginationLink with fixed "default" size and includes a chevron-right icon for visual direction. Features responsive design that shows only an icon on mobile devices and "Next" text with icon on larger screens for optimal user experience. Uses buttonVariants with "ghost" variant by default, inheriting all focus management, hover states, and accessibility features from the Button component.
-
-## JSX Usage
-
-```jsx
-import { PaginationNext } from '@neynar/ui';
-
-<PaginationNext
-  href="value"
-  className="value"
-  onClick={handleClick}
-  "aria-label"="value"
-  "aria-disabled"={true}
-  tabIndex={0}
-  id="value"
-  title="value"
-  target={value}
-  rel="value"
-/>
-```
-
-## Component Props
-
-### href
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### onClick
-- **Type**: `React.MouseEventHandler<HTMLAnchorElement>`
-- **Required**: No
-- **Description**: No description available
-
-### "aria-label"
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### "aria-disabled"
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### tabIndex
-- **Type**: `number`
-- **Required**: No
-- **Description**: No description available
-
-### id
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### title
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### target
-- **Type**: `"_self" | "_blank" | "_parent" | "_top"`
-- **Required**: No
-- **Description**: No description available
-
-### rel
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic next button
-<PaginationNext href="/products?page=3" />
-```
-### Example 2
-```tsx
-// With disabled state (typically for last page)
-<PaginationNext
-  href="#"
-  className="pointer-events-none opacity-50"
-  aria-disabled="true"
-  tabIndex={-1}
-/>
-```
-### Example 3
-```tsx
-// With click handler for client-side navigation
-<PaginationNext
-  href="#"
-  onClick={(e) => {
-    e.preventDefault();
-    if (currentPage < totalPages) {
-      onPageChange(currentPage + 1);
-    }
-  }}
-/>
-```
-### Example 4
-```tsx
-// With custom aria-label for internationalization
-<PaginationNext
-  href="/page/6"
-  aria-label="Ir a la página siguiente"
-/>
-```

package/llm-docs/pagination-previous.llm.md

@@ -1,115 +0,0 @@
-# PaginationPrevious
-
-**Type**: component
-
-Previous page navigation button Navigates to the previous page in the pagination sequence. Built on PaginationLink with fixed "default" size and includes a chevron-left icon for visual direction. Features responsive design that shows only an icon on mobile devices and icon with "Previous" text on larger screens for optimal user experience. Uses buttonVariants with "ghost" variant by default, inheriting all focus management, hover states, and accessibility features from the Button component.
-
-## JSX Usage
-
-```jsx
-import { PaginationPrevious } from '@neynar/ui';
-
-<PaginationPrevious
-  href="value"
-  className="value"
-  onClick={handleClick}
-  "aria-label"="value"
-  "aria-disabled"={true}
-  tabIndex={0}
-  id="value"
-  title="value"
-  target={value}
-  rel="value"
-/>
-```
-
-## Component Props
-
-### href
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### onClick
-- **Type**: `React.MouseEventHandler<HTMLAnchorElement>`
-- **Required**: No
-- **Description**: No description available
-
-### "aria-label"
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### "aria-disabled"
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### tabIndex
-- **Type**: `number`
-- **Required**: No
-- **Description**: No description available
-
-### id
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### title
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### target
-- **Type**: `"_self" | "_blank" | "_parent" | "_top"`
-- **Required**: No
-- **Description**: No description available
-
-### rel
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic previous button
-<PaginationPrevious href="/products?page=1" />
-```
-### Example 2
-```tsx
-// With disabled state (typically for first page)
-<PaginationPrevious
-  href="#"
-  className="pointer-events-none opacity-50"
-  aria-disabled="true"
-  tabIndex={-1}
-/>
-```
-### Example 3
-```tsx
-// With click handler for client-side navigation
-<PaginationPrevious
-  href="#"
-  onClick={(e) => {
-    e.preventDefault();
-    if (currentPage > 1) {
-      onPageChange(currentPage - 1);
-    }
-  }}
-/>
-```
-### Example 4
-```tsx
-// With custom aria-label for internationalization
-<PaginationPrevious
-  href="/page/4"
-  aria-label="Ir a la página anterior"
-/>
-```

package/llm-docs/pagination.llm.md

@@ -1,190 +0,0 @@
-# Pagination
-
-**Type**: component
-
-Pagination navigation component for large datasets A comprehensive pagination component built on shadcn/ui standards that provides intuitive navigation through pages of content. All interactive elements use buttonVariants from the Button component for consistent styling and behavior: - PaginationLink uses "outline" variant when active, "ghost" when inactive - PaginationPrevious/PaginationNext use "ghost" variant by default - All components inherit Button's focus management, hover states, and accessibility Features responsive design, full accessibility compliance, and flexible composition patterns for different use cases. Ideal for data tables, search results, product listings, and any paginated content that needs professional navigation controls.
-
-## JSX Usage
-
-```jsx
-import { Pagination } from '@neynar/ui';
-
-<Pagination
-  className="value"
-  role="value"
-  "aria-label"="value"
-  id="value"
-  tabIndex={0}
->
-  {/* Your content here */}
-</Pagination>
-```
-
-## Component Props
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-### role
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### "aria-label"
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### id
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### tabIndex
-- **Type**: `number`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic pagination with numbered pages
-<Pagination>
-  <PaginationContent>
-    <PaginationItem>
-      <PaginationPrevious href="/products?page=1" />
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationLink href="/products?page=1">1</PaginationLink>
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationLink href="/products?page=2" isActive>2</PaginationLink>
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationLink href="/products?page=3">3</PaginationLink>
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationNext href="/products?page=3" />
-    </PaginationItem>
-  </PaginationContent>
-</Pagination>
-```
-### Example 2
-```tsx
-// Complete pagination with ellipsis for large datasets
-<Pagination>
-  <PaginationContent>
-    <PaginationItem>
-      <PaginationPrevious href="/search?q=react&page=4" />
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationLink href="/search?q=react&page=1">1</PaginationLink>
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationEllipsis />
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationLink href="/search?q=react&page=4">4</PaginationLink>
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationLink href="/search?q=react&page=5" isActive>5</PaginationLink>
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationLink href="/search?q=react&page=6">6</PaginationLink>
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationEllipsis />
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationLink href="/search?q=react&page=50">50</PaginationLink>
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationNext href="/search?q=react&page=6" />
-    </PaginationItem>
-  </PaginationContent>
-</Pagination>
-```
-### Example 3
-```tsx
-// Client-side pagination with state management
-function PaginatedResults() {
-  const [currentPage, setCurrentPage] = useState(1);
-  const totalPages = 25;
-  return (
-    <Pagination>
-      <PaginationContent>
-        <PaginationItem>
-          <PaginationPrevious
-            href="#"
-            onClick={(e) => {
-              e.preventDefault();
-              if (currentPage > 1) setCurrentPage(currentPage - 1);
-            }}
-            className={currentPage === 1 ? "pointer-events-none opacity-50" : ""}
-            aria-disabled={currentPage === 1}
-          />
-        </PaginationItem>
-        {[1, 2, 3].map((page) => (
-          <PaginationItem key={page}>
-            <PaginationLink
-              href="#"
-              isActive={currentPage === page}
-              onClick={(e) => {
-                e.preventDefault();
-                setCurrentPage(page);
-              }}
-            >
-              {page}
-            </PaginationLink>
-          </PaginationItem>
-        ))}
-        <PaginationItem>
-          <PaginationNext
-            href="#"
-            onClick={(e) => {
-              e.preventDefault();
-              if (currentPage < totalPages) setCurrentPage(currentPage + 1);
-            }}
-            className={currentPage === totalPages ? "pointer-events-none opacity-50" : ""}
-            aria-disabled={currentPage === totalPages}
-          />
-        </PaginationItem>
-      </PaginationContent>
-    </Pagination>
-  );
-}
-```
-### Example 4
-```tsx
-// Different sizes for various use cases
-// Compact pagination for data tables
-<Pagination>
-  <PaginationContent>
-    <PaginationItem>
-      <PaginationLink href="/data?page=1" size="sm">1</PaginationLink>
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationLink href="/data?page=2" size="sm" isActive>2</PaginationLink>
-    </PaginationItem>
-  </PaginationContent>
-</Pagination>
-// Large pagination for primary content
-<Pagination>
-  <PaginationContent>
-    <PaginationItem>
-      <PaginationLink href="/articles?page=1" size="lg">1</PaginationLink>
-    </PaginationItem>
-    <PaginationItem>
-      <PaginationLink href="/articles?page=2" size="lg" isActive>2</PaginationLink>
-    </PaginationItem>
-  </PaginationContent>
-</Pagination>
-```

package/llm-docs/popover-anchor.llm.md

@@ -1,53 +0,0 @@
-# PopoverAnchor
-
-**Type**: component
-
-PopoverAnchor - Optional anchor element for custom positioning Use PopoverAnchor when you need the popover to position relative to an element other than the trigger. This is useful for complex layouts where the visual trigger and positioning reference should be different elements.
-
-## JSX Usage
-
-```jsx
-import { PopoverAnchor } from '@neynar/ui';
-
-<PopoverAnchor
-  asChild={true}
-  className="value"
->
-  {/* Your content here */}
-</PopoverAnchor>
-```
-
-## Component Props
-
-### asChild
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-```tsx
-<Popover>
-  <PopoverAnchor asChild>
-    <div className="relative">
-      <span>Reference element for positioning</span>
-    </div>
-  </PopoverAnchor>
-  <PopoverTrigger asChild>
-    <Button>Open (positioned relative to anchor)</Button>
-  </PopoverTrigger>
-  <PopoverContent>
-    <p>This popover positions relative to the anchor, not the trigger</p>
-  </PopoverContent>
-</Popover>
-```