@granto-umbrella/umbrella-components 3.0.57 → 3.0.58

package/package.json

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

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

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import {
   primitiveSizes,
   semanticBorders,
@@ -9,6 +9,37 @@ import {
 } from '../../../styles/tokens';
 import CreatableSelect from 'react-select/creatable';
 
+type SelectSize = 'sm' | 'md' | 'lg';
+
+const sizeStyles: Record<
+  SelectSize,
+  {
+    minHeight: string;
+    paddingY: string;
+    paddingX: string;
+    fontSize: string;
+  }
+> = {
+  sm: {
+    minHeight: primitiveSizes.size.x10, // ex: 40px
+    paddingY: primitiveSizes.size.x1, // ex: 4px
+    paddingX: primitiveSizes.size.x2, // ex: 8px
+    fontSize: typographyTokens.fontSizes.bodyS,
+  },
+  md: {
+    minHeight: primitiveSizes.size.x12, // ex: 48px
+    paddingY: primitiveSizes.size.x2, // ex: 8px
+    paddingX: primitiveSizes.size.x3, // ex: 12px
+    fontSize: typographyTokens.fontSizes.bodyM,
+  },
+  lg: {
+    minHeight: primitiveSizes.size.x14, // ex: 56px
+    paddingY: primitiveSizes.size.x3, // ex: 12px
+    paddingX: primitiveSizes.size.x4, // ex: 16px
+    fontSize: typographyTokens.fontSizes.bodyL,
+  },
+};
+
 export const Container = styled.div`
   display: flex;
   flex-direction: column;
@@ -32,19 +63,39 @@ export const SupportingText = styled.span<{ $error?: boolean }>`
 
 export const CustomSelect = styled(CreatableSelect)<{
   $error?: boolean;
-  $size?: 'sm' | 'md' | 'lg';
+  $size?: SelectSize;
 }>`
-  .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', $error }) => {
+    const size = sizeStyles[$size];
+
+    return css`
+      .react-select__control {
+        min-height: ${size.minHeight};
+        border-radius: ${semanticRadius.global.radius.md};
+        border: ${semanticBorders.global.sm} solid
+          ${$error
+            ? semanticColors.global.border.danger.enabled
+            : semanticColors.global.border.medium};
+
+        &:focus-within {
+          box-shadow: ${semanticShadows.shadow.md};
+        }
+      }
+
+      .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('');
 
@@ -120,7 +121,7 @@ export default function EditableDurationSelect({
         $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;
 }