@neynar/ui 0.4.0 → 0.5.0

package/docs/llm/components/overlays.md

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

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

@@ -1,203 +0,0 @@
-# Typography Components
-
-## Typography
-
-Consistent text styling with semantic variants and accessibility features.
-
-### Typography Design System
-
-The Typography component uses a carefully designed font scale that maps to your design system:
-
-- **microcopy** (10px / 1.2)
-- **detail** (13px / 1.2)
-- **body** (15px / 1.1)
-- **bodyBlog** (17px / 1.5)
-- **paragraphLead** (17px 1.2)
-- **eyebrow** (20px / 1.2)
-- **subHeadline** (22px / 1.2)
-- **headline** (36px / 1.2)
-- **sectionTitle** (45px / 1.4)
-- **pageTitle** (56px / 1.4)
-- **displayTitle** (72px / 1.1)
-- **heroTitle** (90px 1.1)
-- **code** (15px / 1.2)
-
-### 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>;
-```
-
-### Typography Component
-
-Only use as a last resort if none of the other components apply
-
-```tsx
-import { Typography } from "@neynar/ui"
-
-// Basic usage with semantic variants
-<Typography variant="heroTitle" as="h1">
-  Main Page Title
-</Typography>
-
-<Typography variant="pageTitle" as="h2">
-  Section Header
-</Typography>
-
-<Typography variant="body">
-  Standard paragraph text content with proper line height and spacing.
-</Typography>
-
-<Typography variant="body" weight="bold">
-  Emphasized text for important information.
-</Typography>
-
-// Color and styling options
-<Typography variant="body" color="muted">
-  Secondary information in muted color
-</Typography>
-
-<Typography variant="detail" color="destructive">
-  Error or warning text
-</Typography>
-
-// Form field labels
-<Typography variant="detail" as="label" htmlFor="email">
-  Email Address
-</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>
-```
-
-### 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

package/docs/llm/components/utilities.md

@@ -1,114 +0,0 @@
-# Utilities
-
-Essential utility components, hooks, and functions for building responsive and accessible interfaces.
-
-## Components
-
-### ThemeToggle
-Theme switching component with light/dark mode support.
-
-```tsx
-import { ThemeToggle } from "@neynar/ui"
-
-export function Header() {
-  return (
-    <div className="flex items-center justify-between p-4">
-      <h1>My App</h1>
-      <ThemeToggle />
-    </div>
-  )
-}
-```
-
-### ScrollArea
-Custom scrollable container with styled scrollbars.
-
-```tsx
-import { ScrollArea } from "@neynar/ui"
-
-export function MessageList({ messages }) {
-  return (
-    <ScrollArea className="h-96 w-full border rounded-md p-4">
-      {messages.map((message) => (
-        <div key={message.id} className="mb-2">{message.text}</div>
-      ))}
-    </ScrollArea>
-  )
-}
-```
-
-### Resizable
-Resizable panels with drag handles.
-
-```tsx
-import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@neynar/ui"
-
-export function Layout() {
-  return (
-    <ResizablePanelGroup direction="horizontal">
-      <ResizablePanel defaultSize={25}>Sidebar</ResizablePanel>
-      <ResizableHandle />
-      <ResizablePanel defaultSize={75}>Main Content</ResizablePanel>
-    </ResizablePanelGroup>
-  )
-}
-```
-
-## Hooks
-
-### useTheme
-Theme management hook for dark/light mode.
-
-```tsx
-import { useTheme } from "@neynar/ui"
-
-export function CustomThemeToggle() {
-  const { theme, setTheme } = useTheme()
-  
-  return (
-    <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
-      Current: {theme}
-    </button>
-  )
-}
-```
-
-### useMobile
-Responsive design hook for mobile detection.
-
-```tsx
-import { useMobile } from "@neynar/ui"
-
-export function ResponsiveComponent() {
-  const isMobile = useMobile()
-  
-  return (
-    <div className={isMobile ? "grid-cols-1" : "grid-cols-3"}>
-      Content adapts to screen size
-    </div>
-  )
-}
-```
-
-## Utils
-
-### cn
-Class name utility for conditional styling.
-
-```tsx
-import { cn } from "@neynar/ui"
-
-export function Button({ variant, className, ...props }) {
-  return (
-    <button
-      className={cn(
-        "px-4 py-2 rounded",
-        variant === "primary" && "bg-blue-500 text-white",
-        variant === "secondary" && "bg-gray-200",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-```

package/docs/llm/guide.md

@@ -1,165 +0,0 @@
-# @neynar/ui Composition Guide
-
-Essential patterns for building interfaces with @neynar/ui components. Focus on practical composition techniques and TypeScript best practices.
-
-## Import Patterns
-
-```typescript
-// ✅ Correct - named imports with alias
-import { Button, Card, CardContent, CardHeader, CardTitle } from "@neynar/ui"
-import { useIsMobile, cn } from "@neynar/ui"
-
-// ❌ Avoid - relative imports or default exports
-import { Button } from "./ui/button"
-import Button from "@neynar/ui"
-```
-
-## Component Composition
-
-### Card-Based Layouts
-Cards are the primary container component. Always use sub-components for structure:
-
-```typescript
-import { Card, CardHeader, CardTitle, CardContent, CardFooter, Button } from "@neynar/ui"
-
-function UserProfile() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>User Settings</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <p>Manage your account preferences</p>
-      </CardContent>
-      <CardFooter>
-        <Button>Save Changes</Button>
-      </CardFooter>
-    </Card>
-  )
-}
-```
-
-### Form Patterns
-Combine form components with consistent spacing:
-
-```typescript
-import { Label, Input, Button, Card, CardContent } from "@neynar/ui"
-
-function LoginForm() {
-  return (
-    <Card className="w-96">
-      <CardContent className="space-y-4 pt-6">
-        <div className="space-y-2">
-          <Label htmlFor="email">Email</Label>
-          <Input id="email" type="email" placeholder="Enter email" />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="password">Password</Label>
-          <Input id="password" type="password" />
-        </div>
-        <Button className="w-full">Sign In</Button>
-      </CardContent>
-    </Card>
-  )
-}
-```
-
-## Responsive Patterns
-
-Use `useIsMobile` for adaptive layouts:
-
-```typescript
-import { useIsMobile, Dialog, Sheet, Button } from "@neynar/ui"
-
-function ResponsiveModal({ children }) {
-  const isMobile = useIsMobile()
-  
-  const Wrapper = isMobile ? Sheet : Dialog
-  
-  return (
-    <Wrapper>
-      <Button>Open Modal</Button>
-      {children}
-    </Wrapper>
-  )
-}
-```
-
-## Data Display
-
-Combine table components for structured data:
-
-```typescript
-import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@neynar/ui"
-
-function UserTable({ users }) {
-  return (
-    <Table>
-      <TableHeader>
-        <TableRow>
-          <TableHead>Name</TableHead>
-          <TableHead>Email</TableHead>
-        </TableRow>
-      </TableHeader>
-      <TableBody>
-        {users.map(user => (
-          <TableRow key={user.id}>
-            <TableCell>{user.name}</TableCell>
-            <TableCell>{user.email}</TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </Table>
-  )
-}
-```
-
-## TypeScript Patterns
-
-Always use function declarations and type definitions:
-
-```typescript
-import { Button, type ButtonProps } from "@neynar/ui"
-
-// ✅ Function declaration with types
-function CustomButton({ variant = "default", ...props }: ButtonProps) {
-  return <Button variant={variant} {...props} />
-}
-
-// ❌ Avoid const/arrow functions for components
-const CustomButton = ({ variant = "default", ...props }: ButtonProps) => {
-  return <Button variant={variant} {...props} />
-}
-```
-
-## Utility Usage
-
-Use `cn()` for conditional styling:
-
-```typescript
-import { Button, cn } from "@neynar/ui"
-
-function StatusButton({ isActive, children }) {
-  return (
-    <Button 
-      className={cn(
-        "transition-colors",
-        isActive && "bg-green-500 hover:bg-green-600"
-      )}
-    >
-      {children}
-    </Button>
-  )
-}
-```
-
-## Common Patterns Summary
-
-1. **Always use named imports** from `@neynar/ui`
-2. **Function declarations** for all components
-3. **Type definitions** instead of interfaces
-4. **Composition over configuration** - combine simple components
-5. **Use `useIsMobile`** for responsive behavior
-6. **Leverage `cn()`** for conditional classes
-7. **Structure with Cards** for most layouts
-8. **Consistent spacing** with Tailwind classes like `space-y-4`