UNPKG

@easy-shadcn/react

Version:

Use shadcn/ui easy&enhance like component library

156 lines (149 loc) 5.05 kB
'use strict'; var chunk4RFGFQC6_js = require('./chunk-4RFGFQC6.js'); var ReactHookForm = require('react-hook-form'); var React = require('react'); var reactSlot = require('@radix-ui/react-slot'); var utils = require('@easy-shadcn/utils'); var jsxRuntime = require('react/jsx-runtime'); function _interopNamespace(e) { if (e && e.__esModule) return e; var n = Object.create(null); if (e) { Object.keys(e).forEach(function (k) { if (k !== 'default') { var d = Object.getOwnPropertyDescriptor(e, k); Object.defineProperty(n, k, d.get ? d : { enumerable: true, get: function () { return e[k]; } }); } }); } n.default = e; return Object.freeze(n); } var ReactHookForm__namespace = /*#__PURE__*/_interopNamespace(ReactHookForm); var React__namespace = /*#__PURE__*/_interopNamespace(React); var Form = ReactHookForm.FormProvider; var FormFieldContext = React__namespace.createContext( {} ); var FormField = ({ ...props }) => { return /* @__PURE__ */ jsxRuntime.jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsxRuntime.jsx(ReactHookForm.Controller, { ...props }) }); }; var useFormField = () => { const fieldContext = React__namespace.useContext(FormFieldContext); const itemContext = React__namespace.useContext(FormItemContext); const { getFieldState, formState } = ReactHookForm.useFormContext(); 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 }; }; var FormItemContext = React__namespace.createContext( {} ); var FormItem = React__namespace.forwardRef(({ className, ...props }, ref) => { const id = React__namespace.useId(); return /* @__PURE__ */ jsxRuntime.jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: utils.cn("space-y-2", className), ...props }) }); }); FormItem.displayName = "FormItem"; var FormLabel = React__namespace.forwardRef(({ className, ...props }, ref) => { const { error, formItemId } = useFormField(); return /* @__PURE__ */ jsxRuntime.jsx( chunk4RFGFQC6_js.Label, { ref, className: utils.cn(error && "text-destructive", className), htmlFor: formItemId, ...props } ); }); FormLabel.displayName = "FormLabel"; var FormControl = React__namespace.forwardRef(({ ...props }, ref) => { const { error, formItemId, formDescriptionId, formMessageId } = useFormField(); return /* @__PURE__ */ jsxRuntime.jsx( reactSlot.Slot, { ref, id: formItemId, "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`, "aria-invalid": !!error, ...props } ); }); FormControl.displayName = "FormControl"; var FormDescription = React__namespace.forwardRef(({ className, ...props }, ref) => { const { formDescriptionId } = useFormField(); return /* @__PURE__ */ jsxRuntime.jsx( "p", { ref, id: formDescriptionId, className: utils.cn("text-[0.8rem] text-muted-foreground", className), ...props } ); }); FormDescription.displayName = "FormDescription"; var FormMessage = React__namespace.forwardRef(({ className, children, ...props }, ref) => { const { error, formMessageId } = useFormField(); const body = error ? String(error?.message) : children; if (!body) { return null; } return /* @__PURE__ */ jsxRuntime.jsx( "p", { ref, id: formMessageId, className: utils.cn("text-[0.8rem] font-medium text-destructive", className), ...props, children: body } ); }); FormMessage.displayName = "FormMessage"; var Form2 = ({ form, children, ...props }) => { return /* @__PURE__ */ jsxRuntime.jsx(Form, { ...form, children: /* @__PURE__ */ jsxRuntime.jsx("form", { ...props, onSubmit: props.onSubmit || ((e) => e.preventDefault()), children }) }); }; var FormItem2 = ({ itemProps, label, labelProps, description, descriptionProps, render, ...controllerProps }) => { return /* @__PURE__ */ jsxRuntime.jsx( FormField, { ...controllerProps, render: (params) => /* @__PURE__ */ jsxRuntime.jsxs(FormItem, { ...itemProps, children: [ label && /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { ...labelProps, children: label }), /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: render(params) }), description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { ...descriptionProps, children: description }), /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {}) ] }) } ); }; // src/form/index.tsx var Form3 = Form2; Object.assign(Form3, ReactHookForm__namespace); exports.Form = Form3; exports.FormItem = FormItem2;