@granto-umbrella/umbrella-components 2.3.22 → 3.0.0

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

@@ -1,13 +1,14 @@
-import styled from "styled-components";
-import Select from "react-select";
+import styled from 'styled-components';
+import Select from 'react-select';
 import {
-  semanticColors,
-  semanticRadius,
   semanticSizes,
   semanticShadows,
   primitiveSizes,
   typographyTokens,
-} from "../../../styles/tokens";
+  semanticBorders,
+  semanticColors,
+  semanticRadius,
+} from '../../../styles/tokens/index';
 
 export const Container = styled.div`
   display: flex;
@@ -25,68 +26,125 @@ export const Label = styled.label`
   font-weight: ${typographyTokens.fontWeights.medium};
 `;
 
-export const SupportingText = styled.span`
+export const SupportingText = styled.span<{ $error?: boolean }>`
   font-size: ${typographyTokens.fontSizes.captionM};
-  color: ${semanticColors.global.text.subtitle.enabled};
+  color: ${({ $error }) =>
+    $error
+      ? semanticColors.global.text.feedback.strong.error
+      : semanticColors.global.text.subtitle.enabled};
 `;
 
 export const CustomSelect = styled(Select).attrs({
-  classNamePrefix: "react-select",
-})<{ $size?: keyof typeof semanticSizes.global.padding }>`
+  classNamePrefix: 'react-select',
+})<{
+  $size?: keyof typeof semanticSizes.global.padding;
+  $error?: boolean;
+}>`
   .react-select__control {
     background: ${semanticColors.base.background};
-    border: 1px solid ${semanticColors.neutral[300]};
+    border: ${semanticBorders.global.sm} solid
+      ${({ $error }) =>
+        $error
+          ? semanticColors.global.border.danger.enabled
+          : semanticColors.global.border.medium};
     border-radius: ${semanticRadius.global.radius.md};
-    box-shadow: ${semanticShadows.shadow};
+    box-shadow: ${semanticShadows.shadow.default};
     transition: border-color 0.2s, box-shadow 0.2s;
-    min-height: ${primitiveSizes.size.x4};
+    min-height: ${primitiveSizes.size.x12};
 
     &:hover {
-      border-color: ${semanticColors.branding.border.hover};
+      border-color: ${({ $error }) =>
+        $error
+          ? semanticColors.danger.border.hover
+          : semanticColors.branding.border.hover};
     }
 
     &:focus-within {
-      border-color: ${semanticColors.branding.border.enabled};
-      box-shadow: ${semanticShadows.shadow};
+      border-color: ${({ $error }) =>
+        $error
+          ? semanticColors.danger.border.enabled
+          : semanticColors.branding.border.enabled};
+      box-shadow: ${semanticShadows.shadow.md};
+    }
+
+    &.react-select__control--is-disabled {
+      background: ${semanticColors.global.surface.disabled};
+      border-color: ${semanticColors.global.border.strong};
+      color: ${semanticColors.global.text.onSurface.enabled};
+      cursor: not-allowed;
     }
   }
 
   .react-select__value-container {
-    padding: ${({ $size = "sm" }) => semanticSizes.global.padding[$size]};
+    padding: ${({ $size = 'md' }) => semanticSizes.global.padding[$size]};
     font-size: ${typographyTokens.fontSizes.labelM};
     color: ${semanticColors.base.text};
   }
 
+  .react-select__placeholder {
+    color: ${semanticColors.global.text.onSurface.subtitle};
+    font-size: ${typographyTokens.fontSizes.labelM};
+  }
+
   .react-select__menu {
     background: ${semanticColors.base.background};
     border-radius: ${semanticRadius.global.radius.md};
-    box-shadow: ${semanticShadows.shadow};
+    box-shadow: ${semanticShadows.shadow.lg};
+    border: ${semanticBorders.global.sm} solid
+      ${semanticColors.global.border.default};
+    z-index: 1000;
   }
 
   .react-select__option {
-    padding: ${({ $size = "sm" }) => semanticSizes.global.padding[$size]};
+    padding: ${({ $size = 'md' }) => semanticSizes.global.padding[$size]};
     font-size: ${typographyTokens.fontSizes.labelM};
     cursor: pointer;
     transition: background 0.2s, color 0.2s;
+    color: ${semanticColors.base.text};
 
     &:hover {
       background: ${semanticColors.branding.surface.hover};
-      color: ${semanticColors.base.background};
+      color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
     }
 
     &:active {
       background: ${semanticColors.branding.surface.pressed};
-      color: ${semanticColors.base.background};
+      color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
     }
   }
 
   .react-select__option--is-selected {
     background: ${semanticColors.branding.surface.enabled};
-    color: ${semanticColors.base.background};
-    font-weight: bold;
+    color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
+    font-weight: ${typographyTokens.fontWeights.semibold};
+
+    &:hover {
+      background: ${semanticColors.branding.surface.hover};
+    }
+  }
+
+  .react-select__option--is-focused {
+    background: ${semanticColors.neutral[100]};
+    color: ${semanticColors.base.text};
   }
 
   .react-select__indicator-separator {
-    background-color: ${semanticColors.base.background};
+    background-color: ${semanticColors.global.border.medium};
+  }
+
+  .react-select__dropdown-indicator {
+    color: ${semanticColors.global.text.onSurface.enabled};
+
+    &:hover {
+      color: ${semanticColors.branding.text.accent.enabled};
+    }
+  }
+
+  .react-select__clear-indicator {
+    color: ${semanticColors.global.text.onSurface.enabled};
+
+    &:hover {
+      color: ${semanticColors.danger.text.enabled};
+    }
   }
 `;

package/src/components/atoms/Select/Select.tsx

@@ -1,27 +1,12 @@
-import React from "react";
-import {
-  Container,
-  Label,
-  SupportingText,
-  CustomSelect,
-} from "./Select.styles";
-import { semanticSizes } from "../../../styles/tokens";
+"use client"
+
+import type React from "react"
+import { Container, Label, SupportingText, CustomSelect } from "./Select.styles"
+import type { SelectProps } from "./Select.types"
 
 interface Option {
-  label: string;
-  value: string;
-}
-interface SelectProps {
-  label: string;
-  supportingText?: string;
-  placeholder?: string;
-  borderColor?: string;
-  borderRadius?: string;
-  size?: keyof typeof semanticSizes.global.padding;
-  options: { label: string; value: string }[];
-  onChange?: (newValue: Option | null, actionMeta: { action: string }) => void;
-  value?: Option | null;
-  testId?: string;
+  label: string
+  value: string
 }
 
 const Select: React.FC<SelectProps> = ({
@@ -33,24 +18,26 @@ const Select: React.FC<SelectProps> = ({
   value,
   testId,
   size = "md",
+  disabled = false,
+  error = false,
 }) => {
   return (
-    <Container data-testid={testId}>
+    <Container data-testid={testId} id={testId}>
       {label && <Label>{label}</Label>}
       <CustomSelect
         $size={size}
+        $error={error}
         classNamePrefix="react-select"
         options={options}
         placeholder={placeholder || "Selecione"}
-        onChange={(newValue, actionMeta) =>
-          onChange && onChange(newValue as Option | null, actionMeta)
-        }
+        onChange={(newValue, actionMeta) => onChange && onChange(newValue as Option | null, actionMeta)}
         value={value}
         isSearchable
+        isDisabled={disabled}
       />
-      {supportingText && <SupportingText>{supportingText}</SupportingText>}
+      {supportingText && <SupportingText $error={error}>{supportingText}</SupportingText>}
     </Container>
-  );
-};
+  )
+}
 
-export default Select;
+export default Select

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

@@ -1,11 +1,19 @@
-import React from "react";
+interface Option {
+  label: string;
+  value: string;
+}
 
-export interface SelectProps
-  extends React.SelectHTMLAttributes<HTMLSelectElement> {
-  customSize?: "xs" | "sm" | "md" | "lg";
-  variant?: "primary" | "outline" | "danger" | "ghost";
-  radius?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
-  isLoading?: boolean;
-  leftIcon?: React.ReactNode;
-  rightIcon?: React.ReactNode;
+export interface SelectProps {
+  label: string;
+  supportingText?: string;
+  placeholder?: string;
+  borderColor?: string;
+  borderRadius?: string;
+  size?: 'sm' | 'md' | 'lg';
+  options: { label: string; value: string }[];
+  onChange?: (newValue: Option | null, actionMeta: { action: string }) => void;
+  value?: Option | null;
+  testId?: string;
+  disabled?: boolean;
+  error?: boolean;
 }

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

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+import {
+  semanticSizes,
+  typographyTokens,
+  semanticColors,
+} from "../../../styles/tokens";
+
+export const Container = styled.div`
+  width: 325px;
+  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/Subtitle/Subtitle.tsx

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

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

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

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

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

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

@@ -1,10 +1,10 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 import {
   semanticColors,
   semanticSizes,
   semanticRadius,
   typographyTokens,
-} from "../../../styles/tokens";
+} from '../../../styles/tokens';
 
 export const SwitchWrapper = styled.label`
   display: flex;
@@ -15,14 +15,14 @@ export const SwitchWrapper = styled.label`
   cursor: pointer;
 `;
 
-export const SwitchInput = styled.input.attrs({ type: "checkbox" })`
+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-in-out;
+  transition: background 0.3s ease-out;
   cursor: pointer;
 
   &:checked {
@@ -30,21 +30,26 @@ export const SwitchInput = styled.input.attrs({ type: "checkbox" })`
   }
 
   &::after {
-    content: "";
-    width: ${semanticSizes.global.padding.md};
-    height: ${semanticSizes.global.padding.md};
+    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-in-out;
+    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`

package/src/components/atoms/Switch/Switch.tsx

@@ -16,7 +16,7 @@ export const Switch: React.FC<SwitchProps> = ({
   return (
     <SwitchWrapper>
       {label && <SwitchLabel>{label}</SwitchLabel>}
-      <SwitchInput data-testid={testId} {...props} />
+      <SwitchInput data-testid={testId} id={testId} {...props} />
       {text && <SwitchLabel>{text}</SwitchLabel>}
     </SwitchWrapper>
   );

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

@@ -0,0 +1,57 @@
+import styled, { css } from "styled-components"
+import { semanticColors, semanticSizes, semanticBorders, typographyTokens } from "../../../styles/tokens"
+
+export const Wrapper = styled.nav`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  border-bottom: ${semanticBorders.global.lg} solid ${semanticColors.global.border.medium};
+`
+
+export const Tab = styled.button<{ $active: boolean }>`
+  display: flex;
+  height: ${semanticSizes.global.spacings.lg};
+  padding: ${semanticSizes.global.padding.lg} ${semanticSizes.global.padding["3xl"]};
+  justify-content: center;
+  align-items: center;
+  gap: ${semanticSizes.global.gap.sm};
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: ${typographyTokens.fontFamily.base};
+  font-size: ${typographyTokens.fontSizes.bodyM};
+  font-weight: ${typographyTokens.fontWeights.regular};
+  line-height: ${typographyTokens.lineHeights.bodyM};
+  color: ${semanticColors.global.text.onSurface.subtitle};
+  margin-bottom: calc(-1 * ${semanticBorders.global.lg});
+  border-bottom: ${semanticBorders.global.lg} solid transparent;
+  
+  & + & {
+    margin-left: ${semanticSizes.global.padding.lg};
+  }
+  
+  ${(p) =>
+    p.$active &&
+    css`
+      border-bottom-color: ${semanticColors.branding.border.enabled};
+      color: ${semanticColors.branding.text.accent.enabled};
+    `}
+    
+  &:hover:not(:disabled) {
+    color: ${semanticColors.branding.text.accent.hover};
+    ${(p) =>
+      p.$active &&
+      css`
+        border-bottom-color: ${semanticColors.branding.border.hover};
+      `}
+  }
+  
+  &:focus {
+    outline: none;
+  }
+`
+
+export const Count = styled.span`
+  font-weight: ${typographyTokens.fontWeights.medium};
+  color: inherit;
+`

package/src/components/atoms/Tapbar/Tapbar.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Count, Tab, Wrapper } from "./Tapbar.styles";
+import { TapbarProps } from "./Tapbar.types";
+
+export const Tapbar: React.FC<TapbarProps> = ({
+  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/Tapbar/Tapbar.types.ts

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

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

@@ -0,0 +1,2 @@
+export { Tapbar } from "./Tapbar";
+export type { TapbarProps, TabItem } from "./Tapbar.types";

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

@@ -1,5 +1,8 @@
-import { semanticColors, typographyTokens } from "../../../styles/tokens";
-import styled from "styled-components";
+import { 
+  semanticColors, 
+  typographyTokens 
+} from '../../../styles/tokens';
+import styled from 'styled-components';
 
 export const StyledText = styled.p<{
   $size: string;
@@ -9,12 +12,12 @@ export const StyledText = styled.p<{
   display: flex;
   width: 100%;
   font-size: ${({ $size }) =>
-    $size === "lg"
+    $size === 'lg'
       ? typographyTokens.fontSizes.bodyL
-      : $size === "md"
+      : $size === 'md'
       ? typographyTokens.fontSizes.bodyM
       : typographyTokens.fontSizes.bodyS};
 
-  font-weight: ${({ $weight }) => ($weight === "bold" ? "bold" : "normal")};
+  font-weight: ${({ $weight }) => ($weight === 'bold' ? 'bold' : 'normal')};
   color: ${({ $color }) => $color || semanticColors.base.text};
 `;

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { StyledText } from "./Text.styles";
+
 import { TextProps } from "./Text.types";
 
 const Text: React.FC<TextProps> = ({
@@ -12,6 +13,7 @@ const Text: React.FC<TextProps> = ({
   return (
     <StyledText
       data-testid={testId}
+      id={testId}
       $size={size}
       $weight={weight}
       $color={color}

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

@@ -15,23 +15,23 @@ export const TextareaWrapper = styled.div`
 
 export const Label = styled.label`
   font-size: ${typographyTokens.fontSizes.labelS};
-  color: ${semanticColors.neutral[500]};
+  color: ${semanticColors.global.text.subtitle.enabled};
   font-weight: 500;
 `;
 
 export const StyledTextarea = styled.textarea`
   display: flex;
-  padding: ${semanticSizes.global.padding.md};
+  padding: ${semanticSizes.global.padding.lg};
   font-size: ${typographyTokens.fontSizes.bodyM};
   color: ${semanticColors.base.text};
   background: ${semanticColors.base.background};
-  border: 1px solid ${semanticColors.neutral[300]};
+  border: 1px solid ${semanticColors.global.border.medium};
   border-radius: ${semanticRadius.global.radius.md};
   resize: vertical;
-  transition: border-color 0.2s, box-shadow 0.2s;
+  transition: border-color 0.2s; 
 
   &::placeholder {
-    color: ${semanticColors.neutral[400]};
+    color: ${semanticColors.global.text.subtitle.enabled};
   }
 
   &:focus {
@@ -41,13 +41,12 @@ export const StyledTextarea = styled.textarea`
   }
 
   &:disabled {
-    color: ${semanticColors.global.text.onSurface.enabled};
-    background-color: ${semanticColors.neutral[200]};
+    background-color: ${semanticColors.global.surface.disabled}; 
     cursor: not-allowed;
   }
 `;
 
 export const SupportingText = styled.span`
   font-size: ${typographyTokens.fontSizes.labelS};
-  color: ${semanticColors.neutral[400]};
+  color: ${semanticColors.global.text.subtitle.enabled}; 
 `;

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

@@ -22,7 +22,7 @@ const Textarea: React.FC<TextareaProps> = ({
           {info}
         </Label>
       )}
-      <StyledTextarea data-testid={testId} {...props} />
+      <StyledTextarea data-testid={testId} id={testId} {...props} />
       {supportingText && <SupportingText>{supportingText}</SupportingText>}
     </TextareaWrapper>
   );

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

@@ -0,0 +1,17 @@
+import styled from "styled-components"
+import { typographyTokens, semanticColors } from "../../../styles/tokens"
+
+export const Container = styled.div`
+  width: 505px;
+  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

@@ -0,0 +1,7 @@
+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

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

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

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

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,19 @@
+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

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

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

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