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

package/dist/domain/components/dashboard/export-button/export-button.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, DropdownMenu } from '../../../../primitives/index.js';
+import { ChevronDownIcon, DownloadIcon } from '@radix-ui/react-icons';
+import { useState } from 'react';
+const FORMAT_LABELS = {
+    csv: 'Export as CSV',
+    json: 'Export as JSON',
+};
+/**
+ * Split-button trigger for downloading the current dashboard state. The
+ * left half labels the action (`↓ Export`); the right half opens a dropdown
+ * with the available formats and invokes `onExport(format)` on selection.
+ * When the handler returns a promise, the button shows a spinner and stays
+ * disabled until it settles.
+ *
+ * @category dashboard
+ * @domain mining-operations
+ * @tier agent-ready
+ * @kernelCapability data-export
+ *
+ * @example
+ * ```tsx
+ * <ExportButton
+ *   onExport={(fmt) => (fmt === 'csv' ? downloadCsv(rows) : downloadJson(rows))}
+ * />
+ * // async: spinner until the export settles
+ * <ExportButton onExport={(fmt) => api.exportStats(fmt)} />
+ * ```
+ */
+export const ExportButton = ({ onExport, formats = ['csv', 'json'], label = 'Export', disabled = false, className, }) => {
+    const [exporting, setExporting] = useState(false);
+    const handleSelect = async (format) => {
+        const pending = onExport(format);
+        if (!pending)
+            return;
+        setExporting(true);
+        try {
+            await pending;
+        }
+        catch {
+            // The handler runs from a menu event, so a rejection has no caller to
+            // reach; reporting the failure is the handler's job.
+        }
+        finally {
+            setExporting(false);
+        }
+    };
+    return (_jsxs(DropdownMenu.Root, { children: [_jsx(DropdownMenu.Trigger, { asChild: true, children: _jsxs(Button, { variant: "secondary", disabled: disabled, loading: exporting, icon: _jsx(DownloadIcon, {}), className: ['mdk-export-button', className].filter(Boolean).join(' '), children: [_jsx("span", { className: "mdk-export-button__label", children: label }), _jsx(ChevronDownIcon, { className: "mdk-export-button__chevron" })] }) }), _jsx(DropdownMenu.Content, { align: "start", size: "sm", className: "mdk-export-button__menu", children: formats.map((format) => (_jsx(DropdownMenu.Item, { onSelect: () => void handleSelect(format), children: FORMAT_LABELS[format] }, format))) })] }));
+};
+ExportButton.displayName = 'ExportButton';

package/dist/domain/components/dashboard/export-button/index.d.ts

@@ -0,0 +1 @@
+export { ExportButton, type ExportButtonProps, type ExportFormat } from './export-button';

package/dist/domain/components/dashboard/export-button/index.js

@@ -0,0 +1 @@
+export { ExportButton } from './export-button';

package/dist/domain/components/dashboard/index.d.ts

@@ -0,0 +1,5 @@
+export * from './dashboard-date-range-picker';
+export * from './export-button';
+export * from './power-mode-timeline-chart';
+export * from './site-stats-bar';
+export * from './timeline-selector';

package/dist/domain/components/dashboard/index.js

@@ -0,0 +1,5 @@
+export * from './dashboard-date-range-picker';
+export * from './export-button';
+export * from './power-mode-timeline-chart';
+export * from './site-stats-bar';
+export * from './timeline-selector';

package/dist/domain/components/dashboard/power-mode-timeline-chart/index.d.ts

@@ -0,0 +1,2 @@
+export * from './power-mode-timeline-chart';
+export * from './power-mode-timeline-chart.helper';

package/dist/domain/components/dashboard/power-mode-timeline-chart/index.js

@@ -0,0 +1,2 @@
+export * from './power-mode-timeline-chart';
+export * from './power-mode-timeline-chart.helper';

package/dist/domain/components/dashboard/power-mode-timeline-chart/power-mode-timeline-chart.d.ts

@@ -0,0 +1,44 @@
+import type { PowerModeTimelineEntry } from './power-mode-timeline-chart.helper';
+/** Props for {@link PowerModeTimelineChart}. */
+export type PowerModeTimelineChartProps = Partial<{
+    /**
+     * Initial power-mode entries (each with start/end ts + mode).
+     * @default []
+     */
+    data: PowerModeTimelineEntry[];
+    /**
+     * Streaming updates appended to the initial data.
+     * @default []
+     */
+    dataUpdates: PowerModeTimelineEntry[];
+    /**
+     * Show a loading skeleton instead of the chart.
+     * @default false
+     */
+    isLoading: boolean;
+    /**
+     * IANA timezone string for x-axis tick formatting.
+     * @default "UTC"
+     */
+    timezone: string;
+    /**
+     * Chart title.
+     * @default CHART_TITLES.POWER_MODE_TIMELINE
+     */
+    title: string;
+}>;
+/**
+ * Timeline chart for power-mode state changes over time. Wraps
+ * {@link TimelineChart} with mining-specific data shaping.
+ *
+ * @category charts
+ * @kernelCapability device-telemetry
+ * @domain mining-operations
+ *
+ * @example
+ * ```tsx
+ * <PowerModeTimelineChart data={powerModeLog} timezone="UTC" />
+ * ```
+ * @tier agent-ready
+ */
+export declare const PowerModeTimelineChart: import("react").MemoExoticComponent<({ data, dataUpdates, isLoading, timezone, title, }: PowerModeTimelineChartProps) => import("react").JSX.Element>;

package/dist/domain/components/dashboard/power-mode-timeline-chart/power-mode-timeline-chart.example.d.ts

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

package/dist/domain/components/dashboard/power-mode-timeline-chart/power-mode-timeline-chart.example.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Runnable example for PowerModeTimelineChart.
+ */
+import { PowerModeTimelineChart } from '@tetherto/mdk-react-devkit';
+const NOW = Date.now() / 1000;
+const HOUR = 60 * 60;
+const mockEntries = [
+    { ts: NOW - 6 * HOUR, mode: 'normal', id: 'miner-01' },
+    { ts: NOW - 4 * HOUR, mode: 'boost', id: 'miner-01' },
+    { ts: NOW - 2 * HOUR, mode: 'normal', id: 'miner-01' },
+];
+export const PowerModeTimelineChartExample = () => {
+    return _jsx(PowerModeTimelineChart, { data: mockEntries, timezone: "UTC", title: "Power mode" });
+};

package/dist/domain/components/dashboard/power-mode-timeline-chart/power-mode-timeline-chart.helper.d.ts

@@ -0,0 +1,35 @@
+import type { TimelineChartData } from '../../timeline-chart';
+export type PowerModeTimelineEntry = {
+    /** Sample time (epoch ms); consecutive samples with the same mode merge into one bar */
+    ts?: number;
+    /** Power mode keyed by miner; takes precedence over the miner's status for the bar's mode */
+    power_mode_group_aggr?: Record<string, string>;
+    /** Status keyed by miner; its keys decide which miners get a row, and an entry without it adds nothing */
+    status_group_aggr?: Record<string, string>;
+    [key: string]: unknown;
+};
+export type MinerPowerModeTimeline = {
+    ts?: number;
+    miner?: string;
+    powerMode?: string;
+    data?: {
+        from?: number;
+        to?: number;
+    };
+};
+export type PowerModeTimelineDataset = {
+    label: string;
+    data: Array<{
+        x: [number, number];
+        y: string | undefined;
+    }>;
+    color: string;
+};
+export type PowerModeTimelineChartData = {
+    labels: string[];
+    datasets: PowerModeTimelineDataset[];
+};
+export declare const getCombinedPowerModeTimelineByMiner: (data: PowerModeTimelineEntry[]) => Record<string, MinerPowerModeTimeline[]>;
+export declare const getPowerModeTimelineDatasetObject: (combinedPowerModeTimelineByMiner: Record<string, MinerPowerModeTimeline[]>, timezone: string) => Record<string, PowerModeTimelineDataset>;
+export declare const getPowerModeTimelineChartData: (data: PowerModeTimelineEntry[] | undefined, timezone: string) => PowerModeTimelineChartData;
+export declare const transformToTimelineChartData: (helperData: PowerModeTimelineChartData) => TimelineChartData;

package/dist/domain/components/dashboard/power-mode-timeline-chart/power-mode-timeline-chart.helper.js

@@ -0,0 +1,94 @@
+import { getTimezoneOffset } from 'date-fns-tz';
+import _flatten from 'lodash/flatten';
+import _isUndefined from 'lodash/isUndefined';
+import _keys from 'lodash/keys';
+import _reduce from 'lodash/reduce';
+import _values from 'lodash/values';
+import { PowerModeColors } from '../../../utils/device-utils';
+import { MinerStatusColors } from '../../miners-activity-chart/miners-activity-chart.const';
+export const getCombinedPowerModeTimelineByMiner = (data) => _reduce(data, (acc, entry) => {
+    const { ts, power_mode_group_aggr, status_group_aggr } = entry || {};
+    const statusGroup = status_group_aggr;
+    const powerModeGroup = power_mode_group_aggr;
+    if (statusGroup) {
+        for (const miner in statusGroup) {
+            if (!acc[miner]) {
+                acc[miner] = [];
+            }
+            const powerMode = powerModeGroup?.[miner] || statusGroup[miner];
+            const lastIndex = acc[miner].length - 1;
+            const lastEntry = acc[miner][lastIndex];
+            if (lastEntry && lastEntry.powerMode === powerMode && lastEntry?.data?.to) {
+                if (lastEntry.data) {
+                    lastEntry.data.to = ts;
+                }
+            }
+            else {
+                acc[miner].push({
+                    ts,
+                    miner,
+                    powerMode,
+                    data: { from: ts, to: ts },
+                });
+            }
+        }
+    }
+    return acc;
+}, {});
+const getTimezoneTs = (x, timezone) => {
+    if (_isUndefined(x))
+        return 0;
+    const offset = getTimezoneOffset(timezone);
+    return x + offset;
+};
+const getPowerModeColor = (powerMode) => {
+    const powerModeValue = PowerModeColors[powerMode];
+    if (powerModeValue) {
+        return powerModeValue;
+    }
+    const minerStatusValue = MinerStatusColors[powerMode];
+    if (minerStatusValue) {
+        return minerStatusValue;
+    }
+    return 'var(--mdk-color-gray-500)';
+};
+export const getPowerModeTimelineDatasetObject = (combinedPowerModeTimelineByMiner, timezone) => _reduce(_flatten(_values(combinedPowerModeTimelineByMiner)), (acc, minerPowerModeTimeline) => {
+    const powerMode = minerPowerModeTimeline.powerMode || '';
+    if (!acc[powerMode]) {
+        acc[powerMode] = {
+            label: powerMode,
+            data: [],
+            color: getPowerModeColor(powerMode),
+        };
+    }
+    acc[powerMode].data.push({
+        x: [
+            getTimezoneTs(minerPowerModeTimeline.data?.from, timezone),
+            getTimezoneTs(minerPowerModeTimeline.data?.to, timezone),
+        ],
+        y: minerPowerModeTimeline.miner,
+    });
+    return acc;
+}, {});
+export const getPowerModeTimelineChartData = (data, timezone) => {
+    if (!data) {
+        return {
+            labels: [],
+            datasets: [],
+        };
+    }
+    const combinedPowerModeTimelineByMiner = getCombinedPowerModeTimelineByMiner(data);
+    const powerModeTimelineDatasetObject = getPowerModeTimelineDatasetObject(combinedPowerModeTimelineByMiner, timezone);
+    return {
+        labels: _keys(combinedPowerModeTimelineByMiner),
+        datasets: _values(powerModeTimelineDatasetObject),
+    };
+};
+export const transformToTimelineChartData = (helperData) => ({
+    labels: helperData.labels,
+    datasets: helperData.datasets.map((dataset) => ({
+        label: dataset.label,
+        data: dataset.data,
+        color: dataset.color,
+    })),
+});

package/dist/domain/components/dashboard/power-mode-timeline-chart/power-mode-timeline-chart.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { CHART_TITLES } from '../../../constants/charts';
+import { TimelineChart } from '../../timeline-chart';
+import { getPowerModeTimelineChartData, transformToTimelineChartData, } from './power-mode-timeline-chart.helper';
+/**
+ * Timeline chart for power-mode state changes over time. Wraps
+ * {@link TimelineChart} with mining-specific data shaping.
+ *
+ * @category charts
+ * @kernelCapability device-telemetry
+ * @domain mining-operations
+ *
+ * @example
+ * ```tsx
+ * <PowerModeTimelineChart data={powerModeLog} timezone="UTC" />
+ * ```
+ * @tier agent-ready
+ */
+export const PowerModeTimelineChart = memo(({ data = [], dataUpdates = [], isLoading = false, timezone = 'UTC', title = CHART_TITLES.POWER_MODE_TIMELINE, }) => {
+    const initialData = useMemo(() => transformToTimelineChartData(getPowerModeTimelineChartData(data, timezone)), [data, timezone]);
+    const newData = useMemo(() => dataUpdates.length > 0
+        ? transformToTimelineChartData(getPowerModeTimelineChartData(dataUpdates, timezone))
+        : undefined, [dataUpdates, timezone]);
+    return (_jsx(TimelineChart, { initialData: initialData, newData: newData, skipUpdates: !dataUpdates.length, axisTitleText: { y: 'Power Mode', x: 'Time' }, isLoading: isLoading, title: title }));
+});
+PowerModeTimelineChart.displayName = 'PowerModeTimelineChart';

package/dist/domain/components/dashboard/site-stats-bar/index.d.ts

@@ -0,0 +1,2 @@
+export type { SiteStatsBarProps } from './site-stats-bar';
+export { SiteStatsBar } from './site-stats-bar';

package/dist/domain/components/dashboard/site-stats-bar/index.js

@@ -0,0 +1 @@
+export { SiteStatsBar } from './site-stats-bar';

package/dist/domain/components/dashboard/site-stats-bar/site-stats-bar.d.ts

@@ -0,0 +1,38 @@
+import type { JSX } from 'react';
+import './site-stats-bar.scss';
+export type SiteStatsBarProps = {
+    /** Site label rendered in the header row. */
+    title: string;
+    /**
+     * Current site-level power consumption, in watts. It is displayed divided by 1000, so
+     * `powerUnit` names the kilo unit (`kW` by default).
+     */
+    power?: number;
+    /**
+     * Display unit for `power` — defaults to `kW`.
+     * @default 'kW'
+     */
+    powerUnit?: string;
+    /** Aggregate hashrate, in TH/s. */
+    totalHashrate?: number;
+    /**
+     * Hashrate display unit — defaults to `TH/s`.
+     * @default 'TH/s'
+     */
+    hashrateUnit?: string;
+    /** Total miner count across the site. */
+    minerCount?: number;
+    /** Total container count across the site. */
+    containerCount?: number;
+    /**
+     * Render a skeleton bar while data is loading.
+     * @default false
+     */
+    isLoading?: boolean;
+    /** Optional class hook. */
+    className?: string;
+};
+export declare function SiteStatsBar({ title, power, powerUnit, totalHashrate, hashrateUnit, minerCount, containerCount, isLoading, className, }: SiteStatsBarProps): JSX.Element;
+export declare namespace SiteStatsBar {
+    var displayName: string;
+}

package/dist/domain/components/dashboard/site-stats-bar/site-stats-bar.example.d.ts

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

package/dist/domain/components/dashboard/site-stats-bar/site-stats-bar.example.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Runnable example for SiteStatsBar.
+ *
+ * Compose the four site-level stats (current power, hashrate, miner count,
+ * container count) into one summary strip. Drives off pre-computed numbers
+ * — a page derives them from its own site summary route.
+ */
+import { SiteStatsBar } from '@tetherto/mdk-react-devkit';
+export const SiteStatsBarExample = () => (_jsx(SiteStatsBar, { title: "Site A", power: 1_320_000, powerUnit: "kW", totalHashrate: 92.3, hashrateUnit: "TH/s", minerCount: 1024, containerCount: 4 }));

package/dist/domain/components/dashboard/site-stats-bar/site-stats-bar.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, SkeletonBlock } from '../../../../primitives/index.js';
+import { GenericDataBox } from '../../data-box/generic-data-box/generic-data-box';
+import { WidgetTopRow } from '../../widget-top-row';
+/**
+ * Site-level summary strip composed from `WidgetTopRow` (title + power) and
+ * `GenericDataBox` (hashrate / miner-count / container-count). Designed to
+ * sit at the top of a dashboard page above the chart cards.
+ *
+ * @category dashboard
+ * @kernelCapability hashrate-monitoring
+ * @domain mining-operations
+ *
+ * @example
+ * ```tsx
+ * <SiteStatsBar
+ *   title='Site A'
+ *   power={1_320_000}
+ *   totalHashrate={92.3}
+ *   minerCount={1024}
+ *   containerCount={4}
+ * />
+ * ```
+ * @tier agent-ready
+ */
+export const SiteStatsBar = ({ title, power, powerUnit = 'kW', totalHashrate, hashrateUnit = 'TH/s', minerCount, containerCount, isLoading = false, className, }) => {
+    if (isLoading) {
+        return (_jsx("div", { className: cn('mdk-site-stats-bar mdk-site-stats-bar--loading', className), children: _jsx(SkeletonBlock, {}) }));
+    }
+    return (_jsxs("div", { className: cn('mdk-site-stats-bar', className), children: [_jsx(WidgetTopRow, { title: title, power: power, unit: powerUnit, className: "mdk-site-stats-bar__header" }), _jsx(GenericDataBox, { data: [
+                    {
+                        label: 'Hashrate',
+                        value: totalHashrate,
+                        units: hashrateUnit,
+                        isHighlighted: true,
+                    },
+                    { label: 'Miners', value: minerCount },
+                    { label: 'Containers', value: containerCount },
+                ], fallbackValue: "\u2014" })] }));
+};
+SiteStatsBar.displayName = 'SiteStatsBar';

package/dist/domain/components/dashboard/timeline-selector/index.d.ts

@@ -0,0 +1,3 @@
+export { DEFAULT_TIMELINE_OPTIONS, getTimelineOptions } from './timeline-options';
+export type { TimelineSelectorProps } from './timeline-selector';
+export { TimelineSelector } from './timeline-selector';

package/dist/domain/components/dashboard/timeline-selector/index.js

@@ -0,0 +1,2 @@
+export { DEFAULT_TIMELINE_OPTIONS, getTimelineOptions } from './timeline-options';
+export { TimelineSelector } from './timeline-selector';

package/dist/domain/components/dashboard/timeline-selector/timeline-options.d.ts

@@ -0,0 +1,21 @@
+import type { TimelineOption } from '../../line-chart-card/types';
+/**
+ * Canonical short-form intervals for the dashboard timeline selector.
+ *
+ * @category dashboard
+ * @domain generic
+ * @tier advanced
+ */
+export declare const DEFAULT_TIMELINE_OPTIONS: readonly TimelineOption[];
+/**
+ * Default options for the dashboard timeline selector: 5m / 30m / 3h / 1D.
+ * Pass `{ includeOneMinute: true }` when your history route serves a
+ * 1-minute bucket.
+ *
+ * @category dashboard
+ * @domain generic
+ * @tier advanced
+ */
+export declare const getTimelineOptions: (opts?: {
+    includeOneMinute?: boolean;
+}) => TimelineOption[];

package/dist/domain/components/dashboard/timeline-selector/timeline-options.js

@@ -0,0 +1,29 @@
+/**
+ * Canonical short-form intervals for the dashboard timeline selector.
+ *
+ * @category dashboard
+ * @domain generic
+ * @tier advanced
+ */
+export const DEFAULT_TIMELINE_OPTIONS = [
+    { value: '1m', label: '1 Min' },
+    { value: '5m', label: '5 Min' },
+    { value: '30m', label: '30 Min' },
+    { value: '3h', label: '3 H' },
+    { value: '1D', label: '1 D' },
+];
+/**
+ * Default options for the dashboard timeline selector: 5m / 30m / 3h / 1D.
+ * Pass `{ includeOneMinute: true }` when your history route serves a
+ * 1-minute bucket.
+ *
+ * @category dashboard
+ * @domain generic
+ * @tier advanced
+ */
+export const getTimelineOptions = (opts = {}) => {
+    const includeOneMinute = opts.includeOneMinute ?? false;
+    return includeOneMinute
+        ? [...DEFAULT_TIMELINE_OPTIONS]
+        : DEFAULT_TIMELINE_OPTIONS.filter((o) => o.value !== '1m').map((o) => ({ ...o }));
+};

package/dist/domain/components/dashboard/timeline-selector/timeline-selector.d.ts

@@ -0,0 +1,25 @@
+import type { TimelineOption } from '../../line-chart-card/types';
+import type { JSX } from 'react';
+export type TimelineSelectorProps = {
+    /** Currently selected timeline value (e.g. `'1m'`, `'5m'`). */
+    value: string;
+    /** Called whenever the user picks a new option. */
+    onChange: (next: string) => void;
+    /**
+     * Available options — defaults to {@link getTimelineOptions}. Pass a custom
+     * list to localise labels or restrict the range.
+     * @default getTimelineOptions()
+     */
+    options?: TimelineOption[];
+    /**
+     * ARIA label / placeholder for the trigger.
+     * @default "Time range"
+     */
+    label?: string;
+    /** Tailwind/BEM class hook on the trigger. */
+    className?: string;
+};
+export declare function TimelineSelector({ value, onChange, options, label, className, }: TimelineSelectorProps): JSX.Element;
+export declare namespace TimelineSelector {
+    var displayName: string;
+}

package/dist/domain/components/dashboard/timeline-selector/timeline-selector.example.d.ts

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

package/dist/domain/components/dashboard/timeline-selector/timeline-selector.example.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Runnable example for TimelineSelector.
+ *
+ * Controlled component — the caller owns its `value` and reacts to
+ * `onChange`.
+ */
+import { TimelineSelector } from '@tetherto/mdk-react-devkit';
+import { useState } from 'react';
+export const TimelineSelectorExample = () => {
+    const [value, setValue] = useState('5m');
+    return _jsx(TimelineSelector, { value: value, onChange: setValue });
+};

package/dist/domain/components/dashboard/timeline-selector/timeline-selector.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../../primitives/index.js';
+import { getTimelineOptions } from './timeline-options';
+/**
+ * Dropdown for picking the dashboard time range. Wraps `core/Select` and the
+ * canonical option list from `getTimelineOptions`. Controlled: the page owns
+ * the selected timeline and passes it to its queries.
+ *
+ * @category dashboard
+ * @kernelCapability hashrate-monitoring
+ * @domain mining-operations
+ *
+ * @example
+ * ```tsx
+ * const [timeline, setTimeline] = useState('5m')
+ * return <TimelineSelector value={timeline} onChange={setTimeline} />
+ * ```
+ * @tier agent-ready
+ */
+export const TimelineSelector = ({ value, onChange, options, label = 'Time range', className, }) => {
+    const list = options ?? getTimelineOptions();
+    return (_jsxs(Select, { value: value, onValueChange: onChange, children: [_jsx(SelectTrigger, { className: cn('mdk-timeline-selector', className), "aria-label": label, children: _jsx(SelectValue, { placeholder: label }) }), _jsx(SelectContent, { children: list.map((option) => (_jsx(SelectItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value))) })] }));
+};
+TimelineSelector.displayName = 'TimelineSelector';

package/dist/domain/components/data-box/content-box/content-box.d.ts

@@ -0,0 +1,24 @@
+import type { ReactElement, ReactNode } from 'react';
+import './content-box.scss';
+type ContentBoxProps = {
+    /** Content to display inside the box */
+    children?: ReactNode;
+    /** Optional title to display at the top */
+    title?: string;
+    /** Additional CSS class name */
+    className?: string;
+};
+/**
+ * Content Box Component
+ *
+ * A container component with optional title for displaying content sections.
+ *
+ * @example
+ * ```tsx
+ * <ContentBox title="Power Distribution">
+ *   <p>Power data...</p>
+ * </ContentBox>
+ * ```
+ */
+export declare const ContentBox: ({ children, title, className }: ContentBoxProps) => ReactElement;
+export {};

package/dist/domain/components/data-box/content-box/content-box.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Content Box Component
+ *
+ * A container component with optional title for displaying content sections.
+ *
+ * @example
+ * ```tsx
+ * <ContentBox title="Power Distribution">
+ *   <p>Power data...</p>
+ * </ContentBox>
+ * ```
+ */
+export const ContentBox = ({ children, title, className }) => (_jsxs("div", { className: `mdk-content-box ${className || ''}`.trim(), children: [title && _jsx("h3", { className: "mdk-content-box__title", children: title }), _jsx("div", { className: "mdk-content-box__content", children: children })] }));

package/dist/domain/components/data-box/data-row/data-row.d.ts

@@ -0,0 +1,31 @@
+import type { ReactElement } from 'react';
+import './data-row.scss';
+export type DataRowItem = {
+    /** Row label */
+    label?: string;
+    /** Row value */
+    value?: unknown;
+    /** Units to display */
+    units?: string;
+    /** Highlight the row */
+    isHighlighted?: boolean;
+    /** Custom text color */
+    color?: string;
+    /** Flash animation */
+    flash?: boolean;
+};
+/**
+ * Data Row Component
+ *
+ * Displays a single row with label, value, and units.
+ *
+ * @example
+ * ```tsx
+ * import { UNITS } from '@tetherto/mdk-react-devkit'
+ *
+ * <DataRow label="Temperature" value={45} units={UNITS.TEMPERATURE_C} />
+ * <DataRow label="Status" value="Running" isHighlighted color="green" />
+ * <DataRow label="Alert" value="Critical" flash color="red" />
+ * ```
+ */
+export declare const DataRow: ({ label, value, units, isHighlighted, color, flash, }: DataRowItem) => ReactElement | null;

package/dist/domain/components/data-box/data-row/data-row.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Data Row Component
+ *
+ * Displays a single row with label, value, and units.
+ *
+ * @example
+ * ```tsx
+ * import { UNITS } from '@tetherto/mdk-react-devkit'
+ *
+ * <DataRow label="Temperature" value={45} units={UNITS.TEMPERATURE_C} />
+ * <DataRow label="Status" value="Running" isHighlighted color="green" />
+ * <DataRow label="Alert" value="Critical" flash color="red" />
+ * ```
+ */
+export const DataRow = ({ label, value, units, isHighlighted = false, color, flash = false, }) => {
+    // Don't render if value is null or undefined
+    if (value === null || value === undefined) {
+        return null;
+    }
+    return (_jsxs("div", { className: `mdk-data-row ${isHighlighted ? 'mdk-data-row--highlighted' : ''} ${flash ? 'mdk-data-row--flash' : ''}`, style: color ? { color } : undefined, children: [_jsx("span", { className: "mdk-data-row__label", children: label }), _jsx("span", { className: "mdk-data-row__value", children: String(value) }), units && _jsx("span", { className: "mdk-data-row__units", children: units })] }));
+};