{"name":"dialog","type":"registry:ui","files":[{"path":"dialog.tsx","type":"registry:ui","content":"\"use client\"\n\nimport { Dialog as DialogPrimitive } from \"@base-ui-components/react/dialog\"\nimport { X as XIcon } from \"honestui/icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\n\nfunction DialogTrigger(props: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal(props: DialogPrimitive.Portal.Props) {\n  return <DialogPrimitive.Portal {...props} />\n}\n\nfunction DialogClose(props: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogBackdrop({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-backdrop\"\n      className={cn(\n        \"fixed inset-0 z-[var(--hui-z-index-portal)] bg-[var(--hui-color-overlay-black-a5)] [backdrop-filter:var(--hui-blur-lg)] [transition:opacity_var(--hui-duration-normal)_var(--hui-ease-out)] data-ending-style:opacity-0 data-starting-style:opacity-0 [@media(prefers-reduced-transparency:reduce)]:bg-[var(--hui-color-overlay-black-a9)] [@media(prefers-reduced-transparency:reduce)]:[backdrop-filter:none]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogPopup({\n  className,\n  children,\n  showCloseButton = true,\n  showNestedAnimation = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean\n  showNestedAnimation?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogBackdrop />\n      <div\n        data-slot=\"dialog-viewport\"\n        className=\"pointer-events-none fixed inset-0 z-[var(--hui-z-index-portal)] flex items-center justify-center\"\n      >\n        <DialogPrimitive.Popup\n          data-slot=\"dialog-popup\"\n          className={cn(\n            \"pointer-events-auto fixed top-0 left-1/2 min-h-[100px] max-h-[85vh] w-[400px] min-w-[200px] max-w-[90vw] overflow-auto rounded-[var(--hui-radius-2)] bg-[var(--hui-color-background-base-primary)] p-0 shadow-[var(--hui-shadow-floating)] [transform:translate(-50%,min(160px,calc(50vh-50%)))] outline-none [transition:opacity_var(--hui-duration-normal)_var(--hui-ease-out)] focus:outline-none data-ending-style:opacity-0 data-starting-style:opacity-0 after:pointer-events-none data-nested-dialog-open:after:absolute data-nested-dialog-open:after:inset-0 data-nested-dialog-open:after:rounded-[inherit] data-nested-dialog-open:after:bg-[var(--hui-color-overlay-black-a1)] motion-safe:[transition:opacity_var(--hui-duration-normal)_var(--hui-ease-out),transform_var(--hui-duration-normal)_var(--hui-ease-out)]\",\n            showNestedAnimation &&\n              \"[transform:translate(-50%,min(160px,calc(50vh-50%)))_scale(calc(1-0.1*var(--nested-dialogs,0)))] [translate:0_calc(1.25rem*var(--nested-dialogs,0))] motion-safe:data-ending-style:[transform:translate(-50%,min(160px,calc(50vh-50%)))_scale(0.9)] motion-safe:data-starting-style:[transform:translate(-50%,min(160px,calc(50vh-50%)))_scale(0.9)]\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <DialogPrimitive.Close className=\"absolute top-[18px] right-[var(--hui-space-7)] inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-[var(--hui-radius-2)] border border-transparent opacity-70 outline-none hover:opacity-100 focus-visible:[outline:var(--hui-focus-ring)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\">\n              <XIcon />\n              <span className=\"sr-only\">Close</span>\n            </DialogPrimitive.Close>\n          )}\n        </DialogPrimitive.Popup>\n      </div>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\n        \"flex flex-col gap-1 border-b border-[var(--hui-color-border-base-primary)] px-[var(--hui-space-7)] py-[var(--hui-space-5)] text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-body\"\n      className={cn(\n        \"px-[var(--hui-space-7)] py-[var(--hui-space-9)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 px-[var(--hui-space-7)] py-[var(--hui-space-5)] [[data-slot=dialog-body]+&]:border-t [[data-slot=dialog-body]+&]:border-[var(--hui-color-border-base-primary)] sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\n        \"m-0 text-[var(--hui-color-foreground-base-primary)] [font-size:var(--hui-font-size-large)] [font-style:normal] [font-weight:var(--hui-font-weight-medium)] [letter-spacing:var(--hui-letter-spacing-large)] [line-height:var(--hui-line-height-large)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"m-0 text-[var(--hui-color-foreground-base-secondary)] [font-size:var(--hui-font-size-small)] [font-style:normal] [font-weight:var(--hui-font-weight-regular)] [letter-spacing:var(--hui-letter-spacing-small)] [line-height:var(--hui-line-height-small)]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogTrigger,\n  DialogPortal,\n  DialogClose,\n  DialogBackdrop,\n  DialogBackdrop as DialogOverlay,\n  DialogPopup,\n  DialogPopup as DialogContent,\n  DialogHeader,\n  DialogBody,\n  DialogFooter,\n  DialogTitle,\n  DialogDescription,\n}\n","target":"components/ui/dialog.tsx"}],"dependencies":["@base-ui-components/react","honestui"]}