@tetherto/mdk-react-devkit 0.0.0-stage → 0.12.1

package/dist/primitives/components/alert-dialog/index.d.ts

@@ -0,0 +1,62 @@
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { type HTMLAttributes, type JSX } from 'react';
+declare const AlertDialog: import("react").FC<AlertDialogPrimitive.AlertDialogProps>;
+declare const AlertDialogTrigger: import("react").ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogPortal: import("react").FC<AlertDialogPrimitive.AlertDialogPortalProps>;
+/**
+ * Full-viewport scrim rendered behind an `<AlertDialog>` to block interaction with the page.
+ *
+ * @category dialogs
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const AlertDialogOverlay: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Modal content surface for an `<AlertDialog>` — renders the centered panel above the overlay with focus trap.
+ *
+ * @category dialogs
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const AlertDialogContent: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare function AlertDialogHeader({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): JSX.Element;
+declare namespace AlertDialogHeader {
+    var displayName: string;
+}
+declare function AlertDialogFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>): JSX.Element;
+declare namespace AlertDialogFooter {
+    var displayName: string;
+}
+/**
+ * Prominent title text inside an `<AlertDialog>` summarising the action that requires confirmation.
+ *
+ * @category dialogs
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const AlertDialogTitle: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+/**
+ * Supporting body text inside an `<AlertDialog>`; conveys the consequences of the action being confirmed.
+ *
+ * @category dialogs
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const AlertDialogDescription: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+/**
+ * Primary confirmation button inside an `<AlertDialog>`; clicking dismisses the dialog and runs the action handler.
+ *
+ * @category dialogs
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const AlertDialogAction: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * Secondary dismiss button inside an `<AlertDialog>`; closes the dialog without invoking the destructive action.
+ *
+ * @category dialogs
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const AlertDialogCancel: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };

package/dist/primitives/components/alert-dialog/index.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { cn } from '../../utils';
+import { forwardRef, } from 'react';
+const AlertDialog = AlertDialogPrimitive.Root;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+/**
+ * Full-viewport scrim rendered behind an `<AlertDialog>` to block interaction with the page.
+ *
+ * @category dialogs
+ * @domain generic
+ * @tier agent-ready
+ */
+const AlertDialogOverlay = forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Overlay, { className: cn('mdk-dialog__overlay', className), ...props, ref: ref })));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+/**
+ * Modal content surface for an `<AlertDialog>` — renders the centered panel above the overlay with focus trap.
+ *
+ * @category dialogs
+ * @domain generic
+ * @tier agent-ready
+ */
+const AlertDialogContent = forwardRef(({ className, ...props }, ref) => (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, { ref: ref, className: cn('mdk-dialog__content', className), ...props })] })));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+/**
+ * Top section of an `<AlertDialog>` that groups the title and description above the action row.
+ *
+ * @category dialogs
+ * @domain generic
+ * @tier agent-ready
+ */
+const AlertDialogHeader = ({ className, children, ...props }) => {
+    return (_jsx("div", { className: cn('mdk-dialog__header', className), ...props, children: _jsx("div", { className: "mdk-dialog__header__container", children: children }) }));
+};
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+/**
+ * Right-aligned action row inside an `<AlertDialog>` — hosts the cancel and confirm buttons.
+ *
+ * @category dialogs
+ * @domain generic
+ * @tier agent-ready
+ */
+const AlertDialogFooter = ({ className, ...props }) => {
+    return _jsx("div", { className: cn('mdk-dialog__footer', className), ...props });
+};
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+/**
+ * Prominent title text inside an `<AlertDialog>` summarising the action that requires confirmation.
+ *
+ * @category dialogs
+ * @domain generic
+ * @tier agent-ready
+ */
+const AlertDialogTitle = forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Title, { ref: ref, className: cn('mdk-dialog__title', className), ...props })));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+/**
+ * Supporting body text inside an `<AlertDialog>`; conveys the consequences of the action being confirmed.
+ *
+ * @category dialogs
+ * @domain generic
+ * @tier agent-ready
+ */
+const AlertDialogDescription = forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Description, { ref: ref, className: cn('mdk-dialog__description', className), ...props })));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+/**
+ * Primary confirmation button inside an `<AlertDialog>`; clicking dismisses the dialog and runs the action handler.
+ *
+ * @category dialogs
+ * @domain generic
+ * @tier agent-ready
+ */
+const AlertDialogAction = forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Action, { ref: ref, className: cn('mdk-button mdk-button--variant-primary mdk-button--size-md', className), ...props })));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+/**
+ * Secondary dismiss button inside an `<AlertDialog>`; closes the dialog without invoking the destructive action.
+ *
+ * @category dialogs
+ * @domain generic
+ * @tier agent-ready
+ */
+const AlertDialogCancel = forwardRef(({ className, ...props }, ref) => (_jsx(AlertDialogPrimitive.Cancel, { ref: ref, className: cn('mdk-button mdk-button--variant-outline mdk-button--size-md', className), ...props })));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };

package/dist/primitives/components/app-header/app-header.d.ts

@@ -0,0 +1,23 @@
+import type { JSX, ReactNode } from 'react';
+import './app-header.scss';
+export type AppHeaderProps = {
+    /** Left-most slot — typically the app's brand lockup / logo. */
+    logo?: ReactNode;
+    /** Left-edge content — e.g. a sidebar collapse toggle or brand wordmark. */
+    start?: ReactNode;
+    /** Middle slot — e.g. the dashboard stats strip or page title. */
+    children?: ReactNode;
+    /** Right-edge action cluster — e.g. alarms bell, profile menu, or sign-out. */
+    actions?: ReactNode;
+    /** Optional class hook for the outer `<header>` element. */
+    className?: string;
+    /**
+     * Render the header sticky to the top of its scroll container
+     * @default true
+     */
+    sticky?: boolean;
+};
+export declare function AppHeader({ logo, start, children, actions, className, sticky, }: AppHeaderProps): JSX.Element;
+export declare namespace AppHeader {
+    var displayName: string;
+}

package/dist/primitives/components/app-header/app-header.example.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Three-slot top-bar shell. `start` for a brand/toggle, `children` for the
+ * main strip, `actions` for the right-edge cluster.
+ */
+export declare const AppHeaderExample: () => React.ReactNode;

package/dist/primitives/components/app-header/app-header.example.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AppHeader } from './app-header';
+/**
+ * Three-slot top-bar shell. `start` for a brand/toggle, `children` for the
+ * main strip, `actions` for the right-edge cluster.
+ */
+export const AppHeaderExample = () => (_jsx(AppHeader, { start: _jsx("strong", { children: "MDK" }), actions: _jsx("button", { type: "button", children: "Sign out" }), children: _jsx("div", { style: { padding: '0 1rem', alignSelf: 'center' }, children: "Header content" }) }));

package/dist/primitives/components/app-header/app-header.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../utils';
+/**
+ * Generic top-bar shell with three slots: `start`, `children` (middle), and
+ * `actions` (end). Renders a sticky dark surface; consumers compose any
+ * content into the slots. The sidebar collapse toggle, brand logo, stats
+ * strip, and action buttons are all caller-provided — this component owns
+ * no domain.
+ *
+ * @category navigation
+ * @domain generic
+ * @tier agent-ready
+ *
+ * @example
+ * ```tsx
+ * <AppHeader
+ *   start={<button onClick={toggleSidebar}>≡</button>}
+ *   actions={<><AlarmsBellButton /> <ProfileMenu /></>}
+ * >
+ *   <HeaderStatsBar>…</HeaderStatsBar>
+ * </AppHeader>
+ * ```
+ */
+export const AppHeader = ({ logo, start, children, actions, className, sticky = true, }) => (_jsxs("header", { className: cn('mdk-app-header', sticky && 'mdk-app-header--sticky', className), children: [logo ? _jsx("div", { className: "mdk-app-header__logo", children: logo }) : null, start ? _jsx("div", { className: "mdk-app-header__start", children: start }) : null, _jsx("div", { className: "mdk-app-header__main", children: children }), actions ? _jsx("div", { className: "mdk-app-header__actions", children: actions }) : null] }));
+AppHeader.displayName = 'AppHeader';

package/dist/primitives/components/app-header/index.d.ts

@@ -0,0 +1,2 @@
+export { AppHeader } from './app-header';
+export type { AppHeaderProps } from './app-header';

package/dist/primitives/components/app-header/index.js

@@ -0,0 +1 @@
+export { AppHeader } from './app-header';

package/dist/primitives/components/area-chart/area-canvas.d.ts

@@ -0,0 +1,9 @@
+import 'chartjs-adapter-date-fns';
+import type { ComponentProps } from 'react';
+import { Line } from 'react-chartjs-2';
+export type AreaCanvasProps = Pick<ComponentProps<typeof Line>, 'data' | 'options' | 'plugins'>;
+export declare function AreaCanvas(props: AreaCanvasProps): React.JSX.Element;
+export declare namespace AreaCanvas {
+    var displayName: string;
+}
+export default AreaCanvas;

package/dist/primitives/components/area-chart/area-canvas.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CategoryScale, Chart as ChartJS, Filler, Legend, LinearScale, LineElement, PointElement, Title, Tooltip, } from 'chart.js';
+import 'chartjs-adapter-date-fns';
+import { Line } from 'react-chartjs-2';
+// Engine-bound leaf for AreaChart. Isolated in its own module so the chart.js +
+// react-chartjs-2 runtime is code-split into a lazy chunk and only loaded when
+// an area chart actually renders (see `index.tsx`).
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Filler, Title, Tooltip, Legend);
+export const AreaCanvas = (props) => _jsx(Line, { ...props });
+AreaCanvas.displayName = 'AreaCanvas';
+export default AreaCanvas;

package/dist/primitives/components/area-chart/area-chart.example.d.ts

@@ -0,0 +1 @@
+export declare const AreaChartExample: () => import("react").JSX.Element;

package/dist/primitives/components/area-chart/area-chart.example.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Runnable example for AreaChart.
+ */
+import { AreaChart } from '@tetherto/mdk-react-devkit';
+const labels = Array.from({ length: 12 }, (_, i) => `m${i + 1}`);
+const data = {
+    labels,
+    datasets: [
+        {
+            label: 'Pool A',
+            borderColor: '#4f9ef5',
+            data: labels.map((_, i) => 100 + Math.sin(i / 3) * 8 + Math.random() * 2),
+        },
+    ],
+};
+export const AreaChartExample = () => {
+    return _jsx(AreaChart, { data: data, height: 280 });
+};

package/dist/primitives/components/area-chart/index.d.ts

@@ -0,0 +1,31 @@
+import type { Chart as ChartJS } from 'chart.js';
+import type { ChartTooltipConfig } from '../../utils/chart-tooltip';
+export type AreaChartProps = {
+    /** Chart data - required, provided by parent */
+    data: ChartJS<'line'>['data'];
+    /** Chart.js options - merged with defaults */
+    options?: ChartJS<'line'>['options'];
+    /** Custom HTML tooltip configuration. When provided, replaces the default Chart.js tooltip. */
+    tooltip?: ChartTooltipConfig;
+    /**
+     * Chart height in pixels
+     * @default 300
+     */
+    height?: number;
+    /** Additional class names */
+    className?: string;
+};
+/**
+ * Presentational Chart.js area chart (Line with fill). Data must be
+ * provided via props; this component does no fetching of its own.
+ *
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ *
+ * @example
+ * ```tsx
+ * <AreaChart data={areaData} options={options} height={300} />
+ * ```
+ */
+export declare const AreaChart: import("react").ForwardRefExoticComponent<AreaChartProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/primitives/components/area-chart/index.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../utils';
+import { colorWithAlpha, defaultChartColors, defaultChartOptions, legendMarginPlugin, } from '../../utils/chart-options';
+import { buildChartTooltip } from '../../utils/chart-tooltip';
+import { forwardRef, lazy, Suspense, useMemo } from 'react';
+// chart.js + react-chartjs-2 are code-split into a lazy chunk so importing this
+// component does not pull the chart engine into a consumer's initial bundle.
+const AreaCanvas = lazy(() => import('./area-canvas'));
+/**
+ * Presentational Chart.js area chart (Line with fill). Data must be
+ * provided via props; this component does no fetching of its own.
+ *
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ *
+ * @example
+ * ```tsx
+ * <AreaChart data={areaData} options={options} height={300} />
+ * ```
+ */
+export const AreaChart = forwardRef(({ data, options, tooltip: tooltipConfig, height = 300, className }, ref) => {
+    const mergedOptions = useMemo(() => {
+        const base = {
+            ...defaultChartOptions,
+            ...options,
+        };
+        if (tooltipConfig) {
+            base.plugins = {
+                ...base.plugins,
+                tooltip: buildChartTooltip(tooltipConfig),
+            };
+        }
+        return base;
+    }, [options, tooltipConfig]);
+    const chartData = useMemo(() => {
+        const datasets = data.datasets?.map((ds, i) => {
+            const lineColor = ds.borderColor ?? defaultChartColors[i % defaultChartColors.length];
+            return {
+                ...ds,
+                fill: true,
+                tension: 0.3,
+                borderColor: lineColor,
+                backgroundColor: ds.backgroundColor ?? colorWithAlpha(String(lineColor), 0.2),
+            };
+        });
+        return { ...data, datasets };
+    }, [data]);
+    return (_jsx("div", { ref: ref, className: cn('mdk-area-chart', className), style: { height }, children: _jsx(Suspense, { fallback: null, children: _jsx(AreaCanvas, { data: chartData, options: mergedOptions, plugins: [legendMarginPlugin] }) }) }));
+});
+AreaChart.displayName = 'AreaChart';

package/dist/primitives/components/avatar/avatar.example.d.ts

@@ -0,0 +1 @@
+export declare const AvatarExample: () => import("react").JSX.Element;

package/dist/primitives/components/avatar/avatar.example.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for Avatar.
+ */
+import { Avatar, AvatarFallback, AvatarImage } from '@tetherto/mdk-react-devkit';
+export const AvatarExample = () => (_jsxs("div", { className: "mdk-example-row", children: [_jsxs(Avatar, { children: [_jsx(AvatarImage, { src: "https://i.pravatar.cc/40?img=1", alt: "Alice" }), _jsx(AvatarFallback, { children: "AL" })] }), _jsxs(Avatar, { children: [_jsx(AvatarImage, { src: "https://i.pravatar.cc/40?img=2", alt: "Bob" }), _jsx(AvatarFallback, { children: "BO" })] }), _jsxs(Avatar, { children: [_jsx(AvatarImage, { src: "/broken-url.png", alt: "Charlie" }), _jsx(AvatarFallback, { children: "CH" })] })] }));

package/dist/primitives/components/avatar/index.d.ts

@@ -0,0 +1,23 @@
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+/**
+ * Circular avatar surface that shows a profile image with a graceful text fallback when the image fails to load.
+ * @category display
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const Avatar: import("react").ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+/**
+ * Profile image slot inside `<Avatar>` — renders `src` and triggers the fallback on load failure.
+ * @category display
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const AvatarImage: import("react").ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
+/**
+ * Initials or icon placeholder shown inside `<Avatar>` while the image loads or when no image is available.
+ * @category display
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const AvatarFallback: import("react").ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export { Avatar, AvatarFallback, AvatarImage };

package/dist/primitives/components/avatar/index.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { cn } from '../../utils';
+import { forwardRef } from 'react';
+/**
+ * Circular avatar surface that shows a profile image with a graceful text fallback when the image fails to load.
+ * @category display
+ * @domain generic
+ * @tier agent-ready
+ */
+const Avatar = forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Root, { ref: ref, className: cn('mdk-avatar', className), ...props })));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+/**
+ * Profile image slot inside `<Avatar>` — renders `src` and triggers the fallback on load failure.
+ * @category display
+ * @domain generic
+ * @tier agent-ready
+ */
+const AvatarImage = forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Image, { ref: ref, className: cn('mdk-avatar__image', className), ...props })));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+/**
+ * Initials or icon placeholder shown inside `<Avatar>` while the image loads or when no image is available.
+ * @category display
+ * @domain generic
+ * @tier agent-ready
+ */
+const AvatarFallback = forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Fallback, { ref: ref, className: cn('mdk-avatar__fallback', className), ...props })));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+export { Avatar, AvatarFallback, AvatarImage };

package/dist/primitives/components/average-downtime-chart/average-downtime-chart.example.d.ts

@@ -0,0 +1 @@
+export declare const AverageDowntimeChartExample: () => import("react").JSX.Element;

package/dist/primitives/components/average-downtime-chart/average-downtime-chart.example.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AverageDowntimeChart } from '@tetherto/mdk-react-devkit/primitives';
+export const AverageDowntimeChartExample = () => (_jsx("div", { className: "mdk-example-row", children: _jsx(AverageDowntimeChart, { data: {
+            labels: ['Mon', 'Tue', 'Wed'],
+            curtailment: [0.02, 0.01, 0.03],
+            operationalIssues: [0.05, 0.04, 0.06],
+        } }) }));

package/dist/primitives/components/average-downtime-chart/constants.d.ts

@@ -0,0 +1,17 @@
+export declare const DEFAULT: {
+    height: number;
+    barWidth: number;
+    unit: "%";
+    title: string;
+};
+export declare const STACK_ID = "DT";
+export declare const SERIES: {
+    readonly curtailment: {
+        readonly label: 'Curtailment';
+        readonly color: "#867DF9";
+    };
+    readonly operationalIssues: {
+        readonly label: 'Op. Issues';
+        readonly color: "#59E8E8";
+    };
+};

package/dist/primitives/components/average-downtime-chart/constants.js

@@ -0,0 +1,19 @@
+import { CHART_COLORS } from '../../constants/colors';
+import { UNITS } from '../../constants/units';
+export const DEFAULT = {
+    height: 280, // in pixels
+    barWidth: 38, // in pixels
+    unit: UNITS.PERCENT,
+    title: 'Monthly Average Downtime',
+};
+export const STACK_ID = 'DT';
+export const SERIES = {
+    curtailment: {
+        label: 'Curtailment',
+        color: CHART_COLORS.VIOLET,
+    },
+    operationalIssues: {
+        label: 'Op. Issues',
+        color: CHART_COLORS.SKY_BLUE,
+    },
+};

package/dist/primitives/components/average-downtime-chart/index.d.ts

@@ -0,0 +1,23 @@
+import type { AverageDowntimeChartProps } from './types';
+export type { AverageDowntimeChartData, AverageDowntimeChartProps } from './types';
+export { buildAverageDowntimeBarChartData, buildAverageDowntimeTooltip, defaultAverageDowntimeRateFormatter, hasAverageDowntimeData, } from './utils';
+/**
+ * Stacked bar chart of average downtime (curtailment vs operational issues).
+ * Wraps `ChartContainer` and `BarChart`; pass period labels and rate arrays via `data`.
+ *
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ *
+ * @example
+ * ```tsx
+ * <AverageDowntimeChart
+ *   data={{
+ *     labels: ['Jan', 'Feb'],
+ *     curtailment: [0.02, 0.01],
+ *     operationalIssues: [0.05, 0.04],
+ *   }}
+ * />
+ * ```
+ */
+export declare const AverageDowntimeChart: ({ data, className, emptyMessage, isLoading, unit, title, showDataLabels, height, barWidth, yTicksFormatter, }: AverageDowntimeChartProps) => import("react").JSX.Element;

package/dist/primitives/components/average-downtime-chart/index.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { BarChart } from '../bar-chart';
+import { ChartContainer } from '../chart-container';
+import { buildAverageDowntimeBarChartData, buildAverageDowntimeTooltip, defaultAverageDowntimeRateFormatter, hasAverageDowntimeData, } from './utils';
+import { standardBarChartScalesXY } from '../../utils/chart-options';
+import { DEFAULT } from './constants';
+export { buildAverageDowntimeBarChartData, buildAverageDowntimeTooltip, defaultAverageDowntimeRateFormatter, hasAverageDowntimeData, } from './utils';
+/**
+ * Stacked bar chart of average downtime (curtailment vs operational issues).
+ * Wraps `ChartContainer` and `BarChart`; pass period labels and rate arrays via `data`.
+ *
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ *
+ * @example
+ * ```tsx
+ * <AverageDowntimeChart
+ *   data={{
+ *     labels: ['Jan', 'Feb'],
+ *     curtailment: [0.02, 0.01],
+ *     operationalIssues: [0.05, 0.04],
+ *   }}
+ * />
+ * ```
+ */
+export const AverageDowntimeChart = ({ data, className, emptyMessage, isLoading = false, unit = DEFAULT.unit, title = DEFAULT.title, showDataLabels = false, height = DEFAULT.height, barWidth = DEFAULT.barWidth, yTicksFormatter = defaultAverageDowntimeRateFormatter, }) => {
+    const chartData = useMemo(() => buildAverageDowntimeBarChartData(data, barWidth), [barWidth, data]);
+    const empty = !isLoading && !hasAverageDowntimeData(data);
+    const tooltip = useMemo(() => buildAverageDowntimeTooltip(yTicksFormatter), [yTicksFormatter]);
+    const header = (_jsxs("div", { className: "mdk-average-downtime-chart__header", children: [_jsx("h3", { className: "mdk-chart-container__title", children: title }), unit ? _jsx("span", { className: "mdk-average-downtime-chart__unit", children: unit }) : null] }));
+    return (_jsx(ChartContainer, { empty: empty, header: header, loading: isLoading, className: className, emptyMessage: emptyMessage, children: !empty && (_jsx(BarChart, { isStacked: true, showLegend: true, showDataLabels: showDataLabels, formatDataLabel: yTicksFormatter, data: chartData, height: height, tooltip: tooltip, legendAlign: "start", legendPosition: "bottom", formatYLabel: yTicksFormatter, options: { scales: standardBarChartScalesXY } })) }));
+};

package/dist/primitives/components/average-downtime-chart/types.d.ts

@@ -0,0 +1,51 @@
+export type AverageDowntimeChartData = {
+    /** X-axis period labels, one per bar; empty renders the empty state */
+    labels: string[];
+    /** "Curtailment" downtime rate per period, as a fraction (0–1), aligned to `labels` */
+    curtailment?: number[];
+    /** "Op. Issues" downtime rate per period, as a fraction (0–1), stacked on `curtailment` */
+    operationalIssues?: number[];
+};
+export type AverageDowntimeChartProps = Partial<{
+    /**
+     * Chart title (unit renders on its own line below)
+     * @default "Monthly Average Downtime"
+     */
+    title: string;
+    /**
+     * Unit subtitle under the title
+     * @default %
+     */
+    unit: string;
+    /**
+     * Chart height in pixels
+     * @default 280
+     */
+    height: number;
+    /**
+     * Max bar thickness
+     * @default 38
+     */
+    barWidth: number;
+    /** Extra class on the container */
+    className: string;
+    /**
+     * Shows loading overlay
+     * @default false
+     */
+    isLoading: boolean;
+    /** Message when there are no period labels or rate series */
+    emptyMessage: string;
+    /** Period labels and rate arrays (fractions 0–1) */
+    data: AverageDowntimeChartData;
+    /**
+     * Formats Y-axis ticks, tooltips, and bar data labels (values are 0–1 rates).
+     * Defaults to rate × 100 via `formatNumber`.
+     */
+    yTicksFormatter: (value: number) => string;
+    /**
+     * Show values above stacked bars
+     * @default false
+     */
+    showDataLabels: boolean;
+}>;

package/dist/primitives/components/average-downtime-chart/types.js

@@ -0,0 +1 @@
+export {};

package/dist/primitives/components/average-downtime-chart/utils.d.ts

@@ -0,0 +1,39 @@
+import type { ChartTooltipConfig } from '../../utils/chart-tooltip';
+import type { AverageDowntimeChartData } from './types';
+/**
+ * True when the chart has period labels and at least one rate series to render.
+ * All-zero rates still count as data (0% downtime is a valid outcome).
+ *
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const hasAverageDowntimeData: (data?: AverageDowntimeChartData) => boolean;
+/**
+ * Maps downtime rates to stacked bar chart datasets (Curtailment + Op. Issues).
+ * Rates are expected as fractions (0–1), matching mining report builders.
+ *
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const buildAverageDowntimeBarChartData: (data: AverageDowntimeChartData | undefined, barWidth?: number) => {
+    labels: string[];
+    datasets: Record<string, unknown>[];
+};
+/**
+ * Default Y-axis, tooltip, and data-label formatter (fraction 0–1 → display percent).
+ *
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const defaultAverageDowntimeRateFormatter: (value: number) => string;
+/**
+ * Tooltip formatter for stacked downtime rate bars (percentage).
+ *
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const buildAverageDowntimeTooltip: (formatRate?: (value: number) => string) => ChartTooltipConfig;