{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "settings-dialog",
  "title": "Settings Dialog",
  "description": "A drill-in settings dialog — a worked example composing NavigatorDialog with a Cell-based menu that navigates into editable sub-views.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "navigator-dialog",
    "cell",
    "button",
    "input",
    "label"
  ],
  "files": [
    {
      "path": "registry/custom-ui/settings-dialog.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  BellIcon,\n  ChevronRightIcon,\n  PaletteIcon,\n  ShieldIcon,\n  UserIcon,\n} from \"lucide-react\";\n\nimport {\n  Cell,\n  CellContent,\n  CellDescription,\n  CellEnd,\n  CellStart,\n  CellTitle,\n} from \"@/components/custom-ui/cell\";\nimport {\n  NavigatorDialog,\n  useNavigator,\n} from \"@/components/custom-ui/navigator-dialog\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\n\n// A worked example of NavigatorDialog + Cell: a drill-in settings dialog.\n// Copy it in and adapt the views to your own settings — the data below is\n// placeholder content.\n\ninterface SettingsRow {\n  /** Matches a NavigatorView id below — `navigate()` drills into it. */\n  id: string;\n  icon: React.ReactNode;\n  title: string;\n  description: string;\n}\n\nconst SETTINGS_ROWS: SettingsRow[] = [\n  {\n    id: \"edit-name\",\n    icon: <UserIcon />,\n    title: \"Edit name\",\n    description: \"Change your display name\",\n  },\n  {\n    id: \"notifications\",\n    icon: <BellIcon />,\n    title: \"Notifications\",\n    description: \"Manage notification preferences\",\n  },\n  {\n    id: \"appearance\",\n    icon: <PaletteIcon />,\n    title: \"Appearance\",\n    description: \"Customize your experience\",\n  },\n  {\n    id: \"advanced\",\n    icon: <ShieldIcon />,\n    title: \"Advanced\",\n    description: \"Developer options and more\",\n  },\n];\n\n// Menu view — a Cell-based list. Each row is a button that drills in.\nfunction MenuView() {\n  const { navigate } = useNavigator();\n  return (\n    <div className=\"flex flex-col gap-2\">\n      {SETTINGS_ROWS.map((row) => (\n        <Cell key={row.id} asChild variant=\"outline\">\n          <button type=\"button\" onClick={() => navigate(row.id)}>\n            <CellStart>\n              <span className=\"bg-muted text-foreground flex size-9 items-center justify-center rounded-full [&_svg]:size-4\">\n                {row.icon}\n              </span>\n            </CellStart>\n            <CellContent>\n              <CellTitle>{row.title}</CellTitle>\n              <CellDescription>{row.description}</CellDescription>\n            </CellContent>\n            <CellEnd>\n              <ChevronRightIcon className=\"text-muted-foreground size-4\" />\n            </CellEnd>\n          </button>\n        </Cell>\n      ))}\n    </div>\n  );\n}\n\n// A drilled-in editing view — no redundant heading; the screen title\n// already names it in the header bar.\nfunction EditNameView() {\n  const { back } = useNavigator();\n  return (\n    <form\n      id=\"settings-display-name-form\"\n      className=\"flex flex-col gap-4\"\n      onSubmit={(event) => {\n        event.preventDefault();\n        back();\n      }}\n    >\n      <div className=\"flex flex-col gap-2\">\n        <Label htmlFor=\"settings-display-name\">Display name</Label>\n        <Input id=\"settings-display-name\" defaultValue=\"Ada Lovelace\" />\n      </div>\n    </form>\n  );\n}\n\nfunction PlaceholderView({ text }: { text: string }) {\n  return <p className=\"text-muted-foreground text-sm\">{text}</p>;\n}\n\nexport interface SettingsDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n}\n\nexport function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {\n  return (\n    <NavigatorDialog\n      open={open}\n      onOpenChange={onOpenChange}\n      initialView=\"menu\"\n      views={[\n        {\n          id: \"menu\",\n          name: \"Settings\",\n          title: \"Account\",\n          description: \"Manage your account and preferences.\",\n          render: () => <MenuView />,\n        },\n        {\n          id: \"edit-name\",\n          name: \"Profile\",\n          title: \"Edit name\",\n          render: () => <EditNameView />,\n          footer: () => (\n            <Button form=\"settings-display-name-form\" type=\"submit\">\n              Save\n            </Button>\n          ),\n        },\n        {\n          id: \"notifications\",\n          name: \"Notifications\",\n          title: \"Notifications\",\n          render: () => (\n            <PlaceholderView text=\"Notification preferences would go here.\" />\n          ),\n        },\n        {\n          id: \"appearance\",\n          name: \"Appearance\",\n          title: \"Appearance\",\n          render: () => (\n            <PlaceholderView text=\"Appearance settings would go here.\" />\n          ),\n        },\n        {\n          id: \"advanced\",\n          name: \"Advanced\",\n          title: \"Advanced\",\n          render: () => (\n            <PlaceholderView text=\"Advanced and developer options would go here.\" />\n          ),\n        },\n      ]}\n    />\n  );\n}\n",
      "type": "registry:component",
      "target": "components/custom-ui/settings-dialog.tsx"
    }
  ],
  "type": "registry:block"
}