@7shifts/sous-chef 4.6.0 → 4.6.1

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/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

@@ -62,5 +62,8 @@
     },
     "PhoneField": {
         "malformedPhoneNumber": "Please enter a valid phone number."
+    },
+    "ColorField": {
+        "customColorButtonLabel": "Custom color"
     }
 }

package/dist/i18n/locales/es.json

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

package/dist/i18n/locales/fr.json

@@ -62,5 +62,8 @@
     },
     "PhoneField": {
         "malformedPhoneNumber": "Veuillez entrer un numéro de téléphone valide."
+    },
+    "ColorField": {
+        "customColorButtonLabel": "Couleur personnalisée"
     }
 }

package/dist/index.css

@@ -5743,11 +5743,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 +5862,7 @@ input._TEU6N {
   color: var(--color-neutral-on-container);
 }
 ._e3zFF {
-  gap: 4px;
+  gap: 6px;
   display: flex;
   align-items: center;
   flex-shrink: 0;
@@ -5898,6 +5916,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 +6285,85 @@ 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 20px;
+  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);
+  cursor: pointer;
+  white-space: nowrap;
+  box-sizing: border-box;
+  text-decoration: none;
+}
+._-BgMZ:hover {
+  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-inverse);
+  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: 16px;
+}
+._DVRRE {
+  display: none;
+}
 ._mhyqH {
   display: flex;
   flex-direction: row;