@granto-umbrella/umbrella-components 2.3.22 → 3.0.0

package/src/components/atoms/DropDownMenu/DropdownMenu.styles.tsx

@@ -0,0 +1,106 @@
+import styled, { css } from 'styled-components';
+import {
+  semanticBorders,
+  semanticColors,
+  semanticRadius,
+  semanticShadows,
+  semanticSizes,
+  typographyTokens,
+} from '../../../styles/tokens';
+import { Variant } from './DropdownMenu.types';
+
+export const Wrapper = styled.div`
+  position: relative;
+  display: inline-flex;
+  justify-content: flex-start;
+`;
+
+export const ToggleButton = styled.button<{
+  $variant: Variant;
+  $open: boolean;
+}>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: ${semanticSizes.global.gap.sm};
+  padding: ${semanticSizes.global.padding.lg};
+  height: ${semanticSizes.global.spacings.lg};
+  font-size: ${typographyTokens.fontSizes.labelS};
+  border: none;
+  border-radius: ${semanticRadius.global.radius.md};
+  cursor: pointer;
+  transition: opacity 0.2s;
+  min-width: 160px;
+
+  ${(props) =>
+    props.$variant === 'light'
+      ? css`
+          background-color: ${semanticColors.branding.border.enabled};
+          color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
+        `
+      : css`
+          background-color: ${semanticColors.global.surface.default};
+          color: ${semanticColors.branding.border.enabled};
+          border: ${semanticBorders.global.sm} solid
+            ${semanticColors.branding.border.enabled};
+        `}
+
+  &:hover {
+    opacity: 0.9;
+  }
+`;
+
+export const LabelText = styled.span`
+  font-weight: ${typographyTokens.fontWeights.medium};
+`;
+
+export const Menu = styled.div<{ $variant: Variant }>`
+  position: absolute;
+  top: calc(100% + ${semanticSizes.global.gap.xs});
+  right: 0;
+  width: 100%;
+  padding: ${semanticSizes.global.padding.sm} 0;
+  border-radius: ${semanticRadius.global.radius.md};
+  box-shadow: ${semanticShadows.shadow.default};
+  display: grid;
+  gap: ${semanticSizes.global.gap.xs};
+  z-index: 10;
+
+  ${(props) =>
+    props.$variant === 'light'
+      ? css`
+          background-color: ${semanticColors.global.surface.default};
+          color: ${semanticColors.global.text.default.enabled};
+        `
+      : css`
+          background-color: ${semanticColors.branding.surface.enabled};
+          color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
+        `}
+`;
+
+export const Item = styled.div`
+  display: inline-grid;
+  grid-auto-flow: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: ${semanticSizes.global.gap.sm};
+  padding: ${semanticSizes.global.padding.sm} ${semanticSizes.global.padding.lg};
+  font-size: ${typographyTokens.fontSizes.labelS};
+  cursor: pointer;
+
+  &:hover {
+    background-color: ${semanticColors.neutral['100']};
+  }
+`;
+
+export const IconWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`;
+
+export const ItemLabel = styled.span`
+  flex: 1;
+  text-align: left;
+`;

package/src/components/atoms/DropDownMenu/DropdownMenu.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import {
+  Wrapper,
+  ToggleButton,
+  LabelText,
+  Menu,
+  Item,
+  IconWrapper,
+  ItemLabel,
+} from "./DropdownMenu.styles";
+import { DropdownMenuProps, DropdownMenuItemProps } from "./DropdownMenu.types";
+
+export const DropdownMenu: React.FC<DropdownMenuProps> = ({
+  label,
+  variant = "light",
+  children,
+}) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Wrapper>
+      <ToggleButton
+        onClick={() => setOpen((o) => !o)}
+        $variant={variant}
+        $open={open}
+      >
+        <LabelText>{label}</LabelText>
+        {open ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+      </ToggleButton>
+      {open && <Menu $variant={variant}>{children}</Menu>}
+    </Wrapper>
+  );
+};
+
+export const DropdownMenuItem: React.FC<DropdownMenuItemProps> = ({
+  icon,
+  onClick,
+  children,
+}) => (
+  <Item onClick={onClick}>
+    {icon && <IconWrapper>{icon}</IconWrapper>}
+    <ItemLabel>{children}</ItemLabel>
+  </Item>
+);
+
+DropdownMenu.displayName = "DropdownMenu";
+DropdownMenuItem.displayName = "DropdownMenuItem";

package/src/components/atoms/DropDownMenu/DropdownMenu.types.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+
+export type Variant = "light" | "dark";
+
+export interface DropdownMenuProps {
+  label: string;
+  variant?: Variant;
+  children: ReactNode;
+}
+
+export interface DropdownMenuItemProps {
+  icon?: ReactNode;
+  onClick?: () => void;
+  children: ReactNode;
+}

package/src/components/atoms/DropDownMenu/index.tsx

@@ -0,0 +1,2 @@
+export { DropdownMenu, DropdownMenuItem } from "./DropdownMenu";
+export type { DropdownMenuProps, DropdownMenuItemProps } from "./DropdownMenu.types";

package/src/components/atoms/ErrorMessage/ErrorMessage.styles.tsx

@@ -0,0 +1,28 @@
+import styled, { css } from "styled-components";
+import {
+  semanticBorders,
+  semanticColors,
+  semanticSizes,
+  typographyTokens,
+} from "@granto-umbrella/umbrella-components";
+
+const errorMessageVariants = {
+  error: css`
+    color: ${semanticColors.danger.text.feedback.accent};
+  `,
+  success: css`
+    color: ${semanticColors.success.text.feedback.accent};
+  `,
+};
+
+export const ErrorMessage = styled.p<{ $type?: "error" | "success" }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${semanticSizes.global.gap.md};
+  font-size: ${typographyTokens.fontSizes.labelS};
+  margin-top: ${semanticSizes.global.spacings.sm};
+  border-radius: ${semanticBorders.global.md};
+  
+  ${({ $type = "error" }) => errorMessageVariants[$type]}
+`;

package/src/components/atoms/ErrorMessage/ErrorMessage.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { ErrorMessage as StyledErrorMessage } from "./ErrorMessage.styles";
+import { ErrorMessageProps } from "./ErrorMessage.types";
+
+const ErrorMessage: React.FC<ErrorMessageProps> = ({ 
+  children,
+  type = "error"
+}) => {
+  return <StyledErrorMessage $type={type}>{children}</StyledErrorMessage>;
+};
+
+export default ErrorMessage;

package/src/components/atoms/ErrorMessage/ErrorMessage.types.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export interface ErrorMessageProps {
+    children: React.ReactNode;
+    type?: "error" | "success" ;
+}

package/src/components/atoms/ErrorMessage/index.tsx

@@ -0,0 +1 @@
+export { default } from "./ErrorMessage";

package/src/components/atoms/Footer/Footer.styles.tsx

@@ -0,0 +1,22 @@
+import styled from "styled-components";
+import {
+  semanticSizes,
+  semanticColors,
+  primitiveSizes,
+  typographyTokens,
+} from "@granto-umbrella/umbrella-components";
+
+export const Container = styled.div`
+  font-size: ${typographyTokens.fontSizes.bodyM};
+  color: ${semanticColors.global.text.default.enabled};
+  margin-top: calc(${semanticSizes.global.padding["4xl"]} + 111px);
+  padding-bottom: ${semanticSizes.global.padding["2xl"]};
+  text-align: center;
+  font-family: ${typographyTokens.fontFamily.base};
+  font-weight: ${typographyTokens.fontWeights.regular};
+  line-height: ${typographyTokens.lineHeights.bodyM};
+  position: fixed;
+  bottom: ${primitiveSizes.size.half};
+  width: ${semanticSizes.global.full};
+  background-color: ${semanticColors.base.background};
+`;

package/src/components/atoms/Footer/Footer.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { Container } from "./Footer.styles";
+import { FooterProps } from "./Footer.types";
+
+const Footer: React.FC<FooterProps> = ({ children }) => {
+  return <Container>{children}</Container>;
+};
+
+export default Footer;

package/src/components/atoms/Footer/Footer.types.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export interface FooterProps {
+  children: React.ReactNode;
+}

package/src/components/atoms/Footer/index.tsx

@@ -0,0 +1 @@
+export { default } from "./Footer";

package/src/components/atoms/GenericContainer/GenericContainer.styles.tsx

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+import {
+  semanticColors,
+  semanticSizes,
+  typographyTokens,
+} from "@granto-umbrella/umbrella-components";
+
+export const Container = styled.div`
+  padding: ${semanticSizes.global.padding["2xl"]};
+  
+  h1 {
+    font-size: ${typographyTokens.fontSizes.displayM};
+    font-weight: ${typographyTokens.fontWeights.semibold};
+    line-height: ${typographyTokens.lineHeights.displayM};
+    margin-top: ${semanticSizes.global.padding.xl};
+  }
+  
+  .text {
+    color: ${semanticColors.global.text.default.enabled};
+  }
+`;

package/src/components/atoms/GenericContainer/GenericContainer.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { Container } from "./GenericContainer.styles";
+import { GenericContainerProps } from "./GenericContainer.types";
+
+export const GenericContainer: React.FC<GenericContainerProps> = ({
+  children,
+}) => {
+  return <Container>{children}</Container>;
+};

package/src/components/atoms/GenericContainer/GenericContainer.types.ts

@@ -0,0 +1,5 @@
+import React from "react";
+
+export interface GenericContainerProps {
+  children: React.ReactNode;
+}

package/src/components/atoms/GenericContainer/index.tsx

@@ -0,0 +1 @@
+export { GenericContainer } from "./GenericContainer";

package/src/components/atoms/Input/Input.styles.ts

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { css } from 'styled-components';
 import {
   semanticColors,
   semanticShadows,
@@ -7,7 +7,22 @@ import {
   semanticSizes,
   semanticBorders,
   typographyTokens,
-} from "../../../styles/tokens";
+} from '../../../styles/tokens';
+
+const inputSizes = {
+sm: css`
+padding: ${semanticSizes.global.padding.md} ${semanticSizes.global.padding.lg};
+gap: ${semanticSizes.global.gap.sm};
+`,
+md: css`
+padding: ${semanticSizes.global.padding.lg} ${semanticSizes.global.padding.xl};
+gap: ${semanticSizes.global.gap.md};
+`,
+lg: css`
+padding: ${semanticSizes.global.padding['2xl']} ${semanticSizes.global.padding['3xl']};
+gap: ${semanticSizes.global.gap.lg};
+`,
+};
 
 export const Container = styled.div`
   display: flex;
@@ -34,19 +49,20 @@ export const InputWrapper = styled.div<{
   $disabled?: boolean;
   $radius?: keyof typeof semanticRadius.global.radius;
   $shadow?: keyof typeof semanticShadows.shadow;
+  $size: keyof typeof inputSizes;
 }>`
   display: flex;
   align-items: center;
-  padding: ${semanticSizes.global.padding.md} ${semanticSizes.global.padding.lg};
-  gap: ${semanticSizes.global.gap.md};
 
-  box-shadow: ${({ $shadow }) => semanticShadows.shadow[$shadow || "default"]};
+  ${({ $size }) => inputSizes[$size]}
+
+  box-shadow: ${({ $shadow }) => semanticShadows.shadow[$shadow || 'default']};
   border-radius: ${semanticBorders.global.lg};
   border: 1px solid
     ${({ $error }) =>
       $error
         ? semanticColors.danger.border.enabled
-        : semanticColors.neutral[300]};
+        : semanticColors.global.border.medium};
   background-color: ${({ $disabled }) =>
     $disabled ? semanticColors.neutral[100] : semanticColors.base.background};
   transition: border-color 0.2s, box-shadow 0.2s;
@@ -65,10 +81,10 @@ export const StyledInput = styled.input`
   border: none;
   outline: none;
   font-size: ${typographyTokens.fontSizes.labelM};
-  color: ${semanticColors.global.text.onSurface.enabled};
+  color: ${semanticColors.global.text.default.enabled};
 
   &::placeholder {
-    color: ${semanticColors.neutral[300]};
+    color: ${semanticColors.global.text.onSurface.enabled};
   }
 
   &:disabled {

package/src/components/atoms/Input/Input.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
-import { InputProps } from "./Input.types";
+import React, { forwardRef } from 'react';
+import { InputProps } from './Input.types';
 import {
   Container,
   Label,
@@ -7,14 +7,14 @@ import {
   StyledInput,
   Icon,
   SupportText,
-} from "./Input.styles";
+} from './Input.styles';
 
 function mergeRefs<T>(
   ...refs: (React.Ref<T> | null | undefined)[]
 ): React.RefCallback<T> {
   return (value: T) => {
     refs.forEach((ref) => {
-      if (typeof ref === "function") {
+      if (typeof ref === 'function') {
         ref(value);
       } else if (ref != null) {
         (ref as React.MutableRefObject<T | null>).current = value;
@@ -26,8 +26,8 @@ function mergeRefs<T>(
 const Input = forwardRef<HTMLInputElement, InputProps>(
   (
     {
-      type = "text",
-      placeholder = "",
+      type = 'text',
+      placeholder = '',
       value,
       onChange,
       error = false,
@@ -35,8 +35,9 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       icon,
       label,
       supportText,
-      radius = "md" as "md" | "lg" | "sm" | "full",
-      shadow = "default" as "none" | "default" | "md" | "lg",
+      size = 'md',
+      radius = 'md' as 'md' | 'lg' | 'sm' | 'full',
+      shadow = 'default' as 'none' | 'default' | 'md' | 'lg',
       style,
       register,
       testId,
@@ -53,6 +54,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           $disabled={disabled}
           $radius={radius}
           $shadow={shadow}
+          $size={size}
         >
           {icon && <Icon>{icon}</Icon>}
           <StyledInput
@@ -75,5 +77,4 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     );
   }
 );
-
 export default Input;

package/src/components/atoms/Input/Input.types.ts

@@ -11,31 +11,10 @@ export interface InputProps {
   icon?: React.ReactNode;
   label?: string;
   supportText?: string;
-  size?:
-    | "quarter"
-    | "half"
-    | "x1"
-    | "x2"
-    | "x3"
-    | "x4"
-    | "x5"
-    | "x6"
-    | "x7"
-    | "x8"
-    | "x9"
-    | "x10"
-    | "x11"
-    | "x12"
-    | "x13"
-    | "x14"
-    | "x15"
-    | "x16"
-    | "md"
-    | "lg"
-    | "sm"
-    | "full";
-  radius?: "md" | "lg" | "sm" | "full";
-  shadow?: "none" | "default" | "md" | "lg";
+  size?: 'sm' | 'md' | 'lg';
+
+  radius?: 'md' | 'lg' | 'sm' | 'full';
+  shadow?: 'none' | 'default' | 'md' | 'lg';
   style?: React.CSSProperties;
   register?: any;
   testId?: string;

package/src/components/atoms/Label/Label.styles.ts

@@ -1,14 +1,15 @@
 // Label.styled.tsx
-import styled from "styled-components";
-import * as LabelPrimitive from "@radix-ui/react-label";
+import styled from 'styled-components';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { typographyTokens } from '../../../styles/tokens/typography';
 
 export const StyledLabel = styled(LabelPrimitive.Root)`
-  font-size: 0.875rem; /* Equivalente a text-sm */
-  font-weight: 500; /* Equivalente a font-medium */
-  line-height: 1; /* Equivalente a leading-none */
+  font-size: ${typographyTokens.fontSizes.labelS};
+  font-weight: ${typographyTokens.fontWeights.medium};
 
-  /* Simula o comportamento de desabilitado */
-  &[data-disabled="true"] {
+  line-height: ${typographyTokens.lineHeights.labelS};
+  font-family: ${typographyTokens.fontFamily.base};
+  &[data-disabled='true'] {
     cursor: not-allowed;
     opacity: 0.7;
   }

package/src/components/atoms/Loading/Loading.styles.tsx

@@ -0,0 +1,23 @@
+import styled, { keyframes } from "styled-components";
+import {
+  semanticBorders,
+  semanticColors,
+  semanticRadius,
+  semanticSizes,
+} from "@granto-umbrella/umbrella-components";
+
+const spin = keyframes`
+  to { 
+    transform: rotate(360deg); 
+  }
+`;
+
+export const StyledLoader = styled.div`
+  margin: ${semanticSizes.global.spacings.lg} auto;
+  border: ${semanticBorders.global.lg} solid ${semanticColors.global.border.default};
+  border-top: ${semanticBorders.global.lg} solid ${semanticColors.info.border.feedback};
+  border-radius: ${semanticRadius.global.radius.full};
+  width: ${semanticSizes.global.spacings.md};
+  height: ${semanticSizes.global.spacings.md};
+  animation: ${spin} 1s linear infinite;
+`;

package/src/components/atoms/Loading/Loading.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { StyledLoader } from "./Loading.styles";
+
+const Loader: React.FC = () => {
+  return <StyledLoader />;
+};
+
+export default Loader;

package/src/components/atoms/Loading/index.tsx

@@ -0,0 +1 @@
+export { default } from './Loading';

package/src/components/atoms/LogoContainer/LogoContainer.Types.tsx

@@ -0,0 +1,5 @@
+export interface LogoContainerProps {
+  src: string;
+  alt?: string;
+  margintBottom?: string;
+}

package/src/components/atoms/LogoContainer/LogoContainer.styles.tsx

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+import { primitiveSizes } from "@granto-umbrella/umbrella-components";
+
+export const Logo = styled.img<{ marginBottom?: string }>`
+  margin-bottom: ${(props) => props.marginBottom || primitiveSizes.size.x6};
+  width: 112px;
+  
+  @media (max-width: 768px) {
+    width: 114.12px;
+  }
+`;

package/src/components/atoms/LogoContainer/LogoContainer.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { Logo } from "./LogoContainer.styles";
+import { LogoContainerProps } from "./LogoContainer.Types";
+
+export const LogoContainer: React.FC<LogoContainerProps> = ({ 
+  src, 
+  alt, 
+  margintBottom 
+}) => {
+  return <Logo src={src} alt={alt} marginBottom={margintBottom} />;
+};

package/src/components/atoms/LogoContainer/index.tsx

@@ -0,0 +1 @@
+export { LogoContainer } from "./LogoContainer";

package/src/components/atoms/ModalAviso/ModalAviso.styles.tsx

@@ -0,0 +1,54 @@
+// ModalAviso.styles.tsx
+import styled from "styled-components";
+import { 
+  primitiveColors,
+  semanticSizes,
+  semanticRadius,
+  typographyTokens, 
+  semanticBorders
+}  from "../../../styles/tokens";
+
+export const Wrapper = styled.div`
+  position: fixed;
+  bottom: calc(${semanticSizes.global.spacings.lg} + 10px); 
+  right: ${semanticSizes.global.padding.lg};
+  z-index: 9999;
+`;
+
+export const Container = styled.div`
+  background-color: ${primitiveColors.purple[100]};
+  border-radius: ${semanticRadius.global.radius.md2};
+  border: ${semanticBorders.global.md} solid ${primitiveColors.purple[1200]};
+  padding: ${semanticSizes.global.padding.md} ${semanticSizes.global.padding.lg};
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: ${semanticSizes.global.gap.md};
+  max-width: 600px;
+`;
+
+export const Content = styled.div`
+  flex: 1;
+`;
+
+export const Title = styled.p`
+  color: ${primitiveColors.gray[1100]};
+  font-weight: ${typographyTokens.fontWeights.semibold};
+  font-size: ${typographyTokens.fontSizes.bodyM};
+  margin: 0 0 ${semanticSizes.global.gap.xs} 0;
+`;
+
+export const Description = styled.p`
+  color: ${primitiveColors.gray[800]};
+  font-size: ${typographyTokens.fontSizes.bodyS};
+  margin: 0;
+`;
+
+export const CloseButton = styled.button`
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: ${primitiveColors.gray[600]};
+  line-height: 0;
+`;

package/src/components/atoms/ModalAviso/ModalAviso.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect } from "react";
+import { X } from "lucide-react";
+import { CloseButton, Container, Content, Description, Title, Wrapper } from "./ModalAviso.styles";
+import { ModalAvisoProps } from "./ModalAviso.types";
+
+export const ModalAviso: React.FC<ModalAvisoProps> = ({
+  title,
+  description,
+  onClose,
+}) => {
+  
+  useEffect(() => {
+    if (onClose) {
+      const timer = setTimeout(() => {
+        onClose();
+      }, 3000);
+
+      return () => clearTimeout(timer);
+    }
+  }, [onClose]);
+
+  return (
+    <Wrapper>
+      <Container>
+        <Content>
+          <Title>{title}</Title>
+          <Description>{description}</Description>
+        </Content>
+        {onClose && (
+          <CloseButton onClick={onClose}>
+            <X size={22} />
+          </CloseButton>
+        )}
+      </Container>
+    </Wrapper>
+  );
+};