react-hook-form-next-ui 1.3.30

package/README.md

@@ -0,0 +1,50 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default tseslint.config({
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
+- Optionally add `...tseslint.configs.stylisticTypeChecked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
+
+```js
+// eslint.config.js
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({
+  // Set the react version
+  settings: { react: { version: '18.3' } },
+  plugins: {
+    // Add the react plugin
+    react,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended rules
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+  },
+})
+```

package/dist/index.d.ts

@@ -0,0 +1,253 @@
+import { AnyObject } from 'yup';
+import { AutocompleteProps } from '@nextui-org/react';
+import { ButtonProps } from '@nextui-org/react';
+import { DatePickerProps } from '@nextui-org/react';
+import { DateValue } from '@nextui-org/react';
+import { default as default_2 } from 'react';
+import { InputProps } from '@nextui-org/react';
+import { LocaleObject } from 'yup';
+import { MixedSchema } from 'yup';
+import { ModalProps } from '@nextui-org/react';
+import { RadioGroupProps } from '@nextui-org/react';
+import { RadioProps } from '@nextui-org/react';
+import { ReactNode } from 'react';
+import { RegisterOptions } from 'react-hook-form';
+import { SelectProps } from '@nextui-org/react';
+import { TableColumnProps } from '@nextui-org/react';
+import { TableProps } from '@nextui-org/react';
+import { TextAreaProps } from '@nextui-org/react';
+import { TimeInputProps } from '@nextui-org/react';
+import { TimeInputValue } from '@nextui-org/react';
+
+declare const array: LocaleObject['array'];
+
+declare const boolean: LocaleObject['boolean'];
+
+declare interface ButtonModalFooter extends Omit<ButtonProps, "onClick"> {
+    onClick: () => void | Promise<void>;
+}
+
+export declare interface ColumnsTableProps extends Omit<TableColumnProps<any>, "children"> {
+    export?: boolean;
+    dateFormat?: IdateFormats;
+    renderRow?: ({ value, row }: ReturnRowTable) => ReactNode;
+}
+
+declare interface DataOptionsRHFAutocomplete {
+    key: string;
+    label: string;
+}
+
+declare interface DataOptionsRHFSelect {
+    key: string;
+    label: string;
+}
+
+export declare const DataTable: ({ rows, columns, showFilter, loading, keyRow, buttonExcelExport, exportName, skeletonSize, selectionMode, inputSearch, showHandlePaginate, defaultSelectedKeys, onSelect, defaultPaginateNumber, cellClass, excelExport, ...props }: DataTableProps) => default_2.JSX.Element;
+
+declare interface DataTableProps extends TableProps {
+    buttonExcelExport?: Omit<ButtonProps, "onClick">;
+    inputSearch?: InputProps;
+    excelExport?: boolean;
+    exportName?: string;
+    rows: any[];
+    columns: ColumnsTableProps[];
+    loading?: boolean;
+    showFilter?: boolean;
+    showHandlePaginate?: boolean;
+    onSelect?: (row: any) => void;
+    defaultPaginateNumber?: 5 | 10 | 15;
+    cellClass?: string;
+    skeletonSize?: number;
+    keyRow?: string;
+}
+
+declare const date: LocaleObject['date'];
+
+declare const dateMinMaxValidate: ({ minDate, maxDate }: DateMinMaxValueProps) => MixedSchema<DateValue | undefined, AnyObject, undefined, "">;
+
+declare interface DateMinMaxValueProps {
+    minDate?: string;
+    maxDate?: string;
+}
+
+declare const dualDateValidate: ({ endDate, startDate, range, type, maxEndDate, maxStartDate, minEndDate, minStartDate }: DualDateValidateProps) => {
+    startDateRule: MixedSchema<DateValue | undefined, AnyObject, undefined, "">;
+    endDateRule: MixedSchema<DateValue | undefined, AnyObject, undefined, "">;
+};
+
+declare interface DualDateValidateProps {
+    startDate: string;
+    endDate: string;
+    type?: TypeRangeDateValue;
+    range?: number;
+    maxStartDate?: string;
+    minStartDate?: string;
+    maxEndDate?: string;
+    minEndDate?: string;
+}
+
+declare const dualTimeValidate: ({ endTime, startTime, range, type }: DualTimeValidateProps) => {
+    startTimeRule: MixedSchema<TimeInputValue | undefined, AnyObject, undefined, "">;
+    endTimeRule: MixedSchema<TimeInputValue | undefined, AnyObject, undefined, "">;
+};
+
+declare interface DualTimeValidateProps {
+    startTime: string;
+    endTime: string;
+    range?: number;
+    type?: TypeRangeTimeValue;
+}
+
+declare type Icolor = "danger" | "default" | "primary" | "secondary" | "success" | "warning" | undefined;
+
+declare type IdateFormats = "DD/MM/YYYY" | "DD/MM/YYYY HH:mm" | "DD-MM-YYYY hh:mm" | "DD-MM-YYYY HH:mm" | "DD-MM-YYYY hh:mm";
+
+export declare const Layout: ({ children, title, color }: RHFNextUiLayoutProps) => default_2.JSX.Element;
+
+declare const mixed: LocaleObject['mixed'];
+
+export declare function Modal({ display, children, title, onCancel, cancelButton, acceptButton, ...props }: RHFNextUiModalProps): default_2.JSX.Element;
+
+declare const number: LocaleObject['number'];
+
+declare const object: LocaleObject['object'];
+
+export declare const Panel: ({ title, color, children }: RHFNextUiPanelProps) => default_2.JSX.Element;
+
+declare interface ReturnRowTable {
+    value: string;
+    row: any;
+}
+
+export declare const RHFAutocomplete: ({ onSelectionChange, defaultValue, name, data, rules, ...props }: RHFAutocompleteProps) => default_2.JSX.Element;
+
+declare interface RHFAutocompleteProps extends Omit<AutocompleteProps, "children"> {
+    name: string;
+    rules?: RegisterOptions;
+    data: DataOptionsRHFAutocomplete[];
+    defaultValue?: string;
+}
+
+export declare const RHFDate: ({ name, rules, defaultValue, ...props }: RHFDateProps) => default_2.JSX.Element;
+
+declare interface RHFDateProps extends DatePickerProps {
+    name: string;
+    rules?: RegisterOptions;
+}
+
+export declare const RHFDualDate: ({ startDate, endDate }: RHFDualDateProps) => default_2.JSX.Element;
+
+declare interface RHFDualDateProps {
+    startDate: RHFNextUiDate;
+    endDate: RHFNextUiDate;
+}
+
+export declare const RHFDualTime: ({ startTime, endTime }: RHFDualTimeProps) => default_2.JSX.Element;
+
+declare interface RHFDualTimeProps {
+    startTime: RHFTimeProps_2;
+    endTime: RHFTimeProps_2;
+}
+
+export declare const RHFInput: ({ defaultValue, rules, name, classNames, ...props }: RHFInputProps) => default_2.JSX.Element;
+
+declare interface RHFInputProps extends InputProps {
+    name: string;
+    rules?: RegisterOptions;
+}
+
+declare interface RHFNextUiDate extends DatePickerProps {
+    name: string;
+    rules?: RegisterOptions;
+}
+
+declare type RHFNextUiLayoutProps = {
+    children: ReactNode;
+    title: string;
+    color?: Icolor;
+};
+
+declare interface RHFNextUiModalProps extends ModalProps {
+    display: boolean;
+    onCancel: () => void;
+    title?: string;
+    cancelButton?: Omit<ButtonModalFooter, "onClick">;
+    acceptButton?: ButtonModalFooter;
+}
+
+declare interface RHFNextUiPanelProps {
+    title: string;
+    children: ReactNode;
+    color?: Icolor;
+}
+
+export declare const RHFRadioGroup: ({ radio, data, rules, name, defaultValue, ...props }: RHFRadioGroupProps) => default_2.JSX.Element;
+
+declare interface RHFRadioGroupDataProps {
+    key: string;
+    label: string;
+}
+
+declare interface RHFRadioGroupProps extends RadioGroupProps {
+    rules?: RegisterOptions;
+    radio?: RadioProps;
+    data: RHFRadioGroupDataProps[];
+    name: string;
+}
+
+export declare const RHFSelect: ({ name, data, rules, defaultOptions, ...props }: RHFSelectProps) => default_2.JSX.Element;
+
+declare interface RHFSelectProps extends Omit<SelectProps, "children"> {
+    data: DataOptionsRHFSelect[];
+    name: string;
+    rules?: RegisterOptions;
+    defaultOptions?: string;
+}
+
+export declare const RHFTextArea: ({ defaultValue, rules, name, classNames, ...props }: RHFTextAreaProps) => default_2.JSX.Element;
+
+declare interface RHFTextAreaProps extends TextAreaProps {
+    name: string;
+    rules?: RegisterOptions;
+}
+
+export declare const RHFTime: ({ name, rules, defaultValue, ...props }: RHFTimeProps) => default_2.JSX.Element;
+
+declare interface RHFTimeProps extends TimeInputProps {
+    name: string;
+    rules?: RegisterOptions;
+}
+
+declare interface RHFTimeProps_2 extends TimeInputProps {
+    rules?: RegisterOptions;
+    name: string;
+}
+
+declare const string: LocaleObject['string'];
+
+declare type TypeRangeDateValue = "days" | "months" | "years";
+
+declare type TypeRangeTimeValue = "hours" | "minutes";
+
+export declare namespace validation {
+    export {
+        dualDateValidate,
+        dateMinMaxValidate,
+        dualTimeValidate
+    }
+}
+
+export declare namespace yupEs {
+    export {
+        mixed,
+        string,
+        number,
+        date,
+        boolean,
+        object,
+        array
+    }
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1,824 @@
+import e, { useState as $, useEffect as L, useCallback as k, useMemo as w } from "react";
+import { Table as de, TableHeader as fe, TableColumn as pe, TableBody as ge, TableRow as Ee, TableCell as be, Skeleton as Fe, Button as T, Pagination as Re, Input as he, Divider as ve, Card as Ne, CardHeader as Ye, CardBody as Ie, DatePicker as J, Select as Te, SelectItem as Ve, TimeInput as Q, Textarea as Pe, Autocomplete as He, AutocompleteItem as je, RadioGroup as Oe, Radio as _e, useDisclosure as Le, Modal as Ae, ModalContent as qe, ModalHeader as ze, ModalBody as Be, ModalFooter as Ue } from "@nextui-org/react";
+import { parse as S, isAfter as xe, isEqual as We, diffYears as Ge, diffMonths as Ze, diffDays as Je, diffHours as Qe, diffSeconds as Xe, format as V } from "@formkit/tempo";
+import { useFormContext as M, Controller as x, useWatch as A } from "react-hook-form";
+import { printValue as ie, mixed as _ } from "yup";
+const Ke = ({ size: t, columns: n }) => /* @__PURE__ */ e.createElement(de, { "aria-label": "Tabla de resultados" }, /* @__PURE__ */ e.createElement(fe, null, n.map(
+  (a) => /* @__PURE__ */ e.createElement(pe, { ...n, key: a.key }, a.title)
+)), /* @__PURE__ */ e.createElement(ge, null, Array.from(
+  { length: t ?? 10 },
+  (a, l) => /* @__PURE__ */ e.createElement(Ee, { key: l }, () => /* @__PURE__ */ e.createElement(be, null, /* @__PURE__ */ e.createElement(Fe, { className: "h-5 w-4/5 rounded-lg" })))
+))), et = (t, n) => {
+  const [a, l] = $(t);
+  return L(() => {
+    const s = setTimeout(() => {
+      l(t);
+    }, n);
+    return () => {
+      clearTimeout(s);
+    };
+  }, [t, n]), a;
+};
+async function tt({ data: t, columns: n = [], name: a }) {
+  try {
+    const { utils: l, writeFile: s } = await import("xlsx"), c = l.json_to_sheet(t);
+    l.sheet_add_aoa(c, [n]);
+    const o = l.book_new();
+    l.book_append_sheet(o, c), s(o, `${a}.xlsx`);
+  } catch (l) {
+    console.warn("debe tener instalado la libreria xlsx", l);
+  }
+}
+const at = () => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "size-4" }, /* @__PURE__ */ e.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 4.5v15m7.5-7.5h-15" })), nt = () => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "size-4" }, /* @__PURE__ */ e.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 12H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" })), xt = ({
+  rows: t,
+  columns: n,
+  showFilter: a = !0,
+  loading: l,
+  keyRow: s = "id",
+  buttonExcelExport: c,
+  exportName: o,
+  skeletonSize: r,
+  selectionMode: d,
+  inputSearch: f,
+  showHandlePaginate: u = !0,
+  defaultSelectedKeys: i,
+  onSelect: b,
+  defaultPaginateNumber: B = 10,
+  cellClass: U,
+  excelExport: X,
+  ...H
+}) => {
+  const [j, W] = $(""), [F, ye] = $(B), [y, R] = $(1), [C, K] = $(/* @__PURE__ */ new Set()), [N, De] = $(H.sortDescriptor ?? {}), [we, Me] = $(!1), ee = !!et(j, 500), te = k((m) => {
+    if (K(m), !b || d === "none") return;
+    let g = [];
+    return d === "single" ? g = t.find((p) => p[s] == [...m][0]) : m === "all" ? (g = t, K(new Set(t.map((p) => p[s])))) : g = t.filter((p) => [...m].includes(p[s])), b(g);
+  }, [b, t, d, s]);
+  L(() => {
+    if (!we) return Me(!0);
+    let m = /* @__PURE__ */ new Set();
+    if (i === "all")
+      m = "all";
+    else if (i && [...i].length > 0) {
+      const g = t.map((h) => h[s]), p = [...i].filter((h) => g.includes(h));
+      m = new Set(p);
+    }
+    te(m);
+  }, [i, t, s]);
+  const G = w(() => {
+    let m = [...t];
+    return ee && (m = m.filter(
+      (g) => Object.values(g).some(
+        (p, h) => {
+          const E = Object.keys(g)[h];
+          return !n.map((v) => v.key).includes(E) || p == null || !p ? !1 : p.toString().toLowerCase().includes(j.toLowerCase());
+        }
+      )
+    )), m;
+  }, [j, ee, t, n]), Y = Math.ceil(G.length / F) || 1, ae = w(() => [...G].sort((m, g) => {
+    let p = m[N.column], h = g[N.column];
+    const E = n.find((v) => v.key === N.column);
+    if (E != null && E.dateFormat)
+      try {
+        const v = S(p, E.dateFormat), O = S(h, E.dateFormat), I = xe(v, O);
+        p = I ? 1 : 0, h = I ? 0 : 1;
+      } catch (v) {
+        console.warn("You need @formkit/tempo", v);
+      }
+    if (p === h) return 0;
+    const D = p > h ? 1 : -1;
+    return N.direction === "descending" ? -D : D;
+  }), [N, G, n]), Ce = w(() => {
+    const m = (y - 1) * F, g = m + F;
+    return ae.slice(m, g);
+  }, [ae, y, F]), ne = k(() => {
+    W(""), R(1);
+  }, []), le = k(() => {
+    y < Y && R(y + 1);
+  }, [y, Y]), se = k(() => {
+    y > 1 && R(y - 1);
+  }, [y]), oe = k((m) => {
+    ye(Number(m.target.value)), R(1);
+  }, []), re = k((m) => {
+    m ? (W(m), R(1)) : W("");
+  }, []), ke = k((m, g) => {
+    const p = n.find((E) => E.key === g);
+    if (p.renderRow)
+      return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", null, p.renderRow({
+        value: m[g],
+        row: m
+      })), m.subRows && m.subRows.length > 0 && /* @__PURE__ */ e.createElement("div", { "data-row-key": m[s], style: { display: "none" } }, m.subRows.map(
+        (E, D) => p.renderRow && /* @__PURE__ */ e.createElement("div", { key: D }, p.renderRow({
+          value: E[g],
+          row: E
+        }))
+      )));
+    const h = () => {
+      document.querySelectorAll(`div[data-row-key="${m[s]}"]`).forEach((D) => {
+        const v = D;
+        if (!v || !v.style) return;
+        const O = v.style.display;
+        v.style.display = O === "none" ? "block" : "none";
+        const I = document.querySelector(`span[data-icon-expand-table="${m[s]}"]`), Z = document.querySelector(`span[data-icon-collapse-table="${m[s]}"]`);
+        !I || !I.style || !Z || !Z.style || (I.style.display = O !== "none" ? "block" : "none", Z.style.display = O === "none" ? "block" : "none");
+      });
+    };
+    return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("p", { title: m[g] }, m.subRows && m.subRows.length > 0 && n[0].key === g && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
+      T,
+      {
+        type: "button",
+        onClick: h,
+        size: "sm",
+        isIconOnly: !0,
+        className: "bg-transparent",
+        style: {
+          marginLeft: "-11px",
+          marginTop: "-12px",
+          marginBottom: "-6px"
+        }
+      },
+      /* @__PURE__ */ e.createElement("span", { "data-icon-expand-table": m[s], className: "text-emerald-500" }, /* @__PURE__ */ e.createElement(at, null)),
+      /* @__PURE__ */ e.createElement("span", { "data-icon-collapse-table": m[s], style: { display: "none" }, className: "text-rose-500" }, /* @__PURE__ */ e.createElement(nt, null))
+    )), m[g]), m.subRows && m.subRows.length > 0 && /* @__PURE__ */ e.createElement("div", { "data-row-key": m[s], style: { display: "none" } }, m.subRows.map((E, D) => /* @__PURE__ */ e.createElement(
+      "p",
+      {
+        title: E[g],
+        key: D,
+        className: n[0].key === g ? "ps-5" : ""
+      },
+      E[g]
+    ))));
+  }, [n, s]), ce = k(() => {
+    const m = n.filter((p) => p.export).map((p) => p.key), g = t.map((p) => {
+      const h = {};
+      return Object.keys(p).forEach((E) => {
+        m.includes(E) && (h[E] = typeof p[E] == "boolean" ? p[E] ? "Activo" : "Inactivo" : p[E]);
+      }), h;
+    });
+    tt({
+      data: g,
+      name: o ?? (/* @__PURE__ */ new Date()).toISOString(),
+      columns: n.filter((p) => p.export).map((p) => {
+        var h;
+        return ((h = p.title) == null ? void 0 : h.toString()) ?? "";
+      })
+    });
+  }, [n, t, o]), $e = w(() => /* @__PURE__ */ e.createElement("div", { className: "py-2 px-2 flex justify-between items-center" }, /* @__PURE__ */ e.createElement("span", { className: "w-[30%] text-small text-default-400" }, d !== "none" && ([...C].length > 0 || C === "all") && /* @__PURE__ */ e.createElement(e.Fragment, null, C !== "all" && [...C].length, C === "all" ? "Todos los datos seleccionados" : [...C].length === 1 ? " dato seleccionado" : " datos seleccionados")), /* @__PURE__ */ e.createElement(
+    Re,
+    {
+      isCompact: !0,
+      showControls: !0,
+      showShadow: !0,
+      page: y,
+      total: Y,
+      onChange: R,
+      color: H.color
+    }
+  ), /* @__PURE__ */ e.createElement("div", { className: "hidden sm:flex w-[30%] justify-end gap-2" }, /* @__PURE__ */ e.createElement(T, { isDisabled: Y === 1, size: "sm", variant: "flat", onPress: se }, "Atrás"), /* @__PURE__ */ e.createElement(T, { isDisabled: Y === 1, size: "sm", variant: "flat", onPress: le }, "Siguiente"))), [y, Y, le, se, C, d, H.color]), Se = w(() => /* @__PURE__ */ e.createElement("div", { className: "flex flex-col gap-4 relative" }, /* @__PURE__ */ e.createElement("div", { className: "flex justify-between gap-3 items-end" }, a && /* @__PURE__ */ e.createElement(
+    he,
+    {
+      ...f,
+      className: (f == null ? void 0 : f.className) ?? "w-full sm:max-w-[44%]",
+      placeholder: (f == null ? void 0 : f.placeholder) ?? "Buscar...",
+      value: j,
+      onClear: () => ne(),
+      onValueChange: re,
+      isClearable: !0
+    }
+  ), (X || c) && /* @__PURE__ */ e.createElement(
+    T,
+    {
+      ...c,
+      type: "button",
+      onClick: () => ce()
+    },
+    (c == null ? void 0 : c.name) ?? "Descargar"
+  )), /* @__PURE__ */ e.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ e.createElement("span", { className: "text-default-400 text-small" }, "Total ", t.length, " ", t.length === 1 ? "dato" : "datos"), u && /* @__PURE__ */ e.createElement("label", { className: "flex items-center text-default-400 text-small" }, "Filas por página:", /* @__PURE__ */ e.createElement(
+    "select",
+    {
+      className: "bg-transparent outline-none text-default-400 text-small",
+      onChange: oe,
+      defaultValue: F
+    },
+    /* @__PURE__ */ e.createElement("option", { value: "5" }, "5"),
+    /* @__PURE__ */ e.createElement("option", { value: "10" }, "10"),
+    /* @__PURE__ */ e.createElement("option", { value: "15" }, "15")
+  )))), [
+    j,
+    t.length,
+    ne,
+    oe,
+    X,
+    f,
+    re,
+    F,
+    a,
+    u,
+    ce,
+    c
+  ]);
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, l ? /* @__PURE__ */ e.createElement(Ke, { columns: n, size: r }) : /* @__PURE__ */ e.createElement(
+    de,
+    {
+      ...H,
+      isHeaderSticky: !0,
+      "aria-label": H["aria-label"] ?? "Tabla de resultados",
+      bottomContent: t.length > 0 ? $e : void 0,
+      bottomContentPlacement: "outside",
+      topContentPlacement: "outside",
+      topContent: t.length > 0 ? Se : void 0,
+      sortDescriptor: N,
+      onSortChange: De,
+      selectedKeys: C,
+      onSelectionChange: te,
+      selectionMode: d
+    },
+    /* @__PURE__ */ e.createElement(fe, { columns: n }, (m) => /* @__PURE__ */ e.createElement(pe, { ...m, children: void 0, key: m.key })),
+    /* @__PURE__ */ e.createElement(ge, { emptyContent: "No hay datos.", items: Ce }, (m) => /* @__PURE__ */ e.createElement(Ee, { key: m[s] }, (g) => /* @__PURE__ */ e.createElement(be, { className: U ?? "whitespace-nowrap overflow-hidden overflow-ellipsis max-w-[150px]" }, ke(m, g))))
+  ));
+}, yt = ({ children: t, title: n, color: a = "primary" }) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("header", { className: `bg-${a} w-full text-center text-white py-5` }, /* @__PURE__ */ e.createElement("h1", { className: "font-bold text-lg" }, n)), /* @__PURE__ */ e.createElement(ve, null), /* @__PURE__ */ e.createElement("main", { className: "p-5 2xl:px-16 2xl:py-5 mx-auto" }, t)), Dt = ({ title: t, color: n = "primary", children: a }) => /* @__PURE__ */ e.createElement(Ne, { className: "mb-5" }, /* @__PURE__ */ e.createElement(Ye, { className: `bg-${n} px-5 text-white` }, t), /* @__PURE__ */ e.createElement(ve, null), /* @__PURE__ */ e.createElement(Ie, { className: "p-5" }, a)), wt = ({ name: t, rules: n, defaultValue: a = null, ...l }) => {
+  const { control: s } = M();
+  return /* @__PURE__ */ e.createElement(
+    x,
+    {
+      control: s,
+      name: t,
+      rules: n,
+      defaultValue: a,
+      render: ({ field: c, formState: { errors: o } }) => {
+        var r;
+        return /* @__PURE__ */ e.createElement(
+          J,
+          {
+            ...l,
+            ...c,
+            value: c.value,
+            errorMessage: o[t] ? (r = o[t]) == null ? void 0 : r.message : "",
+            isInvalid: !!o[t]
+          }
+        );
+      }
+    }
+  );
+}, Mt = ({ startDate: t, endDate: n }) => {
+  const { control: a, trigger: l, getValues: s, formState: c } = M(), o = w(() => t.name, [t.name]), r = w(() => n.name, [n.name]), d = A({ control: a, name: [o] }), f = A({ control: a, name: [r] });
+  return L(() => {
+    if (!c.isSubmitted) return;
+    const u = s();
+    u[o] && u[r] && (l([o]), l([r]));
+  }, [f, d, l, s, c.isSubmitted, r, o]), /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
+    x,
+    {
+      control: a,
+      name: o,
+      rules: t.rules,
+      defaultValue: t.defaultValue ?? null,
+      render: ({ field: u, formState: { errors: i } }) => {
+        var b;
+        return /* @__PURE__ */ e.createElement(
+          J,
+          {
+            ...t,
+            ...u,
+            value: u.value,
+            errorMessage: i[o] ? (b = i[o]) == null ? void 0 : b.message : "",
+            isInvalid: !!i[o]
+          }
+        );
+      }
+    }
+  ), /* @__PURE__ */ e.createElement(
+    x,
+    {
+      control: a,
+      name: r,
+      rules: n.rules,
+      defaultValue: n.defaultValue ?? null,
+      render: ({ field: u, formState: { errors: i } }) => {
+        var b;
+        return /* @__PURE__ */ e.createElement(
+          J,
+          {
+            ...n,
+            ...u,
+            value: u.value,
+            errorMessage: i[r] ? (b = i[r]) == null ? void 0 : b.message : "",
+            isInvalid: !!i[r]
+          }
+        );
+      }
+    }
+  ));
+}, Ct = ({ defaultValue: t = "", rules: n, name: a, classNames: l, ...s }) => {
+  const { control: c } = M();
+  return /* @__PURE__ */ e.createElement(
+    x,
+    {
+      control: c,
+      defaultValue: t,
+      name: a,
+      rules: n,
+      render: ({ field: o, formState: { errors: r } }) => {
+        var d;
+        return /* @__PURE__ */ e.createElement(
+          he,
+          {
+            ...s,
+            ...o,
+            isInvalid: !!r[a],
+            errorMessage: r[a] ? (d = r[a]) == null ? void 0 : d.message : "",
+            classNames: {
+              ...l,
+              input: `${(l == null ? void 0 : l.input) || ""} ${r[a] ? "placeholder:text-danger" : ""}`
+            }
+          }
+        );
+      }
+    }
+  );
+}, kt = ({ name: t, data: n, rules: a, defaultOptions: l = "", ...s }) => {
+  const { control: c } = M();
+  return /* @__PURE__ */ e.createElement(
+    x,
+    {
+      control: c,
+      rules: a,
+      name: t,
+      defaultValue: l,
+      render: ({ field: o, formState: { errors: r } }) => {
+        var d;
+        return /* @__PURE__ */ e.createElement(
+          Te,
+          {
+            ...s,
+            ...o,
+            items: n,
+            selectedKeys: new Set(o.value ? o.value.split(",") : []),
+            errorMessage: r[t] ? (d = r[t]) == null ? void 0 : d.message : "",
+            isInvalid: !!r[t]
+          },
+          (f) => /* @__PURE__ */ e.createElement(Ve, { key: f.key }, f.label)
+        );
+      }
+    }
+  );
+}, $t = ({ name: t, rules: n, defaultValue: a, ...l }) => {
+  const { control: s } = M();
+  return /* @__PURE__ */ e.createElement(
+    x,
+    {
+      control: s,
+      name: t,
+      rules: n,
+      defaultValue: a ?? null,
+      render: ({ field: c, formState: { errors: o } }) => {
+        var r;
+        return /* @__PURE__ */ e.createElement(
+          Q,
+          {
+            ...l,
+            ...c,
+            value: c.value,
+            isInvalid: !!o[t],
+            errorMessage: o[t] ? (r = o[t]) == null ? void 0 : r.message : ""
+          }
+        );
+      }
+    }
+  );
+}, St = ({ startTime: t, endTime: n }) => {
+  const { control: a, trigger: l, getValues: s, formState: c } = M(), o = w(() => t.name, [t.name]), r = w(() => n.name, [n.name]), d = A({ control: a, name: [o] }), f = A({ control: a, name: [r] });
+  return L(() => {
+    if (!c.isSubmitted) return;
+    const u = s();
+    u[o] && u[r] && (l([o]), l([r]));
+  }, [f, d, l, s, c.isSubmitted, r, o]), /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
+    x,
+    {
+      control: a,
+      name: o,
+      rules: t.rules,
+      defaultValue: t.defaultValue ?? null,
+      render: ({ field: u, formState: { errors: i } }) => {
+        var b;
+        return /* @__PURE__ */ e.createElement(
+          Q,
+          {
+            ...t,
+            ...u,
+            value: u.value,
+            isInvalid: !!i[o],
+            errorMessage: i[o] ? (b = i[o]) == null ? void 0 : b.message : ""
+          }
+        );
+      }
+    }
+  ), /* @__PURE__ */ e.createElement(
+    x,
+    {
+      control: a,
+      name: r,
+      rules: n.rules,
+      defaultValue: n.defaultValue ?? null,
+      render: ({ field: u, formState: { errors: i } }) => {
+        var b;
+        return /* @__PURE__ */ e.createElement(
+          Q,
+          {
+            ...n,
+            ...u,
+            value: u.value,
+            isInvalid: !!i[r],
+            errorMessage: i[r] ? (b = i[r]) == null ? void 0 : b.message : ""
+          }
+        );
+      }
+    }
+  ));
+}, Ft = ({ defaultValue: t = "", rules: n, name: a, classNames: l, ...s }) => {
+  const { control: c } = M();
+  return /* @__PURE__ */ e.createElement(
+    x,
+    {
+      control: c,
+      defaultValue: t,
+      name: a,
+      rules: n,
+      render: ({ field: o, formState: { errors: r } }) => {
+        var d;
+        return /* @__PURE__ */ e.createElement(
+          Pe,
+          {
+            ...s,
+            ...o,
+            isInvalid: !!r[a],
+            errorMessage: r[a] ? (d = r[a]) == null ? void 0 : d.message : "",
+            classNames: {
+              ...l,
+              input: `${(l == null ? void 0 : l.input) || ""} ${r[a] ? "placeholder:text-danger" : ""}`
+            }
+          }
+        );
+      }
+    }
+  );
+}, Rt = ({ onSelectionChange: t, defaultValue: n, name: a, data: l, rules: s, ...c }) => {
+  const { control: o } = M(), r = (d) => {
+    t && t(d);
+  };
+  return /* @__PURE__ */ e.createElement(
+    x,
+    {
+      control: o,
+      defaultValue: n,
+      name: a,
+      rules: s,
+      render: ({ field: d, formState: { errors: f } }) => {
+        var u;
+        return /* @__PURE__ */ e.createElement(
+          He,
+          {
+            ...c,
+            ...d,
+            selectedKey: d.value ?? "",
+            defaultItems: l,
+            onSelectionChange: (i) => {
+              d.onChange(i), r(i);
+            },
+            isInvalid: !!f[a],
+            errorMessage: f[a] ? (u = f[a]) == null ? void 0 : u.message : "",
+            inputProps: {
+              classNames: {
+                input: f[a] ? "placeholder:text-danger" : ""
+              }
+            }
+          },
+          l.map((i) => /* @__PURE__ */ e.createElement(je, { key: i.key, value: i.key }, i.label))
+        );
+      }
+    }
+  );
+}, Nt = ({ radio: t, data: n, rules: a, name: l, defaultValue: s, ...c }) => {
+  const { control: o } = M();
+  return /* @__PURE__ */ e.createElement(
+    x,
+    {
+      control: o,
+      rules: a,
+      name: l,
+      defaultValue: s ?? "",
+      render: ({ field: r, formState: { errors: d } }) => {
+        var f;
+        return /* @__PURE__ */ e.createElement(
+          Oe,
+          {
+            ...r,
+            ...c,
+            isInvalid: !!d[l],
+            errorMessage: d[l] ? (f = d[l]) == null ? void 0 : f.message : ""
+          },
+          n.map((u, i) => /* @__PURE__ */ e.createElement(
+            _e,
+            {
+              ...t,
+              key: i,
+              value: u.key
+            },
+            u.label
+          ))
+        );
+      }
+    }
+  );
+};
+function Yt({
+  display: t,
+  children: n,
+  title: a,
+  onCancel: l,
+  cancelButton: s,
+  acceptButton: c,
+  ...o
+}) {
+  const { isOpen: r, onOpen: d, onOpenChange: f } = Le(), [u, i] = $(!1);
+  L(() => {
+    t && d();
+  }, [t, d]);
+  const b = () => {
+    f(), l();
+  }, B = async () => {
+    c != null && c.onClick && (i(!0), await c.onClick(), i(!1));
+  };
+  return /* @__PURE__ */ e.createElement(Ae, { isOpen: r, onOpenChange: b, ...o }, /* @__PURE__ */ e.createElement(qe, null, (U) => /* @__PURE__ */ e.createElement(e.Fragment, null, a && /* @__PURE__ */ e.createElement(ze, { className: "flex flex-col gap-1" }, a), /* @__PURE__ */ e.createElement(Be, null, n), /* @__PURE__ */ e.createElement(Ue, null, s && /* @__PURE__ */ e.createElement(
+    T,
+    {
+      ...s,
+      isDisabled: u,
+      onPress: () => {
+        U(), l();
+      }
+    },
+    (s == null ? void 0 : s.name) ?? "Cerrar"
+  ), c && /* @__PURE__ */ e.createElement(
+    T,
+    {
+      ...c,
+      isLoading: u,
+      onClick: () => B()
+    },
+    c.name ?? "Aceptar"
+  )))));
+}
+const lt = {
+  default: "Este valor no es válido.",
+  required: "Este campo es obligatorio",
+  defined: "Este campo debe definirse",
+  notNull: "Este campo no puede ser nulo",
+  oneOf: "Este campo debe ser uno de los siguientes valores: ${values}",
+  notOneOf: "Este campo no debe ser uno de los siguientes valores: ${values}",
+  notType: ({ type: t, value: n, originalValue: a }) => {
+    const l = a != null && a !== n;
+    let s = `Debe ser un \`${t}\` Tipo, Pero el valor final fue: \`${ie(n, !0)}\`` + (l ? ` (Eche el valor \`${ie(a, !0)}\`).` : ".");
+    return n === null && (s += '\n Si "nulo" está destinado a ser un valor vacío, asegúrese de marcar el esquema como `.nullable()`'), s;
+  }
+}, st = {
+  length: "Debe ser exactamente ${length} caracteres",
+  min: "Debe ser al menos ${min} caracteres",
+  max: "Debe ser como máximo ${max} caracteres",
+  matches: "Este valor no es válido",
+  email: "Debe ser un correo electrónico válido",
+  url: "Debe ser una URL válida",
+  uuid: "Debe ser un UUID válido",
+  trim: "No debe tener espacios vacios",
+  lowercase: "Debe ser un texto en minúscula",
+  uppercase: "Debe ser un texto en mayúscula"
+}, ot = {
+  min: "Debe ser mayor o igual a ${min}",
+  max: "Debe ser menor o igual a ${max}",
+  lessThan: "Debe ser menor que ${less}",
+  moreThan: "Debe ser mayor que ${more}",
+  positive: "Debe ser un número positivo",
+  negative: "Debe ser un número negativo",
+  integer: "Debe ser un entero"
+}, rt = {
+  min: "El campo debe ser más tarde que ${min}",
+  max: "El campo debe estar antes de ${max}"
+}, ct = {
+  isValue: "El campo debe ser ${value}"
+}, it = {
+  noUnknown: "El campo no puede tener claves no especificadas en la forma del objeto"
+}, mt = {
+  min: "El campo debe tener al menos ${min} elementos",
+  max: "El campo debe tener menos o igual a los elementos ${max}",
+  length: "Debe tener ${length} elementos"
+}, It = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  array: mt,
+  boolean: ct,
+  date: rt,
+  mixed: lt,
+  number: ot,
+  object: it,
+  string: st
+}, Symbol.toStringTag, { value: "Module" })), me = ({ value: t, context: n, name: a, range: l, rangeDate: s, type: c }) => {
+  const o = n.parent[a];
+  if (!o || !t || !l || l === 0 || !s) return !0;
+  const r = S(c == "min" ? o.toString() : t.toString()), d = S(c == "max" ? o.toString() : t.toString());
+  let f;
+  switch (s) {
+    case "days":
+      f = Je(r, d);
+      break;
+    case "months":
+      f = Ze(r, d);
+      break;
+    case "years":
+      f = Ge(r, d);
+      break;
+    default:
+      f = 0;
+      break;
+  }
+  return f < l;
+}, q = ({ context: t, name: n, type: a, value: l }) => {
+  const s = t.parent[n];
+  if (!s || !l) return !0;
+  const c = l.compare(s);
+  return a == "max" ? c >= 0 : c <= 0;
+}, P = ({ value: t, date: n, type: a }) => {
+  if (!t || !n) return !0;
+  let l, s;
+  try {
+    l = S(n), s = S(t.toString());
+  } catch {
+    return !1;
+  }
+  if (We(s, l)) return !0;
+  const c = xe(s, l);
+  return a === "min" ? c : !c;
+}, ue = ({ value: t, context: n, name: a, range: l, rangeDate: s, type: c }) => {
+  const o = n.parent[a];
+  if (!o || !t || !l || l === 0 || !s) return !0;
+  const r = t.toString(), d = o.toString(), f = S(c == "max" ? d : r, "HH:mm:ss"), u = S(c == "min" ? d : r, "HH:mm:ss");
+  let i = 0;
+  return s === "hours" ? i = Qe(u, f) : i = Xe(u, f), i < l;
+}, z = (t, n) => {
+  switch (t) {
+    case "days":
+      return n === 1 ? "El rango es de 1 dia" : `El rango es de ${n} dias`;
+    case "months":
+      return n === 1 ? "El rango es de 1 mes" : `El rango es de ${n} meses`;
+    case "years":
+      return n === 1 ? "El rango es de 1 año" : `El rango es de ${n} años`;
+    case "hours":
+      return n === 1 ? "El rango es de 1 hora" : `El rango es de ${n} horas`;
+    case "minutes":
+      return n === 1 ? "El rango es de 1 minuto" : `El rango es de ${n} minutos`;
+    default:
+      return "Custom Test";
+  }
+}, ut = ({
+  endDate: t,
+  startDate: n,
+  range: a = 0,
+  type: l,
+  maxEndDate: s,
+  maxStartDate: c,
+  minEndDate: o,
+  minStartDate: r
+}) => {
+  const d = _().test(
+    "Menor",
+    "Este campo debe ser menor a la fecha final",
+    (u, i) => q({ value: u, context: i, name: t, type: "min" })
+  ).when([], {
+    is: a && a > 0 && l,
+    then: (u) => u.test(
+      "Rango de tiempo",
+      z(l, a),
+      (i, b) => me({
+        context: b,
+        value: i,
+        range: a,
+        name: t,
+        rangeDate: l,
+        type: "min"
+      })
+    )
+  }).when([], {
+    is: c,
+    then: (u) => u.test(
+      "Max Date",
+      `Fecha maxima ${V(c, "DD/MM/YYYY")}`,
+      (i) => P({ value: i, date: c, type: "max" })
+    )
+  }).when([], {
+    is: r,
+    then: (u) => u.test(
+      "Min Date",
+      `Fecha minima ${V(r, "DD/MM/YYYY")}`,
+      (i) => P({ value: i, date: r, type: "min" })
+    )
+  }), f = _().test(
+    "Mayor",
+    "Este campo debe ser mayor a la fecha inicial",
+    (u, i) => q({ value: u, context: i, name: n, type: "max" })
+  ).when([], {
+    is: a && a > 0 && l,
+    then: (u) => u.test(
+      "Rango de tiempo",
+      z(l, a),
+      (i, b) => me({
+        context: b,
+        value: i,
+        range: a,
+        name: n,
+        rangeDate: l,
+        type: "max"
+      })
+    )
+  }).when([], {
+    is: s,
+    then: (u) => u.test(
+      "Max Date",
+      `Fecha maxima ${V(s, "DD/MM/YYYY")}`,
+      (i) => P({ value: i, date: s, type: "max" })
+    )
+  }).when([], {
+    is: o,
+    then: (u) => u.test(
+      "Min Date",
+      `Fecha minima ${V(o, "DD/MM/YYYY")}`,
+      (i) => P({ value: i, date: o, type: "min" })
+    )
+  });
+  return { startDateRule: d, endDateRule: f };
+}, dt = ({ minDate: t, maxDate: n }) => _().test(
+  "Min Date",
+  `Fecha minima ${V(t, "DD/MM/YYYY")}`,
+  (a) => P({ value: a, date: t, type: "min" })
+).test(
+  "Max Date",
+  `Fecha maxima ${V(n, "DD/MM/YYYY")}`,
+  (a) => P({ value: a, date: n, type: "max" })
+), ft = ({ endTime: t, startTime: n, range: a = 0, type: l }) => {
+  const s = _().test(
+    "Menor",
+    "Este campo debe ser menor a la hora final",
+    (o, r) => q({ value: o, context: r, name: t, type: "min" })
+  ).when([], {
+    is: a && a > 0 && l,
+    then: (o) => o.test(
+      "Rango de tiempo",
+      z(l, a),
+      (r, d) => ue({
+        value: r,
+        context: d,
+        name: t,
+        type: "min",
+        range: a,
+        rangeDate: l
+      })
+    )
+  }), c = _().test(
+    "Mayor",
+    "Este campo debe ser mayor a la hora inicial",
+    (o, r) => q({ value: o, context: r, name: n, type: "max" })
+  ).when([], {
+    is: a && a > 0 && l,
+    then: (o) => o.test(
+      "Rango de tiempo",
+      z(l, a),
+      (r, d) => ue({
+        value: r,
+        context: d,
+        name: n,
+        type: "max",
+        range: a,
+        rangeDate: l
+      })
+    )
+  });
+  return { startTimeRule: s, endTimeRule: c };
+}, Tt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  dateMinMaxValidate: dt,
+  dualDateValidate: ut,
+  dualTimeValidate: ft
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  xt as DataTable,
+  yt as Layout,
+  Yt as Modal,
+  Dt as Panel,
+  Rt as RHFAutocomplete,
+  wt as RHFDate,
+  Mt as RHFDualDate,
+  St as RHFDualTime,
+  Ct as RHFInput,
+  Nt as RHFRadioGroup,
+  kt as RHFSelect,
+  Ft as RHFTextArea,
+  $t as RHFTime,
+  Tt as validation,
+  It as yupEs
+};

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "react-hook-form-next-ui",
+  "type": "module",
+  "version": "1.3.30",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "keywords": [
+    "tailwind react components",
+    "nextui",
+    "react-hook-form-next-ui",
+    "react-components",
+    "components-react",
+    "nextui-components-rhf",
+    "RHF",
+    "react-hook-form",
+    "React Hook Form"
+  ],
+  "author": "Nicolas Chamorro Giron",
+  "description": "React Components with React Hook Form and NextUI",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.0",
+    "@nextui-org/react": "^2.4.6",
+    "@hookform/resolvers": "^3.9.0",
+    "@formkit/tempo": "^0.1.2",
+    "framer-motion": "^11.5.4",
+    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.0",
+    "@faker-js/faker": "^8.4.1",
+    "@formkit/tempo": "^0.1.2",
+    "@hookform/devtools": "^4.3.1",
+    "@hookform/resolvers": "^3.9.0",
+    "@nextui-org/react": "^2.4.6",
+    "@types/node": "^22.5.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.9.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "framer-motion": "^11.5.4",
+    "globals": "^15.9.0",
+    "postcss": "^8.4.41",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.0",
+    "tailwindcss": "^3.4.10",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.1",
+    "vite": "^5.4.1",
+    "vite-bundle-analyzer": "^0.10.6",
+    "vite-plugin-dts": "^4.2.1",
+    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz",
+    "yup": "^1.4.0"
+  }
+}