@granto-umbrella/umbrella-components 3.0.77 → 3.0.78

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

@@ -1,153 +0,0 @@
-import styled from 'styled-components';
-import Select from 'react-select';
-import {
-  semanticSizes,
-  semanticShadows,
-  primitiveSizes,
-  typographyTokens,
-  semanticBorders,
-  semanticColors,
-  semanticRadius,
-} from '../../../styles/tokens/index';
-
-export const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${primitiveSizes.size.x1};
-  width: 100%;
-`;
-
-export const Label = styled.label`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: ${typographyTokens.fontSizes.labelS};
-  color: ${semanticColors.global.text.subtitle.enabled};
-  font-weight: ${typographyTokens.fontWeights.medium};
-`;
-
-export const SupportingText = styled.span<{ $error?: boolean }>`
-  font-size: ${typographyTokens.fontSizes.captionM};
-  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;
-  $error?: boolean;
-}>`
-  .react-select__control {
-    background: ${semanticColors.base.background};
-    border: ${semanticBorders.global.sm} solid
-      ${({ $error }) =>
-        $error
-          ? semanticColors.global.border.danger.enabled
-          : semanticColors.global.border.medium};
-    border-radius: ${semanticRadius.global.radius.md};
-    transition:
-      border-color 0.2s,
-      box-shadow 0.2s;
-    min-height: ${primitiveSizes.size.x12};
-
-    &:hover {
-      border-color: ${({ $error }) =>
-        $error
-          ? semanticColors.danger.border.hover
-          : semanticColors.branding.border.hover};
-    }
-
-    &:focus-within {
-      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 = '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.lg};
-    border: ${semanticBorders.global.sm} solid
-      ${semanticColors.global.border.default};
-    z-index: 1000;
-  }
-
-  .react-select__option {
-    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.branding.text.onSurfaceAccent.enabled};
-    }
-
-    &:active {
-      background: ${semanticColors.branding.surface.pressed};
-      color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
-    }
-  }
-
-  .react-select__option--is-selected {
-    background: ${semanticColors.branding.surface.enabled};
-    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.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,52 +0,0 @@
-'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;
-}
-
-const Select: React.FC<SelectProps> = ({
-  label,
-  supportingText,
-  options,
-  placeholder,
-  onChange,
-  value,
-  testId,
-  size = 'md',
-  disabled = false,
-  error = false,
-}) => {
-  return (
-    <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)
-        }
-        value={value}
-        isSearchable
-        isDisabled={disabled}
-      />
-      {supportingText && (
-        <SupportingText $error={error}>{supportingText}</SupportingText>
-      )}
-    </Container>
-  );
-};
-
-export default Select;

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

@@ -1,19 +0,0 @@
-interface Option {
-  label: string;
-  value: string;
-}
-
-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/Skeleton/Skeleton.styles.ts

@@ -1,32 +0,0 @@
-// src/components/atoms/Skeleton/styles.ts
-import styled, { keyframes, css } from 'styled-components';
-import { primitiveColors } from '../../../styles/tokens';
-
-const shimmer = keyframes`
-  0% { background-position: -200% 0; }
-  100% { background-position: 200% 0; }
-`;
-
-export const SkeletonWrap = styled.div`
-  display: grid;
-  gap: 8px;
-`;
-
-export const SkeletonBlock = styled.div<{
-  $variant: 'text' | 'rect' | 'circle';
-  $animated: boolean;
-}>`
-  background: linear-gradient(
-    90deg,
-    ${primitiveColors.gray[100]} 0%,
-    ${primitiveColors.gray[200]} 50%,
-    ${primitiveColors.gray[100]} 100%
-  );
-  background-size: 200% 100%;
-
-  ${({ $animated }) =>
-    $animated &&
-    css`
-      animation: ${shimmer} 1.4s ease-in-out infinite;
-    `}
-`;

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

@@ -1,43 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-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/Subtitle/Subtitle.tsx

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

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

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

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

@@ -1,25 +0,0 @@
-import React from 'react';
-import { SwitchWrapper, SwitchInput, SwitchLabel } from './Switch.styles';
-
-interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  label?: string;
-  testId?: string;
-  text?: string;
-}
-
-export const Switch: React.FC<SwitchProps> = ({
-  label,
-  text,
-  testId,
-  ...props
-}) => {
-  return (
-    <SwitchWrapper>
-      {label && <SwitchLabel>{label}</SwitchLabel>}
-      <SwitchInput data-testid={testId} id={testId} {...props} />
-      {text && <SwitchLabel>{text}</SwitchLabel>}
-    </SwitchWrapper>
-  );
-};
-
-export default Switch;

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

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

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

@@ -1,64 +0,0 @@
-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/TabBar/TabBar.tsx

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

@@ -1,35 +0,0 @@
-import { semanticColors, typographyTokens } from '../../../styles/tokens';
-import styled from 'styled-components';
-
-export const StyledText = styled.p<{
-  $size: string;
-  $weight: string;
-  $color: string;
-  $variant?: string;
-}>`
-  font-size: ${({ $size }) =>
-    $size === 'lg'
-      ? typographyTokens.fontSizes.bodyL
-      : $size === 'md'
-        ? typographyTokens.fontSizes.bodyM
-        : typographyTokens.fontSizes.bodyS};
-  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,32 +0,0 @@
-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',
-  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={defaultColor}
-      $variant={variant}
-    >
-      {children}
-    </StyledText>
-  );
-};
-
-export default Text;

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

@@ -1,8 +0,0 @@
-export interface TextProps {
-  children: React.ReactNode;
-  size?: 'sm' | 'md' | 'lg';
-  weight?: 'normal' | 'bold';
-  color?: string;
-  testId?: string;
-  variant?: string;
-}

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

@@ -1,52 +0,0 @@
-import styled from 'styled-components';
-import {
-  semanticColors,
-  semanticSizes,
-  semanticRadius,
-  typographyTokens,
-} from '../../../styles/tokens';
-
-export const TextareaWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${semanticSizes.global.gap.sm};
-  width: 100%;
-`;
-
-export const Label = styled.label`
-  font-size: ${typographyTokens.fontSizes.labelS};
-  color: ${semanticColors.global.text.subtitle.enabled};
-  font-weight: 500;
-`;
-
-export const StyledTextarea = styled.textarea`
-  display: flex;
-  padding: ${semanticSizes.global.padding.lg};
-  font-size: ${typographyTokens.fontSizes.bodyM};
-  color: ${semanticColors.base.text};
-  background: ${semanticColors.base.background};
-  border: 1px solid ${semanticColors.global.border.medium};
-  border-radius: ${semanticRadius.global.radius.md};
-  resize: vertical;
-  transition: border-color 0.2s;
-
-  &::placeholder {
-    color: ${semanticColors.global.text.subtitle.enabled};
-  }
-
-  &:focus {
-    border-color: ${semanticColors.branding.border.enabled};
-    box-shadow: 0 0 0 2px ${semanticColors.branding.surface.hover};
-    outline: none;
-  }
-
-  &:disabled {
-    background-color: ${semanticColors.global.surface.disabled};
-    cursor: not-allowed;
-  }
-`;
-
-export const SupportingText = styled.span`
-  font-size: ${typographyTokens.fontSizes.labelS};
-  color: ${semanticColors.global.text.subtitle.enabled};
-`;