@tetherto/mdk-react-devkit 0.0.0 → 0.12.1

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

@@ -0,0 +1,76 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export type LoaderProps = {
+    /**
+     * Size of each dot in pixels
+     * @default 10
+     */
+    size?: number;
+    /**
+     * Number of dots to display
+     * @default 5
+     */
+    count?: 3 | 5 | 7;
+    /**
+     * Color variant of the loader
+     * @default 'orange'
+     */
+    color?: 'red' | 'gray' | 'blue' | 'amber' | 'orange';
+    /**
+     * Render as an inline activity indicator instead of a block loading state.
+     *
+     * The default reserves a fixed 200px so a panel standing in for absent content does not
+     * collapse and then jump. Inline, that height is wrong: it strands the dots ~100px below the
+     * thing they belong to and centers them against surrounding text, which reads as frozen.
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * Custom className for the root element
+     */
+    className?: string;
+} & ComponentPropsWithoutRef<'div'>;
+/**
+ * Loader component - display pulsing dots animation
+ *
+ * @example
+ * ```tsx
+ * <Loader />
+ * <Loader size={12} count={5} color="orange" />
+ * <Loader color="blue" count={3} />
+ * <Loader inline size={6} count={3} />  // in a flow of content
+ * ```
+ * @category feedback
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const Loader: import("react").ForwardRefExoticComponent<{
+    /**
+     * Size of each dot in pixels
+     * @default 10
+     */
+    size?: number;
+    /**
+     * Number of dots to display
+     * @default 5
+     */
+    count?: 3 | 5 | 7;
+    /**
+     * Color variant of the loader
+     * @default 'orange'
+     */
+    color?: 'red' | 'gray' | 'blue' | 'amber' | 'orange';
+    /**
+     * Render as an inline activity indicator instead of a block loading state.
+     *
+     * The default reserves a fixed 200px so a panel standing in for absent content does not
+     * collapse and then jump. Inline, that height is wrong: it strands the dots ~100px below the
+     * thing they belong to and centers them against surrounding text, which reads as frozen.
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * Custom className for the root element
+     */
+    className?: string;
+} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export { Loader };

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../../utils';
+/**
+ * Loader component - display pulsing dots animation
+ *
+ * @example
+ * ```tsx
+ * <Loader />
+ * <Loader size={12} count={5} color="orange" />
+ * <Loader color="blue" count={3} />
+ * <Loader inline size={6} count={3} />  // in a flow of content
+ * ```
+ * @category feedback
+ * @domain generic
+ * @tier agent-ready
+ */
+const Loader = forwardRef(({ className, size = 10, count = 5, color = 'orange', inline = false, ...props }, ref) => {
+    const dots = Array.from({ length: count }, (_, i) => i);
+    return (_jsx("div", { ref: ref, className: cn('mdk-loader', inline && 'mdk-loader--inline', className), role: "status", "aria-live": "polite", "aria-label": "Loading", ...props, children: dots.map((index) => (_jsx("span", { className: cn('mdk-loader__dot', `mdk-loader__dot--${color}`), style: {
+                width: `${size}px`,
+                height: `${size}px`,
+                margin: `0 ${size / 1.5}px`,
+                animationDelay: `${index * 0.1}s`,
+            } }, index))) }));
+});
+Loader.displayName = 'Loader';
+export { Loader };

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

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for Loader.
+ */
+import { Loader } from '@tetherto/mdk-react-devkit';
+export const LoaderExample = () => (_jsxs("div", { className: "mdk-example-col", children: [_jsxs("div", { className: "mdk-example-row", children: [_jsx(Loader, {}), _jsx(Loader, { color: "blue" }), _jsx(Loader, { color: "gray" })] }), _jsxs("div", { className: "mdk-example-row", children: [_jsx(Loader, { count: 3, size: 8, color: "orange" }), _jsx(Loader, { count: 5, size: 10, color: "amber" }), _jsx(Loader, { count: 7, size: 12, color: "red" })] })] }));

package/dist/primitives/components/logs/activity-log-icon.d.ts

@@ -0,0 +1,8 @@
+import type { LogActivityIconProps } from './types';
+import type { JSX } from 'react';
+declare function LogActivityIcon({ status }: LogActivityIconProps): JSX.Element | null;
+declare namespace LogActivityIcon {
+    var displayName: string;
+}
+export { LogActivityIcon };
+export default LogActivityIcon;

package/dist/primitives/components/logs/activity-log-icon.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ACTIVITY_LOG_STATUS } from './constants';
+const ClockCircleOutlined = () => {
+    return (_jsxs("svg", { width: "1em", height: "1em", focusable: "false", "aria-hidden": "true", fill: "red", viewBox: "64 64 896 896", "data-icon": "clock-circle", children: [_jsx("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" }), _jsx("path", { d: "M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z" })] }));
+};
+const CheckCircleFilled = () => {
+    return (_jsx("svg", { width: "1em", height: "1em", focusable: "false", "aria-hidden": "true", fill: "green", viewBox: "64 64 896 896", "data-icon": "check-circle", children: _jsx("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z" }) }));
+};
+const STATUS_ICON_MAP = {
+    [ACTIVITY_LOG_STATUS.COMPLETED]: _jsx(CheckCircleFilled, {}),
+    [ACTIVITY_LOG_STATUS.PENDING]: _jsx(ClockCircleOutlined, {}),
+};
+/**
+ * Status icon used inside `<LogRow>` to indicate event severity (info / warning / error / success).
+ *
+ * @category monitoring
+ * @domain generic
+ * @tier agent-ready
+ */
+const LogActivityIcon = ({ status }) => {
+    return (status && STATUS_ICON_MAP[status]) || null;
+};
+LogActivityIcon.displayName = 'LogActivityIcon';
+export { LogActivityIcon };
+export default LogActivityIcon;

package/dist/primitives/components/logs/constants.d.ts

@@ -0,0 +1,11 @@
+export declare const INITIAL_SKELETON_ROWS = 4;
+export declare const SKELETON_HEIGHT = 30;
+export declare const EMPTY_MESSAGE_INCIDENTS = "No active incidents";
+export declare const ACTIVITY_LOG_STATUS: {
+    PENDING: string;
+    COMPLETED: string;
+};
+export declare const LOG_TYPES: {
+    INCIDENTS: string;
+    ACTIVITY: string;
+};

package/dist/primitives/components/logs/constants.js

@@ -0,0 +1,11 @@
+export const INITIAL_SKELETON_ROWS = 4;
+export const SKELETON_HEIGHT = 30;
+export const EMPTY_MESSAGE_INCIDENTS = 'No active incidents';
+export const ACTIVITY_LOG_STATUS = {
+    PENDING: 'Pending',
+    COMPLETED: 'Completed',
+};
+export const LOG_TYPES = {
+    INCIDENTS: 'Incidents',
+    ACTIVITY: 'Activity',
+};

package/dist/primitives/components/logs/log-dot.d.ts

@@ -0,0 +1,8 @@
+import type { LogDotProps } from './types';
+import type { JSX } from 'react';
+declare function LogDot({ type, status }: LogDotProps): JSX.Element | null;
+declare namespace LogDot {
+    var displayName: string;
+}
+export { LogDot };
+export default LogDot;

package/dist/primitives/components/logs/log-dot.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LOG_TYPES } from './constants';
+import { cn } from '../../utils';
+import LogActivityIcon from './activity-log-icon';
+const ALERT_SEVERITY_TYPES = {
+    CRITICAL: 'Critical',
+    HIGH: 'High',
+    MEDIUM: 'Medium',
+};
+const STATUS_CLASS_MAP = {
+    [ALERT_SEVERITY_TYPES.CRITICAL]: 'mdk-logs-card__status-icon--critical',
+    [ALERT_SEVERITY_TYPES.HIGH]: 'mdk-logs-card__status-icon--high',
+    [ALERT_SEVERITY_TYPES.MEDIUM]: 'mdk-logs-card__status-icon--medium',
+};
+const getStatusModifier = (status) => {
+    return (status && STATUS_CLASS_MAP[status]) || '';
+};
+/**
+ * Coloured dot used to mark a log event's severity or category inline with the row.
+ *
+ * @category monitoring
+ * @domain generic
+ * @tier agent-ready
+ */
+const LogDot = ({ type, status }) => {
+    const renderMap = {
+        [LOG_TYPES.INCIDENTS]: (_jsx("div", { className: cn('mdk-logs-card__status-icon', getStatusModifier(status)) })),
+        [LOG_TYPES.ACTIVITY]: _jsx(LogActivityIcon, { status: status }),
+    };
+    return renderMap[type] ?? null;
+};
+LogDot.displayName = 'LogDot';
+export { LogDot };
+export default LogDot;

package/dist/primitives/components/logs/log-item.d.ts

@@ -0,0 +1,8 @@
+import type { LogItemProps } from './types';
+import type { JSX } from 'react';
+declare function LogItem({ data, onLogClicked }: LogItemProps): JSX.Element;
+declare namespace LogItem {
+    var displayName: string;
+}
+export { LogItem };
+export default LogItem;

package/dist/primitives/components/logs/log-item.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RightNavigateIcon } from '../icons';
+/**
+ * Compact log-line element rendering a single event with optional icon, timestamp, and message.
+ *
+ * @category monitoring
+ * @domain generic
+ * @tier agent-ready
+ */
+const LogItem = ({ data, onLogClicked }) => {
+    const { title, subtitle, body, uuid } = data;
+    const handleClick = () => {
+        onLogClicked?.(uuid);
+    };
+    const bodyItems = body?.split('|') ?? [];
+    return (_jsx("div", { className: "mdk-logs-card__container", children: _jsxs("div", { className: "mdk-logs-card__log-inner-container", onClick: handleClick, children: [_jsxs("div", { className: "mdk-logs-card__data-container", children: [_jsx("div", { className: "mdk-logs-card__header-container", children: _jsx("div", { className: "mdk-logs-card__title-text", children: title }) }), _jsx("div", { className: "mdk-logs-card__subtitle-text", title: subtitle, children: subtitle }), _jsx("div", { className: "mdk-logs-card__body-text", children: bodyItems.map((item, index) => (_jsx("div", { children: item }, `${uuid}-${index}`))) })] }), onLogClicked && (_jsx("div", { className: "mdk-logs-card__icon-wrapper", children: _jsx(RightNavigateIcon, {}) }))] }) }));
+};
+LogItem.displayName = 'LogItem';
+export { LogItem };
+export default LogItem;

package/dist/primitives/components/logs/log-row.d.ts

@@ -0,0 +1,8 @@
+import type { LogRowProps } from './types';
+import type { JSX } from 'react';
+declare function LogRow({ style, log, onLogClicked, type }: LogRowProps): JSX.Element;
+declare namespace LogRow {
+    var displayName: string;
+}
+export { LogRow };
+export default LogRow;

package/dist/primitives/components/logs/log-row.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import LogDot from './log-dot';
+import LogItem from './log-item';
+/**
+ * Single row of a logs feed — composes the dot/icon, timestamp, and message into one entry.
+ *
+ * @category monitoring
+ * @domain generic
+ * @tier agent-ready
+ */
+const LogRow = ({ style, log, onLogClicked, type }) => (_jsxs("div", { className: "mdk-logs-card__row-container", style: { ...style }, children: [_jsx(LogDot, { status: log.status, type: type }), _jsx(LogItem, { data: log, onLogClicked: onLogClicked })] }));
+LogRow.displayName = 'LogRow';
+export { LogRow };
+export default LogRow;

package/dist/primitives/components/logs/logs-card.d.ts

@@ -0,0 +1,8 @@
+import type { LogsCardProps } from './types';
+import type { JSX } from 'react';
+declare function LogsCard({ type, label, pagination, onLogClicked, logsData, isDark, isLoading, skeletonRows, emptyMessage, }: LogsCardProps): JSX.Element;
+declare namespace LogsCard {
+    var displayName: string;
+}
+export { LogsCard };
+export default LogsCard;

package/dist/primitives/components/logs/logs-card.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EMPTY_MESSAGE_INCIDENTS, INITIAL_SKELETON_ROWS, SKELETON_HEIGHT } from './constants';
+import LogRow from './log-row';
+import { cn } from '../../utils';
+import { LabeledCard } from '../labeled-card';
+import { Pagination } from '../pagination';
+import { SkeletonBlock } from '../skeleton';
+import { EmptyState } from '../empty-state';
+/**
+ * Card wrapper for a vertically scrolling logs feed with a sticky header.
+ *
+ * @category monitoring
+ * @domain generic
+ * @tier agent-ready
+ */
+const LogsCard = ({ type, label, pagination, onLogClicked, logsData = [], isDark = false, isLoading = false, skeletonRows = INITIAL_SKELETON_ROWS, emptyMessage = EMPTY_MESSAGE_INCIDENTS, }) => {
+    const isEmpty = !logsData.length;
+    const isPaginationHidden = pagination?.current === 1 || isEmpty;
+    const renderSkeleton = () => (_jsx("div", { className: "mdk-logs-card__skeleton-row", children: Array.from({ length: skeletonRows }).map((_, index) => (_jsx(SkeletonBlock, { height: SKELETON_HEIGHT }, index))) }));
+    const renderEmptyState = () => (_jsx("div", { className: "mdk-logs-card__empty", children: _jsx(EmptyState, { description: emptyMessage }) }));
+    const renderRows = () => logsData.map((log, index) => (_jsx(LogRow, { log: log, type: type || '', onLogClicked: onLogClicked }, log?.uuid != null ? `${log.uuid}-${index}` : index)));
+    return (_jsx(LabeledCard, { label: label, isDark: isDark, children: isLoading ? (renderSkeleton()) : (_jsxs("div", { className: "mdk-logs-card__inner-container", children: [_jsx("div", { className: cn('mdk-logs-card__list-container', isEmpty && 'mdk-logs-card__list-container--empty'), children: isPaginationHidden ? renderEmptyState() : renderRows() }), pagination && !isPaginationHidden && (_jsx(Pagination, { total: pagination.total, current: pagination.current, pageSize: pagination.pageSize, className: "mdk-logs-card__pagination", onChange: pagination.handlePaginationChange }))] })) }));
+};
+LogsCard.displayName = 'LogsCard';
+export { LogsCard };
+export default LogsCard;

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

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

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

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for LogsCard (and supporting log components).
+ */
+import { useState } from 'react';
+import { LogsCard } from '@tetherto/mdk-react-devkit';
+const INCIDENT_LOGS = [
+    {
+        uuid: '1',
+        title: 'High temperature detected',
+        subtitle: 'Miner S19-042 · Rack 3',
+        body: 'Chip temp: 98°C|Ambient: 42°C',
+        status: 'Critical',
+    },
+    {
+        uuid: '2',
+        title: 'Hash rate drop',
+        subtitle: 'Miner S19-017 · Rack 1',
+        body: 'Expected: 100 TH/s|Actual: 62 TH/s',
+        status: 'High',
+    },
+    {
+        uuid: '3',
+        title: 'Pool connection unstable',
+        subtitle: 'Pool Manager',
+        body: 'Reconnections: 4 in last 15 min',
+        status: 'Medium',
+    },
+];
+const ACTIVITY_LOGS = [
+    {
+        uuid: '4',
+        title: 'Firmware update completed',
+        subtitle: '12 miners · Rack 2',
+        body: 'Version: 2.1.4',
+        status: 'Success',
+    },
+    {
+        uuid: '5',
+        title: 'Miner restarted',
+        subtitle: 'Miner A1346-008',
+        body: 'Reason: Manual restart',
+        status: 'Info',
+    },
+];
+export const LogsExample = () => {
+    const [page, setPage] = useState(2);
+    return (_jsxs("div", { className: "mdk-example-row", style: { display: 'flex', flexDirection: 'column', gap: 24 }, children: [_jsx(LogsCard, { label: "Recent Incidents", type: "Incidents", logsData: INCIDENT_LOGS, pagination: {
+                    current: page,
+                    total: 30,
+                    pageSize: 3,
+                    handlePaginationChange: setPage,
+                }, onLogClicked: (uuid) => console.warn('clicked', uuid) }), _jsx(LogsCard, { label: "Activity Log", type: "Activity", logsData: ACTIVITY_LOGS }), _jsx(LogsCard, { label: "Loading\u2026", type: "Incidents", isLoading: true, skeletonRows: 4 }), _jsx(LogsCard, { label: "No Incidents", type: "Incidents", logsData: [], emptyMessage: "All systems normal" })] }));
+};

package/dist/primitives/components/logs/types.d.ts

@@ -0,0 +1,81 @@
+import type { CSSProperties } from 'react';
+export type LogData = {
+    /** Unique identifier */
+    uuid: string;
+    /** Body text; `|`-separated values are split into separate lines */
+    body: string;
+    /** Primary text */
+    title: string;
+    /** Severity / status string (`'Critical'`, `'High'`, `'Medium'`, activity status, etc.) */
+    status: string;
+    /** Secondary text (truncated with `title` tooltip) */
+    subtitle: string;
+};
+export type LogRowProps = {
+    /** Log entry data */
+    log: LogData;
+    /** Log type (controls dot appearance) */
+    type: string;
+    /** Inline style for the row container */
+    style?: CSSProperties;
+    /** Click handler */
+    onLogClicked?: (uuid: string) => void;
+};
+export type LogPagination = {
+    /** Current page number */
+    current: number;
+    /** Total number of items */
+    total: number;
+    /** Items per page */
+    pageSize: number;
+    /** Fired when the user changes the page */
+    handlePaginationChange: (page: number) => void;
+};
+export type LogsCardProps = Partial<{
+    /** Log type (`'Incidents'` or `'Activity'`); controls the `LogDot` appearance */
+    type: string;
+    /** Card header label */
+    label: string;
+    /**
+     * Applies dark card theme
+     * @default false
+     */
+    isDark: boolean;
+    /**
+     * Shows skeleton rows while loading
+     * @default false
+     */
+    isLoading: boolean;
+    /**
+     * Array of log entries to display
+     * @default []
+     */
+    logsData: LogData[];
+    /**
+     * Message shown when `logsData` is empty
+     * @default 'No active incidents'
+     */
+    emptyMessage: string;
+    /**
+     * Number of skeleton rows shown during loading
+     * @default 4
+     */
+    skeletonRows: number;
+    /** Pagination config; hides pagination when on page 1 or data is empty */
+    pagination: LogPagination;
+    /** Fired with the log UUID when a row is clicked */
+    onLogClicked: (uuid: string) => void;
+}>;
+export type LogDotProps = {
+    /** `'Incidents'` renders a colored circle; `'Activity'` renders an activity icon */
+    type: string;
+    /** Severity string for color mapping */
+    status: string;
+};
+export type LogItemProps = {
+    data: LogData;
+    onLogClicked?: (uuid: string) => void;
+};
+export type LogActivityIconProps = {
+    status: string;
+};

package/dist/primitives/components/logs/types.js

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

package/dist/primitives/components/mdk-wordmark/index.d.ts

@@ -0,0 +1,21 @@
+import type { JSX } from 'react';
+import './mdk-wordmark.scss';
+export type MdkWordmarkSize = 'sm' | 'md' | 'lg';
+export type MdkWordmarkProps = {
+    /**
+     * Visual size of the wordmark. `sm` ≈ 24px tall, `md` ≈ 32px, `lg` ≈ 64px
+     * @default 'md'
+     */
+    size?: MdkWordmarkSize;
+    /** Optional class hook on the outer `<svg>`. */
+    className?: string;
+    /**
+     * Accessible label
+     * @default 'MDK'
+     */
+    title?: string;
+};
+export declare function MdkWordmark({ size, className, title, }: MdkWordmarkProps): JSX.Element;
+export declare namespace MdkWordmark {
+    var displayName: string;
+}

package/dist/primitives/components/mdk-wordmark/index.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../utils';
+const SIZE_TO_HEIGHT = {
+    sm: 24,
+    md: 32,
+    lg: 64,
+};
+/**
+ * MDK wordmark — the canonical brand lockup, rendered as inline SVG so it
+ * tints to `currentColor`. Use this in `<AppHeader>` (via the `logo` slot)
+ * or anywhere else the brand should appear.
+ *
+ * @category branding
+ * @domain generic
+ * @tier agent-ready
+ *
+ * @example
+ * ```tsx
+ * <MdkWordmark size="md" />
+ * ```
+ */
+export const MdkWordmark = ({ size = 'md', className, title = 'MDK', }) => {
+    const height = SIZE_TO_HEIGHT[size];
+    // viewBox preserves the proportions from the original SignIn wordmark
+    // (500 × 112 ≈ ~4.46:1). At 32px height this renders ~143px wide.
+    return (_jsxs("svg", { className: cn('mdk-wordmark', `mdk-wordmark--${size}`, className), viewBox: "0 0 500 112", role: "img", "aria-label": title, height: height, children: [_jsx("title", { children: title }), _jsx("text", { x: "50%", y: "50%", dominantBaseline: "central", textAnchor: "middle", fontFamily: "JetBrains Mono, ui-monospace, monospace", fontWeight: "800", fontSize: "96", letterSpacing: "6", fill: "currentColor", children: "MDK" })] }));
+};
+MdkWordmark.displayName = 'MdkWordmark';

package/dist/primitives/components/mdk-wordmark/mdk-wordmark.example.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Three sizes of the MDK wordmark, tinting to `currentColor`.
+ */
+export declare const MdkWordmarkExample: () => React.ReactNode;

package/dist/primitives/components/mdk-wordmark/mdk-wordmark.example.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MdkWordmark } from './index';
+/**
+ * Three sizes of the MDK wordmark, tinting to `currentColor`.
+ */
+export const MdkWordmarkExample = () => (_jsxs("div", { className: "mdk-wordmark-example", children: [_jsx(MdkWordmark, { size: "sm" }), _jsx(MdkWordmark, { size: "md" }), _jsx(MdkWordmark, { size: "lg" })] }));

package/dist/primitives/components/min-max-avg/index.d.ts

@@ -0,0 +1,6 @@
+import type { MinMaxAvgProps } from './types';
+export declare function MinMaxAvg({ min, max, avg, className }: MinMaxAvgProps): import("react").JSX.Element | null;
+export declare namespace MinMaxAvg {
+    var displayName: string;
+}
+export type { MinMaxAvgProps } from './types';

package/dist/primitives/components/min-max-avg/index.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../utils';
+const ITEMS = [
+    { key: 'min', label: 'Min' },
+    { key: 'max', label: 'Max' },
+    { key: 'avg', label: 'Avg' },
+];
+/**
+ * Min / Max / Avg summary row with consistent MDK label and value styling.
+ *
+ * @example
+ * ```tsx
+ * <MinMaxAvg min="10 TH/s" max="100 TH/s" avg="55 TH/s" />
+ * ```
+ *
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ */
+export const MinMaxAvg = ({ min, max, avg, className }) => {
+    const values = { min, max, avg };
+    const visible = ITEMS.filter(({ key }) => {
+        const value = values[key];
+        return value !== undefined && value !== '';
+    });
+    if (visible.length === 0)
+        return null;
+    return (_jsx("div", { className: cn('mdk-min-max-avg', className), role: "group", "aria-label": "Chart statistics", children: visible.map(({ key, label }) => (_jsxs("span", { className: "mdk-min-max-avg__item", children: [_jsx("span", { className: "mdk-min-max-avg__label", children: label }), _jsx("span", { className: "mdk-min-max-avg__value", children: values[key] })] }, key))) }));
+};
+MinMaxAvg.displayName = 'MinMaxAvg';

package/dist/primitives/components/min-max-avg/min-max-avg.example.d.ts

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

package/dist/primitives/components/min-max-avg/min-max-avg.example.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Runnable example for MinMaxAvg.
+ */
+import { MinMaxAvg } from './index';
+export const MinMaxAvgExample = () => (_jsx(MinMaxAvg, { min: "65 TH/s", max: "80 TH/s", avg: "72.6 TH/s" }));

package/dist/primitives/components/min-max-avg/types.d.ts

@@ -0,0 +1,12 @@
+export type MinMaxAvgValues = Partial<{
+    /** Minimum value (hidden if empty) */
+    min: string;
+    /** Maximum value (hidden if empty) */
+    max: string;
+    /** Average value (hidden if empty) */
+    avg: string;
+}>;
+export type MinMaxAvgProps = MinMaxAvgValues & {
+    /** Additional root class */
+    className?: string;
+};

package/dist/primitives/components/min-max-avg/types.js

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

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

@@ -0,0 +1,31 @@
+import { type HTMLAttributes, type ReactElement, type ReactNode } from 'react';
+type MosaicProps = {
+    /** Grid area layout. 1D: each string is a row of space-separated area names. 2D: each inner array is a row */
+    template: string[] | string[][];
+    /**
+     * CSS gap between grid cells
+     * @default '12px'
+     */
+    gap?: string;
+    /**
+     * CSS height for each row
+     * @default 'auto'
+     */
+    rowHeight?: string;
+    /** Custom `grid-template-columns` value or array of track sizes. Defaults to equal-width fractional tracks. */
+    columns?: string | string[];
+    /** `Mosaic.Item` elements */
+    children: ReactNode;
+    /** Additional class for the grid element */
+    className?: string;
+};
+export declare function Mosaic({ template, gap, rowHeight, columns, children, className, }: MosaicProps): ReactElement;
+export declare namespace Mosaic {
+    export { MosaicItemComponent as Item };
+}
+declare const MosaicItemComponent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /** Grid area name (must match a name used in `template`) */
+    area?: string;
+    children?: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export {};