@arolariu/components/dist/components/ui/form.js

🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

"use client";
import { jsx } from "react/jsx-runtime";
import { Controller, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from "react-hook-form";
import { cn } from "../../lib/utilities.js";
import form_module from "./form.module.js";
import * as __rspack_external_react from "react";
const Form = Object.assign(FormProvider, {
    displayName: "Form"
});
function assignRef(ref, value) {
    if ("function" == typeof ref) return void ref(value);
    if (ref) ref.current = value;
}
function composeRefs(...refs) {
    return (value)=>{
        for (const ref of refs)assignRef(ref, value);
    };
}
function mergeAriaDescribedBy(...describedByValues) {
    const tokens = describedByValues.flatMap((describedByValue)=>describedByValue?.split(/\s+/u) ?? []).filter((token)=>token.length > 0);
    return tokens.length > 0 ? [
        ...new Set(tokens)
    ].join(" ") : void 0;
}
const FormFieldContext = /*#__PURE__*/ __rspack_external_react.createContext(null);
const FormField = ({ ...props })=>/*#__PURE__*/ jsx(FormFieldContext.Provider, {
        value: {
            name: props.name
        },
        children: /*#__PURE__*/ jsx(Controller, {
            ...props
        })
    });
const useFormField = ()=>{
    const fieldContext = __rspack_external_react.useContext(FormFieldContext);
    const itemContext = __rspack_external_react.useContext(FormItemContext);
    const { getFieldState, formState } = useFormContext();
    if (!fieldContext) throw new Error("useFormField should be used within <FormField>");
    if (!itemContext) throw new Error("useFormField should be used within <FormItem>");
    const fieldState = getFieldState(fieldContext.name, formState);
    const { id } = itemContext;
    return {
        error: fieldState.error,
        formDescriptionId: `${id}-form-item-description`,
        formItemId: `${id}-form-item`,
        formMessageId: `${id}-form-item-message`,
        id,
        invalid: fieldState.invalid,
        isDirty: fieldState.isDirty,
        isTouched: fieldState.isTouched,
        isValidating: fieldState.isValidating,
        name: fieldContext.name
    };
};
const FormItemContext = /*#__PURE__*/ __rspack_external_react.createContext(null);
const FormItem = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>{
    const id = __rspack_external_react.useId();
    return /*#__PURE__*/ jsx(FormItemContext.Provider, {
        value: {
            id
        },
        children: /*#__PURE__*/ jsx("div", {
            ref: ref,
            className: cn(form_module.item, className),
            ...props
        })
    });
});
FormItem.displayName = "FormItem";
const FormLabel = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>{
    const { error, formItemId } = useFormField();
    return /*#__PURE__*/ jsx("label", {
        ref: ref,
        className: cn(error && form_module.labelError, className),
        htmlFor: formItemId,
        ...props
    });
});
FormLabel.displayName = "FormLabel";
const FormControl = /*#__PURE__*/ __rspack_external_react.forwardRef(({ children, ...props }, ref)=>{
    const { error, formDescriptionId, formItemId, formMessageId } = useFormField();
    const describedBy = mergeAriaDescribedBy("string" == typeof props["aria-describedby"] ? props["aria-describedby"] : void 0, formDescriptionId, error ? formMessageId : void 0);
    if (/*#__PURE__*/ __rspack_external_react.isValidElement(children)) {
        const child = children;
        const childDescribedBy = "string" == typeof child.props["aria-describedby"] ? child.props["aria-describedby"] : void 0;
        return /*#__PURE__*/ __rspack_external_react.cloneElement(child, {
            ...props,
            ref: composeRefs(ref, child.props.ref),
            id: formItemId,
            "aria-describedby": mergeAriaDescribedBy(childDescribedBy, describedBy),
            "aria-invalid": Boolean(error)
        });
    }
    return /*#__PURE__*/ jsx("div", {
        ref: ref,
        id: formItemId,
        "aria-describedby": describedBy,
        "aria-invalid": Boolean(error),
        ...props,
        children: children
    });
});
FormControl.displayName = "FormControl";
const FormDescription = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>{
    const { formDescriptionId } = useFormField();
    return /*#__PURE__*/ jsx("p", {
        ref: ref,
        id: formDescriptionId,
        className: cn(form_module.description, className),
        ...props
    });
});
FormDescription.displayName = "FormDescription";
const FormMessage = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, children, ...props }, ref)=>{
    const { error, formMessageId } = useFormField();
    const body = error ? String(error.message ?? "") : children;
    if (!body) return null;
    return /*#__PURE__*/ jsx("p", {
        ref: ref,
        id: formMessageId,
        className: cn(form_module.message, className),
        ...props,
        children: body
    });
});
FormMessage.displayName = "FormMessage";
FormField.displayName = "FormField";
export { Controller, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useController, useFieldArray, useForm, useFormContext, useFormField, useFormState, useWatch };

//# sourceMappingURL=form.js.map