@granto-umbrella/umbrella-components 3.0.76 → 3.0.78

package/src/components/atoms/Textarea/Textarea.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { TextareaProps } from './Textarea.types';
-import {
-  TextareaWrapper,
-  Label,
-  StyledTextarea,
-  SupportingText,
-} from './Textarea.styles';
-
-const Textarea: React.FC<TextareaProps> = ({
-  label,
-  info,
-  supportingText,
-  testId,
-  ...props
-}) => {
-  return (
-    <TextareaWrapper>
-      {label && (
-        <Label>
-          {label}
-          {info}
-        </Label>
-      )}
-      <StyledTextarea data-testid={testId} id={testId} {...props} />
-      {supportingText && <SupportingText>{supportingText}</SupportingText>}
-    </TextareaWrapper>
-  );
-};
-
-export default Textarea;

package/src/components/atoms/TimelineEventIndicator/TimelineEventIndicator.tsx

@@ -1,12 +0,0 @@
-import styled from 'styled-components';
-
-import { semanticColors } from '../../../styles/tokens';
-
-export const TimelineEventIndicador = styled.div`
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background-color: ${semanticColors.branding.surface.disabled};
-  border: 1px solid ${semanticColors.branding.border.enabled};
-  flex-shrink: 0;
-`;

package/src/components/atoms/TimelineEventIndicator/TimelineExpandButton.tsx

@@ -1,55 +0,0 @@
-import styled from 'styled-components';
-import { CaretUp, CaretDown } from 'phosphor-react';
-import {
-  semanticColors,
-  semanticSizes,
-  typographyTokens,
-} from '../../../styles/tokens';
-
-const ButtonContainer = styled.button`
-  display: flex;
-  align-items: center;
-  gap: ${semanticSizes.global.gap.sm};
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  color: ${semanticColors.branding.text.accent.enabled};
-  font-family: ${typographyTokens.fontFamily.base};
-  font-size: ${typographyTokens.fontSizes.bodyXS};
-  font-weight: ${typographyTokens.fontWeights.medium};
-  line-height: 115%;
-  margin-left: calc(-1 * ${semanticSizes.global.gap.xs} - 26px);
-
-  &:hover {
-    color: ${semanticColors.branding.text.accent.hover};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    color: ${semanticColors.branding.text.accent.disabled};
-  }
-`;
-
-interface TimelineExpandButtonProps {
-  expanded: boolean;
-  onClick: () => void;
-  disabled?: boolean;
-}
-
-export const TimeLineExpandButton = ({
-  expanded,
-  onClick,
-  disabled,
-}: TimelineExpandButtonProps) => {
-  return (
-    <ButtonContainer onClick={onClick} disabled={disabled}>
-      {expanded ? 'Ocultar detalhes' : 'Ver mais detalhes'}
-      {expanded ? (
-        <CaretUp size={14} weight="fill" />
-      ) : (
-        <CaretDown size={14} weight="fill" />
-      )}
-    </ButtonContainer>
-  );
-};

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

@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-import { typographyTokens, semanticColors } from '../../../styles/tokens';
-
-export const Container = styled.div`
-  width: 100%;
-  font-size: ${typographyTokens.fontSizes.displayM};
-  color: ${semanticColors.base.text};
-  font-weight: 600;
-  line-height: 120%;
-  letter-spacing: -0.64px;
-  text-align: center;
-
-  /* Media Query (padrão) */
-  @media (max-width: 768px) {
-    font-size: ${typographyTokens.fontSizes.displayL};
-  }
-`;

package/src/components/atoms/Title/Title.tsx

@@ -1,7 +0,0 @@
-import type React from 'react';
-import { Container } from './Title.styles';
-import type { TitleProps } from './Title.types';
-
-export const Title: React.FC<TitleProps> = ({ children }) => {
-  return <Container>{children}</Container>;
-};

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

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

package/src/components/atoms/Tooltip/Tooltip.tsx

@@ -1,59 +0,0 @@
-import React, { useState } from 'react';
-import {
-  TooltipContainer,
-  TooltipTrigger,
-  TooltipContent,
-  TooltipText,
-  TooltipLink,
-} from '../Tooltip/Tootip.styles';
-import { TooltipProps } from './tooltip.types';
-import { ArrowSquareOut, WarningCircle } from '@phosphor-icons/react';
-
-const Tooltip: React.FC<TooltipProps> = ({
-  children,
-  content,
-  position = 'top',
-  helpLink,
-}) => {
-  const [visible, setVisible] = useState(false);
-
-  const handleMouseEnter = () => {
-    setVisible(true);
-  };
-
-  const handleMouseLeave = () => {
-    setVisible(false);
-  };
-
-  return (
-    <TooltipContainer>
-      {children}
-      <TooltipTrigger
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-      >
-        <WarningCircle className="icon" />
-      </TooltipTrigger>
-      <TooltipContent
-        $position={position}
-        $visible={visible}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-      >
-        <TooltipText>{content}</TooltipText>
-        {helpLink && (
-          <TooltipLink
-            href={helpLink}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Saiba mais
-            <ArrowSquareOut size={12} weight="bold" />
-          </TooltipLink>
-        )}
-      </TooltipContent>
-    </TooltipContainer>
-  );
-};
-
-export default Tooltip;

package/src/components/atoms/Tooltip/Tootip.styles.ts

@@ -1,153 +0,0 @@
-import styled, { css } from 'styled-components';
-import {
-  semanticColors,
-  primitiveColors,
-  semanticSizes,
-  semanticRadius,
-  typographyTokens,
-} from '../../../styles/tokens';
-import { TooltipPosition } from './tooltip.types';
-
-const arrowSize = '8px';
-
-const positionStyles = {
-  top: css`
-    bottom: calc(100% + 12px);
-    left: 50%;
-    transform: translateX(-50%);
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-      border-left: ${arrowSize} solid transparent;
-      border-right: ${arrowSize} solid transparent;
-      border-top: ${arrowSize} solid ${primitiveColors.base.white};
-    }
-  `,
-  bottom: css`
-    top: calc(100% + 12px);
-    left: 50%;
-    transform: translateX(-50%);
-
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-      border-left: ${arrowSize} solid transparent;
-      border-right: ${arrowSize} solid transparent;
-      border-bottom: ${arrowSize} solid ${primitiveColors.base.white};
-    }
-  `,
-  left: css`
-    right: calc(100% + 12px);
-    top: 50%;
-    transform: translateY(-50%);
-
-    &::after {
-      content: '';
-      position: absolute;
-      left: 100%;
-      top: 50%;
-      transform: translateY(-50%);
-      border-top: ${arrowSize} solid transparent;
-      border-bottom: ${arrowSize} solid transparent;
-      border-left: ${arrowSize} solid ${primitiveColors.base.white};
-    }
-  `,
-  right: css`
-    left: calc(100% + 12px);
-    top: 50%;
-    transform: translateY(-50%);
-
-    &::after {
-      content: '';
-      position: absolute;
-      right: 100%;
-      top: 50%;
-      transform: translateY(-50%);
-      border-top: ${arrowSize} solid transparent;
-      border-bottom: ${arrowSize} solid transparent;
-      border-right: ${arrowSize} solid ${primitiveColors.base.white};
-    }
-  `,
-};
-
-export const TooltipContainer = styled.div`
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  gap: ${semanticSizes.global.gap.xs};
-`;
-
-export const TooltipTrigger = styled.div`
-  display: inline-flex;
-  cursor: pointer;
-
-  .icon {
-    width: 16px;
-    height: 16px;
-    color: ${semanticColors.global.text.subtitle.enabled};
-    opacity: 0.7;
-    transition: opacity 0.2s ease;
-  }
-
-  &:hover img {
-    opacity: 1;
-  }
-`;
-
-export const TooltipContent = styled.div<{
-  $position: TooltipPosition;
-  $visible: boolean;
-}>`
-  position: absolute;
-  background: ${primitiveColors.base.white};
-  color: ${primitiveColors.gray[900]};
-  padding: ${semanticSizes.global.padding.md};
-  border-radius: ${semanticRadius.global.radius.md};
-  font-size: ${typographyTokens.fontSizes.captionM};
-  line-height: ${typographyTokens.lineHeights.captionM};
-  max-width: 280px;
-  min-width: 200px;
-  z-index: 1000;
-  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12);
-  border: 1px solid ${primitiveColors.gray[200]};
-  white-space: normal;
-  word-wrap: break-word;
-
-  opacity: ${({ $visible }) => ($visible ? '1' : '0')};
-  visibility: ${({ $visible }) => ($visible ? 'visible' : 'hidden')};
-  transition:
-    opacity 0.2s ease,
-    visibility 0.2s ease;
-  pointer-events: ${({ $visible }) => ($visible ? 'auto' : 'none')};
-
-  ${({ $position }) => positionStyles[$position]}
-`;
-
-export const TooltipText = styled.p`
-  margin: 0 0 ${semanticSizes.global.gap.sm} 0;
-  color: ${primitiveColors.gray[800]};
-  font-size: ${typographyTokens.fontSizes.captionM};
-  line-height: ${typographyTokens.lineHeights.captionM};
-`;
-
-export const TooltipLink = styled.a`
-  color: ${primitiveColors.blue[600]};
-  text-decoration: underline;
-  font-weight: ${typographyTokens.fontWeights.medium};
-  font-size: ${typographyTokens.fontSizes.captionM};
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  margin-top: ${semanticSizes.global.gap.xs};
-
-  &:hover {
-    color: ${primitiveColors.blue[800]};
-  }
-`;

package/src/components/atoms/Tooltip/tooltip.types.ts

@@ -1,8 +0,0 @@
-export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
-
-export interface TooltipProps {
-  children: React.ReactNode;
-  content: string;
-  position?: TooltipPosition;
-  helpLink?: string;
-}

package/src/components/molecules/AvatarGroup/AvatarGroup.styles.ts

@@ -1,43 +0,0 @@
-import {
-  semanticColors,
-  semanticRadius,
-  semanticSizes,
-  typographyTokens,
-} from '../../../styles/tokens';
-import { styled } from 'styled-components';
-import { AvatarSize } from './AvatarGroup.types';
-
-export const StyledAvatarGroup = styled.div<{
-  $size: AvatarSize;
-  $radius: keyof typeof semanticRadius.global.radius;
-}>`
-  display: flex;
-  align-items: center;
-
-  & > * {
-    width: 32px;
-    height: 32px;
-    object-fit: cover;
-    box-sizing: border-box;
-
-    border: 2px solid ${semanticColors.base.background};
-    border-radius: ${({ $radius }) => semanticRadius.global.radius[$radius]};
-
-    &:not(:first-child) {
-      margin-left: -${semanticSizes.global.gap.md};
-    }
-  }
-  .avatar-group-counter {
-    background-color: ${semanticColors.branding.surface.disabled};
-    color: ${semanticColors.branding.text.accent.pressed};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1;
-
-    font-family: ${typographyTokens.fontFamily.base};
-    font-size: ${typographyTokens.fontSizes.captionM};
-    font-weight: ${typographyTokens.fontWeights.regular};
-    line-height: 120%;
-  }
-`;

package/src/components/molecules/AvatarGroup/AvatarGroup.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { AvatarGroupProps } from './AvatarGroup.types';
-import { StyledAvatarGroup } from './AvatarGroup.styles';
-import Badge from '../../atoms/Badge/Badge';
-
-const AvatarGroup: React.FC<AvatarGroupProps> = ({
-  avatars,
-  max = 4,
-  size = 'md',
-  radius = 'full',
-}) => {
-  const visibleAvatars = avatars.slice(0, max);
-  const remainingCount = avatars.length - max;
-
-  return (
-    <StyledAvatarGroup $radius={radius} $size={size}>
-      {visibleAvatars.map((avatar) => (
-        <img
-          key={avatar.id}
-          src={avatar.src}
-          alt={avatar.alt || 'Avatar do usuário'}
-        />
-      ))}
-
-      {remainingCount > 0 && (
-        <Badge
-          variant="primary"
-          size={size}
-          radius={radius}
-          className="avatar-group-counter"
-        >
-          +{remainingCount}
-        </Badge>
-      )}
-    </StyledAvatarGroup>
-  );
-};
-
-export default AvatarGroup;

package/src/components/molecules/AvatarGroup/AvatarGroup.types.ts

@@ -1,16 +0,0 @@
-import { semanticRadius } from '../../../styles/tokens';
-
-export type AvatarSize = 'sm' | 'md' | 'lg';
-
-export interface AvatarItem {
-  id: string | number;
-  src: string;
-  alt?: string;
-}
-
-export interface AvatarGroupProps {
-  avatars: AvatarItem[];
-  max?: number;
-  size?: 'sm' | 'md' | 'lg';
-  radius?: keyof typeof semanticRadius.global.radius;
-}

package/src/components/molecules/BannerAjuda/BannerAjuda.styles.tsx

@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-import { semanticRadius, semanticColors } from '../../../styles/tokens';
-
-export const BannerWrapper = styled.div`
-  border-radius: ${semanticRadius.global.radius.md2};
-  text-align: center;
-  color: ${semanticColors.base.background};
-  cursor: pointer;
-`;

package/src/components/molecules/BannerAjuda/BannerAjuda.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { BannerWrapper } from './BannerAjuda.styles';
-import { BannerAjudaProps } from './BannerAjuda.types';
-import banner_contato from '../../../assets/_banner_contato.png';
-
-const BannerAjuda: React.FC<BannerAjudaProps> = ({
-  onClick,
-  imageSrc = banner_contato,
-  alt = 'Banner de ajuda e contato',
-}) => {
-  return (
-    <BannerWrapper onClick={onClick}>
-      <img src={imageSrc} alt={alt} />
-    </BannerWrapper>
-  );
-};
-
-export { BannerAjuda };

package/src/components/molecules/BannerAjuda/BannerAjuda.types.ts

@@ -1,5 +0,0 @@
-export interface BannerAjudaProps {
-  onClick: () => void;
-  imageSrc?: string;
-  alt?: string;
-}

package/src/components/molecules/ButtonGroup/ButtonGroup.styles.ts

@@ -1,10 +0,0 @@
-import { semanticSizes } from '../../../styles/tokens';
-import styled from 'styled-components';
-
-export const ButtonGroupContainer = styled.div<{ $orientation: string }>`
-  display: flex;
-  flex-direction: ${({ $orientation }) =>
-    $orientation === 'vertical' ? 'column' : 'row'};
-  gap: ${semanticSizes.global.gap.md};
-  align-items: center;
-`;

package/src/components/molecules/ButtonGroup/ButtonGroup.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { ButtonGroupProps } from './ButtonGroup.types';
-import Button from '../../atoms/Button';
-import { ButtonGroupContainer } from './ButtonGroup.styles';
-
-const ButtonGroup: React.FC<ButtonGroupProps> = ({
-  buttons,
-  orientation = 'horizontal',
-}) => {
-  return (
-    <ButtonGroupContainer $orientation={orientation}>
-      {buttons.map((button, index) => (
-        <Button
-          key={index}
-          variant={button.variant}
-          onClick={button.onClick}
-          leftIcon={button.leftIcon}
-          rightIcon={button.rightIcon}
-          isLoading={button.isLoading}
-        >
-          {button.label}
-        </Button>
-      ))}
-    </ButtonGroupContainer>
-  );
-};
-
-export default ButtonGroup;

package/src/components/molecules/ButtonGroup/ButtonGroup.types.ts

@@ -1,23 +0,0 @@
-// ButtonGroup.types.ts
-
-export interface ButtonGroupProps {
-  buttons: {
-    label: string;
-    variant?:
-      | 'primary'
-      | 'outline'
-      | 'danger'
-      | 'ghost'
-      | 'alert'
-      | 'danger-no-fill'
-      | 'accent-outline'
-      | 'accent-fill'
-      | 'secondary-outline'
-      | 'danger-fill';
-    onClick?: () => void;
-    leftIcon?: string;
-    rightIcon?: string;
-    isLoading?: boolean;
-  }[];
-  orientation?: 'horizontal' | 'vertical';
-}