@neynar/ui 0.3.0 → 0.4.0

package/.llm/input-group-text.llm.md

@@ -0,0 +1,75 @@
+# InputGroupText
+
+**Type**: component
+
+InputGroupText - Static text or label content within an InputGroupAddon A span element for displaying non-interactive text, labels, prefixes, suffixes, or icons within an input group addon. Styled with muted foreground colors and optimized spacing. Commonly used for currency symbols, units of measurement, URL protocols, or descriptive labels.
+
+## JSX Usage
+
+```jsx
+import { InputGroupText } from '@neynar/ui';
+
+<InputGroupText
+  className="value"
+>
+  {/* Your content here */}
+</InputGroupText>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Currency symbol prefix
+<InputGroup>
+  <InputGroupAddon align="inline-start">
+    <DollarSign className="size-4" />
+  </InputGroupAddon>
+  <InputGroupInput type="number" placeholder="0.00" />
+  <InputGroupAddon align="inline-end">
+    <InputGroupText>USD</InputGroupText>
+  </InputGroupAddon>
+</InputGroup>
+```
+### Example 2
+```tsx
+// URL protocol prefix
+<InputGroup>
+  <InputGroupAddon align="inline-start">
+    <InputGroupText>https://</InputGroupText>
+  </InputGroupAddon>
+  <InputGroupInput placeholder="example.com" />
+</InputGroup>
+```
+### Example 3
+```tsx
+// Label for textarea
+<InputGroup>
+  <InputGroupAddon align="block-start">
+    <InputGroupText>Message</InputGroupText>
+  </InputGroupAddon>
+  <InputGroupTextarea placeholder="Type your message..." />
+</InputGroup>
+```
+### Example 4
+```tsx
+// Character counter
+<InputGroup>
+  <InputGroupTextarea placeholder="Comment..." />
+  <InputGroupAddon align="block-end">
+    <InputGroupText className="text-xs">250 characters</InputGroupText>
+  </InputGroupAddon>
+</InputGroup>
+```

package/.llm/input-group-textarea.llm.md

@@ -0,0 +1,157 @@
+# InputGroupTextarea
+
+**Type**: component
+
+InputGroupTextarea - Multi-line textarea element within an InputGroup A styled textarea component designed to work with InputGroup, especially with block-aligned addons (top/bottom positioning). Removes default borders and shadows as the parent InputGroup handles visual states. Resizing is disabled by default to maintain consistent layout with the container. Automatically flexes to fill available space.
+
+## JSX Usage
+
+```jsx
+import { InputGroupTextarea } from '@neynar/ui';
+
+<InputGroupTextarea
+  className="value"
+  placeholder="value"
+  rows={0}
+  value="value"
+  defaultValue="value"
+  onChange={handleChange}
+  disabled={true}
+  readOnly={true}
+  "aria-invalid"={value}
+  name="value"
+  id="value"
+  required={true}
+  maxLength={0}
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### placeholder
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### rows
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### value
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### defaultValue
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### onChange
+- **Type**: `React.ChangeEventHandler<HTMLTextAreaElement>`
+- **Required**: No
+- **Description**: No description available
+
+### disabled
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### readOnly
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### "aria-invalid"
+- **Type**: `boolean | "true" | "false"`
+- **Required**: No
+- **Description**: No description available
+
+### name
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### id
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### required
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### maxLength
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic textarea with label addon
+<InputGroup>
+  <InputGroupAddon align="block-start">
+    <InputGroupText>Message</InputGroupText>
+  </InputGroupAddon>
+  <InputGroupTextarea placeholder="Type your message here..." />
+</InputGroup>
+```
+### Example 2
+```tsx
+// Textarea with submit button below
+<InputGroup>
+  <InputGroupTextarea placeholder="Write your comment..." rows={4} />
+  <InputGroupAddon align="block-end">
+    <InputGroupButton size="sm">
+      <Send className="size-4" />
+      Post
+    </InputGroupButton>
+  </InputGroupAddon>
+</InputGroup>
+```
+### Example 3
+```tsx
+// Complete comment form with top and bottom addons
+<InputGroup>
+  <InputGroupAddon align="block-start">
+    <InputGroupText>Your Comment</InputGroupText>
+    <InputGroupButton size="icon-xs">
+      <X className="size-4" />
+    </InputGroupButton>
+  </InputGroupAddon>
+  <InputGroupTextarea placeholder="Add a comment..." rows={3} />
+  <InputGroupAddon align="block-end">
+    <InputGroupButton size="sm" variant="default">
+      Post Comment
+    </InputGroupButton>
+  </InputGroupAddon>
+</InputGroup>
+```
+### Example 4
+```tsx
+// Textarea with character counter
+const [message, setMessage] = useState("");
+<InputGroup>
+  <InputGroupTextarea
+    placeholder="Compose your message..."
+    value={message}
+    onChange={(e) => setMessage(e.target.value)}
+    rows={5}
+  />
+  <InputGroupAddon align="block-end">
+    <InputGroupText className="text-xs">
+      {message.length} characters
+    </InputGroupText>
+    <InputGroupButton size="sm">Send</InputGroupButton>
+  </InputGroupAddon>
+</InputGroup>
+```

package/.llm/input-group.llm.md

@@ -0,0 +1,108 @@
+# InputGroup
+
+**Type**: component
+
+InputGroup - Container for inputs with integrated addons, buttons, and text A flexible container component that combines text inputs or textareas with decorative or functional elements like icons, buttons, labels, and keyboard shortcuts. Supports both inline (left/right) and block (top/bottom) addon positioning for diverse layout needs. Provides unified focus states, error handling, and disabled states across all child elements.
+
+## JSX Usage
+
+```jsx
+import { InputGroup } from '@neynar/ui';
+
+<InputGroup
+  className="value"
+  "data-disabled"={value}
+>
+  {/* Your content here */}
+</InputGroup>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+### "data-disabled"
+- **Type**: `"true" | "false"`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Search input with icon and keyboard shortcut
+<InputGroup>
+  <InputGroupAddon align="inline-start">
+    <Search className="size-4" />
+  </InputGroupAddon>
+  <InputGroupInput placeholder="Search..." />
+  <InputGroupAddon align="inline-end">
+    <Kbd>⌘K</Kbd>
+  </InputGroupAddon>
+</InputGroup>
+```
+### Example 2
+```tsx
+// Email subscription form with submit button
+<InputGroup>
+  <InputGroupAddon align="inline-start">
+    <Mail className="size-4" />
+  </InputGroupAddon>
+  <InputGroupInput type="email" placeholder="Enter your email" />
+  <InputGroupAddon align="inline-end">
+    <InputGroupButton size="sm">Subscribe</InputGroupButton>
+  </InputGroupAddon>
+</InputGroup>
+```
+### Example 3
+```tsx
+// Price input with currency indicators
+<InputGroup>
+  <InputGroupAddon align="inline-start">
+    <DollarSign className="size-4" />
+  </InputGroupAddon>
+  <InputGroupInput type="number" placeholder="0.00" />
+  <InputGroupAddon align="inline-end">
+    <InputGroupText>USD</InputGroupText>
+  </InputGroupAddon>
+</InputGroup>
+```
+### Example 4
+```tsx
+// Comment textarea with block addons
+<InputGroup>
+  <InputGroupAddon align="block-start">
+    <InputGroupText>Your Comment</InputGroupText>
+  </InputGroupAddon>
+  <InputGroupTextarea placeholder="Write your comment..." rows={4} />
+  <InputGroupAddon align="block-end">
+    <InputGroupButton size="sm">
+      <Send className="size-4" />
+      Post
+    </InputGroupButton>
+  </InputGroupAddon>
+</InputGroup>
+```
+### Example 5
+```tsx
+// Error state with aria-invalid
+<InputGroup>
+  <InputGroupAddon align="inline-start">
+    <Mail className="size-4" />
+  </InputGroupAddon>
+  <InputGroupInput
+    type="email"
+    placeholder="Email"
+    aria-invalid="true"
+    defaultValue="invalid-email"
+  />
+</InputGroup>
+```

package/.llm/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>
+```