@granto-umbrella/umbrella-components 3.0.76 → 3.0.78

package/src/components/atoms/Input/Input.tsx

@@ -1,80 +0,0 @@
-import React, { forwardRef } from 'react';
-import { InputProps } from './Input.types';
-import {
-  Container,
-  Label,
-  InputWrapper,
-  StyledInput,
-  Icon,
-  SupportText,
-} from './Input.styles';
-
-function mergeRefs<T>(
-  ...refs: (React.Ref<T> | null | undefined)[]
-): React.RefCallback<T> {
-  return (value: T) => {
-    refs.forEach((ref) => {
-      if (typeof ref === 'function') {
-        ref(value);
-      } else if (ref != null) {
-        (ref as React.MutableRefObject<T | null>).current = value;
-      }
-    });
-  };
-}
-
-const Input = forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      type = 'text',
-      placeholder = '',
-      value,
-      onChange,
-      error = false,
-      disabled = false,
-      icon,
-      label,
-      supportText,
-      size = 'sm',
-      radius = 'md' as 'md' | 'lg' | 'sm' | 'full',
-      shadow = 'default' as 'none' | 'default' | 'md' | 'lg',
-      style,
-      register,
-      testId,
-      className,
-      onBlur,
-    },
-    ref
-  ) => {
-    return (
-      <Container>
-        {label && <Label>{label}</Label>}
-        <InputWrapper
-          $error={error}
-          $disabled={disabled}
-          $radius={radius}
-          $shadow={shadow}
-          $size={size}
-        >
-          {icon && <Icon>{icon}</Icon>}
-          <StyledInput
-            data-testid={testId}
-            id={testId}
-            {...(register || {})}
-            ref={mergeRefs(ref, register ? register.ref : null)}
-            style={style}
-            type={type}
-            placeholder={placeholder}
-            value={value}
-            onChange={onChange}
-            onBlur={onBlur}
-            className={className}
-            disabled={disabled}
-          />
-        </InputWrapper>
-        {supportText && <SupportText $error={error}>{supportText}</SupportText>}
-      </Container>
-    );
-  }
-);
-export default Input;

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

@@ -1,21 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-export interface InputProps {
-  type?: string;
-  placeholder?: string;
-  value?: string;
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-  className?: string;
-  error?: boolean;
-  disabled?: boolean;
-  icon?: React.ReactNode;
-  label?: string;
-  supportText?: string;
-  size?: 'sm' | 'md' | 'lg';
-
-  radius?: 'md' | 'lg' | 'sm' | 'full';
-  shadow?: 'none' | 'default' | 'md' | 'lg';
-  style?: React.CSSProperties;
-  register?: any;
-  testId?: string;
-}

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

@@ -1,16 +0,0 @@
-// Label.styled.tsx
-import styled from 'styled-components';
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { typographyTokens } from '../../../styles/tokens/typography';
-
-export const StyledLabel = styled(LabelPrimitive.Root)`
-  font-size: ${typographyTokens.fontSizes.labelS};
-  font-weight: ${typographyTokens.fontWeights.medium};
-
-  line-height: ${typographyTokens.lineHeights.labelS};
-  font-family: ${typographyTokens.fontFamily.base};
-  &[data-disabled='true'] {
-    cursor: not-allowed;
-    opacity: 0.7;
-  }
-`;

package/src/components/atoms/Label/Label.tsx

@@ -1,16 +0,0 @@
-// Label.tsx
-import * as React from 'react';
-import { StyledLabel } from './Label.styles';
-
-export type LabelProps = React.ComponentProps<typeof StyledLabel>;
-
-export const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <StyledLabel ref={ref} {...props}>
-        {children}
-      </StyledLabel>
-    );
-  }
-);
-Label.displayName = 'Label';

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

@@ -1,25 +0,0 @@
-import styled, { keyframes } from 'styled-components';
-import {
-  semanticBorders,
-  semanticColors,
-  semanticRadius,
-  semanticSizes,
-} from '../../../styles/tokens';
-
-const spin = keyframes`
-  to { 
-    transform: rotate(360deg); 
-  }
-`;
-
-export const StyledLoader = styled.div`
-  margin: ${semanticSizes.global.spacings.lg} auto;
-  border: ${semanticBorders.global.lg} solid
-    ${semanticColors.global.border.default};
-  border-top: ${semanticBorders.global.lg} solid
-    ${semanticColors.info.border.feedback};
-  border-radius: ${semanticRadius.global.radius.full};
-  width: ${semanticSizes.global.spacings.md};
-  height: ${semanticSizes.global.spacings.md};
-  animation: ${spin} 1s linear infinite;
-`;

package/src/components/atoms/Loading/Loading.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import { StyledLoader } from './Loading.styles';
-
-const Loader: React.FC = () => {
-  return <StyledLoader />;
-};
-
-export default Loader;

package/src/components/atoms/LogoContainer/LogoContainer.Types.tsx

@@ -1,6 +0,0 @@
-export interface LogoContainerProps {
-  src: string;
-  alt?: string;
-  margintBottom?: string;
-  width?: number;
-}

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

@@ -1,11 +0,0 @@
-import styled from 'styled-components';
-import { primitiveSizes } from '../../../styles/tokens';
-
-export const Logo = styled.img<{ marginBottom?: string; width?: number }>`
-  margin-bottom: ${(props) => props.marginBottom || primitiveSizes.size.x6};
-  width: ${(props) => props.width || 112}px;
-
-  @media (max-width: 768px) {
-    width: ${(props) => props.width || 114.12}px;
-  }
-`;

package/src/components/atoms/LogoContainer/LogoContainer.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import { Logo } from './LogoContainer.styles';
-import { LogoContainerProps } from './LogoContainer.Types';
-
-export const LogoContainer: React.FC<LogoContainerProps> = ({
-  src,
-  alt,
-  margintBottom,
-  width,
-}) => {
-  return (
-    <Logo src={src} alt={alt} marginBottom={margintBottom} width={width} />
-  );
-};

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

@@ -1,56 +0,0 @@
-// ModalAviso.styles.tsx
-import styled from 'styled-components';
-import {
-  primitiveColors,
-  semanticSizes,
-  semanticRadius,
-  typographyTokens,
-  semanticBorders,
-} from '../../../styles/tokens';
-import { semanticColors } from '../../../styles/tokens';
-
-export const Wrapper = styled.div`
-  position: fixed;
-  bottom: calc(${semanticSizes.global.spacings.lg} + 10px);
-  right: ${semanticSizes.global.padding.lg};
-  z-index: 9999;
-`;
-
-export const Container = styled.div`
-  background-color: ${semanticColors.info.surface.feedback};
-  border-radius: ${semanticRadius.global.radius.md2};
-  border: ${semanticBorders.global.md} solid
-    ${semanticColors.info.border.feedback};
-  padding: ${semanticSizes.global.padding.md} ${semanticSizes.global.padding.lg};
-  display: flex;
-  align-items: start;
-  justify-content: space-between;
-  gap: ${semanticSizes.global.gap.md};
-  max-width: 600px;
-`;
-
-export const Content = styled.div`
-  flex: 1;
-`;
-
-export const Title = styled.p`
-  color: ${semanticColors.info.text.feedback.strong};
-  font-weight: ${typographyTokens.fontWeights.semibold};
-  font-size: ${typographyTokens.fontSizes.bodyM};
-  margin: 0 0 ${semanticSizes.global.gap.xs} 0;
-`;
-
-export const Description = styled.p`
-  color: ${primitiveColors.gray[800]};
-  font-size: ${typographyTokens.fontSizes.bodyS};
-  margin: 0;
-`;
-
-export const CloseButton = styled.button`
-  background: transparent;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  color: ${primitiveColors.gray[600]};
-  line-height: 0;
-`;

package/src/components/atoms/ModalAviso/ModalAviso.tsx

@@ -1,43 +0,0 @@
-import React, { useEffect } from 'react';
-import { X } from 'lucide-react';
-import {
-  CloseButton,
-  Container,
-  Content,
-  Description,
-  Title,
-  Wrapper,
-} from './ModalAviso.styles';
-import { ModalAvisoProps } from './ModalAviso.types';
-
-export const ModalAviso: React.FC<ModalAvisoProps> = ({
-  title,
-  description,
-  onClose,
-}) => {
-  useEffect(() => {
-    if (onClose) {
-      const timer = setTimeout(() => {
-        onClose();
-      }, 3000);
-
-      return () => clearTimeout(timer);
-    }
-  }, [onClose]);
-
-  return (
-    <Wrapper>
-      <Container>
-        <Content>
-          <Title>{title}</Title>
-          <Description>{description}</Description>
-        </Content>
-        {onClose && (
-          <CloseButton onClick={onClose}>
-            <X size={22} />
-          </CloseButton>
-        )}
-      </Container>
-    </Wrapper>
-  );
-};

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

@@ -1,5 +0,0 @@
-export interface ModalAvisoProps {
-  title: string;
-  description: string;
-  onClose?: () => void;
-}

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

@@ -1,100 +0,0 @@
-import styled, { css } from 'styled-components';
-import {
-  typographyTokens,
-  semanticSizes,
-  semanticColors,
-} from '../../../styles/tokens';
-
-type IContainer = {
-  $sizeDisplay?: '100' | '75' | '66' | '50' | '33' | '25';
-  height?: string;
-};
-
-export const Container = styled.div<IContainer>`
-  display: flex;
-  flex-direction: column;
-  height: ${(props) => props.height || 'auto'};
-
-  /* Aplicando os tamanhos de display corretamente */
-  ${({ $sizeDisplay }) =>
-    $sizeDisplay === '100'
-      ? css`
-          width: 100%;
-        `
-      : $sizeDisplay === '75'
-        ? css`
-            width: calc(75% - 8px);
-          `
-        : $sizeDisplay === '66'
-          ? css`
-              width: calc(66% - 8px);
-            `
-          : $sizeDisplay === '50'
-            ? css`
-                width: calc(50% - 8px);
-              `
-            : $sizeDisplay === '33'
-              ? css`
-                  width: calc(33% - 8px);
-                `
-              : $sizeDisplay === '25'
-                ? css`
-                    width: calc(25% - 11px);
-                  `
-                : css`
-                    width: 100%;
-                  `}
-
-  /* Container interno para posicionamento relativo */
-  > div {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-  }
-`;
-
-export const Label = styled.label<{ fontSize?: string; fontWeight?: string }>`
-  font-size: ${(props) =>
-    props.fontSize || typographyTokens.fontSizes.captionM};
-  font-weight: ${(props) =>
-    props.fontWeight || typographyTokens.fontWeights.medium};
-  color: ${semanticColors.neutral[700]};
-  margin-bottom: ${semanticSizes.global.gap.sm};
-  font-family: ${typographyTokens.fontFamily.base};
-  display: block;
-  line-height: 1.4;
-`;
-
-export const SelectWrapper = styled.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-`;
-
-export const Icon = styled.div<{ $error?: boolean }>`
-  position: absolute;
-  right: ${semanticSizes.global.padding.sm};
-  top: 50%;
-  transform: translateY(-50%);
-  color: ${(props) =>
-    props.$error
-      ? semanticColors.danger.text.enabled
-      : semanticColors.neutral[400]};
-  pointer-events: none;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-export const Error = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${semanticSizes.global.gap.xs};
-  color: ${semanticColors.danger.text.enabled};
-  font-size: ${typographyTokens.fontSizes.captionM};
-  margin-top: ${semanticSizes.global.padding.xs};
-  font-family: ${typographyTokens.fontFamily.base};
-  line-height: 1.4;
-`;