@7shifts/sous-chef 4.5.1 → 4.6.0

package/dist/overlay/Calendar/Calendar.d.ts

@@ -1,6 +1,7 @@
 import React, { MutableRefObject } from 'react';
 import { BlockedDays, WeekStart } from '../../utils/date';
 import { CalendarMode, CalendarPlacement } from './types';
+import { HighlightGroup } from '../../utils/highlight';
 type Props = {
     mode?: CalendarMode;
     /** Note that if the calendar is not able to fit in the selected position,
@@ -15,6 +16,9 @@ type Props = {
      * [doc](https://react-day-picker-v7.netlify.app/api/DayPicker#disabledDays) to see what
      * values you can use. */
     disabledDays?: BlockedDays;
+    /** Highlight one or more groups of dates, each with its own shape, colour
+     *  theme, and legend label, e.g. pay days or holidays. */
+    highlightedDays?: HighlightGroup[] | HighlightGroup;
     anchorRef: MutableRefObject<HTMLElement | null>;
     testId?: string;
     onMonthChange?: (month: Date) => void;

package/dist/overlay/Calendar/CalendarHighlights/CalendarHighlights.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { HighlightModifier } from '../../../utils/highlight';
+type Props = {
+    highlights: HighlightModifier[];
+};
+/** Legend rendered beneath a calendar, one row item per highlight group. */
+declare const CalendarHighlights: ({ highlights }: Props) => React.JSX.Element | null;
+export default CalendarHighlights;

package/dist/overlay/Calendar/CalendarHighlights/index.d.ts

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

package/dist/overlay/Calendar/domain.d.ts

@@ -1,7 +1,23 @@
 import { CalendarPlacement } from './types';
+import { Matcher } from 'react-day-picker';
+import { HighlightGroup, HighlightModifier } from '../../utils/highlight';
 type Position = {
     left: number;
     top: number;
 };
 export declare const calculateCalendarPosition: (placement: CalendarPlacement, anchorPosition: DOMRect, calendarDimensions?: DOMRect) => Position;
+type HighlightDayPickerProps = {
+    /** Pass straight to DayPicker's `modifiers`. */
+    modifiers?: Record<string, Matcher>;
+    /** Pass straight to DayPicker's `modifiersClassNames`. */
+    modifiersClassNames?: Record<string, string>;
+    /** Resolved groups for rendering the legend. */
+    items: HighlightModifier[];
+};
+/**
+ * Builds the DayPicker `modifiers`/`modifiersClassNames` for the given
+ * highlight groups, plus the resolved items for the legend. Shared by every
+ * calendar component so highlights look and behave identically.
+ */
+export declare const buildHighlightDayPickerProps: (highlightedDays?: HighlightGroup[] | HighlightGroup) => HighlightDayPickerProps;
 export {};

package/dist/utils/highlight-patterns.d.ts

@@ -0,0 +1,25 @@
+/** Day of the week, Sunday = 0 through Saturday = 6 (matches Date.getDay). */
+export type Weekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+type DateMatcher = (date: Date) => boolean;
+/**
+ * Matches the nth occurrence of a weekday within its month.
+ *
+ * @example nthWeekdayOfMonth(1, 1)       // first Monday of every month
+ * @example nthWeekdayOfMonth(5, 'last')  // last Friday of every month
+ */
+export declare const nthWeekdayOfMonth: (weekday: Weekday, nth: number | 'last') => DateMatcher;
+/**
+ * Matches a weekday on a repeating week interval, aligned to `from`.
+ *
+ * @example everyOtherWeekday(5, { from: firstPayDay })  // every other Friday
+ * @example everyOtherWeekday(1, { interval: 3 })        // every third Monday
+ */
+export declare const everyOtherWeekday: (weekday: Weekday, options?: {
+    from?: Date;
+    interval?: number;
+}) => DateMatcher;
+/** Matches the first day of every month. */
+export declare const firstOfMonth: () => DateMatcher;
+/** Matches the last day of every month. */
+export declare const lastOfMonth: () => DateMatcher;
+export {};

package/dist/utils/highlight.d.ts

@@ -0,0 +1,47 @@
+import { Matcher } from 'react-day-picker';
+export declare const HIGHLIGHT_SHAPE: {
+    readonly CIRCLE: "circle";
+    readonly CIRCLE_DASHED: "circle-dashed";
+    readonly SQUARE: "square";
+    readonly SQUARE_DASHED: "square-dashed";
+    readonly OCTAGON: "octagon";
+    readonly STAR: "star";
+};
+export type HighlightShape = (typeof HIGHLIGHT_SHAPE)[keyof typeof HIGHLIGHT_SHAPE];
+/** Semantic colour themes for highlight indicators. Mirrors the design
+ *  system feedback colours so highlights stay on-brand in light and dark. */
+export type HighlightTheme = 'success' | 'danger' | 'warning' | 'info' | 'upsell' | 'neutral';
+export type HighlightGroup = {
+    /** Dates to highlight. Accepts any react-day-picker Matcher: a fixed
+     *  Date, an array of dates, a { from, to } range, { dayOfWeek }, or a
+     *  (date: Date) => boolean function for custom patterns. Reach for the
+     *  pattern helpers (nthWeekdayOfMonth, everyOtherWeekday, firstOfMonth,
+     *  lastOfMonth) for common recurring patterns. */
+    dates: Matcher | Matcher[];
+    /** Label shown in the legend beneath the calendar, e.g. "Pay Days". */
+    label: string;
+    /** Semantic colour theme for the indicator. Defaults to 'success'. */
+    theme?: HighlightTheme;
+    /** Indicator shape. Colour and shape are independent so they can be
+     *  combined freely — this also aids accessibility by not relying on
+     *  colour alone to differentiate groups. Defaults to 'circle'. */
+    shape?: HighlightShape;
+};
+export declare const DEFAULT_HIGHLIGHT_THEME: HighlightTheme;
+export declare const DEFAULT_HIGHLIGHT_SHAPE: HighlightShape;
+export type HighlightModifier = {
+    /** Unique react-day-picker modifier key for this group. */
+    key: string;
+    /** Matcher that resolves true only for days owned by this group. */
+    matcher: (date: Date) => boolean;
+    shape: HighlightShape;
+    theme: HighlightTheme;
+    label: string;
+};
+/**
+ * Turns the public `highlightedDays` array into per-group react-day-picker
+ * modifiers. When a day matches more than one group, the earliest group in
+ * the array wins its indicator (later groups' matchers exclude days already
+ * owned by an earlier group), so each day renders a single shape.
+ */
+export declare const getHighlightModifiers: (groups: HighlightGroup[]) => HighlightModifier[];

package/package.json

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