@neynar/ui 0.2.0 → 0.3.0

package/llm-docs/card-action.llm.md

@@ -1,64 +0,0 @@
-# CardAction
-
-**Type**: component
-
-CardAction - Container for card header actions Positioned to the right of the card header using CSS Grid positioning. Typically contains icon buttons, badges, or dropdown menus for card-specific actions. Automatically positioned when used within CardHeader. Grid positioning: - `col-start-2`: Places in second column - `row-span-2`: Spans both title and description rows - `row-start-1`: Starts from first row - `self-start justify-self-end`: Aligns to top-right
-
-## JSX Usage
-
-```jsx
-import { CardAction } from '@neynar/ui';
-
-<CardAction
-  className="value"
->
-  {/* Your content here */}
-</CardAction>
-```
-
-## Component Props
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-<CardAction>
-  <Button variant="ghost" size="icon">
-    <MoreHorizontal className="size-4" />
-  </Button>
-</CardAction>
-```
-### Example 2
-```tsx
-// With badge
-<CardAction>
-  <Badge variant="secondary">New</Badge>
-</CardAction>
-```
-### Example 3
-```tsx
-// With dropdown menu
-<CardAction>
-  <DropdownMenu>
-    <DropdownMenuTrigger asChild>
-      <Button variant="ghost" size="icon">
-        <MoreHorizontal className="size-4" />
-      </Button>
-    </DropdownMenuTrigger>
-    <DropdownMenuContent>
-      <DropdownMenuItem>Edit</DropdownMenuItem>
-      <DropdownMenuItem>Delete</DropdownMenuItem>
-    </DropdownMenuContent>
-  </DropdownMenu>
-</CardAction>
-```

package/llm-docs/card-content.llm.md

@@ -1,48 +0,0 @@
-# CardContent
-
-**Type**: component
-
-CardContent - Main content area of a card Contains the primary content for the card. Automatically applies horizontal padding to maintain consistent spacing with other card sections. Can contain any type of content including text, images, forms, or other components.
-
-## JSX Usage
-
-```jsx
-import { CardContent } from '@neynar/ui';
-
-<CardContent
-  className="value"
->
-  {/* Your content here */}
-</CardContent>
-```
-
-## Component Props
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-<CardContent>
-  <p>Your main content goes here.</p>
-</CardContent>
-```
-### Example 2
-```tsx
-// With custom spacing
-<CardContent className="py-4">
-  <div className="space-y-4">
-    <p>Multiple content elements</p>
-    <Button>Action button</Button>
-  </div>
-</CardContent>
-```

package/llm-docs/card-description.llm.md

@@ -1,46 +0,0 @@
-# CardDescription
-
-**Type**: component
-
-CardDescription - Supplementary description text for a card Provides additional context or details about the card content. Styled with muted foreground color and smaller text size to create visual hierarchy below the CardTitle.
-
-## JSX Usage
-
-```jsx
-import { CardDescription } from '@neynar/ui';
-
-<CardDescription
-  className="value"
->
-  {/* Your content here */}
-</CardDescription>
-```
-
-## Component Props
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-<CardDescription>
-  View and manage your dashboard settings
-</CardDescription>
-```
-### Example 2
-```tsx
-// Multi-line description
-<CardDescription>
-  This card contains important information about your account.
-  Review the details and take action if needed.
-</CardDescription>
-```

package/llm-docs/card-footer.llm.md

@@ -1,56 +0,0 @@
-# CardFooter
-
-**Type**: component
-
-CardFooter - Footer area of a card, typically for actions Positioned at the bottom of the card and commonly used for action buttons, supplementary information, or navigation elements. Uses flexbox layout with automatic alignment of items. Can be styled with border-top when visual separation from content is needed.
-
-## JSX Usage
-
-```jsx
-import { CardFooter } from '@neynar/ui';
-
-<CardFooter
-  className="value"
->
-  {/* Your content here */}
-</CardFooter>
-```
-
-## Component Props
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic footer with actions
-<CardFooter>
-  <Button variant="outline">Cancel</Button>
-  <Button>Save</Button>
-</CardFooter>
-```
-### Example 2
-```tsx
-// Footer with gap for better spacing
-<CardFooter className="gap-2">
-  <Button variant="outline" className="flex-1">Cancel</Button>
-  <Button className="flex-1">Confirm</Button>
-</CardFooter>
-```
-### Example 3
-```tsx
-// Footer with supplementary info
-<CardFooter className="justify-between">
-  <span className="text-sm text-muted-foreground">Last updated 2 days ago</span>
-  <Button size="sm">Edit</Button>
-</CardFooter>
-```

package/llm-docs/card-header.llm.md

@@ -1,53 +0,0 @@
-# CardHeader
-
-**Type**: component
-
-CardHeader - Container for card header content Groups the card title, description, and optional action button. Automatically handles grid layout when CardAction is present, positioning the action to the right while allowing title and description to span the remaining space. Uses CSS Grid with container queries for responsive behavior: - Default: Single column layout for title and description - With CardAction: Two-column grid with action positioned top-right - Auto-adjusts spacing with gap utilities
-
-## JSX Usage
-
-```jsx
-import { CardHeader } from '@neynar/ui';
-
-<CardHeader
-  className="value"
->
-  {/* Your content here */}
-</CardHeader>
-```
-
-## Component Props
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic header with title and description
-<CardHeader>
-  <CardTitle>Dashboard Overview</CardTitle>
-  <CardDescription>View your analytics and metrics</CardDescription>
-</CardHeader>
-```
-### Example 2
-```tsx
-// Header with action button
-<CardHeader>
-  <CardTitle>Settings</CardTitle>
-  <CardDescription>Manage your preferences</CardDescription>
-  <CardAction>
-    <Button variant="ghost" size="icon">
-      <MoreHorizontal className="size-4" />
-    </Button>
-  </CardAction>
-</CardHeader>
-```

package/llm-docs/card-title.llm.md

@@ -1,43 +0,0 @@
-# CardTitle
-
-**Type**: component
-
-CardTitle - The main title of a card Renders the primary heading for a card. Should be used within CardHeader to maintain proper semantic structure and visual hierarchy. Uses semibold font weight and leading-none for compact appearance.
-
-## JSX Usage
-
-```jsx
-import { CardTitle } from '@neynar/ui';
-
-<CardTitle
-  className="value"
->
-  {/* Your content here */}
-</CardTitle>
-```
-
-## Component Props
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-<CardTitle>Dashboard Overview</CardTitle>
-```
-### Example 2
-```tsx
-// With custom styling
-<CardTitle className="text-lg text-primary">
-  Featured Product
-</CardTitle>
-```

package/llm-docs/card.llm.md

@@ -1,100 +0,0 @@
-# Card
-
-**Type**: component
-
-Card - A flexible container component for grouping related content Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information. Cards support composition through multiple sub-components and can be customized with various layouts and styling patterns. Based on the shadcn/ui Card component, this implementation provides: - Flexible composition through sub-components - Semantic HTML structure for accessibility - Consistent spacing and visual hierarchy - Support for interactive elements and actions
-
-## JSX Usage
-
-```jsx
-import { Card } from '@neynar/ui';
-
-<Card
-  className="value"
->
-  {/* Your content here */}
-</Card>
-```
-
-## Component Props
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic card with header and content
-<Card>
-  <CardHeader>
-    <CardTitle>Card Title</CardTitle>
-    <CardDescription>Card description goes here</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p>Card content goes here</p>
-  </CardContent>
-</Card>
-```
-### Example 2
-```tsx
-// Card with action button in header
-<Card>
-  <CardHeader>
-    <CardTitle>Settings</CardTitle>
-    <CardAction>
-      <Button variant="ghost" size="icon">
-        <Settings />
-      </Button>
-    </CardAction>
-  </CardHeader>
-  <CardContent>
-    <p>Manage your settings</p>
-  </CardContent>
-  <CardFooter>
-    <Button>Save Changes</Button>
-  </CardFooter>
-</Card>
-```
-### Example 3
-```tsx
-// Minimal card with only content
-<Card>
-  <CardContent>
-    <p>Simple card content without header or footer</p>
-  </CardContent>
-</Card>
-```
-### Example 4
-```tsx
-// Product card with custom styling
-<Card className="w-80 hover:shadow-lg transition-shadow">
-  <CardHeader>
-    <div className="aspect-video bg-muted rounded-lg mb-4" />
-    <CardTitle>Product Name</CardTitle>
-    <CardDescription>Product description</CardDescription>
-    <CardAction>
-      <Badge variant="secondary">New</Badge>
-    </CardAction>
-  </CardHeader>
-  <CardContent>
-    <div className="flex items-center justify-between">
-      <span className="text-2xl font-bold">$299</span>
-      <span className="text-sm text-muted-foreground line-through">$399</span>
-    </div>
-  </CardContent>
-  <CardFooter className="gap-2">
-    <Button className="flex-1">Add to Cart</Button>
-    <Button size="icon" variant="outline">
-      <Heart className="size-4" />
-    </Button>
-  </CardFooter>
-</Card>
-```

package/llm-docs/carousel-content.llm.md

@@ -1,77 +0,0 @@
-# CarouselContent
-
-**Type**: component
-
-Container component for carousel items that handles the scrolling viewport Wraps all carousel items and manages the scrollable area. This component must be a direct child of Carousel and handles orientation-specific layouts, overflow behavior, and slide spacing. The outer div provides overflow clipping while the inner div contains the flex layout for slides.
-
-## JSX Usage
-
-```jsx
-import { CarouselContent } from '@neynar/ui';
-
-<CarouselContent
-  className="value"
->
-  {/* Your content here */}
-</CarouselContent>
-```
-
-## Component Props
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic usage
-<CarouselContent>
-  <CarouselItem>Slide 1</CarouselItem>
-  <CarouselItem>Slide 2</CarouselItem>
-  <CarouselItem>Slide 3</CarouselItem>
-</CarouselContent>
-```
-### Example 2
-```tsx
-// Multi-item carousel with responsive spacing
-<CarouselContent className="-ml-2 md:-ml-4">
-  <CarouselItem className="pl-2 md:pl-4 md:basis-1/2 lg:basis-1/3">
-    <Card>Product 1</Card>
-  </CarouselItem>
-  <CarouselItem className="pl-2 md:pl-4 md:basis-1/2 lg:basis-1/3">
-    <Card>Product 2</Card>
-  </CarouselItem>
-</CarouselContent>
-```
-### Example 3
-```tsx
-// Vertical orientation with custom height
-<CarouselContent className="-mt-4 h-[300px]">
-  <CarouselItem className="pt-4 basis-1/2">
-    <div className="h-full bg-muted rounded-lg">Slide 1</div>
-  </CarouselItem>
-  <CarouselItem className="pt-4 basis-1/2">
-    <div className="h-full bg-muted rounded-lg">Slide 2</div>
-  </CarouselItem>
-</CarouselContent>
-```
-### Example 4
-```tsx
-// Custom slide spacing with CSS variables
-<CarouselContent
-  className="-ml-4"
-  style={{ '--slide-spacing': '1rem' } as React.CSSProperties}
->
-  <CarouselItem className="pl-4">
-    Content with custom spacing
-  </CarouselItem>
-</CarouselContent>
-```

package/llm-docs/carousel-item.llm.md

@@ -1,96 +0,0 @@
-# CarouselItem
-
-**Type**: component
-
-Individual slide/item component within the carousel Represents a single slide in the carousel that can contain any content. Automatically handles sizing, spacing, and orientation-specific layouts based on the parent carousel configuration. Each slide is a flex item with configurable basis for responsive layouts.
-
-## JSX Usage
-
-```jsx
-import { CarouselItem } from '@neynar/ui';
-
-<CarouselItem
-  className="value"
->
-  {/* Your content here */}
-</CarouselItem>
-```
-
-## Component Props
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic slide with content
-<CarouselItem>
-  <div className="p-6 bg-muted rounded-lg">
-    <h3 className="text-lg font-semibold">Slide Title</h3>
-    <p className="text-muted-foreground">Slide description</p>
-  </div>
-</CarouselItem>
-```
-### Example 2
-```tsx
-// Card-based slide with structured content
-<CarouselItem>
-  <Card className="h-full">
-    <CardHeader>
-      <CardTitle>Product Name</CardTitle>
-      <CardDescription>Product category</CardDescription>
-    </CardHeader>
-    <CardContent>
-      <img src="product.jpg" alt="Product" className="w-full aspect-square object-cover" />
-      <p className="mt-2 text-2xl font-bold">$99.99</p>
-    </CardContent>
-    <CardFooter>
-      <Button className="w-full">Add to Cart</Button>
-    </CardFooter>
-  </Card>
-</CarouselItem>
-```
-### Example 3
-```tsx
-// Responsive multi-item carousel
-<CarouselItem className="pl-4 basis-full sm:basis-1/2 lg:basis-1/3">
-  <div className="aspect-square bg-gradient-to-br from-blue-400 to-purple-600 rounded-lg p-6 text-white">
-    <h4 className="font-semibold">Feature {index + 1}</h4>
-    <p className="text-sm opacity-90">Description text</p>
-  </div>
-</CarouselItem>
-```
-### Example 4
-```tsx
-// Auto-sized slides for variable content
-<CarouselItem className="basis-auto">
-  <Badge variant="secondary" className="text-nowrap px-4 py-2">
-    {tag.label}
-  </Badge>
-</CarouselItem>
-```
-### Example 5
-```tsx
-// Image gallery slide with aspect ratio
-<CarouselItem className="basis-4/5">
-  <div className="relative aspect-video bg-muted rounded-lg overflow-hidden">
-    <img
-      src={image.src}
-      alt={image.alt}
-      className="object-cover w-full h-full"
-    />
-    <div className="absolute inset-0 bg-black/20 flex items-end p-4">
-      <h5 className="text-white font-medium">{image.title}</h5>
-    </div>
-  </div>
-</CarouselItem>
-```

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

@@ -1,95 +0,0 @@
-# CarouselNext
-
-**Type**: component
-
-Navigation button to go to the next carousel slide Renders a next navigation button that automatically handles disabled states when at the end of the carousel (unless loop is enabled). Supports both horizontal and vertical orientations with appropriate positioning and icon rotation. Integrates with the carousel context to provide seamless navigation.
-
-## JSX Usage
-
-```jsx
-import { CarouselNext } from '@neynar/ui';
-
-<CarouselNext
-  className="value"
-  variant={value}
-  size={value}
-/>
-```
-
-## Component Props
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### variant
-- **Type**: `| "default"
-    | "destructive"
-    | "outline"
-    | "secondary"
-    | "ghost"
-    | "link"`
-- **Required**: No
-- **Description**: No description available
-
-### size
-- **Type**: `"default" | "sm" | "lg" | "icon"`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic usage with default styling
-<Carousel>
-  <CarouselContent>
-    <CarouselItem>Slide 1</CarouselItem>
-    <CarouselItem>Slide 2</CarouselItem>
-  </CarouselContent>
-  <CarouselPrevious />
-  <CarouselNext />
-</Carousel>
-```
-### Example 2
-```tsx
-// Custom positioned button
-<CarouselNext
-  className="-right-8 bg-background shadow-md hover:shadow-lg"
-  variant="ghost"
-  size="sm"
-/>
-```
-### Example 3
-```tsx
-// Vertical carousel with rotated icons
-<Carousel orientation="vertical" className="h-[400px]">
-  <CarouselContent>...</CarouselContent>
-  <CarouselPrevious className="-top-8" />
-  <CarouselNext className="-bottom-8" />
-</Carousel>
-```
-### Example 4
-```tsx
-// Inside carousel bounds positioning
-<div className="relative">
-  <Carousel>
-    <CarouselContent>...</CarouselContent>
-    <CarouselPrevious className="absolute left-4 top-1/2 -translate-y-1/2 z-10" />
-    <CarouselNext className="absolute right-4 top-1/2 -translate-y-1/2 z-10" />
-  </Carousel>
-</div>
-```
-### Example 5
-```tsx
-// Custom button content and accessibility
-<CarouselNext
-  variant="secondary"
-  className="w-auto px-4"
-  aria-label="Go to next product"
->
-  Next
-  <ArrowRight className="w-4 h-4 ml-2" />
-</CarouselNext>
-```