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

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

@@ -0,0 +1,152 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, forwardRef, isValidElement, useEffect, useMemo, } from 'react';
+/**
+ * Normalize template into 2D array of area names
+ * @param template - String array or 2D string array
+ * @returns 2D array of area names
+ */
+const normalizeTemplate = (template) => {
+    // If already 2D array, return as is
+    if (Array.isArray(template[0])) {
+        return template;
+    }
+    // Convert 1D array of strings into 2D array
+    // Split each string by whitespace
+    return template.map((row) => row.trim().split(/\s+/));
+};
+/**
+ * Convert columns array to string
+ * @param columns - String or array of strings
+ * @returns Space-separated string or null
+ */
+const normalizeColumns = (columns) => {
+    if (!columns)
+        return null;
+    if (Array.isArray(columns)) {
+        return columns.join(' ');
+    }
+    return columns;
+};
+/**
+ * Ensure valid CSS grid-area name
+ * CSS grid-area names cannot start with a number
+ * @param name - Area name to fix
+ * @returns Valid CSS grid-area name
+ */
+const fixAreaName = (name) => {
+    if (name === '.')
+        return '.';
+    const str = String(name);
+    // If starts with number, prefix with 'a'
+    if (/^\d/.test(str)) {
+        return `a${str}`;
+    }
+    return str;
+};
+/**
+ * Convert 2D area array to CSS grid-template-areas string
+ * @param areas - 2D array of area names
+ * @returns CSS grid-template-areas value
+ */
+const formatGridAreas = (areas) => {
+    if (!areas || areas.length === 0)
+        return 'none';
+    // Convert each row to quoted string: ["a", "b"] -> "a b"
+    // Join rows with newlines: ["a b", "c d"] -> '"a b"\n"c d"'
+    return areas.map((row) => `"${row.join(' ')}"`).join('\n');
+};
+/**
+ * Mosaic - Grid layout component with named areas
+ *
+ * Features:
+ * - Named grid areas for layout
+ * - Responsive: stacks on mobile, grid on desktop
+ * - Auto-generates column tracks
+ * - Validates column count vs template
+ *
+ * @example
+ * ```tsx
+ * <Mosaic
+ *   template={[
+ *     ['header', 'header'],
+ *     ['sidebar', 'content'],
+ *     ['footer', 'footer']
+ *   ]}
+ *   gap="16px"
+ *   rowHeight="auto"
+ * >
+ *   <Mosaic.Item area="header">Header</Mosaic.Item>
+ *   <Mosaic.Item area="sidebar">Sidebar</Mosaic.Item>
+ *   <Mosaic.Item area="content">Content</Mosaic.Item>
+ *   <Mosaic.Item area="footer">Footer</Mosaic.Item>
+ * </Mosaic>
+ * ```
+ *
+ * @example
+ * // String template (space-separated)
+ * ```tsx
+ * <Mosaic
+ *   template={[
+ *     'header header header',
+ *     'nav    main   aside',
+ *     'footer footer footer'
+ *   ]}
+ * >
+ *   <Mosaic.Item area="header">Header</Mosaic.Item>
+ *   <Mosaic.Item area="nav">Nav</Mosaic.Item>
+ *   <Mosaic.Item area="main">Main</Mosaic.Item>
+ *   <Mosaic.Item area="aside">Aside</Mosaic.Item>
+ *   <Mosaic.Item area="footer">Footer</Mosaic.Item>
+ * </Mosaic>
+ * ```
+ * @category layout
+ * @domain generic
+ * @tier agent-ready
+ */
+export const Mosaic = ({ template, gap = '12px', rowHeight = 'auto', columns, children, className, }) => {
+    // Normalize template into 2D array
+    const rows = useMemo(() => normalizeTemplate(template), [template]);
+    const colsCount = rows[0]?.length || 1;
+    // Normalize columns → string
+    const columnsStr = useMemo(() => normalizeColumns(columns), [columns]);
+    // Normalize template with safe CSS grid-area names
+    const normalized = useMemo(() => rows.map((row) => row.map((cell) => fixAreaName(cell))), [rows]);
+    useEffect(() => {
+        if (columnsStr) {
+            const columnCount = columnsStr.trim().split(/\s+/).length;
+            if (columnCount !== colsCount) {
+                // oxlint-disable-next-line no-console -- dev-facing misconfiguration warning
+                console.warn(`Mosaic: columns prop has ${columnCount} tracks but template has ${colsCount} columns`);
+            }
+        }
+    }, [columnsStr, colsCount]);
+    // Format grid-template-areas CSS value
+    const gridAreas = useMemo(() => formatGridAreas(normalized), [normalized]);
+    // Patch children with grid-area inline style
+    const patchedChildren = useMemo(() => Children.map(children, (child) => {
+        if (!isValidElement(child))
+            return child;
+        const area = child.props.area;
+        const fixedArea = area ? fixAreaName(area) : undefined;
+        return cloneElement(child, { 'data-area': fixedArea });
+    }), [children]);
+    // Inline styles for dynamic values
+    const gridStyle = useMemo(() => ({
+        '--mosaic-columns': columnsStr || `repeat(${colsCount}, minmax(0, 1fr))`,
+        '--mosaic-row-height': rowHeight,
+        '--mosaic-gap': gap,
+        '--mosaic-areas': gridAreas,
+    }), [columnsStr, colsCount, rowHeight, gap, gridAreas]);
+    return (_jsx("div", { className: `mosaic-grid ${className || ''}`, style: gridStyle, children: patchedChildren }));
+};
+const MosaicItemComponent = forwardRef(({ area, children, className, style, ...props }, ref) => {
+    const fixedArea = area ? fixAreaName(area) : undefined;
+    // Inline style for grid-area
+    const itemStyle = useMemo(() => ({
+        ...style,
+        gridArea: fixedArea || 'auto',
+    }), [style, fixedArea]);
+    return (_jsx("div", { ref: ref, className: `mosaic-item ${className || ''}`, style: itemStyle, ...props, children: children }));
+});
+MosaicItemComponent.displayName = 'Mosaic.Item';
+Mosaic.Item = MosaicItemComponent;

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

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for Mosaic.
+ */
+import { Mosaic } from '@tetherto/mdk-react-devkit';
+export const MosaicExample = () => (_jsx("div", { className: "mdk-example-col", children: _jsxs(Mosaic, { template: ['header header', 'sidebar content', 'footer footer'], gap: "8px", rowHeight: "auto", children: [_jsx(Mosaic.Item, { area: "header", className: "mdk-example-inline", style: { background: 'var(--mdk-color-bg-card)', padding: '8px', borderRadius: '4px' }, children: "Header" }), _jsx(Mosaic.Item, { area: "sidebar", className: "mdk-example-inline", style: { background: 'var(--mdk-color-bg-card)', padding: '8px', borderRadius: '4px' }, children: "Sidebar" }), _jsx(Mosaic.Item, { area: "content", className: "mdk-example-inline", style: { background: 'var(--mdk-color-bg-card)', padding: '8px', borderRadius: '4px' }, children: "Content" }), _jsx(Mosaic.Item, { area: "footer", className: "mdk-example-inline", style: { background: 'var(--mdk-color-bg-card)', padding: '8px', borderRadius: '4px' }, children: "Footer" })] }) }));

package/dist/primitives/components/multi-level-select/index.d.ts

@@ -0,0 +1,40 @@
+import { type ReactNode } from 'react';
+import { Select as MultiLevelSelectRoot } from '../select';
+export type { SelectProps as MultiLevelSelectRootProps, SelectTriggerProps as MultiLevelSelectTriggerProps, } from '../select';
+export type MultiLevelSelectSectionProps = {
+    /** Controlled open state */
+    open?: boolean;
+    /** `MultiLevelSelect.Item` elements in the section */
+    children?: ReactNode;
+    /**
+     * Initial open state (uncontrolled)
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /** Title displayed in the section header */
+    sectionTitle: ReactNode;
+    /** Called when the section is expanded or collapsed */
+    onToggle?: (open: boolean) => void;
+};
+declare const MultiLevelSelectSection: {
+    ({ children, onToggle, sectionTitle, open: openProp, defaultOpen, }: MultiLevelSelectSectionProps): import("react").JSX.Element;
+    displayName: string;
+};
+/**
+ * Multi-level select component with collapsible sections.
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const MultiLevelSelect: {
+    Root: typeof MultiLevelSelectRoot;
+    Trigger: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-select").SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+        size?: import("../select").SelectSize;
+        variant?: import("../select").SelectVariant;
+        color?: string;
+    } & import("react").RefAttributes<HTMLButtonElement>>;
+    Value: import("react").ForwardRefExoticComponent<import("@radix-ui/react-select").SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Content: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-select").SelectContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-select").SelectItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Section: typeof MultiLevelSelectSection;
+};

package/dist/primitives/components/multi-level-select/index.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cn } from '../../utils';
+import { SelectContent as MultiLevelSelectContent, SelectItem as MultiLevelSelectItem, Select as MultiLevelSelectRoot, SelectTrigger as MultiLevelSelectTrigger, SelectValue as MultiLevelSelectValue, } from '../select';
+const MultiLevelSelectSection = ({ children, onToggle, sectionTitle, open: openProp, defaultOpen = false, }) => {
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isControlled = openProp !== undefined;
+    const open = isControlled ? openProp : uncontrolledOpen;
+    const setOpen = (next) => {
+        onToggle?.(next);
+        if (!isControlled) {
+            setUncontrolledOpen(next);
+        }
+    };
+    return (_jsxs("div", { className: cn('mdk-multi-level-select__section'), children: [_jsxs("div", { className: "mdk-multi-level-select__section-header", onPointerDown: (e) => e.preventDefault(), children: [_jsx("span", { className: "mdk-multi-level-select__section-title", children: sectionTitle }), _jsx("button", { type: "button", className: "mdk-multi-level-select__section-toggle", "aria-expanded": open, onPointerDown: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        }, onClick: () => setOpen(!open), children: open ? '−' : '+' })] }), _jsx("div", { className: cn('mdk-multi-level-select__section-body', !open && 'mdk-multi-level-select__section-body--collapsed'), children: children })] }));
+};
+MultiLevelSelectSection.displayName = 'MultiLevelSelect.Section';
+/**
+ * Multi-level select component with collapsible sections.
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+export const MultiLevelSelect = {
+    Root: MultiLevelSelectRoot,
+    Trigger: MultiLevelSelectTrigger,
+    Value: MultiLevelSelectValue,
+    Content: MultiLevelSelectContent,
+    Item: MultiLevelSelectItem,
+    Section: MultiLevelSelectSection,
+};

package/dist/primitives/components/multi-level-select/multi-level-select.example.d.ts

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

package/dist/primitives/components/multi-level-select/multi-level-select.example.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for MultiLevelSelect.
+ */
+import { useState } from 'react';
+import { MultiLevelSelect } from '@tetherto/mdk-react-devkit';
+export const MultiLevelSelectExample = () => {
+    const [worker, setWorker] = useState('');
+    return (_jsx("div", { className: "mdk-example-col", children: _jsxs(MultiLevelSelect.Root, { value: worker, onValueChange: setWorker, children: [_jsx(MultiLevelSelect.Trigger, { children: _jsx(MultiLevelSelect.Value, { placeholder: "Select worker..." }) }), _jsxs(MultiLevelSelect.Content, { children: [_jsxs(MultiLevelSelect.Section, { sectionTitle: "Foundry EU", defaultOpen: true, children: [_jsx(MultiLevelSelect.Item, { value: "worker-eu-1", children: "Worker EU-1" }), _jsx(MultiLevelSelect.Item, { value: "worker-eu-2", children: "Worker EU-2" })] }), _jsx(MultiLevelSelect.Section, { sectionTitle: "AntPool", children: _jsx(MultiLevelSelect.Item, { value: "worker-ap-1", children: "Worker AP-1" }) })] })] }) }));
+};

package/dist/primitives/components/multi-select/index.d.ts

@@ -0,0 +1,79 @@
+import { type ReactNode } from 'react';
+export type MultiSelectSize = 'sm' | 'md' | 'lg';
+export type MultiSelectVariant = 'default' | 'colored';
+export type MultiSelectOption = {
+    /** Value added to or removed from the selection; matched by strict equality, and also the React key */
+    value: string;
+    /** Shown in the option row and on the selected chip; a string label also names the chip's remove button */
+    label: ReactNode;
+    /** Option is shown but cannot be toggled from the list; an already-selected one can still be removed via its chip */
+    disabled?: boolean;
+};
+export type MultiSelectProps = {
+    /** `{ value, label, disabled? }` entries to render as option rows */
+    options: MultiSelectOption[];
+    /** Controlled selected values. Omit to use `defaultValue` for uncontrolled mode. */
+    value?: string[];
+    /**
+     * Initial values for uncontrolled mode. Ignored when `value` is provided.
+     * @default []
+     */
+    defaultValue?: string[];
+    /** Fires with the next array on toggle / chip remove / clear-all */
+    onValueChange?: (next: string[]) => void;
+    /**
+     * Rendered when nothing is selected
+     * @default 'Select...'
+     */
+    placeholder?: ReactNode;
+    /**
+     * Disables the trigger (popover does not open)
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Trigger sizing tokens. Mirror the `<Select>` sizes.
+     * @default 'lg'
+     */
+    size?: MultiSelectSize;
+    /**
+     * `'colored'` paints the trigger in the primary tint (matches `<Select>`'s colored variant)
+     * @default 'default'
+     */
+    variant?: MultiSelectVariant;
+    /**
+     * Rendered inside the popover when `options` is empty.
+     * @default 'No options'
+     */
+    emptyMessage?: ReactNode;
+    /**
+     * Max number of selected chips rendered in the trigger before collapsing the rest into a
+     * "+N more" badge. `undefined` (default) renders every chip.
+     */
+    maxSelectedDisplay?: number;
+    /** Extra class on the trigger button */
+    className?: string;
+    /** Extra class on the popover content */
+    contentClassName?: string;
+    /** Accessible label - applied to the trigger button. */
+    'aria-label'?: string;
+    id?: string;
+    name?: string;
+};
+/**
+ * Multi-select picker built on Radix Popover + Checkbox. Sibling to `<Select>`
+ * for cases where consumers need to pick more than one option (filter rows,
+ * multi-target actions, tag-style inputs). The popover stays open on toggle;
+ * Esc / outside-click closes it. Selected values render as removable chips in
+ * the trigger, with an optional "clear all" affordance and a `+N more`
+ * overflow chip via `maxSelectedDisplay`.
+ *
+ * Controlled vs uncontrolled is decided by the presence of `value` (mirrors
+ * Radix Select's convention): pass `value` for controlled, `defaultValue` for
+ * uncontrolled.
+ *
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const MultiSelect: import("react").ForwardRefExoticComponent<MultiSelectProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/primitives/components/multi-select/index.js

@@ -0,0 +1,191 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import _includes from 'lodash/includes';
+import _isString from 'lodash/isString';
+import _map from 'lodash/map';
+import { forwardRef, useCallback, useId, useMemo, useRef, useState, } from 'react';
+import { Checkbox } from '../checkbox';
+import { Popover, PopoverContent, PopoverTrigger } from '../popover';
+import { cn } from '../../utils';
+import { runOnEnterOrSpace } from './keyboard-activation';
+const ChevronDownIcon = ({ className }) => (_jsx("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.276 8.652a.91.91 0 0 1 1.272.024L12 13.402l4.452-4.726a.91.91 0 0 1 1.296 1.272l-5.1 5.4a.91.91 0 0 1-1.296 0l-5.1-5.4a.91.91 0 0 1 .024-1.296Z", fill: "currentColor" }) }));
+const CloseIcon = ({ className }) => (_jsxs("svg", { className: className, xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }));
+const arraysEqual = (a, b) => {
+    if (a === b)
+        return true;
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i++) {
+        if (a[i] !== b[i])
+            return false;
+    }
+    return true;
+};
+/**
+ * Multi-select picker built on Radix Popover + Checkbox. Sibling to `<Select>`
+ * for cases where consumers need to pick more than one option (filter rows,
+ * multi-target actions, tag-style inputs). The popover stays open on toggle;
+ * Esc / outside-click closes it. Selected values render as removable chips in
+ * the trigger, with an optional "clear all" affordance and a `+N more`
+ * overflow chip via `maxSelectedDisplay`.
+ *
+ * Controlled vs uncontrolled is decided by the presence of `value` (mirrors
+ * Radix Select's convention): pass `value` for controlled, `defaultValue` for
+ * uncontrolled.
+ *
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ */
+export const MultiSelect = forwardRef(({ options, value, defaultValue, onValueChange, placeholder = 'Select...', disabled = false, size = 'lg', variant = 'default', emptyMessage = 'No options', maxSelectedDisplay, className, contentClassName, 'aria-label': ariaLabel, id, name, }, ref) => {
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? []);
+    const selected = isControlled ? value : uncontrolledValue;
+    const [open, setOpen] = useState(false);
+    const [activeIdx, setActiveIdx] = useState(0);
+    const optionRefs = useRef([]);
+    const generatedId = useId();
+    const triggerId = id ?? generatedId;
+    const commit = useCallback((next) => {
+        if (!isControlled)
+            setUncontrolledValue(next);
+        if (!arraysEqual(next, selected))
+            onValueChange?.(next);
+    }, [isControlled, onValueChange, selected]);
+    const toggle = useCallback((optionValue) => {
+        const isSelected = _includes(selected, optionValue);
+        const next = isSelected
+            ? selected.filter((v) => v !== optionValue)
+            : [...selected, optionValue];
+        commit(next);
+    }, [commit, selected]);
+    const removeOne = useCallback((optionValue) => {
+        commit(selected.filter((v) => v !== optionValue));
+    }, [commit, selected]);
+    const clearAll = useCallback(() => {
+        commit([]);
+    }, [commit]);
+    const labelByValue = useMemo(() => {
+        const map = new Map();
+        for (const opt of options)
+            map.set(opt.value, opt.label);
+        return map;
+    }, [options]);
+    const selectedOptions = useMemo(() => selected.map((v) => ({ value: v, label: labelByValue.get(v) ?? v })), [labelByValue, selected]);
+    const visibleChips = typeof maxSelectedDisplay === 'number' && maxSelectedDisplay >= 0
+        ? selectedOptions.slice(0, maxSelectedDisplay)
+        : selectedOptions;
+    const overflowCount = selectedOptions.length - visibleChips.length;
+    const focusOption = useCallback((idx) => {
+        const el = optionRefs.current[idx];
+        if (el) {
+            el.focus();
+        }
+    }, []);
+    const handleContentKeyDown = (event) => {
+        if (options.length === 0)
+            return;
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            const next = Math.min(activeIdx + 1, options.length - 1);
+            setActiveIdx(next);
+            focusOption(next);
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            const next = Math.max(activeIdx - 1, 0);
+            setActiveIdx(next);
+            focusOption(next);
+        }
+        else if (event.key === 'Home') {
+            event.preventDefault();
+            setActiveIdx(0);
+            focusOption(0);
+        }
+        else if (event.key === 'End') {
+            event.preventDefault();
+            const next = options.length - 1;
+            setActiveIdx(next);
+            focusOption(next);
+        }
+    };
+    const stopChipClickFromOpeningPopover = (event) => {
+        event.stopPropagation();
+    };
+    const onChipRemove = (event, optionValue) => {
+        stopChipClickFromOpeningPopover(event);
+        event.preventDefault();
+        if (disabled) {
+            return;
+        }
+        removeOne(optionValue);
+    };
+    const onClearAllClick = (event) => {
+        stopChipClickFromOpeningPopover(event);
+        event.preventDefault();
+        if (disabled)
+            return;
+        clearAll();
+    };
+    const onChipClearKeyDown = (event, optionValue) => {
+        runOnEnterOrSpace(event, () => {
+            if (disabled) {
+                return;
+            }
+            removeOne(optionValue);
+        });
+    };
+    const onClearAllKeyDown = (event) => {
+        runOnEnterOrSpace(event, () => {
+            if (disabled) {
+                return;
+            }
+            clearAll();
+        });
+    };
+    const handleOptionFocus = (event) => {
+        if (event.currentTarget !== event.target) {
+            return;
+        }
+        const idx = Number(event.currentTarget.dataset.index);
+        setActiveIdx(idx);
+    };
+    const activateOption = (idx) => {
+        const opt = options[idx];
+        if (!opt || opt.disabled) {
+            return;
+        }
+        toggle(opt.value);
+    };
+    const handleOptionClick = (event) => {
+        event.preventDefault();
+        activateOption(Number(event.currentTarget.dataset.index));
+    };
+    const handleOptionKeyDown = (event) => {
+        runOnEnterOrSpace(event, () => {
+            activateOption(Number(event.currentTarget.dataset.index));
+        });
+    };
+    const handleCheckboxClick = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: (next) => !disabled && setOpen(next), children: [_jsxs(PopoverTrigger, { ref: ref, id: triggerId, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-label": ariaLabel, "aria-disabled": disabled || undefined, "data-disabled": disabled || undefined, "data-placeholder": selected.length === 0 || undefined, disabled: disabled, name: name, className: cn('mdk-multi-select__trigger', `mdk-multi-select__trigger--${size}`, variant === 'colored' && 'mdk-multi-select__trigger--colored', className), children: [_jsx("div", { className: "mdk-multi-select__chips", children: selected.length === 0 ? (_jsx("span", { className: "mdk-multi-select__placeholder", children: placeholder })) : (_jsxs(_Fragment, { children: [visibleChips.map((chip) => (_jsxs("span", { className: "mdk-multi-select__token", children: [_jsx("span", { className: "mdk-multi-select__token-label", children: chip.label }), _jsx("span", { role: "button", tabIndex: disabled ? -1 : 0, "aria-label": _isString(chip.label) ? `Remove ${chip.label}` : `Remove ${chip.value}`, className: "mdk-multi-select__token-clear", onMouseDown: stopChipClickFromOpeningPopover, onPointerDown: stopChipClickFromOpeningPopover, onClick: (event) => onChipRemove(event, chip.value), onKeyDown: (event) => onChipClearKeyDown(event, chip.value), children: _jsx(CloseIcon, {}) })] }, chip.value))), overflowCount > 0 && (_jsxs("span", { className: "mdk-multi-select__token mdk-multi-select__token--overflow", children: ["+", overflowCount, " more"] }))] })) }), selected.length >= 2 && (_jsx("span", { role: "button", tabIndex: disabled ? -1 : 0, "aria-label": "Clear all", className: "mdk-multi-select__clear-all", onMouseDown: stopChipClickFromOpeningPopover, onPointerDown: stopChipClickFromOpeningPopover, onClick: onClearAllClick, onKeyDown: onClearAllKeyDown, children: _jsx(CloseIcon, {}) })), _jsx(ChevronDownIcon, { className: "mdk-multi-select__icon" })] }), _jsx(PopoverContent, { align: "start", sideOffset: 4, className: cn('mdk-multi-select__content', contentClassName), onKeyDown: handleContentKeyDown, 
+                // Radix returns focus to the trigger on close - we want it to stay there.
+                onOpenAutoFocus: (event) => {
+                    // Move focus to the first option (or first selected one) when the popover opens.
+                    event.preventDefault();
+                    const initial = Math.max(0, options.findIndex((opt) => selected.includes(opt.value)));
+                    const idx = initial === -1 ? 0 : initial;
+                    setActiveIdx(idx);
+                    // Wait for the option ref to be attached before focusing.
+                    queueMicrotask(() => focusOption(idx));
+                }, children: options.length === 0 ? (_jsx("div", { className: "mdk-multi-select__empty", children: emptyMessage })) : (_jsx("div", { role: "listbox", "aria-multiselectable": "true", className: "mdk-multi-select__list", children: _map(options, (opt, idx) => {
+                        const { value: optValue, label: optLabel, disabled: optDisabled } = opt;
+                        const isSelected = _includes(selected, optValue);
+                        const isOptionDisabled = Boolean(optDisabled);
+                        return (_jsxs("div", { ref: (el) => {
+                                optionRefs.current[idx] = el;
+                            }, role: "option", "data-index": idx, "aria-selected": isSelected, "aria-disabled": isOptionDisabled || undefined, "data-disabled": isOptionDisabled || undefined, "data-state": isSelected ? 'checked' : 'unchecked', tabIndex: isOptionDisabled ? -1 : idx === activeIdx ? 0 : -1, className: "mdk-multi-select__option", onFocus: handleOptionFocus, onClick: isOptionDisabled ? undefined : handleOptionClick, onKeyDown: isOptionDisabled ? undefined : handleOptionKeyDown, children: [_jsx(Checkbox, { checked: isSelected, disabled: isOptionDisabled, "aria-hidden": true, tabIndex: -1, className: "mdk-multi-select__option-checkbox", onClick: handleCheckboxClick }), _jsx("span", { className: "mdk-multi-select__option-label", children: optLabel })] }, optValue));
+                    }) })) })] }));
+});
+MultiSelect.displayName = 'MultiSelect';

package/dist/primitives/components/multi-select/keyboard-activation.d.ts

@@ -0,0 +1,4 @@
+import type { KeyboardEvent } from 'react';
+export type KeyboardActivationEvent = Pick<KeyboardEvent, 'key' | 'preventDefault'>;
+export declare const isEnterOrSpaceKey: (key: string) => boolean;
+export declare const runOnEnterOrSpace: (event: KeyboardActivationEvent, action: VoidFunction) => void;

package/dist/primitives/components/multi-select/keyboard-activation.js

@@ -0,0 +1,8 @@
+export const isEnterOrSpaceKey = (key) => key === 'Enter' || key === ' ';
+export const runOnEnterOrSpace = (event, action) => {
+    if (!isEnterOrSpaceKey(event.key)) {
+        return;
+    }
+    event.preventDefault();
+    action();
+};

package/dist/primitives/components/multi-select/multi-select.example.d.ts

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

package/dist/primitives/components/multi-select/multi-select.example.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Runnable example for MultiSelect.
+ */
+import { MultiSelect } from '@tetherto/mdk-react-devkit/primitives';
+import { useState } from 'react';
+const MINER_TYPES = [
+    { value: 'miner-am-s19xp', label: 'Antminer S19XP' },
+    { value: 'miner-wm-m56s', label: 'WhatsMiner M56S' },
+    { value: 'miner-av-a1346', label: 'Avalon A1346' },
+    { value: 'miner-demo-m1', label: 'Demo M1' },
+];
+export const MultiSelectExample = () => {
+    const [selected, setSelected] = useState([]);
+    return (_jsx(MultiSelect, { options: MINER_TYPES, value: selected, onValueChange: setSelected, placeholder: "Filter by miner type", maxSelectedDisplay: 2 }));
+};

package/dist/primitives/components/not-found-page/index.d.ts

@@ -0,0 +1,34 @@
+export type NotFoundPageProps = {
+    /**
+     * Callback fired when the "Go Home" button is clicked
+     */
+    onGoHome?: VoidFunction;
+    /**
+     * Page title
+     * @default "404"
+     */
+    title?: string;
+    /**
+     * Message displayed below the title
+     * @default "The page you are looking for does not exist."
+     */
+    message?: string;
+    /**
+     * Additional CSS class name
+     */
+    className?: string;
+};
+/**
+ * Full-page 404 view with a heading, supporting copy, and a primary call-to-action back to safety.
+ *
+ * @example
+ * ```tsx
+ * <NotFoundPage onGoHome={() => navigate('/')} />
+ * <NotFoundPage title="Page Not Found" message="Check the URL and try again." />
+ * ```
+ * @category pages
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const NotFoundPage: import("react").ForwardRefExoticComponent<NotFoundPageProps & import("react").RefAttributes<HTMLDivElement>>;
+export { NotFoundPage };

package/dist/primitives/components/not-found-page/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HomeIcon } from '@radix-ui/react-icons';
+import { Button } from '../button';
+import { cn } from '../../utils';
+import { forwardRef } from 'react';
+/**
+ * Full-page 404 view with a heading, supporting copy, and a primary call-to-action back to safety.
+ *
+ * @example
+ * ```tsx
+ * <NotFoundPage onGoHome={() => navigate('/')} />
+ * <NotFoundPage title="Page Not Found" message="Check the URL and try again." />
+ * ```
+ * @category pages
+ * @domain generic
+ * @tier agent-ready
+ */
+const NotFoundPage = forwardRef(({ onGoHome, title = '404', message = 'The page you are looking for does not exist.', className, ...props }, ref) => {
+    return (_jsxs("div", { ref: ref, className: cn('mdk-not-found-page', className), ...props, children: [_jsx("div", { className: "mdk-not-found-page__title", children: title }), _jsx("div", { className: "mdk-not-found-page__message", children: message }), onGoHome && (_jsx(Button, { variant: "primary", icon: _jsx(HomeIcon, {}), onClick: onGoHome, className: "mdk-not-found-page__button", children: "Go Home" }))] }));
+});
+NotFoundPage.displayName = 'NotFoundPage';
+export { NotFoundPage };

package/dist/primitives/components/not-found-page/not-found-page.example.d.ts

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

package/dist/primitives/components/not-found-page/not-found-page.example.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for NotFoundPage.
+ */
+import { NotFoundPage } from '@tetherto/mdk-react-devkit';
+export const NotFoundPageExample = () => (_jsxs("div", { className: "mdk-example-row", style: { display: 'flex', flexDirection: 'column', gap: 32 }, children: [_jsx(NotFoundPage, { onGoHome: () => {
+                /* navigate home */
+            } }), _jsx(NotFoundPage, { title: "Page Not Found", message: "Check the URL and try again.", onGoHome: () => {
+                /* navigate home */
+            } }), _jsx(NotFoundPage, { title: "403", message: "You do not have permission to view this page." })] }));

package/dist/primitives/components/operations-energy-cost-chart/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const DEFAULT: {
+    height: number;
+    title: string;
+    unit: string;
+};
+export declare const CONFIG: {
+    cutout: string;
+    borderWidth: number;
+};