@neynar/ui 0.3.0 → 0.4.0

package/.llm/card.llm.md

@@ -0,0 +1,100 @@
+# 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/carousel-content.llm.md

@@ -0,0 +1,77 @@
+# 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/carousel-item.llm.md

@@ -0,0 +1,96 @@
+# 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/carousel-next.llm.md

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

package/.llm/carousel-previous.llm.md

@@ -0,0 +1,95 @@
+# CarouselPrevious
+
+**Type**: component
+
+Navigation button to go to the previous carousel slide Renders a previous navigation button that automatically handles disabled states when at the beginning 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 { CarouselPrevious } from '@neynar/ui';
+
+<CarouselPrevious
+  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
+<CarouselPrevious
+  className="-left-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
+<CarouselPrevious
+  variant="secondary"
+  className="w-auto px-4"
+  aria-label="Go to previous product"
+>
+  <ArrowLeft className="w-4 h-4 mr-2" />
+  Previous
+</CarouselPrevious>
+```

package/.llm/carousel.llm.md

@@ -0,0 +1,211 @@
+# Carousel
+
+**Type**: component
+
+A responsive carousel/slider component for content presentation The Carousel component provides a touch-friendly, keyboard-accessible way to browse through multiple items. Built on Embla Carousel, it supports various configurations including autoplay, loop, drag scrolling, infinite scroll, momentum scrolling, and both horizontal and vertical orientations. Features include responsive breakpoints, plugin system, smooth animations, focus management, RTL support, and extensive customization options.
+
+## JSX Usage
+
+```jsx
+import { Carousel } from '@neynar/ui';
+
+<Carousel
+  opts={value}
+  plugins={value}
+  orientation={value}
+  setApi={() => {}}
+  className="value"
+>
+  {/* Your content here */}
+</Carousel>
+```
+
+## Component Props
+
+### opts
+- **Type**: `CarouselOptions`
+- **Required**: No
+- **Description**: No description available
+
+### plugins
+- **Type**: `CarouselPlugin`
+- **Required**: No
+- **Description**: No description available
+
+### orientation
+- **Type**: `"horizontal" | "vertical"`
+- **Required**: No
+- **Description**: No description available
+
+### setApi
+- **Type**: `(api: CarouselApi) => void`
+- **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
+
+### Example 1
+```tsx
+// Basic image carousel
+<Carousel className="w-full max-w-xs">
+  <CarouselContent>
+    {images.map((src, index) => (
+      <CarouselItem key={index}>
+        <img src={src} alt={`Slide ${index + 1}`} className="w-full" />
+      </CarouselItem>
+    ))}
+  </CarouselContent>
+  <CarouselPrevious />
+  <CarouselNext />
+</Carousel>
+```
+### Example 2
+```tsx
+// Multi-item responsive carousel with custom spacing
+<Carousel
+  opts={{
+    align: "start",
+    loop: true,
+    slidesToScroll: "auto",
+    breakpoints: {
+      "(min-width: 768px)": { slidesToScroll: 2 }
+    }
+  }}
+  className="w-full"
+>
+  <CarouselContent className="-ml-2 md:-ml-4">
+    {products.map((product, index) => (
+      <CarouselItem key={index} className="pl-2 md:pl-4 md:basis-1/2 lg:basis-1/3">
+        <Card>
+          <CardContent className="p-4">
+            <h3>{product.name}</h3>
+            <p>{product.price}</p>
+          </CardContent>
+        </Card>
+      </CarouselItem>
+    ))}
+  </CarouselContent>
+  <CarouselPrevious />
+  <CarouselNext />
+</Carousel>
+```
+### Example 3
+```tsx
+// Vertical carousel with autoplay plugin
+import Autoplay from "embla-carousel-autoplay";
+<Carousel
+  orientation="vertical"
+  opts={{ loop: true, align: "center" }}
+  plugins={[Autoplay({ delay: 3000, stopOnInteraction: true, stopOnMouseEnter: true })]}
+  className="h-[400px]"
+>
+  <CarouselContent className="h-full">
+    {testimonials.map((testimonial, index) => (
+      <CarouselItem key={index} className="basis-1/2">
+        <div className="p-6">
+          <blockquote>{testimonial.quote}</blockquote>
+          <cite>{testimonial.author}</cite>
+        </div>
+      </CarouselItem>
+    ))}
+  </CarouselContent>
+</Carousel>
+```
+### Example 4
+```tsx
+// Controlled carousel with custom indicators and API access
+import { useState, useEffect } from "react";
+function ControlledCarousel() {
+  const [api, setApi] = useState<CarouselApi>();
+  const [current, setCurrent] = useState(0);
+  const [count, setCount] = useState(0);
+  useEffect(() => {
+    if (!api) return;
+    setCount(api.scrollSnapList().length);
+    setCurrent(api.selectedScrollSnap() + 1);
+    api.on('select', () => {
+      setCurrent(api.selectedScrollSnap() + 1);
+    });
+  }, [api]);
+  return (
+    <div className="space-y-4">
+      <Carousel setApi={setApi} opts={{ loop: true }}>
+        <CarouselContent>
+          {slides.map((slide, index) => (
+            <CarouselItem key={index}>{slide.content}</CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+      // Custom indicators
+      <div className="flex justify-center gap-2">
+        {Array.from({ length: count }).map((_, i) => (
+          <button
+            key={i}
+            className={cn(
+              "w-2 h-2 rounded-full transition-colors",
+              current === i + 1 ? "bg-primary" : "bg-muted"
+            )}
+            onClick={() => api?.scrollTo(i)}
+          />
+        ))}
+      </div>
+      <div className="text-center text-sm text-muted-foreground">
+        Slide {current} of {count}
+      </div>
+    </div>
+  );
+}
+```
+### Example 5
+```tsx
+// Momentum scrolling carousel with drag-free mode
+<Carousel
+  opts={{
+    dragFree: true,
+    containScroll: false,
+    skipSnaps: true
+  }}
+  className="w-full"
+>
+  <CarouselContent>
+    {items.map((item, index) => (
+      <CarouselItem key={index} className="basis-auto">
+        <div className="w-32 h-32 bg-muted rounded-lg" />
+      </CarouselItem>
+    ))}
+  </CarouselContent>
+</Carousel>
+```
+### Example 6
+```tsx
+// Breakpoint-responsive carousel that disables on larger screens
+<Carousel
+  opts={{
+    active: true,
+    breakpoints: {
+      "(min-width: 768px)": { active: false }
+    }
+  }}
+  className="md:hidden"
+>
+  <CarouselContent>
+    {mobileItems.map((item, index) => (
+      <CarouselItem key={index}>{item}</CarouselItem>
+    ))}
+  </CarouselContent>
+  <CarouselPrevious />
+  <CarouselNext />
+</Carousel>
+```