"use client" import { Field as FieldPrimitive } from "@base-ui/react/field" import { motion, useReducedMotion } from "motion/react" import { revealTween } from "@/lib/motion" import { cn } from "@/lib/utils" /** Drop DOM animation handlers that clash with Motion's identically named props. */ function withoutDomAnimationHandlers>( props: T ) { const { onAnimationStart: _onAnimationStart, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...rest } = props return rest } function Field({ className, ...props }: FieldPrimitive.Root.Props) { return ( ) } function FieldLabel({ className, ...props }: FieldPrimitive.Label.Props) { return ( ) } function FieldDescription({ className, ...props }: FieldPrimitive.Description.Props) { return ( ) } /** * Error reveal — height:auto settle (Family Values: careful delight on rare path). * Presence is owned by Base UI transitionStatus; Motion only animates chrome. */ function FieldError({ className, ...props }: FieldPrimitive.Error.Props) { const reduce = useReducedMotion() return ( ( )} initial={{ opacity: 0, height: 0, y: -2 }} animate={ state.transitionStatus === "ending" ? { opacity: 0, height: 0, y: -2 } : { opacity: 1, height: "auto", y: 0 } } transition={revealTween} /> ) } /> ) } function FieldControl({ className, ...props }: FieldPrimitive.Control.Props) { return ( ) } function FieldValidity({ ...props }: FieldPrimitive.Validity.Props) { return } export { Field, FieldControl, FieldDescription, FieldError, FieldLabel, FieldValidity, }