@granto-umbrella/umbrella-components 3.0.77 → 3.0.78

package/src/components/atoms/MultiSelect/MultiSelect.tsx

@@ -1,346 +0,0 @@
-'use client';
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import type React from 'react';
-import Select, {
-  type StylesConfig,
-  components,
-  type GroupBase,
-  type MultiValue as ReactSelectMultiValue,
-  type SingleValue,
-  type ActionMeta,
-} from 'react-select';
-import { WarningCircle } from '@phosphor-icons/react';
-import {
-  Container,
-  Label,
-  Icon,
-  Error,
-  SelectWrapper,
-} from './MultiSelect.styles';
-import {
-  semanticColors,
-  semanticRadius,
-  typographyTokens,
-} from '../../../styles/tokens';
-import type {
-  IStyledBaseProps,
-  SelectProps,
-  SelectOption,
-} from './MultiSelect.types';
-
-const StyledBase: React.FC<IStyledBaseProps> = ({
-  children,
-  label,
-  error,
-  errorMessage,
-  labelSize,
-  labelWeight,
-  icon,
-  sizeDisplay,
-  height,
-}) => {
-  return (
-    <Container $sizeDisplay={sizeDisplay} height={height}>
-      <div>
-        {label && (
-          <Label fontSize={labelSize} fontWeight={labelWeight}>
-            {label}
-          </Label>
-        )}
-        <SelectWrapper>
-          {children}
-          {icon && <Icon $error={error}>{icon}</Icon>}
-        </SelectWrapper>
-        {error && errorMessage && (
-          <Error>
-            <WarningCircle size={14} /> {errorMessage}
-          </Error>
-        )}
-      </div>
-    </Container>
-  );
-};
-
-const NoOptionsMessage = (props: any) => (
-  <components.NoOptionsMessage {...props}>
-    <span>Sem dados</span>
-  </components.NoOptionsMessage>
-);
-
-const CustomMultiValue = (props: any) => (
-  <components.MultiValue {...props}>
-    <Custom {...props} />
-  </components.MultiValue>
-);
-
-const Option = (props: any) => (
-  <components.Option {...props}>
-    <Custom {...props} />
-  </components.Option>
-);
-
-const Custom = (props: any) => (
-  <div style={{ display: 'flex', alignItems: 'center' }}>
-    {'picture' in props.data &&
-      (props.data.picture ? (
-        <img
-          src={props.data.picture || '/placeholder.svg'}
-          alt={props.data.name || props.data.label}
-          style={{
-            width: '16px',
-            height: '16px',
-            borderRadius: '50%',
-            marginRight: '8px',
-            objectFit: 'cover',
-          }}
-        />
-      ) : (
-        <div
-          style={{
-            width: '16px',
-            height: '16px',
-            borderRadius: '50%',
-            backgroundColor: semanticColors.base.text,
-            color: semanticColors.base.background,
-            fontSize: '10px',
-            display: 'flex',
-            marginRight: '8px',
-            alignItems: 'center',
-            justifyContent: 'center',
-            flexShrink: 0,
-          }}
-        >
-          {(props.data.label as string).charAt(0).toUpperCase()}
-        </div>
-      ))}
-    <span
-      style={{
-        fontSize: typographyTokens.fontSizes.bodyS,
-        lineHeight: '1.4',
-        color: 'inherit',
-      }}
-    >
-      {props.data.label}
-    </span>
-  </div>
-);
-
-const MultiSelect: React.FC<SelectProps> = ({
-  options,
-  placeholder,
-  height = '40px',
-  enabledClear = true,
-  multiple,
-  value,
-  disabled,
-  menuPlacement = 'auto',
-  defaultValue,
-  setValue,
-  ...props
-}) => {
-  const styles: StylesConfig<SelectOption, boolean, GroupBase<SelectOption>> = {
-    indicatorSeparator: (base: any) => ({ ...base, display: 'none' }),
-    container: (base: any) => ({
-      ...base,
-      width: '100%',
-      border: 'none',
-      position: 'relative',
-    }),
-    control: (base: any, state: any) => ({
-      ...base,
-      minHeight: `${height}`,
-      backgroundColor: semanticColors.base.background,
-      padding: '2px 8px',
-      borderRadius: semanticRadius.global.radius.md,
-      borderColor: state.isFocused
-        ? semanticColors.branding.border.enabled
-        : semanticColors.global.border.default,
-      ':hover': {
-        borderColor: semanticColors.branding.border.hover,
-      },
-      boxShadow: state.isFocused
-        ? `0 0 0 1px ${semanticColors.branding.border.enabled}`
-        : 'none',
-      cursor: disabled ? 'not-allowed' : 'pointer',
-      opacity: disabled ? 0.6 : 1,
-    }),
-    dropdownIndicator: (baseStyles: any) => ({
-      ...baseStyles,
-      color: semanticColors.branding.surface.enabled,
-      padding: '8px',
-      ':hover': {
-        color: semanticColors.branding.surface.hover,
-      },
-    }),
-    clearIndicator: (baseStyles: any) => ({
-      ...baseStyles,
-      color: semanticColors.neutral[400],
-      padding: '8px',
-      ':hover': {
-        color: semanticColors.danger.text.enabled,
-      },
-    }),
-    indicatorsContainer: (base: any) => ({
-      ...base,
-      alignItems: 'center',
-    }),
-    option: (baseStyle: any, state: any) => ({
-      ...baseStyle,
-      color: state.isSelected
-        ? semanticColors.branding.text.onSurfaceAccent.enabled
-        : semanticColors.base.text,
-      backgroundColor: state.isSelected
-        ? semanticColors.branding.surface.enabled
-        : state.isFocused
-          ? semanticColors.neutral[100]
-          : 'transparent',
-      cursor: 'pointer',
-      padding: '12px 16px',
-      ':active': {
-        backgroundColor: state.isSelected
-          ? semanticColors.branding.surface.pressed
-          : semanticColors.neutral[200],
-      },
-    }),
-    placeholder: (base: any) => ({
-      ...base,
-      fontSize: typographyTokens.fontSizes.bodyS,
-      fontWeight: typographyTokens.fontWeights.regular,
-      color: semanticColors.neutral[400],
-      margin: 0,
-    }),
-    singleValue: (base: any) => ({
-      ...base,
-      fontSize: typographyTokens.fontSizes.bodyS,
-      color: semanticColors.base.text,
-      margin: 0,
-    }),
-    multiValue: (base: any, state: any) => ({
-      ...base,
-      borderRadius: semanticRadius.global.radius.full,
-      border: `1px solid ${semanticColors.global.border.default}`,
-      backgroundColor: state.data.isFixed
-        ? semanticColors.global.surface.disabled
-        : semanticColors.base.background,
-      margin: '2px',
-      display: 'inline-flex',
-      alignItems: 'center',
-      padding: '0 4px',
-    }),
-    multiValueLabel: (base: any) => ({
-      ...base,
-      display: 'flex',
-      alignItems: 'center',
-      padding: '0 6px',
-      fontWeight: typographyTokens.fontWeights.regular,
-      fontSize: typographyTokens.fontSizes.captionM,
-      color: semanticColors.base.text,
-    }),
-    multiValueRemove: (base: any, state: any) => {
-      return state.data.isFixed
-        ? { ...base, display: 'none' }
-        : {
-            ...base,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginLeft: '2px',
-            padding: '0',
-            color: semanticColors.neutral[400],
-            cursor: 'pointer',
-            ':hover': {
-              backgroundColor: semanticColors.danger.surface.enabled,
-              color: semanticColors.danger.text.onSurface,
-            },
-          };
-    },
-
-    valueContainer: (base: any) => ({
-      ...base,
-      padding: '2px 8px',
-      gap: '4px',
-      flexWrap: 'wrap',
-    }),
-    input: (base: any) => ({
-      ...base,
-      margin: 0,
-      padding: 0,
-      fontSize: typographyTokens.fontSizes.bodyS,
-    }),
-    menuList: (base: any) => ({
-      ...base,
-      padding: 0,
-      '::-webkit-scrollbar': {
-        width: '6px',
-      },
-      '::-webkit-scrollbar-track': {
-        background: semanticColors.neutral[200],
-      },
-      '::-webkit-scrollbar-thumb': {
-        background: semanticColors.branding.surface.enabled,
-        borderRadius: '20px',
-      },
-      '::-webkit-scrollbar-thumb:hover': {
-        background: semanticColors.branding.surface.hover,
-      },
-    }),
-    menu: (base: any) => ({
-      ...base,
-      borderRadius: semanticRadius.global.radius.md,
-      boxShadow:
-        '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-      border: `1px solid ${semanticColors.global.border.default}`,
-      overflow: 'hidden',
-    }),
-  };
-
-  const handleChange = (
-    newValue: ReactSelectMultiValue<SelectOption> | SingleValue<SelectOption>,
-    actionMeta: ActionMeta<SelectOption>
-  ) => {
-    if (setValue) {
-      setValue(newValue, actionMeta);
-    }
-  };
-
-  return (
-    <StyledBase height={'fit-content'} {...props}>
-      <Select<SelectOption, boolean, GroupBase<SelectOption>>
-        theme={(selectTheme) => ({
-          ...selectTheme,
-          colors: {
-            ...selectTheme.colors,
-            primary: semanticColors.branding.surface.enabled,
-            primary75: semanticColors.branding.surface.hover,
-            primary50: semanticColors.branding.surface.disabled,
-            primary25: semanticColors.neutral[100],
-          },
-          spacing: {
-            baseUnit: 4,
-            menuGutter: 8,
-            controlHeight: parseInt(height.replace('px', '')) || 40,
-          },
-        })}
-        isClearable={enabledClear}
-        isMulti={multiple}
-        defaultValue={defaultValue}
-        options={options}
-        placeholder={placeholder}
-        isDisabled={disabled}
-        value={value}
-        isSearchable
-        onChange={handleChange}
-        styles={styles}
-        menuPlacement={menuPlacement}
-        components={{
-          NoOptionsMessage,
-          MultiValue: CustomMultiValue,
-          Option,
-        }}
-      />
-    </StyledBase>
-  );
-};
-
-export default MultiSelect;

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

@@ -1,38 +0,0 @@
-import type { ReactNode } from 'react';
-import type { MultiValue, SingleValue, ActionMeta } from 'react-select';
-
-export interface SelectOption {
-  label: string;
-  value: string | number;
-  picture?: string;
-  name?: string;
-  isFixed?: boolean;
-}
-
-export interface IStyledBaseProps {
-  children: ReactNode;
-  label?: string;
-  error?: boolean;
-  errorMessage?: string;
-  labelSize?: string;
-  labelWeight?: string;
-  icon?: ReactNode;
-  sizeDisplay?: '100' | '75' | '66' | '50' | '33' | '25';
-  height?: string;
-}
-
-export interface SelectProps extends Omit<IStyledBaseProps, 'children'> {
-  options: SelectOption[];
-  placeholder?: string;
-  height?: string;
-  enabledClear?: boolean;
-  multiple?: boolean;
-  value?: MultiValue<SelectOption> | SingleValue<SelectOption>;
-  disabled?: boolean;
-  menuPlacement?: 'auto' | 'bottom' | 'top';
-  defaultValue?: MultiValue<SelectOption> | SingleValue<SelectOption>;
-  setValue?: (
-    newValue: MultiValue<SelectOption> | SingleValue<SelectOption>,
-    actionMeta: ActionMeta<SelectOption>
-  ) => void;
-}

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

@@ -1,46 +0,0 @@
-import styled, { css } from 'styled-components';
-import {
-  semanticColors,
-  semanticSizes,
-  semanticRadius,
-  typographyTokens,
-} from '../../../styles/tokens';
-
-const pillVariants = {
-  tradicional: css`
-    background: ${semanticColors.info.surface.pills.tradicional};
-    color: ${semanticColors.info.text.pills.tradicional};
-  `,
-  supply: css`
-    background: ${semanticColors.warning.surface.pills.supply};
-    color: ${semanticColors.warning.text.pills.supply};
-  `,
-};
-
-const pillSizes = {
-  sm: css`
-    padding: ${semanticSizes.global.padding.xs}
-      ${semanticSizes.global.padding.sm};
-    font-size: ${typographyTokens.fontSizes.captionM};
-  `,
-  md: css`
-    padding: ${semanticSizes.global.padding.sm}
-      ${semanticSizes.global.padding.md};
-    font-size: ${typographyTokens.fontSizes.labelM};
-  `,
-};
-
-export const StyledPill = styled.span<{
-  $size?: keyof typeof pillSizes;
-  $variant?: keyof typeof pillVariants;
-  $radius: keyof typeof semanticRadius.global.radius;
-}>`
-  display: inline-flex;
-  align-items: center;
-  gap: ${semanticSizes.global.gap.xs};
-  font-weight: 500;
-  border-radius: ${semanticRadius.global.radius.full};
-
-  ${({ $size = 'md' }) => pillSizes[$size]}
-  ${({ $variant = 'tradicional' }) => pillVariants[$variant]}
-`;

package/src/components/atoms/Pill/Pill.tsx

@@ -1,35 +0,0 @@
-// Pill.tsx
-
-import React from 'react';
-import { StyledPill } from './Pill.styles';
-import { PillProps } from './Pill.types';
-import * as Icons from '@phosphor-icons/react';
-
-const Pill: React.FC<PillProps> = ({
-  children,
-  size,
-  variant = 'supply',
-  icon,
-  onClose,
-}) => {
-  // CORREÇÃO: Removemos o 'as keyof typeof Icons' pois o tipo já está correto.
-  const IconComponent = icon && (Icons[icon] as React.ElementType);
-
-  return (
-    <StyledPill $size={size} $variant={variant} $radius="full">
-      {IconComponent && (
-        <span className="icon">
-          <IconComponent size={16} />
-        </span>
-      )}
-      {children}
-      {onClose && (
-        <span className="close-icon" onClick={onClose}>
-          <Icons.X size={16} />
-        </span>
-      )}
-    </StyledPill>
-  );
-};
-
-export default Pill;

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

@@ -1,14 +0,0 @@
-import * as Icons from '@phosphor-icons/react';
-
-export type IconName = keyof typeof Icons;
-
-export interface PillProps {
-  children: React.ReactNode;
-
-  icon?: IconName;
-
-  hasIcon?: boolean;
-  size?: 'sm' | 'md';
-  variant?: 'tradicional' | 'supply';
-  onClose?: () => void;
-}

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

@@ -1,44 +0,0 @@
-import styled from 'styled-components';
-import {
-  primitiveSizes,
-  semanticBorders,
-  semanticColors,
-  semanticSizes,
-  typographyTokens,
-} from '../../../styles/tokens';
-
-export const RadioContainer = styled.label`
-  display: flex;
-  align-items: center;
-  gap: ${semanticSizes.global.gap.sm};
-  cursor: pointer;
-`;
-
-export const StyledRadio = styled.input`
-  appearance: none;
-  width: ${semanticSizes.global.padding.xl};
-  height: ${semanticSizes.global.padding.xl};
-  border-radius: 50%;
-  border: ${semanticBorders.global.md} solid
-    ${semanticColors.global.border.medium};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease-in-out;
-
-  &:checked {
-    background-color: ${semanticColors.branding.surface.enabled};
-    border-color: ${semanticColors.branding.surface.enabled};
-  }
-
-  &:disabled {
-    border-color: ${semanticColors.global.border.disabled};
-    cursor: not-allowed;
-  }
-`;
-
-export const Label = styled.span`
-  margin-top: ${primitiveSizes.size.x1};
-  font-size: ${typographyTokens.fontSizes.labelM};
-  color: ${semanticColors.base.text};
-`;

package/src/components/atoms/RadioButton/RadioButton.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { RadioButtonProps } from './RadioButton.types';
-import { RadioContainer, StyledRadio, Label } from './RadioButton.styles';
-
-const RadioButton: React.FC<RadioButtonProps> = ({
-  label,
-  name,
-  value,
-  checked,
-  onChange,
-  disabled = false,
-  testId,
-}) => {
-  return (
-    <RadioContainer>
-      <StyledRadio
-        data-testid={testId}
-        id={testId}
-        type="radio"
-        name={name}
-        value={value}
-        checked={checked}
-        onChange={onChange}
-        disabled={disabled}
-      />
-      <Label>{label}</Label>
-    </RadioContainer>
-  );
-};
-
-export default RadioButton;

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

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

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

@@ -1,19 +0,0 @@
-import styled from 'styled-components';
-import {
-  primitiveSizes,
-  semanticColors,
-  typographyTokens,
-} from '../../../styles/tokens';
-
-export const Container = styled.div<{ disabled?: boolean }>`
-  font-size: ${typographyTokens.fontSizes.labelS};
-  color: ${({ disabled }) =>
-    disabled
-      ? semanticColors.branding.text.accent.disabled
-      : semanticColors.branding.text.accent.enabled};
-  text-decoration: none;
-  margin-top: ${primitiveSizes.size.x12};
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
-  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
-`;

package/src/components/atoms/ResendLink/ResendLink.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { Container } from './ResendLink.styles';
-import { ResendLinkProps } from './ResendLink.types';
-
-export const ResendLink: React.FC<ResendLinkProps> = ({
-  children,
-  onClick,
-  disabled,
-  testId,
-}) => {
-  return (
-    <Container
-      data-testid={testId}
-      id={testId}
-      onClick={!disabled ? onClick : undefined}
-      disabled={disabled}
-    >
-      {children}
-    </Container>
-  );
-};

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

@@ -1,8 +0,0 @@
-import React from 'react';
-
-export interface ResendLinkProps {
-  children: React.ReactNode;
-  onClick: () => void;
-  disabled?: boolean;
-  testId?: string;
-}