@tetherto/mdk-react-devkit 0.0.0 → 0.12.1

package/dist/primitives/components/line-chart/line-chart.constants.d.ts

@@ -0,0 +1,51 @@
+export declare const TOOLTIP_DEFAULT_OFFSET = 10;
+export declare const SCALE_PADDING_FACTOR_FOR_INT = 0.04;
+export declare const SCALE_PADDING_FACTOR_FOR_FLOAT = 0.02;
+export declare const SCALE_MIN_PADDING = 1.2;
+export declare const MARGIN_ABOVE_FACTOR = 0.3;
+export declare const MARGIN_BELOW_FACTOR = 0.2;
+export declare const GAP = 20;
+export declare const OFFSET = 5;
+export declare const VISIBLE_POINTS_BY_TIMELINE: Record<string, number>;
+export declare const CHART_COLORS: {
+    EBONY: string;
+    WHITE_ALPHA_01: string;
+    WHITE_ALPHA_02: string;
+    WHITE_ALPHA_06: string;
+};
+export declare const CHART_MIN_HEIGHT = 400;
+export declare const DEFAULT_QUERY_LIMIT = 288;
+declare const TIMELINE_CONFIG: {
+    readonly '20s': {
+        readonly ms: number;
+        readonly format: 'HH:mm:ss';
+    };
+    readonly '1m': {
+        readonly ms: number;
+        readonly format: 'HH:mm';
+    };
+    readonly '5m': {
+        readonly ms: number;
+        readonly format: 'HH:mm';
+    };
+    readonly '30m': {
+        readonly ms: number;
+        readonly format: 'HH:mm';
+    };
+    readonly '1h': {
+        readonly ms: number;
+        readonly format: 'HH:mm';
+    };
+    readonly '3h': {
+        readonly ms: number;
+        readonly format: 'HH:mm';
+    };
+    readonly '1D': {
+        readonly ms: number;
+        readonly format: 'MMM dd';
+    };
+};
+export type Timeline = keyof typeof TIMELINE_CONFIG;
+export declare const timelineToMs: (timeline: string) => number;
+export declare const getTimelineDateFormat: (timeline: string) => string;
+export {};

package/dist/primitives/components/line-chart/line-chart.constants.js

@@ -0,0 +1,37 @@
+export const TOOLTIP_DEFAULT_OFFSET = 10;
+export const SCALE_PADDING_FACTOR_FOR_INT = 0.04;
+export const SCALE_PADDING_FACTOR_FOR_FLOAT = 0.02;
+export const SCALE_MIN_PADDING = 1.2;
+export const MARGIN_ABOVE_FACTOR = 0.3;
+export const MARGIN_BELOW_FACTOR = 0.2;
+export const GAP = 20;
+export const OFFSET = 5;
+export const VISIBLE_POINTS_BY_TIMELINE = {
+    '1m': 15,
+    '5m': 12,
+    '30m': 12,
+    '3h': 12,
+    '1D': 14,
+};
+export const CHART_COLORS = {
+    EBONY: '#0f0f0f',
+    WHITE_ALPHA_01: '#FFFFFF1A',
+    WHITE_ALPHA_02: '#FFFFFF33',
+    WHITE_ALPHA_06: '#FFFFFF99',
+};
+// Line chart card constants
+export const CHART_MIN_HEIGHT = 400;
+export const DEFAULT_QUERY_LIMIT = 288;
+const TIMELINE_CONFIG = {
+    '20s': { ms: 20 * 1000, format: 'HH:mm:ss' },
+    '1m': { ms: 60 * 1000, format: 'HH:mm' },
+    '5m': { ms: 5 * 60 * 1000, format: 'HH:mm' },
+    '30m': { ms: 30 * 60 * 1000, format: 'HH:mm' },
+    '1h': { ms: 60 * 60 * 1000, format: 'HH:mm' },
+    '3h': { ms: 3 * 60 * 60 * 1000, format: 'HH:mm' },
+    '1D': { ms: 24 * 60 * 60 * 1000, format: 'MMM dd' },
+};
+const DEFAULT_TIMELINE_CONFIG = { ms: 60 * 60 * 1000, format: 'HH:mm' };
+const getTimeline = (timeline) => TIMELINE_CONFIG[timeline] ?? DEFAULT_TIMELINE_CONFIG;
+export const timelineToMs = (timeline) => getTimeline(timeline).ms;
+export const getTimelineDateFormat = (timeline) => getTimeline(timeline).format;

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

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

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Runnable example for LineChart.
+ */
+import { LineChart } from '@tetherto/mdk-react-devkit';
+const NOW = Date.now();
+const MIN = 60 * 1000;
+const points = Array.from({ length: 90 }, (_, i) => ({
+    x: NOW - (90 - i) * MIN,
+    y: 50 + Math.sin(i / 8) * 6 + Math.random() * 1.2,
+}));
+const data = {
+    datasets: [
+        {
+            label: 'Hashrate',
+            borderColor: '#4f9ef5',
+            borderWidth: 2,
+            data: points,
+        },
+    ],
+};
+export const LineChartExample = () => {
+    return _jsx(LineChart, { data: data, height: 320, unit: "TH/s" });
+};

package/dist/primitives/components/line-chart/line-chart.utils.d.ts

@@ -0,0 +1,54 @@
+import type { BarData, CustomData, HistogramData, ISeriesApi, LineData, SeriesType, Time } from 'lightweight-charts';
+export type LineDataPoint = {
+    x: number;
+    y: number | null | undefined;
+};
+export type ExtraTooltipData = Record<number, string>;
+export type LineDataset = {
+    label?: string;
+    visible?: boolean;
+    borderColor: string;
+    borderWidth?: number;
+    extraTooltipData?: ExtraTooltipData;
+    data: LineDataPoint[];
+};
+export type LineChartData = {
+    datasets: LineDataset[];
+};
+export type LineSeriesApi = ISeriesApi<'Line', Time>;
+export type SeriesDataMap = Map<ISeriesApi<SeriesType, Time>, BarData<Time> | LineData<Time> | HistogramData<Time> | CustomData<Time>>;
+export declare const getTooltipPosition: (clientX: number, clientY: number, tooltipWidth: number, tooltipHeight: number, tooltipOffset?: number) => {
+    left: number;
+    top: number;
+};
+export declare const autoscaleProvider: (beginAtZero: boolean) => (original: () => {
+    priceRange: {
+        minValue: number;
+        maxValue: number;
+    };
+    margins?: {
+        above: number;
+        below: number;
+    };
+} | null) => {
+    priceRange: {
+        minValue: number;
+        maxValue: number;
+    };
+    margins: {
+        above: number;
+        below: number;
+    };
+} | null;
+type BuildTooltipParams = {
+    seriesData: SeriesDataMap;
+    seriesToDatasetMap: Map<LineSeriesApi, LineDataset>;
+    yTicksFormatter?: (value: number) => string;
+    unit?: string;
+    customLabel?: string;
+    showDateInTooltip?: boolean;
+    skipMinWidth?: boolean;
+};
+export declare const buildTooltipHTML: ({ seriesData, seriesToDatasetMap, yTicksFormatter, unit, customLabel, showDateInTooltip, skipMinWidth, }: BuildTooltipParams) => string;
+export declare const getVisibleDataPointsForTimeline: (timeline: string) => number;
+export {};

package/dist/primitives/components/line-chart/line-chart.utils.js

@@ -0,0 +1,105 @@
+import { format } from 'date-fns/format';
+import _isNumber from 'lodash/isNumber';
+import _isObject from 'lodash/isObject';
+import _trim from 'lodash/trim';
+import { MARGIN_ABOVE_FACTOR, MARGIN_BELOW_FACTOR, SCALE_MIN_PADDING, SCALE_PADDING_FACTOR_FOR_FLOAT, SCALE_PADDING_FACTOR_FOR_INT, TOOLTIP_DEFAULT_OFFSET, VISIBLE_POINTS_BY_TIMELINE, } from './line-chart.constants';
+export const getTooltipPosition = (clientX, clientY, tooltipWidth, tooltipHeight, tooltipOffset = TOOLTIP_DEFAULT_OFFSET) => {
+    let left = clientX + tooltipOffset;
+    let top = clientY + tooltipOffset;
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    if (left + tooltipWidth > viewportWidth) {
+        left = clientX - tooltipWidth - tooltipOffset;
+    }
+    if (left < 0) {
+        if (tooltipWidth > clientX && tooltipWidth > viewportWidth - clientX) {
+            left = Math.max(tooltipOffset, (viewportWidth - tooltipWidth) / 2);
+        }
+        else {
+            left =
+                clientX > viewportWidth / 2
+                    ? clientX - tooltipWidth - tooltipOffset
+                    : clientX + tooltipOffset;
+        }
+    }
+    if (top + tooltipHeight > viewportHeight) {
+        top = clientY - tooltipHeight - tooltipOffset;
+    }
+    if (top < 0) {
+        top = tooltipOffset;
+    }
+    return { left, top };
+};
+export const autoscaleProvider = (beginAtZero) => (original) => {
+    const res = original();
+    if (!res)
+        return res;
+    let { minValue, maxValue } = res.priceRange;
+    if (minValue === maxValue) {
+        const padding = Number.isInteger(minValue)
+            ? SCALE_PADDING_FACTOR_FOR_INT
+            : SCALE_PADDING_FACTOR_FOR_FLOAT;
+        const base = Math.max(Math.abs(minValue) * padding, SCALE_MIN_PADDING);
+        minValue -= base;
+        maxValue += base;
+    }
+    if (beginAtZero) {
+        minValue = Math.min(0, minValue);
+    }
+    return {
+        priceRange: { minValue, maxValue },
+        margins: {
+            above: MARGIN_ABOVE_FACTOR,
+            below: MARGIN_BELOW_FACTOR,
+        },
+    };
+};
+export const buildTooltipHTML = ({ seriesData, seriesToDatasetMap, yTicksFormatter, unit = '', customLabel, showDateInTooltip = false, skipMinWidth = false, }) => {
+    let tooltipHTML = '';
+    let extraTooltipHTML = '';
+    for (const [series, point] of seriesData.entries()) {
+        const dataset = seriesToDatasetMap.get(series);
+        if (!dataset || dataset.visible === false)
+            continue;
+        if (point === undefined || point === null)
+            continue;
+        if (!('value' in point) || point.value === undefined || point.value === null)
+            continue;
+        const { label, borderColor, extraTooltipData } = dataset;
+        const value = point.value;
+        const pointTime = point?.time;
+        let timestamp;
+        if (_isNumber(pointTime)) {
+            timestamp = pointTime;
+        }
+        else if (_isObject(pointTime) && 'timestamp' in pointTime) {
+            timestamp = pointTime.timestamp;
+        }
+        const formattedValue = yTicksFormatter ? yTicksFormatter(value) : String(value);
+        const valueWithUnit = unit && !formattedValue.includes(unit) ? `${formattedValue} ${unit}` : formattedValue;
+        tooltipHTML += `
+      <div style="
+        display: flex;
+        justify-content: space-between;
+        font-size: 12px;
+        line-height: 16px;
+        margin-bottom: ${skipMinWidth ? 'unset' : '12px'};
+        gap: ${skipMinWidth ? '8px' : 'unset'};
+      ">
+        ${showDateInTooltip && timestamp
+            ? `<span>${format(new Date(timestamp * 1000), 'MM-dd-yyyy')}</span>`
+            : ''}
+        <span style="margin-right: 8px;">${label || customLabel || ''}</span>
+        <span style="color: ${borderColor}">${valueWithUnit}</span>
+      </div>
+    `;
+        if (!extraTooltipHTML && timestamp && extraTooltipData?.[timestamp]) {
+            const content = extraTooltipData[timestamp];
+            if (content) {
+                extraTooltipHTML = content;
+            }
+        }
+    }
+    return _trim(tooltipHTML + extraTooltipHTML);
+};
+export const getVisibleDataPointsForTimeline = (timeline) => VISIBLE_POINTS_BY_TIMELINE[timeline] ?? 24;

package/dist/primitives/components/line-chart/types.d.ts

@@ -0,0 +1,118 @@
+import type { IChartApi, ISeriesApi, Time } from 'lightweight-charts';
+import type { MutableRefObject } from 'react';
+export type { IChartApi } from 'lightweight-charts';
+export type LineDataPoint = {
+    x: number;
+    y: number | null | undefined;
+};
+export type ExtraTooltipData = Record<number, string>;
+export type LineDataset = {
+    label?: string;
+    visible?: boolean;
+    borderColor: string;
+    borderWidth?: number;
+    extraTooltipData?: ExtraTooltipData;
+    data: LineDataPoint[];
+};
+export type LineSeriesApi = ISeriesApi<'Line', Time>;
+export type LineChartData = {
+    /** One line series per entry; `visible: false` hides a series without removing it */
+    datasets: LineDataset[];
+};
+export type LightWeightLineChartProps = {
+    /**
+     * Mutable ref to hold the LightWeightCharts reference
+     */
+    chartRef?: MutableRefObject<IChartApi | null>;
+    /**
+     * Data of the chart
+     */
+    data: LineChartData;
+    /**
+     * Callback to format ticks on y axis. If `priceFormatter` is given. It would be used instead.
+     */
+    yTicksFormatter?: (value: number) => string;
+    /**
+     * TODO: Doc
+     */
+    customLabel?: string;
+    /**
+     * Callback to format ticks on y axis.
+     */
+    priceFormatter?: (value: number) => string;
+    /**
+     * The number of decimals to show
+     */
+    roundPrecision?: number;
+    /**
+     * TODO: DOC
+     */
+    timeline?: string;
+    /**
+     * Applies offset if provided, otherwise timestamps are assumed to already be in local time.
+     * Otherwise, use browser's current timezone offset for consistent time display
+     */
+    fixedTimezone?: string;
+    /**
+     * Wether to Reset Zoom
+     */
+    shouldResetZoom?: boolean;
+    /**
+     * Prevent rounding of values
+     */
+    skipRound?: boolean;
+    /**
+     * Do not enforce a min width
+     */
+    skipMinWidth?: boolean;
+    /**
+     * Use a faded background
+     */
+    fadedBackground?: boolean;
+    /**
+     * Background color of the chart
+     */
+    backgroundColor?: string;
+    /**
+     * Custom date format
+     */
+    customDateFormat?: string;
+    /**
+     * Show vertical line at mouse position
+     */
+    verticalLineLabelVisible?: boolean;
+    /**
+     * Show horizontal line at mouse position
+     */
+    horizontalLineLabelVisible?: boolean;
+    /**
+     * Show date line in tooltip
+     */
+    showDateInTooltip?: boolean;
+    /**
+     * Disable automatically determining range
+     */
+    disableAutoRange?: boolean;
+    /**
+     * Changes horizontal scale marks generation. With this flag equal to true, marks of the same weight are either all drawn or none are drawn at all.
+     */
+    uniformDistribution?: boolean;
+    /**
+     * The unit to display with values
+     * @default ""
+     */
+    unit?: string;
+    /**
+     * Starts the value axis at 0
+     */
+    beginAtZero?: boolean;
+    /**
+     * Show a marker on the line
+     */
+    showPointMarkers?: boolean;
+    /**
+     * Controls the height of the chart
+     * @default 240
+     */
+    height?: number;
+};

package/dist/primitives/components/line-chart/types.js

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

package/dist/primitives/components/list-view-filter/index.d.ts

@@ -0,0 +1,37 @@
+import type { CascaderOption, CascaderValue } from '../cascader';
+export type LocalFilters = Record<string, string | number | boolean | (string | number | boolean)[]>;
+type ListViewFilterProps = {
+    /**
+     * Cascader options for filtering
+     */
+    options: CascaderOption[];
+    /**
+     * Optional key to force re-mounting the Cascader when filters change
+     * Useful if you want to reset the internal state of the Cascader when filters change
+     * @default 'default'
+     */
+    filterKey?: string;
+    /**
+     * Current filter values as key-value pairs
+     * Example: { type: 'Antminer S19XP H', status: ['active', 'pending'] }
+     */
+    localFilters?: LocalFilters;
+    /**
+     * Callback when filters change
+     * @param selections - Array of selected filter paths
+     */
+    onChange: (selections: CascaderValue[]) => void;
+    /**
+     * Custom className for the filter button
+     */
+    className?: string;
+};
+/**
+ * Toolbar of dropdown/checkbox filters that drive a list view; emits the active filter set to the parent.
+ *
+ * @category filters
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const ListViewFilter: import("react").ForwardRefExoticComponent<ListViewFilterProps & import("react").RefAttributes<HTMLDivElement>>;
+export { ListViewFilter };

package/dist/primitives/components/list-view-filter/index.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../utils';
+import { Badge } from '../badge';
+import { Button } from '../button';
+import { Popover, PopoverContent, PopoverTrigger } from '../popover';
+import { Cascader } from '../cascader';
+import { Typography } from '../typography';
+import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
+/**
+ * ListViewFilter - Filter button with cascader dropdown
+ *
+ * Features:
+ * - Filter icon button with count badge
+ * - Cascader dropdown for hierarchical filtering
+ * - Multiple selection support
+ * - Tag display for selected filters
+ * - Auto-sync with URL params
+ *
+ * @example
+ * ```tsx
+ * const filterOptions = [
+ *   {
+ *     value: 'type',
+ *     label: 'Type',
+ *     children: [
+ *       { value: 'Antminer S19XP', label: 'Antminer S19XP' },
+ *       { value: 'Avalon A1346', label: 'Avalon A1346' }
+ *     ]
+ *   }
+ * ]
+ *
+ * <ListViewFilter
+ *   options={filterOptions}
+ *   localFilters={filters}
+ *   onChange={handleFilterChange}
+ * />
+ * ```
+ */
+const FilterIcon = () => {
+    return (_jsx("svg", { viewBox: "64 64 896 896", focusable: "false", "data-icon": "filter", width: "1em", height: "1em", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M880.1 154H143.9c-24.5 0-39.8 26.7-27.5 48L349 597.4V838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V597.4L907.7 202c12.2-21.3-3.1-48-27.6-48zM603.4 798H420.6V642h182.9v156zm9.6-236.6l-9.5 16.6h-183l-9.5-16.6L212.7 226h598.6L613 561.4z" }) }));
+};
+/**
+ * Toolbar of dropdown/checkbox filters that drive a list view; emits the active filter set to the parent.
+ *
+ * @category filters
+ * @domain generic
+ * @tier agent-ready
+ */
+const ListViewFilter = forwardRef(({ options, onChange, localFilters, className, filterKey = 'default' }, ref) => {
+    const [open, setOpen] = useState(false);
+    /**
+     * Convert localFilters object to Cascader value format
+     * Transforms: { type: 'value', status: ['val1', 'val2'] }
+     * To: [['type', 'value'], ['status', 'val1'], ['status', 'val2']]
+     */
+    const cascaderValues = useMemo(() => {
+        if (!localFilters || typeof localFilters !== 'object')
+            return [];
+        const values = [];
+        Object.entries(localFilters).forEach(([key, vals]) => {
+            const optionGroup = options.find(({ value }) => value === key);
+            if (!optionGroup)
+                return;
+            // Handle array of values
+            if (Array.isArray(vals)) {
+                vals.forEach((val) => {
+                    const value = typeof val === 'boolean' ? val : String(val);
+                    // Find the child option to get the correct path
+                    const childOption = optionGroup.children?.find((child) => child.value === value);
+                    if (childOption) {
+                        values.push([key, childOption.value]);
+                    }
+                });
+            }
+            else {
+                // Handle single value
+                const value = typeof vals === 'boolean' ? vals : String(vals);
+                const childOption = optionGroup.children?.find((child) => child.value === value);
+                if (childOption) {
+                    values.push([key, childOption.value]);
+                }
+            }
+        });
+        return values;
+    }, [localFilters, options]);
+    /**
+     * Handle filter changes from Cascader
+     * Converts Cascader format back to onChange format
+     */
+    const handleFiltersChange = useCallback((selections) => {
+        if (!selections) {
+            onChange([]);
+            return;
+        }
+        const selectionArray = Array.isArray(selections[0])
+            ? selections
+            : [selections];
+        onChange(selectionArray);
+    }, [onChange]);
+    /**
+     * Handle popover open/close
+     */
+    const handleOpenChange = useCallback((newOpen) => {
+        setOpen(newOpen);
+    }, []);
+    /**
+     * Close the popover when the user scrolls outside it. Without this the
+     * Radix Popper recalculates its position on every scroll frame and the
+     * dropdown appears to "jump" along with the page.
+     */
+    useEffect(() => {
+        if (!open)
+            return undefined;
+        const handleScroll = (event) => {
+            const target = event.target;
+            const dropdown = document.querySelector('.mdk-list-view-filter__dropdown');
+            if (target && dropdown && dropdown.contains(target))
+                return;
+            setOpen(false);
+        };
+        window.addEventListener('scroll', handleScroll, true);
+        return () => window.removeEventListener('scroll', handleScroll, true);
+    }, [open]);
+    // Count of active filters
+    const filtersCount = cascaderValues.length;
+    return (_jsx("div", { ref: ref, className: cn('mdk-list-view-filter', className), children: _jsxs(Popover, { open: open, onOpenChange: handleOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("div", { className: "mdk-list-view-filter__trigger", children: _jsx(Badge, { color: "primary", count: filtersCount, size: "sm", children: _jsx(Button, { variant: "secondary", icon: _jsx(FilterIcon, {}), children: "Filter" }) }) }) }), _jsx(PopoverContent, { align: "start", side: "bottom", className: "mdk-list-view-filter__dropdown", sideOffset: 8, children: _jsxs("div", { className: "mdk-list-view-filter__header", children: [_jsx(Typography, { size: "sm", variant: "caption", children: "Filters" }), _jsx("div", { className: "mdk-list-view-filter__content", children: _jsx(Cascader, { options: options, value: cascaderValues, onChange: handleFiltersChange, multiple: true, placeholder: "", dropdownClassName: "mdk-list-view-filter__cascader-dropdown" }, filterKey) })] }) })] }) }));
+});
+ListViewFilter.displayName = 'ListViewFilter';
+export { ListViewFilter };

package/dist/primitives/components/list-view-filter/list-view-filter.example.d.ts

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

package/dist/primitives/components/list-view-filter/list-view-filter.example.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for ListViewFilter.
+ */
+import { useState } from 'react';
+import { ListViewFilter } from '@tetherto/mdk-react-devkit';
+const FILTER_OPTIONS = [
+    {
+        value: 'type',
+        label: 'Type',
+        children: [
+            { value: 'Antminer S19XP', label: 'Antminer S19XP' },
+            { value: 'Avalon A1346', label: 'Avalon A1346' },
+            { value: 'Whatsminer M50', label: 'Whatsminer M50' },
+        ],
+    },
+    {
+        value: 'status',
+        label: 'Status',
+        children: [
+            { value: 'active', label: 'Active' },
+            { value: 'offline', label: 'Offline' },
+            { value: 'sleeping', label: 'Sleeping' },
+        ],
+    },
+    {
+        value: 'location',
+        label: 'Location',
+        children: [
+            { value: 'row-a', label: 'Row A' },
+            { value: 'row-b', label: 'Row B' },
+        ],
+    },
+];
+function selectionToFilters(selections) {
+    const result = {};
+    for (const [key, value] of selections) {
+        if (!result[key])
+            result[key] = [];
+        result[key].push(value);
+    }
+    return result;
+}
+export const ListViewFilterExample = () => {
+    const [filters, setFilters] = useState({});
+    const handleChange = (selections) => {
+        setFilters(selectionToFilters(selections));
+    };
+    let activeCount = 0;
+    for (const v of Object.values(filters)) {
+        activeCount += Array.isArray(v) ? v.length : 1;
+    }
+    return (_jsxs("div", { className: "mdk-example-row", style: { display: 'flex', flexDirection: 'column', gap: 16 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 12 }, children: [_jsx(ListViewFilter, { options: FILTER_OPTIONS, localFilters: filters, onChange: handleChange }), _jsx("span", { style: { fontSize: 13, color: 'var(--mdk-color-text-secondary, #888)' }, children: activeCount > 0 ? `${activeCount} filter(s) active` : 'No filters active' })] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 12 }, children: [_jsx(ListViewFilter, { options: FILTER_OPTIONS, localFilters: { status: ['active'] }, onChange: () => undefined }), _jsx("span", { style: { fontSize: 13, color: 'var(--mdk-color-text-secondary, #888)' }, children: "Pre-seeded: status=active" })] })] }));
+};