@loke/design-system
Version:
A design system with individually importable components
3 lines (2 loc) • 4.03 kB
JavaScript
"use client";
import{cn}from"@loke/design-system/cn";import{X}from"@loke/icons";import*as DialogPrimitive from"@loke/ui/dialog";import{cva}from"class-variance-authority";import{createElement,forwardRef}from"react";import{jsx,jsxs}from"react/jsx-runtime";function Sheet({...props}){return jsx(DialogPrimitive.Root,{"data-slot":"sheet",...props})}function SheetTrigger({...props}){return jsx(DialogPrimitive.Trigger,{"data-slot":"sheet-trigger",...props})}function SheetClose({...props}){return jsx(DialogPrimitive.Close,{"data-slot":"sheet-close",...props})}function SheetPortal({...props}){return jsx(DialogPrimitive.Portal,{"data-slot":"sheet-portal",...props})}var SheetOverlay=forwardRef(({className,...props},ref)=>jsx(DialogPrimitive.Overlay,{className:cn("data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in",className),"data-slot":"sheet-overlay",...props,ref}));SheetOverlay.displayName=DialogPrimitive.Overlay.displayName;var sheetVariants=cva("fixed z-50 bg-card shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 flex flex-col",{defaultVariants:{side:"right"},variants:{side:{bottom:"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",left:"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left max-w-sm",right:"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right max-w-sm",top:"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top"}}}),SheetContent=forwardRef(({side="right",className,children,...props},ref)=>jsxs(SheetPortal,{children:[jsx(SheetOverlay,{}),jsxs(DialogPrimitive.Content,{className:cn(sheetVariants({side}),className),"data-slot":"sheet-content",ref,...props,children:[jsx("div",{className:"flex h-full grow flex-col overflow-y-auto px-6","data-slot":"sheet-body",children}),jsxs(DialogPrimitive.Close,{className:"absolute top-4 right-4 z-10 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary","data-slot":"sheet-close",children:[jsx(X,{className:"size-4"}),jsx("span",{className:"sr-only",children:"Close"})]})]})]}));SheetContent.displayName=DialogPrimitive.Content.displayName;var SheetHeader=({className,...props})=>jsx("div",{className:cn("sticky top-0 z-10 -mx-6 flex flex-col space-y-2 border-b bg-card px-6 py-4 text-center sm:text-left",className),"data-slot":"sheet-header",...props});SheetHeader.displayName="SheetHeader";var SheetFooter=({className,...props})=>jsx("div",{className:cn("sticky bottom-0 z-10 -mx-6 mt-auto flex flex-col-reverse border-t bg-card px-6 py-4 sm:flex-row sm:justify-end sm:space-x-2",className),"data-slot":"sheet-footer",...props});SheetFooter.displayName="SheetFooter";var SheetTitle=forwardRef(({className,icon,...props},ref)=>jsxs(DialogPrimitive.Title,{className:cn("flex items-center gap-2 font-semibold text-foreground text-lg",className),"data-slot":"sheet-title",ref,...props,children:[icon&&jsx("div",{className:"flex size-10 items-center justify-center rounded-full bg-secondary","data-slot":"sheet-title-icon",children:createElement(icon,{className:"text-secondary-foreground"})}),props.children]}));SheetTitle.displayName=DialogPrimitive.Title.displayName;var SheetDescription=forwardRef(({className,...props},ref)=>jsx(DialogPrimitive.Description,{className:cn("text-muted-foreground text-sm",className),"data-slot":"sheet-description",ref,...props}));SheetDescription.displayName=DialogPrimitive.Description.displayName;export{SheetTrigger,SheetTitle,SheetPortal,SheetOverlay,SheetHeader,SheetFooter,SheetDescription,SheetContent,SheetClose,Sheet};