132 lines
3.7 KiB
TypeScript
132 lines
3.7 KiB
TypeScript
'use client'
|
|
|
|
import * as React from 'react'
|
|
import { Dialog as DialogPrimitive } from 'radix-ui'
|
|
import { XIcon } from 'lucide-react'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
|
|
function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
|
|
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
|
}
|
|
|
|
function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
|
|
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
|
}
|
|
|
|
function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
|
|
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
|
}
|
|
|
|
function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
|
|
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
|
}
|
|
|
|
function DialogOverlay({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
|
|
return (
|
|
<DialogPrimitive.Overlay
|
|
data-slot="dialog-overlay"
|
|
className={cn(
|
|
'fixed inset-0 z-50 bg-black/60 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
|
|
className,
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function DialogContent({
|
|
className,
|
|
children,
|
|
showCloseButton = true,
|
|
...props
|
|
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
|
showCloseButton?: boolean
|
|
}) {
|
|
return (
|
|
<DialogPortal>
|
|
<DialogOverlay />
|
|
<DialogPrimitive.Content
|
|
data-slot="dialog-content"
|
|
className={cn(
|
|
'fixed left-1/2 top-1/2 z-50 grid w-[calc(100vw-2rem)] max-w-sm -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl border border-border bg-background p-6 text-foreground shadow-lg duration-200 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 sm:max-w-md sm:p-8',
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
{showCloseButton ? (
|
|
<DialogPrimitive.Close
|
|
data-slot="dialog-close"
|
|
className="absolute right-3 top-3 inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none"
|
|
aria-label="Fechar"
|
|
>
|
|
<XIcon className="size-4" />
|
|
</DialogPrimitive.Close>
|
|
) : null}
|
|
</DialogPrimitive.Content>
|
|
</DialogPortal>
|
|
)
|
|
}
|
|
|
|
function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
|
return (
|
|
<div
|
|
data-slot="dialog-header"
|
|
className={cn('flex flex-col gap-1.5 text-center sm:text-left', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
|
|
return (
|
|
<div
|
|
data-slot="dialog-footer"
|
|
className={cn('flex flex-col gap-2 sm:flex-row sm:justify-end', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function DialogTitle({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
|
|
return (
|
|
<DialogPrimitive.Title
|
|
data-slot="dialog-title"
|
|
className={cn('text-lg font-semibold leading-tight', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function DialogDescription({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
|
|
return (
|
|
<DialogPrimitive.Description
|
|
data-slot="dialog-description"
|
|
className={cn('text-sm leading-relaxed text-muted-foreground', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export {
|
|
Dialog,
|
|
DialogClose,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogOverlay,
|
|
DialogPortal,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
}
|