shadcn/app/public/registry/styles/default/dialog-stack.json

{
  "name": "dialog-stack",
  "description": "Stacked dialog windows",
  "dependencies": [
    "@radix-ui/react-dialog"
  ],
  "files": [
    {
      "name": "dialog-stack.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport interface DialogStackItem {\n  id: string\n  title: string\n  content: React.ReactNode\n}\n\nexport interface DialogStackProps extends React.HTMLAttributes<HTMLDivElement> {\n  dialogs: DialogStackItem[]\n  onClose?: (id: string) => void\n}\n\nconst DialogStack = React.forwardRef<HTMLDivElement, DialogStackProps>(\n  ({ className, dialogs, onClose, ...props }, ref) => {\n    return (\n      <div ref={ref} className={cn(\"relative\", className)} {...props}>\n        {dialogs.map((dialog, index) => (\n          <div\n            key={dialog.id}\n            className={cn(\n              \"absolute inset-0 rounded-lg border bg-background p-6 shadow-lg transition-transform\"\n            )}\n            style={{\n              transform: `translate(${index * 10}px, ${index * 10}px)`,\n              zIndex: index,\n            }}\n          >\n            <div className=\"mb-4 flex items-center justify-between\">\n              <h3 className=\"text-lg font-semibold\">{dialog.title}</h3>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                onClick={() => onClose?.(dialog.id)}\n              >\n                <X className=\"h-4 w-4\" />\n              </Button>\n            </div>\n            <div>{dialog.content}</div>\n          </div>\n        ))}\n      </div>\n    )\n  }\n)\nDialogStack.displayName = \"DialogStack\"\n\nexport { DialogStack }\n"
    }
  ],
  "type": "components:ui"
}