@granto-umbrella/umbrella-components 3.0.57 → 3.0.59

package/package.json

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

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

@@ -4,7 +4,6 @@ import {
   semanticBorders,
   semanticColors,
   semanticRadius,
-  semanticShadows,
   typographyTokens,
 } from '../../../styles/tokens';
 import CreatableSelect from 'react-select/creatable';
@@ -34,17 +33,52 @@ export const CustomSelect = styled(CreatableSelect)<{
   $error?: boolean;
   $size?: 'sm' | 'md' | 'lg';
 }>`
-  .react-select__control {
-    min-height: ${primitiveSizes.size.x12};
-    border-radius: ${semanticRadius.global.radius.md};
-    border: ${semanticBorders.global.sm} solid
-      ${({ $error }) =>
-        $error
-          ? semanticColors.global.border.danger.enabled
-          : semanticColors.global.border.medium};
-
-    &:focus-within {
-      box-shadow: ${semanticShadows.shadow.md};
-    }
-  }
+  ${({ $size = 'md' }) => {
+    const sizeMap = {
+      sm: {
+        minHeight: primitiveSizes.size.x10,
+        paddingY: primitiveSizes.size.x1,
+        paddingX: primitiveSizes.size.x2,
+        fontSize: typographyTokens.fontSizes.bodyS,
+      },
+      md: {
+        minHeight: primitiveSizes.size.x12,
+        paddingY: primitiveSizes.size.x2,
+        paddingX: primitiveSizes.size.x3,
+        fontSize: typographyTokens.fontSizes.bodyM,
+      },
+      lg: {
+        minHeight: primitiveSizes.size.x14,
+        paddingY: primitiveSizes.size.x3,
+        paddingX: primitiveSizes.size.x4,
+        fontSize: typographyTokens.fontSizes.bodyL,
+      },
+    };
+
+    const size = sizeMap[$size];
+
+    return `
+      .react-select__control {
+        min-height: ${size.minHeight};
+        border-radius: ${semanticRadius.global.radius.md};
+        border: ${semanticBorders.global.sm} solid
+          ${semanticColors.global.border.medium};
+      }
+
+      .react-select__value-container {
+        padding: ${size.paddingY} ${size.paddingX};
+      }
+
+      .react-select__single-value,
+      .react-select__placeholder,
+      .react-select__input-container {
+        font-size: ${size.fontSize};
+      }
+
+      .react-select__input {
+        margin: 0;
+        padding: 0;
+      }
+    `;
+  }}
 `;

package/src/components/atoms/EditableDurationSelect/EditableDurationSelect.tsx

@@ -64,6 +64,7 @@ export default function EditableDurationSelect({
   size = 'md',
   testId,
   baseLimit = BASE_LIMIT,
+  placeholder = 'Selecione ou insira a duração',
 }: EditableDurationSelectProps) {
   const [inputValue, setInputValue] = useState('');
 
@@ -114,13 +115,14 @@ export default function EditableDurationSelect({
       {label && <Label>{label}</Label>}
 
       <CustomSelect
+        classNamePrefix="react-select"
         isSearchable
         isDisabled={disabled}
         $size={size}
         $error={error}
         options={mergedOptions}
         value={value}
-        placeholder="Digite ou selecione"
+        placeholder={placeholder}
         onInputChange={handleInputChange}
         onChange={(opt) => handleChange(opt as DurationOption | null)}
         formatCreateLabel={() => null}

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

@@ -15,4 +15,5 @@ export interface EditableDurationSelectProps {
   size?: 'sm' | 'md' | 'lg';
   testId?: string;
   baseLimit?: number;
+  placeholder?: string;
 }