@7shifts/sous-chef 4.12.0 → 4.13.0

package/dist/media/Avatar/AvatarContext.d.ts

@@ -0,0 +1,6 @@
+type AvatarContextType = {
+    size: 'small' | 'medium' | 'large' | 'extra-large' | null;
+};
+declare const AvatarContext: import("react").Context<AvatarContextType>;
+export declare const useAvatarContext: () => AvatarContextType;
+export default AvatarContext;

package/dist/media/Avatar/AvatarImage/AvatarImage.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 type Props = {
-    url?: string;
-    color?: string;
+    url: string;
     alt?: string;
     onImageFallbackError: () => void;
+    onImageLoad: () => void;
 };
 declare const AvatarImage: React.FC<Props>;
 export default AvatarImage;

package/dist/media/Badge/Badge.d.ts

@@ -4,6 +4,11 @@ type Props = {
     theme?: 'success' | 'danger' | 'warning' | 'info';
     /** This will show a black tooltip when the user hover the badge */
     title?: string;
+    /**
+     * `default` renders the badge with its content. `dot` renders a
+     * small solid circle with no content — used by small/medium Avatars.
+     */
+    size?: 'dot' | 'default';
     testId?: string;
 };
 /**

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

@@ -16,6 +16,8 @@ type Props = {
     height?: number | string;
     maxWidth?: number | string;
     shouldReturnFocusAfterClose?: boolean;
+    /** It is the bar that contains additional icons, displayed next to the close button. */
+    iconBar?: React.ReactNode;
     testId?: string;
     /** The source URL for the image to be displayed in the modal header. */
     imageSrc?: string;
@@ -26,12 +28,14 @@ type Props = {
         top: number;
         left: number;
     };
+    /** A TabList to render pinned between the header and body. Wrap the entire Modal in a Tabs component and place TabPanel children inside ModalBody. */
+    tabList?: React.ReactNode;
 } & DataProps;
 /**
  * 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, imageSrc, draggable, initialPosition, ...otherProps }: Props): React.JSX.Element;
+    ({ children, header, subHeader, onClose, loading, zIndex, rootElementId, width, height, maxWidth, shouldReturnFocusAfterClose, testId, imageSrc, draggable, initialPosition, tabList, iconBar, ...otherProps }: Props): React.JSX.Element;
     setAppElement(rootElement: string | HTMLElement): void;
 };
 export default Modal;

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

@@ -3,6 +3,7 @@ export type ModalContextType = {
     isModalMounted: boolean;
     modalBodyRef: React.RefObject<HTMLDivElement>;
     draggable: boolean;
+    hasTabList: boolean;
 };
 declare const ModalContext: React.Context<ModalContextType>;
 export declare const useModalContext: () => ModalContextType;

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

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

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

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

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

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

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

@@ -25,18 +25,32 @@
 
 ### Structure
 
-A Modal is composed of four parts: the `Modal` wrapper (which handles the overlay and focus trapping), a `header` which contains the title (and an optional `subHeader`), a `ModalBody` for content, and a `ModalFooter` for actions. The `header` and optional `subHeader` appear at the top of the modal.
+A Modal is composed of five parts: the `Modal` wrapper (which handles the overlay and focus trapping), a `topbar` which acts as the top padding of the modal and holds the close button, a `header` which contains the title (and an optional `subHeader`), a `ModalBody` which is a slot for all the bespoke modal content, and a `ModalFooter` for actions.
 
 ### Sizing
 
--   Modals by default are `500px` wide. We recommend sticking to this size whenever possible.
+-   Modals by default are `545px` wide. We recommend sticking to this size whenever possible.
 -   A modal's height is variable based on the content. We recommend never making a modal more than `750px` in height.
 -   Avoid making a modal so large it feels like a full page; if content is that complex, consider whether a dedicated page is more appropriate.
 
-### Non-closable modals
+### Variants
+
+#### Non-closable modals
 
 When `onClose` is omitted, the modal renders without a close button. Use this sparingly — during loading, for flows where closing partway through would leave data in an inconsistent state or for a critical action the user cannot ignore.
 
+#### Image modals
+
+When `imageSrc` is passed, the modal renders with a large banner image at the top. Use this when you want to add visual impact to a modal. For example, in a promotional message or kicking off a new workflow.
+
+This image has a fixed height of `200px` and the width matches the width of the modal. Make sure to crop and export your image to the exact size to avoid clipping or warping.
+
+Note that the close `button` and icons in the icon bar have a distinct transparent fill in order to ensure they are still visible over the chosen image.
+
+#### Draggable modals
+
+`draggable` modals allow the user to move the modal around the canvas and do not apply an overlay to the rest of the canvas allowing users to keep interacting with it while the modal is open. Use these when the function of the modal is critically connected to the content of the page. For example, creating or editing a shift on the schedule, where the user may need to reference information on the schedule while creating their new shift.
+
 ## Tips & Tricks
 
 -   Modals are high interruption and high interaction. Use them deliberately — every unnecessary modal trains users to dismiss them without reading.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@7shifts/sous-chef",
-    "version": "4.12.0",
+    "version": "4.13.0",
     "description": "7shifts component library",
     "author": "7shifts",
     "license": "MIT",
@@ -21,6 +21,7 @@
         "build-tokens": "./scripts/build-tokens.sh",
         "build-colors": "./scripts/tokens/build-colors.sh",
         "build-zindexes": "./scripts/tokens/build-z-indexes.sh",
+        "build:analytics": "node ./scripts/build-analytics.js",
         "build-llms": "run-s build-llms-components build-llms-icons-and-illustrations build-llms-tokens build-llms-guidelines",
         "build-llms-components": "node ./scripts/build-llms-components.js",
         "build-llms-icons-and-illustrations": "node ./scripts/build-llms-icons-and-illustrations.js",
@@ -42,7 +43,7 @@
         "storybook:build": "storybook build -o ./.storybook/dist --loglevel info",
         "new:component": "node ./scripts/new-component.js",
         "changeset": "changeset",
-        "version": "changeset version",
+        "version": "changeset version && yarn build-tokens && yarn build-llms",
         "release": "changeset publish"
     },
     "peerDependencies": {