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

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

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PIE_CHART_COLORS } from '../../constants/colors';
+import { cn } from '../../utils';
+import { colorWithAlpha } from '../../utils/chart-options';
+import { buildChartTooltip } from '../../utils/chart-tooltip';
+import { forwardRef, lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { formatPercentShare } from '../../utils/number';
+// chart.js + react-chartjs-2 are code-split into a lazy chunk so importing this
+// component does not pull the chart engine into a consumer's initial bundle.
+const DoughnutCanvas = lazy(() => import('./doughnut-canvas'));
+/**
+ * DoughnutChart – Presentational Chart.js doughnut chart
+ * with custom HTML legend matching the MDK design.
+ *
+ * @example
+ * ```tsx
+ * <DoughnutChart
+ *   data={[
+ *     { label: 'Online', value: 120, color: '#34C759' },
+ *     { label: 'Offline', value: 30, color: '#FF3B30' },
+ *   ]}
+ * />
+ * ```
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ */
+export const DoughnutChart = forwardRef(({ data, unit = '', options, cutout = '75%', borderWidth = 4, height = 260, legendPosition = 'top', tooltip: tooltipConfig, formatValue, className, }, ref) => {
+    const formatDisplayValue = formatValue ?? ((v) => String(v));
+    const chartRef = useRef(null);
+    const [hiddenItems, setHiddenItems] = useState({});
+    const dataKey = useMemo(() => data.map((d) => d.label).join('|'), [data]);
+    useEffect(() => {
+        setHiddenItems({});
+    }, [dataKey]);
+    const total = useMemo(() => data.reduce((acc, d) => acc + d.value, 0), [data]);
+    const colors = useMemo(() => data.map((d, i) => d.color ?? PIE_CHART_COLORS[i % PIE_CHART_COLORS.length]), [data]);
+    const chartData = useMemo(() => ({
+        labels: data.map((d) => d.label),
+        datasets: [
+            {
+                data: data.map((d) => d.value),
+                backgroundColor: colors,
+                hoverBackgroundColor: colors,
+                cutout,
+                borderWidth,
+                borderColor: '#17130F',
+            },
+        ],
+    }), [data, colors, cutout, borderWidth]);
+    const mergedOptions = useMemo(() => {
+        const tooltipPlugin = tooltipConfig
+            ? buildChartTooltip(tooltipConfig)
+            : {
+                backgroundColor: '#17130F',
+                titleFont: { size: 10 },
+                bodyFont: { size: 12 },
+                callbacks: {
+                    title: () => '',
+                    label: (ctx) => {
+                        const v = ctx.parsed ?? 0;
+                        const pct = formatPercentShare(v, total);
+                        const suffix = unit ? ` ${unit}` : '';
+                        return [`${ctx.label}`, `${formatDisplayValue(v)}${suffix} (${pct}%)`];
+                    },
+                },
+            };
+        const base = {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: { display: false },
+                tooltip: tooltipPlugin,
+                datalabels: { display: false },
+            },
+            elements: { arc: { borderWidth: 0 } },
+        };
+        if (options) {
+            return { ...base, ...options };
+        }
+        return base;
+    }, [total, unit, options, tooltipConfig, formatDisplayValue]);
+    const onToggleItem = useCallback((index) => {
+        const chart = chartRef.current;
+        if (!chart)
+            return;
+        chart.toggleDataVisibility(index);
+        chart.update();
+        setHiddenItems((prev) => ({
+            ...prev,
+            [index]: !chart.getDataVisibility(index),
+        }));
+    }, []);
+    const legendEl = (_jsx("div", { className: "mdk-doughnut-chart__legend", children: data.map((item, i) => {
+            const isHidden = !!hiddenItems[i];
+            const pct = formatPercentShare(item.value, total);
+            return (_jsxs("button", { type: "button", className: cn('mdk-doughnut-chart__legend-item', isHidden && 'mdk-doughnut-chart__legend-item--hidden'), onClick: () => onToggleItem(i), children: [_jsx("span", { className: "mdk-doughnut-chart__legend-color", style: {
+                            borderColor: colors[i],
+                            backgroundColor: colorWithAlpha(colors[i] ?? '#888', 0.2),
+                        } }), _jsx("span", { className: "mdk-doughnut-chart__legend-label", children: item.label }), _jsxs("span", { className: "mdk-doughnut-chart__legend-stats", children: [_jsxs("span", { className: "mdk-doughnut-chart__legend-pct", children: ["(", pct, "%)"] }), _jsxs("span", { className: "mdk-doughnut-chart__legend-count", children: [formatDisplayValue(item.value), unit ? ` ${unit}` : ''] })] })] }, `${item.label}-${i}`));
+        }) }));
+    const chartEl = (_jsx("div", { className: "mdk-doughnut-chart__chart", style: { height, maxWidth: height }, children: _jsx(Suspense, { fallback: null, children: _jsx(DoughnutCanvas, { ref: chartRef, data: chartData, options: mergedOptions }) }) }));
+    const legendFirst = legendPosition === 'top' || legendPosition === 'left';
+    return (_jsxs("div", { ref: ref, className: cn('mdk-doughnut-chart', `mdk-doughnut-chart--legend-${legendPosition}`, className), children: [legendFirst ? legendEl : chartEl, legendFirst ? chartEl : legendEl] }));
+});
+DoughnutChart.displayName = 'DoughnutChart';

package/dist/primitives/components/dropdown-menu/dropdown-menu.example.d.ts

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

package/dist/primitives/components/dropdown-menu/dropdown-menu.example.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for DropdownMenu.
+ */
+import { Button, DropdownMenu } from '@tetherto/mdk-react-devkit';
+export const DropdownMenuExample = () => (_jsxs("div", { className: "mdk-example-row", children: [_jsxs(DropdownMenu.Root, { children: [_jsx(DropdownMenu.Trigger, { asChild: true, children: _jsx(Button, { variant: "secondary", children: "Actions" }) }), _jsxs(DropdownMenu.Content, { children: [_jsx(DropdownMenu.Label, { children: "Device" }), _jsx(DropdownMenu.Item, { children: "View Details" }), _jsx(DropdownMenu.Item, { children: "Edit Configuration" }), _jsx(DropdownMenu.Separator, {}), _jsx(DropdownMenu.Item, { children: "Reboot" }), _jsx(DropdownMenu.Item, { disabled: true, children: "Factory Reset" })] })] }), _jsxs(DropdownMenu.Root, { children: [_jsx(DropdownMenu.Trigger, { asChild: true, children: _jsx(Button, { variant: "secondary", children: "Searchable" }) }), _jsx(DropdownMenu.Content, { size: "md", children: _jsx(DropdownMenu.Searchable, { items: [
+                            { label: 'Foundry EU' },
+                            { label: 'AntPool' },
+                            { label: 'F2Pool' },
+                            { label: 'SlushPool', disabled: true },
+                        ], placeholder: "Search pools..." }) })] })] }));

package/dist/primitives/components/dropdown-menu/index.d.ts

@@ -0,0 +1,72 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { type FC, type HTMLAttributes, type ReactNode } from 'react';
+declare const DropdownMenu: FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuPortal: FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+type DropdownMenuSize = 'sm' | 'md' | 'lg';
+type BaseStaticItemProps = {
+    /** Disables the item */
+    disabled?: boolean;
+    /** Marks the item as active (static variants only) */
+    active?: boolean;
+};
+declare const DropdownMenuContent: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    /**
+     * Stretches the menu panel to the trigger width
+     * @default false
+     */
+    alignWidth?: boolean;
+    /**
+     * Controls item font/padding size (propagated via context)
+     * @default 'md' */
+    size?: DropdownMenuSize;
+} & import("react").RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuStaticContent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /** @default 'md' */
+    size?: DropdownMenuSize;
+} & import("react").RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    /** Icon prepended to the item content */
+    icon?: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuStaticItem: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & BaseStaticItemProps & {
+    icon?: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuStaticCheckboxItem: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & BaseStaticItemProps & {
+    checked?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: import("react").ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSearch: import("react").ForwardRefExoticComponent<Omit<Omit<import("../input").InputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+declare const DropdownMenuEmpty: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /** @default 'No matching results found' */
+    message?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;
+type SearchableItem = {
+    label: string;
+    icon?: ReactNode;
+} & BaseStaticItemProps;
+type DropdownMenuSearchableProps = {
+    /** Items to search and render */
+    items: SearchableItem[];
+    /**
+     * Input placeholder
+     * @default 'Search' */
+    placeholder?: string;
+    /**
+     * Shown when no items match
+     * @default 'No matching results found' */
+    emptyMessage?: string;
+    /** Fired when an item is clicked */
+    onItemSelect?: (item: SearchableItem) => void;
+};
+declare const DropdownMenuSearchable: FC<DropdownMenuSearchableProps>;
+/**
+ * Dropdown menu component with support for items, checkboxes, search, and labels.
+ * @category navigation
+ * @domain generic
+ * @tier agent-ready
+ */
+export { DropdownMenuCheckboxItem as CheckboxItem, DropdownMenuContent as Content, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuEmpty, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSearch, DropdownMenuSearchable, DropdownMenuSeparator, DropdownMenuStaticCheckboxItem, DropdownMenuStaticContent, DropdownMenuStaticItem, DropdownMenuTrigger, DropdownMenuEmpty as Empty, DropdownMenuGroup as Group, DropdownMenuItem as Item, DropdownMenuLabel as Label, DropdownMenuPortal as Portal, DropdownMenu as Root, DropdownMenuSearch as Search, DropdownMenuSearchable as Searchable, DropdownMenuSeparator as Separator, DropdownMenuStaticCheckboxItem as StaticCheckboxItem, DropdownMenuStaticContent as StaticContent, DropdownMenuStaticItem as StaticItem, DropdownMenuTrigger as Trigger, };

package/dist/primitives/components/dropdown-menu/index.js

@@ -0,0 +1,67 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { cn } from '../../utils';
+import { Checkbox } from '../checkbox';
+import { Input } from '../input';
+import { createContext, forwardRef, useContext, useState, } from 'react';
+// Re-export Radix primitives
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+// Context for size propagation
+const DropdownMenuSizeContext = createContext('md');
+const DropdownMenuContent = forwardRef(({ className, sideOffset = 4, alignWidth = false, size = 'md', ...props }, ref) => (_jsx(DropdownMenuSizeContext.Provider, { value: size, children: _jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn('mdk-dropdown-menu__content', `mdk-dropdown-menu__content--size-${size}`, alignWidth && 'mdk-dropdown-menu__content--align-width', className), ...props }) }) })));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+const DropdownMenuStaticContent = forwardRef(({ className, size = 'md', ...props }, ref) => (_jsx(DropdownMenuSizeContext.Provider, { value: size, children: _jsx("div", { ref: ref, className: cn('mdk-dropdown-menu__content', `mdk-dropdown-menu__content--size-${size}`, className), ...props }) })));
+DropdownMenuStaticContent.displayName = 'DropdownMenuStaticContent';
+const DropdownMenuItem = forwardRef(({ className, icon, children, ...props }, ref) => {
+    const size = useContext(DropdownMenuSizeContext);
+    return (_jsxs(DropdownMenuPrimitive.Item, { ref: ref, className: cn('mdk-dropdown-menu__item', `mdk-dropdown-menu__item--size-${size}`, className), ...props, children: [icon && _jsx("span", { className: "mdk-dropdown-menu__item-icon", children: icon }), children] }));
+});
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+const DropdownMenuStaticItem = forwardRef(({ className, icon, disabled, active, children, ...props }, ref) => {
+    const size = useContext(DropdownMenuSizeContext);
+    return (_jsxs("div", { ref: ref, className: cn('mdk-dropdown-menu__item', `mdk-dropdown-menu__item--size-${size}`, className), "data-disabled": disabled || undefined, "data-active": active || undefined, ...props, children: [icon && _jsx("span", { className: "mdk-dropdown-menu__item-icon", children: icon }), children] }));
+});
+DropdownMenuStaticItem.displayName = 'DropdownMenuStaticItem';
+const DropdownMenuCheckboxItem = forwardRef(({ className, children, checked, ...props }, ref) => {
+    const size = useContext(DropdownMenuSizeContext);
+    return (_jsxs(DropdownMenuPrimitive.CheckboxItem, { ref: ref, className: cn('mdk-dropdown-menu__item', `mdk-dropdown-menu__item--size-${size}`, className), checked: checked, ...props, children: [_jsx(Checkbox, { checked: checked === true, size: "xs" }), children] }));
+});
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+const DropdownMenuStaticCheckboxItem = forwardRef(({ className, checked, disabled, active, children, ...props }, ref) => {
+    const size = useContext(DropdownMenuSizeContext);
+    return (_jsxs("div", { ref: ref, className: cn('mdk-dropdown-menu__item', `mdk-dropdown-menu__item--size-${size}`, className), "data-disabled": disabled || undefined, "data-active": active || undefined, ...props, children: [_jsx(Checkbox, { checked: checked, size: "xs" }), children] }));
+});
+DropdownMenuStaticCheckboxItem.displayName = 'DropdownMenuStaticCheckboxItem';
+const DropdownMenuSeparator = forwardRef(({ className, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Separator, { ref: ref, className: cn('mdk-dropdown-menu__separator', className), ...props })));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+const DropdownMenuLabel = forwardRef(({ className, ...props }, ref) => {
+    const size = useContext(DropdownMenuSizeContext);
+    return (_jsx(DropdownMenuPrimitive.Label, { ref: ref, className: cn('mdk-dropdown-menu__label', `mdk-dropdown-menu__label--size-${size}`, className), ...props }));
+});
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+const DropdownMenuSearch = forwardRef(({ className, placeholder = 'Search', ...props }, ref) => {
+    const size = useContext(DropdownMenuSizeContext);
+    return (_jsx("div", { className: cn('mdk-dropdown-menu__search', `mdk-dropdown-menu__search--size-${size}`), children: _jsx(Input, { ref: ref, variant: "search", placeholder: placeholder, className: cn('mdk-dropdown-menu__search-input', className), ...props }) }));
+});
+DropdownMenuSearch.displayName = 'DropdownMenuSearch';
+const DropdownMenuEmpty = forwardRef(({ className, message = 'No matching results found', children, ...props }, ref) => {
+    const size = useContext(DropdownMenuSizeContext);
+    return (_jsx("div", { ref: ref, className: cn('mdk-dropdown-menu__empty', `mdk-dropdown-menu__empty--size-${size}`, className), ...props, children: children || message }));
+});
+DropdownMenuEmpty.displayName = 'DropdownMenuEmpty';
+const DropdownMenuSearchable = ({ items, placeholder = 'Search', emptyMessage = 'No matching results found', onItemSelect, }) => {
+    const [search, setSearch] = useState('');
+    const filteredItems = items.filter((item) => item.label.toLowerCase().includes(search.toLowerCase()));
+    return (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSearch, { placeholder: placeholder, value: search, onChange: (e) => setSearch(e.target.value) }), filteredItems.length > 0 ? (filteredItems.map((item) => (_jsx(DropdownMenuStaticItem, { disabled: item.disabled, active: item.active, icon: item.icon, onClick: () => onItemSelect?.(item), children: item.label }, item.label)))) : (_jsx(DropdownMenuEmpty, { message: emptyMessage }))] }));
+};
+DropdownMenuSearchable.displayName = 'DropdownMenuSearchable';
+/**
+ * Dropdown menu component with support for items, checkboxes, search, and labels.
+ * @category navigation
+ * @domain generic
+ * @tier agent-ready
+ */
+export { DropdownMenuCheckboxItem as CheckboxItem, DropdownMenuContent as Content, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuEmpty, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSearch, DropdownMenuSearchable, DropdownMenuSeparator, DropdownMenuStaticCheckboxItem, DropdownMenuStaticContent, DropdownMenuStaticItem, DropdownMenuTrigger, DropdownMenuEmpty as Empty, DropdownMenuGroup as Group, DropdownMenuItem as Item, DropdownMenuLabel as Label, DropdownMenuPortal as Portal, DropdownMenu as Root, DropdownMenuSearch as Search, DropdownMenuSearchable as Searchable, DropdownMenuSeparator as Separator, DropdownMenuStaticCheckboxItem as StaticCheckboxItem, DropdownMenuStaticContent as StaticContent, DropdownMenuStaticItem as StaticItem, DropdownMenuTrigger as Trigger, };

package/dist/primitives/components/empty-state/empty-state.example.d.ts

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

package/dist/primitives/components/empty-state/empty-state.example.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for EmptyState.
+ */
+import { EmptyState } from '@tetherto/mdk-react-devkit';
+export const EmptyStateExample = () => (_jsxs("div", { className: "mdk-example-grid-3", children: [_jsx(EmptyState, { description: "No miners found", size: "sm" }), _jsx(EmptyState, { description: "No alerts in the selected range", image: "simple" }), _jsx(EmptyState, { description: "No data \u2014 try a different filter.", size: "lg" })] }));

package/dist/primitives/components/empty-state/index.d.ts

@@ -0,0 +1,40 @@
+import type { ComponentSize } from '../../types';
+import { type ReactNode } from 'react';
+export type EmptyStateSize = ComponentSize;
+export type EmptyStateImage = 'default' | 'simple' | ReactNode;
+export type EmptyStateProps = {
+    /**
+     * Description text or ReactNode displayed below the image
+     */
+    description: ReactNode;
+    /**
+     * Image to display. Use "default" for the standard illustration,
+     * "simple" for a minimal icon, or pass a custom ReactNode.
+     * @default "default"
+     */
+    image?: EmptyStateImage;
+    /**
+     * Size variant controlling spacing and icon dimensions
+     * @default "md"
+     */
+    size?: EmptyStateSize;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+};
+/**
+ * Empty state component for displaying placeholder content when no data is available.
+ *
+ * @example
+ * ```tsx
+ * <EmptyState description="No data available" />
+ * <EmptyState description="No miners found" image="simple" size="sm" />
+ * <EmptyState description={<span>Custom <strong>content</strong></span>} />
+ * ```
+ * @category feedback
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const EmptyState: import("react").ForwardRefExoticComponent<EmptyStateProps & import("react").RefAttributes<HTMLDivElement>>;
+export { EmptyState };

package/dist/primitives/components/empty-state/index.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArchiveIcon, CircleIcon } from '@radix-ui/react-icons';
+import { cn } from '../../utils';
+import { forwardRef } from 'react';
+const ICON_SIZE = {
+    sm: '32',
+    md: '48',
+    lg: '64',
+};
+/**
+ * Empty state component for displaying placeholder content when no data is available.
+ *
+ * @example
+ * ```tsx
+ * <EmptyState description="No data available" />
+ * <EmptyState description="No miners found" image="simple" size="sm" />
+ * <EmptyState description={<span>Custom <strong>content</strong></span>} />
+ * ```
+ * @category feedback
+ * @domain generic
+ * @tier agent-ready
+ */
+const EmptyState = forwardRef(({ description, image = 'default', size = 'md', className, ...props }, ref) => {
+    const iconDimension = ICON_SIZE[size];
+    const renderImage = () => {
+        if (image === 'default') {
+            return _jsx(ArchiveIcon, { width: iconDimension, height: iconDimension, "aria-hidden": "true" });
+        }
+        if (image === 'simple') {
+            return _jsx(CircleIcon, { width: iconDimension, height: iconDimension, "aria-hidden": "true" });
+        }
+        return image;
+    };
+    return (_jsxs("div", { ref: ref, className: cn('mdk-empty-state', `mdk-empty-state--${size}`, className), ...props, children: [_jsx("div", { className: "mdk-empty-state__image", children: renderImage() }), _jsx("div", { className: "mdk-empty-state__description", children: description })] }));
+});
+EmptyState.displayName = 'EmptyState';
+export { EmptyState };

package/dist/primitives/components/error-boundary/error-boundary.example.d.ts

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

package/dist/primitives/components/error-boundary/error-boundary.example.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for ErrorBoundary.
+ */
+import { useState } from 'react';
+import { ErrorBoundary, withErrorBoundary } from '@tetherto/mdk-react-devkit';
+/** Component that throws when `shouldThrow` is true */
+const BrokenComponent = ({ shouldThrow }) => {
+    if (shouldThrow) {
+        throw new Error('Simulated rendering error');
+    }
+    return (_jsx("div", { style: { padding: 16, fontSize: 13, color: 'var(--mdk-color-text-primary, #fff)' }, children: "Component rendered successfully" }));
+};
+const SafeChart = withErrorBoundary(({ title }) => _jsx("div", { style: { padding: 16, fontSize: 13 }, children: title }), 'SafeChart', (err) => console.error('Caught via HOC:', err));
+export const ErrorBoundaryExample = () => {
+    const [throwError, setThrowError] = useState(false);
+    return (_jsxs("div", { className: "mdk-example-row", style: { display: 'flex', flexDirection: 'column', gap: 24 }, children: [_jsxs("div", { children: [_jsx("button", { type: "button", onClick: () => setThrowError((v) => !v), style: { marginBottom: 8, padding: '4px 12px', cursor: 'pointer' }, children: throwError ? 'Reset (remount required)' : 'Trigger error' }), _jsx(ErrorBoundary, { componentName: "BrokenComponent", children: _jsx(BrokenComponent, { shouldThrow: throwError }) })] }), _jsx(ErrorBoundary, { fallback: _jsx("div", { style: { color: '#F87171', padding: 16 }, children: "Custom error UI" }), children: _jsx(BrokenComponent, { shouldThrow: true }) }), _jsx(SafeChart, { title: "Chart wrapped with withErrorBoundary HOC" })] }));
+};

package/dist/primitives/components/error-boundary/index.d.ts

@@ -0,0 +1,58 @@
+import { Component, type ComponentType, type ErrorInfo, type FC, type ReactNode } from 'react';
+export type ErrorBoundaryProps = {
+    /**
+     * Fallback UI to render when an error is caught.
+     * If not provided, a default error panel with expandable stack trace is shown.
+     */
+    fallback?: ReactNode;
+    /**
+     * Name of the wrapped component (shown in the default fallback)
+     */
+    componentName?: string;
+    /**
+     * Callback fired when an error is caught
+     */
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+    /**
+     * Additional CSS class name for the default fallback container
+     */
+    className?: string;
+    /** Subtree to protect */
+    children: ReactNode;
+};
+type ErrorBoundaryState = {
+    hasError: boolean;
+    error: Error | null;
+    errorInfo: ErrorInfo | null;
+};
+/**
+ * Error boundary component that catches React rendering errors
+ * and displays a fallback UI.
+ *
+ * @example
+ * ```tsx
+ * <ErrorBoundary fallback={<div>Something went wrong</div>}>
+ *   <MyComponent />
+ * </ErrorBoundary>
+ * ```
+ * @category misc
+ * @domain generic
+ * @tier agent-ready
+ */
+declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    static displayName: string;
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState>;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): ReactNode;
+}
+/**
+ * Higher-order component that wraps a component with an ErrorBoundary.
+ *
+ * @example
+ * ```tsx
+ * const SafeChart = withErrorBoundary(Chart, 'Chart', (error) => console.error(error))
+ * ```
+ */
+declare const withErrorBoundary: <P extends object>(WrappedComponent: ComponentType<P>, componentName?: string, onError?: (error: Error, errorInfo: ErrorInfo) => void) => FC<P>;
+export { ErrorBoundary, withErrorBoundary };

package/dist/primitives/components/error-boundary/index.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component } from 'react';
+import { cn } from '../../utils';
+import { ErrorCard } from '../error-card';
+/**
+ * Error boundary component that catches React rendering errors
+ * and displays a fallback UI.
+ *
+ * @example
+ * ```tsx
+ * <ErrorBoundary fallback={<div>Something went wrong</div>}>
+ *   <MyComponent />
+ * </ErrorBoundary>
+ * ```
+ * @category misc
+ * @domain generic
+ * @tier agent-ready
+ */
+class ErrorBoundary extends Component {
+    static displayName = 'ErrorBoundary';
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null, errorInfo: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        this.setState({ errorInfo });
+        this.props.onError?.(error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            if (this.props.fallback) {
+                return this.props.fallback;
+            }
+            const { error, errorInfo } = this.state;
+            const { componentName, className } = this.props;
+            return (_jsxs("div", { className: cn('mdk-error-boundary', className), children: [_jsx(ErrorCard, { variant: "inline", title: componentName ? `Error in ${componentName}` : 'Something went wrong', error: error?.message ?? 'An unexpected error occurred' }), errorInfo?.componentStack && (_jsxs("details", { className: "mdk-error-boundary__details", children: [_jsx("summary", { className: "mdk-error-boundary__summary", children: "Stack trace" }), _jsx("pre", { className: "mdk-error-boundary__stack", children: _jsx("code", { children: errorInfo.componentStack }) })] }))] }));
+        }
+        return this.props.children;
+    }
+}
+// --- withErrorBoundary HOC ---
+/**
+ * Higher-order component that wraps a component with an ErrorBoundary.
+ *
+ * @example
+ * ```tsx
+ * const SafeChart = withErrorBoundary(Chart, 'Chart', (error) => console.error(error))
+ * ```
+ */
+const withErrorBoundary = (WrappedComponent, componentName, onError) => {
+    const WithErrorBoundary = (props) => (_jsx(ErrorBoundary, { componentName: componentName, onError: onError, children: _jsx(WrappedComponent, { ...props }) }));
+    WithErrorBoundary.displayName = `withErrorBoundary(${componentName ?? WrappedComponent.displayName ?? 'Component'})`;
+    return WithErrorBoundary;
+};
+export { ErrorBoundary, withErrorBoundary };

package/dist/primitives/components/error-card/error-card.example.d.ts

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

package/dist/primitives/components/error-card/error-card.example.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for ErrorCard.
+ */
+import { ErrorCard } from '@tetherto/mdk-react-devkit';
+export const ErrorCardExample = () => (_jsxs("div", { className: "mdk-example-row", style: { display: 'flex', flexDirection: 'column', gap: 16 }, children: [_jsx(ErrorCard, { error: "Connection timed out. Please try again." }), _jsx(ErrorCard, { title: "Authentication Error", error: "Invalid credentials. Please check your username and password." }), _jsx(ErrorCard, { title: "Validation Errors", error: "Field 'name' is required\nField 'email' must be a valid address\nField 'password' must be at least 8 characters" }), _jsx(ErrorCard, { variant: "inline", title: "Warning", error: "Some miners are reporting high temperatures." })] }));

package/dist/primitives/components/error-card/index.d.ts

@@ -0,0 +1,35 @@
+export type ErrorCardVariant = 'card' | 'inline';
+export type ErrorCardProps = {
+    /**
+     * Error message string. Supports `\n` for line breaks.
+     */
+    error: string;
+    /**
+     * Title displayed above the error message
+     * @default "Errors"
+     */
+    title?: string;
+    /**
+     * Display variant. "card" shows a bordered container, "inline" shows flat text.
+     * @default "card"
+     */
+    variant?: ErrorCardVariant;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+};
+/**
+ * Error card component for displaying error messages.
+ *
+ * @example
+ * ```tsx
+ * <ErrorCard error="Connection failed" />
+ * <ErrorCard error="Line 1\nLine 2" variant="inline" title="Validation Errors" />
+ * ```
+ * @category feedback
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const ErrorCard: import("react").ForwardRefExoticComponent<ErrorCardProps & import("react").RefAttributes<HTMLDivElement>>;
+export { ErrorCard };

package/dist/primitives/components/error-card/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, Fragment } from 'react';
+import { cn } from '../../utils';
+/**
+ * Error card component for displaying error messages.
+ *
+ * @example
+ * ```tsx
+ * <ErrorCard error="Connection failed" />
+ * <ErrorCard error="Line 1\nLine 2" variant="inline" title="Validation Errors" />
+ * ```
+ * @category feedback
+ * @domain generic
+ * @tier agent-ready
+ */
+const ErrorCard = forwardRef(({ error, title = 'Errors', variant = 'card', className, ...props }, ref) => {
+    const lines = error.split('\n');
+    return (_jsxs("div", { ref: ref, className: cn('mdk-error-card', `mdk-error-card--${variant}`, className), ...props, children: [_jsx("div", { className: "mdk-error-card__title", children: title }), _jsx("div", { className: "mdk-error-card__message", children: lines.map((line, i) => (_jsxs(Fragment, { children: [line, i < lines.length - 1 && _jsx("br", {})] }, i))) })] }));
+});
+ErrorCard.displayName = 'ErrorCard';
+export { ErrorCard };