{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-input-19","type":"registry:block","title":"Input label with link and visibility toggle","description":"Input label with link and visibility toggle","dependencies":[],"registryDependencies":["field","input"],"files":[{"path":"c-input-19.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Field, FieldLabel } from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Pattern() {\n  const [isVisible, setIsVisible] = useState<boolean>(false)\n\n  const toggleVisibility = () => setIsVisible((prevState) => !prevState)\n\n  return (\n    <Field className=\"w-full max-w-xs\">\n      <div className=\"flex items-center justify-between\">\n        <FieldLabel htmlFor=\"password-link\">Password</FieldLabel>\n        <a\n          href=\"#\"\n          className=\"text-primary text-xs font-medium hover:underline\"\n        >\n          Forgot password?\n        </a>\n      </div>\n      <div className=\"relative\">\n        <Input\n          id=\"password-link\"\n          type={isVisible ? \"text\" : \"password\"}\n          className=\"pe-9\"\n        />\n        <button\n          aria-label={isVisible ? \"Hide password\" : \"Show password\"}\n          aria-pressed={isVisible}\n          className=\"text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n          onClick={toggleVisibility}\n          type=\"button\"\n        >\n          {isVisible ? (\n            <IconPlaceholder\n              lucide=\"EyeOffIcon\"\n              tabler=\"IconEyeOff\"\n              hugeicons=\"ViewOffSlashIcon\"\n              phosphor=\"EyeSlashIcon\"\n              remixicon=\"RiEyeOffLine\"\n              aria-hidden=\"true\"\n            />\n          ) : (\n            <IconPlaceholder\n              lucide=\"EyeIcon\"\n              tabler=\"IconEye\"\n              hugeicons=\"ViewIcon\"\n              phosphor=\"EyeIcon\"\n              remixicon=\"RiEyeLine\"\n              aria-hidden=\"true\"\n            />\n          )}\n        </button>\n      </div>\n    </Field>\n  )\n}","target":"components/examples/c-input-19.tsx"}],"meta":{"order":19}}