@granto-umbrella/umbrella-components 3.0.59 → 3.0.61

package/package.json

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

package/src/components/atoms/DatePickerInput/DatePicker.styles.ts

@@ -61,7 +61,7 @@ export const StyledDatePicker = styled(
   ReactDatePicker as unknown as React.ComponentType<DatePickerProps>
 )`
   width: 100%;
-  padding: 0.65rem ${semanticSizes.global.padding.md};
+  padding: 0.75rem ${semanticSizes.global.padding.md};
   border: 1px solid ${semanticColors.neutral[300]};
   border-radius: ${semanticRadius.global.radius.md};
   font-size: ${typographyTokens.fontSizes.bodyS};

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

@@ -4,6 +4,8 @@ import {
   semanticBorders,
   semanticColors,
   semanticRadius,
+  semanticShadows,
+  semanticSizes,
   typographyTokens,
 } from '../../../styles/tokens';
 import CreatableSelect from 'react-select/creatable';
@@ -29,56 +31,120 @@ export const SupportingText = styled.span<{ $error?: boolean }>`
       : semanticColors.global.text.subtitle.enabled};
 `;
 
-export const CustomSelect = styled(CreatableSelect)<{
+export const CustomSelect = styled(CreatableSelect).attrs({
+  classNamePrefix: 'react-select',
+})<{
+  $size?: keyof typeof semanticSizes.global.padding;
   $error?: boolean;
-  $size?: 'sm' | 'md' | 'lg';
 }>`
-  ${({ $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;
-      }
-    `;
-  }}
+  .react-select__control {
+    background: ${semanticColors.base.background};
+    border: ${semanticBorders.global.sm} solid
+      ${({ $error }) =>
+        $error
+          ? semanticColors.global.border.danger.enabled
+          : semanticColors.global.border.medium};
+    border-radius: ${semanticRadius.global.radius.md};
+    transition:
+      border-color 0.2s,
+      box-shadow 0.2s;
+    min-height: ${primitiveSizes.size.x12};
+
+    &:hover {
+      border-color: ${({ $error }) =>
+        $error
+          ? semanticColors.danger.border.hover
+          : semanticColors.branding.border.hover};
+    }
+
+    &:focus-within {
+      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 = '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.lg};
+    border: ${semanticBorders.global.sm} solid
+      ${semanticColors.global.border.default};
+    z-index: 1000;
+  }
+
+  .react-select__option {
+    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.branding.text.onSurfaceAccent.enabled};
+    }
+
+    &:active {
+      background: ${semanticColors.branding.surface.pressed};
+      color: ${semanticColors.branding.text.onSurfaceAccent.enabled};
+    }
+  }
+
+  .react-select__option--is-selected {
+    background: ${semanticColors.branding.surface.enabled};
+    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.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};
+    }
+  }
 `;