@granto-umbrella/umbrella-components 3.0.34 → 3.0.37

package/src/components/atoms/CodeInput/CodeInput.tsx

@@ -1,19 +1,13 @@
-import React from "react";
-import { StyledCodeInput } from "./CodeInput.styles";
-import { CodeInputProps } from "./CodeInput.types";
-
-const CodeInput = React.forwardRef<HTMLInputElement, CodeInputProps>(
-  ({ ...props }, ref) => {
-    return (
-      <StyledCodeInput
-        ref={ref}
-        type="text"
-        {...props}
-      />
-    );
-  }
-);
-
-CodeInput.displayName = "CodeInput";
-
-export default CodeInput;
+import React from 'react';
+import { StyledCodeInput } from './CodeInput.styles';
+import { CodeInputProps } from './CodeInput.types';
+
+const CodeInput = React.forwardRef<HTMLInputElement, CodeInputProps>(
+  ({ ...props }, ref) => {
+    return <StyledCodeInput ref={ref} type="text" {...props} />;
+  }
+);
+
+CodeInput.displayName = 'CodeInput';
+
+export default CodeInput;

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

@@ -1,3 +1,3 @@
-import { InputHTMLAttributes } from "react";
-
-export type CodeInputProps = InputHTMLAttributes<HTMLInputElement>;
+import { InputHTMLAttributes } from 'react';
+
+export type CodeInputProps = InputHTMLAttributes<HTMLInputElement>;

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

@@ -1 +1 @@
-export { default } from "./CodeInput";
+export { default } from './CodeInput';

package/src/components/atoms/DropDownMenu/DropdownMenu.tsx

@@ -1,48 +1,48 @@
-import React, { useState } from "react";
-import { ChevronDown, ChevronUp } from "lucide-react";
-import {
-  Wrapper,
-  ToggleButton,
-  LabelText,
-  Menu,
-  Item,
-  IconWrapper,
-  ItemLabel,
-} from "./DropdownMenu.styles";
-import { DropdownMenuProps, DropdownMenuItemProps } from "./DropdownMenu.types";
-
-export const DropdownMenu: React.FC<DropdownMenuProps> = ({
-  label,
-  variant = "light",
-  children,
-}) => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <Wrapper>
-      <ToggleButton
-        onClick={() => setOpen((o) => !o)}
-        $variant={variant}
-        $open={open}
-      >
-        <LabelText>{label}</LabelText>
-        {open ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
-      </ToggleButton>
-      {open && <Menu $variant={variant}>{children}</Menu>}
-    </Wrapper>
-  );
-};
-
-export const DropdownMenuItem: React.FC<DropdownMenuItemProps> = ({
-  icon,
-  onClick,
-  children,
-}) => (
-  <Item onClick={onClick}>
-    {icon && <IconWrapper>{icon}</IconWrapper>}
-    <ItemLabel>{children}</ItemLabel>
-  </Item>
-);
-
-DropdownMenu.displayName = "DropdownMenu";
-DropdownMenuItem.displayName = "DropdownMenuItem";
+import React, { useState } from 'react';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import {
+  Wrapper,
+  ToggleButton,
+  LabelText,
+  Menu,
+  Item,
+  IconWrapper,
+  ItemLabel,
+} from './DropdownMenu.styles';
+import { DropdownMenuProps, DropdownMenuItemProps } from './DropdownMenu.types';
+
+export const DropdownMenu: React.FC<DropdownMenuProps> = ({
+  label,
+  variant = 'light',
+  children,
+}) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Wrapper>
+      <ToggleButton
+        onClick={() => setOpen((o) => !o)}
+        $variant={variant}
+        $open={open}
+      >
+        <LabelText>{label}</LabelText>
+        {open ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+      </ToggleButton>
+      {open && <Menu $variant={variant}>{children}</Menu>}
+    </Wrapper>
+  );
+};
+
+export const DropdownMenuItem: React.FC<DropdownMenuItemProps> = ({
+  icon,
+  onClick,
+  children,
+}) => (
+  <Item onClick={onClick}>
+    {icon && <IconWrapper>{icon}</IconWrapper>}
+    <ItemLabel>{children}</ItemLabel>
+  </Item>
+);
+
+DropdownMenu.displayName = 'DropdownMenu';
+DropdownMenuItem.displayName = 'DropdownMenuItem';

package/src/components/atoms/DropDownMenu/DropdownMenu.types.ts

@@ -1,15 +1,15 @@
-import { ReactNode } from "react";
-
-export type Variant = "light" | "dark";
-
-export interface DropdownMenuProps {
-  label: string;
-  variant?: Variant;
-  children: ReactNode;
-}
-
-export interface DropdownMenuItemProps {
-  icon?: ReactNode;
-  onClick?: () => void;
-  children: ReactNode;
-}
+import { ReactNode } from 'react';
+
+export type Variant = 'light' | 'dark';
+
+export interface DropdownMenuProps {
+  label: string;
+  variant?: Variant;
+  children: ReactNode;
+}
+
+export interface DropdownMenuItemProps {
+  icon?: ReactNode;
+  onClick?: () => void;
+  children: ReactNode;
+}

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

@@ -1,2 +1,5 @@
-export { DropdownMenu, DropdownMenuItem } from "./DropdownMenu";
-export type { DropdownMenuProps, DropdownMenuItemProps } from "./DropdownMenu.types";
+export { DropdownMenu, DropdownMenuItem } from './DropdownMenu';
+export type {
+  DropdownMenuProps,
+  DropdownMenuItemProps,
+} from './DropdownMenu.types';

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

@@ -1,28 +1,28 @@
-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]}
-`;
+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 +1,12 @@
-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;
+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 +1,6 @@
-import React from 'react';
-
-export interface ErrorMessageProps {
-    children: React.ReactNode;
-    type?: "error" | "success" ;
-}
+import React from 'react';
+
+export interface ErrorMessageProps {
+  children: React.ReactNode;
+  type?: 'error' | 'success';
+}

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

@@ -1 +1 @@
-export { default } from "./ErrorMessage";
+export { default } from './ErrorMessage';

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

@@ -1,22 +1,22 @@
-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};
-`;
+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 +1,9 @@
-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;
+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 +1,5 @@
-import React from "react";
-
-export interface FooterProps {
-  children: React.ReactNode;
-}
+import React from 'react';
+
+export interface FooterProps {
+  children: React.ReactNode;
+}

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

@@ -1 +1 @@
-export { default } from "./Footer";
+export { default } from './Footer';

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

@@ -1,21 +1,21 @@
-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};
-  }
-`;
+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 +1,9 @@
-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>;
-};
+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 +1,5 @@
-import React from "react";
-
-export interface GenericContainerProps {
-  children: React.ReactNode;
-}
+import React from 'react';
+
+export interface GenericContainerProps {
+  children: React.ReactNode;
+}

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

@@ -1 +1 @@
-export { GenericContainer } from "./GenericContainer";
+export { GenericContainer } from './GenericContainer';

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

@@ -1,11 +1,11 @@
-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;
+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 +1,22 @@
-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;
+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/Icon/Icon.types.ts

@@ -1,6 +1,6 @@
-import { IconProps as PhosphorIconProps } from "@phosphor-icons/react";
-
-export interface IconProps extends PhosphorIconProps {
-  name: string;
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-}
+import { IconProps as PhosphorIconProps } from '@phosphor-icons/react';
+
+export interface IconProps extends PhosphorIconProps {
+  name: string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}

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

@@ -1 +1 @@
-export { default } from "./Icon";
+export { default } from './Icon';