@neynar/ui 0.3.0 → 0.3.1

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

package/.llm/drawer-title.llm.md

@@ -0,0 +1,51 @@
+# DrawerTitle
+
+**Type**: component
+
+DrawerTitle - Accessible title element for the drawer Required accessibility element that announces the drawer's purpose to screen readers and provides a clear heading for the content. Should be included in every drawer for proper accessibility compliance. Automatically styled with appropriate font weight and color.
+
+## JSX Usage
+
+```jsx
+import { DrawerTitle } from '@neynar/ui';
+
+<DrawerTitle
+  className="value"
+>
+  {/* Your content here */}
+</DrawerTitle>
+```
+
+## 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 drawer title
+<DrawerTitle>Account Settings</DrawerTitle>
+```
+### Example 2
+```tsx
+// Custom styled title
+<DrawerTitle className="text-lg font-bold text-primary">
+  Welcome Back!
+</DrawerTitle>
+```
+### Example 3
+```tsx
+// Title with dynamic content
+<DrawerTitle>
+  {isEditing ? "Edit Profile" : "View Profile"}
+</DrawerTitle>
+```

package/.llm/drawer-trigger.llm.md

@@ -0,0 +1,44 @@
+# DrawerTrigger
+
+**Type**: component
+
+DrawerTrigger - Interactive element that opens the drawer The trigger element that users interact with to open the drawer. By default renders as a button, but can be composed with other elements using asChild. Supports all standard button attributes and event handlers.
+
+## JSX Usage
+
+```jsx
+import { DrawerTrigger } from '@neynar/ui';
+
+<DrawerTrigger
+  asChild={true}
+>
+  {/* Your content here */}
+</DrawerTrigger>
+```
+
+## 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 button trigger
+<DrawerTrigger>Open Drawer</DrawerTrigger>
+```
+### Example 2
+```tsx
+// Composed with custom button component
+<DrawerTrigger asChild>
+  <Button variant="outline">Open Settings</Button>
+</DrawerTrigger>
+```