@arolariu/components
Version:
🎨 60+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
149 lines (148 loc) • 6.04 kB
JavaScript
"use client";
;
var __webpack_require__ = {};
(()=>{
__webpack_require__.d = (exports1, definition)=>{
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
enumerable: true,
get: definition[key]
});
};
})();
(()=>{
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
})();
(()=>{
__webpack_require__.r = (exports1)=>{
if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
value: 'Module'
});
Object.defineProperty(exports1, '__esModule', {
value: true
});
};
})();
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
useFormField: ()=>useFormField,
FormLabel: ()=>FormLabel,
FormControl: ()=>FormControl,
FormItem: ()=>FormItem,
FormField: ()=>FormField,
FormMessage: ()=>FormMessage,
Form: ()=>Form,
FormDescription: ()=>FormDescription
});
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
const external_react_namespaceObject = require("react");
const react_slot_namespaceObject = require("@radix-ui/react-slot");
const external_react_hook_form_namespaceObject = require("react-hook-form");
const utils_cjs_namespaceObject = require("../../lib/utils.cjs");
const external_label_cjs_namespaceObject = require("./label.cjs");
const Form = external_react_hook_form_namespaceObject.FormProvider;
const FormFieldContext = /*#__PURE__*/ external_react_namespaceObject.createContext({});
const FormField = ({ ...props })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormFieldContext.Provider, {
value: {
name: props.name
},
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_hook_form_namespaceObject.Controller, {
...props
})
});
const useFormField = ()=>{
const fieldContext = external_react_namespaceObject.useContext(FormFieldContext);
const itemContext = external_react_namespaceObject.useContext(FormItemContext);
const { getFieldState } = (0, external_react_hook_form_namespaceObject.useFormContext)();
const formState = (0, external_react_hook_form_namespaceObject.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__*/ external_react_namespaceObject.createContext({});
function FormItem({ className, ...props }) {
const id = external_react_namespaceObject.useId();
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(FormItemContext.Provider, {
value: {
id
},
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
"data-slot": "form-item",
className: (0, utils_cjs_namespaceObject.cn)("grid gap-2", className),
...props
})
});
}
function FormLabel({ className, ...props }) {
const { error, formItemId } = useFormField();
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_label_cjs_namespaceObject.Label, {
"data-slot": "form-label",
"data-error": !!error,
className: (0, utils_cjs_namespaceObject.cn)("data-[error=true]:text-red-500 dark:data-[error=true]:text-red-900", className),
htmlFor: formItemId,
...props
});
}
function FormControl({ ...props }) {
const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_slot_namespaceObject.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, jsx_runtime_namespaceObject.jsx)("p", {
"data-slot": "form-description",
id: formDescriptionId,
className: (0, utils_cjs_namespaceObject.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, jsx_runtime_namespaceObject.jsx)("p", {
"data-slot": "form-message",
id: formMessageId,
className: (0, utils_cjs_namespaceObject.cn)("text-red-500 text-sm dark:text-red-900", className),
...props,
children: body
});
}
exports.Form = __webpack_exports__.Form;
exports.FormControl = __webpack_exports__.FormControl;
exports.FormDescription = __webpack_exports__.FormDescription;
exports.FormField = __webpack_exports__.FormField;
exports.FormItem = __webpack_exports__.FormItem;
exports.FormLabel = __webpack_exports__.FormLabel;
exports.FormMessage = __webpack_exports__.FormMessage;
exports.useFormField = __webpack_exports__.useFormField;
for(var __webpack_i__ in __webpack_exports__)if (-1 === [
"Form",
"FormControl",
"FormDescription",
"FormField",
"FormItem",
"FormLabel",
"FormMessage",
"useFormField"
].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
Object.defineProperty(exports, '__esModule', {
value: true
});
//# sourceMappingURL=form.cjs.map