@neynar/ui 0.2.0 → 0.3.0

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

@@ -1,51 +0,0 @@
-# NavigationMenuViewport
-
-**Type**: component
-
-NavigationMenuViewport - Positioned container for dropdown content The viewport container that manages positioning, sizing, and animation of NavigationMenuContent panels. It automatically calculates dimensions based on content size and provides smooth enter/exit animations. The viewport uses CSS custom properties for dynamic sizing and positioning. Only rendered when the viewport prop is true (default) on NavigationMenu.
-
-## JSX Usage
-
-```jsx
-import { NavigationMenuViewport } from '@neynar/ui';
-
-<NavigationMenuViewport
-  asChild={true}
-  forceMount={true}
-/>
-```
-
-## Component Props
-
-### asChild
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### forceMount
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Typically used automatically by NavigationMenu
-<NavigationMenu>
-  <NavigationMenuList>
-    // menu items
-  </NavigationMenuList>
-  // NavigationMenuViewport is rendered automatically
-</NavigationMenu>
-```
-### Example 2
-```tsx
-// Custom viewport styling
-<NavigationMenuViewport className="border-2 border-primary shadow-xl" />
-```
-### Example 3
-```tsx
-// Force mounted viewport for animation control
-<NavigationMenuViewport forceMount className="custom-animation" />
-```

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

@@ -1,184 +0,0 @@
-# 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-docs/p.llm.md

@@ -1,115 +0,0 @@
-# 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**: `| "default"
-    | "muted"
-    | "accent"
-    | "destructive"
-    | "success"
-    | "warning"`
-- **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-docs/pagination-content.llm.md

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

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

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