@tetherto/mdk-react-devkit 0.0.0 → 0.12.1

package/dist/primitives/theme/index.js

@@ -0,0 +1,7 @@
+/**
+ * Theme system
+ *
+ * Design tokens, theme utilities, and theming system.
+ */
+export * from './tokens';
+export * from './utils';

package/dist/primitives/theme/tokens.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Design tokens
+ *
+ * These tokens define the visual design system.
+ */
+export declare const colors: {
+    readonly primary: {
+        readonly 50: 'hsl(222, 47%, 95%)';
+        readonly 100: 'hsl(222, 47%, 90%)';
+        readonly 200: 'hsl(222, 47%, 80%)';
+        readonly 300: 'hsl(222, 47%, 70%)';
+        readonly 400: 'hsl(222, 47%, 60%)';
+        readonly 500: 'hsl(222, 47%, 50%)';
+        readonly 600: 'hsl(222, 47%, 40%)';
+        readonly 700: 'hsl(222, 47%, 30%)';
+        readonly 800: 'hsl(222, 47%, 20%)';
+        readonly 900: 'hsl(222, 47%, 11.2%)';
+    };
+    readonly gray: {
+        readonly 50: 'hsl(210, 40%, 98%)';
+        readonly 100: 'hsl(210, 40%, 96.1%)';
+        readonly 200: 'hsl(214, 32%, 91.4%)';
+        readonly 300: 'hsl(213, 27%, 84.1%)';
+        readonly 400: 'hsl(215, 20%, 65.1%)';
+        readonly 500: 'hsl(215, 16%, 47%)';
+        readonly 600: 'hsl(215, 19%, 35%)';
+        readonly 700: 'hsl(215, 25%, 27%)';
+        readonly 800: 'hsl(217, 33%, 17%)';
+        readonly 900: 'hsl(222, 47%, 11%)';
+    };
+};
+export declare const spacing: {
+    readonly 0: '0';
+    readonly 1: '0.25rem';
+    readonly 2: '0.5rem';
+    readonly 3: '0.75rem';
+    readonly 4: '1rem';
+    readonly 5: '1.25rem';
+    readonly 6: '1.5rem';
+    readonly 8: '2rem';
+    readonly 10: '2.5rem';
+    readonly 12: '3rem';
+    readonly 16: '4rem';
+    readonly 20: '5rem';
+    readonly 24: '6rem';
+};
+export declare const borderRadius: {
+    readonly none: '0';
+    readonly sm: '0.125rem';
+    readonly DEFAULT: '0.25rem';
+    readonly md: '0.375rem';
+    readonly lg: '0.5rem';
+    readonly xl: '0.75rem';
+    readonly '2xl': '1rem';
+    readonly full: '9999px';
+};
+export declare const fontSize: {
+    readonly xs: '0.75rem';
+    readonly sm: '0.875rem';
+    readonly base: '1rem';
+    readonly lg: '1.125rem';
+    readonly xl: '1.25rem';
+    readonly '2xl': '1.5rem';
+    readonly '3xl': '1.875rem';
+    readonly '4xl': '2.25rem';
+    readonly '5xl': '3rem';
+};

package/dist/primitives/theme/tokens.js

@@ -0,0 +1,67 @@
+/**
+ * Design tokens
+ *
+ * These tokens define the visual design system.
+ */
+export const colors = {
+    primary: {
+        50: 'hsl(222, 47%, 95%)',
+        100: 'hsl(222, 47%, 90%)',
+        200: 'hsl(222, 47%, 80%)',
+        300: 'hsl(222, 47%, 70%)',
+        400: 'hsl(222, 47%, 60%)',
+        500: 'hsl(222, 47%, 50%)',
+        600: 'hsl(222, 47%, 40%)',
+        700: 'hsl(222, 47%, 30%)',
+        800: 'hsl(222, 47%, 20%)',
+        900: 'hsl(222, 47%, 11.2%)',
+    },
+    gray: {
+        50: 'hsl(210, 40%, 98%)',
+        100: 'hsl(210, 40%, 96.1%)',
+        200: 'hsl(214, 32%, 91.4%)',
+        300: 'hsl(213, 27%, 84.1%)',
+        400: 'hsl(215, 20%, 65.1%)',
+        500: 'hsl(215, 16%, 47%)',
+        600: 'hsl(215, 19%, 35%)',
+        700: 'hsl(215, 25%, 27%)',
+        800: 'hsl(217, 33%, 17%)',
+        900: 'hsl(222, 47%, 11%)',
+    },
+};
+export const spacing = {
+    0: '0',
+    1: '0.25rem',
+    2: '0.5rem',
+    3: '0.75rem',
+    4: '1rem',
+    5: '1.25rem',
+    6: '1.5rem',
+    8: '2rem',
+    10: '2.5rem',
+    12: '3rem',
+    16: '4rem',
+    20: '5rem',
+    24: '6rem',
+};
+export const borderRadius = {
+    none: '0',
+    sm: '0.125rem',
+    DEFAULT: '0.25rem',
+    md: '0.375rem',
+    lg: '0.5rem',
+    xl: '0.75rem',
+    '2xl': '1rem',
+    full: '9999px',
+};
+export const fontSize = {
+    xs: '0.75rem',
+    sm: '0.875rem',
+    base: '1rem',
+    lg: '1.125rem',
+    xl: '1.25rem',
+    '2xl': '1.5rem',
+    '3xl': '1.875rem',
+    '4xl': '2.25rem',
+    '5xl': '3rem',
+};

package/dist/primitives/theme/utils.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Theme utilities
+ */
+import type { Theme } from './index';
+/**
+ * Get the system theme preference
+ */
+export declare const getSystemTheme: () => 'light' | 'dark';
+/**
+ * Apply theme to document
+ */
+export declare const applyTheme: (theme: Theme) => void;
+/**
+ * Get stored theme from localStorage
+ */
+export declare const getStoredTheme: (storageKey?: string) => Theme | null;
+/**
+ * Store theme in localStorage
+ */
+export declare const setStoredTheme: (theme: Theme, storageKey?: string) => void;

package/dist/primitives/theme/utils.js

@@ -0,0 +1,47 @@
+/**
+ * Theme utilities
+ */
+/**
+ * Get the system theme preference
+ */
+export const getSystemTheme = () => {
+    if (typeof window === 'undefined')
+        return 'light';
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+};
+/**
+ * Apply theme to document
+ */
+export const applyTheme = (theme) => {
+    const root = document.documentElement;
+    const resolvedTheme = theme === 'system' ? getSystemTheme() : theme;
+    root.classList.remove('light', 'dark');
+    root.classList.add(resolvedTheme);
+    root.style.colorScheme = resolvedTheme;
+};
+/**
+ * Get stored theme from localStorage
+ */
+export const getStoredTheme = (storageKey = 'theme') => {
+    if (typeof window === 'undefined')
+        return null;
+    try {
+        return localStorage.getItem(storageKey);
+    }
+    catch {
+        return null;
+    }
+};
+/**
+ * Store theme in localStorage
+ */
+export const setStoredTheme = (theme, storageKey = 'theme') => {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        localStorage.setItem(storageKey, theme);
+    }
+    catch {
+        // Ignore localStorage errors
+    }
+};

package/dist/primitives/types/chart.d.ts

@@ -0,0 +1 @@
+export type { ChartDataset } from 'chart.js';

package/dist/primitives/types/chart.js

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

package/dist/primitives/types/common.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Common shared types used across components
+ */
+/**
+ * Standard component size variants
+ * Used by Button, Badge, Checkbox, Switch, Radio, Spinner, Indicator, EmptyState, Pagination
+ */
+export type ComponentSize = 'sm' | 'md' | 'lg';
+/**
+ * Button-specific size including icon-only variant
+ */
+export type ButtonSize = ComponentSize | 'icon';
+/**
+ * Border radius variants
+ * Used by Checkbox, Switch, Radio
+ */
+export type BorderRadius = 'none' | 'small' | 'medium' | 'large' | 'full';
+/**
+ * Color variants for components
+ * Comprehensive set including all semantic colors
+ */
+export type ColorVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+/**
+ * Status variants for state indication
+ * Used for badges, notifications, and status indicators
+ */
+export type StatusVariant = 'success' | 'processing' | 'error' | 'warning' | 'default' | 'idle';
+/**
+ * Component color options (subset of ColorVariant)
+ * Used by form components like Checkbox, Switch, Radio, Typography
+ */
+export type ComponentColor = 'default' | 'primary' | 'success' | 'warning' | 'error';
+/**
+ * Position/side options for UI elements
+ * Used by Tooltip, Popover, and chart legends
+ */
+export type Position = 'top' | 'right' | 'bottom' | 'left';
+/**
+ * Text alignment options
+ * Used by Typography component
+ */
+export type TextAlign = 'left' | 'center' | 'right' | 'justify';
+/**
+ * Flex/Grid alignment options
+ * Used by Popover, charts, and layout components
+ */
+export type FlexAlign = 'start' | 'center' | 'end';

package/dist/primitives/types/common.js

@@ -0,0 +1,4 @@
+/**
+ * Common shared types used across components
+ */
+export {};

package/dist/primitives/types/component.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Component-specific prop types
+ */
+/**
+ * Button variant options
+ */
+export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'tertiary' | 'link' | 'nav-link' | 'icon' | 'outline' | 'ghost';
+/**
+ * Button icon position
+ */
+export type ButtonIconPosition = 'left' | 'right';
+/**
+ * Toast/notification variant options
+ */
+export type NotificationVariant = 'success' | 'error' | 'warning' | 'info';
+/**
+ * Badge status options
+ */
+export type BadgeStatus = 'success' | 'processing' | 'error' | 'warning' | 'default';
+/**
+ * Typography color options (includes muted variant)
+ */
+export type TypographyColor = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'muted';

package/dist/primitives/types/component.js

@@ -0,0 +1,4 @@
+/**
+ * Component-specific prop types
+ */
+export {};

package/dist/primitives/types/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Core types and interfaces
+ */
+export * from './chart';
+export * from './common';
+export * from './component';
+export type { ApiError, UnknownRecord } from '@tetherto/mdk-ui-foundation';
+export type Nullable<T> = T | null;
+export type Optional<T> = T | undefined;
+export type Maybe<T> = T | null | undefined;
+export type Status = 'idle' | 'loading' | 'success' | 'error';
+export type PaginationParams = {
+    limit?: number;
+    offset?: number;
+    page?: number;
+};
+export type PaginatedResponse<T> = {
+    data: T[];
+    page: number;
+    total: number;
+    totalPages: number;
+};
+export type ApiResponse<T> = {
+    data: T;
+    message?: string;
+    status: number;
+};

package/dist/primitives/types/index.js

@@ -0,0 +1,6 @@
+/**
+ * Core types and interfaces
+ */
+export * from './chart';
+export * from './common';
+export * from './component';

package/dist/primitives/utils/array.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Array and collection utilities
+ *
+ * Pure functions for working with arrays: weighted averages,
+ * circular access, attribute parsing, and data extraction.
+ */
+import type { WeightedAverageResult } from './types';
+/**
+ * Get a nested value from an object by dot-separated path
+ *
+ * @example
+ * ```ts
+ * getNestedValue({ a: { b: 42 } }, 'a.b')  // 42
+ * ```
+ */
+export declare const getNestedValue: (obj: Record<string, unknown>, path: string) => unknown;
+/**
+ * Calculate weighted average from an array of objects
+ *
+ * @param arr - Array of objects containing value and weight data
+ * @param valueAttribute - Dot-path to the value property
+ * @param weightAttribute - Dot-path to the weight property
+ *
+ * @example
+ * ```ts
+ * const data = [
+ *   { hashrate: 100, weight: 10 },
+ *   { hashrate: 200, weight: 20 },
+ * ]
+ * getWeightedAverage(data, 'hashrate', 'weight')
+ * // { avg: 166.67, totalWeight: 30, weightedValue: 5000 }
+ * ```
+ */
+export declare const getWeightedAverage: (arr: Record<string, unknown>[], valueAttribute: string, weightAttribute: string) => WeightedAverageResult;
+/**
+ * Calculate average from pre-weighted data (avg / totalWeight)
+ *
+ * @returns The computed average, or null if inputs are invalid
+ */
+export declare const getAvgFromWeighted: (avgData: {
+    avg?: number;
+    totalWeight?: number;
+} | undefined) => number | null;
+/**
+ * Generator that infinitely cycles through array elements
+ *
+ * @example
+ * ```ts
+ * const colors = circularArrayAccess(['red', 'blue', 'green'])
+ * colors.next().value  // 'red'
+ * colors.next().value  // 'blue'
+ * colors.next().value  // 'green'
+ * colors.next().value  // 'red' (wraps around)
+ * ```
+ */
+export declare const circularArrayAccess: <T>(array: T[]) => Generator<T, void, unknown>;

package/dist/primitives/utils/array.js

@@ -0,0 +1,95 @@
+/**
+ * Array and collection utilities
+ *
+ * Pure functions for working with arrays: weighted averages,
+ * circular access, attribute parsing, and data extraction.
+ */
+// ============================================================================
+// Helpers
+// ============================================================================
+/**
+ * Get a nested value from an object by dot-separated path
+ *
+ * @example
+ * ```ts
+ * getNestedValue({ a: { b: 42 } }, 'a.b')  // 42
+ * ```
+ */
+export const getNestedValue = (obj, path) => {
+    return path.split('.').reduce((acc, key) => {
+        if (acc && typeof acc === 'object') {
+            return acc[key];
+        }
+        return undefined;
+    }, obj);
+};
+// ============================================================================
+// Weighted Average
+// ============================================================================
+/**
+ * Calculate weighted average from an array of objects
+ *
+ * @param arr - Array of objects containing value and weight data
+ * @param valueAttribute - Dot-path to the value property
+ * @param weightAttribute - Dot-path to the weight property
+ *
+ * @example
+ * ```ts
+ * const data = [
+ *   { hashrate: 100, weight: 10 },
+ *   { hashrate: 200, weight: 20 },
+ * ]
+ * getWeightedAverage(data, 'hashrate', 'weight')
+ * // { avg: 166.67, totalWeight: 30, weightedValue: 5000 }
+ * ```
+ */
+export const getWeightedAverage = (arr, valueAttribute, weightAttribute) => {
+    const { weightedValue, totalWeight } = arr.reduce((acc, curr) => {
+        const value = Number(getNestedValue(curr, valueAttribute) ?? 0);
+        const weight = Number(getNestedValue(curr, weightAttribute) ?? 0);
+        if (!Number.isNaN(value) && !Number.isNaN(weight)) {
+            acc.totalWeight += weight;
+            acc.weightedValue += value * weight;
+        }
+        return acc;
+    }, { weightedValue: 0, totalWeight: 0 });
+    return {
+        avg: totalWeight === 0 ? 0 : weightedValue / totalWeight,
+        totalWeight,
+        weightedValue,
+    };
+};
+/**
+ * Calculate average from pre-weighted data (avg / totalWeight)
+ *
+ * @returns The computed average, or null if inputs are invalid
+ */
+export const getAvgFromWeighted = (avgData) => Number.isFinite(avgData?.avg) &&
+    Number.isFinite(avgData?.totalWeight) &&
+    avgData.totalWeight > 0
+    ? avgData.avg / avgData.totalWeight
+    : null;
+// ============================================================================
+// Circular Array Access
+// ============================================================================
+/**
+ * Generator that infinitely cycles through array elements
+ *
+ * @example
+ * ```ts
+ * const colors = circularArrayAccess(['red', 'blue', 'green'])
+ * colors.next().value  // 'red'
+ * colors.next().value  // 'blue'
+ * colors.next().value  // 'green'
+ * colors.next().value  // 'red' (wraps around)
+ * ```
+ */
+export const circularArrayAccess = function* (array) {
+    if (array.length === 0)
+        return;
+    let currentIndex = -1;
+    while (true) {
+        currentIndex = (currentIndex + 1) % array.length;
+        yield array[currentIndex];
+    }
+};

package/dist/primitives/utils/async.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Async utilities
+ *
+ * Pure functions for working with asynchronous patterns.
+ */
+type CallbackFunction<T> = (...args: [...unknown[], (err: Error | null, result?: T) => void]) => void;
+/**
+ * Convert a Node.js-style callback function to a Promise-based one
+ *
+ * @example
+ * ```ts
+ * const readFileAsync = promisify(fs.readFile)
+ * const content = await readFileAsync('path/to/file')
+ * ```
+ */
+export declare const promisify: <T>(fn: CallbackFunction<T>) => (...args: unknown[]) => Promise<T>;
+export {};

package/dist/primitives/utils/async.js

@@ -0,0 +1,23 @@
+/**
+ * Async utilities
+ *
+ * Pure functions for working with asynchronous patterns.
+ */
+/**
+ * Convert a Node.js-style callback function to a Promise-based one
+ *
+ * @example
+ * ```ts
+ * const readFileAsync = promisify(fs.readFile)
+ * const content = await readFileAsync('path/to/file')
+ * ```
+ */
+export const promisify = (fn) => (...args) => new Promise((resolve, reject) => {
+    ;
+    fn(...args, (err, result) => {
+        if (err) {
+            return reject(err);
+        }
+        resolve(result);
+    });
+});