@ftdata/ui 0.0.1

package/dist/components/Button/styles.js

@@ -0,0 +1,111 @@
+import styled_components from "styled-components";
+import { BORDER_RADIUS_SM, BORDER_WIDTH_NONE, BORDER_WIDTH_THIN, COLOR_BRAND_MEDIUM, COLOR_NEUTRAL_DARKER, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_LIGHT, COLOR_NEUTRAL_LIGHTER, FONT_FAMILY_01, FONT_SIZE_MD, FONT_SIZE_SM, FONT_WEIGHT_MEDIUM, IC_SIZE_MEDIUM, LINE_HEIGHT_MEDIUM, SHADOW_LEVEL_02, SPACING_INLINE_02, SPACING_SQUISH_NANO, SPACING_STACK_02 } from "@ftdata/f-tokens";
+import Loading from "../Loading/index.js";
+import { BUTTON_MODIFIERS } from "./modifiers.js";
+const ButtonWrapper = styled_components("button")`
+  box-sizing: border-box;
+  * {
+    box-sizing: border-box;
+  }
+  align-items: center;
+  border-color: transparent;
+  border-radius: ${BORDER_RADIUS_SM};
+  border-style: solid;
+  border-width: ${BORDER_WIDTH_THIN};
+  cursor: pointer;
+  display: flex;
+  font-family: ${FONT_FAMILY_01};
+  font-size: ${FONT_SIZE_MD};
+  font-weight: ${FONT_WEIGHT_MEDIUM};
+  justify-content: center;
+  line-height: ${LINE_HEIGHT_MEDIUM};
+  padding: ${SPACING_SQUISH_NANO};
+  position: relative;
+  transition: all 0.2s ease;
+
+  svg {
+    height: ${IC_SIZE_MEDIUM};
+    width: ${IC_SIZE_MEDIUM};
+  }
+
+  svg ~ span {
+    margin-left: ${SPACING_INLINE_02};
+  }
+
+  span ~ svg {
+    height: initial;
+    margin-left: ${SPACING_INLINE_02};
+    width: initial;
+  }
+
+  &:hover,
+  &:active,
+  &:disabled,
+  &:focus,
+  svg,
+  svg path {
+    outline: ${BORDER_WIDTH_NONE};
+    transition: all 0.2s ease;
+  }
+  &:not([disabled]):not(:active):not([open]) {
+    &:focus {
+      border-color: initial;
+      border-style: solid;
+      border-width: ${BORDER_WIDTH_THIN};
+    }
+  }
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  ${({ variant })=>BUTTON_MODIFIERS[variant]};
+  ${({ wide })=>wide && BUTTON_MODIFIERS.wide};
+  ${({ small })=>small && BUTTON_MODIFIERS.small};
+`;
+const Dropdown = styled_components.div`
+  box-shadow: ${SHADOW_LEVEL_02} ${COLOR_NEUTRAL_LIGHT};
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  padding: ${SPACING_STACK_02} 0;
+  position: absolute;
+  top: calc(100% + ${SPACING_STACK_02});
+  z-index: 10;
+`;
+const SelectButton = styled_components("div")`
+  align-items: center;
+  background-color: ${COLOR_NEUTRAL_DAY};
+  border-color: transparent;
+  border-width: ${BORDER_WIDTH_THIN};
+  color: ${COLOR_NEUTRAL_DARKER};
+  cursor: pointer;
+  display: flex;
+  font-family: ${FONT_FAMILY_01};
+  font-size: ${FONT_SIZE_SM};
+  font-weight: ${FONT_WEIGHT_MEDIUM};
+  line-height: ${LINE_HEIGHT_MEDIUM};
+  min-width: 230px;
+  padding: ${SPACING_SQUISH_NANO};
+  position: relative;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: ${COLOR_NEUTRAL_LIGHTER};
+    color: ${COLOR_NEUTRAL_DUSK};
+  }
+
+  &:hover,
+  &:active,
+  &:disabled,
+  &:focus {
+    outline: ${BORDER_WIDTH_NONE};
+    transition: all 0.2s ease;
+  }
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;
+const Spinner = styled_components(Loading)`
+  background-color: ${({ variant })=>"dark" === variant ? COLOR_BRAND_MEDIUM : COLOR_NEUTRAL_LIGHTER};
+`;
+export { ButtonWrapper, Dropdown, SelectButton, Spinner };

package/dist/components/Checkbox/CheckMarkIcon.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+declare const CheckMark: FC;
+export default CheckMark;

package/dist/components/Checkbox/CheckMarkIcon.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const CheckMark = ()=>/*#__PURE__*/ jsxs("svg", {
+        width: "10",
+        height: "10",
+        viewBox: "0 0 10 10",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ jsxs("g", {
+                clipPath: "url(#checkmark)",
+                children: [
+                    /*#__PURE__*/ jsx("path", {
+                        d: "M-9.5 -9.5H19.5V19.5H-9.5V-9.5Z",
+                        stroke: "white"
+                    }),
+                    /*#__PURE__*/ jsx("path", {
+                        d: "M8.50375 3.2525L4.1275 7.62875L1.49875 5.0025",
+                        stroke: "white",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("defs", {
+                children: /*#__PURE__*/ jsx("clipPath", {
+                    id: "checkmark",
+                    children: /*#__PURE__*/ jsx("rect", {
+                        width: "10",
+                        height: "10",
+                        fill: "white"
+                    })
+                })
+            })
+        ]
+    });
+const CheckMarkIcon = CheckMark;
+export { CheckMarkIcon as default };

package/dist/components/Checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Checkbox from ".";
+/**
+ * Os usuários podem selecionar as caixas de seleção. É possível marcar várias caixas de seleção ao mesmo tempo.
+ * Este componente também funciona com os atributos nativos de um HTML input element.
+ */
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * Variação padrão do Button quando apenas as propriedades obrigatórias são fornecidas.
+ */
+export declare const Default: Story;
+/**
+ * Variação do Checkbox quando selecionado.
+ */
+export declare const Checked: Story;
+/**
+ * Variação do Checkbox quando não está selecionado.
+ */
+export declare const Unchecked: Story;
+/**
+ * Variação do Checkbox utilizada quando se trata de seleções parciais em listas de opções,
+ * indicando visualmente que nem todos os itens estão selecionados, mas também não estão todos desmarcados,
+ * como em situações de seleções incompletas ou parciais.
+ */
+export declare const Indeterminate: Story;
+/**
+ * Variação do Checkbox quando possui erros.
+ */
+export declare const Invalid: Story;
+/**
+ * Variação do Checkbox quando está desativado para o usuário.
+ */
+export declare const Disabled: Story;

package/dist/components/Checkbox/Checkbox.stories.js

@@ -0,0 +1,101 @@
+import index from "./index.js";
+const meta = {
+    title: "DESIGN COMPONENTS/Checkbox",
+    component: index,
+    tags: [
+        "autodocs"
+    ],
+    parameters: {
+        layout: "centered"
+    },
+    argTypes: {
+        checked: {
+            description: "Define se o Checkbox est\xe1 marcada."
+        },
+        indeterminate: {
+            description: "Define se o Checkbox est\xe1 indeterminado.",
+            table: {
+                defaultValue: {
+                    summary: "false"
+                }
+            }
+        },
+        invalid: {
+            description: "Define se o Checkbox est\xe1 inv\xe1lido (erro).",
+            table: {
+                defaultValue: {
+                    summary: "false"
+                }
+            }
+        },
+        label: {
+            description: "Define o texto do Checkbox."
+        },
+        disabled: {
+            control: {
+                type: "boolean"
+            },
+            description: "Define se o Checkbox est\xe1 desabilitado.",
+            table: {
+                defaultValue: {
+                    summary: "false"
+                },
+                type: {
+                    summary: "boolean"
+                }
+            }
+        },
+        name: {
+            control: {
+                type: "text"
+            },
+            description: "Define o 'name' do Checkbox, apenas para a identifica\xe7\xe3o.",
+            table: {
+                type: {
+                    summary: "string"
+                }
+            }
+        }
+    }
+};
+const Checkbox_stories = meta;
+const Default = {
+    args: {
+        label: "Default",
+        checked: false
+    }
+};
+const Checked = {
+    args: {
+        label: "Checked",
+        checked: true
+    }
+};
+const Unchecked = {
+    args: {
+        label: "Checked",
+        checked: false
+    }
+};
+const Indeterminate = {
+    args: {
+        label: "Indeterminate",
+        checked: false,
+        indeterminate: true
+    }
+};
+const Invalid = {
+    args: {
+        label: "Invalid",
+        checked: false,
+        invalid: true
+    }
+};
+const Disabled = {
+    args: {
+        label: "Disabled",
+        checked: false,
+        disabled: true
+    }
+};
+export { Checked, Default, Disabled, Indeterminate, Invalid, Unchecked, Checkbox_stories as default };

package/dist/components/Checkbox/MinusMarkIcon.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+declare const MinusMark: FC;
+export default MinusMark;

package/dist/components/Checkbox/MinusMarkIcon.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const MinusMark = ()=>/*#__PURE__*/ jsxs("svg", {
+        width: "10",
+        height: "10",
+        viewBox: "0 0 10 10",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: [
+            /*#__PURE__*/ jsxs("g", {
+                clipPath: "url(#minusmark)",
+                children: [
+                    /*#__PURE__*/ jsx("path", {
+                        d: "M-9.5 -9.5H19.5V19.5H-9.5V-9.5Z",
+                        stroke: "white"
+                    }),
+                    /*#__PURE__*/ jsx("rect", {
+                        x: "1",
+                        y: "4",
+                        width: "8",
+                        height: "2",
+                        rx: "1",
+                        fill: "white"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("defs", {
+                children: /*#__PURE__*/ jsx("clipPath", {
+                    id: "minusmark",
+                    children: /*#__PURE__*/ jsx("rect", {
+                        width: "10",
+                        height: "10",
+                        fill: "white"
+                    })
+                })
+            })
+        ]
+    });
+const MinusMarkIcon = MinusMark;
+export { MinusMarkIcon as default };

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

@@ -0,0 +1,9 @@
+import React, { InputHTMLAttributes } from "react";
+interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
+    checked: boolean;
+    indeterminate?: boolean;
+    invalid?: boolean;
+    label: string;
+}
+declare const Checkbox: React.FC<CheckboxProps>;
+export default Checkbox;

package/dist/components/Checkbox/index.js

@@ -0,0 +1,40 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Box, FillBox, Input, Label } from "./styles.js";
+import { Paragraph } from "../Text/index.js";
+import MinusMarkIcon from "./MinusMarkIcon.js";
+import CheckMarkIcon from "./CheckMarkIcon.js";
+const Checkbox = ({ checked, disabled, indeterminate, invalid, label, name, ...rest })=>/*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsxs(Label, {
+            disabled: disabled,
+            htmlFor: name,
+            children: [
+                /*#__PURE__*/ jsx(Input, {
+                    checked: checked,
+                    disabled: disabled,
+                    id: name,
+                    name: name,
+                    type: "checkbox",
+                    ...rest
+                }),
+                /*#__PURE__*/ jsx(Box, {
+                    checked: checked,
+                    disabled: disabled,
+                    indeterminate: indeterminate,
+                    invalid: invalid
+                }),
+                /*#__PURE__*/ jsx(FillBox, {
+                    checked: checked,
+                    disabled: disabled,
+                    indeterminate: indeterminate,
+                    children: indeterminate && /*#__PURE__*/ jsx(MinusMarkIcon, {}) || checked && /*#__PURE__*/ jsx(CheckMarkIcon, {})
+                }),
+                /*#__PURE__*/ jsx(Paragraph, {
+                    size: "md",
+                    children: label
+                })
+            ]
+        })
+    });
+const components_Checkbox = Checkbox;
+export { components_Checkbox as default };

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

@@ -0,0 +1,12 @@
+import { LabelHTMLAttributes } from "react";
+interface Props extends LabelHTMLAttributes<HTMLLabelElement> {
+    checked?: boolean;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    invalid?: boolean;
+}
+export declare const Label: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").ClassAttributes<HTMLLabelElement> & LabelHTMLAttributes<HTMLLabelElement>, Props>> & string;
+export declare const Box: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, Props>> & string;
+export declare const FillBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof Props> & Props, Props>> & string;
+export declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").ClassAttributes<HTMLInputElement> & import("react").InputHTMLAttributes<HTMLInputElement>, never>> & string;
+export {};

package/dist/components/Checkbox/styles.js

@@ -0,0 +1,41 @@
+import styled_components from "styled-components";
+import { BORDER_RADIUS_SM, BORDER_WIDTH_THIN, COLOR_ACCENT_MEDIUM, COLOR_DANGER_MEDIUM, COLOR_NEUTRAL_DARKER, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_LIGHT, COLOR_NEUTRAL_LIGHTER, SPACING_INLINE_03, SPACING_INLINE_04, SPACING_STACK_03 } from "@ftdata/f-tokens";
+const Label = styled_components("label")`
+  box-sizing: border-box;
+  color: ${({ disabled })=>disabled ? COLOR_NEUTRAL_DARKER : COLOR_NEUTRAL_DUSK};
+  cursor: ${({ disabled })=>disabled ? "not-allowed" : "pointer"};
+  display: inline-block;
+  position: relative;
+  padding-left: ${SPACING_INLINE_04};
+`;
+const Box = styled_components("div")`
+  background: ${({ checked, disabled })=>disabled ? checked ? COLOR_NEUTRAL_DAY : COLOR_NEUTRAL_LIGHTER : COLOR_NEUTRAL_DAY};
+  border-color: ${({ disabled, invalid })=>disabled ? COLOR_NEUTRAL_LIGHT : invalid ? COLOR_DANGER_MEDIUM : COLOR_NEUTRAL_LIGHT};
+  border-style: solid;
+  border-width: ${({ checked, indeterminate })=>checked || indeterminate ? 0 : BORDER_WIDTH_THIN};
+  border-radius: ${BORDER_RADIUS_SM};
+  box-sizing: border-box;
+  content: "";
+  height: ${SPACING_STACK_03};
+  left: 0;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: 0.2s ease all;
+  width: ${SPACING_INLINE_03};
+`;
+const FillBox = styled_components(Box)`
+  align-items: center;
+  background-color: ${({ checked, disabled, indeterminate })=>disabled ? checked || indeterminate ? COLOR_ACCENT_MEDIUM : COLOR_ACCENT_MEDIUM : COLOR_ACCENT_MEDIUM};
+  display: flex;
+  justify-content: center;
+  opacity: ${({ checked, indeterminate })=>checked || indeterminate ? 1 : 0};
+`;
+const Input = styled_components("input")`
+  box-sizing: border-box;
+  left: -9999px;
+  opacity: ${({ checked })=>checked ? 1 : 0};
+  position: absolute;
+  transform: scale(${({ checked })=>checked ? 1 : 0});
+`;
+export { Box, FillBox, Input, Label };

package/dist/components/Collapse/Colapse.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Collapse from ".";
+/**
+ * Collapses são usados para permitir que usuários ocultem ou mostrem o conteúdo dinamicamente.
+ * Usado normalmente para economizar espaço e manter a ui concisa.
+ */
+declare const meta: Meta<typeof Collapse>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/Collapse/Colapse.stories.js

@@ -0,0 +1,108 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import index from "./index.js";
+import { COLOR_CUSTOM_COLUMNBG } from "@ftdata/f-tokens";
+import { Paragraph } from "../Text/index.js";
+const Element = /*#__PURE__*/ jsx("div", {
+    style: {
+        backgroundColor: "#FF5656",
+        fontFamily: "sans-serif",
+        border: "none",
+        borderRadius: "10px",
+        height: "10rem",
+        color: "#f5f5f5",
+        fontWeight: "800",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        marginTop: "1rem"
+    },
+    children: "Elemento"
+});
+const defaultExample = /*#__PURE__*/ jsx(Paragraph, {
+    size: "sm",
+    children: "Este \xe9 o conte\xfado exibido dentro do Collapse."
+});
+const firstExample = /*#__PURE__*/ jsxs("div", {
+    children: [
+        Element,
+        Element
+    ]
+});
+const meta = {
+    title: "DESIGN COMPONENTS/Collapse",
+    component: index,
+    tags: [
+        "autodocs"
+    ],
+    parameters: {
+        layout: "centered"
+    },
+    decorators: [
+        (Story)=>/*#__PURE__*/ jsx("div", {
+                style: {
+                    width: "300px"
+                },
+                children: /*#__PURE__*/ jsx(Story, {})
+            })
+    ],
+    argTypes: {
+        title: {
+            description: "Define o t\xedtulo do Collpase.",
+            table: {
+                type: {
+                    summary: "string | JSX.Element"
+                }
+            }
+        },
+        showCollapse: {
+            description: "Define se o Collapse est\xe1 aberto ou fechado."
+        },
+        margin: {
+            description: "Define a margem do Collapse."
+        },
+        iconColor: {
+            description: "Define a cor do icone do Collapse."
+        },
+        iconCavet: {
+            description: "Define a posi\xe7\xe3o do \xedcone do Collapse."
+        },
+        children: {
+            control: {
+                type: "select"
+            },
+            description: "Recebe o que ser\xe1 exibido dentro do Collapse.",
+            mapping: {
+                "Default Example": defaultExample,
+                "First Example": firstExample
+            },
+            options: [
+                "Deafault Example",
+                "First Example"
+            ]
+        },
+        handleChange: {
+            description: "Recebe uma fun\xe7\xe3o respons\xe1vel em lidar com as altera\xe7\xf5es da visibilidade do Collapse."
+        },
+        fontSyze: {
+            description: "Define o tamanho da fonte do Collapse."
+        },
+        maxHeight: {
+            description: "Define o tamanho m\xe1ximo do children do Collapse."
+        },
+        espacamentoTitleIcon: {
+            description: "Define o espa\xe7amento entre o titulo e o \xedcone"
+        }
+    }
+};
+const Colapse_stories = meta;
+const Default = {
+    args: {
+        title: "Collapse",
+        showCollapse: false,
+        margin: "0",
+        iconColor: COLOR_CUSTOM_COLUMNBG,
+        iconCavet: "left",
+        children: defaultExample
+    }
+};
+export { Default, Colapse_stories as default };

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

@@ -0,0 +1,15 @@
+import { JSX } from "react";
+interface CollapseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    children: JSX.Element;
+    title: string | JSX.Element;
+    showCollapse: boolean;
+    handleChange: () => void;
+    iconCavet?: string;
+    fontSyze?: string;
+    margin?: string;
+    iconColor?: string;
+    espacamentoTitleIcon?: string;
+    maxHeight?: string;
+}
+declare const Collapse: React.FC<CollapseProps>;
+export default Collapse;

package/dist/components/Collapse/index.js

@@ -0,0 +1,61 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { ContainerColapse, ContentWrapper } from "./styles.js";
+import { Title } from "../Text/index.js";
+import { Icon } from "@ftdata/f-icons";
+const Collapse_Collapse = ({ children, title, showCollapse, handleChange, iconCavet, fontSyze, margin, iconColor, espacamentoTitleIcon, maxHeight, ...rest })=>{
+    const [isVisible, setIsVisible] = useState(false);
+    useEffect(()=>{
+        if (showCollapse) setIsVisible(true);
+        else {
+            const timer = setTimeout(()=>setIsVisible(false), 300);
+            return ()=>clearTimeout(timer);
+        }
+    }, [
+        showCollapse
+    ]);
+    const validationIcon = ()=>{
+        if (showCollapse) return /*#__PURE__*/ jsx(Icon, {
+            name: "arw caret-up",
+            size: "2rem"
+        });
+        if ("right" == iconCavet) return /*#__PURE__*/ jsx(Icon, {
+            name: "arw caret-right",
+            size: "2rem"
+        });
+        return /*#__PURE__*/ jsx(Icon, {
+            name: "arw caret-down",
+            size: "2rem"
+        });
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(ContainerColapse, {
+                onClick: handleChange,
+                espacamentoTitleIcon: espacamentoTitleIcon,
+                margin: margin,
+                iconColor: iconColor,
+                ...rest,
+                children: [
+                    "string" == typeof title ? /*#__PURE__*/ jsx(Title, {
+                        style: {
+                            fontWeight: fontSyze ? 500 : 600
+                        },
+                        size: fontSyze ? "md" : "section",
+                        children: title
+                    }) : title,
+                    /*#__PURE__*/ jsx("i", {
+                        children: validationIcon()
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(ContentWrapper, {
+                className: `fade ${showCollapse ? "show" : ""}`,
+                maxHeight: maxHeight,
+                children: isVisible && children
+            })
+        ]
+    });
+};
+const Collapse = Collapse_Collapse;
+export { Collapse as default };

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

@@ -0,0 +1,11 @@
+interface ContainerColapseProps {
+    margin?: string;
+    iconColor?: string;
+    espacamentoTitleIcon?: string;
+}
+export declare const ContainerColapse: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContainerColapseProps>> & string;
+interface ContentWrapperProps {
+    maxHeight?: string;
+}
+export declare const ContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContentWrapperProps>> & string;
+export {};

package/dist/components/Collapse/styles.js

@@ -0,0 +1,23 @@
+import styled_components from "styled-components";
+import { SPACING_INLINE_05 } from "@ftdata/f-tokens";
+const ContainerColapse = styled_components.div`
+  display: flex;
+  justify-content: ${({ espacamentoTitleIcon })=>espacamentoTitleIcon ? espacamentoTitleIcon : "space-between"};
+  align-items: center;
+  cursor: pointer;
+  margin-bottom: ${({ margin })=>margin ? margin : SPACING_INLINE_05};
+`;
+const ContentWrapper = styled_components.div`
+  opacity: 0;
+  max-height: 0;
+  /* overflow: hidden; */
+  transition:
+    opacity 300ms ease-in-out,
+    max-height 300ms ease-in-out;
+
+  &.show {
+    opacity: 1;
+    max-height: ${({ maxHeight })=>maxHeight ? maxHeight : "1000px"}; // Ajuste este valor conforme necessário
+  }
+`;
+export { ContainerColapse, ContentWrapper };