{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "settings-block",
  "type": "registry:example",
  "title": "Settings Block",
  "registryDependencies": [
    "https://seamui.dev/r/card.json",
    "https://seamui.dev/r/tabs.json",
    "https://seamui.dev/r/form.json",
    "https://seamui.dev/r/field.json",
    "https://seamui.dev/r/input.json",
    "https://seamui.dev/r/label.json",
    "https://seamui.dev/r/select.json",
    "https://seamui.dev/r/switch.json",
    "https://seamui.dev/r/avatar.json",
    "https://seamui.dev/r/button.json",
    "https://seamui.dev/r/alert.json",
    "https://seamui.dev/r/alert-dialog.json"
  ],
  "files": [
    {
      "path": "registry/seam/examples/settings-block.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/seam/ui/alert-dialog\"\nimport { Alert, AlertDescription, AlertTitle } from \"@/registry/seam/ui/alert\"\nimport { Avatar, AvatarFallback } from \"@/registry/seam/ui/avatar\"\nimport { Button } from \"@/registry/seam/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/seam/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/seam/ui/field\"\nimport { Form } from \"@/registry/seam/ui/form\"\nimport { Input } from \"@/registry/seam/ui/input\"\nimport { Label } from \"@/registry/seam/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/seam/ui/select\"\nimport { Switch } from \"@/registry/seam/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/seam/ui/tabs\"\n\n// The settings page: Tabs hold the sections, Field/Form carry validation on\n// General, Switch rows commit notification state, and the danger zone gates\n// deletion behind an AlertDialog. All foundation, no new parts.\nconst NOTIFICATION_PREFS = [\n  { label: \"Product updates\", desc: \"Release notes, once a month.\", on: true },\n  { label: \"Usage alerts\", desc: \"When you approach a plan limit.\", on: true },\n  { label: \"Weekly digest\", desc: \"Activity summary every Monday.\", on: false },\n]\n\nexport default function SettingsBlock() {\n  const [saved, setSaved] = React.useState(false)\n  const [deleted, setDeleted] = React.useState(false)\n  const savedTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null)\n  // Re-arm (never stack) the confirmation timer; clear it on unmount.\n  React.useEffect(\n    () => () => {\n      if (savedTimer.current) clearTimeout(savedTimer.current)\n    },\n    []\n  )\n\n  return (\n    <Card className=\"w-full max-w-md\">\n      <CardHeader>\n        <CardTitle>Workspace settings</CardTitle>\n        <CardDescription>\n          General details, notifications, and the danger zone.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <Tabs defaultValue=\"general\" size=\"sm\">\n          <TabsList>\n            <TabsTrigger value=\"general\">General</TabsTrigger>\n            <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n            <TabsTrigger value=\"danger\">Danger</TabsTrigger>\n          </TabsList>\n\n          <TabsContent value=\"general\" className=\"pt-2\">\n            <Form<{ name: string; region: string }>\n              onFormSubmit={() => {\n                setSaved(true)\n                if (savedTimer.current) clearTimeout(savedTimer.current)\n                savedTimer.current = setTimeout(() => setSaved(false), 2000)\n              }}\n            >\n              <div className=\"flex items-center gap-3\">\n                <Avatar className=\"size-12\">\n                  <AvatarFallback>AC</AvatarFallback>\n                </Avatar>\n                <div className=\"text-sm\">\n                  <p className=\"font-medium\">Acme Co</p>\n                  <p className=\"text-muted-foreground text-xs\">\n                    Workspace avatar comes from your logo.\n                  </p>\n                </div>\n              </div>\n              <Field name=\"name\">\n                <FieldLabel>Workspace name</FieldLabel>\n                <Input required minLength={3} defaultValue=\"Acme Co\" />\n                <FieldError match=\"valueMissing\">Name it something.</FieldError>\n                <FieldError match=\"tooShort\">At least 3 characters.</FieldError>\n              </Field>\n              <Field name=\"region\">\n                <FieldLabel>Data region</FieldLabel>\n                <Select defaultValue=\"eu\">\n                  <SelectTrigger className=\"w-full\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"eu\">Europe (Frankfurt)</SelectItem>\n                    <SelectItem value=\"us\">US (Oregon)</SelectItem>\n                    <SelectItem value=\"ap\">Asia Pacific (Osaka)</SelectItem>\n                  </SelectContent>\n                </Select>\n                <FieldDescription>\n                  Where your workspace data lives at rest.\n                </FieldDescription>\n              </Field>\n              <div className=\"flex items-center gap-3\">\n                <Button type=\"submit\">Save changes</Button>\n                {/* Always mounted so screen readers announce the change. */}\n                <span\n                  className=\"text-muted-foreground text-sm\"\n                  aria-live=\"polite\"\n                >\n                  {saved ? \"Saved.\" : \"\"}\n                </span>\n              </div>\n            </Form>\n          </TabsContent>\n\n          <TabsContent value=\"notifications\" className=\"pt-2\">\n            <div className=\"flex flex-col gap-4\">\n              {NOTIFICATION_PREFS.map((pref) => (\n                <Label key={pref.label} className=\"justify-between\">\n                  <span className=\"flex flex-col gap-0.5\">\n                    {pref.label}\n                    <span className=\"text-muted-foreground text-xs font-normal\">\n                      {pref.desc}\n                    </span>\n                  </span>\n                  <Switch defaultChecked={pref.on} />\n                </Label>\n              ))}\n            </div>\n          </TabsContent>\n\n          <TabsContent value=\"danger\" className=\"pt-2\">\n            {deleted ? (\n              <Alert>\n                <AlertTitle>Deletion scheduled</AlertTitle>\n                <AlertDescription>\n                  &quot;Acme Co&quot; will be removed in 30 days. Sign in again\n                  to cancel.\n                </AlertDescription>\n              </Alert>\n            ) : (\n              <div className=\"flex flex-col gap-4\">\n                <Alert variant=\"destructive\">\n                  <AlertTitle>Deleting a workspace is permanent</AlertTitle>\n                  <AlertDescription>\n                    Members lose access immediately; data is purged after 30\n                    days.\n                  </AlertDescription>\n                </Alert>\n                <AlertDialog>\n                  <AlertDialogTrigger\n                    render={\n                      <Button variant=\"destructive\" className=\"w-fit\">\n                        Delete workspace\n                      </Button>\n                    }\n                  />\n                  <AlertDialogContent>\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Delete &quot;Acme Co&quot;?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        This schedules the workspace for permanent deletion.\n                        Members are signed out immediately.\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel\n                        render={<Button variant=\"ghost\">Keep it</Button>}\n                      />\n                      <AlertDialogAction\n                        onClick={() => setDeleted(true)}\n                        render={\n                          <Button variant=\"destructive\">\n                            Delete workspace\n                          </Button>\n                        }\n                      />\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n              </div>\n            )}\n          </TabsContent>\n        </Tabs>\n      </CardContent>\n    </Card>\n  )\n}\n",
      "type": "registry:example"
    }
  ]
}