@ftdata/ui 0.0.1

package/dist/components/Text/Paragraph/Paragraph.stories.js

@@ -0,0 +1,124 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Paragraph, Title } from "../index.js";
+const meta = {
+    title: "DESIGN COMPONENTS/Text/Paragraph",
+    component: Paragraph,
+    tags: [
+        "autodocs"
+    ],
+    parameters: {
+        layout: "centered"
+    },
+    argTypes: {
+        children: {
+            description: "Define o texto que ser\xe1 renderizado.",
+            control: {
+                type: "text"
+            }
+        },
+        size: {
+            description: "Define o tamanho do Paragraph.",
+            table: {
+                type: {
+                    summary: '"caption" | "sm" | "md"'
+                }
+            }
+        }
+    }
+};
+const Paragraph_stories = meta;
+const loremIpsum = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
+                    Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
+                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;
+const Default = {
+    args: {
+        size: "caption",
+        children: loremIpsum
+    }
+};
+const Caption = {
+    args: {
+        children: loremIpsum,
+        size: "caption"
+    }
+};
+const Sm = {
+    args: {
+        children: loremIpsum,
+        size: "sm"
+    }
+};
+const Md = {
+    args: {
+        children: loremIpsum,
+        size: "md"
+    }
+};
+const Sizes = {
+    render: ()=>/*#__PURE__*/ jsxs("div", {
+            style: {
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                flexDirection: "column",
+                gap: "2.5rem",
+                width: "100%"
+            },
+            children: [
+                /*#__PURE__*/ jsxs("div", {
+                    style: {
+                        display: "grid",
+                        gridTemplateColumns: "10% 90%",
+                        alignItems: "center"
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx(Title, {
+                            size: "md",
+                            children: "Caption"
+                        }),
+                        /*#__PURE__*/ jsx(Paragraph, {
+                            size: "caption",
+                            children: loremIpsum
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    style: {
+                        display: "grid",
+                        gridTemplateColumns: "10% 90%",
+                        alignItems: "center"
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx(Title, {
+                            size: "md",
+                            children: "md"
+                        }),
+                        /*#__PURE__*/ jsx(Paragraph, {
+                            size: "md",
+                            children: loremIpsum
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    style: {
+                        display: "grid",
+                        gridTemplateColumns: "10% 90%",
+                        alignItems: "center"
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx(Title, {
+                            size: "md",
+                            children: "sm"
+                        }),
+                        /*#__PURE__*/ jsx(Paragraph, {
+                            size: "sm",
+                            children: loremIpsum
+                        })
+                    ]
+                })
+            ]
+        })
+};
+export { Caption, Default, Md, Sizes, Sm, Paragraph_stories as default };

package/dist/components/Text/Title/Title.stories.d.ts

@@ -0,0 +1,41 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Title } from "../index";
+/**
+ * Títulos são usados para mostrar textos importantes em uma página.
+ * Este componente também funciona com os atributos nativos de um HTML input element.
+ */
+declare const meta: Meta<typeof Title>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Variação padrão do Title quando apenas as propriedades obrigatórias são fornecidas.
+ */
+export declare const Default: Story;
+/**
+ * Variação subheading do Title.
+ */
+export declare const Subheading: Story;
+/**
+ * Variação sm do Title.
+ */
+export declare const Sm: Story;
+/**
+ * Variação md do Title.
+ */
+export declare const Md: Story;
+/**
+ * Variação section do Title.
+ */
+export declare const Section: Story;
+/**
+ * Variação standart do Title.
+ */
+export declare const Standart: Story;
+/**
+ * Variação huge do Title.
+ */
+export declare const Huge: Story;
+/**
+ * Todas as variações padrão de de tamanho do Title.
+ */
+export declare const Sizes: Story;

package/dist/components/Text/Title/Title.stories.js

@@ -0,0 +1,106 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Title } from "../index.js";
+const meta = {
+    title: "DESIGN COMPONENTS/Text/Title",
+    component: Title,
+    tags: [
+        "autodocs"
+    ],
+    parameters: {
+        layout: "centered"
+    },
+    argTypes: {
+        size: {
+            description: "Define o tipo e tamanho do Title de acordo com sua varia\xe7\xe3o.",
+            table: {
+                type: {
+                    summary: '"subheading" | "sm" | "md" | "section" | "standard" | "huge"'
+                }
+            }
+        },
+        children: {
+            control: {
+                type: "text"
+            },
+            description: "Define o texto que ser\xe1 renderizado."
+        }
+    }
+};
+const Title_stories = meta;
+const Default = {
+    args: {
+        children: "Default",
+        size: "huge"
+    }
+};
+const Subheading = {
+    args: {
+        children: "Subheading",
+        size: "subheading"
+    }
+};
+const Sm = {
+    args: {
+        children: "Sm",
+        size: "sm"
+    }
+};
+const Md = {
+    args: {
+        children: "Md",
+        size: "md"
+    }
+};
+const Section = {
+    args: {
+        children: "Section",
+        size: "section"
+    }
+};
+const Standart = {
+    args: {
+        children: "Standart",
+        size: "standard"
+    }
+};
+const Huge = {
+    args: {
+        children: "Huge",
+        size: "huge"
+    }
+};
+const Sizes = {
+    render: ()=>/*#__PURE__*/ jsxs("div", {
+            style: {
+                display: "flex",
+                flexDirection: "column"
+            },
+            children: [
+                /*#__PURE__*/ jsx(Title, {
+                    size: "huge",
+                    children: "Huge - Lorem Ipsum"
+                }),
+                /*#__PURE__*/ jsx(Title, {
+                    size: "standard",
+                    children: "Standart - Lorem Ipsum"
+                }),
+                /*#__PURE__*/ jsx(Title, {
+                    size: "section",
+                    children: "Section - Lorem Ipsum"
+                }),
+                /*#__PURE__*/ jsx(Title, {
+                    size: "subheading",
+                    children: "Subheading - Lorem Ipsum"
+                }),
+                /*#__PURE__*/ jsx(Title, {
+                    size: "md",
+                    children: "Md - Lorem Ipsum"
+                }),
+                /*#__PURE__*/ jsx(Title, {
+                    size: "sm",
+                    children: "sm - Lorem Ipsum"
+                })
+            ]
+        })
+};
+export { Default, Huge, Md, Section, Sizes, Sm, Standart, Subheading, Title_stories as default };

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

@@ -0,0 +1,3 @@
+import type { ParagraphContainerProps, TitleContainerProps } from "./styles";
+export declare const Title: React.FC<TitleContainerProps>;
+export declare const Paragraph: React.FC<ParagraphContainerProps>;

package/dist/components/Text/index.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { ParagraphContainer, TITLE_MODIFIERS, TitleContainer } from "./styles.js";
+const Title = ({ children, size, ...rest })=>{
+    const tag = TITLE_MODIFIERS[size][0];
+    return /*#__PURE__*/ jsx(TitleContainer, {
+        size: size,
+        ...rest,
+        as: tag,
+        children: children
+    });
+};
+const Paragraph = ({ children, size, ...rest })=>/*#__PURE__*/ jsx(ParagraphContainer, {
+        size: size,
+        ...rest,
+        children: children
+    });
+export { Paragraph, Title };

package/dist/components/Text/styles.d.ts

@@ -0,0 +1,23 @@
+type HeadingTypes = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+type TitleModifiersProps = {
+    huge: [HeadingTypes, string];
+    standard: [HeadingTypes, string];
+    section: [HeadingTypes, string];
+    md: [HeadingTypes, string];
+    sm: [HeadingTypes, string];
+    subheading: [HeadingTypes, string];
+};
+export declare const TITLE_MODIFIERS: TitleModifiersProps;
+type TitleSizes = "subheading" | "sm" | "md" | "section" | "standard" | "huge";
+export interface TitleContainerProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    children: React.ReactNode;
+    size: TitleSizes;
+}
+export type ParagraphSizes = "caption" | "sm" | "md";
+export interface ParagraphContainerProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    children: React.ReactNode;
+    size: ParagraphSizes;
+}
+export declare const TitleContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").ClassAttributes<HTMLHeadingElement> & import("react").HTMLAttributes<HTMLHeadingElement>, TitleContainerProps>> & string;
+export declare const ParagraphContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement>, ParagraphContainerProps>> & string;
+export {};

package/dist/components/Text/styles.js

@@ -0,0 +1,70 @@
+import styled_components from "styled-components";
+import { FONT_FAMILY_01, FONT_SIZE_LG, FONT_SIZE_MD, FONT_SIZE_SM, FONT_SIZE_XL, FONT_SIZE_XS, FONT_SIZE_XXL, FONT_WEIGHT_BOLD, FONT_WEIGHT_MEDIUM, LETTER_CASE_UPPERCASE, LETTER_SPACING_TIGHT, LETTER_SPACING_VERY_DISTANT, LINE_HEIGHT_MEDIUM, LINE_HEIGHT_TIGHT } from "@ftdata/f-tokens";
+const TITLE_MODIFIERS = {
+    huge: [
+        "h1",
+        `
+        font-size: ${FONT_SIZE_XXL};
+        letter-spacing: ${LETTER_SPACING_TIGHT};
+    `
+    ],
+    standard: [
+        "h2",
+        `
+        font-size: ${FONT_SIZE_XL};
+        letter-spacing: ${LETTER_SPACING_TIGHT};
+    `
+    ],
+    section: [
+        "h3",
+        `
+        font-size: ${FONT_SIZE_LG};
+        font-weight: ${FONT_WEIGHT_MEDIUM};
+        letter-spacing: ${LETTER_SPACING_TIGHT};
+    `
+    ],
+    md: [
+        "h4",
+        `
+        font-size: ${FONT_SIZE_MD};
+    `
+    ],
+    sm: [
+        "h5",
+        `
+        font-size: ${FONT_SIZE_SM};
+    `
+    ],
+    subheading: [
+        "h6",
+        `
+        font-size: ${FONT_SIZE_XS};
+        letter-spacing: ${LETTER_SPACING_VERY_DISTANT};
+        text-transform: ${LETTER_CASE_UPPERCASE};
+    `
+    ]
+};
+const PARAGRAPH_MODIFIERS = {
+    md: `
+        font-size: ${FONT_SIZE_MD};
+    `,
+    sm: `
+        font-size: ${FONT_SIZE_SM};
+    `,
+    caption: `
+        font-size: ${FONT_SIZE_XS};
+    `
+};
+const TitleContainer = styled_components("h1")`
+  font-family: ${FONT_FAMILY_01};
+  font-weight: ${FONT_WEIGHT_BOLD};
+  line-height: ${LINE_HEIGHT_TIGHT};
+  ${({ size })=>TITLE_MODIFIERS[size][1]}
+`;
+const ParagraphContainer = styled_components("p")`
+  font-family: ${FONT_FAMILY_01};
+  font-weight: ${FONT_WEIGHT_MEDIUM};
+  line-height: ${LINE_HEIGHT_MEDIUM};
+  ${({ size })=>PARAGRAPH_MODIFIERS[size]}
+`;
+export { ParagraphContainer, TITLE_MODIFIERS, TitleContainer };

package/dist/components/TextArea/Textarea.stories.d.ts

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from "@storybook/react";
+import TextArea from ".";
+/**
+ * TextAreas são utilizadas em formulários para permitir que usuários digitem informações extensas em várias linhas.
+ * Este componente também funciona com os atributos nativos de um HTML textarea element.
+ */
+declare const meta: Meta<typeof TextArea>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Variação padrão da TextArea quando apenas as propriedades obrigatórias são fornecidas.
+ */
+export declare const Default: Story;
+/**
+ * Mensagem para auxiliar o usuário em determinadas situações.
+ */
+export declare const HelpText: Story;
+/**
+ * Indica um erro de validação para o usuário.
+ */
+export declare const Error: Story;
+/**
+ * Indica sucesso de validação para o usuário.
+ */
+export declare const Succes: Story;
+/**
+ * Rótulo exibido acima da Textarea.
+ */
+export declare const TextField: Story;
+/**
+ * Variação da Textarea obrigátória
+ */
+export declare const Required: Story;

package/dist/components/TextArea/Textarea.stories.js

@@ -0,0 +1,65 @@
+import index from "./index.js";
+const meta = {
+    title: "DESIGN COMPONENTS/TextArea",
+    component: index,
+    tags: [
+        "autodocs"
+    ],
+    parameters: {
+        layout: "centered"
+    },
+    argTypes: {
+        error: {
+            description: "Define se a TextArea possui erros de valida\xe7\xe3o."
+        },
+        helpText: {
+            description: "Define o texto de ajuda abaixo da TextArea. A cor muda se for uma mensagem de erro ou de sucesso."
+        },
+        success: {
+            description: "Define se os dados de entrada foram validados com sucesso."
+        },
+        width: {
+            control: {
+                type: "text"
+            },
+            description: "Define o tamnho da TextArea.",
+            table: {
+                type: {
+                    summary: "number | string"
+                }
+            }
+        }
+    }
+};
+const Textarea_stories = meta;
+const Default = {};
+const HelpText = {
+    args: {
+        helpText: "Help Text"
+    }
+};
+const Error = {
+    args: {
+        helpText: "Erro",
+        error: true
+    }
+};
+const Succes = {
+    args: {
+        helpText: "Sucesso",
+        error: false,
+        success: true
+    }
+};
+const TextField = {
+    args: {
+        textField: "Text Field"
+    }
+};
+const Required = {
+    args: {
+        textField: "Text Field",
+        required: true
+    }
+};
+export { Default, Error, HelpText, Required, Succes, TextField, Textarea_stories as default };

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

@@ -0,0 +1,10 @@
+interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    error?: boolean;
+    helpText?: string;
+    required?: boolean;
+    success?: boolean;
+    textField?: string;
+    width?: number | string;
+}
+declare const TextArea: React.FC<TextAreaProps>;
+export default TextArea;

package/dist/components/TextArea/index.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ContainerTextField, HelpText, Label, TextAreaControl, TextField } from "./styles.js";
+import DoneCircleIcon from "../../assets/DoneCircleIcon.js";
+import CancelSquareIcon from "../../assets/CancelSquareIcon.js";
+const TextArea = ({ name, disabled, error, success, textField, helpText, width, required, ...rest })=>/*#__PURE__*/ jsxs(Label, {
+        htmlFor: name,
+        children: [
+            textField && /*#__PURE__*/ jsxs(ContainerTextField, {
+                children: [
+                    /*#__PURE__*/ jsx(TextField, {
+                        children: textField
+                    }),
+                    required && /*#__PURE__*/ jsx("div", {
+                        className: "required",
+                        children: "*"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(TextAreaControl, {
+                ...rest,
+                disabled: disabled,
+                error: error,
+                id: name,
+                success: success,
+                width: width
+            }),
+            helpText && /*#__PURE__*/ jsxs(HelpText, {
+                disabled: disabled,
+                error: error,
+                success: success,
+                children: [
+                    !disabled && error && /*#__PURE__*/ jsx(CancelSquareIcon, {}) || success && /*#__PURE__*/ jsx(DoneCircleIcon, {}),
+                    helpText
+                ]
+            })
+        ]
+    });
+const components_TextArea = TextArea;
+export { components_TextArea as default };

package/dist/components/TextArea/styles.d.ts

@@ -0,0 +1,18 @@
+import { LabelHTMLAttributes, TextareaHTMLAttributes } from "react";
+export declare const ContainerTextField: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TextField: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").ClassAttributes<HTMLLabelElement> & LabelHTMLAttributes<HTMLLabelElement>, LabelHTMLAttributes<HTMLLabelElement>>> & string;
+interface TextAreaPropTypes extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    disabled?: boolean;
+    error?: boolean;
+    success?: boolean;
+    width?: string | number;
+}
+export declare const TextAreaControl: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").ClassAttributes<HTMLTextAreaElement> & TextareaHTMLAttributes<HTMLTextAreaElement>, TextAreaPropTypes>> & string;
+interface HelpTextProps extends React.AllHTMLAttributes<HTMLSpanElement> {
+    disabled?: boolean;
+    error?: boolean;
+    success?: boolean;
+}
+export declare const HelpText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, HelpTextProps>> & string;
+export {};

package/dist/components/TextArea/styles.js

@@ -0,0 +1,88 @@
+import styled_components from "styled-components";
+import { BORDER_RADIUS_SM, BORDER_WIDTH_HAIRLINE, BORDER_WIDTH_NONE, BORDER_WIDTH_THIN, COLOR_BRAND_LIGHT, COLOR_DANGER_MEDIUM, COLOR_NEUTRAL_DARK, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_LIGHT, COLOR_NEUTRAL_LIGHTER, COLOR_NEUTRAL_MEDIUM, COLOR_SUCCESS_DARK, COLOR_SUCCESS_MEDIUM, FONT_FAMILY_01, FONT_SIZE_MD, FONT_SIZE_SM, FONT_SIZE_XS, FONT_WEIGHT_BOLD, FONT_WEIGHT_MEDIUM, LINE_HEIGHT_MEDIUM, SPACING_INLINE_01, SPACING_SQUISH_NANO, SPACING_STACK_02 } from "@ftdata/f-tokens";
+const ContainerTextField = styled_components.div`
+  display: flex;
+  margin-bottom: ${SPACING_STACK_02};
+  gap: 4px;
+
+  .required {
+    color: ${COLOR_DANGER_MEDIUM};
+  }
+`;
+const TextField = styled_components.span`
+  font-weight: ${FONT_WEIGHT_BOLD};
+  font-size: ${FONT_SIZE_SM};
+  color: ${COLOR_NEUTRAL_DUSK};
+  font-family: "Inter";
+`;
+const Label = styled_components("label")`
+  align-items: flex-start;
+  box-sizing: border-box;
+  * {
+    box-sizing: border-box;
+  }
+  display: flex;
+  flex-direction: column;
+`;
+const TextAreaControl = styled_components("textarea")`
+  background-color: ${({ disabled })=>disabled && COLOR_NEUTRAL_LIGHTER || COLOR_NEUTRAL_DAY};
+  border-color: ${({ disabled, error, success })=>disabled && COLOR_NEUTRAL_LIGHT || error && COLOR_DANGER_MEDIUM || success && COLOR_SUCCESS_MEDIUM || COLOR_NEUTRAL_MEDIUM};
+  border-style: solid;
+  border-width: ${BORDER_WIDTH_HAIRLINE};
+  border-radius: ${BORDER_RADIUS_SM};
+  color: ${COLOR_NEUTRAL_DARK};
+  cursor: ${({ disabled })=>disabled ? "not-allowed" : "initial"};
+  font-family: ${FONT_FAMILY_01};
+  font-weight: ${FONT_WEIGHT_MEDIUM};
+  font-size: ${FONT_SIZE_MD};
+  line-height: ${LINE_HEIGHT_MEDIUM};
+  height: 120px;
+  min-width: ${({ width })=>width || 230}px;
+  outline: 2px solid transparent;
+  padding: ${SPACING_SQUISH_NANO};
+  resize: ${({ disabled })=>disabled ? "none" : "both"};
+  transition:
+    color,
+    background-color,
+    border-color 0.2s ease;
+
+  ::placeholder {
+    color: ${({ disabled })=>disabled ? COLOR_NEUTRAL_LIGHT : COLOR_NEUTRAL_MEDIUM};
+  }
+
+  &:hover,
+  &:active,
+  &:disabled,
+  &:focus {
+    outline: ${BORDER_WIDTH_NONE};
+    transition:
+      color,
+      background-color,
+      border-color 0.2s ease;
+  }
+
+  &:not([disabled]):not(:active):not([open]) {
+    &:focus {
+      border-color: ${({ disabled, error, success })=>disabled && COLOR_NEUTRAL_LIGHT || error && COLOR_BRAND_LIGHT || success && COLOR_SUCCESS_MEDIUM || COLOR_NEUTRAL_DARK};
+      border-style: solid;
+      border-width: ${BORDER_WIDTH_THIN};
+    }
+  }
+`;
+const HelpText = styled_components("span")`
+  align-items: center;
+  color: ${({ disabled, error, success })=>disabled && COLOR_NEUTRAL_MEDIUM || error && COLOR_DANGER_MEDIUM || success && COLOR_SUCCESS_DARK || COLOR_NEUTRAL_DARK};
+  display: flex;
+  font-family: ${FONT_FAMILY_01};
+  font-weight: ${FONT_WEIGHT_MEDIUM};
+  font-size: ${FONT_SIZE_XS};
+  margin-top: 8px;
+
+  svg {
+    margin-right: ${SPACING_INLINE_01};
+    path {
+      stroke: ${({ error, success })=>error && COLOR_DANGER_MEDIUM || success && COLOR_SUCCESS_MEDIUM || COLOR_NEUTRAL_DARK};
+    }
+  }
+`;
+export { ContainerTextField, HelpText, Label, TextAreaControl, TextField };

package/dist/components/TooltipWrapper/Tooltip.stories.d.ts

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { TooltipWrapper } from ".";
+/**
+ * TooltipWrapper permite exibir tooltips personalizados quando o usuário passa o mouse sobre um elemento.
+ * O componente gerencia a visibilidade e a posição do tooltip de forma dinâmica.
+ */
+declare const meta: Meta<typeof TooltipWrapper>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Variação padrão do Tooltip Wrapper com apenas propriedades essenciais
+ */
+export declare const Default: Story;
+/**
+ * Variação do Tooltip usando Espaçamento personalizado.
+ */
+export declare const Spacing: Story;
+/**
+ * Tooltip ainda incompleto, implementar funções de posiction e uma varição com tail
+ * posições a adicionar: top, top-right, top-left, bottom, bottom-right, bottom-left, rigth, right-top, right-bottom, left, left-top, left-bottom
+ */