@granto-umbrella/umbrella-components 3.0.34 → 3.0.37

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

@@ -1,38 +1,38 @@
-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
-}
+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 +1,46 @@
-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]}
-`;
+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,36 +1,35 @@
-// 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;
+// 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,18 +1,14 @@
-
-
-
-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;
-}
+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,43 +1,44 @@
-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};
-`;
+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 +1,31 @@
-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;
+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/ResendLink/ResendLink.styles.tsx

@@ -1,20 +1,19 @@
-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")};
-`;
+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 +1,21 @@
-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>
-  );
-};
+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,9 +1,8 @@
-import React from "react";
-
-export interface ResendLinkProps {
-  children: React.ReactNode;
-  onClick: () => void;
-  disabled?: boolean;
-  testId?: string;
-}
-
+import React from 'react';
+
+export interface ResendLinkProps {
+  children: React.ReactNode;
+  onClick: () => void;
+  disabled?: boolean;
+  testId?: string;
+}

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

@@ -1,2 +1 @@
-export { ResendLink } from "./ResendLink";
-export type { ResendLinkProps } from "./ResendLink.types";
+export { ResendLink } from './ResendLink';