@ftdata/ui 0.0.15 → 0.0.17

package/dist/components/MultiSelect/index.js

@@ -1,152 +1,111 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { BadgesContainer, LabelContainer, MaxItemsIndicator, MultiSelectContainer, MultiSelectWrapper, ResizableInput } from "./styles.js";
+import Badge from "./components/Badge/index.js";
+import MultiSelectList from "./components/MultiSelectList/index.js";
+import HelpText from "../fields/components/HelpText/index.js";
 import Label from "../fields/components/Label/index.js";
-import { getHelpTextFeedbackType } from "../fields/helpers/getFeedbackType.js";
 import { Icon } from "@ftdata/f-icons";
-import HelpText from "../fields/components/HelpText/index.js";
-import MultiSelectList from "./components/MultiSelectList/index.js";
-import Badge from "./components/Badge/index.js";
-import { addOption } from "./helpers/addOption.js";
-import { removeOption } from "./helpers/removeOptions.js";
-import { computeUnselected } from "./helpers/computeUnselected.js";
-import { filterOptions } from "./helpers/filterOptions.js";
 import { feedbackText } from "./helpers/feedbackText.js";
-import { COLOR_NEUTRAL_DARK } from "@ftdata/f-tokens";
-import RotateButton from "../fields/components/RotateButton/index.js";
+import { filterOptions } from "./helpers/filterOptions.js";
 import calcTextSize from "./helpers/calcTextSize.js";
-function MultiSelect({ helpText, label, sublabel, required, disabled, feedback, helpIcon, name, translation, state, updateState, placeholder, max, loading, actions, selectAll, total, icon, onLoadMore, toggle, dropdownPosition, ...rest }) {
-    const [showList, setShowList] = useState(false);
+import RotateButton from "../fields/components/RotateButton/index.js";
+import { COLOR_NEUTRAL_MEDIUM } from "@ftdata/f-tokens";
+function MultiSelect({ label, sublabel, helpText, helpIcon, feedback, disabled, maxItems, selectAll, isLoading, options, selected, onChangeSelected, translation, onSearch, onLoadMore, placeholder, required, name, icon, listPosition, toggle, variant = "default" }) {
     const [query, setQuery] = useState("");
+    const [showList, setShowList] = useState(false);
     const [inputSize, setInputSize] = useState(0);
     const inputRef = useRef(null);
     const containerRef = useRef(null);
-    const { selected, options, filtered, unselected } = state;
-    const handleAddOption = (option)=>{
-        const result = addOption(selected, options, option, max);
-        if (!result) return;
+    const unselected = useMemo(()=>options.filter((o)=>!selected.some((s)=>s.value === o.value)), [
+        options,
+        selected
+    ]);
+    const canShowSelectAll = useMemo(()=>{
+        if (!selectAll) return false;
+        if (disabled) return false;
+        if (selected.length === options.length) return false;
+        if (query) return false;
+        if (maxItems && selected.length >= maxItems) return false;
+        return true;
+    }, [
+        selectAll,
+        selected,
+        options,
+        query,
+        maxItems,
+        disabled
+    ]);
+    const filtered = useMemo(()=>{
+        if (!query) return unselected;
+        return filterOptions(unselected, query);
+    }, [
+        query,
+        unselected
+    ]);
+    const addOption = (option)=>{
+        if ("__feedback" === option.value || disabled) return;
+        if (maxItems && selected.length >= maxItems) return;
+        onChangeSelected([
+            ...selected,
+            option
+        ]);
         setQuery("");
-        setInputSize(1);
-        updateState({
-            ...result,
-            filtered: []
-        });
-        inputRef.current?.focus();
     };
-    const handleRemoveOption = (option)=>{
-        const result = removeOption(selected, options, option);
-        updateState({
-            ...result,
-            filtered: []
-        });
+    const toggleList = (event)=>{
+        event.stopPropagation();
+        setShowList((prev)=>!prev);
+    };
+    const removeOption = (option)=>{
+        if (disabled) return;
+        onChangeSelected(selected.filter((o)=>o.value !== option.value));
     };
-    const removeLast = ()=>{
-        if (!selected.length || query) return;
-        handleRemoveOption(selected[selected.length - 1]);
+    const clearAll = ()=>onChangeSelected([]);
+    const handleAddAll = ()=>{
+        maxItems ? onChangeSelected(options.slice(0, maxItems)) : onChangeSelected(options);
+    };
+    const handleClickContainer = ()=>{
+        if (!disabled) {
+            if (inputRef.current) inputRef.current.focus();
+            setShowList(true);
+        }
     };
     const handleChange = (event)=>{
         const value = event.target.value;
         setQuery(value);
         const textStyle = "500 14px Inter";
-        const newInputSize = calcTextSize(value, textStyle, "rem");
-        if (newInputSize) setInputSize(newInputSize);
-        if (!value) return updateState({
-            filtered: []
-        });
-        if (actions?.search) return void actions.search(value);
-        updateState({
-            filtered: filterOptions(computeUnselected(options, selected), value)
-        });
+        const newSize = calcTextSize(value, textStyle, "rem");
+        if (newSize) setInputSize(newSize);
+        if (onSearch) onSearch(value);
     };
     const handleKeyDown = (event)=>{
-        if ("Backspace" === event.key) removeLast();
-        if ("Enter" === event.key) {
-            const available = filtered.length ? filtered : computeUnselected(options, selected);
-            if (available[0]) handleAddOption(available[0]);
-        }
+        event.stopPropagation();
+        if ("Backspace" === event.key && !query && selected.length) removeOption(selected[selected.length - 1]);
+        if ("Enter" === event.key && filtered[0]) addOption(filtered[0]);
     };
     const currentDataOptions = useMemo(()=>{
-        const feedbackOptions = feedbackText(translation, options, filtered, selected, query, max);
-        if (feedbackOptions.length) return feedbackOptions;
+        const fb = feedbackText(translation, options, filtered, selected, query, maxItems);
+        if (fb.length) return fb;
         if (filtered.length) return filtered;
-        return computeUnselected(options, selected);
+        return unselected;
     }, [
-        query,
         filtered,
         selected,
-        options,
-        max
-    ]);
-    const handleClickOutside = (event)=>{
-        if (containerRef.current && !containerRef.current.contains(event.target)) setShowList(false);
-    };
-    const clearSelected = ()=>updateState({
-            selected: []
-        });
-    const handleAddAll = (event)=>{
-        event.preventDefault();
-        if (max) {
-            if (selected.length) {
-                const index = selected.length - max;
-                const toAdd = unselected.slice(0, index);
-                updateState({
-                    selected: [
-                        ...selected,
-                        ...toAdd
-                    ],
-                    unselected: []
-                });
-                return;
-            }
-            updateState({
-                selected: options.slice(0, max),
-                unselected: []
-            });
-            return;
-        }
-        updateState({
-            selected: options,
-            unselected: []
-        });
-    };
-    const canShowSelectAll = useMemo(()=>{
-        if (!selectAll) return;
-        if (selected.length === total || selected.length === options.length) return;
-        if (query) return;
-        if (max && max === selected.length) return;
-        return handleAddAll;
-    }, [
         query,
-        filtered,
-        selected,
         options,
-        max
+        maxItems
     ]);
     useEffect(()=>{
+        if (toggle) toggle(showList);
+        const handleClickOutside = (e)=>{
+            if (containerRef.current && !containerRef.current.contains(e.target)) setShowList(false);
+        };
         if (showList) document.addEventListener("mousedown", handleClickOutside);
         return ()=>document.removeEventListener("mousedown", handleClickOutside);
     }, [
         showList
     ]);
-    const feedBackHelpText = getHelpTextFeedbackType(feedback, disabled);
-    const toggleList = (event)=>{
-        event.stopPropagation();
-        if (disabled) return;
-        setShowList((prev)=>!prev);
-    };
-    const handleClickContainer = (event)=>{
-        event.stopPropagation();
-        if (disabled) return;
-        if (!showList) setShowList(true);
-        inputRef.current?.focus();
-    };
-    useEffect(()=>{
-        if (toggle) toggle(showList);
-    }, [
-        showList
-    ]);
     return /*#__PURE__*/ jsxs(MultiSelectWrapper, {
-        ...rest,
         children: [
             /*#__PURE__*/ jsxs(LabelContainer, {
                 children: [
@@ -156,8 +115,9 @@ function MultiSelect({ helpText, label, sublabel, required, disabled, feedback,
                         required: required,
                         htmlFor: name
                     }),
-                    selected.length > 0 && /*#__PURE__*/ jsx("button", {
-                        onClick: clearSelected,
+                    selected.length > 0 && !disabled && /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        onClick: clearAll,
                         children: translation("remove_all")
                     })
                 ]
@@ -169,61 +129,58 @@ function MultiSelect({ helpText, label, sublabel, required, disabled, feedback,
                 disabled: disabled,
                 $active: showList,
                 children: [
-                    "string" == typeof icon ? /*#__PURE__*/ jsx(Icon, {
+                    icon && ("string" == typeof icon ? /*#__PURE__*/ jsx(Icon, {
                         name: icon,
-                        color: COLOR_NEUTRAL_DARK
-                    }) : icon,
+                        color: COLOR_NEUTRAL_MEDIUM
+                    }) : icon),
                     /*#__PURE__*/ jsxs(BadgesContainer, {
                         children: [
                             selected.map((option)=>/*#__PURE__*/ jsx(Badge, {
                                     text: option.label,
-                                    remove: ()=>handleRemoveOption(option)
+                                    remove: ()=>removeOption(option),
+                                    disabled: disabled
                                 }, option.value)),
                             /*#__PURE__*/ jsx(ResizableInput, {
                                 type: "text",
-                                name: name,
                                 placeholder: selected.length ? "" : placeholder,
                                 ref: inputRef,
                                 value: query,
                                 onKeyDown: handleKeyDown,
                                 onChange: handleChange,
-                                disabled: disabled,
                                 size: inputSize,
-                                wide: 0 === selected.length
+                                wide: 0 === selected.length,
+                                disabled: disabled,
+                                name: name
                             })
                         ]
                     }),
-                    /*#__PURE__*/ jsx(RotateButton, {
+                    "alt" === variant && /*#__PURE__*/ jsx(RotateButton, {
                         rotate: showList,
-                        onClick: toggleList,
-                        disabled: disabled,
-                        style: {
-                            cursor: disabled ? "not-allowed" : "pointer"
-                        }
+                        onClick: toggleList
                     }),
-                    !!max && /*#__PURE__*/ jsx(MaxItemsIndicator, {
+                    maxItems && /*#__PURE__*/ jsx(MaxItemsIndicator, {
                         children: /*#__PURE__*/ jsxs("span", {
                             children: [
                                 selected.length,
                                 "/",
-                                max
+                                maxItems
                             ]
                         })
                     }),
                     showList && /*#__PURE__*/ jsx(MultiSelectList, {
                         options: currentDataOptions,
-                        translation: translation,
-                        onClickOption: (e, option)=>handleAddOption(option),
-                        loading: loading,
-                        addAll: canShowSelectAll,
+                        onClickOption: (_, option)=>addOption(option),
+                        loading: isLoading,
+                        addAll: canShowSelectAll ? handleAddAll : void 0,
                         onLoadMore: onLoadMore,
-                        dropdownPosition: dropdownPosition
+                        translation: translation,
+                        listPosition: listPosition
                     })
                 ]
             }),
             helpText && /*#__PURE__*/ jsx(HelpText, {
                 text: helpText,
-                feedback: feedBackHelpText,
+                feedback: feedback,
                 icon: helpIcon
             })
         ]

package/dist/components/MultiSelect/styles.js

@@ -10,7 +10,7 @@ const MultiSelectWrapper = styled_components.div`
 const showButton = keyframes`
     from {
         opacity: 0.8;
-        transform: translateY(2px);
+        transform: translateY(0.125rem);
     }
     to {
         opacity: 1;
@@ -31,7 +31,7 @@ const LabelContainer = styled_components.div`
     font-weight: ${FONT_WEIGHT_BOLD};
     line-height: 1rem;
     animation: ${showButton} 0.15s ease-in forwards;
-    height: 1rem;
+    height: 1.5rem;
 
     &:hover {
       color: ${COLOR_ACCENT_DARK};
@@ -50,45 +50,35 @@ const MultiSelectContainer = styled_components.div`
     ${({ $active })=>$active ? "2px" : "1px"}${COLOR_NEUTRAL_MEDIUM};
   position: relative;
 
-  &:focus-within {
-    box-shadow: 0px 0px 0px 2px ${COLOR_NEUTRAL_MEDIUM};
-  }
-
-  ${({ disabled, feedback, $active })=>disabled ? `
-          background-color: ${COLOR_NEUTRAL_LIGHTER};
-          box-shadow: 0 0 0 1px ${COLOR_NEUTRAL_MEDIUM};
-          cursor: not-allowed;
-        ` : selectColorModifier(feedback, $active)}
+  ${({ disabled, feedback, $active })=>selectColorModifier(feedback, $active, disabled)}
 `;
 const BadgesContainer = styled_components.div`
-  background-color: ${COLOR_NEUTRAL_DAY};
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   flex: 1;
-  max-height: 160px;
+  max-height: 10rem;
   overflow-y: auto;
 
   &::-webkit-scrollbar-track {
-    background-color: #f4f4f4;
+    background-color: ${COLOR_NEUTRAL_LIGHTER};
     border-radius: 0 0.25rem 0.25rem 0;
   }
 
   &::-webkit-scrollbar {
-    width: 10px;
-    background: #f4f4f4;
+    width: 0.5rem;
+    background: ${COLOR_NEUTRAL_LIGHTER};
     border-radius: 0 0.25rem 0.25rem 0;
   }
 
   &::-webkit-scrollbar-thumb {
-    border-radius: 10px;
+    border-radius: 8px;
     background: #d5d8da;
   }
 `;
 const ResizableInput = styled_components.input`
   outline: none;
   border: none;
-  background-color: transparent;
   color: ${COLOR_NEUTRAL_DUSK};
   font-size: 0.875rem;
   line-height: 1rem;
@@ -103,11 +93,6 @@ const ResizableInput = styled_components.input`
     font-weight: ${FONT_WEIGHT_MEDIUM};
     line-height: 1.5rem;
   }
-
-  &:disabled {
-    background-color: ${COLOR_NEUTRAL_LIGHTER};
-    cursor: not-allowed;
-  }
 `;
 const MaxItemsIndicator = styled_components.div`
   display: flex;

package/dist/components/Texts/paragraphs.d.ts

@@ -0,0 +1,12 @@
+declare const PARAGRAPH_SIZES: {
+    readonly body: "1rem";
+    readonly small: "0.875rem";
+    readonly caption: "0.75rem";
+};
+type ParagraphSize = keyof typeof PARAGRAPH_SIZES;
+interface ParagraphProps {
+    size?: ParagraphSize;
+    color?: string;
+}
+export declare const Paragraph: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, ParagraphProps>> & string;
+export {};

package/dist/components/Texts/paragraphs.js

@@ -0,0 +1,14 @@
+import styled_components from "styled-components";
+import { COLOR_NEUTRAL_DUSK } from "@ftdata/f-tokens";
+const PARAGRAPH_SIZES = {
+    body: '1rem',
+    small: '0.875rem',
+    caption: '0.75rem'
+};
+const Paragraph = styled_components.span`
+  color: ${({ color })=>color ?? COLOR_NEUTRAL_DUSK};
+  line-height: 1.5;
+  font-weight: 500;
+  font-size: ${({ size = 'body' })=>PARAGRAPH_SIZES[size]};
+`;
+export { Paragraph };

package/dist/components/Texts/text.d.ts

@@ -0,0 +1,17 @@
+declare const FONT_SIZES: {
+    readonly xxs: string;
+    readonly xs: string;
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+    readonly xl: string;
+    readonly xxl: string;
+    readonly xxxl: string;
+    readonly megadisplay: string;
+};
+type TextSize = keyof typeof FONT_SIZES;
+interface TextProps {
+    size?: TextSize;
+}
+export declare const Text: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, TextProps>> & string;
+export {};

package/dist/components/Texts/text.js

@@ -0,0 +1,21 @@
+import styled_components from "styled-components";
+import { COLOR_NEUTRAL_DUSK, FONT_RELATIVE_SIZE_LG, FONT_RELATIVE_SIZE_MD, FONT_RELATIVE_SIZE_MEGADISPLAY, FONT_RELATIVE_SIZE_SM, FONT_RELATIVE_SIZE_XL, FONT_RELATIVE_SIZE_XS, FONT_RELATIVE_SIZE_XXL, FONT_RELATIVE_SIZE_XXS, FONT_RELATIVE_SIZE_XXXL } from "@ftdata/f-tokens";
+const FONT_SIZES = {
+    xxs: FONT_RELATIVE_SIZE_XXS,
+    xs: FONT_RELATIVE_SIZE_XS,
+    sm: FONT_RELATIVE_SIZE_SM,
+    md: FONT_RELATIVE_SIZE_MD,
+    lg: FONT_RELATIVE_SIZE_LG,
+    xl: FONT_RELATIVE_SIZE_XL,
+    xxl: FONT_RELATIVE_SIZE_XXL,
+    xxxl: FONT_RELATIVE_SIZE_XXXL,
+    megadisplay: FONT_RELATIVE_SIZE_MEGADISPLAY
+};
+const Text = styled_components.span`
+  color: ${({ color })=>color ?? COLOR_NEUTRAL_DUSK};
+  line-height: 1.2;
+  font-weight: 600;
+
+  font-size: ${({ size = 'md' })=>FONT_SIZES[size]};
+`;
+export { Text };

package/dist/components/Texts/titles.d.ts

@@ -0,0 +1,7 @@
+type TitleVariant = 'huge' | 'standard' | 'section' | 'heading' | 'smallHeading' | 'subheading';
+interface TitleProps {
+    size?: TitleVariant;
+    color?: string;
+}
+export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, TitleProps>> & string;
+export {};

package/dist/components/Texts/titles.js

@@ -0,0 +1,37 @@
+import styled_components from "styled-components";
+import { COLOR_NEUTRAL_DUSK } from "@ftdata/f-tokens";
+const TITLE_VARIANTS = {
+    huge: {
+        size: '1.875rem',
+        spacing: '-0.03em'
+    },
+    standard: {
+        size: '1.5rem',
+        spacing: '-0.03em'
+    },
+    section: {
+        size: '1.25rem',
+        spacing: '-0.03em',
+        weight: 500
+    },
+    heading: {
+        size: '1rem'
+    },
+    smallHeading: {
+        size: '0.875rem'
+    },
+    subheading: {
+        size: '0.75rem',
+        spacing: '0.06em'
+    }
+};
+const Title = styled_components.span`
+  color: ${({ color })=>color ?? COLOR_NEUTRAL_DUSK};
+  line-height: 1.2;
+  font-weight: 600;
+
+  font-size: ${({ size = 'standard' })=>TITLE_VARIANTS[size].size};
+  letter-spacing: ${({ size = 'standard' })=>TITLE_VARIANTS[size].spacing ?? '0'};
+  font-weight: ${({ size = 'standard' })=>TITLE_VARIANTS[size].weight ?? 600};
+`;
+export { Title };

package/dist/components/fields/modifiers/selectColorModifier.d.ts

@@ -1,2 +1,2 @@
 import { FieldFeedbackType } from "../../../types/feedback";
-export declare function selectColorModifier(feedback?: FieldFeedbackType, active?: boolean): "" | import("styled-components").RuleSet<object>;
+export declare function selectColorModifier(feedback?: FieldFeedbackType, active?: boolean, disabled?: boolean): "" | import("styled-components").RuleSet<object>;

package/dist/components/fields/modifiers/selectColorModifier.js

@@ -1,6 +1,12 @@
 import { css } from "styled-components";
 import { FEEDBACK_COLORS } from "./color_modifiers.js";
-function selectColorModifier(feedback, active) {
+import { COLOR_NEUTRAL_LIGHT, COLOR_NEUTRAL_LIGHTER } from "@ftdata/f-tokens";
+function selectColorModifier(feedback, active, disabled) {
+    if (disabled) return css`
+      background-color: ${COLOR_NEUTRAL_LIGHTER};
+      box-shadow: 0 0 0 1px ${COLOR_NEUTRAL_LIGHT};
+      cursor: not-allowed;
+    `;
     if (!feedback) return "";
     const color = FEEDBACK_COLORS[feedback];
     return css`

package/dist/index.d.ts

@@ -17,12 +17,12 @@ export type { ISelectOption } from "./components/Select";
 export type { SelectProps } from "./components/Select";
 export { default as StateAlert } from "./components/StateAlert";
 export { default as MultiSelect } from "./components/MultiSelect";
-export { useMultiSelect } from "./components/MultiSelect/hooks/useMultiSelect";
-export type { MultiSelectProps } from "./components/MultiSelect";
-export type { IMultiSelectActions } from "./components/MultiSelect/interfaces/actions";
-export type { IMultiSelectOption, IMultiSelectState, } from "./components/MultiSelect/interfaces/state";
-export type { IMultiSelectConfig, IMultiSelectConfigActions, IMultiSelectConfigFields, } from "./components/MultiSelect/interfaces/config";
+export type { MultiSelectProps, IMultiSelectOption, } from "./components/MultiSelect";
 export { default as DoubleList } from "./components/DoubleList";
 export { default as Menu } from "./components/Menu";
 export type { MenuItem, MenuItemData, SubMenu, SubMenuData, } from "./components/Menu/types/MenuItem";
 export { Input } from "./components/Input";
+export { default as IconButton } from "./components/IconButton";
+export { default as Modal } from "./components/Modal";
+export { ModalOverlay } from "./components/Modal/styles";
+export type { ModalAction, ModalActions, ModalProps, ModalSizeCustom, ModalSizes, } from "./components/Modal";

package/dist/index.js

@@ -13,10 +13,12 @@ import UserMenu from "./components/UserMenu/index.js";
 import Select from "./components/Select/index.js";
 import StateAlert from "./components/StateAlert/index.js";
 import MultiSelect from "./components/MultiSelect/index.js";
-import { useMultiSelect } from "./components/MultiSelect/hooks/useMultiSelect.js";
 import DoubleList from "./components/DoubleList/index.js";
 import Menu from "./components/Menu/index.js";
 import { Input } from "./components/Input/index.js";
+import IconButton from "./components/IconButton/index.js";
+import Modal from "./components/Modal/index.js";
+import { ModalOverlay } from "./components/Modal/styles.js";
 export * from "./components/Grid/index.js";
 export * from "./components/Text/index.js";
-export { Avatar, Breadcrumb, Button, Checkbox, Collapse, DoubleList, EmptyState, Input, Loading, Menu, MultiSelect, Radio, Select, StateAlert, Switch, TextArea, Tooltips, UserMenu, useLoading, useMultiSelect };
+export { Avatar, Breadcrumb, Button, Checkbox, Collapse, DoubleList, EmptyState, IconButton, Input, Loading, Menu, Modal, ModalOverlay, MultiSelect, Radio, Select, StateAlert, Switch, TextArea, Tooltips, UserMenu, useLoading };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ftdata/ui",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "type": "module",
   "exports": {
     ".": {
@@ -31,8 +31,8 @@
     "react-input-mask-next": "3.0.0-alpha.12",
     "react-select": "^5.10.2",
     "react-window": "^2.0.2",
-    "@ftdata/f-icons": "0.0.3",
-    "@ftdata/f-tokens": "0.0.1"
+    "@ftdata/f-tokens": "0.0.1",
+    "@ftdata/f-icons": "0.0.6"
   },
   "publishConfig": {
     "access": "public"

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

@@ -1,10 +0,0 @@
-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;