@arolariu/components
Version:
A collection of reusable components for React applications, built as ESM & CJS modules with tree shake, minify and bundler optimizations enabled, for the lowest bundle size (import cost)!
94 lines (93 loc) • 4.77 kB
JavaScript
"use client";
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE__radix_ui_react_slot_85c2da36__ from "@radix-ui/react-slot";
import * as __WEBPACK_EXTERNAL_MODULE_react_hook_form_05a66946__ from "react-hook-form";
import * as __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__ from "../../lib/utils.js";
import * as __WEBPACK_EXTERNAL_MODULE__label_js_9a908b9b__ from "./label.js";
const Form = __WEBPACK_EXTERNAL_MODULE_react_hook_form_05a66946__.FormProvider;
const FormFieldContext = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createContext({});
const FormField = ({ ...props })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FormFieldContext.Provider, {
value: {
name: props.name
},
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_hook_form_05a66946__.Controller, {
...props
})
});
const useFormField = ()=>{
const fieldContext = __WEBPACK_EXTERNAL_MODULE_react__.useContext(FormFieldContext);
const itemContext = __WEBPACK_EXTERNAL_MODULE_react__.useContext(FormItemContext);
const { getFieldState } = (0, __WEBPACK_EXTERNAL_MODULE_react_hook_form_05a66946__.useFormContext)();
const formState = (0, __WEBPACK_EXTERNAL_MODULE_react_hook_form_05a66946__.useFormState)({
name: fieldContext.name
});
const fieldState = getFieldState(fieldContext.name, formState);
if (!fieldContext) throw new Error("useFormField should be used within <FormField>");
const { id } = itemContext;
return {
id,
name: fieldContext.name,
formItemId: `${id}-form-item`,
formDescriptionId: `${id}-form-item-description`,
formMessageId: `${id}-form-item-message`,
...fieldState
};
};
const FormItemContext = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createContext({});
function FormItem({ className, ...props }) {
const id = __WEBPACK_EXTERNAL_MODULE_react__.useId();
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(FormItemContext.Provider, {
value: {
id
},
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
"data-slot": "form-item",
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("grid gap-2", className),
...props
})
});
}
function FormLabel({ className, ...props }) {
const { error, formItemId } = useFormField();
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__label_js_9a908b9b__.Label, {
"data-slot": "form-label",
"data-error": !!error,
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("data-[error=true]:text-neutral-50 dark:data-[error=true]:text-neutral-50", className),
htmlFor: formItemId,
...props
});
}
function FormControl({ ...props }) {
const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__radix_ui_react_slot_85c2da36__.Slot, {
"data-slot": "form-control",
id: formItemId,
"aria-describedby": error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`,
"aria-invalid": !!error,
...props
});
}
function FormDescription({ className, ...props }) {
const { formDescriptionId } = useFormField();
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("p", {
"data-slot": "form-description",
id: formDescriptionId,
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("text-neutral-500 text-sm dark:text-neutral-400", className),
...props
});
}
function FormMessage({ className, ...props }) {
const { error, formMessageId } = useFormField();
const body = error ? String(error?.message ?? "") : props.children;
if (!body) return null;
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("p", {
"data-slot": "form-message",
id: formMessageId,
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("text-neutral-50 text-sm dark:text-neutral-50", className),
...props,
children: body
});
}
export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
//# sourceMappingURL=form.js.map