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

package/dist/primitives/components/tag-input/index.js

@@ -0,0 +1,289 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon, Cross1Icon } from '@radix-ui/react-icons';
+import { cn } from '../../utils';
+import { Popover, PopoverAnchor, PopoverContent } from '../popover';
+import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+const CloseIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 8 8", fill: "none", children: _jsx("path", { d: "M7.28145 1.28145C7.57441 0.988477 7.57441 0.512695 7.28145 0.219727C6.98848 -0.0732422 6.5127 -0.0732422 6.21973 0.219727L3.75176 2.69004L1.28145 0.22207C0.988477 -0.0708985 0.512695 -0.0708985 0.219727 0.22207C-0.0732422 0.515039 -0.0732422 0.99082 0.219727 1.28379L2.69004 3.75176L0.22207 6.22207C-0.0708984 6.51504 -0.0708984 6.99082 0.22207 7.28379C0.515039 7.57676 0.99082 7.57676 1.28379 7.28379L3.75176 4.81348L6.22207 7.28145C6.51504 7.57441 6.99082 7.57441 7.28379 7.28145C7.57676 6.98848 7.57676 6.5127 7.28379 6.21973L4.81348 3.75176L7.28145 1.28145Z", fill: "currentColor" }) }));
+const getOptionValue = (opt) => (typeof opt === 'string' ? opt : opt.value);
+const getOptionLabel = (opt) => (typeof opt === 'string' ? opt : opt.label);
+const isOptionDisabled = (opt) => typeof opt === 'object' && opt.disabled === true;
+const defaultFilter = (options, query) => {
+    if (!query.trim())
+        return options;
+    const q = query.toLowerCase();
+    return options.filter((opt) => getOptionLabel(opt).toLowerCase().includes(q));
+};
+const getLabelFromTag = (tag, options) => {
+    const opt = options.find((o) => getOptionValue(o) === tag);
+    return opt ? getOptionLabel(opt) : tag;
+};
+/**
+ * TagInput - Input with dropdown options and tag display
+ *
+ * - Click to show dropdown with options
+ * - Select option or type + Enter to add tag
+ * - Enter triggers onSubmit
+ * - Tags are removable via × button
+ *
+ * @example
+ * ```tsx
+ * <TagInput
+ *   value={tags}
+ *   onTagsChange={setTags}
+ *   onSubmit={(tags) => console.log('Search', tags)}
+ *   options={['Bitdeer M30', 'Bitdeer A1346']}
+ *   placeholder="Search..."
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom dropdown with selected state (checkmark + different background)
+ * <TagInput
+ *   value={tags}
+ *   onTagsChange={setTags}
+ *   options={options}
+ *   renderDropdown={({ filteredOptions, selectedTags, highlightedIndex, setHighlightedIndex, onSelect, listboxId, getOptionId, getOptionValue, getOptionLabel }) => (
+ *     <div id={listboxId} role="listbox" className="my-custom-list">
+ *       {filteredOptions.map((opt, i) => {
+ *         const isSelected = selectedTags.includes(getOptionValue(opt))
+ *         return (
+ *           <div
+ *             key={getOptionValue(opt)}
+ *             id={getOptionId(i)}
+ *             role="option"
+ *             aria-selected={i === highlightedIndex}
+ *             onMouseDown={(e) => { e.preventDefault(); onSelect(opt) }}
+ *             onMouseEnter={() => setHighlightedIndex(i)}
+ *           >
+ *             {getOptionLabel(opt)}
+ *             {isSelected && <CheckIcon />}
+ *           </div>
+ *         )
+ *       })}
+ *     </div>
+ *   )}
+ * />
+ * ```
+ */
+const SearchIcon = ({ className }) => (_jsxs("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none", children: [_jsx("g", { clipPath: "url(#search-icon-clip)", children: _jsx("path", { d: "M11.375 5.6875C11.375 6.94258 10.9676 8.10195 10.2812 9.04258L13.743 12.507C14.0848 12.8488 14.0848 13.4039 13.743 13.7457C13.4012 14.0875 12.8461 14.0875 12.5043 13.7457L9.04258 10.2812C8.10195 10.9703 6.94258 11.375 5.6875 11.375C2.5457 11.375 0 8.8293 0 5.6875C0 2.5457 2.5457 0 5.6875 0C8.8293 0 11.375 2.5457 11.375 5.6875ZM5.6875 9.625C6.20458 9.625 6.7166 9.52315 7.19432 9.32528C7.67204 9.1274 8.1061 8.83736 8.47173 8.47173C8.83736 8.1061 9.1274 7.67204 9.32528 7.19432C9.52315 6.7166 9.625 6.20458 9.625 5.6875C9.625 5.17042 9.52315 4.6584 9.32528 4.18068C9.1274 3.70296 8.83736 3.2689 8.47173 2.90327C8.1061 2.53764 7.67204 2.2476 7.19432 2.04972C6.7166 1.85185 6.20458 1.75 5.6875 1.75C5.17042 1.75 4.6584 1.85185 4.18068 2.04972C3.70296 2.2476 3.2689 2.53764 2.90327 2.90327C2.53764 3.2689 2.2476 3.70296 2.04972 4.18068C1.85185 4.6584 1.75 5.17042 1.75 5.6875C1.75 6.20458 1.85185 6.7166 2.04972 7.19432C2.2476 7.67204 2.53764 8.1061 2.90327 8.47173C3.2689 8.83736 3.70296 9.1274 4.18068 9.32528C4.6584 9.52315 5.17042 9.625 5.6875 9.625Z", fill: "currentColor" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "search-icon-clip", children: _jsx("path", { d: "M0 0H14V14H0V0Z", fill: "white" }) }) })] }));
+/**
+ * Text input that converts comma- or Enter-separated entries into removable tag chips below the field.
+ *
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+const TagInput = forwardRef(({ value = [], onTagsChange, onSubmit, onInputChange, options = [], placeholder = 'Search...', size = 'lg', disabled = false, allowCustomTags = true, filterOptions = defaultFilter, variant = 'search', label, id: idProp, className, wrapperClassName, dropdownMinHeight, dropdownMaxHeight, renderDropdown, }, ref) => {
+    const id = idProp ?? useId();
+    const [open, setOpen] = useState(false);
+    const [inputValue, setInputValue] = useState('');
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const inputRef = useRef(null);
+    const listRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const openChangeTimeoutRef = useRef(undefined);
+    const [dropdownWidth, setDropdownWidth] = useState(undefined);
+    useEffect(() => {
+        const el = wrapperRef.current;
+        if (!el)
+            return;
+        const observer = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (!entry)
+                return;
+            setDropdownWidth(entry.borderBoxSize[0]?.inlineSize ?? entry.contentRect.width);
+        });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+    const tags = value;
+    const setTags = onTagsChange ?? (() => { });
+    const filteredOptions = useMemo(() => filterOptions(options, inputValue), [options, inputValue, filterOptions]);
+    const addTag = useCallback((tagValue) => {
+        const trimmed = tagValue.trim();
+        if (!trimmed || tags.includes(trimmed))
+            return false;
+        setTags([...tags, trimmed]);
+        setInputValue('');
+        return true;
+    }, [tags, setTags]);
+    const removeTag = useCallback((index) => {
+        const next = tags.filter((_, i) => i !== index);
+        setTags(next);
+    }, [tags, setTags]);
+    const clearInputValue = useCallback(() => {
+        setInputValue('');
+    }, []);
+    useImperativeHandle(ref, () => ({
+        clearInputValue,
+        focus: () => inputRef.current?.focus(),
+        blur: () => inputRef.current?.blur(),
+        getInputValue: () => inputValue,
+    }), [clearInputValue, inputValue]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            let nextTags = tags;
+            const opt = filteredOptions[highlightedIndex];
+            if (opt !== undefined) {
+                const v = getOptionValue(opt);
+                const idx = tags.indexOf(v);
+                if (idx >= 0) {
+                    nextTags = tags.filter((_, i) => i !== idx);
+                    removeTag(idx);
+                }
+                else if (addTag(v)) {
+                    nextTags = [...tags, v];
+                }
+            }
+            else if (allowCustomTags && inputValue.trim()) {
+                const v = inputValue.trim();
+                if (addTag(v))
+                    nextTags = [...tags, v];
+            }
+            onSubmit?.(nextTags);
+            return;
+        }
+        if (e.key === 'Backspace' && !inputValue && tags.length > 0) {
+            e.preventDefault();
+            removeTag(tags.length - 1);
+            return;
+        }
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setHighlightedIndex((i) => Math.min(i + 1, filteredOptions.length - 1));
+            return;
+        }
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setHighlightedIndex((i) => Math.max(i - 1, 0));
+        }
+        setOpen(true);
+    }, [
+        inputValue,
+        tags,
+        filteredOptions,
+        highlightedIndex,
+        addTag,
+        removeTag,
+        allowCustomTags,
+        onSubmit,
+    ]);
+    const handleOptionSelect = (opt) => {
+        const v = getOptionValue(opt);
+        const index = tags.indexOf(v);
+        if (index >= 0) {
+            removeTag(index);
+        }
+        else {
+            addTag(v);
+        }
+        inputRef.current?.focus();
+    };
+    const showSearchIcon = variant === 'search';
+    const handleOpenChange = (next) => {
+        if (openChangeTimeoutRef.current) {
+            clearTimeout(openChangeTimeoutRef.current);
+        }
+        // Debounce to avoid race conditions between manual toggle and Radix's interact outside
+        openChangeTimeoutRef.current = setTimeout(() => {
+            // Keep open when input is focused (user is typing) - Radix may try to close on "interact outside"
+            if (!next && inputRef.current === document.activeElement) {
+                return;
+            }
+            setOpen(next);
+        }, 150);
+    };
+    const handleWrapperClick = (e) => {
+        // Don't toggle dropdown when disabled
+        if (disabled)
+            return;
+        // Check if click is on the remove tag button or icon
+        const target = e.target;
+        if (target.closest('.mdk-tag-input__tag-remove') || target.closest('.mdk-tag-input__icon')) {
+            return;
+        }
+        // Toggle dropdown if input is already focused
+        if (document.activeElement === inputRef.current) {
+            setOpen((prev) => !prev);
+        }
+        else {
+            inputRef.current?.focus();
+            setOpen((prev) => {
+                if (prev) {
+                    inputRef.current?.blur();
+                }
+                return !prev;
+            });
+        }
+    };
+    const removeAllTags = useCallback(() => {
+        setTags([]);
+        inputRef.current?.focus();
+    }, [setTags]);
+    useEffect(() => {
+        return () => {
+            if (openChangeTimeoutRef.current) {
+                clearTimeout(openChangeTimeoutRef.current);
+            }
+        };
+    }, []);
+    const content = (_jsxs(Popover, { open: open, onOpenChange: handleOpenChange, modal: false, children: [_jsx(PopoverAnchor, { asChild: true, children: _jsxs("div", { className: "mdk-tag-input__container", children: [_jsx("div", { ref: wrapperRef, className: cn('mdk-tag-input__wrapper', `mdk-tag-input__wrapper--${size}`, showSearchIcon && 'mdk-tag-input__wrapper--search', disabled && 'mdk-tag-input__wrapper--disabled', wrapperClassName), "data-has-tags": tags.length > 0, onClick: handleWrapperClick, children: _jsxs("div", { className: "mdk-tag-input__inner", children: [tags.map((tag, i) => (_jsx("span", { className: "mdk-tag-input__tag", children: _jsxs("span", { className: "mdk-tag-input__tag-chip", children: [getLabelFromTag(tag, options), _jsx("button", { type: "button", className: "mdk-tag-input__tag-remove", onClick: (e) => {
+                                                        e.stopPropagation();
+                                                        removeTag(i);
+                                                    }, onMouseDown: (e) => {
+                                                        // Prevent input blur which would close the dropdown
+                                                        e.preventDefault();
+                                                    }, onPointerDown: (e) => {
+                                                        e.stopPropagation();
+                                                    }, "aria-label": `Remove ${tag}`, tabIndex: -1, children: _jsx(CloseIcon, {}) })] }) }, `${tag}-${i}`))), _jsx("input", { ref: (node) => {
+                                            ;
+                                            inputRef.current = node;
+                                            if (typeof ref === 'function')
+                                                ref(node);
+                                            else if (ref)
+                                                ref.current = node;
+                                        }, id: id, type: "text", value: inputValue, onChange: (e) => {
+                                            setInputValue(e.target.value);
+                                            onInputChange?.(e.target.value);
+                                        }, onKeyDown: handleKeyDown, disabled: disabled, placeholder: tags.length === 0 ? placeholder : '', className: cn('mdk-tag-input__input', className), autoComplete: "off", "aria-autocomplete": "list", "data-open": open, "aria-expanded": open, "aria-controls": open ? `${id}-listbox` : undefined, "aria-activedescendant": open && filteredOptions.length > 0
+                                            ? `${id}-option-${highlightedIndex}`
+                                            : undefined, role: "combobox", "aria-haspopup": "listbox" })] }) }), showSearchIcon ? (_jsxs("span", { className: "mdk-tag-input__icon", "aria-hidden": true, "data-has-tags": tags.length > 0, onClick: removeAllTags, children: [_jsx(SearchIcon, { className: "mdk-tag-input__icon--glass" }), _jsx(Cross1Icon, { className: "mdk-tag-input__icon--cross" })] })) : (_jsx("span", { className: "mdk-tag-input__arrow", "aria-hidden": true, children: _jsx(ChevronDownIcon, {}) }))] }) }), _jsx(PopoverContent, { ref: dropdownRef, align: "start", side: "bottom", sideOffset: 4, avoidCollisions: false, onOpenAutoFocus: (e) => e.preventDefault(), onCloseAutoFocus: (e) => e.preventDefault(), className: "mdk-tag-input__dropdown", style: {
+                    ...(dropdownWidth !== undefined ? { width: `${dropdownWidth}px` } : {}),
+                    ...(dropdownMinHeight
+                        ? { '--mdk-tag-input-dropdown-min-height': dropdownMinHeight }
+                        : {}),
+                    ...(dropdownMaxHeight
+                        ? { '--mdk-tag-input-dropdown-max-height': dropdownMaxHeight }
+                        : {}),
+                }, children: renderDropdown ? (renderDropdown({
+                    filteredOptions,
+                    selectedTags: tags,
+                    highlightedIndex,
+                    setHighlightedIndex,
+                    onSelect: handleOptionSelect,
+                    inputValue,
+                    id,
+                    listboxId: `${id}-listbox`,
+                    getOptionId: (i) => `${id}-option-${i}`,
+                    getOptionValue,
+                    getOptionLabel,
+                    isOptionDisabled,
+                })) : (_jsx("div", { ref: listRef, id: `${id}-listbox`, role: "listbox", className: "mdk-tag-input__list", children: filteredOptions.length === 0 ? (_jsx("div", { className: "mdk-tag-input__empty", children: "No options" })) : (filteredOptions.map((opt, i) => {
+                        const isSelected = tags.includes(getOptionValue(opt));
+                        const disabled = isOptionDisabled(opt);
+                        return (_jsxs("div", { id: `${id}-option-${i}`, role: "option", "aria-selected": i === highlightedIndex, "aria-disabled": disabled, className: cn('mdk-tag-input__option', i === highlightedIndex && 'mdk-tag-input__option--highlighted', isSelected && 'mdk-tag-input__option--selected', disabled && 'mdk-tag-input__option--disabled'), onMouseDown: (e) => {
+                                e.preventDefault();
+                                if (!disabled)
+                                    handleOptionSelect(opt);
+                            }, onMouseEnter: () => !disabled && setHighlightedIndex(i), children: [_jsx("span", { className: "mdk-tag-input__option-label", children: getOptionLabel(opt) }), isSelected && _jsx(CheckIcon, { className: "mdk-tag-input__option-check" })] }, getOptionValue(opt)));
+                    })) })) })] }));
+    if (label) {
+        return (_jsxs("div", { className: cn('mdk-tag-input-root', wrapperClassName), children: [_jsx("label", { htmlFor: id, className: "mdk-tag-input__label", children: label }), content] }));
+    }
+    return content;
+});
+TagInput.displayName = 'TagInput';
+export { TagInput };

package/dist/primitives/components/tag-input/tag-input.example.d.ts

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

package/dist/primitives/components/tag-input/tag-input.example.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for TagInput.
+ */
+import { useState } from 'react';
+import { TagInput } from '@tetherto/mdk-react-devkit';
+const minerModels = [
+    'Antminer S19 Pro',
+    'Antminer S19j Pro',
+    'Whatsminer M30S',
+    'Whatsminer M50',
+    'Avalon A1346',
+];
+export const TagInputExample = () => {
+    const [tags, setTags] = useState(['Antminer S19 Pro']);
+    const [filters, setFilters] = useState([]);
+    return (_jsxs("div", { className: "mdk-example-col", children: [_jsx(TagInput, { value: tags, onTagsChange: setTags, options: minerModels, placeholder: "Search miner models...", label: "Miner Models" }), _jsx(TagInput, { value: filters, onTagsChange: setFilters, options: ['Online', 'Offline', 'Maintenance', 'Overclocked'], placeholder: "Filter by status...", allowCustomTags: false, size: "md" })] }));
+};

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

@@ -0,0 +1,34 @@
+import { type ComponentProps } from 'react';
+export type TextAreaProps = ComponentProps<'textarea'> & {
+    /**
+     * Optional label displayed above the textarea
+     */
+    label?: string;
+    /**
+     * HTML id for the textarea. Required when using label for accessibility.
+     * @default auto-generated
+     */
+    id?: string;
+    /**
+     * Validation error message. When provided, displays error styling (red border) and the message below the textarea.
+     */
+    error?: string;
+    /**
+     * Custom className for the root wrapper
+     */
+    wrapperClassName?: string;
+};
+/**
+ * TextArea component with label support and error handling
+ *
+ * @example
+ * ```tsx
+ * <TextArea label="Description" placeholder="Enter description" id="desc" />
+ * <TextArea error="This field is required" placeholder="Required field" />
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const TextArea: import("react").ForwardRefExoticComponent<Omit<TextAreaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+export { TextArea };

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

@@ -0,0 +1,29 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label } from '../label';
+import { cn } from '../../utils';
+import { forwardRef, useId } from 'react';
+/**
+ * TextArea component with label support and error handling
+ *
+ * @example
+ * ```tsx
+ * <TextArea label="Description" placeholder="Enter description" id="desc" />
+ * <TextArea error="This field is required" placeholder="Required field" />
+ * ```
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+const TextArea = forwardRef(({ className, wrapperClassName, label, id, disabled, error, ...props }, ref) => {
+    const textareaId = id ?? useId();
+    const errorId = `${textareaId}-error`;
+    const hasError = !!error;
+    const textarea = (_jsx("div", { className: cn('mdk-textarea__wrapper', disabled && 'mdk-textarea__wrapper--disabled', hasError && 'mdk-textarea__wrapper--error', !label && wrapperClassName), children: _jsx("textarea", { ref: ref, id: textareaId, disabled: disabled, className: cn('mdk-textarea', className), "aria-invalid": hasError || props['aria-invalid'], "aria-describedby": hasError ? errorId : props['aria-describedby'], ...props }) }));
+    const content = (_jsxs(_Fragment, { children: [textarea, hasError && (_jsx("span", { id: errorId, className: "mdk-textarea__error", role: "alert", children: error }))] }));
+    if (label) {
+        return (_jsxs("div", { className: cn('mdk-textarea-root', wrapperClassName), children: [_jsx(Label, { htmlFor: textareaId, className: "mdk-textarea__label", children: label }), content] }));
+    }
+    return content;
+});
+TextArea.displayName = 'TextArea';
+export { TextArea };

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

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for TextArea.
+ */
+import { TextArea } from '@tetherto/mdk-react-devkit';
+export const TextAreaExample = () => (_jsxs("div", { className: "mdk-example-col", children: [_jsx(TextArea, { id: "notes", label: "Device Notes", placeholder: "Add notes about this miner...", rows: 4 }), _jsx(TextArea, { id: "config", label: "Custom Configuration", placeholder: "Paste raw config JSON...", rows: 6 }), _jsx(TextArea, { id: "error-ta", label: "Pool URL", placeholder: "stratum+tcp://...", error: "Invalid stratum URL format." }), _jsx(TextArea, { id: "disabled-ta", label: "Read-only Log", defaultValue: "2025-05-18 12:34:56 \u2014 Pool connected successfully.", disabled: true, rows: 3 })] }));

package/dist/primitives/components/threshold-line-chart/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const FILL_HEIGHT = 360;
+export declare const DEFAULT_HEIGHT = 280;
+export declare const SERIES_COLORS: readonly ["#FF6A00", "#357AF6", "#A020F0", "#34C759"];
+export declare const THRESHOLD_COLORS: readonly ["#FF3B30", "#34C759", "#357AF6"];

package/dist/primitives/components/threshold-line-chart/constants.js

@@ -0,0 +1,10 @@
+import { CHART_COLORS } from '../../constants/colors';
+export const FILL_HEIGHT = 360;
+export const DEFAULT_HEIGHT = 280;
+export const SERIES_COLORS = [
+    CHART_COLORS.orange,
+    CHART_COLORS.blue,
+    CHART_COLORS.purple,
+    CHART_COLORS.green,
+];
+export const THRESHOLD_COLORS = [CHART_COLORS.red, CHART_COLORS.green, CHART_COLORS.blue];

package/dist/primitives/components/threshold-line-chart/index.d.ts

@@ -0,0 +1,24 @@
+import type { ThresholdLineChartProps } from './types';
+export type { ThresholdLineChartData, ThresholdLineChartPoint, ThresholdLineChartProps, ThresholdLineChartSeries, ThresholdLineChartThreshold, } from './types';
+export { hasNonZeroData, toThresholdLineChartData } from './utils';
+/**
+ * Line chart with optional horizontal threshold lines.
+ * Wraps `ChartContainer` and `LineChart`; pass `series` and optional `thresholds` via `data`.
+ *
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ *
+ * @example
+ * ```tsx
+ * <ThresholdLineChart
+ *   title="Power Consumption"
+ *   unit="MW"
+ *   data={{
+ *     series: [{ label: "Power", color: "#f59e0b", points: [{ timestamp: "2025-01-01", value: 32 }] }],
+ *     thresholds: [{ label: "Availability", value: 38, color: "#22c55e" }],
+ *   }}
+ * />
+ * ```
+ */
+export declare const ThresholdLineChart: ({ data, unit, title, height, className, emptyMessage, isTall, yTicksFormatter, isLegendVisible, }: ThresholdLineChartProps) => import("react").JSX.Element;

package/dist/primitives/components/threshold-line-chart/index.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChartContainer } from '../chart-container';
+import { LineChart } from '../line-chart';
+import { useMemo, useState } from 'react';
+import { hasNonZeroData, toThresholdLineChartData } from './utils';
+import { DEFAULT_HEIGHT, FILL_HEIGHT } from './constants';
+export { hasNonZeroData, toThresholdLineChartData } from './utils';
+/**
+ * Line chart with optional horizontal threshold lines.
+ * Wraps `ChartContainer` and `LineChart`; pass `series` and optional `thresholds` via `data`.
+ *
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ *
+ * @example
+ * ```tsx
+ * <ThresholdLineChart
+ *   title="Power Consumption"
+ *   unit="MW"
+ *   data={{
+ *     series: [{ label: "Power", color: "#f59e0b", points: [{ timestamp: "2025-01-01", value: 32 }] }],
+ *     thresholds: [{ label: "Availability", value: 38, color: "#22c55e" }],
+ *   }}
+ * />
+ * ```
+ */
+export const ThresholdLineChart = ({ data, unit, title, height, className, emptyMessage, isTall = false, yTicksFormatter, isLegendVisible = true, }) => {
+    const [visibility, setVisibility] = useState([]);
+    const empty = !hasNonZeroData(data);
+    const chartHeight = height ?? (isTall ? FILL_HEIGHT : DEFAULT_HEIGHT);
+    const lineData = useMemo(() => (data ? toThresholdLineChartData(data) : { datasets: [] }), [data]);
+    const dataWithVisibility = useMemo(() => ({
+        datasets: lineData.datasets.map((dataset, index) => ({
+            ...dataset,
+            visible: visibility[index] ?? true,
+        })),
+    }), [lineData.datasets, visibility]);
+    const legendData = lineData.datasets.map((dataset, index) => ({
+        label: dataset.label,
+        color: dataset.borderColor,
+        hidden: !(visibility[index] ?? true),
+    }));
+    const handleToggle = (index) => {
+        setVisibility((prev) => {
+            const next = lineData.datasets.map((_, i) => prev[i] ?? true);
+            next[index] = !next[index];
+            return next;
+        });
+    };
+    const titleWithUnit = title && unit ? `${title} (${unit})` : title;
+    const axisFormatter = yTicksFormatter ?? ((value) => (unit ? `${value} ${unit}` : String(value)));
+    return (_jsx(ChartContainer, { empty: empty, title: titleWithUnit, className: className, emptyMessage: emptyMessage, legendData: isLegendVisible ? legendData : undefined, onToggleDataset: isLegendVisible ? handleToggle : undefined, children: !empty && (_jsx(LineChart, { beginAtZero: true, unit: unit ?? '', height: chartHeight, data: dataWithVisibility, yTicksFormatter: axisFormatter })) }));
+};

package/dist/primitives/components/threshold-line-chart/threshold-line-chart.example.d.ts

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

package/dist/primitives/components/threshold-line-chart/threshold-line-chart.example.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CHART_COLORS, ThresholdLineChart, UNITS } from '@tetherto/mdk-react-devkit/primitives';
+const powerData = {
+    series: [
+        {
+            label: 'Power Consumption',
+            color: CHART_COLORS.orange,
+            points: [
+                { timestamp: '2025-01-01T00:00:00.000Z', value: 28 },
+                { timestamp: '2025-01-02T00:00:00.000Z', value: 31 },
+                { timestamp: '2025-01-03T00:00:00.000Z', value: 29 },
+            ],
+        },
+    ],
+    thresholds: [{ label: 'Power Availability', value: 38, color: CHART_COLORS.green }],
+};
+export const ThresholdLineChartExample = () => (_jsx("div", { className: "mdk-example-row", children: _jsx(ThresholdLineChart, { title: "Power Consumption", data: powerData, unit: UNITS.ENERGY_MW }) }));

package/dist/primitives/components/threshold-line-chart/types.d.ts

@@ -0,0 +1,50 @@
+export type ThresholdLineChartPoint = {
+    value: number;
+    timestamp: string | number;
+};
+export type ThresholdLineChartSeries = {
+    label: string;
+    color?: string;
+    fill?: boolean;
+    points: ThresholdLineChartPoint[];
+};
+export type ThresholdLineChartThreshold = {
+    label: string;
+    value: number;
+    color?: string;
+};
+export type ThresholdLineChartData = {
+    /** Data lines; points with a non-finite timestamp are dropped. All-zero values render the empty state */
+    series: ThresholdLineChartSeries[];
+    /** Horizontal reference lines at a fixed `value`, spanning every timestamp in `series` */
+    thresholds?: ThresholdLineChartThreshold[];
+};
+export type ThresholdLineChartProps = Partial<{
+    /** Chart title (unit appended when `unit` is set) */
+    title: string;
+    /** Shown in title and axis/tooltip formatting */
+    unit: string;
+    /**
+     * Chart height in pixels (`360` when `isTall`)
+     * @default 280
+     */
+    height: number;
+    /**
+     * When true, uses a taller default height (360px).
+     * @default false
+     */
+    isTall: boolean;
+    /** Extra class on the container */
+    className: string;
+    /** Message when data is missing or all zero */
+    emptyMessage: string;
+    /**
+     * Legend with click-to-hide series
+     * @default true
+     */
+    isLegendVisible: boolean;
+    /** `series` points plus optional `thresholds` lines */
+    data: ThresholdLineChartData;
+    /** Custom Y-axis tick labels */
+    yTicksFormatter: (value: number) => string;
+}>;

package/dist/primitives/components/threshold-line-chart/types.js

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

package/dist/primitives/components/threshold-line-chart/utils.d.ts

@@ -0,0 +1,18 @@
+import type { LineChartData } from '../line-chart/types';
+import type { ThresholdLineChartData } from './types';
+/**
+ * True when `data` has at least one series point with a non-zero value (drives empty state).
+ *
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const hasNonZeroData: (data?: ThresholdLineChartData) => boolean;
+/**
+ * Maps `ThresholdLineChartData` to `LineChartData` datasets (series plus horizontal thresholds).
+ *
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const toThresholdLineChartData: (data: ThresholdLineChartData) => LineChartData;

package/dist/primitives/components/threshold-line-chart/utils.js

@@ -0,0 +1,66 @@
+import _isFinite from 'lodash/isFinite';
+import _isNumber from 'lodash/isNumber';
+import _some from 'lodash/some';
+import { COLOR } from '../../constants/colors';
+import { SERIES_COLORS, THRESHOLD_COLORS } from './constants';
+const parseTimestamp = (ts) => {
+    if (ts === undefined)
+        return Number.NaN;
+    if (_isNumber(ts))
+        return ts;
+    const parsed = Date.parse(ts);
+    return _isFinite(parsed) ? parsed : Number.NaN;
+};
+const pointTimestamp = (point) => parseTimestamp(point.timestamp);
+const sortByTime = (points) => [...points].sort((a, b) => a.x - b.x);
+const getSeriesColor = (index) => SERIES_COLORS[index % SERIES_COLORS.length] ?? COLOR.ORANGE_WARNING;
+const getThresholdColor = (index) => THRESHOLD_COLORS[index % THRESHOLD_COLORS.length] ?? COLOR.GRASS_GREEN;
+/** Union of every finite timestamp across all series, sorted ascending (used for threshold lines). */
+const collectChartTimestamps = (data) => {
+    const timestamps = new Set();
+    for (const { points } of data.series) {
+        for (const point of points) {
+            const x = pointTimestamp(point);
+            if (_isFinite(x))
+                timestamps.add(x);
+        }
+    }
+    return [...timestamps].sort((a, b) => a - b);
+};
+/**
+ * True when `data` has at least one series point with a non-zero value (drives empty state).
+ *
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ */
+export const hasNonZeroData = (data) => _some(data?.series, ({ points }) => _some(points, ({ value }) => value !== 0));
+/**
+ * Maps `ThresholdLineChartData` to `LineChartData` datasets (series plus horizontal thresholds).
+ *
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ */
+export const toThresholdLineChartData = (data) => {
+    const timestamps = collectChartTimestamps(data);
+    return {
+        datasets: [
+            ...data.series.map(({ label, color, points }, index) => ({
+                label,
+                borderColor: color ?? getSeriesColor(index),
+                data: sortByTime(points
+                    .map((point) => ({
+                    x: pointTimestamp(point),
+                    y: point.value,
+                }))
+                    .filter((point) => _isFinite(point.x))),
+            })),
+            ...(data.thresholds?.map(({ label, color, value }, index) => ({
+                label,
+                borderColor: color ?? getThresholdColor(index),
+                data: sortByTime(timestamps.map((ts) => ({ x: ts, y: value }))),
+            })) ?? []),
+        ],
+    };
+};