@neynar/ui 0.3.0 → 0.4.0

package/.llm/accordion-content.llm.md

@@ -0,0 +1,67 @@
+# AccordionContent
+
+**Type**: component
+
+AccordionContent - Collapsible content area of an accordion item The expandable content section that is revealed or hidden when the associated AccordionTrigger is activated. Features smooth height-based animations using Tailwind CSS keyframes and supports any React content including complex layouts.
+
+## JSX Usage
+
+```jsx
+import { AccordionContent } from '@neynar/ui';
+
+<AccordionContent
+  className="value"
+  forceMount={value}
+>
+  {/* Your content here */}
+</AccordionContent>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+### forceMount
+- **Type**: `true`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Simple text content
+<AccordionContent>
+  <p>This content is revealed when the accordion is expanded.</p>
+  <p>It can contain any React components or HTML elements.</p>
+</AccordionContent>
+```
+### Example 2
+```tsx
+// Rich content with components
+<AccordionContent>
+  <div className="space-y-4">
+    <Alert>
+      <InfoIcon className="h-4 w-4" />
+      <AlertTitle>Important Note</AlertTitle>
+      <AlertDescription>This is highlighted information.</AlertDescription>
+    </Alert>
+    <Button variant="outline">Take Action</Button>
+  </div>
+</AccordionContent>
+```
+### Example 3
+```tsx
+// Content with custom padding
+<AccordionContent className="pt-6 pb-6">
+  Content with extra vertical padding for better spacing.
+</AccordionContent>
+```

package/.llm/accordion-item.llm.md

@@ -0,0 +1,61 @@
+# AccordionItem
+
+**Type**: component
+
+AccordionItem - Individual collapsible panel within an accordion A container component that wraps a single accordion section consisting of a trigger and collapsible content. Each item requires a unique value prop for identification and state management. Provides consistent spacing and border styling.
+
+## JSX Usage
+
+```jsx
+import { AccordionItem } from '@neynar/ui';
+
+<AccordionItem
+  value="value"
+  disabled={true}
+  className="value"
+>
+  {/* Your content here */}
+</AccordionItem>
+```
+
+## 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
+
+## Examples
+
+### Example 1
+```tsx
+<AccordionItem value="settings">
+  <AccordionTrigger>Account Settings</AccordionTrigger>
+  <AccordionContent>
+    <p>Manage your account preferences and security settings.</p>
+  </AccordionContent>
+</AccordionItem>
+```
+### Example 2
+```tsx
+// With custom styling
+<AccordionItem value="custom" className="border-l-4 border-blue-500">
+  <AccordionTrigger>Custom Styled Item</AccordionTrigger>
+  <AccordionContent>Content with custom left border</AccordionContent>
+</AccordionItem>
+```

package/.llm/accordion-trigger.llm.md

@@ -0,0 +1,69 @@
+# AccordionTrigger
+
+**Type**: component
+
+AccordionTrigger - Clickable header that toggles accordion content visibility An interactive button element that users click or activate via keyboard to expand or collapse the associated accordion content. Features a rotating chevron icon for visual state indication and supports both text and custom content.
+
+## JSX Usage
+
+```jsx
+import { AccordionTrigger } from '@neynar/ui';
+
+<AccordionTrigger
+  className="value"
+  disabled={true}
+  asChild={true}
+>
+  {/* Your content here */}
+</AccordionTrigger>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+### disabled
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Simple text trigger
+<AccordionTrigger>
+  Click to expand this section
+</AccordionTrigger>
+```
+### Example 2
+```tsx
+// With icon and custom styling
+<AccordionTrigger className="text-lg font-semibold">
+  <User className="mr-2 h-4 w-4" />
+  User Profile Settings
+</AccordionTrigger>
+```
+### Example 3
+```tsx
+// With complex content
+<AccordionTrigger>
+  <div className="flex items-center justify-between w-full">
+    <span>Section Title</span>
+    <Badge variant="secondary">5 items</Badge>
+  </div>
+</AccordionTrigger>
+```

package/.llm/accordion.llm.md

@@ -0,0 +1,88 @@
+# Accordion
+
+**Type**: component
+
+Accordion - Collapsible content panels for organizing information A vertically stacked set of interactive headings that each reveal a section of content. Built on Radix UI Accordion primitives with optimized animations and accessibility. Supports both single and multiple expanded items simultaneously based on the type prop.
+
+## JSX Usage
+
+```jsx
+import { Accordion } from '@neynar/ui';
+
+<Accordion
+  disabled={true}
+  orientation={value}
+  dir={value}
+  className="value"
+>
+  {/* Your content here */}
+</Accordion>
+```
+
+## Component Props
+
+### disabled
+- **Type**: `boolean`
+- **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
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic single accordion (only one item can be open)
+<Accordion type="single" collapsible>
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Is it accessible?</AccordionTrigger>
+    <AccordionContent>
+      Yes. It adheres to the WAI-ARIA design pattern.
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+### Example 2
+```tsx
+// Multiple accordion (multiple items can be open)
+<Accordion type="multiple">
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Section 1</AccordionTrigger>
+    <AccordionContent>Content for section 1</AccordionContent>
+  </AccordionItem>
+  <AccordionItem value="item-2">
+    <AccordionTrigger>Section 2</AccordionTrigger>
+    <AccordionContent>Content for section 2</AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+### Example 3
+```tsx
+// FAQ-style accordion with default open state
+<Accordion type="single" collapsible defaultValue="faq-1">
+  <AccordionItem value="faq-1">
+    <AccordionTrigger>How do I get started?</AccordionTrigger>
+    <AccordionContent>
+      Follow our quick start guide to set up your first project.
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>
+```

package/.llm/alert-description.llm.md

@@ -0,0 +1,78 @@
+# AlertDescription
+
+**Type**: component
+
+AlertDescription - Detailed description text content for alerts The body content area of an alert that provides detailed information, context, or instructions related to the alert message. Automatically styled with muted text color and proper grid positioning. Supports rich content including paragraphs, links, and inline formatting. ## Features - Muted foreground color for visual hierarchy - Proper grid positioning (col-start-2) for icon layout compatibility - Support for multiple paragraphs with relaxed line height - Grid layout with start justification for text alignment - Semantic HTML structure with data-slot attribute - Small text size (text-sm) for readability - Responsive gap spacing between content elements
+
+## JSX Usage
+
+```jsx
+import { AlertDescription } from '@neynar/ui';
+
+<AlertDescription
+  className="value"
+>
+  {/* Your content here */}
+</AlertDescription>
+```
+
+## 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
+// Basic description with simple text
+<Alert>
+  <AlertTitle>Success</AlertTitle>
+  <AlertDescription>
+    Your account has been created successfully.
+  </AlertDescription>
+</Alert>
+```
+### Example 2
+```tsx
+// Description with multiple paragraphs
+<Alert variant="destructive">
+  <AlertCircle className="size-4" />
+  <AlertTitle>Connection Error</AlertTitle>
+  <AlertDescription>
+    <p>Unable to connect to the server. This could be due to:</p>
+    <p>• Network connectivity issues</p>
+    <p>• Server maintenance</p>
+    <p>Please try again in a few minutes.</p>
+  </AlertDescription>
+</Alert>
+```
+### Example 3
+```tsx
+// Description with links and rich content
+<Alert>
+  <Info className="size-4" />
+  <AlertTitle>Update Available</AlertTitle>
+  <AlertDescription>
+    A new version is available. <a href="/changelog" className="underline">View changelog</a> or
+    <button className="ml-1 underline">update now</button>.
+  </AlertDescription>
+</Alert>
+```
+### Example 4
+```tsx
+// Custom styled description
+<Alert>
+  <AlertTitle>Custom Alert</AlertTitle>
+  <AlertDescription className="text-sm font-medium text-foreground">
+    This description uses custom styling to override the default muted appearance.
+  </AlertDescription>
+</Alert>
+```

package/.llm/alert-dialog-action.llm.md

@@ -0,0 +1,51 @@
+# AlertDialogAction
+
+**Type**: component
+
+Primary action button of the alert dialog The button that confirms or executes the action being alerted about. Automatically receives focus when the dialog opens (unless overridden). Styled using buttonVariants() by default, but can be customized for destructive actions. Closes the dialog when clicked.
+
+## JSX Usage
+
+```jsx
+import { AlertDialogAction } from '@neynar/ui';
+
+<AlertDialogAction
+  asChild={true}
+  className="value"
+/>
+```
+
+## Component Props
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Render as child element, merging props and behavior
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes (useful for destructive styling)
+
+## Examples
+
+```tsx
+// Default action (primary button style)
+<AlertDialogAction>Continue</AlertDialogAction>
+<AlertDialogAction>Save Changes</AlertDialogAction>
+// Destructive action with red styling
+<AlertDialogAction className={buttonVariants({ variant: "destructive" })}>
+  Delete Account
+</AlertDialogAction>
+// Custom styled action
+<AlertDialogAction className="bg-green-600 hover:bg-green-700">
+  Confirm Action
+</AlertDialogAction>
+// Composition with custom button
+<AlertDialogAction asChild>
+  <Button variant="destructive" size="lg">
+    Delete Forever
+  </Button>
+</AlertDialogAction>
+```
+/

package/.llm/alert-dialog-cancel.llm.md

@@ -0,0 +1,48 @@
+# AlertDialogCancel
+
+**Type**: component
+
+Cancel button of the alert dialog The button that dismisses the dialog without performing the action. Styled using outline variant by default to de-emphasize compared to the primary action. Closes the dialog when clicked without triggering the main action.
+
+## JSX Usage
+
+```jsx
+import { AlertDialogCancel } from '@neynar/ui';
+
+<AlertDialogCancel
+  asChild={true}
+  className="value"
+/>
+```
+
+## Component Props
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Render as child element, merging props and behavior
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes for custom styling
+
+## Examples
+
+```tsx
+// Standard cancel buttons
+<AlertDialogCancel>Cancel</AlertDialogCancel>
+<AlertDialogCancel>No, keep it</AlertDialogCancel>
+<AlertDialogCancel>Go Back</AlertDialogCancel>
+// Custom styled cancel
+<AlertDialogCancel className="text-red-600">
+  Don't Delete
+</AlertDialogCancel>
+// Composition with custom button
+<AlertDialogCancel asChild>
+  <Button variant="ghost" size="sm">
+    Maybe Later
+  </Button>
+</AlertDialogCancel>
+```
+/

package/.llm/alert-dialog-content.llm.md

@@ -0,0 +1,88 @@
+# AlertDialogContent
+
+**Type**: component
+
+Main content container for the alert dialog The primary container that holds all alert dialog content. Automatically includes the portal and overlay, and provides default styling with responsive design. Centered on screen with smooth fade and zoom animations. Manages focus trapping and keyboard navigation automatically.
+
+## JSX Usage
+
+```jsx
+import { AlertDialogContent } from '@neynar/ui';
+
+<AlertDialogContent
+  asChild={true}
+  forceMount={true}
+  onOpenAutoFocus={handleOpenAutoFocus}
+  onCloseAutoFocus={handleCloseAutoFocus}
+  onEscapeKeyDown={handleEscapeKeyDown}
+  className="value"
+/>
+```
+
+## Component Props
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Render as child element, merging props and behavior
+
+### forceMount
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Force mount the component even when dialog is closed
+
+### onOpenAutoFocus
+- **Type**: `(event: Event) => void`
+- **Required**: No
+- **Description**: Callback when dialog opens and focus moves to content
+
+### onCloseAutoFocus
+- **Type**: `(event: Event) => void`
+- **Required**: No
+- **Description**: Callback when dialog closes and focus returns to trigger
+
+### onEscapeKeyDown
+- **Type**: `(event: KeyboardEvent) => void`
+- **Required**: No
+- **Description**: Callback when Escape key is pressed (can preventDefault)
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes for custom styling
+
+## Examples
+
+```tsx
+// Basic usage
+<AlertDialogContent>
+  <AlertDialogHeader>
+    <AlertDialogTitle>Confirm Action</AlertDialogTitle>
+    <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
+  </AlertDialogHeader>
+  <AlertDialogFooter>
+    <AlertDialogCancel>Cancel</AlertDialogCancel>
+    <AlertDialogAction>Continue</AlertDialogAction>
+  </AlertDialogFooter>
+</AlertDialogContent>
+// Custom focus handling
+<AlertDialogContent
+  onOpenAutoFocus={(e) => {
+    e.preventDefault();
+    customFocusTarget.focus();
+  }}
+  onEscapeKeyDown={(e) => {
+    if (hasUnsavedChanges) {
+      e.preventDefault();
+      showUnsavedWarning();
+    }
+  }}
+>
+  // content
+</AlertDialogContent>
+// Custom styling
+<AlertDialogContent className="max-w-md">
+  // smaller dialog
+</AlertDialogContent>
+```
+/

package/.llm/alert-dialog-description.llm.md

@@ -0,0 +1,53 @@
+# AlertDialogDescription
+
+**Type**: component
+
+Description text of the alert dialog Provides additional context and explanation for the alert or action. Should clearly explain the consequences of the action being confirmed. Automatically provides proper ARIA description via aria-describedby for screen readers. Can be omitted if aria-describedby is provided to Content.
+
+## JSX Usage
+
+```jsx
+import { AlertDialogDescription } from '@neynar/ui';
+
+<AlertDialogDescription
+  asChild={true}
+  className="value"
+/>
+```
+
+## Component Props
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Render as child element, merging props and behavior
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes for custom styling
+
+## Examples
+
+```tsx
+// Standard descriptions
+<AlertDialogDescription>
+  This action cannot be undone. This will permanently delete your
+  account and remove your data from our servers.
+</AlertDialogDescription>
+<AlertDialogDescription>
+  You will be signed out of all devices and will need to sign in again
+  to access your account.
+</AlertDialogDescription>
+// Custom styling
+<AlertDialogDescription className="text-center text-lg">
+  Are you sure you want to continue?
+</AlertDialogDescription>
+// Composition with custom element
+<AlertDialogDescription asChild>
+  <p className="custom-description">
+    Custom description element
+  </p>
+</AlertDialogDescription>
+```
+/

package/.llm/alert-dialog-footer.llm.md

@@ -0,0 +1,41 @@
+# AlertDialogFooter
+
+**Type**: component
+
+Footer section of the alert dialog Contains the action buttons (cancel and confirm). Uses responsive layout with stacked buttons on mobile (cancel on top) and horizontal layout on larger screens (cancel on left, action on right). Should contain AlertDialogCancel and AlertDialogAction for proper UX.
+
+## JSX Usage
+
+```jsx
+import { AlertDialogFooter } from '@neynar/ui';
+
+<AlertDialogFooter
+  className="value"
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes for custom styling
+
+## Examples
+
+```tsx
+<AlertDialogFooter>
+  <AlertDialogCancel>Cancel</AlertDialogCancel>
+  <AlertDialogAction>Delete Account</AlertDialogAction>
+</AlertDialogFooter>
+// Custom button order
+<AlertDialogFooter className="flex-row">
+  <AlertDialogAction>Continue</AlertDialogAction>
+  <AlertDialogCancel>Go Back</AlertDialogCancel>
+</AlertDialogFooter>
+// Single action footer
+<AlertDialogFooter>
+  <AlertDialogAction>I Understand</AlertDialogAction>
+</AlertDialogFooter>
+```
+/

package/.llm/alert-dialog-header.llm.md

@@ -0,0 +1,39 @@
+# AlertDialogHeader
+
+**Type**: component
+
+Header section of the alert dialog Contains the title and description of the alert dialog. Provides consistent spacing and alignment, with responsive text alignment (centered on mobile, left-aligned on larger screens). Should contain AlertDialogTitle and optionally AlertDialogDescription for proper accessibility.
+
+## JSX Usage
+
+```jsx
+import { AlertDialogHeader } from '@neynar/ui';
+
+<AlertDialogHeader
+  className="value"
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes for custom styling
+
+## Examples
+
+```tsx
+<AlertDialogHeader>
+  <AlertDialogTitle>Delete Account</AlertDialogTitle>
+  <AlertDialogDescription>
+    This will permanently delete your account and all associated data.
+    This action cannot be undone.
+  </AlertDialogDescription>
+</AlertDialogHeader>
+// Custom styling
+<AlertDialogHeader className="text-left">
+  <AlertDialogTitle>Custom Header</AlertDialogTitle>
+</AlertDialogHeader>
+```
+/