@neynar/ui 0.3.0 → 0.4.0

package/.llm/hover-card-content.llm.md

@@ -0,0 +1,167 @@
+# HoverCardContent
+
+**Type**: component
+
+HoverCardContent - Floating content container with intelligent positioning and animations The content area that appears when the trigger is hovered. Features built-in animations, intelligent positioning to avoid viewport boundaries, and customizable alignment options. Automatically portaled to prevent z-index and overflow issues, with smooth fade and scale transitions that respect user motion preferences. The content supports rich layouts including text, images, buttons, and complex components. Positioning is automatically calculated based on available space, with collision detection to ensure the content remains visible within the viewport.
+
+## JSX Usage
+
+```jsx
+import { HoverCardContent } from '@neynar/ui';
+
+<HoverCardContent
+  side={value}
+  sideOffset={0}
+  align={value}
+  alignOffset={0}
+  avoidCollisions={true}
+  collisionBoundary={value}
+  collisionPadding={value}
+  sticky={value}
+  hideWhenDetached={true}
+  forceMount={value}
+  asChild={true}
+  className="value"
+>
+  {/* Your content here */}
+</HoverCardContent>
+```
+
+## Component Props
+
+### side
+- **Type**: `"top" | "right" | "bottom" | "left"`
+- **Required**: No
+- **Description**: No description available
+
+### sideOffset
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### align
+- **Type**: `"start" | "center" | "end"`
+- **Required**: No
+- **Description**: No description available
+
+### alignOffset
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### avoidCollisions
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### collisionBoundary
+- **Type**: `Element | null | Array<Element | null>`
+- **Required**: No
+- **Description**: No description available
+
+### collisionPadding
+- **Type**: `| number
+    | Partial<Record<"top" | "right" | "bottom" | "left", number>>`
+- **Required**: No
+- **Description**: No description available
+
+### sticky
+- **Type**: `"partial" | "always"`
+- **Required**: No
+- **Description**: No description available
+
+### hideWhenDetached
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### forceMount
+- **Type**: `true`
+- **Required**: No
+- **Description**: No description available
+
+### asChild
+- **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
+
+### Example 1
+```tsx
+// Simple text content
+<HoverCardContent>
+  <p>This is a simple hover card with text content.</p>
+</HoverCardContent>
+```
+### Example 2
+```tsx
+// Positioned above the trigger with custom alignment
+<HoverCardContent side="top" align="start" sideOffset={8}>
+  <div className="text-sm">
+    Content appears above the trigger, aligned to the start edge
+  </div>
+</HoverCardContent>
+```
+### Example 3
+```tsx
+// Rich content with custom width and complex layout
+<HoverCardContent className="w-80">
+  <div className="space-y-3">
+    <div className="flex items-center gap-3">
+      <Avatar className="h-12 w-12">
+        <AvatarImage src="/avatar.jpg" />
+        <AvatarFallback>JD</AvatarFallback>
+      </Avatar>
+      <div>
+        <h4 className="font-semibold">John Doe</h4>
+        <p className="text-sm text-muted-foreground">Software Engineer</p>
+      </div>
+    </div>
+    <Separator />
+    <div className="grid grid-cols-2 gap-4 text-sm">
+      <div>
+        <p className="font-medium">Repositories</p>
+        <p className="text-muted-foreground">42</p>
+      </div>
+      <div>
+        <p className="font-medium">Followers</p>
+        <p className="text-muted-foreground">1.2k</p>
+      </div>
+    </div>
+  </div>
+</HoverCardContent>
+```
+### Example 4
+```tsx
+// Interactive content with buttons
+<HoverCardContent>
+  <div className="space-y-3">
+    <h4 className="font-semibold">Quick Actions</h4>
+    <div className="flex flex-col gap-2">
+      <Button size="sm" variant="ghost" className="justify-start">
+        <EditIcon className="mr-2 h-4 w-4" />
+        Edit Details
+      </Button>
+      <Button size="sm" variant="ghost" className="justify-start">
+        <ShareIcon className="mr-2 h-4 w-4" />
+        Share Profile
+      </Button>
+      <Button size="sm" variant="ghost" className="justify-start">
+        <SettingsIcon className="mr-2 h-4 w-4" />
+        Settings
+      </Button>
+    </div>
+  </div>
+</HoverCardContent>
+```

package/.llm/hover-card-trigger.llm.md

@@ -0,0 +1,65 @@
+# HoverCardTrigger
+
+**Type**: component
+
+HoverCardTrigger - Interactive element that activates the hover card on mouse hover The trigger component that users hover over to reveal the hover card content. Can wrap any element or render as its child using the asChild prop. Automatically manages hover detection and integrates with the parent HoverCard's timing configuration. When using asChild, the trigger merges its props with the immediate child element, allowing for seamless integration with buttons, links, or any other interactive elements.
+
+## JSX Usage
+
+```jsx
+import { HoverCardTrigger } from '@neynar/ui';
+
+<HoverCardTrigger
+  asChild={true}
+  className="value"
+>
+  {/* Your content here */}
+</HoverCardTrigger>
+```
+
+## Component Props
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic trigger with text
+<HoverCardTrigger>
+  <span className="text-blue-600 cursor-pointer">Hover for details</span>
+</HoverCardTrigger>
+```
+### Example 2
+```tsx
+// Using asChild with a button
+<HoverCardTrigger asChild>
+  <Button variant="outline">User Profile</Button>
+</HoverCardTrigger>
+```
+### Example 3
+```tsx
+// With a link element
+<HoverCardTrigger asChild>
+  <a href="/profile/john" className="font-medium hover:underline">
+### Example 4
+```tsx
+// Complex trigger with icon
+<HoverCardTrigger className="inline-flex items-center gap-2">
+  <UserIcon className="h-4 w-4" />
+  <span>View Profile</span>
+</HoverCardTrigger>
+```

package/.llm/hover-card.llm.md

@@ -0,0 +1,121 @@
+# HoverCard
+
+**Type**: component
+
+HoverCard - Preview content that appears on hover for rich contextual information A floating card component that reveals rich content when users hover over a trigger element. Designed specifically for sighted users to preview content available behind links without requiring navigation. Built on Radix UI primitives with smooth animations and intelligent positioning to avoid viewport boundaries. Perfect for user profiles, repository information, link previews, tooltips with complex content, and any contextual details that enhance the user experience without interrupting their current workflow.
+
+## JSX Usage
+
+```jsx
+import { HoverCard } from '@neynar/ui';
+
+<HoverCard
+  defaultOpen={true}
+  open={true}
+  onValueChange={handleValueChange}
+  openDelay={0}
+  closeDelay={0}
+>
+  {/* Your content here */}
+</HoverCard>
+```
+
+## Component Props
+
+### defaultOpen
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### open
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### onValueChange
+- **Type**: `(open: boolean) => void`
+- **Required**: No
+- **Description**: No description available
+
+### openDelay
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### closeDelay
+- **Type**: `number`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic user profile hover card
+<HoverCard>
+  <HoverCardTrigger asChild>
+    <Button variant="link">
+### Example 2
+```tsx
+// With custom positioning and delays
+<HoverCard openDelay={500} closeDelay={200}>
+  <HoverCardTrigger asChild>
+    <Button>Hover me</Button>
+  </HoverCardTrigger>
+  <HoverCardContent side="top" align="start">
+    Content appears above with custom alignment
+  </HoverCardContent>
+</HoverCard>
+```
+### Example 3
+```tsx
+// Interactive hover card with buttons
+<HoverCard>
+  <HoverCardTrigger asChild>
+    <Button variant="ghost">Quick Actions</Button>
+  </HoverCardTrigger>
+  <HoverCardContent>
+    <div className="space-y-2">
+      <h4 className="font-semibold">Available Actions</h4>
+      <div className="flex flex-col gap-1">
+        <Button size="sm" variant="ghost">Edit Profile</Button>
+        <Button size="sm" variant="ghost">View Analytics</Button>
+        <Button size="sm" variant="ghost">Manage Settings</Button>
+      </div>
+    </div>
+  </HoverCardContent>
+</HoverCard>
+```
+### Example 4
+```tsx
+// Link preview with rich content
+<HoverCard openDelay={300}>
+  <HoverCardTrigger asChild>
+    <a href="/article/123" className="text-blue-600 hover:underline">
+      Advanced React Patterns
+    </a>
+  </HoverCardTrigger>
+  <HoverCardContent className="w-96">
+    <div className="space-y-3">
+      <img src="/article-thumbnail.jpg" className="rounded w-full h-32 object-cover" />
+      <div>
+        <h4 className="font-semibold">Advanced React Patterns</h4>
+        <p className="text-sm text-muted-foreground">
+          Learn modern React patterns including render props, compound components,
+          and advanced hook compositions for scalable applications.
+        </p>
+        <div className="flex items-center gap-2 mt-2 text-xs text-muted-foreground">
+          <span>12 min read</span>
+          <span>•</span>
+          <span>Published Mar 15, 2024</span>
+        </div>
+      </div>
+    </div>
+  </HoverCardContent>
+</HoverCard>
+```

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