{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-with-animated-inset-label",
  "type": "registry:component",
  "title": "Input with Animated Inset Label",
  "description": "A component for inputting text with an animated inset label",
  "registryDependencies": [
    "utils",
    "label"
  ],
  "files": [
    {
      "path": "registry/default/components/input/input-with-animated-inset-label.tsx",
      "content": "'use client'\r\n\r\nimport { Label } from '@/registry/default/ui/label'\r\nimport { cn } from '@/lib/utils'\r\nimport { useId, useRef } from 'react'\r\n\r\nexport default function InputWithAnimatedInsetLabel() {\r\n    const id = useId()\r\n    const inputRef = useRef<HTMLInputElement>(null)\r\n\r\n    const handleContainerClick = () => {\r\n        inputRef.current?.focus()\r\n    }\r\n\r\n    return (\r\n        <div\r\n            onClick={handleContainerClick}\r\n            className={cn(\r\n                'selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input relative flex w-full min-w-0 flex-col justify-end rounded-md border bg-transparent text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 md:text-sm',\r\n                'focus-within:border-ring focus-within:ring-ring/50 group focus-within:ring-[3px]',\r\n                'has-aria-invalid:ring-destructive/20 has-dark:aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive h-14 w-full max-w-4/5 cursor-text'\r\n            )}\r\n        >\r\n            <Label\r\n                htmlFor={id}\r\n                className=\"text-muted-foreground absolute top-1/2 -translate-y-1/2 cursor-text px-3 transition-all group-focus-within:top-2 group-focus-within:-translate-y-0 group-focus-within:text-xs group-focus-within:font-medium *:placeholder-shown:top-1/2 has-[+input:not(:placeholder-shown)]:pointer-events-none has-[+input:not(:placeholder-shown)]:top-2 has-[+input:not(:placeholder-shown)]:-translate-y-0 has-[+input:not(:placeholder-shown)]:text-xs has-[+input:not(:placeholder-shown)]:font-medium\"\r\n            >\r\n                Inset Label with Animation\r\n            </Label>\r\n            <input\r\n                ref={inputRef}\r\n                id={id}\r\n                type=\"text\"\r\n                className=\"placeholder:text-muted-foreground h-9 bg-transparent px-3 py-1 focus-visible:outline-none\"\r\n                placeholder=\"\"\r\n            />\r\n        </div>\r\n    )\r\n}\r\n",
      "type": "registry:component",
      "target": "components/input-with-animated-inset-label.tsx"
    }
  ]
}