@gustavo-valsechi/client 1.3.23 → 1.3.25

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

@@ -0,0 +1,113 @@
+"use client";
+"use client";
+
+// components/types/form/types/input/index.tsx
+import { useState } from "react";
+
+// components/types/form/types/input/styles.tsx
+import styled from "styled-components";
+var Container = styled.div`
+    width: 100%;
+    padding-top: .3rem;
+
+    .iz-input-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid ${({ error, theme }) => error ? theme.negative : theme.t2};
+        border-radius: 5px;
+        overflow: hidden;
+        padding-right: ${({ password }) => password ? ".6rem" : "0rem"};
+        background-color: ${({ theme }) => theme.primary};
+
+        input {
+            border: 0;
+            padding: .5rem 1rem;
+            width: 100%;
+            font-size: .8rem;
+            background-color: ${({ theme }) => theme.primary};
+            color: ${({ theme }) => theme.t6};
+
+            &:disabled {
+                background-color: ${({ theme }) => theme.t2};
+                color: ${({ theme }) => theme.t6};
+                opacity: .7;
+            }
+
+            &:focus-visible {
+                outline: none;
+            }
+        }
+
+        i {
+            color: ${({ theme }) => theme.t3};
+            cursor: pointer;
+        }
+    }
+
+    .iz-input-error {
+        color: ${({ theme }) => theme.negative};
+        font-size: .7rem;
+    }
+`;
+
+// components/types/form/types/label/styles.tsx
+import styled2 from "styled-components";
+var Container2 = styled2.label`
+    font-size: .8rem;
+    font-weight: 500;
+    color: ${({ theme }) => theme.t6};
+`;
+
+// components/types/form/types/label/index.tsx
+import { jsx } from "react/jsx-runtime";
+function InputLabel(props) {
+  return /* @__PURE__ */ jsx(Container2, { className: props.className, children: props.children });
+}
+
+// components/types/form/types/input/index.tsx
+import _ from "lodash";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function InputText(props) {
+  const [showPassword, setShowPassword] = useState(false);
+  const register = (props.register || ((name) => ({})))(props.name || "");
+  const onChange = (event) => {
+    const value = event.target.value || "";
+    event.target.value = props.mask ? props.mask(value) : value;
+    if (register.onChange) register.onChange(event);
+    if (props.onChange) props.onChange(value);
+  };
+  return /* @__PURE__ */ jsxs(Container, { className: props.className, error: props.error, password: props.type === "password", children: [
+    !!props.label && /* @__PURE__ */ jsxs(InputLabel, { children: [
+      props.label,
+      props.required ? "*" : ""
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "iz-input-content", children: [
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          ..._.omit(props, ["className", "register", "mask"]),
+          type: props.type === "password" ? showPassword ? "text" : "password" : props.type,
+          maxLength: props.maxLength || 255,
+          onFocus: () => {
+            if (props.onFocus) props.onFocus(props.name);
+          },
+          ...register,
+          onChange
+        }
+      ),
+      props.type === "password" && /* @__PURE__ */ jsx2(
+        "i",
+        {
+          "aria-hidden": true,
+          className: showPassword ? "fa-solid fa-eye-slash" : "fa-solid fa-eye",
+          onClick: () => setShowPassword(!showPassword)
+        }
+      )
+    ] }),
+    !!props.error && /* @__PURE__ */ jsx2("div", { className: "iz-input-error", children: props.error })
+  ] });
+}
+export {
+  InputText
+};

package/dist/components/types/form/types/input/styles.d.ts

@@ -0,0 +1 @@
+export declare const Container: any;

package/dist/components/types/form/types/input/styles.mjs

@@ -0,0 +1,52 @@
+"use client";
+"use client";
+
+// components/types/form/types/input/styles.tsx
+import styled from "styled-components";
+var Container = styled.div`
+    width: 100%;
+    padding-top: .3rem;
+
+    .iz-input-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid ${({ error, theme }) => error ? theme.negative : theme.t2};
+        border-radius: 5px;
+        overflow: hidden;
+        padding-right: ${({ password }) => password ? ".6rem" : "0rem"};
+        background-color: ${({ theme }) => theme.primary};
+
+        input {
+            border: 0;
+            padding: .5rem 1rem;
+            width: 100%;
+            font-size: .8rem;
+            background-color: ${({ theme }) => theme.primary};
+            color: ${({ theme }) => theme.t6};
+
+            &:disabled {
+                background-color: ${({ theme }) => theme.t2};
+                color: ${({ theme }) => theme.t6};
+                opacity: .7;
+            }
+
+            &:focus-visible {
+                outline: none;
+            }
+        }
+
+        i {
+            color: ${({ theme }) => theme.t3};
+            cursor: pointer;
+        }
+    }
+
+    .iz-input-error {
+        color: ${({ theme }) => theme.negative};
+        font-size: .7rem;
+    }
+`;
+export {
+  Container
+};

package/dist/components/types/form/types/label/index.d.ts

@@ -0,0 +1,2 @@
+import { IInputLabel } from "@interfaces";
+export declare function InputLabel(props: IInputLabel): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+"use client";
+"use client";
+
+// components/types/form/types/label/styles.tsx
+import styled from "styled-components";
+var Container = styled.label`
+    font-size: .8rem;
+    font-weight: 500;
+    color: ${({ theme }) => theme.t6};
+`;
+
+// components/types/form/types/label/index.tsx
+import { jsx } from "react/jsx-runtime";
+function InputLabel(props) {
+  return /* @__PURE__ */ jsx(Container, { className: props.className, children: props.children });
+}
+export {
+  InputLabel
+};

package/dist/components/types/form/types/label/styles.d.ts

@@ -0,0 +1 @@
+export declare const Container: any;

package/dist/components/types/form/types/label/styles.mjs

@@ -0,0 +1,13 @@
+"use client";
+"use client";
+
+// components/types/form/types/label/styles.tsx
+import styled from "styled-components";
+var Container = styled.label`
+    font-size: .8rem;
+    font-weight: 500;
+    color: ${({ theme }) => theme.t6};
+`;
+export {
+  Container
+};

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

@@ -0,0 +1,2 @@
+import { IInputSelect } from "@interfaces";
+export declare function InputSelect(props: IInputSelect): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,125 @@
+"use client";
+"use client";
+
+// components/types/form/types/select/index.tsx
+import { useState } from "react";
+
+// components/types/form/types/select/styles.tsx
+import styled from "styled-components";
+var Container = styled.div`
+    width: 100%;
+    padding-top: .3rem;
+
+    .iz-input-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid ${({ error, theme }) => error ? theme.negative : theme.t2};
+        border-radius: 5px;
+        overflow: hidden;
+        position: relative;
+        cursor: pointer;
+
+        select {
+            border: 0;
+            padding: .5rem 2.3rem .5rem 1rem;
+            width: 100%;
+            font-size: .8rem;
+            appearance: none;
+            cursor: pointer;
+            background-color: ${({ theme }) => theme.primary};
+            color: ${({ theme }) => theme.t6};
+
+            &:disabled {
+                background-color: ${({ theme }) => theme.t2};
+                color: ${({ theme }) => theme.t6};
+                opacity: .7;
+            }
+
+            &:focus-visible {
+                outline: none;
+            }
+        }
+
+        i {
+            position: absolute;
+            top: 50%;
+            right: .8rem;
+            transform: translateY(-50%);
+            font-size: .8rem;
+            color: ${({ theme }) => theme.t6};
+        }
+    }
+
+    .iz-input-error {
+        color: ${({ theme }) => theme.negative};
+        font-size: .7rem;
+    }
+`;
+
+// components/types/form/types/label/styles.tsx
+import styled2 from "styled-components";
+var Container2 = styled2.label`
+    font-size: .8rem;
+    font-weight: 500;
+    color: ${({ theme }) => theme.t6};
+`;
+
+// components/types/form/types/label/index.tsx
+import { jsx } from "react/jsx-runtime";
+function InputLabel(props) {
+  return /* @__PURE__ */ jsx(Container2, { className: props.className, children: props.children });
+}
+
+// components/types/form/types/select/index.tsx
+import _ from "lodash";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function InputSelect(props) {
+  const [focus, setFocus] = useState(false);
+  const register = (props.register || ((name) => ({})))(props.name || "");
+  const onChange = (event) => {
+    const value = event.target.value || "";
+    if (register.onChange) register.onChange(event);
+    if (props.onChange) props.onChange(value);
+  };
+  return /* @__PURE__ */ jsxs(Container, { className: props.className, error: props.error, children: [
+    !!props.label && /* @__PURE__ */ jsxs(InputLabel, { children: [
+      props.label,
+      props.required ? "*" : ""
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "iz-input-content", children: [
+      /* @__PURE__ */ jsx2(
+        "select",
+        {
+          ..._.omit(props, ["className", "onChange", "onFocus", "options", "onMouseDown", "onBlur", "maxLength", "required", "register"]),
+          onMouseDown: () => setFocus(!focus),
+          onFocus: () => {
+            if (props.onFocus) props.onFocus(props.name);
+          },
+          ...register,
+          onBlur: (event) => {
+            if (register.onBlur) register.onBlur(event);
+            setFocus(false);
+          },
+          onChange,
+          children: _.map(
+            props.options,
+            (data, index) => /* @__PURE__ */ jsx2(
+              "option",
+              {
+                value: Object.keys(data),
+                children: Object.values(data)
+              },
+              index
+            )
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx2("i", { "aria-hidden": true, className: focus ? "fa-solid fa-chevron-up" : "fa-solid fa-chevron-down" })
+    ] }),
+    !!props.error && /* @__PURE__ */ jsx2("div", { className: "iz-input-error", children: props.error })
+  ] });
+}
+export {
+  InputSelect
+};

package/dist/components/types/form/types/select/styles.d.ts

@@ -0,0 +1 @@
+export declare const Container: any;

package/dist/components/types/form/types/select/styles.mjs

@@ -0,0 +1,58 @@
+"use client";
+"use client";
+
+// components/types/form/types/select/styles.tsx
+import styled from "styled-components";
+var Container = styled.div`
+    width: 100%;
+    padding-top: .3rem;
+
+    .iz-input-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid ${({ error, theme }) => error ? theme.negative : theme.t2};
+        border-radius: 5px;
+        overflow: hidden;
+        position: relative;
+        cursor: pointer;
+
+        select {
+            border: 0;
+            padding: .5rem 2.3rem .5rem 1rem;
+            width: 100%;
+            font-size: .8rem;
+            appearance: none;
+            cursor: pointer;
+            background-color: ${({ theme }) => theme.primary};
+            color: ${({ theme }) => theme.t6};
+
+            &:disabled {
+                background-color: ${({ theme }) => theme.t2};
+                color: ${({ theme }) => theme.t6};
+                opacity: .7;
+            }
+
+            &:focus-visible {
+                outline: none;
+            }
+        }
+
+        i {
+            position: absolute;
+            top: 50%;
+            right: .8rem;
+            transform: translateY(-50%);
+            font-size: .8rem;
+            color: ${({ theme }) => theme.t6};
+        }
+    }
+
+    .iz-input-error {
+        color: ${({ theme }) => theme.negative};
+        font-size: .7rem;
+    }
+`;
+export {
+  Container
+};

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

@@ -0,0 +1,2 @@
+import { IInputTextarea } from "@interfaces";
+export declare function InputTextarea(props: IInputTextarea): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,92 @@
+"use client";
+"use client";
+
+// components/types/form/types/textarea/styles.tsx
+import styled from "styled-components";
+var Container = styled.div`
+    width: 100%;
+    padding-top: .3rem;
+
+    .iz-input-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid ${({ error, theme }) => error ? theme.negative : theme.t2};
+        border-radius: 5px;
+        overflow: hidden;
+
+        textarea {
+            border: 0;
+            padding: .5rem 1rem;
+            width: 100%;
+            font-size: .8rem;
+            background-color: ${({ theme }) => theme.primary};
+            color: ${({ theme }) => theme.t6};
+
+            &:disabled {
+                background-color: ${({ theme }) => theme.t2};
+                color: ${({ theme }) => theme.t6};
+                opacity: .7;
+            }
+
+            &:focus-visible {
+                outline: none;
+            }
+        }
+    }
+
+    .iz-input-error {
+        color: ${({ theme }) => theme.negative};
+        font-size: .7rem;
+    }
+`;
+
+// components/types/form/types/label/styles.tsx
+import styled2 from "styled-components";
+var Container2 = styled2.label`
+    font-size: .8rem;
+    font-weight: 500;
+    color: ${({ theme }) => theme.t6};
+`;
+
+// components/types/form/types/label/index.tsx
+import { jsx } from "react/jsx-runtime";
+function InputLabel(props) {
+  return /* @__PURE__ */ jsx(Container2, { className: props.className, children: props.children });
+}
+
+// components/types/form/types/textarea/index.tsx
+import _ from "lodash";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function InputTextarea(props) {
+  const register = (props.register || ((name) => ({})))(props.name || "");
+  const onChange = (event) => {
+    const value = event.target.value || "";
+    event.target.value = props.mask ? props.mask(value) : value;
+    if (register.onChange) register.onChange(event);
+    if (props.onChange) props.onChange(value);
+  };
+  return /* @__PURE__ */ jsxs(Container, { className: props.className, error: props.error, children: [
+    !!props.label && /* @__PURE__ */ jsxs(InputLabel, { children: [
+      props.label,
+      props.required ? "*" : ""
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "iz-input-content", children: /* @__PURE__ */ jsx2(
+      "textarea",
+      {
+        ..._.omit(props, ["onFocus", "maxLength", "className", "onChange", "mask", "rows", "required", "register"]),
+        maxLength: props.maxLength,
+        rows: props.rows || 5,
+        onFocus: () => {
+          if (props.onFocus) props.onFocus(props.name);
+        },
+        ...register,
+        onChange
+      }
+    ) }),
+    !!props.error && /* @__PURE__ */ jsx2("div", { className: "iz-input-error", children: props.error })
+  ] });
+}
+export {
+  InputTextarea
+};

package/dist/components/types/form/types/textarea/styles.d.ts

@@ -0,0 +1 @@
+export declare const Container: any;

package/dist/components/types/form/types/textarea/styles.mjs

@@ -0,0 +1,45 @@
+"use client";
+"use client";
+
+// components/types/form/types/textarea/styles.tsx
+import styled from "styled-components";
+var Container = styled.div`
+    width: 100%;
+    padding-top: .3rem;
+
+    .iz-input-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: 1px solid ${({ error, theme }) => error ? theme.negative : theme.t2};
+        border-radius: 5px;
+        overflow: hidden;
+
+        textarea {
+            border: 0;
+            padding: .5rem 1rem;
+            width: 100%;
+            font-size: .8rem;
+            background-color: ${({ theme }) => theme.primary};
+            color: ${({ theme }) => theme.t6};
+
+            &:disabled {
+                background-color: ${({ theme }) => theme.t2};
+                color: ${({ theme }) => theme.t6};
+                opacity: .7;
+            }
+
+            &:focus-visible {
+                outline: none;
+            }
+        }
+    }
+
+    .iz-input-error {
+        color: ${({ theme }) => theme.negative};
+        font-size: .7rem;
+    }
+`;
+export {
+  Container
+};

package/dist/components/types/index.d.ts

@@ -0,0 +1,11 @@
+export * from "./table";
+export * from "./loading";
+export * from "./modal";
+export * from "./badge";
+export * from "./logo";
+export * from "./form";
+export * from "./chart";
+export * from "./avatar";
+export * from "./lottie";
+export * from "./credit-card";
+export * from "./block";