{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"new-password-2","type":"registry:block","title":"New Password 2","description":"","dependencies":["lucide-react"],"registryDependencies":["https://www.diarmuradi.com/r/styles/base-nova/button.json","https://www.diarmuradi.com/r/styles/base-nova/fancy-button.json","https://www.diarmuradi.com/r/styles/base-nova/field.json","https://www.diarmuradi.com/r/styles/base-nova/input-group.json"],"files":[{"path":"new-password.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Field, FieldLabel } from \"@/components/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/components/ui/input-group\"\nimport { FancyButton } from \"@/components/fancy-button\"\nimport { EyeIcon, EyeOffIcon, LockIcon } from 'lucide-react'\n\nexport function NewPassword() {\n  const [showPassword, setShowPassword] = useState(false)\n  const [showConfirm, setShowConfirm] = useState(false)\n\n  return (\n    <main className=\"flex w-full max-w-md flex-col gap-6 rounded-3xl bg-card p-6 shadow-elevated-lg\">\n      <div className=\"flex flex-col items-center gap-4\">\n        <div className=\"relative flex size-14 items-center justify-center\">\n          <div className=\"absolute inset-0 scale-125 rounded-full bg-primary/10 mask-t-from-20% mask-t-to-100%\" />\n          <div className=\"relative z-10 flex size-14 items-center justify-center rounded-full bg-card ring ring-primary/10 ring-inset\">\n            <LockIcon  className=\"size-6 text-primary\" />\n          </div>\n        </div>\n        <div className=\"text-center\">\n          <h1 className=\"text-xl font-semibold\">Set New Password</h1>\n          <p className=\"text-md text-muted-foreground\">\n            Create a new password for your account.\n          </p>\n        </div>\n      </div>\n\n      <form className=\"flex flex-col gap-3\">\n        <Field className=\"gap-1\">\n          <FieldLabel htmlFor=\"password\">New Password</FieldLabel>\n          <InputGroup className=\"h-10\">\n            <InputGroupInput\n              id=\"password\"\n              type={showPassword ? \"text\" : \"password\"}\n              placeholder=\"••••••••••\"\n              className=\"h-10\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                type=\"button\"\n                onClick={() => setShowPassword(!showPassword)}\n                aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n              >\n                {showPassword ? <EyeOffIcon /> : <EyeIcon />}\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n\n        <Field className=\"gap-1\">\n          <FieldLabel htmlFor=\"confirm-password\">Confirm Password</FieldLabel>\n          <InputGroup className=\"h-10\">\n            <InputGroupInput\n              id=\"confirm-password\"\n              type={showConfirm ? \"text\" : \"password\"}\n              placeholder=\"••••••••••\"\n              className=\"h-10\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                type=\"button\"\n                onClick={() => setShowConfirm(!showConfirm)}\n                aria-label={showConfirm ? \"Hide password\" : \"Show password\"}\n              >\n                {showConfirm ? <EyeOffIcon /> : <EyeIcon />}\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n\n        <FancyButton type=\"submit\" className=\"h-10\">\n          Update Password\n        </FancyButton>\n      </form>\n\n      <div className=\"flex items-center justify-center gap-1 text-sm text-muted-foreground\">\n        <span>Know your old password?</span>\n        <Button type=\"button\" variant=\"link\" className=\"h-auto p-0\">\n          Sign in\n        </Button>\n      </div>\n    </main>\n  )\n}","target":"components/new-password.tsx"}]}