@neynar/ui 0.2.1 → 0.3.1

package/.llm/field-title.llm.md

@@ -0,0 +1,28 @@
+# FieldTitle
+
+**Type**: component
+
+FieldTitle component
+
+## JSX Usage
+
+```jsx
+import { FieldTitle } from '@neynar/ui';
+
+<FieldTitle
+  className={value}
+  ...props={value}
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available
+
+### ...props
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available

package/.llm/field.llm.md

@@ -0,0 +1,35 @@
+# Field
+
+**Type**: component
+
+Field component
+
+## JSX Usage
+
+```jsx
+import { Field } from '@neynar/ui';
+
+<Field
+  className={value}
+  orientation="vertical"
+  ...props={value}
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available
+
+### orientation
+- **Type**: `unknown`
+- **Required**: No
+- **Description**: No description available
+- **Default**: "vertical"
+
+### ...props
+- **Type**: `unknown`
+- **Required**: Yes
+- **Description**: No description available

package/{llm-docs → .llm}/h1.llm.md

@@ -2,7 +2,7 @@
 
 **Type**: component
 
-H1 - Primary page heading component The main heading for a page or major section. Uses the "heading" variant with h1 semantic element. Should be used once per page for proper document outline and SEO.
+H1 - Primary page heading component The main heading for a page or major section. Uses the "displayTitle" variant with h1 semantic element. Should be used once per page for proper document outline and SEO.
 
 ## JSX Usage
 
@@ -30,12 +30,7 @@ import { H1 } from '@neynar/ui';
 ## Component Props
 
 ### color
-- **Type**: `| "default"
-    | "muted"
-    | "accent"
-    | "destructive"
-    | "success"
-    | "warning"`
+- **Type**: `TypographyColor`
 - **Required**: No
 - **Description**: No description available
 

package/{llm-docs → .llm}/h2.llm.md

@@ -2,7 +2,7 @@
 
 **Type**: component
 
-H2 - Secondary section heading component Section headings that divide page content into logical groups. Uses the "subheading" variant with h2 semantic element. Essential for creating proper document hierarchy.
+H2 - Secondary section heading component Section headings that divide page content into logical groups. Uses the "sectionTitle" variant with h2 semantic element. Essential for creating proper document hierarchy.
 
 ## JSX Usage
 
@@ -30,12 +30,7 @@ import { H2 } from '@neynar/ui';
 ## Component Props
 
 ### color
-- **Type**: `| "default"
-    | "muted"
-    | "accent"
-    | "destructive"
-    | "success"
-    | "warning"`
+- **Type**: `TypographyColor`
 - **Required**: No
 - **Description**: No description available
 

package/{llm-docs → .llm}/h3.llm.md

@@ -2,7 +2,7 @@
 
 **Type**: component
 
-H3 - Tertiary subsection heading component Subsection headings for further content division. Uses the "subheading" variant with h3 semantic element for consistent visual hierarchy.
+H3 - Tertiary subsection heading component Subsection headings for further content division. Uses the "headline" variant with h3 semantic element for consistent visual hierarchy.
 
 ## JSX Usage
 
@@ -30,12 +30,7 @@ import { H3 } from '@neynar/ui';
 ## Component Props
 
 ### color
-- **Type**: `| "default"
-    | "muted"
-    | "accent"
-    | "destructive"
-    | "success"
-    | "warning"`
+- **Type**: `TypographyColor`
 - **Required**: No
 - **Description**: No description available
 

package/{llm-docs → .llm}/h4.llm.md

@@ -2,7 +2,7 @@
 
 **Type**: component
 
-H4 - Minor heading component for detailed sections Minor headings for detailed content organization. Uses "bodyEmphasized" variant with h4 semantic element for subtle but distinct hierarchy.
+H4 - Minor heading component for detailed sections Minor headings for detailed content organization. Uses "subHeadline" variant with h4 semantic element for subtle but distinct hierarchy.
 
 ## JSX Usage
 
@@ -30,12 +30,7 @@ import { H4 } from '@neynar/ui';
 ## Component Props
 
 ### color
-- **Type**: `| "default"
-    | "muted"
-    | "accent"
-    | "destructive"
-    | "success"
-    | "warning"`
+- **Type**: `TypographyColor`
 - **Required**: No
 - **Description**: No description available
 

package/{llm-docs → .llm}/h5.llm.md

@@ -2,7 +2,7 @@
 
 **Type**: component
 
-H5 - Small heading component for micro-sections Small headings for very specific content divisions. Uses "bodyEmphasized" variant with h5 semantic element.
+H5 - Small heading component for micro-sections Small headings for very specific content divisions. Uses "eyebrow" variant with h5 semantic element.
 
 ## JSX Usage
 
@@ -30,12 +30,7 @@ import { H5 } from '@neynar/ui';
 ## Component Props
 
 ### color
-- **Type**: `| "default"
-    | "muted"
-    | "accent"
-    | "destructive"
-    | "success"
-    | "warning"`
+- **Type**: `TypographyColor`
 - **Required**: No
 - **Description**: No description available
 

package/{llm-docs → .llm}/h6.llm.md

@@ -30,12 +30,7 @@ import { H6 } from '@neynar/ui';
 ## Component Props
 
 ### color
-- **Type**: `| "default"
-    | "muted"
-    | "accent"
-    | "destructive"
-    | "success"
-    | "warning"`
+- **Type**: `TypographyColor`
 - **Required**: No
 - **Description**: No description available
 

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

@@ -0,0 +1,91 @@
+# InputGroupAddon
+
+**Type**: component
+
+InputGroupAddon - Container for icons, buttons, text, or labels within an InputGroup A flexible addon container that can be positioned at any edge of the input (left, right, top, or bottom). Automatically adjusts layout and spacing based on alignment. Clicking the addon area focuses the associated input for improved usability. Supports icons, static text, buttons, keyboard shortcuts (Kbd), and custom content.
+
+## JSX Usage
+
+```jsx
+import { InputGroupAddon } from '@neynar/ui';
+
+<InputGroupAddon
+  align={value}
+  className="value"
+>
+  {/* Your content here */}
+</InputGroupAddon>
+```
+
+## Component Props
+
+### align
+- **Type**: `"inline-start" | "inline-end" | "block-start" | "block-end"`
+- **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
+
+### Example 1
+```tsx
+// Icon addon on the left (inline-start)
+<InputGroup>
+  <InputGroupAddon align="inline-start">
+    <Search className="size-4" />
+  </InputGroupAddon>
+  <InputGroupInput placeholder="Search..." />
+</InputGroup>
+```
+### Example 2
+```tsx
+// Text suffix on the right (inline-end)
+<InputGroup>
+  <InputGroupInput placeholder="Enter amount" />
+  <InputGroupAddon align="inline-end">
+    <InputGroupText>USD</InputGroupText>
+  </InputGroupAddon>
+</InputGroup>
+```
+### Example 3
+```tsx
+// Button addon for action
+<InputGroup>
+  <InputGroupInput placeholder="Enter coupon code" />
+  <InputGroupAddon align="inline-end">
+    <InputGroupButton size="sm">Apply</InputGroupButton>
+  </InputGroupAddon>
+</InputGroup>
+```
+### Example 4
+```tsx
+// Keyboard shortcut indicator
+<InputGroup>
+  <InputGroupInput placeholder="Quick search" />
+  <InputGroupAddon align="inline-end">
+    <Kbd>⌘K</Kbd>
+  </InputGroupAddon>
+</InputGroup>
+```
+### Example 5
+```tsx
+// Block addon with multiple elements (top position)
+<InputGroup>
+  <InputGroupAddon align="block-start">
+    <InputGroupText>Message</InputGroupText>
+    <InputGroupButton size="icon-xs">
+      <X className="size-4" />
+    </InputGroupButton>
+  </InputGroupAddon>
+  <InputGroupTextarea placeholder="Type your message..." />
+</InputGroup>
+```

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

@@ -0,0 +1,120 @@
+# InputGroupButton
+
+**Type**: component
+
+InputGroupButton - Action button within an InputGroupAddon A specialized button component optimized for use within input group addons. Styled with reduced shadows and compact sizing to integrate seamlessly with the input group container. Supports text buttons, icon buttons, and combination buttons with various size options. Uses ghost variant by default for subtle integration with the input group.
+
+## JSX Usage
+
+```jsx
+import { InputGroupButton } from '@neynar/ui';
+
+<InputGroupButton
+  size={value}
+  variant={value}
+  type={value}
+  className="value"
+  onClick={handleClick}
+  disabled={true}
+>
+  {/* Your content here */}
+</InputGroupButton>
+```
+
+## Component Props
+
+### size
+- **Type**: `"xs" | "sm" | "icon-xs" | "icon-sm"`
+- **Required**: No
+- **Description**: No description available
+
+### variant
+- **Type**: `"default" | "destructive" | "outline" | "secondary" | "ghost" | "link"`
+- **Required**: No
+- **Description**: No description available
+
+### type
+- **Type**: `"button" | "submit" | "reset"`
+- **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
+
+### onClick
+- **Type**: `React.MouseEventHandler<HTMLButtonElement>`
+- **Required**: No
+- **Description**: No description available
+
+### disabled
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Text button for action
+<InputGroup>
+  <InputGroupInput placeholder="Enter coupon code" />
+  <InputGroupAddon align="inline-end">
+    <InputGroupButton size="sm">Apply</InputGroupButton>
+  </InputGroupAddon>
+</InputGroup>
+```
+### Example 2
+```tsx
+// Icon-only button for compact actions
+<InputGroup>
+  <InputGroupInput readOnly value="API Key: sk_live_123..." />
+  <InputGroupAddon align="inline-end">
+    <InputGroupButton size="icon-xs">
+      <Copy className="size-4" />
+    </InputGroupButton>
+  </InputGroupAddon>
+</InputGroup>
+```
+### Example 3
+```tsx
+// Button with icon and text
+<InputGroup>
+  <InputGroupInput type="email" placeholder="Enter email" />
+  <InputGroupAddon align="inline-end">
+    <InputGroupButton size="sm">
+      <Send className="size-4" />
+      Subscribe
+    </InputGroupButton>
+  </InputGroupAddon>
+</InputGroup>
+```
+### Example 4
+```tsx
+// Submit button in block addon
+<InputGroup>
+  <InputGroupTextarea placeholder="Write your message..." />
+  <InputGroupAddon align="block-end">
+    <InputGroupButton size="sm" variant="default" type="submit">
+      Post Comment
+    </InputGroupButton>
+  </InputGroupAddon>
+</InputGroup>
+```
+### Example 5
+```tsx
+// Multiple buttons with different variants
+<InputGroup>
+  <InputGroupTextarea placeholder="Compose..." />
+  <InputGroupAddon align="block-end">
+    <InputGroupButton size="sm" variant="outline">Cancel</InputGroupButton>
+    <InputGroupButton size="sm" variant="default">Send</InputGroupButton>
+  </InputGroupAddon>
+</InputGroup>
+```

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

@@ -0,0 +1,145 @@
+# InputGroupInput
+
+**Type**: component
+
+InputGroupInput - Text input element within an InputGroup A styled input component designed to work seamlessly within an InputGroup container. Inherits all standard HTML input props and removes default borders, shadows, and focus rings since the parent InputGroup handles visual states. Automatically flexes to fill available space between addons.
+
+## JSX Usage
+
+```jsx
+import { InputGroupInput } from '@neynar/ui';
+
+<InputGroupInput
+  className="value"
+  placeholder="value"
+  type={value}
+  value={value}
+  defaultValue={value}
+  onChange={handleChange}
+  disabled={true}
+  readOnly={true}
+  "aria-invalid"={value}
+  name="value"
+  id="value"
+  required={true}
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### placeholder
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### type
+- **Type**: `React.HTMLInputTypeAttribute`
+- **Required**: No
+- **Description**: No description available
+
+### value
+- **Type**: `string | number`
+- **Required**: No
+- **Description**: No description available
+
+### defaultValue
+- **Type**: `string | number`
+- **Required**: No
+- **Description**: No description available
+
+### onChange
+- **Type**: `React.ChangeEventHandler<HTMLInputElement>`
+- **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
+
+## Examples
+
+### Example 1
+```tsx
+// Basic text input with icon
+<InputGroup>
+  <InputGroupAddon align="inline-start">
+    <Search className="size-4" />
+  </InputGroupAddon>
+  <InputGroupInput placeholder="Search..." />
+</InputGroup>
+```
+### Example 2
+```tsx
+// Email input with validation
+<InputGroup>
+  <InputGroupAddon align="inline-start">
+    <Mail className="size-4" />
+  </InputGroupAddon>
+  <InputGroupInput
+    type="email"
+    placeholder="you
+### Example 3
+```tsx
+// Controlled number input
+const [amount, setAmount] = useState("");
+<InputGroup>
+  <InputGroupAddon align="inline-start">
+    <DollarSign className="size-4" />
+  </InputGroupAddon>
+  <InputGroupInput
+    type="number"
+    placeholder="0.00"
+    value={amount}
+    onChange={(e) => setAmount(e.target.value)}
+  />
+  <InputGroupAddon align="inline-end">
+    <InputGroupText>USD</InputGroupText>
+  </InputGroupAddon>
+</InputGroup>
+```
+### Example 4
+```tsx
+// Read-only input for displaying values
+<InputGroup>
+  <InputGroupInput
+    readOnly
+    value="API Key: sk_live_123456789"
+  />
+  <InputGroupAddon align="inline-end">
+    <InputGroupButton size="icon-xs">
+      <Copy className="size-4" />
+    </InputGroupButton>
+  </InputGroupAddon>
+</InputGroup>
+```

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>
+```