@gustavo-valsechi/client 1.3.23 → 1.3.25

package/dist/contexts/theme/index.mjs

@@ -0,0 +1,201 @@
+"use client";
+"use client";
+
+// contexts/theme/index.tsx
+import { createContext, useContext, useState } from "react";
+import { ThemeProvider } from "styled-components";
+
+// contexts/theme/styles.tsx
+import styled from "styled-components";
+var Switcher = styled.div`
+    width: 3rem;
+    height: 1.5rem;
+    border-radius: 1rem;
+    border: 2px solid ${({ theme }) => theme.t05};
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    position: relative;
+
+    i {
+        color: ${({ theme }) => theme.t6};
+        position: absolute;
+        transform: translateY(-50%);
+        font-size: .9rem;
+        z-index: 0;
+        transition: ease .8s;
+
+        &:first-child {
+            left: .2rem;
+            top: 50%;
+            opacity: ${(props) => props["data-theme"] === "light" ? 0 : 1};
+        }
+
+        &:last-child {
+            right: .2rem;
+            top: 50%;
+            opacity: ${(props) => props["data-theme"] === "light" ? 1 : 0};
+        }
+    }
+    
+    .switcher {
+        width: 1rem;
+        height: 1rem;
+        border-radius: 1rem;
+        position: relative;
+        transition: ease .3s;
+        transform: ${(props) => props["data-theme"] === "light" ? "transform: translateX(.2rem)" : "translateX(1.6rem)"};
+        z-index: 1;
+
+        div {
+            width: 100%;
+            height: 100%;
+            background: ${({ theme }) => theme.primary};
+            border-radius: 1rem;
+            position: relative;
+            z-index: 2;
+        }
+
+        &:after {
+            content: "";
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            border-radius: 1rem;
+            transform: scale(1.8);
+            background: ${({ theme }) => theme.t05};
+            top: 0;
+            left: 0;
+            z-index: 1;
+        }
+
+        &:before {
+            content: "";
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            border-radius: 1rem;
+            transform: scale(3);
+            background: ${({ theme }) => theme.t05};
+            top: 0;
+            left: 0;
+            z-index: 0;
+        }
+    }
+`;
+
+// contexts/theme/content.tsx
+var CommonTheme = {
+  secondary: "#5869da",
+  tertiary: "#629dfd33",
+  positive: "#65c965",
+  negative: "#FF334E",
+  mobileMaxWidth: "650px",
+  mobileMinWidth: "315px"
+};
+var Themes = {
+  light: {
+    primary: "#ffffff",
+    reverse: "#353535",
+    tooltip: "#f2f2f2",
+    t8: "#000000cc",
+    t7: "#000000b3",
+    t6: "#00000099",
+    t5: "#00000080",
+    t4: "#00000066",
+    t3: "#0000004d",
+    t2: "#00000033",
+    t1: "#0000001a",
+    t08: "#00000014",
+    t05: "#0000000d",
+    t03: "#00000007",
+    t02: "#00000005",
+    t01: "#00000002",
+    lgrad: `linear-gradient(
+            to right, 
+            #dadef7 0%, 
+            #dee2f8 5%, 
+            #e2e5f9 10%, 
+            #e6e9fa 20%, 
+            #eaedfb 30%, 
+            #eff0fb 60%, 
+            #f3f4fc 80%, 
+            #f7f8fd 90%, 
+            #fbfbfe 100%
+        )`,
+    maingrad: "linear-gradient(330deg, #b9c0ff7a 0%, #ffffff 100%)",
+    ...CommonTheme
+  },
+  dark: {
+    primary: "#333333",
+    reverse: "#b45252",
+    tooltip: "#3d3d3d",
+    t8: "#ffffffcc",
+    t7: "#ffffffb3",
+    t6: "#ffffff99",
+    t5: "#ffffff80",
+    t4: "#ffffff66",
+    t3: "#ffffff4d",
+    t2: "#ffffff33",
+    t1: "#ffffff1a",
+    t08: "#ffffff14",
+    t05: "#ffffff0d",
+    t03: "#ffffff07",
+    t02: "#ffffff05",
+    t01: "#ffffff02",
+    lgrad: `linear-gradient(
+            to right, 
+            #3d485c 0%, 
+            #3c4657 5%, 
+            #3b4353 10%, 
+            #3a414e 20%, 
+            #393f4a 30%, 
+            #373c45 60%, 
+            #363a41 80%, 
+            #35383c 90%, 
+            #343538 100%
+        )`,
+    maingrad: "linear-gradient(330deg, #1d1e27 0%, #333333 100%)",
+    ...CommonTheme
+  }
+};
+
+// contexts/theme/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ThemeContext = createContext({});
+var ThemeProviderContainer = (props) => {
+  const [theme, setTheme] = useState("light");
+  const [defaultTheme] = useState("light");
+  const SwitcherComponent = () => {
+    return /* @__PURE__ */ jsxs(
+      Switcher,
+      {
+        onClick: () => setTheme(theme === "light" ? "dark" : "light"),
+        "data-theme": theme || defaultTheme,
+        children: [
+          /* @__PURE__ */ jsx("i", { "aria-hidden": true, className: "fa-solid fa-moon" }),
+          /* @__PURE__ */ jsx("div", { className: "switcher", children: /* @__PURE__ */ jsx("div", {}) }),
+          /* @__PURE__ */ jsx("i", { "aria-hidden": true, className: "fa-solid fa-sun" })
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    ThemeContext.Provider,
+    {
+      value: {
+        theme: props.theme || defaultTheme,
+        setTheme,
+        content: Themes[props.theme || defaultTheme],
+        Switcher: SwitcherComponent
+      },
+      children: /* @__PURE__ */ jsx(ThemeProvider, { theme: Themes[props.theme || defaultTheme], children: props.children })
+    }
+  );
+};
+var useTheme = () => useContext(ThemeContext);
+export {
+  ThemeProviderContainer as ThemeProvider,
+  useTheme
+};

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

@@ -0,0 +1 @@
+export declare const Switcher: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/contexts/theme/styles.mjs

@@ -0,0 +1,84 @@
+"use client";
+
+// contexts/theme/styles.tsx
+import styled from "styled-components";
+var Switcher = styled.div`
+    width: 3rem;
+    height: 1.5rem;
+    border-radius: 1rem;
+    border: 2px solid ${({ theme }) => theme.t05};
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    position: relative;
+
+    i {
+        color: ${({ theme }) => theme.t6};
+        position: absolute;
+        transform: translateY(-50%);
+        font-size: .9rem;
+        z-index: 0;
+        transition: ease .8s;
+
+        &:first-child {
+            left: .2rem;
+            top: 50%;
+            opacity: ${(props) => props["data-theme"] === "light" ? 0 : 1};
+        }
+
+        &:last-child {
+            right: .2rem;
+            top: 50%;
+            opacity: ${(props) => props["data-theme"] === "light" ? 1 : 0};
+        }
+    }
+    
+    .switcher {
+        width: 1rem;
+        height: 1rem;
+        border-radius: 1rem;
+        position: relative;
+        transition: ease .3s;
+        transform: ${(props) => props["data-theme"] === "light" ? "transform: translateX(.2rem)" : "translateX(1.6rem)"};
+        z-index: 1;
+
+        div {
+            width: 100%;
+            height: 100%;
+            background: ${({ theme }) => theme.primary};
+            border-radius: 1rem;
+            position: relative;
+            z-index: 2;
+        }
+
+        &:after {
+            content: "";
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            border-radius: 1rem;
+            transform: scale(1.8);
+            background: ${({ theme }) => theme.t05};
+            top: 0;
+            left: 0;
+            z-index: 1;
+        }
+
+        &:before {
+            content: "";
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            border-radius: 1rem;
+            transform: scale(3);
+            background: ${({ theme }) => theme.t05};
+            top: 0;
+            left: 0;
+            z-index: 0;
+        }
+    }
+`;
+export {
+  Switcher
+};

package/dist/contexts/tooltip/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare const TooltipProviderContainer: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const useTooltip: () => any;
+export { TooltipProviderContainer as TooltipProvider, useTooltip };

package/dist/contexts/tooltip/index.mjs

@@ -0,0 +1,117 @@
+"use client";
+"use client";
+
+// contexts/tooltip/index.tsx
+import { createContext, useContext, useEffect, useState } from "react";
+
+// contexts/tooltip/styles.tsx
+import styled from "styled-components";
+var 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;
+    transform: translateX(-50%);
+    z-index: 10;
+    border: 1px solid ${({ theme }) => theme.t05};
+
+    &::before {
+        content: "";
+        position: absolute;
+        bottom: -9px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        height: 0;
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+        border-top: 8px solid ${({ theme }) => theme.t05};
+    }
+
+    &::after {
+        content: "";
+        position: absolute;
+        bottom: -8px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        height: 0;
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+        border-top: 8px solid ${({ theme }) => theme.tooltip};
+    }
+`;
+
+// contexts/tooltip/index.tsx
+import _ from "lodash";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TooltipContext = createContext({});
+var TooltipProviderContainer = ({ children }) => {
+  const [tooltips, setTooltips] = useState([]);
+  const getContent = (target) => {
+    var _a;
+    const rect = target.getBoundingClientRect();
+    return {
+      top: rect.top + window.scrollY - (target.offsetHeight + 8),
+      left: rect.left + window.scrollX + target.offsetWidth / 2,
+      content: ((_a = target.dataset) == null ? void 0 : _a.tooltip) || ""
+    };
+  };
+  useEffect(() => {
+    const processElement = (element) => {
+      element.addEventListener("mouseenter", (event) => {
+        const target = event == null ? void 0 : event.target;
+        if (!target) return;
+        setTooltips(_.concat(tooltips, [getContent(target)]));
+      });
+      element.addEventListener("mouseleave", (event) => {
+        const target = event == null ? void 0 : event.target;
+        if (!target) return;
+        setTooltips(_.filter(tooltips, (data) => JSON.stringify(data) === JSON.stringify(getContent(target))));
+      });
+    };
+    document.querySelectorAll("[data-tooltip]").forEach((el) => processElement(el));
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (node.nodeType === 1) {
+            const el = node;
+            if (el.getAttribute("data-tooltip")) processElement(el);
+            el.querySelectorAll("[data-tooltip]").forEach((child) => processElement(child));
+          }
+        });
+      });
+    });
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsxs(TooltipContext.Provider, { value: {}, children: [
+    _.map(
+      tooltips,
+      (data, index) => /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          style: {
+            top: data.top,
+            left: data.left
+          },
+          children: data.content
+        },
+        index
+      )
+    ),
+    children
+  ] });
+};
+var useTooltip = () => useContext(TooltipContext);
+export {
+  TooltipProviderContainer as TooltipProvider,
+  useTooltip
+};

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

@@ -0,0 +1 @@
+export declare const Tooltip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/contexts/tooltip/styles.mjs

@@ -0,0 +1,46 @@
+"use client";
+
+// contexts/tooltip/styles.tsx
+import styled from "styled-components";
+var 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;
+    transform: translateX(-50%);
+    z-index: 10;
+    border: 1px solid ${({ theme }) => theme.t05};
+
+    &::before {
+        content: "";
+        position: absolute;
+        bottom: -9px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        height: 0;
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+        border-top: 8px solid ${({ theme }) => theme.t05};
+    }
+
+    &::after {
+        content: "";
+        position: absolute;
+        bottom: -8px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 0;
+        height: 0;
+        border-left: 8px solid transparent;
+        border-right: 8px solid transparent;
+        border-top: 8px solid ${({ theme }) => theme.tooltip};
+    }
+`;
+export {
+  Tooltip
+};

package/dist/index.d.ts

@@ -1,17 +1,4 @@
-import { I as IThemeContent } from './index-DT7VKE7H.js';
-export { a as IBaseProvider, d as ICommonTheme, b as IIconProvider, h as IModalConfig, i as IModalContext, g as IModalProvider, e as ITheme, f as IThemeContext, c as IThemeProvider } from './index-DT7VKE7H.js';
-export { Component } from './components/index.js';
-export { IconProvider, ModalProvider, ThemeProvider, TooltipProvider, useIcon, useModal, useTheme, useTooltip } from './contexts/index.js';
-export { A as Avatar, B as Badge, k as Block, f as Button, C as Chart, j as CreditCard, F as Form, N as IAvatar, x as IBadge, R as IBlock, M as IChart, p as IComponent, n as IComponentConfig, m as IComponentConfigMap, o as IComponentContent, l as IComponentMap, Q as ICreditCard, z as IForm, J as IInputDateTime, D as IInputFile, E as IInputLabel, H as IInputSelect, G as IInputText, K as IInputTextarea, w as ILoadingApp, v as ILoadingBar, y as ILogo, O as ILottie, u as IPaginate, t as ITable, q as ITableAction, r as ITableColumn, s as ITableRow, g as InputDateTime, I as InputFile, c as InputLabel, e as InputSelect, d as InputText, h as InputTextarea, a as LoadingApp, L as LoadingBar, b as Logo, i as Lottie, P as Paginate, T as Table } from './index-BhaGW0O1.js';
-export { a as IButton, I as IModal, M as Modal } from './index-Da-DtPS-.js';
-export { ITooltipProvider } from './interfaces/index.js';
-import 'react';
-import 'react/jsx-runtime';
-import 'react-hook-form';
-
-declare module "styled-components" {
-    interface DefaultTheme extends IThemeContent {
-    }
-}
-
-export { IThemeContent };
+import "./styled";
+export * from "./components";
+export * from "./contexts";
+export * from "./interfaces";