@granto-umbrella/umbrella-components 2.3.21 → 2.3.23

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

@@ -11,31 +11,10 @@ export interface InputProps {
   icon?: React.ReactNode;
   label?: string;
   supportText?: string;
-  size?:
-    | "quarter"
-    | "half"
-    | "x1"
-    | "x2"
-    | "x3"
-    | "x4"
-    | "x5"
-    | "x6"
-    | "x7"
-    | "x8"
-    | "x9"
-    | "x10"
-    | "x11"
-    | "x12"
-    | "x13"
-    | "x14"
-    | "x15"
-    | "x16"
-    | "md"
-    | "lg"
-    | "sm"
-    | "full";
-  radius?: "md" | "lg" | "sm" | "full";
-  shadow?: "none" | "default" | "md" | "lg";
+  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,14 +1,15 @@
 // Label.styled.tsx
-import styled from "styled-components";
-import * as LabelPrimitive from "@radix-ui/react-label";
+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: 0.875rem; /* Equivalente a text-sm */
-  font-weight: 500; /* Equivalente a font-medium */
-  line-height: 1; /* Equivalente a leading-none */
+  font-size: ${typographyTokens.fontSizes.labelS};
+  font-weight: ${typographyTokens.fontWeights.medium};
 
-  /* Simula o comportamento de desabilitado */
-  &[data-disabled="true"] {
+  line-height: ${typographyTokens.lineHeights.labelS};
+  font-family: ${typographyTokens.fontFamily.base};
+  &[data-disabled='true'] {
     cursor: not-allowed;
     opacity: 0.7;
   }

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

@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import {
   primitiveSizes,
+  semanticBorders,
   semanticColors,
   semanticSizes,
   typographyTokens,
@@ -18,7 +19,7 @@ export const StyledRadio = styled.input`
   width: ${semanticSizes.global.padding.xl};
   height: ${semanticSizes.global.padding.xl};
   border-radius: 50%;
-  border: 2px solid ${semanticColors.neutral[400]};
+  border: ${semanticBorders.global.md} solid ${semanticColors.global.border.medium};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -30,7 +31,7 @@ export const StyledRadio = styled.input`
   }
 
   &:disabled {
-    border-color: ${semanticColors.neutral[300]};
+    border-color: ${semanticColors.global.border.disabled};
     cursor: not-allowed;
   }
 `;

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

@@ -15,6 +15,7 @@ const RadioButton: React.FC<RadioButtonProps> = ({
     <RadioContainer>
       <StyledRadio
         data-testid={testId}
+        id={testId}
         type="radio"
         name={name}
         value={value}

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

@@ -1,13 +1,14 @@
-import styled from "styled-components";
-import Select from "react-select";
+import styled from 'styled-components';
+import Select from 'react-select';
 import {
-  semanticColors,
-  semanticRadius,
   semanticSizes,
   semanticShadows,
   primitiveSizes,
   typographyTokens,
-} from "../../../styles/tokens";
+  semanticBorders,
+  semanticColors,
+  semanticRadius,
+} from '../../../styles/tokens/index';
 
 export const Container = styled.div`
   display: flex;
@@ -25,68 +26,125 @@ export const Label = styled.label`
   font-weight: ${typographyTokens.fontWeights.medium};
 `;
 
-export const SupportingText = styled.span`
+export const SupportingText = styled.span<{ $error?: boolean }>`
   font-size: ${typographyTokens.fontSizes.captionM};
-  color: ${semanticColors.global.text.subtitle.enabled};
+  color: ${({ $error }) =>
+    $error
+      ? semanticColors.global.text.feedback.strong.error
+      : semanticColors.global.text.subtitle.enabled};
 `;
 
 export const CustomSelect = styled(Select).attrs({
-  classNamePrefix: "react-select",
-})<{ $size?: keyof typeof semanticSizes.global.padding }>`
+  classNamePrefix: 'react-select',
+})<{
+  $size?: keyof typeof semanticSizes.global.padding;
+  $error?: boolean;
+}>`
   .react-select__control {
     background: ${semanticColors.base.background};
-    border: 1px solid ${semanticColors.neutral[300]};
+    border: ${semanticBorders.global.sm} solid
+      ${({ $error }) =>
+        $error
+          ? semanticColors.global.border.danger.enabled
+          : semanticColors.global.border.medium};
     border-radius: ${semanticRadius.global.radius.md};
-    box-shadow: ${semanticShadows.shadow};
+    box-shadow: ${semanticShadows.shadow.default};
     transition: border-color 0.2s, box-shadow 0.2s;
-    min-height: ${primitiveSizes.size.x4};
+    min-height: ${primitiveSizes.size.x12};
 
     &:hover {
-      border-color: ${semanticColors.branding.border.hover};
+      border-color: ${({ $error }) =>
+        $error
+          ? semanticColors.danger.border.hover
+          : semanticColors.branding.border.hover};
     }
 
     &:focus-within {
-      border-color: ${semanticColors.branding.border.enabled};
-      box-shadow: ${semanticShadows.shadow};
+      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 = "sm" }) => semanticSizes.global.padding[$size]};
+    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};
+    box-shadow: ${semanticShadows.shadow.lg};
+    border: ${semanticBorders.global.sm} solid
+      ${semanticColors.global.border.default};
+    z-index: 1000;
   }
 
   .react-select__option {
-    padding: ${({ $size = "sm" }) => semanticSizes.global.padding[$size]};
+    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.base.background};
+      color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
     }
 
     &:active {
       background: ${semanticColors.branding.surface.pressed};
-      color: ${semanticColors.base.background};
+      color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
     }
   }
 
   .react-select__option--is-selected {
     background: ${semanticColors.branding.surface.enabled};
-    color: ${semanticColors.base.background};
-    font-weight: bold;
+    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.base.background};
+    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/Select/Select.tsx

@@ -1,27 +1,12 @@
-import React from "react";
-import {
-  Container,
-  Label,
-  SupportingText,
-  CustomSelect,
-} from "./Select.styles";
-import { semanticSizes } from "../../../styles/tokens";
+"use client"
+
+import type React from "react"
+import { Container, Label, SupportingText, CustomSelect } from "./Select.styles"
+import type { SelectProps } from "./Select.types"
 
 interface Option {
-  label: string;
-  value: string;
-}
-interface SelectProps {
-  label: string;
-  supportingText?: string;
-  placeholder?: string;
-  borderColor?: string;
-  borderRadius?: string;
-  size?: keyof typeof semanticSizes.global.padding;
-  options: { label: string; value: string }[];
-  onChange?: (newValue: Option | null, actionMeta: { action: string }) => void;
-  value?: Option | null;
-  testId?: string;
+  label: string
+  value: string
 }
 
 const Select: React.FC<SelectProps> = ({
@@ -33,24 +18,26 @@ const Select: React.FC<SelectProps> = ({
   value,
   testId,
   size = "md",
+  disabled = false,
+  error = false,
 }) => {
   return (
-    <Container data-testid={testId}>
+    <Container data-testid={testId} id={testId}>
       {label && <Label>{label}</Label>}
       <CustomSelect
         $size={size}
+        $error={error}
         classNamePrefix="react-select"
         options={options}
         placeholder={placeholder || "Selecione"}
-        onChange={(newValue, actionMeta) =>
-          onChange && onChange(newValue as Option | null, actionMeta)
-        }
+        onChange={(newValue, actionMeta) => onChange && onChange(newValue as Option | null, actionMeta)}
         value={value}
         isSearchable
+        isDisabled={disabled}
       />
-      {supportingText && <SupportingText>{supportingText}</SupportingText>}
+      {supportingText && <SupportingText $error={error}>{supportingText}</SupportingText>}
     </Container>
-  );
-};
+  )
+}
 
-export default Select;
+export default Select

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

@@ -1,11 +1,19 @@
-import React from "react";
+interface Option {
+  label: string;
+  value: string;
+}
 
-export interface SelectProps
-  extends React.SelectHTMLAttributes<HTMLSelectElement> {
-  customSize?: "xs" | "sm" | "md" | "lg";
-  variant?: "primary" | "outline" | "danger" | "ghost";
-  radius?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
-  isLoading?: boolean;
-  leftIcon?: React.ReactNode;
-  rightIcon?: React.ReactNode;
+export interface SelectProps {
+  label: string;
+  supportingText?: string;
+  placeholder?: string;
+  borderColor?: string;
+  borderRadius?: string;
+  size?: 'sm' | 'md' | 'lg';
+  options: { label: string; value: string }[];
+  onChange?: (newValue: Option | null, actionMeta: { action: string }) => void;
+  value?: Option | null;
+  testId?: string;
+  disabled?: boolean;
+  error?: boolean;
 }

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

@@ -1,10 +1,10 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 import {
   semanticColors,
   semanticSizes,
   semanticRadius,
   typographyTokens,
-} from "../../../styles/tokens";
+} from '../../../styles/tokens';
 
 export const SwitchWrapper = styled.label`
   display: flex;
@@ -15,14 +15,14 @@ export const SwitchWrapper = styled.label`
   cursor: pointer;
 `;
 
-export const SwitchInput = styled.input.attrs({ type: "checkbox" })`
+export const SwitchInput = styled.input.attrs({ type: 'checkbox' })`
   appearance: none;
   width: ${semanticSizes.global.spacings.lg};
   height: ${semanticSizes.global.padding.xl};
   background: ${semanticColors.neutral[300]};
   border-radius: ${semanticRadius.global.radius.full};
   position: relative;
-  transition: background 0.3s ease-in-out;
+  transition: background 0.3s ease-out;
   cursor: pointer;
 
   &:checked {
@@ -30,21 +30,26 @@ export const SwitchInput = styled.input.attrs({ type: "checkbox" })`
   }
 
   &::after {
-    content: "";
-    width: ${semanticSizes.global.padding.md};
-    height: ${semanticSizes.global.padding.md};
+    content: '';
+    width: ${semanticSizes.global.padding.md}; // 12px circle
+    height: ${semanticSizes.global.padding.md}; // 12px circle
     background: ${semanticColors.base.background};
     border-radius: 50%;
     position: absolute;
     top: 50%;
     left: 4px;
     transform: translateY(-50%);
-    transition: all 0.3s ease-in-out;
+    transition: all 0.3s ease-out;
   }
 
   &:checked::after {
     left: calc(100% - ${semanticSizes.global.padding.md} - 4px);
   }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 `;
 
 export const SwitchLabel = styled.span`

package/src/components/atoms/Switch/Switch.tsx

@@ -16,7 +16,7 @@ export const Switch: React.FC<SwitchProps> = ({
   return (
     <SwitchWrapper>
       {label && <SwitchLabel>{label}</SwitchLabel>}
-      <SwitchInput data-testid={testId} {...props} />
+      <SwitchInput data-testid={testId} id={testId} {...props} />
       {text && <SwitchLabel>{text}</SwitchLabel>}
     </SwitchWrapper>
   );

package/src/components/atoms/Text/Text.tsx

@@ -12,6 +12,7 @@ const Text: React.FC<TextProps> = ({
   return (
     <StyledText
       data-testid={testId}
+      id={testId}
       $size={size}
       $weight={weight}
       $color={color}

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

@@ -15,23 +15,23 @@ export const TextareaWrapper = styled.div`
 
 export const Label = styled.label`
   font-size: ${typographyTokens.fontSizes.labelS};
-  color: ${semanticColors.neutral[500]};
+  color: ${semanticColors.global.text.subtitle.enabled};
   font-weight: 500;
 `;
 
 export const StyledTextarea = styled.textarea`
   display: flex;
-  padding: ${semanticSizes.global.padding.md};
+  padding: ${semanticSizes.global.padding.lg};
   font-size: ${typographyTokens.fontSizes.bodyM};
   color: ${semanticColors.base.text};
   background: ${semanticColors.base.background};
-  border: 1px solid ${semanticColors.neutral[300]};
+  border: 1px solid ${semanticColors.global.border.medium};
   border-radius: ${semanticRadius.global.radius.md};
   resize: vertical;
-  transition: border-color 0.2s, box-shadow 0.2s;
+  transition: border-color 0.2s; 
 
   &::placeholder {
-    color: ${semanticColors.neutral[400]};
+    color: ${semanticColors.global.text.subtitle.enabled};
   }
 
   &:focus {
@@ -41,13 +41,12 @@ export const StyledTextarea = styled.textarea`
   }
 
   &:disabled {
-    color: ${semanticColors.global.text.onSurface.enabled};
-    background-color: ${semanticColors.neutral[200]};
+    background-color: ${semanticColors.global.surface.disabled}; 
     cursor: not-allowed;
   }
 `;
 
 export const SupportingText = styled.span`
   font-size: ${typographyTokens.fontSizes.labelS};
-  color: ${semanticColors.neutral[400]};
+  color: ${semanticColors.global.text.subtitle.enabled}; 
 `;

package/src/components/atoms/Textarea/Textarea.tsx

@@ -22,7 +22,7 @@ const Textarea: React.FC<TextareaProps> = ({
           {info}
         </Label>
       )}
-      <StyledTextarea data-testid={testId} {...props} />
+      <StyledTextarea data-testid={testId} id={testId} {...props} />
       {supportingText && <SupportingText>{supportingText}</SupportingText>}
     </TextareaWrapper>
   );

package/src/components/molecules/ButtonGroup/ButtonGroup.tsx

@@ -1,16 +1,22 @@
-import React from "react";
-import { ButtonGroupProps } from "./ButtonGroup.types";
-import Button from "../../atoms/Button";
-import { ButtonGroupContainer } from "./ButtonGroup.styles";
+import React from 'react';
+import { ButtonGroupProps } from './ButtonGroup.types';
+import Button from '../../atoms/Button';
+import { ButtonGroupContainer } from './ButtonGroup.styles';
 
 const ButtonGroup: React.FC<ButtonGroupProps> = ({
   buttons,
-  orientation = "horizontal",
+  orientation = 'horizontal',
 }) => {
   return (
     <ButtonGroupContainer $orientation={orientation}>
       {buttons.map((button, index) => (
-        <Button key={index} variant={button.variant} onClick={button.onClick}>
+        <Button
+          key={index}
+          variant={button.variant}
+          onClick={button.onClick}
+          leftIcon={button.leftIcon}
+          rightIcon={button.rightIcon}
+        >
           {button.label}
         </Button>
       ))}

package/src/components/molecules/ButtonGroup/ButtonGroup.types.ts

@@ -1,8 +1,22 @@
+// ButtonGroup.types.ts
+
 export interface ButtonGroupProps {
   buttons: {
     label: string;
-    variant?: "primary" | "outline" | "danger" | "ghost" | "alert";
+    variant?:
+      | "primary"
+      | "outline"
+      | "danger"
+      | "ghost"
+      | "alert"
+      | "danger-no-fill"
+      | "accent-outline"
+      | "accent-fill"
+      | "secondary-outline"
+      | "danger-fill";
     onClick?: () => void;
+    leftIcon?: string;
+    rightIcon?: string;
   }[];
   orientation?: "horizontal" | "vertical";
-}
+}

package/src/index.ts

@@ -1,4 +1,4 @@
-/* eslint-disable react-refresh/only-export-components */
+
 // Import all components
 import {
   Dialog,
@@ -13,10 +13,12 @@ import Badge from "./components/atoms/Badge/Badge";
 import Breadcrumb from "./components/atoms/Breadcrumb/Breadcrumb";
 import Button from "./components/atoms/Button";
 import { Checkbox } from "./components/atoms/Checkbox/Checkbox";
+import CodeInput from "./components/atoms/CodeInput";
 import Icon from "./components/atoms/Icon";
 import Input from "./components/atoms/Input";
 import { Label } from "./components/atoms/Label/Label";
 import RadioButton from "./components/atoms/RadioButton/RadioButton";
+import Pill from "./components/atoms/Pill/Pill";
 import Select from "./components/atoms/Select";
 import Switch from "./components/atoms/Switch/Switch";
 import Text from "./components/atoms/Text";
@@ -61,6 +63,7 @@ export {
   ButtonGroup,
   Calendar,
   Checkbox,
+  CodeInput,
   DatePickerInput,
   Dialog,
   DialogContent,
@@ -80,6 +83,7 @@ export {
   Icon,
   Input,
   Label,
+  Pill,
   Popover,
   PopoverContent,
   PopoverTrigger,