@bpfdev/oly-ui 1.0.6 → 1.0.7

package/dist/index.d.mts

@@ -187,6 +187,12 @@ type WidgetHeaderFilterStyleProps = Pick<FalconMultiSelectStyleProps, 'triggerBg
     popperMatchTrigger?: boolean;
     /** Merged into the dropdown `Paper` after base styles (e.g. `minWidth`, `maxWidth`, padding). */
     popperSx?: SxProps<Theme>;
+    /** Merged onto the trigger **label** `Typography` (first line) after built-in font styles. */
+    triggerLabelSx?: SxProps<Theme>;
+    /** Merged onto the trigger **value** `Typography` (second line, selected item) after built-in font styles. */
+    triggerValueSx?: SxProps<Theme>;
+    /** Merged onto each option row `ListItemButton` after built-in padding / height / border styles. */
+    listItemSx?: SxProps<Theme>;
 };
 /** Props for the widget header filter: two-line trigger + simple option list. */
 type WidgetHeaderFilterProps = {
@@ -244,7 +250,7 @@ type WidgetHeaderMultiSelectConfig = WidgetHeaderFilterProps;
  * Widget header filter styled like the provided mock:
  * two-line trigger + simple dropdown list.
  */
-declare const WidgetHeaderFilter: ({ label, list, groupedList, data, setData, triggerBg, triggerColor, triggerMinWidth, triggerBorderRadius, triggerSx, popperMatchTrigger, popperWidth, popperSx, popperBorderColor, popperBorderColorDark, popperBg, popperBgDark, popperColor, popperColorDark, multiSelect, searchPlaceholder, applyLabel, cancelLabel, checkboxColor, checkboxCheckedColor, groupHeaderBg, groupHeaderColor, groupHeaderFontSize, optionTextColor, searchIconColor, searchTextColor, searchPlaceholderColor, applyBg, applyColor, cancelBg, cancelColor, cancelBorderColor, }: WidgetHeaderFilterProps) => react_jsx_runtime.JSX.Element;
+declare const WidgetHeaderFilter: ({ label, list, groupedList, data, setData, triggerBg, triggerColor, triggerMinWidth, triggerBorderRadius, triggerSx, popperMatchTrigger, popperWidth, popperSx, popperBorderColor, popperBorderColorDark, popperBg, popperBgDark, popperColor, popperColorDark, multiSelect, searchPlaceholder, applyLabel, cancelLabel, checkboxColor, checkboxCheckedColor, groupHeaderBg, groupHeaderColor, groupHeaderFontSize, optionTextColor, searchIconColor, searchTextColor, searchPlaceholderColor, applyBg, applyColor, cancelBg, cancelColor, cancelBorderColor, triggerLabelSx, triggerValueSx, listItemSx, }: WidgetHeaderFilterProps) => react_jsx_runtime.JSX.Element;
 
 /** One slice inside a row’s bar (e.g. age band). Widths are proportional to `value` within the row. */
 interface RankedBarListSegment {
@@ -455,6 +461,11 @@ type QueueTimeBreakdownCustomization = {
          * Prefer this over targeting `.MuiBox-root:nth-of-type(...)` on the card root.
          */
         labelRowContainerSx?: SxProps$1<Theme$1>;
+        /**
+         * Merged onto each per-segment label `Box` (flex width, padding, text-align, overflow).
+         * Applied after built-in flex sizing — use to adjust padding, text alignment, or min-width.
+         */
+        segmentBoxSx?: SxProps$1<Theme$1>;
         tooltip?: QueueTimeRechartsTooltipTheme;
     };
     /**
@@ -908,8 +919,22 @@ declare const FalconButton: ({ loading, disabled, children, size, variant, type,
 
 interface MonthData {
     label: string;
+    /** Year this bucket belongs to. Required for multi-year timelines. */
+    year?: number;
     count: number;
 }
+interface AuditRunItem {
+    run_number: number;
+    /** Display date string shown on the card, e.g. "Apr 5" */
+    date: string;
+    /** Matches MonthData.label for the bucket this run belongs to */
+    month: string;
+    /** Matches MonthData.year when the timeline spans multiple years */
+    year?: number;
+    status: 'done' | 'scheduled';
+    /** Ordinal label shown on the card (e.g. "1st Audit"). Auto-computed if omitted. */
+    label?: string;
+}
 interface FalconAuditTimelineProps {
     /**
      * Title of the component
@@ -917,16 +942,28 @@ interface FalconAuditTimelineProps {
      */
     title?: string;
     /**
-     * Months data array
+     * Month buckets to display. Each entry can carry an optional `year` field to
+     * support timelines that span multiple calendar years.
      */
     months?: MonthData[];
     /**
-     * Initial selected month label
+     * Actual audit run items. When provided the timeline cards render real data
+     * instead of placeholder dates.
+     */
+    auditRuns?: AuditRunItem[];
+    /**
+     * Initial selected month label (e.g. 'Mar')
      * @default 'Mar'
      */
     initialSelectedMonth?: string;
     /**
-     * Current year to display
+     * When months span multiple years, supply this alongside `initialSelectedMonth`
+     * to disambiguate which bucket to pre-select.
+     */
+    initialSelectedYear?: number;
+    /**
+     * Fallback year shown in the year selector when no MonthData carries a `year`
+     * field.
      * @default 2026
      */
     year?: number;
@@ -956,9 +993,9 @@ interface FalconAuditTimelineProps {
      */
     showYearSelector?: boolean;
     /**
-     * Callback on month change
+     * Callback on month change. Receives the month label and, when present, the year.
      */
-    onMonthChange?: (month: string) => void;
+    onMonthChange?: (month: string, year?: number) => void;
     /**
      * Callback for previous year click
      */
@@ -1013,6 +1050,12 @@ interface FalconAuditTimelineProps {
     eventCardBg?: string;
     /** Text color for header */
     headerColor?: string;
+    /**
+     * Merged onto the **time-controls row** `Box` (year selector + month pill strip).
+     * The default includes `overflow: 'hidden !important'` to clip overflowing month pills;
+     * pass `overflow: 'auto !important'` or `overflow: 'visible !important'` here to override.
+     */
+    timeControlsRowSx?: SxProps$1<Theme$1>;
     /** Custom calendar icon */
     calendarIcon?: string | React__default.ReactNode;
     /** Custom chevron left icon */
@@ -1935,6 +1978,16 @@ interface WalkinAnalysisCustomization {
     titleRowStackSx?: SxProps$1<Theme$1>;
     /** Merged onto the card **title** `Typography` after built-in styles. */
     titleSx?: SxProps$1<Theme$1>;
+    /**
+     * Merged onto the **chart-and-legend row** `Stack` that wraps the pie `Box` and legend column.
+     * Controls direction, spacing (gap between pie and legend), and alignment.
+     */
+    chartLegendRowSx?: SxProps$1<Theme$1>;
+    /**
+     * Merged onto the **pie chart wrapper** `Box` (default `flexShrink: 0, lineHeight: 0`).
+     * Use to adjust pie offset, margin, or positioning within the row.
+     */
+    pieChartBoxSx?: SxProps$1<Theme$1>;
     /** Merged onto the **legend column** `Stack` (list of slice rows) after built-in styles. */
     legendColumnStackSx?: SxProps$1<Theme$1>;
     /** Merged onto each legend **label** and **count** `Typography` after built-in styles. */
@@ -2633,8 +2686,12 @@ type FootFallHeatMapKpiStripPresentation = {
     trackBackgroundColor?: string;
     /** Merged onto the outer KPI panel (container under the breadcrumb). Applied after built-in layout styles. */
     kpiContainerSx?: SxProps$1<Theme$1>;
+    /** Merged onto the summary KPI cards row `Stack` (direction, spacing, wrap). */
+    summaryRowSx?: SxProps$1<Theme$1>;
     /** Merged onto each summary stat card (`Paper`). */
     statCardSx?: SxProps$1<Theme$1>;
+    /** Merged onto the ranked-bar-list items `Stack` (spacing between rows, padding). */
+    rankedListStackSx?: SxProps$1<Theme$1>;
     /** Icon color for both stat cards. Default `#1565C0`. */
     statCardIconColor?: string;
     /** Zone / row title next to the segmented bar. */
@@ -2677,12 +2734,14 @@ type FootFallHeatMapViewProps = {
      */
     kpiStrip?: FootFallHeatMapKpiStripPresentation;
     emptyStatePlaceholderProps?: ChartEmptyStateProps;
+    /** Callback fired when the navigation path changes (drill-down or back) */
+    onPathChange?: (path: string[]) => void;
 };
 
 /**
  * In-store zone treemap with drill-down and leaf KPIs. Pass `initialData` from your API or mocks.
  */
-declare function FootFallHeatMapView({ initialData, isLoading, isFetching, error, title, infoTooltip, brandLabel, icons: iconsProp, iconSize: iconSizeProp, iconColor: iconColorProp, headerInfoIconSize, treemap: treemapProp, tree: treeProp, kpiStrip: kpiStripPresentation, emptyStatePlaceholderProps, }: FootFallHeatMapViewProps): react_jsx_runtime.JSX.Element;
+declare function FootFallHeatMapView({ initialData, isLoading, isFetching, error, title, infoTooltip, brandLabel, icons: iconsProp, iconSize: iconSizeProp, iconColor: iconColorProp, headerInfoIconSize, treemap: treemapProp, tree: treeProp, kpiStrip: kpiStripPresentation, emptyStatePlaceholderProps, onPathChange, }: FootFallHeatMapViewProps): react_jsx_runtime.JSX.Element;
 
 /** Zone KPI grid using MUI layout. */
 declare const ZoneWiseKpiCards: ({ metrics }: {

package/dist/index.d.ts

@@ -187,6 +187,12 @@ type WidgetHeaderFilterStyleProps = Pick<FalconMultiSelectStyleProps, 'triggerBg
     popperMatchTrigger?: boolean;
     /** Merged into the dropdown `Paper` after base styles (e.g. `minWidth`, `maxWidth`, padding). */
     popperSx?: SxProps<Theme>;
+    /** Merged onto the trigger **label** `Typography` (first line) after built-in font styles. */
+    triggerLabelSx?: SxProps<Theme>;
+    /** Merged onto the trigger **value** `Typography` (second line, selected item) after built-in font styles. */
+    triggerValueSx?: SxProps<Theme>;
+    /** Merged onto each option row `ListItemButton` after built-in padding / height / border styles. */
+    listItemSx?: SxProps<Theme>;
 };
 /** Props for the widget header filter: two-line trigger + simple option list. */
 type WidgetHeaderFilterProps = {
@@ -244,7 +250,7 @@ type WidgetHeaderMultiSelectConfig = WidgetHeaderFilterProps;
  * Widget header filter styled like the provided mock:
  * two-line trigger + simple dropdown list.
  */
-declare const WidgetHeaderFilter: ({ label, list, groupedList, data, setData, triggerBg, triggerColor, triggerMinWidth, triggerBorderRadius, triggerSx, popperMatchTrigger, popperWidth, popperSx, popperBorderColor, popperBorderColorDark, popperBg, popperBgDark, popperColor, popperColorDark, multiSelect, searchPlaceholder, applyLabel, cancelLabel, checkboxColor, checkboxCheckedColor, groupHeaderBg, groupHeaderColor, groupHeaderFontSize, optionTextColor, searchIconColor, searchTextColor, searchPlaceholderColor, applyBg, applyColor, cancelBg, cancelColor, cancelBorderColor, }: WidgetHeaderFilterProps) => react_jsx_runtime.JSX.Element;
+declare const WidgetHeaderFilter: ({ label, list, groupedList, data, setData, triggerBg, triggerColor, triggerMinWidth, triggerBorderRadius, triggerSx, popperMatchTrigger, popperWidth, popperSx, popperBorderColor, popperBorderColorDark, popperBg, popperBgDark, popperColor, popperColorDark, multiSelect, searchPlaceholder, applyLabel, cancelLabel, checkboxColor, checkboxCheckedColor, groupHeaderBg, groupHeaderColor, groupHeaderFontSize, optionTextColor, searchIconColor, searchTextColor, searchPlaceholderColor, applyBg, applyColor, cancelBg, cancelColor, cancelBorderColor, triggerLabelSx, triggerValueSx, listItemSx, }: WidgetHeaderFilterProps) => react_jsx_runtime.JSX.Element;
 
 /** One slice inside a row’s bar (e.g. age band). Widths are proportional to `value` within the row. */
 interface RankedBarListSegment {
@@ -455,6 +461,11 @@ type QueueTimeBreakdownCustomization = {
          * Prefer this over targeting `.MuiBox-root:nth-of-type(...)` on the card root.
          */
         labelRowContainerSx?: SxProps$1<Theme$1>;
+        /**
+         * Merged onto each per-segment label `Box` (flex width, padding, text-align, overflow).
+         * Applied after built-in flex sizing — use to adjust padding, text alignment, or min-width.
+         */
+        segmentBoxSx?: SxProps$1<Theme$1>;
         tooltip?: QueueTimeRechartsTooltipTheme;
     };
     /**
@@ -908,8 +919,22 @@ declare const FalconButton: ({ loading, disabled, children, size, variant, type,
 
 interface MonthData {
     label: string;
+    /** Year this bucket belongs to. Required for multi-year timelines. */
+    year?: number;
     count: number;
 }
+interface AuditRunItem {
+    run_number: number;
+    /** Display date string shown on the card, e.g. "Apr 5" */
+    date: string;
+    /** Matches MonthData.label for the bucket this run belongs to */
+    month: string;
+    /** Matches MonthData.year when the timeline spans multiple years */
+    year?: number;
+    status: 'done' | 'scheduled';
+    /** Ordinal label shown on the card (e.g. "1st Audit"). Auto-computed if omitted. */
+    label?: string;
+}
 interface FalconAuditTimelineProps {
     /**
      * Title of the component
@@ -917,16 +942,28 @@ interface FalconAuditTimelineProps {
      */
     title?: string;
     /**
-     * Months data array
+     * Month buckets to display. Each entry can carry an optional `year` field to
+     * support timelines that span multiple calendar years.
      */
     months?: MonthData[];
     /**
-     * Initial selected month label
+     * Actual audit run items. When provided the timeline cards render real data
+     * instead of placeholder dates.
+     */
+    auditRuns?: AuditRunItem[];
+    /**
+     * Initial selected month label (e.g. 'Mar')
      * @default 'Mar'
      */
     initialSelectedMonth?: string;
     /**
-     * Current year to display
+     * When months span multiple years, supply this alongside `initialSelectedMonth`
+     * to disambiguate which bucket to pre-select.
+     */
+    initialSelectedYear?: number;
+    /**
+     * Fallback year shown in the year selector when no MonthData carries a `year`
+     * field.
      * @default 2026
      */
     year?: number;
@@ -956,9 +993,9 @@ interface FalconAuditTimelineProps {
      */
     showYearSelector?: boolean;
     /**
-     * Callback on month change
+     * Callback on month change. Receives the month label and, when present, the year.
      */
-    onMonthChange?: (month: string) => void;
+    onMonthChange?: (month: string, year?: number) => void;
     /**
      * Callback for previous year click
      */
@@ -1013,6 +1050,12 @@ interface FalconAuditTimelineProps {
     eventCardBg?: string;
     /** Text color for header */
     headerColor?: string;
+    /**
+     * Merged onto the **time-controls row** `Box` (year selector + month pill strip).
+     * The default includes `overflow: 'hidden !important'` to clip overflowing month pills;
+     * pass `overflow: 'auto !important'` or `overflow: 'visible !important'` here to override.
+     */
+    timeControlsRowSx?: SxProps$1<Theme$1>;
     /** Custom calendar icon */
     calendarIcon?: string | React__default.ReactNode;
     /** Custom chevron left icon */
@@ -1935,6 +1978,16 @@ interface WalkinAnalysisCustomization {
     titleRowStackSx?: SxProps$1<Theme$1>;
     /** Merged onto the card **title** `Typography` after built-in styles. */
     titleSx?: SxProps$1<Theme$1>;
+    /**
+     * Merged onto the **chart-and-legend row** `Stack` that wraps the pie `Box` and legend column.
+     * Controls direction, spacing (gap between pie and legend), and alignment.
+     */
+    chartLegendRowSx?: SxProps$1<Theme$1>;
+    /**
+     * Merged onto the **pie chart wrapper** `Box` (default `flexShrink: 0, lineHeight: 0`).
+     * Use to adjust pie offset, margin, or positioning within the row.
+     */
+    pieChartBoxSx?: SxProps$1<Theme$1>;
     /** Merged onto the **legend column** `Stack` (list of slice rows) after built-in styles. */
     legendColumnStackSx?: SxProps$1<Theme$1>;
     /** Merged onto each legend **label** and **count** `Typography` after built-in styles. */
@@ -2633,8 +2686,12 @@ type FootFallHeatMapKpiStripPresentation = {
     trackBackgroundColor?: string;
     /** Merged onto the outer KPI panel (container under the breadcrumb). Applied after built-in layout styles. */
     kpiContainerSx?: SxProps$1<Theme$1>;
+    /** Merged onto the summary KPI cards row `Stack` (direction, spacing, wrap). */
+    summaryRowSx?: SxProps$1<Theme$1>;
     /** Merged onto each summary stat card (`Paper`). */
     statCardSx?: SxProps$1<Theme$1>;
+    /** Merged onto the ranked-bar-list items `Stack` (spacing between rows, padding). */
+    rankedListStackSx?: SxProps$1<Theme$1>;
     /** Icon color for both stat cards. Default `#1565C0`. */
     statCardIconColor?: string;
     /** Zone / row title next to the segmented bar. */
@@ -2677,12 +2734,14 @@ type FootFallHeatMapViewProps = {
      */
     kpiStrip?: FootFallHeatMapKpiStripPresentation;
     emptyStatePlaceholderProps?: ChartEmptyStateProps;
+    /** Callback fired when the navigation path changes (drill-down or back) */
+    onPathChange?: (path: string[]) => void;
 };
 
 /**
  * In-store zone treemap with drill-down and leaf KPIs. Pass `initialData` from your API or mocks.
  */
-declare function FootFallHeatMapView({ initialData, isLoading, isFetching, error, title, infoTooltip, brandLabel, icons: iconsProp, iconSize: iconSizeProp, iconColor: iconColorProp, headerInfoIconSize, treemap: treemapProp, tree: treeProp, kpiStrip: kpiStripPresentation, emptyStatePlaceholderProps, }: FootFallHeatMapViewProps): react_jsx_runtime.JSX.Element;
+declare function FootFallHeatMapView({ initialData, isLoading, isFetching, error, title, infoTooltip, brandLabel, icons: iconsProp, iconSize: iconSizeProp, iconColor: iconColorProp, headerInfoIconSize, treemap: treemapProp, tree: treeProp, kpiStrip: kpiStripPresentation, emptyStatePlaceholderProps, onPathChange, }: FootFallHeatMapViewProps): react_jsx_runtime.JSX.Element;
 
 /** Zone KPI grid using MUI layout. */
 declare const ZoneWiseKpiCards: ({ metrics }: {