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

package/dist/domain/components/settings/rbac-control/rbac-control-settings.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Button, Input, SimpleTooltip, Spinner } from '../../../../primitives/index.js';
+import { getRoleBadgeColors } from '../../../constants/role-colors.constants';
+import { formatLastActive, formatRoleLabel } from '@tetherto/mdk-ui-foundation';
+import { AddUserModal } from '../add-user-modal';
+import { ChangeConfirmationModal } from '../change-confirmation-modal';
+import { ManageUserModal } from '../manage-user-modal';
+/**
+ * Settings panel listing roles and their permissions; supports editing role-permission grants.
+ *
+ * @category settings
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export const RBACControlSettings = ({ users, roles, rolePermissions, permissionLabels, canWrite, isLoading = false, onCreateUser, onUpdateUser, onDeleteUser, className, }) => {
+    const [searchQuery, setSearchQuery] = useState('');
+    const [addModalOpen, setAddModalOpen] = useState(false);
+    const [manageUser, setManageUser] = useState(null);
+    const [deleteUser, setDeleteUser] = useState(null);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const filteredUsers = useMemo(() => users.filter((user) => {
+        if (!searchQuery)
+            return true;
+        const query = searchQuery.toLowerCase();
+        return (user.name?.toLowerCase().includes(query) ||
+            user.email.toLowerCase().includes(query) ||
+            user.role.toLowerCase().includes(query));
+    }), [users, searchQuery]);
+    const handleCreateUser = async (data) => {
+        setIsSubmitting(true);
+        try {
+            await onCreateUser(data);
+            setAddModalOpen(false);
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    };
+    const handleUpdateUser = async (data) => {
+        setIsSubmitting(true);
+        try {
+            await onUpdateUser(data);
+            setManageUser(null);
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    };
+    const handleDeleteConfirm = async () => {
+        if (!deleteUser)
+            return;
+        await onDeleteUser(deleteUser.id);
+        setDeleteUser(null);
+    };
+    if (isLoading)
+        return _jsx(Spinner, {});
+    return (_jsxs("div", { className: `mdk-settings-rbac ${className || ''}`, children: [_jsx("p", { className: "mdk-settings-rbac__description", children: "Manage user access across the organization" }), _jsxs("div", { className: "mdk-settings-rbac__actions-row", children: [_jsx("div", { className: "mdk-settings-rbac__search", children: _jsx(Input, { placeholder: "Search users...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), variant: "search" }) }), canWrite && (_jsx(Button, { variant: "primary", onClick: () => setAddModalOpen(true), children: "Add User" }))] }), _jsxs("div", { className: "mdk-settings-rbac__table", children: [_jsx("div", { className: "mdk-settings-rbac__table-header", children: _jsxs("div", { className: "mdk-settings-rbac__table-header-row", children: [_jsx("div", { className: "mdk-settings-rbac__table-header-cell", children: "User" }), _jsx("div", { className: "mdk-settings-rbac__table-header-cell", children: "Email" }), _jsx("div", { className: "mdk-settings-rbac__table-header-cell", children: "Assigned Roles" }), _jsx("div", { className: "mdk-settings-rbac__table-header-cell", children: "Last Active" }), _jsx("div", { className: "mdk-settings-rbac__table-header-cell mdk-settings-rbac__table-header-cell--center", children: "Manage" }), _jsx("div", { className: "mdk-settings-rbac__table-header-cell mdk-settings-rbac__table-header-cell--right", children: "Delete" })] }) }), _jsx("div", { className: "mdk-settings-rbac__table-body", children: filteredUsers.map((user) => {
+                            const { color, bgColor } = getRoleBadgeColors(user.role);
+                            return (_jsxs("div", { className: "mdk-settings-rbac__table-row", children: [_jsx(SimpleTooltip, { content: user.name || 'N/A', children: _jsx("div", { className: "mdk-settings-rbac__table-cell", children: user.name || 'N/A' }) }), _jsx(SimpleTooltip, { content: user.email, children: _jsx("div", { className: "mdk-settings-rbac__table-cell", children: user.email }) }), _jsx("div", { className: "mdk-settings-rbac__table-cell", children: _jsx("span", { className: "mdk-settings-rbac__role-badge", style: { color, backgroundColor: bgColor }, children: formatRoleLabel(user.role) }) }), _jsx("div", { className: "mdk-settings-rbac__table-cell", children: formatLastActive(user.lastActive || user.last_login || undefined) }), _jsx("div", { className: "mdk-settings-rbac__table-cell mdk-settings-rbac__table-cell--center", children: canWrite && (_jsx("button", { type: "button", className: "mdk-settings-rbac__manage-btn", onClick: () => setManageUser(user), children: "Manage User" })) }), _jsx("div", { className: "mdk-settings-rbac__table-cell mdk-settings-rbac__table-cell--right", children: canWrite && (_jsx("button", { type: "button", className: "mdk-settings-rbac__delete-btn", onClick: () => setDeleteUser(user), children: "Delete" })) })] }, user.id));
+                        }) })] }), addModalOpen && (_jsx(AddUserModal, { open: true, onClose: () => setAddModalOpen(false), roles: roles, onSubmit: handleCreateUser, isSubmitting: isSubmitting })), manageUser && (_jsx(ManageUserModal, { open: true, onClose: () => setManageUser(null), user: manageUser, roles: roles, rolePermissions: rolePermissions, permissionLabels: permissionLabels, onSubmit: handleUpdateUser, isSubmitting: isSubmitting })), deleteUser && (_jsx(ChangeConfirmationModal, { open: true, title: `Delete ${deleteUser.email}?`, onClose: () => setDeleteUser(null), onConfirm: handleDeleteConfirm, confirmText: "Delete", destructive: true, children: "Are you sure you want to delete this user? This action is permanent and cannot be undone." }))] }));
+};

package/dist/domain/components/settings/settings-dashboard/index.d.ts

@@ -0,0 +1,2 @@
+export { SettingsDashboard } from './settings-dashboard';
+export type { SettingsDashboardProps } from './settings-dashboard';

package/dist/domain/components/settings/settings-dashboard/index.js

@@ -0,0 +1 @@
+export { SettingsDashboard } from './settings-dashboard';

package/dist/domain/components/settings/settings-dashboard/settings-dashboard.d.ts

@@ -0,0 +1,34 @@
+import type { ActionButtonProps } from '../../../../primitives/index.js';
+import type { FeatureFlagsSettingsProps } from '../feature-flags';
+import type { HeaderControlsSettingsProps } from '../header-controls';
+import type { ImportExportSettingsProps } from '../import-export';
+import type { RBACControlSettingsProps } from '../rbac-control';
+import './settings-dashboard.scss';
+export type SettingsDashboardProps = {
+    /** Danger-zone action buttons (reset, delete) */
+    dangerActions?: ActionButtonProps[];
+    /** Props forwarded to `HeaderControlsSettings` */
+    headerControlsProps?: HeaderControlsSettingsProps;
+    /** Props forwarded to `RBACControlSettings` */
+    rbacControlProps?: RBACControlSettingsProps;
+    /** Props forwarded to `ImportExportSettings` */
+    importExportProps?: ImportExportSettingsProps;
+    /** Props forwarded to `FeatureFlagsSettings` */
+    featureFlagsProps?: FeatureFlagsSettingsProps;
+    /**
+     * Whether to show the feature-flags section
+     * @default false
+     */
+    showFeatureFlags?: boolean;
+    /** Additional CSS class */
+    className?: string;
+};
+/**
+ * Top-level settings landing page — composes the per-section settings cards in a single grid.
+ *
+ * @category settings
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export declare const SettingsDashboard: ({ dangerActions, headerControlsProps, rbacControlProps, importExportProps, featureFlagsProps, showFeatureFlags, className, }: SettingsDashboardProps) => import("react").JSX.Element;

package/dist/domain/components/settings/settings-dashboard/settings-dashboard.example.d.ts

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

package/dist/domain/components/settings/settings-dashboard/settings-dashboard.example.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SettingsDashboard } from '@tetherto/mdk-react-devkit';
+export const SettingsDashboardExample = () => (_jsx("div", { className: "mdk-example-row", children: _jsx(SettingsDashboard, { showFeatureFlags: false }) }));

package/dist/domain/components/settings/settings-dashboard/settings-dashboard.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Accordion, ActionButton } from '../../../../primitives/index.js';
+import { FeatureFlagsSettings } from '../feature-flags';
+import { HeaderControlsSettings } from '../header-controls';
+import { ImportExportSettings } from '../import-export';
+import { RBACControlSettings } from '../rbac-control';
+/**
+ * Top-level settings landing page — composes the per-section settings cards in a single grid.
+ *
+ * @category settings
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export const SettingsDashboard = ({ dangerActions, headerControlsProps, rbacControlProps, importExportProps, featureFlagsProps, showFeatureFlags = false, className, }) => (_jsxs("div", { className: `mdk-settings-dashboard ${className || ''}`, children: [_jsx("h2", { className: "mdk-settings-dashboard__title", children: "Settings" }), dangerActions && dangerActions.length > 0 && (_jsx("div", { className: "mdk-settings-dashboard__danger-actions", children: dangerActions.map((action) => (_jsx(ActionButton, { ...action }, action.label))) })), _jsxs("div", { className: "mdk-settings-dashboard__accordions", children: [headerControlsProps && (_jsx(Accordion, { title: "Header Controls", isOpened: false, children: _jsx(HeaderControlsSettings, { ...headerControlsProps }) })), rbacControlProps && (_jsx(Accordion, { title: "RBAC Control", isOpened: false, children: _jsx(RBACControlSettings, { ...rbacControlProps }) })), importExportProps && (_jsx(Accordion, { title: "Import / Export Settings", isOpened: false, children: _jsx(ImportExportSettings, { ...importExportProps }) })), showFeatureFlags && featureFlagsProps && (_jsx(Accordion, { title: "Feature Flags (Developer Mode)", isOpened: false, children: _jsx(FeatureFlagsSettings, { ...featureFlagsProps }) }))] })] }));

package/dist/domain/components/stat-cards/index.d.ts

@@ -0,0 +1,2 @@
+export * from './miner-metric-card/miner-metric-card';
+export * from './single-stat-card/single-stat-card';

package/dist/domain/components/stat-cards/index.js

@@ -0,0 +1,2 @@
+export * from './miner-metric-card/miner-metric-card';
+export * from './single-stat-card/single-stat-card';

package/dist/domain/components/stat-cards/miner-metric-card/miner-metric-card.d.ts

@@ -0,0 +1,49 @@
+import type { ReactElement } from 'react';
+import './miner-metric-card.scss';
+export type StatItem = {
+    /** In `primaryStats`, selects the slot and must be exactly 'Efficiency', 'Hash rate', 'Temperature', 'Frequency' or 'Consumption'; in `secondaryStats`, the label (and React key) */
+    name?: string;
+    /** Displayed value; Efficiency only shows when it is a number */
+    value?: number | string;
+    /** Unit appended after the value in `primaryStats`; ignored in `secondaryStats`, so fold it into `value` there */
+    unit?: string;
+};
+type MinerMetricCardProps = {
+    /** Primary statistics (efficiency, hashrate, temperature, frequency, consumption) */
+    primaryStats: StatItem[];
+    /** Secondary statistics to display in grid */
+    secondaryStats: StatItem[];
+    /**
+     * Whether to show secondary stats section
+     * @default true
+     */
+    showSecondaryStats: boolean;
+};
+/**
+ * Single-metric card (hashrate, temperature, or power) for one miner with sparkline and delta.
+ *
+ * Displays key metrics for a miner including:
+ * - Efficiency (fixed position top-right)
+ * - Hash rate, Temperature
+ * - Frequency, Consumption
+ * - Optional secondary stats in grid
+ *
+ * @example
+ * ```tsx
+ * <MinerMetricCard
+ *   primaryStats={[
+ *     { name: 'Hash rate', value: 95.5, unit: 'TH/s' },
+ *     { name: 'Temperature', value: 65, unit: '°C' }
+ *   ]}
+ *   secondaryStats={[
+ *     { name: 'Fan Speed', value: '6000 RPM' }
+ *   ]}
+ * />
+ * ```
+ * @category widgets
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export declare const MinerMetricCard: ({ primaryStats, secondaryStats, showSecondaryStats, }: Partial<MinerMetricCardProps>) => ReactElement;
+export {};

package/dist/domain/components/stat-cards/miner-metric-card/miner-metric-card.example.d.ts

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

package/dist/domain/components/stat-cards/miner-metric-card/miner-metric-card.example.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MinerMetricCard } from '@tetherto/mdk-react-devkit';
+export const MinerMetricCardExample = () => (_jsx("div", { className: "mdk-example-row", children: _jsx(MinerMetricCard, { primaryStats: [
+            { name: 'Efficiency', value: 28.3, unit: 'J/TH' },
+            { name: 'Hash rate', value: 95.5, unit: 'TH/s' },
+            { name: 'Temperature', value: 65, unit: '°C' },
+            { name: 'Frequency', value: 620, unit: 'MHz' },
+            { name: 'Consumption', value: 3.25, unit: 'kW' },
+        ], secondaryStats: [{ name: 'Fan speed', value: 4200, unit: 'RPM' }], showSecondaryStats: true }) }));

package/dist/domain/components/stat-cards/miner-metric-card/miner-metric-card.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatNumber, UNITS } from '../../../../primitives/index.js';
+const labels = {
+    efficiency: 'Efficiency',
+    hashRate: 'Hash rate',
+    temperature: 'Temperature',
+    frequency: 'Frequency',
+    consumption: 'Consumption',
+};
+/**
+ * Get stat by label name
+ */
+const getStatByLabel = (stats, label) => {
+    return stats?.find(({ name }) => name === label);
+};
+/**
+ * Single-metric card (hashrate, temperature, or power) for one miner with sparkline and delta.
+ *
+ * Displays key metrics for a miner including:
+ * - Efficiency (fixed position top-right)
+ * - Hash rate, Temperature
+ * - Frequency, Consumption
+ * - Optional secondary stats in grid
+ *
+ * @example
+ * ```tsx
+ * <MinerMetricCard
+ *   primaryStats={[
+ *     { name: 'Hash rate', value: 95.5, unit: 'TH/s' },
+ *     { name: 'Temperature', value: 65, unit: '°C' }
+ *   ]}
+ *   secondaryStats={[
+ *     { name: 'Fan Speed', value: '6000 RPM' }
+ *   ]}
+ * />
+ * ```
+ * @category widgets
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export const MinerMetricCard = ({ primaryStats, secondaryStats, showSecondaryStats = true, }) => {
+    const efficiencyValue = getStatByLabel(primaryStats, labels.efficiency);
+    const hashRateValue = getStatByLabel(primaryStats, labels.hashRate);
+    const temperatureValue = getStatByLabel(primaryStats, labels.temperature);
+    const frequencyValue = getStatByLabel(primaryStats, labels.frequency);
+    const consumptionValue = getStatByLabel(primaryStats, labels.consumption);
+    // Frequency to 2 decimals; a missing or non-numeric value renders the formatter's fallback
+    const frequency = typeof frequencyValue?.value === 'number'
+        ? Math.round(frequencyValue.value * 100) / 100
+        : frequencyValue?.value;
+    const formattedFrequency = formatNumber(frequency);
+    // Format consumption with 3 decimal places
+    const formattedConsumptionValue = formatNumber(consumptionValue?.value, {
+        maximumFractionDigits: 3,
+        minimumFractionDigits: consumptionValue?.value ? 3 : 0,
+    });
+    // Show efficiency if it exists and is a number
+    const showEfficiency = efficiencyValue &&
+        efficiencyValue.value !== undefined &&
+        typeof efficiencyValue.value === 'number';
+    return (_jsxs("div", { className: "mdk-miner-metric-card", "data-testid": "card", children: [_jsx("div", { className: "mdk-miner-metric-card__title", children: "Miner Metrics" }), _jsxs("div", { className: "mdk-miner-metric-card__body", children: [showEfficiency && (_jsxs("div", { className: "mdk-miner-metric-card__efficiency", children: [_jsx("div", { className: "mdk-miner-metric-card__label", children: labels.efficiency }), _jsx("div", { className: "mdk-miner-metric-card__value", children: `${formatNumber(efficiencyValue.value)} ${efficiencyValue.unit || ''}` })] })), _jsxs("div", { className: "mdk-miner-metric-card__content", children: [_jsxs("div", { className: "mdk-miner-metric-card__box", children: [_jsxs("div", { className: "mdk-miner-metric-card__item", children: [_jsx("div", { className: "mdk-miner-metric-card__label", children: labels.hashRate }), _jsx("div", { className: "mdk-miner-metric-card__value", children: hashRateValue ? `${hashRateValue.value || '-'} ${hashRateValue.unit}` : '-' })] }), _jsxs("div", { className: "mdk-miner-metric-card__item", children: [_jsx("div", { className: "mdk-miner-metric-card__label", children: labels.temperature }), _jsx("div", { className: "mdk-miner-metric-card__value", children: `${temperatureValue?.value || ''} ${temperatureValue?.unit || ''}` })] })] }), _jsxs("div", { className: "mdk-miner-metric-card__box", children: [_jsxs("div", { className: "mdk-miner-metric-card__item", children: [_jsx("div", { className: "mdk-miner-metric-card__label", children: labels.frequency }), _jsx("div", { className: "mdk-miner-metric-card__value", children: `${formattedFrequency || ''} ${frequencyValue?.unit || ''}` })] }), _jsxs("div", { className: "mdk-miner-metric-card__item", children: [_jsx("div", { className: "mdk-miner-metric-card__label", children: labels.consumption }), _jsx("div", { className: "mdk-miner-metric-card__value", children: `${formattedConsumptionValue || ''} ${consumptionValue?.value === 0 ? UNITS.ENERGY_KWH : consumptionValue?.unit || ''}` })] })] }), showSecondaryStats && secondaryStats && secondaryStats.length > 0 && (_jsx("div", { className: "mdk-miner-metric-card__grid-box", children: secondaryStats.map(({ name, value }) => (_jsxs("div", { className: "mdk-miner-metric-card__item", children: [_jsx("div", { className: "mdk-miner-metric-card__label", children: name }), _jsx("div", { className: "mdk-miner-metric-card__value", children: value })] }, name))) }))] })] })] }));
+};

package/dist/domain/components/stat-cards/single-stat-card/single-stat-card.d.ts

@@ -0,0 +1,69 @@
+import type { ReactNode } from 'react';
+import './single-stat-card.scss';
+export type SingleStatCardVariant = 'primary' | 'secondary' | 'tertiary' | 'highlighted' | 'compact';
+type SingleStatCardProps = {
+    /** Stat name/label */
+    name?: string;
+    /**
+     * Subtitle text
+     * @default ''
+     */
+    subtitle?: string;
+    /**
+     * Stat value
+     * @default null
+     */
+    value?: number | string | null;
+    /**
+     * Unit of measurement
+     * @default ''
+     */
+    unit?: string;
+    /**
+     * Color for flash/border
+     * @default 'inherit'
+     */
+    color?: string;
+    /**
+     * Enable flash animation
+     * @default false
+     */
+    flash?: boolean;
+    /**
+     * Enable superflash animation (faster)
+     * @default false
+     */
+    superflash?: boolean;
+    /**
+     * Card variant. `compact` is a centred name-over-value tile in muted text, for
+     * dense grids of secondary metrics
+     * @default "primary"
+     */
+    variant?: SingleStatCardVariant;
+    /**
+     * Row layout
+     * @default false
+     */
+    row?: boolean;
+    /** Additional class for the root element */
+    className?: string;
+};
+/**
+ * Hero stat tile rendering one big number with a label and optional delta indicator.
+ *
+ * Displays a single statistic with optional animations and variants.
+ *
+ * @example
+ * ```tsx
+ * <SingleStatCard name="Temperature" value={42} unit="°C" />
+ * <SingleStatCard name="Hashrate" value="95.5" unit="TH/s" variant="secondary" />
+ * <SingleStatCard name="Uptime" value="99.8 %" variant="compact" />
+ * <SingleStatCard name="Alarm" value="Critical" color="red" flash />
+ * ```
+ * @category widgets
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export declare const SingleStatCard: ({ name, subtitle, value, unit, color, flash, superflash, variant, row, className, }: SingleStatCardProps) => ReactNode;
+export {};

package/dist/domain/components/stat-cards/single-stat-card/single-stat-card.example.d.ts

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

package/dist/domain/components/stat-cards/single-stat-card/single-stat-card.example.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SingleStatCard } from '@tetherto/mdk-react-devkit';
+export const SingleStatCardExample = () => (_jsxs("div", { className: "mdk-example-row", children: [_jsx(SingleStatCard, { name: "Hashrate", value: 95.5, unit: "TH/s", variant: "primary" }), _jsx(SingleStatCard, { name: "Efficiency", value: 28.3, unit: "J/TH", variant: "secondary" }), _jsx(SingleStatCard, { name: "Temperature", value: 65, unit: "\u00B0C", variant: "highlighted" }), _jsx(SingleStatCard, { name: "Consumption", value: 3250, unit: "W", variant: "tertiary" })] }));

package/dist/domain/components/stat-cards/single-stat-card/single-stat-card.js

@@ -0,0 +1,26 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn, formatValueUnit } from '../../../../primitives/index.js';
+const LONG_VALUE_THRESHOLD = 6; // chars
+/**
+ * Hero stat tile rendering one big number with a label and optional delta indicator.
+ *
+ * Displays a single statistic with optional animations and variants.
+ *
+ * @example
+ * ```tsx
+ * <SingleStatCard name="Temperature" value={42} unit="°C" />
+ * <SingleStatCard name="Hashrate" value="95.5" unit="TH/s" variant="secondary" />
+ * <SingleStatCard name="Uptime" value="99.8 %" variant="compact" />
+ * <SingleStatCard name="Alarm" value="Critical" color="red" flash />
+ * ```
+ * @category widgets
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export const SingleStatCard = ({ name, subtitle = '', value = null, unit = '', color = 'inherit', flash = false, superflash = false, variant = 'primary', row = false, className, }) => {
+    const valueFormatted = unit && value !== null ? formatValueUnit(value, unit) : value;
+    const isLongValue = String(value || '').length > LONG_VALUE_THRESHOLD;
+    const textContent = (_jsxs(_Fragment, { children: [_jsx("div", { className: "mdk-single-stat-card__name", children: name }), subtitle && _jsx("div", { className: "mdk-single-stat-card__subtitle", children: subtitle })] }));
+    return (_jsxs("div", { className: cn('mdk-single-stat-card', variant && `mdk-single-stat-card--${variant}`, flash && 'mdk-single-stat-card--flash', superflash && 'mdk-single-stat-card--superflash', row && 'mdk-single-stat-card--row', isLongValue && 'mdk-single-stat-card--long-value', className), style: { '--stat-color': color }, children: [variant === 'primary' || variant === 'compact' ? (textContent) : (_jsx("div", { className: "mdk-single-stat-card__text", children: textContent })), _jsx("div", { className: "mdk-single-stat-card__value", children: valueFormatted })] }));
+};

package/dist/domain/components/timeframe/report-time-frame-selector/index.d.ts

@@ -0,0 +1,4 @@
+export { ReportTimeFrameSelector } from './report-time-frame-selector';
+export type { ReportTimeFrameSelectorProps } from './report-time-frame-selector';
+export { useReportTimeFrameSelectorState } from './use-report-time-frame-selector-state';
+export type { ReportTimeFrameSelectorState } from './use-report-time-frame-selector-state';

package/dist/domain/components/timeframe/report-time-frame-selector/index.js

@@ -0,0 +1,2 @@
+export { ReportTimeFrameSelector } from './report-time-frame-selector';
+export { useReportTimeFrameSelectorState } from './use-report-time-frame-selector-state';

package/dist/domain/components/timeframe/report-time-frame-selector/report-time-frame-selector.d.ts

@@ -0,0 +1,12 @@
+import type { ReportTimeFrameSelectorState } from './use-report-time-frame-selector-state';
+import './report-time-frame-selector.scss';
+export type ReportTimeFrameSelectorProps = Pick<ReportTimeFrameSelectorState, 'presetTimeFrame' | 'dateRange' | 'setPresetTimeFrame' | 'setDateRange'>;
+/**
+ * Reporting-period selector with preset windows (1d / 7d / 30d / custom range).
+ *
+ * @category filters
+ * @domain financial-reporting
+ * @kernelCapability financial-reporting
+ * @tier agent-ready
+ */
+export declare const ReportTimeFrameSelector: ({ presetTimeFrame, dateRange, setPresetTimeFrame, setDateRange, }: ReportTimeFrameSelectorProps) => import("react").JSX.Element;

package/dist/domain/components/timeframe/report-time-frame-selector/report-time-frame-selector.example.d.ts

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

package/dist/domain/components/timeframe/report-time-frame-selector/report-time-frame-selector.example.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ReportTimeFrameSelector } from '@tetherto/mdk-react-devkit';
+export const ReportTimeFrameSelectorExample = () => {
+    const [preset, setPreset] = useState(30);
+    const now = new Date();
+    const [range, setRange] = useState([now, now]);
+    return (_jsx("div", { className: "mdk-example-row", children: _jsx(ReportTimeFrameSelector, { presetTimeFrame: preset, dateRange: range, setPresetTimeFrame: setPreset, setDateRange: setRange }) }));
+};

package/dist/domain/components/timeframe/report-time-frame-selector/report-time-frame-selector.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DateRangePicker, RadioCard, RadioGroup } from '../../../../primitives/index.js';
+import { endOfDay } from 'date-fns/endOfDay';
+import { startOfDay } from 'date-fns/startOfDay';
+const PRESET_OPTIONS = [
+    { label: '1D', value: 1 },
+    { label: '7D', value: 7 },
+    { label: '30D', value: 30 },
+];
+const CUSTOM = 'custom';
+/**
+ * Reporting-period selector with preset windows (1d / 7d / 30d / custom range).
+ *
+ * @category filters
+ * @domain financial-reporting
+ * @kernelCapability financial-reporting
+ * @tier agent-ready
+ */
+export const ReportTimeFrameSelector = ({ presetTimeFrame, dateRange, setPresetTimeFrame, setDateRange, }) => {
+    const radioValue = presetTimeFrame === null ? CUSTOM : String(presetTimeFrame);
+    const handleValueChange = (value) => {
+        setPresetTimeFrame(value === CUSTOM ? null : Number(value));
+    };
+    const handleDateRangeSelect = (selected) => {
+        if (!selected?.from)
+            return;
+        setDateRange([startOfDay(selected.from), endOfDay(selected.to ?? selected.from)]);
+    };
+    return (_jsxs("div", { className: "mdk-report-time-frame-selector", children: [_jsxs(RadioGroup, { value: radioValue, onValueChange: handleValueChange, orientation: "horizontal", noGap: true, children: [PRESET_OPTIONS.map(({ label, value }) => (_jsx(RadioCard, { value: String(value), label: label }, value))), _jsx(RadioCard, { value: CUSTOM, label: "Custom" })] }), presetTimeFrame === null && (_jsx(DateRangePicker, { selected: { from: dateRange[0], to: dateRange[1] }, onSelect: handleDateRangeSelect }))] }));
+};

package/dist/domain/components/timeframe/report-time-frame-selector/use-report-time-frame-selector-state.d.ts

@@ -0,0 +1,21 @@
+export type ReportTimeFrameSelectorState = {
+    start: Date;
+    end: Date;
+    /** Selected preset in days (`1`, `7`, `30`); `null` means the custom range is active */
+    presetTimeFrame: number | null;
+    /** Custom date range as a `[start, end]` tuple */
+    dateRange: [Date, Date];
+    /** Update the preset selection */
+    setPresetTimeFrame: (value: number | null) => void;
+    /** Update the custom date range */
+    setDateRange: (value: [Date, Date]) => void;
+};
+/**
+ * State hook backing the reporting time-frame selector — exposes the active window and setters.
+ *
+ * @category filters
+ * @domain financial-reporting
+ * @kernelCapability financial-reporting
+ * @tier agent-ready
+ */
+export declare const useReportTimeFrameSelectorState: () => ReportTimeFrameSelectorState;

package/dist/domain/components/timeframe/report-time-frame-selector/use-report-time-frame-selector-state.js

@@ -0,0 +1,28 @@
+import { endOfDay } from 'date-fns/endOfDay';
+import { endOfYesterday } from 'date-fns/endOfYesterday';
+import { startOfDay } from 'date-fns/startOfDay';
+import { startOfYesterday } from 'date-fns/startOfYesterday';
+import { sub } from 'date-fns/sub';
+import { useState } from 'react';
+/**
+ * State hook backing the reporting time-frame selector — exposes the active window and setters.
+ *
+ * @category filters
+ * @domain financial-reporting
+ * @kernelCapability financial-reporting
+ * @tier agent-ready
+ */
+export const useReportTimeFrameSelectorState = () => {
+    const [presetTimeFrame, setPresetTimeFrame] = useState(1);
+    const [dateRange, setDateRange] = useState([
+        startOfDay(sub(startOfYesterday(), { months: 1 })),
+        endOfYesterday(),
+    ]);
+    const [start, end] = (() => {
+        if (presetTimeFrame !== null) {
+            return [sub(startOfYesterday(), { days: presetTimeFrame - 1 }), endOfYesterday()];
+        }
+        return [startOfDay(dateRange[0]), endOfDay(dateRange[1])];
+    })();
+    return { start, end, presetTimeFrame, dateRange, setPresetTimeFrame, setDateRange };
+};

package/dist/domain/components/timeframe/timeframe-controls/index.d.ts

@@ -0,0 +1,5 @@
+export * from './timeframe-controls';
+export * from './timeframe-controls-week-content';
+export * from './timeframe-controls.helper';
+export * from './timeframe-controls.types';
+export * from './use-timeframe-controls';

package/dist/domain/components/timeframe/timeframe-controls/index.js

@@ -0,0 +1,5 @@
+export * from './timeframe-controls';
+export * from './timeframe-controls-week-content';
+export * from './timeframe-controls.helper';
+export * from './timeframe-controls.types';
+export * from './use-timeframe-controls';

package/dist/domain/components/timeframe/timeframe-controls/timeframe-controls-week-content.d.ts

@@ -0,0 +1,27 @@
+import { weeksOfMonth } from './timeframe-controls.helper';
+export type TimeframeWeekTreeContentProps = {
+    timezone: string;
+    selectedYear: number;
+    selectedMonth: number;
+};
+/**
+ * Hierarchical year → month → week tree for the TimeframeControls week selector.
+ *
+ * @category filters
+ * @domain financial-reporting
+ * @kernelCapability financial-reporting
+ * @tier agent-ready
+ */
+export declare const TimeframeWeekTreeContent: ({ timezone, selectedYear, selectedMonth, }: TimeframeWeekTreeContentProps) => import("react").JSX.Element[];
+export type TimeframeWeekFlatContentProps = {
+    visibleWeeks: ReturnType<typeof weeksOfMonth>;
+};
+/**
+ * Flat list of selectable week items for the TimeframeControls week selector.
+ *
+ * @category filters
+ * @domain financial-reporting
+ * @kernelCapability financial-reporting
+ * @tier agent-ready
+ */
+export declare const TimeframeWeekFlatContent: ({ visibleWeeks }: TimeframeWeekFlatContentProps) => import("react").JSX.Element[];

package/dist/domain/components/timeframe/timeframe-controls/timeframe-controls-week-content.example.d.ts

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

package/dist/domain/components/timeframe/timeframe-controls/timeframe-controls-week-content.example.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TimeframeWeekTreeContent } from '@tetherto/mdk-react-devkit';
+export const TimeframeWeekTreeContentExample = () => (_jsx("div", { className: "mdk-example-row", children: _jsx(TimeframeWeekTreeContent, { timezone: "UTC", selectedYear: 2026, selectedMonth: 4 }) }));

package/dist/domain/components/timeframe/timeframe-controls/timeframe-controls-week-content.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MultiLevelSelect, SelectItem } from '../../../../primitives/index.js';
+import { monthsForYear, weeksOfMonth, weekTreeToken, YEARS } from './timeframe-controls.helper';
+/**
+ * Hierarchical year → month → week tree for the TimeframeControls week selector.
+ *
+ * @category filters
+ * @domain financial-reporting
+ * @kernelCapability financial-reporting
+ * @tier agent-ready
+ */
+export const TimeframeWeekTreeContent = ({ timezone, selectedYear, selectedMonth, }) => YEARS.map((year) => (_jsx(MultiLevelSelect.Section, { sectionTitle: String(year), defaultOpen: year === selectedYear, children: monthsForYear(year).map(({ month, label }) => (_jsx(MultiLevelSelect.Section, { sectionTitle: label, defaultOpen: year === selectedYear && month === selectedMonth, children: weeksOfMonth(year, month, timezone).map((w) => (_jsx(SelectItem, { value: weekTreeToken(year, month, w.start), disabled: Boolean(w.disabled), children: w.label }, `${year}-${month}-${w.start.getTime()}`))) }, `${year}-${month}`))) }, year)));
+/**
+ * Flat list of selectable week items for the TimeframeControls week selector.
+ *
+ * @category filters
+ * @domain financial-reporting
+ * @kernelCapability financial-reporting
+ * @tier agent-ready
+ */
+export const TimeframeWeekFlatContent = ({ visibleWeeks }) => visibleWeeks.map((week) => (_jsx(SelectItem, { value: String(week.start.getTime()), disabled: Boolean(week.disabled), children: week.label }, week.start.getTime())));

package/dist/domain/components/timeframe/timeframe-controls/timeframe-controls.d.ts

@@ -0,0 +1,12 @@
+import type { TimeframeControlsProps } from './timeframe-controls.types';
+import './timeframe-controls.scss';
+/**
+ * Date-range picker for financial reporting pages — supports year, month, and
+ * week granularity via connected selects.
+ *
+ * @category filters
+ * @domain financial-reporting
+ * @kernelCapability financial-reporting
+ * @tier agent-ready
+ */
+export declare const TimeframeControls: ({ hint, onReset, dateRange, onRangeChange, layout, onTimeframeTypeChange, showResetButton, isWeekSelectVisible, isMonthSelectVisible, timeframeType: timeframeTypeProp, }: TimeframeControlsProps) => import("react").JSX.Element;

package/dist/domain/components/timeframe/timeframe-controls/timeframe-controls.example.d.ts

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

package/dist/domain/components/timeframe/timeframe-controls/timeframe-controls.example.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TimeframeControls } from '@tetherto/mdk-react-devkit';
+export const TimeframeControlsExample = () => (_jsx("div", { className: "mdk-example-row", children: _jsx(TimeframeControls, { onRangeChange: (range) => console.warn('range changed', range), layout: "horizontal" }) }));