@granto-umbrella/umbrella-components 2.0.7 → 2.1.0

package/package.json

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

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

@@ -40,6 +40,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       style,
       register,
       testId,
+      className,
+      onBlur,
     },
     ref
   ) => {
@@ -62,6 +64,8 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             placeholder={placeholder}
             value={value}
             onChange={onChange}
+            onBlur={onBlur}
+            className={className}
             disabled={disabled}
           />
         </InputWrapper>

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

@@ -4,6 +4,8 @@ export interface InputProps {
   placeholder?: string;
   value?: string;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: () => void;
+  className?: string;
   error?: boolean;
   disabled?: boolean;
   icon?: React.ReactNode;

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

@@ -31,7 +31,7 @@ export const SupportingText = styled.span`
 
 export const CustomSelect = styled(Select).attrs({
   classNamePrefix: "react-select",
-})<{ $size?: "sm" | "md" | "lg" }>`
+})<{ $size?: keyof typeof semanticSizes.global.padding }>`
   .react-select__control {
     background: ${semanticColors.base.background};
     border: 1px solid ${semanticColors.neutral[300]};
@@ -51,17 +51,7 @@ export const CustomSelect = styled(Select).attrs({
   }
 
   .react-select__value-container {
-    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;
-      }
-    }};
+    padding: ${({ $size = "sm" }) => semanticSizes.global.padding[$size]};
     font-size: ${typographyTokens.fontSizes.labelM};
     color: ${semanticColors.base.text};
   }
@@ -73,17 +63,7 @@ export const CustomSelect = styled(Select).attrs({
   }
 
   .react-select__option {
-    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;
-      }
-    }};
+    padding: ${({ $size = "sm" }) => semanticSizes.global.padding[$size]};
     font-size: ${typographyTokens.fontSizes.labelM};
     cursor: pointer;
     transition: background 0.2s, color 0.2s;
@@ -108,4 +88,8 @@ export const CustomSelect = styled(Select).attrs({
   .react-select__indicator-separator {
     background-color: ${semanticColors.base.background};
   }
+
+  .react-select__input-container {
+    padding: 0px;
+  }
 `;

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

@@ -5,6 +5,7 @@ import {
   SupportingText,
   CustomSelect,
 } from "./Select.styles";
+import { semanticSizes } from "../../../styles/tokens";
 
 interface Option {
   label: string;
@@ -16,7 +17,7 @@ interface SelectProps {
   placeholder?: string;
   borderColor?: string;
   borderRadius?: string;
-  size?: "sm" | "md" | "lg";
+  size?: keyof typeof semanticSizes.global.padding;
   options: { label: string; value: string }[];
   onChange?: (newValue: Option | null, actionMeta: { action: string }) => void;
   value?: Option | null;

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

@@ -41,6 +41,7 @@ export const StyledTextarea = styled.textarea`
   }
 
   &:disabled {
+    color: ${semanticColors.neutral[300]};
     background-color: ${semanticColors.neutral[100]};
     cursor: not-allowed;
   }