@neynar/ui 0.1.1

package/docs/llm/components/forms.md

@@ -0,0 +1,90 @@
+# Form Components
+
+Essential form components for building interactive user interfaces with proper TypeScript support.
+
+## Basic Input Components
+
+```tsx
+import { Input, Label, Textarea, TextField } from "@neynar/ui"
+
+// Basic input with label
+<div className="space-y-2">
+  <Label htmlFor="email">Email</Label>
+  <Input id="email" type="email" placeholder="Enter your email" />
+</div>
+
+// Textarea for longer content
+<Textarea placeholder="Enter your message" rows={4} />
+
+// Combined text field (input + label)
+<TextField label="Username" placeholder="Enter username" required />
+```
+
+## Selection Components
+
+```tsx
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@neynar/ui"
+import { Checkbox, Switch, RadioGroup, RadioGroupItem } from "@neynar/ui"
+
+// Select dropdown
+<Select>
+  <SelectTrigger>
+    <SelectValue placeholder="Select option" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="option1">Option 1</SelectItem>
+    <SelectItem value="option2">Option 2</SelectItem>
+  </SelectContent>
+</Select>
+
+// Checkbox with label
+<div className="flex items-center space-x-2">
+  <Checkbox id="terms" />
+  <Label htmlFor="terms">Accept terms</Label>
+</div>
+
+// Switch toggle
+<Switch defaultChecked />
+
+// Radio group
+<RadioGroup defaultValue="option1">
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem value="option1" id="r1" />
+    <Label htmlFor="r1">Option 1</Label>
+  </div>
+</RadioGroup>
+```
+
+## Advanced Components
+
+```tsx
+import { Slider, Calendar, DatePicker, Combobox } from "@neynar/ui"
+
+// Range slider
+<Slider defaultValue={[50]} max={100} step={1} />
+
+// Date picker
+<DatePicker placeholder="Pick a date" />
+
+// Combobox with search
+<Combobox
+  options={[
+    { value: "react", label: "React" },
+    { value: "vue", label: "Vue" }
+  ]}
+  placeholder="Select framework"
+/>
+```
+
+## TypeScript Types
+
+```tsx
+type FormData = {
+  email: string
+  message: string
+  category: string
+  notifications: boolean
+  priority: "low" | "medium" | "high"
+  deadline: Date
+}
+```

package/docs/llm/components/layout.md

@@ -0,0 +1,59 @@
+# Layout Components
+
+## Container
+Responsive container with max-width constraints and padding.
+
+```tsx
+import { Container } from "@neynar/ui";
+
+<Container size="sm">Content</Container>
+<Container size="md" className="py-8">Main content area</Container>
+<Container size="lg">Wide layout</Container>
+```
+
+## Stack
+Vertical and horizontal spacing utility for consistent layouts.
+
+```tsx
+import { Stack } from "@neynar/ui";
+
+<Stack direction="vertical" spacing="md">
+  <div>Item 1</div>
+  <div>Item 2</div>
+</Stack>
+
+<Stack direction="horizontal" spacing="sm" align="center">
+  <button>Action</button>
+  <span>Label</span>
+</Stack>
+```
+
+## Separator
+Visual divider for content sections.
+
+```tsx
+import { Separator } from "@neynar/ui";
+
+<div>
+  <p>Section 1</p>
+  <Separator className="my-4" />
+  <p>Section 2</p>
+</div>
+
+<Separator orientation="vertical" className="h-6 mx-2" />
+```
+
+## AspectRatio
+Maintain consistent aspect ratios for media and containers.
+
+```tsx
+import { AspectRatio } from "@neynar/ui";
+
+<AspectRatio ratio={16 / 9}>
+  <img src="/image.jpg" alt="Video thumbnail" className="object-cover" />
+</AspectRatio>
+
+<AspectRatio ratio={1} className="bg-muted">
+  <div className="flex items-center justify-center">1:1 Square</div>
+</AspectRatio>
+```

package/docs/llm/components/menus.md

@@ -0,0 +1,70 @@
+# Menu Components
+
+Menu components for dropdown actions, context menus, menubars, and command palettes.
+
+## DropdownMenu
+
+```tsx
+import { Button } from "@neynar/ui"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@neynar/ui"
+
+<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <Button variant="outline">Actions</Button>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent>
+    <DropdownMenuItem>Edit</DropdownMenuItem>
+    <DropdownMenuItem>Delete</DropdownMenuItem>
+  </DropdownMenuContent>
+</DropdownMenu>
+```
+
+## ContextMenu
+
+```tsx
+import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@neynar/ui"
+
+<ContextMenu>
+  <ContextMenuTrigger>Right-click me</ContextMenuTrigger>
+  <ContextMenuContent>
+    <ContextMenuItem>Copy</ContextMenuItem>
+    <ContextMenuItem>Paste</ContextMenuItem>
+  </ContextMenuContent>
+</ContextMenu>
+```
+
+## Menubar
+
+```tsx
+import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarTrigger } from "@neynar/ui"
+
+<Menubar>
+  <MenubarMenu>
+    <MenubarTrigger>File</MenubarTrigger>
+    <MenubarContent>
+      <MenubarItem>New File</MenubarItem>
+      <MenubarItem>Open</MenubarItem>
+    </MenubarContent>
+  </MenubarMenu>
+</Menubar>
+```
+
+## Command
+
+```tsx
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@neynar/ui"
+
+<Command>
+  <CommandInput placeholder="Search..." />
+  <CommandEmpty>No results found.</CommandEmpty>
+  <CommandGroup heading="Actions">
+    <CommandItem>Profile</CommandItem>
+    <CommandItem>Settings</CommandItem>
+  </CommandGroup>
+</Command>
+```

package/docs/llm/components/navigation.md

@@ -0,0 +1,80 @@
+# Navigation Components
+
+Navigation components for building intuitive user interfaces with clear hierarchy and wayfinding.
+
+## NavigationMenu
+
+Main navigation with dropdowns and multi-level support.
+
+```tsx
+import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from "@neynar/ui"
+
+export function AppNavigation() {
+  return (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <NavigationMenuLink href="/analytics">Analytics</NavigationMenuLink>
+            <NavigationMenuLink href="/api">API</NavigationMenuLink>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+        <NavigationMenuItem>
+          <NavigationMenuLink href="/docs">Documentation</NavigationMenuLink>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  )
+}
+```
+
+## Tabs
+
+Content organization with horizontal navigation.
+
+```tsx
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@neynar/ui"
+
+export function SettingsTabs() {
+  return (
+    <Tabs defaultValue="profile">
+      <TabsList>
+        <TabsTrigger value="profile">Profile</TabsTrigger>
+        <TabsTrigger value="security">Security</TabsTrigger>
+        <TabsTrigger value="notifications">Notifications</TabsTrigger>
+      </TabsList>
+      <TabsContent value="profile">Profile settings content</TabsContent>
+      <TabsContent value="security">Security settings content</TabsContent>
+    </Tabs>
+  )
+}
+```
+
+## Breadcrumb
+
+Hierarchical navigation showing current location.
+
+```tsx
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@neynar/ui"
+
+export function PageBreadcrumb() {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/products">Products</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Analytics Dashboard</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
+```

package/docs/llm/components/overlays.md

@@ -0,0 +1,83 @@
+# Overlay Components
+
+Overlay components create layered interfaces and contextual information displays.
+
+## Dialog
+
+Modal dialogs for important actions and forms.
+
+```tsx
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@neynar/ui";
+
+// Basic controlled dialog
+function UserSettingsDialog() {
+  const [open, setOpen] = useState(false);
+  
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button>Settings</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>User Settings</DialogTitle>
+          <DialogDescription>Update your preferences</DialogDescription>
+        </DialogHeader>
+        {/* Form content */}
+      </DialogContent>
+    </Dialog>
+  );
+}
+```
+
+## AlertDialog
+
+Confirmation dialogs for destructive actions.
+
+```tsx
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@neynar/ui";
+
+function DeleteConfirmation({ onConfirm }: { onConfirm: () => void }) {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="destructive">Delete</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+          <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={onConfirm}>Delete</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+```
+
+## Sheet
+
+Side panels for navigation or supplementary content.
+
+```tsx
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@neynar/ui";
+
+function MobileMenu() {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="ghost" size="sm">Menu</Button>
+      </SheetTrigger>
+      <SheetContent side="left">
+        <SheetHeader>
+          <SheetTitle>Navigation</SheetTitle>
+        </SheetHeader>
+        {/* Navigation items */}
+      </SheetContent>
+    </Sheet>
+  );
+}
+```

package/docs/llm/components/tables.md

@@ -0,0 +1,73 @@
+# Tables
+
+Flexible table components for displaying structured data with proper accessibility.
+
+## Components
+
+- `Table` - Root container with proper table styling
+- `TableHeader` - Groups header content
+- `TableBody` - Contains table rows
+- `TableRow` - Individual table row
+- `TableHead` - Header cell with proper semantics
+- `TableCell` - Data cell with consistent styling
+- `TableCaption` - Accessible table description
+
+## Basic Table
+
+```tsx
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@neynar/ui"
+
+export function UsersTable() {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Name</TableHead>
+          <TableHead>Email</TableHead>
+          <TableHead>Role</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell>John Doe</TableCell>
+          <TableCell>john@example.com</TableCell>
+          <TableCell>Admin</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  )
+}
+```
+
+## Table with Actions
+
+```tsx
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Button } from "@neynar/ui"
+
+export function CastsTable({ casts }) {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Author</TableHead>
+          <TableHead>Content</TableHead>
+          <TableHead>Likes</TableHead>
+          <TableHead className="text-right">Actions</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {casts.map((cast) => (
+          <TableRow key={cast.hash}>
+            <TableCell>{cast.author.display_name}</TableCell>
+            <TableCell className="max-w-md truncate">{cast.text}</TableCell>
+            <TableCell>{cast.reactions.likes.length}</TableCell>
+            <TableCell className="text-right">
+              <Button variant="ghost" size="sm">View</Button>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
+}
+```

package/docs/llm/components/typography.md

@@ -0,0 +1,199 @@
+# Typography Components
+
+## Typography
+Consistent text styling with semantic variants and accessibility features.
+
+```tsx
+import { Typography } from "@neynar/ui"
+
+// Basic usage with semantic variants
+<Typography variant="heading" as="h1">
+  Main Page Title
+</Typography>
+
+<Typography variant="subheading" as="h2">
+  Section Header
+</Typography>
+
+<Typography variant="body">
+  Standard paragraph text content with proper line height and spacing.
+</Typography>
+
+<Typography variant="bodyEmphasized">
+  Emphasized text for important information.
+</Typography>
+
+// Color and styling options
+<Typography variant="body" color="muted">
+  Secondary information in muted color
+</Typography>
+
+<Typography variant="details" color="destructive">
+  Error or warning text
+</Typography>
+
+// Form field labels
+<Typography variant="field" as="label" htmlFor="email">
+  Email Address
+</Typography>
+
+// Code snippets
+<Typography variant="code" as="code">
+  const example = "Hello, world!";
+</Typography>
+
+// Table content
+<Typography variant="tableHeader" as="th">
+  Column Header
+</Typography>
+
+<Typography variant="tableCell" as="td">
+  Cell content
+</Typography>
+
+// Microcopy for fine print
+<Typography variant="microcopy" color="muted">
+  Terms and conditions apply
+</Typography>
+
+// Advanced styling
+<Typography 
+  variant="body" 
+  color="accent" 
+  italic 
+  underline 
+  align="center"
+>
+  Styled text with multiple options
+</Typography>
+
+// Truncated text
+<Typography variant="body" truncate className="max-w-xs">
+  Long text that will be truncated with ellipsis
+</Typography>
+
+// Screen reader only content
+<Typography variant="details" srOnly>
+  Additional context for accessibility
+</Typography>
+```
+
+### Typography Design System
+
+The Typography component uses a carefully designed font scale that maps to your design system:
+
+- **heading** (20px) - Main page and section titles
+- **subheading** (17px) - Secondary headings for subsections
+- **body** (14px) - Standard content text 
+- **bodyEmphasized** (14px) - Important content with medium weight
+- **details** (12px) - Smaller text for descriptions
+- **field** (17px) - Form field labels
+- **code** (17px) - Monospace text for code
+- **microcopy** (10px) - Fine print and captions
+- **tableCell** (17px) - Table cell content
+- **tableHeader** (17px) - Table headers with emphasis
+
+### Accessibility Features
+
+- Uses semantic HTML elements when specified via `as` prop
+- Supports screen reader only content with `srOnly` prop
+- Maintains proper color contrast ratios across all color variants
+- Respects user preferences for reduced motion and high contrast
+- Full keyboard navigation support where applicable
+
+## Semantic Components
+
+The Typography system includes semantic HTML components for better accessibility and developer experience:
+
+### H1-H6 (Headings)
+```tsx
+import { H1, H2, H3, H4, H5, H6 } from "@neynar/ui"
+
+<H1>Main Page Title</H1>
+<H2>Section Heading</H2>
+<H3>Subsection</H3>
+// H4, H5, H6 follow similar patterns
+```
+
+### P (Paragraph)
+```tsx
+import { P } from "@neynar/ui"
+
+<P>Standard paragraph text with proper spacing and line height.</P>
+<P color="muted">Secondary paragraph text.</P>
+```
+
+### A (Anchor/Link)
+```tsx
+import { A } from "@neynar/ui"
+
+// Basic links
+<A href="https://example.com">External Link</A>
+
+// With styling options
+<A href="/about" color="accent" variant="subheading">
+  Styled Internal Link
+</A>
+
+// Integration with routing libraries (Next.js example)
+<A asChild>
+  <Link href="/dashboard">Dashboard</Link>
+</A>
+```
+
+### Other Semantic Elements
+```tsx
+import { Span, Code, Small, Strong, Lead, Blockquote } from "@neynar/ui"
+
+<Span variant="details">Inline text with details styling</Span>
+<Code>const hello = "world";</Code>
+<Small>Fine print and disclaimers</Small>
+<Strong>Important emphasized text</Strong>
+<Lead>Introduction paragraph text</Lead>
+<Blockquote>"Quoted content with proper styling"</Blockquote>
+```
+
+## Framework Integration
+
+### Next.js Link Integration
+```tsx
+// Create a custom Link component
+import Link from "next/link";
+import { A } from "@neynar/ui";
+
+function AppLink({ href, children, ...props }) {
+  return (
+    <A asChild {...props}>
+      <Link href={href}>{children}</Link>
+    </A>
+  );
+}
+
+// Usage
+<AppLink href="/about" variant="subheading">About Us</AppLink>
+```
+
+### React Router Integration
+```tsx
+// Custom Link for React Router
+import { Link } from "react-router-dom";
+import { A } from "@neynar/ui";
+
+function AppLink({ to, children, ...props }) {
+  return (
+    <A asChild {...props}>
+      <Link to={to}>{children}</Link>
+    </A>
+  );
+}
+
+// Usage
+<AppLink to="/contact" color="accent">Contact</AppLink>
+```
+
+### Performance Notes
+
+- Uses CSS custom properties for consistent theming
+- Leverages Tailwind's default font scale for optimal bundle size
+- Supports tree-shaking when used with selective imports
+- Semantic components improve SEO and accessibility