@neynar/ui 0.1.2 → 0.2.0

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

package/llm-docs/alert-dialog-overlay.llm.md

@@ -0,0 +1,44 @@
+# AlertDialogOverlay
+
+**Type**: component
+
+Overlay backdrop behind the alert dialog A semi-transparent backdrop that covers the entire viewport when the dialog is open. Provides visual separation and prevents interaction with background content. Includes smooth fade in/out animations and proper z-index stacking.
+
+## JSX Usage
+
+```jsx
+import { AlertDialogOverlay } from '@neynar/ui';
+
+<AlertDialogOverlay
+  asChild={true}
+  forceMount={true}
+  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
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: Additional CSS classes for custom styling
+
+## Examples
+
+```tsx
+// Custom overlay styling
+<AlertDialogOverlay className="bg-black/80" />
+// Force mounted overlay
+<AlertDialogOverlay forceMount className="custom-backdrop" />
+```
+/

package/llm-docs/alert-dialog-portal.llm.md

@@ -0,0 +1,41 @@
+# AlertDialogPortal
+
+**Type**: component
+
+Portal component for rendering dialog outside normal DOM tree Renders the alert dialog content into a portal, typically at the end of the document body. This ensures the dialog appears above other content and is properly accessible. Usually not used directly - AlertDialogContent includes this automatically.
+
+## JSX Usage
+
+```jsx
+import { AlertDialogPortal } from '@neynar/ui';
+
+<AlertDialogPortal
+  forceMount={true}
+  container={value}
+/>
+```
+
+## Component Props
+
+### forceMount
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Force mount the component even when dialog is closed
+
+### container
+- **Type**: `HTMLElement`
+- **Required**: No
+- **Description**: Container element to portal into (defaults to document.body)
+
+## Examples
+
+```tsx
+// Custom portal container
+<AlertDialogPortal container={customContainer}>
+  <AlertDialogOverlay />
+  <AlertDialogPrimitive.Content>
+    // content
+  </AlertDialogPrimitive.Content>
+</AlertDialogPortal>
+```
+/

package/llm-docs/alert-dialog-title.llm.md

@@ -0,0 +1,46 @@
+# AlertDialogTitle
+
+**Type**: component
+
+Title heading of the alert dialog The main heading that describes the alert or action being confirmed. Automatically provides proper ARIA labeling for screen readers via aria-labelledby. Should be concise and clearly state what the dialog is asking.
+
+## JSX Usage
+
+```jsx
+import { AlertDialogTitle } from '@neynar/ui';
+
+<AlertDialogTitle
+  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 titles
+<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+<AlertDialogTitle>Delete Account</AlertDialogTitle>
+<AlertDialogTitle>Confirm Sign Out</AlertDialogTitle>
+// Custom styling
+<AlertDialogTitle className="text-red-600 text-xl">
+  Destructive Action
+</AlertDialogTitle>
+// Composition with custom element
+<AlertDialogTitle asChild>
+  <h1 className="custom-title">Custom Title Element</h1>
+</AlertDialogTitle>
+```
+/

package/llm-docs/alert-dialog-trigger.llm.md

@@ -0,0 +1,40 @@
+# AlertDialogTrigger
+
+**Type**: component
+
+Trigger element that opens the alert dialog The element that opens the alert dialog when activated. Usually a button, but can be any interactive element through composition. When opened, the dialog will trap focus and require user interaction before continuing.
+
+## JSX Usage
+
+```jsx
+import { AlertDialogTrigger } from '@neynar/ui';
+
+<AlertDialogTrigger
+  asChild={true}
+/>
+```
+
+## Component Props
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: Render as child element, merging props and behavior
+
+## Examples
+
+```tsx
+// Direct usage
+<AlertDialogTrigger>
+  Delete Account
+</AlertDialogTrigger>
+// Composition with Button component
+<AlertDialogTrigger asChild>
+  <Button variant="destructive">Delete Account</Button>
+</AlertDialogTrigger>
+// Composition with custom element
+<AlertDialogTrigger asChild>
+  <button className="custom-trigger">Custom Trigger</button>
+</AlertDialogTrigger>
+```
+/

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

@@ -0,0 +1,80 @@
+# AlertDialog
+
+**Type**: component
+
+Alert dialog component for critical confirmations and destructive actions A specialized modal dialog built on Radix UI Alert Dialog primitives that interrupts users with important information requiring immediate acknowledgment or decision. Unlike regular dialogs, alert dialogs cannot be dismissed by clicking outside and focus the action button by default for critical decisions. Based on the WAI-ARIA Alert Dialog design pattern, this component is specifically designed for destructive actions, confirmations, or critical warnings that need immediate attention before the user can continue.
+
+## JSX Usage
+
+```jsx
+import { AlertDialog } from '@neynar/ui';
+
+<AlertDialog
+  defaultOpen={true}
+  open={true}
+  onOpenChange={handleOpenChange}
+/>
+```
+
+## Component Props
+
+### defaultOpen
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### open
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### onOpenChange
+- **Type**: `(open: boolean) => void`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic destructive confirmation
+<AlertDialog>
+  <AlertDialogTrigger asChild>
+    <Button variant="destructive">Delete Account</Button>
+  </AlertDialogTrigger>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+      <AlertDialogDescription>
+        This action cannot be undone. This will permanently delete
+        your account and remove your data from our servers.
+      </AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogFooter>
+      <AlertDialogCancel>Cancel</AlertDialogCancel>
+      <AlertDialogAction>Delete Account</AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>
+```
+### Example 2
+```tsx
+// Simple confirmation
+<AlertDialog>
+  <AlertDialogTrigger asChild>
+    <Button variant="outline">Sign Out</Button>
+  </AlertDialogTrigger>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogTitle>Sign Out</AlertDialogTitle>
+      <AlertDialogDescription>
+        Are you sure you want to sign out of your account?
+      </AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogFooter>
+      <AlertDialogCancel>Cancel</AlertDialogCancel>
+      <AlertDialogAction>Sign Out</AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>
+```