{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comp-51",
  "type": "registry:component",
  "registryDependencies": [
    "https://coss.com/origin/r/input.json",
    "https://coss.com/origin/r/label.json"
  ],
  "files": [
    {
      "path": "registry/default/components/comp-51.tsx",
      "content": "\"use client\";\n\nimport { CheckIcon, EyeIcon, EyeOffIcon, XIcon } from \"lucide-react\";\nimport { useId, useMemo, useState } from \"react\";\n\nimport { Input } from \"@/registry/default/ui/input\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Component() {\n  const id = useId();\n  const [password, setPassword] = useState(\"\");\n  const [isVisible, setIsVisible] = useState<boolean>(false);\n\n  const toggleVisibility = () => setIsVisible((prevState) => !prevState);\n\n  const checkStrength = (pass: string) => {\n    const requirements = [\n      { regex: /.{8,}/, text: \"At least 8 characters\" },\n      { regex: /[0-9]/, text: \"At least 1 number\" },\n      { regex: /[a-z]/, text: \"At least 1 lowercase letter\" },\n      { regex: /[A-Z]/, text: \"At least 1 uppercase letter\" },\n    ];\n\n    return requirements.map((req) => ({\n      met: req.regex.test(pass),\n      text: req.text,\n    }));\n  };\n\n  const strength = checkStrength(password);\n\n  const strengthScore = useMemo(() => {\n    return strength.filter((req) => req.met).length;\n  }, [strength]);\n\n  const getStrengthColor = (score: number) => {\n    if (score === 0) return \"bg-border\";\n    if (score <= 1) return \"bg-red-500\";\n    if (score <= 2) return \"bg-orange-500\";\n    if (score === 3) return \"bg-amber-500\";\n    return \"bg-emerald-500\";\n  };\n\n  const getStrengthText = (score: number) => {\n    if (score === 0) return \"Enter a password\";\n    if (score <= 2) return \"Weak password\";\n    if (score === 3) return \"Medium password\";\n    return \"Strong password\";\n  };\n\n  return (\n    <div>\n      {/* Password input field with toggle visibility button */}\n      <div className=\"*:not-first:mt-2\">\n        <Label htmlFor={id}>Input with password strength indicator</Label>\n        <div className=\"relative\">\n          <Input\n            aria-describedby={`${id}-description`}\n            className=\"pe-9\"\n            id={id}\n            onChange={(e) => setPassword(e.target.value)}\n            placeholder=\"Password\"\n            type={isVisible ? \"text\" : \"password\"}\n            value={password}\n          />\n          <button\n            aria-controls=\"password\"\n            aria-label={isVisible ? \"Hide password\" : \"Show password\"}\n            aria-pressed={isVisible}\n            className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\"\n            onClick={toggleVisibility}\n            type=\"button\"\n          >\n            {isVisible ? (\n              <EyeOffIcon aria-hidden=\"true\" size={16} />\n            ) : (\n              <EyeIcon aria-hidden=\"true\" size={16} />\n            )}\n          </button>\n        </div>\n      </div>\n\n      {/* Password strength indicator */}\n      <div\n        aria-label=\"Password strength\"\n        aria-valuemax={4}\n        aria-valuemin={0}\n        aria-valuenow={strengthScore}\n        className=\"mt-3 mb-4 h-1 w-full overflow-hidden rounded-full bg-border\"\n        role=\"progressbar\"\n        tabIndex={-1}\n      >\n        <div\n          className={`h-full ${getStrengthColor(strengthScore)} transition-all duration-500 ease-out`}\n          style={{ width: `${(strengthScore / 4) * 100}%` }}\n        />\n      </div>\n\n      {/* Password strength description */}\n      <p\n        className=\"mb-2 font-medium text-foreground text-sm\"\n        id={`${id}-description`}\n      >\n        {getStrengthText(strengthScore)}. Must contain:\n      </p>\n\n      {/* Password requirements list */}\n      <ul aria-label=\"Password requirements\" className=\"space-y-1.5\">\n        {strength.map((req, _index) => (\n          <li className=\"flex items-center gap-2\" key={req.text}>\n            {req.met ? (\n              <CheckIcon\n                aria-hidden=\"true\"\n                className=\"text-emerald-500\"\n                size={16}\n              />\n            ) : (\n              <XIcon\n                aria-hidden=\"true\"\n                className=\"text-muted-foreground/80\"\n                size={16}\n              />\n            )}\n            <span\n              className={`text-xs ${req.met ? \"text-emerald-600\" : \"text-muted-foreground\"}`}\n            >\n              {req.text}\n              <span className=\"sr-only\">\n                {req.met ? \" - Requirement met\" : \" - Requirement not met\"}\n              </span>\n            </span>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "input",
      "label",
      "password"
    ]
  }
}