@tetherto/mdk-react-devkit 0.0.0 → 0.12.1

package/dist/primitives/components/date-picker/index.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DayPicker } from 'react-day-picker';
+import { CalendarIcon } from '@radix-ui/react-icons';
+import { format } from 'date-fns';
+import { cn } from '../../utils';
+import { Button } from '../button';
+import { Popover, PopoverContent, PopoverTrigger } from '../popover';
+import { forwardRef, useEffect, useMemo, useState } from 'react';
+/**
+ * Single-date selection component built on react-day-picker with the MDK
+ * dark theme. Controlled via `selected` / `onSelect`.
+ *
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ *
+ * @example
+ * ```tsx
+ * const [date, setDate] = useState<Date>()
+ * <DatePicker selected={date} onSelect={setDate} placeholder="Pick a date" />
+ * ```
+ */
+export const DatePicker = forwardRef(({ selected, onSelect, placeholder = 'Pick a date', dateFormat = 'MM/dd/yyyy', disabled = false, triggerClassName, calendarClassName, className, ...props }, ref) => {
+    const [open, setOpen] = useState(false);
+    const handleSelect = (date) => {
+        onSelect?.(date);
+        setOpen(false);
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { ref: ref, variant: "secondary", className: cn('mdk-date-picker__trigger', triggerClassName), disabled: disabled, icon: _jsx(CalendarIcon, { className: "mdk-date-picker__icon" }), children: selected ? format(selected, dateFormat) : placeholder }) }), _jsx(PopoverContent, { className: "mdk-date-picker__content", align: "start", children: _jsx(DayPicker, { mode: "single", selected: selected, onSelect: handleSelect, className: cn('mdk-date-picker__calendar', calendarClassName, className), ...props }) })] }));
+});
+DatePicker.displayName = 'DatePicker';
+// Default preset items
+const getDefaultPresets = () => {
+    const today = new Date();
+    const addDays = (date, days) => {
+        const result = new Date(date);
+        result.setDate(result.getDate() + days);
+        return result;
+    };
+    return [
+        {
+            label: 'Last 7 Days',
+            value: { from: addDays(today, -7), to: today },
+        },
+        {
+            label: 'Last 14 Days',
+            value: { from: addDays(today, -14), to: today },
+        },
+        {
+            label: 'Last 30 Days',
+            value: { from: addDays(today, -30), to: today },
+        },
+        {
+            label: 'Last 90 Days',
+            value: { from: addDays(today, -90), to: today },
+        },
+    ];
+};
+/**
+ * Date-range selection component with preset shortcuts (last 7/14/30/90
+ * days) and a modal interface. Controlled via `selected` / `onSelect`.
+ *
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ *
+ * @example
+ * ```tsx
+ * const [range, setRange] = useState<DateRange>()
+ * <DateRangePicker selected={range} onSelect={setRange} showPresets />
+ * ```
+ */
+export const DateRangePicker = forwardRef(({ selected, onSelect, placeholder = 'Pick a date range', dateFormat = 'MM/dd/yyyy', disabled = false, showPresets = true, presets, allowFutureDates = false, triggerClassName, calendarClassName, modalClassName, className, ...props }, ref) => {
+    const [open, setOpen] = useState(false);
+    const [draftRange, setDraftRange] = useState(selected);
+    // Sync draft with external changes
+    useEffect(() => {
+        if (!open) {
+            setDraftRange(selected);
+        }
+    }, [selected, open]);
+    const presetItems = presets ?? (showPresets ? getDefaultPresets() : []);
+    const handleSelect = (range) => {
+        setDraftRange(range);
+    };
+    const handleApply = () => {
+        onSelect?.(draftRange);
+        setOpen(false);
+    };
+    const handleClear = () => {
+        setDraftRange(undefined);
+    };
+    const handlePresetClick = (preset) => {
+        setDraftRange(preset.value);
+    };
+    // Check if a preset is active
+    const isPresetActive = (preset) => {
+        if (!draftRange?.from || !draftRange?.to)
+            return false;
+        const threshold = 5 * 60 * 1000; // 5 minutes in ms
+        const fromDiff = Math.abs(draftRange.from.getTime() - preset.value.from.getTime());
+        const toDiff = Math.abs(draftRange.to.getTime() - preset.value.to.getTime());
+        return fromDiff < threshold && toDiff < threshold;
+    };
+    const displayText = useMemo(() => {
+        if (!selected?.from)
+            return placeholder;
+        if (!selected.to)
+            return format(selected.from, dateFormat);
+        return `${format(selected.from, dateFormat)} - ${format(selected.to, dateFormat)}`;
+    }, [selected, dateFormat, placeholder]);
+    // Calculate disabled days
+    const getDisabledDays = () => {
+        if (!allowFutureDates) {
+            return { after: new Date() };
+        }
+        return undefined;
+    };
+    // Calculate days selected
+    const daysSelected = useMemo(() => {
+        if (!draftRange?.from || !draftRange?.to)
+            return 0;
+        const diff = draftRange.to.getTime() - draftRange.from.getTime();
+        return Math.floor(diff / (1000 * 60 * 60 * 24)) + 1;
+    }, [draftRange]);
+    const isRangeComplete = draftRange?.from && draftRange?.to;
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { ref: ref, variant: "secondary", className: cn('mdk-date-picker__trigger', triggerClassName), disabled: disabled, icon: _jsx(CalendarIcon, { className: "mdk-date-picker__icon" }), children: _jsx("span", { className: "mdk-date-picker__text", children: displayText }) }) }), _jsxs(PopoverContent, { className: cn('mdk-date-picker__modal', modalClassName), align: "start", collisionPadding: 16, sideOffset: 8, children: [_jsx("div", { className: "mdk-date-picker__modal-header", children: _jsx("h3", { className: "mdk-date-picker__modal-title", children: "Select Date Range" }) }), _jsxs("div", { className: "mdk-date-picker__modal-body", children: [_jsx("div", { className: "mdk-date-picker__calendar-container", children: _jsx(DayPicker, { mode: "range", selected: draftRange, onSelect: handleSelect, numberOfMonths: 2, disabled: getDisabledDays(), className: cn('mdk-date-picker__calendar', calendarClassName, className), ...props }) }), _jsxs("div", { className: "mdk-date-picker__meta", children: [isRangeComplete && (_jsxs("div", { className: "mdk-date-picker__summary", children: [_jsx("div", { className: "mdk-date-picker__summary-title", children: "Selected Range" }), _jsxs("div", { className: "mdk-date-picker__summary-dates", children: [_jsx("span", { className: "mdk-date-picker__summary-date", children: format(draftRange.from, 'dd MMM yyyy') }), _jsx("span", { children: "to" }), _jsx("span", { className: "mdk-date-picker__summary-date", children: format(draftRange.to, 'dd MMM yyyy') })] }), _jsxs("div", { className: "mdk-date-picker__summary-count", children: [daysSelected, " days selected"] })] })), presetItems.length > 0 && (_jsx("div", { className: "mdk-date-picker__presets", children: presetItems.map((preset) => (_jsx(Button, { variant: isPresetActive(preset) ? 'primary' : 'secondary', onClick: () => handlePresetClick(preset), children: preset.label }, preset.label))) }))] })] }), _jsxs("div", { className: "mdk-date-picker__modal-footer", children: [_jsx(Button, { variant: "secondary", onClick: handleClear, children: "Clear Selection" }), _jsx(Button, { variant: "primary", onClick: handleApply, disabled: !isRangeComplete, children: "Apply Range" })] })] })] }));
+});
+DateRangePicker.displayName = 'DateRangePicker';

package/dist/primitives/components/detail-legend/detail-legend.example.d.ts

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

package/dist/primitives/components/detail-legend/detail-legend.example.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for DetailLegend.
+ */
+import { useState } from 'react';
+import { DetailLegend } from '@tetherto/mdk-react-devkit';
+const ITEMS = [
+    {
+        label: 'Hashrate',
+        color: '#59E8E8',
+        currentValue: { value: 3590, unit: 'TH/s' },
+        percentChange: 2.5,
+    },
+    {
+        label: 'Power',
+        color: '#FF9500',
+        currentValue: { value: 1200, unit: 'W' },
+        percentChange: -0.8,
+    },
+    {
+        label: 'Efficiency',
+        color: '#A78BFA',
+        currentValue: { value: 28.5, unit: 'J/TH' },
+        percentChange: 0,
+    },
+];
+export const DetailLegendExample = () => {
+    const [hidden, setHidden] = useState({});
+    const items = ITEMS.map((item, i) => ({ ...item, hidden: !!hidden[i] }));
+    return (_jsxs("div", { className: "mdk-example-row", style: { display: 'flex', flexDirection: 'column', gap: 24 }, children: [_jsx(DetailLegend, { items: items, onToggle: (_, index) => setHidden((prev) => ({ ...prev, [index]: !prev[index] })) }), _jsx(DetailLegend, { items: [
+                    { label: 'Accepted', color: '#4ADE80', currentValue: { value: '98.7', unit: '%' } },
+                    { label: 'Rejected', color: '#F87171', currentValue: { value: '1.3', unit: '%' } },
+                ] })] }));
+};

package/dist/primitives/components/detail-legend/index.d.ts

@@ -0,0 +1,6 @@
+import type { DetailLegendProps } from './types';
+export declare function DetailLegend({ items, onToggle, className }: DetailLegendProps): import("react").JSX.Element | null;
+export declare namespace DetailLegend {
+    var displayName: string;
+}
+export type { DetailLegendItem, DetailLegendProps } from './types';

package/dist/primitives/components/detail-legend/index.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../utils';
+import { formatNumber } from '../../utils/format';
+import { hexToOpacity } from '../../utils/chart';
+const ARROW_UP = '\u25B2';
+const ARROW_DOWN = '\u25BC';
+const PercentChangeIndicator = ({ value }) => {
+    const isPositive = value > 0;
+    const arrow = isPositive ? ARROW_UP : ARROW_DOWN;
+    return (_jsxs("span", { className: cn('mdk-detail-legend__percent-change', isPositive
+            ? 'mdk-detail-legend__percent-change--positive'
+            : 'mdk-detail-legend__percent-change--negative'), children: [arrow, " ", formatNumber(Math.abs(value)), "%"] }));
+};
+const DefaultColorBox = ({ color }) => (_jsx("div", { className: "mdk-detail-legend__color-box", style: {
+        border: `1px solid ${color}`,
+        backgroundColor: hexToOpacity(color),
+    } }));
+/**
+ * DetailLegend - Enhanced chart legend with current values and percentage change indicators
+ *
+ * @example
+ * ```tsx
+ * import { UNITS } from '../../constants/units'
+ *
+ * <DetailLegend
+ *   items={[
+ *     {
+ *       label: 'Hashrate',
+ *       color: '#59E8E8',
+ *       currentValue: { value: 3590, unit: UNITS.HASHRATE_TH_S },
+ *       percentChange: 2.5,
+ *     },
+ *   ]}
+ *   onToggle={(label) => handleToggle(label)}
+ * />
+ * ```
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ */
+export const DetailLegend = ({ items, onToggle, className }) => {
+    if (!items || items.length === 0)
+        return null;
+    return (_jsx("div", { className: cn('mdk-detail-legend', className), children: items.map((item, index) => (_jsxs("button", { type: "button", className: cn('mdk-detail-legend__item', item.hidden && 'mdk-detail-legend__item--hidden'), onClick: () => onToggle?.(item.label, index), children: [_jsx("div", { className: "mdk-detail-legend__icon", style: { color: item.color }, children: item.icon ?? _jsx(DefaultColorBox, { color: item.color }) }), _jsxs("div", { className: "mdk-detail-legend__content", children: [_jsx("div", { className: "mdk-detail-legend__label", children: item.label }), item.currentValue && (_jsxs("div", { className: "mdk-detail-legend__value-row", children: [_jsx("span", { className: "mdk-detail-legend__value", children: typeof item.currentValue.value === 'number'
+                                        ? formatNumber(item.currentValue.value)
+                                        : item.currentValue.value }), item.currentValue.unit && (_jsx("span", { className: "mdk-detail-legend__unit", children: item.currentValue.unit })), item.percentChange != null && item.percentChange !== 0 && (_jsx(PercentChangeIndicator, { value: item.percentChange }))] }))] })] }, `${item.label}-${index}`))) }));
+};
+DetailLegend.displayName = 'DetailLegend';

package/dist/primitives/components/detail-legend/types.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+export type DetailLegendItem = {
+    /** Display label; also passed to `onToggle` */
+    label: string;
+    /** Hex color for the default swatch (border, plus 20% opacity fill) and the `color` of a custom `icon` */
+    color: string;
+    /** Custom icon replacing the default color swatch */
+    icon?: ReactNode;
+    /** Value shown below the label, numbers formatted, with optional `unit`; also the row that holds `percentChange` */
+    currentValue?: {
+        value: number | string;
+        unit?: string;
+    };
+    /** Percentage change shown after `currentValue`: positive as a green ▲, negative as a red ▼; hidden when `0`, `null` or without `currentValue` */
+    percentChange?: number | null;
+    /** Dims the item (30% opacity) to show its dataset is hidden */
+    hidden?: boolean;
+};
+export type DetailLegendProps = {
+    /** Legend items to display */
+    items: DetailLegendItem[];
+    /** Callback when a legend item is toggled */
+    onToggle?: (label: string, index: number) => void;
+    /** Custom class name */
+    className?: string;
+};

package/dist/primitives/components/detail-legend/types.js

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

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

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

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for Dialog.
+ */
+import { useState } from 'react';
+import { Button, Dialog, DialogContent, DialogFooter, DialogTrigger, } from '@tetherto/mdk-react-devkit';
+export const DialogExample = () => {
+    const [open, setOpen] = useState(false);
+    return (_jsxs("div", { className: "mdk-example-row", children: [_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { variant: "secondary", children: "Open Dialog" }) }), _jsxs(DialogContent, { title: "Device Settings", description: "Adjust configuration for this miner.", closable: true, children: [_jsx("p", { children: "Dialog body content goes here. Add form fields, tables, or any content." }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "secondary", children: "Cancel" }), _jsx(Button, { variant: "primary", children: "Save Changes" })] })] })] }), _jsxs(Dialog, { open: open, onOpenChange: setOpen, children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { variant: "primary", children: "Controlled Dialog" }) }), _jsxs(DialogContent, { title: "Confirm Action", closable: true, onClose: () => setOpen(false), closeOnClickOutside: false, children: [_jsx("p", { children: "This dialog cannot be dismissed by clicking outside." }), _jsx(DialogFooter, { children: _jsx(Button, { variant: "secondary", onClick: () => setOpen(false), children: "Close" }) })] })] })] }));
+};

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

@@ -0,0 +1,86 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { type HTMLAttributes, type JSX } from 'react';
+declare const Dialog: import("react").FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: import("react").FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type DialogHeaderProps = {
+    /**
+     * Applies `mdk-dialog__header--bare` to the header
+     * @default false
+     */
+    bare?: boolean;
+    /** Shows an ✕ close button in the header */
+    closable?: boolean;
+    /** Fired when the ✕ button is clicked */
+    onClose?: VoidFunction;
+};
+export type DialogContentProps = {
+    /** Renders `DialogTitle` (and optional `DialogDescription`) inside the header */
+    title?: string;
+    /** Renders `DialogDescription` below the title */
+    description?: string;
+    /**
+     * Whether clicking the overlay closes the dialog
+     * @default true
+     */
+    closeOnClickOutside?: boolean;
+    /**
+     * Whether pressing Escape closes the dialog
+     * @default true
+     */
+    closeOnEscape?: boolean;
+} & DialogHeaderProps;
+/**
+ * Full-viewport scrim rendered behind an open `<Dialog>` to block background interaction.
+ *
+ * @category dialogs
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const DialogOverlay: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare function DialogHeader({ onClose, closable, children, className, bare, ...props }: DialogHeaderProps & HTMLAttributes<HTMLDivElement>): JSX.Element;
+declare namespace DialogHeader {
+    var displayName: string;
+}
+/**
+ * Prominent title text at the top of a `<Dialog>` summarising the modal's purpose.
+ * @category dialogs
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const DialogTitle: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
+/**
+ * Supporting body copy inside a `<Dialog>` rendered below the title.
+ * @category dialogs
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const DialogDescription: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+/**
+ * Centered modal surface for a `<Dialog>` — renders above the overlay with focus trap and Escape-to-close.
+ * @category dialogs
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const DialogContent: import("react").ForwardRefExoticComponent<{
+    /** Renders `DialogTitle` (and optional `DialogDescription`) inside the header */
+    title?: string;
+    /** Renders `DialogDescription` below the title */
+    description?: string;
+    /**
+     * Whether clicking the overlay closes the dialog
+     * @default true
+     */
+    closeOnClickOutside?: boolean;
+    /**
+     * Whether pressing Escape closes the dialog
+     * @default true
+     */
+    closeOnEscape?: boolean;
+} & DialogHeaderProps & Omit<DialogPrimitive.DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare function DialogFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>): JSX.Element;
+declare namespace DialogFooter {
+    var displayName: string;
+}
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

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

@@ -0,0 +1,82 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import { cn } from '../../utils';
+import { Button } from '../button';
+import { forwardRef, } from 'react';
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+/**
+ * Full-viewport scrim rendered behind an open `<Dialog>` to block background interaction.
+ *
+ * @category dialogs
+ * @domain generic
+ * @tier agent-ready
+ */
+const DialogOverlay = forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn('mdk-dialog__overlay', className), ...props })));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+/**
+ * Top region of a `<Dialog>` that groups the title and description.
+ * @category dialogs
+ * @domain generic
+ * @tier agent-ready
+ */
+const DialogHeader = ({ onClose, closable, children, className, bare = false, ...props }) => {
+    return (_jsxs("div", { className: cn('mdk-dialog__header', { 'mdk-dialog__header--bare': bare }, className), ...props, children: [_jsx("div", { className: "mdk-dialog__header__container", children: children }), closable && (_jsx(DialogClose, { asChild: true, children: _jsx(Button, { icon: _jsx(Cross2Icon, {}), onClick: onClose, variant: "secondary", className: "mdk-dialog__header__close" }) }))] }));
+};
+DialogHeader.displayName = 'DialogHeader';
+/**
+ * Prominent title text at the top of a `<Dialog>` summarising the modal's purpose.
+ * @category dialogs
+ * @domain generic
+ * @tier agent-ready
+ */
+const DialogTitle = forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Title, { ref: ref, className: cn('mdk-dialog__title', className), ...props })));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+/**
+ * Supporting body copy inside a `<Dialog>` rendered below the title.
+ * @category dialogs
+ * @domain generic
+ * @tier agent-ready
+ */
+const DialogDescription = forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Description, { ref: ref, className: cn('mdk-dialog__description', className), ...props })));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+/**
+ * Centered modal surface for a `<Dialog>` — renders above the overlay with focus trap and Escape-to-close.
+ * @category dialogs
+ * @domain generic
+ * @tier agent-ready
+ */
+const DialogContent = forwardRef(({ className, closable, onClose, title, description, children, bare, closeOnClickOutside = true, closeOnEscape = true, onInteractOutside, onEscapeKeyDown, ...props }, ref) => {
+    const handleInteractOutside = (event) => {
+        if (!closeOnClickOutside) {
+            event.preventDefault();
+        }
+        onInteractOutside?.(event);
+    };
+    const handleEscapeKeyDown = (event) => {
+        if (!closeOnEscape) {
+            event.preventDefault();
+        }
+        onEscapeKeyDown?.(event);
+    };
+    const contentProps = {
+        ...props,
+        ...(description ? {} : { 'aria-describedby': undefined }),
+    };
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn('mdk-dialog__content', className), onInteractOutside: handleInteractOutside, onEscapeKeyDown: handleEscapeKeyDown, ...contentProps, children: [_jsx(DialogHeader, { closable: closable, onClose: onClose, bare: bare, children: title && (_jsxs(_Fragment, { children: [_jsx(DialogTitle, { children: title }), description && _jsx(DialogDescription, { children: description })] })) }), children] })] }));
+});
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+/**
+ * Action row at the bottom of a `<Dialog>` — typically primary/secondary buttons.
+ * @category dialogs
+ * @domain generic
+ * @tier agent-ready
+ */
+const DialogFooter = ({ className, ...props }) => {
+    return _jsx("div", { className: cn('mdk-dialog__footer', className), ...props });
+};
+DialogFooter.displayName = 'DialogFooter';
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

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

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for Divider.
+ */
+import { Divider } from '@tetherto/mdk-react-devkit';
+export const DividerExample = () => (_jsxs("div", { className: "mdk-example-col", children: [_jsx(Divider, {}), _jsx(Divider, { dashed: true }), _jsx(Divider, { dotted: true }), _jsx(Divider, { children: "Section" }), _jsx(Divider, { align: "left", children: "Pool Statistics" }), _jsx(Divider, { plain: true, children: "or" })] }));

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

@@ -0,0 +1,42 @@
+import { type ReactNode } from 'react';
+export type DividerOrientation = 'horizontal' | 'vertical';
+export type DividerType = 'solid' | 'dashed' | 'dotted';
+export type DividerProps = {
+    /**
+     * Line orientation
+     * @default 'horizontal'
+     */
+    orientation?: DividerOrientation;
+    /**
+     * Line style
+     * @default false
+     */
+    dashed?: boolean;
+    /**
+     * Renders a dotted line (takes precedence over `dashed`)
+     * @default false
+     */
+    dotted?: boolean;
+    /** Text or node rendered in the middle of the divider */
+    children?: ReactNode;
+    /**
+     * Horizontal alignment of the label
+     * @default 'center'
+     */
+    align?: 'left' | 'center' | 'right';
+    /**
+     * Plain text style — no border around label
+     * @default false
+     */
+    plain?: boolean;
+    /** Custom className */
+    className?: string;
+};
+/**
+ * Thin horizontal or vertical rule used to separate logical sections of a layout.
+ *
+ * @category layout
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const Divider: import("react").ForwardRefExoticComponent<DividerProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { cn } from '../../utils';
+import { forwardRef } from 'react';
+/**
+ * Thin horizontal or vertical rule used to separate logical sections of a layout.
+ *
+ * @category layout
+ * @domain generic
+ * @tier agent-ready
+ */
+export const Divider = forwardRef(({ orientation = 'horizontal', dashed = false, dotted = false, children, align = 'center', plain = false, className, ...props }, ref) => {
+    const lineType = dotted ? 'dotted' : dashed ? 'dashed' : 'solid';
+    const isVertical = orientation === 'vertical';
+    const hasLabel = !!children && !isVertical;
+    return (_jsx(SeparatorPrimitive.Root, { ref: ref, orientation: orientation, decorative: true, className: cn('mdk-divider', `mdk-divider--${orientation}`, `mdk-divider--${lineType}`, hasLabel && 'mdk-divider--with-label', hasLabel && `mdk-divider--label-${align}`, plain && 'mdk-divider--plain', className), ...props, children: hasLabel && _jsx("span", { className: "mdk-divider__label", children: children }) }));
+});
+Divider.displayName = 'Divider';

package/dist/primitives/components/doughnut-chart/doughnut-canvas.d.ts

@@ -0,0 +1,6 @@
+import { Chart as ChartJS } from 'chart.js';
+import type { ComponentProps } from 'react';
+import { Doughnut } from 'react-chartjs-2';
+export type DoughnutCanvasProps = Pick<ComponentProps<typeof Doughnut>, 'data' | 'options'>;
+export declare const DoughnutCanvas: import("react").ForwardRefExoticComponent<DoughnutCanvasProps & import("react").RefAttributes<ChartJS<"doughnut", unknown, unknown> | undefined>>;
+export default DoughnutCanvas;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ArcElement, Chart as ChartJS, Legend, Tooltip } from 'chart.js';
+import { forwardRef } from 'react';
+import { Doughnut } from 'react-chartjs-2';
+// Engine-bound leaf for DoughnutChart. Isolated in its own module so the
+// chart.js + react-chartjs-2 runtime is code-split into a lazy chunk and only
+// loaded when a doughnut chart actually renders (see `index.tsx`).
+ChartJS.register(ArcElement, Tooltip, Legend);
+export const DoughnutCanvas = forwardRef((props, ref) => _jsx(Doughnut, { ref: ref, ...props }));
+DoughnutCanvas.displayName = 'DoughnutCanvas';
+export default DoughnutCanvas;

package/dist/primitives/components/doughnut-chart/doughnut-chart.example.d.ts

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

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for DoughnutChart.
+ */
+import { DoughnutChart } from '@tetherto/mdk-react-devkit';
+const deviceStatusData = [
+    { label: 'Online', value: 142, color: '#34C759' },
+    { label: 'Offline', value: 23, color: '#FF3B30' },
+    { label: 'Maintenance', value: 8, color: '#FF9500' },
+];
+const hashDistributionData = [
+    { label: 'Foundry EU', value: 450 },
+    { label: 'AntPool', value: 320 },
+    { label: 'F2Pool', value: 180 },
+    { label: 'Other', value: 50 },
+];
+export const DoughnutChartExample = () => (_jsxs("div", { className: "mdk-example-row", children: [_jsx(DoughnutChart, { data: deviceStatusData, unit: "devices", legendPosition: "right" }), _jsx(DoughnutChart, { data: hashDistributionData, unit: "TH/s", height: 200, legendPosition: "bottom" })] }));

package/dist/primitives/components/doughnut-chart/index.d.ts

@@ -0,0 +1,70 @@
+import type { Chart as ChartJS } from 'chart.js';
+import type { Position } from '../../types';
+import type { ChartTooltipConfig } from '../../utils/chart-tooltip';
+export type DoughnutChartDataset = {
+    /** Slice label */
+    label: string;
+    /** Numeric slice value */
+    value: number;
+    /** Slice color (falls back to the built-in palette) */
+    color?: string;
+};
+export type DoughnutChartProps = {
+    /** Array of labelled slices */
+    data: DoughnutChartDataset[];
+    /**
+     * Unit suffix appended to values in tooltips and legends
+     * @default ''
+     */
+    unit?: string;
+    /** Chart.js options – merged with defaults */
+    options?: ChartJS<'doughnut'>['options'];
+    /**
+     * Doughnut cutout percentage (default: '75%')
+     * @default '75%'
+     */
+    cutout?: string;
+    /**
+     * Border width between segments (default: 4)
+     * @default 4
+     */
+    borderWidth?: number;
+    /**
+     * Chart height in pixels
+     * @default 260
+     */
+    height?: number;
+    /**
+     * Where to place the legend relative to the chart (default: 'top')
+     * @default 'top'
+     */
+    legendPosition?: Position;
+    /**
+     * Custom HTML tooltip configuration. When provided, replaces the default doughnut tooltip
+     *  (which shows label, value with unit, and percentage). Use `valueFormatter` to replicate
+     *  the percentage display if needed.
+     */
+    tooltip?: ChartTooltipConfig;
+    /** Formats slice values in the built-in legend and default tooltip (default: raw number). */
+    formatValue?: (value: number) => string;
+    /** Additional class for the root element */
+    className?: string;
+};
+/**
+ * DoughnutChart – Presentational Chart.js doughnut chart
+ * with custom HTML legend matching the MDK design.
+ *
+ * @example
+ * ```tsx
+ * <DoughnutChart
+ *   data={[
+ *     { label: 'Online', value: 120, color: '#34C759' },
+ *     { label: 'Offline', value: 30, color: '#FF3B30' },
+ *   ]}
+ * />
+ * ```
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const DoughnutChart: import("react").ForwardRefExoticComponent<DoughnutChartProps & import("react").RefAttributes<HTMLDivElement>>;