@gustavo-valsechi/client 1.4.237 → 1.4.239

package/dist/src/components/types/form/index.js

@@ -115,7 +115,7 @@ function Form(props) {
       ComponentType,
       {
         ...import_lodash.default.omit(data, ["validation"]),
-        id: `input-${data.name}`,
+        id: `input[${data.name}]`,
         type: component2 ? void 0 : data.type,
         error: (_a = errors[data.name]) == null ? void 0 : _a.message,
         register,

package/dist/src/components/types/form/index.mjs

@@ -81,7 +81,7 @@ function Form(props) {
       ComponentType,
       {
         ..._.omit(data, ["validation"]),
-        id: `input-${data.name}`,
+        id: `input[${data.name}]`,
         type: component2 ? void 0 : data.type,
         error: (_a = errors[data.name]) == null ? void 0 : _a.message,
         register,

package/dist/src/components/types/form/types/button/index.js

@@ -54,7 +54,7 @@ function Button(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_styles.Container,
     {
-      id: `button-${import_lodash.default.replace(import_lodash.default.lowerCase(props.label), /\s/g, "-")}`,
+      id: `button[${import_lodash.default.replace(import_lodash.default.lowerCase(props.label), /\s/g, "-")}]`,
       loading: String(loading || !!props.loading),
       disabled: props.disabled,
       type: props.type || "button",

package/dist/src/components/types/form/types/button/index.mjs

@@ -21,7 +21,7 @@ function Button(props) {
   return /* @__PURE__ */ jsxs(
     Container,
     {
-      id: `button-${_.replace(_.lowerCase(props.label), /\s/g, "-")}`,
+      id: `button[${_.replace(_.lowerCase(props.label), /\s/g, "-")}]`,
       loading: String(loading || !!props.loading),
       disabled: props.disabled,
       type: props.type || "button",

package/dist/src/components/types/form/types/datetime/index.d.ts

@@ -1,2 +1,3 @@
 import { IInputDateTime } from "../../../../../interfaces";
+import "react-datepicker/dist/react-datepicker.css";
 export declare function InputDateTime(props: IInputDateTime): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/types/form/types/datetime/index.js

@@ -38,10 +38,13 @@ var import_react = require("react");
 var import_styles = require("./styles");
 var import_label = require("../label");
 var import_error = require("../error");
+var import_react_datepicker = __toESM(require("react-datepicker"));
 var import_lodash = __toESM(require("lodash"));
+var import_react_datepicker2 = require("react-datepicker/dist/react-datepicker.css");
 function InputDateTime(props) {
   const inputRef = (0, import_react.useRef)();
   const register = (props.register || ((name) => ({})))(props.name || "");
+  const [date, setDate] = (0, import_react.useState)(null);
   const onChange = (event) => {
     if (register.onChange) register.onChange(event);
     if (props.onChange) props.onChange(event);
@@ -54,17 +57,17 @@ function InputDateTime(props) {
     !!props.label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_label.InputLabel, { optional: props.optional, children: props.label }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "input-content", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "input",
+        import_react_datepicker.default,
         {
           ...import_lodash.default.omit(props, ["className", "onChange", "mask", "type", "optional", "register", "setValue", "watch", "optional"]),
-          type: "datetime-local",
-          onFocus: () => {
-            if (props.onFocus) props.onFocus(props.name);
-          },
-          maxLength: props.maxLength || 255,
-          ...register,
-          ref: inputRef,
-          onChange
+          selected: date,
+          onChange: (value) => setDate(value),
+          locale: "pt-BR",
+          showTimeSelect: true,
+          timeFormat: "HH:mm",
+          timeIntervals: 1,
+          dateFormat: "dd/MM/yyyy HH:mm",
+          placeholderText: "Selecione data e hora"
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

package/dist/src/components/types/form/types/datetime/index.mjs

@@ -1,14 +1,17 @@
 "use client";
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import { Container } from "./styles";
 import { InputLabel } from "../label";
 import { InputError } from "../error";
+import DatePicker from "react-datepicker";
 import _ from "lodash";
+import "react-datepicker/dist/react-datepicker.css";
 function InputDateTime(props) {
   const inputRef = useRef();
   const register = (props.register || ((name) => ({})))(props.name || "");
+  const [date, setDate] = useState(null);
   const onChange = (event) => {
     if (register.onChange) register.onChange(event);
     if (props.onChange) props.onChange(event);
@@ -21,17 +24,17 @@ function InputDateTime(props) {
     !!props.label && /* @__PURE__ */ jsx(InputLabel, { optional: props.optional, children: props.label }),
     /* @__PURE__ */ jsxs("div", { className: "input-content", children: [
       /* @__PURE__ */ jsx(
-        "input",
+        DatePicker,
         {
           ..._.omit(props, ["className", "onChange", "mask", "type", "optional", "register", "setValue", "watch", "optional"]),
-          type: "datetime-local",
-          onFocus: () => {
-            if (props.onFocus) props.onFocus(props.name);
-          },
-          maxLength: props.maxLength || 255,
-          ...register,
-          ref: inputRef,
-          onChange
+          selected: date,
+          onChange: (value) => setDate(value),
+          locale: "pt-BR",
+          showTimeSelect: true,
+          timeFormat: "HH:mm",
+          timeIntervals: 1,
+          dateFormat: "dd/MM/yyyy HH:mm",
+          placeholderText: "Selecione data e hora"
         }
       ),
       /* @__PURE__ */ jsx(

package/dist/src/components/types/form/types/select/index.js

@@ -82,7 +82,6 @@ function InputSelect(props) {
   };
   const onChange = (event) => {
     const value2 = event.target.value || "";
-    event.target.value = props.mask ? props.mask(value2) : value2;
     setFilter(value2);
     if (props.onFilter) props.onFilter(value2);
     if (register.onChange) register.onChange(event);

package/dist/src/components/types/form/types/select/index.mjs

@@ -49,7 +49,6 @@ function InputSelect(props) {
   };
   const onChange = (event) => {
     const value2 = event.target.value || "";
-    event.target.value = props.mask ? props.mask(value2) : value2;
     setFilter(value2);
     if (props.onFilter) props.onFilter(value2);
     if (register.onChange) register.onChange(event);

package/dist/src/interfaces/components/form/custom/index.d.ts

@@ -1,18 +1,6 @@
 import React from "react";
-import { UseFormRegister } from "react-hook-form";
-import { z } from "zod";
-export interface IInputCustom {
-    className?: string;
-    label?: string;
-    id?: string;
-    name?: string;
+import { IInputBase } from "../index";
+export interface IInputCustom extends IInputBase {
     type: "custom";
-    value?: string;
-    error?: string;
-    disabled?: boolean;
-    optional?: boolean;
-    register?: UseFormRegister<any>;
-    setValue?: (...args: any[]) => void;
     children: React.ReactNode;
-    validation?: z.ZodTypeAny;
 }

package/dist/src/interfaces/components/form/datetime/index.d.ts

@@ -1,17 +1,4 @@
-import { UseFormRegister } from "react-hook-form";
-import { z } from "zod";
-export interface IInputDateTime {
+import { IInputBase } from "../index";
+export interface IInputDateTime extends IInputBase {
     type: "date-time";
-    className?: string;
-    label?: string;
-    name: string;
-    value: string;
-    onFocus: (value: any) => void;
-    onChange: (event: any) => void;
-    maxLength?: number;
-    error: string;
-    disabled?: boolean;
-    optional?: boolean;
-    register?: UseFormRegister<any>;
-    validation?: z.ZodTypeAny;
 }

package/dist/src/interfaces/components/form/file/index.d.ts

@@ -1,17 +1,5 @@
-import { UseFormRegister } from "react-hook-form";
-import { z } from "zod";
-export interface IInputFile {
+import { IInputBase } from "../index";
+export interface IInputFile extends IInputBase {
     type: "file";
-    className?: string;
-    label?: string;
-    name: string;
-    value: string;
     onPreview?: (url: any) => void;
-    onChange: (event: any) => void;
-    disabled?: boolean;
-    error: string;
-    onFocus: (value: string) => void;
-    optional?: boolean;
-    register?: UseFormRegister<any>;
-    validation?: z.ZodTypeAny;
 }

package/dist/src/interfaces/components/form/index.d.ts

@@ -1,5 +1,6 @@
 import { z } from "zod";
 import { IButton, IInputSelect, IInputCustom, IInputFile, IInputText, IInputDateTime, IInputTextarea } from "../form";
+import { UseFormRegister } from "react-hook-form";
 export * from "./file";
 export * from "./label";
 export * from "./text";
@@ -9,7 +10,6 @@ export * from "./datetime";
 export * from "./textarea";
 export * from "./custom";
 export * from "./error";
-export type IInputType = "text" | "password" | "select" | "textarea" | "date-time" | "file" | "custom";
 export interface IForm {
     defaultValues?: any;
     validation?: (validations: z.ZodTypeAny) => z.ZodTypeAny;
@@ -19,3 +19,19 @@ export interface IForm {
     inputs: Array<IInputSelect | IInputCustom | IInputFile | IInputText | IInputDateTime | IInputTextarea>;
     buttons?: Array<IButton>;
 }
+export interface IInputBase {
+    className?: string;
+    label?: string;
+    id?: string;
+    name?: string;
+    value?: string;
+    error?: string;
+    disabled?: boolean;
+    optional?: boolean;
+    register?: UseFormRegister<any>;
+    validation?: z.ZodTypeAny;
+    watch?: (...args: any[]) => string;
+    setValue?: (...args: any[]) => void;
+    onChange?: (event: any) => void;
+    onFocus?: (value: any) => void;
+}

package/dist/src/interfaces/components/form/select/index.d.ts

@@ -1,23 +1,9 @@
-import { UseFormRegister } from "react-hook-form";
-import { z } from "zod";
-export interface IInputSelect {
+import { IInputBase } from "../index";
+export interface IInputSelect extends IInputBase {
     type: "select";
-    className?: string;
-    label?: string;
-    name: string;
-    value?: string;
     onFilter?: (event: any) => void;
     options: {
         [value: string]: any;
     };
-    error?: string;
-    disabled?: boolean;
-    onFocus?: (value: any) => void;
-    optional?: boolean;
-    register?: UseFormRegister<any>;
-    validation?: z.ZodTypeAny;
-    mask?: (value: string) => void;
-    setValue?: (...args: any[]) => void;
-    watch?: (...args: any[]) => string;
     maxLength?: number;
 }

package/dist/src/interfaces/components/form/text/index.d.ts

@@ -1,19 +1,6 @@
-import { UseFormRegister } from "react-hook-form";
-import { z } from "zod";
-export interface IInputText {
-    className?: string;
-    label?: string;
-    id?: string;
-    name?: string;
+import { IInputBase } from "../index";
+export interface IInputText extends IInputBase {
     type: "text" | "password" | undefined;
-    value?: string;
     mask?: (value: string) => void;
-    onChange?: (event: any) => void;
     maxLength?: number;
-    error?: string;
-    disabled?: boolean;
-    onFocus?: (value: any) => void;
-    optional?: boolean;
-    register?: UseFormRegister<any>;
-    validation?: z.ZodTypeAny;
 }

package/dist/src/interfaces/components/form/textarea/index.d.ts

@@ -1,19 +1,7 @@
-import { UseFormRegister } from "react-hook-form";
-import { z } from "zod";
-export interface IInputTextarea {
+import { IInputBase } from "../index";
+export interface IInputTextarea extends IInputBase {
     type: "textarea";
-    className?: string;
-    label?: string;
-    name: string;
-    value: string;
     mask?: (value: string) => void;
-    onChange: (event: any) => void;
     maxLength?: number;
     rows?: number;
-    error: string;
-    disabled?: boolean;
-    onFocus: (value: string) => void;
-    optional?: boolean;
-    register?: UseFormRegister<any>;
-    validation?: z.ZodTypeAny;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gustavo-valsechi/client",
-  "version": "1.4.237",
+  "version": "1.4.239",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,8 +20,8 @@
   "peerDependencies": {
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "styled-components": "6.1.12",
-    "react-hot-toast": "2.4.1"
+    "react-hot-toast": "2.4.1",
+    "styled-components": "6.1.12"
   },
   "dependencies": {
     "@emotion/is-prop-valid": "1.3.0",
@@ -29,12 +29,14 @@
     "@gustavo-valsechi/utils": "1.0.5",
     "@hookform/resolvers": "5.2.2",
     "apexcharts": "3.51.0",
+    "date-fns": "4.1.0",
     "lodash": "4.17.21",
     "luhn": "2.4.1",
     "next": "14.2.5",
     "randomcolor": "0.6.2",
     "react-apexcharts": "1.4.1",
     "react-credit-cards-2": "1.0.3",
+    "react-datepicker": "9.1.0",
     "react-hook-form": "7.65.0",
     "react-lottie": "1.2.4",
     "tsup": "8.5.0",