@tetherto/mdk-react-devkit 0.0.0 → 0.12.1

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

@@ -0,0 +1,395 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRightIcon } from '@radix-ui/react-icons';
+import { cn } from '../../utils';
+import { Checkbox } from '../checkbox';
+import { EmptyState } from '../empty-state';
+import { Radio, RadioGroup } from '../radio';
+import { TagInput } from '../tag-input';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+/**
+ * Two-panel hierarchical selector for picking a leaf value from a nested tree (categories → subcategories → leaf).
+ *
+ * Features:
+ * - Two-column layout: categories on left, options on right
+ * - Single or multiple selection modes
+ * - Search/filter functionality via TagInput
+ * - Category-level selection (select/deselect all children)
+ * - Indeterminate state for partial selections
+ * - Tag display for multiple selections
+ * - Keyboard navigation support
+ * - Disabled state support
+ *
+ * @example
+ * // Single select mode
+ * ```tsx
+ * const [value, setValue] = useState<CascaderValue>(['electronics', 'phones'])
+ *
+ * <Cascader
+ *   options={[
+ *     {
+ *       value: 'electronics',
+ *       label: 'Electronics',
+ *       children: [
+ *         { value: 'phones', label: 'Phones' },
+ *         { value: 'laptops', label: 'Laptops' }
+ *       ]
+ *     }
+ *   ]}
+ *   value={value}
+ *   onChange={(val) => setValue(val as CascaderValue)}
+ * />
+ * ```
+ *
+ * @example
+ * // Multiple select mode with search
+ * ```tsx
+ * const [values, setValues] = useState<CascaderValue[]>([
+ *   ['electronics', 'phones'],
+ *   ['electronics', 'laptops']
+ * ])
+ *
+ * <Cascader
+ *   options={[
+ *     {
+ *       value: 'electronics',
+ *       label: 'Electronics',
+ *       children: [
+ *         { value: 'phones', label: 'Phones' },
+ *         { value: 'laptops', label: 'Laptops' },
+ *         { value: 'tablets', label: 'Tablets' }
+ *       ]
+ *     },
+ *     {
+ *       value: 'clothing',
+ *       label: 'Clothing',
+ *       children: [
+ *         { value: 'mens', label: "Men's" },
+ *         { value: 'womens', label: "Women's" }
+ *       ]
+ *     }
+ *   ]}
+ *   value={values}
+ *   onChange={(val) => setValues(val as CascaderValue[])}
+ *   multiple
+ *   placeholder="Select categories..."
+ * />
+ * ```
+ *
+ * @example
+ * // With disabled options
+ * ```tsx
+ * <Cascader
+ *   options={[
+ *     {
+ *       value: 'status',
+ *       label: 'Status',
+ *       children: [
+ *         { value: 'active', label: 'Active' },
+ *         { value: 'maintenance', label: 'Maintenance', disabled: true }
+ *       ]
+ *     }
+ *   ]}
+ *   value={value}
+ *   onChange={setValue}
+ * />
+ * ```
+ *
+ * @example
+ * // Filter/Alert use case
+ * ```tsx
+ * const filterOptions = [
+ *   {
+ *     value: 'severity',
+ *     label: 'Severity',
+ *     children: [
+ *       { value: 'critical', label: 'Critical' },
+ *       { value: 'high', label: 'High' },
+ *       { value: 'medium', label: 'Medium' },
+ *       { value: 'low', label: 'Low' }
+ *     ]
+ *   },
+ *   {
+ *     value: 'status',
+ *     label: 'Status',
+ *     children: [
+ *       { value: 'active', label: 'Active' },
+ *       { value: 'resolved', label: 'Resolved' }
+ *     ]
+ *   }
+ * ]
+ *
+ * const [filters, setFilters] = useState<CascaderValue[]>([
+ *   ['severity', 'critical'],
+ *   ['status', 'active']
+ * ])
+ *
+ * <Cascader
+ *   options={filterOptions}
+ *   value={filters}
+ *   onChange={setFilters}
+ *   multiple
+ *   placeholder="Filter alerts..."
+ * />
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+// ... (keep all existing types)
+const Cascader = forwardRef(({ options, value, onChange, multiple = false, placeholder = 'Select...', disabled = false, className, dropdownClassName, }, ref) => {
+    const tagInputRef = useRef(null);
+    // Track which category is currently active (shown in right panel)
+    const [activeCategory, setActiveCategory] = useState(null);
+    const [showLeftPanel, setShowLeftPanel] = useState(true);
+    const [searchValue, setSearchValue] = useState('');
+    const [selectedTags, setSelectedTags] = useState([]);
+    // Normalize value to array format for consistent internal handling
+    const normalizedValue = useMemo(() => {
+        if (!value)
+            return [];
+        if (multiple) {
+            return value;
+        }
+        return [value];
+    }, [value, multiple]);
+    // Convert selections to Set for O(1) lookup performance
+    const selectedSet = useMemo(() => {
+        const set = new Set();
+        normalizedValue.forEach((selection) => {
+            set.add(JSON.stringify(selection));
+        });
+        return set;
+    }, [normalizedValue]);
+    const isSelected = useCallback((selection) => {
+        return selectedSet.has(JSON.stringify(selection));
+    }, [selectedSet]);
+    const isCategorySelected = useCallback((categoryValue) => {
+        const category = options.find(({ value }) => value === categoryValue);
+        if (!category?.children)
+            return false;
+        return category.children
+            .filter((child) => !child.disabled)
+            .every((child) => isSelected([categoryValue, child.value]));
+    }, [options, isSelected]);
+    const isCategoryIndeterminate = useCallback((categoryValue) => {
+        const category = options.find(({ value }) => value === categoryValue);
+        if (!category?.children)
+            return false;
+        const selectedChildren = category.children.filter((child) => isSelected([categoryValue, child.value]));
+        return selectedChildren.length > 0 && selectedChildren.length < category.children.length;
+    }, [options, isSelected]);
+    const handleSelect = useCallback((selection, checked) => {
+        if (disabled)
+            return;
+        let newValue;
+        if (multiple) {
+            if (checked) {
+                newValue = [...normalizedValue, selection];
+            }
+            else {
+                newValue = normalizedValue.filter((s) => JSON.stringify(s) !== JSON.stringify(selection));
+            }
+        }
+        else {
+            newValue = selection;
+        }
+        onChange?.(newValue);
+    }, [disabled, multiple, normalizedValue, onChange]);
+    const handleRadioChange = useCallback((selectionString) => {
+        if (disabled)
+            return;
+        const selection = JSON.parse(selectionString);
+        onChange?.(selection);
+    }, [disabled, onChange]);
+    const handleCategoryToggle = useCallback((categoryValue, checked) => {
+        const category = options.find(({ value }) => value === categoryValue);
+        if (!category?.children)
+            return;
+        let newValue;
+        if (checked) {
+            const childSelections = category.children
+                .filter((child) => !child.disabled)
+                .map((child) => [categoryValue, child.value])
+                .filter((sel) => !isSelected(sel));
+            newValue = [...normalizedValue, ...childSelections];
+        }
+        else {
+            newValue = normalizedValue.filter((sel) => sel[0] !== categoryValue);
+        }
+        onChange?.(newValue);
+    }, [options, normalizedValue, onChange, isSelected]);
+    const activeOptions = useMemo(() => {
+        if (!activeCategory)
+            return [];
+        const category = options.find(({ value }) => String(value) === activeCategory);
+        return category?.children || [];
+    }, [activeCategory, options]);
+    /**
+     * Flatten all options with their parent labels for search
+     * Format: "Category / Option"
+     */
+    const flattenedOptions = useMemo(() => {
+        const flattened = [];
+        options.forEach((parent) => {
+            if (parent.children) {
+                parent.children.forEach((child) => {
+                    flattened.push({
+                        selection: [parent.value, child.value],
+                        label: `${parent.label} / ${child.label}`,
+                        categoryLabel: parent.label,
+                        optionLabel: child.label,
+                        disabled: parent.disabled || child.disabled,
+                    });
+                });
+            }
+        });
+        return flattened;
+    }, [options]);
+    const highlightText = useCallback((text, search) => {
+        if (!search.trim())
+            return text;
+        const regex = new RegExp(`(${search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+        const parts = text.split(regex);
+        return (_jsx(_Fragment, { children: parts.map((part, index) => regex.test(part) ? (_jsx("span", { className: "mdk-cascader__highlight", children: part }, index)) : (part)) }));
+    }, []);
+    /**
+     * Filter options based on search input
+     * Searches in both category and option labels
+     */
+    const filteredOptions = useMemo(() => {
+        if (!searchValue.trim())
+            return flattenedOptions;
+        const search = searchValue.toLowerCase();
+        return flattenedOptions.filter(({ categoryLabel, optionLabel, label }) => categoryLabel.toLowerCase().includes(search) ||
+            optionLabel.toLowerCase().includes(search) ||
+            label.toLowerCase().includes(search));
+    }, [flattenedOptions, searchValue]);
+    useEffect(() => {
+        if (!multiple) {
+            setSelectedTags([]);
+            return;
+        }
+        const tags = normalizedValue.map((sel) => {
+            const lastValue = sel[sel.length - 1];
+            for (const parent of options) {
+                if (parent.children) {
+                    const child = parent.children.find((c) => c.value === lastValue);
+                    if (child) {
+                        return {
+                            label: child.label,
+                            id: `${parent.value}__${child.value}`,
+                        };
+                    }
+                }
+            }
+            return {
+                label: String(lastValue),
+                id: String(lastValue),
+            };
+        });
+        setSelectedTags(tags);
+    }, [normalizedValue, multiple, options]);
+    const tagInputOptions = useMemo(() => {
+        const allOptions = [];
+        options.forEach((parent) => {
+            if (parent.children) {
+                parent.children.forEach((child) => {
+                    allOptions.push({
+                        value: String(child.value),
+                        label: child.label,
+                    });
+                });
+            }
+        });
+        return allOptions;
+    }, [options]);
+    const handleTagRemove = useCallback((tags) => {
+        if (!multiple)
+            return;
+        // Map tags to their corresponding CascaderValue by matching label and id
+        const newTags = tags.map((tagLabel) => {
+            const foundTag = selectedTags.find((t) => t.label === tagLabel);
+            return foundTag || { label: tagLabel, id: tagLabel };
+        });
+        // Convert tags to CascaderValue using id (format: parent-child)
+        const newValue = newTags.map((tag) => {
+            const [parentValue, childValue] = tag.id.split('__');
+            if (childValue) {
+                return [parentValue, childValue];
+            }
+            return [parentValue, tag.label.toLowerCase()];
+        });
+        setSelectedTags(newTags);
+        onChange?.(newValue);
+    }, [multiple, selectedTags, onChange]);
+    const currentRadioValue = useMemo(() => {
+        if (multiple || normalizedValue.length === 0)
+            return undefined;
+        return JSON.stringify(normalizedValue[0]);
+    }, [multiple, normalizedValue]);
+    // Determine if we should show search results (flat list) or category panels
+    const showSearchResults = searchValue.trim().length > 0;
+    return (_jsx("div", { ref: ref, className: cn('mdk-cascader', className), children: _jsx(TagInput, { ref: tagInputRef, value: selectedTags.map((tag) => tag.label), onTagsChange: handleTagRemove, options: tagInputOptions, placeholder: placeholder, disabled: disabled, variant: "search", onInputChange: (value) => {
+                setSearchValue(value);
+                // When searching, show search results instead of panels
+                if (value.trim()) {
+                    setShowLeftPanel(true);
+                    setActiveCategory(null);
+                }
+            }, allowCustomTags: false, className: className, renderDropdown: ({ inputValue }) => (_jsx("div", { className: cn('mdk-cascader__panels', dropdownClassName), children: showSearchResults ? (_jsx("div", { className: cn('mdk-cascader__panel mdk-cascader__panel--search', !filteredOptions.length && 'mdk-cascader__panel--empty'), children: _jsxs("div", { className: "mdk-cascader__options-list", children: [multiple ? (_jsx(_Fragment, { children: filteredOptions.map((option) => {
+                                    const selected = isSelected(option.selection);
+                                    return (_jsxs("label", { className: cn('mdk-cascader__option', 'mdk-cascader__option--search', option.disabled && 'mdk-cascader__option--disabled'), children: [_jsx(Checkbox, { checked: selected, onCheckedChange: (checked) => {
+                                                    tagInputRef.current?.clearInputValue();
+                                                    setSearchValue('');
+                                                    handleSelect(option.selection, checked);
+                                                }, className: "mdk-cascader__category-checkbox", disabled: option.disabled, size: "sm", color: "primary" }), _jsxs("span", { className: "mdk-cascader__option-label", children: [_jsx("span", { className: "mdk-cascader__option-category", children: highlightText(option.categoryLabel, searchValue) }), _jsx("span", { className: "mdk-cascader__option-separator", children: " / " }), _jsx("span", { className: "mdk-cascader__option-name", children: highlightText(option.optionLabel, searchValue) })] })] }, JSON.stringify(option.selection)));
+                                }) })) : (_jsx(RadioGroup, { value: currentRadioValue, onValueChange: handleRadioChange, className: "mdk-cascader__radio-group", children: filteredOptions.map((option) => {
+                                    const selectionString = JSON.stringify(option.selection);
+                                    return (_jsxs("label", { className: cn('mdk-cascader__option', 'mdk-cascader__option--search', option.disabled && 'mdk-cascader__option--disabled'), children: [_jsx(Radio, { value: selectionString, disabled: option.disabled, size: "sm", color: "primary" }), _jsxs("span", { className: "mdk-cascader__option-label", children: [_jsx("span", { className: "mdk-cascader__option-category", children: option.categoryLabel }), _jsx("span", { className: "mdk-cascader__option-separator", children: " / " }), _jsx("span", { className: "mdk-cascader__option-name", children: option.optionLabel })] })] }, selectionString));
+                                }) })), filteredOptions.length === 0 && _jsx(EmptyState, { description: "No data", size: "sm" })] }) })) : (_jsxs(_Fragment, { children: [showLeftPanel && (_jsx("div", { className: "mdk-cascader__panel mdk-cascader__panel--categories", children: options.map(({ value, label, disabled }) => {
+                                const isActive = String(value) === activeCategory;
+                                const categorySelected = isCategorySelected(value);
+                                const categoryIndeterminate = isCategoryIndeterminate(value);
+                                return (_jsxs("div", { className: cn('mdk-cascader__category', isActive && 'mdk-cascader__category--active', disabled && 'mdk-cascader__category--disabled'), children: [multiple && (_jsx(Checkbox, { checked: categorySelected
+                                                ? true
+                                                : categoryIndeterminate
+                                                    ? 'indeterminate'
+                                                    : false, onCheckedChange: (checked) => handleCategoryToggle(value, checked), disabled: disabled, size: "sm", color: "primary", className: "mdk-cascader__category-checkbox" })), _jsxs("button", { type: "button", className: "mdk-cascader__category-button", onMouseDown: (e) => {
+                                                e.preventDefault();
+                                                if (!disabled)
+                                                    setActiveCategory(String(value));
+                                            }, disabled: disabled, children: [_jsx("span", { className: "mdk-cascader__category-label", children: label }), _jsx(ChevronRightIcon, { className: "mdk-cascader__category-arrow" })] })] }, String(value)));
+                            }) })), activeCategory && (_jsx("div", { className: "mdk-cascader__panel mdk-cascader__panel--options", children: _jsxs("div", { className: "mdk-cascader__options-list", children: [multiple ? (_jsx(_Fragment, { children: activeOptions
+                                            .filter(({ label }) => {
+                                            if (!inputValue.trim())
+                                                return true;
+                                            return label.toLowerCase().includes(inputValue.toLowerCase());
+                                        })
+                                            .map((option) => {
+                                            const selection = [
+                                                options.find((o) => String(o.value) === activeCategory)?.value,
+                                                option.value,
+                                            ].filter(Boolean);
+                                            const selected = isSelected(selection);
+                                            return (_jsxs("label", { className: cn('mdk-cascader__option', option.disabled && 'mdk-cascader__option--disabled'), children: [_jsx(Checkbox, { checked: selected, onCheckedChange: (checked) => handleSelect(selection, checked), className: "mdk-cascader__category-checkbox", disabled: option.disabled, size: "sm", color: "primary" }), _jsx("span", { className: "mdk-cascader__option-label", title: option.label, children: option.label })] }, String(option.value)));
+                                        }) })) : (_jsx(RadioGroup, { value: currentRadioValue, onValueChange: handleRadioChange, className: "mdk-cascader__radio-group", children: activeOptions
+                                            .filter(({ label }) => {
+                                            if (!inputValue.trim())
+                                                return true;
+                                            return label.toLowerCase().includes(inputValue.toLowerCase());
+                                        })
+                                            .map((option) => {
+                                            const selection = [
+                                                options.find((o) => String(o.value) === activeCategory)?.value,
+                                                option.value,
+                                            ].filter(Boolean);
+                                            const selectionString = JSON.stringify(selection);
+                                            return (_jsxs("label", { className: cn('mdk-cascader__option', option.disabled && 'mdk-cascader__option--disabled'), children: [_jsx(Radio, { value: selectionString, disabled: option.disabled, size: "sm", color: "primary" }), _jsx("span", { className: "mdk-cascader__option-label", children: option.label })] }, String(option.value)));
+                                        }) })), activeOptions.filter(({ label }) => {
+                                        if (!inputValue.trim())
+                                            return true;
+                                        return label.toLowerCase().includes(inputValue.toLowerCase());
+                                    }).length === 0 && (_jsx(EmptyState, { description: inputValue ? 'No data' : 'No options' }))] }) }))] })) })) }) }));
+});
+Cascader.displayName = 'Cascader';
+export { Cascader };

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

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

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for ChartContainer.
+ */
+import { useState } from 'react';
+import { ChartContainer } from '@tetherto/mdk-react-devkit';
+const RANGE_OPTIONS = [
+    { label: '1H', value: '1h' },
+    { label: '24H', value: '24h' },
+    { label: '7D', value: '7d' },
+];
+const LEGEND_DATA = [
+    { label: 'Pool A', color: '#59E8E8' },
+    { label: 'Pool B', color: '#FF9500' },
+];
+const MockChart = () => (_jsx("div", { style: {
+        height: 160,
+        background: 'var(--mdk-color-surface-secondary, #1a1a2e)',
+        borderRadius: 4,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: 'var(--mdk-color-text-secondary, #888)',
+        fontSize: 13,
+    }, children: "Chart content" }));
+export const ChartContainerExample = () => {
+    const [range, setRange] = useState('24h');
+    return (_jsxs("div", { className: "mdk-example-row", style: { display: 'flex', flexDirection: 'column', gap: 24 }, children: [_jsx(ChartContainer, { title: "Simple Chart", children: _jsx(MockChart, {}) }), _jsx(ChartContainer, { title: "Hashrate", highlightedValue: { value: 102.4, unit: 'TH/s' }, legendData: LEGEND_DATA, rangeSelector: { options: RANGE_OPTIONS, value: range, onChange: setRange }, minMaxAvg: { min: '10 TH/s', avg: '55 TH/s', max: '100 TH/s' }, children: _jsx(MockChart, {}) }), _jsx(ChartContainer, { title: "Loading", loading: true, children: _jsx(MockChart, {}) }), _jsx(ChartContainer, { title: "No Data", empty: true, emptyMessage: "No data available for this period", children: _jsx(MockChart, {}) })] }));
+};

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

@@ -0,0 +1,111 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import type { MinMaxAvgValues } from '../min-max-avg/types';
+export type RangeSelectorOption = {
+    label: string;
+    value: string;
+};
+export type RangeSelectorProps = {
+    /** `{ label, value }` items */
+    options: RangeSelectorOption[];
+    /** Currently selected value */
+    value: string;
+    /** Fires when user picks a range */
+    onChange: (value: string) => void;
+    /** Additional class for the selector */
+    className?: string;
+    /** Inline style for the selector */
+    style?: CSSProperties;
+    /** Additional class for each option button */
+    buttonClassName?: string;
+};
+export type HighlightedValueProps = {
+    /** The primary value to display */
+    value: string | number;
+    /** Unit suffix */
+    unit?: string;
+    /** Additional class */
+    className?: string;
+    /** Inline style */
+    style?: CSSProperties;
+};
+export type LegendItem = {
+    /** Legend label */
+    label: string;
+    /** Color string (hex, hsl, etc.) */
+    color: string;
+    /** Whether this dataset is currently hidden */
+    hidden?: boolean;
+};
+export type ChartContainerProps = {
+    /** Chart heading (renders as `<h3>` unless `header` is provided) */
+    title?: string;
+    /**
+     * Optional node rendered immediately after the title text (e.g. an info
+     * tooltip). Only shown when `title` is set and `header` is not. Additive -
+     * omit it and the title renders exactly as before.
+     */
+    titleExtra?: ReactNode;
+    /** Replaces the default `title` heading with a custom element */
+    header?: ReactNode;
+    /**
+     * Optional action rendered on the right side of the header row (e.g. an
+     * expand/fullscreen toggle). Sits alongside the range selector when both are
+     * present. Purely additive - omit it and the header renders exactly as before.
+     */
+    headerAction?: ReactNode;
+    /** Color-keyed legend items; each item can be toggled */
+    legendData?: LegendItem[];
+    /** Large value/unit displayed alongside the legend */
+    highlightedValue?: HighlightedValueProps;
+    /** Radio-card time-range selector */
+    rangeSelector?: RangeSelectorProps;
+    /** Shows a centered `<Loader>` overlay */
+    loading?: boolean;
+    /** Replaces the default `<Loader>` in the loading overlay */
+    loader?: ReactNode;
+    /** Hides the chart and shows `emptyMessage` */
+    empty?: boolean;
+    /**
+     * Message shown when `empty` is true: a string, or any element (an
+     * `EmptyState`, say)
+     * @default 'No data available'
+     */
+    emptyMessage?: ReactNode;
+    /** Built-in footer showing Min / Avg / Max values */
+    minMaxAvg?: MinMaxAvgValues;
+    /** Time range label shown in the footer */
+    timeRange?: string;
+    /** Custom footer content rendered below the chart */
+    footer?: ReactNode;
+    /** Additional class for the footer area */
+    footerClassName?: string;
+    /** Additional class for the root element */
+    className?: string;
+    /** The chart element to render */
+    children: ReactNode;
+    /** Fired when a legend item is clicked */
+    onToggleDataset?: (index: number) => void;
+};
+/**
+ * Standard chrome for charts: title, optional highlighted value, legend with
+ * toggle, range selector (radio cards), loading / empty states, and a footer
+ * for min/max/avg stats.
+ *
+ * @category charts
+ *
+ * @example
+ * ```tsx
+ * <ChartContainer
+ *   title="Hashrate"
+ *   highlightedValue={{ value: 102.4, unit: 'TH/s' }}
+ *   rangeSelector={{ options, value, onChange }}
+ *   loading={isLoading}
+ *   empty={!hasData}
+ * >
+ *   <LineChart data={data} />
+ * </ChartContainer>
+ * ```
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const ChartContainer: import("react").ForwardRefExoticComponent<ChartContainerProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,60 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback } from 'react';
+import { getChartLegendItemStyles } from '../../utils/chart-options';
+import { cn } from '../../utils';
+import { MinMaxAvg } from '../min-max-avg';
+import { Loader } from '../loader';
+import { RadioCard, RadioGroup } from '../radio';
+/**
+ * Standard chrome for charts: title, optional highlighted value, legend with
+ * toggle, range selector (radio cards), loading / empty states, and a footer
+ * for min/max/avg stats.
+ *
+ * @category charts
+ *
+ * @example
+ * ```tsx
+ * <ChartContainer
+ *   title="Hashrate"
+ *   highlightedValue={{ value: 102.4, unit: 'TH/s' }}
+ *   rangeSelector={{ options, value, onChange }}
+ *   loading={isLoading}
+ *   empty={!hasData}
+ * >
+ *   <LineChart data={data} />
+ * </ChartContainer>
+ * ```
+ * @domain generic
+ * @tier agent-ready
+ */
+export const ChartContainer = forwardRef(({ title, titleExtra, header, headerAction, legendData, highlightedValue, rangeSelector, loading, loader, empty, emptyMessage = 'No data available', minMaxAvg, timeRange, footer, footerClassName, className, children, onToggleDataset, }, ref) => {
+    const toggleDataset = useCallback((index) => {
+        onToggleDataset?.(index);
+    }, [onToggleDataset]);
+    const hasRangeSelector = !!(rangeSelector && rangeSelector.options.length > 0);
+    const hasHeaderRight = hasRangeSelector || !!headerAction;
+    const hasHeaderRow1 = header ?? title ?? hasHeaderRight;
+    const hasLegendRow = legendData && legendData.length > 0;
+    const isContentVisible = !empty && !loading;
+    const hasBuiltInFooter = (minMaxAvg || timeRange) && isContentVisible;
+    const hasMinMaxAvgContent = minMaxAvg && (minMaxAvg.min || minMaxAvg.max || minMaxAvg.avg);
+    const useCombinedPanel = hasLegendRow && hasMinMaxAvgContent && isContentVisible;
+    const hasFooter = (footer || hasBuiltInFooter) && isContentVisible;
+    const builtInFooter = hasBuiltInFooter ? (_jsxs(_Fragment, { children: [minMaxAvg && _jsx(MinMaxAvg, { ...minMaxAvg }), timeRange && _jsx("span", { className: "mdk-chart-container__time-range", children: timeRange })] })) : null;
+    const legend = hasLegendRow && isContentVisible && (_jsx("div", { className: "mdk-chart-container__legend", children: legendData.map((item, i) => {
+            const isHidden = item.hidden;
+            const swatch = getChartLegendItemStyles(item.color, isHidden);
+            return (_jsxs("button", { type: "button", className: "mdk-chart-container__legend-item", onClick: () => toggleDataset(i), children: [_jsx("span", { className: "mdk-chart-container__legend-box", style: {
+                            backgroundColor: swatch.fill,
+                            borderColor: swatch.stroke,
+                        } }), _jsx("span", { className: "mdk-chart-container__legend-label", style: { color: swatch.labelColor }, children: item.label })] }, i));
+        }) }));
+    const highlightedValueBlock = highlightedValue && isContentVisible && (_jsx("div", { className: "mdk-chart-container__highlight-area", children: _jsxs("div", { className: cn('mdk-chart-container__highlighted-value', highlightedValue.className), style: highlightedValue.style, children: [_jsx("span", { className: "mdk-chart-container__highlighted-value__number", children: highlightedValue.value }), highlightedValue.unit && (_jsx("span", { className: "mdk-chart-container__highlighted-value__unit", children: highlightedValue.unit }))] }) }));
+    const chartArea = (_jsxs("div", { className: "mdk-chart-container__chart-area", children: [loading && (_jsx("div", { className: "mdk-chart-container__loading-overlay", children: loader ?? _jsx(Loader, {}) })), empty && !loading && _jsx("div", { className: "mdk-chart-container__empty", children: emptyMessage }), isContentVisible && children] }));
+    const footerArea = hasFooter && (_jsxs("div", { className: cn('mdk-chart-container__footer-area', footerClassName), children: [builtInFooter, footer] }));
+    const rangeSelectorBlock = rangeSelector && rangeSelector.options.length > 0 && (_jsx("div", { role: "group", "aria-label": "Time range", children: _jsx(RadioGroup, { defaultValue: rangeSelector.value, orientation: "horizontal", noGap: true, children: rangeSelector.options.map(({ value, label }) => (_jsx(RadioCard, { value: value, label: label, "aria-pressed": rangeSelector.value === value, onClick: () => rangeSelector.onChange(value) }, value))) }) }));
+    const legendHighlightRow = (legend || highlightedValueBlock) && (_jsxs("div", { className: "mdk-chart-container__panel-header", children: [legend && _jsx("div", { className: "mdk-chart-container__legend-area", children: legend }), highlightedValueBlock] }));
+    return (_jsxs("div", { ref: ref, className: cn('mdk-chart-container', useCombinedPanel && 'mdk-chart-container--combined-panel', className), children: [hasHeaderRow1 && (_jsxs("div", { className: "mdk-chart-container__header-row", children: [_jsx("div", { className: "mdk-chart-container__header-left", children: header ??
+                            (title && (_jsxs("h3", { className: "mdk-chart-container__title", children: [title, titleExtra] }))) }), hasHeaderRight && (_jsxs("div", { className: "mdk-chart-container__header-right", children: [rangeSelectorBlock, headerAction] }))] })), useCombinedPanel ? (_jsxs("div", { className: "mdk-chart-container__panel", children: [legendHighlightRow, chartArea, footerArea] })) : (_jsxs(_Fragment, { children: [legendHighlightRow, chartArea, footerArea] }))] }));
+});
+ChartContainer.displayName = 'ChartContainer';

package/dist/primitives/components/chart-stats-footer/chart-stats-footer.example.d.ts

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

package/dist/primitives/components/chart-stats-footer/chart-stats-footer.example.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for ChartStatsFooter.
+ */
+import { ChartStatsFooter } from '@tetherto/mdk-react-devkit';
+export const ChartStatsFooterExample = () => (_jsxs("div", { className: "mdk-example-row", style: { display: 'flex', flexDirection: 'column', gap: 24 }, children: [_jsx(ChartStatsFooter, { minMaxAvg: { min: '10 TH/s', avg: '55 TH/s', max: '100 TH/s' } }), _jsx(ChartStatsFooter, { minMaxAvg: { min: '10 TH/s', avg: '55 TH/s', max: '100 TH/s' }, stats: [
+                { label: 'Uptime', value: '99.5%' },
+                { label: 'Rejected', value: '0.2%' },
+            ] }), _jsx(ChartStatsFooter, { stats: [
+                { label: 'Pool A', value: '60 TH/s' },
+                { label: 'Pool B', value: '42 TH/s' },
+                { label: 'Pool C', value: '38 TH/s' },
+                { label: 'Pool D', value: '27 TH/s' },
+            ], statsPerColumn: 2 }), _jsx(ChartStatsFooter, { minMaxAvg: { min: '800 W', avg: '1 100 W', max: '1 400 W' }, secondaryLabel: { title: 'Time range', value: 'Last 24 hours' } }), _jsx(ChartStatsFooter, { minMaxAvg: { min: '-', avg: '-', max: '-' } })] }));

package/dist/primitives/components/chart-stats-footer/index.d.ts

@@ -0,0 +1,6 @@
+import type { ChartStatsFooterProps } from './types';
+export declare function ChartStatsFooter({ minMaxAvg, stats, statsPerColumn, secondaryLabel, className, }: ChartStatsFooterProps): import("react").JSX.Element | null;
+export declare namespace ChartStatsFooter {
+    var displayName: string;
+}
+export type { ChartStatsFooterItem, ChartStatsFooterProps, SecondaryLabel, } from './types';