{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-3",
  "type": "registry:block",
  "description": "Comprehensive account settings form with structured fields for name, email, password, and phone number, featuring icons, grouped inputs, and save actions.",
  "registryDependencies": [
    "button",
    "button-group",
    "field",
    "input",
    "input-group"
  ],
  "files": [
    {
      "path": "registry/blocks/form/3/settings-form.tsx",
      "content": "import { AtSign, EyeIcon, LockIcon, PhoneIcon } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { ButtonGroup } from \"@/components/ui/button-group\";\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n} from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/components/ui/input-group\";\n\nexport function SettingsForm() {\n  return (\n    <div className=\"mx-auto w-full max-w-4xl\">\n      <FieldSet>\n        <FieldLegend className=\"text-4xl\">Account Settings</FieldLegend>\n        <FieldDescription>\n          Manage account and your personal information.\n        </FieldDescription>\n        <FieldSeparator />\n        <FieldGroup className=\"gap-5\">\n          <div className=\"rounded-xl border border-border/60 p-0.5\">\n            <Field\n              className=\"rounded-xl border bg-card px-4 py-8 shadow-xs dark:bg-card/50\"\n              orientation=\"responsive\"\n            >\n              <FieldContent>\n                <FieldLabel htmlFor=\"name\">Your Name</FieldLabel>\n                <FieldDescription>\n                  Please enter a display name you are comfortable with.\n                </FieldDescription>\n              </FieldContent>\n              <FieldContent>\n                <ButtonGroup className=\"w-full\">\n                  <Input id=\"name\" placeholder=\"Enter Your Name\" />\n                  <Button variant=\"outline\">Save</Button>\n                </ButtonGroup>\n                <FieldDescription>Max 32 characters</FieldDescription>\n              </FieldContent>\n            </Field>\n          </div>\n          <div className=\"rounded-xl border border-border/60 p-0.5\">\n            <Field\n              className=\"rounded-xl border bg-card px-4 py-8 shadow-xs dark:bg-card/50\"\n              orientation=\"responsive\"\n            >\n              <FieldContent>\n                <FieldLabel htmlFor=\"lastName\">Your Email</FieldLabel>\n                <FieldDescription>\n                  Please enter a valid email address.\n                </FieldDescription>\n              </FieldContent>\n              <FieldContent>\n                <ButtonGroup className=\"w-full\">\n                  <InputGroup>\n                    <InputGroupAddon>\n                      <AtSign />\n                    </InputGroupAddon>\n                    <InputGroupInput\n                      placeholder=\"Enter Your Email\"\n                      type=\"email\"\n                    />\n                  </InputGroup>\n                  <Button variant=\"outline\">Save</Button>\n                </ButtonGroup>\n                <FieldDescription>Should be unique</FieldDescription>\n              </FieldContent>\n            </Field>\n          </div>\n          <div className=\"rounded-xl border border-border/60 p-0.5\">\n            <Field\n              className=\"rounded-xl border bg-card px-4 py-8 shadow-xs dark:bg-card/50\"\n              orientation=\"responsive\"\n            >\n              <FieldContent>\n                <FieldLabel htmlFor=\"lastName\">Your Password</FieldLabel>\n                <FieldDescription>\n                  please create a strong password\n                </FieldDescription>\n              </FieldContent>\n              <FieldContent>\n                <ButtonGroup className=\"w-full\">\n                  <InputGroup>\n                    <InputGroupAddon>\n                      <LockIcon />\n                    </InputGroupAddon>\n                    <InputGroupInput placeholder=\"XXxxXXX\" type=\"password\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupButton>\n                        <EyeIcon />\n                      </InputGroupButton>\n                    </InputGroupAddon>\n                  </InputGroup>\n                  <Button variant=\"outline\">Save</Button>\n                </ButtonGroup>\n                <FieldDescription>\n                  Min 8 characters, Max 16 characters\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </div>\n          <div className=\"rounded-xl border border-border/60 p-0.5\">\n            <Field\n              className=\"rounded-xl border bg-card px-4 py-8 shadow-xs dark:bg-card/50\"\n              orientation=\"responsive\"\n            >\n              <FieldContent>\n                <FieldLabel htmlFor=\"lastName\">Your Phone Number</FieldLabel>\n                <FieldDescription>\n                  please provide your phone number\n                </FieldDescription>\n              </FieldContent>\n              <FieldContent>\n                <ButtonGroup className=\"w-full\">\n                  <InputGroup>\n                    <InputGroupAddon>\n                      <PhoneIcon />\n                    </InputGroupAddon>\n                    <InputGroupInput placeholder=\"+91 1234567890\" type=\"tel\" />\n                  </InputGroup>\n                  <Button variant=\"outline\">Save</Button>\n                </ButtonGroup>\n                <FieldDescription>Min 10 characters</FieldDescription>\n              </FieldContent>\n            </Field>\n          </div>\n        </FieldGroup>\n      </FieldSet>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "form"
  ]
}