+ "content": "import React from 'react';\n\nimport { cn, withVariants } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nexport const inputVariants = cva(\n 'flex w-full rounded-md bg-transparent text-sm file:border-0 file:bg-background file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',\n {\n defaultVariants: {\n h: 'md',\n variant: 'default',\n },\n variants: {\n h: {\n md: 'h-10 px-3 py-2',\n sm: 'h-[28px] px-1.5 py-1',\n },\n variant: {\n default:\n 'border border-input ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n ghost: 'border-none focus-visible:ring-transparent',\n },\n },\n }\n);\n\nexport type InputProps = React.ComponentPropsWithoutRef<'input'> &\n VariantProps<typeof inputVariants>;\n\nexport const Input = withVariants('input', inputVariants, ['variant', 'h']);\n\nexport type FloatingInputProps = InputProps & {\n label: string;\n};\n\nexport function FloatingInput({\n id,\n className,\n label,\n ...props\n}: FloatingInputProps) {\n return (\n <>\n <label\n className=\"absolute top-1/2 block -translate-y-1/2 cursor-text px-1 text-sm text-muted-foreground/70 transition-all group-focus-within:pointer-events-none group-focus-within:top-0 group-focus-within:cursor-default group-focus-within:text-xs group-focus-within:font-medium group-focus-within:text-foreground has-[+input:not(:placeholder-shown)]:pointer-events-none has-[+input:not(:placeholder-shown)]:top-0 has-[+input:not(:placeholder-shown)]:cursor-default has-[+input:not(:placeholder-shown)]:text-xs has-[+input:not(:placeholder-shown)]:font-medium has-[+input:not(:placeholder-shown)]:text-foreground\"\n htmlFor={id}\n >\n <span className=\"inline-flex bg-background px-2\">{label}</span>\n </label>\n <Input id={id} className={cn(className)} placeholder=\"\" {...props} />\n </>\n );\n}\n",
0 commit comments