{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "label-input",
  "title": "Label Input",
  "description": "Input field with floating label and password visibility toggle.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/spell-ui/label-input.tsx",
      "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { EyeIcon, EyeOffIcon } from \"lucide-react\";\n\ntype RingColor =\n  | \"muted\"\n  | \"primary\"\n  | \"secondary\"\n  | \"destructive\"\n  | \"red\"\n  | \"blue\"\n  | \"green\"\n  | \"yellow\"\n  | \"purple\"\n  | \"pink\"\n  | \"orange\"\n  | \"cyan\"\n  | \"indigo\"\n  | \"violet\"\n  | \"rose\"\n  | \"amber\"\n  | \"lime\"\n  | \"emerald\"\n  | \"sky\"\n  | \"slate\"\n  | \"fuchsia\";\n\ninterface LabelInputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  label?: string;\n  ringColor?: RingColor;\n  containerClassName?: string;\n}\n\nconst ringColorMap: Record<RingColor, string> = {\n  muted: \"focus:ring-muted\",\n  primary: \"focus:ring-primary\",\n  secondary: \"focus:ring-secondary\",\n  destructive: \"focus:ring-destructive\",\n  red: \"focus:ring-red-600\",\n  blue: \"focus:ring-blue-600\",\n  green: \"focus:ring-green-600\",\n  yellow: \"focus:ring-yellow-600\",\n  purple: \"focus:ring-purple-600\",\n  pink: \"focus:ring-pink-600\",\n  orange: \"focus:ring-orange-600\",\n  cyan: \"focus:ring-cyan-600\",\n  indigo: \"focus:ring-indigo-600\",\n  violet: \"focus:ring-violet-600\",\n  rose: \"focus:ring-rose-600\",\n  amber: \"focus:ring-amber-600\",\n  lime: \"focus:ring-lime-600\",\n  emerald: \"focus:ring-emerald-600\",\n  sky: \"focus:ring-sky-600\",\n  slate: \"focus:ring-slate-600\",\n  fuchsia: \"focus:ring-fuchsia-600\",\n};\n\nexport function LabelInput({\n  label = \"\",\n  ringColor = \"muted\",\n  containerClassName,\n  className,\n  type = \"text\",\n  placeholder = \"\",\n  ...props\n}: LabelInputProps) {\n  const [isVisible, setIsVisible] = useState(false);\n  const isPasswordType = type === \"password\";\n  const inputType = isPasswordType ? (isVisible ? \"text\" : \"password\") : type;\n\n  const toggleVisibility = () => setIsVisible(!isVisible);\n\n  return (\n    <div className={cn(\"group relative w-full\", className, containerClassName)}>\n      <input\n        className={cn(\n          \"block outline-none peer text-primary w-full px-3.5 h-10 text-sm rounded-lg border focus:ring-2 dark:bg-neutral-950 dark:border-neutral-700/75 autofill:shadow-[inset_0_0_0px_1000px_var(--color-background)]\",\n          isPasswordType && \"pr-9\",\n          ringColorMap[ringColor],\n        )}\n        placeholder={placeholder}\n        type={inputType}\n        {...props}\n      />\n      <label className=\"absolute block inset-y-0 px-2 bg-white dark:bg-neutral-950 text-sm left-[7px] h-fit text-nowrap my-auto -translate-y-[19px] peer-focus:-translate-y-[19px] text-muted-foreground pointer-events-none transition-transform will duration-200 scale-[.8] origin-top-left peer-placeholder-shown:scale-100 peer-focus:scale-[.8] peer-placeholder-shown:translate-y-0\">\n        {label}\n      </label>\n      {isPasswordType && (\n        <button\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          type=\"button\"\n          onClick={toggleVisibility}\n          aria-label={isVisible ? \"Hide password\" : \"Show password\"}\n          aria-pressed={isVisible}\n        >\n          {isVisible\n            ? <EyeOffIcon size={16} aria-hidden=\"true\" />\n            : <EyeIcon size={16} aria-hidden=\"true\" />}\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport default LabelInput;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}