{"name":"team-settings","type":"registry:block","title":"Team settings","description":"Edit the team profile and notification preferences, then save or reset the changes. Team settings — complete application example.","docs":"https://ui.siteplane.io/docs-markdown/examples/team-settings.md","categories":["Examples"],"registryDependencies":["@siteplane/button","@siteplane/card","@siteplane/form","@siteplane/input","@siteplane/select","@siteplane/settings-list","@siteplane/switch","@siteplane/textarea"],"dependencies":[],"files":[{"path":"apps/site/src/examples/team-settings/default.tsx","type":"registry:file","target":"~/src/components/team-settings.tsx","content":"\"use client\";\n\nimport { Button } from \"@/siteplane/components/button/index\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/siteplane/components/card/index\";\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/siteplane/components/field/index\";\nimport { Form } from \"@/siteplane/components/form/index\";\nimport { Input } from \"@/siteplane/components/input/index\";\nimport {\n  Select,\n  SelectItem,\n  SelectLabel,\n  SelectPopup,\n  SelectTrigger,\n  SelectValue,\n} from \"@/siteplane/components/select/index\";\nimport {\n  SettingsList,\n  SettingsListItem,\n} from \"@/siteplane/components/settings-list/index\";\nimport { Switch } from \"@/siteplane/components/switch/index\";\nimport { Textarea } from \"@/siteplane/components/textarea/index\";\nimport { useState } from \"react\";\n\nexport default function Example() {\n  const initial = {\n    name: \"Acme Design\",\n    description: \"The team behind our product experience.\",\n    visibility: \"private\",\n    email: true,\n    digest: false,\n  };\n  const [settings, setSettings] = useState(initial);\n  const [saved, setSaved] = useState(initial);\n  const [resetCount, setResetCount] = useState(0);\n  return (\n    <Form\n      className=\"grid w-full max-w-md gap-5\"\n      onReset={() => {\n        setSettings(saved);\n        setResetCount((count) => count + 1);\n      }}\n      onSubmit={(event) => {\n        event.preventDefault();\n        const next = { ...settings, name: settings.name.trim() };\n        setSettings(next);\n        setSaved(next);\n      }}\n    >\n      <Card>\n        <CardHeader>\n          <CardTitle>Team settings</CardTitle>\n          <CardDescription>\n            Manage your team profile and communication preferences.\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"grid gap-4\">\n          <Field\n            key={resetCount}\n            name=\"name\"\n            validate={(value) =>\n              typeof value === \"string\" && value.trim()\n                ? null\n                : \"Enter a team name.\"\n            }\n          >\n            <FieldLabel>Team name</FieldLabel>\n            <Input\n              required\n              value={settings.name}\n              onChange={(event) =>\n                setSettings({ ...settings, name: event.target.value })\n              }\n            />\n            <FieldDescription>\n              Shown to everyone in the workspace.\n            </FieldDescription>\n            <FieldError>Enter a team name.</FieldError>\n          </Field>\n          <Field name=\"description\">\n            <FieldLabel>Description</FieldLabel>\n            <Textarea\n              value={settings.description}\n              onChange={(event) =>\n                setSettings({ ...settings, description: event.target.value })\n              }\n            />\n          </Field>\n          <Select\n            name=\"visibility\"\n            value={settings.visibility}\n            onValueChange={(value) => {\n              if (value) setSettings({ ...settings, visibility: value });\n            }}\n          >\n            <SelectLabel>Visibility</SelectLabel>\n            <SelectTrigger>\n              <SelectValue>\n                {settings.visibility === \"private\"\n                  ? \"Private team\"\n                  : \"Everyone in the workspace\"}\n              </SelectValue>\n            </SelectTrigger>\n            <SelectPopup>\n              <SelectItem value=\"private\">Private team</SelectItem>\n              <SelectItem value=\"workspace\">\n                Everyone in the workspace\n              </SelectItem>\n            </SelectPopup>\n          </Select>\n        </CardContent>\n      </Card>\n      <SettingsList\n        title=\"Notifications\"\n        description=\"Choose which updates your team receives.\"\n      >\n        <SettingsListItem\n          title=\"Email updates\"\n          description=\"Important project and membership changes.\"\n          control={(props) => (\n            <Switch\n              {...props}\n              checked={settings.email}\n              onCheckedChange={(email) => setSettings({ ...settings, email })}\n            />\n          )}\n        />\n        <SettingsListItem\n          title=\"Weekly digest\"\n          description=\"A summary every Monday.\"\n          control={(props) => (\n            <Switch\n              {...props}\n              checked={settings.digest}\n              onCheckedChange={(digest) => setSettings({ ...settings, digest })}\n            />\n          )}\n        />\n      </SettingsList>\n      <div className=\"flex flex-wrap gap-2\">\n        <Button type=\"submit\">Save changes</Button>\n        <Button variant=\"outline\" type=\"reset\">\n          Reset changes\n        </Button>\n      </div>\n    </Form>\n  );\n}\n"}]}