@granto-umbrella/umbrella-components 3.0.32 → 3.0.33

package/src/components/atoms/Skeleton/Skeleton.tsx

@@ -1,43 +1,43 @@
-import React from 'react';
-import { SkeletonBlock, SkeletonWrap } from './Skeleton.styles';
-import { SkeletonProps } from './Skeleton.types';
-
-export const Skeleton: React.FC<SkeletonProps> = ({
-  width,
-  height,
-  radius,
-  count = 1,
-  variant = 'rect',
-  animated = true,
-  className,
-  style,
-  ariaLabel = 'Carregando conteúdo',
-}) => {
-  const items = Array.from({ length: count });
-  return (
-    <SkeletonWrap
-      role="status"
-      aria-live="polite"
-      aria-busy="true"
-      aria-label={ariaLabel}
-      className={className}
-    >
-      {items.map((_, i) => (
-        <SkeletonBlock
-          key={i}
-          $variant={variant}
-          $animated={animated}
-          style={{
-            width: width ?? (variant === 'text' ? '100%' : undefined),
-            height:
-              height ??
-              (variant === 'text' ? '1em' : variant === 'circle' ? 40 : 16),
-            borderRadius:
-              variant === 'circle' ? '9999px' : radius != null ? radius : 8,
-            ...style,
-          }}
-        />
-      ))}
-    </SkeletonWrap>
-  );
-};
+import React from 'react';
+import { SkeletonBlock, SkeletonWrap } from './Skeleton.styles';
+import { SkeletonProps } from './Skeleton.types';
+
+export const Skeleton: React.FC<SkeletonProps> = ({
+  width,
+  height,
+  radius,
+  count = 1,
+  variant = 'rect',
+  animated = true,
+  className,
+  style,
+  ariaLabel = 'Carregando conteúdo',
+}) => {
+  const items = Array.from({ length: count });
+  return (
+    <SkeletonWrap
+      role="status"
+      aria-live="polite"
+      aria-busy="true"
+      aria-label={ariaLabel}
+      className={className}
+    >
+      {items.map((_, i) => (
+        <SkeletonBlock
+          key={i}
+          $variant={variant}
+          $animated={animated}
+          style={{
+            width: width ?? (variant === 'text' ? '100%' : undefined),
+            height:
+              height ??
+              (variant === 'text' ? '1em' : variant === 'circle' ? 40 : 16),
+            borderRadius:
+              variant === 'circle' ? '9999px' : radius != null ? radius : 8,
+            ...style,
+          }}
+        />
+      ))}
+    </SkeletonWrap>
+  );
+};

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

@@ -1,13 +1,13 @@
-export type SkeletonVariant = 'text' | 'rect' | 'circle';
-
-export type SkeletonProps = {
-  width?: string | number;
-  height?: string | number;
-  radius?: number;
-  count?: number;
-  variant?: SkeletonVariant;
-  animated?: boolean;
-  className?: string;
-  style?: React.CSSProperties;
-  ariaLabel?: string;
-};
+export type SkeletonVariant = 'text' | 'rect' | 'circle';
+
+export type SkeletonProps = {
+  width?: string | number;
+  height?: string | number;
+  radius?: number;
+  count?: number;
+  variant?: SkeletonVariant;
+  animated?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  ariaLabel?: string;
+};

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

@@ -1,21 +1,21 @@
-import styled from 'styled-components';
-import {
-  semanticSizes,
-  typographyTokens,
-  semanticColors,
-} from '../../../styles/tokens';
-
-export const Container = styled.div`
-  width: 100%;
-  color: ${semanticColors.neutral[700]};
-  text-align: center;
-  font-family: 'Mulish', sans-serif;
-  font-size: ${typographyTokens.fontSizes.bodyM};
-  font-weight: 400;
-  line-height: 125%;
-
-  margin-bottom: ${semanticSizes.global.padding.lg};
-  @media (max-width: 768px) {
-    font-size: ${typographyTokens.fontSizes.bodyS};
-  }
-`;
+import styled from 'styled-components';
+import {
+  semanticSizes,
+  typographyTokens,
+  semanticColors,
+} from '../../../styles/tokens';
+
+export const Container = styled.div`
+  width: 100%;
+  color: ${semanticColors.neutral[700]};
+  text-align: center;
+  font-family: 'Mulish', sans-serif;
+  font-size: ${typographyTokens.fontSizes.bodyM};
+  font-weight: 400;
+  line-height: 125%;
+
+  margin-bottom: ${semanticSizes.global.padding.lg};
+  @media (max-width: 768px) {
+    font-size: ${typographyTokens.fontSizes.bodyS};
+  }
+`;

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

@@ -1,59 +1,59 @@
-import styled from 'styled-components';
-import {
-  semanticColors,
-  semanticSizes,
-  semanticRadius,
-  typographyTokens,
-} from '../../../styles/tokens';
-
-export const SwitchWrapper = styled.label`
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  align-items: center;
-  gap: ${semanticSizes.global.gap.sm};
-  cursor: pointer;
-`;
-
-export const SwitchInput = styled.input.attrs({ type: 'checkbox' })`
-  appearance: none;
-  width: ${semanticSizes.global.spacings.lg};
-  height: ${semanticSizes.global.padding.xl};
-  background: ${semanticColors.neutral[300]};
-  border-radius: ${semanticRadius.global.radius.full};
-  position: relative;
-  transition: background 0.3s ease-out;
-  cursor: pointer;
-
-  &:checked {
-    background: ${semanticColors.branding.surface.enabled};
-  }
-
-  &::after {
-    content: '';
-    width: ${semanticSizes.global.padding.md}; // 12px circle
-    height: ${semanticSizes.global.padding.md}; // 12px circle
-    background: ${semanticColors.base.background};
-    border-radius: 50%;
-    position: absolute;
-    top: 50%;
-    left: 4px;
-    transform: translateY(-50%);
-    transition: all 0.3s ease-out;
-  }
-
-  &:checked::after {
-    left: calc(100% - ${semanticSizes.global.padding.md} - 4px);
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-`;
-
-export const SwitchLabel = styled.span`
-  font-size: ${typographyTokens.fontSizes.labelM};
-  color: ${semanticColors.base.text};
-  user-select: none;
-`;
+import styled from 'styled-components';
+import {
+  semanticColors,
+  semanticSizes,
+  semanticRadius,
+  typographyTokens,
+} from '../../../styles/tokens';
+
+export const SwitchWrapper = styled.label`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  align-items: center;
+  gap: ${semanticSizes.global.gap.sm};
+  cursor: pointer;
+`;
+
+export const SwitchInput = styled.input.attrs({ type: 'checkbox' })`
+  appearance: none;
+  width: ${semanticSizes.global.spacings.lg};
+  height: ${semanticSizes.global.padding.xl};
+  background: ${semanticColors.neutral[300]};
+  border-radius: ${semanticRadius.global.radius.full};
+  position: relative;
+  transition: background 0.3s ease-out;
+  cursor: pointer;
+
+  &:checked {
+    background: ${semanticColors.branding.surface.enabled};
+  }
+
+  &::after {
+    content: '';
+    width: ${semanticSizes.global.padding.md}; // 12px circle
+    height: ${semanticSizes.global.padding.md}; // 12px circle
+    background: ${semanticColors.base.background};
+    border-radius: 50%;
+    position: absolute;
+    top: 50%;
+    left: 4px;
+    transform: translateY(-50%);
+    transition: all 0.3s ease-out;
+  }
+
+  &:checked::after {
+    left: calc(100% - ${semanticSizes.global.padding.md} - 4px);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+
+export const SwitchLabel = styled.span`
+  font-size: ${typographyTokens.fontSizes.labelM};
+  color: ${semanticColors.base.text};
+  user-select: none;
+`;

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

@@ -1,7 +1,7 @@
-export interface SwitchProps {
-  checked: boolean;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  label?: string;
-  disabled?: boolean;
-  testId?: string;
-}
+export interface SwitchProps {
+  checked: boolean;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  label?: string;
+  disabled?: boolean;
+  testId?: string;
+}

package/src/components/atoms/TabBar/TabBar.tsx

@@ -1,24 +1,24 @@
-import React from 'react';
-import { Count, Tab, Wrapper } from './TabBar.styles';
-import { TabBarProps } from './TabBar.types';
-
-export const TabBar: React.FC<TabBarProps> = ({
-  items,
-  activeIndex,
-  onChange,
-}) => (
-  <Wrapper>
-    {items.map((item, idx) => (
-      <Tab
-        key={idx}
-        $active={Boolean(idx === activeIndex)}
-        onClick={() => onChange(idx)}
-        data-testid={item.testId}
-        id={item.testId}
-      >
-        <span>{item.title}</span>
-        {typeof item.quantity === 'number' && <Count>({item.quantity})</Count>}
-      </Tab>
-    ))}
-  </Wrapper>
-);
+import React from 'react';
+import { Count, Tab, Wrapper } from './TabBar.styles';
+import { TabBarProps } from './TabBar.types';
+
+export const TabBar: React.FC<TabBarProps> = ({
+  items,
+  activeIndex,
+  onChange,
+}) => (
+  <Wrapper>
+    {items.map((item, idx) => (
+      <Tab
+        key={idx}
+        $active={Boolean(idx === activeIndex)}
+        onClick={() => onChange(idx)}
+        data-testid={item.testId}
+        id={item.testId}
+      >
+        <span>{item.title}</span>
+        {typeof item.quantity === 'number' && <Count>({item.quantity})</Count>}
+      </Tab>
+    ))}
+  </Wrapper>
+);

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

@@ -1,11 +1,11 @@
-export interface TabItem {
-  title: string;
-  quantity?: number;
-  testId?: string;
-}
-
-export interface TabBarProps {
-  items: TabItem[];
-  activeIndex: number;
-  onChange: (newIndex: number) => void;
-}
+export interface TabItem {
+  title: string;
+  quantity?: number;
+  testId?: string;
+}
+
+export interface TabBarProps {
+  items: TabItem[];
+  activeIndex: number;
+  onChange: (newIndex: number) => void;
+}

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

@@ -8,16 +8,28 @@ export const StyledText = styled.p<{
   $size: string;
   $weight: string;
   $color: string;
+  $variant?: string;
 }>`
-  display: flex;
-  width: 100%;
   font-size: ${({ $size }) =>
     $size === 'lg'
       ? typographyTokens.fontSizes.bodyL
       : $size === 'md'
       ? typographyTokens.fontSizes.bodyM
       : typographyTokens.fontSizes.bodyS};
-
-  font-weight: ${({ $weight }) => ($weight === 'bold' ? 'bold' : 'normal')};
-  color: ${({ $color }) => $color || semanticColors.base.text};
-`;
+  font-weight: ${({ $weight }) => ($weight === 'bold' ? typographyTokens.fontWeights.bold : typographyTokens.fontWeights.regular)};
+  color: ${({ $color, $variant }) => {
+    if ($variant) {
+      switch ($variant) {
+        case 'error':
+          return semanticColors.danger.text.enabled;
+        case 'success':
+          return semanticColors.success.text.feedback.accent;
+        case 'warning':
+          return semanticColors.warning.text.feedback.strong;
+        default:
+          return $color;
+      }
+    }
+    return $color || semanticColors.base.text;
+  }};
+`;

package/src/components/atoms/Text/Text.tsx

@@ -1,26 +1,31 @@
 import React from "react";
 import { StyledText } from "./Text.styles";
-
 import { TextProps } from "./Text.types";
+import { semanticColors } from "../../../styles/tokens";
 
 const Text: React.FC<TextProps> = ({
   children,
   size = "md",
   weight = "normal",
-  color = "black",
+  color,
   testId,
+  variant,
 }) => {
+  // Define a cor padrão se não for fornecida
+  const defaultColor = color || semanticColors.base.text;
+
   return (
     <StyledText
       data-testid={testId}
       id={testId}
       $size={size}
       $weight={weight}
-      $color={color}
+      $color={defaultColor}
+      $variant={variant}
     >
       {children}
     </StyledText>
   );
 };
 
-export default Text;
+export default Text;

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

@@ -4,4 +4,5 @@ export interface TextProps {
   weight?: "normal" | "bold";
   color?: string;
   testId?: string;
-}
+  variant?: string;
+}

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

@@ -1,7 +1,7 @@
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-  label?: string;
-  supportingText?: string;
-  testId?: string;
-  info?: string;
-}
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  supportingText?: string;
+  testId?: string;
+  info?: string;
+}

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

@@ -1,17 +1,17 @@
-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};
-  }
-`;
+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/molecules/BannerAjuda/BannerAjuda.types.ts

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

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

@@ -1,27 +1,27 @@
-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}
-        >
-          {button.label}
-        </Button>
-      ))}
-    </ButtonGroupContainer>
-  );
-};
-
-export default ButtonGroup;
+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}
+        >
+          {button.label}
+        </Button>
+      ))}
+    </ButtonGroupContainer>
+  );
+};
+
+export default ButtonGroup;

package/src/components/molecules/CodeInputContainer/CodeInputContainer.tsx

@@ -1,32 +1,32 @@
-import React from 'react';
-import { StyledCodeInputContainer } from './CodeInputContainer.styles';
-import { CodeInputContainerProps } from './CodeInputContainer.types';
-import CodeInput from '../../atoms/CodeInput';
-
-const CodeInputContainer: React.FC<CodeInputContainerProps> = ({
-  code,
-  inputRefs,
-  handleChange,
-  handleKeyDown,
-  handlePaste,
-  testId,
-}) => {
-  return (
-    <StyledCodeInputContainer data-testid={testId} id={testId}>
-      {code.map((value, index) => (
-        <CodeInput
-          key={index}
-          ref={(el) => (inputRefs.current[index] = el)}
-          type="text"
-          maxLength={1}
-          value={value}
-          onChange={(e) => handleChange(e.target.value, index)}
-          onKeyDown={(e) => handleKeyDown(e, index)}
-          onPaste={handlePaste}
-        />
-      ))}
-    </StyledCodeInputContainer>
-  );
-};
-
-export { CodeInputContainer };
+import React from 'react';
+import { StyledCodeInputContainer } from './CodeInputContainer.styles';
+import { CodeInputContainerProps } from './CodeInputContainer.types';
+import CodeInput from '../../atoms/CodeInput';
+
+const CodeInputContainer: React.FC<CodeInputContainerProps> = ({
+  code,
+  inputRefs,
+  handleChange,
+  handleKeyDown,
+  handlePaste,
+  testId,
+}) => {
+  return (
+    <StyledCodeInputContainer data-testid={testId} id={testId}>
+      {code.map((value, index) => (
+        <CodeInput
+          key={index}
+          ref={(el) => (inputRefs.current[index] = el)}
+          type="text"
+          maxLength={1}
+          value={value}
+          onChange={(e) => handleChange(e.target.value, index)}
+          onKeyDown={(e) => handleKeyDown(e, index)}
+          onPaste={handlePaste}
+        />
+      ))}
+    </StyledCodeInputContainer>
+  );
+};
+
+export { CodeInputContainer };

package/src/components/molecules/HighlightsCard/HighlightsCard.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Card, CardWrapper, IconWrapper, CardContent } from "./HighlightsCard.styles";
 import { HighlightsCardProps } from "./HighlightsCard.types";
-import { Icon } from "@granto-umbrella/umbrella-components";
+import Icon from "../../atoms/Icon";
 
 const HighlightsCard: React.FC<HighlightsCardProps> = ({ items }) => {
   return (

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

@@ -1,6 +1,6 @@
 /* eslint-disable react-refresh/only-export-components */
 import styled from 'styled-components';
-import { semanticColors } from '@granto-umbrella/umbrella-components';
+import { semanticColors } from "@/styles/tokens";
 import { StatusVariant } from './InsuranceCard.types';
 
 export const PageContainer = styled.div`