@neynar/ui 0.1.2 → 0.2.0

package/llm-docs/input.llm.md

@@ -0,0 +1,319 @@
+# Input
+
+**Type**: component
+
+Input - Versatile form input component for text, email, password, and other input types A flexible and accessible input component built on native HTML input elements with enhanced styling and form integration capabilities. Supports all HTML input types including text, email, password, number, file, date, and more. Features consistent design tokens, error states, focus management, and seamless integration with form libraries like React Hook Form.
+
+## JSX Usage
+
+```jsx
+import { Input } from '@neynar/ui';
+
+<Input
+  type={value}
+  placeholder="value"
+  value={value}
+  defaultValue={value}
+  disabled={true}
+  required={true}
+  readOnly={true}
+  id="value"
+  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}
+  "aria-invalid"={value}
+  "aria-describedby"="value"
+  "aria-labelledby"="value"
+  "aria-label"="value"
+  "aria-required"={value}
+  className="value"
+/>
+```
+
+## Component Props
+
+### 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
+
+### required
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### readOnly
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### id
+- **Type**: `string`
+- **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
+
+### "aria-invalid"
+- **Type**: `boolean | "false" | "true" | "grammar" | "spelling"`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-describedby"
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-labelledby"
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-label"
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-required"
+- **Type**: `boolean | "false" | "true"`
+- **Required**: No
+- **Description**: No description available
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic text input
+<Input type="text" placeholder="Enter your name" />
+```
+### Example 2
+```tsx
+// Email input with validation
+<Input
+  type="email"
+  placeholder="your
+### Example 3
+```tsx
+// Password input with toggle visibility
+<div className="relative">
+  <Input
+    type="password"
+    placeholder="Enter password"
+    autoComplete="current-password"
+  />
+  <Button
+    type="button"
+    variant="ghost"
+    size="sm"
+    className="absolute right-0 top-0 h-full px-3"
+  >
+    <Eye className="h-4 w-4" />
+  </Button>
+</div>
+```
+### Example 4
+```tsx
+// Number input with min/max constraints
+<Input
+  type="number"
+  placeholder="Age"
+  min={0}
+  max={120}
+  step={1}
+/>
+```
+### Example 5
+```tsx
+// File input with proper labeling
+<div className="grid w-full max-w-sm items-center gap-1.5">
+  <Label htmlFor="picture">Profile Picture</Label>
+  <Input
+    id="picture"
+    type="file"
+    accept="image/*"
+    aria-describedby="file-help"
+  />
+  <p id="file-help" className="text-sm text-muted-foreground">
+    Upload a PNG, JPG or GIF (max 5MB)
+  </p>
+</div>
+```
+### Example 6
+```tsx
+// Search input with icon
+<div className="relative">
+  <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 transform text-muted-foreground" />
+  <Input
+    type="search"
+    placeholder="Search..."
+    className="pl-8"
+  />
+</div>
+```
+### Example 7
+```tsx
+// Input with error state
+<div className="space-y-2">
+  <Label htmlFor="email">Email</Label>
+  <Input
+    id="email"
+    type="email"
+    aria-invalid={true}
+    aria-describedby="email-error"
+  />
+  <p id="email-error" className="text-sm text-destructive">
+    Please enter a valid email address
+  </p>
+</div>
+```
+### Example 8
+```tsx
+// Form integration with React Hook Form
+const { register, formState: { errors } } = useForm();
+<div className="space-y-2">
+  <Label htmlFor="username">Username</Label>
+  <Input
+    id="username"
+    {...register("username", { required: "Username is required" })}
+    aria-invalid={!!errors.username}
+    aria-describedby={errors.username ? "username-error" : undefined}
+  />
+  {errors.username && (
+    <p id="username-error" className="text-sm text-destructive">
+      {errors.username.message}
+    </p>
+  )}
+</div>
+```
+### Example 9
+```tsx
+// Input with button (subscription form)
+<div className="flex w-full max-w-sm items-center space-x-2">
+  <Input
+    type="email"
+    placeholder="Enter your email"
+    aria-label="Email for newsletter"
+  />
+  <Button type="submit">Subscribe</Button>
+</div>
+```
+### Example 10
+```tsx
+// Disabled input with explanation
+<div className="space-y-2">
+  <Label htmlFor="readonly-field">System Generated ID</Label>
+  <Input
+    id="readonly-field"
+    value="SYS-12345"
+    disabled
+    aria-describedby="readonly-help"
+  />
+  <p id="readonly-help" className="text-sm text-muted-foreground">
+    This value is automatically generated and cannot be edited
+  </p>
+</div>
+```

package/llm-docs/label.llm.md

@@ -0,0 +1,145 @@
+# Label
+
+**Type**: component
+
+Label component for form controls with full accessibility support A fundamental form component that provides accessible text labels for form controls. Built on Radix UI Label primitive, it automatically associates with form elements and expands their clickable area for improved usability and accessibility. Essential for creating accessible forms that meet WCAG guidelines.
+
+## JSX Usage
+
+```jsx
+import { Label } from '@neynar/ui';
+
+<Label
+  className="value"
+  htmlFor="value"
+  asChild={true}
+  onClick={handleClick}
+  onKeyDown={handleKeyDown}
+  id="value"
+  style={value}
+  tabIndex={0}
+  "aria-label"="value"
+  "aria-describedby"="value"
+  "aria-invalid"={true}
+  "aria-required"={true}
+>
+  {/* Your content here */}
+</Label>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### htmlFor
+- **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
+
+### onClick
+- **Type**: `React.MouseEventHandler<HTMLLabelElement>`
+- **Required**: No
+- **Description**: No description available
+
+### onKeyDown
+- **Type**: `React.KeyboardEventHandler<HTMLLabelElement>`
+- **Required**: No
+- **Description**: No description available
+
+### id
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### style
+- **Type**: `React.CSSProperties`
+- **Required**: No
+- **Description**: No description available
+
+### tabIndex
+- **Type**: `number`
+- **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
+
+### "aria-invalid"
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-required"
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic label with input
+<div className="space-y-2">
+  <Label htmlFor="email">Email address</Label>
+  <Input id="email" type="email" placeholder="Enter your email" />
+</div>
+```
+### Example 2
+```tsx
+// Required field with indicator
+<Label htmlFor="username">
+  Username <span className="text-destructive">*</span>
+</Label>
+<Input id="username" required />
+```
+### Example 3
+```tsx
+// Checkbox with label
+<div className="flex items-center space-x-2">
+  <Checkbox id="terms" />
+  <Label htmlFor="terms" className="text-sm font-normal">
+    I agree to the terms and conditions
+  </Label>
+</div>
+```
+### Example 4
+```tsx
+// Label with helper text
+<div className="space-y-1">
+  <Label htmlFor="password">Password</Label>
+  <Input id="password" type="password" />
+  <p className="text-sm text-muted-foreground">
+    Must be at least 8 characters long
+  </p>
+</div>
+```
+### Example 5
+```tsx
+// Complex label with nested content
+<Label htmlFor="plan" className="flex flex-col space-y-1 cursor-pointer">
+  <span className="font-semibold">Choose your plan</span>
+  <span className="text-sm text-muted-foreground">
+    You can upgrade or downgrade anytime
+  </span>
+</Label>
+```

package/llm-docs/lead.llm.md

@@ -0,0 +1,119 @@
+# Lead
+
+**Type**: component
+
+Lead - Introductory paragraph component for article openings Lead paragraph for article introductions, page descriptions, and summary content. Uses "subheading" variant with muted color for visual hierarchy.
+
+## JSX Usage
+
+```jsx
+import { Lead } from '@neynar/ui';
+
+<Lead
+  color={value}
+  align={value}
+  transform={value}
+  weight={value}
+  htmlFor="value"
+  asChild={true}
+  italic={true}
+  underline={true}
+  strikethrough={true}
+  truncate={true}
+  srOnly={true}
+  className="value"
+>
+  {/* Your content here */}
+</Lead>
+```
+
+## Component Props
+
+### color
+- **Type**: `| "default"
+    | "muted"
+    | "accent"
+    | "destructive"
+    | "success"
+    | "warning"`
+- **Required**: No
+- **Description**: No description available
+
+### align
+- **Type**: `"left" | "center" | "right" | "justify"`
+- **Required**: No
+- **Description**: No description available
+
+### transform
+- **Type**: `"uppercase" | "lowercase" | "capitalize"`
+- **Required**: No
+- **Description**: No description available
+
+### weight
+- **Type**: `"normal" | "medium" | "semibold" | "bold"`
+- **Required**: No
+- **Description**: No description available
+
+### htmlFor
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### italic
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### underline
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### strikethrough
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### truncate
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### srOnly
+- **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
+
+## Examples
+
+```tsx
+// Article introduction
+<Lead>
+  This comprehensive guide covers everything you need to know about
+  building modern web applications with React and TypeScript.
+</Lead>
+// Page description
+<Lead className="mb-8">
+  Discover powerful APIs and tools to build the next generation
+  of social applications on Farcaster.
+</Lead>
+// With custom color
+<Lead color="default">
+  This lead paragraph uses the default text color for more prominence.
+</Lead>
+```

package/llm-docs/menubar-checkbox-item.llm.md

@@ -0,0 +1,66 @@
+# MenubarCheckboxItem
+
+**Type**: component
+
+A menu item that can be checked/unchecked. Perfect for toggle options like "Show Toolbar", "Enable Feature", or any binary setting that can be turned on/off. Displays a checkmark icon when checked.
+
+## JSX Usage
+
+```jsx
+import { MenubarCheckboxItem } from '@neynar/ui';
+
+<MenubarCheckboxItem
+  className="value"
+  checked={value}
+  onCheckedChange={handleCheckedChange}
+  disabled={true}
+  onSelect={handleSelect}
+  textValue="value"
+>
+  {/* Your content here */}
+</MenubarCheckboxItem>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes to apply to the checkbox item
+
+### checked
+- **Type**: `boolean | "indeterminate"`
+- **Required**: No
+- **Description**: The controlled checked state of the item. Must be used in conjunction with onCheckedChange
+
+### onCheckedChange
+- **Type**: `(checked: boolean) => void`
+- **Required**: No
+- **Description**: Event handler called when the checked state changes
+
+### disabled
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: When true, prevents the user from interacting with the item
+
+### onSelect
+- **Type**: `(event: Event) => void`
+- **Required**: No
+- **Description**: Event handler called when the user selects an item (via mouse or keyboard)
+
+### textValue
+- **Type**: `string`
+- **Required**: No
+- **Description**: Optional text used for typeahead purposes when content is complex
+
+## Examples
+
+```tsx
+<MenubarCheckboxItem
+  checked={showLineNumbers}
+  onCheckedChange={setShowLineNumbers}
+>
+  Show Line Numbers
+</MenubarCheckboxItem>
+```
+/