@7shifts/sous-chef 4.6.1 → 4.7.0-beta-20260625201656

package/dist/forms/CheckboxField/CheckboxField.d.ts

@@ -5,6 +5,7 @@ type Props = {
     /** If not provided it will generate a random id so the label links properly with the text input */
     id?: string;
     checked?: boolean;
+    indeterminate?: boolean;
     onChange?: (e: boolean) => void;
     onBlur?: (e: boolean) => void;
     label?: React.ReactNode;

package/dist/forms/PasswordField/PasswordField.d.ts

@@ -14,6 +14,8 @@ type Props = {
     defaultValue?: string;
     criterias?: PasswordCriteria[];
     testId?: string;
+    /** Sets the autocomplete attribute on the input for password manager compatibility (e.g. "current-password", "new-password") */
+    autoComplete?: string;
 };
 /** A field used for passwords. It obfuscates the input by default, but has the option to reveal the input. Can also include required password criteria. */
 declare const PasswordField: React.FC<Props>;

package/dist/forms/WeekSelectField/WeekSelectField.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+type Props = {
+    name: string;
+    id?: string;
+    /** The dates to display as pills, in chronological order. Typically 7 days representing a week. */
+    days: Date[];
+    value?: Date[];
+    onChange?: (selected: Date[]) => void;
+    label?: React.ReactNode;
+    caption?: React.ReactNode;
+    error?: React.ReactNode;
+    disabled?: boolean;
+    displayFormat?: 'weekday' | 'month';
+    testId?: string;
+};
+declare const WeekSelectField: ({ name, id: inputId, days, value: controlledValue, onChange, label, caption, error: errorProp, disabled, displayFormat, testId }: Props) => React.JSX.Element;
+export default WeekSelectField;

package/dist/forms/WeekSelectField/index.d.ts

@@ -0,0 +1 @@
+export { default } from './WeekSelectField';

package/dist/forms/index.d.ts

@@ -4,6 +4,7 @@ import TextAreaField from './TextAreaField';
 import TextField from './TextField';
 import CheckboxField from './CheckboxField';
 import PillSelectField from './PillSelectField';
+import WeekSelectField from './WeekSelectField';
 import RadioGroupField from './RadioGroupField';
 import RadioGroupOption from './RadioGroupOption';
 import RadioGroupBoxOption from './RadioGroupBoxOption';
@@ -24,7 +25,7 @@ import FormFeedback from './FormFeedback';
 import PhoneField from './PhoneField';
 import NumberField from './NumberField';
 import ColorField from './ColorField';
-export { Form, FormRow, TextAreaField, TextField, CheckboxField, PillSelectField, RadioGroupField, RadioGroupOption, RadioGroupBoxOption, PasswordField, MultiSelectField, SelectField, AsyncSelectField, DateField, DateRangeField, WeekField, TimeField, TimeRangeField, CurrencyField, PercentageField, FormSection, FormFooter, FormFeedback, PhoneField, NumberField, ColorField, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT };
+export { Form, FormRow, TextAreaField, TextField, CheckboxField, PillSelectField, WeekSelectField, RadioGroupField, RadioGroupOption, RadioGroupBoxOption, PasswordField, MultiSelectField, SelectField, AsyncSelectField, DateField, DateRangeField, WeekField, TimeField, TimeRangeField, CurrencyField, PercentageField, FormSection, FormFooter, FormFeedback, PhoneField, NumberField, ColorField, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT };
 export type { PasswordCriteria } from './PasswordField/types';
 export type { SelectOption, SelectOptions, GroupOption, CustomOptionProps, SelectedOptionPrefixProps } from './SelectField/types';
 export type { PillSelectOption } from './PillSelectField/types';

package/dist/i18n/locales/en.json

@@ -25,6 +25,13 @@
         "thursday": "Thursday",
         "friday": "Friday",
         "saturday": "Saturday",
+        "sundayShort": "Sun",
+        "mondayShort": "Mon",
+        "tuesdayShort": "Tue",
+        "wednesdayShort": "Wed",
+        "thursdayShort": "Thu",
+        "fridayShort": "Fri",
+        "saturdayShort": "Sat",
         "january": "January",
         "february": "February",
         "march": "March",

package/dist/i18n/locales/es.json

@@ -25,6 +25,13 @@
         "thursday": "Jueves",
         "friday": "Viernes",
         "saturday": "Sábado",
+        "sundayShort": "Dom",
+        "mondayShort": "Lun",
+        "tuesdayShort": "Mar",
+        "wednesdayShort": "Mié",
+        "thursdayShort": "Jue",
+        "fridayShort": "Vie",
+        "saturdayShort": "Sáb",
         "january": "Enero",
         "february": "Febrero",
         "march": "Marzo",

package/dist/i18n/locales/fr.json

@@ -25,6 +25,13 @@
         "thursday": "Jeudi",
         "friday": "Vendredi",
         "saturday": "Samedi",
+        "sundayShort": "Dim",
+        "mondayShort": "Lun",
+        "tuesdayShort": "Mar",
+        "wednesdayShort": "Mer",
+        "thursdayShort": "Jeu",
+        "fridayShort": "Ven",
+        "saturdayShort": "Sam",
         "january": "Janvier",
         "february": "Février",
         "march": "Mars",

package/dist/index.css

@@ -194,7 +194,7 @@
   --color-neutral-container: #e2ded6;
   --color-neutral-on-container: #323232;
   --color-neutral-container-variant: #f1f0ec;
-  --color-neutral-on-container-variant: #383430;
+  --color-neutral-on-container-variant: #413E3E;
   --color-neutral-black-transparent-05: rgba(var(--color-black-rgb), 0.05);
   --color-neutral-black-transparent-10: rgba(var(--color-black-rgb), 0.1);
   --color-neutral-black-transparent-15: rgba(var(--color-black-rgb), 0.15);
@@ -419,7 +419,7 @@
   --color-neutral-on-color: #323232;
   --color-neutral-container: #4c4b49;
   --color-neutral-on-container: #fff;
-  --color-neutral-container-variant: #383430;
+  --color-neutral-container-variant: #413E3E;
   --color-neutral-on-container-variant: #c7c0b2;
   --color-shadow-overlay: var(--color-neutral-black-transparent-40);
   --color-shadow-active: #4570ff;
@@ -2424,6 +2424,7 @@ h5._i2LHD {
 }
 ._kmvBP {
   display: block;
+  position: relative;
   top: 0;
   left: 0;
   height: 14px;
@@ -2439,11 +2440,11 @@ h5._i2LHD {
   opacity: 0;
 }
 input:checked ~ ._kmvBP {
-  background-color: var(--color-primary-color);
+  background-color: var(--color-surface-inverse);
   border-radius: 4px;
   transform: rotate(0deg) scale(1);
   opacity: 1;
-  border: 1px solid var(--color-primary-color);
+  border: 1px solid var(--color-surface-inverse);
 }
 input:checked ~ ._kmvBP::after {
   opacity: 1;
@@ -2452,26 +2453,46 @@ input:checked ~ ._kmvBP::after {
   top: 1px;
   width: 4px;
   height: 8px;
-  border: solid var(--color-primary-on-color);
+  border: solid var(--color-surface-on-inverse);
   border-width: 0 2px 2px 0;
   background-color: transparent;
   border-radius: 0;
 }
-input:focus-visible + ._kmvBP {
+input[data-indeterminate=true] ~ ._kmvBP {
+  background-color: var(--color-surface-inverse);
+  border: 1px solid var(--color-surface-inverse);
+  opacity: 1;
+}
+input[data-indeterminate=true] ~ ._kmvBP::after {
+  opacity: 1;
+  left: 3px;
+  top: 6px;
+  width: 8px;
+  height: 0;
+  transform: rotate(0deg) scale(1);
+  border: solid var(--color-surface-on-inverse);
+  border-width: 0 0 2px 0;
+  background-color: transparent;
+  border-radius: 0;
+}
+input:focus-visible ~ ._kmvBP {
   outline: var(--color-primary-color) solid 1px;
 }
 ._Id4qm input:disabled {
   cursor: default;
 }
-input:disabled + ._kmvBP {
+input:disabled ~ ._kmvBP {
   background-color: var(--color-surface-container-disabled);
   border: 1px solid var(--color-outline);
 }
-input:disabled + ._kmvBP::after {
+input:disabled ~ ._kmvBP::after {
   box-shadow: none;
-  border: solid #9f9f9f !important;
+  border: solid var(--color-surface-on-container-disabled) !important;
   border-width: 0 2px 2px 0 !important;
 }
+input:disabled[data-indeterminate=true] ~ ._kmvBP::after {
+  border-width: 0 0 2px 0 !important;
+}
 ._NwD6V {
   box-shadow: 0 0 12px -3px var(--color-shadow-overlay);
   border: 1px solid var(--color-outline);
@@ -3989,6 +4010,78 @@ input:focus-visible + ._JXakU, input:focus-visible + ._ZxEwG {
   box-shadow: 0 0 8px 0 var(--color-shadow-active);
   outline: none;
 }
+._IYHYX {
+  display: flex;
+  width: 100%;
+  gap: 4px;
+}
+._JnbPv {
+  position: relative;
+  flex: 1 0 0;
+  min-width: 40px;
+}
+._JnbPv input {
+  position: absolute;
+  opacity: 0;
+  z-index: var(--z-index-base);
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  box-sizing: border-box;
+}
+._JnbPv input:hover:not(:disabled) {
+  cursor: pointer;
+}
+._9GwLj {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 54px;
+  padding: 10px 16px;
+  border-radius: 8px;
+  background-color: var(--color-surface-container-high);
+  color: var(--color-surface-on-color-bold);
+  box-sizing: border-box;
+  transition: background-color 0.2s, color 0.2s;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+._WcKdi {
+  font-size: var(--font-size-100);
+  line-height: var(--font-line-height-100);
+  font-weight: var(--p-font-weight-normal);
+}
+._MQ3xL {
+  font-size: var(--font-size-300);
+  line-height: var(--font-line-height-200);
+  font-weight: var(--p-font-weight-semibold);
+}
+._JnbPv:hover > input:not(:disabled) ~ ._9GwLj {
+  background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), var(--color-surface-container-high);
+  cursor: pointer;
+}
+._JnbPv:hover > input:not(:disabled):checked ~ ._9GwLj {
+  background: linear-gradient(0deg, var(--color-hover-lighten) 0%, var(--color-hover-lighten) 100%), var(--color-surface-inverse);
+  color: var(--color-surface-on-inverse);
+}
+._JnbPv input:checked ~ ._9GwLj {
+  background-color: var(--color-surface-inverse);
+  color: var(--color-surface-on-inverse);
+}
+._JnbPv input:disabled ~ ._9GwLj {
+  background-color: var(--color-surface-container-disabled);
+  color: var(--color-surface-on-container-disabled);
+}
+._JnbPv input:disabled:checked ~ ._9GwLj {
+  background-color: var(--color-surface-inverse);
+  color: var(--color-surface-on-inverse-disabled);
+}
+._JnbPv input:focus-visible ~ ._9GwLj {
+  box-shadow: 0 0 8px 0 var(--color-shadow-active);
+  outline: none;
+}
 ._xzukU {
   font-family: var(--font-family-body);
   font-size: var(--font-size-200);
@@ -6303,12 +6396,12 @@ input._TEU6N {
   align-items: center;
   gap: 8px;
   height: 42px;
-  padding: 0 20px;
+  padding: 0 16px;
   border-radius: var(--border-radius-400) var(--border-radius-400) 0 0;
   border: none;
   border-bottom: 2px solid transparent;
   background: transparent;
-  color: var(--color-surface-on-color-subtle);
+  color: var(--color-surface-on-color);
   cursor: pointer;
   white-space: nowrap;
   box-sizing: border-box;
@@ -6316,6 +6409,7 @@ input._TEU6N {
 }
 ._-BgMZ:hover {
   color: var(--color-surface-on-color-bold);
+  border-bottom-color: var(--color-surface-on-color-bold);
 }
 ._-BgMZ:focus-visible {
   outline: 2px solid var(--color-primary-color);
@@ -6324,7 +6418,7 @@ input._TEU6N {
 }
 ._tZ-HE {
   background: var(--color-neutral-container-variant);
-  border-bottom-color: var(--color-surface-inverse);
+  border-bottom-color: var(--color-surface-on-color-bold);
   color: var(--color-surface-on-color-bold);
   font-family: var(--font-family-body);
   font-size: var(--font-size-200);
@@ -6359,7 +6453,10 @@ input._TEU6N {
   flex-shrink: 0;
 }
 ._GW3Wi {
-  padding: 16px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  padding-left: 0px;
+  padding-right: 20px;
 }
 ._DVRRE {
   display: none;