@7shifts/sous-chef 3.89.4 → 3.90.0

package/dist/core/SousChefProvider/context/ProviderConfigContext.d.ts

@@ -3,6 +3,7 @@ import { TimeFormat } from '../../../forms/TimeField/types';
 export type ProviderConfigContextType = {
     country: CountryCode;
     timeFormat: TimeFormat;
+    theme: 'light' | 'dark';
 };
 declare const ProviderConfigContext: import("react").Context<ProviderConfigContextType>;
 export declare const useProviderConfig: () => ProviderConfigContextType;

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

@@ -0,0 +1,5 @@
+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>>;
+export default ColorField;

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

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

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

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

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

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

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

@@ -0,0 +1,6 @@
+import React from 'react';
+type Props = {
+    color: string;
+};
+declare const ColorSwatch: ({ color }: Props) => React.JSX.Element;
+export default ColorSwatch;

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

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

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

@@ -0,0 +1 @@
+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"];

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

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

package/dist/forms/index.d.ts

@@ -23,7 +23,8 @@ import FormFooter from './FormFooter';
 import FormFeedback from './FormFeedback';
 import PhoneField from './PhoneField';
 import NumberField from './NumberField';
-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, SIZE_25_PERCENT, SIZE_33_PERCENT, SIZE_50_PERCENT, SIZE_66_PERCENT, SIZE_75_PERCENT };
+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 type { PasswordCriteria } from './PasswordField/types';
 export type { SelectOption, SelectOptions, GroupOption, CustomOptionProps, SelectedOptionPrefixProps } from './SelectField/types';
 export type { PillSelectOption } from './PillSelectField/types';

package/dist/hooks/useTheme.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Don't use this hook directly. This is meant to be used internally by the SousChefProvider
+ * To access the current theme, use the useProviderConfig hook instead
+ */
+export declare const useTheme: () => "light" | "dark";

package/dist/icons/components/IconCheckCircle.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IconSize } from '../types';
+type Props = {
+    size?: IconSize;
+    color?: string;
+    testId?: string;
+} & React.SVGProps<SVGSVGElement>;
+declare const IconCheckCircle: React.ForwardRefExoticComponent<Omit<Props, 'ref'>>;
+export default IconCheckCircle;

package/dist/icons/components/IconCircleHalfStroke.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { IconSize } from '../types';
+type Props = {
+    size?: IconSize;
+    color?: string;
+    testId?: string;
+} & React.SVGProps<SVGSVGElement>;
+declare const IconCircleHalfStroke: React.ForwardRefExoticComponent<Omit<Props, 'ref'>>;
+export default IconCircleHalfStroke;

package/dist/icons/components/index.d.ts

@@ -37,11 +37,13 @@ export { default as IconCamera } from './IconCamera';
 export { default as IconCashRegister } from './IconCashRegister';
 export { default as IconChartBar } from './IconChartBar';
 export { default as IconCheckCircleIncomplete } from './IconCheckCircleIncomplete';
+export { default as IconCheckCircle } from './IconCheckCircle';
 export { default as IconCheck } from './IconCheck';
 export { default as IconChevronDown } from './IconChevronDown';
 export { default as IconChevronLeft } from './IconChevronLeft';
 export { default as IconChevronRight } from './IconChevronRight';
 export { default as IconChevronUp } from './IconChevronUp';
+export { default as IconCircleHalfStroke } from './IconCircleHalfStroke';
 export { default as IconClipboardList } from './IconClipboardList';
 export { default as IconClockExclamation } from './IconClockExclamation';
 export { default as IconClockRewind } from './IconClockRewind';

package/dist/index.css

@@ -429,6 +429,11 @@ body {
   color: var(--color-surface-on-color);
   background-color: var(--color-surface-color-dim) !important;
 }
+
+body * {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-neutral-black-transparent-50) transparent;
+}
 ._GFHBy {
   display: flex;
 }
@@ -692,6 +697,9 @@ Just for future references:
   background: var(--color-surface-inverse);
   color: var(--color-surface-on-inverse);
 }
+._UUdng a {
+  color: var(--color-surface-on-inverse);
+}
 ._brSNX {
   background: var(--color-surface-container);
   color: var(--color-surface-on-color);
@@ -1167,6 +1175,7 @@ Just for future references:
   min-width: 120px;
   padding: 20px;
   box-sizing: border-box;
+  border-radius: var(--border-radius-400);
 }
 ._AktVc {
   all: unset;
@@ -1442,7 +1451,10 @@ h5._i2LHD {
 ._91hvH {
   list-style: none;
   margin: -20px;
-  padding: 0;
+  padding: 8px;
+}
+._NrB4V {
+  border-radius: var(--border-radius-400);
 }
 ._aMs9c {
   background: linear-gradient(0deg, var(--color-hover-darken) 0%, var(--color-hover-darken) 100%), var(--color-surface-container);
@@ -1455,12 +1467,16 @@ h5._i2LHD {
 }
 ._W12mF {
   cursor: pointer;
+  min-width: 200px;
+  max-width: 300px;
+  border-radius: var(--border-radius-400);
 }
 ._Zu9cD {
   background-color: var(--color-primary-container-variant);
 }
 ._Zu9cD ._xS6fS {
   color: var(--color-primary-on-container-variant);
+  font-weight: var(--p-font-weight-bold);
 }
 ._Zu9cD ._7EI7m {
   color: var(--color-primary-on-container-variant);
@@ -1490,10 +1506,10 @@ h5._i2LHD {
   line-height: var(--font-line-height-200);
   font-weight: var(--p-font-weight-normal);
   color: var(--color-surface-on-color);
-  padding: 12px;
+  padding: 8px 12px;
   display: flex;
   white-space: nowrap;
-  gap: 8px;
+  gap: 12px;
   align-items: center;
 }
 ._7EI7m {
@@ -1521,6 +1537,33 @@ h5._i2LHD {
 ._vC0uY:focus {
   outline: none;
 }
+._ObP6B {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+._UA23u {
+  width: 16px;
+  height: 16px;
+}
+._dpo67 {
+  display: flex;
+  align-items: center;
+  line-height: 0;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+._X4fIx {
+  position: fixed;
+  z-index: var(--z-index-dropdown-level-2);
+  box-shadow: 0 0 12px -3px var(--color-shadow-overlay);
+  background: var(--color-surface-container);
+  transform-origin: top right;
+  min-width: 120px;
+  padding: 20px;
+  box-sizing: border-box;
+  border-radius: var(--border-radius-400);
+}
 ._TXXpM {
   position: relative;
   height: 100%;
@@ -1738,15 +1781,19 @@ h5._i2LHD {
 }
 ._2An1I {
   background-color: var(--color-warning-color);
+  color: var(--color-warning-on-color);
 }
 ._-Bw8L {
   background-color: var(--color-danger-color);
+  color: var(--color-danger-on-color);
 }
 ._RxlMz {
   background-color: var(--color-success-color);
+  color: var(--color-success-on-color);
 }
 ._dzCH- {
   background-color: var(--color-info-color);
+  color: var(--color-info-on-color);
 }
 ._Ix9tP {
   font-variant-numeric: tabular-nums;
@@ -5380,6 +5427,57 @@ input._TEU6N {
 ._iIsuB {
   background-image: url(./flags/zw.svg);
 }
+._LTVgG {
+  position: absolute;
+  background-color: var(--color-surface-color);
+  padding: 20px;
+  z-index: 1000;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 12px;
+  border-radius: var(--border-radius-400);
+  box-shadow: 0 0 12px -3px var(--color-shadow-overlay);
+}
+._R1mls {
+  width: 44px;
+  height: 44px;
+  padding: 4px;
+  box-sizing: border-box;
+  border: 0;
+  background: transparent;
+}
+._M-8rP {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: relative;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+._M-8rP::after {
+  content: "";
+  position: absolute;
+  top: -4px;
+  left: -4px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+}
+._o92fv::after {
+  border-color: var(--color-primary-color);
+}
+._QBSCQ:not(._o92fv)::after {
+  border-color: var(--color-outline);
+}
+._M-8rP:hover:not(._o92fv)::after {
+  border-color: var(--color-outline);
+}
+._UUuiJ {
+  border-radius: 100%;
+  width: 16px;
+  height: 16px;
+}
 ._V1U8v {
   display: flex;
   justify-content: center;