@7shifts/sous-chef 4.6.0 → 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/ColorField/ColorField.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
 import type { Props as TextFieldProps } from '../TextField/TextField';
-type Props = Omit<TextFieldProps, 'suffix' | 'prefix' | 'autoComplete' | 'defaultValue' | 'maxLength'>;
-declare const ColorField: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
+declare const ColorField: React.ForwardRefExoticComponent<{
+    /** When true, allows the user to select a custom color */
+    allowCustomColor?: boolean | undefined;
+} & Omit<TextFieldProps, "suffix" | "prefix" | "autoComplete" | "defaultValue" | "maxLength"> & React.RefAttributes<HTMLInputElement>>;
 export default ColorField;

package/dist/forms/ColorField/ColorOverlay/ColorOverlay.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
+import { SequentialColor } from '../constants';
 type Props = {
     onClose: () => void;
     triggerRef: React.RefObject<HTMLElement>;
-    selectedColor?: string;
+    selectedColor?: SequentialColor;
     onSelect: (color: string) => void;
+    onCustomColor: () => void;
+    allowCustomColor?: boolean;
 };
 declare const ColorsOverlay: (props: Props) => React.JSX.Element;
 export default ColorsOverlay;

package/dist/forms/ColorField/ColorOverlay/useColorKeyboardNavigation.d.ts

@@ -1,4 +1,5 @@
-export declare const useColorKeyboardNavigation: (selectedColor: string) => {
+export declare const CUSTOM_COLOR_INDEX: 20;
+export declare const useColorKeyboardNavigation: (selectedColor: string, allowCustomColor?: boolean) => {
     selectedColorIndex: number | null;
     setSelectedColorIndex: import("react").Dispatch<import("react").SetStateAction<number | null>>;
 };

package/dist/forms/ColorField/CustomColorPicker/CustomColorPicker.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export type CustomColorPickerHandle = {
+    /** Open the native color picker at the field's current color. */
+    open: () => void;
+};
+type Props = {
+    /** The current field color; the picker opens seeded with this value. */
+    color?: string;
+    /** Called with the committed hex once the user closes the picker. */
+    onSelect: (color: string) => void;
+};
+/**
+ * A visually hidden native color input. It is kept mounted on the field (not
+ * inside the swatch overlay) so the browser's picker survives the overlay
+ * closing, and it is opened imperatively via the `open` handle.
+ */
+declare const CustomColorPicker: React.ForwardRefExoticComponent<Props & React.RefAttributes<CustomColorPickerHandle>>;
+export default CustomColorPicker;

package/dist/forms/ColorField/CustomColorPicker/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './CustomColorPicker';
+export type { CustomColorPickerHandle } from './CustomColorPicker';

package/dist/forms/ColorField/constants.d.ts

@@ -1 +1,2 @@
 export declare const SEQUENTIAL_COLORS: readonly ["seq-18", "seq-4", "seq-7", "seq-16", "seq-12", "seq-6", "seq-9", "seq-3", "seq-11", "seq-1", "seq-13", "seq-10", "seq-14", "seq-8", "seq-19", "seq-20", "seq-2", "seq-17", "seq-15", "seq-5"];
+export type SequentialColor = (typeof SEQUENTIAL_COLORS)[number];

package/dist/forms/ColorField/domain.d.ts

@@ -0,0 +1,14 @@
+import { SequentialColor } from './constants';
+export declare const isSeqToken: (value: string) => value is "seq-18" | "seq-4" | "seq-7" | "seq-16" | "seq-12" | "seq-6" | "seq-9" | "seq-3" | "seq-11" | "seq-1" | "seq-13" | "seq-10" | "seq-14" | "seq-8" | "seq-19" | "seq-20" | "seq-2" | "seq-17" | "seq-15" | "seq-5";
+/**
+ * Whether a value is a 6-digit hex color, which is the only format the native
+ * color picker accepts.
+ */
+export declare const isHexColor: (value: string | undefined) => value is string;
+/**
+ * Resolves a stored field value to the sequential color token it represents.
+ * Accepts both a token name directly (e.g. `seq-1`) and a hex color string so
+ * that fields migrated from hex storage continue to resolve correctly.
+ */
+export declare const findSeqToken: (value: string | undefined) => SequentialColor | undefined;
+export declare const findSeqTokenByHex: (value: string | undefined) => SequentialColor | undefined;

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/foundation/tokens/color/color-codes.d.ts

@@ -82,3 +82,49 @@ export declare const COLOR_CODES: {
     readonly 'seq-19': " #2f80ed";
     readonly 'seq-20': " #be3434";
 };
+export declare const SEQUENTIAL_COLOR_CODES: {
+    readonly light: {
+        readonly 'seq-1': "#00b5d8";
+        readonly 'seq-2': "#f9922b";
+        readonly 'seq-3': "#28cc6d";
+        readonly 'seq-4': "#d83f87";
+        readonly 'seq-5': "#4359ce";
+        readonly 'seq-6': "#ff6f61";
+        readonly 'seq-7': "#35e5c6";
+        readonly 'seq-8': "#a966e7";
+        readonly 'seq-9': "#905642";
+        readonly 'seq-10': "#ffb300";
+        readonly 'seq-11': "#708238";
+        readonly 'seq-12': "#4fc3f7";
+        readonly 'seq-13': "#e94057";
+        readonly 'seq-14': "#00a896";
+        readonly 'seq-15': "#6a4c93";
+        readonly 'seq-16': "#a3cb38";
+        readonly 'seq-17': "#546e7a";
+        readonly 'seq-18': "#fc9999";
+        readonly 'seq-19': "#2f80ed";
+        readonly 'seq-20': "#be3434";
+    };
+    readonly dark: {
+        readonly 'seq-1': "#28d2f3";
+        readonly 'seq-2': "#f9ad61";
+        readonly 'seq-3': "#31e17b";
+        readonly 'seq-4': "#ef5ca1";
+        readonly 'seq-5': "#7288ff";
+        readonly 'seq-6': "#ff867a";
+        readonly 'seq-7': "#43f2d3";
+        readonly 'seq-8': "#cb93ff";
+        readonly 'seq-9': "#b66d54";
+        readonly 'seq-10': "#ffc437";
+        readonly 'seq-11': "#8a9c52";
+        readonly 'seq-12': "#8adbff";
+        readonly 'seq-13': "#fa5c71";
+        readonly 'seq-14': "#15c7b4";
+        readonly 'seq-15': "#a978ec";
+        readonly 'seq-16': "#aed83e";
+        readonly 'seq-17': "#82adc0";
+        readonly 'seq-18': "#ffa9a9";
+        readonly 'seq-19': "#4594ff";
+        readonly 'seq-20': "#e45555";
+    };
+};

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",
@@ -62,5 +69,8 @@
     },
     "PhoneField": {
         "malformedPhoneNumber": "Please enter a valid phone number."
+    },
+    "ColorField": {
+        "customColorButtonLabel": "Custom color"
     }
 }

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",
@@ -62,5 +69,8 @@
     },
     "PhoneField": {
         "malformedPhoneNumber": "Por favor, ingresa un número de teléfono válido."
+    },
+    "ColorField": {
+        "customColorButtonLabel": "Color personalizado"
     }
 }

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",
@@ -62,5 +69,8 @@
     },
     "PhoneField": {
         "malformedPhoneNumber": "Veuillez entrer un numéro de téléphone valide."
+    },
+    "ColorField": {
+        "customColorButtonLabel": "Couleur personnalisée"
     }
 }

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);
@@ -5743,11 +5836,29 @@ input._TEU6N {
 ._M-8rP:hover:not(._o92fv)::after {
   border-color: var(--color-outline);
 }
+._iQoTb {
+  grid-column: 1/-1;
+}
 ._UUuiJ {
   border-radius: 100%;
   width: 16px;
   height: 16px;
 }
+._OHgPk {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+._KJawn {
+  position: relative;
+}
 ._V1U8v {
   display: flex;
   justify-content: center;
@@ -5844,7 +5955,7 @@ input._TEU6N {
   color: var(--color-neutral-on-container);
 }
 ._e3zFF {
-  gap: 4px;
+  gap: 6px;
   display: flex;
   align-items: center;
   flex-shrink: 0;
@@ -5898,6 +6009,13 @@ input._TEU6N {
 ._vOTWZ::first-letter {
   text-transform: capitalize;
 }
+._fCrWy {
+  gap: 6px;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  flex-grow: 0;
+}
 ._j2h8A {
   background-color: var(--color-neutral-container);
   color: var(--color-neutral-on-container);
@@ -6260,6 +6378,89 @@ input._TEU6N {
   border-top: 1px solid var(--nav-foreground-color);
   transition: box-shadow 0.4s ease-in-out;
 }
+._j3-Gu {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  border-bottom: 1px solid var(--color-outline);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+._-BgMZ {
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-200);
+  line-height: var(--font-line-height-200);
+  font-weight: var(--p-font-weight-normal);
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 42px;
+  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);
+  cursor: pointer;
+  white-space: nowrap;
+  box-sizing: border-box;
+  text-decoration: none;
+}
+._-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);
+  outline-offset: -2px;
+  border-radius: var(--border-radius-400) var(--border-radius-400) 0 0;
+}
+._tZ-HE {
+  background: var(--color-neutral-container-variant);
+  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);
+  line-height: var(--font-line-height-200);
+  font-weight: var(--p-font-weight-normal);
+  font-weight: var(--p-font-weight-bold);
+}
+._AyUHY {
+  color: var(--color-surface-on-container-disabled);
+  cursor: default;
+  pointer-events: none;
+}
+._WVws4 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  overflow: hidden;
+}
+._WVws4::after {
+  content: attr(data-text);
+  font-weight: var(--p-font-weight-bold);
+  height: 0;
+  visibility: hidden;
+  pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+._nQB7q {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+._GW3Wi {
+  padding-top: 20px;
+  padding-bottom: 20px;
+  padding-left: 0px;
+  padding-right: 20px;
+}
+._DVRRE {
+  display: none;
+}
 ._mhyqH {
   display: flex;
   flex-direction: row;