@neynar/ui 0.3.0 → 0.3.1

package/.llm/navigation-menu.llm.md

@@ -0,0 +1,184 @@
+# NavigationMenu
+
+**Type**: component
+
+NavigationMenu - A collection of links for navigating websites A flexible navigation component built on Radix UI primitives that provides sophisticated navigation patterns with dropdown content support. Features full keyboard navigation, accessibility compliance, controlled/uncontrolled states, and responsive design. Supports both horizontal and vertical orientations.
+
+## JSX Usage
+
+```jsx
+import { NavigationMenu } from '@neynar/ui';
+
+<NavigationMenu
+  defaultValue="value"
+  value="value"
+  onValueChange={handleValueChange}
+  delayDuration={0}
+  skipDelayDuration={0}
+  dir={value}
+  orientation={value}
+  viewport={true}
+>
+  {/* Your content here */}
+</NavigationMenu>
+```
+
+## Component Props
+
+### defaultValue
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### value
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### onValueChange
+- **Type**: `(value: string) => void`
+- **Required**: No
+- **Description**: No description available
+
+### delayDuration
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### skipDelayDuration
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### dir
+- **Type**: `"ltr" | "rtl"`
+- **Required**: No
+- **Description**: No description available
+
+### orientation
+- **Type**: `"horizontal" | "vertical"`
+- **Required**: No
+- **Description**: No description available
+
+### viewport
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic navigation with dropdown
+<NavigationMenu>
+  <NavigationMenuList>
+    <NavigationMenuItem value="products">
+      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+      <NavigationMenuContent>
+        <div className="grid gap-3 p-6 w-[400px]">
+          <NavigationMenuLink href="/products/analytics">Analytics</NavigationMenuLink>
+          <NavigationMenuLink href="/products/dashboard">Dashboard</NavigationMenuLink>
+        </div>
+      </NavigationMenuContent>
+    </NavigationMenuItem>
+  </NavigationMenuList>
+</NavigationMenu>
+```
+### Example 2
+```tsx
+// Controlled navigation with state
+const [value, setValue] = React.useState<string | undefined>();
+<NavigationMenu value={value} onValueChange={setValue}>
+  <NavigationMenuList>
+    <NavigationMenuItem value="features">
+      <NavigationMenuTrigger>Features</NavigationMenuTrigger>
+      <NavigationMenuContent>
+        <NavigationMenuLink href="/features">All Features</NavigationMenuLink>
+      </NavigationMenuContent>
+    </NavigationMenuItem>
+  </NavigationMenuList>
+</NavigationMenu>
+```
+### Example 3
+```tsx
+// Simple navigation links without dropdowns
+<NavigationMenu>
+  <NavigationMenuList>
+    <NavigationMenuItem>
+      <NavigationMenuLink href="/about" className={navigationMenuTriggerStyle()}>
+        About
+      </NavigationMenuLink>
+    </NavigationMenuItem>
+    <NavigationMenuItem>
+      <NavigationMenuLink href="/contact" className={navigationMenuTriggerStyle()}>
+        Contact
+      </NavigationMenuLink>
+    </NavigationMenuItem>
+  </NavigationMenuList>
+</NavigationMenu>
+```
+### Example 4
+```tsx
+// With Next.js Link integration using asChild
+<NavigationMenu>
+  <NavigationMenuList>
+    <NavigationMenuItem>
+      <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
+        <Link href="/dashboard">Dashboard</Link>
+      </NavigationMenuLink>
+    </NavigationMenuItem>
+  </NavigationMenuList>
+</NavigationMenu>
+```
+### Example 5
+```tsx
+// Vertical navigation menu
+<NavigationMenu orientation="vertical">
+  <NavigationMenuList>
+    <NavigationMenuItem value="settings">
+      <NavigationMenuTrigger>Settings</NavigationMenuTrigger>
+      <NavigationMenuContent>
+        <div className="p-4 w-[200px]">
+          <NavigationMenuLink href="/settings/profile">Profile</NavigationMenuLink>
+          <NavigationMenuLink href="/settings/account">Account</NavigationMenuLink>
+        </div>
+      </NavigationMenuContent>
+    </NavigationMenuItem>
+  </NavigationMenuList>
+</NavigationMenu>
+```
+### Example 6
+```tsx
+// Without viewport for custom dropdown styling
+<NavigationMenu viewport={false}>
+  <NavigationMenuList>
+    <NavigationMenuItem value="docs">
+      <NavigationMenuTrigger>Documentation</NavigationMenuTrigger>
+      <NavigationMenuContent>
+        <div className="bg-white border rounded-lg shadow-lg p-6 w-[500px]">
+          <NavigationMenuLink href="/docs/getting-started">Getting Started</NavigationMenuLink>
+        </div>
+      </NavigationMenuContent>
+    </NavigationMenuItem>
+  </NavigationMenuList>
+</NavigationMenu>
+```
+### Example 7
+```tsx
+// With custom timing and active indicator
+<NavigationMenu
+  delayDuration={100}
+  skipDelayDuration={200}
+  defaultValue="home"
+>
+  <NavigationMenuList>
+    <NavigationMenuItem value="home">
+      <NavigationMenuTrigger>Home</NavigationMenuTrigger>
+      <NavigationMenuContent>
+        <NavigationMenuLink href="/">Homepage</NavigationMenuLink>
+      </NavigationMenuContent>
+    </NavigationMenuItem>
+    <NavigationMenuIndicator />
+  </NavigationMenuList>
+</NavigationMenu>
+```

package/.llm/p.llm.md

@@ -0,0 +1,110 @@
+# P
+
+**Type**: component
+
+P - Paragraph component for body text content Standard paragraph element for readable body text. Uses "body" variant with p semantic element. Optimized for readability with appropriate line height and font size.
+
+## JSX Usage
+
+```jsx
+import { P } from '@neynar/ui';
+
+<P
+  color={value}
+  align={value}
+  transform={value}
+  weight={value}
+  htmlFor="value"
+  asChild={true}
+  italic={true}
+  underline={true}
+  strikethrough={true}
+  truncate={true}
+  srOnly={true}
+  className="value"
+>
+  {/* Your content here */}
+</P>
+```
+
+## Component Props
+
+### color
+- **Type**: `TypographyColor`
+- **Required**: No
+- **Description**: No description available
+
+### align
+- **Type**: `"left" | "center" | "right" | "justify"`
+- **Required**: No
+- **Description**: No description available
+
+### transform
+- **Type**: `"uppercase" | "lowercase" | "capitalize"`
+- **Required**: No
+- **Description**: No description available
+
+### weight
+- **Type**: `"normal" | "medium" | "semibold" | "bold"`
+- **Required**: No
+- **Description**: No description available
+
+### htmlFor
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### italic
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### underline
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### strikethrough
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### truncate
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### srOnly
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+```tsx
+// Standard paragraph
+<P>This is standard body text that provides information to the user.</P>
+// With color variants
+<P color="muted">Secondary information with reduced visual prominence.</P>
+// With custom spacing
+<P className="mb-6">Paragraph with custom bottom margin for layout control.</P>
+// Truncated paragraph
+<P truncate className="max-w-md">
+  Long paragraph content that will be truncated with ellipsis
+</P>
+```

package/.llm/pagination-content.llm.md

@@ -0,0 +1,60 @@
+# PaginationContent
+
+**Type**: component
+
+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.
+
+## JSX Usage
+
+```jsx
+import { PaginationContent } from '@neynar/ui';
+
+<PaginationContent
+  className="value"
+  id="value"
+  tabIndex={0}
+  "aria-label"="value"
+>
+  {/* Your content here */}
+</PaginationContent>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+### id
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### tabIndex
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-label"
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+```tsx
+<PaginationContent>
+  <PaginationItem>
+    <PaginationPrevious href="/prev" />
+  </PaginationItem>
+  <PaginationItem>
+    <PaginationLink href="/page/1">1</PaginationLink>
+  </PaginationItem>
+</PaginationContent>
+```

package/.llm/pagination-ellipsis.llm.md

@@ -0,0 +1,107 @@
+# PaginationEllipsis
+
+**Type**: component
+
+Visual indicator for omitted page numbers Displays a horizontal ellipsis (MoreHorizontalIcon from Lucide React) to indicate that page numbers have been omitted from the pagination display. Used to maintain clean UI when dealing with large page ranges without overwhelming users. The component is sized consistently with PaginationLink components (36px × 36px) to maintain visual harmony in the pagination layout. Includes accessible hidden text for screen readers while keeping the visual element hidden from assistive technology to avoid confusion.
+
+## JSX Usage
+
+```jsx
+import { PaginationEllipsis } from '@neynar/ui';
+
+<PaginationEllipsis
+  className="value"
+  "aria-hidden"={true}
+  id="value"
+  tabIndex={0}
+  title="value"
+  "aria-label"="value"
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-hidden"
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### id
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### tabIndex
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### title
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-label"
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```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 2
+```tsx
+// Common pagination pattern with ellipsis
+// Layout: 1 ... 23 24 [25] 26 27 ... 100
+<PaginationContent>
+  <PaginationItem>
+    <PaginationLink href="/page/1">1</PaginationLink>
+  </PaginationItem>
+  <PaginationItem>
+    <PaginationEllipsis />
+  </PaginationItem>
+  <PaginationItem>
+    <PaginationLink href="/page/23">23</PaginationLink>
+  </PaginationItem>
+  <PaginationItem>
+    <PaginationLink href="/page/24">24</PaginationLink>
+  </PaginationItem>
+  <PaginationItem>
+    <PaginationLink href="/page/25" isActive>25</PaginationLink>
+  </PaginationItem>
+  <PaginationItem>
+    <PaginationLink href="/page/26">26</PaginationLink>
+  </PaginationItem>
+  <PaginationItem>
+    <PaginationLink href="/page/27">27</PaginationLink>
+  </PaginationItem>
+  <PaginationItem>
+    <PaginationEllipsis />
+  </PaginationItem>
+  <PaginationItem>
+    <PaginationLink href="/page/100">100</PaginationLink>
+  </PaginationItem>
+</PaginationContent>
+```
+### Example 3
+```tsx
+// With custom styling for different themes
+<PaginationEllipsis className="text-muted-foreground/60" />
+```

package/.llm/pagination-item.llm.md

@@ -0,0 +1,59 @@
+# PaginationItem
+
+**Type**: component
+
+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.
+
+## JSX Usage
+
+```jsx
+import { PaginationItem } from '@neynar/ui';
+
+<PaginationItem
+  className="value"
+  id="value"
+  tabIndex={0}
+  "aria-label"="value"
+>
+  {/* Your content here */}
+</PaginationItem>
+```
+
+## Component Props
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+### className
+- **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
+
+### "aria-label"
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+```tsx
+<PaginationItem>
+  <PaginationLink href="/page/1">1</PaginationLink>
+</PaginationItem>
+<PaginationItem>
+  <PaginationEllipsis />
+</PaginationItem>
+```
+/

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

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