@ftdata/ui 0.0.4 → 0.0.5

package/dist/assets/fonts/Inter-Regular.js

@@ -0,0 +1,2 @@
+import Inter_Regular_namespaceObject from "../../static/font/Inter-Regular.ttf";
+export { Inter_Regular_namespaceObject as default };

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

@@ -19,10 +19,6 @@ export declare const Sizes: Story;
  * Variante do Avatar com nome de usuário.
  */
 export declare const Alt: Story;
-/**
- * Variação do Avatar quando o usuário está online.
- */
-export declare const Active: Story;
 /**
  * Variação do Avatar com imagem de usuário personalizada.
  */

package/dist/components/Avatar/Avatar.stories.js

@@ -21,14 +21,6 @@ const meta = {
                 }
             }
         },
-        active: {
-            description: "Define se o usu\xe1rio est\xe1 online ou offline (Pontinho verde no canto inferior direito).",
-            table: {
-                defaultValue: {
-                    summary: "false"
-                }
-            }
-        },
         alt: {
             description: "Define a propriedade alt da imagem. Representa tamb\xe9m o nome de usu\xe1rio.",
             table: {
@@ -86,21 +78,12 @@ const Sizes = {
         },
         alt: {
             control: false
-        },
-        active: {
-            control: false
         }
     }
 };
 const Alt = {
     args: {
-        alt: "Alt Name",
-        size: "large"
-    }
-};
-const Active = {
-    args: {
-        active: true,
+        alt: "USER",
         size: "large"
     }
 };
@@ -168,10 +151,7 @@ const Index = {
         },
         alt: {
             control: false
-        },
-        active: {
-            control: false
         }
     }
 };
-export { Active, Alt, CustomImage, Default, Index, Sizes, Avatar_stories as default };
+export { Alt, CustomImage, Default, Index, Sizes, Avatar_stories as default };

package/dist/components/Avatar/{utils → helpers}/getAvatarColors.d.ts

@@ -1,6 +1,6 @@
 interface AvatarColors {
     background: string;
-    fontColor: string;
+    color: string;
 }
 export declare const getAvatarColors: (index?: number) => AvatarColors;
 export {};

package/dist/components/Avatar/{utils → helpers}/getAvatarColors.js

@@ -2,35 +2,35 @@ import { COLOR_VISUAL_BLUE, COLOR_VISUAL_CYAN, COLOR_VISUAL_GREEN, COLOR_VISUAL_
 const AVATAR_COLORS = [
     {
         background: `${COLOR_VISUAL_BLUE}2d`,
-        fontColor: COLOR_VISUAL_BLUE
+        color: COLOR_VISUAL_BLUE
     },
     {
         background: `${COLOR_VISUAL_CYAN}2d`,
-        fontColor: COLOR_VISUAL_CYAN
+        color: COLOR_VISUAL_CYAN
     },
     {
         background: `${COLOR_VISUAL_GREEN}2d`,
-        fontColor: COLOR_VISUAL_GREEN
+        color: COLOR_VISUAL_GREEN
     },
     {
         background: `${COLOR_VISUAL_YELLOW}2d`,
-        fontColor: COLOR_VISUAL_YELLOW
+        color: COLOR_VISUAL_YELLOW
     },
     {
         background: `${COLOR_VISUAL_ORANGE}2d`,
-        fontColor: COLOR_VISUAL_ORANGE
+        color: COLOR_VISUAL_ORANGE
     },
     {
         background: `${COLOR_VISUAL_RED}2d`,
-        fontColor: COLOR_VISUAL_RED
+        color: COLOR_VISUAL_RED
     },
     {
         background: `${COLOR_VISUAL_VIOLET}2d`,
-        fontColor: COLOR_VISUAL_VIOLET
+        color: COLOR_VISUAL_VIOLET
     },
     {
         background: `${COLOR_VISUAL_PURPLE}2d`,
-        fontColor: COLOR_VISUAL_PURPLE
+        color: COLOR_VISUAL_PURPLE
     }
 ];
 const getAvatarColors = (index)=>{

package/dist/components/Avatar/helpers/getInitials.d.ts

@@ -0,0 +1 @@
+export declare function getInitials(name?: string): string;

package/dist/components/Avatar/helpers/getInitials.js

@@ -0,0 +1,14 @@
+function getInitials(name) {
+    if (!name) return "JD";
+    const words = name.trim().split(" ").filter(Boolean);
+    if (0 === words.length) return "JD";
+    if (1 === words.length) {
+        const word = words[0];
+        if (1 === word.length) return word[0].toUpperCase();
+        return (word[0] + word[word.length - 1]).toUpperCase();
+    }
+    const first = words[0][0];
+    const last = words[words.length - 1][0];
+    return (first + last).toUpperCase();
+}
+export { getInitials };

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

@@ -1,7 +1,6 @@
 export interface AvatarProps extends React.ImgHTMLAttributes<HTMLImageElement> {
     alt?: string;
-    active?: boolean;
     size?: "large" | "medium" | "small" | "mini";
     index?: number;
 }
-export default function Avatar({ alt, src, active, size, index, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export default function Avatar({ alt, src, size, index, ...rest }: AvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Avatar/index.js

@@ -1,28 +1,26 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Image, StatusDot, Wrapper } from "./styles.js";
-import { getAvatarColors } from "./utils/getAvatarColors.js";
-function Avatar({ alt, src, active, size = "medium", index, ...rest }) {
-    const imageSource = ()=>{
-        if (src) return src;
-        const { background, fontColor } = getAvatarColors(index);
-        const name = alt?.length ? alt.split(" ").join("+") : "John Doe";
-        return `https://ui-avatars.com/api/
-			?name=${name}
-			&length=2
-			&size=40
-			&bold=true
-			&background=${background.replace("#", "")}
-			&color=${fontColor.replace("#", "")}`;
-    };
-    return /*#__PURE__*/ jsxs(Wrapper, {
+import { jsx } from "react/jsx-runtime";
+import { Image, Initials, Wrapper } from "./styles.js";
+import { getAvatarColors } from "./helpers/getAvatarColors.js";
+import { getInitials } from "./helpers/getInitials.js";
+import { useRef } from "react";
+function Avatar({ alt, src, size = "medium", index, ...rest }) {
+    const initials = getInitials(alt);
+    const styleRef = useRef(getAvatarColors(index));
+    const { background, color } = styleRef.current;
+    return /*#__PURE__*/ jsx(Wrapper, {
         size: size,
         ...rest,
-        children: [
-            /*#__PURE__*/ jsx(Image, {
-                src: imageSource()
-            }),
-            active && "mini" !== size && /*#__PURE__*/ jsx(StatusDot, {})
-        ]
+        children: src ? /*#__PURE__*/ jsx(Image, {
+            src: src,
+            alt: alt
+        }) : /*#__PURE__*/ jsx(Initials, {
+            background: background,
+            color: color,
+            size: size,
+            children: /*#__PURE__*/ jsx("span", {
+                children: initials
+            })
+        })
     });
 }
 export { Avatar as default };

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

@@ -1,4 +1,10 @@
 import type { AvatarProps } from ".";
 export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, AvatarProps>> & string;
+interface InitialsProps {
+    background: string;
+    color: string;
+    size?: AvatarProps["size"];
+}
+export declare const Initials: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, InitialsProps>> & string;
 export declare const Image: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
-export declare const StatusDot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export {};

package/dist/components/Avatar/styles.js

@@ -1,19 +1,44 @@
 import styled_components from "styled-components";
-import { COLOR_NEUTRAL_DAY, COLOR_SUCCESS_MEDIUM } from "@ftdata/f-tokens";
+import { COLOR_NEUTRAL_DAY } from "@ftdata/f-tokens";
 const AVATAR_SIZES = {
     large: "height: 2.5rem; width: 2.5rem;",
     medium: "height: 2rem; width: 2rem;",
     small: "height: 1.5rem; width: 1.5rem;",
     mini: "height: 1rem; width: 1rem;"
 };
+const FONT_SIZES = {
+    large: "2.5rem",
+    medium: "2rem",
+    small: "1.5rem",
+    mini: "1rem"
+};
 const Wrapper = styled_components.div`
   border-radius: 50%;
   background-color: ${COLOR_NEUTRAL_DAY};
   height: 100%;
   position: relative;
   width: 100%;
+  font-size: ${({ size })=>FONT_SIZES[size ?? "medium"]};
+
+  ${({ size })=>AVATAR_SIZES[size ?? "medium"]};
+`;
+const Initials = styled_components.div`
+  background-color: ${({ background })=>background};
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  color: ${({ color })=>color};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1em;
 
-  ${({ size })=>AVATAR_SIZES[size ? size : "medium"]};
+  span {
+    font-weight: 700;
+    text-transform: uppercase;
+    font-size: 0.45em;
+    font-family: "Inter", sans-serif;
+  }
 `;
 const Image = styled_components.img`
   border-radius: 50%;
@@ -21,17 +46,4 @@ const Image = styled_components.img`
   object-fit: cover;
   width: 100%;
 `;
-const StatusDot = styled_components.span`
-  background-color: ${COLOR_SUCCESS_MEDIUM};
-  border-color: ${COLOR_NEUTRAL_DAY};
-  border-style: solid;
-  border-width: 0.125rem;
-  border-radius: 50%;
-  bottom: -0.125rem;
-  display: block;
-  height: 0.5rem;
-  position: absolute;
-  right: -0.125rem;
-  width: 0.5rem;
-`;
-export { Image, StatusDot, Wrapper };
+export { Image, Initials, Wrapper };

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

@@ -2,11 +2,11 @@ import { JSX } from "react";
 import { MenuItemData } from "./types/MenuItem";
 interface MenuProps {
     background: string;
-    fontColor: string;
+    fontcolor: string;
     subMenusBackground: string;
     logo: JSX.Element;
     items: MenuItemData[];
     translate: (key: string) => string;
 }
-export default function Menu({ background, fontColor, subMenusBackground, logo, items, translate, }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export default function Menu({ background, fontcolor, subMenusBackground, logo, items, translate, }: MenuProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Menu/index.js

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { ContainerLogo, ItemMenu, ItemsContainer, MenuAside, MenuHeader, SubItemsContainer, SubItemsHeader, SubItemsWrapper, SubMenuItem } from "./styles.js";
 import createMenus from "./helpers/createMenus.js";
 import { Icon } from "@ftdata/f-icons";
-function Menu({ background, fontColor, subMenusBackground, logo, items, translate }) {
+function Menu({ background, fontcolor, subMenusBackground, logo, items, translate }) {
     const [expand, setExpand] = useState(false);
     const [submenus, setSubmenus] = useState([]);
     const [isClosingSubmenu, setIsClosingSubmenu] = useState(false);
@@ -35,14 +35,14 @@ function Menu({ background, fontColor, subMenusBackground, logo, items, translat
     return /*#__PURE__*/ jsxs(MenuAside, {
         background: background,
         onClick: expand ? ()=>null : toggleMenu,
-        expand: expand,
+        $expand: expand,
         children: [
             /*#__PURE__*/ jsxs(MenuHeader, {
                 children: [
                     /*#__PURE__*/ jsxs(ItemMenu, {
                         onClick: handleClickHamburger,
-                        fontColor: fontColor,
-                        expand: expand,
+                        fontcolor: fontcolor,
+                        $expand: expand,
                         children: [
                             /*#__PURE__*/ jsx("div", {
                                 children: /*#__PURE__*/ jsx(Icon, {
@@ -56,16 +56,16 @@ function Menu({ background, fontColor, subMenusBackground, logo, items, translat
                         ]
                     }),
                     /*#__PURE__*/ jsx(ContainerLogo, {
-                        expand: expand,
+                        $expand: expand || void 0,
                         children: logo
                     })
                 ]
             }),
             /*#__PURE__*/ jsx(ItemsContainer, {
                 children: menus.map((menu, idx)=>/*#__PURE__*/ jsxs(ItemMenu, {
-                        fontColor: fontColor,
+                        fontcolor: fontcolor,
                         onClick: (event)=>handleClickItem(event, menu.submenus, menu.callback),
-                        expand: expand,
+                        $expand: expand || void 0,
                         children: [
                             /*#__PURE__*/ jsx("div", {
                                 children: menu.icon
@@ -77,11 +77,11 @@ function Menu({ background, fontColor, subMenusBackground, logo, items, translat
                     }, `${menu.label}-${idx}`))
             }),
             submenus.length > 0 && /*#__PURE__*/ jsxs(SubItemsContainer, {
-                isClosing: isClosingSubmenu,
+                $isClosing: isClosingSubmenu || void 0,
                 background: subMenusBackground,
                 children: [
                     /*#__PURE__*/ jsx(SubItemsHeader, {
-                        fontColor: fontColor,
+                        fontcolor: fontcolor,
                         children: /*#__PURE__*/ jsxs("button", {
                             onClick: handleClickBack,
                             children: [
@@ -95,7 +95,7 @@ function Menu({ background, fontColor, subMenusBackground, logo, items, translat
                     /*#__PURE__*/ jsx(SubItemsWrapper, {
                         background: subMenusBackground,
                         children: submenus.map((submenu, idx)=>/*#__PURE__*/ jsx(SubMenuItem, {
-                                fontColor: fontColor,
+                                fontcolor: fontcolor,
                                 onClick: (event)=>handleClickItem(event, [], submenu.callback),
                                 children: submenu.label
                             }, `${submenu.label}-${idx}`))

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

@@ -1,9 +1,9 @@
 interface ICommonProps {
     background?: string;
-    fontColor?: string;
-    active?: boolean;
-    expand?: boolean;
-    isClosing?: boolean;
+    fontcolor?: string;
+    $active?: boolean;
+    $expand?: boolean;
+    $isClosing?: 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

@@ -64,7 +64,7 @@ const MenuAside = styled_components.aside`
   padding: 1rem 0.5rem;
   position: relative;
   transition: width 0.3s ease-in-out;
-  width: ${({ expand })=>expand ? "18.75rem" : "3.5rem"};
+  width: ${({ $expand })=>$expand ? "18.75rem" : "3.5rem"};
 
   * {
     font-family: "Inter", sans-serif;
@@ -78,8 +78,8 @@ const MenuHeader = styled_components.div`
 `;
 const ContainerLogo = styled_components.div`
   padding: 0 0.5rem;
-  animation: ${({ expand })=>expand ? fadeInAndShow : fadeOutAndHide} 0.25s
-    forwards;
+  animation: ${({ $expand })=>$expand ? fadeInAndShow : fadeOutAndHide}
+    0.25s forwards;
 
   svg,
   img {
@@ -101,7 +101,7 @@ const ItemMenu = styled_components.div`
   cursor: pointer;
   display: flex;
   gap: 0.75rem;
-  opacity: ${({ active })=>active ? "1" : "0.68"};
+  opacity: ${({ $active })=>$active ? "1" : "0.68"};
   transition: all 0.18s ease-in-out;
   width: 100%;
 
@@ -114,17 +114,17 @@ const ItemMenu = styled_components.div`
     display: flex;
     justify-content: center;
     padding: 0.5rem;
-    color: ${({ fontColor })=>fontColor || "#FFFFFF"};
+    color: ${({ fontcolor })=>fontcolor || "#FFFFFF"};
   }
 
   span {
-    color: ${({ fontColor })=>fontColor || "#FFFFFF"};
-    opacity: ${({ expand })=>expand ? 1 : 0};
-    transform: translateX(${({ expand })=>expand ? "0" : "-8px"});
+    color: ${({ fontcolor })=>fontcolor || "#FFFFFF"};
+    opacity: ${({ $expand })=>$expand ? 1 : 0};
+    transform: translateX(${({ $expand })=>$expand ? "0" : "-8px"});
     transition:
       opacity 0.4s ease,
       transform 0.4s ease;
-    white-space: ${({ expand })=>expand ? "wrap" : "nowrap"};
+    white-space: ${({ $expand })=>$expand ? "wrap" : "nowrap"};
     overflow: hidden;
 
     &:hover {
@@ -133,7 +133,7 @@ const ItemMenu = styled_components.div`
   }
 `;
 const SubItemsContainer = styled_components.div`
-  animation: ${({ isClosing })=>isClosing ? shrinkToRight : growFromRight}
+  animation: ${({ $isClosing })=>$isClosing ? shrinkToRight : growFromRight}
     0.4s ease forwards;
   background-color: ${({ background })=>generateColorScale(background || "#000000")[500]};
   box-sizing: border-box;
@@ -156,7 +156,7 @@ const SubItemsHeader = styled_components.div`
     align-items: center;
     background: transparent;
     border: none;
-    color: ${({ fontColor })=>fontColor || "#FFFFFF"};
+    color: ${({ fontcolor })=>fontcolor || "#FFFFFF"};
     cursor: pointer;
     display: flex;
     font-size: 1rem;
@@ -186,12 +186,12 @@ const SubItemsWrapper = styled_components.div`
 `;
 const SubMenuItem = styled_components.span`
   border-radius: 6px;
-  color: ${({ fontColor })=>fontColor || "#FFFFFF"};
+  color: ${({ fontcolor })=>fontcolor || "#FFFFFF"};
   cursor: pointer;
   font-size: 0.875rem;
   font-weight: 500;
   line-height: 1.5rem;
-  opacity: ${({ active })=>active ? "1" : "0.68"};
+  opacity: ${({ $active })=>$active ? "1" : "0.68"};
   padding: 0.5rem 0.75rem;
   transition: background-color 0.2s ease;
 

package/dist/style/{_reset.css → base.css}

@@ -201,5 +201,25 @@ img, video {
 
 body {
   font-family: Inter, sans-serif;
+
+  & ::-webkit-scrollbar-track {
+    background-color: #f4f4f4;
+  }
+
+  & ::-webkit-scrollbar {
+    background: #f4f4f4;
+    width: 10px;
+  }
+
+  & ::-webkit-scrollbar-thumb {
+    background: #d5d8da;
+    border-radius: 10px;
+  }
+}
+
+@font-face {
+  font-family: Inter;
+  font-style: normal;
+  src: url(../static/font/Inter-Regular.ttf) format("truetype");
 }
 

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@ftdata/ui",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
+    },
+    "./base.css": {
+      "default": "./dist/style/base.css"
     }
   },
   "types": "./dist/index.d.ts",