{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "modal",
  "type": "registry:ui",
  "description": "Confirm actions with purpose-built modal dialogs.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "components/ui/modal.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X, Check, AlertTriangle, XCircle } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\nconst modalVariants = cva(\"\", {\n    variants: {\n        variant: {\n            success: \"\",\n            warning: \"\",\n            destructive: \"\",\n        },\n    },\n    defaultVariants: {\n        variant: \"success\",\n    },\n})\n\nconst iconContainerVariants = cva(\n    \"mx-auto flex h-12 w-12 items-center justify-center rounded-full border-2 border-black\",\n    {\n        variants: {\n            variant: {\n                success: \"bg-green-100\",\n                warning: \"bg-yellow-100\",\n                destructive: \"bg-red-100\",\n            },\n        },\n        defaultVariants: {\n            variant: \"success\",\n        },\n    }\n)\n\nconst confirmButtonVariants = cva(\n    \"inline-flex h-9 items-center justify-center rounded-base border-2 border-black px-4 text-sm font-bold transition-colors focus-brutal\",\n    {\n        variants: {\n            variant: {\n                success: \"bg-green-400 text-black hover:bg-green-500 shadow-brutal\",\n                warning: \"bg-yellow-400 text-black hover:bg-yellow-500 shadow-brutal\",\n                destructive: \"bg-red-400 text-white hover:bg-red-500 shadow-brutal\",\n            },\n        },\n        defaultVariants: {\n            variant: \"success\",\n        },\n    }\n)\n\nfunction getIcon(variant: \"success\" | \"warning\" | \"destructive\" | null | undefined) {\n    switch (variant) {\n        case \"warning\":\n            return <AlertTriangle className=\"h-6 w-6 text-yellow-600\" />\n        case \"destructive\":\n            return <XCircle className=\"h-6 w-6 text-red-600\" />\n        case \"success\":\n        default:\n            return <Check className=\"h-6 w-6 text-green-600\" />\n    }\n}\n\ninterface ModalProps extends VariantProps<typeof modalVariants> {\n    open?: boolean\n    onOpenChange?: (open: boolean) => void\n    title: string\n    description?: string\n    confirmText?: string\n    cancelText?: string\n    onConfirm?: () => void\n    onCancel?: () => void\n    children?: React.ReactNode\n}\n\nfunction Modal({\n    variant = \"success\",\n    open,\n    onOpenChange,\n    title,\n    description,\n    confirmText = \"Confirm\",\n    cancelText = \"Cancel\",\n    onConfirm,\n    onCancel,\n    children,\n}: ModalProps) {\n    function handleCancel() {\n        onCancel?.()\n        onOpenChange?.(false)\n    }\n\n    function handleConfirm() {\n        onConfirm?.()\n        onOpenChange?.(false)\n    }\n\n    return (\n        <BaseDialog.Root open={open} onOpenChange={onOpenChange}>\n            {children && <BaseDialog.Trigger render={React.isValidElement(children) ? children : undefined}>\n                {!React.isValidElement(children) && children}\n            </BaseDialog.Trigger>}\n            <BaseDialog.Portal>\n                <BaseDialog.Backdrop className=\"fixed inset-0 z-50 bg-black opacity-80 transition-opacity data-ending-style:opacity-0 data-starting-style:opacity-0\" />\n                <BaseDialog.Popup className=\"fixed left-[50%] top-[50%] z-50 w-full max-w-sm translate-x-[-50%] translate-y-[-50%] rounded-base border-2 border-black bg-white p-6 shadow-brutal transition-opacity data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0\">\n                    <BaseDialog.Close\n                        aria-label=\"Close modal\"\n                        className=\"absolute right-3 top-3 rounded-base opacity-70 transition-opacity hover:opacity-100 focus-brutal\"\n                    >\n                        <X className=\"h-4 w-4\" />\n                    </BaseDialog.Close>\n\n                    <div className=\"flex flex-col items-center text-center\">\n                        {/* Icon */}\n                        <div className={iconContainerVariants({ variant })}>\n                            {getIcon(variant)}\n                        </div>\n\n                        {/* Title */}\n                        <BaseDialog.Title className=\"mt-4 text-lg font-bold text-black\">\n                            {title}\n                        </BaseDialog.Title>\n\n                        {/* Description */}\n                        {description && (\n                            <BaseDialog.Description className=\"mt-1 text-sm text-black/70\">\n                                {description}\n                            </BaseDialog.Description>\n                        )}\n\n                        {/* Actions */}\n                        <div className=\"mt-6 flex w-full items-center justify-center gap-3\">\n                            <button\n                                type=\"button\"\n                                onClick={handleCancel}\n                                className=\"inline-flex h-9 items-center justify-center rounded-base border-2 border-black bg-white px-4 text-sm font-bold text-black transition-colors hover:bg-main/10 focus-brutal\"\n                            >\n                                {cancelText}\n                            </button>\n                            <button\n                                type=\"button\"\n                                onClick={handleConfirm}\n                                className={cn(confirmButtonVariants({ variant }))}\n                            >\n                                {confirmText}\n                            </button>\n                        </div>\n                    </div>\n                </BaseDialog.Popup>\n            </BaseDialog.Portal>\n        </BaseDialog.Root>\n    )\n}\nModal.displayName = \"Modal\"\n\nexport { Modal, modalVariants }\nexport type { ModalProps }\n",
      "type": "registry:ui"
    }
  ]
}