import { cx } from "class-variance-authority" import { type ForwardedRef, forwardRef, useId, useImperativeHandle, useRef, } from "react" import { Input as AriaInput, Label as AriaLabel } from "react-aria-components" import Label from "@/components/TempDesignSystem/Form/Label" import Body from "@/components/TempDesignSystem/Text/Body" import styles from "./input.module.css" import type { AriaInputWithLabelProps } from "./input" const AriaInputWithLabel = forwardRef(function AriaInputWithLabelComponent( { label, ...props }: AriaInputWithLabelProps, forwardedRef: ForwardedRef ) { const ref = useRef(null) // Unique id is required for multiple inputs of same name appearing multiple times // on same page. This will inherited by parent label element. // Shouldn't really be needed if we don't set id though. const uniqueId = useId() const inputId = `${uniqueId}-${props.name}` useImperativeHandle(forwardedRef, () => ref.current as HTMLInputElement) return ( { if (ref.current) { ref.current.focus() } }} > {label} ) }) export default AriaInputWithLabel