@gustavo-valsechi/client 1.4.36 → 1.4.38

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

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

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

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

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

@@ -53,6 +53,7 @@ function Button(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_styles.Container,
     {
+      id: `iz-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/components/types/form/types/button/index.mjs

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

package/dist/contexts/target/index.js

@@ -35,24 +35,22 @@ __export(target_exports, {
 module.exports = __toCommonJS(target_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
+var import_styles = require("./styles");
 var import_lodash = __toESM(require("lodash"));
 const TargetContext = (0, import_react.createContext)({});
+const memory = [];
 const TargetProviderContainer = ({ children }) => {
   const [targets, setTargets] = (0, import_react.useState)([]);
   (0, import_react.useEffect)(() => {
-    let newTargets = [...targets];
     import_lodash.default.forEach(targets, (target, index) => {
       var _a;
       const element = (_a = target.ref) == null ? void 0 : _a.current;
       if (!element) return;
-      const handleClick = (index2) => {
-        console.log("CLICANDO");
-        if (JSON.stringify(import_lodash.default.pick(targets, ["show"])) === JSON.stringify(import_lodash.default.pick(newTargets, ["show"]))) return;
-        newTargets.splice(index2, 1, { ...target, show: !target.show });
+      element.addEventListener("click", () => {
+        const newTargets = [...targets];
+        newTargets.splice(index, 1, { ...target, show: !target.show });
         setTargets(newTargets);
-      };
-      element.addEventListener("click", handleClick);
-      return () => element.removeEventListener("click", handleClick);
+      });
     });
   }, [targets]);
   const getCoords = (target) => {
@@ -72,10 +70,13 @@ const TargetProviderContainer = ({ children }) => {
     return coords;
   };
   const add = (target) => {
-    setTargets(import_lodash.default.concat(targets, target));
+    memory.push(target);
+    setTargets(memory);
   };
   const remove = (ref) => {
-    setTargets(import_lodash.default.filter(targets, (data) => data.ref.current !== ref.current));
+    const index = import_lodash.default.findIndex(memory, (data) => data.ref.current === ref.current);
+    memory.slice(index, 1);
+    setTargets(memory);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     TargetContext.Provider,
@@ -87,8 +88,8 @@ const TargetProviderContainer = ({ children }) => {
       children: [
         import_lodash.default.map(
           targets,
-          (target, index) => target.show && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "div",
+          (target, index) => !!target.show && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_styles.Container,
             {
               style: getCoords(target.ref.current),
               children: target.component

package/dist/contexts/target/index.mjs

@@ -1,24 +1,22 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useState } from "react";
+import { Container } from "./styles";
 import _ from "lodash";
 const TargetContext = createContext({});
+const memory = [];
 const TargetProviderContainer = ({ children }) => {
   const [targets, setTargets] = useState([]);
   useEffect(() => {
-    let newTargets = [...targets];
     _.forEach(targets, (target, index) => {
       var _a;
       const element = (_a = target.ref) == null ? void 0 : _a.current;
       if (!element) return;
-      const handleClick = (index2) => {
-        console.log("CLICANDO");
-        if (JSON.stringify(_.pick(targets, ["show"])) === JSON.stringify(_.pick(newTargets, ["show"]))) return;
-        newTargets.splice(index2, 1, { ...target, show: !target.show });
+      element.addEventListener("click", () => {
+        const newTargets = [...targets];
+        newTargets.splice(index, 1, { ...target, show: !target.show });
         setTargets(newTargets);
-      };
-      element.addEventListener("click", handleClick);
-      return () => element.removeEventListener("click", handleClick);
+      });
     });
   }, [targets]);
   const getCoords = (target) => {
@@ -38,10 +36,13 @@ const TargetProviderContainer = ({ children }) => {
     return coords;
   };
   const add = (target) => {
-    setTargets(_.concat(targets, target));
+    memory.push(target);
+    setTargets(memory);
   };
   const remove = (ref) => {
-    setTargets(_.filter(targets, (data) => data.ref.current !== ref.current));
+    const index = _.findIndex(memory, (data) => data.ref.current === ref.current);
+    memory.slice(index, 1);
+    setTargets(memory);
   };
   return /* @__PURE__ */ jsxs(
     TargetContext.Provider,
@@ -53,8 +54,8 @@ const TargetProviderContainer = ({ children }) => {
       children: [
         _.map(
           targets,
-          (target, index) => target.show && /* @__PURE__ */ jsx(
-            "div",
+          (target, index) => !!target.show && /* @__PURE__ */ jsx(
+            Container,
             {
               style: getCoords(target.ref.current),
               children: target.component

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

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

package/dist/contexts/target/styles.js

@@ -28,103 +28,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var styles_exports = {};
 __export(styles_exports, {
-  Tooltip: () => Tooltip
+  Container: () => Container
 });
 module.exports = __toCommonJS(styles_exports);
 var import_styled_components = __toESM(require("styled-components"));
-const setPosition = ({ position = "top", theme }, isBorder) => {
-  const coord = isBorder ? "9" : "8";
-  const color = isBorder ? theme.t05 : theme.tooltip;
-  const defaultPosition = `
-        transform: translateX(-50%);
-        bottom: -${coord}px;
-        left: 50%;
-        border-left: 8px solid transparent;
-        border-right: 8px solid transparent;
-        border-top: 8px solid ${color};
-    `;
-  switch (position) {
-    case "bottom":
-      return `
-            transform: translateX(-50%);
-            top: -${coord}px;
-            left: 50%;
-            border-left: 8px solid transparent;
-            border-right: 8px solid transparent;
-            border-bottom: 8px solid ${color};
-        `;
-    case "left":
-      return `
-            transform: translateY(-50%);
-            right: -${coord}px;
-            top: 50%;
-            border-top: 8px solid transparent;
-            border-bottom: 8px solid transparent;
-            border-left: 8px solid ${color};
-        `;
-    case "right":
-      return `
-            transform: translateY(-50%);
-            left: -${coord}px;
-            top: 50%;
-            border-top: 8px solid transparent;
-            border-bottom: 8px solid transparent;
-            border-right: 8px solid ${color};
-        `;
-    case "top":
-      return defaultPosition;
-    default:
-      return defaultPosition;
-  }
-};
-const Tooltip = import_styled_components.default.div`
-    position: fixed;
-    background: ${({ theme }) => theme.tooltip};
-    color: ${({ theme }) => theme.t6};
-    font-size: .8rem;
-    font-weight: 500;
-    text-align: center;
-    padding: .3rem .8rem;
-    border-radius: 5px;
-    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;
-        width: 0;
-        height: 0;
-        ${(props) => setPosition(props, true)}
-    }
-
-    &::after {
-        content: "";
-        position: absolute;
-        width: 0;
-        height: 0;
-        ${(props) => setPosition(props)}
-    }
+const Container = import_styled_components.default.div`
+    position: absolute;
 `;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Tooltip
+  Container
 });

package/dist/contexts/target/styles.mjs

@@ -1,96 +1,7 @@
 import styled from "styled-components";
-const setPosition = ({ position = "top", theme }, isBorder) => {
-  const coord = isBorder ? "9" : "8";
-  const color = isBorder ? theme.t05 : theme.tooltip;
-  const defaultPosition = `
-        transform: translateX(-50%);
-        bottom: -${coord}px;
-        left: 50%;
-        border-left: 8px solid transparent;
-        border-right: 8px solid transparent;
-        border-top: 8px solid ${color};
-    `;
-  switch (position) {
-    case "bottom":
-      return `
-            transform: translateX(-50%);
-            top: -${coord}px;
-            left: 50%;
-            border-left: 8px solid transparent;
-            border-right: 8px solid transparent;
-            border-bottom: 8px solid ${color};
-        `;
-    case "left":
-      return `
-            transform: translateY(-50%);
-            right: -${coord}px;
-            top: 50%;
-            border-top: 8px solid transparent;
-            border-bottom: 8px solid transparent;
-            border-left: 8px solid ${color};
-        `;
-    case "right":
-      return `
-            transform: translateY(-50%);
-            left: -${coord}px;
-            top: 50%;
-            border-top: 8px solid transparent;
-            border-bottom: 8px solid transparent;
-            border-right: 8px solid ${color};
-        `;
-    case "top":
-      return defaultPosition;
-    default:
-      return defaultPosition;
-  }
-};
-const Tooltip = styled.div`
-    position: fixed;
-    background: ${({ theme }) => theme.tooltip};
-    color: ${({ theme }) => theme.t6};
-    font-size: .8rem;
-    font-weight: 500;
-    text-align: center;
-    padding: .3rem .8rem;
-    border-radius: 5px;
-    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;
-        width: 0;
-        height: 0;
-        ${(props) => setPosition(props, true)}
-    }
-
-    &::after {
-        content: "";
-        position: absolute;
-        width: 0;
-        height: 0;
-        ${(props) => setPosition(props)}
-    }
+const Container = styled.div`
+    position: absolute;
 `;
 export {
-  Tooltip
+  Container
 };

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

@@ -1,4 +1,4 @@
-import { IButton, IInputSelect, IInputFile, IInputText, IInputTextarea, IInputDateTime, IInputCustom } from "@interfaces";
+import { IButton, IInputSelect } from "@interfaces";
 export * from "./file";
 export * from "./label";
 export * from "./text";
@@ -15,6 +15,6 @@ export interface IForm {
     formRef?: any;
     onSubmit: (values: any, actions?: any) => void;
     clearWhen?: boolean;
-    inputs: Array<IInputSelect & IInputFile & IInputText & IInputTextarea & IInputDateTime & IInputCustom>;
+    inputs: Array<IInputSelect>;
     buttons?: Array<IButton>;
 }

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

@@ -9,9 +9,9 @@ export interface IInputSelect {
     value?: string;
     onChange?: (event: any) => void;
     options: Array<any>;
-    error: string;
+    error?: string;
     disabled?: boolean;
-    onFocus: (value: any) => void;
+    onFocus?: (value: any) => void;
     required?: boolean;
     register?: UseFormRegister<any>;
     validation?: typeof z;

package/dist/test/app.d.ts

@@ -0,0 +1 @@
+export default function App(): import("react/jsx-runtime").JSX.Element;

package/dist/test/index.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gustavo-valsechi/client",
-  "version": "1.4.36",
+  "version": "1.4.38",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -15,7 +15,8 @@
     "build:remodel": "node scripts/remodel.js",
     "build:assets": "node scripts/assets.js",
     "build": "npm run clean && npm run build:js && npm run build:types && npm run build:assets && npm run build:remodel",
-    "commit": "npm run build && npm version patch --no-git-tag-version && npm publish --access public"
+    "commit": "npm run build && npm version patch --no-git-tag-version && npm publish --access public",
+    "dev": "vite --open test/index.html"
   },
   "peerDependencies": {
     "react": "18.3.1",
@@ -24,8 +25,8 @@
   },
   "dependencies": {
     "@emotion/is-prop-valid": "1.3.0",
-    "@gustavo-valsechi/utils": "1.0.4",
     "@gustavo-valsechi/server": "1.0.13",
+    "@gustavo-valsechi/utils": "1.0.4",
     "@hookform/resolvers": "5.2.2",
     "apexcharts": "3.51.0",
     "lodash": "4.17.21",
@@ -48,6 +49,7 @@
     "@types/react-dom": "18.3.0",
     "@types/react-lottie": "1.2.10",
     "@types/styled-components": "5.1.34",
+    "@vitejs/plugin-react": "^5.1.0",
     "esbuild": "0.25.11",
     "esbuild-css-modules-plugin": "^3.1.5",
     "raw-loader": "4.0.2",
@@ -56,7 +58,8 @@
     "rimraf": "6.1.0",
     "styled-components": "6.1.12",
     "tsc-alias": "1.8.16",
-    "typescript": "5.5.4"
+    "typescript": "5.5.4",
+    "vite": "^7.2.1"
   },
   "publishConfig": {
     "access": "public"