{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-input-22","type":"registry:block","title":"Basic password strength with dynamic hint and icons","description":"Basic password strength with dynamic hint and icons","dependencies":["cn"],"registryDependencies":["field","input"],"files":[{"path":"c-input-22.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useId, useState } from \"react\"\n\nimport { cn } from \"cn\"\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 id = useId()\n  const [password, setPassword] = useState(\"\")\n\n  const getStrength = (pass: string) => {\n    const requirements = [\n      { met: pass.length >= 8, text: \"8+ characters\" },\n      { met: /[0-9]/.test(pass), text: \"a number\" },\n      { met: /[!@#$%^&*]/.test(pass), text: \"a special character\" },\n    ]\n    const metCount = requirements.filter((r) => r.met).length\n    return { requirements, metCount }\n  }\n\n  const { metCount } = getStrength(password)\n\n  const getHint = () => {\n    if (!password) {\n      return \"Use 8+ characters with a number and a special character.\"\n    }\n    if (metCount === 3) {\n      return \"Strong password. You're all set!\"\n    }\n    if (metCount === 2) {\n      return \"Almost there! Add the missing requirement.\"\n    }\n    return \"Weak password. Include 8+ characters, a number, and a special character.\"\n  }\n\n  const getStatus = () => {\n    if (!password)\n      return {\n        color: \"text-muted-foreground\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"InformationCircleIcon\"\n            phosphor=\"InfoIcon\"\n            remixicon=\"RiInformationLine\"\n            className=\"size-3.5 shrink-0\"\n          />\n        ),\n      }\n    if (metCount === 3)\n      return {\n        color: \"text-emerald-500\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheck\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n            className=\"size-3.5 shrink-0\"\n          />\n        ),\n      }\n    if (metCount === 2)\n      return {\n        color: \"text-amber-500\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"AlertTriangleIcon\"\n            tabler=\"IconAlertTriangle\"\n            hugeicons=\"Alert02Icon\"\n            phosphor=\"WarningIcon\"\n            remixicon=\"RiAlertLine\"\n            className=\"size-3.5 shrink-0\"\n          />\n        ),\n      }\n    return {\n      color: \"text-destructive\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"AlertTriangleIcon\"\n          tabler=\"IconAlertTriangle\"\n          hugeicons=\"Alert02Icon\"\n          phosphor=\"WarningIcon\"\n          remixicon=\"RiAlertLine\"\n          className=\"size-3.5 shrink-0\"\n        />\n      ),\n    }\n  }\n\n  const { color, icon: StatusIcon } = getStatus()\n\n  return (\n    <Field className=\"w-full max-w-xs\">\n      <FieldLabel htmlFor={id}>Password</FieldLabel>\n      <Input\n        id={id}\n        type=\"password\"\n        value={password}\n        onChange={(e) => setPassword(e.target.value)}\n        placeholder=\"Enter password\"\n      />\n      <div\n        className={cn(\n          \"flex items-center gap-2 text-xs transition-colors duration-200\",\n          color\n        )}\n      >\n        {StatusIcon}\n        <p>{getHint()}</p>\n      </div>\n    </Field>\n  )\n}","target":"components/examples/c-input-22.tsx"}],"meta":{"order":22}}