@neynar/ui 0.3.0 → 0.4.0

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

package/.llm/text-field.llm.md

@@ -0,0 +1,327 @@
+# TextField
+
+**Type**: component
+
+TextField - Complete form field with label, input, and descriptive text A comprehensive form field component that combines Input and Label components with additional helper text and error handling capabilities. Automatically manages accessibility attributes, ID generation, and ARIA relationships to ensure forms are usable by all users including those using assistive technologies. Built on top of the Input and Label primitives, TextField provides a complete form field solution with consistent styling, proper semantic markup, and enhanced UX features. Supports all HTML input types while adding form validation states, descriptive text, and automatic accessibility compliance.
+
+## JSX Usage
+
+```jsx
+import { TextField } from '@neynar/ui';
+
+<TextField
+  label="value"
+  helperText="value"
+  error="value"
+  required={true}
+  id="value"
+  type={value}
+  placeholder="value"
+  value={value}
+  defaultValue={value}
+  disabled={true}
+  readOnly={true}
+  name="value"
+  autoComplete="value"
+  autoFocus={true}
+  maxLength={0}
+  minLength={0}
+  pattern="value"
+  min={value}
+  max={value}
+  step={value}
+  onChange={handleChange}
+  onFocus={handleFocus}
+  onBlur={handleBlur}
+  onKeyDown={handleKeyDown}
+  onKeyUp={handleKeyUp}
+  className="value"
+/>
+```
+
+## Component Props
+
+### label
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### helperText
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### error
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### required
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### id
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### type
+- **Type**: `React.HTMLInputTypeAttribute`
+- **Required**: No
+- **Description**: No description available
+
+### placeholder
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### value
+- **Type**: `string | ReadonlyArray<string> | number`
+- **Required**: No
+- **Description**: No description available
+
+### defaultValue
+- **Type**: `string | ReadonlyArray<string> | number`
+- **Required**: No
+- **Description**: No description available
+
+### disabled
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### readOnly
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### name
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### autoComplete
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### autoFocus
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### maxLength
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### minLength
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### pattern
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### min
+- **Type**: `string | number`
+- **Required**: No
+- **Description**: No description available
+
+### max
+- **Type**: `string | number`
+- **Required**: No
+- **Description**: No description available
+
+### step
+- **Type**: `string | number`
+- **Required**: No
+- **Description**: No description available
+
+### onChange
+- **Type**: `(event: React.ChangeEvent<HTMLInputElement>) => void`
+- **Required**: No
+- **Description**: No description available
+
+### onFocus
+- **Type**: `(event: React.FocusEvent<HTMLInputElement>) => void`
+- **Required**: No
+- **Description**: No description available
+
+### onBlur
+- **Type**: `(event: React.FocusEvent<HTMLInputElement>) => void`
+- **Required**: No
+- **Description**: No description available
+
+### onKeyDown
+- **Type**: `(event: React.KeyboardEvent<HTMLInputElement>) => void`
+- **Required**: No
+- **Description**: No description available
+
+### onKeyUp
+- **Type**: `(event: React.KeyboardEvent<HTMLInputElement>) => void`
+- **Required**: No
+- **Description**: No description available
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic text input with label
+<TextField
+  label="Email Address"
+  type="email"
+  placeholder="Enter your email"
+  name="email"
+/>
+```
+### Example 2
+```tsx
+// Required field with helper text
+<TextField
+  label="Username"
+  placeholder="
+### Example 3
+```tsx
+// Password field with validation error
+<TextField
+  label="Password"
+  type="password"
+  required
+  error="Password must be at least 8 characters long"
+  value={password}
+  onChange={(e) => setPassword(e.target.value)}
+  minLength={8}
+  autoComplete="new-password"
+/>
+```
+### Example 4
+```tsx
+// Controlled component with real-time validation
+const [email, setEmail] = useState("");
+const [error, setError] = useState("");
+const validateEmail = (value: string) => {
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  if (!emailRegex.test(value)) {
+    setError("Please enter a valid email address");
+  } else {
+    setError("");
+  }
+};
+<TextField
+  label="Email"
+  type="email"
+  value={email}
+  onChange={(e) => {
+    setEmail(e.target.value);
+    validateEmail(e.target.value);
+  }}
+  onBlur={(e) => validateEmail(e.target.value)}
+  error={error}
+  required
+  autoComplete="email"
+/>
+```
+### Example 5
+```tsx
+// Number input with constraints
+<TextField
+  label="Age"
+  type="number"
+  min={0}
+  max={120}
+  step={1}
+  helperText="Enter your age in years"
+  placeholder="25"
+/>
+```
+### Example 6
+```tsx
+// Search input with custom styling
+<TextField
+  label="Search"
+  type="search"
+  placeholder="Search products..."
+  className="max-w-md"
+  onKeyDown={(e) => {
+    if (e.key === 'Enter') {
+      handleSearch(e.currentTarget.value);
+    }
+  }}
+/>
+```
+### Example 7
+```tsx
+// Form integration with React Hook Form
+const { register, formState: { errors } } = useForm();
+<form onSubmit={handleSubmit(onSubmit)}>
+  <TextField
+    label="Full Name"
+    {...register("fullName", { required: "Full name is required" })}
+    error={errors.fullName?.message}
+    helperText="Enter your first and last name"
+  />
+  <TextField
+    label="Phone Number"
+    type="tel"
+    {...register("phone", {
+      pattern: {
+        value: /^[\+]?[1-9][\d]{0,15}$/,
+        message: "Please enter a valid phone number"
+      }
+    })}
+    error={errors.phone?.message}
+    autoComplete="tel"
+  />
+</form>
+```
+### Example 8
+```tsx
+// File input with custom validation
+<TextField
+  label="Profile Picture"
+  type="file"
+  accept="image/*"
+  helperText="Upload a PNG, JPG or GIF (max 5MB)"
+  onChange={(e) => {
+    const file = e.target.files?.[0];
+    if (file && file.size > 5 * 1024 * 1024) {
+      setError("File size must be less than 5MB");
+    } else {
+      setError("");
+      handleFileUpload(file);
+    }
+  }}
+  error={fileError}
+/>
+```
+### Example 9
+```tsx
+// Date input with range constraints
+<TextField
+  label="Birth Date"
+  type="date"
+  min="1900-01-01"
+  max={new Date().toISOString().split('T')[0]}
+  helperText="You must be 18 or older to register"
+  required
+/>
+```
+### Example 10
+```tsx
+// Disabled field with explanation
+<TextField
+  label="Account ID"
+  value="ACC-12345"
+  disabled
+  helperText="This value is automatically generated and cannot be changed"
+/>
+```