@tetherto/mdk-react-devkit 0.0.0 → 0.12.1

package/dist/domain/components/miners-activity-chart/miners-activity-chart.d.ts

@@ -0,0 +1,69 @@
+import type { JSX } from 'react';
+import './miners-activity-chart.scss';
+type MinersActivityData = {
+    /** Total miner count; not rendered, since each tile reads its own status key (e.g. `offline`, `error`, `sleep`) and shows 0 when absent */
+    total?: number;
+    [key: string]: number | undefined;
+};
+type MinerActivityChartErrorProp = {
+    /** Error payload; `message` becomes the error alert description when `isError` is set, else a generic retry hint */
+    data?: {
+        message?: string;
+    };
+    [key: string]: unknown | null;
+};
+/** Visual style for the per-status items. */
+export type MinersActivityVariant = 'indicators' | 'tiles';
+type MinersActivityChartProps = {
+    /**
+     * Time-series data for online/offline/faulted counts
+     * @default {}
+     */
+    data: MinersActivityData;
+    /**
+     * Use tall variant
+     * @default false
+     */
+    large: boolean;
+    /**
+     * Show loading state
+     * @default false
+     */
+    isLoading: boolean;
+    /**
+     * Show error state
+     * @default false
+     */
+    isError: boolean;
+    /**
+     * Error details to display
+     * @default null
+     */
+    error: MinerActivityChartErrorProp | null;
+    /**
+     * Show axis labels
+     * @default true
+     */
+    showLabel: boolean;
+    /**
+     * Use demo/mock data
+     * @default false
+     */
+    isDemoMode: boolean;
+    /**
+     * `indicators` (default) renders coloured dots; `tiles` renders tinted status tiles.
+     * @default 'indicators'
+     */
+    variant: MinersActivityVariant;
+};
+/**
+ * Per-status miner counts (online / offline / faulted / power-mode). Renders as
+ * coloured indicator dots (`indicators`) or tinted status tiles (`tiles`).
+ *
+ * @category widgets
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export declare const MinersActivityChart: ({ data, large, isLoading, isError, error, showLabel, isDemoMode, variant, }: Partial<MinersActivityChartProps>) => JSX.Element;
+export {};

package/dist/domain/components/miners-activity-chart/miners-activity-chart.example.d.ts

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

package/dist/domain/components/miners-activity-chart/miners-activity-chart.example.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MinersActivityChart } from '@tetherto/mdk-react-devkit';
+export const MinersActivityChartExample = () => (_jsx("div", { className: "mdk-example-row", children: _jsx(MinersActivityChart, { data: { online: [], offline: [], faulted: [] }, large: false, isLoading: false, isError: false, error: null, showLabel: true, isDemoMode: true }) }));

package/dist/domain/components/miners-activity-chart/miners-activity-chart.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, COLOR, CoreAlert, formatNumber, hexToRgba, Indicator, SimpleTooltip, Spinner, } from '../../../primitives/index.js';
+import { MINERS_ACTIVITY_ITEMS, MINERS_ACTIVITY_LABELS, MINERS_ACTIVITY_TOOLTIPS, MinersActivityIndicatorColors, MinersActivityTileColors, } from './miners-activity-chart.const';
+const TILE_BACKGROUND_ALPHA = 0.12;
+/** Status colour for a tile (plain `#RRGGBB`); unknown statuses fall back to grey. */
+const tileColor = (status) => MinersActivityTileColors[status] ?? COLOR.GREY;
+/**
+ * Per-status miner counts (online / offline / faulted / power-mode). Renders as
+ * coloured indicator dots (`indicators`) or tinted status tiles (`tiles`).
+ *
+ * @category widgets
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export const MinersActivityChart = ({ data = {}, large = false, isLoading = false, isError = false, error = null, showLabel = true, isDemoMode = false, variant = 'indicators', }) => {
+    const itemsRoot = MINERS_ACTIVITY_ITEMS.EXTENDED;
+    const items = itemsRoot.WOUT_MAINTENANCE;
+    const displayData = isError && isDemoMode ? {} : data;
+    if (isError && !isDemoMode) {
+        return (_jsx(CoreAlert, { type: "error", title: "Failed to load miner activity data", description: error?.data?.message || 'Please try refreshing the page', showIcon: true }));
+    }
+    if (isLoading) {
+        return (_jsx(Spinner, { type: "circle", className: cn('mdk-miners-activity-chart__spinner', large && 'mdk-miners-activity-chart__spinner--large') }));
+    }
+    const withTooltip = (value, node) => {
+        const tooltip = MINERS_ACTIVITY_TOOLTIPS[value];
+        if (!tooltip)
+            return node;
+        return (_jsx(SimpleTooltip, { content: tooltip, side: "top", children: node }, value));
+    };
+    const label = (value) => MINERS_ACTIVITY_LABELS[value] || value;
+    const count = (value) => formatNumber(displayData[value] || 0);
+    return (_jsx("div", { className: cn('mdk-miners-activity-chart__root', variant === 'tiles' && 'mdk-miners-activity-chart__root--tiles'), children: items.map((value) => {
+            if (variant === 'tiles') {
+                const color = tileColor(value);
+                const tile = (_jsxs("div", { className: cn('mdk-miners-activity-chart__tile', large && 'mdk-miners-activity-chart__tile--large'), style: { color, backgroundColor: hexToRgba(color, TILE_BACKGROUND_ALPHA) }, children: [showLabel && (_jsx("span", { className: "mdk-miners-activity-chart__tile-label", children: label(value) })), _jsx("span", { className: "mdk-miners-activity-chart__tile-value", children: count(value) })] }, value));
+                return withTooltip(value, tile);
+            }
+            const indicatorColor = MinersActivityIndicatorColors[value];
+            const itemNode = (_jsxs(Indicator, { color: indicatorColor, size: large ? 'lg' : 'sm', vertical: true, className: cn('mdk-miners-activity-chart__item', large && 'mdk-miners-activity-chart__item--large'), children: [showLabel && (_jsx("span", { className: cn('mdk-miners-activity-chart__label', large && 'mdk-miners-activity-chart__label--large'), children: label(value) })), _jsx("span", { children: count(value) })] }, value));
+            return withTooltip(value, itemNode);
+        }) }));
+};

package/dist/domain/components/mining-pools-panel/format.d.ts

@@ -0,0 +1,7 @@
+export declare const formatBtcRevenue: (value: number | undefined) => string;
+/**
+ * Display PH/s when ≥ 1, otherwise TH/s, switching units row by row so
+ * partial-PH lines stay readable.
+ */
+export declare const formatPoolHashrate: (phs: number | undefined) => string;
+export declare const HS_PER_TERAHASH = 1000000000000;

package/dist/domain/components/mining-pools-panel/format.js

@@ -0,0 +1,21 @@
+const HS_PER_THS = 1_000_000_000_000;
+const PHS_PER_THS = 1000;
+export const formatBtcRevenue = (value) => {
+    if (typeof value !== 'number' || !Number.isFinite(value))
+        return '0 BTC';
+    return `${value.toFixed(value === 0 ? 0 : 4)} BTC`;
+};
+/**
+ * Display PH/s when ≥ 1, otherwise TH/s, switching units row by row so
+ * partial-PH lines stay readable.
+ */
+export const formatPoolHashrate = (phs) => {
+    if (typeof phs !== 'number' || !Number.isFinite(phs))
+        return '— PH/s';
+    if (phs >= 1)
+        return `${phs.toFixed(2)} PH/s`;
+    const ths = phs * PHS_PER_THS;
+    return `${ths.toFixed(0)} TH/s`;
+};
+/* Re-exported for ad-hoc consumers (e.g. the panel's table-export). */
+export const HS_PER_TERAHASH = HS_PER_THS;

package/dist/domain/components/mining-pools-panel/index.d.ts

@@ -0,0 +1,30 @@
+import type { MiningPoolRow } from './types';
+/**
+ * Dashboard card that lists configured mining pools — one row per pool,
+ * with revenue, hash rate, and an optional "Show details" action.
+ *
+ * Pure presentation: the row data + click handler come from props,
+ * shaped upstream by the caller into {@link MiningPoolRow}s.
+ *
+ * @category cards
+ * @kernelCapability pool-monitoring
+ * @domain mining-operations
+ * @tier agent-ready
+ *
+ * @example
+ * ```tsx
+ * <MiningPoolsPanel rows={poolRows} onShowDetails={(row) => openPopover(row)} />
+ * ```
+ */
+declare const MiningPoolsPanel: import("react").ForwardRefExoticComponent<Partial<{
+    label: string;
+    hideHeader: boolean;
+    isLoading: boolean;
+    skeletonRows: number;
+    emptyMessage: string;
+    rows: MiningPoolRow[];
+    onShowDetails: (row: MiningPoolRow) => void;
+    className: string;
+}> & import("react").RefAttributes<HTMLDivElement>>;
+export { MiningPoolsPanel };
+export type { MiningPoolRow, MiningPoolsPanelProps } from './types';

package/dist/domain/components/mining-pools-panel/index.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, Dialog, DialogContent, DialogTrigger, SkeletonBlock } from '../../../primitives/index.js';
+import { forwardRef } from 'react';
+import { PoolDetailsCard } from '../pool-details-card';
+import { formatBtcRevenue, formatPoolHashrate } from './format';
+const COLUMN_HEADERS = ['Pool', 'Revenue 24hrs', 'Hash rate'];
+const DETAILS_DIALOG_TITLE = 'Pool details';
+const PoolDetailsButton = ({ row }) => {
+    if (!row.details || row.details.length === 0)
+        return null;
+    return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "mdk-mining-pools-panel__details-btn", children: "Show details" }) }), _jsx(DialogContent, { title: DETAILS_DIALOG_TITLE, closable: true, bare: true, children: _jsx("div", { className: "mdk-mining-pools-panel__details-body", children: _jsx(PoolDetailsCard, { details: row.details }) }) })] }));
+};
+const PoolRowView = ({ row, onShowDetails, }) => {
+    const showAction = !!onShowDetails || (row.details && row.details.length > 0);
+    return (_jsxs("div", { className: "mdk-mining-pools-panel__row", role: "row", children: [_jsx("span", { role: "cell", className: "mdk-mining-pools-panel__cell mdk-mining-pools-panel__cell--name", children: row.name }), _jsx("span", { role: "cell", className: "mdk-mining-pools-panel__cell", children: formatBtcRevenue(row.revenue24hBtc) }), _jsx("span", { role: "cell", className: "mdk-mining-pools-panel__cell", children: formatPoolHashrate(row.hashratePhs) }), _jsx("span", { role: "cell", className: "mdk-mining-pools-panel__cell mdk-mining-pools-panel__cell--action", children: !showAction ? null : onShowDetails ? (_jsx("button", { type: "button", className: "mdk-mining-pools-panel__details-btn", onClick: () => onShowDetails(row), children: "Show details" })) : (_jsx(PoolDetailsButton, { row: row })) })] }));
+};
+/**
+ * Dashboard card that lists configured mining pools — one row per pool,
+ * with revenue, hash rate, and an optional "Show details" action.
+ *
+ * Pure presentation: the row data + click handler come from props,
+ * shaped upstream by the caller into {@link MiningPoolRow}s.
+ *
+ * @category cards
+ * @kernelCapability pool-monitoring
+ * @domain mining-operations
+ * @tier agent-ready
+ *
+ * @example
+ * ```tsx
+ * <MiningPoolsPanel rows={poolRows} onShowDetails={(row) => openPopover(row)} />
+ * ```
+ */
+const MiningPoolsPanel = forwardRef(({ className, rows = [], onShowDetails, hideHeader = false, skeletonRows = 3, isLoading = false, label = 'Mining Pools', emptyMessage = 'No pools configured', ...props }, ref) => {
+    return (_jsxs("div", { ref: ref, className: cn('mdk-mining-pools-panel', className), ...props, children: [!hideHeader && (_jsx("div", { className: "mdk-mining-pools-panel__header", children: _jsx("span", { className: "mdk-mining-pools-panel__label", children: label }) })), isLoading ? (_jsx("div", { className: "mdk-mining-pools-panel__skeleton-container", children: Array.from({ length: skeletonRows }).map((_, index) => (_jsx(SkeletonBlock, {}, index))) })) : rows.length === 0 ? (_jsx("div", { className: "mdk-mining-pools-panel__empty", children: emptyMessage })) : (_jsxs("div", { className: "mdk-mining-pools-panel__table", role: "table", "aria-label": label, children: [_jsxs("div", { className: "mdk-mining-pools-panel__row mdk-mining-pools-panel__row--head", role: "row", children: [COLUMN_HEADERS.map((header) => (_jsx("span", { role: "columnheader", className: "mdk-mining-pools-panel__cell mdk-mining-pools-panel__cell--head", children: header }, header))), _jsx("span", { className: "mdk-mining-pools-panel__cell mdk-mining-pools-panel__cell--head", "aria-hidden": "true" })] }), rows.map((row) => (_jsx(PoolRowView, { row: row, onShowDetails: onShowDetails }, row.id)))] }))] }));
+});
+MiningPoolsPanel.displayName = 'MiningPoolsPanel';
+export { MiningPoolsPanel };

package/dist/domain/components/mining-pools-panel/mining-pools-panel.example.d.ts

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

package/dist/domain/components/mining-pools-panel/mining-pools-panel.example.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Runnable example for MiningPoolsPanel.
+ *
+ * Uses static rows. In an app, map your pools route's response to
+ * `MiningPoolRow`s and pass them in.
+ */
+import { MiningPoolsPanel } from '@tetherto/mdk-react-devkit';
+const rows = [
+    {
+        id: 'f2pool-shelf-0',
+        name: 'minerpool-f2pool-shelf-0',
+        revenue24hBtc: 0.0231,
+        hashratePhs: 0.901,
+        details: [
+            { title: 'Id', value: 'f2pool-shelf-0' },
+            { title: 'Rack', value: 'R-12' },
+            { title: 'User name', value: 'operator' },
+            { title: 'Balance', value: '0.0214 BTC' },
+            { title: 'Unsettled', value: '0.0017 BTC' },
+            { title: 'Revenue last 24hrs', value: '0.0231 BTC' },
+            { title: 'Active Worker Count', value: 24 },
+        ],
+    },
+    {
+        id: 'ocean-shelf-0',
+        name: 'minerpool-ocean-shelf-0',
+        revenue24hBtc: 0.0142,
+        hashratePhs: 1.21,
+        details: [
+            { title: 'Id', value: 'ocean-shelf-0' },
+            { title: 'Rack', value: 'R-04' },
+            { title: 'User name', value: 'operator' },
+            { title: 'Balance', value: '0.0136 BTC' },
+            { title: 'Unsettled', value: '0.0006 BTC' },
+            { title: 'Revenue last 24hrs', value: '0.0142 BTC' },
+            { title: 'Active Worker Count', value: 18 },
+        ],
+    },
+];
+export const MiningPoolsPanelExample = () => _jsx(MiningPoolsPanel, { rows: rows });

package/dist/domain/components/mining-pools-panel/types.d.ts

@@ -0,0 +1,56 @@
+import type { PoolDetailItem } from '../pool-details-card';
+/**
+ * Display contract for one row of the `<MiningPoolsPanel />` table.
+ * Map your pools data into this shape before passing it in; fixtures and
+ * demos can build rows by hand.
+ *
+ * @category cards
+ */
+export type MiningPoolRow = {
+    /** Stable React key. */
+    id: string;
+    /** Display name (e.g. `minerpool-f2pool-shelf-0`). */
+    name: string;
+    /** 24h revenue in BTC; rendered as `0.00 BTC` when undefined. */
+    revenue24hBtc?: number;
+    /** Hashrate in PH/s — used for display (TH/s shown automatically below 1 PH/s). */
+    hashratePhs?: number;
+    /** Key/value details rendered inside the "Show details" popover. */
+    details?: PoolDetailItem[];
+};
+export type MiningPoolsPanelProps = Partial<{
+    /**
+     * Override the card title — defaults to `Mining Pools`.
+     * @default "Mining Pools"
+     */
+    label: string;
+    /**
+     * Hide the title row entirely.
+     * @default false
+     */
+    hideHeader: boolean;
+    /**
+     * Loading state — renders skeleton rows.
+     * @default false
+     */
+    isLoading: boolean;
+    /**
+     * Number of skeleton rows to show while loading.
+     * @default 3
+     */
+    skeletonRows: number;
+    /**
+     * Message shown when `rows` is empty.
+     * @default "No pools configured"
+     */
+    emptyMessage: string;
+    /**
+     * Pool rows, in display order.
+     * @default []
+     */
+    rows: MiningPoolRow[];
+    /** Called when the user clicks the per-row "Show details" button. */
+    onShowDetails: (row: MiningPoolRow) => void;
+    /** Extra className for the root. */
+    className: string;
+}>;

package/dist/domain/components/mining-pools-panel/types.js

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

package/dist/domain/components/pool-details-card/index.d.ts

@@ -0,0 +1,56 @@
+export type PoolDetailItem = {
+    /** Row label, rendered with a trailing colon */
+    title: string;
+    /** Row value; renders `-` when undefined or an empty string */
+    value?: string | number;
+};
+type PoolDetailsCardPartialProps = Partial<{
+    /** Header label */
+    label: string;
+    /**
+     * Render an underline under the label
+     * @default false
+     */
+    underline: boolean;
+    /** Additional class names */
+    className: string;
+}>;
+export type PoolDetailsCardProps = PoolDetailsCardPartialProps & {
+    /** Detail rows to render */
+    details: PoolDetailItem[];
+};
+/**
+ * Compact key/value card for displaying pool metadata (URL, fee, worker count,
+ * etc.). Empty list renders a "No data available" placeholder.
+ *
+ * @category cards
+ * @kernelCapability pool-performance
+ * @domain mining-operations
+ *
+ * @example
+ * ```tsx
+ * <PoolDetailsCard
+ *   label="Pool details"
+ *   details={[
+ *     { title: 'URL', value: 'stratum+tcp://...' },
+ *     { title: 'Worker', value: 'rig01' },
+ *   ]}
+ * />
+ * ```
+ * @tier agent-ready
+ */
+declare const PoolDetailsCard: import("react").ForwardRefExoticComponent<Partial<{
+    /** Header label */
+    label: string;
+    /**
+     * Render an underline under the label
+     * @default false
+     */
+    underline: boolean;
+    /** Additional class names */
+    className: string;
+}> & {
+    /** Detail rows to render */
+    details: PoolDetailItem[];
+} & import("react").RefAttributes<HTMLDivElement>>;
+export { PoolDetailsCard };

package/dist/domain/components/pool-details-card/index.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../primitives/index.js';
+import { forwardRef } from 'react';
+const noDataMessage = 'No data available';
+/**
+ * Compact key/value card for displaying pool metadata (URL, fee, worker count,
+ * etc.). Empty list renders a "No data available" placeholder.
+ *
+ * @category cards
+ * @kernelCapability pool-performance
+ * @domain mining-operations
+ *
+ * @example
+ * ```tsx
+ * <PoolDetailsCard
+ *   label="Pool details"
+ *   details={[
+ *     { title: 'URL', value: 'stratum+tcp://...' },
+ *     { title: 'Worker', value: 'rig01' },
+ *   ]}
+ * />
+ * ```
+ * @tier agent-ready
+ */
+const PoolDetailsCard = forwardRef(({ label, details, underline = false, className, ...props }, ref) => {
+    return (_jsxs("div", { ref: ref, className: cn('mdk-pool-details-card', className), ...props, children: [label && (_jsx("div", { className: cn('mdk-pool-details-card__header', underline && 'mdk-pool-details-card__header--underline'), children: _jsx("span", { className: "mdk-pool-details-card__label", children: label }) })), _jsx("div", { className: "mdk-pool-details-card__list", children: details.length === 0 ? (_jsx("div", { className: "mdk-pool-details-card__empty", children: noDataMessage })) : (details.map((item, index) => (_jsxs("div", { className: "mdk-pool-details-card__item", children: [_jsxs("span", { className: "mdk-pool-details-card__item-title", children: [item.title, ":"] }), _jsx("span", { className: "mdk-pool-details-card__item-value", children: item.value !== undefined && item.value !== '' ? String(item.value) : '-' })] }, index)))) })] }));
+});
+PoolDetailsCard.displayName = 'PoolDetailsCard';
+export { PoolDetailsCard };

package/dist/domain/components/pool-details-card/pool-details-card.example.d.ts

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

package/dist/domain/components/pool-details-card/pool-details-card.example.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Runnable example for PoolDetailsCard.
+ */
+import { PoolDetailsCard } from '@tetherto/mdk-react-devkit';
+const details = [
+    { title: 'URL', value: 'stratum+tcp://eu.example.pool:3333' },
+    { title: 'Worker', value: 'rig-01' },
+    { title: 'Fee', value: '1.5 %' },
+    { title: 'Active workers', value: 42 },
+    { title: 'Pool status', value: 'Healthy' },
+];
+export const PoolDetailsCardExample = () => {
+    return _jsx(PoolDetailsCard, { label: "Primary pool", details: details });
+};

package/dist/domain/components/pool-details-popover/index.d.ts

@@ -0,0 +1,43 @@
+import type { PoolDetailItem } from '../pool-details-card';
+/**
+ * Button-triggered popover that displays a pool's key/value details (URL,
+ * fee, worker count, status, …) inside a Radix `Dialog`. Wraps
+ * `PoolDetailsCard` so the read-out matches the embedded card variant.
+ *
+ * @category cards
+ * @kernelCapability pool-performance
+ * @domain mining-operations
+ *
+ * @example
+ * ```tsx
+ * <PoolDetailsPopover
+ *   triggerLabel="View details"
+ *   title="Primary pool"
+ *   details={[
+ *     { title: 'URL', value: 'stratum+tcp://...' },
+ *     { title: 'Fee', value: '1.5 %' },
+ *   ]}
+ * />
+ * ```
+ *
+ * @tier agent-ready
+ */
+declare const PoolDetailsPopover: import("react").ForwardRefExoticComponent<Partial<{
+    /** Dialog title */
+    title: string;
+    /** Dialog body description */
+    description: string;
+    /**
+     * Disable the trigger
+     * @default false
+     */
+    disabled: boolean;
+    /** Additional class names */
+    className: string;
+    /** Trigger button label */
+    triggerLabel: string;
+}> & {
+    /** Detail rows */
+    details: PoolDetailItem[];
+} & import("react").RefAttributes<HTMLDivElement>>;
+export { PoolDetailsPopover };

package/dist/domain/components/pool-details-popover/index.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, cn, Dialog, DialogContent, DialogTrigger } from '../../../primitives/index.js';
+import { PoolDetailsCard } from '../pool-details-card';
+import { forwardRef } from 'react';
+const TRIGGER_BUTTON_VARIANT = 'secondary';
+/**
+ * Button-triggered popover that displays a pool's key/value details (URL,
+ * fee, worker count, status, …) inside a Radix `Dialog`. Wraps
+ * `PoolDetailsCard` so the read-out matches the embedded card variant.
+ *
+ * @category cards
+ * @kernelCapability pool-performance
+ * @domain mining-operations
+ *
+ * @example
+ * ```tsx
+ * <PoolDetailsPopover
+ *   triggerLabel="View details"
+ *   title="Primary pool"
+ *   details={[
+ *     { title: 'URL', value: 'stratum+tcp://...' },
+ *     { title: 'Fee', value: '1.5 %' },
+ *   ]}
+ * />
+ * ```
+ *
+ * @tier agent-ready
+ */
+const PoolDetailsPopover = forwardRef(({ details, title, description, triggerLabel, disabled = false, className, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn('mdk-pool-details-popover', className), ...props, children: _jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { variant: TRIGGER_BUTTON_VARIANT, disabled: disabled, children: triggerLabel }) }), _jsx(DialogContent, { title: title, description: description, closable: true, className: "mdk-pool-details-popover-content", children: _jsx("div", { className: "mdk-pool-details-popover-content__body", children: _jsx(PoolDetailsCard, { details: details }) }) })] }) }));
+});
+PoolDetailsPopover.displayName = 'PoolDetailsPopover';
+export { PoolDetailsPopover };

package/dist/domain/components/pool-details-popover/pool-details-popover.example.d.ts

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

package/dist/domain/components/pool-details-popover/pool-details-popover.example.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Runnable example for PoolDetailsPopover.
+ */
+import { PoolDetailsPopover } from '@tetherto/mdk-react-devkit';
+const details = [
+    { title: 'URL', value: 'stratum+tcp://eu.example.pool:3333' },
+    { title: 'Worker', value: 'rig-01' },
+    { title: 'Fee', value: '1.5 %' },
+];
+export const PoolDetailsPopoverExample = () => {
+    return _jsx(PoolDetailsPopover, { triggerLabel: "View pool", title: "Pool details", details: details });
+};

package/dist/domain/components/settings/add-user-modal/add-user-modal.d.ts

@@ -0,0 +1,30 @@
+import type { RoleOption } from '@tetherto/mdk-ui-foundation';
+import './add-user-modal.scss';
+export type AddUserModalProps = {
+    /** Controls whether the dialog is visible */
+    open: boolean;
+    /** Called when the user dismisses the modal (cancel or backdrop) */
+    onClose: VoidFunction;
+    /** List of assignable roles rendered in the role select drop-down */
+    roles: RoleOption[];
+    /** Async handler called with validated form values on submission */
+    onSubmit: (data: {
+        name: string;
+        email: string;
+        role: string;
+    }) => Promise<void>;
+    /**
+     * Disables the submit button and shows a loading label while the parent is saving
+     * @default false
+     */
+    isSubmitting?: boolean;
+};
+/**
+ * Modal form for inviting a new user — captures email, role, and optional team assignment.
+ *
+ * @category settings
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export declare const AddUserModal: ({ open, onClose, roles, onSubmit, isSubmitting, }: AddUserModalProps) => import("react").JSX.Element;

package/dist/domain/components/settings/add-user-modal/add-user-modal.example.d.ts

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

package/dist/domain/components/settings/add-user-modal/add-user-modal.example.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Runnable example for AddUserModal.
+ */
+import { AddUserModal } from '@tetherto/mdk-react-devkit';
+const mockRoles = [
+    { value: 'admin', label: 'Admin' },
+    { value: 'operator', label: 'Operator' },
+    { value: 'viewer', label: 'Viewer' },
+];
+export const AddUserModalExample = () => (_jsx("div", { className: "mdk-example-row", children: _jsx(AddUserModal, { open: true, onClose: () => {
+            console.warn('modal closed');
+        }, roles: mockRoles, onSubmit: async (data) => {
+            console.warn('create user', data);
+        } }) }));

package/dist/domain/components/settings/add-user-modal/add-user-modal.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { Button, Dialog, DialogContent, DialogFooter, Form, FormInput, FormSelect, } from '../../../../primitives/index.js';
+const addUserSchema = z.object({
+    name: z.string().min(1, 'Name is required').trim(),
+    email: z.string().email('This should be a valid email').min(1, 'Email is required').trim(),
+    role: z.string().min(1, 'Role is required'),
+});
+/**
+ * Modal form for inviting a new user — captures email, role, and optional team assignment.
+ *
+ * @category settings
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export const AddUserModal = ({ open, onClose, roles, onSubmit, isSubmitting = false, }) => {
+    const form = useForm({
+        resolver: zodResolver(addUserSchema),
+        defaultValues: { name: '', email: '', role: '' },
+        mode: 'onSubmit',
+    });
+    const handleSubmit = async (values) => {
+        await onSubmit({
+            name: values.name.trim(),
+            email: values.email.trim(),
+            role: values.role,
+        });
+        form.reset();
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: (isOpen) => !isOpen && onClose(), children: _jsx(DialogContent, { title: "Add New User", closable: true, onClose: onClose, closeOnClickOutside: false, children: _jsxs(Form, { form: form, className: "mdk-settings-add-user-modal__form", onSubmit: form.handleSubmit(handleSubmit), children: [_jsx(FormInput, { control: form.control, name: "name", label: "Name", placeholder: "Enter full name" }), _jsx(FormInput, { control: form.control, name: "email", label: "Email", type: "email", placeholder: "Enter email address" }), _jsx(FormSelect, { control: form.control, name: "role", label: "Assign Role", placeholder: "Select role", options: roles.map((r) => ({ value: r.value, label: r.label })), description: "Each new user must have a single role assigned at creation." }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "secondary", onClick: onClose, type: "button", children: "Cancel" }), _jsx(Button, { type: "submit", disabled: isSubmitting, children: isSubmitting ? 'Adding...' : 'Add User' })] })] }) }) }));
+};

package/dist/domain/components/settings/add-user-modal/index.d.ts

@@ -0,0 +1,2 @@
+export { AddUserModal } from './add-user-modal';
+export type { AddUserModalProps } from './add-user-modal';

package/dist/domain/components/settings/add-user-modal/index.js

@@ -0,0 +1 @@
+export { AddUserModal } from './add-user-modal';