@hero-design/rn 8.91.1 → 8.91.4

package/src/components/Calendar/__tests__/helper.spec.ts

@@ -73,8 +73,8 @@ describe('isDateInRange', () => {
 });
 
 describe('setStartOrEndDate', () => {
-  // Test case 1: Selecting same date as start or end date
-  it('should not change dates when selecting same date as start date', () => {
+  // Test case 1: Prevent selecting same date when both dates are set
+  it('should not change dates when selecting same date as start date and both dates are set', () => {
     const date = new Date('2024-03-15');
     const startDate = new Date('2024-03-15');
     const endDate = new Date('2024-03-20');
@@ -83,7 +83,19 @@ describe('setStartOrEndDate', () => {
     expect(result).toEqual({ startDate, endDate });
   });
 
-  // Test case 2: Initial selection (no start date)
+  // Test case 2: Allow selecting same date as start date when only start date is set
+  it('should allow selecting same date as start date when only start date is set', () => {
+    const date = new Date('2024-03-15');
+    const startDate = new Date('2024-03-15');
+
+    const result = setStartOrEndDate({ date, startDate });
+    expect(result).toEqual({
+      startDate: new Date('2024-03-15'),
+      endDate: new Date('2024-03-15'),
+    });
+  });
+
+  // Test case 3: Initial selection (no start date)
   it('should set start date when no dates are selected', () => {
     const date = new Date('2024-03-15');
 
@@ -94,7 +106,7 @@ describe('setStartOrEndDate', () => {
     });
   });
 
-  // Test case 3: Setting end date after start date
+  // Test case 4: Setting end date after start date
   it('should set end date when start date exists and selected date is after', () => {
     const date = new Date('2024-03-20');
     const startDate = new Date('2024-03-15');
@@ -106,7 +118,7 @@ describe('setStartOrEndDate', () => {
     });
   });
 
-  // Test case 4: Setting end date before start date (should reorder)
+  // Test case 5: Setting end date before start date (should reorder)
   it('should reorder dates when end date is selected before start date', () => {
     const date = new Date('2024-03-10');
     const startDate = new Date('2024-03-15');
@@ -118,7 +130,7 @@ describe('setStartOrEndDate', () => {
     });
   });
 
-  // Test case 5: Clicking within existing range
+  // Test case 6: Clicking within existing range
   it('should start new selection when clicking within existing range', () => {
     const date = new Date('2024-03-17');
     const startDate = new Date('2024-03-15');
@@ -131,7 +143,7 @@ describe('setStartOrEndDate', () => {
     });
   });
 
-  // Test case 6: Extending range before start date
+  // Test case 7: Extending range before start date
   it('should extend range when clicking before start date', () => {
     const date = new Date('2024-03-10');
     const startDate = new Date('2024-03-15');
@@ -144,7 +156,7 @@ describe('setStartOrEndDate', () => {
     });
   });
 
-  // Test case 7: Extending range after end date
+  // Test case 8: Extending range after end date
   it('should extend range when clicking after end date', () => {
     const date = new Date('2024-03-25');
     const startDate = new Date('2024-03-15');

package/src/components/Calendar/helpers.ts

@@ -54,8 +54,12 @@ export const setStartOrEndDate = ({
   startDate?: Date;
   endDate?: Date;
 }) => {
-  // Prevent selecting same date
-  if (isEqDate(date, startDate) || isEqDate(date, endDate)) {
+  // Prevent selecting same date when both dates are set
+  if (
+    startDate &&
+    endDate &&
+    (isEqDate(date, startDate) || isEqDate(date, endDate))
+  ) {
     return {
       startDate,
       endDate,

package/src/components/Checkbox/StyledCheckbox.tsx

@@ -3,7 +3,7 @@ import { TouchableOpacity, View } from 'react-native';
 import HeroIcon from '../Icon';
 import Typography from '../Typography';
 
-type CheckboxThemeState = 'default' | 'disabled' | 'readonly';
+type CheckboxThemeState = 'default' | 'checked' | 'disabled' | 'readonly';
 
 export const StyledWrapper = styled(TouchableOpacity)<{
   themeState: CheckboxThemeState;
@@ -32,7 +32,7 @@ export const StyledCheckbox = styled(View)<{
   flex: 1,
   borderRadius: theme.__hd__.checkbox.radii.icon,
   borderWidth: theme.__hd__.checkbox.borderWidths.icon,
-  borderColor: theme.__hd__.checkbox.colors.borders[themeState],
+  borderColor: theme.__hd__.checkbox.colors.checkboxBorder[themeState],
 }));
 
 export const StyledCheckMark = styled(HeroIcon)<{
@@ -40,5 +40,5 @@ export const StyledCheckMark = styled(HeroIcon)<{
 }>(({ theme, themeState }) => ({
   position: 'absolute',
   top: theme.__hd__.checkbox.space.iconTop,
-  color: theme.__hd__.checkbox.colors.borders[themeState],
+  color: theme.__hd__.checkbox.colors.checkboxBorder[themeState],
 }));

package/src/components/Checkbox/__tests__/__snapshots__/StyledCheckbox.spec.tsx.snap

@@ -57,7 +57,7 @@ exports[`StyledCheckbox renders correctly when disabled is false and readonly is
     style={
       [
         {
-          "borderColor": "#808f91",
+          "borderColor": "#4d6265",
           "borderRadius": 4,
           "borderWidth": 2,
           "flex": 1,

package/src/components/Checkbox/__tests__/__snapshots__/index.spec.tsx.snap

@@ -167,7 +167,7 @@ exports[`Checkbox renders correctly when checked is true and there is no descrip
             },
             [
               {
-                "color": "#001f23",
+                "color": "#401960",
                 "position": "absolute",
                 "top": 0,
               },
@@ -183,7 +183,7 @@ exports[`Checkbox renders correctly when checked is true and there is no descrip
         style={
           [
             {
-              "borderColor": "#001f23",
+              "borderColor": "#401960",
               "borderRadius": 4,
               "borderWidth": 2,
               "flex": 1,
@@ -191,7 +191,7 @@ exports[`Checkbox renders correctly when checked is true and there is no descrip
             undefined,
           ]
         }
-        themeState="default"
+        themeState="checked"
       />
     </View>
   </View>
@@ -431,7 +431,7 @@ exports[`Checkbox renders correctly when disabled is false and readonly is true
         style={
           [
             {
-              "borderColor": "#808f91",
+              "borderColor": "#4d6265",
               "borderRadius": 4,
               "borderWidth": 2,
               "flex": 1,

package/src/components/Checkbox/__tests__/index.spec.tsx

@@ -6,15 +6,19 @@ import Checkbox, { getThemeState } from '..';
 
 describe('getThemeState', () => {
   it.each`
-    disabled | readonly | expected
-    ${false} | ${false} | ${'default'}
-    ${false} | ${true}  | ${'readonly'}
-    ${true}  | ${false} | ${'disabled'}
-    ${true}  | ${true}  | ${'disabled'}
+    disabled | readonly | checked  | expected
+    ${false} | ${false} | ${false} | ${'default'}
+    ${false} | ${false} | ${true}  | ${'checked'}
+    ${false} | ${true}  | ${false} | ${'readonly'}
+    ${false} | ${true}  | ${true}  | ${'readonly'}
+    ${true}  | ${false} | ${false} | ${'disabled'}
+    ${true}  | ${false} | ${true}  | ${'disabled'}
+    ${true}  | ${true}  | ${false} | ${'disabled'}
+    ${true}  | ${true}  | ${true}  | ${'disabled'}
   `(
     `should return correctly if disabled is $disabled and readonly is $readonly`,
-    ({ disabled, readonly, expected }) => {
-      expect(getThemeState({ disabled, readonly })).toBe(expected);
+    ({ disabled, readonly, checked, expected }) => {
+      expect(getThemeState({ disabled, readonly, checked })).toBe(expected);
     }
   );
 });

package/src/components/Checkbox/index.tsx

@@ -48,9 +48,14 @@ export interface CheckboxProps {
 type getStateType = {
   disabled: boolean;
   readonly: boolean;
+  checked?: boolean;
 };
 
-export const getThemeState = ({ disabled, readonly }: getStateType) => {
+export const getThemeState = ({
+  disabled,
+  readonly,
+  checked,
+}: getStateType) => {
   if (disabled) {
     return 'disabled';
   }
@@ -59,6 +64,10 @@ export const getThemeState = ({ disabled, readonly }: getStateType) => {
     return 'readonly';
   }
 
+  if (checked) {
+    return 'checked';
+  }
+
   return 'default';
 };
 
@@ -77,7 +86,7 @@ const Checkbox = ({
     withBorder === true
   );
 
-  const themeState = getThemeState({ disabled, readonly });
+  const themeState = getThemeState({ disabled, readonly, checked });
 
   return (
     <StyledWrapper

package/src/components/Chip/__tests__/__snapshots__/index.spec.tsx.snap

@@ -369,7 +369,7 @@ exports[`Chip renders correctly with custom icon 1`] = `
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -505,7 +505,7 @@ exports[`Chip renders correctly with custom icon 2`] = `
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -867,7 +867,7 @@ exports[`Chip renders correctly with variant compact and selected false 1`] = `
         "opacity": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -971,7 +971,7 @@ exports[`Chip renders correctly with variant compact and selected true 1`] = `
         "opacity": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -1301,7 +1301,7 @@ exports[`Chip renders correctly with variant filled and selected false 1`] = `
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -1405,7 +1405,7 @@ exports[`Chip renders correctly with variant filled and selected true 1`] = `
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -1509,7 +1509,7 @@ exports[`Chip renders correctly with variant filter and selected false 1`] = `
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,
@@ -1613,7 +1613,7 @@ exports[`Chip renders correctly with variant filter and selected true 1`] = `
         "opacity": 1,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
-        "shadowColor": "#001f23",
+        "shadowColor": "#121214",
         "shadowOffset": {
           "height": 2,
           "width": 0,

package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap

@@ -162,7 +162,26 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View
@@ -191,6 +210,7 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
               onChangeText={[Function]}
               onFocus={[Function]}
               placeholder=" "
+              placeholderTextColor="#4d6265"
               style={
                 [
                   {
@@ -444,7 +464,26 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View
@@ -473,6 +512,7 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
               onChangeText={[Function]}
               onFocus={[Function]}
               placeholder=" "
+              placeholderTextColor="#4d6265"
               style={
                 [
                   {
@@ -726,7 +766,26 @@ exports[`DatePicker renders variant Calendar 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View
@@ -755,6 +814,7 @@ exports[`DatePicker renders variant Calendar 1`] = `
               onChangeText={[Function]}
               onFocus={[Function]}
               placeholder=" "
+              placeholderTextColor="#4d6265"
               style={
                 [
                   {

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap

@@ -162,7 +162,26 @@ exports[`DatePickerAndroid renders correctly 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View
@@ -191,6 +210,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
               onChangeText={[Function]}
               onFocus={[Function]}
               placeholder=" "
+              placeholderTextColor="#4d6265"
               style={
                 [
                   {

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap

@@ -162,7 +162,26 @@ exports[`DatePickerCalendar renders correctly 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View
@@ -191,6 +210,7 @@ exports[`DatePickerCalendar renders correctly 1`] = `
               onChangeText={[Function]}
               onFocus={[Function]}
               placeholder=" "
+              placeholderTextColor="#4d6265"
               style={
                 [
                   {

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -162,7 +162,26 @@ exports[`DatePickerIOS renders correctly 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View
@@ -191,6 +210,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
               onChangeText={[Function]}
               onFocus={[Function]}
               placeholder=" "
+              placeholderTextColor="#4d6265"
               style={
                 [
                   {
@@ -393,15 +413,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                       "backgroundColor": "#ffffff",
                       "borderTopLeftRadius": 16,
                       "borderTopRightRadius": 16,
-                      "elevation": 10,
                       "maxHeight": "94%",
-                      "shadowColor": "#001f23",
-                      "shadowOffset": {
-                        "height": 3,
-                        "width": 0,
-                      },
-                      "shadowOpacity": 0.4,
-                      "shadowRadius": 16,
                       "transform": [
                         {
                           "scaleY": 1,
@@ -831,7 +843,26 @@ exports[`DatePickerIOS renders correctly with custom locale 1`] = `
               themeTypeface="neutral"
               themeVariant="regular"
             >
-              Start date
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeIntent="body"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Start date
+              </Text>
             </Text>
           </View>
           <View
@@ -860,6 +891,7 @@ exports[`DatePickerIOS renders correctly with custom locale 1`] = `
               onChangeText={[Function]}
               onFocus={[Function]}
               placeholder=" "
+              placeholderTextColor="#4d6265"
               style={
                 [
                   {
@@ -1062,15 +1094,7 @@ exports[`DatePickerIOS renders correctly with custom locale 1`] = `
                       "backgroundColor": "#ffffff",
                       "borderTopLeftRadius": 16,
                       "borderTopRightRadius": 16,
-                      "elevation": 10,
                       "maxHeight": "94%",
-                      "shadowColor": "#001f23",
-                      "shadowOffset": {
-                        "height": 3,
-                        "width": 0,
-                      },
-                      "shadowOpacity": 0.4,
-                      "shadowRadius": 16,
                       "transform": [
                         {
                           "scaleY": 1,

package/src/components/FAB/ActionGroup/StyledActionGroup.tsx

@@ -45,7 +45,7 @@ const StyledBackdrop = styled(AnimatedPressable)(({ theme }) => ({
   right: 0,
   top: 0,
   bottom: 0,
-  opacity: 0.8,
+  opacity: 0.4,
   backgroundColor: theme.__hd__.fab.colors.backdropBackground,
 }));
 

package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap

@@ -65,7 +65,7 @@ exports[`ActionGroup has active false 1`] = `
             "backgroundColor": "#000000",
             "borderRadius": 999,
             "bottom": undefined,
-            "elevation": 3,
+            "elevation": 6,
             "flexDirection": "row",
             "height": 64,
             "justifyContent": "center",
@@ -79,7 +79,7 @@ exports[`ActionGroup has active false 1`] = `
               "width": 0,
             },
             "shadowOpacity": 0.12,
-            "shadowRadius": 4,
+            "shadowRadius": 2,
             "transform": [
               {
                 "translateY": 0,
@@ -258,7 +258,7 @@ exports[`ActionGroup has active true 1`] = `
             "backgroundColor": "#000000",
             "borderRadius": 999,
             "bottom": undefined,
-            "elevation": 3,
+            "elevation": 6,
             "flexDirection": "row",
             "height": 64,
             "justifyContent": "center",
@@ -272,7 +272,7 @@ exports[`ActionGroup has active true 1`] = `
               "width": 0,
             },
             "shadowOpacity": 0.12,
-            "shadowRadius": 4,
+            "shadowRadius": 2,
             "transform": [
               {
                 "translateY": 0,
@@ -409,10 +409,10 @@ exports[`ActionGroup has active true 1`] = `
           onStartShouldSetResponder={[Function]}
           style={
             {
-              "backgroundColor": "#f6f6f7",
+              "backgroundColor": "#000000",
               "bottom": 0,
               "left": 0,
-              "opacity": 0.8,
+              "opacity": 0.4,
               "position": "absolute",
               "right": 0,
               "top": 0,
@@ -1079,7 +1079,7 @@ exports[`ActionGroup has active true 1`] = `
               "backgroundColor": "#000000",
               "borderRadius": 999,
               "bottom": undefined,
-              "elevation": 3,
+              "elevation": 6,
               "flexDirection": "row",
               "height": 64,
               "justifyContent": "center",
@@ -1094,7 +1094,7 @@ exports[`ActionGroup has active true 1`] = `
                 "width": 0,
               },
               "shadowOpacity": 0.12,
-              "shadowRadius": 4,
+              "shadowRadius": 2,
               "transform": [
                 {
                   "translateY": 0,