@granto-umbrella/umbrella-components 2.0.5 → 2.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@granto-umbrella/umbrella-components",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "description": "Umbrella Components for React",
   "type": "module",
   "main": "src/index.js",

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

@@ -51,10 +51,10 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           $disabled={disabled}
           $radius={radius}
           $shadow={shadow}
-          data-testid={testId}
         >
           {icon && <Icon>{icon}</Icon>}
           <StyledInput
+            data-testid={testId}
             {...(register || {})}
             ref={mergeRefs(ref, register ? register.ref : null)}
             style={style}

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

@@ -31,14 +31,14 @@ export const SupportingText = styled.span`
 
 export const CustomSelect = styled(Select).attrs({
   classNamePrefix: "react-select",
-})`
+})<{ $size?: "sm" | "md" | "lg" }>`
   .react-select__control {
     background: ${semanticColors.base.background};
     border: 1px solid ${semanticColors.neutral[300]};
     border-radius: ${semanticRadius.global.radius.md};
     box-shadow: ${semanticShadows.shadow};
     transition: border-color 0.2s, box-shadow 0.2s;
-    min-height: ${primitiveSizes.size.x8};
+    min-height: ${primitiveSizes.size.x4};
 
     &:hover {
       border-color: ${semanticColors.branding.border.hover};
@@ -51,14 +51,21 @@ export const CustomSelect = styled(Select).attrs({
   }
 
   .react-select__value-container {
-    padding: ${semanticSizes.global.padding.md};
+    padding: ${({ $size }) => {
+      switch ($size) {
+        case "md":
+          return semanticSizes.global.padding.md;
+        case "lg":
+          return semanticSizes.global.padding.lg;
+        case "sm":
+        default:
+          return semanticSizes.global.padding.sm;
+      }
+    }};
     font-size: ${typographyTokens.fontSizes.labelM};
     color: ${semanticColors.base.text};
   }
 
-  .react-select__single-value {
-  }
-
   .react-select__menu {
     background: ${semanticColors.base.background};
     border-radius: ${semanticRadius.global.radius.md};
@@ -66,7 +73,17 @@ export const CustomSelect = styled(Select).attrs({
   }
 
   .react-select__option {
-    padding: ${semanticSizes.global.padding.sm};
+    padding: ${({ $size }) => {
+      switch ($size) {
+        case "md":
+          return semanticSizes.global.padding.md;
+        case "lg":
+          return semanticSizes.global.padding.lg;
+        case "sm":
+        default:
+          return semanticSizes.global.padding.sm;
+      }
+    }};
     font-size: ${typographyTokens.fontSizes.labelM};
     cursor: pointer;
     transition: background 0.2s, color 0.2s;
@@ -87,4 +104,8 @@ export const CustomSelect = styled(Select).attrs({
     color: ${semanticColors.base.background};
     font-weight: bold;
   }
+
+  .react-select__indicator-separator {
+    background-color: ${semanticColors.base.background};
+  }
 `;

package/src/components/atoms/Select/Select.tsx

@@ -31,11 +31,13 @@ const Select: React.FC<SelectProps> = ({
   onChange,
   value,
   testId,
+  size = "md",
 }) => {
   return (
-    <Container>
+    <Container data-testid={testId}>
       {label && <Label>{label}</Label>}
       <CustomSelect
+        $size={size}
         classNamePrefix="react-select"
         options={options}
         placeholder={placeholder || "Selecione"}
@@ -44,7 +46,6 @@ const Select: React.FC<SelectProps> = ({
         }
         value={value}
         isSearchable
-        data-testid={testId}
       />
       {supportingText && <SupportingText>{supportingText}</SupportingText>}
     </Container>