@neynar/ui 0.1.1

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

@@ -0,0 +1,346 @@
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+/**
+ * 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
+ */
+declare function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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.
+ *
+ * @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 the child element instead of rendering a button
+ */
+declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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.
+ *
+ * @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 the child element instead of rendering a button
+ */
+declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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 and responsive sizing.
+ *
+ * @component
+ * @param side - Which side of the screen the sheet slides in from
+ * @param className - Additional CSS classes for styling customization
+ * @param children - Content to display inside the sheet
+ *
+ * @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>
+ * ```
+ *
+ * @accessibility
+ * - Includes built-in close button with proper ARIA labels
+ * - Focus trapped within content when open
+ * - Supports all keyboard interactions
+ */
+declare function SheetContent({ className, children, side, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
+    side?: "top" | "right" | "bottom" | "left";
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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.
+ *
+ * @component
+ * @param className - Additional CSS classes for styling customization
+ *
+ * @example
+ * ```tsx
+ * <SheetHeader>
+ *   <SheetTitle>Edit Profile</SheetTitle>
+ *   <SheetDescription>
+ *     Make changes to your profile information.
+ *   </SheetDescription>
+ * </SheetHeader>
+ *
+ * // With custom styling
+ * <SheetHeader className="border-b pb-4">
+ *   <SheetTitle>Settings</SheetTitle>
+ * </SheetHeader>
+ * ```
+ */
+declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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.
+ *
+ * @component
+ * @param className - Additional CSS classes for styling customization
+ *
+ * @example
+ * ```tsx
+ * <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
+ * <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>
+ * ```
+ */
+declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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.
+ *
+ * @component
+ * @param className - Additional CSS classes for styling customization
+ *
+ * @example
+ * ```tsx
+ * <SheetHeader>
+ *   <SheetTitle>Edit Profile</SheetTitle>
+ *   <SheetDescription>Update your profile information.</SheetDescription>
+ * </SheetHeader>
+ *
+ * // With custom styling
+ * <SheetTitle className="text-lg text-blue-600">Settings</SheetTitle>
+ * ```
+ *
+ * @accessibility
+ * - Automatically provides ARIA labeling for the sheet
+ * - Renders as proper heading element
+ */
+declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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.
+ *
+ * @component
+ * @param className - Additional CSS classes for styling customization
+ *
+ * @example
+ * ```tsx
+ * <SheetHeader>
+ *   <SheetTitle>Edit Profile</SheetTitle>
+ *   <SheetDescription>
+ *     Make changes to your profile here. Click save when you're done.
+ *   </SheetDescription>
+ * </SheetHeader>
+ *
+ * // Optional description
+ * <SheetDescription className="text-orange-600">
+ *   This action cannot be undone.
+ * </SheetDescription>
+ * ```
+ *
+ * @accessibility
+ * - Provides additional context for screen readers
+ * - Linked to the sheet via ARIA attributes
+ */
+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, };
+//# sourceMappingURL=sheet.d.ts.map

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

@@ -0,0 +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;AAKzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0GG;AACH,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,2CAE5E;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,OAAO,CAAC,2CAErD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,iBAAS,UAAU,CAAC,EAClB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,2CAEnD;AAkDD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDG;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;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQxE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQxE;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,KAAK,CAAC,2CAQnD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;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"}