@loadsmart/loadsmart-ui 5.1.0 → 5.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loadsmart/loadsmart-ui",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "description": "Miranda UI, a React UI library",
   "main": "dist",
   "files": [

package/src/components/Calendar/Pickers/DayPicker.tsx

@@ -15,6 +15,9 @@ export const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
 export const formatter = DateFormatHelper('MM/DD/YYYY')
 
 function getStatus(calendar: useCalendarReturn, date: CalendarDate) {
+  const isPastYearDay =
+    date.getYear() < calendar.months[0].year && date.getMonth() > calendar.months[0].month
+
   if (calendar.selected[0] == date.getTime()) {
     return 'selection-start'
   } else if (calendar.selected[1] == date.getTime()) {
@@ -26,8 +29,13 @@ function getStatus(calendar: useCalendarReturn, date: CalendarDate) {
     date.getTime() < calendar.selected[1]
   ) {
     return 'selection'
-  } else if (calendar.mode === 'single' && date.getMonth() !== calendar.months[0].month) {
+  } else if (
+    calendar.mode === 'single' &&
+    (isPastYearDay || date.getMonth() < calendar.months[0].month)
+  ) {
     return 'faded'
+  } else if (calendar.mode === 'single' && date.getMonth() > calendar.months[0].month) {
+    return 'next-month-day'
   } else if (date.getTime() == TODAY.getTime()) {
     return 'current-day'
   }

package/src/components/Calendar/Pickers/PickerButton.tsx

@@ -10,7 +10,14 @@ import hoverable from 'styles/hoverable'
 import typography from 'styles/typography'
 
 const PickerButton = styled(BaseButton)<{
-  $status: 'default' | 'current-day' | 'faded' | 'selection-start' | 'selection-end' | 'selection'
+  $status:
+    | 'default'
+    | 'current-day'
+    | 'faded'
+    | 'selection-start'
+    | 'selection-end'
+    | 'selection'
+    | 'next-month-day'
 }>`
   ${typography(
     conditional({
@@ -32,25 +39,26 @@ const PickerButton = styled(BaseButton)<{
       $status: ['selection-start', 'selection', 'selection-end'],
     }),
     'color-neutral-darker': whenProps({ $status: ['default', 'faded'] }),
+    'color-neutral-dark': whenProps({ $status: 'next-month-day' }),
     'color-accent': whenProps({ $status: 'current-day' }),
   })};
 
   background: ${conditional({
-    'color-transparent': whenProps({ $status: ['default', 'faded'] }),
+    'color-transparent': whenProps({ $status: ['default', 'faded', 'next-month-day'] }),
     'color-neutral-darker': whenProps({ $status: ['selection-start', 'selection-end'] }),
     'color-neutral': whenProps({ $status: 'selection' }),
     'color-neutral-lightest': whenProps({ $status: 'current-day' }),
   })};
 
   border-color: ${conditional({
-    'color-transparent': whenProps({ $status: ['default', 'faded'] }),
+    'color-transparent': whenProps({ $status: ['default', 'faded', 'next-month-day'] }),
     'color-neutral-darker': whenProps({ $status: ['selection-start', 'selection-end'] }),
     'color-neutral': whenProps({ $status: 'selection' }),
     'color-neutral-light': whenProps({ $status: 'current-day' }),
   })};
 
   ${conditional({
-    'opacity: 0.6;': whenProps({ $status: 'faded' }),
+    'opacity: 0.4;': whenProps({ $status: 'faded' }),
     'opacity: 1;': whenProps({ $status: (status) => status !== 'faded' }),
   })}
 
@@ -59,7 +67,7 @@ const PickerButton = styled(BaseButton)<{
   ${hoverable`
     border-color: ${token('color-neutral')};
     background-color: ${conditional({
-      'color-transparent': whenProps({ $status: ['default', 'faded'] }),
+      'color-transparent': whenProps({ $status: ['default', 'faded', 'next-month-day'] }),
       'color-neutral-dark': whenProps({
         $status: ['selection-start', 'selection', 'selection-end'],
       }),
@@ -99,7 +107,7 @@ const PickerButton = styled(BaseButton)<{
       'color-transparent': whenProps({ 'aria-checked': false }),
     })};
 
-    color: ${token('color-neutral-darkest')};
+    color: ${token('color-neutral-darker')};
   `}
 
   visibility: ${conditional({