import { Label } from "@radix-ui/react-label" import { Input } from "./ui/input" import { FieldName, useInputControl } from "@conform-to/react" import { useId } from "react" import { cn } from "~/utils" import { Checkbox } from "~/components/ui/checkbox" export const Field = ({ inputProps, labelProps, errors, className }: { inputProps: { name: FieldName } & React.HTMLProps labelProps: React.LabelHTMLAttributes errors?: ListOfErrors className?: string }) => { const fallbackId = useId() const id = inputProps.id ?? fallbackId const errorId = errors?.length ? `${id}-error` : undefined return (
) } export const FieldCheckbox = ({ inputProps, labelProps, errors, className }: { inputProps: { name: string form: string value?: string } & React.ComponentPropsWithoutRef labelProps: React.LabelHTMLAttributes errors?: ListOfErrors className?: string }) => { const { key, defaultChecked, ...checkboxProps } = inputProps const checkedValue = inputProps.value ?? "on" const input = useInputControl({ key, name: inputProps.name, formId: inputProps.form, initialValue: defaultChecked ? checkedValue : undefined }) const fallbackId = useId() const id = inputProps.id ?? fallbackId const errorId = errors?.length ? `${id}-error` : undefined return (
{ input.change(state.valueOf() ? checkedValue : "") inputProps.onCheckedChange?.(state) }} onFocus={(event) => { input.focus() inputProps.onFocus?.(event) }} onBlur={(event) => { input.blur() inputProps.onBlur?.(event) }} type="button" />
) } export type ListOfErrors = Array | null | undefined export function ErrorList({ id, errors }: { errors?: ListOfErrors id?: string }) { const errorsToRender = errors?.filter(Boolean) if (!errorsToRender?.length) return null return (
    {errorsToRender.map((e) => (
  • {e}
  • ))}
) }