@7shifts/sous-chef 4.6.0-beta.0 → 4.6.0

package/dist/controls/DateFilter/DateFilter.d.ts

@@ -1,11 +1,16 @@
 import React from 'react';
 import { WeekStart } from '../../utils/date';
+import { HighlightGroup } from '../../utils/highlight';
 import { DateFilterMode } from './types';
 type Props = {
     mode?: DateFilterMode;
     weekStart?: WeekStart;
     value: Date;
     onChange: (selected: Date) => void;
+    /** Highlight one or more groups of dates below the calendar, each with its
+     *  own shape, colour theme, and legend label. Applies to the day and week
+     *  calendars (not the month picker). */
+    highlightedDays?: HighlightGroup[] | HighlightGroup;
     testId?: string;
 };
 declare const DateFilter: React.FC<Props>;

package/dist/forms/DateField/DateField.d.ts

@@ -1,11 +1,16 @@
 import React from 'react';
 import { WeekStart } from '../../utils/date';
+import { HighlightGroup } from '../../utils/highlight';
 type Props = {
     name: string;
     /** If not provided it will generate a random id so the label links properly with the text input */
     id?: string;
     value?: Date;
     disabledDays?: (day: Date) => boolean;
+    /** Highlight one or more groups of dates below the calendar, each with its
+     *  own shape, colour theme, and legend label. Example use cases: pay days,
+     *  holidays, blackout periods. */
+    highlightedDays?: HighlightGroup[] | HighlightGroup;
     /** Reference this for valid formats: https://date-fns.org/v2.18.0/docs/format */
     format?: string;
     initialMonth?: Date;

package/dist/forms/DateRangeField/DateRangeCalendar/DateRangeCalendar.d.ts

@@ -1,5 +1,6 @@
 import React, { MutableRefObject } from 'react';
 import { BlockedDays, WeekStart } from '../../../utils/date';
+import { HighlightGroup } from '../../../utils/highlight';
 type Props = {
     weekStart?: WeekStart;
     start?: Date;
@@ -12,6 +13,9 @@ type Props = {
      * [doc](https://react-day-picker-v7.netlify.app/api/DayPicker#disabledDays) to see what
      * values you can use. */
     disabledDays?: BlockedDays;
+    /** Highlight one or more groups of dates, each with its own shape, colour
+     *  theme, and legend label, e.g. pay days or holidays. */
+    highlightedDays?: HighlightGroup[] | HighlightGroup;
     anchorRef: MutableRefObject<HTMLElement | null>;
     testId?: string;
     onMonthChange?: (month: Date) => void;

package/dist/forms/DateRangeField/DateRangeField.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { WeekStart, DateRange, BlockedDays, DisabledDays } from '../../utils/date';
+import { HighlightGroup } from '../../utils/highlight';
 type Props = {
     name: string;
     /** If not provided it will generate a random id so the label links properly with the text input */
@@ -7,6 +8,11 @@ type Props = {
     value?: DateRange;
     /** It disable some dates so the user can't click on them. Refer to this [doc](https://react-day-picker.js.org/api/types/matcher) to see what values you can use. */
     disabledDays?: DisabledDays | BlockedDays;
+    /** Highlight one or more groups of dates below the calendar, each with its
+     *  own shape, colour theme, and legend label. Each group's `dates` accepts
+     *  the same Matcher types as `disabledDays` (plus the pattern helpers).
+     *  Example use cases: pay days, holidays, blackout periods. */
+    highlightedDays?: HighlightGroup[] | HighlightGroup;
     /** Reference this for valid formats: https://date-fns.org/v2.18.0/docs/format */
     format?: string;
     onChange?: (e: DateRange) => void;

package/dist/forms/DateRangeField/FromDate/FromDate.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 import { WeekStart, BlockedDays } from '../../../utils/date';
+import { HighlightGroup } from '../../../utils/highlight';
 type Props = {
     name: string;
     id: string;
     format: string;
     disabledDays?: BlockedDays;
+    highlightedDays?: HighlightGroup[] | HighlightGroup;
     start?: Date;
     end?: Date;
     placeholder: string;
@@ -16,5 +18,5 @@ type Props = {
     onDayClick: () => void;
     testId?: string;
 };
-declare const FromDate: ({ name, id, format, disabledDays, start, end, placeholder, weekStart, maxDays, disabled, readOnly, onChange, onDayClick, testId }: Props) => React.JSX.Element;
+declare const FromDate: ({ name, id, format, disabledDays, highlightedDays, start, end, placeholder, weekStart, maxDays, disabled, readOnly, onChange, onDayClick, testId }: Props) => React.JSX.Element;
 export default FromDate;

package/dist/forms/DateRangeField/ToDate/ToDate.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import { WeekStart, BlockedDays } from '../../../utils/date';
+import { HighlightGroup } from '../../../utils/highlight';
 type Props = {
     name: string;
     format: string;
     disabledDays?: BlockedDays;
+    highlightedDays?: HighlightGroup[] | HighlightGroup;
     start?: Date;
     end?: Date;
     placeholder: string;

package/dist/forms/WeekField/WeekField.d.ts

@@ -1,11 +1,16 @@
 import React from 'react';
 import { WeekStart } from '../../utils/date';
+import { HighlightGroup } from '../../utils/highlight';
 type Props = {
     name: string;
     /** If not provided it will generate a random id so the label links properly with the text input */
     id?: string;
     value?: Date;
     disabledDays?: (day: Date) => boolean;
+    /** Highlight one or more groups of dates below the calendar, each with its
+     *  own shape, colour theme, and legend label. Example use cases: pay days,
+     *  holidays, blackout periods. */
+    highlightedDays?: HighlightGroup[] | HighlightGroup;
     /** Reference this for valid formats: https://date-fns.org/v2.18.0/docs/format */
     format?: string;
     initialMonth?: Date;

package/dist/forms/index.d.ts

@@ -31,4 +31,8 @@ export type { PillSelectOption } from './PillSelectField/types';
 export type { AsyncSelectOptions } from './AsyncSelectField/types';
 export type { FormikType } from './Form/types';
 export type { PhoneFieldCountryCode } from './PhoneField/types';
+export type { HighlightGroup, HighlightShape, HighlightTheme } from '../utils/highlight';
+export { HIGHLIGHT_SHAPE } from '../utils/highlight';
+export type { Weekday } from '../utils/highlight-patterns';
+export { nthWeekdayOfMonth, everyOtherWeekday, firstOfMonth, lastOfMonth } from '../utils/highlight-patterns';
 export { isValidPhoneNumber } from './validations';

package/dist/index.css

@@ -2014,13 +2014,13 @@ h5._i2LHD {
 ._et9Fs {
   --rdp-cell-size: 37px;
   --rdp-caption-font-size: var(--font-size-300);
-  --rdp-accent-color: var(--color-primary-container-variant);
+  --rdp-accent-color: var(--color-surface-container-highest);
   --rdp-background-color: color-mix(
       in srgb,
       var(--color-surface-color) 100%,
       var(--color-surface-inverse) 5%
   );
-  --rdp-accent-color-dark: var(--color-primary-color);
+  --rdp-accent-color-dark: var(--color-surface-container-highest);
   --rdp-background-color-dark: var(--color-surface-on-color);
   --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */
   --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */
@@ -2060,7 +2060,7 @@ h5._i2LHD {
 }
 
 ._X7MoW:not(._AeJUw) {
-  color: var(--color-primary-color);
+  color: var(--color-secondary-color);
   font-weight: var(--p-font-weight-bold);
   text-decoration: underline;
 }
@@ -2081,13 +2081,13 @@ h5._i2LHD {
 }
 
 ._eK8pw._eK8pw._eK8pw._eK8pw:not(:disabled) {
-  background-color: var(--color-primary-container-variant);
+  background-color: var(--color-surface-container-highest);
   color: var(--color-primary-on-container-variant);
   opacity: 1;
 }
 ._eK8pw._eK8pw._eK8pw._eK8pw:not(:disabled):hover {
-  background-color: var(--color-primary-color);
-  color: var(--color-primary-on-color);
+  background-color: var(--color-surface-inverse);
+  color: var(--color-surface-on-inverse);
 }
 
 ._eK8pw[disabled] {
@@ -2098,13 +2098,13 @@ h5._i2LHD {
 ._QLSA6 {
   --rdp-cell-size: 37px;
   --rdp-caption-font-size: var(--font-size-300);
-  --rdp-accent-color: var(--color-primary-container-variant);
+  --rdp-accent-color: var(--color-surface-container-highest);
   --rdp-background-color: color-mix(
       in srgb,
       var(--color-surface-color) 100%,
       var(--color-surface-inverse) 5%
   );
-  --rdp-accent-color-dark: var(--color-primary-color);
+  --rdp-accent-color-dark: var(--color-surface-container-highest);
   --rdp-background-color-dark: var(--color-surface-on-color);
   --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */
   --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */
@@ -2144,7 +2144,7 @@ h5._i2LHD {
 }
 
 ._Snv-V:not(._Zf-6C) {
-  color: var(--color-primary-color);
+  color: var(--color-secondary-color);
   font-weight: var(--p-font-weight-bold);
   text-decoration: underline;
 }
@@ -2233,6 +2233,180 @@ h5._i2LHD {
   background: var(--color-surface-container);
   box-shadow: 0 0 12px -3px var(--color-shadow-overlay);
 }
+._ucr9m {
+  position: relative;
+}
+._ucr9m::after {
+  content: "";
+  position: absolute;
+  inset: -2px;
+  pointer-events: none;
+}
+
+._ucr9m._ucr9m {
+  overflow: visible;
+}
+
+._mLAwT {
+  --highlight-color: var(--color-success-color);
+}
+
+._Uji-g {
+  --highlight-color: var(--color-danger-color);
+}
+
+._pe9ss {
+  --highlight-color: var(--color-warning-color);
+}
+
+._OfzGg {
+  --highlight-color: var(--color-info-color);
+}
+
+._Pywaj {
+  --highlight-color: var(--color-upsell-color);
+}
+
+._5WRkx {
+  --highlight-color: var(--color-neutral-color);
+}
+
+._ucr9m._0LzN8::after {
+  border: 1.5px solid var(--highlight-color);
+  border-radius: 50%;
+}
+
+._N-Dl4._0LzN8 {
+  border: 1.5px solid var(--highlight-color);
+  border-radius: 50%;
+}
+
+._ucr9m._eCqCU::after {
+  border: 1.5px dashed var(--highlight-color);
+  border-radius: 50%;
+}
+
+._N-Dl4._eCqCU {
+  border: 1.5px dashed var(--highlight-color);
+  border-radius: 50%;
+}
+
+._ucr9m._-pO-1::after {
+  border: 1.5px solid var(--highlight-color);
+}
+
+._N-Dl4._-pO-1 {
+  border: 1.5px solid var(--highlight-color);
+}
+
+._ucr9m._7PoYh::after {
+  border: 1.5px dashed var(--highlight-color);
+}
+
+._N-Dl4._7PoYh {
+  border: 1.5px dashed var(--highlight-color);
+}
+
+._ucr9m._ywc-V::after {
+  background-color: var(--highlight-color);
+  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.1'%3E%3Cpolygon%20points='7.44%201%2016.56%201%2023%207.44%2023%2016.56%2016.56%2023%207.44%2023%201%2016.56%201%207.44'/%3E%3C/svg%3E");
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.1'%3E%3Cpolygon%20points='7.44%201%2016.56%201%2023%207.44%2023%2016.56%2016.56%2023%207.44%2023%201%2016.56%201%207.44'/%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+}
+
+._N-Dl4._ywc-V {
+  background-color: var(--highlight-color);
+  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='3'%3E%3Cpolygon%20points='7.44%201%2016.56%201%2023%207.44%2023%2016.56%2016.56%2023%207.44%2023%201%2016.56%201%207.44'/%3E%3C/svg%3E");
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='3'%3E%3Cpolygon%20points='7.44%201%2016.56%201%2023%207.44%2023%2016.56%2016.56%2023%207.44%2023%201%2016.56%201%207.44'/%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+}
+
+._ucr9m._vF4Ka::after {
+  background-color: var(--highlight-color);
+  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.1'%3E%3Cpolygon%20points='12%201%2014.23%203.69%2017.5%202.47%2018.08%205.92%2021.53%206.5%2020.31%209.77%2023%2012%2020.31%2014.23%2021.53%2017.5%2018.08%2018.08%2017.5%2021.53%2014.23%2020.31%2012%2023%209.77%2020.31%206.5%2021.53%205.92%2018.08%202.47%2017.5%203.69%2014.23%201%2012%203.69%209.77%202.47%206.5%205.92%205.92%206.5%202.47%209.77%203.69'/%3E%3C/svg%3E");
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.1'%3E%3Cpolygon%20points='12%201%2014.23%203.69%2017.5%202.47%2018.08%205.92%2021.53%206.5%2020.31%209.77%2023%2012%2020.31%2014.23%2021.53%2017.5%2018.08%2018.08%2017.5%2021.53%2014.23%2020.31%2012%2023%209.77%2020.31%206.5%2021.53%205.92%2018.08%202.47%2017.5%203.69%2014.23%201%2012%203.69%209.77%202.47%206.5%205.92%205.92%206.5%202.47%209.77%203.69'/%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+}
+
+._N-Dl4._vF4Ka {
+  background-color: var(--highlight-color);
+  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='3'%3E%3Cpolygon%20points='12%201%2014.23%203.69%2017.5%202.47%2018.08%205.92%2021.53%206.5%2020.31%209.77%2023%2012%2020.31%2014.23%2021.53%2017.5%2018.08%2018.08%2017.5%2021.53%2014.23%2020.31%2012%2023%209.77%2020.31%206.5%2021.53%205.92%2018.08%202.47%2017.5%203.69%2014.23%201%2012%203.69%209.77%202.47%206.5%205.92%205.92%206.5%202.47%209.77%203.69'/%3E%3C/svg%3E");
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='3'%3E%3Cpolygon%20points='12%201%2014.23%203.69%2017.5%202.47%2018.08%205.92%2021.53%206.5%2020.31%209.77%2023%2012%2020.31%2014.23%2021.53%2017.5%2018.08%2018.08%2017.5%2021.53%2014.23%2020.31%2012%2023%209.77%2020.31%206.5%2021.53%205.92%2018.08%202.47%2017.5%203.69%2014.23%201%2012%203.69%209.77%202.47%206.5%205.92%205.92%206.5%202.47%209.77%203.69'/%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  mask-position: center;
+  -webkit-mask-position: center;
+  mask-size: contain;
+  -webkit-mask-size: contain;
+}
+
+._iB2Db {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 14px;
+  padding: 16px;
+  border-top: 1px solid var(--color-outline-variant);
+  margin: 0 4px;
+}
+
+._YauE7 {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+._N-Dl4 {
+  flex-shrink: 0;
+  width: 12px;
+  height: 12px;
+  box-sizing: border-box;
+}
+
+._lMmc7 {
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-100);
+  line-height: 1rem;
+  color: var(--color-surface-on-color);
+}
+._TjAon {
+  padding: 16px;
+  border-top: 1px solid var(--color-outline-variant);
+}
+._BbYmq {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+._utSi- {
+  box-sizing: border-box;
+  width: 12px;
+  height: 12px;
+}
+._utSi- svg {
+  display: block;
+}
+._mP9vd {
+  border: 3px solid;
+}
+._6zlZT {
+  border: 3px solid;
+  border-radius: 50%;
+}
 ._Id4qm {
   position: relative;
 }
@@ -2335,84 +2509,6 @@ input:disabled + ._kmvBP::after {
   top: 10px;
   right: 10px;
 }
-._ZTU2m {
-  display: flex;
-  align-items: center;
-  padding: 0 20px;
-  gap: 40px;
-  height: 56px;
-}
-._Q5JgW, ._uC-Al, ._R1QhY {
-  display: flex;
-  align-items: center;
-  flex: 1;
-}
-._uC-Al {
-  justify-content: center;
-}
-._R1QhY {
-  justify-content: flex-end;
-  gap: 20px;
-}
-._YrKMz {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-._PcgHx {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 38px;
-  width: 38px;
-  border-radius: var(--border-radius-400);
-  position: relative;
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline: inherit;
-}
-._PcgHx:focus {
-  box-shadow: 0 0 8px 0 var(--color-shadow-active);
-}
-._FFTlJ {
-  position: absolute;
-  top: 0;
-  right: -5px;
-}
-._PcgHx:hover {
-  background-color: var(--color-hover-darken);
-}
-._048gS {
-  display: flex;
-  width: 100%;
-  height: 100vh; /* Fallback for browsers that don't support dvh */
-  height: 100dvh;
-  overflow: hidden;
-}
-._nKeKu {
-  flex-shrink: 0;
-  height: 100%;
-}
-._BQLkb {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-._PljPU {
-  flex-shrink: 0;
-}
-._VlXE9 {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  margin: 32px auto 0;
-}
 ._iSC5P._iSC5P {
   font-family: var(--font-family-body);
   font-size: var(--font-size-200);
@@ -3658,10 +3754,10 @@ input:disabled + ._kmvBP::after {
   color: var(--color-surface-on-color);
 }
 ._QxJjU {
-  color: var(--color-primary-color);
+  color: var(--color-secondary-color);
 }
 ._TqBVI {
-  background-color: var(--color-primary-container);
+  background-color: var(--color-surface-container-highest);
 }
 ._5TJrn:hover {
   background-color: var(--color-primary-container);
@@ -4338,13 +4434,13 @@ input:disabled + ._Yfxkl::after {
 ._SsQ7L {
   --rdp-cell-size: 37px;
   --rdp-caption-font-size: var(--font-size-300);
-  --rdp-accent-color: var(--color-primary-container-variant);
+  --rdp-accent-color: var(--color-surface-container-highest);
   --rdp-background-color: color-mix(
       in srgb,
       var(--color-surface-color) 100%,
       var(--color-surface-inverse) 5%
   );
-  --rdp-accent-color-dark: var(--color-primary-color);
+  --rdp-accent-color-dark: var(--color-surface-container-highest);
   --rdp-background-color-dark: var(--color-surface-on-color);
   --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */
   --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */
@@ -4384,7 +4480,7 @@ input:disabled + ._Yfxkl::after {
 }
 
 ._lFzs7:not(._TjttB) {
-  color: var(--color-primary-color);
+  color: var(--color-secondary-color);
   font-weight: var(--p-font-weight-bold);
   text-decoration: underline;
 }
@@ -4405,11 +4501,11 @@ input:disabled + ._Yfxkl::after {
 }
 
 ._rJolM._rJolM {
-  color: var(--color-primary-color);
+  color: var(--color-surface-inverse);
   border-radius: 0;
 }
 ._rJolM._rJolM:hover {
-  color: var(--color-primary-color);
+  color: var(--color-surface-inverse);
 }
 ._rJolM._rJolM:disabled {
   background-color: var(--color-primary-container-variant);
@@ -4419,8 +4515,8 @@ input:disabled + ._Yfxkl::after {
 ._nVIPx._nVIPx {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
-  color: var(--color-primary-on-color);
-  background-color: var(--color-primary-color);
+  color: var(--color-surface-on-inverse);
+  background-color: var(--color-surface-inverse);
 }
 ._nVIPx._nVIPx:disabled {
   background-color: var(--color-primary-container-variant);
@@ -4430,8 +4526,8 @@ input:disabled + ._Yfxkl::after {
 ._Y50yT._Y50yT:not(._nVIPx) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
-  color: var(--color-primary-on-color);
-  background-color: var(--color-primary-color);
+  color: var(--color-surface-on-inverse);
+  background-color: var(--color-surface-inverse);
 }
 ._Y50yT._Y50yT:not(._nVIPx):disabled {
   background-color: var(--color-primary-container-variant);