@neynar/ui 0.3.1 → 0.5.0

package/dist/components/ui/drawer.d.ts

@@ -1,483 +1,40 @@
+import { Drawer as DrawerPrimitive } from 'vaul';
 import * as React from "react";
-import { Drawer as DrawerPrimitive } from "vaul";
-/**
- * Drawer - Mobile-optimized sliding panel component
- *
- * A flexible drawer component built on Vaul that creates sliding panel interfaces
- * from screen edges. Designed primarily for mobile experiences with touch gestures,
- * swipe-to-dismiss functionality, and natural drag interactions. Supports multiple
- * directions (top, bottom, left, right) with snap points and responsive behavior.
- *
- * Built on Vaul library which provides excellent performance, accessibility, and
- * natural touch interactions. The drawer automatically handles focus management,
- * scroll locking, and ARIA attributes for screen readers.
- *
- * @example
- * ```tsx
- * // Basic drawer with trigger and content
- * <Drawer>
- *   <DrawerTrigger asChild>
- *     <Button>Open Settings</Button>
- *   </DrawerTrigger>
- *   <DrawerContent>
- *     <DrawerHeader>
- *       <DrawerTitle>Settings</DrawerTitle>
- *       <DrawerDescription>
- *         Adjust your preferences below
- *       </DrawerDescription>
- *     </DrawerHeader>
- *     <div className="p-4">
- *       <p>Content goes here</p>
- *     </div>
- *     <DrawerFooter>
- *       <Button>Save</Button>
- *       <DrawerClose asChild>
- *         <Button variant="outline">Cancel</Button>
- *       </DrawerClose>
- *     </DrawerFooter>
- *   </DrawerContent>
- * </Drawer>
- * ```
- *
- * @example
- * ```tsx
- * // Controlled drawer with state management
- * const [open, setOpen] = useState(false)
- *
- * <Drawer open={open} onOpenChange={setOpen}>
- *   <DrawerContent>
- *     <DrawerHeader>
- *       <DrawerTitle>Controlled Drawer</DrawerTitle>
- *     </DrawerHeader>
- *     <div className="p-4">
- *       <Button onClick={() => setOpen(false)}>Close Programmatically</Button>
- *     </div>
- *   </DrawerContent>
- * </Drawer>
- * ```
- *
- * @example
- * ```tsx
- * // Drawer with snap points for multiple heights
- * <Drawer snapPoints={[0.4, 0.8]} fadeFromIndex={0}>
- *   <DrawerTrigger asChild>
- *     <Button>Open with Snap Points</Button>
- *   </DrawerTrigger>
- *   <DrawerContent>
- *     <DrawerHeader>
- *       <DrawerTitle>Expandable Drawer</DrawerTitle>
- *       <DrawerDescription>
- *         Drag to resize between 40% and 80% heights
- *       </DrawerDescription>
- *     </DrawerHeader>
- *     <div className="flex-1 p-4">
- *       <p>Content that can be viewed at different heights</p>
- *     </div>
- *   </DrawerContent>
- * </Drawer>
- * ```
- *
- * @example
- * ```tsx
- * // Side drawer from left or right
- * <Drawer direction="right">
- *   <DrawerTrigger asChild>
- *     <Button>Open Side Panel</Button>
- *   </DrawerTrigger>
- *   <DrawerContent>
- *     <DrawerHeader>
- *       <DrawerTitle>Side Navigation</DrawerTitle>
- *     </DrawerHeader>
- *     <div className="flex-1 p-4">
- *       <nav>Navigation items here</nav>
- *     </div>
- *   </DrawerContent>
- * </Drawer>
- * ```
- *
- * @accessibility
- * - Focus management with focus trap when drawer is open
- * - Keyboard navigation with Escape key to close
- * - Screen reader announcements for state changes
- * - Touch gestures for intuitive swipe-to-dismiss
- * - Backdrop click to close (when dismissible)
- * - ARIA attributes for proper modal behavior
- * - Scroll lock prevents background scrolling
- * - DrawerTitle required for accessibility
- * - Sequential keyboard navigation within drawer content
- *
- * @see {@link https://vaul.emilkowal.ski} Vaul drawer library documentation
- * @see {@link https://ui.shadcn.com/docs/components/drawer} shadcn/ui Drawer documentation
- * @see {@link Dialog} For modal overlays without slide animation
- * @see {@link Sheet} For desktop-optimized side panels
- * @since 1.0.0
- */
-declare function Drawer(props: React.ComponentProps<typeof DrawerPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-/**
- * 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.
- *
- * @example
- * ```tsx
- * // Default button trigger
- * <DrawerTrigger>Open Drawer</DrawerTrigger>
- * ```
- *
- * @example
- * ```tsx
- * // Composed with custom button component
- * <DrawerTrigger asChild>
- *   <Button variant="outline">Open Settings</Button>
- * </DrawerTrigger>
- * ```
- *
- * @accessibility
- * - Announces drawer state to screen readers
- * - Receives keyboard focus
- * - Activates on Space and Enter keys
- *
- * @see {@link https://vaul.emilkowal.ski/api} Vaul Trigger API
- */
-declare function DrawerTrigger(props: React.ComponentProps<typeof DrawerPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
-/**
- * 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.
- *
- * @example
- * ```tsx
- * // Custom portal container
- * const portalContainer = document.getElementById('drawer-root')
- *
- * <DrawerPortal container={portalContainer}>
- *   <DrawerOverlay />
- *   <DrawerContent>
- *     Drawer content
- *   </DrawerContent>
- * </DrawerPortal>
- * ```
- *
- * @accessibility
- * - Maintains proper focus management across portal boundaries
- * - Preserves screen reader navigation context
- *
- * @see {@link https://vaul.emilkowal.ski/api} Vaul Portal API
- */
-declare function DrawerPortal(props: React.ComponentProps<typeof DrawerPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
-/**
- * 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.
- *
- * @example
- * ```tsx
- * // Default close button
- * <DrawerClose>Close</DrawerClose>
- * ```
- *
- * @example
- * ```tsx
- * // Composed with custom button
- * <DrawerClose asChild>
- *   <Button variant="ghost">Cancel</Button>
- * </DrawerClose>
- * ```
- *
- * @example
- * ```tsx
- * // Icon-only close button
- * <DrawerClose asChild>
- *   <Button size="icon" variant="ghost">
- *     <X className="h-4 w-4" />
- *   </Button>
- * </DrawerClose>
- * ```
- *
- * @accessibility
- * - Receives keyboard focus
- * - Activates on Space and Enter keys
- * - Announces close action to screen readers
- *
- * @see {@link https://vaul.emilkowal.ski/api} Vaul Close API
- */
-declare function DrawerClose(props: React.ComponentProps<typeof DrawerPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
-/**
- * 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.
- *
- * @example
- * ```tsx
- * // Default overlay with standard opacity
- * <DrawerOverlay />
- * ```
- *
- * @example
- * ```tsx
- * // Custom overlay with different opacity
- * <DrawerOverlay className="bg-black/30" />
- * ```
- *
- * @example
- * ```tsx
- * // Overlay with blur effect
- * <DrawerOverlay className="bg-black/20 backdrop-blur-sm" />
- * ```
- *
- * @accessibility
- * - Click target for closing drawer (when dismissible)
- * - Prevents interaction with background content
- * - Does not interfere with screen reader navigation
- *
- * @see {@link https://vaul.emilkowal.ski/api} Vaul Overlay API
- */
-declare function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
-/**
- * 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.
- *
- * @example
- * ```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
- * ```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>
- * ```
- *
- * @accessibility
- * - Focus trap keeps focus within drawer content
- * - Proper ARIA modal attributes
- * - Sequential keyboard navigation
- * - Screen reader content announcements
- *
- * @see {@link https://vaul.emilkowal.ski/api} Vaul Content API
- */
-declare function DrawerContent({ className, children, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
-/**
- * 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.
- *
- * @example
- * ```tsx
- * // Standard header with title and description
- * <DrawerHeader>
- *   <DrawerTitle>Settings</DrawerTitle>
- *   <DrawerDescription>
- *     Manage your account preferences and settings
- *   </DrawerDescription>
- * </DrawerHeader>
- * ```
- *
- * @example
- * ```tsx
- * // Title-only header
- * <DrawerHeader>
- *   <DrawerTitle>Notifications</DrawerTitle>
- * </DrawerHeader>
- * ```
- *
- * @example
- * ```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>
- * ```
- *
- * @accessibility
- * - Should contain DrawerTitle for screen reader identification
- * - Optional DrawerDescription provides additional context
- * - Proper heading hierarchy maintained
- *
- * @see {@link DrawerTitle} For accessible drawer titles
- * @see {@link DrawerDescription} For additional context
- */
-declare function DrawerHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-/**
- * 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.
- *
- * @example
- * ```tsx
- * // Standard footer with primary and secondary actions
- * <DrawerFooter>
- *   <Button>Save Changes</Button>
- *   <DrawerClose asChild>
- *     <Button variant="outline">Cancel</Button>
- *   </DrawerClose>
- * </DrawerFooter>
- * ```
- *
- * @example
- * ```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
- * ```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>
- * ```
- *
- * @accessibility
- * - Action buttons receive proper focus order
- * - Primary actions should be visually prominent
- * - Close actions clearly labeled for screen readers
- *
- * @see {@link DrawerClose} For close action triggers
- * @see {@link Button} For consistent action button styling
- */
-declare function DrawerFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-/**
- * 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.
- *
- * @example
- * ```tsx
- * // Standard drawer title
- * <DrawerTitle>Account Settings</DrawerTitle>
- * ```
- *
- * @example
- * ```tsx
- * // Custom styled title
- * <DrawerTitle className="text-lg font-bold text-primary">
- *   Welcome Back!
- * </DrawerTitle>
- * ```
- *
- * @example
- * ```tsx
- * // Title with dynamic content
- * <DrawerTitle>
- *   {isEditing ? "Edit Profile" : "View Profile"}
- * </DrawerTitle>
- * ```
- *
- * @accessibility
- * - REQUIRED for screen reader accessibility
- * - Announces drawer content purpose
- * - Provides semantic heading structure
- * - Should be descriptive and concise
- * - Automatically receives proper ARIA attributes
- *
- * @see {@link https://vaul.emilkowal.ski/api} Vaul Title API
- * @see {@link DrawerDescription} For additional context
- */
-declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
-/**
- * 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.
- *
- * @example
- * ```tsx
- * // Basic description
- * <DrawerDescription>
- *   Manage your account preferences and privacy settings
- * </DrawerDescription>
- * ```
- *
- * @example
- * ```tsx
- * // Description with instructions
- * <DrawerDescription>
- *   Select the options below to customize your experience.
- *   Changes will be saved automatically.
- * </DrawerDescription>
- * ```
- *
- * @example
- * ```tsx
- * // Custom styled description
- * <DrawerDescription className="text-xs text-orange-600">
- *   Warning: These changes cannot be undone
- * </DrawerDescription>
- * ```
- *
- * @accessibility
- * - Provides additional context for screen readers
- * - Automatically linked to DrawerTitle via ARIA
- * - Should be concise and informative
- * - Enhances understanding of drawer purpose
- *
- * @see {@link https://vaul.emilkowal.ski/api} Vaul Description API
- * @see {@link DrawerTitle} For primary drawer identification
- */
-declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
-export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };
+type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>;
+/**
+ * Root drawer component that manages state and behavior.
+ * Supports sliding from any screen edge (top, bottom, left, right).
+ */
+declare function Drawer({ ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+type DrawerTriggerProps = React.ComponentProps<typeof DrawerPrimitive.Trigger>;
+/** Button or element that opens the drawer. Use `render` prop or `asChild` to customize. */
+declare function DrawerTrigger({ ...props }: DrawerTriggerProps): import("react/jsx-runtime").JSX.Element;
+type DrawerPortalProps = React.ComponentProps<typeof DrawerPrimitive.Portal>;
+/** Portal container for drawer overlay and content. */
+declare function DrawerPortal({ ...props }: DrawerPortalProps): import("react/jsx-runtime").JSX.Element;
+type DrawerCloseProps = React.ComponentProps<typeof DrawerPrimitive.Close>;
+/** Button or element that closes the drawer. Use `render` prop or `asChild` to customize. */
+declare function DrawerClose({ ...props }: DrawerCloseProps): import("react/jsx-runtime").JSX.Element;
+type DrawerOverlayProps = React.ComponentProps<typeof DrawerPrimitive.Overlay>;
+/** Backdrop overlay with frosted glass effect (backdrop blur + translucent background). */
+declare function DrawerOverlay({ className, ...props }: DrawerOverlayProps): import("react/jsx-runtime").JSX.Element;
+type DrawerContentProps = React.ComponentProps<typeof DrawerPrimitive.Content>;
+/**
+ * Drawer content panel with automatic portal and backdrop overlay.
+ * Shows drag handle on bottom drawers. Direction-based positioning via `direction` prop on Drawer.
+ */
+declare function DrawerContent({ className, children, ...props }: DrawerContentProps): import("react/jsx-runtime").JSX.Element;
+type DrawerHeaderProps = React.ComponentProps<"div">;
+/** Header section for drawer title and description. Centered on top/bottom drawers. */
+declare function DrawerHeader({ className, ...props }: DrawerHeaderProps): import("react/jsx-runtime").JSX.Element;
+type DrawerFooterProps = React.ComponentProps<"div">;
+/** Footer section for drawer actions. Automatically positioned at bottom with margin-top: auto. */
+declare function DrawerFooter({ className, ...props }: DrawerFooterProps): import("react/jsx-runtime").JSX.Element;
+type DrawerTitleProps = React.ComponentProps<typeof DrawerPrimitive.Title>;
+/** Accessible title announced when drawer opens. Should be used inside DrawerHeader. */
+declare function DrawerTitle({ className, ...props }: DrawerTitleProps): import("react/jsx-runtime").JSX.Element;
+type DrawerDescriptionProps = React.ComponentProps<typeof DrawerPrimitive.Description>;
+/** Accessible description announced when drawer opens. Should be used inside DrawerHeader. */
+declare function DrawerDescription({ className, ...props }: DrawerDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, type DrawerProps, type DrawerPortalProps, type DrawerOverlayProps, type DrawerTriggerProps, type DrawerCloseProps, type DrawerContentProps, type DrawerHeaderProps, type DrawerFooterProps, type DrawerTitleProps, type DrawerDescriptionProps, };
 //# sourceMappingURL=drawer.d.ts.map

package/dist/components/ui/drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/components/ui/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAC;AAsJjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+GG;AACH,iBAAS,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAEvE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,iBAAS,aAAa,CACpB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAG5D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,iBAAS,YAAY,CACnB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,2CAG3D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,iBAAS,WAAW,CAClB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAG1D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAWtD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAqBtD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,2CAWtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,2CAQtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQpD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,2CAQ1D;AAED,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,GAClB,CAAC"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/components/ui/drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,MAAM,CAAC;AAIjD,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,CAAC;AAErE;;;GAGG;AACH,iBAAS,MAAM,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,2CAExC;AAED,KAAK,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC;AAE/E,4FAA4F;AAC5F,iBAAS,aAAa,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAEtD;AAED,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,CAAC;AAE7E,uDAAuD;AACvD,iBAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAEpD;AAED,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC;AAE3E,6FAA6F;AAC7F,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAElD;AAED,KAAK,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC;AAE/E,2FAA2F;AAC3F,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAWjE;AAED,KAAK,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC;AAE/E;;;GAGG;AACH,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAiB3E;AAED,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAErD,uFAAuF;AACvF,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAW/D;AAED,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAErD,mGAAmG;AACnG,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAQ/D;AAED,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC;AAE3E,wFAAwF;AACxF,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAQ7D;AAED,KAAK,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAChD,OAAO,eAAe,CAAC,WAAW,CACnC,CAAC;AAEF,8FAA8F;AAC9F,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,2CAQzE;AAED,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,aAAa,EACb,WAAW,EACX,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,KAAK,WAAW,EAChB,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,sBAAsB,GAC5B,CAAC"}

package/dist/components/ui/drawer.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Drawer as Drawer$1 } from "../../node_modules/vaul/dist/index.js";
+import { cn } from "../../lib/utils.js";
+function Drawer({ ...props }) {
+  return /* @__PURE__ */ jsx(Drawer$1.Root, { "data-slot": "drawer", ...props });
+}
+function DrawerTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(Drawer$1.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(Drawer$1.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerClose({ ...props }) {
+  return /* @__PURE__ */ jsx(Drawer$1.Close, { "data-slot": "drawer-close", ...props });
+}
+function DrawerOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Overlay,
+    {
+      "data-slot": "drawer-overlay",
+      className: cn(
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerContent({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [
+    /* @__PURE__ */ jsx(DrawerOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      Drawer$1.Content,
+      {
+        "data-slot": "drawer-content",
+        className: cn(
+          "bg-popover text-popover-foreground flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block bg-muted mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+          children
+        ]
+      }
+    )
+  ] });
+}
+function DrawerHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-header",
+      className: cn(
+        "gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left flex flex-col",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-footer",
+      className: cn("gap-2 p-4 mt-auto flex flex-col", className),
+      ...props
+    }
+  );
+}
+function DrawerTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Title,
+    {
+      "data-slot": "drawer-title",
+      className: cn("text-foreground font-medium", className),
+      ...props
+    }
+  );
+}
+function DrawerDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Description,
+    {
+      "data-slot": "drawer-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+export {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger
+};
+//# sourceMappingURL=drawer.js.map

package/dist/components/ui/drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.js","sources":["../../../src/components/ui/drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Drawer as DrawerPrimitive } from \"vaul\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>;\n\n/**\n * Root drawer component that manages state and behavior.\n * Supports sliding from any screen edge (top, bottom, left, right).\n */\nfunction Drawer({ ...props }: DrawerProps) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />;\n}\n\ntype DrawerTriggerProps = React.ComponentProps<typeof DrawerPrimitive.Trigger>;\n\n/** Button or element that opens the drawer. Use `render` prop or `asChild` to customize. */\nfunction DrawerTrigger({ ...props }: DrawerTriggerProps) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\ntype DrawerPortalProps = React.ComponentProps<typeof DrawerPrimitive.Portal>;\n\n/** Portal container for drawer overlay and content. */\nfunction DrawerPortal({ ...props }: DrawerPortalProps) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />;\n}\n\ntype DrawerCloseProps = React.ComponentProps<typeof DrawerPrimitive.Close>;\n\n/** Button or element that closes the drawer. Use `render` prop or `asChild` to customize. */\nfunction DrawerClose({ ...props }: DrawerCloseProps) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\ntype DrawerOverlayProps = React.ComponentProps<typeof DrawerPrimitive.Overlay>;\n\n/** Backdrop overlay with frosted glass effect (backdrop blur + translucent background). */\nfunction DrawerOverlay({ className, ...props }: DrawerOverlayProps) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype DrawerContentProps = React.ComponentProps<typeof DrawerPrimitive.Content>;\n\n/**\n * Drawer content panel with automatic portal and backdrop overlay.\n * Shows drag handle on bottom drawers. Direction-based positioning via `direction` prop on Drawer.\n */\nfunction DrawerContent({ className, children, ...props }: DrawerContentProps) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"bg-popover text-popover-foreground flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block bg-muted mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  );\n}\n\ntype DrawerHeaderProps = React.ComponentProps<\"div\">;\n\n/** Header section for drawer title and description. Centered on top/bottom drawers. */\nfunction DrawerHeader({ className, ...props }: DrawerHeaderProps) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left flex flex-col\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype DrawerFooterProps = React.ComponentProps<\"div\">;\n\n/** Footer section for drawer actions. Automatically positioned at bottom with margin-top: auto. */\nfunction DrawerFooter({ className, ...props }: DrawerFooterProps) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"gap-2 p-4 mt-auto flex flex-col\", className)}\n      {...props}\n    />\n  );\n}\n\ntype DrawerTitleProps = React.ComponentProps<typeof DrawerPrimitive.Title>;\n\n/** Accessible title announced when drawer opens. Should be used inside DrawerHeader. */\nfunction DrawerTitle({ className, ...props }: DrawerTitleProps) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\ntype DrawerDescriptionProps = React.ComponentProps<\n  typeof DrawerPrimitive.Description\n>;\n\n/** Accessible description announced when drawer opens. Should be used inside DrawerHeader. */\nfunction DrawerDescription({ className, ...props }: DrawerDescriptionProps) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n  type DrawerProps,\n  type DrawerPortalProps,\n  type DrawerOverlayProps,\n  type DrawerTriggerProps,\n  type DrawerCloseProps,\n  type DrawerContentProps,\n  type DrawerHeaderProps,\n  type DrawerFooterProps,\n  type DrawerTitleProps,\n  type DrawerDescriptionProps,\n};\n"],"names":[],"mappings":";;;;;AAaA;AACE;AACF;AAKA;AACE;AACF;AAKA;AACE;AACF;AAKA;AACE;AACF;AAKA;AACE;AACE;AAAiB;AAAhB;AACW;AACC;AACT;AACA;AAAA;AAEE;AAAA;AAGV;AAQA;AACE;AAEI;AAAe;AACf;AAAiB;AAAhB;AACW;AACC;AACT;AACA;AAAA;AAEE;AAEJ;AAAmP;AAClP;AAAA;AAAA;AAAA;AAIT;AAKA;AACE;AACE;AAAC;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAAA;AAGV;AAKA;AACE;AACE;AAAC;AAAA;AACW;AACgD;AACtD;AAAA;AAGV;AAKA;AACE;AACE;AAAiB;AAAhB;AACW;AAC4C;AAClD;AAAA;AAGV;AAOA;AACE;AACE;AAAiB;AAAhB;AACW;AAC8C;AACpD;AAAA;AAGV;;;;;;;;;;;;;"}