@7shifts/sous-chef 4.10.3 → 4.11.0

package/dist/overlay/Modal/Modal.d.ts

@@ -17,6 +17,8 @@ type Props = {
     maxWidth?: number | string;
     shouldReturnFocusAfterClose?: boolean;
     testId?: string;
+    /** The source URL for the image to be displayed in the modal header. */
+    imageSrc?: string;
     /** Enables drag-to-reposition. The overlay becomes transparent and the modal can be moved by dragging its header. */
     draggable?: boolean;
     /** Initial screen position when draggable is true. Defaults to centered horizontally at 25% from top. */
@@ -29,7 +31,7 @@ type Props = {
  * Modal is a focused overlay that interrupts the current experience and demands the user's attention. It blocks all interaction with the rest of the page until the user responds — making it best suited for decisions, confirmations, and self-contained flows where that level of focus is warranted.
  */
 declare const Modal: {
-    ({ children, header, subHeader, onClose, loading, zIndex, rootElementId, width, height, maxWidth, shouldReturnFocusAfterClose, testId, draggable, initialPosition, ...otherProps }: Props): React.JSX.Element;
+    ({ children, header, subHeader, onClose, loading, zIndex, rootElementId, width, height, maxWidth, shouldReturnFocusAfterClose, testId, imageSrc, draggable, initialPosition, ...otherProps }: Props): React.JSX.Element;
     setAppElement(rootElement: string | HTMLElement): void;
 };
 export default Modal;

package/dist/overlay/Modal/ModalContext.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export type ModalContextType = {
     isModalMounted: boolean;
+    modalBodyRef: React.RefObject<HTMLDivElement>;
     draggable: boolean;
 };
 declare const ModalContext: React.Context<ModalContextType>;

package/dist/overlay/Modal/ModalHeader/ModalHeader.d.ts

@@ -4,6 +4,7 @@ type Props = {
     subHeader?: React.ReactNode;
     onClose?: () => void;
     loading?: boolean;
+    imageSrc?: string;
 };
-declare const ModalHeader: ({ header, subHeader, onClose, loading }: Props) => React.JSX.Element | null;
+declare const ModalHeader: ({ header, subHeader, onClose, loading, imageSrc }: Props) => React.JSX.Element;
 export default ModalHeader;

package/llms-instructions/guidelines/Pill.guidelines.md

@@ -51,5 +51,4 @@ Pill's theme controls its colour and signals the nature of the status at a glanc
 ## Additional Rules
 
 -   `theme` defaults to `default` if not specified.
--   When `children` is a string or non-numeric value, an `alphabetical` style variant is applied automatically for appropriate letter-spacing and padding.
 -   Pill accepts a forwarded ref, making it usable as an anchor for tooltips or popovers when additional context is needed.

package/llms-instructions/guidelines/ShortcutKey.guidelines.md

@@ -0,0 +1,61 @@
+<!-- AUTO-GENERATED by scripts/build-llms-guidelines.js. Do not edit manually. Run `yarn build-llms-guidelines` to regenerate. -->
+
+## When to Use
+
+-   As a suffix in a dropdown menu item to show the keyboard shortcut for that action
+-   Inside a tooltip associated with a button or icon to reveal its shortcut
+-   In body copy or instructional text when teaching a user a specific key combination
+-   Anywhere a keyboard shortcut needs to be communicated inline alongside its associated action
+
+## When Not to Use
+
+-   As a standalone element without a clear association to a command, tool, or action — ShortcutKey must always appear next to what it triggers so users understand what the shortcut does
+-   To communicate more than three keys — the maximum supported is three
+-   As an interactive element — ShortcutKey is display-only and has no hover, focus, or active states
+
+## Usage
+
+### Key combinations
+
+ShortcutKey supports one, two, or three key slots. Use the minimum number of keys that accurately represent the shortcut:
+
+| Combo  | When to use                                                     | Example         |
+| ------ | --------------------------------------------------------------- | --------------- |
+| 1 key  | Single-key shortcuts — a letter, number, function key, or arrow | `Z`, `F5`, `↑`  |
+| 2 keys | Two-key combinations — typically a modifier + a key             | `⌘ Z`, `Ctrl V` |
+| 3 keys | Three-key combinations — modifier + modifier + key              | `⌘ ⇧ Z`         |
+
+Do not use more than three keys. If a shortcut requires four or more keys, it is too complex to represent with this component.
+
+### Key types
+
+The `keys` prop accepts named special keys and plain character strings:
+
+| Category          | `keys` value(s)                                                         | Displays                  |
+| ----------------- | ----------------------------------------------------------------------- | ------------------------- |
+| Alphanumeric      | Any single character A-Z, 0-9 or punctuation keys — `'Z'`, `'1'`, `'/'` | The character, uppercased |
+| Mac modifiers     | `'command'`, `'option'`, `'shift'`, `'control'`, `'fn'`                 | ⌘ ⌥ ⇧ ⌃ Fn                |
+| Windows modifiers | `'ctrl'`, `'alt'`, `'shift'`                                            | Ctrl Alt ⇧                |
+| Special keys      | `'enter'`, `'delete'`, `'escape'`, `'tab'`, `'capslock'`                | ⏎ ⌫ Esc ↹ ⇪               |
+| Arrow keys        | `'arrow-left'`, `'arrow-right'`, `'arrow-up'`, `'arrow-down'`           | ← → ↑ ↓                   |
+| Function keys     | `'f1'` through `'f12'`                                                  | F1 … F12                  |
+
+### Mac vs. Windows
+
+Use platform-appropriate modifier keys for the audience. When showing Mac shortcuts, use `'command'`, `'option'`, and `'control'`. When showing Windows shortcuts, use `'ctrl'` and `'alt'`. `'shift'` is shared across both platforms.
+
+## Tips & Tricks
+
+-   ShortcutKey should never appear without its associated command in view. A user seeing `⌘ Z` in isolation cannot know what it does — place it where the action label or context makes it self-evident.
+-   Modifier keys should come first in the key order, followed by the primary key. Conventional order: Ctrl/Command → Alt/Option → Shift → Key.
+-   Use ShortcutKey consistently. If `⌘ Z` is shown for "Undo" in one menu, it should use the same component anywhere else in the product where the same shortcut is referenced.
+-   Do not use ShortcutKey to label shortcuts that do not actually work in the current context — showing a shortcut that doesn't function erodes trust.
+-   When using a key that shares characters (such as `? and /`, `: and ;` or `+ and =`) always use the character that does not require the shift modifyer to input.
+
+## Additional Rules
+
+-   `keys` accepts 1, 2, or 3 values. Passing an empty array or more than 3 values is not supported.
+-   Alphanumeric key values are displayed uppercase regardless of how they are passed.
+-   The component renders with `role="img"` and an auto-generated `aria-label` that describes the full key combination in plain English (e.g. "Command + Shift + Z"). No manual `aria-label` is needed.
+-   ShortcutKey has no hover, active, or focus states — it is purely presentational.
+-   `user-select: none` is applied so users cannot accidentally select the key cap characters when selecting nearby text.

package/llms-instructions/llms-components.md

@@ -216,6 +216,10 @@ A chip is similar looking to pill, but is instead used to convey system status s
 
 A Pill is used to inform users on the status of a nearby object or of an action that’s been taken. The default state is used to convey general status or state, such as: Pending Unavailable, Inactive.
 
+### ShortcutKey
+
+ShortcutKey is a display-only component used to communicate a keyboard shortcut associated with an action, tool, or command. It supports 1–3 key combinations and should always appear alongside the action it triggers.
+
 ## Layout
 
 Layout components structure and arrange the content of a page.

package/llms-instructions/llms-icons-and-illustrations.md

@@ -47,6 +47,7 @@ Available icon components:
 -   IconArrowDown
 -   IconArrowDownWideShort
 -   IconArrowLeft
+-   IconArrowLeftRight
 -   IconArrowRight
 -   IconArrowToTop
 -   IconArrowTurnDownRight
@@ -94,6 +95,7 @@ Available icon components:
 -   IconComment
 -   IconCommentLines
 -   IconEnvelope
+-   IconLanguage
 -   IconMessages
 -   IconMicrophone
 -   IconMobile
@@ -119,10 +121,12 @@ Available icon components:
 -   IconGripVertical
 -   IconHouse
 -   IconImage
+-   IconInputText
 -   IconItalic
 -   IconLink
 -   IconList
 -   IconListOl
+-   IconListRadio
 -   IconLock
 -   IconMemoMagnifyingGlass
 -   IconMinus
@@ -233,6 +237,7 @@ Available icon components:
 -   IconDeleteLeft
 -   IconExclamation
 -   IconExclamationTriangle
+-   IconInfinity
 -   IconInfoCircle
 -   IconQuestionCircle
 -   IconTimesOctagon

package/llms-instructions/llms-tokens.md

@@ -83,7 +83,7 @@ Instead, try to use a semantic color token instead.
 | --color-oat-300        | #c7c0b2    |
 | --color-oat-400        | #6e6d6c    |
 | --color-oat-500        | #4c4b49    |
-| --color-oat-600        | #383430    |
+| --color-oat-600        | #413E3E    |
 | --color-lime-100       | #efffe0    |
 | --color-lime-200       | #c6ff94    |
 | --color-lime-300       | #81ffac    |
@@ -366,10 +366,11 @@ Ideally, you won't need to use the typography tokens, as you will be using the S
 
 ### Font family
 
-| Token                 | Value                |
-| --------------------- | -------------------- |
-| --font-family-heading | 'SF Pro', sans-serif |
-| --font-family-body    | 'SF Pro', sans-serif |
+| Token                 | Value               |
+| --------------------- | ------------------- |
+| --font-family-heading | 'Inter', sans-serif |
+| --font-family-body    | 'Inter', sans-serif |
+| --font-family-primary | 'Inter', sans-serif |
 
 ### Font size
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@7shifts/sous-chef",
-    "version": "4.10.3",
+    "version": "4.11.0",
     "description": "7shifts component library",
     "author": "7shifts",
     "license": "MIT",