@neynar/ui 0.3.0 → 0.3.1

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>

package/.llm/table.llm.md

@@ -0,0 +1,123 @@
+# Table
+
+**Type**: component
+
+Table - A responsive data table component for displaying structured information Built on semantic HTML table elements with responsive scrolling and proper accessibility. Follows shadcn/ui patterns for data presentation and can be enhanced with TanStack Table for sorting, filtering, and pagination. Perfect for dashboards, data management, and structured content display.
+
+## JSX Usage
+
+```jsx
+import { Table } from '@neynar/ui';
+
+<Table
+  className="value"
+  summary="value"
+  "aria-label"="value"
+  "aria-describedby"="value"
+  role="value"
+>
+  {/* Your content here */}
+</Table>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+### summary
+- **Type**: `string`
+- **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
+
+### role
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic table with Farcaster user data
+<Table>
+  <TableCaption>Recent casts from your network</TableCaption>
+  <TableHeader>
+    <TableRow>
+      <TableHead>User</TableHead>
+      <TableHead>Channel</TableHead>
+      <TableHead>Content</TableHead>
+      <TableHead className="text-right">Reactions</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell className="font-medium">
+### Example 2
+```tsx
+// Table with selection and actions
+<Table>
+  <TableHeader>
+    <TableRow>
+      <TableHead className="w-[50px]">
+        <Checkbox />
+      </TableHead>
+      <TableHead>User</TableHead>
+      <TableHead>FID</TableHead>
+      <TableHead className="text-right">Actions</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow data-state="selected">
+      <TableCell><Checkbox checked /></TableCell>
+      <TableCell>
+### Example 3
+```tsx
+// Table with footer totals
+<Table>
+  <TableBody>
+    <TableRow>
+      <TableCell>/farcaster</TableCell>
+      <TableCell className="text-right">5,234</TableCell>
+    </TableRow>
+  </TableBody>
+  <TableFooter>
+    <TableRow>
+      <TableCell>Total</TableCell>
+      <TableCell className="text-right">15,767</TableCell>
+    </TableRow>
+  </TableFooter>
+</Table>
+```
+### Example 4
+```tsx
+// Table with custom attributes for data integration
+<Table role="table" aria-label="User analytics dashboard">
+  <TableCaption>Showing 1-10 of 50 users</TableCaption>
+  <TableHeader>
+    <TableRow>
+      <TableHead scope="col">User</TableHead>
+      <TableHead scope="col">FID</TableHead>
+      <TableHead scope="col" className="text-right">Casts</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow data-user-id="3">
+      <TableCell>

package/.llm/tabs-content.llm.md

@@ -0,0 +1,47 @@
+# TabsContent
+
+**Type**: component
+
+Content panel that displays when its associated tab trigger is active. Each content panel is linked to a specific trigger via the `value` prop. Only one content panel is visible at a time, creating a clean tabbed interface. The component handles enter/exit animations and proper focus management when tabs change.
+
+## JSX Usage
+
+```jsx
+import { TabsContent } from '@neynar/ui';
+
+<TabsContent
+  value="value"
+  forceMount={true}
+  className="value"
+  asChild={true}
+>
+  {/* Your content here */}
+</TabsContent>
+```
+
+## Component Props
+
+### value
+- **Type**: `string`
+- **Required**: Yes
+- **Description**: No description available
+
+### forceMount
+- **Type**: `boolean`
+- **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
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available

package/.llm/tabs-list.llm.md

@@ -0,0 +1,41 @@
+# TabsList
+
+**Type**: component
+
+Container component that groups all tab trigger buttons together. Provides consistent styling and layout for tab triggers with a unified background and proper spacing. The list maintains the tab order and handles focus management within the tabbed interface.
+
+## JSX Usage
+
+```jsx
+import { TabsList } from '@neynar/ui';
+
+<TabsList
+  loop={true}
+  className="value"
+  asChild={true}
+>
+  {/* Your content here */}
+</TabsList>
+```
+
+## Component Props
+
+### loop
+- **Type**: `boolean`
+- **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
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available

package/.llm/tabs-trigger.llm.md

@@ -0,0 +1,47 @@
+# TabsTrigger
+
+**Type**: component
+
+Individual clickable button that activates its associated tab content. Each trigger is associated with a specific tab panel via the `value` prop. The component automatically handles active states, focus management, and accessibility attributes. Supports icons, text, and custom content.
+
+## JSX Usage
+
+```jsx
+import { TabsTrigger } from '@neynar/ui';
+
+<TabsTrigger
+  value="value"
+  disabled={true}
+  className="value"
+  asChild={true}
+>
+  {/* Your content here */}
+</TabsTrigger>
+```
+
+## Component Props
+
+### value
+- **Type**: `string`
+- **Required**: Yes
+- **Description**: No description available
+
+### disabled
+- **Type**: `boolean`
+- **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
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available

package/.llm/tabs.llm.md

@@ -0,0 +1,71 @@
+# Tabs
+
+**Type**: component
+
+A tabbed interface component for organizing content into multiple sections. Tabs provide an intuitive way to organize and display content in separate panels, with only one panel visible at a time. Built on Radix UI's robust accessibility foundation with full keyboard navigation, focus management, and screen reader support. The component supports both controlled and uncontrolled usage patterns, allowing for flexible integration in various application contexts. Each tab consists of a trigger (button) that activates its corresponding content panel.
+
+## JSX Usage
+
+```jsx
+import { Tabs } from '@neynar/ui';
+
+<Tabs
+  defaultValue="value"
+  value="value"
+  onValueChange={handleValueChange}
+  orientation={value}
+  dir={value}
+  activationMode={value}
+  className="value"
+  asChild={true}
+>
+  {/* Your content here */}
+</Tabs>
+```
+
+## Component Props
+
+### defaultValue
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### value
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### onValueChange
+- **Type**: `(value: string) => void`
+- **Required**: No
+- **Description**: No description available
+
+### orientation
+- **Type**: `"horizontal" | "vertical"`
+- **Required**: No
+- **Description**: No description available
+
+### dir
+- **Type**: `"ltr" | "rtl"`
+- **Required**: No
+- **Description**: No description available
+
+### activationMode
+- **Type**: `"automatic" | "manual"`
+- **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
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available