53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2ntfcxrkfxczh.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T1afc,"use client"; import * as React from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { type ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; // --- HELPER FUNCTIONS & COMPONENTS (Added to fix resolving errors) --- // 1. `cn` utility function to merge Tailwind classes export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } // 2. Base `Label` component const Label = React.forwardRef< React.ElementRef<"label">, React.ComponentPropsWithoutRef<"label"> >(({ className, ...props }, ref) => ( )); Label.displayName = "Label"; // 3. User's `Input` component (as provided in the chat history) const inputVariants = cva( "bg-background file:text-foreground placeholder:text-muted-foreground flex w-full rounded border font-medium file:border-0 file:bg-transparent file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-colors", { variants: { size: { xl: "min-h-14 px-4 py-4 text-lg file:text-base", l: "min-h-12 px-3 py-3 text-base file:text-sm", m: "min-h-10 px-3 py-2 text-sm file:text-sm", s: "min-h-8 px-2 py-1.5 text-sm file:text-xs", }, validation: { none: "border-input focus:border-secondary", error: "border-error focus:border-destructive", success: "border-green-500 focus:border-green-600", }, }, defaultVariants: { size: "m", validation: "none", }, }, ); export interface BaseInputProps extends Omit, "size">, VariantProps { validationMsg?: string; } const Input = React.forwardRef( ( { className, type = "text", size = "m", validation = "none", validationMsg, ...props }, ref, ) => { return (

{" "} {" "} {validationMsg && validation !== "none" && (

{validationMsg}{" "}

)}{" "}

); }, ); Input.displayName = "Input"; // --- FLOATING LABEL IMPLEMENTATION --- // FloatingInput passes props to the base Input. The placeholder=" " is crucial. const FloatingInput = React.forwardRef< HTMLInputElement, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => { return ( ); }); FloatingInput.displayName = "FloatingInput"; // Floating label variants using `group` to handle the wrapped const floatingLabelVariants = cva( // Base styles for the un-floated state "absolute left-2 top-1/2 z-10 origin-[0] -translate-y-1/2 transform cursor-text bg-background px-2 text-muted-foreground duration-300 flex items-center gap-2 whitespace-nowrap pointer-events-none", { variants: { labelsize: { // Defines the label's text size in its un-floated state xl: "text-base", l: "text-base", m: "text-base", s: "text-sm", }, }, defaultVariants: { labelsize: "m", }, }, ); // FloatingLabel component with styles for the floated state triggered by the parent `group` const FloatingLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, labelsize, ...props }, ref) => { return ( ); }); FloatingLabel.displayName = "FloatingLabel"; // The main component you'll use in your application type FloatingLabelInputProps = React.ComponentPropsWithoutRef & VariantProps & { label?: string; icon?: React.ReactNode; badge?: React.ReactNode; }; const FloatingLabelInput = React.forwardRef< React.ElementRef, FloatingLabelInputProps >( ( { id, label, icon, badge, labelsize, value: valueProp, defaultValue, onChange, ...props }, ref, ) => { const inputId = React.useId() || id; // Check if the input has a value to apply the data attribute const [value, setValue] = React.useState(valueProp ?? defaultValue ?? ""); React.useEffect(() => { if (valueProp !== undefined) setValue(String(valueProp)); }, [valueProp]); return ( // The `group` class and `data-value` attribute are the keys to the animation

0 : Boolean(value) } > { setValue(e.target.value); onChange?.(e); // preserve parent handler }} {...props} />{" "} {icon && {icon}} {label} {badge && ( {badge} )}

); }, ); FloatingLabelInput.displayName = "FloatingLabelInput"; export { FloatingInput, FloatingLabel, FloatingLabelInput, floatingLabelVariants, }; 52:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L53",null,{"files":[{"path":"src/components/ui/floating-label-input.tsx","content":"$54","type":"registry:ui","target":"components/ui/floating-label-input.tsx"}],"className":"h-[70svh] min-h-80"}]]}]