@neynar/ui 0.2.0 → 0.3.0

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

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

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

package/llm-docs/chart-config.llm.md

@@ -1,71 +0,0 @@
-# ChartConfig
-
-**Type**: type
-
-Configuration object for chart data series Defines labels, colors, and icons for chart data series with support for both static colors and theme-aware color definitions. Each series can have either a static color or theme-specific colors for light/dark modes. This configuration drives both visual styling and accessibility features throughout the chart ecosystem.
-
-## Type Definition
-
-```typescript
-import { ChartConfig } from '@neynar/ui';
-
-type ChartConfig = {
-  [k in string]: {
-    label?: React.ReactNode;
-    icon?: React.ComponentType;
-  } & (
-    | { color?: string; theme?: never }
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  );
-}
-```
-
-## Examples
-
-### Example 1
-```tsx
-// Static color configuration with icon
-const chartConfig = {
-  revenue: {
-    label: "Revenue",
-    color: "hsl(var(--chart-1))",
-    icon: DollarSignIcon,
-  },
-} satisfies ChartConfig
-```
-### Example 2
-```tsx
-// Theme-aware color configuration for dark/light modes
-const chartConfig = {
-  users: {
-    label: "Active Users",
-    theme: {
-      light: "#0ea5e9",
-      dark: "#0284c7",
-    },
-  },
-} satisfies ChartConfig
-```
-### Example 3
-```tsx
-// Complex configuration with multiple series
-const chartConfig = {
-  desktop: {
-    label: "Desktop Users",
-    color: "var(--chart-1)",
-    icon: MonitorIcon,
-  },
-  mobile: {
-    label: "Mobile Users",
-    color: "var(--chart-2)",
-    icon: SmartphoneIcon,
-  },
-  revenue: {
-    label: "Revenue ($)",
-    theme: {
-      light: "#059669",
-      dark: "#10b981",
-    },
-  },
-} satisfies ChartConfig
-```

package/llm-docs/chart-container.llm.md

@@ -1,148 +0,0 @@
-# ChartContainer
-
-**Type**: component
-
-Container component for Recharts charts with theming and configuration The ChartContainer provides a responsive wrapper for Recharts components with automatic theming, color management, and configuration. It generates CSS custom properties for chart colors, handles dark mode support, and applies consistent styling across all chart types. Built on the shadcn/ui design system with Recharts as the underlying charting library.
-
-## JSX Usage
-
-```jsx
-import { ChartContainer } from '@neynar/ui';
-
-<ChartContainer
-  config={value}
-  id="value"
-  className="value"
-  style={value}
-  "aria-label"="value"
-  "aria-describedby"="value"
->
-  {/* Your content here */}
-</ChartContainer>
-```
-
-## Component Props
-
-### config
-- **Type**: `ChartConfig`
-- **Required**: Yes
-- **Description**: No description available
-
-### children
-- **Type**: `React.ComponentProps<
-    typeof RechartsPrimitive.ResponsiveContainer
-  >["children"]`
-- **Required**: Yes
-- **Description**: No description available
-
-### id
-- **Type**: `string`
-- **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
-
-### "aria-label"
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### "aria-describedby"
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic line chart with accessibility and tooltips
-const chartData = [
-  { month: "Jan", revenue: 2000, profit: 400 },
-  { month: "Feb", revenue: 2400, profit: 600 },
-  { month: "Mar", revenue: 3200, profit: 900 },
-]
-const chartConfig = {
-  revenue: {
-    label: "Revenue",
-    color: "hsl(var(--chart-1))",
-  },
-  profit: {
-    label: "Profit",
-    color: "hsl(var(--chart-2))",
-  },
-} satisfies ChartConfig
-<ChartContainer config={chartConfig} className="min-h-[300px]">
-  <LineChart data={chartData} accessibilityLayer>
-    <CartesianGrid strokeDasharray="3 3" />
-    <XAxis dataKey="month" />
-    <YAxis />
-    <ChartTooltip content={<ChartTooltipContent />} />
-    <Line
-      type="monotone"
-      dataKey="revenue"
-      stroke="var(--color-revenue)"
-      strokeWidth={2}
-    />
-    <Line
-      type="monotone"
-      dataKey="profit"
-      stroke="var(--color-profit)"
-      strokeWidth={2}
-    />
-  </LineChart>
-</ChartContainer>
-```
-### Example 2
-```tsx
-// Bar chart with theme-aware colors and custom formatting
-<ChartContainer
-  config={{
-    sales: {
-      label: "Sales",
-      theme: {
-        light: "#0ea5e9",
-        dark: "#0284c7",
-      },
-    },
-  }}
-  className="h-[400px]"
->
-  <BarChart data={data} accessibilityLayer>
-    <XAxis dataKey="month" />
-    <YAxis tickFormatter={(value) => `$${value.toLocaleString()}`} />
-    <ChartTooltip content={<ChartTooltipContent />} />
-    <Bar dataKey="sales" fill="var(--color-sales)" radius={4} />
-  </BarChart>
-</ChartContainer>
-```
-### Example 3
-```tsx
-// Pie chart with legend and icons for device breakdown
-<ChartContainer config={{
-  desktop: {
-    label: "Desktop",
-    color: "var(--chart-1)",
-    icon: MonitorIcon,
-  },
-  mobile: {
-    label: "Mobile",
-    color: "var(--chart-2)",
-    icon: SmartphoneIcon,
-  },
-}}>
-  <PieChart>
-    <Pie data={data} dataKey="value" nameKey="device" />
-    <ChartTooltip content={<ChartTooltipContent />} />
-    <ChartLegend content={<ChartLegendContent />} />
-  </PieChart>
-</ChartContainer>
-```

package/llm-docs/chart-legend-content.llm.md

@@ -1,85 +0,0 @@
-# ChartLegendContent
-
-**Type**: component
-
-Custom legend content component for charts Provides a styled legend that displays chart series with colors and labels from the chart configuration. Supports icon display, custom positioning, and automatic theming integration.
-
-## JSX Usage
-
-```jsx
-import { ChartLegendContent } from '@neynar/ui';
-
-<ChartLegendContent
-  hideIcon={true}
-  nameKey="value"
-  payload={value}
-  verticalAlign={value}
-  className="value"
-/>
-```
-
-## Component Props
-
-### hideIcon
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### nameKey
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### payload
-- **Type**: `Array<{
-    value: string;
-    type?: string;
-    color?: string;
-    dataKey?: string;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    payload?: any;
-  }>`
-- **Required**: No
-- **Description**: No description available
-
-### verticalAlign
-- **Type**: `"top" | "middle" | "bottom"`
-- **Required**: No
-- **Description**: No description available
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Basic legend with default settings
-<ChartLegend content={<ChartLegendContent />} />
-```
-### Example 2
-```tsx
-// Legend positioned at top without icons
-<ChartLegend
-  content={
-    <ChartLegendContent
-      verticalAlign="top"
-      hideIcon={true}
-    />
-  }
-/>
-```
-### Example 3
-```tsx
-// Legend with custom name key
-<ChartLegend
-  content={
-    <ChartLegendContent
-      nameKey="category"
-      className="justify-start"
-    />
-  }
-/>
-```