"use client"; import * as React from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { Drawer as DrawerPrimitive } from "vaul"; import { OverlayAction } from "@/registry/berlin/circle-ui/overlay-action"; import { cn } from "@/registry/berlin/lib/utils"; let activeBodyScrollLocks = 0; let originalBodyOverflow = ""; let originalBodyPaddingRight = ""; function useBodyScrollLock(isLocked: boolean) { React.useEffect(() => { if (!isLocked || typeof document === "undefined") return; const body = document.body; const documentElement = document.documentElement; const shouldLockBody = activeBodyScrollLocks === 0; activeBodyScrollLocks += 1; if (shouldLockBody) { originalBodyOverflow = body.style.overflow; originalBodyPaddingRight = body.style.paddingRight; const scrollbarGap = window.innerWidth - documentElement.clientWidth; body.style.overflow = "hidden"; if (scrollbarGap > 0) body.style.paddingRight = `${scrollbarGap}px`; } return () => { activeBodyScrollLocks = Math.max(0, activeBodyScrollLocks - 1); if (activeBodyScrollLocks === 0) { body.style.overflow = originalBodyOverflow; body.style.paddingRight = originalBodyPaddingRight; } }; }, [isLocked]); } function CloseIcon({ className }: { className?: string }) { return ( ); } const sheetTimingClass = "[animation-duration:320ms] [animation-timing-function:cubic-bezier(0.65,0.05,0.36,1)] [transition-duration:320ms] [transition-timing-function:cubic-bezier(0.65,0.05,0.36,1)]"; export const sheetVariants = cva( cn( "pointer-events-auto relative z-50 flex w-full max-w-[480px] flex-col bg-card px-6 pb-6 pt-14 shadow-(--shadow-elevated) outline-none transition-[transform,opacity] data-[state=closed]:pointer-events-none data-[state=closed]:opacity-0 data-[state=open]:opacity-100 after:hidden", sheetTimingClass, ), { variants: { variant: { sheet: "rounded-[28px] data-[state=closed]:translate-y-[20%] data-[state=open]:translate-y-0", modal: "rounded-[28px] data-[state=closed]:translate-y-[20%] data-[state=open]:translate-y-0 md:data-[state=closed]:translate-y-0 md:data-[state=closed]:scale-95 md:data-[state=open]:scale-100", }, }, defaultVariants: { variant: "sheet", }, }, ); const sheetPositionerVariants = cva( "fixed inset-0 z-50 overflow-y-auto", { variants: { variant: { sheet: "flex min-h-full w-full flex-col items-center justify-end px-3 pb-3 pt-6 md:justify-center md:px-0 md:py-12", modal: "flex min-h-full w-full flex-col items-center justify-end px-3 pb-3 pt-6 md:justify-center md:px-0 md:py-12", }, }, defaultVariants: { variant: "sheet", }, }, ); export const SheetRoot = DrawerPrimitive.Root; export const SheetTrigger = DrawerPrimitive.Trigger; export const SheetPortal = DrawerPrimitive.Portal; export const SheetClose = DrawerPrimitive.Close; export const SheetOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); SheetOverlay.displayName = DrawerPrimitive.Overlay.displayName; export interface SheetContentProps extends React.ComponentPropsWithoutRef, VariantProps { dismissible?: boolean; } export const SheetContent = React.forwardRef< React.ElementRef, SheetContentProps >(({ className, children, dismissible = true, variant, ...props }, ref) => (

{dismissible ? (

) : null} {children}

)); SheetContent.displayName = DrawerPrimitive.Content.displayName; export const SheetHeader = ({ className, ...props }: React.HTMLAttributes) => (

); export const SheetFooter = ({ className, ...props }: React.HTMLAttributes) => (

); export const SheetTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); SheetTitle.displayName = DrawerPrimitive.Title.displayName; export const SheetDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )); SheetDescription.displayName = DrawerPrimitive.Description.displayName; export interface SheetProps { isOpen: boolean; onClose: () => void; children: React.ReactNode; modal?: boolean; dismissible?: boolean; className?: string; id?: string; } export function Sheet({ isOpen, onClose, children, modal = false, dismissible = true, className, id, }: SheetProps) { useBodyScrollLock(isOpen); return ( { if (!open) onClose(); }} > {children} ); }

Installation

About

Usage

Dependencies

Source