@undp/design-system-react/dist/modal-ChzlMFpC.cjs.map

React based design system for UNDP

{"version":3,"file":"modal-ChzlMFpC.cjs","names":[],"sources":["../src/components/ui/dialog.tsx","../src/components/ui/modal.tsx"],"sourcesContent":["import { Dialog as DialogPrimitive } from 'radix-ui';\nimport React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst Dialog = DialogPrimitive.Root;\n\nconst DialogTrigger = DialogPrimitive.Trigger;\n\nconst DialogPortal = DialogPrimitive.Portal;\n\nconst DialogClose = DialogPrimitive.Close;\n\nconst DialogOverlay = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Overlay\n    {...props}\n    ref={ref}\n    className={cn(\n      'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-surface/90 backdrop-blur-[18px] data-[state=closed]:animate-out data-[state=open]:animate-in',\n      className,\n    )}\n  />\n));\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName;\n\nconst DialogContent = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {\n    onOpenChange?: (open: boolean) => void;\n    inPortal?: boolean;\n    overlayClassName?: string;\n  }\n>(({ className, children, onOpenChange, inPortal = false, overlayClassName, ...props }, ref) => {\n  const content = (\n    <>\n      <DialogOverlay onClick={() => onOpenChange?.(false)} className={overlayClassName} />\n      <DialogPrimitive.Content\n        {...props}\n        ref={ref}\n        className={cn(\n          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid max-h-[90vh] w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 overflow-auto border border-stroke-xs bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in',\n          className,\n        )}\n      >\n        {children}\n      </DialogPrimitive.Content>\n    </>\n  );\n  if (inPortal) {\n    return <DialogPortal data-slot='drawer-portal'>{content}</DialogPortal>;\n  }\n  return content;\n});\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\nfunction DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div {...props} className={cn('flex flex-col gap-1.5 text-center sm:text-left', className)} />\n  );\n}\nDialogHeader.displayName = 'DialogHeader';\n\nfunction DialogFooter({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div {...props} className={className}>\n      {children}\n    </div>\n  );\n}\nDialogFooter.displayName = 'DialogFooter';\n\nconst DialogTitle = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Title\n    {...props}\n    ref={ref}\n    className={cn(\n      'mb-0 p-0 font-normal text-content-primary text-h4-xs md:text-h4-sm lg:text-h4',\n      className,\n    )}\n  />\n));\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\nconst DialogDescription = React.forwardRef<\n  React.ComponentRef<typeof DialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <DialogPrimitive.Description\n    {...props}\n    ref={ref}\n    className={cn('m-0 text-content-secondary text-sm', className)}\n  />\n));\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n};\n","import { X } from 'lucide-react';\nimport { VisuallyHidden } from 'radix-ui';\nimport React from 'react';\n\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@/components/ui/dialog';\nimport { cn } from '@/lib/utils';\n\nfunction Modal(props: {\n  title?: string;\n  description?: string;\n  children?: React.ReactNode;\n  footer?: React.ReactNode;\n  open?: boolean;\n  onClose?: () => void;\n  className?: string;\n  showCloseButton?: boolean;\n  titleClassName?: string;\n  footerClassName?: string;\n  descriptionClassName?: string;\n  overlayClassName?: string;\n  closeButtonClassName?: string;\n  inPortal?: boolean;\n}) {\n  const {\n    title,\n    description,\n    children,\n    footer,\n    open,\n    onClose,\n    className,\n    titleClassName,\n    footerClassName,\n    descriptionClassName,\n    overlayClassName,\n    closeButtonClassName,\n    showCloseButton = true,\n    inPortal = false,\n  } = props;\n  const descriptionId = React.useId();\n  const titleId = React.useId();\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={(state) => {\n        if (!state) onClose?.();\n      }}\n    >\n      <DialogContent\n        inPortal={inPortal}\n        className={cn(\n          'undp-scrollbar max-w-(--breakpoint-xl) p-16',\n          'data-[state=closed]:animate-out data-[state=open]:animate-in',\n          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n          'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n          'data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%]',\n          className,\n        )}\n        overlayClassName={overlayClassName}\n        onOpenChange={(state) => {\n          if (!state) onClose?.();\n        }}\n        aria-describedby={description ? descriptionId : undefined}\n        aria-labelledby={title ? titleId : undefined}\n      >\n        {showCloseButton && (\n          <button\n            type='button'\n            onClick={() => {\n              onClose?.();\n            }}\n            className={cn(\n              'absolute top-6 right-6 rounded-full border border-stroke bg-surface p-2 ring-offset-background transition-opacity hover:bg-surface-hover disabled:pointer-events-none data-[state=open]:bg-surface data-[state=open]:text-content-primary',\n              closeButtonClassName,\n            )}\n          >\n            <X className='h-6 w-6' />\n          </button>\n        )}\n\n        {title || description ? (\n          <DialogHeader>\n            {title && (\n              <DialogTitle id={titleId} className={titleClassName}>\n                {title}\n              </DialogTitle>\n            )}\n            {description && (\n              <DialogDescription className={descriptionClassName} id={descriptionId}>\n                {description}\n              </DialogDescription>\n            )}\n          </DialogHeader>\n        ) : (\n          <VisuallyHidden.Root>\n            <DialogTitle>This a modal</DialogTitle>\n          </VisuallyHidden.Root>\n        )}\n\n        {children}\n\n        {footer && <DialogFooter className={footerClassName}>{footer}</DialogFooter>}\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nexport { Modal };\n"],"mappings":"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"}