@gustavo-valsechi/client 1.3.14 → 1.3.16

package/dist/components/types/credit-card/card/index.js

@@ -1,23 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
-import { Container } from "./styles";
-import { getCardContent } from "../tools";
-// import { Utils } from "@gustavo-valsechi/server"
-import assets from "../assets";
-import _ from "lodash";
-export default function CreditCardComponent(props) {
-    var _a;
-    const flagRef = useRef({});
-    useEffect(() => {
-        const content = getCardContent(props.number);
-        if (!flagRef.current)
-            return;
-        if (!content.logo) {
-            flagRef.current.style.backgroundImage = "";
-            return;
-        }
-        flagRef.current.style.backgroundImage = `url(${content.logo})`;
-    }, [flagRef, props.number]);
-    return (_jsxs(Container, { children: [_jsxs("div", { className: "iz-credit-card-left", children: [_jsx("div", { className: "iz-credit-card-top", children: _jsx("div", { id: "iz-credit-card-chip", style: { backgroundImage: `url(${assets.Chip})` } }) }), _jsxs("div", { className: "iz-credit-card-bottom", children: [_jsx("div", { className: "iz-credit-card-number", children: _jsx("div", { className: "iz-credit-card-elipse" }) }), _jsx("div", { className: "iz-credit-card-name", children: _jsx("div", { className: "iz-credit-card-elipse", children: _.deburr((_a = props.name) === null || _a === void 0 ? void 0 : _a.replace(/[^A-Za-zÀ-ÿ\s]/g, "").toUpperCase()) || "Nome do Titular" }) })] })] }), _jsxs("div", { className: "iz-credit-card-right", children: [_jsx("div", { className: "iz-credit-card-top", children: _jsx("div", { id: "iz-credit-card-flag", ref: flagRef }) }), _jsx("div", { className: "iz-credit-card-bottom", children: _jsx("span", { children: "validade" }) })] })] }));
-}

package/dist/components/types/credit-card/card/styles.d.ts

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

package/dist/components/types/credit-card/card/styles.js

@@ -1,132 +0,0 @@
-"use client";
-import styled from "styled-components";
-export const Container = styled.div `
-    height: 11rem;
-    width: 20rem;
-    border-radius: 8px;
-    background: ${({ theme }) => theme.t05};
-    padding: 1.5rem;
-    display: inline-flex;
-    justify-content: space-between;
-    gap: 1rem;
-    white-space: nowrap;
-    position: relative;
-    z-index: 0;
-    backdrop-filter: blur(5px);
-
-    @media(max-width: ${({ theme }) => theme.mobileMaxWidth}) {
-        width: 100%;
-        height: 10rem;
-    }
-
-    @media(max-width: ${({ theme }) => theme.mobileMinWidth}) {
-        height: 9rem;
-    }
-
-    .iz-credit-card-left {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        gap: 1rem;
-        width: 100%;
-
-        .iz-credit-card-top {
-            div {
-                width: 2.5rem;
-                height: 1.5rem;
-                background-size: contain;
-                background-repeat: no-repeat;
-            }
-        }
-
-        .iz-credit-card-bottom {
-            display: flex;
-            flex-direction: column;
-            gap: .8rem;
-
-            .iz-credit-card-elipse {
-                position: absolute;
-                left: 0;
-                right: 0;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-
-            .iz-credit-card-number {
-                font-size: 1.1rem;
-                font-weight: 600;
-                color: ${({ theme }) => theme.t6};
-                position: relative;
-                height: 1.1rem;
-
-                @media(max-width: ${({ theme }) => theme.mobileMaxWidth}) {
-                    font-size: .9rem;
-                    height: .9rem;
-                }
-
-                @media(max-width: ${({ theme }) => theme.mobileMinWidth}) {
-                    font-size: .7rem;
-                    height: .7rem;
-                }
-            }
-
-            .iz-credit-card-name {
-                font-size: .9rem;
-                font-weight: 500;
-                position: relative;
-                text-transform: uppercase;
-                color: ${({ theme }) => theme.t5};
-                height: .9rem;
-
-                @media(max-width: ${({ theme }) => theme.mobileMaxWidth}) {
-                    font-size: .7rem;
-                    height: .7rem;
-                }
-
-                @media(max-width: ${({ theme }) => theme.mobileMinWidth}) {
-                    font-size: .5rem;
-                    height: .5rem;
-                }
-            }
-        }
-    }
-
-    .iz-credit-card-right {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        align-items: flex-end;
-        gap: 1rem;
-
-        .iz-credit-card-top {
-            display: flex;
-            justify-content: end;
-
-            div {
-                width: 2.5rem;
-                height: 2.5rem;
-                background-size: contain;
-                background-repeat: no-repeat;
-            }
-        }
-
-        .iz-credit-card-bottom {
-            display: flex;
-            flex-direction: column;
-            text-align: right;
-
-            span:first-child {
-                font-size: .6rem;
-                font-weight: 600;
-                color: ${({ theme }) => theme.t3};
-            }
-
-            span:last-child {
-                font-size: .8rem;
-                font-weight: 600;
-                color: ${({ theme }) => theme.t5};
-            }
-        }
-    }
-`;

package/dist/components/types/credit-card/functions/index.d.ts

@@ -1,2 +0,0 @@
-import { ICreditCard } from "../../../../interfaces";
-export default function CreditCardFunctions(props: ICreditCard): false | import("react/jsx-runtime").JSX.Element;

package/dist/components/types/credit-card/functions/index.js

@@ -1,8 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Container } from "./styles";
-import _ from "lodash";
-export default function CreditCardFunctions(props) {
-    return _.some(props.functions, (data) => !data.hide) && (_jsx(Container, { className: "iz-credit-card-function-container", children: _.map(props.functions, (data, index) => !data.hide &&
-            _jsx("div", { className: "iz-credit-card-function", onClick: data.function, children: _jsx("i", { "aria-hidden": true, className: data.icon }) }, index)) }));
-}

package/dist/components/types/credit-card/functions/styles.d.ts

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

package/dist/components/types/credit-card/functions/styles.js

@@ -1,37 +0,0 @@
-"use client";
-import styled from "styled-components";
-export const Container = styled.div `
-    display: flex;
-    flex-direction: column;
-    gap: .5rem;
-    margin-left: -2.5rem;
-    transition: ease .3s;
-    width: 2rem;
-
-    .iz-credit-card-function {
-        width: 2rem;
-        height: 2rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 5px;
-        background: ${({ theme }) => theme.t05};
-        color: ${({ theme }) => theme.t6};
-        font-size: .85rem;
-        transform: translateX(-2rem);
-        opacity: 0;
-        cursor: pointer;
-
-        &:hover {
-            color: ${({ theme }) => theme.t8};
-        }
-    }
-
-    .iz-credit-card-function:nth-child(1) {
-        transition: 5s ease transform, ease .2s opacity, ease .3s color;
-    }
-
-    .iz-credit-card-function:nth-child(2) {
-        transition: .3s ease .1s transform, ease .2s opacity, ease .3s color;
-    }
-`;

package/dist/components/types/credit-card/index.d.ts

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

package/dist/components/types/credit-card/index.js

@@ -1,29 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Container } from "./styles";
-import Card from "./card";
-import Functions from "./functions";
-export function CreditCard(props) {
-    const functions = [
-        {
-            icon: "fa-regular fa-pen-to-square",
-            label: "Editar",
-            function: props.onEdit,
-            hide: !props.onEdit
-        },
-        {
-            icon: "fa-solid fa-gear",
-            label: "Configurações",
-            function: props.onConfig,
-            hide: !props.onConfig
-        },
-        {
-            icon: "fa-solid fa-trash-can",
-            label: "Remover",
-            function: props.onRemove,
-            hide: !props.onRemove
-        },
-        ...(props.functions || [])
-    ];
-    return (_jsxs(Container, { children: [_jsx(Card, { ...props }), _jsx(Functions, { ...props, functions: functions })] }));
-}

package/dist/components/types/credit-card/styles.d.ts

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

package/dist/components/types/credit-card/styles.js

@@ -1,34 +0,0 @@
-"use client";
-import styled from "styled-components";
-export const Container = styled.div `
-    border-radius: 8px 8px 0 0;
-    transition: .2s ease .2s background, .2s ease .2s padding;
-    position: relative;
-    display: flex;
-    gap: .5rem;
-    height: 11rem;
-    pointer-events: all;
-
-    @media(max-width: ${({ theme }) => theme.mobileMaxWidth}) {
-        width: 100%;
-    }
-
-    &:hover {
-        .iz-credit-card-function-container {
-            margin-left: 0;
-
-            .iz-credit-card-function {
-                transform: translateX(0);
-                opacity: 1;
-            }
-
-            .iz-credit-card-function:nth-child(1) {
-                transition: .3s ease transform, .2s ease .1s opacity, ease .3s color;
-            }
-
-            .iz-credit-card-function:nth-child(2) {
-                transition: .3s ease .1s transform, .2s ease .2s opacity, ease .3s color;
-            }
-        }
-    }
-`;

package/dist/components/types/credit-card/tools/index.d.ts

@@ -1,6 +0,0 @@
-import luhn from "luhn";
-export declare const validateLuhn: typeof luhn.validate;
-export declare const getCardContent: (cardNumber: string) => {
-    flag: string;
-    logo: string;
-};

package/dist/components/types/credit-card/tools/index.js

@@ -1,19 +0,0 @@
-import creditCardType from "credit-card-type";
-import assets from "../assets";
-import luhn from "luhn";
-import _ from "lodash";
-export const validateLuhn = luhn.validate;
-export const getCardContent = (cardNumber) => {
-    const content = { flag: "", logo: "" };
-    if (!cardNumber)
-        return content;
-    const potentialCardContents = creditCardType(cardNumber);
-    if (potentialCardContents.length === 1) {
-        const cardContent = potentialCardContents.shift();
-        const flag = cardContent === null || cardContent === void 0 ? void 0 : cardContent.type;
-        content.flag = flag || "";
-        content.logo = assets[_.upperFirst(_.camelCase(flag))] || "";
-        return content;
-    }
-    return content;
-};

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

@@ -1,3 +0,0 @@
-import { IForm } from "../../../interfaces";
-export * from "./types";
-export declare function Form(props: IForm): import("react/jsx-runtime").JSX.Element;

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

@@ -1,53 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useRef } from "react";
-import { Container } from "./styles";
-import { z } from "zod";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import _ from "lodash";
-import * as Types from "./types";
-export * from "./types";
-export function Form(props) {
-    const formRef = props.formRef || useRef({});
-    const setSchema = () => {
-        const schema = {};
-        _.forEach(props.inputs, (data) => {
-            if (!data.validation)
-                return;
-            schema[data.name] = data.validation;
-        });
-        if (props.validation)
-            return props.validation(z.object(schema));
-        return z.object(schema);
-    };
-    const schema = setSchema();
-    const { register, handleSubmit, reset, formState: { errors } } = useForm({
-        resolver: zodResolver(schema),
-        defaultValues: props.defaultValues,
-        mode: "all"
-    });
-    useEffect(() => {
-        if (!props.clearWhen)
-            return;
-        reset(undefined, { keepErrors: false });
-    }, [props.clearWhen]);
-    useEffect(() => {
-        var _a;
-        if (!props.defaultValues || !((_a = Object.keys(props.defaultValues || {})) === null || _a === void 0 ? void 0 : _a.length))
-            return;
-        _.forEach(props.defaultValues, (value, key) => {
-            const input = _.find(props.inputs, (data) => data.name === key);
-            props.defaultValues[key] = input.mask ? input.mask(value) : value;
-        });
-        reset(props.defaultValues, { keepErrors: false });
-    }, [props.defaultValues]);
-    const component = (data) => {
-        var _a;
-        const component = Types[_.camelCase(data.type)];
-        const TypeComponent = component || Types.InputText;
-        return _jsx(TypeComponent, { ..._.omit(data, ["validation"]), id: data.name, type: component ? undefined : data.type, error: (_a = errors[data.name]) === null || _a === void 0 ? void 0 : _a.message, register: register });
-    };
-    return (_jsxs(Container, { ref: formRef, onSubmit: handleSubmit(props.onSubmit), children: [_.map(props.inputs, (data, index) => _jsx(React.Fragment, { children: component(data) }, index)), _.isArray(props.buttons) &&
-                _jsx("div", { className: "form-buttons", children: _.map(props.buttons, (data, index) => _jsx(Types.Button, { ...data }, index)) })] }));
-}

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

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

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

@@ -1,15 +0,0 @@
-"use client";
-import styled from "styled-components";
-export const Container = styled.form `
-    width: 100%;
-
-    .form-buttons {
-        width: 100%;
-        padding-top: 1rem;
-
-        button {
-            width: 100%;
-            margin-top: 1rem;
-        }
-    }
-`;

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

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

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

@@ -1,8 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Container } from "./styles";
-import { Loading } from "./loading";
-import _ from "lodash";
-export function Button(props) {
-    return (_jsxs(Container, { loading: String(!!props.loading), disabled: props.disabled, type: props.type || "button", ..._.omit(props, ["loading", "type"]), children: [!!props.loading && _jsx(Loading, {}), _jsx("span", { children: props.label })] }));
-}

package/dist/components/types/form/types/button/loading/index.d.ts

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

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

@@ -1,6 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Container } from "./styles";
-export function Loading() {
-    return (_jsxs(Container, { children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {})] }));
-}

package/dist/components/types/form/types/button/loading/styles.d.ts

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

package/dist/components/types/form/types/button/loading/styles.js

@@ -1,88 +0,0 @@
-"use client";
-import styled from "styled-components";
-export const Container = styled.div `
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 2rem;
-    margin-right: .5rem;
-
-    div {
-        width: .5rem;
-        height: .5rem;
-        border-radius: 1rem;
-        background: rgb(255, 255, 255, 1);
-
-        &:nth-child(1) {
-            animation: blinkOne infinite ease 2s;
-        }
-
-        &:nth-child(2) {
-            animation: blinkTwo infinite ease 2s;
-        }
-
-        &:nth-child(3) {
-            animation: blinkThree infinite ease 2s;
-        }
-    }
-
-    @keyframes blinkOne {
-        0% {
-            opacity: 0.8;
-        }
-        20% {
-            opacity: 0.2;
-        }
-        40% {
-            opacity: 0.2;
-        }
-        60% {
-            opacity: 0.2;
-        }
-        80% {
-            opacity: 0.2;
-        }
-        100% {
-            opacity: 0.8;
-        }
-    }
-
-    @keyframes blinkTwo {
-        0% {
-            opacity: 0.2;
-        }
-        20% {
-            opacity: 0.8;
-        }
-        40% {
-            opacity: 0.2;
-        }
-        60% {
-            opacity: 0.2;
-        }
-        80% {
-            opacity: 0.8;
-        }
-        100% {
-            opacity: 0.2;
-        }
-    }
-
-    @keyframes blinkThree {
-        0% {
-            opacity: 0.2;
-        }
-        25% {
-            opacity: 0.2;
-        }
-        50% {
-            opacity: 0.8;
-        }
-        75% {
-            opacity: 0.2;
-        }
-        100% {
-            opacity: 0.2;
-        }
-    }
-`;

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

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

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

@@ -1,55 +0,0 @@
-"use client";
-import styled from "styled-components";
-export const Container = styled.button `
-    border-radius: 5px;
-    font-size: .8rem;
-    font-weight: 500;
-    transition: ease .3s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: ${(props) => props.transparent
-    ? props.theme.t6
-    : props.outline
-        ? props.color || props.theme.secondary
-        : "#fff !important"};
-    background: ${(props) => props.transparent
-    ? "transparent"
-    : props.outline ? props.theme.t05 : props.color || props.theme.secondary};
-    border: 1px solid ${(props) => props.transparent
-    ? "transparent"
-    : props.outline ? props.theme.t05 : props.color || props.theme.secondary};
-    pointer-events: ${(props) => props.loading === "true" ? "none" : "auto"};
-    cursor: ${(props) => props.loading === "true" ? "default" : "pointer"};
-    opacity: ${(props) => props.loading === "true" ? .6 : 1};
-    padding: .4rem 2.5rem;
-    transition: ease .3s;
-
-    span {
-        text-align: center;
-        cursor: ${(props) => props.loading === "true" ? "default" : "pointer"};
-    }
-
-    &:disabled {
-        pointer-events: none;
-        
-        &::before {
-            opacity: .6;
-        }
-    }
-
-    &:hover {
-        opacity: .9;
-        color: ${(props) => props.transparent
-    ? props.theme.t6
-    : props.outline
-        ? props.color || props.theme.secondary
-        : "#fff"};
-        
-        &::before {
-            background: ${(props) => props.transparent
-    ? "transparent"
-    : props.color || props.theme.secondary};
-        }
-    }
-`;

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

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

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

@@ -1,20 +0,0 @@
-"use client";
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Container } from "./styles";
-import { InputLabel } from "../label";
-import _ from "lodash";
-export function InputDateTime(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(event);
-    };
-    return (_jsxs(Container, { className: props.className, error: props.error, children: [!!props.label && _jsxs(InputLabel, { children: [props.label, props.required ? "*" : ""] }), _jsx("div", { className: "iz-input-content", children: _jsx("input", { ..._.omit(props, ["className", "onChange", "mask", "type", "required", "register"]), type: "datetime-local", onFocus: () => {
-                        if (props.onFocus)
-                            props.onFocus(props.name);
-                    }, maxLength: props.maxLength || 255, ...register, onChange: onChange }) }), !!props.error && (_jsx("div", { className: "iz-input-error", children: props.error }))] }));
-}

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

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

package/dist/components/types/form/types/datetime/styles.js

@@ -1,40 +0,0 @@
-"use client";
-import styled from "styled-components";
-export const 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;
-
-        input {
-            border: 0;
-            padding: .5rem 1rem;
-            width: 100%;
-            font-size: .8rem;
-            background-color: ${({ theme }) => theme.primary};
-            color: ${({ theme }) => theme.t6};
-            color-scheme: ${(props) => props.theme || "light"};
-
-            &: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;
-    }
-`;

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

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

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

@@ -1,24 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
-import { Container } from "./styles";
-import { InputLabel } from "../label";
-export function InputFile(props) {
-    var _a;
-    const inputRef = useRef({});
-    const register = (props.register || ((name) => ({})))(props.name || "");
-    const readImage = (data) => {
-        if (props.onPreview)
-            props.onPreview(URL.createObjectURL(data));
-        if (props.onChange)
-            props.onChange(data);
-    };
-    return (_jsxs(Container, { className: props.className, error: props.error, disabled: props.disabled, children: [_jsx("input", { hidden: true, type: "file", id: "file", accept: "image/*", ref: inputRef, disabled: props.disabled, name: props.name, onFocus: () => {
-                    if (props.onFocus)
-                        props.onFocus(props.name);
-                }, ...register, onChange: (e) => {
-                    var _a;
-                    register.onChange(e);
-                    readImage((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]);
-                } }), !!props.label && _jsxs(InputLabel, { children: [props.label, props.required ? "*" : ""] }), _jsx("div", { className: "iz-image-content", onClick: () => inputRef.current.click(), children: ((_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.value) || "selecione uma imagem" }), !!props.error && (_jsx("div", { className: "iz-input-error", children: props.error }))] }));
-}