@gustavo-valsechi/client 1.4.13 → 1.4.15

package/dist/components/styles.d.ts

@@ -1,2 +1,2 @@
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const RowContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", any> & string;
+export declare const RowContainer: import("styled-components/dist/types").IStyledComponentBase<"web", any> & string;

package/dist/components/types/block/styles.d.ts

@@ -1,2 +1,2 @@
 export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", any> & string;
-export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", any> & string;

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

@@ -109,7 +109,7 @@ function Form(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.Container, { ref: formRef, onSubmit: handleSubmit(onSubmit), children: [
     import_lodash.default.map(
       props.inputs,
-      (data, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, { children: component(data) }, index)
+      (data, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, { children: data.type === "custom" ? data.component : component(data) }, index)
     ),
     import_lodash.default.isArray(props.buttons) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "form-buttons", children: import_lodash.default.map(
       props.buttons,

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

@@ -75,7 +75,7 @@ function Form(props) {
   return /* @__PURE__ */ jsxs(Container, { ref: formRef, onSubmit: handleSubmit(onSubmit), children: [
     _.map(
       props.inputs,
-      (data, index) => /* @__PURE__ */ jsx(React.Fragment, { children: component(data) }, index)
+      (data, index) => /* @__PURE__ */ jsx(React.Fragment, { children: data.type === "custom" ? data.component : component(data) }, index)
     ),
     _.isArray(props.buttons) && /* @__PURE__ */ jsx("div", { className: "form-buttons", children: _.map(
       props.buttons,

package/dist/components/types/modal/index.js

@@ -38,7 +38,7 @@ var import__ = require("../..");
 var import_lodash = __toESM(require("lodash"));
 function Modal(props) {
   var _a, _b, _c;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.Container, { ...import_lodash.default.omit(props, ["className"]), position: props.position || "center", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.Container, { ...import_lodash.default.omit(props, ["className"]), position: props.position || "center", title: "", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "iz-modal-back", onClick: props.onClose }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "iz-modal-container", children: [
       (!!props.title || !!props.header) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "iz-modal-header", children: [

package/dist/components/types/modal/index.mjs

@@ -5,7 +5,7 @@ import { Button } from "../..";
 import _ from "lodash";
 function Modal(props) {
   var _a, _b, _c;
-  return /* @__PURE__ */ jsxs(Container, { ..._.omit(props, ["className"]), position: props.position || "center", children: [
+  return /* @__PURE__ */ jsxs(Container, { ..._.omit(props, ["className"]), position: props.position || "center", title: "", children: [
     /* @__PURE__ */ jsx("div", { className: "iz-modal-back", onClick: props.onClose }),
     /* @__PURE__ */ jsxs("div", { className: "iz-modal-container", children: [
       (!!props.title || !!props.header) && /* @__PURE__ */ jsxs("div", { className: "iz-modal-header", children: [

package/dist/components/types/table/index.js

@@ -125,7 +125,8 @@ function Table(props) {
       "div",
       {
         className: "iz-table-content-elipse",
-        title: import_lodash.default.isString(body) ? body : "",
+        "data-tooltip": import_lodash.default.isString(body) ? body : "",
+        "data-tooltip-props": '{"position":"bottom"}',
         children: body
       }
     );

package/dist/components/types/table/index.mjs

@@ -91,7 +91,8 @@ function Table(props) {
       "div",
       {
         className: "iz-table-content-elipse",
-        title: _.isString(body) ? body : "",
+        "data-tooltip": _.isString(body) ? body : "",
+        "data-tooltip-props": '{"position":"bottom"}',
         children: body
       }
     );

package/dist/components/types/table/modal/styles.d.ts

@@ -1 +1 @@
-export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", any> & string;

package/dist/contexts/icon/styles.d.ts

@@ -1 +1 @@
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", any> & string;

package/dist/contexts/modal/styles.d.ts

@@ -1 +1 @@
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", any> & string;

package/dist/contexts/theme/styles.d.ts

@@ -1 +1 @@
-export declare const Switcher: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Switcher: import("styled-components/dist/types").IStyledComponentBase<"web", any> & string;

package/dist/contexts/tooltip/index.js

@@ -41,12 +41,30 @@ const TooltipContext = (0, import_react.createContext)({});
 const TooltipProviderContainer = ({ children }) => {
   const [tooltips, setTooltips] = (0, import_react.useState)([]);
   const getContent = (target) => {
-    var _a;
+    var _a, _b, _c;
     const rect = target.getBoundingClientRect();
-    return {
+    const props = JSON.parse(((_a = target.dataset) == null ? void 0 : _a["tooltip-props"]) || "{}");
+    const coords = {
       top: rect.top + window.scrollY - (target.offsetHeight + 8),
-      left: rect.left + window.scrollX + target.offsetWidth / 2,
-      content: ((_a = target.dataset) == null ? void 0 : _a.tooltip) || ""
+      left: rect.left + window.scrollX + target.offsetWidth / 2
+    };
+    switch (props.position) {
+      case "bottom":
+        coords.top = rect.top + window.scrollY + (target.offsetHeight + 8);
+        break;
+      case "left":
+        coords.top = rect.top + window.scrollY;
+        coords.left = rect.left + window.scrollX - target.offsetWidth;
+        break;
+      case "right":
+        coords.top = rect.top + window.scrollY;
+        coords.left = rect.left + window.scrollX + target.offsetWidth;
+        break;
+    }
+    return {
+      ...coords,
+      content: ((_b = target.dataset) == null ? void 0 : _b.tooltip) || "",
+      props: JSON.parse(((_c = target.dataset) == null ? void 0 : _c["tooltip-props"]) || "{}")
     };
   };
   (0, import_react.useEffect)(() => {
@@ -90,6 +108,7 @@ const TooltipProviderContainer = ({ children }) => {
             top: data.top,
             left: data.left
           },
+          ...data.props,
           children: data.content
         },
         index

package/dist/contexts/tooltip/index.mjs

@@ -7,12 +7,30 @@ const TooltipContext = createContext({});
 const TooltipProviderContainer = ({ children }) => {
   const [tooltips, setTooltips] = useState([]);
   const getContent = (target) => {
-    var _a;
+    var _a, _b, _c;
     const rect = target.getBoundingClientRect();
-    return {
+    const props = JSON.parse(((_a = target.dataset) == null ? void 0 : _a["tooltip-props"]) || "{}");
+    const coords = {
       top: rect.top + window.scrollY - (target.offsetHeight + 8),
-      left: rect.left + window.scrollX + target.offsetWidth / 2,
-      content: ((_a = target.dataset) == null ? void 0 : _a.tooltip) || ""
+      left: rect.left + window.scrollX + target.offsetWidth / 2
+    };
+    switch (props.position) {
+      case "bottom":
+        coords.top = rect.top + window.scrollY + (target.offsetHeight + 8);
+        break;
+      case "left":
+        coords.top = rect.top + window.scrollY;
+        coords.left = rect.left + window.scrollX - target.offsetWidth;
+        break;
+      case "right":
+        coords.top = rect.top + window.scrollY;
+        coords.left = rect.left + window.scrollX + target.offsetWidth;
+        break;
+    }
+    return {
+      ...coords,
+      content: ((_b = target.dataset) == null ? void 0 : _b.tooltip) || "",
+      props: JSON.parse(((_c = target.dataset) == null ? void 0 : _c["tooltip-props"]) || "{}")
     };
   };
   useEffect(() => {
@@ -56,6 +74,7 @@ const TooltipProviderContainer = ({ children }) => {
             top: data.top,
             left: data.left
           },
+          ...data.props,
           children: data.content
         },
         index

package/dist/contexts/tooltip/styles.d.ts

@@ -1 +1 @@
-export declare const Tooltip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Tooltip: import("styled-components/dist/types").IStyledComponentBase<"web", any> & string;

package/dist/contexts/tooltip/styles.js

@@ -32,6 +32,49 @@ __export(styles_exports, {
 });
 module.exports = __toCommonJS(styles_exports);
 var import_styled_components = __toESM(require("styled-components"));
+const setPosition = (position = "top", isBorder) => {
+  const defaultPosition = `
+        transform: translateX(-50%);
+        bottom: -${isBorder ? "9" : "8"}px;
+        left: 50%;
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+        border-top: 8px solid ${({ theme }) => theme.t05};
+    `;
+  switch (position) {
+    case "bottom":
+      return `
+            transform: translateX(-50%);
+            top: -${isBorder ? "9" : "8"}px;
+            left: 50%;
+            border-left: 8px solid transparent;
+            border-right: 8px solid transparent;
+            border-bottom: 8px solid ${({ theme }) => theme.t05};
+        `;
+    case "left":
+      return `
+            transform: translateY(-50%);
+            right: -${isBorder ? "9" : "8"}px;
+            top: 50%;
+            border-top: 8px solid transparent;
+            border-bottom: 8px solid transparent;
+            border-left: 8px solid ${({ theme }) => theme.t05};
+        `;
+    case "right":
+      return `
+            transform: translateY(-50%);
+            left: -${isBorder ? "9" : "8"}px;
+            top: 50%;
+            border-top: 8px solid transparent;
+            border-bottom: 8px solid transparent;
+            border-right: 8px solid ${({ theme }) => theme.t05};
+        `;
+    case "top":
+      return defaultPosition;
+    default:
+      return defaultPosition;
+  }
+};
 const Tooltip = import_styled_components.default.div`
     position: fixed;
     background: ${({ theme }) => theme.tooltip};
@@ -41,34 +84,42 @@ const Tooltip = import_styled_components.default.div`
     text-align: center;
     padding: .3rem .8rem;
     border-radius: 5px;
-    transform: translateX(-50%);
     z-index: 10;
     border: 1px solid ${({ theme }) => theme.t05};
+    transform: ${({ position = "top" }) => {
+  const defaultPosition = "translateX(-50%)";
+  switch (position) {
+    case "left":
+      return "translateX(0)";
+    case "right":
+      return "translateX(-100%)";
+    case "bottom":
+      return defaultPosition;
+    case "top":
+      return defaultPosition;
+    default:
+      return defaultPosition;
+  }
+}};
+
+    @media(max-width: ${({ theme }) => theme.mobileMaxWidth}) {
+        display: none;
+    }
 
     &::before {
         content: "";
         position: absolute;
-        bottom: -9px;
-        left: 50%;
-        transform: translateX(-50%);
         width: 0;
         height: 0;
-        border-left: 8px solid transparent;
-        border-right: 8px solid transparent;
-        border-top: 8px solid ${({ theme }) => theme.t05};
+        ${({ position = "top" }) => setPosition(position, true)}
     }
 
     &::after {
         content: "";
         position: absolute;
-        bottom: -8px;
-        left: 50%;
-        transform: translateX(-50%);
         width: 0;
         height: 0;
-        border-left: 8px solid transparent;
-        border-right: 8px solid transparent;
-        border-top: 8px solid ${({ theme }) => theme.tooltip};
+        ${({ position = "top" }) => setPosition(position, true)}
     }
 `;
 // Annotate the CommonJS export names for ESM import in node:

package/dist/contexts/tooltip/styles.mjs

@@ -1,4 +1,47 @@
 import styled from "styled-components";
+const setPosition = (position = "top", isBorder) => {
+  const defaultPosition = `
+        transform: translateX(-50%);
+        bottom: -${isBorder ? "9" : "8"}px;
+        left: 50%;
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+        border-top: 8px solid ${({ theme }) => theme.t05};
+    `;
+  switch (position) {
+    case "bottom":
+      return `
+            transform: translateX(-50%);
+            top: -${isBorder ? "9" : "8"}px;
+            left: 50%;
+            border-left: 8px solid transparent;
+            border-right: 8px solid transparent;
+            border-bottom: 8px solid ${({ theme }) => theme.t05};
+        `;
+    case "left":
+      return `
+            transform: translateY(-50%);
+            right: -${isBorder ? "9" : "8"}px;
+            top: 50%;
+            border-top: 8px solid transparent;
+            border-bottom: 8px solid transparent;
+            border-left: 8px solid ${({ theme }) => theme.t05};
+        `;
+    case "right":
+      return `
+            transform: translateY(-50%);
+            left: -${isBorder ? "9" : "8"}px;
+            top: 50%;
+            border-top: 8px solid transparent;
+            border-bottom: 8px solid transparent;
+            border-right: 8px solid ${({ theme }) => theme.t05};
+        `;
+    case "top":
+      return defaultPosition;
+    default:
+      return defaultPosition;
+  }
+};
 const Tooltip = styled.div`
     position: fixed;
     background: ${({ theme }) => theme.tooltip};
@@ -8,34 +51,42 @@ const Tooltip = styled.div`
     text-align: center;
     padding: .3rem .8rem;
     border-radius: 5px;
-    transform: translateX(-50%);
     z-index: 10;
     border: 1px solid ${({ theme }) => theme.t05};
+    transform: ${({ position = "top" }) => {
+  const defaultPosition = "translateX(-50%)";
+  switch (position) {
+    case "left":
+      return "translateX(0)";
+    case "right":
+      return "translateX(-100%)";
+    case "bottom":
+      return defaultPosition;
+    case "top":
+      return defaultPosition;
+    default:
+      return defaultPosition;
+  }
+}};
+
+    @media(max-width: ${({ theme }) => theme.mobileMaxWidth}) {
+        display: none;
+    }
 
     &::before {
         content: "";
         position: absolute;
-        bottom: -9px;
-        left: 50%;
-        transform: translateX(-50%);
         width: 0;
         height: 0;
-        border-left: 8px solid transparent;
-        border-right: 8px solid transparent;
-        border-top: 8px solid ${({ theme }) => theme.t05};
+        ${({ position = "top" }) => setPosition(position, true)}
     }
 
     &::after {
         content: "";
         position: absolute;
-        bottom: -8px;
-        left: 50%;
-        transform: translateX(-50%);
         width: 0;
         height: 0;
-        border-left: 8px solid transparent;
-        border-right: 8px solid transparent;
-        border-top: 8px solid ${({ theme }) => theme.tooltip};
+        ${({ position = "top" }) => setPosition(position, true)}
     }
 `;
 export {

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

@@ -1,5 +1,8 @@
 import { UseFormRegister } from "react-hook-form";
+import { IInputType } from "@interfaces";
+import { z } from "zod";
 export interface IInputDateTime {
+    type?: IInputType;
     className?: string;
     label?: string;
     name: string;
@@ -12,4 +15,5 @@ export interface IInputDateTime {
     disabled?: boolean;
     required?: boolean;
     register?: UseFormRegister<any>;
+    validation?: typeof z;
 }

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

@@ -1,5 +1,8 @@
 import { UseFormRegister } from "react-hook-form";
+import { IInputType } from "@interfaces";
+import { z } from "zod";
 export interface IInputFile {
+    type?: IInputType;
     className?: string;
     label?: string;
     name: string;
@@ -11,4 +14,5 @@ export interface IInputFile {
     onFocus: (value: string) => void;
     required?: boolean;
     register?: UseFormRegister<any>;
+    validation?: typeof z;
 }

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

@@ -1,3 +1,5 @@
+import React from "react";
+import { IButton, IInputSelect, IInputFile, IInputText, IInputTextarea, IInputDateTime } from "@interfaces";
 export * from "./file";
 export * from "./label";
 export * from "./input";
@@ -5,12 +7,16 @@ export * from "./select";
 export * from "./button";
 export * from "./datetime";
 export * from "./textarea";
+export type IInputType = "text" | "password" | "select" | "textarea" | "date-time" | "file" | "custom";
 export interface IForm {
     defaultValues?: any;
     validation?: any;
     formRef?: any;
     onSubmit: (values: any, actions?: any) => void;
     clearWhen?: boolean;
-    inputs: Array<any>;
-    buttons?: Array<any>;
+    inputs: Array<IInputSelect & IInputFile & IInputText & IInputTextarea & IInputDateTime & {
+        type: IInputType;
+        component: React.ReactNode;
+    }>;
+    buttons?: Array<IButton>;
 }

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

@@ -1,10 +1,12 @@
 import { UseFormRegister } from "react-hook-form";
+import { IInputType } from "@interfaces";
+import { z } from "zod";
 export interface IInputText {
     className?: string;
     label?: string;
     id?: string;
     name?: string;
-    type?: string;
+    type?: IInputType;
     value?: string;
     mask?: (value: string) => void;
     onChange?: (event: any) => void;
@@ -14,4 +16,5 @@ export interface IInputText {
     onFocus?: (value: any) => void;
     required?: boolean;
     register?: UseFormRegister<any>;
+    validation?: typeof z;
 }

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

@@ -1,5 +1,8 @@
 import { UseFormRegister } from "react-hook-form";
+import { IInputType } from "@interfaces";
+import { z } from "zod";
 export interface IInputSelect {
+    type?: IInputType;
     className?: string;
     label?: string;
     name: string;
@@ -11,4 +14,5 @@ export interface IInputSelect {
     onFocus: (value: any) => void;
     required?: boolean;
     register?: UseFormRegister<any>;
+    validation?: typeof z;
 }

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

@@ -1,5 +1,8 @@
 import { UseFormRegister } from "react-hook-form";
+import { IInputType } from "@interfaces";
+import { z } from "zod";
 export interface IInputTextarea {
+    type?: IInputType;
     className?: string;
     label?: string;
     name: string;
@@ -13,4 +16,5 @@ export interface IInputTextarea {
     onFocus: (value: string) => void;
     required?: boolean;
     register?: UseFormRegister<any>;
+    validation?: typeof z;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gustavo-valsechi/client",
-  "version": "1.4.13",
+  "version": "1.4.15",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",