- "content": "\"use client\";\n\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const DialogCreateHandle: typeof DialogPrimitive.createHandle =\n DialogPrimitive.createHandle;\n\nexport const Dialog: typeof DialogPrimitive.Root = DialogPrimitive.Root;\n\nexport const DialogPortal: typeof DialogPrimitive.Portal =\n DialogPrimitive.Portal;\n\nexport function DialogTrigger(\n props: DialogPrimitive.Trigger.Props,\n): React.ReactElement {\n return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nexport function DialogClose(\n props: DialogPrimitive.Close.Props,\n): React.ReactElement {\n return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nexport function DialogBackdrop({\n className,\n ...props\n}: DialogPrimitive.Backdrop.Props): React.ReactElement {\n return (\n <DialogPrimitive.Backdrop\n className={cn(\n \"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-[-webkit-touch-callout:none]:absolute\",\n className,\n )}\n data-slot=\"dialog-backdrop\"\n {...props}\n />\n );\n}\n\nexport function DialogViewport({\n className,\n ...props\n}: DialogPrimitive.Viewport.Props): React.ReactElement {\n return (\n <DialogPrimitive.Viewport\n className={cn(\n \"fixed inset-0 z-50 grid grid-rows-[1fr_auto_3fr] justify-items-center p-4\",\n className,\n )}\n data-slot=\"dialog-viewport\"\n {...props}\n />\n );\n}\n\nexport function DialogPopup({\n className,\n children,\n showCloseButton = true,\n bottomStickOnMobile = true,\n closeProps,\n portalProps,\n ...props\n}: DialogPrimitive.Popup.Props & {\n showCloseButton?: boolean;\n bottomStickOnMobile?: boolean;\n closeProps?: DialogPrimitive.Close.Props;\n portalProps?: DialogPrimitive.Portal.Props;\n}): React.ReactElement {\n return (\n <DialogPortal {...portalProps}>\n <DialogBackdrop />\n <DialogViewport\n className={cn(\n bottomStickOnMobile &&\n \"max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12\",\n )}\n >\n <DialogPrimitive.Popup\n className={cn(\n \"relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg origin-center flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-var(--nested-dialogs))] shadow-lg/5 outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 sm:scale-[calc(1-0.1*var(--nested-dialogs))] sm:data-ending-style:scale-98 sm:data-starting-style:scale-98 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]\",\n bottomStickOnMobile &&\n \"max-sm:max-w-none max-sm:origin-bottom max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none\",\n className,\n )}\n data-slot=\"dialog-popup\"\n {...props}\n >\n {children}\n {showCloseButton && (\n <DialogPrimitive.Close\n aria-label=\"Close\"\n className=\"absolute end-2 top-2\"\n render={<Button size=\"icon\" variant=\"ghost\" />}\n {...closeProps}\n >\n <XIcon />\n </DialogPrimitive.Close>\n )}\n </DialogPrimitive.Popup>\n </DialogViewport>\n </DialogPortal>\n );\n}\n\nexport function DialogHeader({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"flex flex-col gap-2 p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pb-3 max-sm:pb-4\",\n className,\n ),\n \"data-slot\": \"dialog-header\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function DialogFooter({\n className,\n variant = \"default\",\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & {\n variant?: \"default\" | \"bare\";\n}): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]\",\n variant === \"default\" && \"border-t bg-muted/72 py-4\",\n variant === \"bare\" &&\n \"in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pt-3 pt-4 pb-6\",\n className,\n ),\n \"data-slot\": \"dialog-footer\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function DialogTitle({\n className,\n ...props\n}: DialogPrimitive.Title.Props): React.ReactElement {\n return (\n <DialogPrimitive.Title\n className={cn(\"font-bold font-heading text-xl leading-none\", className)}\n data-slot=\"dialog-title\"\n {...props}\n />\n );\n}\n\nexport function DialogDescription({\n className,\n ...props\n}: DialogPrimitive.Description.Props): React.ReactElement {\n return (\n <DialogPrimitive.Description\n className={cn(\"text-muted-foreground text-sm\", className)}\n data-slot=\"dialog-description\"\n {...props}\n />\n );\n}\n\nexport function DialogPanel({\n className,\n scrollFade = true,\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & {\n scrollFade?: boolean;\n}): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"p-6 in-[[data-slot=dialog-popup]:has([data-slot=dialog-header])]:pt-1 in-[[data-slot=dialog-popup]:has([data-slot=dialog-footer]:not(.border-t))]:pb-1\",\n className,\n ),\n \"data-slot\": \"dialog-panel\",\n };\n\n return (\n <ScrollArea overscrollContain scrollFade={scrollFade}>\n {useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n })}\n </ScrollArea>\n );\n}\n\nexport {\n DialogPrimitive,\n DialogBackdrop as DialogOverlay,\n DialogPopup as DialogContent,\n};\n",
0 commit comments