@charlesgomes/leafcode-shared-lib-react 1.0.62 → 1.0.64

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 | number | readonly string[] | undefined;
+    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 | number | readonly string[] | undefined;
+    onChange?: (value: any) => void;
     onSelect: (item: any) => void;
+    error?: FieldError;
     defaultValue?: any;
     inputAutocompleteActive?: string;
     queryKey: string;

package/dist/index.js

@@ -325,6 +325,7 @@ var InputBase = ({
     "--input-font-size": theme.components.input.fonts.inputSize,
     // Colors
     "--label-color": theme.components.input.colors.text,
+    "--label-line": theme.colors.light,
     "--input-border": theme.components.input.colors.border,
     "--input-bg": theme.components.input.colors.background,
     "--input-text-color": theme.components.input.colors.text,
@@ -421,6 +422,7 @@ var TextAreaBase = ({
     "--input-font-size": theme.components.input.fonts.inputSize,
     // Colors
     "--label-color": theme.components.input.colors.text,
+    "--label-line": theme.colors.light,
     "--input-border": theme.components.input.colors.border,
     "--input-bg": theme.components.input.colors.background,
     "--input-text-color": theme.components.input.colors.text,
@@ -505,6 +507,7 @@ var InputBase2 = ({
     "--label-color": theme.components.input.colors.text,
     "--input-border": theme.components.input.colors.border,
     "--input-bg": theme.components.input.colors.background,
+    "--label-line": theme.colors.light,
     "--input-text-color": theme.colors.light,
     "--input-placeholder": theme.components.input.colors.placeholder,
     "--input-focus-border": theme.components.input.colors.focusBorder,
@@ -686,7 +689,7 @@ var import_react_query = require("@tanstack/react-query");
 var import_react10 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var LoadingSpinner = (0, import_react10.memo)(
-  ({ size = 24, color = "#00875F" }) => {
+  ({ size = 20, color = "#00875F" }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "span",
       {
@@ -713,6 +716,7 @@ var InputBase3 = ({
   name,
   label,
   error,
+  onChange,
   onSelect,
   defaultValue,
   inputAutocompleteActive,
@@ -726,6 +730,7 @@ var InputBase3 = ({
 }, ref) => {
   const theme = useLeafcodeTheme();
   const styleVars = {
+    "--label-line": theme.colors.light,
     "--label-font-family": theme.components.input.fonts.label,
     "--label-font-weight": theme.components.input.fonts.labelWeight,
     "--label-font-size": theme.components.input.fonts.labelSize,
@@ -794,7 +799,7 @@ var InputBase3 = ({
         },
         item.id
       )),
-      isLoading && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { className: "dropdown-loading", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LoadingSpinner, { size: 24 }) }),
+      isLoading && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { className: "dropdown-loading", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LoadingSpinner, { size: 20 }) }),
       !isLoading && items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { className: "dropdown-empty", children: "N\xE3o encontrado" })
     ] }) });
   };
@@ -828,6 +833,7 @@ var InputBase3 = ({
               value,
               onChange: (e) => {
                 setValue(e.target.value);
+                onChange?.(e.target.value);
                 setIsOpen(true);
               },
               onFocus: () => setIsOpen(true),
@@ -842,6 +848,7 @@ var InputBase3 = ({
                 setValue("");
                 setItems([]);
                 setPageNumber(1);
+                onChange?.(null);
                 onSelect(null);
               },
               className: "dropdown-clear",

package/dist/index.mjs

@@ -267,6 +267,7 @@ var InputBase = ({
     "--input-font-size": theme.components.input.fonts.inputSize,
     // Colors
     "--label-color": theme.components.input.colors.text,
+    "--label-line": theme.colors.light,
     "--input-border": theme.components.input.colors.border,
     "--input-bg": theme.components.input.colors.background,
     "--input-text-color": theme.components.input.colors.text,
@@ -363,6 +364,7 @@ var TextAreaBase = ({
     "--input-font-size": theme.components.input.fonts.inputSize,
     // Colors
     "--label-color": theme.components.input.colors.text,
+    "--label-line": theme.colors.light,
     "--input-border": theme.components.input.colors.border,
     "--input-bg": theme.components.input.colors.background,
     "--input-text-color": theme.components.input.colors.text,
@@ -451,6 +453,7 @@ var InputBase2 = ({
     "--label-color": theme.components.input.colors.text,
     "--input-border": theme.components.input.colors.border,
     "--input-bg": theme.components.input.colors.background,
+    "--label-line": theme.colors.light,
     "--input-text-color": theme.colors.light,
     "--input-placeholder": theme.components.input.colors.placeholder,
     "--input-focus-border": theme.components.input.colors.focusBorder,
@@ -637,7 +640,7 @@ import { useQuery } from "@tanstack/react-query";
 import { memo } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var LoadingSpinner = memo(
-  ({ size = 24, color = "#00875F" }) => {
+  ({ size = 20, color = "#00875F" }) => {
     return /* @__PURE__ */ jsx9(
       "span",
       {
@@ -664,6 +667,7 @@ var InputBase3 = ({
   name,
   label,
   error,
+  onChange,
   onSelect,
   defaultValue,
   inputAutocompleteActive,
@@ -677,6 +681,7 @@ var InputBase3 = ({
 }, ref) => {
   const theme = useLeafcodeTheme();
   const styleVars = {
+    "--label-line": theme.colors.light,
     "--label-font-family": theme.components.input.fonts.label,
     "--label-font-weight": theme.components.input.fonts.labelWeight,
     "--label-font-size": theme.components.input.fonts.labelSize,
@@ -745,7 +750,7 @@ var InputBase3 = ({
         },
         item.id
       )),
-      isLoading && /* @__PURE__ */ jsx10("li", { className: "dropdown-loading", children: /* @__PURE__ */ jsx10(LoadingSpinner, { size: 24 }) }),
+      isLoading && /* @__PURE__ */ jsx10("li", { className: "dropdown-loading", children: /* @__PURE__ */ jsx10(LoadingSpinner, { size: 20 }) }),
       !isLoading && items.length === 0 && /* @__PURE__ */ jsx10("li", { className: "dropdown-empty", children: "N\xE3o encontrado" })
     ] }) });
   };
@@ -779,6 +784,7 @@ var InputBase3 = ({
               value,
               onChange: (e) => {
                 setValue(e.target.value);
+                onChange?.(e.target.value);
                 setIsOpen(true);
               },
               onFocus: () => setIsOpen(true),
@@ -793,6 +799,7 @@ var InputBase3 = ({
                 setValue("");
                 setItems([]);
                 setPageNumber(1);
+                onChange?.(null);
                 onSelect(null);
               },
               className: "dropdown-clear",

package/dist/styles/button.css

@@ -79,8 +79,8 @@
 }
 
 .animate-spin {
-  height: var(--button-height, 1.25rem);
-  width: var(--button-height, 1.25rem);
+  height: 1.25rem;
+  width: 1.25rem;
   color: var(--button-color, #ffffff);
 }
 

package/dist/styles/input.css

@@ -16,7 +16,7 @@
 .label-input::before {
   content: "";
   position: absolute;
-  background-color: var(--label-bg, #f9fafb);
+  background-color: var(--label-line, #ffffff);
   width: 100%;
   height: 4px;
   left: 0;
@@ -27,7 +27,7 @@
 .label-input::after {
   content: "";
   position: absolute;
-  background-color: var(--label-bg, #f9fafb);
+  background-color: var(--label-line, #ffffff);
   width: 100%;
   height: 2px;
   left: 0;
@@ -48,15 +48,15 @@
   background-color: var(--input-bg, #ffffff);
   color: var(--input-text-color, #070707);
   position: relative;
+  outline: none;
 }
 
 .input:focus {
-  outline: none;
   border-color: var(--input-focus-border, #60a5fa);
+  box-shadow: none;
 }
 
 .input:hover {
-  outline: none;
   border-color: var(--input-focus-border, #60a5fa);
 }
 
@@ -174,7 +174,7 @@ input:-webkit-autofill:focus {
 
 .react-select__option--is-focused {
   background-color: var(--input-focus-border, #79bdd8) !important;
-  color: var(--input-text-color, #ffffff);
+  color: var(--input-text-color, #ffffff) !important;
 }
 
 .react-select__option--is-selected {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charlesgomes/leafcode-shared-lib-react",
-  "version": "1.0.62",
+  "version": "1.0.64",
   "description": "Lib de componentes react",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",