MC Dialog

'use client';import * as React from 'react';import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';import { XIcon } from 'lucide-react';import { cn } from '@/lib/utils';import { McButton } from '@/registry/ui/mc-button';function McDialog({ ...props }: DialogPrimitive.Root.Props) {  return <DialogPrimitive.Root data-slot="dialog" {...props} />;}function McDialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;}function McDialogPortal({ ...props }: DialogPrimitive.Portal.Props) {  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;}function McDialogClose({ ...props }: DialogPrimitive.Close.Props) {  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;}function McDialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {  return (    <DialogPrimitive.Backdrop      data-slot="dialog-overlay"      className={cn(        'fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',        className      )}      {...props}    />  );}function McDialogContent({  className,  children,  showCloseButton = true,  ...props}: DialogPrimitive.Popup.Props & {  showCloseButton?: boolean;}) {  return (    <McDialogPortal>      <McDialogOverlay />      <DialogPrimitive.Popup        data-slot="dialog-content"        className={cn(          'fixed top-1/2 left-1/2 z-50 grid w-[min(423px,calc(100%-2rem))] gap-4 rounded-lg border bg-popover p-6 text-sm text-popover-foreground opacity-100 -translate-x-1/2 -translate-y-1/2 duration-100 outline-none sm:min-h-[344px] 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',          className        )}        {...props}      >        {children}        {showCloseButton && (          <DialogPrimitive.Close            data-slot="dialog-close"            render={              <McButton                variant="tertiary"                className="absolute top-2 right-2 !bg-transparent text-muted-foreground shadow-none hover:!bg-transparent hover:text-foreground active:text-foreground focus:outline-none focus-visible:ring-0 focus-visible:ring-transparent focus-visible:shadow-none"                size="sm"                icon="only"                iconDefinition={<XIcon className="size-4" />}              >                <span className="sr-only">Close</span>              </McButton>            }          />        )}      </DialogPrimitive.Popup>    </McDialogPortal>  );}function McDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {  return (    <div data-slot="dialog-header" className={cn('flex flex-col gap-2', className)} {...props} />  );}function McDialogFooter({  className,  showCloseButton = false,  children,  ...props}: React.ComponentProps<'div'> & {  showCloseButton?: boolean;}) {  return (    <div      data-slot="dialog-footer"      className={cn(        'flex flex-col-reverse gap-2 !border-t-0 pt-1 pb-4 sm:flex-row sm:items-center sm:justify-end',        className      )}      {...props}    >      {children}      {showCloseButton && (        <DialogPrimitive.Close render={<McButton variant="secondary">Close</McButton>} />      )}    </div>  );}function McDialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {  return (    <DialogPrimitive.Title      data-slot="dialog-title"      className={cn('font-sans text-lg leading-7 font-semibold text-card-foreground', className)}      {...props}    />  );}function McDialogDescription({ className, ...props }: DialogPrimitive.Description.Props) {  return (    <DialogPrimitive.Description      data-slot="dialog-description"      className={cn(        'font-sans text-sm leading-5 font-normal tracking-normal text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',        className      )}      {...props}    />  );}export {  McDialog,  McDialogClose,  McDialogContent,  McDialogDescription,  McDialogFooter,  McDialogHeader,  McDialogOverlay,  McDialogPortal,  McDialogTitle,  McDialogTrigger,};