@ftdata/ui 0.0.14 → 0.0.16

package/dist/components/Collapse/styles.js

@@ -6,6 +6,8 @@ const ContainerColapse = styled_components.div`
   align-items: center;
   cursor: pointer;
   margin-bottom: ${({ margin })=>margin ? margin : SPACING_INLINE_05};
+
+  display: grid;
 `;
 const ContentWrapper = styled_components.div`
   opacity: 0;

package/dist/components/Input/index.js

@@ -1,19 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
-import { Container, ContainerTextField, DivIcon, HelpText, InputContainer, InputControl, TextField } from "./styles.js";
-import DoneCircleIcon from "../../assets/DoneCircleIcon.js";
-import CancelSquareIcon from "../../assets/CancelSquareIcon.js";
+import { Container, DivIcon, HelpText, InputContainer, InputControl, StyledLabel } from "./styles.js";
 import { Icon } from "@ftdata/f-icons";
 const Input = ({ disabled, error, helpText, name, success, width, icon, textField, margin, required, ...rest })=>/*#__PURE__*/ jsxs(Container, {
         margin: margin,
         children: [
-            textField && /*#__PURE__*/ jsxs(ContainerTextField, {
+            textField && /*#__PURE__*/ jsxs(StyledLabel, {
+                htmlFor: name,
                 children: [
-                    /*#__PURE__*/ jsx(TextField, {
-                        children: textField
-                    }),
-                    required && /*#__PURE__*/ jsx("div", {
-                        className: "required",
+                    textField,
+                    required && /*#__PURE__*/ jsx("span", {
                         children: "*"
                     })
                 ]
@@ -44,8 +40,16 @@ const Input = ({ disabled, error, helpText, name, success, width, icon, textFiel
                 error: error,
                 success: success,
                 children: [
-                    !disabled && error && /*#__PURE__*/ jsx(CancelSquareIcon, {}) || success && /*#__PURE__*/ jsx(DoneCircleIcon, {}),
-                    helpText
+                    error && /*#__PURE__*/ jsx("div", {
+                        children: /*#__PURE__*/ jsx(Icon, {
+                            name: "ui warning-circle",
+                            size: "1rem",
+                            color: "currentColor"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        children: helpText
+                    })
                 ]
             })
         ]

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

@@ -13,5 +13,6 @@ interface HelpTextProps extends React.AllHTMLAttributes<HTMLSpanElement> {
     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 declare const HelpText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, HelpTextProps>> & string;
+export declare const StyledLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
 export {};

package/dist/components/Input/styles.js

@@ -1,5 +1,5 @@
 import styled_components from "styled-components";
-import { BORDER_RADIUS_SM, COLOR_ACCENT_MEDIUM, 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_INLINE_02, SPACING_INSET_SM, SPACING_SQUISH_NANO, SPACING_STACK_02 } from "@ftdata/f-tokens";
+import { BORDER_RADIUS_SM, COLOR_ACCENT_MEDIUM, COLOR_DANGER_MEDIUM, COLOR_NEUTRAL_DARK, COLOR_NEUTRAL_DAY, COLOR_NEUTRAL_DUSK, COLOR_NEUTRAL_LIGHT, COLOR_NEUTRAL_LIGHTER, COLOR_NEUTRAL_MEDIUM, COLOR_SUCCESS_MEDIUM, FONT_FAMILY_01, FONT_SIZE_MD, FONT_SIZE_SM, FONT_WEIGHT_BOLD, FONT_WEIGHT_MEDIUM, LINE_HEIGHT_MEDIUM, SPACING_INLINE_02, SPACING_INSET_SM, SPACING_SQUISH_NANO, SPACING_STACK_02 } from "@ftdata/f-tokens";
 import { Component } from "react";
 const ContainerTextField = styled_components.div`
   display: flex;
@@ -75,22 +75,33 @@ const InputControl = styled_components.input`
     color: ${({ disabled })=>disabled ? COLOR_NEUTRAL_LIGHT : COLOR_NEUTRAL_MEDIUM};
   }
 `;
-const HelpText = styled_components("span")`
-  align-items: center;
-  box-sizing: border-box;
-  color: ${({ disabled, error, success })=>disabled && COLOR_NEUTRAL_MEDIUM || error && COLOR_DANGER_MEDIUM || success && COLOR_SUCCESS_DARK || COLOR_NEUTRAL_DARK};
+const HelpText = styled_components.div`
+  color: ${({ error, success })=>error ? COLOR_DANGER_MEDIUM : success ? COLOR_SUCCESS_MEDIUM : COLOR_NEUTRAL_DARK};
   display: flex;
-  font-family: ${FONT_FAMILY_01};
-  font-weight: ${FONT_WEIGHT_MEDIUM};
-  line-height: ${LINE_HEIGHT_MEDIUM};
-  font-size: ${FONT_SIZE_XS};
-  margin-top: 8px;
+  gap: 0.25rem;
+  margin-top: 0.5rem;
 
-  svg {
-    margin-right: ${SPACING_INLINE_01};
-    path {
-      stroke: ${({ error, success })=>error && COLOR_DANGER_MEDIUM || success && COLOR_SUCCESS_MEDIUM || COLOR_NEUTRAL_DARK};
-    }
+  div {
+    height: 1rem;
+    width: 1rem;
+  }
+
+  span {
+    font-size: 0.875rem;
+    line-height: 1rem;
+    font-weight: ${FONT_WEIGHT_MEDIUM};
+  }
+`;
+const StyledLabel = styled_components.label`
+  color: ${COLOR_NEUTRAL_DUSK};
+  display: flex;
+  font-size: 0.875rem;
+  font-weight: ${FONT_WEIGHT_BOLD};
+  line-height: 1rem;
+  margin-bottom: 0.5rem;
+
+  span {
+    color: ${COLOR_DANGER_MEDIUM};
   }
 `;
-export { Container, ContainerTextField, DivIcon, HelpText, InputContainer, InputControl, ReactInputMask, TextField };
+export { Container, ContainerTextField, DivIcon, HelpText, InputContainer, InputControl, ReactInputMask, StyledLabel, TextField };

package/dist/components/Menu/constants/icons.d.ts

@@ -1,17 +1,3 @@
-export declare const ICONS: {
-    panelist: import("react/jsx-runtime").JSX.Element;
-    registration: import("react/jsx-runtime").JSX.Element;
-    logistics: import("react/jsx-runtime").JSX.Element;
-    reports: import("react/jsx-runtime").JSX.Element;
-    driver_behavior: import("react/jsx-runtime").JSX.Element;
-    settings: import("react/jsx-runtime").JSX.Element;
-    f_analytics: import("react/jsx-runtime").JSX.Element;
-    f_speed: import("react/jsx-runtime").JSX.Element;
-    title_module_playback_f_view: import("react/jsx-runtime").JSX.Element;
-    message: import("react/jsx-runtime").JSX.Element;
-    maps: import("react/jsx-runtime").JSX.Element;
-    changelog: import("react/jsx-runtime").JSX.Element;
-    dashboard: import("react/jsx-runtime").JSX.Element;
-    mosaic: import("react/jsx-runtime").JSX.Element;
-};
+import { IconsNames } from "@ftdata/f-icons";
+export declare const ICONS: Record<string, IconsNames>;
 export type IconsKeys = keyof typeof ICONS;

package/dist/components/Menu/constants/icons.js

@@ -1,61 +1,16 @@
-import { jsx } from "react/jsx-runtime";
-import { Icon } from "@ftdata/f-icons";
+import "react";
 const ICONS = {
-    panelist: /*#__PURE__*/ jsx(Icon, {
-        name: "ui briefcase",
-        color: "currentColor"
-    }),
-    registration: /*#__PURE__*/ jsx(Icon, {
-        name: "ui plus-add",
-        color: "currentColor"
-    }),
-    logistics: /*#__PURE__*/ jsx(Icon, {
-        name: "nav arrow-location-direction-1",
-        color: "currentColor"
-    }),
-    reports: /*#__PURE__*/ jsx(Icon, {
-        name: "bp chart-19",
-        color: "currentColor"
-    }),
-    driver_behavior: /*#__PURE__*/ jsx(Icon, {
-        name: "nav direction-arrow-road",
-        color: "currentColor"
-    }),
-    settings: /*#__PURE__*/ jsx(Icon, {
-        name: "ui settings",
-        color: "currentColor"
-    }),
-    f_analytics: /*#__PURE__*/ jsx(Icon, {
-        name: "sm google-analytics",
-        color: "currentColor"
-    }),
-    f_speed: /*#__PURE__*/ jsx(Icon, {
-        name: "cs speedometer",
-        color: "currentColor"
-    }),
-    title_module_playback_f_view: /*#__PURE__*/ jsx(Icon, {
-        name: "ui video-camera",
-        color: "currentColor"
-    }),
-    message: /*#__PURE__*/ jsx(Icon, {
-        name: "eml emails-letter-mail-2",
-        color: "currentColor"
-    }),
-    maps: /*#__PURE__*/ jsx(Icon, {
-        name: "nav earth-home-world",
-        color: "currentColor"
-    }),
-    changelog: /*#__PURE__*/ jsx(Icon, {
-        name: "ui info-information",
-        color: "currentColor"
-    }),
-    dashboard: /*#__PURE__*/ jsx(Icon, {
-        name: "ui dashboard-minimal",
-        color: "currentColor"
-    }),
-    mosaic: /*#__PURE__*/ jsx(Icon, {
-        name: "ui grid-layout-add",
-        color: "currentColor"
-    })
+    "fa-building-o": "ui briefcase",
+    "fa-edit": "ui plus-add",
+    "fa-connectdevelop": "nav arrow-location-direction-1",
+    "fa-list-ol": "bp chart-19",
+    "fa-road": "nav direction-arrow-road",
+    "fa-cogs": "ui settings",
+    "fa-bar-chart": "sm google-analytics",
+    "fa-gauge": "cs speedometer",
+    "fa-camera": "ui video-camera",
+    "fa-globe": "nav earth-home-world",
+    "fa-truck": "nmk truck",
+    "fa-dashboard": "ui dashboard-minimal"
 };
 export { ICONS };

package/dist/components/Menu/helpers/createMenus.js

@@ -1,19 +1,26 @@
-import { ICONS } from "../constants/icons.js";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Icon } from "@ftdata/f-icons";
 import { createSubMenus } from "./createSubMenus.js";
+import { ICONS } from "../constants/icons.js";
 function createMenuItems(data, translate) {
-    return data.sort((a, b)=>a.ordenation - b.ordenation).filter((item)=>!!ICONS[item.translate_key]).map((item)=>{
-        const icon = ICONS[item.translate_key];
+    return data.sort((a, b)=>a.ordenation - b.ordenation).map((item)=>{
+        const icon = /*#__PURE__*/ jsx(Icon, {
+            name: ICONS[item.menu_icon.trim()] || "ui plus-add",
+            color: "currentColor"
+        });
         const subItems = item.itens.sort((a, b)=>a.ordenation - b.ordenation);
         return {
-            label: translate(item.translate_key),
-            icon,
+            id: item.id,
             callback: ()=>{
                 if (item.endpoint) {
                     const url = new URL(item.endpoint, window.location.origin).toString();
                     window.open(url, "_blank");
                 }
             },
-            submenus: createSubMenus(subItems, translate)
+            submenus: createSubMenus(subItems, translate),
+            icon,
+            label: translate(item.translate_key)
         };
     });
 }

package/dist/components/Menu/helpers/createSubMenus.d.ts

@@ -1,2 +1,2 @@
-import { MenuItemData, SubMenuData } from "../types/MenuItem";
+import { MenuItemData, SubMenuData } from '../types/MenuItem';
 export declare function createSubMenus(data: MenuItemData[], translate: (key: string) => string): SubMenuData[];

package/dist/components/Menu/helpers/createSubMenus.js

@@ -4,7 +4,7 @@ function createSubMenus(data, translate) {
             callback: ()=>{
                 if (item.endpoint) {
                     const url = new URL(item.endpoint, window.location.origin).toString();
-                    window.open(url, "_blank");
+                    window.open(url, '_blank');
                 }
             }
         }));

package/dist/components/Menu/helpers/generateColorScale.js

@@ -23,7 +23,7 @@ function generateColorScale(hex) {
         950
     ];
     const toRgb = (hex)=>{
-        const clean = hex.replace("#", "");
+        const clean = hex.replace('#', '');
         const bigint = parseInt(clean, 16);
         return {
             r: bigint >> 16 & 255,
@@ -35,7 +35,7 @@ function generateColorScale(hex) {
             r,
             g,
             b
-        ].map((c)=>Math.round(c).toString(16).padStart(2, "0")).join("")}`;
+        ].map((c)=>Math.round(c).toString(16).padStart(2, '0')).join('')}`;
     const mix = (c1, c2, amount)=>c1 + (c2 - c1) * amount;
     const { r: baseR, g: baseG, b: baseB } = toRgb(hex);
     const lighten = (amount)=>({

package/dist/components/Menu/helpers/getLuminance.d.ts

@@ -1 +1 @@
-export declare function getLuminance(hex: string): "dark" | "light";
+export declare function getLuminance(hex: string): 'dark' | 'light';

package/dist/components/Menu/helpers/getLuminance.js

@@ -1,9 +1,9 @@
 function getLuminance(hex) {
-    const sanitizedHex = hex.replace("#", "");
+    const sanitizedHex = hex.replace('#', '');
     const r = parseInt(sanitizedHex.substring(0, 2), 16);
     const g = parseInt(sanitizedHex.substring(2, 4), 16);
     const b = parseInt(sanitizedHex.substring(4, 6), 16);
     const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-    return luminance < 0.5 ? "dark" : "light";
+    return luminance < 0.5 ? 'dark' : 'light';
 }
 export { getLuminance };

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

@@ -9,5 +9,5 @@ interface MenuProps {
     translate: (key: string) => string;
     active?: string;
 }
-export default function Menu({ background, fontcolor, subMenusBackground, logo, items, translate, active, }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export default function Menu({ background, fontcolor, subMenusBackground, logo, items, translate, active, }: MenuProps): JSX.Element;
 export {};

package/dist/components/Menu/index.js

@@ -7,22 +7,14 @@ function Menu({ background, fontcolor, subMenusBackground, logo, items, translat
     const [expand, setExpand] = useState(false);
     const [submenus, setSubmenus] = useState([]);
     const [isClosingSubmenu, setIsClosingSubmenu] = useState(false);
-    const [menuAnimating, setMenuAnimating] = useState(false);
     const menuRef = useRef(null);
     const menus = createMenus(items, translate);
     const toggleMenu = ()=>{
-        if (expand) {
-            setMenuAnimating(true);
-            setTimeout(()=>{
-                setSubmenus([]);
-                setExpand(false);
-                setMenuAnimating(false);
-            }, 120);
-            return;
-        }
+        if (expand) return void setTimeout(()=>{
+            setSubmenus([]);
+            setExpand(false);
+        }, 120);
         setExpand(true);
-        setMenuAnimating(true);
-        setTimeout(()=>setMenuAnimating(false), 120);
     };
     const handleClickItem = (event, submenus, callback)=>{
         event.stopPropagation();
@@ -34,10 +26,6 @@ function Menu({ background, fontcolor, subMenusBackground, logo, items, translat
         event.stopPropagation();
         toggleMenu();
     };
-    const handleClickAside = (event)=>{
-        if (!expand) return void toggleMenu();
-        if (event.target === event.currentTarget) toggleMenu();
-    };
     const handleClickBack = ()=>{
         setIsClosingSubmenu(true);
         setTimeout(()=>{
@@ -62,7 +50,7 @@ function Menu({ background, fontcolor, subMenusBackground, logo, items, translat
     return /*#__PURE__*/ jsxs(MenuAside, {
         ref: menuRef,
         background: background,
-        onClick: handleClickAside,
+        onClick: expand ? ()=>null : toggleMenu,
         $expand: expand,
         children: [
             /*#__PURE__*/ jsxs(MenuHeader, {
@@ -71,12 +59,12 @@ function Menu({ background, fontcolor, subMenusBackground, logo, items, translat
                         onClick: handleClickHamburger,
                         fontcolor: fontcolor,
                         $expand: expand,
-                        $animating: menuAnimating,
                         children: [
                             /*#__PURE__*/ jsx("div", {
                                 children: /*#__PURE__*/ jsx(Icon, {
                                     name: "ui menu-burger-square",
-                                    width: "1.5rem"
+                                    width: "1.5rem",
+                                    color: "currentColor"
                                 })
                             }),
                             /*#__PURE__*/ jsx("span", {
@@ -96,7 +84,6 @@ function Menu({ background, fontcolor, subMenusBackground, logo, items, translat
                         onClick: (event)=>handleClickItem(event, menu.submenus, menu.callback),
                         $expand: expand || void 0,
                         $active: menu.label === translate(active || ""),
-                        $animating: menuAnimating,
                         children: [
                             /*#__PURE__*/ jsx("div", {
                                 children: menu.icon
@@ -111,24 +98,24 @@ function Menu({ background, fontcolor, subMenusBackground, logo, items, translat
                 $isClosing: isClosingSubmenu || void 0,
                 background: subMenusBackground,
                 children: [
-                    /*#__PURE__*/ jsxs(SubItemsHeader, {
+                    /*#__PURE__*/ jsx(SubItemsHeader, {
                         fontcolor: fontcolor,
-                        children: [
-                            /*#__PURE__*/ jsx("button", {
-                                onClick: handleClickBack,
-                                children: /*#__PURE__*/ jsx(Icon, {
-                                    name: "arw arrow-left"
-                                })
-                            }),
-                            translate("back")
-                        ]
+                        children: /*#__PURE__*/ jsxs("button", {
+                            onClick: handleClickBack,
+                            children: [
+                                /*#__PURE__*/ jsx(Icon, {
+                                    name: "arw arrow-left",
+                                    color: "currentColor"
+                                }),
+                                translate("back")
+                            ]
+                        })
                     }),
                     /*#__PURE__*/ jsx(SubItemsWrapper, {
                         background: subMenusBackground,
                         children: submenus.map((submenu, idx)=>/*#__PURE__*/ jsx(SubMenuItem, {
                                 fontcolor: fontcolor,
                                 onClick: (event)=>handleClickItem(event, [], submenu.callback),
-                                $animating: menuAnimating,
                                 children: submenu.label
                             }, `${submenu.label}-${idx}`))
                     })

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

@@ -4,7 +4,6 @@ interface ICommonProps {
     $active?: boolean;
     $expand?: boolean;
     $isClosing?: boolean;
-    $animating?: boolean;
 }
 export declare const MenuAside: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, ICommonProps>> & string;
 export declare const MenuHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ICommonProps>> & string;

package/dist/components/Menu/styles.js

@@ -1,6 +1,26 @@
 import styled_components, { keyframes } from "styled-components";
 import { generateColorScale } from "./helpers/generateColorScale.js";
 import { getLuminance } from "./helpers/getLuminance.js";
+const shrinkToRight = keyframes`
+  from {
+    transform: scaleX(1);
+    opacity: 1;
+  }
+  to {
+    transform: scaleX(0);
+    opacity: 0;
+  }
+`;
+const growFromRight = keyframes`
+  from {
+    transform: scaleX(0);
+    opacity: 0;
+  }
+  to {
+    transform: scaleX(1);
+    opacity: 1;
+  }
+`;
 const fadeOutAndHide = keyframes`
   0% {
     opacity: 1;
@@ -33,26 +53,6 @@ const fadeInAndShow = keyframes`
     display: flex;
   }
 `;
-const submenuEnter = keyframes`
-  from {
-    width: 0;
-    opacity: 0;
-  }
-  to {
-    width: 15.25rem;
-    opacity: 1;
-  }
-`;
-const submenuExit = keyframes`
-  from {
-    width: 15.25rem;
-    opacity: 1;
-  }
-  to {
-    width: 0;
-    opacity: 0;
-  }
-`;
 const MenuAside = styled_components.aside`
   background-color: ${({ background })=>background || "#000"};
   box-sizing: border-box;
@@ -78,7 +78,6 @@ const MenuHeader = styled_components.div`
 `;
 const ContainerLogo = styled_components.div`
   padding: 0 0.5rem;
-  max-height: 8.875rem;
   animation: ${({ $expand })=>$expand ? fadeInAndShow : fadeOutAndHide}
     0.25s forwards;
 
@@ -87,7 +86,7 @@ const ContainerLogo = styled_components.div`
     align-items: center;
     display: flex;
     justify-content: center;
-    max-height: 8rem;
+    max-height: 8.875rem;
     max-width: 100%;
   }
 `;
@@ -125,40 +124,33 @@ const ItemMenu = styled_components.div`
     transition:
       opacity 0.4s ease,
       transform 0.4s ease;
-    white-space: ${({ $expand, $animating })=>$expand && !$animating ? "normal" : "nowrap"};
+    white-space: ${({ $expand })=>$expand ? "wrap" : "nowrap"};
     overflow: hidden;
-    text-overflow: ellipsis;
+
     &:hover {
       opacity: 1;
     }
   }
 `;
 const SubItemsContainer = styled_components.div`
-  animation: ${({ $isClosing })=>$isClosing ? submenuExit : submenuEnter}
-    0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  animation: ${({ $isClosing })=>$isClosing ? shrinkToRight : growFromRight}
+    0.4s ease forwards;
   background-color: ${({ background })=>generateColorScale(background || "#000000")[500]};
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   height: 100%;
-  padding: 0.5rem 0 0 1rem;
+  padding: 1rem 0 0 1rem;
   position: absolute;
   right: 0;
   top: 0;
   transform-origin: right;
   width: 15.25rem;
   z-index: 1;
-  overflow: hidden;
 `;
 const SubItemsHeader = styled_components.div`
   padding: 0.5rem 0 1.5rem 0;
-  display: flex;
-  gap: 0.5rem;
-  color: ${({ fontcolor })=>fontcolor || "#FFFFFF"};
-  font-size: 1rem;
-  line-height: 1.5rem;
-  font-weight: 500;
 
   button {
     align-items: center;
@@ -167,18 +159,13 @@ const SubItemsHeader = styled_components.div`
     color: ${({ fontcolor })=>fontcolor || "#FFFFFF"};
     cursor: pointer;
     display: flex;
+    font-size: 1rem;
+    font-weight: 500;
     gap: 0.5rem;
     line-height: 1rem;
     margin: 0;
-    border-radius: 50%;
     padding: 0;
-    transition: all 0.2s ease;
-
-    &:hover {
-      background-color: ${({ background })=>generateColorScale(background || "#00000")["dark" === getLuminance(background || "#00000") ? 400 : 600]};
-      box-shadow: 0 0 0 2px
-        ${({ background })=>generateColorScale(background || "#00000")["dark" === getLuminance(background || "#00000") ? 400 : 600]};
-    }
+    transition: opacity 0.2s ease;
   }
 `;
 const SubItemsWrapper = styled_components.div`
@@ -207,9 +194,6 @@ const SubMenuItem = styled_components.span`
   opacity: ${({ $active })=>$active ? "1" : "0.68"};
   padding: 0.5rem 0.75rem;
   transition: background-color 0.2s ease;
-  white-space: ${({ $expand, $animating })=>$expand && !$animating ? "normal" : "nowrap"};
-  overflow: hidden;
-  text-overflow: ellipsis;
 
   &:hover {
     opacity: 1;

package/dist/components/Menu/types/IconKeysType.d.ts

@@ -1,2 +1,2 @@
-import { ICONS } from "../constants/icons";
+import { ICONS } from '../constants/icons';
 export type IconsKeysType = keyof typeof ICONS;

package/dist/components/Menu/types/MenuItem.d.ts

@@ -1,5 +1,5 @@
-import { JSX } from "react";
-import { IconsKeysType } from "./IconKeysType";
+import { JSX } from 'react';
+import { IconsKeysType } from './IconKeysType';
 export type SubMenuData = {
     callback: () => void;
     label: string;
@@ -19,6 +19,7 @@ export type MenuItemData = {
     ordenation: number;
 };
 export type MenuItem = {
+    id: number;
     callback: () => void;
     submenus: SubMenu[];
     icon: JSX.Element;

package/dist/components/Select/List/index.js

@@ -13,7 +13,6 @@ const SelectList = ({ options, onClickOption, selectedOption, isLoading, onLoadM
     const height = OPTION_SIZE * (0 === optionLength ? 1 : optionLength >= 7 ? 7 : optionLength);
     const onItemsRendered = useCallback(async ({ stopIndex })=>{
         const isAtEnd = stopIndex >= options.length - 1;
-        console.log(lastIndex, stopIndex, isAtEnd);
         if (loadingMore) return;
         try {
             setLoadingMore(true);

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

@@ -1,4 +1,4 @@
-import React, { InputHTMLAttributes, JSX } from "react";
+import { InputHTMLAttributes, JSX } from "react";
 export interface ISelectOption {
     label: string;
     value: string;
@@ -25,7 +25,7 @@ export interface SelectProps extends InputPropsWithoutOnToggle {
     icon?: JSX.Element;
     variation?: "default" | "searchable";
     selected: ISelectOption | null;
-    setSelected: React.Dispatch<React.SetStateAction<ISelectOption | null>>;
+    setSelected: (selected: ISelectOption | null) => void;
     onLoadMore?: () => Promise<void>;
     onToggle?: (open: boolean) => void;
     dropdownPosition?: "top" | "bottom";

package/dist/components/Select/index.js

@@ -153,6 +153,7 @@ function Select({ helpText, isError, isSuccess, label, name, isRequired, options
                         onClick: handleClickCavet,
                         isListOpen: showList,
                         ref: cavetRef,
+                        type: "button",
                         children: /*#__PURE__*/ jsx(Icon, {
                             name: "arw caret-down",
                             color: "currentColor",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ftdata/ui",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "type": "module",
   "exports": {
     ".": {
@@ -31,7 +31,7 @@
     "react-input-mask-next": "3.0.0-alpha.12",
     "react-select": "^5.10.2",
     "react-window": "^2.0.2",
-    "@ftdata/f-icons": "0.0.2",
+    "@ftdata/f-icons": "0.0.4",
     "@ftdata/f-tokens": "0.0.1"
   },
   "publishConfig": {

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;

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

@@ -1,108 +0,0 @@
-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/Menu/Menu.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import Menu from "./index";
-declare const meta: Meta<typeof Menu>;
-export default meta;
-type Story = StoryObj<typeof Menu>;
-export declare const Default: Story;

package/dist/components/Menu/Menu.stories.js

@@ -1,116 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import index from "./index.js";
-import { Icon } from "@ftdata/f-icons";
-const meta = {
-    title: "Components/Menu",
-    component: index,
-    argTypes: {
-        background: {
-            control: "color"
-        },
-        fontcolor: {
-            control: "color"
-        },
-        subMenusBackground: {
-            control: "color"
-        },
-        active: {
-            control: "text"
-        }
-    }
-};
-const Menu_stories = meta;
-const mockLogo = /*#__PURE__*/ jsx(Icon, {
-    name: "ui airplay-signal",
-    width: "2rem"
-});
-const mockItems = [
-    {
-        id: 1,
-        description: "Dashboard principal",
-        endpoint: "/dashboard",
-        itens: [
-            {
-                id: 11,
-                description: "Relat\xf3rios",
-                endpoint: "/dashboard/reports",
-                itens: [
-                    {
-                        id: 12,
-                        description: "Estat\xedsticas",
-                        endpoint: "/dashboard/statistics",
-                        itens: [],
-                        menu_icon: "ui statistics",
-                        translate_key: "changelog",
-                        ordenation: 2
-                    },
-                    {
-                        id: 12,
-                        description: "Estat\xedsticas",
-                        endpoint: "/dashboard/statistics",
-                        itens: [],
-                        menu_icon: "ui statistics",
-                        translate_key: "changelog",
-                        ordenation: 2
-                    },
-                    {
-                        id: 12,
-                        description: "Estat\xedsticas",
-                        endpoint: "/dashboard/statistics",
-                        itens: [],
-                        menu_icon: "ui statistics",
-                        translate_key: "changelog",
-                        ordenation: 2
-                    }
-                ],
-                menu_icon: "ui report",
-                translate_key: "reports",
-                ordenation: 1
-            },
-            {
-                id: 12,
-                description: "Estat\xedsticas",
-                endpoint: "/dashboard/statistics",
-                itens: [],
-                menu_icon: "ui statistics",
-                translate_key: "changelog",
-                ordenation: 2
-            }
-        ],
-        menu_icon: "ui dashboard",
-        translate_key: "dashboard",
-        ordenation: 1
-    },
-    {
-        id: 2,
-        description: "Configura\xe7\xf5es do sistema",
-        endpoint: "/settings",
-        itens: [],
-        menu_icon: "ui settings",
-        translate_key: "settings",
-        ordenation: 2
-    }
-];
-const mockTranslate = (key)=>{
-    const dict = {
-        menu: "Menu",
-        dashboard: "Dashboard",
-        settings: "Configura\xe7\xf5es",
-        back: "Voltar",
-        reports: "Relat\xf3rios",
-        statistics: "Estat\xedsticas"
-    };
-    return dict[key] || key;
-};
-const Default = {
-    args: {
-        background: "#222",
-        fontcolor: "#fff",
-        subMenusBackground: "#333",
-        logo: mockLogo,
-        items: mockItems,
-        translate: mockTranslate,
-        active: "dashboard"
-    }
-};
-export { Default, Menu_stories as default };