@neynar/ui 0.4.0 → 0.5.0

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

@@ -1,463 +1,51 @@
+import { Dialog as SheetPrimitive } from '@base-ui/react/dialog';
 import * as React from "react";
-import * as SheetPrimitive from "@radix-ui/react-dialog";
+type SheetProps = SheetPrimitive.Root.Props;
 /**
- * Sheet - A slide-out panel that displays supplementary content
- *
- * A versatile sheet component that slides in from any edge of the screen to display
- * supplementary content without fully blocking the main interface. Built on Radix UI
- * Dialog primitives with smooth animations and comprehensive accessibility support.
- *
- * Sheets are ideal for:
- * - Mobile navigation menus
- * - Settings panels and configuration forms
- * - Contextual information displays
- * - Secondary actions that don't require full attention
- * - Filters and search interfaces
- *
- * @component
- * @example
- * ```tsx
- * // Basic sheet from right side (default)
- * <Sheet>
- *   <SheetTrigger asChild>
- *     <Button>Open Settings</Button>
- *   </SheetTrigger>
- *   <SheetContent>
- *     <SheetHeader>
- *       <SheetTitle>Settings</SheetTitle>
- *       <SheetDescription>
- *         Configure your application preferences.
- *       </SheetDescription>
- *     </SheetHeader>
- *     <div className="py-4">
- *       <p>Settings content here</p>
- *     </div>
- *     <SheetFooter>
- *       <Button type="submit">Save Changes</Button>
- *     </SheetFooter>
- *   </SheetContent>
- * </Sheet>
- * ```
- *
- * @example
- * ```tsx
- * // Sheet from different sides with controlled state
- * function NavigationSheet() {
- *   const [open, setOpen] = useState(false)
- *
- *   return (
- *     <Sheet open={open} onOpenChange={setOpen}>
- *       <SheetTrigger asChild>
- *         <Button variant="outline">Menu</Button>
- *       </SheetTrigger>
- *       <SheetContent side="left">
- *         <SheetHeader>
- *           <SheetTitle>Navigation</SheetTitle>
- *         </SheetHeader>
- *         <nav className="py-4">
- *           <Button variant="ghost" className="w-full justify-start">
- *             Dashboard
- *           </Button>
- *         </nav>
- *       </SheetContent>
- *     </Sheet>
- *   )
- * }
- * ```
- *
- * @example
- * ```tsx
- * // Sheet with form handling
- * <Sheet>
- *   <SheetTrigger asChild>
- *     <Button>Edit Profile</Button>
- *   </SheetTrigger>
- *   <SheetContent>
- *     <form onSubmit={handleSubmit}>
- *       <SheetHeader>
- *         <SheetTitle>Edit Profile</SheetTitle>
- *         <SheetDescription>
- *           Update your profile information.
- *         </SheetDescription>
- *       </SheetHeader>
- *       <div className="grid gap-4 py-4">
- *         <Input placeholder="Name" />
- *         <Input placeholder="Email" type="email" />
- *       </div>
- *       <SheetFooter>
- *         <SheetClose asChild>
- *           <Button type="button" variant="outline">Cancel</Button>
- *         </SheetClose>
- *         <Button type="submit">Save</Button>
- *       </SheetFooter>
- *     </form>
- *   </SheetContent>
- * </Sheet>
- * ```
- *
- * @accessibility
- * - Focus is trapped within the sheet when open
- * - Escape key closes the sheet
- * - Background scroll is locked when sheet is open
- * - Proper ARIA labeling for screen readers
- * - Close button always visible and accessible
- * - Supports keyboard navigation
- *
- * @see {@link https://ui.shadcn.com/docs/components/sheet} shadcn/ui Sheet documentation
- * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog} Radix UI Dialog primitive
- * @since 1.0.0
+ * Sheet root component. Manages open/closed state for slide-in panels.
+ * Built on Base UI Dialog with directional slide animations.
  */
-declare function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function Sheet({ ...props }: SheetProps): import("react/jsx-runtime").JSX.Element;
+type SheetTriggerProps = SheetPrimitive.Trigger.Props;
 /**
- * SheetTrigger - Button or element that opens the sheet
- *
- * The trigger element that users interact with to open the sheet.
- * Use the `asChild` prop to render as a different element while
- * maintaining the trigger functionality. When clicked, opens the
- * sheet and manages focus appropriately.
- *
- * @component
- * @example
- * ```tsx
- * // As a styled button
- * <SheetTrigger asChild>
- *   <Button variant="outline">Open Settings</Button>
- * </SheetTrigger>
- *
- * // As a simple button
- * <SheetTrigger>Click to open</SheetTrigger>
- *
- * // As an icon button
- * <SheetTrigger asChild>
- *   <Button size="icon" variant="ghost">
- *     <MenuIcon className="h-4 w-4" />
- *   </Button>
- * </SheetTrigger>
- * ```
- *
- * @param asChild - When true, merges props with child element instead of rendering a button @default false
- * @param children - Child element to render as the trigger. Required when asChild is true
- *
- * @accessibility
- * - Automatically receives appropriate ARIA attributes
- * - Manages focus when sheet opens and closes
- * - Supports keyboard activation (Space and Enter)
- *
- * @see {@link SheetContent} For the content that this trigger opens
- * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#trigger} Radix UI Dialog Trigger
+ * Button that opens the sheet. Use `render` prop to customize the trigger element.
  */
-declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function SheetTrigger({ ...props }: SheetTriggerProps): import("react/jsx-runtime").JSX.Element;
+type SheetCloseProps = SheetPrimitive.Close.Props;
 /**
- * SheetClose - Button that closes the sheet
- *
- * A button that closes the sheet when clicked. Can be placed anywhere
- * within the sheet content. Use the `asChild` prop to render as a
- * different element while maintaining the close functionality.
- * Multiple close buttons can be used throughout the sheet content.
- *
- * @component
- * @example
- * ```tsx
- * // In footer with styled button
- * <SheetFooter>
- *   <SheetClose asChild>
- *     <Button variant="outline">Cancel</Button>
- *   </SheetClose>
- *   <Button type="submit">Save</Button>
- * </SheetFooter>
- *
- * // As simple text button
- * <SheetClose>Close</SheetClose>
- *
- * // Custom close button in content
- * <SheetClose asChild>
- *   <Button variant="ghost" size="sm" className="ml-auto">
- *     <XIcon className="h-4 w-4" />
- *   </Button>
- * </SheetClose>
- * ```
- *
- * @param asChild - When true, merges props with child element instead of rendering a button @default false
- * @param children - Child element to render as the close button. Required when asChild is true
- *
- * @accessibility
- * - Automatically receives appropriate ARIA attributes
- * - Supports keyboard activation (Space and Enter)
- * - Focus returns to trigger element after closing
- *
- * @see {@link SheetTrigger} For the element that opens the sheet
- * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#close} Radix UI Dialog Close
+ * Button that closes the sheet. Use `render` prop to customize the close element.
  */
-declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+declare function SheetClose({ ...props }: SheetCloseProps): import("react/jsx-runtime").JSX.Element;
+type SheetContentProps = SheetPrimitive.Popup.Props & {
+    /** Which edge the sheet slides in from. @default "right" */
+    side?: "top" | "right" | "bottom" | "left";
+    /** Show close button (X) in top-right corner. @default true */
+    showCloseButton?: boolean;
+};
 /**
- * SheetContent - Main container for sheet content
- *
- * The primary content area of the sheet that slides in from the specified side.
- * Includes automatic overlay, portal rendering, and close button. Contains smooth
- * slide animations with responsive sizing and proper focus management.
- *
- * Features automatic positioning based on the side prop:
- * - Right/Left: Full height, responsive width (3/4 on mobile, max 384px on desktop)
- * - Top/Bottom: Full width, auto height based on content
- *
- * @component
- * @example
- * ```tsx
- * // Default right-side sheet
- * <SheetContent>
- *   <SheetHeader>
- *     <SheetTitle>Settings</SheetTitle>
- *   </SheetHeader>
- *   <div className="py-4">
- *     Settings content here
- *   </div>
- * </SheetContent>
- *
- * // Left-side navigation sheet
- * <SheetContent side="left">
- *   <nav>
- *     <Button variant="ghost">Dashboard</Button>
- *     <Button variant="ghost">Profile</Button>
- *   </nav>
- * </SheetContent>
- *
- * // Top sheet with custom height
- * <SheetContent side="top" className="h-[300px]">
- *   <SheetHeader>
- *     <SheetTitle>Notifications</SheetTitle>
- *   </SheetHeader>
- * </SheetContent>
- *
- * // Bottom sheet for mobile actions
- * <SheetContent side="bottom" className="h-[400px]">
- *   <div className="grid grid-cols-2 gap-4">
- *     <Button>Action 1</Button>
- *     <Button>Action 2</Button>
- *   </div>
- * </SheetContent>
- * ```
- *
- * @param asChild - When true, merges props with child element instead of rendering a div @default false
- * @param forceMount - Forces mounting when true. Useful for controlling animations with external state
- * @param onCloseAutoFocus - Event handler called when focus moves to the trigger after closing
- * @param onOpenAutoFocus - Event handler called when focus moves into the component after opening
- * @param onEscapeKeyDown - Event handler called when the escape key is down. Can prevent default to disable escape key closing
- * @param onPointerDownOutside - Event handler called when a pointer down event happens outside the component bounds
- * @param onInteractOutside - Event handler called when an interaction happens outside the component bounds
- * @param side - Which side of the screen the sheet slides in from @default "right"
- * @param className - Additional CSS classes for styling customization
- * @param children - Content to display inside the sheet
- *
- * @accessibility
- * - Includes built-in close button with proper ARIA labels and screen reader text
- * - Focus automatically trapped within content when open
- * - Escape key closes the sheet (can be prevented with onEscapeKeyDown)
- * - Background overlay prevents interaction with page content
- * - Focus returns to trigger element when closed
- * - Supports all standard keyboard interactions
- *
- * @see {@link SheetHeader} For structured header content
- * @see {@link SheetFooter} For action buttons
- * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#content} Radix UI Dialog Content
+ * Sheet content panel with automatic portal, overlay, and slide animations.
+ * Slides in from specified edge with backdrop blur effect.
  */
-declare function SheetContent({ className, children, side, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
-    side?: "top" | "right" | "bottom" | "left";
-}): import("react/jsx-runtime").JSX.Element;
+declare function SheetContent({ className, children, side, showCloseButton, ...props }: SheetContentProps): import("react/jsx-runtime").JSX.Element;
+type SheetHeaderProps = React.ComponentProps<"div">;
 /**
- * SheetHeader - Header section for sheet content
- *
- * A container for the sheet's title and description, positioned at the top
- * of the sheet content. Provides consistent spacing and layout for sheet headers.
- * Should contain SheetTitle and optionally SheetDescription for proper
- * accessibility and semantic structure.
- *
- * @component
- * @example
- * ```tsx
- * // Complete header with title and description
- * <SheetHeader>
- *   <SheetTitle>Edit Profile</SheetTitle>
- *   <SheetDescription>
- *     Make changes to your profile information.
- *   </SheetDescription>
- * </SheetHeader>
- *
- * // Header with title only
- * <SheetHeader>
- *   <SheetTitle>Quick Actions</SheetTitle>
- * </SheetHeader>
- *
- * // With custom styling and border
- * <SheetHeader className="border-b pb-4 mb-4">
- *   <SheetTitle>Advanced Settings</SheetTitle>
- *   <SheetDescription>
- *     Configure advanced options for your account.
- *   </SheetDescription>
- * </SheetHeader>
- * ```
- *
- * @param className - Additional CSS classes for styling customization
- * @param children - Header content (typically SheetTitle and SheetDescription)
- *
- * @accessibility
- * - Provides semantic structure for sheet content
- * - Works with SheetTitle to properly label the sheet
- * - Maintains proper heading hierarchy
- *
- * @see {@link SheetTitle} For the main sheet heading
- * @see {@link SheetDescription} For additional context text
+ * Header section for sheet title and description. Provides consistent spacing.
  */
-declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SheetHeader({ className, ...props }: SheetHeaderProps): import("react/jsx-runtime").JSX.Element;
+type SheetFooterProps = React.ComponentProps<"div">;
 /**
- * SheetFooter - Footer section for sheet actions
- *
- * A container for action buttons positioned at the bottom of the sheet content.
- * Uses `mt-auto` to stick to the bottom and provides consistent spacing for buttons.
- * Ideal for primary and secondary actions like Save/Cancel button pairs.
- *
- * @component
- * @example
- * ```tsx
- * // Standard save/cancel footer
- * <SheetFooter>
- *   <SheetClose asChild>
- *     <Button variant="outline">Cancel</Button>
- *   </SheetClose>
- *   <Button type="submit">Save Changes</Button>
- * </SheetFooter>
- *
- * // Single action footer
- * <SheetFooter>
- *   <SheetClose asChild>
- *     <Button className="w-full">Done</Button>
- *   </SheetClose>
- * </SheetFooter>
- *
- * // Custom layout with multiple action groups
- * <SheetFooter className="flex-row justify-between">
- *   <Button variant="ghost">Reset</Button>
- *   <div className="flex gap-2">
- *     <SheetClose asChild>
- *       <Button variant="outline">Cancel</Button>
- *     </SheetClose>
- *     <Button>Save</Button>
- *   </div>
- * </SheetFooter>
- *
- * // Footer with destructive action
- * <SheetFooter>
- *   <Button variant="destructive">Delete Account</Button>
- *   <SheetClose asChild>
- *     <Button variant="outline">Keep Account</Button>
- *   </SheetClose>
- * </SheetFooter>
- * ```
- *
- * @param className - Additional CSS classes for styling customization
- * @param children - Footer content (typically action buttons)
- *
- * @accessibility
- * - Provides semantic footer structure
- * - Supports proper tab order for action buttons
- * - Works with form submission patterns
- *
- * @see {@link SheetClose} For buttons that close the sheet
+ * Footer section for sheet actions. Automatically sticks to bottom with consistent spacing.
  */
-declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function SheetFooter({ className, ...props }: SheetFooterProps): import("react/jsx-runtime").JSX.Element;
+type SheetTitleProps = SheetPrimitive.Title.Props;
 /**
- * SheetTitle - Title element for the sheet
- *
- * The main heading for the sheet content. Provides proper semantic heading
- * and accessibility labeling for screen readers. Should be used within SheetHeader.
- * This component is required for proper accessibility - every sheet must have a title.
- *
- * @component
- * @example
- * ```tsx
- * // Standard usage in header
- * <SheetHeader>
- *   <SheetTitle>Edit Profile</SheetTitle>
- *   <SheetDescription>Update your profile information.</SheetDescription>
- * </SheetHeader>
- *
- * // With custom styling
- * <SheetTitle className="text-lg text-blue-600">Settings</SheetTitle>
- *
- * // As a custom heading level
- * <SheetTitle asChild>
- *   <h1 className="text-2xl font-bold">Important Notice</h1>
- * </SheetTitle>
- *
- * // Dynamic title content
- * <SheetTitle>Edit {selectedUser?.name || 'User'}</SheetTitle>
- * ```
- *
- * @param asChild - When true, merges props with child element instead of rendering an h2 @default false
- * @param className - Additional CSS classes for styling customization
- * @param children - Title text content
- *
- * @accessibility
- * - Required for proper sheet accessibility
- * - Automatically provides ARIA labeling for the entire sheet
- * - Renders as semantic heading element (h2 by default)
- * - Screen readers announce this title when sheet opens
- *
- * @see {@link SheetHeader} For proper title placement
- * @see {@link SheetDescription} For additional context
- * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#title} Radix UI Dialog Title
+ * Accessible sheet title. Automatically linked to sheet for screen readers.
  */
-declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function SheetTitle({ className, ...props }: SheetTitleProps): import("react/jsx-runtime").JSX.Element;
+type SheetDescriptionProps = SheetPrimitive.Description.Props;
 /**
- * SheetDescription - Description text for the sheet
- *
- * Provides additional context about the sheet's purpose or instructions.
- * Appears below the title with muted styling. Should be used within SheetHeader.
- * While optional, it's recommended for better accessibility and user understanding.
- *
- * @component
- * @example
- * ```tsx
- * // Standard usage with instructional text
- * <SheetHeader>
- *   <SheetTitle>Edit Profile</SheetTitle>
- *   <SheetDescription>
- *     Make changes to your profile here. Click save when you're done.
- *   </SheetDescription>
- * </SheetHeader>
- *
- * // Warning or important information
- * <SheetDescription className="text-orange-600">
- *   This action cannot be undone.
- * </SheetDescription>
- *
- * // Custom styled description
- * <SheetDescription asChild>
- *   <p className="text-sm text-gray-600 italic">
- *     Changes will be saved automatically.
- *   </p>
- * </SheetDescription>
- *
- * // Contextual help description
- * <SheetDescription>
- *   Use this form to update your notification preferences.
- *   Changes take effect immediately.
- * </SheetDescription>
- * ```
- *
- * @param asChild - When true, merges props with child element instead of rendering a p element @default false
- * @param className - Additional CSS classes for styling customization
- * @param children - Description text content
- *
- * @accessibility
- * - Provides additional context for screen readers
- * - Automatically linked to the sheet via ARIA attributes
- * - Announced by screen readers when sheet opens
- * - Helps users understand the sheet's purpose
- *
- * @see {@link SheetTitle} For the main sheet heading
- * @see {@link SheetHeader} For proper description placement
- * @see {@link https://www.radix-ui.com/primitives/docs/components/dialog#description} Radix UI Dialog Description
+ * Accessible sheet description. Provides additional context for screen readers.
  */
-declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
-export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };
+declare function SheetDescription({ className, ...props }: SheetDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, type SheetProps, type SheetTriggerProps, type SheetCloseProps, type SheetContentProps, type SheetHeaderProps, type SheetFooterProps, type SheetTitleProps, type SheetDescriptionProps, };
 //# sourceMappingURL=sheet.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../src/components/ui/sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,cAAc,MAAM,wBAAwB,CAAC;AA+JzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0GG;AACH,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,2CAE5E;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,2CAErD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,iBAAS,UAAU,CAAC,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,2CAEnD;AAgGD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AACH,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,QAAQ,EACR,IAAc,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,GAAG;IACvD,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;CAC5C,2CA4BA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQxE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQxE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,2CAQnD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,WAAW,CAAC,2CAQzD;AAED,OAAO,EACL,KAAK,EACL,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,GACjB,CAAC"}
+{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../src/components/ui/sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAMjE,KAAK,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;AAE5C;;;GAGG;AACH,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAEtC;AAED,KAAK,iBAAiB,GAAG,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC;AAEtD;;GAEG;AACH,iBAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAEpD;AAED,KAAK,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC;AAElD;;GAEG;AACH,iBAAS,UAAU,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAEhD;AA6BD,KAAK,iBAAiB,GAAG,cAAc,CAAC,KAAK,CAAC,KAAK,GAAG;IACpD,4DAA4D;IAC5D,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,+DAA+D;IAC/D,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF;;;GAGG;AACH,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,QAAQ,EACR,IAAc,EACd,eAAsB,EACtB,GAAG,KAAK,EACT,EAAE,iBAAiB,2CAgCnB;AAED,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEpD;;GAEG;AACH,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAQ7D;AAED,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAEpD;;GAEG;AACH,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAQ7D;AAED,KAAK,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC;AAElD;;GAEG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CAQ3D;AAED,KAAK,qBAAqB,GAAG,cAAc,CAAC,WAAW,CAAC,KAAK,CAAC;AAE9D;;GAEG;AACH,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,2CAQvE;AAED,OAAO,EACL,KAAK,EACL,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,KAAK,UAAU,EACf,KAAK,iBAAiB,EACtB,KAAK,eAAe,EACpB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,qBAAqB,GAC3B,CAAC"}

package/dist/components/ui/sheet.js

@@ -0,0 +1,133 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { cn } from "../../lib/utils.js";
+import { Button } from "./button.js";
+import X from "../../node_modules/lucide-react/dist/esm/icons/x.js";
+import { DialogRoot } from "../../node_modules/@base-ui/react/esm/dialog/root/DialogRoot.js";
+import { DialogTrigger } from "../../node_modules/@base-ui/react/esm/dialog/trigger/DialogTrigger.js";
+import { DialogClose } from "../../node_modules/@base-ui/react/esm/dialog/close/DialogClose.js";
+import { DialogPopup } from "../../node_modules/@base-ui/react/esm/dialog/popup/DialogPopup.js";
+import { DialogTitle } from "../../node_modules/@base-ui/react/esm/dialog/title/DialogTitle.js";
+import { DialogDescription } from "../../node_modules/@base-ui/react/esm/dialog/description/DialogDescription.js";
+import { DialogPortal } from "../../node_modules/@base-ui/react/esm/dialog/portal/DialogPortal.js";
+import { DialogBackdrop } from "../../node_modules/@base-ui/react/esm/dialog/backdrop/DialogBackdrop.js";
+function Sheet({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogRoot, { "data-slot": "sheet", ...props });
+}
+function SheetTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogTrigger, { "data-slot": "sheet-trigger", ...props });
+}
+function SheetClose({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogClose, { "data-slot": "sheet-close", ...props });
+}
+function SheetPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(DialogPortal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    DialogBackdrop,
+    {
+      "data-slot": "sheet-overlay",
+      className: cn(
+        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
+    /* @__PURE__ */ jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPopup,
+      {
+        "data-slot": "sheet-content",
+        "data-side": side,
+        className: cn(
+          "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            DialogClose,
+            {
+              "data-slot": "sheet-close",
+              render: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  className: "absolute top-4 right-4",
+                  size: "icon-sm"
+                }
+              ),
+              children: [
+                /* @__PURE__ */ jsx(X, {}),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sheet-header",
+      className: cn("flex flex-col gap-1.5 p-4", className),
+      ...props
+    }
+  );
+}
+function SheetFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sheet-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-4", className),
+      ...props
+    }
+  );
+}
+function SheetTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    DialogTitle,
+    {
+      "data-slot": "sheet-title",
+      className: cn("text-foreground font-medium", className),
+      ...props
+    }
+  );
+}
+function SheetDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    DialogDescription,
+    {
+      "data-slot": "sheet-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger
+};
+//# sourceMappingURL=sheet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.js","sources":["../../../src/components/ui/sheet.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { XIcon } from \"lucide-react\";\n\ntype SheetProps = SheetPrimitive.Root.Props;\n\n/**\n * Sheet root component. Manages open/closed state for slide-in panels.\n * Built on Base UI Dialog with directional slide animations.\n */\nfunction Sheet({ ...props }: SheetProps) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n}\n\ntype SheetTriggerProps = SheetPrimitive.Trigger.Props;\n\n/**\n * Button that opens the sheet. Use `render` prop to customize the trigger element.\n */\nfunction SheetTrigger({ ...props }: SheetTriggerProps) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\ntype SheetCloseProps = SheetPrimitive.Close.Props;\n\n/**\n * Button that closes the sheet. Use `render` prop to customize the close element.\n */\nfunction SheetClose({ ...props }: SheetCloseProps) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\ntype SheetPortalProps = SheetPrimitive.Portal.Props;\n\n/**\n * Portal container for sheet content. Renders sheet outside normal DOM hierarchy.\n */\nfunction SheetPortal({ ...props }: SheetPortalProps) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />;\n}\n\ntype SheetOverlayProps = SheetPrimitive.Backdrop.Props;\n\n/**\n * Translucent backdrop overlay with blur effect. Automatically included in SheetContent.\n */\nfunction SheetOverlay({ className, ...props }: SheetOverlayProps) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-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 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype SheetContentProps = SheetPrimitive.Popup.Props & {\n  /** Which edge the sheet slides in from. @default \"right\" */\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  /** Show close button (X) in top-right corner. @default true */\n  showCloseButton?: boolean;\n};\n\n/**\n * Sheet content panel with automatic portal, overlay, and slide animations.\n * Slides in from specified edge with backdrop blur effect.\n */\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: SheetContentProps) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-4 right-4\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  );\n}\n\ntype SheetHeaderProps = React.ComponentProps<\"div\">;\n\n/**\n * Header section for sheet title and description. Provides consistent spacing.\n */\nfunction SheetHeader({ className, ...props }: SheetHeaderProps) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-4\", className)}\n      {...props}\n    />\n  );\n}\n\ntype SheetFooterProps = React.ComponentProps<\"div\">;\n\n/**\n * Footer section for sheet actions. Automatically sticks to bottom with consistent spacing.\n */\nfunction SheetFooter({ className, ...props }: SheetFooterProps) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  );\n}\n\ntype SheetTitleProps = SheetPrimitive.Title.Props;\n\n/**\n * Accessible sheet title. Automatically linked to sheet for screen readers.\n */\nfunction SheetTitle({ className, ...props }: SheetTitleProps) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\ntype SheetDescriptionProps = SheetPrimitive.Description.Props;\n\n/**\n * Accessible sheet description. Provides additional context for screen readers.\n */\nfunction SheetDescription({ className, ...props }: SheetDescriptionProps) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n  type SheetProps,\n  type SheetTriggerProps,\n  type SheetCloseProps,\n  type SheetContentProps,\n  type SheetHeaderProps,\n  type SheetFooterProps,\n  type SheetTitleProps,\n  type SheetDescriptionProps,\n};\n"],"names":["SheetPrimitive.Root","SheetPrimitive.Trigger","SheetPrimitive.Close","SheetPrimitive.Portal","SheetPrimitive.Backdrop","SheetPrimitive.Popup","XIcon","SheetPrimitive.Title","SheetPrimitive.Description"],"mappings":";;;;;;;;;;;;;AAaA,SAAS,MAAM,EAAE,GAAG,SAAqB;AACvC,6BAAQA,YAAA,EAAoB,aAAU,SAAS,GAAG,OAAO;AAC3D;AAOA,SAAS,aAAa,EAAE,GAAG,SAA4B;AACrD,6BAAQC,eAAA,EAAuB,aAAU,iBAAiB,GAAG,OAAO;AACtE;AAOA,SAAS,WAAW,EAAE,GAAG,SAA0B;AACjD,6BAAQC,aAAA,EAAqB,aAAU,eAAe,GAAG,OAAO;AAClE;AAOA,SAAS,YAAY,EAAE,GAAG,SAA2B;AACnD,6BAAQC,cAAA,EAAsB,aAAU,gBAAgB,GAAG,OAAO;AACpE;AAOA,SAAS,aAAa,EAAE,WAAW,GAAG,SAA4B;AAChE,SACE;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAaA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,kBAAkB;AAAA,EAClB,GAAG;AACL,GAAsB;AACpB,8BACG,aAAA,EACC,UAAA;AAAA,IAAA,oBAAC,cAAA,EAAa;AAAA,IACd;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,aAAU;AAAA,QACV,aAAW;AAAA,QACX,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UACA,mBACC;AAAA,YAACH;AAAAA,YAAA;AAAA,cACC,aAAU;AAAA,cACV,QACE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,WAAU;AAAA,kBACV,MAAK;AAAA,gBAAA;AAAA,cAAA;AAAA,cAIT,UAAA;AAAA,gBAAA,oBAACI,GAAA,EAAM;AAAA,gBACP,oBAAC,QAAA,EAAK,WAAU,WAAU,UAAA,QAAA,CAAK;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACjC;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ,GACF;AAEJ;AAOA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,6BAA6B,SAAS;AAAA,MACnD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAOA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,mCAAmC,SAAS;AAAA,MACzD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAOA,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,SACE;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,+BAA+B,SAAS;AAAA,MACrD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAOA,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAgC;AACxE,SACE;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,iCAAiC,SAAS;AAAA,MACvD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}