react-vite-themes/dist/components/molecules/FormField/FormField.js

A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { useFormContext } from '../Form';
import { cn } from '../../../utils';
export const FormField = ({ name, label, children, className, required = false, helperText }) => {
    const form = useFormContext();
    const fieldProps = form.getFieldProps(name);
    const hasError = fieldProps.isInvalid && fieldProps.isTouched;
    return (_jsxs("div", { className: cn('form-field', className), children: [label && (_jsxs("label", { className: "form-field__label", children: [label, required && _jsx("span", { className: "form-field__required", children: "*" })] })), _jsx("div", { className: "form-field__input", children: React.isValidElement(children)
                    ? React.cloneElement(children, {
                        value: fieldProps.value,
                        onChange: (eventOrValue) => {
                            // Handle both event objects and direct values
                            let value;
                            if (eventOrValue && typeof eventOrValue === 'object' && eventOrValue.target) {
                                // It's an event object
                                value = eventOrValue.target.value;
                            }
                            else {
                                // It's a direct value (like from DateInput)
                                value = eventOrValue;
                            }
                            fieldProps.onChange(value);
                        },
                        onBlur: fieldProps.onBlur,
                        isInvalid: hasError,
                        errorMessage: hasError ? fieldProps.error[0] : undefined,
                        formNoValidate: true
                    })
                    : children }), hasError && fieldProps.error.length > 0 && (_jsx("div", { className: "form-field__error", children: fieldProps.error.map((error, index) => (_jsx("div", { className: "form-field__error-message", children: error }, index))) })), helperText && !hasError && (_jsx("div", { className: "form-field__helper", children: helperText }))] }));
};