@neynar/ui 0.3.0 → 0.4.0

package/.llm/spinner.llm.md

@@ -0,0 +1,182 @@
+# Spinner
+
+**Type**: component
+
+Spinner - Loading indicator with animated rotation A circular loading spinner built on the Lucide React Loader2 icon with smooth rotation animation. Provides visual feedback to users during asynchronous operations such as data fetching, form submissions, or content loading. The spinner is highly customizable through CSS classes and supports all standard SVG props for size, color, and styling.
+
+## JSX Usage
+
+```jsx
+import { Spinner } from '@neynar/ui';
+
+<Spinner
+  className="value"
+  color="value"
+  size={value}
+  strokeWidth={value}
+  "aria-label"="value"
+  role="value"
+  "aria-hidden"={value}
+  "aria-describedby"="value"
+  "aria-live"={value}
+  "aria-busy"={true}
+  style={value}
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### color
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### size
+- **Type**: `number | string`
+- **Required**: No
+- **Description**: No description available
+
+### strokeWidth
+- **Type**: `number | string`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-label"
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### role
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-hidden"
+- **Type**: `boolean | "false" | "true"`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-describedby"
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-live"
+- **Type**: `"off" | "polite" | "assertive"`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-busy"
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### style
+- **Type**: `React.CSSProperties`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic loading spinner with default size (16px)
+<Spinner />
+// Custom size using Tailwind size utilities
+<Spinner className="size-6" />
+<Spinner className="size-8" />
+<Spinner className="size-12" />
+// Custom color using text color classes
+<Spinner className="text-primary" />
+<Spinner className="text-destructive" />
+<Spinner className="text-muted-foreground" />
+```
+### Example 2
+```tsx
+// In loading buttons
+import { Button } from "./button";
+<Button disabled>
+  <Spinner className="mr-2 size-4" />
+  Loading...
+</Button>
+<Button variant="outline" disabled>
+  <Spinner className="mr-2 size-4" />
+  Processing
+</Button>
+// Icon-only loading button
+<Button size="icon" disabled aria-label="Loading">
+  <Spinner className="size-4" />
+</Button>
+```
+### Example 3
+```tsx
+// Full-page loading state
+<div className="flex min-h-screen items-center justify-center">
+  <div className="text-center space-y-4">
+    <Spinner className="size-12 mx-auto" />
+    <p className="text-muted-foreground">Loading your dashboard...</p>
+  </div>
+</div>
+// Card loading state
+<div className="border rounded-lg p-8 flex flex-col items-center gap-3">
+  <Spinner className="size-8" />
+  <p className="text-sm text-muted-foreground">Fetching data...</p>
+</div>
+// Inline loading with text
+<p className="flex items-center gap-2 text-sm">
+  <Spinner className="size-4" />
+  Syncing your data...
+</p>
+```
+### Example 4
+```tsx
+// Custom animation speed
+// Slow rotation
+<Spinner className="animate-[spin_2s_linear_infinite]" />
+// Fast rotation
+<Spinner className="animate-[spin_0.5s_linear_infinite]" />
+// Custom size and color combination
+<Spinner
+  className="size-6 text-blue-500"
+  strokeWidth={3}
+/>
+// With background overlay
+<div className="relative">
+  <div className="absolute inset-0 bg-background/50 backdrop-blur-sm flex items-center justify-center rounded-lg">
+    <Spinner className="size-8" />
+  </div>
+  <div>Your content here</div>
+</div>
+```
+### Example 5
+```tsx
+// Conditional rendering with loading state
+function DataDisplay() {
+  const [isLoading, setIsLoading] = React.useState(true);
+  return (
+    <div className="space-y-4">
+      {isLoading ? (
+        <div className="flex justify-center p-8">
+          <Spinner className="size-6" />
+        </div>
+      ) : (
+        <div>Loaded content here</div>
+      )}
+    </div>
+  );
+}
+// With aria-live region for screen reader announcements
+<div aria-live="polite" aria-atomic="true">
+  {isLoading && (
+    <div className="flex items-center gap-2">
+      <Spinner className="size-4" />
+      <span>Loading content, please wait...</span>
+    </div>
+  )}
+</div>
+```

package/.llm/stack.llm.md

@@ -0,0 +1,28 @@
+# Stack
+
+**Type**: component
+
+Stack - A flexible layout component for consistent spacing between elements Stack is a fundamental layout primitive that arranges child elements in either vertical or horizontal direction with consistent spacing. Built on flexbox principles, it provides a clean, declarative API for common layout patterns without requiring custom CSS or complex flex configurations. **Core Features:** - Consistent spacing using Tailwind's design system - Flexible direction control (vertical/horizontal) - Zero-config flexbox layouts with predictable behavior - Composable with other UI components and layout utilities - Full accessibility support with semantic HTML structure - TypeScript-first with comprehensive prop validation **Common Use Cases:** - Form layouts with consistent field spacing - Button groups and action bars - Content sections with uniform gaps - Navigation lists and menu structures - Card layouts and dashboard grids - Page sections and content hierarchy - Responsive component layouts **Design System Integration:** Stack integrates seamlessly with design systems by providing consistent spacing that aligns with Tailwind's spacing scale. This ensures visual harmony across your application and reduces the need for custom spacing utilities in most common layout scenarios.
+
+## JSX Usage
+
+```jsx
+import { Stack } from '@neynar/ui';
+
+<Stack
+  spacing={value}
+  direction={value}
+/>
+```
+
+## Component Props
+
+### spacing
+- **Type**: `StackSpacing`
+- **Required**: No
+- **Description**: No description available
+
+### direction
+- **Type**: `StackDirection`
+- **Required**: No
+- **Description**: No description available

package/.llm/subsection-title.llm.md

@@ -0,0 +1,46 @@
+# SubsectionTitle
+
+**Type**: component
+
+SubsectionTitle - Tertiary subsection heading component Subsection headings for further content division. Uses text-xl (20px) for subtle distinction from SectionTitle. Defaults to h3 element.
+
+## JSX Usage
+
+```jsx
+import { SubsectionTitle } from '@neynar/ui';
+
+<SubsectionTitle
+  as={value}
+  className="value"
+>
+  {/* Your content here */}
+</SubsectionTitle>
+```
+
+## Component Props
+
+### as
+- **Type**: `React.ElementType`
+- **Required**: No
+- **Description**: HTML element to render
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional Tailwind classes
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: Content to render
+
+## Examples
+
+```tsx
+// Default usage
+<SubsectionTitle>Configuration Options</SubsectionTitle>
+// With custom styling
+<SubsectionTitle className="text-muted-foreground">
+  Optional Settings
+</SubsectionTitle>
+```

package/.llm/switch.llm.md

@@ -0,0 +1,76 @@
+# Switch
+
+**Type**: component
+
+Switch - Binary toggle control for on/off states A versatile toggle switch component built on Radix UI Switch primitive that provides an accessible way to toggle between on/off states. Commonly used for settings, preferences, and feature toggles that have immediate effects. Built with Radix UI Switch primitive and styled with Tailwind CSS to ensure consistent visual appearance across light and dark themes. The component automatically handles state management, accessibility, keyboard navigation, and form integration.
+
+## JSX Usage
+
+```jsx
+import { Switch } from '@neynar/ui';
+
+<Switch
+  checked={true}
+  defaultChecked={true}
+  onCheckedChange={handleCheckedChange}
+  disabled={true}
+  required={true}
+  name="value"
+  value="value"
+  id="value"
+  asChild={true}
+  className="value"
+/>
+```
+
+## Component Props
+
+### checked
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### defaultChecked
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### onCheckedChange
+- **Type**: `(checked: boolean) => void`
+- **Required**: No
+- **Description**: No description available
+
+### disabled
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### required
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### name
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### value
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### id
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available

package/.llm/table-body.llm.md

@@ -0,0 +1,36 @@
+# TableBody
+
+**Type**: component
+
+TableBody - Container for table data rows Main content area of the table containing all data rows. Applies border styling where the last row has no bottom border. Contains TableRow components with TableCell elements.
+
+## JSX Usage
+
+```jsx
+import { TableBody } from '@neynar/ui';
+
+<TableBody
+  className="value"
+>
+  {/* Your content here */}
+</TableBody>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+```tsx
+<TableBody>
+  <TableRow>
+    <TableCell>

package/.llm/table-caption.llm.md

@@ -0,0 +1,48 @@
+# TableCaption
+
+**Type**: component
+
+TableCaption - Table caption for describing table content and context Provides a description, title, or additional context for the table. Displayed with muted styling and proper spacing. Essential for accessibility as screen readers announce the caption to provide table context.
+
+## JSX Usage
+
+```jsx
+import { TableCaption } from '@neynar/ui';
+
+<TableCaption
+  className="value"
+>
+  {/* Your content here */}
+</TableCaption>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+```tsx
+<Table>
+  <TableCaption>Recent casts from your network</TableCaption>
+  <TableHeader>...</TableHeader>
+  <TableBody>...</TableBody>
+</Table>
+// Caption with additional context
+<Table>
+  <TableCaption>
+    Channel analytics for the last 30 days.
+    Data updated every hour.
+  </TableCaption>
+  <TableHeader>...</TableHeader>
+  <TableBody>...</TableBody>
+</Table>
+```

package/.llm/table-cell.llm.md

@@ -0,0 +1,53 @@
+# TableCell
+
+**Type**: component
+
+TableCell - Table data cell component for content display Used for data cells within table rows with consistent padding and alignment. Supports custom styling, truncation, and special handling for interactive elements like checkboxes and buttons.
+
+## JSX Usage
+
+```jsx
+import { TableCell } from '@neynar/ui';
+
+<TableCell
+  className="value"
+  colSpan={0}
+  rowSpan={0}
+  headers="value"
+>
+  {/* Your content here */}
+</TableCell>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+### colSpan
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### rowSpan
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### headers
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+```tsx
+// Basic data cells
+<TableCell>

package/.llm/table-footer.llm.md

@@ -0,0 +1,41 @@
+# TableFooter
+
+**Type**: component
+
+TableFooter - Container for table footer rows Used for summary rows, totals, or additional table information. Styled with a muted background and top border to distinguish from data rows. Typically contains aggregated data or table-wide information.
+
+## JSX Usage
+
+```jsx
+import { TableFooter } from '@neynar/ui';
+
+<TableFooter
+  className="value"
+>
+  {/* Your content here */}
+</TableFooter>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+```tsx
+<TableFooter>
+  <TableRow>
+    <TableCell>Total Users</TableCell>
+    <TableCell>15,767</TableCell>
+    <TableCell className="text-right">+9.25%</TableCell>
+  </TableRow>
+</TableFooter>
+```

package/.llm/table-head.llm.md

@@ -0,0 +1,69 @@
+# TableHead
+
+**Type**: component
+
+TableHead - Table header cell component for column definitions Used for column headers with medium font weight and proper text alignment. Includes special styling for checkbox columns and interactive elements. Essential for screen reader navigation and table accessibility.
+
+## JSX Usage
+
+```jsx
+import { TableHead } from '@neynar/ui';
+
+<TableHead
+  className="value"
+  scope={value}
+  colSpan={0}
+  rowSpan={0}
+  "aria-sort"={value}
+>
+  {/* Your content here */}
+</TableHead>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+### scope
+- **Type**: `"col" | "row" | "colgroup" | "rowgroup"`
+- **Required**: No
+- **Description**: No description available
+
+### colSpan
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### rowSpan
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-sort"
+- **Type**: `"ascending" | "descending" | "none" | "other"`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+```tsx
+// Text headers
+<TableHead>Username</TableHead>
+<TableHead className="text-right">Followers</TableHead>
+// Checkbox header
+<TableHead className="w-[50px]">
+  <Checkbox />
+</TableHead>
+// Sortable header
+<TableHead>
+  <Button variant="ghost">FID ↕</Button>
+</TableHead>
+```

package/.llm/table-header.llm.md

@@ -0,0 +1,41 @@
+# TableHeader
+
+**Type**: component
+
+TableHeader - Container for table header rows Groups header rows and applies consistent styling with bottom borders. Contains TableRow components with TableHead cells for column definitions. Essential for accessibility and proper table structure.
+
+## JSX Usage
+
+```jsx
+import { TableHeader } from '@neynar/ui';
+
+<TableHeader
+  className="value"
+>
+  {/* Your content here */}
+</TableHeader>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+```tsx
+<TableHeader>
+  <TableRow>
+    <TableHead>Username</TableHead>
+    <TableHead>FID</TableHead>
+    <TableHead className="text-right">Actions</TableHead>
+  </TableRow>
+</TableHeader>
+```

package/.llm/table-row.llm.md

@@ -0,0 +1,42 @@
+# TableRow
+
+**Type**: component
+
+TableRow - A table row component with interactive states Represents a single row in the table with hover effects and selection support. Supports data-state attributes for visual feedback and proper border styling. Essential building block for all table content areas.
+
+## JSX Usage
+
+```jsx
+import { TableRow } from '@neynar/ui';
+
+<TableRow
+  className="value"
+  "data-state"={value}
+>
+  {/* Your content here */}
+</TableRow>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+### "data-state"
+- **Type**: `"selected" | "unselected"`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+```tsx
+// Basic row
+<TableRow>
+  <TableCell>