{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-32",
  "title": "Floating label",
  "description": "A label that moves up to the edge when the field is focused or filled.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/field.json",
    "https://ui.ndekocode.dev/r/input.json",
    "https://ui.ndekocode.dev/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/components/input/input-32.tsx",
      "content": "import { Field, FieldLabel } from '@/registry/ndeko/ui/field';\nimport { Input } from '@/registry/ndeko/ui/input';\n\nconst FLOATING_LABEL = [\n  'text-muted-foreground pointer-events-none absolute start-2 top-1/2 z-10 origin-left -translate-y-1/2 rounded-sm px-1 rtl:origin-right',\n  'transition-[translate,scale,color,background-color] duration-150 ease-out',\n  'group-focus-within:bg-card group-focus-within:text-foreground group-focus-within:-translate-y-[calc(50%_+_18px)] group-focus-within:scale-90',\n  'has-[+input:not(:placeholder-shown)]:bg-card has-[+input:not(:placeholder-shown)]:text-foreground has-[+input:not(:placeholder-shown)]:-translate-y-[calc(50%_+_18px)] has-[+input:not(:placeholder-shown)]:scale-90',\n].join(' ');\n\nexport default function Input32() {\n  return (\n    <Field className='relative w-full max-w-xs'>\n      <FieldLabel className={FLOATING_LABEL}>Email</FieldLabel>\n      <Input size='lg' type='email' placeholder=' ' />\n    </Field>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "components",
    "input"
  ],
  "type": "registry:component"
}