-
Notifications
You must be signed in to change notification settings - Fork 61
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
cac2750
commit 3e61aba
Showing
1 changed file
with
108 additions
and
109 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,140 +1,139 @@ | ||
| "use client" | ||
| "use client"; | ||
|
|
||
| import * as React from "react" | ||
| import * as SheetPrimitive from "@radix-ui/react-dialog" | ||
| import { cva, type VariantProps } from "class-variance-authority" | ||
| import { X } from "lucide-react" | ||
| import * as React from "react"; | ||
| import * as SheetPrimitive from "@radix-ui/react-dialog"; | ||
| import { cva } from "class-variance-authority"; | ||
| import type { VariantProps } from "class-variance-authority"; | ||
| import { X } from "lucide-react"; | ||
|
|
||
| import { cn } from "@/lib/utils" | ||
| import { cn } from "@/lib/utils"; | ||
|
|
||
| const Sheet = SheetPrimitive.Root | ||
| const Sheet = SheetPrimitive.Root; | ||
|
|
||
| const SheetTrigger = SheetPrimitive.Trigger | ||
| const SheetTrigger = SheetPrimitive.Trigger; | ||
|
|
||
| const SheetClose = SheetPrimitive.Close | ||
| const SheetClose = SheetPrimitive.Close; | ||
|
|
||
| const SheetPortal = SheetPrimitive.Portal | ||
| const SheetPortal = SheetPrimitive.Portal; | ||
|
|
||
| const SheetOverlay = React.forwardRef< | ||
| React.ElementRef<typeof SheetPrimitive.Overlay>, | ||
| React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> | ||
| React.ElementRef<typeof SheetPrimitive.Overlay>, | ||
| React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SheetPrimitive.Overlay | ||
| className={cn( | ||
| "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", | ||
| className | ||
| )} | ||
| {...props} | ||
| ref={ref} | ||
| /> | ||
| )) | ||
| SheetOverlay.displayName = SheetPrimitive.Overlay.displayName | ||
| <SheetPrimitive.Overlay | ||
| className={cn( | ||
| "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", | ||
| className, | ||
| )} | ||
| {...props} | ||
| ref={ref} | ||
| /> | ||
| )); | ||
| SheetOverlay.displayName = SheetPrimitive.Overlay.displayName; | ||
|
|
||
| const sheetVariants = cva( | ||
| "fixed z-50 gap-4 bg-background p-6 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", | ||
| { | ||
| variants: { | ||
| side: { | ||
| top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", | ||
| 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 sm: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 sm:max-w-sm", | ||
| }, | ||
| "fixed z-50 gap-4 bg-background p-6 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", | ||
| { | ||
| variants: { | ||
| side: { | ||
| top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", | ||
| 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 sm: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 sm:max-w-sm", | ||
| }, | ||
| }, | ||
| defaultVariants: { | ||
| side: "right", | ||
| }, | ||
| }, | ||
| defaultVariants: { | ||
| side: "right", | ||
| }, | ||
| } | ||
| ) | ||
| ); | ||
|
|
||
| interface SheetContentProps | ||
| extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, | ||
| VariantProps<typeof sheetVariants> {} | ||
| extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, | ||
| VariantProps<typeof sheetVariants> {} | ||
|
|
||
| const SheetContent = React.forwardRef< | ||
| React.ElementRef<typeof SheetPrimitive.Content>, | ||
| SheetContentProps | ||
| React.ElementRef<typeof SheetPrimitive.Content>, | ||
| SheetContentProps | ||
| >(({ side = "right", className, children, ...props }, ref) => ( | ||
| <SheetPortal> | ||
| <SheetOverlay /> | ||
| <SheetPrimitive.Content | ||
| ref={ref} | ||
| className={cn(sheetVariants({ side }), className)} | ||
| {...props} | ||
| > | ||
| {children} | ||
| <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"> | ||
| <X className="h-4 w-4" /> | ||
| <span className="sr-only">Close</span> | ||
| </SheetPrimitive.Close> | ||
| </SheetPrimitive.Content> | ||
| </SheetPortal> | ||
| )) | ||
| SheetContent.displayName = SheetPrimitive.Content.displayName | ||
| <SheetPortal> | ||
| <SheetOverlay /> | ||
| <SheetPrimitive.Content | ||
| ref={ref} | ||
| className={cn(sheetVariants({ side }), className)} | ||
| {...props} | ||
| > | ||
| {children} | ||
| <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"> | ||
| <X className="h-4 w-4" /> | ||
| <span className="sr-only">Close</span> | ||
| </SheetPrimitive.Close> | ||
| </SheetPrimitive.Content> | ||
| </SheetPortal> | ||
| )); | ||
| SheetContent.displayName = SheetPrimitive.Content.displayName; | ||
|
|
||
| const SheetHeader = ({ | ||
| className, | ||
| ...props | ||
| className, | ||
| ...props | ||
| }: React.HTMLAttributes<HTMLDivElement>) => ( | ||
| <div | ||
| className={cn( | ||
| "flex flex-col space-y-2 text-center sm:text-left", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| ) | ||
| SheetHeader.displayName = "SheetHeader" | ||
| <div | ||
| className={cn( | ||
| "flex flex-col space-y-2 text-center sm:text-left", | ||
| className, | ||
| )} | ||
| {...props} | ||
| /> | ||
| ); | ||
| SheetHeader.displayName = "SheetHeader"; | ||
|
|
||
| const SheetFooter = ({ | ||
| className, | ||
| ...props | ||
| className, | ||
| ...props | ||
| }: React.HTMLAttributes<HTMLDivElement>) => ( | ||
| <div | ||
| className={cn( | ||
| "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| ) | ||
| SheetFooter.displayName = "SheetFooter" | ||
| <div | ||
| className={cn( | ||
| "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", | ||
| className, | ||
| )} | ||
| {...props} | ||
| /> | ||
| ); | ||
| SheetFooter.displayName = "SheetFooter"; | ||
|
|
||
| const SheetTitle = React.forwardRef< | ||
| React.ElementRef<typeof SheetPrimitive.Title>, | ||
| React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> | ||
| React.ElementRef<typeof SheetPrimitive.Title>, | ||
| React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SheetPrimitive.Title | ||
| ref={ref} | ||
| className={cn("text-lg font-semibold text-foreground", className)} | ||
| {...props} | ||
| /> | ||
| )) | ||
| SheetTitle.displayName = SheetPrimitive.Title.displayName | ||
| <SheetPrimitive.Title | ||
| ref={ref} | ||
| className={cn("text-lg font-semibold text-foreground", className)} | ||
| {...props} | ||
| /> | ||
| )); | ||
| SheetTitle.displayName = SheetPrimitive.Title.displayName; | ||
|
|
||
| const SheetDescription = React.forwardRef< | ||
| React.ElementRef<typeof SheetPrimitive.Description>, | ||
| React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> | ||
| React.ElementRef<typeof SheetPrimitive.Description>, | ||
| React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> | ||
| >(({ className, ...props }, ref) => ( | ||
| <SheetPrimitive.Description | ||
| ref={ref} | ||
| className={cn("text-sm text-muted-foreground", className)} | ||
| {...props} | ||
| /> | ||
| )) | ||
| SheetDescription.displayName = SheetPrimitive.Description.displayName | ||
| <SheetPrimitive.Description | ||
| ref={ref} | ||
| className={cn("text-sm text-muted-foreground", className)} | ||
| {...props} | ||
| /> | ||
| )); | ||
| SheetDescription.displayName = SheetPrimitive.Description.displayName; | ||
|
|
||
| export { | ||
| Sheet, | ||
| SheetPortal, | ||
| SheetOverlay, | ||
| SheetTrigger, | ||
| SheetClose, | ||
| SheetContent, | ||
| SheetHeader, | ||
| SheetFooter, | ||
| SheetTitle, | ||
| SheetDescription, | ||
| } | ||
| Sheet, | ||
| SheetPortal, | ||
| SheetOverlay, | ||
| SheetTrigger, | ||
| SheetClose, | ||
| SheetContent, | ||
| SheetHeader, | ||
| SheetFooter, | ||
| SheetTitle, | ||
| SheetDescription, | ||
| }; |