{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sf-dialog", "title": "SF Dialog", "description": "Brutalist modal dialog with 2px borders, no radius, no shadow", "registryDependencies": [ "dialog" ], "files": [ { "path": "components/sf/sf-dialog.tsx", "content": "\"use client\";\n\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/components/ui/dialog\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Modal dialog — FRAME layer overlay primitive.\n *\n * Radix Dialog root wrapped with SF contract. Compose with\n * SFDialogTrigger, SFDialogContent, SFDialogHeader, SFDialogTitle,\n * SFDialogDescription, SFDialogFooter, and SFDialogClose.\n * Content applies sharp corners, 2px border, no shadow.\n *\n * @example\n * \n * Open\n * \n * Confirm\n * \n * \n */\nfunction SFDialog(props: React.ComponentProps) {\n return ;\n}\n\n/** Sub-component of SFDialog — trigger element that opens the dialog on interaction. */\nfunction SFDialogTrigger(props: React.ComponentProps) {\n return ;\n}\n\n/** Sub-component of SFDialog — close button that dismisses the dialog when activated. */\nfunction SFDialogClose(props: React.ComponentProps) {\n return ;\n}\n\n/** Sub-component of SFDialog — modal content panel with sharp corners, 2px border, and no shadow. */\nfunction SFDialogContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\n/** Sub-component of SFDialog — header region with 2px bottom border separating it from content. */\nfunction SFDialogHeader({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\n/** Sub-component of SFDialog — footer region with 2px top border and muted background for action buttons. */\nfunction SFDialogFooter({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\n/** Sub-component of SFDialog — dialog title in font-mono uppercase with letter-spacing. */\nfunction SFDialogTitle({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\n/** Sub-component of SFDialog — supporting description text in muted foreground, uppercase, xs size. */\nfunction SFDialogDescription({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n );\n}\n\nexport {\n SFDialog,\n SFDialogTrigger,\n SFDialogClose,\n SFDialogContent,\n SFDialogHeader,\n SFDialogFooter,\n SFDialogTitle,\n SFDialogDescription,\n};\n", "type": "registry:ui" } ], "meta": { "layer": "frame", "pattern": "A" }, "type": "registry:ui" }