@charlesgomes/leafcode-shared-lib-react 1.0.61 → 1.0.63

package/dist/index.d.mts

@@ -102,8 +102,10 @@ interface PaginatedResponse$1 {
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     name: string;
     label?: string;
-    error?: FieldError;
+    value?: string;
+    onChange?: (value: any) => void;
     onSelect: (item: any) => void;
+    error?: FieldError;
     defaultValue?: any;
     inputAutocompleteActive?: string;
     queryKey: string;

package/dist/index.d.ts

@@ -102,8 +102,10 @@ interface PaginatedResponse$1 {
 interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     name: string;
     label?: string;
-    error?: FieldError;
+    value?: string;
+    onChange?: (value: any) => void;
     onSelect: (item: any) => void;
+    error?: FieldError;
     defaultValue?: any;
     inputAutocompleteActive?: string;
     queryKey: string;

package/dist/index.js

@@ -227,6 +227,15 @@ function TooltipErrorInput({
   isSelect = false,
   isInvalid = false
 }) {
+  const theme = useLeafcodeTheme();
+  const styleVars = {
+    "--input-font-family": theme.components.input.fonts.input,
+    "--input-font-weight": theme.components.input.fonts.inputWeight,
+    "--input-font-size": theme.components.input.fonts.inputSize,
+    "--input-text-color": theme.components.input.colors.text,
+    "--input-text-color-hover": theme.colors.light,
+    "--input-error-border": theme.components.input.colors.errorBorder
+  };
   const [isTooltipOpen, setIsTooltipOpen] = (0, import_react3.useState)(true);
   const handleClose = () => setIsTooltipOpen(false);
   (0, import_react3.useEffect)(() => {
@@ -235,7 +244,8 @@ function TooltipErrorInput({
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "div",
     {
-      className: `absolute ${isSelect ? isInvalid ? "right-[4.5rem]" : "right-11" : "right-2"} top-1/2 transform -translate-y-1/2 cursor-pointer z-20`,
+      style: styleVars,
+      className: `tooltip-wrapper ${isSelect ? isInvalid ? "tooltip-right-select-invalid" : "tooltip-right-select" : "tooltip-right-default"}`,
       children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: error?.message && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "a",
@@ -244,13 +254,13 @@ function TooltipErrorInput({
             "data-tooltip-content": "",
             "data-tooltip-place": "top-end",
             onClick: () => setIsTooltipOpen(true),
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.WarningCircle, { size: 22, className: "text-red-400" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react2.WarningCircle, { size: 22, className: "tooltip-icon" })
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           import_react_tooltip.Tooltip,
           {
-            className: "max-w-[15rem] relative z-50 tooltip-content cursor-default",
+            className: "tooltip-content",
             id: name,
             style: {
               backgroundColor: "#f87171",
@@ -263,13 +273,13 @@ function TooltipErrorInput({
             clickable: true,
             openOnClick: true,
             isOpen: isTooltipOpen,
-            children: isTooltipOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex justify-between gap-1 items-center font-Roboto text-[13px] leading-[125%] transition-all", children: [
+            children: isTooltipOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "tooltip-inner", children: [
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: error?.message }),
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "button",
                 {
                   onClick: handleClose,
-                  className: "text-white hover:text-black",
+                  className: "tooltip-close",
                   style: {
                     border: "none",
                     background: "transparent",
@@ -337,7 +347,7 @@ var InputBase = ({
     e.target.value = val;
     onChange?.(e);
   };
-  const [show, setShow] = (0, import_react4.useState)(false);
+  const [show, setShow] = (0, import_react4.useState)(true);
   const handleClick = () => setShow(!show);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
@@ -373,7 +383,7 @@ var InputBase = ({
           showPasswordToggle && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "div",
             {
-              onClick: handleClick,
+              onClick: () => handleClick(),
               className: `password-toggle ${error ? "error" : "no-error"}`,
               children: show ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.Eye, { size: 21 }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react5.EyeSlash, { size: 21 })
             }
@@ -450,7 +460,7 @@ var TextAreaBase = ({
               ...rest
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "absolute top-6 right-1", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TooltipErrorInput, { error, name }) })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "errorTooltip", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TooltipErrorInput, { error, name }) })
         ] })
       ]
     }
@@ -703,6 +713,7 @@ var InputBase3 = ({
   name,
   label,
   error,
+  onChange,
   onSelect,
   defaultValue,
   inputAutocompleteActive,
@@ -818,6 +829,7 @@ var InputBase3 = ({
               value,
               onChange: (e) => {
                 setValue(e.target.value);
+                onChange?.(e.target.value);
                 setIsOpen(true);
               },
               onFocus: () => setIsOpen(true),

package/dist/index.mjs

@@ -169,6 +169,15 @@ function TooltipErrorInput({
   isSelect = false,
   isInvalid = false
 }) {
+  const theme = useLeafcodeTheme();
+  const styleVars = {
+    "--input-font-family": theme.components.input.fonts.input,
+    "--input-font-weight": theme.components.input.fonts.inputWeight,
+    "--input-font-size": theme.components.input.fonts.inputSize,
+    "--input-text-color": theme.components.input.colors.text,
+    "--input-text-color-hover": theme.colors.light,
+    "--input-error-border": theme.components.input.colors.errorBorder
+  };
   const [isTooltipOpen, setIsTooltipOpen] = useState(true);
   const handleClose = () => setIsTooltipOpen(false);
   useEffect(() => {
@@ -177,7 +186,8 @@ function TooltipErrorInput({
   return /* @__PURE__ */ jsx3(
     "div",
     {
-      className: `absolute ${isSelect ? isInvalid ? "right-[4.5rem]" : "right-11" : "right-2"} top-1/2 transform -translate-y-1/2 cursor-pointer z-20`,
+      style: styleVars,
+      className: `tooltip-wrapper ${isSelect ? isInvalid ? "tooltip-right-select-invalid" : "tooltip-right-select" : "tooltip-right-default"}`,
       children: /* @__PURE__ */ jsx3(Fragment, { children: error?.message && /* @__PURE__ */ jsxs2(Fragment, { children: [
         /* @__PURE__ */ jsx3(
           "a",
@@ -186,13 +196,13 @@ function TooltipErrorInput({
             "data-tooltip-content": "",
             "data-tooltip-place": "top-end",
             onClick: () => setIsTooltipOpen(true),
-            children: /* @__PURE__ */ jsx3(WarningCircle, { size: 22, className: "text-red-400" })
+            children: /* @__PURE__ */ jsx3(WarningCircle, { size: 22, className: "tooltip-icon" })
           }
         ),
         /* @__PURE__ */ jsx3(
           Tooltip,
           {
-            className: "max-w-[15rem] relative z-50 tooltip-content cursor-default",
+            className: "tooltip-content",
             id: name,
             style: {
               backgroundColor: "#f87171",
@@ -205,13 +215,13 @@ function TooltipErrorInput({
             clickable: true,
             openOnClick: true,
             isOpen: isTooltipOpen,
-            children: isTooltipOpen && /* @__PURE__ */ jsxs2("div", { className: "flex justify-between gap-1 items-center font-Roboto text-[13px] leading-[125%] transition-all", children: [
+            children: isTooltipOpen && /* @__PURE__ */ jsxs2("div", { className: "tooltip-inner", children: [
               /* @__PURE__ */ jsx3("span", { children: error?.message }),
               /* @__PURE__ */ jsx3(
                 "button",
                 {
                   onClick: handleClose,
-                  className: "text-white hover:text-black",
+                  className: "tooltip-close",
                   style: {
                     border: "none",
                     background: "transparent",
@@ -279,7 +289,7 @@ var InputBase = ({
     e.target.value = val;
     onChange?.(e);
   };
-  const [show, setShow] = useState2(false);
+  const [show, setShow] = useState2(true);
   const handleClick = () => setShow(!show);
   return /* @__PURE__ */ jsxs3(
     "div",
@@ -315,7 +325,7 @@ var InputBase = ({
           showPasswordToggle && /* @__PURE__ */ jsx4(
             "div",
             {
-              onClick: handleClick,
+              onClick: () => handleClick(),
               className: `password-toggle ${error ? "error" : "no-error"}`,
               children: show ? /* @__PURE__ */ jsx4(Eye, { size: 21 }) : /* @__PURE__ */ jsx4(EyeSlash, { size: 21 })
             }
@@ -392,7 +402,7 @@ var TextAreaBase = ({
               ...rest
             }
           ),
-          /* @__PURE__ */ jsx5("div", { className: "absolute top-6 right-1", children: /* @__PURE__ */ jsx5(TooltipErrorInput, { error, name }) })
+          /* @__PURE__ */ jsx5("div", { className: "errorTooltip", children: /* @__PURE__ */ jsx5(TooltipErrorInput, { error, name }) })
         ] })
       ]
     }
@@ -654,6 +664,7 @@ var InputBase3 = ({
   name,
   label,
   error,
+  onChange,
   onSelect,
   defaultValue,
   inputAutocompleteActive,
@@ -769,6 +780,7 @@ var InputBase3 = ({
               value,
               onChange: (e) => {
                 setValue(e.target.value);
+                onChange?.(e.target.value);
                 setIsOpen(true);
               },
               onFocus: () => setIsOpen(true),

package/dist/styles/input.css

@@ -128,6 +128,12 @@ input:-webkit-autofill:focus {
   height: var(--input-height-text-area, 6rem);
 }
 
+.textArea .errorTooltip {
+  position: absolute;
+  top: 1.5rem;
+  right: 0.25rem;
+}
+
 /* REACT SELECT */
 .react-select-container.has-error .react-select__control {
   border: 1px solid var(--input-error-border, #f87171) !important;

package/dist/styles/tooltip.css

@@ -0,0 +1,57 @@
+.tooltip-wrapper {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  z-index: 20;
+}
+
+.tooltip-right-default {
+  right: 0.5rem;
+}
+
+.tooltip-right-select {
+  right: 2.75rem;
+}
+
+.tooltip-right-select-invalid {
+  right: 4.5rem;
+}
+
+.tooltip-icon {
+  color: var(--input-error-border, #f87171);
+}
+
+.tooltip-content {
+  max-width: 15rem;
+  position: relative;
+  z-index: 50;
+  cursor: default;
+}
+
+.tooltip-inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.25rem;
+  font-family: var(--input-font-family, "Roboto", sans-serif);
+  font-weight: var(--input-font-weight, 400);
+  font-size: var(--input-font-size, 1px);
+  line-height: 125%;
+  transition: all 0.2s ease-in-out;
+}
+
+.tooltip-close {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--input-text-color, #ffffff);
+}
+
+.tooltip-close:hover {
+  color: var(--input-text-color-hover, #ffffff) !important;
+}
+
+.tooltip-close:hover {
+  color: #000000;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charlesgomes/leafcode-shared-lib-react",
-  "version": "1.0.61",
+  "version": "1.0.63",
   "description": "Lib de componentes react",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -15,7 +15,8 @@
     "./table.css": "./dist/styles/table.css",
     "./button.css": "./dist/styles/button.css",
     "./input.css": "./dist/styles/input.css",
-    "./modalBase.css": "./dist/styles/modalBase.css"
+    "./modalBase.css": "./dist/styles/modalBase.css",
+    "./tooltip.css": "./dist/styles/tooltip.css"
   },
   "files": [
     "dist"