@neynar/ui 0.3.0 → 0.4.0

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

@@ -0,0 +1,115 @@
+# 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/pagination-previous.llm.md

@@ -0,0 +1,115 @@
+# 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/pagination.llm.md

@@ -0,0 +1,190 @@
+# 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/popover-anchor.llm.md

@@ -0,0 +1,53 @@
+# 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>
+```

package/.llm/popover-content.llm.md

@@ -0,0 +1,109 @@
+# PopoverContent
+
+**Type**: component
+
+PopoverContent - The content container for the popover
+
+## JSX Usage
+
+```jsx
+import { PopoverContent } from '@neynar/ui';
+
+<PopoverContent
+  side={value}
+  align={value}
+  sideOffset={0}
+  alignOffset={0}
+  avoidCollisions={true}
+  collisionBoundary={[]}
+  collisionPadding={value}
+  sticky={value}
+  hideWhenDetached={true}
+  className="value"
+  style={value}
+>
+  {/* Your content here */}
+</PopoverContent>
+```
+
+## Component Props
+
+### side
+- **Type**: `"top" | "right" | "bottom" | "left"`
+- **Required**: No
+- **Description**: The preferred side of the trigger to render against ("top" | "right" | "bottom" | "left")
+
+### align
+- **Type**: `"start" | "center" | "end"`
+- **Required**: No
+- **Description**: How to align the popover relative to the trigger ("start" | "center" | "end")
+
+### sideOffset
+- **Type**: `number`
+- **Required**: No
+- **Description**: Distance in pixels from the trigger (default: 4)
+
+### alignOffset
+- **Type**: `number`
+- **Required**: No
+- **Description**: Offset in pixels along the align axis
+
+### avoidCollisions
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Whether to automatically avoid collisions with viewport edges (default: true)
+
+### collisionBoundary
+- **Type**: `Element | Element[] | null`
+- **Required**: No
+- **Description**: Boundary element(s) to consider for collision detection
+
+### collisionPadding
+- **Type**: `| number
+    | Partial<Record<"top" | "right" | "bottom" | "left", number>>`
+- **Required**: No
+- **Description**: No description available
+
+### sticky
+- **Type**: `"partial" | "always"`
+- **Required**: No
+- **Description**: Whether to stick to the boundary edges when colliding ("partial" | "always")
+
+### hideWhenDetached
+- **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
+
+### style
+- **Type**: `React.CSSProperties`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+```tsx
+// Basic content with default positioning
+<PopoverContent>
+  <div className="grid gap-4">
+    <h4 className="font-medium">Title</h4>
+    <p className="text-sm text-muted-foreground">Description</p>
+  </div>
+</PopoverContent>
+// Positioned content with custom width
+<PopoverContent side="top" align="start" className="w-80">
+  <form className="grid gap-4">
+    <Input placeholder="Enter value" />
+    <Button type="submit">Save</Button>
+  </form>
+</PopoverContent>
+```

package/.llm/popover-trigger.llm.md

@@ -0,0 +1,54 @@
+# PopoverTrigger
+
+**Type**: component
+
+PopoverTrigger - The element that triggers the popover
+
+## JSX Usage
+
+```jsx
+import { PopoverTrigger } from '@neynar/ui';
+
+<PopoverTrigger
+  asChild={true}
+  className="value"
+  disabled={true}
+>
+  {/* Your content here */}
+</PopoverTrigger>
+```
+
+## Component Props
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Changes the default rendered element to the one passed as a child,
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### disabled
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+```tsx
+// Using asChild with custom button
+<PopoverTrigger asChild>
+  <Button variant="outline">Open Settings</Button>
+</PopoverTrigger>
+// Direct usage (renders as button)
+<PopoverTrigger className="custom-trigger">
+  Click me
+</PopoverTrigger>
+```