{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "settings-page",
  "title": "Settings Page",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-react/blocks/settings-page/SettingsPage.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Bell, Building2, CreditCard, Palette, TriangleAlert, User } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport { Label } from '@/components/ui/label'\nimport { SectionCard } from '@/components/ui/section-card'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\nimport { Switch } from '@/components/ui/switch'\nimport { Textarea } from '@/components/ui/textarea'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@/components/ui/dialog'\n\ntype SectionId = 'profile' | 'notifications' | 'appearance' | 'workspace' | 'billing' | 'danger'\n\nexport interface SettingsSection {\n  id: SectionId\n  label: string\n  icon: React.ComponentType<{ className?: string }>\n}\n\nexport interface SettingsPageProps {\n  /** Override the nav. Ids must still match the built-in panels. */\n  sections?: SettingsSection[]\n  /** Initially active section id. */\n  initialSection?: SectionId\n  className?: string\n}\n\nconst defaultSections: SettingsSection[] = [\n  { id: 'profile', label: 'Profile', icon: User },\n  { id: 'notifications', label: 'Notifications', icon: Bell },\n  { id: 'appearance', label: 'Appearance', icon: Palette },\n  { id: 'workspace', label: 'Workspace', icon: Building2 },\n  { id: 'billing', label: 'Billing', icon: CreditCard },\n  { id: 'danger', label: 'Danger zone', icon: TriangleAlert },\n]\n\nfunction ToggleRow({\n  title,\n  description,\n  checked,\n  onCheckedChange,\n}: {\n  title: string\n  description: string\n  checked: boolean\n  onCheckedChange: (value: boolean) => void\n}) {\n  return (\n    <li data-slot=\"settings-page\" className=\"flex items-center justify-between gap-4 py-4\">\n      <div>\n        <p className=\"text-sm font-medium\">{title}</p>\n        <p className=\"text-muted-foreground text-xs\">{description}</p>\n      </div>\n      <Switch checked={checked} onCheckedChange={onCheckedChange} aria-label={`Toggle ${title.toLowerCase()}`} />\n    </li>\n  )\n}\n\nexport function SettingsPage({ sections = defaultSections, initialSection = 'profile', className }: SettingsPageProps) {\n  const [active, setActive] = React.useState<SectionId>(initialSection)\n\n  const [notifyEmail, setNotifyEmail] = React.useState(true)\n  const [notifyPush, setNotifyPush] = React.useState(false)\n  const [notifyDigest, setNotifyDigest] = React.useState(true)\n  const [themeChoice, setThemeChoice] = React.useState<'light' | 'dark' | 'system'>('system')\n  const [deleteOpen, setDeleteOpen] = React.useState(false)\n  const [deleteConfirm, setDeleteConfirm] = React.useState('')\n\n  return (\n    <div className={cn('bg-background border-border flex min-h-svh flex-col rounded-xl border lg:flex-row', className)}>\n      {/* Nav rail */}\n      <nav\n        className=\"border-border shrink-0 border-b p-3 lg:w-56 lg:border-r lg:border-b-0\"\n        aria-label=\"Settings sections\"\n      >\n        <div className=\"flex [scrollbar-width:none] gap-1 overflow-x-auto lg:flex-col lg:overflow-visible [&::-webkit-scrollbar]:hidden\">\n          {sections.map((section) => {\n            const Icon = section.icon\n            const isActive = active === section.id\n            return (\n              <button\n                key={section.id}\n                type=\"button\"\n                aria-current={isActive ? 'page' : undefined}\n                onClick={() => setActive(section.id)}\n                className={cn(\n                  'focus-visible:ring-ring flex shrink-0 items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n                  isActive\n                    ? section.id === 'danger'\n                      ? 'text-destructive bg-destructive/10'\n                      : 'bg-accent text-accent-foreground'\n                    : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground',\n                )}\n              >\n                <Icon className=\"size-4\" />\n                {section.label}\n              </button>\n            )\n          })}\n        </div>\n      </nav>\n\n      {/* Content pane */}\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        {active === 'profile' && (\n          <section className=\"flex flex-1 flex-col\">\n            <div className=\"flex-1 space-y-6 p-6\">\n              <SectionCard title=\"Public profile\" description=\"How teammates see you across the workspace.\">\n                <div className=\"space-y-4\">\n                  <div className=\"space-y-2\">\n                    <Label htmlFor=\"sp-name\">Display name</Label>\n                    <Input id=\"sp-name\" defaultValue=\"Amara Osei\" />\n                  </div>\n                  <div className=\"space-y-2\">\n                    <Label htmlFor=\"sp-email\">Email</Label>\n                    <Input id=\"sp-email\" defaultValue=\"amara@acme.com\" type=\"email\" />\n                  </div>\n                  <div className=\"space-y-2\">\n                    <Label htmlFor=\"sp-bio\">Bio</Label>\n                    <Textarea\n                      id=\"sp-bio\"\n                      defaultValue=\"Design engineer. Builds systems, breaks assumptions.\"\n                      rows={3}\n                    />\n                  </div>\n                  <div className=\"space-y-2\">\n                    <Label htmlFor=\"sp-role\">Role</Label>\n                    <Select defaultValue=\"editor\">\n                      <SelectTrigger id=\"sp-role\" className=\"w-full sm:w-56\">\n                        <SelectValue />\n                      </SelectTrigger>\n                      <SelectContent>\n                        <SelectItem value=\"admin\">Admin</SelectItem>\n                        <SelectItem value=\"editor\">Editor</SelectItem>\n                        <SelectItem value=\"viewer\">Viewer</SelectItem>\n                      </SelectContent>\n                    </Select>\n                  </div>\n                </div>\n              </SectionCard>\n            </div>\n            <div className=\"border-border flex items-center justify-end gap-2 border-t p-4\">\n              <Button variant=\"ghost\" size=\"sm\">\n                Discard\n              </Button>\n              <Button size=\"sm\">Save changes</Button>\n            </div>\n          </section>\n        )}\n\n        {active === 'notifications' && (\n          <section className=\"flex-1 p-6\">\n            <SectionCard title=\"Notifications\" description=\"Choose what reaches you and where.\">\n              <ul className=\"-my-4 divide-y\">\n                <ToggleRow\n                  title=\"Email notifications\"\n                  description=\"Mentions, assignments and approvals.\"\n                  checked={notifyEmail}\n                  onCheckedChange={setNotifyEmail}\n                />\n                <ToggleRow\n                  title=\"Push notifications\"\n                  description=\"Real-time browser alerts while you work.\"\n                  checked={notifyPush}\n                  onCheckedChange={setNotifyPush}\n                />\n                <ToggleRow\n                  title=\"Weekly digest\"\n                  description=\"A summary of everything, every Monday.\"\n                  checked={notifyDigest}\n                  onCheckedChange={setNotifyDigest}\n                />\n              </ul>\n            </SectionCard>\n          </section>\n        )}\n\n        {active === 'appearance' && (\n          <section className=\"flex-1 p-6\">\n            <SectionCard title=\"Appearance\" description=\"Theme follows your system by default.\">\n              <div className=\"space-y-5\">\n                <div className=\"grid grid-cols-3 gap-3\">\n                  {(['light', 'dark', 'system'] as const).map((theme) => (\n                    <button\n                      key={theme}\n                      type=\"button\"\n                      onClick={() => setThemeChoice(theme)}\n                      className={cn(\n                        'focus-visible:ring-ring rounded-lg border p-3 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none',\n                        themeChoice === theme ? 'border-primary ring-primary/20 ring-2' : 'hover:bg-accent/50',\n                      )}\n                    >\n                      <span className=\"block text-sm font-medium capitalize\">{theme}</span>\n                      <span className=\"text-muted-foreground block text-xs\">\n                        {theme === 'light'\n                          ? 'Bright surfaces'\n                          : theme === 'dark'\n                            ? 'Low-light friendly'\n                            : 'Match device'}\n                      </span>\n                    </button>\n                  ))}\n                </div>\n                <Separator />\n                <div className=\"flex items-center justify-between\">\n                  <div>\n                    <p className=\"text-sm font-medium\">Reduced motion</p>\n                    <p className=\"text-muted-foreground text-xs\">Collapse animations to instant transitions.</p>\n                  </div>\n                  <Switch defaultChecked={false} aria-label=\"Toggle reduced motion\" />\n                </div>\n              </div>\n            </SectionCard>\n          </section>\n        )}\n\n        {active === 'workspace' && (\n          <section className=\"flex-1 p-6\">\n            <SectionCard title=\"Workspace\" description=\"Identity and defaults for everyone here.\">\n              <div className=\"space-y-4\">\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"sp-ws-name\">Workspace name</Label>\n                  <Input id=\"sp-ws-name\" defaultValue=\"Acme Inc\" />\n                </div>\n                <div className=\"space-y-2\">\n                  <Label htmlFor=\"sp-ws-url\">URL slug</Label>\n                  <div className=\"flex\">\n                    <span className=\"border-border bg-muted text-muted-foreground flex items-center rounded-l-md border px-3 font-mono text-xs\">\n                      acme.uipkge.app\n                    </span>\n                    <Input id=\"sp-ws-url\" defaultValue=\"acme\" className=\"rounded-l-none font-mono text-xs\" />\n                  </div>\n                </div>\n                <p className=\"text-muted-foreground text-xs\">16 members · 4 pending invites</p>\n              </div>\n            </SectionCard>\n          </section>\n        )}\n\n        {active === 'billing' && (\n          <section className=\"flex-1 p-6\">\n            <SectionCard title=\"Billing\" description=\"Plan, seats and invoices.\">\n              <div className=\"flex items-center justify-between gap-4\">\n                <div>\n                  <p className=\"text-sm font-medium\">Team plan · $12 / seat / month</p>\n                  <p className=\"text-muted-foreground mt-1 text-xs\">Next invoice Sep 1, 2026 · 18 seats</p>\n                </div>\n                <Button variant=\"outline\" size=\"sm\">\n                  Manage billing\n                </Button>\n              </div>\n            </SectionCard>\n          </section>\n        )}\n\n        {active === 'danger' && (\n          <section className=\"flex-1 p-6\">\n            <div className=\"border-destructive/40 rounded-xl border p-6\">\n              <div className=\"flex items-center justify-between gap-4\">\n                <div>\n                  <p className=\"text-destructive text-sm font-medium\">Delete this workspace</p>\n                  <p className=\"text-muted-foreground mt-1 text-xs\">\n                    All projects, members and data will be permanently removed.\n                  </p>\n                </div>\n                <Button variant=\"destructive\" size=\"sm\" onClick={() => setDeleteOpen(true)}>\n                  Delete…\n                </Button>\n              </div>\n            </div>\n          </section>\n        )}\n      </div>\n\n      <Dialog open={deleteOpen} onOpenChange={setDeleteOpen}>\n        <DialogContent className=\"max-w-sm\">\n          <DialogHeader>\n            <DialogTitle>Delete workspace?</DialogTitle>\n            <DialogDescription>\n              This removes Acme Inc and all of its data for every member. This cannot be undone.\n            </DialogDescription>\n          </DialogHeader>\n          <Input\n            value={deleteConfirm}\n            onChange={(e) => setDeleteConfirm(e.target.value)}\n            placeholder='Type \"DELETE\" to confirm'\n          />\n          <DialogFooter>\n            <Button variant=\"outline\" size=\"sm\" onClick={() => setDeleteOpen(false)}>\n              Cancel\n            </Button>\n            <Button\n              variant=\"destructive\"\n              size=\"sm\"\n              disabled={deleteConfirm !== 'DELETE'}\n              onClick={() => setDeleteOpen(false)}\n            >\n              Delete forever\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "~/components/blocks/SettingsPage.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/dialog.json",
    "https://uipkge.dev/r/react/input.json",
    "https://uipkge.dev/r/react/label.json",
    "https://uipkge.dev/r/react/section-card.json",
    "https://uipkge.dev/r/react/select.json",
    "https://uipkge.dev/r/react/separator.json",
    "https://uipkge.dev/r/react/switch.json",
    "https://uipkge.dev/r/react/textarea.json"
  ],
  "description": "Linear-style settings shell: a nav rail of icon sections (collapses to a horizontal tab strip on narrow screens) switching between fully composed panels — profile form with sticky save bar, notification switches, theme picker, workspace identity, billing summary, and a type-to-confirm danger zone. Swap the panel internals for your own forms.",
  "categories": [
    "layout",
    "dashboard"
  ]
}