@bpfdev/oly-ui 1.0.8 → 1.0.10

package/dist/index.d.mts

@@ -1050,6 +1050,36 @@ interface FalconAuditTimelineProps {
     eventCardBg?: string;
     /** Text color for header */
     headerColor?: string;
+    /**
+     * Max height of the scrollable events grid area.
+     * @default '280px'
+     */
+    eventsMaxHeight?: string;
+    /**
+     * Max width of the card. Set to '100%' to fill the container.
+     * @default '1324px'
+     */
+    cardMaxWidth?: string;
+    /**
+     * Hide the scrollbar while keeping scroll functionality.
+     * @default false
+     */
+    hideScrollbar?: boolean;
+    /**
+     * Scrollbar width in px (only applies when hideScrollbar is false).
+     * @default '6px'
+     */
+    scrollbarWidth?: string;
+    /**
+     * Scrollbar thumb color.
+     * @default '#D1D5DB'
+     */
+    scrollbarThumbColor?: string;
+    /**
+     * Scrollbar track color.
+     * @default 'transparent'
+     */
+    scrollbarTrackColor?: string;
     /**
      * Merged onto the **time-controls row** `Box` (year selector + month pill strip).
      * The default includes `overflow: 'hidden !important'` to clip overflowing month pills;
@@ -1619,6 +1649,8 @@ interface FootfallByAgeGroupsProps {
     data: FootfallByAgeGroupsRow[];
     /** Stacked series bottom-to-top (first item is bottom of stack). */
     series: FootfallByAgeGroupsSeries[];
+    /** When `true`, render loading skeleton and suppress chart empty state. Default: `false`. */
+    isLoading?: boolean;
     /** Plot height in px. Default: 430 */
     chartHeight?: number;
     /**
@@ -1677,8 +1709,12 @@ interface FootfallByAgeGroupsProps {
     renderTooltip?: (context: FootfallByAgeGroupsTooltipRenderContext) => ReactNode;
     /** Color key legend above the plot (from \`series\`). Default: \`true\`. */
     showLegend?: boolean;
-    /** Recharts \`BarChart\` margin; partial merge with defaults. */
+    /** Recharts `BarChart` margin override (passed through directly when provided). */
     chartMargin?: FootfallByAgeGroupsChartMargin;
+    /** Horizontal offset for left Y-axis tick text. Default: `-8`. */
+    yAxisTickDx?: number;
+    /** Inline SVG style for Y-axis tick text (typography/spacing). */
+    yAxisTickStyle?: Record<string, string | number>;
     /** Grid / axis / bar-top label colors. */
     chartColors?: FootfallByAgeGroupsChartColors;
     emptyStatePlaceholderProps?: ChartEmptyStateProps;
@@ -1693,9 +1729,13 @@ interface FootfallByAgeGroupsProps {
      * Pass `0` for horizontal — labels containing `\n` will render as multiple lines.
      */
     xAxisTickAngle?: number;
+    /** Horizontal offset for X-axis tick text. Default: `0`. */
+    xAxisTickDx?: number;
+    /** Inline SVG style for X-axis tick text (typography/spacing). */
+    xAxisTickStyle?: Record<string, string | number>;
 }
 
-declare function FootfallByAgeGroups({ title, data, series, chartHeight, minWidthPerCategory, horizontalScroll: horizontalScrollProp, maxBarSize: maxBarSizeProp, cardMaxWidth, cardSx, titleRowSx, titleSx, dividerSx, legendRowSx, legendItemSx, legendSwatchSx, legendLabelSx, chartScrollAreaSx, stackSx, emptyStateSx, headerActions, tooltipCategoryLabel, tooltipOverallLabel, tooltipStyles, renderTooltip, showLegend, chartMargin: chartMarginProp, chartColors: chartColorsProp, emptyStatePlaceholderProps, dimmedStackOpacity, barStackId, xAxisTickAngle, }: FootfallByAgeGroupsProps): react_jsx_runtime.JSX.Element;
+declare function FootfallByAgeGroups({ title, data, series, isLoading, chartHeight, minWidthPerCategory, horizontalScroll: horizontalScrollProp, maxBarSize: maxBarSizeProp, cardMaxWidth, cardSx, titleRowSx, titleSx, dividerSx, legendRowSx, legendItemSx, legendSwatchSx, legendLabelSx, chartScrollAreaSx, stackSx, emptyStateSx, headerActions, tooltipCategoryLabel, tooltipOverallLabel, tooltipStyles, renderTooltip, showLegend, chartMargin: chartMarginProp, yAxisTickDx, yAxisTickStyle, chartColors: chartColorsProp, emptyStatePlaceholderProps, dimmedStackOpacity, barStackId, xAxisTickAngle, xAxisTickDx, xAxisTickStyle, }: FootfallByAgeGroupsProps): react_jsx_runtime.JSX.Element;
 
 /** Optional inline styles merged over tooltip defaults (undefined keys keep defaults). */
 interface FootfallByGenderTooltipStyles {
@@ -1750,6 +1790,8 @@ interface FootfallByGenderProps {
     /** Card heading — **centered**; \`headerActions\` (if any) sit on the right without shifting it. */
     title: string;
     data: FootfallByGenderRow[];
+    /** When `true`, render loading skeleton and suppress chart empty state. Default: `false`. */
+    isLoading?: boolean;
     /** Legend / tooltip labels for the two series. Defaults: Male, Female */
     seriesLabels?: {
         male: string;
@@ -1833,8 +1875,12 @@ interface FootfallByGenderProps {
      * Full custom tooltip renderer. When provided, default tooltip layout is skipped.
      */
     renderTooltip?: (context: FootfallByGenderTooltipRenderContext) => ReactNode;
-    /** Recharts \`BarChart\` margin; partial merge after defaults (your values override). */
+    /** Recharts `BarChart` margin override (passed through directly when provided). */
     chartMargin?: FootfallByGenderChartMargin;
+    /** Horizontal offset for left Y-axis tick text. Default: `-6`. */
+    yAxisTickDx?: number;
+    /** Inline SVG style for Y-axis tick text (typography/spacing). */
+    yAxisTickStyle?: Record<string, string | number>;
     /** Grid / axis / bar-top label colors. */
     chartColors?: FootfallByGenderChartColors;
     emptyStatePlaceholderProps?: ChartEmptyStateProps;
@@ -1849,6 +1895,10 @@ interface FootfallByGenderProps {
      * Pass `0` for horizontal — labels containing `\n` will render as multiple lines.
      */
     xAxisTickAngle?: number;
+    /** Horizontal offset for X-axis tick text. Default: `0`. */
+    xAxisTickDx?: number;
+    /** Inline SVG style for X-axis tick text (typography/spacing). */
+    xAxisTickStyle?: Record<string, string | number>;
     /**
      * Rotation angle for bar-top value labels. Default: **-90** (vertical).
      * Pass `0` for horizontal labels.
@@ -1865,7 +1915,7 @@ interface FootfallByGenderProps {
 /**
  * Grouped bar chart: two series (male / female) per category, with hover dimming and a custom tooltip.
  */
-declare function FootfallByGender({ title, data, seriesLabels: seriesLabelsProp, seriesColors: seriesColorsProp, chartHeight, minWidthPerCategory, horizontalScroll: horizontalScrollProp, maxBarSize: maxBarSizeProp, barGap, showLegend, showBarValueLabels, showGrowthBadges, dimmedBarOpacity, hoveredBarOpacity, cardMaxWidth, cardSx, titleRowSx, titleSx, dividerSx, legendOverlaySx, legendItemSx, legendSwatchSx, legendLabelSx, chartViewportSx, chartScrollAreaSx, stackSx, emptyStateSx, headerActions, tooltipCategoryLabel, tooltipOverallLabel, tooltipStyles, renderTooltip, chartMargin: chartMarginProp, chartColors: chartColorsProp, emptyStatePlaceholderProps, yAxisTickFormatter, xAxisTickAngle, barValueLabelAngle, growthBadgeWidth, growthBadgeHeight, growthBadgeOffsetY, }: FootfallByGenderProps): react_jsx_runtime.JSX.Element;
+declare function FootfallByGender({ title, data, isLoading, seriesLabels: seriesLabelsProp, seriesColors: seriesColorsProp, chartHeight, minWidthPerCategory, horizontalScroll: horizontalScrollProp, maxBarSize: maxBarSizeProp, barGap, showLegend, showBarValueLabels, showGrowthBadges, dimmedBarOpacity, hoveredBarOpacity, cardMaxWidth, cardSx, titleRowSx, titleSx, dividerSx, legendOverlaySx, legendItemSx, legendSwatchSx, legendLabelSx, chartViewportSx, chartScrollAreaSx, stackSx, emptyStateSx, headerActions, tooltipCategoryLabel, tooltipOverallLabel, tooltipStyles, renderTooltip, chartMargin: chartMarginProp, yAxisTickDx, yAxisTickStyle, chartColors: chartColorsProp, emptyStatePlaceholderProps, yAxisTickFormatter, xAxisTickAngle, xAxisTickDx, xAxisTickStyle, barValueLabelAngle, growthBadgeWidth, growthBadgeHeight, growthBadgeOffsetY, }: FootfallByGenderProps): react_jsx_runtime.JSX.Element;
 
 interface PasserbyConversionTooltipStyles {
     container?: CSSProperties;
@@ -1915,6 +1965,8 @@ interface PasserbyConversionTooltipRenderContext {
 interface PasserbyConversionProps {
     title: string;
     data: PasserbyConversionRow[];
+    /** When `true`, render loading skeleton and suppress chart empty state. Default: `false`. */
+    isLoading?: boolean;
     /**
      * Optional fixed X-axis slots (e.g. full day series), used to render a stable time axis
      * even when `data` is partial (API hasn’t returned all slots yet).
@@ -1994,6 +2046,18 @@ interface PasserbyConversionProps {
     showConversionLine?: boolean;
     showBarValueLabels?: boolean;
     chartMargin?: PasserbyConversionChartMargin;
+    /** Horizontal offset for left Y-axis tick text. Default: `-8`. */
+    yAxisTickDx?: number;
+    /** Inline SVG style for left Y-axis tick text (typography/spacing). */
+    yAxisTickStyle?: Record<string, string | number>;
+    /** Horizontal offset for right Y-axis tick text. Default: `0`. */
+    conversionAxisTickDx?: number;
+    /** Inline SVG style for right Y-axis tick text (typography/spacing). */
+    conversionAxisTickStyle?: Record<string, string | number>;
+    /** Alias for `conversionAxisTickDx` on the right Y-axis tick text. */
+    rightYAxisTickDx?: number;
+    /** Alias for `conversionAxisTickStyle` on the right Y-axis tick text. */
+    rightYAxisTickStyle?: Record<string, string | number>;
     chartColors?: PasserbyConversionChartColors;
     emptyStatePlaceholderProps?: ChartEmptyStateProps;
     emptyStateText?: string;
@@ -2014,9 +2078,13 @@ interface PasserbyConversionProps {
      * Pass `0` for horizontal — labels containing `\n` will render as multiple lines.
      */
     xAxisTickAngle?: number;
+    /** Horizontal offset for X-axis tick text. Default: `0`. */
+    xAxisTickDx?: number;
+    /** Inline SVG style for X-axis tick text (typography/spacing). */
+    xAxisTickStyle?: Record<string, string | number>;
 }
 
-declare function PasserbyConversion({ title, data, timeSlots, fillMissingTimeSlots, chartHeight, passerbySeriesName, walkInsSeriesName, conversionSeriesName, lineType, minWidthPerCategory, horizontalScroll: horizontalScrollProp, maxBarSize: maxBarSizeProp, barGap, cardMaxWidth, cardSx, titleRowSx, titleSx, dividerSx, legendRowSx, legendItemSx, legendSwatchSx, legendLabelSx, chartScrollAreaSx, stackSx, emptyStateSx, headerActions, tooltipTimeLabel, tooltipOverallLabel, tooltipWalkInsLabel, tooltipPasserbyLabel, tooltipConversionLabel, formatTooltipConversion, conversionAxisLabel, yAxisTickFormatter, conversionAxisTickFormatter, tooltipStyles, renderTooltip, showLegend, showConversionLine: showConversionLineProp, showBarValueLabels, chartMargin: chartMarginProp, chartColors: chartColorsProp, emptyStatePlaceholderProps, isChartAnimationActive, chartAnimationDuration, scrollChartToEndOnDataChange, xAxisTickAngle, }: PasserbyConversionProps): react_jsx_runtime.JSX.Element;
+declare function PasserbyConversion({ title, data, isLoading, timeSlots, fillMissingTimeSlots, chartHeight, passerbySeriesName, walkInsSeriesName, conversionSeriesName, lineType, minWidthPerCategory, horizontalScroll: horizontalScrollProp, maxBarSize: maxBarSizeProp, barGap, cardMaxWidth, cardSx, titleRowSx, titleSx, dividerSx, legendRowSx, legendItemSx, legendSwatchSx, legendLabelSx, chartScrollAreaSx, stackSx, emptyStateSx, headerActions, tooltipTimeLabel, tooltipOverallLabel, tooltipWalkInsLabel, tooltipPasserbyLabel, tooltipConversionLabel, formatTooltipConversion, conversionAxisLabel, yAxisTickFormatter, conversionAxisTickFormatter, tooltipStyles, renderTooltip, showLegend, showConversionLine: showConversionLineProp, showBarValueLabels, chartMargin: chartMarginProp, yAxisTickDx, yAxisTickStyle, conversionAxisTickDx, conversionAxisTickStyle, rightYAxisTickDx, rightYAxisTickStyle, chartColors: chartColorsProp, emptyStatePlaceholderProps, isChartAnimationActive, chartAnimationDuration, scrollChartToEndOnDataChange, xAxisTickAngle, xAxisTickDx, xAxisTickStyle, }: PasserbyConversionProps): react_jsx_runtime.JSX.Element;
 
 /** Pie diameter: fixed px, or per-breakpoint (`xs` / `sm` / `md` match MUI breakpoints). */
 type WalkinAnalysisPieSize = number | {
@@ -2202,6 +2270,8 @@ interface WalkinTrafficTooltipRenderContext {
 interface WalkinTrafficProps {
     title: string;
     data: WalkinTrafficRow[];
+    /** When `true`, render loading skeleton and suppress chart empty state. Default: `false`. */
+    isLoading?: boolean;
     /** Plot height in px. Default: **430**. */
     chartHeight?: number;
     /** Legend label and tooltip name for bars. Default: **Walk-ins**. */
@@ -2259,6 +2329,10 @@ interface WalkinTrafficProps {
     showLineInLegend?: boolean;
     showBarValueLabels?: boolean;
     chartMargin?: WalkinTrafficChartMargin;
+    /** Horizontal offset for left Y-axis tick text. Default: `-8`. */
+    yAxisTickDx?: number;
+    /** Inline SVG style for Y-axis tick text (typography/spacing). */
+    yAxisTickStyle?: Record<string, string | number>;
     chartColors?: WalkinTrafficChartColors;
     emptyStatePlaceholderProps?: ChartEmptyStateProps;
     yAxisTickFormatter?: (value: number) => string;
@@ -2279,9 +2353,13 @@ interface WalkinTrafficProps {
      * Pass `0` for horizontal — labels containing `\n` will render as multiple lines.
      */
     xAxisTickAngle?: number;
+    /** Horizontal offset for X-axis tick text. Default: `0`. */
+    xAxisTickDx?: number;
+    /** Inline SVG style for X-axis tick text (typography/spacing). */
+    xAxisTickStyle?: Record<string, string | number>;
 }
 
-declare function WalkinTraffic({ title, data, chartHeight, barSeriesName, lineSeriesName, lineType, minWidthPerCategory, horizontalScroll: horizontalScrollProp, maxBarSize: maxBarSizeProp, cardMaxWidth, cardSx, titleRowSx, titleSx, dividerSx, legendRowSx, legendItemSx, legendSwatchSx, legendLabelSx, chartScrollAreaSx, stackSx, emptyStateSx, headerActions, tooltipTitle, tooltipTimeLabel, tooltipCurrentYearLabel, tooltipLastYearLabel, tooltipGrowthLabel, tooltipFooterNote: tooltipFooterNoteProp, tooltipHourLabel, tooltipStyles, renderTooltip, showLegend, showTrendLine: showTrendLineProp, showLineInLegend, showBarValueLabels, chartMargin: chartMarginProp, chartColors: chartColorsProp, emptyStatePlaceholderProps, yAxisTickFormatter, isChartAnimationActive, chartAnimationDuration, scrollChartToEndOnDataChange, xAxisTickAngle, }: WalkinTrafficProps): react_jsx_runtime.JSX.Element;
+declare function WalkinTraffic({ title, data, isLoading, chartHeight, barSeriesName, lineSeriesName, lineType, minWidthPerCategory, horizontalScroll: horizontalScrollProp, maxBarSize: maxBarSizeProp, cardMaxWidth, cardSx, titleRowSx, titleSx, dividerSx, legendRowSx, legendItemSx, legendSwatchSx, legendLabelSx, chartScrollAreaSx, stackSx, emptyStateSx, headerActions, tooltipTitle, tooltipTimeLabel, tooltipCurrentYearLabel, tooltipLastYearLabel, tooltipGrowthLabel, tooltipFooterNote: tooltipFooterNoteProp, tooltipHourLabel, tooltipStyles, renderTooltip, showLegend, showTrendLine: showTrendLineProp, showLineInLegend, showBarValueLabels, chartMargin: chartMarginProp, yAxisTickDx, yAxisTickStyle, chartColors: chartColorsProp, emptyStatePlaceholderProps, yAxisTickFormatter, isChartAnimationActive, chartAnimationDuration, scrollChartToEndOnDataChange, xAxisTickAngle, xAxisTickDx, xAxisTickStyle, }: WalkinTrafficProps): react_jsx_runtime.JSX.Element;
 
 /** Primary line + tooltip fill (violet). */
 declare const BILLING_COUNTER_LINE_PRIMARY: "#7C3AED";
@@ -2892,7 +2970,24 @@ type PeakBillingHoursProps = {
     activeTabId: string;
     onTabChange: (tabId: string) => void;
     data?: PeakBillingHoursPoint[];
+    /** When `true`, render loading skeleton and suppress chart empty state. Default: `false`. */
+    isLoading?: boolean;
     seriesByTabId?: Record<string, PeakBillingHoursPoint[]>;
+    /** Recharts `BarChart` margin override (passed through directly when provided). */
+    chartMargin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    /** Horizontal offset for Y-axis tick text. Default: `-6`. */
+    yAxisTickDx?: number;
+    /** Inline SVG style for Y-axis tick text (typography/spacing). */
+    yAxisTickStyle?: Record<string, string | number>;
+    /** Horizontal offset for X-axis tick text. Default: `0`. */
+    xAxisTickDx?: number;
+    /** Inline SVG style for X-axis tick text (typography/spacing). */
+    xAxisTickStyle?: Record<string, string | number>;
     yAxisDomain?: [number, number];
     yAxisTicks?: number[];
     infoPopover?: ChartWidgetInfoPopoverContent | null;
@@ -2913,7 +3008,7 @@ declare const peakBillingHoursMockSeriesByTabId: Record<string, PeakBillingHours
  * Peak billing hours card: title + subtitle, info control, violet segmented tabs (intrinsic),
  * vertical bar chart with square tops, value labels, and panel tooltip.
  */
-declare function PeakBillingHours({ title, subtitle, tabs, activeTabId, onTabChange, data, seriesByTabId, yAxisDomain, yAxisTicks, infoPopover, renderTooltip, emptyStatePlaceholderProps, customization, }: PeakBillingHoursProps): React$1.ReactElement;
+declare function PeakBillingHours({ title, subtitle, tabs, activeTabId, onTabChange, data, isLoading, seriesByTabId, chartMargin, yAxisTickDx, yAxisTickStyle, xAxisTickDx, xAxisTickStyle, yAxisDomain, yAxisTicks, infoPopover, renderTooltip, emptyStatePlaceholderProps, customization, }: PeakBillingHoursProps): React$1.ReactElement;
 
 type PeakBillingHoursCustomizationProviderProps = {
     value: PeakBillingHoursCustomization;

package/dist/index.d.ts

@@ -1050,6 +1050,36 @@ interface FalconAuditTimelineProps {
     eventCardBg?: string;
     /** Text color for header */
     headerColor?: string;
+    /**
+     * Max height of the scrollable events grid area.
+     * @default '280px'
+     */
+    eventsMaxHeight?: string;
+    /**
+     * Max width of the card. Set to '100%' to fill the container.
+     * @default '1324px'
+     */
+    cardMaxWidth?: string;
+    /**
+     * Hide the scrollbar while keeping scroll functionality.
+     * @default false
+     */
+    hideScrollbar?: boolean;
+    /**
+     * Scrollbar width in px (only applies when hideScrollbar is false).
+     * @default '6px'
+     */
+    scrollbarWidth?: string;
+    /**
+     * Scrollbar thumb color.
+     * @default '#D1D5DB'
+     */
+    scrollbarThumbColor?: string;
+    /**
+     * Scrollbar track color.
+     * @default 'transparent'
+     */
+    scrollbarTrackColor?: string;
     /**
      * Merged onto the **time-controls row** `Box` (year selector + month pill strip).
      * The default includes `overflow: 'hidden !important'` to clip overflowing month pills;
@@ -1619,6 +1649,8 @@ interface FootfallByAgeGroupsProps {
     data: FootfallByAgeGroupsRow[];
     /** Stacked series bottom-to-top (first item is bottom of stack). */
     series: FootfallByAgeGroupsSeries[];
+    /** When `true`, render loading skeleton and suppress chart empty state. Default: `false`. */
+    isLoading?: boolean;
     /** Plot height in px. Default: 430 */
     chartHeight?: number;
     /**
@@ -1677,8 +1709,12 @@ interface FootfallByAgeGroupsProps {
     renderTooltip?: (context: FootfallByAgeGroupsTooltipRenderContext) => ReactNode;
     /** Color key legend above the plot (from \`series\`). Default: \`true\`. */
     showLegend?: boolean;
-    /** Recharts \`BarChart\` margin; partial merge with defaults. */
+    /** Recharts `BarChart` margin override (passed through directly when provided). */
     chartMargin?: FootfallByAgeGroupsChartMargin;
+    /** Horizontal offset for left Y-axis tick text. Default: `-8`. */
+    yAxisTickDx?: number;
+    /** Inline SVG style for Y-axis tick text (typography/spacing). */
+    yAxisTickStyle?: Record<string, string | number>;
     /** Grid / axis / bar-top label colors. */
     chartColors?: FootfallByAgeGroupsChartColors;
     emptyStatePlaceholderProps?: ChartEmptyStateProps;
@@ -1693,9 +1729,13 @@ interface FootfallByAgeGroupsProps {
      * Pass `0` for horizontal — labels containing `\n` will render as multiple lines.
      */
     xAxisTickAngle?: number;
+    /** Horizontal offset for X-axis tick text. Default: `0`. */
+    xAxisTickDx?: number;
+    /** Inline SVG style for X-axis tick text (typography/spacing). */
+    xAxisTickStyle?: Record<string, string | number>;
 }
 
-declare function FootfallByAgeGroups({ title, data, series, chartHeight, minWidthPerCategory, horizontalScroll: horizontalScrollProp, maxBarSize: maxBarSizeProp, cardMaxWidth, cardSx, titleRowSx, titleSx, dividerSx, legendRowSx, legendItemSx, legendSwatchSx, legendLabelSx, chartScrollAreaSx, stackSx, emptyStateSx, headerActions, tooltipCategoryLabel, tooltipOverallLabel, tooltipStyles, renderTooltip, showLegend, chartMargin: chartMarginProp, chartColors: chartColorsProp, emptyStatePlaceholderProps, dimmedStackOpacity, barStackId, xAxisTickAngle, }: FootfallByAgeGroupsProps): react_jsx_runtime.JSX.Element;
+declare function FootfallByAgeGroups({ title, data, series, isLoading, chartHeight, minWidthPerCategory, horizontalScroll: horizontalScrollProp, maxBarSize: maxBarSizeProp, cardMaxWidth, cardSx, titleRowSx, titleSx, dividerSx, legendRowSx, legendItemSx, legendSwatchSx, legendLabelSx, chartScrollAreaSx, stackSx, emptyStateSx, headerActions, tooltipCategoryLabel, tooltipOverallLabel, tooltipStyles, renderTooltip, showLegend, chartMargin: chartMarginProp, yAxisTickDx, yAxisTickStyle, chartColors: chartColorsProp, emptyStatePlaceholderProps, dimmedStackOpacity, barStackId, xAxisTickAngle, xAxisTickDx, xAxisTickStyle, }: FootfallByAgeGroupsProps): react_jsx_runtime.JSX.Element;
 
 /** Optional inline styles merged over tooltip defaults (undefined keys keep defaults). */
 interface FootfallByGenderTooltipStyles {
@@ -1750,6 +1790,8 @@ interface FootfallByGenderProps {
     /** Card heading — **centered**; \`headerActions\` (if any) sit on the right without shifting it. */
     title: string;
     data: FootfallByGenderRow[];
+    /** When `true`, render loading skeleton and suppress chart empty state. Default: `false`. */
+    isLoading?: boolean;
     /** Legend / tooltip labels for the two series. Defaults: Male, Female */
     seriesLabels?: {
         male: string;
@@ -1833,8 +1875,12 @@ interface FootfallByGenderProps {
      * Full custom tooltip renderer. When provided, default tooltip layout is skipped.
      */
     renderTooltip?: (context: FootfallByGenderTooltipRenderContext) => ReactNode;
-    /** Recharts \`BarChart\` margin; partial merge after defaults (your values override). */
+    /** Recharts `BarChart` margin override (passed through directly when provided). */
     chartMargin?: FootfallByGenderChartMargin;
+    /** Horizontal offset for left Y-axis tick text. Default: `-6`. */
+    yAxisTickDx?: number;
+    /** Inline SVG style for Y-axis tick text (typography/spacing). */
+    yAxisTickStyle?: Record<string, string | number>;
     /** Grid / axis / bar-top label colors. */
     chartColors?: FootfallByGenderChartColors;
     emptyStatePlaceholderProps?: ChartEmptyStateProps;
@@ -1849,6 +1895,10 @@ interface FootfallByGenderProps {
      * Pass `0` for horizontal — labels containing `\n` will render as multiple lines.
      */
     xAxisTickAngle?: number;
+    /** Horizontal offset for X-axis tick text. Default: `0`. */
+    xAxisTickDx?: number;
+    /** Inline SVG style for X-axis tick text (typography/spacing). */
+    xAxisTickStyle?: Record<string, string | number>;
     /**
      * Rotation angle for bar-top value labels. Default: **-90** (vertical).
      * Pass `0` for horizontal labels.
@@ -1865,7 +1915,7 @@ interface FootfallByGenderProps {
 /**
  * Grouped bar chart: two series (male / female) per category, with hover dimming and a custom tooltip.
  */
-declare function FootfallByGender({ title, data, seriesLabels: seriesLabelsProp, seriesColors: seriesColorsProp, chartHeight, minWidthPerCategory, horizontalScroll: horizontalScrollProp, maxBarSize: maxBarSizeProp, barGap, showLegend, showBarValueLabels, showGrowthBadges, dimmedBarOpacity, hoveredBarOpacity, cardMaxWidth, cardSx, titleRowSx, titleSx, dividerSx, legendOverlaySx, legendItemSx, legendSwatchSx, legendLabelSx, chartViewportSx, chartScrollAreaSx, stackSx, emptyStateSx, headerActions, tooltipCategoryLabel, tooltipOverallLabel, tooltipStyles, renderTooltip, chartMargin: chartMarginProp, chartColors: chartColorsProp, emptyStatePlaceholderProps, yAxisTickFormatter, xAxisTickAngle, barValueLabelAngle, growthBadgeWidth, growthBadgeHeight, growthBadgeOffsetY, }: FootfallByGenderProps): react_jsx_runtime.JSX.Element;
+declare function FootfallByGender({ title, data, isLoading, seriesLabels: seriesLabelsProp, seriesColors: seriesColorsProp, chartHeight, minWidthPerCategory, horizontalScroll: horizontalScrollProp, maxBarSize: maxBarSizeProp, barGap, showLegend, showBarValueLabels, showGrowthBadges, dimmedBarOpacity, hoveredBarOpacity, cardMaxWidth, cardSx, titleRowSx, titleSx, dividerSx, legendOverlaySx, legendItemSx, legendSwatchSx, legendLabelSx, chartViewportSx, chartScrollAreaSx, stackSx, emptyStateSx, headerActions, tooltipCategoryLabel, tooltipOverallLabel, tooltipStyles, renderTooltip, chartMargin: chartMarginProp, yAxisTickDx, yAxisTickStyle, chartColors: chartColorsProp, emptyStatePlaceholderProps, yAxisTickFormatter, xAxisTickAngle, xAxisTickDx, xAxisTickStyle, barValueLabelAngle, growthBadgeWidth, growthBadgeHeight, growthBadgeOffsetY, }: FootfallByGenderProps): react_jsx_runtime.JSX.Element;
 
 interface PasserbyConversionTooltipStyles {
     container?: CSSProperties;
@@ -1915,6 +1965,8 @@ interface PasserbyConversionTooltipRenderContext {
 interface PasserbyConversionProps {
     title: string;
     data: PasserbyConversionRow[];
+    /** When `true`, render loading skeleton and suppress chart empty state. Default: `false`. */
+    isLoading?: boolean;
     /**
      * Optional fixed X-axis slots (e.g. full day series), used to render a stable time axis
      * even when `data` is partial (API hasn’t returned all slots yet).
@@ -1994,6 +2046,18 @@ interface PasserbyConversionProps {
     showConversionLine?: boolean;
     showBarValueLabels?: boolean;
     chartMargin?: PasserbyConversionChartMargin;
+    /** Horizontal offset for left Y-axis tick text. Default: `-8`. */
+    yAxisTickDx?: number;
+    /** Inline SVG style for left Y-axis tick text (typography/spacing). */
+    yAxisTickStyle?: Record<string, string | number>;
+    /** Horizontal offset for right Y-axis tick text. Default: `0`. */
+    conversionAxisTickDx?: number;
+    /** Inline SVG style for right Y-axis tick text (typography/spacing). */
+    conversionAxisTickStyle?: Record<string, string | number>;
+    /** Alias for `conversionAxisTickDx` on the right Y-axis tick text. */
+    rightYAxisTickDx?: number;
+    /** Alias for `conversionAxisTickStyle` on the right Y-axis tick text. */
+    rightYAxisTickStyle?: Record<string, string | number>;
     chartColors?: PasserbyConversionChartColors;
     emptyStatePlaceholderProps?: ChartEmptyStateProps;
     emptyStateText?: string;
@@ -2014,9 +2078,13 @@ interface PasserbyConversionProps {
      * Pass `0` for horizontal — labels containing `\n` will render as multiple lines.
      */
     xAxisTickAngle?: number;
+    /** Horizontal offset for X-axis tick text. Default: `0`. */
+    xAxisTickDx?: number;
+    /** Inline SVG style for X-axis tick text (typography/spacing). */
+    xAxisTickStyle?: Record<string, string | number>;
 }
 
-declare function PasserbyConversion({ title, data, timeSlots, fillMissingTimeSlots, chartHeight, passerbySeriesName, walkInsSeriesName, conversionSeriesName, lineType, minWidthPerCategory, horizontalScroll: horizontalScrollProp, maxBarSize: maxBarSizeProp, barGap, cardMaxWidth, cardSx, titleRowSx, titleSx, dividerSx, legendRowSx, legendItemSx, legendSwatchSx, legendLabelSx, chartScrollAreaSx, stackSx, emptyStateSx, headerActions, tooltipTimeLabel, tooltipOverallLabel, tooltipWalkInsLabel, tooltipPasserbyLabel, tooltipConversionLabel, formatTooltipConversion, conversionAxisLabel, yAxisTickFormatter, conversionAxisTickFormatter, tooltipStyles, renderTooltip, showLegend, showConversionLine: showConversionLineProp, showBarValueLabels, chartMargin: chartMarginProp, chartColors: chartColorsProp, emptyStatePlaceholderProps, isChartAnimationActive, chartAnimationDuration, scrollChartToEndOnDataChange, xAxisTickAngle, }: PasserbyConversionProps): react_jsx_runtime.JSX.Element;
+declare function PasserbyConversion({ title, data, isLoading, timeSlots, fillMissingTimeSlots, chartHeight, passerbySeriesName, walkInsSeriesName, conversionSeriesName, lineType, minWidthPerCategory, horizontalScroll: horizontalScrollProp, maxBarSize: maxBarSizeProp, barGap, cardMaxWidth, cardSx, titleRowSx, titleSx, dividerSx, legendRowSx, legendItemSx, legendSwatchSx, legendLabelSx, chartScrollAreaSx, stackSx, emptyStateSx, headerActions, tooltipTimeLabel, tooltipOverallLabel, tooltipWalkInsLabel, tooltipPasserbyLabel, tooltipConversionLabel, formatTooltipConversion, conversionAxisLabel, yAxisTickFormatter, conversionAxisTickFormatter, tooltipStyles, renderTooltip, showLegend, showConversionLine: showConversionLineProp, showBarValueLabels, chartMargin: chartMarginProp, yAxisTickDx, yAxisTickStyle, conversionAxisTickDx, conversionAxisTickStyle, rightYAxisTickDx, rightYAxisTickStyle, chartColors: chartColorsProp, emptyStatePlaceholderProps, isChartAnimationActive, chartAnimationDuration, scrollChartToEndOnDataChange, xAxisTickAngle, xAxisTickDx, xAxisTickStyle, }: PasserbyConversionProps): react_jsx_runtime.JSX.Element;
 
 /** Pie diameter: fixed px, or per-breakpoint (`xs` / `sm` / `md` match MUI breakpoints). */
 type WalkinAnalysisPieSize = number | {
@@ -2202,6 +2270,8 @@ interface WalkinTrafficTooltipRenderContext {
 interface WalkinTrafficProps {
     title: string;
     data: WalkinTrafficRow[];
+    /** When `true`, render loading skeleton and suppress chart empty state. Default: `false`. */
+    isLoading?: boolean;
     /** Plot height in px. Default: **430**. */
     chartHeight?: number;
     /** Legend label and tooltip name for bars. Default: **Walk-ins**. */
@@ -2259,6 +2329,10 @@ interface WalkinTrafficProps {
     showLineInLegend?: boolean;
     showBarValueLabels?: boolean;
     chartMargin?: WalkinTrafficChartMargin;
+    /** Horizontal offset for left Y-axis tick text. Default: `-8`. */
+    yAxisTickDx?: number;
+    /** Inline SVG style for Y-axis tick text (typography/spacing). */
+    yAxisTickStyle?: Record<string, string | number>;
     chartColors?: WalkinTrafficChartColors;
     emptyStatePlaceholderProps?: ChartEmptyStateProps;
     yAxisTickFormatter?: (value: number) => string;
@@ -2279,9 +2353,13 @@ interface WalkinTrafficProps {
      * Pass `0` for horizontal — labels containing `\n` will render as multiple lines.
      */
     xAxisTickAngle?: number;
+    /** Horizontal offset for X-axis tick text. Default: `0`. */
+    xAxisTickDx?: number;
+    /** Inline SVG style for X-axis tick text (typography/spacing). */
+    xAxisTickStyle?: Record<string, string | number>;
 }
 
-declare function WalkinTraffic({ title, data, chartHeight, barSeriesName, lineSeriesName, lineType, minWidthPerCategory, horizontalScroll: horizontalScrollProp, maxBarSize: maxBarSizeProp, cardMaxWidth, cardSx, titleRowSx, titleSx, dividerSx, legendRowSx, legendItemSx, legendSwatchSx, legendLabelSx, chartScrollAreaSx, stackSx, emptyStateSx, headerActions, tooltipTitle, tooltipTimeLabel, tooltipCurrentYearLabel, tooltipLastYearLabel, tooltipGrowthLabel, tooltipFooterNote: tooltipFooterNoteProp, tooltipHourLabel, tooltipStyles, renderTooltip, showLegend, showTrendLine: showTrendLineProp, showLineInLegend, showBarValueLabels, chartMargin: chartMarginProp, chartColors: chartColorsProp, emptyStatePlaceholderProps, yAxisTickFormatter, isChartAnimationActive, chartAnimationDuration, scrollChartToEndOnDataChange, xAxisTickAngle, }: WalkinTrafficProps): react_jsx_runtime.JSX.Element;
+declare function WalkinTraffic({ title, data, isLoading, chartHeight, barSeriesName, lineSeriesName, lineType, minWidthPerCategory, horizontalScroll: horizontalScrollProp, maxBarSize: maxBarSizeProp, cardMaxWidth, cardSx, titleRowSx, titleSx, dividerSx, legendRowSx, legendItemSx, legendSwatchSx, legendLabelSx, chartScrollAreaSx, stackSx, emptyStateSx, headerActions, tooltipTitle, tooltipTimeLabel, tooltipCurrentYearLabel, tooltipLastYearLabel, tooltipGrowthLabel, tooltipFooterNote: tooltipFooterNoteProp, tooltipHourLabel, tooltipStyles, renderTooltip, showLegend, showTrendLine: showTrendLineProp, showLineInLegend, showBarValueLabels, chartMargin: chartMarginProp, yAxisTickDx, yAxisTickStyle, chartColors: chartColorsProp, emptyStatePlaceholderProps, yAxisTickFormatter, isChartAnimationActive, chartAnimationDuration, scrollChartToEndOnDataChange, xAxisTickAngle, xAxisTickDx, xAxisTickStyle, }: WalkinTrafficProps): react_jsx_runtime.JSX.Element;
 
 /** Primary line + tooltip fill (violet). */
 declare const BILLING_COUNTER_LINE_PRIMARY: "#7C3AED";
@@ -2892,7 +2970,24 @@ type PeakBillingHoursProps = {
     activeTabId: string;
     onTabChange: (tabId: string) => void;
     data?: PeakBillingHoursPoint[];
+    /** When `true`, render loading skeleton and suppress chart empty state. Default: `false`. */
+    isLoading?: boolean;
     seriesByTabId?: Record<string, PeakBillingHoursPoint[]>;
+    /** Recharts `BarChart` margin override (passed through directly when provided). */
+    chartMargin?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    /** Horizontal offset for Y-axis tick text. Default: `-6`. */
+    yAxisTickDx?: number;
+    /** Inline SVG style for Y-axis tick text (typography/spacing). */
+    yAxisTickStyle?: Record<string, string | number>;
+    /** Horizontal offset for X-axis tick text. Default: `0`. */
+    xAxisTickDx?: number;
+    /** Inline SVG style for X-axis tick text (typography/spacing). */
+    xAxisTickStyle?: Record<string, string | number>;
     yAxisDomain?: [number, number];
     yAxisTicks?: number[];
     infoPopover?: ChartWidgetInfoPopoverContent | null;
@@ -2913,7 +3008,7 @@ declare const peakBillingHoursMockSeriesByTabId: Record<string, PeakBillingHours
  * Peak billing hours card: title + subtitle, info control, violet segmented tabs (intrinsic),
  * vertical bar chart with square tops, value labels, and panel tooltip.
  */
-declare function PeakBillingHours({ title, subtitle, tabs, activeTabId, onTabChange, data, seriesByTabId, yAxisDomain, yAxisTicks, infoPopover, renderTooltip, emptyStatePlaceholderProps, customization, }: PeakBillingHoursProps): React$1.ReactElement;
+declare function PeakBillingHours({ title, subtitle, tabs, activeTabId, onTabChange, data, isLoading, seriesByTabId, chartMargin, yAxisTickDx, yAxisTickStyle, xAxisTickDx, xAxisTickStyle, yAxisDomain, yAxisTicks, infoPopover, renderTooltip, emptyStatePlaceholderProps, customization, }: PeakBillingHoursProps): React$1.ReactElement;
 
 type PeakBillingHoursCustomizationProviderProps = {
     value: PeakBillingHoursCustomization;