@granto-umbrella/umbrella-components 3.0.76 → 3.0.78

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

@@ -1,39 +0,0 @@
-import styled from 'styled-components';
-import { primitiveColors } from '../../../styles/tokens';
-
-export const IconWrapper = styled.button`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  width: 12.5px;
-  height: 12.5px;
-  padding: 0;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  opacity: 1;
-
-  position: relative;
-  top: 1.5px;
-  left: 2px;
-
-  transition: opacity 0.2s ease;
-
-  img,
-  svg {
-    width: 100%;
-    height: 100%;
-
-    color: ${primitiveColors.gray[800]};
-  }
-
-  &:hover {
-    opacity: 0.7;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.3;
-  }
-`;

package/src/components/atoms/EditIcon/EditIcon.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { PencilSimple } from '@phosphor-icons/react';
-import { IconWrapper } from './EditIcon.styles';
-import { EditIconProps } from './EditIcon.types';
-import imgPen from '../../../assets/pen.png';
-
-export const EditIcon: React.FC<EditIconProps> = ({
-  onClick,
-  useAsset = false,
-  ...props
-}) => {
-  return (
-    <IconWrapper onClick={onClick} {...props}>
-      {useAsset ? (
-        <img src={imgPen} alt="Editar" />
-      ) : (
-        <PencilSimple weight="bold" />
-      )}
-    </IconWrapper>
-  );
-};

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

@@ -1,7 +0,0 @@
-export interface EditIconProps {
-  onClick?: () => void;
-
-  useAsset?: boolean;
-  disabled?: boolean;
-  title?: string;
-}

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

@@ -1,150 +0,0 @@
-import styled from 'styled-components';
-import {
-  primitiveSizes,
-  semanticBorders,
-  semanticColors,
-  semanticRadius,
-  semanticShadows,
-  semanticSizes,
-  typographyTokens,
-} from '../../../styles/tokens';
-import CreatableSelect from 'react-select/creatable';
-
-export const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${primitiveSizes.size.x1};
-  width: 100%;
-`;
-
-export const Label = styled.label`
-  font-size: ${typographyTokens.fontSizes.labelS};
-  font-weight: ${typographyTokens.fontWeights.medium};
-  color: ${semanticColors.global.text.subtitle.enabled};
-`;
-
-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(CreatableSelect).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/EditableDurationSelect/EditableDurationSelect.tsx

@@ -1,138 +0,0 @@
-'use client';
-
-import { useMemo, useState } from 'react';
-import type { InputActionMeta } from 'react-select';
-import {
-  Container,
-  Label,
-  SupportingText,
-  CustomSelect,
-} from './EditableDurationSelect.styles';
-import {
-  DurationOption,
-  EditableDurationSelectProps,
-} from './EditableDurationSelect.types';
-
-const DAYS_IN_YEAR = 365;
-const BASE_LIMIT = 5;
-
-function parseDuration(input: string): DurationOption | null {
-  if (!input) return null;
-
-  const normalized = input.trim().toLowerCase();
-
-  if (/^\d+$/.test(normalized)) {
-    const amount = Number(normalized);
-    if (amount <= 0) return null;
-
-    const isYear = amount <= BASE_LIMIT;
-
-    return {
-      label: isYear
-        ? `${amount} ${amount > 1 ? 'anos' : 'ano'}`
-        : `${amount} ${amount > 1 ? 'dias' : 'dia'}`,
-      value: normalized,
-      days: isYear ? amount * DAYS_IN_YEAR : amount,
-    };
-  }
-
-  const match = normalized.match(/^(\d+)\s*(dia|dias|ano|anos)$/);
-  if (!match) return null;
-
-  const amount = Number(match[1]);
-  const unit = match[2];
-
-  if (amount <= 0) return null;
-
-  const isYear = unit.startsWith('ano');
-
-  return {
-    label: `${amount} ${isYear ? (amount > 1 ? 'anos' : 'ano') : amount > 1 ? 'dias' : 'dia'}`,
-    value: normalized,
-    days: isYear ? amount * DAYS_IN_YEAR : amount,
-  };
-}
-
-export default function EditableDurationSelect({
-  label,
-  supportingText,
-  value,
-  onChange,
-  options = [],
-  disabled,
-  error,
-  size = 'md',
-  testId,
-  baseLimit = BASE_LIMIT,
-  placeholder = 'Selecione ou insira a duração',
-}: EditableDurationSelectProps) {
-  const [inputValue, setInputValue] = useState('');
-
-  const parsedInput = useMemo(() => parseDuration(inputValue), [inputValue]);
-
-  const dynamicOption = useMemo(() => {
-    if (!parsedInput) return [];
-    return [
-      {
-        label: parsedInput.label,
-        value: parsedInput.value,
-        days: parsedInput.days,
-      },
-    ];
-  }, [parsedInput]);
-
-  const mergedOptions = useMemo(() => {
-    return [
-      ...dynamicOption.filter((d) => !options.some((o) => o.days === d.days)),
-      ...options,
-    ];
-  }, [dynamicOption, options]);
-
-  const helperText = useMemo(() => {
-    if (!inputValue) return supportingText;
-
-    if (!parsedInput) return 'Valor inválido';
-
-    return parsedInput.days > baseLimit * DAYS_IN_YEAR
-      ? `Valores acima de ${baseLimit} são considerados dias`
-      : `Valores até ${baseLimit} são considerados anos`;
-  }, [baseLimit, inputValue, parsedInput, supportingText]);
-
-  function handleInputChange(value: string, meta: InputActionMeta) {
-    if (meta.action === 'input-change') {
-      setInputValue(value);
-    }
-  }
-
-  function handleChange(option: DurationOption | null) {
-    if (!option) return;
-    onChange?.(option);
-    setInputValue('');
-  }
-
-  return (
-    <Container data-testid={testId}>
-      {label && <Label>{label}</Label>}
-
-      <CustomSelect
-        classNamePrefix="react-select"
-        isSearchable
-        isDisabled={disabled}
-        $size={size}
-        $error={error}
-        options={mergedOptions}
-        value={value}
-        placeholder={placeholder}
-        onInputChange={handleInputChange}
-        onChange={(opt) => handleChange(opt as DurationOption | null)}
-        formatCreateLabel={() => null}
-      />
-
-      {helperText && (
-        <SupportingText $error={error || helperText === 'Valor inválido'}>
-          {helperText}
-        </SupportingText>
-      )}
-    </Container>
-  );
-}

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

@@ -1,19 +0,0 @@
-export type DurationOption = {
-  label: string;
-  value: string;
-  days: number;
-};
-
-export interface EditableDurationSelectProps {
-  label?: string;
-  supportingText?: string;
-  value?: DurationOption | null;
-  onChange?: (value: DurationOption | null) => void;
-  options?: DurationOption[];
-  disabled?: boolean;
-  error?: boolean;
-  size?: 'sm' | 'md' | 'lg';
-  testId?: string;
-  baseLimit?: number;
-  placeholder?: string;
-}

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

@@ -1,28 +0,0 @@
-import styled, { css } from 'styled-components';
-import {
-  semanticBorders,
-  semanticColors,
-  semanticSizes,
-  typographyTokens,
-} from '../../../styles/tokens';
-
-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

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

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

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

@@ -1,22 +0,0 @@
-import styled from 'styled-components';
-import {
-  semanticSizes,
-  semanticColors,
-  primitiveSizes,
-  typographyTokens,
-} from '../../../styles/tokens';
-
-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

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

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

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

@@ -1,21 +0,0 @@
-import styled from 'styled-components';
-import {
-  semanticColors,
-  semanticSizes,
-  typographyTokens,
-} from '../../../styles/tokens';
-
-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

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

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

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

@@ -1,11 +0,0 @@
-import { semanticSizes } from '../../../styles/tokens';
-
-const iconSizes = {
-  xs: semanticSizes.global.padding.xl,
-  sm: semanticSizes.global.padding.sm,
-  md: semanticSizes.global.padding.md,
-  lg: semanticSizes.global.padding.lg,
-  xl: semanticSizes.global.padding.xl,
-};
-
-export default iconSizes;

package/src/components/atoms/Icon/Icon.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import * as Icons from '@phosphor-icons/react';
-import { IconProps } from './Icon.types';
-import iconSizes from './Icon.styles';
-
-const Icon: React.FC<IconProps> = ({
-  name,
-  size = 'md',
-  weight = 'regular',
-  ...props
-}) => {
-  const IconComponent = Icons[name as keyof typeof Icons] as React.ElementType;
-
-  if (!IconComponent) {
-    console.warn(`Ícone "${name}" não encontrado.`);
-    return null;
-  }
-
-  return <IconComponent size={iconSizes[size]} weight={weight} {...props} />;
-};
-
-export default Icon;

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

@@ -1,106 +0,0 @@
-import styled, { css } from 'styled-components';
-import {
-  semanticColors,
-  semanticShadows,
-  semanticRadius,
-  primitiveSizes,
-  semanticSizes,
-  semanticBorders,
-  typographyTokens,
-} 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;
-  flex-direction: column;
-  gap: ${primitiveSizes.size.x1};
-`;
-
-export const Label = styled.label`
-  font-size: ${typographyTokens.fontSizes.labelS};
-  color: ${semanticColors.global.text.subtitle.enabled};
-  font-weight: ${typographyTokens.fontWeights.medium};
-`;
-
-export const SupportText = styled.span<{ $error?: boolean }>`
-  font-size: ${typographyTokens.fontSizes.captionM};
-  color: ${({ $error }) =>
-    $error
-      ? semanticColors.danger.text.enabled
-      : semanticColors.global.text.subtitle.enabled};
-`;
-
-export const InputWrapper = styled.div<{
-  $error?: boolean;
-  $disabled?: boolean;
-  $radius?: keyof typeof semanticRadius.global.radius;
-  $shadow?: keyof typeof semanticShadows.shadow;
-  $size: keyof typeof inputSizes;
-}>`
-  display: flex;
-  align-items: center;
-
-  ${({ $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.global.border.medium};
-  background-color: ${({ $disabled }) =>
-    $disabled ? semanticColors.neutral[100] : semanticColors.base.background};
-  transition:
-    border-color 0.2s,
-    box-shadow 0.2s;
-
-  &:focus-within {
-    border-color: ${({ $error }) =>
-      $error
-        ? semanticColors.danger.border.enabled
-        : semanticColors.branding.border.enabled};
-  }
-`;
-
-export const StyledInput = styled.input`
-  display: flex;
-  width: 100%;
-  border: none;
-  outline: none;
-  font-size: ${typographyTokens.fontSizes.labelM};
-  color: ${semanticColors.global.text.default.enabled};
-
-  &::placeholder {
-    color: ${semanticColors.global.text.onSurface.enabled};
-  }
-
-  &:disabled {
-    background-color: transparent;
-    cursor: not-allowed;
-  }
-`;
-
-export const Icon = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: ${semanticColors.neutral[400]};
-`;