@7shifts/sous-chef 4.6.1 → 4.7.0

package/dist/utils/date.d.ts

@@ -13,6 +13,7 @@ export declare function createWeekRange(date: Date, weekStart: WeekStart): FullD
  * @param translate pass the translation function returned from the `useTranslate` hook
  */
 export declare const getDays: (translate: TranslateFunction) => string[];
+export declare const getDaysShort: (translate: TranslateFunction) => string[];
 /**
  * @param translate pass the translation function returned from the `useTranslate` hook
  */

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

@@ -26,10 +26,27 @@ Calendar positions itself relative to the trigger element. It opens below the an
 
 Use `disabledDays` to prevent selection of dates that aren't valid choices — past dates, dates outside a booking window, or dates already taken.
 
+### Highlighting days
+
+You can highlight a specific day on the calendar with a special visual treatment. This can be useful for showing a user that a day has special significance that might affect their decision making. For example:
+
+-   highlighting the pay days in a pay cycle.
+-   highlighting a day someone is unavailable to work.
+-   highlighting someone's birthday.
+
+You can highlight a specific date, or an array of multiple specified dates. You can also use simple logic to highlight a series of days such as `Last of the Month`, `Every other day`, `Every other Friday`, `14th of every month`, etc.
+
+Highlights offer 6 different shapes (circle, circle-dashed, square, square-dashed, octagon, star) and can use one of our 6 colour themes. Shapes and colors are independent of each other, and you are free to use any combination you need. You must also return a label for each of the highlights that will show up in the legend under the calendar.
+
+Do not use the same shape more than once with different colours. This is an accessibility issue. Instead try to use a variety of shapes with different colours.
+
+[See examples of all 6 shapes](https://souschef.7shifts.com/?path=/story/components-forms-daterangefield--with-multiple-highlight-groups)
+
 ## Tips & Tricks
 
 -   Use `initialMonth` to open the calendar at a relevant month when the context implies one — for example, opening at the month of the currently selected date rather than always defaulting to today.
 -   Disabled days should feel visually obvious. Don't rely solely on click prevention — ensure the styling makes it clear which dates are selectable at a glance.
+-   When highlighting more than one type of day on the calendar, make sure to use a variety of shapes as well as colours to keep the design accessibile.
 
 ## Additional Rules
 

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

@@ -16,15 +16,15 @@
 
 ## Usage
 
-### Small Small should be used either when only a portion of the content on a page
+### Small
 
-isn't shown or when a sub-feature on a page isn't shown.{' '}
+Small should be used either when only a portion of the content on a page isn't shown or when a sub-feature on a page isn't shown.
 
 ### Medium
 
 Also known as horizontal empty states. Used inline either when only a portion of the content on a page isn't shown or when a sub-feature on a page isn't shown. They differ from Small in that they provide the user more context to the empty state and they have some kind of call-to-action.
 
-### large
+### Large
 
 Also known as the Full Page empty states. Used when an entire page isn't available.
 

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

@@ -8,7 +8,7 @@
 
 ## When Not to Use
 
--   If there is a large data set and the user needs to be able quickly pick out a single item. If you are using this pattern consider including a search.
+-   If there is a large data set and the user needs to be able to quickly pick out a single item. If you are using this pattern consider including a search.
 -   When records load continuously as the user scrolls — use infinite scroll instead
 -   When there is only ever one page of results — hide or omit the controls entirely rather than rendering them in a permanently disabled state
 

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

@@ -26,7 +26,6 @@
 ## Additional Rules
 
 -   Use `onDismiss` to let the user close the banner. When provided, a close button appears automatically. Managing whether the banner re-appears is the responsibility of the caller.
-    `theme` defaults to "info". Always pass it explicitly.
 -   `theme` defaults to `"info"`. Always pass it explicitly.
 -   `primaryButton` and `secondaryButton` accept `Button` elements. The component forcefully applies `hollow-contrast` to the primary button and `link-contrast` to the secondary button — any `theme` passed on the button itself will be overridden.
 -   `onLoad` fires once on mount — use it to trigger analytics or logging when the banner becomes visible.

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

@@ -13,9 +13,11 @@
 -   When there are too many options to comfortably fit in the frame.
 -   When the user is submitting a value as part of a form — use a radio group instead.
 -   When the options trigger an action rather than change a view — use a `Button` group instead
+-   To swap between 2 binary settings or options - use `toggle` instead
 
 ## Usage
 
+-   Typically `SegmentedControls` is used in association with another component or section of a page. Its typically used in a toolbar, above the item its affecting.
 -   You may include as many items as necessary and will fit in your frame, however the SegmentedControl should never be longer than the component it is controlling.
 -   Keep option labels short — one or two words. The control is sized to its content, so long labels create an unbalanced layout.
 -   Use nouns or short noun phrases that describe the view, not verbs — "Day", "Week", "Month", not "Show Day", "Show Week".

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

@@ -17,12 +17,10 @@
 -   The default `size` of 28px suits most contexts. Increase it only when the spinner needs to fill a large empty area.
 -   Spinners have their own unique set of themes. These differ from the semantic themes that apply to other components like banners.
 
-| Theme      | When to use                                                              |
-| ---------- | ------------------------------------------------------------------------ |
-| `mint`     | Standard backgrounds (default)                                           |
-| `contrast` | Inverse-coloured surfaces that require more visual contrast              |
-| `disabled` | Inside a disabled element such as a disabled `Button` in a loading state |
-| `pride`    | Seasonal spinner that is active during pride month (June 1-30)           |
+| Theme | When to use | |---|---| | `mint` | Standard backgrounds (default)
+| | `contrast` | Inverse-coloured surfaces that require more visual contrast | |
+`disabled` | Inside a disabled element such as a disabled `Button` in a loading state|
+| `pride` | Seasonal spinner that is active during pride month (June 1-30)|
 
 ## Additional Rules
 

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

@@ -0,0 +1,65 @@
+<!-- AUTO-GENERATED by scripts/build-llms-guidelines.js. Do not edit manually. Run `yarn build-llms-guidelines` to regenerate. -->
+
+## When to Use
+
+-   When a page or modal contains distinct sections of content that don't need to be visible at the same time
+-   When users are likely to switch between sections — not just read one
+-   When the sections are parallel in nature and at the same level of hierarchy
+
+## When Not to Use
+
+-   As a replacement for primary navigation — use `PrimaryNav` for top-level sections of the product
+-   When users need to compare content across sections — tabs hide all but one panel, making comparison difficult
+-   When changing content views on a single component or table — consider a `SegmentedControl` instead
+-   When the sections have a meaningful sequence or dependency — consider a stepper or a single scrollable page
+
+## Usage
+
+### Tab labels
+
+Keep tab labels short — one or two words at most. Labels should name the content category, not describe an action. Use sentence case.
+
+### Suffix slot
+
+Each `Tab` accepts a `suffix` prop for a `Badge`, `Chip` or `icon` rendered after the label. Use a `Badge` to show a count of items in that panel. Use a `Chip` to flag something new or upgraded.
+
+### Disabled tabs
+
+Pass `disabled` on a `Tab` to prevent selection. Use this sparingly — a disabled tab with no explanation is confusing. To provide clarity to the user you can try:
+
+-   Adding a lock or upsell icon in the suffix to help explain why the tab is disabled.
+-   Keep the tab active, and show an empty state inside the panel explaining why content might not be accessible to them.
+-   Hide the tab entirely.
+
+### Uncontrolled vs. controlled
+
+Tabs support two modes. In **uncontrolled** mode, pass `defaultValue` to set the initially active tab and let the component manage its own state. In **controlled** mode, pass `value` and `onValueChange` to sync the active tab with external state — useful when the active tab reflects a URL parameter or needs to respond to events outside the component.
+
+```tsx
+{
+    /* Uncontrolled */
+}
+<Tabs defaultValue="schedule">...</Tabs>;
+
+{
+    /* Controlled */
+}
+<Tabs value={activeTab} onValueChange={setActiveTab}>
+    ...
+</Tabs>;
+```
+
+## Additional Rules
+
+-   Every `Tab` must have a `value` prop, and its matching `TabPanel` must use the same `value`.
+-   Either `defaultValue` or `value` must be provided on `<Tabs>` — omitting both leaves no tab selected.
+-   `TabPanel` content is unmounted when inactive by default. Pass `forceMount` to keep it in the DOM — useful when the panel contains state that should not be lost on tab switch.
+-   `TabList` accepts an `aria-label` prop. Set it when more than one `Tabs` instance exists on the same page so screen readers can distinguish between them.
+-   `TabList` and `TabPanel` can be placed in different parts of the tree — only the root `<Tabs>` wrapper needs to enclose both. This is useful when the tab bar and content area are rendered in separate layout regions.
+
+## Accessibility
+
+-   Keyboard navigation follows the ARIA tabs pattern: `ArrowLeft` / `ArrowRight` move between tabs, `Home` jumps to the first, `End` jumps to the last.
+-   Each `Tab` is linked to its `TabPanel` via `aria-controls` and `aria-labelledby` automatically.
+-   `aria-selected` reflects the active tab state.
+-   Only the active tab is in the tab order (`tabIndex={0}`); inactive tabs use `tabIndex={-1}` and are reached with arrow keys, not Tab.

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

@@ -0,0 +1,52 @@
+<!-- AUTO-GENERATED by scripts/build-llms-guidelines.js. Do not edit manually. Run `yarn build-llms-guidelines` to regenerate. -->
+
+## When to Use
+
+-   When a user needs to pick days from specific range - such as choosing which days of the schedule to publish.
+-   When the user already selected a week or has the context of which week is being displayed.
+
+## When Not to Use
+
+-   When no specific calendar week is involved and only weekday names matter — use `PillSelectField` with day-of-week options instead
+-   When users need to pick dates across multiple weeks or a date range — use `DateRangeField`
+-   When the user needs to see the full calendar for additional context.
+
+## Usage
+
+### Label and Caption
+
+Always provide a `label` so users understand what the day selection controls. The `caption` is an ideal place to display the formatted date range of the week — for example "June 14 – June 20" — which anchors the pills in real time and reduces ambiguity about which week is shown.
+
+### The Week
+
+Pass the days of the week as an array of `Date` objects via the `days` prop. The row doesn't have to be exactly 7 days — a partial week or a Mon–Sun arrangement both work. Days are displayed in the order they appear in the array, so pass them in chronological order.
+
+### Pre-selecting Days
+
+Pass a `value` array to control which days start selected. For a standard working-week scenario, pre-selecting Monday through Friday is a sensible default. Days not included in `value` render as unselected.
+
+### Error State
+
+Use the `error` prop to surface a validation message — for example, "At least one day must be selected." The message appears below the pills and the field is marked as invalid for screen readers.
+
+### Display Format
+
+By default each pill shows the weekday abbreviation above the date number — "Mon 16", "Tue 17". Setting `displayFormat="month"` swaps the top label to show the month abbreviation instead — "Jan 16", "Feb 17". Use the month format when the days being shown span more than one month, or when the month is more meaningful context than the day of the week — for example, when selecting days across a multi-week planning window.
+
+### Disabled State
+
+Set `disabled` to prevent interaction with all pills. Use this when a week's schedule has been locked, submitted, or when the user doesn't have permission to edit the selection.
+
+## Tips & Tricks
+
+-   The `caption` or `label` is the best place to show the week's date range if the user needs that context. It sits close to the pills and gives users the calendar context they need without taking up extra space.
+-   Pre-selecting Mon–Fri is a natural default for most scheduling use cases — it matches the most common working-week expectation and saves users an extra step.
+-   The `days` array doesn't need to be exactly 7 entries. If the context involves a partial week — for example, the remaining days of an in-progress week — just pass those dates.
+
+## Additional Rules
+
+-   `days` and `name` are both required. `days` must be an array of valid `Date` objects in chronological order.
+-   For **uncontrolled** use (inside a Formik form), omit `value` and `onChange` — the field reads and writes through Formik context automatically via `name`.
+-   For **controlled** use, pass both `value` and `onChange`. The `onChange` callback receives the full updated `Date[]`, not a diff — replace the previous value entirely.
+-   `displayFormat` defaults to `'weekday'`. Set to `'month'` to show the month abbreviation instead of the weekday abbreviation on each pill.
+-   Day pill labels are derived from the date's weekday index, month index, and calendar day number. The component does not localize or format dates — pass dates in the correct local timezone.

package/llms-instructions/llms-components.md

@@ -4,7 +4,7 @@
 
 All component APIs and use cases are defined in the Storybook MCP. You can get detailed information about any specific component.
 
-In this document, you will find a list of the available components grouped by category, with a short description of what each one does.
+In this document, you will find a list of documented components grouped by category, with a short description of what each one does.
 
 If you want information (props, guidelines) about an specific component, you can use the tool sous-chef_get_component_details, providing the name of the component as an argument.
 
@@ -98,7 +98,7 @@ Form components are used to collect user input and data.
 
 ### ColorField
 
-Color fields allow users to select a color from a predefined set of options. They are ideal for settings or configurations where color selection is necessary.
+Color fields allow users to select a color from a predefined set of options, or pick a custom color via the native color picker. They are ideal for settings or configurations where color selection is necessary.
 
 ### FormFeedback
 
@@ -116,6 +116,10 @@ FormFeedback is used to indicate an error within a form, for example when there
 
 A field for entering phone numbers. It includes a selection field for country code and can validate phone numbers.
 
+### WeekSelectField
+
+A week-scoped day selector. Pass an array of 7 dates representing a week and let users pick which days apply. Each pill displays the 3-letter weekday abbreviation and the calendar date.
+
 ## Media
 
 Media components display compact visual or status information, such as avatars and labels.
@@ -188,6 +192,10 @@ Used on top of pages to let the user navigate back to parent routes. IMPORTANT:
 
 PrimaryNav is the main navigation component for Sous Chef. It provides a vertical navigation menu with support for nested sub-items, badges, and a footer section. The navigation can be expanded or collapsed, and it highlights the active item based on the current selection. The component is designed to be flexible and customizable, allowing for various use cases within the application.
 
+### Tabs
+
+Compound component for horizontal tab navigation. Supports uncontrolled (`defaultValue`) and controlled (`value` + `onValueChange`) modes. `TabList` and `TabPanel` can live in different parts of the tree — only the root `` needs to wrap both.
+
 ## Overlay
 
 Overlays are components that render on top of the main page.

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

@@ -211,6 +211,7 @@ Available icon components:
 -   IconPlateUtensils
 -   IconPlug
 -   IconRocket
+-   IconSchool
 -   IconSparkle
 -   IconStickyNoteLines
 -   IconStore

package/llms-instructions/llms-tokens.md

@@ -399,14 +399,10 @@ Ideally, you won't need to use the typography tokens, as you will be using the S
 
 | Token                    | Value |
 | ------------------------ | ----- |
-| --p-font-weight-thin     | 100   |
-| --p-font-weight-light    | 200   |
-| --p-font-weight-normal   | 300   |
-| --p-font-weight-medium   | 400   |
+| --p-font-weight-light    | 300   |
+| --p-font-weight-normal   | 400   |
 | --p-font-weight-semibold | 500   |
 | --p-font-weight-bold     | 600   |
-| --p-font-weight-heavy    | 700   |
-| --p-font-weight-black    | 800   |
 
 ## Border radius
 
@@ -446,7 +442,7 @@ In Sous Chef, we have the `Stack` and `Inline` components that are responsible f
 <Stack space={12}>
     <Card>Card 1</Card>
     <Card>Card 2</Card>
-<Stack>
+</Stack>
 ```
 
 In the application level, it might be available a SCSS variable for spacing:

package/package.json

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