@neynar/ui 0.3.0 → 0.4.0

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

@@ -0,0 +1,57 @@
+# DialogOverlay
+
+**Type**: component
+
+DialogOverlay - The backdrop overlay behind the dialog Provides a semi-transparent background that covers the main content. Clicking the overlay will close the dialog by default. Features smooth fade animations using Tailwind CSS and proper z-index stacking.
+
+## JSX Usage
+
+```jsx
+import { DialogOverlay } from '@neynar/ui';
+
+<DialogOverlay
+  asChild={true}
+  forceMount={true}
+  className="value"
+>
+  {/* Your content here */}
+</DialogOverlay>
+```
+
+## Component Props
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### forceMount
+- **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
+// Custom overlay styling
+<DialogOverlay className="bg-red-500/20 backdrop-blur-sm" />
+```
+### Example 2
+```tsx
+// Typically used automatically within DialogContent
+<DialogContent>
+  // DialogOverlay is included automatically
+  <DialogTitle>Dialog content</DialogTitle>
+</DialogContent>
+```

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

@@ -0,0 +1,47 @@
+# DialogPortal
+
+**Type**: component
+
+DialogPortal - Portal container for dialog content Renders dialog content in a React portal at the end of the document body. This ensures proper stacking context and prevents z-index issues. Rarely used directly - typically included automatically by DialogContent.
+
+## JSX Usage
+
+```jsx
+import { DialogPortal } from '@neynar/ui';
+
+<DialogPortal
+  forceMount={true}
+  container={value}
+>
+  {/* Your content here */}
+</DialogPortal>
+```
+
+## Component Props
+
+### forceMount
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### container
+- **Type**: `HTMLElement`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+```tsx
+// Custom portal container
+const [container, setContainer] = useState(null);
+<DialogPortal container={container}>
+  <DialogOverlay />
+  <DialogContent>Portal content</DialogContent>
+</DialogPortal>
+<div ref={setContainer} />
+```

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

@@ -0,0 +1,41 @@
+# DialogTitle
+
+**Type**: component
+
+DialogTitle - The main heading of the dialog Provides the accessible name for the dialog. Should clearly describe the dialog's purpose or the action being performed.
+
+## JSX Usage
+
+```jsx
+import { DialogTitle } from '@neynar/ui';
+
+<DialogTitle
+  asChild={true}
+  className="value"
+>
+  {/* Your content here */}
+</DialogTitle>
+```
+
+## Component Props
+
+### 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
+
+```tsx
+<DialogTitle>Delete Account</DialogTitle>
+```

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

@@ -0,0 +1,51 @@
+# DialogTrigger
+
+**Type**: component
+
+DialogTrigger - The element that opens the dialog when clicked Typically wraps a button or other interactive element. Use asChild prop to render as the child element instead of a button. The trigger automatically receives focus management and ARIA attributes.
+
+## JSX Usage
+
+```jsx
+import { DialogTrigger } from '@neynar/ui';
+
+<DialogTrigger
+  asChild={true}
+  className="value"
+>
+  {/* Your content here */}
+</DialogTrigger>
+```
+
+## Component Props
+
+### 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
+<DialogTrigger asChild>
+  <Button>Open Dialog</Button>
+</DialogTrigger>
+```
+### Example 2
+```tsx
+// Direct button without asChild
+<DialogTrigger className="custom-trigger-style">
+  Click to open
+</DialogTrigger>
+```

package/.llm/dialog.llm.md

@@ -0,0 +1,113 @@
+# Dialog
+
+**Type**: component
+
+Dialog - A modal dialog component for important content or actions A modal window overlay component built on Radix UI Dialog primitives that interrupts the user's workflow to capture their attention for important interactions. Dialogs render content in a layer above the main application with proper focus management and accessibility. Use dialogs for critical interactions, confirmations, forms, or detailed information that requires user focus and prevents interaction with the background content.
+
+## JSX Usage
+
+```jsx
+import { Dialog } from '@neynar/ui';
+
+<Dialog
+  open={true}
+  defaultOpen={true}
+  onOpenChange={handleOpenChange}
+  modal={true}
+>
+  {/* Your content here */}
+</Dialog>
+```
+
+## Component Props
+
+### open
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### defaultOpen
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### onOpenChange
+- **Type**: `(open: boolean) => void`
+- **Required**: No
+- **Description**: No description available
+
+### modal
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Basic confirmation dialog
+<Dialog>
+  <DialogTrigger asChild>
+    <Button>Open Dialog</Button>
+  </DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Are you sure?</DialogTitle>
+      <DialogDescription>
+        This action cannot be undone.
+      </DialogDescription>
+    </DialogHeader>
+    <DialogFooter>
+      <Button variant="outline">Cancel</Button>
+      <Button>Continue</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+```
+### Example 2
+```tsx
+// Controlled dialog with form handling
+const [open, setOpen] = useState(false);
+<Dialog open={open} onOpenChange={setOpen}>
+  <DialogTrigger asChild>
+    <Button>Edit Profile</Button>
+  </DialogTrigger>
+  <DialogContent className="sm:max-w-[425px]">
+    <DialogHeader>
+      <DialogTitle>Edit profile</DialogTitle>
+      <DialogDescription>
+        Make changes to your profile here. Click save when you're done.
+      </DialogDescription>
+    </DialogHeader>
+    <form onSubmit={handleSubmit}>
+      <div className="grid gap-4 py-4">
+        <Input label="Name" defaultValue="John Doe" />
+        <Input label="Username" defaultValue="
+### Example 3
+```tsx
+// Custom close behavior
+<Dialog>
+  <DialogTrigger asChild>
+    <Button>Share Link</Button>
+  </DialogTrigger>
+  <DialogContent showCloseButton={false}>
+    <DialogHeader>
+      <DialogTitle>Share this link</DialogTitle>
+    </DialogHeader>
+    <div className="flex items-center space-x-2">
+      <Input value="https://example.com" readOnly />
+      <Button size="sm"><Copy className="h-4 w-4" /></Button>
+    </div>
+    <DialogFooter>
+      <DialogClose asChild>
+        <Button variant="secondary">Done</Button>
+      </DialogClose>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+```

package/.llm/drawer-close.llm.md

@@ -0,0 +1,53 @@
+# DrawerClose
+
+**Type**: component
+
+DrawerClose - Interactive element that closes the drawer Trigger element that closes the drawer when activated. Can be placed anywhere within the drawer content. By default renders as a button but can be composed with other elements using asChild. Multiple close triggers can exist within a single drawer.
+
+## JSX Usage
+
+```jsx
+import { DrawerClose } from '@neynar/ui';
+
+<DrawerClose
+  asChild={true}
+>
+  {/* Your content here */}
+</DrawerClose>
+```
+
+## Component Props
+
+### asChild
+- **Type**: `boolean`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Default close button
+<DrawerClose>Close</DrawerClose>
+```
+### Example 2
+```tsx
+// Composed with custom button
+<DrawerClose asChild>
+  <Button variant="ghost">Cancel</Button>
+</DrawerClose>
+```
+### Example 3
+```tsx
+// Icon-only close button
+<DrawerClose asChild>
+  <Button size="icon" variant="ghost">
+    <X className="h-4 w-4" />
+  </Button>
+</DrawerClose>
+```

package/.llm/drawer-content.llm.md

@@ -0,0 +1,58 @@
+# DrawerContent
+
+**Type**: component
+
+DrawerContent - Main container for drawer content with responsive positioning The primary content container that holds all drawer elements. Automatically handles portal rendering, overlay display, and responsive positioning based on the drawer direction. Includes a drag handle for bottom drawers and responsive styling for all four directions. Supports flexible layouts with proper spacing for headers, content areas, and footers. Automatically constrains height/width based on direction and viewport size.
+
+## JSX Usage
+
+```jsx
+import { DrawerContent } from '@neynar/ui';
+
+<DrawerContent
+  className="value"
+>
+  {/* Your content here */}
+</DrawerContent>
+```
+
+## 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 content structure
+<DrawerContent>
+  <DrawerHeader>
+    <DrawerTitle>Title</DrawerTitle>
+    <DrawerDescription>Description</DrawerDescription>
+  </DrawerHeader>
+  <div className="p-4">
+    Main content area
+  </div>
+  <DrawerFooter>
+    <Button>Action</Button>
+  </DrawerFooter>
+</DrawerContent>
+```
+### Example 2
+```tsx
+// Custom styled content
+<DrawerContent className="max-w-md mx-auto">
+  <div className="flex-1 overflow-y-auto p-6">
+    <h2>Custom Layout</h2>
+    <p>Scrollable content area</p>
+  </div>
+</DrawerContent>
+```

package/.llm/drawer-description.llm.md

@@ -0,0 +1,54 @@
+# DrawerDescription
+
+**Type**: component
+
+DrawerDescription - Optional description providing additional context Supplementary text element that provides additional information about the drawer's content, purpose, or instructions. Enhances accessibility by giving users more context about what they'll find in the drawer. Styled with muted colors and smaller text to maintain visual hierarchy.
+
+## JSX Usage
+
+```jsx
+import { DrawerDescription } from '@neynar/ui';
+
+<DrawerDescription
+  className="value"
+>
+  {/* Your content here */}
+</DrawerDescription>
+```
+
+## 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
+<DrawerDescription>
+  Manage your account preferences and privacy settings
+</DrawerDescription>
+```
+### Example 2
+```tsx
+// Description with instructions
+<DrawerDescription>
+  Select the options below to customize your experience.
+  Changes will be saved automatically.
+</DrawerDescription>
+```
+### Example 3
+```tsx
+// Custom styled description
+<DrawerDescription className="text-xs text-orange-600">
+  Warning: These changes cannot be undone
+</DrawerDescription>
+```

package/.llm/drawer-footer.llm.md

@@ -0,0 +1,67 @@
+# DrawerFooter
+
+**Type**: component
+
+DrawerFooter - Footer section for action buttons and controls Standardized footer area positioned at the bottom of the drawer with automatic top margin to push content down. Typically contains primary actions, secondary actions, and DrawerClose triggers. Uses flexbox column layout with consistent spacing between elements.
+
+## JSX Usage
+
+```jsx
+import { DrawerFooter } from '@neynar/ui';
+
+<DrawerFooter
+  className="value"
+>
+  {/* Your content here */}
+</DrawerFooter>
+```
+
+## 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
+// Standard footer with primary and secondary actions
+<DrawerFooter>
+  <Button>Save Changes</Button>
+  <DrawerClose asChild>
+    <Button variant="outline">Cancel</Button>
+  </DrawerClose>
+</DrawerFooter>
+```
+### Example 2
+```tsx
+// Footer with multiple action groups
+<DrawerFooter>
+  <div className="flex gap-2">
+    <Button className="flex-1">Save</Button>
+    <Button variant="outline" className="flex-1">Save as Draft</Button>
+  </div>
+  <DrawerClose asChild>
+    <Button variant="ghost" size="sm">Cancel</Button>
+  </DrawerClose>
+</DrawerFooter>
+```
+### Example 3
+```tsx
+// Footer with text and actions
+<DrawerFooter>
+  <p className="text-sm text-muted-foreground text-center">
+    Changes will be saved automatically
+  </p>
+  <DrawerClose asChild>
+    <Button>Done</Button>
+  </DrawerClose>
+</DrawerFooter>
+```

package/.llm/drawer-header.llm.md

@@ -0,0 +1,60 @@
+# DrawerHeader
+
+**Type**: component
+
+DrawerHeader - Header section containing title and description Standardized header area for drawer content with proper spacing and responsive text alignment. Centers text for bottom/top drawers on mobile and left-aligns on larger screens. Should contain DrawerTitle and optionally DrawerDescription for accessibility compliance.
+
+## JSX Usage
+
+```jsx
+import { DrawerHeader } from '@neynar/ui';
+
+<DrawerHeader
+  className="value"
+>
+  {/* Your content here */}
+</DrawerHeader>
+```
+
+## 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
+// Standard header with title and description
+<DrawerHeader>
+  <DrawerTitle>Settings</DrawerTitle>
+  <DrawerDescription>
+    Manage your account preferences and settings
+  </DrawerDescription>
+</DrawerHeader>
+```
+### Example 2
+```tsx
+// Title-only header
+<DrawerHeader>
+  <DrawerTitle>Notifications</DrawerTitle>
+</DrawerHeader>
+```
+### Example 3
+```tsx
+// Custom header with additional content
+<DrawerHeader className="border-b">
+  <DrawerTitle>Profile</DrawerTitle>
+  <DrawerDescription>Update your profile information</DrawerDescription>
+  <div className="mt-2">
+    <Badge variant="outline">Pro User</Badge>
+  </div>
+</DrawerHeader>
+```

package/.llm/drawer-overlay.llm.md

@@ -0,0 +1,40 @@
+# DrawerOverlay
+
+**Type**: component
+
+DrawerOverlay - Semi-transparent backdrop behind the drawer Creates a semi-transparent overlay that covers the entire viewport behind the drawer content. Provides visual separation and can be clicked to close the drawer (when dismissible is true). Automatically fades in/out with smooth animations.
+
+## JSX Usage
+
+```jsx
+import { DrawerOverlay } from '@neynar/ui';
+
+<DrawerOverlay
+  className="value"
+/>
+```
+
+## Component Props
+
+### className
+- **Type**: `string`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+### Example 1
+```tsx
+// Default overlay with standard opacity
+<DrawerOverlay />
+```
+### Example 2
+```tsx
+// Custom overlay with different opacity
+<DrawerOverlay className="bg-black/30" />
+```
+### Example 3
+```tsx
+// Overlay with blur effect
+<DrawerOverlay className="bg-black/20 backdrop-blur-sm" />
+```

package/.llm/drawer-portal.llm.md

@@ -0,0 +1,42 @@
+# DrawerPortal
+
+**Type**: component
+
+DrawerPortal - Portal component for rendering drawer outside DOM hierarchy Renders the drawer content into a different part of the DOM tree, typically document.body, to ensure proper stacking context and avoid z-index issues. Automatically used by DrawerContent but can be used manually for custom layouts.
+
+## JSX Usage
+
+```jsx
+import { DrawerPortal } from '@neynar/ui';
+
+<DrawerPortal
+  container={value}
+>
+  {/* Your content here */}
+</DrawerPortal>
+```
+
+## Component Props
+
+### container
+- **Type**: `HTMLElement`
+- **Required**: No
+- **Description**: No description available
+
+### children
+- **Type**: `React.ReactNode`
+- **Required**: No
+- **Description**: No description available
+
+## Examples
+
+```tsx
+// Custom portal container
+const portalContainer = document.getElementById('drawer-root')
+<DrawerPortal container={portalContainer}>
+  <DrawerOverlay />
+  <DrawerContent>
+    Drawer content
+  </DrawerContent>
+</DrawerPortal>
+```